/* ===========================================================================
   CRM global theme (Appearance Control).

   The ONE place where the saved appearance meets the components. Colours are
   never written here directly: every rule reads a --crm-* variable. The saved
   values are printed inline right after this file by
   views/template/appearance_head.php (so they win, before first paint); the
   block below is only the fallback - the default OnTime theme - for a page
   whose theme could not be read. AppearanceContractTest keeps it equal to
   Appearance_rules::root_css(Appearance_rules::defaults()).

   Loaded at the end of <head> by every CRM layout, after the theme bundles
   (main.*.css, global/css/style.css, public/assets/css/*) and crm-shell.css,
   so equal-specificity rules here win without editing those files.
   =========================================================================== */

/* @default-theme:start */
@font-face{font-family:"Dubai";src:local("Dubai"),local("Dubai Regular"),url("/global/fonts/dubai/Dubai-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:"Dubai";src:local("Dubai Medium"),url("/global/fonts/dubai/Dubai-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}@font-face{font-family:"Dubai";src:local("Dubai Bold"),url("/global/fonts/dubai/Dubai-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
:root{color-scheme:light;--crm-font:"Dubai", "Segoe UI", Tahoma, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;--crm-primary:#00287c;--crm-on-primary:#ffffff;--crm-primary-hover:#00226b;--crm-primary-soft:#e0e5ef;--crm-secondary:#1d4fd8;--crm-on-secondary:#ffffff;--crm-secondary-soft:#dfe6fa;--crm-secondary-ink:#1d4fd8;--crm-sidebar-bg:#101c3d;--crm-sidebar-text:#c2cee8;--crm-sidebar-muted:#96a2bd;--crm-sidebar-hover:#222e4e;--crm-sidebar-line:#2c3858;--crm-page-bg:#f4f6fb;--crm-card-bg:#ffffff;--crm-input-bg:#ffffff;--crm-input-border:#bec5d2;--crm-subtle-bg:#f6f6f7;--crm-hover-bg:#eff0f2;--crm-text:#16233f;--crm-text-muted:#5a6784;--crm-button-bg:#00287c;--crm-button-text:#ffffff;--crm-button-hover:#00226b;--crm-success:#15803d;--crm-on-success:#ffffff;--crm-success-soft:#deede4;--crm-warning:#b45309;--crm-on-warning:#ffffff;--crm-warning-soft:#f3e3d8;--crm-danger:#b91c1c;--crm-on-danger:#ffffff;--crm-danger-soft:#f5dfdf;--crm-border:#e3e8f2;--crm-radius-theme:12px;--crm-radius-sm:7px;--crm-navy:#101c3d;--crm-navy-2:#222e4e;--crm-navy-line:#2c3858;--crm-blue:#1d4fd8;--crm-blue-soft:#e4eafa;--crm-ink:#16233f;--crm-ink-2:#5a6784;--crm-line:#e3e8f2;--crm-bg:#f4f6fb;--crm-radius:12px;}
/* @default-theme:end */

/* ---- 1. Dubai font everywhere ------------------------------------------------
   Targets text-bearing elements only - never <i>/<span> icon glyphs, so the
   icon fonts (typicons, Font Awesome, Line Awesome, pe-7s, flaticon, material)
   keep their own family. */
html body,
body button, body input, body select, body optgroup, body textarea, body table,
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body .btn, body .form-control, body .custom-select, body .dropdown-menu, body .dropdown-item,
body .modal, body .modal-content, body .tooltip, body .popover, body .toast, body #toast-container,
body .swal2-popup, body .swal2-title, body .swal2-content, body .swal2-html-container, body .swal2-styled,
body .select2-container, body .select2-dropdown, body .select2-results__option,
body [data-typography], body .dataTables_wrapper, body .fc,
body .highcharts-container, body .highcharts-container text, body .apexcharts-canvas text, body .apexcharts-legend-text,
body #ccPanel, body .mdb-wrap, body .cdb-wrap, body .spd-wrap, body .opd-wrap, body .kpi-wrap, body .kpa, body .kpx, body #syPage, body .dfb {
    font-family: var(--crm-font) !important;
}
/* Code stays monospaced. */
body pre, body code, body kbd, body samp, body .text-monospace, body .sqlc-fallback-editor,
body .CodeMirror, body .CodeMirror *, body .ace_editor, body .ace_editor * {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* ---- 2. Page, text, links ---------------------------------------------------- */
html body { background-color: var(--crm-page-bg); color: var(--crm-text); }
body .app-theme-white.app-container, body .app-main, body .content-body, body .app-page-title { background-color: var(--crm-page-bg); }
body h1, body h2, body h3, body h4, body h5, body h6 { color: inherit; }
body label { color: inherit; }
a { color: var(--crm-secondary-ink); }
body .text-muted { color: var(--crm-text-muted) !important; }
body .text-primary { color: var(--crm-primary) !important; }
body .text-success { color: var(--crm-success) !important; }
body .text-warning { color: var(--crm-warning) !important; }
body .text-danger { color: var(--crm-danger) !important; }
body .bg-primary { background-color: var(--crm-primary) !important; }
body .bg-success { background-color: var(--crm-success) !important; }
body .bg-warning { background-color: var(--crm-warning) !important; }
body .bg-danger { background-color: var(--crm-danger) !important; }
body .border, body .border-top, body .border-bottom, body .border-left, body .border-right { border-color: var(--crm-border) !important; }
body hr { border-top-color: var(--crm-border); }

/* ---- 3. Shell: sidebar + top bar (assets_new/crm-shell.css) ------------------ */
.crm-sidebar { background: var(--crm-sidebar-bg); color: var(--crm-sidebar-text); }
.crm-sb-brand, .crm-sb-foot { border-color: var(--crm-sidebar-line); }
.crm-sb-logo-name { color: var(--crm-sidebar-text); }
.crm-sb-logo-name small, .crm-sb-toggle, .crm-sb-caret { color: var(--crm-sidebar-muted); }
.crm-sb-toggle { border-color: var(--crm-sidebar-line); }
.crm-sb-toggle:hover { background: var(--crm-sidebar-hover); color: var(--crm-sidebar-text); }
.crm-sb-link { color: var(--crm-sidebar-text); }
.crm-sb-ico { color: var(--crm-sidebar-muted); }
.crm-sb-link:hover, .crm-sb-link:focus { background: var(--crm-sidebar-hover); color: var(--crm-sidebar-text); }
.crm-sb-link:hover .crm-sb-ico { color: var(--crm-sidebar-text); }
.crm-sb-link:focus-visible { box-shadow: 0 0 0 2px var(--crm-secondary-ink); }
.crm-sb-active > .crm-sb-link, .crm-sb-active > .crm-sb-link:hover { background: var(--crm-secondary); color: var(--crm-on-secondary); }
.crm-sb-active > .crm-sb-link .crm-sb-ico, .crm-sb-active > .crm-sb-link .crm-sb-caret { color: var(--crm-on-secondary); }
.crm-sb-sublink { color: var(--crm-sidebar-muted); }
.crm-sb-sublink:hover, .crm-sb-sublink:focus { background: var(--crm-sidebar-hover); color: var(--crm-sidebar-text); }
.crm-sb-subactive { color: var(--crm-sidebar-text); background: var(--crm-sidebar-hover); box-shadow: inset 3px 0 0 var(--crm-secondary); }
.crm-sb-nav::-webkit-scrollbar-thumb { background: var(--crm-sidebar-line); }
.crm-sb-section { border-top-color: var(--crm-sidebar-line); }
.crm-sb-section-title { color: var(--crm-sidebar-muted); }
.crm-sb-nav .crm-sb-active > .crm-sb-link, .crm-sb-nav .crm-sb-active > .crm-sb-link:hover { background-color: var(--crm-secondary); }
.crm-sb-nav .crm-sb-sub { border-left-color: var(--crm-sidebar-line); }
.crm-sb-nav .crm-sb-subactive::before { background: var(--crm-secondary); }
.crm-topbar { background: var(--crm-card-bg); border-bottom-color: var(--crm-border); color: var(--crm-text); }
.crm-tb-burger { color: var(--crm-text); border-color: var(--crm-border); }
.crm-head-card, .crm-panel { background: var(--crm-card-bg); border-color: var(--crm-border); color: var(--crm-text); border-radius: var(--crm-radius-theme); }
.crm-head-card h1, .crm-panel-head h2 { color: var(--crm-primary); }
.crm-panel-head { border-bottom-color: var(--crm-border); }

/* Legacy sidebar layout (template/base_template.php + side_menu.php). */
html body .deznav { background-color: var(--crm-sidebar-bg); }
html body .deznav .metismenu a,
html body .deznav .metismenu > li > a,
html body .deznav .metismenu > li > a i { color: var(--crm-sidebar-text); }
html body .deznav .metismenu ul a:before { border-color: var(--crm-sidebar-muted); }
html body .deznav .metismenu > li:hover > a, html body .deznav .metismenu > li:focus > a,
html body .deznav .metismenu > li:hover > a i, html body .deznav .metismenu > li:focus > a i,
html body .deznav .metismenu ul a:hover, html body .deznav .metismenu ul a:focus { color: var(--crm-sidebar-text); background-color: var(--crm-sidebar-hover); }
html body .deznav .metismenu > li.mm-active > a, html body .deznav .metismenu > li.mm-active > a i { background: var(--crm-secondary); color: var(--crm-on-secondary); }
html body .deznav .metismenu ul a.mm-active { color: var(--crm-sidebar-text); background-color: var(--crm-sidebar-hover); font-weight: 600; }
html body .deznav .metismenu ul a.mm-active:before, html body .deznav .metismenu ul a:hover:before { border-color: var(--crm-secondary); }
html body input[type="checkbox"]:checked:after { background-color: var(--crm-secondary); border-color: var(--crm-secondary); color: var(--crm-on-secondary); }
html body .nav-header, html body .header { background-color: var(--crm-card-bg); }
html body .nav-control .hamburger .line { background: var(--crm-text); }

/* ---- 4. Cards, dropdowns, modals, popovers ---------------------------------- */
body .card, body .main-card, body .modal-content, body .dropdown-menu, body .popover, body .list-group-item,
body .toast, body .select2-dropdown, body .swal2-popup, body .card-header, body .card-footer, body .widget-content {
    background-color: var(--crm-card-bg); border-color: var(--crm-border); color: var(--crm-text);
}
body .card, body .main-card, body .modal-content { border-radius: var(--crm-radius-theme); }
body .card > .card-header:first-child { border-radius: var(--crm-radius-theme) var(--crm-radius-theme) 0 0; }
body .card > .card-footer:last-child { border-radius: 0 0 var(--crm-radius-theme) var(--crm-radius-theme); }
body .card-title { color: var(--crm-primary); }
body .modal-header, body .modal-footer { border-color: var(--crm-border); background: var(--crm-subtle-bg); }
body .modal-title { color: var(--crm-primary); }
body .close { color: var(--crm-text); text-shadow: none; }
body .dropdown-item { color: var(--crm-text); }
body .dropdown-item:hover, body .dropdown-item:focus { background-color: var(--crm-hover-bg); color: var(--crm-text); }
body .dropdown-item.active, body .dropdown-item:active { background-color: var(--crm-secondary); color: var(--crm-on-secondary); }
body .dropdown-divider { border-top-color: var(--crm-border); }

/* ---- 5. Buttons --------------------------------------------------------------- */
body .btn { border-radius: var(--crm-radius-sm); }
body .btn-primary, body .btn-primary:not(:disabled):not(.disabled):active, body .btn-primary:not(:disabled):not(.disabled).active,
body .show > .btn-primary.dropdown-toggle, body .btn-primary:disabled, body .btn-primary.disabled {
    background-color: var(--crm-button-bg); border-color: var(--crm-button-bg); color: var(--crm-button-text);
}
body .btn-primary:hover, body .btn-primary:focus { background-color: var(--crm-button-hover); border-color: var(--crm-button-hover); color: var(--crm-button-text); }
body .btn-primary:focus, body .btn-primary.focus { box-shadow: 0 0 0 .2rem var(--crm-primary-soft); }
body .btn-outline-primary { color: var(--crm-primary); border-color: var(--crm-primary); background-color: transparent; }
body .btn-outline-primary:hover, body .btn-outline-primary:not(:disabled):not(.disabled):active { color: var(--crm-on-primary); background-color: var(--crm-primary); border-color: var(--crm-primary); }
body .btn-success, body .btn-success:hover, body .btn-success:focus, body .btn-success:not(:disabled):not(.disabled):active { background-color: var(--crm-success); border-color: var(--crm-success); color: var(--crm-on-success); }
body .btn-warning, body .btn-warning:hover, body .btn-warning:focus, body .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--crm-warning); border-color: var(--crm-warning); color: var(--crm-on-warning); }
body .btn-danger, body .btn-danger:hover, body .btn-danger:focus, body .btn-danger:not(:disabled):not(.disabled):active { background-color: var(--crm-danger); border-color: var(--crm-danger); color: var(--crm-on-danger); }
body .btn-success:hover, body .btn-warning:hover, body .btn-danger:hover { filter: brightness(.93); }
body .btn-outline-success { color: var(--crm-success); border-color: var(--crm-success); }
body .btn-outline-success:hover { color: var(--crm-on-success); background-color: var(--crm-success); }
body .btn-outline-warning { color: var(--crm-warning); border-color: var(--crm-warning); }
body .btn-outline-warning:hover { color: var(--crm-on-warning); background-color: var(--crm-warning); }
body .btn-outline-danger { color: var(--crm-danger); border-color: var(--crm-danger); }
body .btn-outline-danger:hover { color: var(--crm-on-danger); background-color: var(--crm-danger); }
body .btn-link { color: var(--crm-secondary-ink); }
body .swal2-styled.swal2-confirm { background-color: var(--crm-button-bg); color: var(--crm-button-text); border-radius: var(--crm-radius-sm); }
body .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--crm-primary-soft); }
body .swal2-title, body .swal2-content, body .swal2-html-container { color: var(--crm-text); }

