/* ============================================================================
   crms.css — "Dreams CRMS" design system for the CRM, Trust-Blue edition.
   Structure/components replicate https://crms.dreamstechnologies.com/html/
   (Golos Text, white chrome on a #F7F8F9 canvas, 5px containers / 6px controls,
   #E2E8F0 borders, soft-tint badges) with a white+blue palette (#2563EB /
   #0EA5E9) in place of the template's red/amber, and a neutral de-branded
   wordmark in place of the Realty Chirag logo.

   Scoping contract (same as glass.css): EVERY rule is prefixed html.crms-theme.
   layout.php stamps that class when CRM_THEME=crms and loads this file AFTER
   app.css, so equal-specificity rules win by order; app.css !importants are
   countered with matching !importants. Kill-switch = drop the env flag.

   The saturated .badge-st-* / .badge-src-* / .badge-type-* palettes are
   deliberately NOT overridden (founder rule: status colors stay distinct).
   ========================================================================== */

/* ── 0. Tokens ─────────────────────────────────────────────────────────── */
html.crms-theme {
    /* Dreams CRMS structure, "Trust Blue" palette: royal blue primary with a
       sky accent on white chrome (replaces the template's red/amber). */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --secondary: #0EA5E9;
    --secondary-hover: #0284C7;
    --success: #1ABE17;
    --success-hover: #179f14;
    --info: #2F80ED;
    --danger: #EF1E1E;
    --warning: #f9b801;
    --warning-hover: #e0a701;
    --dark: #0A0C0C;
    /* "Soft slate" register — dimmed from near-white to cut glare/eye strain
       while staying a light theme. Tune brightness here: --light (canvas),
       --paper (cards/chrome), --field (inputs, one step lighter than paper). */
    --light: #E9EEF4;              /* canvas — muted gray-blue */
    --paper: #F4F6F9;              /* surfaces (cards/chrome) — soft slate */
    --field: #F9FAFC;              /* form fields — slight lift off the card */
    --menu-bg: #E2EBF7;            /* light-blue sidebar */
    --menu-line: #CBD9EC;
    --menu-active-bg: #CDDFF7;     /* deeper tint so active rows read on blue */
    --menu-ink: #1F2020;           /* rail text */
    --menu-ink-soft: #6A7180;      /* rail secondary text */
    --gray-100: #CDCDCD;
    --gray-400: #868787;
    --gray-500: #707070;
    --gray-600: #5A5B5B;
    --gray-900: #1F2020;
    --heading-color: #1F2020;
    --body-color: #6A7180;
    --border-color: #D8DFE9;       /* darkened with the dimmer surfaces so
                                      edges stay visible without harshness */
    --hair: #DCE2EA;
    --primary-transparent: #EAF2FD;
    --secondary-transparent: #E0F2FE;
    --success-transparent: #e8f9e8;
    --danger-transparent: #fde9e9;
    --warning-transparent: #fef8e6;
    --info-transparent: #eaf2fd;
    --box-shadow: 0px 4px 6px 0px rgba(148, 163, 184, 0.14);
    --topbar-item-shadow: 0px 3px 5px 0px rgba(148, 163, 184, 0.16);
    --linear-gradient: linear-gradient(180deg, #2563EB 0%, #38BDF8 100%);
    --primary-gradient-100: linear-gradient(180deg, #2563EB 0%, #4F86F7 100%);

    /* Re-point app.css tokens so anything not explicitly re-declared below
       still lands on the right neutral. */
    --c-bg: #E9EEF4;
    --c-paper: #F4F6F9;
    --c-ink: #1F2020;
    --c-ink-soft: #454646;
    --c-ink-mute: #707070;
    --f-sans: "Golos Text", sans-serif;
    --r-sm: 5px;
    --r: 5px;
    --r-lg: 6px;
    --shadow-xs: var(--box-shadow);
    --shadow-sm: var(--box-shadow);
    --shadow-md: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
    --shadow-gold: none;
    --sidebar-w: 240px;
    --topbar-h: 56px;
    --surface: #F4F6F9;            /* .pulse-donut hole reads this */

    /* Legacy hairline vars — app.css paints 19 borders with these gold tints;
       re-pointing them here fixes every consumer at once. */
    --c-line: #E2E8F0;
    --c-line-strong: #E2E8F0;
    --c-gold-line: #E2E8F0;
}

/* ── 1. Base ───────────────────────────────────────────────────────────── */
html.crms-theme body {
    font-family: "Golos Text", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--body-color);
    background: var(--light);
}
html.crms-theme body::before,
html.crms-theme body::after { display: none; }

html.crms-theme ::selection { background: var(--primary); color: #fff; }

html.crms-theme h1, html.crms-theme h2, html.crms-theme h3,
html.crms-theme h4, html.crms-theme h5, html.crms-theme h6 {
    color: var(--heading-color);
    font-weight: 700;
}
html.crms-theme label { font-weight: 500; }
html.crms-theme b, html.crms-theme strong { font-weight: 600; }

/* Plain links go ink-dark with a red hover. Interactive components are
   EXCLUDED via :where() (zero specificity) so their own colors always win. */
html.crms-theme a:not(:where(.btn, .badge, .page-link, .dropdown-item, .sidebar-link,
    .sidebar-sublink, .sidebar-action, .sidebar-user-card, .sidebar-brand-link,
    .profile-chip, .topbar-btn, .list-group-item, .nav-link)) { color: var(--gray-900); }
html.crms-theme a:not(:where(.btn, .badge, .page-link, .dropdown-item, .sidebar-link,
    .sidebar-sublink, .sidebar-action, .sidebar-user-card, .sidebar-brand-link,
    .profile-chip, .topbar-btn, .list-group-item, .nav-link)):hover { color: var(--primary); }

html.crms-theme ::-webkit-scrollbar { width: 8px; height: 8px; }
html.crms-theme ::-webkit-scrollbar-track { background: transparent; }
html.crms-theme ::-webkit-scrollbar-thumb { background: #CDCDCD; border-radius: 8px; }
html.crms-theme ::-webkit-scrollbar-thumb:hover { background: #B5B5B5; }

/* Template ships no focus ring; keep keyboard users covered anyway.
   Form fields get a neutral border swap instead — a red ring on an
   autofocused input reads as a validation error. */
html.crms-theme :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}
html.crms-theme .form-control:focus-visible,
html.crms-theme .form-select:focus-visible {
    outline: none;
    border-color: var(--gray-100);
}

/* ── 2. Brand wordmark ─────────────────────────────────────────────────── */
/* Neutral de-branded mark: blue gradient tile + "CRM" text (markup emits
   .brand-wordmark in layout.php / login.php). */
html.crms-theme .brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--heading-color);
}
html.crms-theme .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-gradient-100);
    color: #fff;
}
html.crms-theme .brand-wordmark-sm { font-size: 16px; gap: 8px; }
html.crms-theme .brand-wordmark-sm .brand-mark { width: 28px; height: 28px; flex-basis: 28px; border-radius: 6px; }
html.crms-theme .brand-wordmark-lg { font-size: 24px; gap: 12px; }
html.crms-theme .brand-wordmark-lg .brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 10px; }
html.crms-theme .sidebar-brand-link { display: flex; justify-content: center; text-decoration: none; }
html.crms-theme.sidebar-collapsed .sidebar-brand .brand-text { display: none; }

