/* Global visual theme */
:root {
    --sys-bg: #0b1020;
    --sys-bg-soft: #151b31;
    --sys-panel: rgba(16, 24, 43, 0.92);
    --sys-panel-2: rgba(27, 37, 60, 0.88);
    --sys-line: rgba(148, 163, 184, 0.22);
    --sys-text: #e5e7eb;
    --sys-muted: #94a3b8;
    --sys-primary: #8b5cf6;
    --sys-primary-strong: #7c3aed;
    --sys-accent: #a855f7;
    --sys-secondary: #c084fc;
    --sys-success: #22c55e;
    --sys-danger: #f97316;
    --sys-info: #60a5fa;
    --sys-warning: #f59e0b;
    --sys-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    --cc-zoom-scale: 1;
}

html.cc-vision-protanopia {
    --sys-primary: #f97316;
    --sys-primary-strong: #ea580c;
    --sys-accent: #f97316;
    --sys-secondary: #8b5cf6;
    --sys-success: #06b6d4;
    --sys-danger: #f97316;
    --sys-info: #8b5cf6;
    --sys-warning: #eab308;
}

html.cc-vision-deuteranopia {
    --sys-primary: #f59e0b;
    --sys-primary-strong: #d97706;
    --sys-accent: #f59e0b;
    --sys-secondary: #3b82f6;
    --sys-success: #0ea5e9;
    --sys-danger: #f59e0b;
    --sys-info: #3b82f6;
    --sys-warning: #eab308;
}

html.cc-vision-tritanopia {
    --sys-primary: #ef4444;
    --sys-primary-strong: #dc2626;
    --sys-accent: #ef4444;
    --sys-secondary: #14b8a6;
    --sys-success: #14b8a6;
    --sys-danger: #ef4444;
    --sys-info: #ec4899;
    --sys-warning: #f97316;
}

html.cc-vision-active {
    --kb-primary: var(--sys-primary);
    --kb-primary-strong: var(--sys-primary-strong);
    --kb-accent: var(--sys-accent);
}

html {
    font-size: calc(14px * var(--cc-zoom-scale));
}

body {
    font-size: 1rem;
    line-height: 1.45;
}

body,
button,
input,
select,
textarea {
    font-size: inherit;
}

body.cc-theme-dark,
body.dark-mode {
    color: var(--sys-text);
    background: linear-gradient(rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.82)),
        url("/images/fundo.jpg") center/cover fixed no-repeat;
}

body.cc-theme-dark {
    --sys-bg: #0b1020;
    --sys-bg-soft: #151b31;
    --sys-panel: rgba(16, 24, 43, 0.92);
    --sys-panel-2: rgba(27, 37, 60, 0.88);
    --sys-line: rgba(148, 163, 184, 0.22);
    --sys-text: #e5e7eb;
    --sys-muted: #94a3b8;
}