/* ---- 6. Forms and dropdowns --------------------------------------------------- */
body .form-control, body .custom-select, body .input-group-text,
body .select2-container--default .select2-selection--single, body .select2-container--default .select2-selection--multiple,
body .select2-container--default .select2-search--dropdown .select2-search__field,
body .dataTables_wrapper input[type="search"], body .dataTables_wrapper select, body .bootstrap-select .btn.dropdown-toggle {
    background-color: var(--crm-input-bg); color: var(--crm-text); border-color: var(--crm-input-border);
}
body .form-control, body .custom-select { border-radius: var(--crm-radius-sm); }
body .input-group-text { background-color: var(--crm-subtle-bg); }
body .form-control:focus, body .custom-select:focus, body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--crm-secondary-ink); box-shadow: 0 0 0 .2rem var(--crm-secondary-soft); background-color: var(--crm-input-bg); color: var(--crm-text);
}
body .form-control:disabled, body .form-control[readonly] { background-color: var(--crm-subtle-bg); }
body .form-control::placeholder { color: var(--crm-text-muted); opacity: 1; }
body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--crm-text); }
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--crm-secondary); color: var(--crm-on-secondary); }
body .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--crm-hover-bg); color: var(--crm-text); }
body .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--crm-secondary-soft); border-color: var(--crm-border); color: var(--crm-text); }
body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--crm-secondary); border-color: var(--crm-secondary); }
body .custom-range::-webkit-slider-thumb { background: var(--crm-secondary); }
body .custom-range::-moz-range-thumb { background: var(--crm-secondary); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--crm-secondary); }
body .invalid-feedback { color: var(--crm-danger); }
body .form-control.is-invalid { border-color: var(--crm-danger); }

