/* ═══════════════════════════════════════════════════════════════════════
   crm-professional.css — Sales CRM · Netsol IT Solutions
   Professional dark-sidebar theme — responsive, light + dark mode
   ─────────────────────────────────────────────────────────────────────
   Loads after style.css Overrides where needed.
═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Brand ── */
    --crm-primary:         #0f79f3;
    --crm-primary-hover:   #0b69d8;
    --crm-primary-light:   #ecf3ff;
    --crm-primary-dark:    #1e40af;
    --crm-accent:          #6366f1;   /* indigo accent */
    --crm-accent-light:    #eef2ff;

    /* ── Sidebar (always dark) ── */
    --crm-sidebar-bg:      #111827;   /* dark navy */
    --crm-sidebar-header:  #0d1424;   /* logo area — slightly deeper */
    --crm-sidebar-border:  #1f2d3d;
    --crm-sidebar-text:    rgb(228, 228, 228);
    --crm-sidebar-text-hover: rgba(255,255,255,.92);
    --crm-sidebar-icon:    rgb(228, 228, 228);
    --crm-sidebar-section: rgba(255,255,255,.3);
    --crm-sidebar-active-bg:     rgba(15,121,243,.2);
    --crm-sidebar-active-border: #0f79f3;
    --crm-sidebar-active-text:   #60a5fa;
    --crm-sidebar-hover-bg:  rgba(255,255,255,.05);
    --crm-sidebar-sub-hover: rgba(255,255,255,.06);

    /* ── Surface / Content area ── */
    --crm-bg:              #eef2f8;
    --crm-surface:         #ffffff;
    --crm-surface-2:       #f8fafc;
    --crm-surface-hover:   #f1f5fb;
    --crm-border:          #e2e8f2;
    --crm-border-light:    #edf1f8;

    /* ── Header ── */
    --crm-header-bg:       #ffffff;
    --crm-header-border:   #e2e8f2;

    /* ── Text ── */
    --crm-text:            #1e293b;
    --crm-text-muted:      #64748b;
    --crm-text-light:      #94a3b8;

    /* ── Semantic ── */
    --crm-success:         #10b981;
    --crm-success-bg:      #ecfdf5;
    --crm-success-border:  rgba(16,185,129,.22);
    --crm-warning:         #f59e0b;
    --crm-warning-bg:      #fffbeb;
    --crm-warning-border:  rgba(245,158,11,.22);
    --crm-danger:          #ef4444;
    --crm-danger-bg:       #fef2f2;
    --crm-danger-border:   rgba(239,68,68,.22);
    --crm-info:            #0ea5e9;
    --crm-info-bg:         #f0f9ff;
    --crm-info-border:     rgba(14,165,233,.22);

    /* ── KPI card accent bars ── */
    --crm-kpi-1: #0f79f3;   /* blue  — leads */
    --crm-kpi-2: #10b981;   /* green — orders */
    --crm-kpi-3: #f59e0b;   /* amber — revenue */
    --crm-kpi-4: #ef4444;   /* red   — follow-ups */

    /* ── Shadows ── */
    --crm-shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --crm-shadow:      0 2px 8px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);
    --crm-shadow-md:   0 4px 16px rgba(15,23,42,.1),  0 2px 6px rgba(15,23,42,.06);
    --crm-shadow-lg:   0 8px 28px rgba(15,23,42,.12), 0 3px 10px rgba(15,23,42,.07);
    --crm-shadow-btn:  0 2px 6px rgba(15,121,243,.28);
    --crm-shadow-card: 0 1px 3px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.04);

    /* ── Geometry ── */
    --crm-radius-xs:  4px;
    --crm-radius-sm:  6px;
    --crm-radius:     10px;
    --crm-radius-lg:  14px;
    --crm-radius-xl:  18px;

    /* ── Field sizing ── */
    --crm-field-h:      38px;
    --crm-field-fs:     0.875rem;
    --crm-field-radius: 0.375rem;
    --crm-field-pad-x:  0.75rem;

    /* ── Motion ── */
    --crm-ease:    150ms ease;
    --crm-ease-md: 250ms ease;
}

/* ── Dark-mode token overrides ── */
[data-theme=dark] {
    --crm-bg:              #0b1220;
    --crm-surface:         #162032;
    --crm-surface-2:       #1a2840;
    --crm-surface-hover:   #1e2e48;
    --crm-border:          rgba(255,255,255,.09);
    --crm-border-light:    rgba(255,255,255,.05);
    --crm-header-bg:       #10192b;
    --crm-header-border:   rgba(255,255,255,.07);
    --crm-text:            rgba(255,255,255,.88);
    --crm-text-muted:      rgba(255,255,255,.5);
    --crm-text-light:      rgba(255,255,255,.32);
    --crm-primary-light:   rgba(15,121,243,.18);
    --crm-accent-light:    rgba(99,102,241,.15);
    --crm-success-bg:      rgba(16,185,129,.14);
    --crm-success-border:  rgba(16,185,129,.3);
    --crm-warning-bg:      rgba(245,158,11,.12);
    --crm-warning-border:  rgba(245,158,11,.3);
    --crm-danger-bg:       rgba(239,68,68,.14);
    --crm-danger-border:   rgba(239,68,68,.3);
    --crm-info-bg:         rgba(14,165,233,.12);
    --crm-info-border:     rgba(14,165,233,.3);
    --crm-shadow-sm:       0 1px 3px rgba(0,0,0,.24);
    --crm-shadow:          0 2px 8px rgba(0,0,0,.3);
    --crm-shadow-md:       0 4px 16px rgba(0,0,0,.36);
    --crm-shadow-lg:       0 8px 28px rgba(0,0,0,.4);
    --crm-shadow-card:     0 1px 3px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.22);
    /* Sidebar stays same in dark mode — already dark */
    --crm-sidebar-bg:      #0d1424;
    --crm-sidebar-header:  #080f1a;
    --crm-sidebar-border:  rgba(255,255,255,.06);
}


/* ──────────────────────────────────────────────────────────────────────
   2. BASE
   ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--crm-bg) !important;
    color: var(--crm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Body bg tokens override */
[data-theme=dark] body,
[data-theme=dark] .bg-body-bg { background-color: var(--crm-bg) !important; }

a { color: var(--crm-primary); text-decoration: none; }
a:hover { color: var(--crm-primary-hover); }

/* Custom scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #c0cad8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: #9baab9; }
[data-theme=dark] ::-webkit-scrollbar-thumb       { background: #243345; }
[data-theme=dark] ::-webkit-scrollbar-thumb:hover { background: #2e4159; }


/* ──────────────────────────────────────────────────────────────────────
   3. SIDEBAR — always dark navy
   ────────────────────────────────────────────────────────────────────── */
.sidebar-area {
    background-color: var(--crm-sidebar-bg) !important;
    background-color: #1b232d !important;
    border-right: 1px solid var(--crm-sidebar-border) !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.18) !important;
}

/* Logo area */
.sidebar-area .logo {
    /* background-color: var(--crm-sidebar-header) !important; */
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    /* padding: 18px 22px !important; */
}
.sidebar-area .logo .logo-text {
    color: #e2e8f0 !important;
    /* font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -.15px !important;
    -webkit-text-fill-color: unset !important;
    background: none !important; */
}
.sidebar-area .logo a { color: #e2e8f0 !important; }

/* Hamburger lines — white on dark sidebar */
.sidebar-area .sidebar-burger-menu .d-block.for-dark-burger,
.sidebar-area .sidebar-burger-menu-close .d-block.for-dark-burger {
    border-color: rgba(255,255,255,.58) !important;
}

/* Section titles (MAIN, CUSTOMERS, etc.) */
#layout-menu .menu-title .menu-title-text,
.menu-vertical .menu-title .menu-title-text {
    /* color: var(--crm-sidebar-section) !important; */
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

/* All menu link text — override slate colour */
.menu-vertical .menu-item .menu-link {
    color: var(--crm-sidebar-text) !important;
    font-size: 0.9rem !important;
}
.menu-vertical .menu-item .menu-link:not(:hover):not(.active):not(.open) .menu-icon,
.menu-vertical .menu-item .menu-link:not(:hover):not(.active):not(.open) .material-symbols-outlined {
    color: var(--crm-sidebar-icon) !important;
    transition: color var(--crm-ease);
}
.menu-vertical .menu-item .menu-link:not(:hover):not(.active):not(.open) .title {
    color: inherit !important;
}

/* Sub-menu text */
.menu-vertical .menu-sub .menu-item .menu-link {
    color: rgba(255,255,255,.55) !important;
    font-size: 0.855rem !important;
}

/* ── HOVER ── */
/* .menu-vertical .menu-item .menu-link:not(.active):hover {
    background-color: var(--crm-sidebar-hover-bg) !important;
    color: var(--crm-sidebar-text-hover) !important;
    border-radius: var(--crm-radius-sm) !important;
}
.menu-vertical .menu-item .menu-link:not(.active):hover .menu-icon,
.menu-vertical .menu-item .menu-link:not(.active):hover .material-symbols-outlined {
    color: rgba(255,255,255,.82) !important;
}
.menu-vertical .menu-sub .menu-item .menu-link:not(.active):hover {
    background-color: var(--crm-sidebar-sub-hover) !important;
    color: rgba(255,255,255,.88) !important;
} */

/* ── ACTIVE (top-level) ── */
/* #layout-menu .menu-inner > .menu-item > .menu-link.active {
    background-color: var(--crm-sidebar-active-bg) !important;
    color: var(--crm-sidebar-active-text) !important;
    border-left: 3px solid var(--crm-sidebar-active-border) !important;
    border-radius: var(--crm-radius-sm) !important;
    padding-left: 7px !important;
    margin-right: -5px;
    font-weight: 600 !important;
}
#layout-menu .menu-inner > .menu-item > .menu-link.active .menu-icon,
#layout-menu .menu-inner > .menu-item > .menu-link.active .title,
#layout-menu .menu-inner > .menu-item > .menu-link.active .material-symbols-outlined {
    color: var(--crm-sidebar-active-text) !important;
} */

/* ── ACTIVE (sub-menu item) ── */
#layout-menu .menu-sub .menu-link.active {
    color: var(--crm-sidebar-active-text) !important;
    font-weight: 600 !important;
}
#layout-menu .menu-sub .menu-link.active::before {
    background-color: var(--crm-sidebar-active-border) !important;
}

/* Open toggle arrow — show active colour */
.menu-vertical .menu-item.open .menu-link.menu-toggle::after {
    border-color: var(--crm-sidebar-active-text) !important;
}

/* Notification badge in sidebar */
#layout-menu .badge.bg-danger {
    font-size: 10px !important;
    padding: 2px 5px !important;
}

/* Scrollbar inside sidebar */
#layout-menu::-webkit-scrollbar-track  { background: transparent; }
#layout-menu::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.12); }
#layout-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* Mini sidebar hover — ensure simplebar content wrapper can scroll after recalc */
[sidebar-data-theme=sidebar-hide] .sidebar-area:hover #layout-menu .simplebar-content-wrapper {
    overflow-y: auto !important;
}
[sidebar-data-theme=sidebar-hide] .sidebar-area:hover #layout-menu .simplebar-track.simplebar-vertical {
    visibility: visible;
}