body.cc-theme-light {
    --sys-bg: #eef2ff;
    --sys-bg-soft: #dbeafe;
    --sys-panel: rgba(255, 255, 255, 0.94);
    --sys-panel-2: rgba(248, 250, 252, 0.96);
    --sys-line: rgba(99, 102, 241, 0.16);
    --sys-text: #172554;
    --sys-muted: #64748b;
    color: var(--sys-text);
    background:
        radial-gradient(circle at top right, rgba(192, 132, 252, 0.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.14), transparent 32%),
        linear-gradient(180deg, #eef2ff, #f8fafc 55%, #eff6ff);
}

body.cc-theme-dark .content-wrapper,
body.dark-mode .content-wrapper,
body.cc-theme-light .content-wrapper {
    background: transparent;
}

body.cc-theme-dark .content-header h1,
body.dark-mode .content-header h1,
body.cc-theme-light .content-header h1 {
    color: var(--sys-text);
    font-weight: 700;
}

body.cc-theme-dark .main-header.navbar,
body.dark-mode .main-header.navbar {
    border-bottom: 1px solid var(--sys-line);
    background: linear-gradient(145deg, rgba(76, 29, 149, 0.94), rgba(17, 24, 39, 0.95));
}

body.cc-theme-light .main-header.navbar {
    border-bottom: 1px solid var(--sys-line);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(237, 233, 254, 0.98));
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

body.cc-theme-dark .main-header .nav-link,
body.cc-theme-dark .main-header .navbar-nav .nav-link,
body.dark-mode .main-header .nav-link,
body.dark-mode .main-header .navbar-nav .nav-link {
    color: #f5f3ff;
}

body.cc-theme-light .main-header .nav-link,
body.cc-theme-light .main-header .navbar-nav .nav-link {
    color: #4338ca;
}

body.cc-theme-dark .main-header .nav-link:hover,
body.dark-mode .main-header .nav-link:hover {
    color: #ffffff;
}

body.cc-theme-light .main-header .nav-link:hover {
    color: #312e81;
}

body.cc-theme-dark .main-sidebar,
body.dark-mode .main-sidebar {
    border-right: 1px solid var(--sys-line);
    background: var(--sys-panel);
}

body.cc-theme-light .main-sidebar {
    border-right: 1px solid var(--sys-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 10px 0 24px rgba(37, 99, 235, 0.05);
}

body.cc-theme-dark .brand-link,
body.dark-mode .brand-link {
    border-bottom: 1px solid var(--sys-line);
    background: rgba(10, 15, 29, 0.94) !important;
}

body.cc-theme-light .brand-link {
    border-bottom: 1px solid var(--sys-line);
    background: rgba(255, 255, 255, 0.98) !important;
}

body.cc-theme-dark .main-sidebar .brand-link,
body.cc-theme-dark .sidebar-dark-primary .brand-link,
body.cc-theme-dark .sidebar-dark-dark .brand-link,
body.dark-mode .main-sidebar .brand-link,
body.dark-mode .sidebar-dark-primary .brand-link,
body.dark-mode .sidebar-dark-dark .brand-link {
    background-color: rgba(10, 15, 29, 0.94) !important;
    border-bottom-color: var(--sys-line) !important;
}

body.cc-theme-light .main-sidebar .brand-link,
body.cc-theme-light .sidebar-light-primary .brand-link {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom-color: var(--sys-line) !important;
}

body.cc-theme-dark .brand-link .brand-text,
body.cc-theme-dark .brand-link span,
body.dark-mode .brand-link .brand-text,
body.dark-mode .brand-link span,
body.cc-theme-light .brand-link .brand-text,
body.cc-theme-light .brand-link span {
    color: var(--sys-text);
}

body.cc-theme-dark .nav-sidebar .nav-item > .nav-link,
body.dark-mode .nav-sidebar .nav-item > .nav-link,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link {
    color: color-mix(in srgb, var(--sys-text) 88%, white 12%);
    border-radius: 10px;
    margin: 2px 8px;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

body.cc-theme-dark .nav-sidebar .nav-item > .nav-link .nav-icon,
body.cc-theme-dark .nav-sidebar .nav-item > .nav-link i,
body.dark-mode .nav-sidebar .nav-item > .nav-link .nav-icon,
body.dark-mode .nav-sidebar .nav-item > .nav-link i,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link .nav-icon,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link i {
    color: var(--sys-accent);
}

body.cc-theme-dark .nav-sidebar .nav-item > .nav-link:hover,
body.cc-theme-dark .nav-sidebar .nav-item > .nav-link.active,
body.dark-mode .nav-sidebar .nav-item > .nav-link:hover,
body.dark-mode .nav-sidebar .nav-item > .nav-link.active,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link:hover,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link.active {
    background: color-mix(in srgb, var(--sys-primary) 10%, white 2%);
    color: var(--sys-text);
    border: 1px solid color-mix(in srgb, var(--sys-primary) 28%, var(--sys-line));
}

body.cc-theme-dark .nav-sidebar .nav-item > .nav-link:hover .nav-icon,
body.cc-theme-dark .nav-sidebar .nav-item > .nav-link.active .nav-icon,
body.cc-theme-dark .nav-sidebar .nav-item > .nav-link:hover i,
body.cc-theme-dark .nav-sidebar .nav-item > .nav-link.active i,
body.dark-mode .nav-sidebar .nav-item > .nav-link:hover .nav-icon,
body.dark-mode .nav-sidebar .nav-item > .nav-link.active .nav-icon,
body.dark-mode .nav-sidebar .nav-item > .nav-link:hover i,
body.dark-mode .nav-sidebar .nav-item > .nav-link.active i,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link:hover .nav-icon,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link.active .nav-icon,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link:hover i,
body.cc-theme-light .nav-sidebar .nav-item > .nav-link.active i {
    color: var(--sys-primary);
}

body.cc-theme-dark .card,
body.cc-theme-dark .small-box,
body.cc-theme-dark .info-box,
body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box,
body.cc-theme-light .card,
body.cc-theme-light .small-box,
body.cc-theme-light .info-box {
    background: var(--sys-panel) !important;
    border: 1px solid var(--sys-line);
    color: var(--sys-text);
    border-radius: 12px;
    box-shadow: var(--sys-shadow);
}

body.cc-theme-dark .card-header,
body.dark-mode .card-header,
body.cc-theme-light .card-header {
    background: color-mix(in srgb, var(--sys-bg-soft) 88%, transparent);
    border-bottom: 1px solid var(--sys-line);
    color: var(--sys-text);
}

body.cc-theme-dark .card-footer,
body.dark-mode .card-footer,
body.cc-theme-light .card-footer {
    background: color-mix(in srgb, var(--sys-bg-soft) 62%, transparent);
    border-top: 1px solid var(--sys-line);
}

body.cc-theme-dark .table,
body.dark-mode .table,
body.cc-theme-light .table {
    color: var(--sys-text);
}

body.cc-theme-dark .table thead th,
body.dark-mode .table thead th,
body.cc-theme-light .table thead th {
    border-bottom-color: var(--sys-line);
    color: color-mix(in srgb, var(--sys-text) 85%, white 15%);
    background: color-mix(in srgb, var(--sys-bg-soft) 74%, transparent);
}

body.cc-theme-dark .table td,
body.cc-theme-dark .table th,
body.dark-mode .table td,
body.dark-mode .table th,
body.cc-theme-light .table td,
body.cc-theme-light .table th {
    border-top-color: color-mix(in srgb, var(--sys-line) 90%, transparent);
}

body.cc-theme-dark .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover,
body.cc-theme-light .table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--sys-primary) 8%, transparent);
}