/* ---- 7. Tables, headers, pagination ------------------------------------------ */
body .table { color: var(--crm-text); }
body .table th, body .table td, body table.dataTable th, body table.dataTable td { border-color: var(--crm-border); }
body .table thead th, body table.dataTable thead th, body .table .thead-light th {
    background-color: var(--crm-subtle-bg); color: var(--crm-text); border-bottom-color: var(--crm-border);
}
body .table-bordered, body .table-bordered th, body .table-bordered td { border-color: var(--crm-border); }
body .table-striped tbody tr:nth-of-type(odd) { background-color: var(--crm-subtle-bg); }
body .table-hover tbody tr:hover { background-color: var(--crm-hover-bg); color: var(--crm-text); }
body .page-link, body .pagination li a { color: var(--crm-secondary-ink); background-color: var(--crm-card-bg); border-color: var(--crm-border); }
body .page-link:hover, body .pagination li a:hover { color: var(--crm-primary); background-color: var(--crm-hover-bg); border-color: var(--crm-border); }
body .page-item.active .page-link, body .pagination li.active a { background-color: var(--crm-primary); border-color: var(--crm-primary); color: var(--crm-on-primary); }
body .page-item.disabled .page-link, body .pagination li.disabled a { color: var(--crm-text-muted); background-color: var(--crm-card-bg); border-color: var(--crm-border); }
body .page-item:first-child .page-link { border-top-left-radius: var(--crm-radius-sm); border-bottom-left-radius: var(--crm-radius-sm); }
body .page-item:last-child .page-link { border-top-right-radius: var(--crm-radius-sm); border-bottom-right-radius: var(--crm-radius-sm); }
/* DataTables pager (its stylesheet marks colours !important) and the layouts' own pager. */
body .paginate_button, body .ellipsis { border-color: var(--crm-border); }
body .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--crm-text) !important; border-radius: var(--crm-radius-sm); }
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--crm-hover-bg) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; }
body .paginate_button.current, body .paginate_button.current:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--crm-primary) !important; border-color: var(--crm-primary) !important; color: var(--crm-on-primary) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--crm-text-muted) !important; background: transparent !important; }
body .dataTables_wrapper .dataTables_info, body .dataTables_wrapper .dataTables_length, body .dataTables_wrapper .dataTables_filter { color: var(--crm-text-muted); }