/* ──────────────────────────────────────────────────────────────────────
   4. HEADER
   ────────────────────────────────────────────────────────────────────── */
.header-area {
    background-color: var(--crm-header-bg) !important;
    border: 1px solid var(--crm-header-border) !important;
    border-radius: var(--crm-radius) !important;
    box-shadow: var(--crm-shadow-sm) !important;
    transition: background-color var(--crm-ease-md), border-color var(--crm-ease-md);
    margin-top: 18px !important;
}
[data-theme=dark] .header-area {
    background-color: var(--crm-header-bg) !important;
    border-color: var(--crm-header-border) !important;
}

/* Header burger lines (content area — not sidebar) */
#header-burger-menu .d-block.for-dark-burger {
    border-color: #64748b !important;
    transition: border-color var(--crm-ease);
}
[data-theme=dark] #header-burger-menu .d-block.for-dark-burger {
    border-color: rgba(255,255,255,.6) !important;
}

/* Profile avatar */
.admin-profile .rounded-circle {
    border: 2px solid var(--crm-border);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}
.admin-profile .rounded-circle:hover {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(15,121,243,.15);
}
[data-theme=dark] .admin-profile .rounded-circle {
    border-color: rgba(255,255,255,.14);
}


/* ──────────────────────────────────────────────────────────────────────
   5. CARDS
   ────────────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius) !important;
    box-shadow: var(--crm-shadow-card) !important;
    transition: box-shadow var(--crm-ease-md), border-color var(--crm-ease-md);
}
.card:hover {
    box-shadow: var(--crm-shadow) !important;
}
.card-header {
    background-color: var(--crm-surface) !important;
    border-bottom: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius) var(--crm-radius) 0 0 !important;
}
.card-header h5, .card-header h6 {
    font-weight: 600;
    color: var(--crm-text);
    font-size: 0.95rem;
}
[data-theme=dark] .card {
    background-color: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
}
[data-theme=dark] .card-header {
    background-color: var(--crm-surface-2) !important;
    border-color: var(--crm-border) !important;
}
[data-theme=dark] .bg-white {
    background-color: var(--crm-surface) !important;
}
[data-theme=dark] .border-white {
    border-color: var(--crm-border) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   6. KPI STAT CARDS — colour-coded left accent bar
   ────────────────────────────────────────────────────────────────────── */
.col-xl-3 .card.bg-white,
.col-md-6 .card.bg-white {
    position: relative;
    overflow: hidden;
    border-top: none !important;
    border-left: 4px solid transparent !important;
    transition: border-left-color var(--crm-ease-md), box-shadow var(--crm-ease-md);
}
/* Cycle through 4 colours per position */
.col-xl-3:nth-child(4n+1) .card.bg-white,
.col-md-6:nth-child(4n+1) .card.bg-white { border-left-color: var(--crm-kpi-1) !important; }
.col-xl-3:nth-child(4n+2) .card.bg-white,
.col-md-6:nth-child(4n+2) .card.bg-white { border-left-color: var(--crm-kpi-2) !important; }
.col-xl-3:nth-child(4n+3) .card.bg-white,
.col-md-6:nth-child(4n+3) .card.bg-white { border-left-color: var(--crm-kpi-3) !important; }
.col-xl-3:nth-child(4n+4) .card.bg-white,
.col-md-6:nth-child(4n+4) .card.bg-white { border-left-color: var(--crm-kpi-4) !important; }

.col-xl-3 .card.bg-white:hover,
.col-md-6 .card.bg-white:hover { box-shadow: var(--crm-shadow-md) !important; }

/* KPI icon box */
.kpi-icon {
    border-radius: var(--crm-radius-sm) !important;
    transition: transform var(--crm-ease-md);
    flex-shrink: 0;
}
.card:hover .kpi-icon { transform: scale(1.06); }
[data-theme=dark] .kpi-icon { background: rgba(255,255,255,.07) !important; }

/* KPI big number */
.fs-26.fw-semibold, .fs-28.fw-semibold {
    letter-spacing: -.5px;
    color: var(--crm-text);
}
[data-theme=dark] .fs-26.fw-semibold,
[data-theme=dark] .fs-28.fw-semibold { color: rgba(255,255,255,.9); }


/* ──────────────────────────────────────────────────────────────────────
   7. BUTTONS
   ────────────────────────────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    letter-spacing: .01em;
    transition: all var(--crm-ease);
    border-radius: var(--crm-field-radius) !important;
}
.btn:focus { outline: none; }

/* Primary */
.btn-primary {
    background-color: var(--crm-primary) !important;
    border-color: var(--crm-primary) !important;
    color: #fff !important;
    box-shadow: var(--crm-shadow-btn);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--crm-primary-hover) !important;
    border-color: var(--crm-primary-hover) !important;
    box-shadow: 0 4px 14px rgba(15,121,243,.4) !important;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Outline primary */
.btn-outline-primary {
    color: var(--crm-primary) !important;
    border-color: var(--crm-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--crm-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(15,121,243,.28);
}

/* Outline secondary */
.btn-outline-secondary {
    color: var(--crm-text-muted) !important;
    border-color: var(--crm-border) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: var(--crm-surface-hover) !important;
    border-color: #9baab9 !important;
    color: var(--crm-text) !important;
}
[data-theme=dark] .btn-outline-secondary {
    color: rgba(255,255,255,.62) !important;
    border-color: rgba(255,255,255,.2) !important;
}
[data-theme=dark] .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,.07) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.35) !important;
}

/* Success / Danger lift */
.btn-success { box-shadow: 0 2px 6px rgba(16,185,129,.3); }
.btn-success:hover { box-shadow: 0 4px 14px rgba(16,185,129,.4) !important; transform: translateY(-1px); }
.btn-danger  { box-shadow: 0 2px 6px rgba(239,68,68,.28); }
.btn-danger:hover  { box-shadow: 0 4px 14px rgba(239,68,68,.38) !important; transform: translateY(-1px); }

/* Btn dark */
[data-theme=dark] .btn-outline-dark {
    color: rgba(255,255,255,.7) !important;
    border-color: rgba(255,255,255,.22) !important;
}
[data-theme=dark] .btn-outline-dark:hover {
    background-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

/* Icon inside btn */
.btn .material-symbols-outlined { font-size: 1rem !important; vertical-align: -3px; line-height: 1; }
.btn-sm .material-symbols-outlined { font-size: 0.9rem !important; }
.card-header .btn-sm { display: inline-flex; align-items: center; gap: 4px; }

/* Header action icons — 20px, not overridden by .btn rule */
.header-right-item .btn .material-symbols-outlined,
#notif-bell-btn .material-symbols-outlined,
.light-dark .material-symbols-outlined,
#switch-toggle .material-symbols-outlined { font-size: 20px !important; line-height: 1; }


/* ──────────────────────────────────────────────────────────────────────
   8. BADGES & STATUS CHIPS
   ────────────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: .025em;
    padding: 4px 8px;
    border-radius: var(--crm-radius-xs);
}

/* ── Status colours ── */
.badge-status-pending_approval  { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fcd34d !important; }
.badge-status-processing        { background: var(--crm-info-bg) !important; color: #0369a1 !important; border: 1px solid rgba(14,165,233,.3) !important; }
.badge-status-installation_pending { background: var(--crm-primary-light) !important; color: #1e40af !important; border: 1px solid rgba(15,121,243,.25) !important; }
.badge-status-completed         { background: var(--crm-success-bg) !important; color: #065f46 !important; border: 1px solid rgba(16,185,129,.3) !important; }
.badge-status-closed            { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
.badge-status-pending           { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fcd34d !important; }
.badge-status-approved          { background: var(--crm-success-bg) !important; color: #065f46 !important; border: 1px solid rgba(16,185,129,.3) !important; }
.badge-status-rejected          { background: var(--crm-danger-bg) !important; color: #991b1b !important; border: 1px solid rgba(239,68,68,.28) !important; }
.badge-status-draft             { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
.badge-status-active            { background: var(--crm-success-bg) !important; color: #065f46 !important; border: 1px solid rgba(16,185,129,.3) !important; }
.badge-status-inactive          { background: var(--crm-danger-bg) !important; color: #991b1b !important; border: 1px solid rgba(239,68,68,.28) !important; }
.badge-status-trialing          { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid rgba(37,99,235,.28) !important; }
.badge-status-trial_expired     { background: #fff7ed !important; color: #9a3412 !important; border: 1px solid rgba(234,88,12,.28) !important; }

/* Dark overrides for status badges */
[data-theme=dark] .badge-status-pending_approval { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.32) !important; }
[data-theme=dark] .badge-status-processing       { background: rgba(14,165,233,.16) !important; color: #38bdf8 !important; border-color: rgba(14,165,233,.32) !important; }
[data-theme=dark] .badge-status-installation_pending { background: rgba(15,121,243,.18) !important; color: #60a5fa !important; border-color: rgba(15,121,243,.32) !important; }
[data-theme=dark] .badge-status-completed,
[data-theme=dark] .badge-status-approved,
[data-theme=dark] .badge-status-active   { background: rgba(16,185,129,.16) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.32) !important; }
[data-theme=dark] .badge-status-closed,
[data-theme=dark] .badge-status-draft   { background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.14) !important; }
[data-theme=dark] .badge-status-rejected,
[data-theme=dark] .badge-status-inactive { background: rgba(239,68,68,.16) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.32) !important; }
[data-theme=dark] .badge-status-trialing { background: rgba(37,99,235,.18) !important; color: #93c5fd !important; border-color: rgba(37,99,235,.32) !important; }
[data-theme=dark] .badge-status-trial_expired { background: rgba(234,88,12,.16) !important; color: #fdba74 !important; border-color: rgba(234,88,12,.3) !important; }

/* Bootstrap contextual badge tints */
[data-theme=dark] .badge.bg-light { background: rgba(255,255,255,.09) !important; color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .badge.text-dark { color: #fff !important; }


/* ──────────────────────────────────────────────────────────────────────
   9. FORM CONTROLS
   ────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--crm-border);
    color: var(--crm-text);
    background-color: var(--crm-surface);
    border-radius: var(--crm-field-radius);
    font-size: var(--crm-field-fs);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(15,121,243,.14);
    background-color: var(--crm-surface);
    color: var(--crm-text);
}
.form-control::placeholder { color: var(--crm-text-light); }
.form-label {
    font-size: 0.8375rem;
    font-weight: 600;
    color: var(--crm-text);
    margin-bottom: 0.3rem;
}

/* Dark forms */
[data-theme=dark] .form-control,
[data-theme=dark] .form-select {
    background-color: var(--crm-surface-2) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .form-control:focus,
[data-theme=dark] .form-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.16) !important;
}
[data-theme=dark] .form-control::placeholder { color: rgba(255,255,255,.25) !important; }
[data-theme=dark] .form-label { color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .form-text  { color: rgba(255,255,255,.38) !important; }
[data-theme=dark] select.form-select { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] select.form-select option { background-color: #1e2e48; color: #fff; }

/* Floating label dark */
[data-theme=dark] .form-floating label { color: rgba(255,255,255,.42) !important; }
[data-theme=dark] .form-floating > .form-control:focus ~ label,
[data-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #60a5fa !important; }

/* Checkbox / radio */
.form-check-input { border-color: #cbd5e1; transition: all var(--crm-ease); }
.form-check-input:checked { background-color: var(--crm-primary); border-color: var(--crm-primary); }
.form-check-input:focus  { box-shadow: 0 0 0 3px rgba(15,121,243,.18); border-color: var(--crm-primary); }
[data-theme=dark] .form-check-input { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.22) !important; }
[data-theme=dark] .form-check-input:checked { background-color: var(--crm-primary) !important; border-color: var(--crm-primary) !important; }
[data-theme=dark] .form-check-label { color: rgba(255,255,255,.78) !important; }

/* Input group */
.input-group-text {
    background-color: var(--crm-surface-2);
    border-color: var(--crm-border);
    color: var(--crm-text-muted);
    font-size: var(--crm-field-fs);
}
[data-theme=dark] .input-group-text {
    background-color: #1e2e48 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.6) !important;
}
[data-theme=dark] .input-group .btn-outline-secondary { border-color: rgba(255,255,255,.12) !important; }

/* ── Filter section — standardized heights ── */
:root {
    --crm-field-h:      38px;
    --crm-field-fs:     0.875rem;
    --crm-field-radius: 0.375rem;
    --crm-field-pad-x:  0.75rem;
}
#filter-collapse .form-control,
#filter-collapse .form-select,
#filter-collapse input[type="text"],
#filter-collapse input[type="date"],
#filter-collapse input[type="number"],
#filter-collapse input[type="email"],
#filter-collapse input[type="search"],
#filter-collapse input[type="tel"] {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    max-height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    border-radius: var(--crm-field-radius) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--crm-field-h) !important;
    box-sizing: border-box;
}
#filter-collapse .select2-container--default .select2-selection--single {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    border-radius: var(--crm-field-radius) !important;
    font-size: var(--crm-field-fs) !important;
}
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--crm-field-fs) !important;
    line-height: var(--crm-field-h) !important;
}
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--crm-field-h) !important; }
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
}
#filter-collapse .btn {
    height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
}
#filter-collapse .form-label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600;
    white-space: nowrap;
    display: block;
}
#filter-collapse .col-auto { display: flex; align-items: flex-end; }

/* Date input */
input[type="date"].form-control,
#filter-collapse input[type="date"] {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    max-height: var(--crm-field-h) !important;
    line-height: normal !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box;
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type="date"]::-webkit-datetime-edit             { padding: 0; line-height: var(--crm-field-h); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Dark filter */
[data-theme=dark] #filter-collapse .form-control,
[data-theme=dark] #filter-collapse .form-select,
[data-theme=dark] #filter-collapse input { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] #filter-collapse .form-control::placeholder,
[data-theme=dark] #filter-collapse input::placeholder { color: rgba(255,255,255,.25) !important; }
[data-theme=dark] #filter-collapse .form-label { color: rgba(255,255,255,.7) !important; }


/* ──────────────────────────────────────────────────────────────────────
   10. SELECT2 — LIGHT
   ────────────────────────────────────────────────────────────────────── */
/* .select2-container { width: 100% !important; } */

.select2-container--default .select2-selection--single {
    height: 38px !important; min-height: 38px !important;
    padding: 0 2.25rem 0 0.75rem !important;
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-field-radius) !important;
    display: flex !important; align-items: center !important;
    box-sizing: border-box;
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--crm-text); line-height: 38px !important; padding: 0 !important; font-size: 0.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--crm-text-light); line-height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important; bottom: 0 !important; right: 8px; width: 20px;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent;
    position: static !important; top: auto !important; left: auto !important; margin: 0 !important; display: block;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #94a3b8 transparent;
}

/* Multiple */
.select2-container--default .select2-selection--multiple {
    min-height: 38px; padding: 0.2rem 0.5rem;
    background-color: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--crm-field-radius);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; align-items: center; gap: 4px;
    background-color: #e2e8f0; border: 1px solid #cbd5e1; border-radius: var(--crm-radius-xs);
    color: var(--crm-text); font-size: 0.8125rem; padding: 2px 6px; margin: 2px 3px 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--crm-text-muted); font-weight: 700; font-size: 0.875rem; line-height: 1;
    background: none; border: none; padding: 0; margin: 0; cursor: pointer; order: 2;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--crm-danger); }
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--crm-text-light); }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { color: var(--crm-text); }

