/* =============================================================================
   CCVC Online — navy/gold brand theme layer  (Phase 2 / P3a)
   -----------------------------------------------------------------------------
   A token-driven visual rebrand that sits ON TOP of Bootstrap 4.6 + the compiled
   admin theme (style.min.css) + site.css. It is the LAST stylesheet loaded, so
   equal-specificity rules win on source order, and !important is used only where
   the underlying theme/site rules are themselves !important or highly specific.

   Dark mode is driven entirely from here via  html[data-theme="dark"]  (the
   vendor theme ships NO dark mode). An inline script in _Header sets the
   attribute before first paint to avoid a flash; theme-toggle.js flips it.

   NO markup churn: this file restyles existing classes. The only template edits
   are the <link>/<script> tags and one theme-toggle <li> in the top nav.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
    /* Brand ramp (CCVC navy → gold accent) */
    --brand-700: #13203a;
    --brand-600: #1b2a4a;
    --brand-500: #22335a;
    --brand-400: #3a4f7d;
    --brand-300: #b68a4e;

    --primary:        #1b2a4a;                    /* CCVC navy */
    --primary-hover:  #13203a;
    --primary-soft:   rgba(27, 42, 74, .09);      /* navy tint (selected rows, hovers) */
    --on-primary:     #ffffff;

    /* Legacy _TopNav gradient — that partial is retired (the shell uses .ccvc-topbar);
       kept on-brand (navy) in case the old top nav is ever rendered again. */
    --nav-bg: linear-gradient(110deg, #1d2d4f 0%, #1b2a4a 52%, #16243f 100%);
    --nav-fg: rgba(255, 255, 255, .95);
    --nav-fg-muted: rgba(255, 255, 255, .72);
    --nav-border: rgba(255, 255, 255, .14);
    --nav-hover-bg: rgba(255, 255, 255, .14);

    --accent: #b68a4e;   /* CCVC gold — links, active, highlights, focus */
    --accent-2: #c9a063; /* CCVC light gold/tan (3rd logo color) — decorative variety */
    --accent-2-soft: rgba(248, 216, 184, .5); /* pale peach from the logo figures — tints */

    /* Surfaces & text */
    --app-bg:       #eef1f6;
    --surface:      #ffffff;
    --surface-2:    #f6f8fb;   /* striped rows, table head, subtle fills */
    --surface-3:    #eef2f7;   /* hover rows, inset wells */
    --input-bg:     #ffffff;
    --input-disabled-bg: #eef1f5;

    --text:        #0f172a;
    --text-muted:  #64748b;
    --heading:     #1e293b;

    --border:        #e2e8f0;
    --border-strong: #cbd5e1;

    /* Semantic */
    --success: #16a34a;
    --danger:  #dc2626;
    --warning: #d97706;
    --info:    #2563eb;

    /* Effects */
    --focus-ring:  0 0 0 3px rgba(182, 138, 78, .35);
    --shadow-sm:   0 1px 2px rgba(16, 24, 40, .06);
    --shadow:      0 2px 10px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-lg:   0 14px 38px rgba(16, 24, 40, .14);
    --shadow-brand:0 8px 22px rgba(27, 42, 74, .22);

    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  16px;
    --radius-pill: 999px;
}