/* ---- 8. Tabs, badges, alerts, notifications ----------------------------------- */
body .nav-tabs { border-bottom-color: var(--crm-border); }
body .nav-tabs .nav-link.active, body .nav-tabs .nav-item.show .nav-link { color: var(--crm-primary); background-color: var(--crm-card-bg); border-color: var(--crm-border) var(--crm-border) var(--crm-card-bg); }
body .nav-pills .nav-link.active, body .nav-pills .show > .nav-link { background-color: var(--crm-secondary); color: var(--crm-on-secondary); }
body a[role="tab"].active.nav-link::after { background: var(--crm-primary); }
body .badge-primary { background-color: var(--crm-primary); color: var(--crm-on-primary); }
body .badge-success { background-color: var(--crm-success); color: var(--crm-on-success); }
body .badge-warning { background-color: var(--crm-warning); color: var(--crm-on-warning); }
body .badge-danger { background-color: var(--crm-danger); color: var(--crm-on-danger); }
body .alert { border-radius: var(--crm-radius-sm); }
body .alert-primary, body .alert-info { color: var(--crm-text); background-color: var(--crm-primary-soft); border-color: var(--crm-primary-soft); }
body .alert-success { color: var(--crm-text); background-color: var(--crm-success-soft); border-color: var(--crm-success); border-left-width: 4px; }
body .alert-warning { color: var(--crm-text); background-color: var(--crm-warning-soft); border-color: var(--crm-warning); border-left-width: 4px; }
body .alert-danger { color: var(--crm-text); background-color: var(--crm-danger-soft); border-color: var(--crm-danger); border-left-width: 4px; }
body #toast-container > .toast-success { background-color: var(--crm-success); color: var(--crm-on-success); }
body #toast-container > .toast-warning { background-color: var(--crm-warning); color: var(--crm-on-warning); }
body #toast-container > .toast-error { background-color: var(--crm-danger); color: var(--crm-on-danger); }
body #toast-container > .toast-info { background-color: var(--crm-secondary); color: var(--crm-on-secondary); }