/* ── 3. Sidebar ────────────────────────────────────────────────────────── */
html.crms-theme .sidebar {
    background: var(--menu-bg);
    background-image: none;
    border-right: 1px solid var(--menu-line);
    box-shadow: none;
}
html.crms-theme .sidebar::before,
html.crms-theme .sidebar::after { display: none; }

html.crms-theme .sidebar-brand {
    padding: 10px 12px;
    border-bottom: 1px solid var(--menu-line);
    background: none;
}
html.crms-theme .sidebar-brand::after { display: none; }
html.crms-theme .sidebar-toggle {
    background: var(--paper);
    border: 1px solid var(--menu-line);
    border-radius: 50%;
    color: var(--gray-900);
    box-shadow: var(--topbar-item-shadow);
}
html.crms-theme .sidebar-toggle:hover { background: var(--light); color: var(--primary); }

html.crms-theme .sidebar-nav { padding: 16px 12px; }
html.crms-theme .sidebar-nav::-webkit-scrollbar-thumb { background: #C9DCF4; }

/* Section headers — CRMS li.menu-title. */
html.crms-theme .sidebar-section {
    margin: 8px 4px 12px;
    padding: 0;
    border: 0;
}
html.crms-theme .sidebar-section span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Nav rows — CRMS menu links: 14px/500 ink, 6px radius, icon in a 28px tile. */
html.crms-theme .sidebar-link {
    margin: 0 0 5px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--menu-ink);
    font-size: 14px;
    font-weight: 500;
}
html.crms-theme .sidebar-link::before,
html.crms-theme .sidebar-link::after { display: none; }

html.crms-theme .sidebar-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--field);      /* soft tiles lift off the light-blue rail */
    border-radius: 5px;
    color: var(--gray-900);
    transition: background .18s ease, color .18s ease;
}
html.crms-theme .sidebar-icon .icon { width: 16px; height: 16px; }
html.crms-theme .sidebar-label { margin-left: 8px; }

html.crms-theme .sidebar-link:hover,
html.crms-theme .sidebar-link.active,
html.crms-theme .sidebar-group:hover,
html.crms-theme .sidebar-group.active,
html.crms-theme .sidebar-group[aria-expanded="true"] {
    background: var(--menu-active-bg);
    color: var(--primary);
    border: 0;
    box-shadow: none;
}
html.crms-theme .sidebar-link:hover .sidebar-icon,
html.crms-theme .sidebar-link.active .sidebar-icon,
html.crms-theme .sidebar-group:hover .sidebar-icon,
html.crms-theme .sidebar-group.active .sidebar-icon,
html.crms-theme .sidebar-group[aria-expanded="true"] .sidebar-icon {
    background: var(--primary);
    color: #fff;
}