html[data-theme="dark"] {
    --brand-700: #1b2a4a;
    --brand-600: #2e4675;
    --brand-500: #3a5da8;
    --brand-400: #6f8fce;
    --brand-300: #c9a063;

    --primary:       #3f63b0;                     /* lighter steel-navy so it reads on dark */
    --primary-hover: #5479c4;
    --primary-soft:  rgba(63, 99, 176, .20);
    --on-primary:    #ffffff;

    --nav-bg: linear-gradient(110deg, #22335a 0%, #1b2a4a 52%, #13203a 100%);
    --nav-fg: rgba(255, 255, 255, .95);
    --nav-fg-muted: rgba(255, 255, 255, .68);
    --nav-border: rgba(255, 255, 255, .10);
    --nav-hover-bg: rgba(255, 255, 255, .12);

    --accent: #c9a063;
    --accent-2: #dcc08a;
    --accent-2-soft: rgba(220, 192, 138, .22);

    --app-bg:    #0e1525;
    --surface:   #161d2e;
    --surface-2: #1b2335;
    --surface-3: #222c41;
    --input-bg:  #161d2e;
    --input-disabled-bg: #131a28;

    --text:       #e6eaf2;
    --text-muted: #94a3b8;
    --heading:    #f1f5f9;

    --border:        #283044;
    --border-strong: #3a455c;

    --success: #22c55e;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --info:    #3b82f6;

    --focus-ring:  0 0 0 3px rgba(201, 160, 99, .35);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow:      0 2px 12px rgba(0, 0, 0, .5);
    --shadow-lg:   0 18px 44px rgba(0, 0, 0, .6);
    --shadow-brand:0 10px 26px rgba(0, 0, 0, .55);
}

/* -----------------------------------------------------------------------------
   2. Base — page background, text, links, selection, scrollbars
   -------------------------------------------------------------------------- */
body,
body.light_version {
    background: var(--app-bg) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] ::selection { background: rgba(201, 160, 99, .40); color: #fff; }
html[data-theme="light"] ::selection,
:root ::selection { background: rgba(182, 138, 78, .22); color: var(--heading); }

a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-hover); }

/* Thin, themed scrollbars (WebKit) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* -----------------------------------------------------------------------------
   3. Top navbar — the signature gradient bar
   -------------------------------------------------------------------------- */
.top-navbar {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Brand */
.top-navbar .navbar-brand a,
.top-navbar .navbar-brand span,
.top-navbar .navbar-brand a span {
    color: var(--nav-fg) !important;
    font-weight: 600;
    letter-spacing: .2px;
}
.top-navbar .navbar-brand .logo { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }

/* Menu links */
.top-navbar .navbar-nav > li > a {
    color: var(--nav-fg-muted) !important;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    margin: 0 1px;
    transition: background-color .15s ease, color .15s ease;
}
.top-navbar .navbar-nav > li > a:hover,
.top-navbar .navbar-nav > li > a:focus {
    color: var(--nav-fg) !important;
    background: var(--nav-hover-bg) !important;
}
.top-navbar .navbar-nav > li.active > a,
.top-navbar .navbar-nav > li > a.active {
    color: var(--nav-fg) !important;
    background: var(--nav-hover-bg) !important;
}

/* Claim-search box living on the gradient */
.top-navbar .navbar-right .form-control,
.top-navbar #ClaimSearchForm .form-control {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
}
.top-navbar .navbar-right .form-control::placeholder { color: rgba(255, 255, 255, .75) !important; }
.top-navbar .navbar-right .form-control:focus {
    background: rgba(255, 255, 255, .26) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}
.top-navbar #ClaimSearchForm .btn {
    background: rgba(255, 255, 255, .22) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
    margin-bottom: 0 !important;
}
.top-navbar #ClaimSearchForm .btn:hover { background: rgba(255, 255, 255, .34) !important; }

/* Right-side icon links (profile, sign-out, ticklers, theme toggle) */
.top-navbar .navbar-right .navbar-nav > li > a,
.top-navbar .navbar-right .navbar-nav > li > a i { color: var(--nav-fg) !important; }
#themeToggle { cursor: pointer; }
#themeToggle i { font-size: 16px; }

/* Scroll/route progress indicator */
.top-navbar .progress-bar,
#myBar { background: var(--accent) !important; }

/* -----------------------------------------------------------------------------
   4. Main content — cards, headers, breadcrumb
   -------------------------------------------------------------------------- */
.card,
.card.planned_task {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

.card > .header,
.card .header {
    border-bottom: 1px solid var(--border);
    color: var(--heading);
}
.card .header h2,
.theme-indigo .card .header h2 {
    color: var(--heading) !important;
    font-weight: 600;
}

.breadcrumb { background: transparent !important; }
.breadcrumb .breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb .breadcrumb-item a { color: var(--primary); }

/* Section / page headings keep the muted-purple link to the brand */
.theme-indigo .form-control:focus { color: var(--text) !important; }

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { box-shadow: var(--focus-ring) !important; }

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: var(--shadow-brand) !important;
}