/* ---- 9. Chat and support components ------------------------------------------- */
html body #ccPanel {
    --cc-navy: var(--crm-primary); --cc-blue: var(--crm-secondary-ink); --cc-ink: var(--crm-text); --cc-mut: var(--crm-text-muted);
    --cc-line: var(--crm-border); --cc-bg: var(--crm-subtle-bg); --cc-mine: var(--crm-secondary-soft);
    --cc-green: var(--crm-success); --cc-red: var(--crm-danger);
    background: var(--crm-card-bg);
}
html body #crm-support-fab, html body #crm-support-submit { background: var(--crm-danger); color: var(--crm-on-danger); }
html body #crm-support-fab:hover { background: var(--crm-danger); filter: brightness(.92); }
html body #crm-support-modal { background: var(--crm-card-bg); color: var(--crm-text); border-radius: var(--crm-radius-theme); }
html body .crm-support-modal-head h4 { color: var(--crm-primary); }
html body #crm-support-modal .crm-support-sub { color: var(--crm-text-muted); }

/* ---- 10. Dashboards, KPI circles, reports: their local tokens follow the theme -- */
html body .mdb-wrap { --mdb-navy: var(--crm-primary); --mdb-blue: var(--crm-secondary-ink); --mdb-ink: var(--crm-text); --mdb-mut: var(--crm-text-muted); --mdb-line: var(--crm-border); --mdb-bg: var(--crm-subtle-bg); --mdb-green: var(--crm-success); --mdb-amber: var(--crm-warning); --mdb-red: var(--crm-danger); }
html body .cdb-wrap { --cdb-navy: var(--crm-primary); --cdb-blue: var(--crm-secondary-ink); --cdb-amber: var(--crm-warning); --cdb-ink: var(--crm-text); --cdb-mut: var(--crm-text-muted); --cdb-line: var(--crm-border); --cdb-bg: var(--crm-subtle-bg); --cdb-green: var(--crm-success); --cdb-red: var(--crm-danger); }
html body .spd-wrap { --spd-navy: var(--crm-primary); --spd-blue: var(--crm-secondary-ink); --spd-blue-soft: var(--crm-secondary-soft); --spd-ink: var(--crm-text); --spd-mut: var(--crm-text-muted); --spd-line: var(--crm-border); --spd-bg: var(--crm-subtle-bg); --spd-green: var(--crm-success); --spd-amber: var(--crm-warning); --spd-red: var(--crm-danger); }
html body .opd-wrap { --opd-navy: var(--crm-primary); --opd-blue: var(--crm-secondary-ink); --opd-blue-soft: var(--crm-secondary-soft); --opd-ink: var(--crm-text); --opd-mut: var(--crm-text-muted); --opd-line: var(--crm-border); --opd-bg: var(--crm-subtle-bg); --opd-green: var(--crm-success); --opd-amber: var(--crm-warning); --opd-red: var(--crm-danger); }
html body .kpi-wrap, html body .kpa, html body .kpx {
    --k-navy: var(--crm-primary); --k-brand: var(--crm-primary); --k-blue: var(--crm-secondary-ink); --k-blue-bg: var(--crm-secondary-soft);
    --k-ink: var(--crm-text); --k-mut: var(--crm-text-muted); --k-line: var(--crm-border); --k-bg: var(--crm-subtle-bg);
    --k-green: var(--crm-success); --k-green-bg: var(--crm-success-soft); --k-green-tile: var(--crm-success);
    --k-amber: var(--crm-warning); --k-amber-bg: var(--crm-warning-soft); --k-amber-tile: var(--crm-warning);
    --k-red: var(--crm-danger); --k-red-bg: var(--crm-danger-soft); --k-red-tile: var(--crm-danger);
    --k-r: var(--crm-radius-theme);
}
html body #syPage { --sy-navy: var(--crm-primary); --sy-ink: var(--crm-text); --sy-mut: var(--crm-text-muted); --sy-line: var(--crm-border); --sy-bg: var(--crm-subtle-bg); }
html body .dfb { --dfb-blue: var(--crm-secondary-ink); --dfb-ink: var(--crm-text); --dfb-mut: var(--crm-text-muted); --dfb-line: var(--crm-border); --dfb-bg: var(--crm-subtle-bg); --dfb-red: var(--crm-danger); }