body.cc-theme-dark .dropdown-menu,
body.dark-mode .dropdown-menu,
body.cc-theme-light .dropdown-menu {
    background: var(--sys-panel);
    border: 1px solid var(--sys-line);
    color: var(--sys-text);
}

body.cc-theme-dark .dropdown-item,
body.dark-mode .dropdown-item,
body.cc-theme-light .dropdown-item {
    color: var(--sys-text);
}

body.cc-theme-dark .dropdown-item:hover,
body.dark-mode .dropdown-item:hover,
body.cc-theme-light .dropdown-item:hover {
    background: color-mix(in srgb, var(--sys-primary) 9%, transparent);
    color: var(--sys-text);
}

body.cc-theme-dark a,
body.dark-mode a,
body.cc-theme-light a {
    color: var(--sys-info);
}

body.cc-theme-dark a:hover,
body.dark-mode a:hover,
body.cc-theme-light a:hover {
    color: color-mix(in srgb, var(--sys-info) 72%, white 28%);
}

body.cc-theme-dark #sync-info,
body.cc-theme-dark .sites-pagination a,
body.cc-theme-dark .sites-pagination .page-link,
body.cc-theme-dark #sites-tbody a,
body.dark-mode #sync-info,
body.dark-mode .sites-pagination a,
body.dark-mode .sites-pagination .page-link,
body.dark-mode #sites-tbody a,
body.cc-theme-light #sync-info,
body.cc-theme-light .sites-pagination a,
body.cc-theme-light .sites-pagination .page-link,
body.cc-theme-light #sites-tbody a {
    color: var(--sys-primary) !important;
}