html.crms-theme .sidebar-chevron {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-500);
}
html.crms-theme .sidebar-group[aria-expanded="true"] .sidebar-chevron {
    background: var(--secondary-transparent);
    color: var(--primary);
}

/* Submenu — 13px/400 gray rows with the CRMS dot bullet. */
html.crms-theme .sidebar-subnav {
    margin: 4px 0 8px;
    padding: 0;
    background: none;
    border: 0;
}
html.crms-theme .sidebar-sublink {
    position: relative;
    padding: 8px 6px 8px 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-500);
    background: none;
    border: 0;
}
html.crms-theme .sidebar-sublink::before {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-500);
    opacity: 1;
}
html.crms-theme .sidebar-sublink:hover,
html.crms-theme .sidebar-sublink.active {
    color: var(--primary);
    background: none;
}
html.crms-theme .sidebar-sublink:hover::before,
html.crms-theme .sidebar-sublink.active::before { background: var(--primary); }

/* Footer user card. */
html.crms-theme .sidebar-footer {
    border-top: 1px solid var(--menu-line);
    background: none;
    padding: 12px;
}
html.crms-theme .sidebar-user-card {
    background: var(--paper);
    border: 1px solid var(--menu-line);
    border-radius: 6px;
    box-shadow: none;
}
html.crms-theme .sidebar-user-card:hover { background: var(--secondary-transparent); border-color: #bfdffb; }
html.crms-theme .sidebar-user-avatar {
    background: var(--primary-gradient-100);
    border: 0;
    box-shadow: none;
    color: #fff;
    font-weight: 500;
    border-radius: 6px;
}
html.crms-theme .sidebar-user-name { color: var(--gray-900); font-weight: 500; }
html.crms-theme .sidebar-user-role { color: var(--gray-500); }

html.crms-theme .sidebar-action {
    border-radius: 5px;
    font-weight: 500;
}
html.crms-theme .sidebar-action-secondary {
    background: var(--paper);
    border: 1px solid var(--menu-line);
    color: var(--gray-900);
}
html.crms-theme .sidebar-action-secondary:hover { background: var(--light); color: var(--primary); }
html.crms-theme .sidebar-action-primary {
    background: var(--danger-transparent);
    border: 1px solid transparent;
    color: var(--danger);
}
html.crms-theme .sidebar-action-primary:hover { background: var(--danger); color: #fff; }

/* Collapsed 72px rail — keep app.js behavior, recenter the tiles. */
html.crms-theme.sidebar-collapsed .sidebar-link,
html.crms-theme.sidebar-collapsed .sidebar-group { justify-content: center; padding: 6px; }
html.crms-theme.sidebar-collapsed .sidebar-icon { margin: 0 auto; }
/* Section titles become hairline dividers on the narrow rail. */
html.crms-theme.sidebar-collapsed .sidebar-section span { display: none; }
html.crms-theme.sidebar-collapsed .sidebar-section {
    border-top: 1px solid var(--menu-line);
    margin: 8px 10px;
    height: 0;
}
/* .sidebar-nav's overflow-y:auto forces overflow-x:auto, clipping the
   flyout tooltip to the 72px rail — the collapsed menu fits the viewport,
   so let it overflow. The `aside.sidebar` hop matches app.css specificity. */
html.crms-theme.sidebar-collapsed .sidebar-nav { overflow: visible; }
html.crms-theme.sidebar-collapsed aside.sidebar .sidebar-link[data-label]:hover::after,
html.crms-theme.sidebar-collapsed aside.sidebar .sidebar-group[data-label]:hover::after {
    display: block;
    background: var(--gray-900);
    color: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}
html.crms-theme .sidebar-resize-handle::before { background: var(--primary); }

/* Mobile offcanvas drawer reuses the sidebar classes on a white sheet.
   app.css paints .offcanvas-body navy separately — override it too. */
html.crms-theme .sidebar-mobile {
    background: var(--menu-bg);
    color: var(--gray-900);
    border-right: 1px solid var(--menu-line);
}
html.crms-theme .sidebar-mobile .offcanvas-header { border-bottom: 1px solid var(--menu-line); }
html.crms-theme .sidebar-mobile .offcanvas-body { background: var(--menu-bg); }
html.crms-theme .sidebar-mobile .btn-close-white { filter: none; }

/* ── 4. Topbar ─────────────────────────────────────────────────────────── */
html.crms-theme .topbar,
html.crms-theme .topbar-desktop {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    min-height: 56px;
}
html.crms-theme .topbar::after,
html.crms-theme .topbar-desktop::after { display: none; }

html.crms-theme .topbar-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;    /* app.css floors these at 44px */
    min-height: 38px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--hair);
    background: var(--paper);
    color: var(--gray-900) !important;   /* app.css pins gold w/ !important */
    box-shadow: var(--topbar-item-shadow);
}
html.crms-theme .topbar-btn:hover {
    background: var(--light);
    border-color: var(--gray-100);
    color: var(--primary) !important;
}
html.crms-theme .notif-dot {
    background: var(--primary);
    border-color: #fff;
}
html.crms-theme .topbar-avatar { background: var(--primary-gradient-100) !important; }