/* ---- 11. Dark mode ------------------------------------------------------------
   html[data-crm-mode="dark"] is set in <head> (before paint) when the saved
   mode is dark. Pages that hard-code white surfaces are brought onto the card
   colour; row states that keep a light tint keep dark text on it. */
html[data-crm-mode="dark"] body .bg-white, html[data-crm-mode="dark"] body .bg-light { background-color: var(--crm-card-bg) !important; }
html[data-crm-mode="dark"] body .text-dark { color: var(--crm-text) !important; }
html[data-crm-mode="dark"] [style*="background:#fff"],
html[data-crm-mode="dark"] [style*="background:white"],
html[data-crm-mode="dark"] [style*="background: #fff"],
html[data-crm-mode="dark"] [style*="background: white"],
html[data-crm-mode="dark"] [style*="background-color:#fff"],
html[data-crm-mode="dark"] [style*="background-color:white"],
html[data-crm-mode="dark"] [style*="background-color: #fff"],
html[data-crm-mode="dark"] [style*="background-color: white"] { background-color: var(--crm-card-bg) !important; color: var(--crm-text); }
html[data-crm-mode="dark"] body table.dataTable tbody tr, html[data-crm-mode="dark"] body table.dataTable.display tbody tr.odd,
html[data-crm-mode="dark"] body table.dataTable.display tbody tr.even { background-color: transparent; }
html[data-crm-mode="dark"] body .mdb-card, html[data-crm-mode="dark"] body .app-header, html[data-crm-mode="dark"] body .app-footer { background-color: var(--crm-card-bg); }
html[data-crm-mode="dark"] #tlTable tbody tr.tl-row-new td, html[data-crm-mode="dark"] #tlTable tbody tr.tl-row-overdue td,
html[data-crm-mode="dark"] #tlTable tbody tr.tl-row-amber td { color: #16233f; }
html[data-crm-mode="dark"] #ccPanel .cc-side, html[data-crm-mode="dark"] #ccPanel .cc-head, html[data-crm-mode="dark"] #ccPanel .cc-btn,
html[data-crm-mode="dark"] #ccPanel .cc-results, html[data-crm-mode="dark"] #ccPanel .cc-day, html[data-crm-mode="dark"] #ccPanel .cc-b,
html[data-crm-mode="dark"] #ccPanel .cc-file, html[data-crm-mode="dark"] #ccPanel .cc-compose, html[data-crm-mode="dark"] #ccPanel .cc-ico,
html[data-crm-mode="dark"] #ccPanel .cc-card, html[data-crm-mode="dark"] .cc-toast { background: var(--crm-card-bg); color: var(--crm-text); }
/* Management Dashboard (dashboards/crm/management.php): its surfaces and
   tinted chips are literal light colours, so dark mode maps each onto the
   theme. Only background colours change: select arrows and layout stay. */
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-live, .mdb-bar, .mdb-bar select, .mdb-detf select, .mdb-detmore select, .mdb-btn,
  .mdb-bar input[type=date], .mdb-detmore input[type=date], .mdb-view-sel, .mdb-card, .mdb-panel, .mdb-search input, .mdb-act,
  .mdb-resched-row input, .mdb-resched-row textarea, .mdb-short, .mdb-back, .mdb-mjump button, .mdb-scrl button, .mdb-detmore,
  .mdb-ttab, .mdb-pagebar select, .mdb-pg),