body.cc-theme-dark .sites-pagination .page-link:hover,
body.cc-theme-dark #sites-tbody a:hover,
body.dark-mode .sites-pagination .page-link:hover,
body.dark-mode #sites-tbody a:hover,
body.cc-theme-light .sites-pagination .page-link:hover,
body.cc-theme-light #sites-tbody a:hover {
    color: color-mix(in srgb, var(--sys-primary) 70%, white 30%) !important;
}

body.cc-theme-dark .btn-primary,
body.dark-mode .btn-primary,
body.cc-theme-light .btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--sys-primary), var(--sys-primary-strong));
    box-shadow: 0 10px 18px color-mix(in srgb, var(--sys-primary) 22%, transparent);
}

body.cc-theme-dark .btn-primary:hover,
body.cc-theme-dark .btn-primary:focus,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.cc-theme-light .btn-primary:hover,
body.cc-theme-light .btn-primary:focus {
    background: linear-gradient(135deg, var(--sys-primary-strong), var(--sys-primary));
}

body.cc-theme-dark .btn-outline-primary,
body.dark-mode .btn-outline-primary,
body.cc-theme-light .btn-outline-primary {
    border-color: var(--sys-primary);
    color: var(--sys-primary);
}

body.cc-theme-dark .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:hover,
body.cc-theme-light .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--sys-primary) 10%, transparent);
    color: var(--sys-text);
}

body.cc-theme-dark .pagination .page-link,
body.dark-mode .pagination .page-link,
body.cc-theme-light .pagination .page-link {
    background: color-mix(in srgb, var(--sys-bg-soft) 64%, transparent);
    border-color: var(--sys-line);
    color: var(--sys-text);
}

body.cc-theme-dark .pagination .page-link:hover,
body.dark-mode .pagination .page-link:hover,
body.cc-theme-light .pagination .page-link:hover {
    background: color-mix(in srgb, var(--sys-primary) 12%, transparent);
    color: var(--sys-text);
}

html.cc-vision-active body .badge-success,
html.cc-vision-active body .bg-success,
html.cc-vision-active body .btn-success {
    background: var(--sys-success) !important;
    border-color: var(--sys-success) !important;
    color: #ecfeff !important;
}

html.cc-vision-active body .badge-danger,
html.cc-vision-active body .bg-danger,
html.cc-vision-active body .btn-danger {
    background: var(--sys-danger) !important;
    border-color: var(--sys-danger) !important;
    color: #fff7ed !important;
}

html.cc-vision-active body .badge-warning,
html.cc-vision-active body .bg-warning,
html.cc-vision-active body .btn-warning {
    background: var(--sys-warning) !important;
    border-color: var(--sys-warning) !important;
    color: #111827 !important;
}

html.cc-vision-active body .badge-info,
html.cc-vision-active body .bg-info,
html.cc-vision-active body .btn-info {
    background: var(--sys-info) !important;
    border-color: var(--sys-info) !important;
    color: #eff6ff !important;
}

html.cc-vision-active body .progress-bar,
html.cc-vision-active body .board-progress-bar,
html.cc-vision-active body .cc-action-progress__bar {
    background: linear-gradient(90deg, var(--sys-primary), var(--sys-primary-strong)) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--sys-primary) 36%, transparent) !important;
}

html.cc-vision-active body .cc-action-progress.is-success .cc-action-progress__bar {
    background: linear-gradient(90deg, var(--sys-success), var(--sys-info)) !important;
}

html.cc-vision-active body .cc-action-progress.is-danger .cc-action-progress__bar {
    background: linear-gradient(90deg, var(--sys-danger), var(--sys-primary-strong)) !important;
}