html.crms-theme .profile-chip {
    background: var(--paper);
    border: 1px solid var(--hair);
    border-radius: 5px;
    box-shadow: var(--topbar-item-shadow);
    color: var(--gray-900);
}
html.crms-theme .profile-chip:hover { background: var(--light); border-color: var(--gray-100); }
html.crms-theme .profile-chip-avatar {
    background: var(--primary-gradient-100);
    border: 0;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
}
html.crms-theme .profile-chip-name { color: var(--gray-900); font-weight: 500; }
html.crms-theme .profile-chip-code { color: var(--gray-500); }

/* Content pane — CRMS .content padding is a flat 20px. */
html.crms-theme .app-main > main { padding: 20px !important; }

/* ── 5. Page title ─────────────────────────────────────────────────────── */
html.crms-theme .page-title h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--heading-color);
    letter-spacing: 0;
}
html.crms-theme .page-title h1 small { font-size: 14px; font-weight: 400; color: var(--gray-500); }
html.crms-theme .page-title::after { display: none; }

/* ── 6. Cards & KPI tiles ──────────────────────────────────────────────── */
html.crms-theme .card {
    background: var(--paper);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    transition: none;
}
html.crms-theme .card::before { display: none; }
html.crms-theme .card:hover { box-shadow: var(--box-shadow); transform: none; }
html.crms-theme .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
}
html.crms-theme .card-title { font-size: 16px; font-weight: 600; color: var(--gray-900); }

/* KPI tiles (structural pattern: .card.p-3 > small label + big number). */
html.crms-theme .card.p-3 > .text-muted.small:first-child,
html.crms-theme .card.p-3 .text-muted.small:first-child {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500) !important;
}
html.crms-theme .card.p-3 .fs-3,
html.crms-theme .card.p-3 .fs-4 {
    font-size: 20px !important;
    font-weight: 700;
    color: var(--heading-color) !important;
    font-variant-numeric: tabular-nums;
}
html.crms-theme .card.p-3 .fs-5 { font-weight: 700; color: var(--heading-color) !important; }

/* ── 7. Filter bar & fieldsets ─────────────────────────────────────────── */
html.crms-theme .filter-bar {
    background: var(--paper);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}
html.crms-theme .filter-bar .form-label.small { color: var(--gray-500); font-weight: 500; }

/* Sentence-case 13px/500 labels — app.css ships .18em uppercase micro-caps
   with an !important font-size. */
html.crms-theme .form-label,
html.crms-theme .filter-bar .form-label.small,
html.crms-theme .login-label {
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0 !important;
    text-transform: none;
}

html.crms-theme fieldset {
    background: var(--paper);
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
}
html.crms-theme fieldset legend {
    color: var(--gray-500) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    font-size: 13px !important;
}

/* ── 8. Forms ──────────────────────────────────────────────────────────── */
html.crms-theme .form-label { color: var(--heading-color); font-weight: 500; }
html.crms-theme .form-control,
html.crms-theme .form-select {
    font-size: 14px;
    color: var(--gray-900);
    background-color: var(--field);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--box-shadow);
}
/* app.css sets `background:` shorthand on selects, wiping Bootstrap's SVG
   chevron — restore it so selects are distinguishable from text inputs. */
html.crms-theme .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23676767' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 10px;
    padding-right: 32px;
}
html.crms-theme .form-control::placeholder { color: var(--gray-400); font-weight: 400; }
html.crms-theme .form-control:focus,
html.crms-theme .form-select:focus {
    border-color: var(--gray-100); /* CRMS removes the resting shadow on focus;
                                      the neutral border swap keeps the focused
                                      field findable for mouse users */
    box-shadow: none;
    background-color: var(--field);
}
html.crms-theme .form-control:disabled,
html.crms-theme .form-select:disabled { background-color: var(--light); }
html.crms-theme .form-control-sm, html.crms-theme .form-select-sm { font-size: 12px; }
/* Keep app.css's iOS zoom-on-focus guard: <16px inputs trigger Safari zoom. */
@media (max-width: 767.98px) {
    html.crms-theme .form-control, html.crms-theme .form-select { font-size: 16px; }
    html.crms-theme .form-control-sm, html.crms-theme .form-select-sm { font-size: 15px; }
}

html.crms-theme .form-check-input { border-color: var(--gray-100); box-shadow: none; }
html.crms-theme .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
html.crms-theme .form-check-input:focus { box-shadow: none; border-color: var(--gray-100); }
html.crms-theme .required::after { color: var(--primary); }
html.crms-theme .input-group-text {
    background: transparent;
    border-color: var(--border-color);
    color: var(--heading-color);
    border-radius: 6px;
}

/* ── 9. Buttons ────────────────────────────────────────────────────────── */
html.crms-theme .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Golos Text", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 5px;
    box-shadow: none;
    letter-spacing: 0;
    text-transform: none;
}
html.crms-theme .btn-sm, html.crms-theme .btn-group-sm > .btn {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 5px;
}
html.crms-theme .btn:focus { box-shadow: none; }