html[data-crm-mode="dark"] .mdb-qv-card { background-color: var(--crm-card-bg); color: var(--crm-text); }
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-table th, .mdb-resched, .mdb-pagebar, .mdb-team-t tfoot td, .mdb-sub, .mdb-bar-row .g,
  .mdb-scrl button:hover:not(:disabled), .mdb-role, .mdb-ins-pill, .mdb-badge.grey, .mdb-tgt.none) { background-color: var(--crm-subtle-bg); }
html[data-crm-mode="dark"] .mdb-wrap .mdb-hint { background-color: var(--crm-subtle-bg); color: var(--crm-text); }
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-pill, .mdb-badge.red, .mdb-ins-pill.down) { background-color: var(--crm-danger-soft); }
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-pill.zero, .mdb-badge.green, .mdb-ins-pill.up, .mdb-tgt.ok) { background-color: var(--crm-success-soft); }
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-badge.amber, .mdb-tgt.due) { background-color: var(--crm-warning-soft); }
html[data-crm-mode="dark"] .mdb-wrap .mdb-alert { background-color: var(--crm-warning-soft); border-color: var(--crm-warning); color: var(--crm-text); }
html[data-crm-mode="dark"] .mdb-wrap :is(.mdb-short .mdb-ic, .mdb-ins-move .mdb-ic, .mdb-av) { background: var(--crm-secondary-soft); color: var(--crm-secondary-ink); }
/* KPI circles: their card tone (assets_new/crm-cards.css) carries its own dark-mode tint. */
html[data-crm-mode="dark"] .mdb-wrap .mdb-card { background-color: var(--cc-light, var(--crm-card-bg)); }
html[data-crm-mode="dark"] body .close { opacity: .85; }
html[data-crm-mode="dark"] ::-webkit-scrollbar-thumb { background-color: var(--crm-border); }