html.cc-vision-active body .starter-changelog-content a,
html.cc-vision-active body .main-header .nav-link,
html.cc-vision-active body .main-header .navbar-nav .nav-link,
html.cc-vision-active body .nav-sidebar .nav-item > .nav-link .nav-icon,
html.cc-vision-active body .nav-sidebar .nav-item > .nav-link i {
    color: var(--sys-info) !important;
}

html.cc-vision-active body .board-theme-badge.is-ok,
html.cc-vision-active body .theme-version-badge.is-ok {
    color: var(--sys-success) !important;
    border-color: color-mix(in srgb, var(--sys-success) 45%, transparent) !important;
}

html.cc-vision-active body .board-theme-badge.is-bad,
html.cc-vision-active body .theme-version-badge.is-bad {
    color: var(--sys-danger) !important;
    border-color: color-mix(in srgb, var(--sys-danger) 45%, transparent) !important;
}

html.cc-vision-active body .board-theme-refresh,
html.cc-vision-active body .board-theme-refresh-inline,
html.cc-vision-active body .site-link-chip.is-dev,
html.cc-vision-active body .board-link-pill.is-dev,
html.cc-vision-active body .site-link-group.is-dev,
html.cc-vision-active body .board-link-group.is-dev,
html.cc-vision-active body .board-icon-pill.is-on {
    color: var(--sys-info) !important;
    border-color: color-mix(in srgb, var(--sys-info) 45%, rgba(148, 163, 184, 0.2)) !important;
}

html.cc-vision-active body .site-link-chip.is-prod,
html.cc-vision-active body .board-link-pill.is-prod,
html.cc-vision-active body .site-link-group.is-prod,
html.cc-vision-active body .board-link-group.is-prod {
    color: var(--sys-success) !important;
    border-color: color-mix(in srgb, var(--sys-success) 45%, rgba(148, 163, 184, 0.2)) !important;
}

html.cc-vision-active body .site-link-chip.is-dev,
html.cc-vision-active body .board-link-pill.is-dev,
html.cc-vision-active body .board-icon-pill.is-on {
    background: color-mix(in srgb, var(--sys-info) 14%, transparent) !important;
}

html.cc-vision-active body .site-link-chip.is-prod,
html.cc-vision-active body .board-link-pill.is-prod {
    background: color-mix(in srgb, var(--sys-success) 14%, transparent) !important;
}

html.cc-vision-active body .kanban-col[data-status="andamento"] .kanban-col-header,
html.cc-vision-active body .kanban-board-btn-solid,
html.cc-vision-active body .kanban-filter-fab.is-open,
html.cc-vision-active body .kanban-card-priority-alta,
html.cc-vision-active body .be-badge.is-red {
    background: var(--sys-primary) !important;
    border-color: var(--sys-primary) !important;
}

html.cc-vision-active body .kanban-col[data-status="revisao"] .kanban-col-header,
html.cc-vision-active body .kanban-card-priority-media,
html.cc-vision-active body .be-badge.is-yellow {
    background: var(--sys-warning) !important;
    border-color: var(--sys-warning) !important;
    color: #111827 !important;
}

html.cc-vision-active body .kanban-col[data-status="concluida"] .kanban-col-header,
html.cc-vision-active body .kanban-card-priority-baixa,
html.cc-vision-active body .be-badge.is-green {
    background: var(--sys-success) !important;
    border-color: var(--sys-success) !important;
    color: #0f172a !important;
}

html.cc-vision-active body .kanban-card {
    border-left-color: color-mix(in srgb, var(--sys-primary) 45%, transparent) !important;
}

html.cc-vision-active body .kanban-filter-fab,
html.cc-vision-active body .kanban-filter-mobile-toggle,
html.cc-vision-active body .kanban-board-btn-outline,
html.cc-vision-active body .be-badge.is-blue,
html.cc-vision-active body .be-badge.is-purple {
    color: var(--sys-info) !important;
    border-color: color-mix(in srgb, var(--sys-info) 45%, rgba(148, 163, 184, 0.2)) !important;
}