html.crms-theme .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
html.crms-theme .btn-primary:hover,
html.crms-theme .btn-primary:focus,
html.crms-theme .btn-primary:active {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: none;
}
html.crms-theme .btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; }
html.crms-theme .btn-outline-primary:hover,
html.crms-theme .btn-outline-primary:active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* "Open"/utility buttons follow the CRMS btn-outline-light idiom. */
html.crms-theme .btn-outline-secondary {
    color: var(--gray-900);
    border-color: var(--border-color);
    background: var(--paper);
}
html.crms-theme .btn-outline-secondary:hover,
html.crms-theme .btn-outline-secondary:active {
    background: var(--light);
    border-color: var(--border-color);
    color: var(--gray-900);
}
html.crms-theme .btn-outline-success { color: var(--success); border-color: var(--success); }
html.crms-theme .btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
html.crms-theme .btn-outline-danger { color: var(--danger); border-color: var(--danger); }
html.crms-theme .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
html.crms-theme .btn-outline-warning { color: var(--warning-hover); border-color: var(--warning); }
html.crms-theme .btn-outline-warning:hover { background: var(--warning); border-color: var(--warning); color: #fff; }

/* .btn-gold ≙ CRMS secondary (amber). */
html.crms-theme .btn-gold {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    box-shadow: none;
}
html.crms-theme .btn-gold:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); color: #fff; }
html.crms-theme .btn-dark { background: var(--dark); border-color: var(--dark); }

/* Row-action mini buttons (reveal / call). WhatsApp keeps its brand green. */
html.crms-theme .btn-reveal {
    background: var(--paper);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--gray-500);
    box-shadow: var(--box-shadow);
}
html.crms-theme .btn-reveal:hover { background: var(--danger-transparent); color: var(--primary); border-color: var(--primary); }
html.crms-theme .btn-call {
    background: var(--success-transparent);
    border: 1px solid transparent;
    color: var(--success-hover);
}
html.crms-theme .btn-call:hover { background: var(--success); color: #fff; }

/* ── 10. Tables ────────────────────────────────────────────────────────── */
html.crms-theme .table {
    --bs-table-bg: var(--paper);
    --bs-table-color: var(--gray-700, #454646);
    border-color: var(--border-color);
    color: #454646;
}
html.crms-theme .table thead.table-light th,
html.crms-theme .table thead th {
    background: var(--light) !important;
    color: var(--heading-color) !important;
    font-size: 13px !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html.crms-theme .table > :not(caption) > * > * {
    border-bottom-color: var(--border-color);
    padding: 10px 8px;
    background: transparent;
}
html.crms-theme .table-sm > :not(caption) > * > * { padding: 8px; }
html.crms-theme .table tbody tr:hover,
html.crms-theme .table tbody tr:hover td { background: var(--light); }
html.crms-theme .table td { vertical-align: middle; }

/* ── 11. Badges ────────────────────────────────────────────────────────── */
html.crms-theme .badge {
    font-size: 12px !important;   /* app.css: .65rem !important */
    font-weight: 500;
    padding: 5px 6px;
    border-radius: 6px;
    letter-spacing: 0;
    text-transform: none;
}
/* Status / source / type capsules stay saturated (founder rule) — pill them
   like the CRMS dashboard chips. */
html.crms-theme .badge[class*="badge-st-"],
html.crms-theme .badge[class*="badge-src-"],
html.crms-theme .badge.badge-type { border-radius: 50rem; padding: 5px 10px; }

/* Generic Bootstrap pills → CRMS soft tints. app.css pins its colors with
   !important, so every declaration here must carry one too. */
html.crms-theme .badge.bg-warning { background: var(--warning-transparent) !important; color: var(--warning-hover) !important; border: 0 !important; }
html.crms-theme .badge.bg-info { background: var(--info-transparent) !important; color: var(--info) !important; border: 0 !important; }
html.crms-theme .badge.bg-danger { background: var(--danger) !important; color: #fff !important; }
html.crms-theme .badge.bg-secondary {
    background: var(--paper) !important;
    color: var(--gray-500) !important;
    border: 1px solid var(--border-color) !important;
}
html.crms-theme .badge-role-admin { background: var(--primary-transparent) !important; color: var(--primary) !important; border: 0; }
html.crms-theme .badge-role-associate { background: var(--success-transparent) !important; color: var(--success-hover) !important; border: 0; }

/* ── 12. Alerts ────────────────────────────────────────────────────────── */
html.crms-theme .alert {
    padding: 12px 16px;
    border-radius: 5px;
    border: 1px solid transparent;
    box-shadow: none;
}
html.crms-theme .alert-success { color: var(--success-hover); background: var(--success-transparent); border-color: var(--success-transparent); }
html.crms-theme .alert-danger  { color: var(--danger);  background: var(--danger-transparent);  border-color: var(--danger-transparent); }
html.crms-theme .alert-warning { color: var(--warning-hover); background: var(--warning-transparent); border-color: var(--warning-transparent); }
html.crms-theme .alert-info    { color: var(--info);    background: var(--info-transparent);    border-color: var(--info-transparent); }

/* ── 13. Tabs ──────────────────────────────────────────────────────────── */
html.crms-theme .nav-tabs { border-bottom: 1px solid var(--border-color); }
html.crms-theme .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gray-600);
    font-weight: 500;
    background: none;
}
html.crms-theme .nav-tabs .nav-link:hover { color: var(--primary); }
html.crms-theme .nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: none;
}

/* ── 14. Pagination ────────────────────────────────────────────────────── */
html.crms-theme .page-link {
    color: var(--gray-900);
    border-color: var(--border-color);
    font-size: 14px;
    background: var(--paper);
    box-shadow: none;
}
html.crms-theme .page-link:hover { background: var(--light); color: var(--primary); border-color: var(--border-color); }
html.crms-theme .page-link:focus { box-shadow: none; }
html.crms-theme .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
html.crms-theme .page-item.disabled .page-link { color: var(--gray-100); background: var(--paper); }
html.crms-theme .pagination-info { color: var(--gray-500); }
html.crms-theme .per-page-select {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--gray-900);
    background-color: var(--paper);
}