.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color: #fff !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-info    { background: var(--info)    !important; border-color: var(--info)    !important; color: #fff !important; }

.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: var(--on-primary) !important; }

.btn-secondary,
.btn-default,
.light_version .btn.btn-default {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
.btn-secondary:hover,
.btn-default:hover { background: var(--surface-3) !important; }

.btn-link { color: var(--primary) !important; }

/* Normalize the admin theme's DECORATIVE accent classes (used as launcher /
   section-header icon colors and <hr> dividers across ~37 views) to the CCVC
   brand palette: cool tones → navy, pinks → gold, decorative greens/teals →
   light tan (3rd logo color). Semantic colors (.text-success / -danger /
   -warning, badges, alerts, buttons) are themed elsewhere and keep meaning. */
.text-indigo, .text-azura, .text-blue, .text-cyan, .text-info,
.text-purple, .text-lightblue, .text-turquoise { color: var(--primary) !important; }
.text-blush, .text-pink { color: var(--accent) !important; }
.text-green, .text-teal, .text-lime { color: var(--accent-2) !important; }
html[data-theme="dark"] .text-indigo, html[data-theme="dark"] .text-azura,
html[data-theme="dark"] .text-blue, html[data-theme="dark"] .text-cyan,
html[data-theme="dark"] .text-info, html[data-theme="dark"] .text-purple,
html[data-theme="dark"] .text-turquoise { color: var(--accent) !important; }

.bg-indigo, .bg-azura, .bg-blush { background-color: var(--primary) !important; }
hr.bg-indigo, hr.bg-azura, hr.bg-blush { height: 0; border: 0; border-top: 2px solid var(--accent); background: transparent !important; opacity: .5; }
.new-indigo, .new-azura, .new-blue, .new-cyan { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.new-indigo:hover, .new-indigo:focus, .new-azura:hover, .new-blue:hover, .new-cyan:hover { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

/* -----------------------------------------------------------------------------
   6. Forms — inputs, selects, select2, flatpickr
   -------------------------------------------------------------------------- */
.form-control,
.custom-select,
.input-group-text {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
.form-control:focus,
.custom-select:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--input-disabled-bg) !important;
    color: var(--text-muted) !important;
}
label, .col-form-label { color: var(--text); }
.input-group-text { color: var(--text-muted) !important; }

/* select2 — single & multi, to match the form controls */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}
.select2-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.select2-container--default .select2-results__option { color: var(--text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary) !important; color: var(--on-primary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.select2-container--default .select2-search--inline .select2-search__field { color: var(--text) !important; }

/* .fancy-checkbox: the theme-indigo skin paints the checked box purple (#9367B4);
   recolor the checked glyph + border to CCVC navy. */
.fancy-checkbox input[type="checkbox"]:checked + span:before,
.theme-indigo .fancy-checkbox input[type="checkbox"]:checked + span:before {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* flatpickr calendar */
.flatpickr-calendar { background: var(--surface) !important; box-shadow: var(--shadow-lg) !important; color: var(--text); border: 1px solid var(--border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--primary) !important; border-color: var(--primary) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { color: var(--text-muted) !important; fill: var(--text-muted) !important; }

/* -----------------------------------------------------------------------------
   7. Tables / DataTables
   -------------------------------------------------------------------------- */
.table { color: var(--text); }
.table thead th,
.table.dataTable thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border) !important;
    border-top: 0 !important;
    text-transform: none;
    font-size: 12.5px;
    letter-spacing: normal;
    font-weight: 600;
}
.table td, .table th { border-color: var(--border) !important; vertical-align: middle; }

/* Zebra striping + hover (overrides site.css equivalents, which are !important) */
.table.dataTable > tbody > tr > td { background-color: var(--surface); color: var(--text); }
.table.dataTable > tbody > tr.odd > td { background-color: var(--surface-2) !important; color: var(--text) !important; }
.table.dataTable > tbody > tr.even > td { background-color: var(--surface) !important; color: var(--text) !important; }
.table-hover tbody tr:hover td,
.table.dataTable > tbody > tr:hover > td { background-color: var(--surface-3) !important; }

/* Selected rows — brand tint (overrides site.css purple/whitesmoke) */
.table.dataTable > tbody > tr.selected,
.table.dataTable > tbody > tr.selected > td {
    background-color: var(--primary-soft) !important;
    color: var(--text) !important;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
    border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Bootstrap pagination */
.page-link { color: var(--primary); background: var(--surface); border-color: var(--border); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.page-item.disabled .page-link { background: var(--surface); border-color: var(--border); color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   8. Badges, alerts, list groups
   -------------------------------------------------------------------------- */
.badge { border-radius: var(--radius-pill); font-weight: 600; padding: .35em .7em; }
.badge-primary { background: var(--primary) !important; color: var(--on-primary) !important; }
.badge-success { background: var(--success) !important; color: #fff !important; }
.badge-danger  { background: var(--danger)  !important; color: #fff !important; }
.badge-warning { background: var(--warning) !important; color: #fff !important; }
.badge-info    { background: var(--info)    !important; color: #fff !important; }
.badge-secondary { background: var(--surface-3) !important; color: var(--text) !important; }

.alert { border-radius: var(--radius); border: 1px solid var(--border); }
.alert-primary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }

.list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.list-group-item.active,
.light_version .list-group-item.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; }

/* -----------------------------------------------------------------------------
   9. Dropdowns & modals
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
}
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }
.dropdown-menu h5 { color: var(--text-muted) !important; }

.modal-content,
.light_version .modal-dialog .modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title { color: var(--heading) !important; }
.modal .close { color: var(--text) !important; opacity: .6; text-shadow: none; }
.modal .close:hover { opacity: 1; }

.nav-tabs,
.light_version .nav.nav-tabs { border-color: var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-muted) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link.active { color: var(--primary) !important; background: var(--surface) !important; border-color: var(--border) var(--border) var(--surface) !important; }

/* -----------------------------------------------------------------------------
   10. Footer & page loader
   -------------------------------------------------------------------------- */
#copyright { color: var(--text-muted) !important; }
#copyright a { color: var(--primary) !important; }

.page-loader-wrapper { background: var(--app-bg) !important; }
.page-loader-wrapper .loader .bar1,
.page-loader-wrapper .loader .bar2,
.page-loader-wrapper .loader .bar3,
.page-loader-wrapper .loader .bar4,
.page-loader-wrapper .loader .bar5 { background-color: var(--primary) !important; }
.page-loader-wrapper .text-white { color: var(--text) !important; }

/* -----------------------------------------------------------------------------
   11. Dark-mode text fix-ups
   The vendor theme hard-codes many light text/background colors; nudge the most
   common ones so content stays legible on dark surfaces. (Per-view inline colors
   are tracked as a follow-up in docs/UI-REFRESH-SCOPE.md.)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .card .header,
html[data-theme="dark"] .card .body,
html[data-theme="dark"] .card .header h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a { color: var(--text); }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--text) !important; }
html[data-theme="dark"] .bg-white { background: var(--surface) !important; }
/* Vendor hard-codes .card .body / Bootstrap .card-body to #fff; in dark mode that
   leaves the record rail and inner content cards white with invisible light text.
   Make them transparent so they inherit the themed (dark) .card surface. */
html[data-theme="dark"] .card > .body,
html[data-theme="dark"] .card-body { background-color: transparent !important; }
/* Plain (non-DataTables) striped rows keep the vendor #e1e8ed light stripe in dark
   mode; repoint to the dark striping surface. */
html[data-theme="dark"] tr.odd,
html[data-theme="dark"] tr.odd > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Keep functional error styling readable in dark mode without overriding the red */
html[data-theme="dark"] span.error,
html[data-theme="dark"] input.error,
html[data-theme="dark"] textarea.error,
html[data-theme="dark"] select.error { background-color: #3b1d22 !important; }

/* Smooth the mode switch on the big surfaces */
body, .card, .top-navbar, .form-control, .custom-select, .modal-content, .dropdown-menu {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}