/* Dropdown */
.select2-dropdown {
    background-color: var(--crm-surface); border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm); box-shadow: var(--crm-shadow-md); z-index: 9999;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--crm-surface); border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-xs); color: var(--crm-text); padding: 0.375rem 0.75rem; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(15,121,243,.14);
}
.select2-results__option { padding: 0.375rem 0.75rem; color: var(--crm-text); transition: background-color 80ms; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--crm-primary); color: #fff;
}
.select2-container--default .select2-results__option--selected { background-color: #f1f5f9; color: var(--crm-text); }
.select2-container--default .select2-results__option--disabled { color: var(--crm-text-light); }

/* Focus / open */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--multiple {
    border-color: var(--crm-primary) !important;
    box-shadow: 0 0 0 3px rgba(15,121,243,.14); outline: none;
}
/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--crm-surface-2); border-color: var(--crm-border); cursor: not-allowed; opacity: 1;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered { color: var(--crm-text-light); }

/* Validation */
.is-invalid + .select2-container--default .select2-selection--single,
.is-invalid + .select2-container--default .select2-selection--multiple { border-color: var(--crm-danger) !important; }
.is-invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.is-invalid + .select2-container--default.select2-container--focus .select2-selection--multiple { box-shadow: 0 0 0 3px rgba(239,68,68,.22) !important; }
.is-valid + .select2-container--default .select2-selection--single,
.is-valid + .select2-container--default .select2-selection--multiple { border-color: var(--crm-success) !important; }


/* ── SELECT2 DARK ── */
[data-theme=dark] .select2-container--default .select2-selection--single {
    background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered { color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(255,255,255,.32) !important; }
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgba(255,255,255,.45) transparent transparent transparent !important; }
[data-theme=dark] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent rgba(255,255,255,.45) transparent !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255,255,255,.48) !important; background: none !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fca5a5 !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: rgba(255,255,255,.32) !important; }
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .select2-dropdown { background-color: var(--crm-surface) !important; border-color: rgba(255,255,255,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; }
[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,.16) !important; }
[data-theme=dark] .select2-results__option { color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--crm-primary) !important; color: #fff !important; }
[data-theme=dark] .select2-container--default .select2-results__option--selected { background-color: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .select2-container--default .select2-results__option--disabled { color: rgba(255,255,255,.28) !important; }
[data-theme=dark] .select2-results__options { background-color: var(--crm-surface) !important; }
[data-theme=dark] .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--focus .select2-selection--multiple,
[data-theme=dark] .select2-container--default.select2-container--open  .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--open  .select2-selection--multiple { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,.16) !important; }
[data-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme=dark] .select2-results__options::-webkit-scrollbar { width: 5px; }
[data-theme=dark] .select2-results__options::-webkit-scrollbar-track { background: var(--crm-surface-2); }
[data-theme=dark] .select2-results__options::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
[data-theme=dark] .is-invalid + .select2-container--default .select2-selection--single,
[data-theme=dark] .is-invalid + .select2-container--default .select2-selection--multiple { border-color: #fca5a5 !important; }
[data-theme=dark] .is-valid + .select2-container--default .select2-selection--single,
[data-theme=dark] .is-valid + .select2-container--default .select2-selection--multiple { border-color: #6ee7b7 !important; }


/* ──────────────────────────────────────────────────────────────────────
   11. TABLES & DATATABLES
   ────────────────────────────────────────────────────────────────────── */
table.dataTable thead th,
table.dataTable tbody td { text-align: center !important; vertical-align: middle !important; }

/* Crisp uppercase header */
table.dataTable thead th {
    background-color: var(--crm-surface-2) !important;
    color: var(--crm-text-muted) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--crm-border) !important;
    white-space: nowrap;
    padding: 10px 12px !important;
}
table.dataTable tbody td {
    font-size: 0.875rem;
    padding: 9px 12px !important;
    border-color: var(--crm-border-light) !important;
    color: var(--crm-text);
}
table.dataTable tbody tr:hover td { background-color: var(--crm-surface-hover) !important; }
table.dataTable.no-footer { border-bottom: none !important; }

/* DataTable toolbar */
.dataTables_wrapper .row:first-child {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px !important;
}
.dataTables_wrapper .row:first-child > div { flex: unset; width: auto !important; max-width: unset; padding: 0; }
.dataTables_wrapper .row:first-child > div:last-child { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dt-buttons { display: inline-flex !important; align-items: center; gap: 4px; }
.dataTables_wrapper .dataTables_filter { display: inline-flex !important; align-items: center; }
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--crm-field-fs); }
.dataTables_wrapper .dataTables_filter input {
    height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    border-radius: var(--crm-field-radius) !important;
    border: 1px solid var(--crm-border);
    padding: 0 0.75rem !important;
    line-height: var(--crm-field-h) !important;
    width: 220px; box-sizing: border-box; vertical-align: middle;
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(15,121,243,.12); outline: none;
}
.btn-sm .material-symbols-outlined { font-size: 1rem !important; line-height: 1 !important; vertical-align: -3px; }