/* ── 15. Progress, dropdowns, misc ─────────────────────────────────────── */
html.crms-theme .progress { background: var(--light); border-radius: 50rem; }
html.crms-theme .progress-bar { background: var(--primary); }

html.crms-theme .dropdown-menu,
html.crms-theme .list-group {
    background: var(--paper);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    font-size: 14px;
}
html.crms-theme .dropdown-item { border-radius: 6px; color: var(--body-color); padding: 6px 15px; }
html.crms-theme .dropdown-item:hover, html.crms-theme .dropdown-item:focus { background: var(--light); color: var(--gray-900); }
html.crms-theme .list-group-item { border-color: var(--border-color); color: var(--gray-900); }
html.crms-theme .list-group-item:hover { background: var(--light); }

html.crms-theme .eyebrow { color: var(--gray-500); }
html.crms-theme .text-gold { color: var(--secondary) !important; }
html.crms-theme .text-navy { color: var(--heading-color) !important; }
html.crms-theme .hr-gold {
    background: var(--linear-gradient);
    height: 2px;
    border: 0;
    opacity: 1;
}

html.crms-theme .modal-content { background: var(--paper); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: var(--box-shadow); }
html.crms-theme .modal-header { border-bottom: 1px solid var(--border-color); padding: 16px 20px; }
html.crms-theme .modal-title { font-size: 18px; color: var(--heading-color); }

html.crms-theme .masked-contact .mask-value { color: var(--gray-500); }
html.crms-theme .masked-contact.is-revealed .mask-value { color: var(--heading-color); }
html.crms-theme .masked-contact.is-denied .mask-value { color: var(--danger); }

/* ── 16. Login — CRMS split account page ───────────────────────────────── */
/* Left: flat form on white. Right: full-bleed 10px-radius brand panel
   (the template uses a photo; we draw the red→amber gradient instead). */
html.crms-theme body.login-shell {
    background: var(--paper);
    display: flex;
    flex-direction: row;      /* app.css uses column — row pins the form left */
    align-items: stretch;
    justify-content: flex-start;
    color: var(--body-color);
}
html.crms-theme body.login-shell::before { display: none; }
html.crms-theme body.login-shell::after {
    content: "";
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: calc(50% - 40px);
    border-radius: 10px;
    background:
        radial-gradient(120% 90% at 85% 8%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(110% 120% at 10% 100%, rgba(4, 22, 60, 0.35) 0%, transparent 60%),
        linear-gradient(160deg, #1D4ED8 0%, #2563EB 48%, #38BDF8 100%);
}
html.crms-theme .login-wrap {
    width: 50%;
    max-width: none;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
html.crms-theme .login-card {
    width: min(400px, 100%);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
html.crms-theme .login-card::before { display: none; }
html.crms-theme .login-brand {
    background: none;
    border: 0;
    padding: 0 0 24px;
    text-align: center;
}
html.crms-theme .login-brand::after { display: none; }
html.crms-theme .login-tagline { color: var(--gray-500); text-shadow: none; }
html.crms-theme .login-body { padding: 0; }
html.crms-theme .login-eyebrow {
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html.crms-theme .login-title {
    color: var(--heading-color);
    font-size: 24px;
    font-weight: 700;
}
html.crms-theme .login-sub { color: var(--gray-500); font-size: 14px; }
html.crms-theme .login-label { color: var(--heading-color); font-weight: 500; font-size: 13px; }
html.crms-theme .login-form .form-control {
    background: var(--field);
    border-color: var(--border-color);
    color: var(--gray-900);
}
html.crms-theme .login-submit { width: 100%; }
html.crms-theme .login-foot-hint {
    color: var(--gray-500);
    background: var(--light);
    border: 0;
    border-radius: 6px;
}
html.crms-theme .login-footer {
    position: fixed;
    left: 0;
    bottom: 16px;
    width: 50%;
    text-align: center;
    color: var(--gray-500);
    font-size: 13px;
    text-shadow: none;
}
@media (max-width: 991.98px) {
    html.crms-theme body.login-shell { justify-content: center; }
    html.crms-theme body.login-shell::after { display: none; }
    html.crms-theme .login-wrap { width: 100%; }
    html.crms-theme .login-footer { width: 100%; position: static; margin-top: 24px; }
}

/* ── 17. Page-local accents (dashboard / prospects / users) ────────────── */
/* Ticker marquee: gold gradient → trust-blue sweep. */
html.crms-theme #dashboard-ticker {
    background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 45%, #38BDF8 100%) !important;
    font-family: "Golos Text", sans-serif !important;
    box-shadow: var(--box-shadow) !important;
}

/* Inline gold accents keyed on their exact style strings (stylesheet
   !important beats inline styles). */
html.crms-theme [style*="border-left:3px solid #9C7A3C"],
html.crms-theme [style*="border-left:3px solid #B59355"] { border-left-color: var(--primary) !important; }
html.crms-theme [style*="border-left:4px solid #B59355"],
html.crms-theme [style*="border-left:4px solid #C99A3E"] { border-left-color: var(--secondary) !important; }
html.crms-theme [style*="color:#9C7A3C"] { color: var(--primary) !important; }
html.crms-theme [style*="color:#B59355"] { color: var(--secondary) !important; }
html.crms-theme [style*="background:#fbf7ee"] {
    background: var(--secondary-transparent) !important;
    border-color: #f2e2c4 !important;
}
html.crms-theme [style*="background:#B59355"] { background: var(--secondary) !important; }
html.crms-theme [style*="background:#9C7A3C"],
html.crms-theme .badge-due-today {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Team-pulse donut hole tracks the card surface via --surface (set in §0). */

/* ── 18. Motion & print ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html.crms-theme *, html.crms-theme *::before, html.crms-theme *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
@media print {
    html.crms-theme body { background: var(--paper); }
}

/* ── 19. Page beautification (dashboard / prospects / company data) ────── */
/* KPI stat cards: label+number left, gradient icon tile right. */
html.crms-theme .stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
html.crms-theme .stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
html.crms-theme .stat-blue   { background: linear-gradient(180deg, #2563EB, #4F86F7); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55); }
html.crms-theme .stat-sky    { background: linear-gradient(180deg, #0EA5E9, #38BDF8); box-shadow: 0 6px 14px -6px rgba(14, 165, 233, .55); }
html.crms-theme .stat-indigo { background: linear-gradient(180deg, #3538CD, #575AFF); box-shadow: 0 6px 14px -6px rgba(53, 56, 205, .5); }
html.crms-theme .stat-teal   { background: linear-gradient(180deg, #0E9384, #2CC1B0); box-shadow: 0 6px 14px -6px rgba(14, 147, 132, .5); }
html.crms-theme .stat-pink   { background: linear-gradient(180deg, #DD2590, #FE57B8); box-shadow: 0 6px 14px -6px rgba(221, 37, 144, .45); }

/* Section heading accent — the CRMS 3px gradient line-title. */
html.crms-theme .line-title {
    display: inline-block;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--linear-gradient);
    margin-right: 8px;
}

/* Dashboard hero client search: taller field with an inline magnifier. */
html.crms-theme #clientSearch {
    height: 48px;
    border-radius: 8px;
    padding-left: 42px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.35-4.35'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 14px center;
}
html.crms-theme #clientSearchResults { border-radius: 8px; overflow: hidden; }

/* Clickable KPI drill-down tiles (prospect sources / company-data statuses). */
html.crms-theme .src-tile {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html.crms-theme .src-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .35);
    border-color: #C7DBF8;
}
html.crms-theme .src-tile.border-primary {
    border-color: var(--primary) !important;
    background: var(--primary-transparent);
}
html.crms-theme .src-tile .fs-5 {
    font-size: 18px !important;
    font-variant-numeric: tabular-nums;
    color: var(--heading-color);
}

/* Client initial chips in list tables. */
html.crms-theme .avatar-chip {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
    vertical-align: middle;
}
html.crms-theme .av-0 { background: #2563EB; }
html.crms-theme .av-1 { background: #0E9384; }
html.crms-theme .av-2 { background: #3538CD; }
html.crms-theme .av-3 { background: #DD2590; }
html.crms-theme .av-4 { background: #0284C7; }

/* Friendly empty states inside tables. */
html.crms-theme .empty-state {
    padding: 40px 16px;
    text-align: center;
    color: var(--gray-500);
}
html.crms-theme .empty-state .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
html.crms-theme .empty-title { font-weight: 600; color: var(--heading-color); font-size: 15px; }
html.crms-theme .empty-sub { font-size: 13px; margin-top: 2px; }

/* ── 20. Dark mode ─────────────────────────────────────────────────────── */
/* Toggled by .theme-toggle (crms.js) → html.crms-dark; saved preference is
   applied pre-paint from layout.php <head>. The theme is token-driven, so
   dark mode is mostly this re-point block; everything below it handles the
   few literal-valued or Bootstrap-utility surfaces. Flat surfaces only —
   no backdrop blur, no translucent panels over content. */
html.crms-theme.crms-dark {
    color-scheme: dark;              /* native pickers/scrollbars go dark */
    --light: #0E1524;                /* canvas — deep navy slate */
    --paper: #151C2C;                /* cards / chrome */
    --field: #1B2334;                /* inputs, one step lighter */
    --menu-bg: #121A2B;              /* sidebar */
    --menu-line: #243048;
    --menu-active-bg: rgba(59, 130, 246, 0.22);
    --menu-ink: #D6DEEC;             /* rail text flips light */
    --menu-ink-soft: #8E9BB0;
    --border-color: #26314A;
    --hair: #222D42;
    --heading-color: #E8ECF4;
    --body-color: #9AA7BD;
    --gray-900: #E8ECF4;             /* ink flips light */
    --gray-600: #B9C4D6;
    --gray-500: #8E9BB0;
    --gray-400: #6C7A93;
    --gray-100: #38455F;
    --primary-transparent: rgba(37, 99, 235, 0.18);
    --secondary-transparent: rgba(14, 165, 233, 0.16);
    --success-transparent: rgba(26, 190, 23, 0.14);
    --danger-transparent: rgba(239, 30, 30, 0.16);
    --warning-transparent: rgba(249, 184, 1, 0.13);
    --info-transparent: rgba(47, 128, 237, 0.16);
    --box-shadow: 0px 4px 10px 0px rgba(2, 6, 16, 0.45);
    --topbar-item-shadow: 0px 3px 6px 0px rgba(2, 6, 16, 0.4);
    --surface: #151C2C;              /* pulse-donut hole */
    /* legacy app.css consumers */
    --c-bg: #0E1524;
    --c-paper: #151C2C;
    --c-ink: #E8ECF4;
    --c-ink-soft: #B9C4D6;
    --c-ink-mute: #8E9BB0;
    --c-line: #26314A;
    --c-line-strong: #26314A;
    --c-gold-line: #26314A;
    /* Bootstrap utility vars (.text-muted, borders, etc.) */
    --bs-body-bg: #0E1524;
    --bs-body-color: #9AA7BD;
    --bs-body-color-rgb: 154, 167, 189;   /* .text-body reads the -rgb var */
    --bs-secondary-color: #8E9BB0;
    --bs-tertiary-color: #6C7A93;
    --bs-border-color: #26314A;
    --bs-emphasis-color: #E8ECF4;
    --bs-emphasis-color-rgb: 232, 236, 244;
}

/* Toggle button: moon in light mode, sun in dark mode. */
html.crms-theme .theme-toggle .icon-sun { display: none; }
html.crms-theme.crms-dark .theme-toggle .icon-sun { display: inline-block; }
html.crms-theme.crms-dark .theme-toggle .icon-moon { display: none; }

/* Literal-valued surfaces the token block can't reach. */
html.crms-theme.crms-dark ::-webkit-scrollbar-thumb { background: #33405C; }
html.crms-theme.crms-dark ::-webkit-scrollbar-thumb:hover { background: #40506F; }
html.crms-theme.crms-dark .table {
    color: var(--gray-600);
    --bs-table-color: var(--gray-600);
}
html.crms-theme.crms-dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA7BD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html.crms-theme.crms-dark .src-tile:hover { border-color: #33455F; box-shadow: 0 8px 18px -8px rgba(2, 6, 16, 0.6); }
html.crms-theme.crms-dark .sidebar-user-card:hover { border-color: #33455F; }
html.crms-theme.crms-dark .sidebar-icon { background: rgba(255, 255, 255, 0.07); }

/* Bootstrap color utilities used in page markup. */
html.crms-theme.crms-dark .text-dark { color: var(--heading-color) !important; }
html.crms-theme.crms-dark .bg-light { background-color: var(--field) !important; color: var(--body-color); }
html.crms-theme.crms-dark .bg-white { background-color: var(--paper) !important; }
html.crms-theme.crms-dark .border, html.crms-theme.crms-dark .border-bottom,
html.crms-theme.crms-dark .border-top { border-color: var(--border-color) !important; }

/* Dashboard page-local widgets with baked-in light colors. */
html.crms-theme.crms-dark .pulse-bar { background: rgba(255, 255, 255, 0.08); }
html.crms-theme.crms-dark [style*="background:#EEF1F5"] { background: #26314A !important; }
html.crms-theme.crms-dark .fu-chip { background: var(--field); }
html.crms-theme.crms-dark #clientSearchResults { box-shadow: 0 16px 44px -14px rgba(0, 0, 0, 0.6) !important; }

/* Login: keep the gradient panel, darken the form side. */
html.crms-theme.crms-dark body.login-shell { background: var(--light); }
html.crms-theme.crms-dark .login-tagline,
html.crms-theme.crms-dark .login-footer { color: var(--gray-500); }

/* Printing a dark page would waste toner and lose contrast — print light. */
@media print {
    html.crms-theme.crms-dark {
        --light: #fff; --paper: #fff; --field: #fff;
        --heading-color: #1F2020; --body-color: #707070;
        --gray-900: #1F2020; --gray-600: #5A5B5B; --gray-500: #707070;
        --border-color: #E2E8F0; --hair: #E8E8E8;
    }
}