/* Dark DataTables */
[data-theme=dark] .dataTables_wrapper { color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_length label,
[data-theme=dark] .dataTables_wrapper .dataTables_filter label,
[data-theme=dark] .dataTables_wrapper .dataTables_info { color: rgba(255,255,255,.62) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_length select,
[data-theme=dark] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important;
}
[data-theme=dark] table.dataTable,
[data-theme=dark] table.dataTable.no-footer { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] table.dataTable thead th,
[data-theme=dark] table.dataTable thead td {
    background-color: var(--crm-surface-2) !important; color: rgba(255,255,255,.82) !important; border-color: var(--crm-border) !important;
}
[data-theme=dark] table.dataTable thead th.sorting,
[data-theme=dark] table.dataTable thead th.sorting_asc,
[data-theme=dark] table.dataTable thead th.sorting_desc { background-color: var(--crm-surface-2) !important; color: rgba(255,255,255,.82) !important; }
[data-theme=dark] table.dataTable tbody tr { background-color: var(--crm-surface) !important; }
[data-theme=dark] table.dataTable tbody tr.odd  { background-color: var(--crm-surface) !important; }
[data-theme=dark] table.dataTable tbody tr.even { background-color: rgba(255,255,255,.02) !important; }
[data-theme=dark] table.dataTable tbody tr:hover,
[data-theme=dark] table.dataTable tbody tr:hover td { background-color: var(--crm-surface-hover) !important; }
[data-theme=dark] table.dataTable tbody td { color: rgba(255,255,255,.78) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] table.dataTable tbody td a { color: #60a5fa; }
[data-theme=dark] table.dataTable tbody td a:hover { color: #93c5fd; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button { color: rgba(255,255,255,.65) !important; background: transparent !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--crm-surface-hover) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--crm-primary) !important; color: #fff !important; border-color: var(--crm-primary) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: rgba(255,255,255,.25) !important; }

/* Dark Bootstrap table */
[data-theme=dark] table.table {
    --bs-table-bg: var(--crm-surface); --bs-table-striped-bg: rgba(255,255,255,.02);
    --bs-table-hover-bg: var(--crm-surface-hover); --bs-table-color: rgba(255,255,255,.78);
    --bs-table-border-color: var(--crm-border);
}
[data-theme=dark] table.table thead th,
[data-theme=dark] table.table thead td { background-color: var(--crm-surface-2) !important; color: rgba(255,255,255,.82) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] table.table tbody tr td { color: rgba(255,255,255,.78) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] table.table tbody tr:hover td { background-color: var(--crm-surface-hover) !important; }
[data-theme=dark] .table-responsive { background-color: transparent !important; }

/* Dark pagination */
[data-theme=dark] .page-link { background-color: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: rgba(255,255,255,.65) !important; }
[data-theme=dark] .page-link:hover { background-color: var(--crm-surface-hover) !important; color: #fff !important; }
[data-theme=dark] .page-item.active .page-link { background-color: var(--crm-primary) !important; border-color: var(--crm-primary) !important; color: #fff !important; }
[data-theme=dark] .page-item.disabled .page-link { background-color: var(--crm-surface) !important; color: rgba(255,255,255,.25) !important; }

/* Dark DT v2 */
[data-theme=dark] .dt-container .dt-search input,
[data-theme=dark] .dt-container .dt-length select { background-color: var(--crm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Dark DT export buttons */
[data-theme=dark] .dt-buttons .btn { border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.72) !important; background: transparent !important; }
[data-theme=dark] .dt-buttons .btn:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; border-color: rgba(255,255,255,.32) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-success { color: #6ee7b7 !important; border-color: #6ee7b7 !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-success:hover { background: rgba(110,231,183,.14) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-info  { color: #7dd3fc !important; border-color: #7dd3fc !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-info:hover  { background: rgba(125,211,252,.14) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-danger { color: #fca5a5 !important; border-color: #fca5a5 !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-danger:hover { background: rgba(252,165,165,.12) !important; }


/* ──────────────────────────────────────────────────────────────────────
   12. PAGE HEADER BAR
   ────────────────────────────────────────────────────────────────────── */
.crm-page-bar { min-height: 42px; }
.crm-page-title h3 {
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--crm-text);
    letter-spacing: -.2px;
}
.crm-page-title h4 { margin-bottom: 0; }
.crm-page-title p  { margin-bottom: 0; font-size: 0.8125rem; color: var(--crm-text-muted); }
[data-theme=dark] .crm-page-title h3 { color: rgba(255,255,255,.9); }
[data-theme=dark] .crm-page-title p  { color: rgba(255,255,255,.45) !important; }

/* Filter toggle chevron */
.filter-toggle-btn .material-symbols-outlined { display: block; transition: transform 0.22s ease; }
.filter-toggle-btn[aria-expanded="false"] .material-symbols-outlined { transform: rotate(180deg); }

/* Breadcrumb */
.breadcrumb { margin-bottom: 0; }
.breadcrumb-item a { color: var(--crm-text-muted); font-size: 0.8125rem; transition: color var(--crm-ease); }
.breadcrumb-item a:hover { color: var(--crm-primary); }
.breadcrumb-item.active { color: var(--crm-text); font-size: 0.8125rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--crm-text-light); }
[data-theme=dark] .breadcrumb-item a { color: rgba(255,255,255,.5) !important; }
[data-theme=dark] .breadcrumb-item.active { color: rgba(255,255,255,.88) !important; }
[data-theme=dark] .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.25) !important; }


/* ──────────────────────────────────────────────────────────────────────
   13. CUSTOM TOGGLE SWITCH
   ────────────────────────────────────────────────────────────────────── */
.crm-toggle-wrap { display: inline-block; }
.toggle-checkbox { display: none; }
.toggle-label {
    position: relative; display: inline-block;
    width: 60px; height: 30px;
    background: var(--crm-danger);
    border-radius: 30px; cursor: pointer;
    transition: background 0.28s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.toggle-label::before {
    content: ""; position: absolute;
    width: 24px; height: 24px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform 0.28s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle-label::after {
    content: "OFF"; position: absolute; right: 8px; top: 7px;
    color: #fff; font-size: 10px; font-weight: 700;
}
.toggle-checkbox:checked + .toggle-label { background: var(--crm-success); }
.toggle-checkbox:checked + .toggle-label::before { transform: translateX(30px); }
.toggle-checkbox:checked + .toggle-label::after { content: "ON"; left: 10px; right: auto; }


/* ──────────────────────────────────────────────────────────────────────
   14. DARK MODE — REMAINING OVERRIDES
   ────────────────────────────────────────────────────────────────────── */

/* Dropdowns */
[data-theme=dark] .dropdown-menu {
    background-color: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
    box-shadow: var(--crm-shadow-lg) !important;
}
[data-theme=dark] .dropdown-menu .dropdown-item { color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .dropdown-menu .dropdown-item:hover { background-color: var(--crm-surface-hover) !important; color: #fff !important; }
[data-theme=dark] .dropdown-divider { border-color: var(--crm-border) !important; }

/* Text */
[data-theme=dark] .text-muted    { color: rgba(255,255,255,.42) !important; }
[data-theme=dark] .text-body     { color: rgba(255,255,255,.62) !important; }
[data-theme=dark] .text-secondary { color: rgba(255,255,255,.55) !important; }
[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3,
[data-theme=dark] h4,[data-theme=dark] h5,[data-theme=dark] h6 { color: rgba(255,255,255,.9) !important; }

/* Misc surfaces */
[data-theme=dark] .bg-light     { background-color: var(--crm-surface-2) !important; }
[data-theme=dark] .bg-body      { background-color: var(--crm-bg) !important; }
[data-theme=dark] .border       { border-color: var(--crm-border) !important; }
[data-theme=dark] .border-top, [data-theme=dark] .border-bottom,
[data-theme=dark] .border-start,[data-theme=dark] .border-end { border-color: var(--crm-border) !important; }
[data-theme=dark] hr { border-color: var(--crm-border) !important; }

/* Modals */
[data-theme=dark] .modal-content { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .modal-header  { border-color: var(--crm-border) !important; background-color: var(--crm-surface-2) !important; }
[data-theme=dark] .modal-footer  { border-color: var(--crm-border) !important; background-color: var(--crm-surface-2) !important; }
[data-theme=dark] .modal-body    { background-color: var(--crm-surface) !important; }
[data-theme=dark] .modal-title   { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .btn-close     { filter: invert(1) grayscale(1) brightness(2); opacity: .5; }

/* Alerts */
[data-theme=dark] .alert-success { background-color: var(--crm-success-bg) !important; border-color: var(--crm-success-border) !important; color: #6ee7b7 !important; }
[data-theme=dark] .alert-danger  { background-color: var(--crm-danger-bg)  !important; border-color: var(--crm-danger-border)  !important; color: #fca5a5 !important; }
[data-theme=dark] .alert-warning { background-color: var(--crm-warning-bg) !important; border-color: var(--crm-warning-border) !important; color: #fcd34d !important; }
[data-theme=dark] .alert-info    { background-color: var(--crm-info-bg)    !important; border-color: var(--crm-info-border)    !important; color: #7dd3fc !important; }
[data-theme=dark] .alert .btn-close { filter: invert(1) brightness(2); opacity: .55; }

/* Nav tabs/pills */
[data-theme=dark] .nav-tabs { border-color: var(--crm-border) !important; }
[data-theme=dark] .nav-tabs .nav-link { color: rgba(255,255,255,.55) !important; border-color: transparent !important; }
[data-theme=dark] .nav-tabs .nav-link:hover { color: rgba(255,255,255,.88) !important; background-color: rgba(255,255,255,.05) !important; }
[data-theme=dark] .nav-tabs .nav-link.active { color: #fff !important; background-color: var(--crm-surface) !important; border-color: var(--crm-border) var(--crm-border) var(--crm-surface) !important; }
[data-theme=dark] .nav-pills .nav-link { color: rgba(255,255,255,.65) !important; }
[data-theme=dark] .nav-pills .nav-link:hover { background-color: var(--crm-surface-hover) !important; color: #fff !important; }
[data-theme=dark] .nav-pills .nav-link.active { background-color: var(--crm-primary) !important; color: #fff !important; }
[data-theme=dark] .tab-pane { color: rgba(255,255,255,.78); }

/* Progress */
[data-theme=dark] .progress { background-color: rgba(255,255,255,.07) !important; }

/* Misc */
[data-theme=dark] .showing-wrap { color: rgba(255,255,255,.65); border-top-color: var(--crm-border) !important; }
[data-theme=dark] h5.fw-medium { border-top-color: var(--crm-border) !important; border-bottom-color: var(--crm-border) !important; }
[data-theme=dark] code { background-color: rgba(255,255,255,.07) !important; color: #c084fc !important; border-radius: 3px; padding: 1px 5px; }
[data-theme=dark] .form-text { color: rgba(255,255,255,.38) !important; }
[data-theme=dark] .kpi-icon { background: rgba(255,255,255,.07) !important; }
[data-theme=dark] .unread-notif { background-color: rgba(255,255,255,.04) !important; }
[data-theme=dark] .bg-white { background-color: var(--crm-surface) !important; }

/* Toastr dark */
[data-theme=dark] #toast-container > div { box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; }
[data-theme=dark] #toast-container .toast-success { background-color: #0f3d28 !important; color: #a7f3d0 !important; }
[data-theme=dark] #toast-container .toast-error   { background-color: #450a0a !important; color: #fecaca !important; }
[data-theme=dark] #toast-container .toast-warning { background-color: #451a03 !important; color: #fde68a !important; }
[data-theme=dark] #toast-container .toast-info    { background-color: #0c1a2e !important; color: #bae6fd !important; }

/* select dark misc */
[data-theme=dark] .select-dropdown .dropdown-menu { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .action-opt .dropdown-menu { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .action-opt .dropdown-menu .dropdown-item { color: rgba(255,255,255,.78) !important; }
[data-theme=dark] .action-opt .dropdown-menu .dropdown-item:hover { background-color: var(--crm-surface-hover) !important; }


/* ──────────────────────────────────────────────────────────────────────
   15. AUTH / LOGIN PAGE
   ────────────────────────────────────────────────────────────────────── */
.min-vh-100.d-flex[style*="background"] {
    background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 55%, #e0ecff 100%) !important;
}
.card.border-0.rounded-4.shadow-lg {
    box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.07) !important;
    border: 1px solid rgba(0,0,0,.04) !important;
}
[data-theme=dark] .min-vh-100.d-flex[style*="background"] {
    background: linear-gradient(135deg, #050d1a 0%, #0b1220 60%, #0d1628 100%) !important;
}
[data-theme=dark] .card.border-0.rounded-4.shadow-lg {
    background-color: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   16. MISC COMPONENTS
   ────────────────────────────────────────────────────────────────────── */
.notif-item { transition: background-color var(--crm-ease); cursor: pointer; }
.notif-item:hover { background-color: var(--crm-surface-hover) !important; }
[data-theme=dark] .notif-item:hover { background-color: rgba(255,255,255,.04) !important; }

.progress { border-radius: 6px; overflow: hidden; }
.progress-bar { border-radius: 6px; }

.crm-img-thumb {
    cursor: zoom-in; border-radius: var(--crm-radius-sm);
    border: 2px solid var(--crm-border);
    transition: border-color var(--crm-ease), transform var(--crm-ease-md);
}
.crm-img-thumb:hover { border-color: var(--crm-primary); transform: scale(1.04); }

/* Impersonation banner */
.impersonation-banner {
    background: linear-gradient(90deg, #fef9c3, #fef3c7) !important;
    border-bottom: 2px solid var(--crm-warning) !important;
    font-weight: 600; font-size: 0.85rem;
}
[data-theme=dark] .impersonation-banner {
    background: rgba(245,158,11,.16) !important;
    border-color: rgba(245,158,11,.38) !important;
    color: #fbbf24 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   17. ANIMATIONS
   ────────────────────────────────────────────────────────────────────── */
.main-content-container {
    animation: crmFadeIn 0.2s ease-out;
}
@keyframes crmFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes crmPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}
#notif-badge:not(.d-none) { animation: crmPulse 2s ease-in-out infinite; }

.card { transform: translateZ(0); will-change: box-shadow; }


/* ──────────────────────────────────────────────────────────────────────
   18. RESPONSIVE
   ────────────────────────────────────────────────────────────────────── */

/* ── ≤576px mobile ── */
@media (max-width: 575.98px) {
    .crm-page-bar { flex-direction: column !important; align-items: flex-start !important; gap: 6px; }
    .crm-page-title h3 { font-size: 1.05rem; }
    .card-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    .row.g-3 .col-xl-3, .row.g-3 .col-md-6 { width: 50%; flex: 0 0 50%; }
    .dataTables_wrapper .row:first-child { flex-direction: column; align-items: stretch !important; }
    .dataTables_wrapper .row:first-child > div:last-child { margin-left: 0 !important; flex-wrap: wrap; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
    #filter-collapse .col-md-3, #filter-collapse .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .d-flex.gap-2 { flex-wrap: wrap; }
    .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem) !important; }
    .header-area { margin-top: 8px !important; }
}

/* ── ≤767px tablet portrait ── */
@media (max-width: 767.98px) {
    .header-area .col-md-6 { width: 100%; }
    .right-header-content .d-flex { justify-content: flex-end !important; }
    .px-1 { padding-left: 8px !important; padding-right: 8px !important; }
    .col-xl-8, .col-xl-4 { flex: 0 0 100%; max-width: 100%; }
    .card.p-20 { padding: 14px !important; }
}

/* ── ≤991px tablet landscape ── */
@media (max-width: 991.98px) {
    .col-xl-3 { flex: 0 0 50%; max-width: 50%; }
    .sidebar-area { z-index: 1045; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ── ≥1200px desktop ── */
@media (min-width: 1200px) {
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
}

/* Table: hide columns 5+ on small screens */
@media (max-width: 639.98px) {
    .table-responsive table.dataTable thead th:nth-child(n+5),
    .table-responsive table.dataTable tbody td:nth-child(n+5) { display: none; }
}


/* ──────────────────────────────────────────────────────────────────────
   19. PRINT
   ────────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar-area, .header-area, #filter-collapse,
    .dt-buttons, .footer-area, .crm-page-bar .d-flex > *:not(.crm-page-title),
    .btn:not(.btn-primary) { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
    table.dataTable thead th { background: #f8f9fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { margin: 1.5cm; }
}


/* ──────────────────────────────────────────────────────────────────────
   20. OVERRIDE FIXES
   ────────────────────────────────────────────────────────────────────── */

/* ── Body bg — body.bg-body-bg (spec 0,1,1) beats .bg-body-bg (0,1,0) ── */
body.bg-body-bg { background-color: var(--crm-bg) !important; }
[data-theme=dark] body.bg-body-bg { background-color: var(--crm-bg) !important; }

/* ── dark: [data-theme=dark] p/li → rgba(255,255,255,.5) — too dim ── */
[data-theme=dark] p,
[data-theme=dark] ul li,
[data-theme=dark] ol li { color: rgba(255,255,255,.72) !important; }
[data-theme=dark] .menu-title-text,
[data-theme=dark] .sidebar-area p { color: var(--crm-sidebar-section) !important; }

/* ── Footer ── */
.footer-area {
    background-color: var(--crm-surface) !important;
    border-top: 1px solid var(--crm-border) !important;
    border-radius: 0 !important;
}
[data-theme=dark] .footer-area { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .footer-area p { color: rgba(255,255,255,.45) !important; }
[data-theme=dark] .footer-area .text-secondary { color: rgba(255,255,255,.65) !important; }

/* ── Logo text — explicit even in dark mode ── */
.sidebar-area .logo .logo-text.text-secondary,
.sidebar-area .logo .logo-text { color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; }
[data-theme=dark] .sidebar-area .logo .logo-text.text-secondary,
[data-theme=dark] .sidebar-area .logo .logo-text { color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; }

/* ── Header dark ── */
[data-theme=dark] #header-area {
    background-color: var(--crm-header-bg) !important;
    border-color: var(--crm-header-border) !important;
}

/* ── Preloader dark ── */
[data-theme=dark] .preloader { background-color: var(--crm-bg) !important; }

/* ── Cards with inline border-white in dark mode ── */
[data-theme=dark] .card.border-white,
[data-theme=dark] .border-white { border-color: var(--crm-border) !important; }

/* ── dark cards get #1b232d — reset to our tokens ── */
[data-theme=dark] .card,
[data-theme=dark] .card-body { background-color: var(--crm-surface) !important; }
[data-theme=dark] .card-header { background-color: var(--crm-surface-2) !important; }

/* ── Card text dark ── */
[data-theme=dark] .card .text-body { color: rgba(255,255,255,.62) !important; }
[data-theme=dark] .card h2,
[data-theme=dark] .card h3,
[data-theme=dark] .card h4 { color: rgba(255,255,255,.9) !important; }

/* ── Action buttons in tables ── */
.action-opt { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.action-opt .btn-sm { padding: 3px 8px !important; font-size: .78rem !important; display: inline-flex; align-items: center; gap: 3px; }

/* ── Sidebar notification badges ── */
.sidebar-area .badge.bg-danger  { background-color: #ef4444 !important; color: #fff !important; }
.sidebar-area .badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }

/* ── SweetAlert2 dark ── */
[data-theme=dark] .swal2-popup { background: var(--crm-surface) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .swal2-title { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .swal2-html-container { color: rgba(255,255,255,.68) !important; }

/* ── Table images dark ── */
table.dataTable img.rounded { border: 2px solid var(--crm-border); border-radius: 4px !important; }
[data-theme=dark] table.dataTable img.rounded { border-color: rgba(255,255,255,.12); }


/* ──────────────────────────────────────────────────────────────────────
   21. DARK MODE — COMPREHENSIVE FIXES
   ────────────────────────────────────────────────────────────────────── */

/* ── ApexCharts dark mode — SVG text, legends, grid ── */
[data-theme=dark] .apexcharts-text tspan,
[data-theme=dark] .apexcharts-text { fill: rgba(255,255,255,.55) !important; }
[data-theme=dark] .apexcharts-legend-text { color: rgba(255,255,255,.65) !important; }
[data-theme=dark] .apexcharts-canvas svg { background: transparent !important; }
[data-theme=dark] .apexcharts-gridline  { stroke: rgba(255,255,255,.07) !important; }
[data-theme=dark] .apexcharts-grid-row  { fill: transparent !important; }
[data-theme=dark] .apexcharts-datalabel,
[data-theme=dark] .apexcharts-datalabels text { fill: rgba(255,255,255,.8) !important; }
/* Tooltip override — charts use theme:'light', force dark */
[data-theme=dark] .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--crm-surface-2) !important;
    border-color: var(--crm-border) !important;
    color: rgba(255,255,255,.9) !important;
}
[data-theme=dark] .apexcharts-tooltip-text,
[data-theme=dark] .apexcharts-tooltip-y-group,
[data-theme=dark] .apexcharts-tooltip-series-group { color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .apexcharts-xaxistooltip,
[data-theme=dark] .apexcharts-yaxistooltip {
    background: var(--crm-surface-2) !important;
    border-color: var(--crm-border) !important;
    color: rgba(255,255,255,.8) !important;
}
[data-theme=dark] .apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--crm-border) !important; }
[data-theme=dark] .apexcharts-xaxistooltip-bottom:after  { border-bottom-color: var(--crm-surface-2) !important; }

/* ── dark uses #1b232d — map to our surface token ── */
[data-theme=dark] .header-area,
[data-theme=dark] #header-area {
    background-color: var(--crm-header-bg) !important;
    border-color: var(--crm-header-border) !important;
}
[data-theme=dark] .right-header-content .header-right-item .notifications.dropdown .dropdown-menu,
[data-theme=dark] .right-header-content .header-right-item .admin-profile .dropdown-menu {
    background-color: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.5) !important;
}
[data-theme=dark] .right-header-content .header-right-item .notifications.dropdown .dropdown-menu .border-bottom,
[data-theme=dark] .right-header-content .header-right-item .admin-profile .dropdown-menu .border-bottom {
    border-color: var(--crm-border) !important;
}
/* Notification item text in dark */
[data-theme=dark] .notif-item .fw-medium { color: rgba(255,255,255,.88) !important; }
[data-theme=dark] .notif-item .text-body { color: rgba(255,255,255,.55) !important; }
[data-theme=dark] .notif-item small.text-muted { color: rgba(255,255,255,.35) !important; }
[data-theme=dark] .notif-item:hover { background-color: rgba(255,255,255,.04) !important; }
[data-theme=dark] .notif-item .btn-sm.text-muted { color: rgba(255,255,255,.35) !important; }

/* Profile dropdown dark */
[data-theme=dark] .admin-profile .dropdown-menu .info { border-bottom: 1px solid var(--crm-border) !important; }
[data-theme=dark] .admin-profile .dropdown-menu h3 { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .admin-profile .dropdown-menu span { color: rgba(255,255,255,.58) !important; }
[data-theme=dark] .admin-profile .dropdown-menu .dropdown-item { color: rgba(255,255,255,.75) !important; }
[data-theme=dark] .admin-profile .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
[data-theme=dark] .admin-profile .dropdown-menu .dropdown-item i { color: rgba(255,255,255,.55) !important; }

/* ── Dark mode icon toggle button ── */
[data-theme=dark] .switch-toggle .material-symbols-outlined,
[data-theme=dark] #switch-toggle .material-symbols-outlined { color: #f59e0b !important; }  /* amber sun */

/* ── Dark mode header icon buttons ── */
[data-theme=dark] .header-right-item .btn-secondary.border-0 {
    color: rgba(255,255,255,.72) !important;
    background: transparent !important;
}
[data-theme=dark] .header-right-item .btn-secondary.border-0 .material-symbols-outlined {
    color: rgba(255,255,255,.72) !important;
}
[data-theme=dark] .header-right-item .btn-secondary.border-0:hover .material-symbols-outlined { color: #fff !important; }

/* ── Dark mode header text ── */
[data-theme=dark] .header-area h1,[data-theme=dark] .header-area h2,
[data-theme=dark] .header-area h3,[data-theme=dark] .header-area h4 { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .header-area .text-secondary { color: rgba(255,255,255,.5) !important; }

/* ── Dark mode page bar / greeting ── */
[data-theme=dark] .dash-greeting { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .main-content-container > div:first-child p { color: rgba(255,255,255,.5) !important; }

/* ── Dark mode card inner text ── */
[data-theme=dark] .card p.text-body,
[data-theme=dark] .card p.fs-13 { color: rgba(255,255,255,.58) !important; }
[data-theme=dark] .card .fs-26,
[data-theme=dark] .card .fs-28 { color: rgba(255,255,255,.92) !important; }
[data-theme=dark] .card .text-primary  { color: #60a5fa !important; }
[data-theme=dark] .card .text-success  { color: #6ee7b7 !important; }
[data-theme=dark] .card .text-warning  { color: #fcd34d !important; }
[data-theme=dark] .card .text-danger   { color: #fca5a5 !important; }
[data-theme=dark] .card .text-info     { color: #7dd3fc !important; }
[data-theme=dark] .card .text-muted    { color: rgba(255,255,255,.38) !important; }
[data-theme=dark] .card .badge.bg-primary.bg-opacity-10 { background-color: rgba(15,121,243,.2) !important; color: #60a5fa !important; }
[data-theme=dark] .card .badge.bg-warning.bg-opacity-10 { background-color: rgba(245,158,11,.2) !important; color: #fcd34d !important; }
[data-theme=dark] .card .badge.bg-success.bg-opacity-10 { background-color: rgba(16,185,129,.2) !important; color: #6ee7b7 !important; }
[data-theme=dark] .card .badge.bg-info.bg-opacity-10    { background-color: rgba(14,165,233,.2) !important; color: #7dd3fc !important; }
[data-theme=dark] .card .badge.bg-danger.bg-opacity-10  { background-color: rgba(239,68,68,.2)  !important; color: #fca5a5 !important; }

/* ── Dark mode KPI icon inline backgrounds ── */
[data-theme=dark] .kpi-icon { background: rgba(255,255,255,.07) !important; }
[data-theme=dark] .kpi-icon span { color: rgba(255,255,255,.7) !important; }
[data-theme=dark] .kpi-icon i    { color: rgba(255,255,255,.7) !important; }

/* ── Dark crm-page-bar ── */
[data-theme=dark] .crm-page-bar { background: transparent !important; }
[data-theme=dark] .crm-page-title h3 { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .crm-page-title p  { color: rgba(255,255,255,.42) !important; }
[data-theme=dark] .crm-page-bar .btn-link { color: rgba(255,255,255,.55) !important; }

/* ── Dark offcanvas ── */
[data-theme=dark] .offcanvas { background-color: var(--crm-surface) !important; }
[data-theme=dark] .offcanvas-header { border-color: var(--crm-border) !important; background-color: var(--crm-surface-2) !important; }
[data-theme=dark] .offcanvas-title { color: rgba(255,255,255,.9) !important; }

/* ── Dark list-group ── */
[data-theme=dark] .list-group-item {
    background-color: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
    color: rgba(255,255,255,.78) !important;
}
[data-theme=dark] .list-group-item:hover { background-color: var(--crm-surface-hover) !important; }
[data-theme=dark] .list-group-item.active { background-color: var(--crm-primary) !important; border-color: var(--crm-primary) !important; }

/* ── Dark accordion ── */
[data-theme=dark] .accordion-item { background-color: var(--crm-surface) !important; border-color: var(--crm-border) !important; }
[data-theme=dark] .accordion-button { background-color: var(--crm-surface) !important; color: rgba(255,255,255,.85) !important; }
[data-theme=dark] .accordion-button:not(.collapsed) { background-color: var(--crm-surface-2) !important; color: #60a5fa !important; }
[data-theme=dark] .accordion-button::after { filter: invert(1) brightness(0.7); }
[data-theme=dark] .accordion-body { color: rgba(255,255,255,.72) !important; background: var(--crm-surface) !important; }

/* ── Dark breadcrumb ── */
[data-theme=dark] .breadcrumb-item::before { color: rgba(255,255,255,.28) !important; }

/* ── Dark hr ── */
[data-theme=dark] hr { border-color: var(--crm-border) !important; opacity: 1 !important; }

/* ── Dark code/pre ── */
[data-theme=dark] pre { background: rgba(255,255,255,.04) !important; border: 1px solid var(--crm-border) !important; color: rgba(255,255,255,.78) !important; border-radius: 6px; padding: .75rem 1rem; }

/* ── Dark small/span text overrides for tables and cards ── */
[data-theme=dark] .fs-13.text-body,
[data-theme=dark] .fs-12.text-body { color: rgba(255,255,255,.55) !important; }
[data-theme=dark] small.text-muted,
[data-theme=dark] .small.text-muted { color: rgba(255,255,255,.38) !important; }

/* ── Dark: body bg fix — body[data-theme=dark] targets body itself ── */
body[data-theme=dark] { background-color: var(--crm-bg) !important; }



/* ──────────────────────────────────────────────────────────────────────
   22. PRELOADER DARK MODE + IMPERSONATION BANNER
   ────────────────────────────────────────────────────────────────────── */

/* ── Preloader — light mode ── */
#preloader {
    background-color: var(--crm-bg) !important;
}
#preloader .waviy span {
    color: var(--crm-primary) !important;
}

/* ── Preloader — dark mode (body gets data-theme from inline script before render) ── */
body[data-theme=dark] #preloader,
[data-theme=dark] #preloader {
    background-color: #0b1220 !important;
}
body[data-theme=dark] #preloader .waviy span,
[data-theme=dark] #preloader .waviy span {
    color: #60a5fa !important;
}

/* ── Impersonation banner — light mode ── */
.impersonation-banner {
    background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%) !important;
    border-bottom: 2px solid #f59e0b !important;
    color: #78350f !important;
    font-size: 0.875rem;
    font-weight: 500;
}
.impersonation-banner strong { color: #92400e !important; }
.impersonation-banner .material-symbols-outlined { color: #d97706 !important; vertical-align: middle; }

.impersonation-end-btn {
    background: #f59e0b !important;
    border: 1px solid #d97706 !important;
    color: #fff !important;
    padding: 3px 12px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}
.impersonation-end-btn:hover {
    background: #d97706 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245,158,11,.4) !important;
}

/* ── Impersonation banner — dark mode ── */
body[data-theme=dark] .impersonation-banner,
[data-theme=dark] .impersonation-banner {
    background: linear-gradient(90deg, rgb(92 92 92) 0%, rgb(106 79 32) 100%) !important;
    border-bottom-color: rgba(245, 158, 11, .45) !important;
    color: #fbbf24 !important;
}
body[data-theme=dark] .impersonation-banner strong,
[data-theme=dark] .impersonation-banner strong { color: #fcd34d !important; }
body[data-theme=dark] .impersonation-banner .material-symbols-outlined,
[data-theme=dark] .impersonation-banner .material-symbols-outlined { color: #f59e0b !important; }

body[data-theme=dark] .impersonation-end-btn,
[data-theme=dark] .impersonation-end-btn {
    background: rgba(245,158,11,.22) !important;
    border-color: rgba(245,158,11,.45) !important;
    color: #fbbf24 !important;
}
body[data-theme=dark] .impersonation-end-btn:hover,
[data-theme=dark] .impersonation-end-btn:hover {
    background: rgba(245,158,11,.35) !important;
    color: #fff !important;
}


/* ──────────────────────────────────────────────────────────────────────
   23. DATATABLE BUTTONS — LIGHT + DARK MODE
   ────────────────────────────────────────────────────────────────────── */

/* ── Reset DataTables Buttons plugin own styles (they override Bootstrap) ── */
.dt-buttons .dt-button,
.dt-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: all 150ms ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.dt-buttons { display: inline-flex !important; gap: 5px !important; align-items: center !important; flex-wrap: wrap; }

/* ── Light mode button colours ── */
.dt-buttons .btn.btn-outline-success {
    color: #059669 !important;
    border: 1px solid #059669 !important;
    background: transparent !important;
}
.dt-buttons .btn.btn-outline-success:hover {
    background: #059669 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(5,150,105,.3) !important;
}

.dt-buttons .btn.btn-outline-danger {
    color: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    background: transparent !important;
}
.dt-buttons .btn.btn-outline-danger:hover {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(220,38,38,.3) !important;
}

.dt-buttons .btn.btn-outline-dark {
    color: #374151 !important;
    border: 1px solid #374151 !important;
    background: transparent !important;
}
.dt-buttons .btn.btn-outline-dark:hover {
    background: #374151 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(55,65,81,.3) !important;
}

.dt-buttons .btn.btn-outline-secondary {
    color: #64748b !important;
    border: 1px solid #94a3b8 !important;
    background: transparent !important;
}
.dt-buttons .btn.btn-outline-secondary:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #64748b !important;
}

/* ── Light mode: active/processing state ── */
.dt-buttons .dt-button.active,
.dt-buttons .btn.active {
    box-shadow: inset 0 1px 4px rgba(0,0,0,.15) !important;
    opacity: .85;
}

/* ── Dark mode button colours ── */
[data-theme=dark] .dt-buttons .btn {
    background: transparent !important;
}

[data-theme=dark] .dt-buttons .btn.btn-outline-success {
    color: #6ee7b7 !important;
    border-color: rgba(110,231,183,.55) !important;
}
[data-theme=dark] .dt-buttons .btn.btn-outline-success:hover {
    background: rgba(16,185,129,.18) !important;
    border-color: #6ee7b7 !important;
    color: #a7f3d0 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,.25) !important;
}

[data-theme=dark] .dt-buttons .btn.btn-outline-danger {
    color: #fca5a5 !important;
    border-color: rgba(252,165,165,.5) !important;
}
[data-theme=dark] .dt-buttons .btn.btn-outline-danger:hover {
    background: rgba(239,68,68,.18) !important;
    border-color: #fca5a5 !important;
    color: #fecaca !important;
    box-shadow: 0 2px 8px rgba(239,68,68,.25) !important;
}

/* btn-outline-dark on dark bg = invisible — convert to light ghost ── */
[data-theme=dark] .dt-buttons .btn.btn-outline-dark {
    color: rgba(255,255,255,.68) !important;
    border-color: rgba(255,255,255,.28) !important;
}
[data-theme=dark] .dt-buttons .btn.btn-outline-dark:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.55) !important;
    color: #fff !important;
    box-shadow: none !important;
}

[data-theme=dark] .dt-buttons .btn.btn-outline-secondary {
    color: rgba(255,255,255,.58) !important;
    border-color: rgba(255,255,255,.2) !important;
}
[data-theme=dark] .dt-buttons .btn.btn-outline-secondary:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.38) !important;
}

/* ColVis button (column visibility) */
.dt-buttons .buttons-colvis {
    color: #64748b !important;
    border: 1px solid #94a3b8 !important;
    background: transparent !important;
}
.dt-buttons .buttons-colvis:hover { background: #f1f5f9 !important; color: #334155 !important; }
[data-theme=dark] .dt-buttons .buttons-colvis {
    color: rgba(255,255,255,.62) !important;
    border-color: rgba(255,255,255,.22) !important;
}
[data-theme=dark] .dt-buttons .buttons-colvis:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

/* ColVis dropdown */
.dt-button-collection {
    background: #fff !important;
    border: 1px solid #e2e8f2 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
    padding: 6px !important;
    z-index: 9999 !important;
}
.dt-button-collection .dt-button {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    color: #374151 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 0.8375rem !important;
}
.dt-button-collection .dt-button:hover { background: #f1f5f9 !important; color: #111827 !important; }
.dt-button-collection .dt-button.active { background: #ecf3ff !important; color: #0f79f3 !important; font-weight: 600 !important; }

[data-theme=dark] .dt-button-collection {
    background: #162032 !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.5) !important;
}
[data-theme=dark] .dt-button-collection .dt-button {
    color: rgba(255,255,255,.75) !important;
    background: transparent !important;
}
[data-theme=dark] .dt-button-collection .dt-button:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
[data-theme=dark] .dt-button-collection .dt-button.active { background: rgba(15,121,243,.2) !important; color: #60a5fa !important; }

/* DataTables length select + search in both modes */
.dataTables_wrapper .dataTables_length select {
    height: 34px !important;
    padding: 0 2rem 0 .6rem !important;
    font-size: .8125rem !important;
    border: 1px solid #e2e8f2 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #374151 !important;
    cursor: pointer;
}
[data-theme=dark] .dataTables_wrapper .dataTables_length select {
    background-color: #1a2840 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.82) !important;
}
.dataTables_wrapper .dataTables_filter input {
    background-color: #fff !important;
    color: #374151 !important;
}
[data-theme=dark] .dataTables_wrapper .dataTables_filter input {
    background-color: #1a2840 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.82) !important;
}
[data-theme=dark] .dataTables_wrapper .dataTables_filter input::placeholder { color: rgba(255,255,255,.28) !important; }

/* ══════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════
                    app.blade css moved here
   ══════════════════════════════════════════════════════════════
══════════════════════════════════════════════════════════════ */

.unread-notif { background-color: rgba(0,0,0,.04); }
/* ── Dark Mode: Global overrides ── */
[data-theme=dark] .unread-notif { background-color: rgba(255,255,255,.06) !important; }
[data-theme=dark] .dropdown-menu { background-color: #1b232d !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .dropdown-menu .dropdown-item { color: rgba(255,255,255,.8) !important; }
[data-theme=dark] .dropdown-menu .dropdown-item:hover { background-color: #2c343e !important; }
[data-theme=dark] .dropdown-divider, [data-theme=dark] .border-bottom { border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .text-muted { color: rgba(255,255,255,.4) !important; }
[data-theme=dark] .breadcrumb-item a { color: rgba(255,255,255,.6) !important; }
[data-theme=dark] .breadcrumb-item.active { color: rgba(255,255,255,.9) !important; }
[data-theme=dark] .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.3) !important; }
/* ── Dark Mode: DataTables ── */
[data-theme=dark] .dataTables_wrapper { color: rgba(255,255,255,.8) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_length label,
[data-theme=dark] .dataTables_wrapper .dataTables_filter label,
[data-theme=dark] .dataTables_wrapper .dataTables_info { color: rgba(255,255,255,.7) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_length select,
[data-theme=dark] .dataTables_wrapper .dataTables_filter input { background-color: #1b232d !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; }
[data-theme=dark] table.dataTable,
[data-theme=dark] table.dataTable.no-footer { background-color: #1b232d !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] table.dataTable thead th,
[data-theme=dark] table.dataTable thead td { background-color: #131920 !important; color: #fff !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] table.dataTable thead th.sorting,
[data-theme=dark] table.dataTable thead th.sorting_asc,
[data-theme=dark] table.dataTable thead th.sorting_desc { background-color: #131920 !important; color: #fff !important; }
[data-theme=dark] table.dataTable tbody tr { background-color: #1b232d !important; }
[data-theme=dark] table.dataTable tbody tr.odd { background-color: #1b232d !important; }
[data-theme=dark] table.dataTable tbody tr.even { background-color: #1f2a35 !important; }
[data-theme=dark] table.dataTable tbody tr:hover,
[data-theme=dark] table.dataTable tbody tr:hover td { background-color: #28333f !important; }
[data-theme=dark] table.dataTable tbody td { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme=dark] table.dataTable tbody td a { color: #4fa3f7; }
[data-theme=dark] table.dataTable tbody td a:hover { color: #79b9fa; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button { color: rgba(255,255,255,.7) !important; background: transparent !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #28333f !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #0f79f3 !important; color: #fff !important; border-color: #0f79f3 !important; }
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: rgba(255,255,255,.3) !important; }
/* ── Dark Mode: Bootstrap 5 DataTables ── */
[data-theme=dark] .dt-container .dt-search input,
[data-theme=dark] .dt-container .dt-length select { background-color: #1b232d !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; }
[data-theme=dark] table.table thead th,
[data-theme=dark] table.table thead td { background-color: #131920 !important; color: #fff !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] table.table tbody tr td { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme=dark] table.table tbody tr:hover td { background-color: #28333f !important; }
[data-theme=dark] table.table { --bs-table-bg: #1b232d; --bs-table-striped-bg: #1f2a35; --bs-table-hover-bg: #28333f; --bs-table-color: rgba(255,255,255,.8); --bs-table-border-color: rgba(255,255,255,.08); }
[data-theme=dark] .table-responsive { background-color: transparent !important; }
[data-theme=dark] .page-link { background-color: #1b232d !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.7) !important; }
[data-theme=dark] .page-link:hover { background-color: #28333f !important; color: #fff !important; }
[data-theme=dark] .page-item.active .page-link { background-color: #0f79f3 !important; border-color: #0f79f3 !important; color: #fff !important; }
[data-theme=dark] .page-item.disabled .page-link { background-color: #1b232d !important; color: rgba(255,255,255,.3) !important; }
[data-theme=dark] select.form-select { background-color: #1b232d !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; }
[data-theme=dark] select.form-select option { background-color: #1b232d; color: #fff; }
[data-theme=dark] .badge.bg-light { background-color: #28333f !important; color: rgba(255,255,255,.8) !important; }
[data-theme=dark] .badge.text-dark { color: #fff !important; }
/* ══════════════════════════════════════════════════════════════
    Select2 — Light Theme
══════════════════════════════════════════════════════════════ */
/* ── Single select ── */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 2.25rem 0 0.75rem !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212529;
    line-height: 38px !important;
    padding: 0 !important;
    font-size: 0.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
    line-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    bottom: 0 !important;
    right: 8px;
    width: 20px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: block;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6c757d transparent;
}
/* ── Multiple select ── */
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    padding: 0.2rem 0.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: #212529;
    font-size: 0.8125rem;
    padding: 2px 6px;
    margin: 2px 3px 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    line-height: 1.4;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    order: 2;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc3545;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: #212529;
}
/* ── Dropdown ── */
.select2-dropdown {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
    z-index: 9999;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    color: #212529;
    padding: 0.375rem 0.75rem;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.select2-results__option {
    padding: 0.375rem 0.75rem;
    color: #212529;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0d6efd;
    color: #fff;
}
.select2-container--default .select2-results__option--selected {
    background-color: #e9ecef;
    color: #212529;
}
.select2-container--default .select2-results__option--disabled {
    color: #adb5bd;
}
/* ── Focus state ── */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    outline: none;
}
/* ── Disabled state ── */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 1;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: #6c757d;
}
/* ── Validation: is-invalid ── */
.is-invalid + .select2-container--default .select2-selection--single,
.is-invalid + .select2-container--default .select2-selection--multiple {
    border-color: #dc3545 !important;
}
.is-invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.is-invalid + .select2-container--default.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25) !important;
}
/* ── Validation: is-valid ── */
.is-valid + .select2-container--default .select2-selection--single,
.is-valid + .select2-container--default .select2-selection--multiple {
    border-color: #198754 !important;
}
.is-valid + .select2-container--default.select2-container--focus .select2-selection--single,
.is-valid + .select2-container--default.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 0.25rem rgba(25,135,84,.25) !important;
}
/* ══════════════════════════════════════════════════════════════
    Select2 — Dark Theme
══════════════════════════════════════════════════════════════ */
/* ── Single select ── */
[data-theme=dark] .select2-container--default .select2-selection--single {
    background-color: #1b232d !important;
    border-color: rgba(255,255,255,.15) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,.4) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,.5) transparent transparent transparent !important;
}
[data-theme=dark] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent rgba(255,255,255,.5) transparent !important;
}
/* ── Multiple select ── */
[data-theme=dark] .select2-container--default .select2-selection--multiple {
    background-color: #1b232d !important;
    border-color: rgba(255,255,255,.15) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #28333f !important;
    border-color: rgba(255,255,255,.2) !important;
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,.5) !important;
    background: none !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ff6b6b !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: rgba(255,255,255,.4) !important;
}
[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: rgba(255,255,255,.85) !important;
}
/* ── Dropdown ── */
[data-theme=dark] .select2-dropdown {
    background-color: #1b232d !important;
    border-color: rgba(255,255,255,.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.4) !important;
}
[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #131920 !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #4fa3f7 !important;
    box-shadow: 0 0 0 0.2rem rgba(79,163,247,.2) !important;
}
[data-theme=dark] .select2-results__option {color: rgba(255,255,255,.8) !important;}
[data-theme=dark] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: #0f79f3 !important;color: #fff !important;}
[data-theme=dark] .select2-container--default .select2-results__option--selected {background-color: #28333f !important;color: rgba(255,255,255,.9) !important;}
[data-theme=dark] .select2-container--default .select2-results__option--disabled {color: rgba(255,255,255,.3) !important;}
[data-theme=dark] .select2-results__options {background-color: #1b232d !important;}
/* ── Focus state ── */
[data-theme=dark] .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--focus .select2-selection--multiple,
[data-theme=dark] .select2-container--default.select2-container--open  .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--open  .select2-selection--multiple {
    border-color: #4fa3f7 !important;
    box-shadow: 0 0 0 0.25rem rgba(79,163,247,.2) !important;
}
/* ── Disabled state ── */
[data-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--multiple {background-color: #131920 !important;border-color: rgba(255,255,255,.08) !important;}
[data-theme=dark] .select2-container--default.select2-container--disabled .select2-selection__rendered {color: rgba(255,255,255,.3) !important;}
/* ── Validation ── */
[data-theme=dark] .is-invalid + .select2-container--default .select2-selection--single,
[data-theme=dark] .is-invalid + .select2-container--default .select2-selection--multiple {border-color: #f06b6b !important;}
[data-theme=dark] .is-invalid + .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme=dark] .is-invalid + .select2-container--default.select2-container--focus .select2-selection--multiple {box-shadow: 0 0 0 0.25rem rgba(240,107,107,.25) !important;}
[data-theme=dark] .is-valid + .select2-container--default .select2-selection--single,
[data-theme=dark] .is-valid + .select2-container--default .select2-selection--multiple {border-color: #4caf7d !important;}
/* ── Scrollbar in dropdown ── */
[data-theme=dark] .select2-results__options::-webkit-scrollbar { width: 6px; }
[data-theme=dark] .select2-results__options::-webkit-scrollbar-track { background: #131920; }
[data-theme=dark] .select2-results__options::-webkit-scrollbar-thumb { background: #28333f; border-radius: 3px; }
/* ══════════════════════════════════════════════════════════════
    Dark Mode: Remaining component overrides
══════════════════════════════════════════════════════════════ */
/* bg-white class used on cards — overrides Bootstrap's !important rule */
[data-theme=dark] .bg-white { background-color: #1b232d !important; }
/* form-label (Bootstrap class — .label custom class already handled by style.css) */
[data-theme=dark] .form-label { color: rgba(255,255,255,.8) !important; }
/* form-check: checkbox and radio */
[data-theme=dark] .form-check-input {
    background-color: #1b232d !important;
    border-color: rgba(255,255,255,.25) !important;
}
[data-theme=dark] .form-check-input:checked {
    background-color: #0f79f3 !important;
    border-color: #0f79f3 !important;
}
[data-theme=dark] .form-check-label { color: rgba(255,255,255,.8) !important; }
/* Section dividers — override inline border-top/bottom: 1px dashed #e9ecef */
[data-theme=dark] h5.fw-medium { border-top-color: rgba(255,255,255,.09) !important; border-bottom-color: rgba(255,255,255,.09) !important; }
/* Modal body inline bg override */
[data-theme=dark] .modal-body { background-color: #1b232d !important; }
/* Alerts */
[data-theme=dark] .alert-success { background-color: rgba(25,135,84,.18) !important; border-color: rgba(25,135,84,.4) !important; color: #6fc98a !important; }
[data-theme=dark] .alert-danger  { background-color: rgba(220,53,69,.18)  !important; border-color: rgba(220,53,69,.4)  !important; color: #f38585 !important; }
[data-theme=dark] .alert-warning { background-color: rgba(255,193,7,.14)  !important; border-color: rgba(255,193,7,.35)  !important; color: #ffd054 !important; }
[data-theme=dark] .alert-info    { background-color: rgba(13,202,240,.14) !important; border-color: rgba(13,202,240,.3)  !important; color: #4dd8ef !important; }
[data-theme=dark] .alert { color: inherit; }
[data-theme=dark] .alert .btn-close { filter: invert(1); opacity: .7; }
/* Nav tabs outside card context */
[data-theme=dark] .nav-tabs { border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .nav-tabs .nav-link { color: rgba(255,255,255,.6) !important; border-color: transparent !important; }
[data-theme=dark] .nav-tabs .nav-link:hover { color: rgba(255,255,255,.9) !important; background-color: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.15) !important; }
[data-theme=dark] .nav-tabs .nav-link.active { color: #fff !important; background-color: #1b232d !important; border-color: rgba(255,255,255,.1) rgba(255,255,255,.1) #1b232d !important; }
[data-theme=dark] .nav-pills .nav-link { color: rgba(255,255,255,.7) !important; }
[data-theme=dark] .nav-pills .nav-link:hover { background-color: #28333f !important; color: #fff !important; }
[data-theme=dark] .nav-pills .nav-link.active { background-color: #0f79f3 !important; color: #fff !important; }
[data-theme=dark] .tab-pane { color: rgba(255,255,255,.8); }
/* Progress bar */
[data-theme=dark] .progress { background-color: rgba(255,255,255,.08) !important; }
/* Showing-wrap (server-side pagination area) */
[data-theme=dark] .showing-wrap { color: rgba(255,255,255,.7); border-top-color: rgba(255,255,255,.08) !important; }
/* Modal header/footer borders */
[data-theme=dark] .modal-header { border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .modal-footer { border-color: rgba(255,255,255,.1) !important; }
[data-theme=dark] .modal-title  { color: rgba(255,255,255,.9) !important; }
/* Buttons */
[data-theme=dark] .btn-outline-secondary { color: rgba(255,255,255,.65) !important; border-color: rgba(255,255,255,.25) !important; }
[data-theme=dark] .btn-outline-secondary:hover { background-color: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
[data-theme=dark] .btn-outline-dark { color: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.25) !important; }
[data-theme=dark] .btn-outline-dark:hover { background-color: rgba(255,255,255,.08) !important; color: #fff !important; }
/* Toastr — dark-friendly */
[data-theme=dark] #toast-container > div { box-shadow: 0 2px 12px rgba(0,0,0,.5) !important; }
[data-theme=dark] #toast-container .toast-success { background-color: #1a4731 !important; color: #a3e6c0 !important; }
[data-theme=dark] #toast-container .toast-error   { background-color: #4a1a1a !important; color: #f5a5a5 !important; }
[data-theme=dark] #toast-container .toast-warning { background-color: #3d3000 !important; color: #ffd98e !important; }
[data-theme=dark] #toast-container .toast-info    { background-color: #0d2d3d !important; color: #8dd8f0 !important; }
/* Input groups */
[data-theme=dark] .input-group-text {
    background-color: #28333f !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.7) !important;
}
[data-theme=dark] .input-group .btn-outline-secondary { border-color: rgba(255,255,255,.15) !important; }
/* Code elements */
[data-theme=dark] code {
    background-color: rgba(255,255,255,.07) !important;
    color: #e5a3ff !important;
    border-radius: 3px;
    padding: 1px 5px;
}
/* Helper text */
[data-theme=dark] .form-text { color: rgba(255,255,255,.45) !important; }
/* KPI icon boxes (inline background overridden via !important) */
[data-theme=dark] .kpi-icon { background: rgba(255,255,255,.06) !important; }
/* ── Dark Mode: DataTables Buttons ── */
[data-theme=dark] .dt-buttons .btn { border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.75) !important; background: transparent !important; }
[data-theme=dark] .dt-buttons .btn:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-success { color: #4caf7d !important; border-color: #4caf7d !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-success:hover { background: rgba(76,175,125,.15) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-info { color: #4fa3f7 !important; border-color: #4fa3f7 !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-info:hover { background: rgba(79,163,247,.15) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-danger { color: #f06b6b !important; border-color: #f06b6b !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-danger:hover { background: rgba(240,107,107,.15) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-dark { color: rgba(255,255,255,.65) !important; border-color: rgba(255,255,255,.25) !important; }
[data-theme=dark] .dt-buttons .btn.btn-outline-dark:hover { background: rgba(255,255,255,.08) !important; }
/* ── Page header bar ── */
.crm-page-bar { min-height: 42px; }
.crm-page-title h3 { margin-bottom: 0; font-size: 1.2rem; font-weight: 600; }
.crm-page-title h4 { margin-bottom: 0; }
.crm-page-title p  { margin-bottom: 0; font-size: 0.8125rem; }
[data-theme=dark] .crm-page-title h3 { color: rgba(255,255,255,.9); }
[data-theme=dark] .crm-page-title p  { color: rgba(255,255,255,.5) !important; }
/* ── Filter card collapse toggle ── */
.filter-toggle-btn .material-symbols-outlined { display: block; transition: transform 0.2s ease; }
.filter-toggle-btn[aria-expanded="false"] .material-symbols-outlined { transform: rotate(180deg); }
/* ── DataTable cell alignment ── */
table.dataTable thead th, table.dataTable tbody td { text-align: center !important; vertical-align: middle !important; }
/* ── DataTable toolbar: length + buttons + filter on one line ── */
.dataTables_wrapper .row:first-child { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px !important; }
.dataTables_wrapper .row:first-child > div { flex: unset; width: auto !important; max-width: unset; padding: 0; }
.dataTables_wrapper .row:first-child > div:last-child { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dt-buttons { display: inline-flex !important; align-items: center; gap: 4px; }
.dataTables_wrapper .dataTables_filter { display: inline-flex !important; align-items: center; }
.dataTables_wrapper .dataTables_filter input {
    height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    border-radius: var(--crm-field-radius) !important;
    border: 1px solid #dee2e6;
    padding: 0 0.75rem !important;
    line-height: var(--crm-field-h) !important;
    width: 220px;
    box-sizing: border-box;
    vertical-align: middle;
}
/* ── Date input: consistent height across all browsers ── */
input[type="date"].form-control,
#filter-collapse input[type="date"] {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    max-height: var(--crm-field-h) !important;
    line-height: normal !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box;
    align-items: center;
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: var(--crm-field-h); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--crm-field-fs); }
[data-theme=dark] .dataTables_wrapper .dataTables_filter input { background-color: #1b232d !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; }
/* ══════════════════════════════════════════════════════════════
    Filter Section — Standardized Field Heights (global, reusable)
    Single source of truth: --crm-field-h
══════════════════════════════════════════════════════════════ */
:root {
    --crm-field-h:      38px;
    --crm-field-fs:     0.875rem;
    --crm-field-radius: 0.375rem;
    --crm-field-pad-x:  0.75rem;
}
#filter-collapse .form-control,
#filter-collapse .form-select,
#filter-collapse input[type="text"],
#filter-collapse input[type="date"],
#filter-collapse input[type="number"],
#filter-collapse input[type="email"],
#filter-collapse input[type="search"],
#filter-collapse input[type="tel"] {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    max-height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    border-radius: var(--crm-field-radius) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--crm-field-h) !important;
    box-sizing: border-box;
}
#filter-collapse .select2-container--default .select2-selection--single {
    height: var(--crm-field-h) !important;
    min-height: var(--crm-field-h) !important;
    border-radius: var(--crm-field-radius) !important;
    font-size: var(--crm-field-fs) !important;
}
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--crm-field-fs) !important;
    line-height: var(--crm-field-h) !important;
}
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--crm-field-h) !important;
}
#filter-collapse .select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
}
#filter-collapse .btn {
    height: var(--crm-field-h) !important;
    font-size: var(--crm-field-fs) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
}
#filter-collapse .form-label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.25rem !important;
    font-weight: 500;
    white-space: nowrap;
    display: block;
}
#filter-collapse .col-auto { display: flex; align-items: flex-end; }
[data-theme=dark] #filter-collapse .form-control,
[data-theme=dark] #filter-collapse .form-select,
[data-theme=dark] #filter-collapse input[type="date"],
[data-theme=dark] #filter-collapse input[type="number"],
[data-theme=dark] #filter-collapse input[type="text"],
[data-theme=dark] #filter-collapse input[type="search"],
[data-theme=dark] #filter-collapse input[type="email"] {
    background-color: #1b232d !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
}
[data-theme=dark] #filter-collapse .form-control::placeholder,
[data-theme=dark] #filter-collapse input::placeholder {
    color: rgba(255,255,255,.3) !important;
}
[data-theme=dark] #filter-collapse .form-label { color: rgba(255,255,255,.7) !important; }
.btn-sm .material-symbols-outlined {
    font-size: 1rem !important;
    line-height: 1 !important;
    vertical-align: -3px;
}
.card-header .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.header-area.sticky {
    animation: none !important;
}
body.modal-open #header-area,
body.modal-open #header-area.sticky {
    position: relative !important;
    z-index: 0 !important;
}
body.modal-open .impersonation-banner {
    position: relative !important;
    z-index: 0 !important;
}