/* ================================================================
   SuppTech – Design System: CSS Variables + Dark Mode
   Load order: after admin-sidebar.css so overrides take effect.
   ================================================================ */

/* ── Light Theme Variables (defaults) ────────────────────────────── */
:root {
  /* Brand */
  --st-primary:          #3563a9;
  --st-primary-hover:    #2a529a;
  --st-navy:             #2B3856;
  --st-navy-dark:        #1e2941;

  /* Layout */
  --st-page-bg:          #f0f2f5;
  --st-topbar-bg:        #ffffff;
  --st-topbar-border:    #e5e9f0;

  /* Cards / panels */
  --st-surface:          #ffffff;
  --st-surface-alt:      #f8f9fb;
  --st-card-hdr:         #2B3856;
  --st-card-hdr-text:    #ffffff;

  /* Text */
  --st-text-hi:          #1e2941;
  --st-text:             #374151;
  --st-text-muted:       #6c757d;
  --st-text-faint:       #9ca3af;

  /* Borders */
  --st-border:           #e5e9f0;
  --st-border-faint:     #f0f2f5;

  /* Inputs */
  --st-input-bg:         #f8f9fb;
  --st-input-border:     #dde1ea;

  /* Topbar controls */
  --st-ctrl-bg:          #f4f6f9;
  --st-ctrl-border:      #e2e7ee;
  --st-ctrl-color:       #5a6478;
  --st-ctrl-hover:       #e8ecf2;

  /* Row hover */
  --st-row-hover:        #f8f9fa;

  /* Shadows */
  --st-shadow-sm:        0 1px 4px rgba(0,0,0,.07);
  --st-shadow-md:        0 4px 14px rgba(0,0,0,.10);
  --st-shadow-lg:        0 20px 60px rgba(0,0,0,.18);
}

/* ── Dark Theme Overrides ─────────────────────────────────────────── */
[data-theme="dark"] {
  --st-page-bg:          #0f1117;
  --st-topbar-bg:        #141926;
  --st-topbar-border:    #1c2438;

  --st-surface:          #141926;
  --st-surface-alt:      #0d1220;
  --st-card-hdr:         #080d18;
  --st-card-hdr-text:    #e2e8f0;

  --st-text-hi:          #e2e8f0;
  --st-text:             #cbd5e1;
  --st-text-muted:       #94a3b8;
  --st-text-faint:       #64748b;

  --st-border:           #1c2438;
  --st-border-faint:     #141926;

  --st-input-bg:         #0d1220;
  --st-input-border:     #1c2438;

  --st-ctrl-bg:          #1a2035;
  --st-ctrl-border:      #1c2438;
  --st-ctrl-color:       #94a3b8;
  --st-ctrl-hover:       #1e2738;

  --st-row-hover:        #1a2035;

  --st-shadow-sm:        0 1px 4px rgba(0,0,0,.30);
  --st-shadow-md:        0 4px 14px rgba(0,0,0,.40);
  --st-shadow-lg:        0 20px 60px rgba(0,0,0,.55);
}


/* ================================================================
   LIGHT MODE – PORTAL CONSISTENCY
   Ensures Bootstrap panels/tables inside .admin-main match the
   same card style as the dashboard and custom list components.
   ================================================================ */

.admin-main {
    background: var(--st-page-bg);
}

/* Bootstrap panels → match pul-card / rpt-card style */
.admin-main .panel {
    border: 1px solid var(--st-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--st-shadow-sm);
}
.admin-main .panel-default > .panel-heading {
    background: var(--st-card-hdr);
    color: var(--st-card-hdr-text);
    border-bottom: none;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
}
.admin-main .panel-default > .panel-heading .panel-title,
.admin-main .panel-default > .panel-heading .panel-title a { color: var(--st-card-hdr-text); font-size: 14px; font-weight: 700; }
.admin-main .panel-default > .panel-heading a:hover { color: #8fc0ff; text-decoration: none; }
.admin-main .panel-body { background: var(--st-surface); padding: 16px; }

/* Bootstrap tables inside portal → match pul-table style */
.admin-main .table > thead > tr > th {
    background: #f8f9fa;
    color: #6c757d;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1.5px solid #e9ecef;
    padding: 10px 14px;
    white-space: nowrap;
}
.admin-main .table > tbody > tr > td {
    color: #374151;
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    padding: 10px 14px;
}
.admin-main .table-hover > tbody > tr:hover > td { background: #f8f9fa; }

/* Bootstrap cards inside portal */
.admin-main .card { border-radius: 10px; box-shadow: var(--st-shadow-sm); overflow: hidden; }
.admin-main .card-header { background: var(--st-card-hdr); color: var(--st-card-hdr-text); font-size: 14px; font-weight: 700; padding: 13px 20px; border-bottom: none; }


/* ================================================================
   DARK MODE COMPONENT OVERRIDES
   ================================================================ */

/* ── Layout & body ───────────────────────────────────────────────── */
[data-theme="dark"] body {
    background: var(--st-page-bg);
    color: var(--st-text);
}
[data-theme="dark"] .admin-layout  { background: var(--st-page-bg); }
[data-theme="dark"] .admin-main    { background: var(--st-page-bg); }

/* ── Topbar ──────────────────────────────────────────────────────── */
[data-theme="dark"] .admin-topbar {
    background: var(--st-topbar-bg);
    border-bottom-color: var(--st-topbar-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .topbar-toggle {
    background: var(--st-ctrl-bg);
    border-color: var(--st-ctrl-border);
    color: var(--st-ctrl-color);
}
[data-theme="dark"] .topbar-toggle:hover { background: var(--st-ctrl-hover); color: var(--st-text-hi); }
[data-theme="dark"] .topbar-search { background: var(--st-ctrl-bg); border-color: var(--st-ctrl-border); }
[data-theme="dark"] .topbar-search:focus-within { border-color: var(--st-primary); background: var(--st-input-bg); }
[data-theme="dark"] .topbar-search-input { color: var(--st-text-hi); }
[data-theme="dark"] .topbar-search-input::placeholder { color: var(--st-text-faint); }
[data-theme="dark"] .admin-topbar .ntf-btn { background: var(--st-ctrl-bg); border-color: var(--st-ctrl-border); color: var(--st-ctrl-color); }
[data-theme="dark"] .admin-topbar .ntf-btn:hover { background: var(--st-ctrl-hover); color: var(--st-text-hi); }
[data-theme="dark"] .admin-topbar .ntf-badge { border-color: var(--st-topbar-bg); }
[data-theme="dark"] .admin-topbar .usr-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .admin-topbar .usr-chip:hover { background: rgba(255,255,255,.09); }
[data-theme="dark"] .admin-topbar .usr-name  { color: var(--st-text-hi); }
[data-theme="dark"] .admin-topbar .usr-role  { color: var(--st-text-muted); }
[data-theme="dark"] .admin-topbar .usr-caret { color: var(--st-text-faint); }

/* ── Dark mode toggle button ─────────────────────────────────────── */
.dm-toggle {
    background: var(--st-ctrl-bg);
    border: 1px solid var(--st-ctrl-border);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--st-ctrl-color);
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    padding: 0;
}
.dm-toggle:hover { background: var(--st-ctrl-hover); color: var(--st-text-hi); }
[data-theme="dark"] .dm-toggle { color: #fbbf24; }

/* ── Sidebar (already dark — deepen slightly) ────────────────────── */
[data-theme="dark"] .admin-sidebar {
    background: #080d18;
    border-right: 1px solid rgba(255,255,255,.04);
}
[data-theme="dark"] .sidebar-brand { border-bottom-color: rgba(255,255,255,.05); }

/* ── Page backgrounds ────────────────────────────────────────────── */
[data-theme="dark"] .dash-page,
[data-theme="dark"] .prod-page { background: var(--st-page-bg) !important; }
[data-theme="dark"] .portal.inner-banner { background: var(--st-page-bg) !important; }

/* ── White / light cards → dark surface ─────────────────────────── */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .qlink-card,
[data-theme="dark"] .pul-card,
[data-theme="dark"] .rpt-card,
[data-theme="dark"] .prod-card,
[data-theme="dark"] .prod-feature,
[data-theme="dark"] .cs-card,
[data-theme="dark"] .er-kpi,
[data-theme="dark"] .er-section {
    background: var(--st-surface);
    box-shadow: var(--st-shadow-sm);
}
[data-theme="dark"] .pf-bar {
    background: var(--st-surface);
    border-color: var(--st-border);
}

/* Stat cards are intentionally navy — deepen in dark mode */
[data-theme="dark"] .stat-card { background: #080d18; }

/* Quick-link card text */
[data-theme="dark"] .qlink-card { color: var(--st-text-hi); }
[data-theme="dark"] .qlink-card:hover { color: var(--st-text-hi); box-shadow: var(--st-shadow-md); }

/* ── Card headers (stay structural dark, just deepen) ────────────── */
[data-theme="dark"] .pul-card-header,
[data-theme="dark"] .rpt-card-header,
[data-theme="dark"] .cs-card-header,
[data-theme="dark"] .er-section-hdr {
    background: linear-gradient(135deg, #050a14 0%, #0a0e18 100%);
    border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ── Dashboard header text ───────────────────────────────────────── */
[data-theme="dark"] .dash-title,
[data-theme="dark"] .prod-title,
[data-theme="dark"] .prod-card-title,
[data-theme="dark"] .er-kpi-val,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .chart-card-title { color: var(--st-text-hi); }

[data-theme="dark"] .dash-subtitle,
[data-theme="dark"] .prod-sub,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-sub,
[data-theme="dark"] .stat-card-label,
[data-theme="dark"] .stat-card-meta,
[data-theme="dark"] .pf-label,
[data-theme="dark"] .er-kpi-label,
[data-theme="dark"] .er-kpi-sub,
[data-theme="dark"] .cs-field-label { color: var(--st-text-muted); }

[data-theme="dark"] .prod-card p { color: var(--st-text-muted); }

/* ── Action buttons ──────────────────────────────────────────────── */
[data-theme="dark"] .dash-btn-outline {
    background: var(--st-surface);
    color: var(--st-text-hi);
    border-color: var(--st-border);
}
[data-theme="dark"] .dash-btn-outline:hover { opacity: .85; }

/* ── Tables ──────────────────────────────────────────────────────── */
[data-theme="dark"] .pul-table thead th,
[data-theme="dark"] .pul-table thead td,
[data-theme="dark"] .rpt-table thead th,
[data-theme="dark"] .er-table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
    background: var(--st-surface-alt) !important;
    color: var(--st-text-muted);
    border-bottom-color: var(--st-border);
}
[data-theme="dark"] .pul-table td,
[data-theme="dark"] .pul-table tbody th,
[data-theme="dark"] .rpt-table td,
[data-theme="dark"] .er-table tbody td,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] table.dataTable tbody th { color: var(--st-text); border-color: var(--st-border-faint); }

[data-theme="dark"] .pul-table tbody tr,
[data-theme="dark"] .rpt-table tbody tr,
[data-theme="dark"] .er-table tbody tr,
[data-theme="dark"] table.dataTable tbody tr { border-bottom-color: var(--st-border-faint); }

[data-theme="dark"] .pul-table tbody tr:hover,
[data-theme="dark"] .rpt-table tbody tr:hover,
[data-theme="dark"] .er-table tbody tr:hover { background: var(--st-row-hover); }
[data-theme="dark"] table.dataTable tbody tr:hover > td,
[data-theme="dark"] table.dataTable tbody tr:hover > th { background: var(--st-row-hover) !important; }

/* Legacy portal-table */
[data-theme="dark"] .portal-table > tbody { background: var(--st-surface); color: var(--st-text); }

/* ── Bootstrap tables (inside .admin-main) ────────────────────────── */
[data-theme="dark"] .admin-main .table > thead > tr > th {
    background: var(--st-surface-alt) !important;
    color: var(--st-text-muted);
    border-bottom-color: var(--st-border);
}
[data-theme="dark"] .admin-main .table > tbody > tr > td {
    color: var(--st-text);
    border-color: var(--st-border-faint);
}
[data-theme="dark"] .admin-main .table-hover > tbody > tr:hover > td { background: var(--st-row-hover); }
[data-theme="dark"] .admin-main .table-bordered,
[data-theme="dark"] .admin-main .table-bordered > thead > tr > th,
[data-theme="dark"] .admin-main .table-bordered > tbody > tr > td { border-color: var(--st-border); }

/* ── Bootstrap panels ─────────────────────────────────────────────── */
[data-theme="dark"] .admin-main .panel { background: var(--st-surface); border-color: var(--st-border); }
[data-theme="dark"] .admin-main .panel-default > .panel-heading {
    background: linear-gradient(135deg, #050a14 0%, #0a0e18 100%);
}
[data-theme="dark"] .admin-main .panel-body { background: var(--st-surface); color: var(--st-text); }

/* Bootstrap cards */
[data-theme="dark"] .admin-main .card { background: var(--st-surface); border-color: var(--st-border); }
[data-theme="dark"] .admin-main .card-header {
    background: linear-gradient(135deg, #050a14 0%, #0a0e18 100%);
    border-color: var(--st-border);
}
[data-theme="dark"] .admin-main .card-body { background: var(--st-surface); color: var(--st-text); }

/* ── Filter bar inputs ───────────────────────────────────────────── */
[data-theme="dark"] .pf-select,
[data-theme="dark"] .pf-search {
    background: var(--st-input-bg);
    border-color: var(--st-input-border);
    color: var(--st-text-hi);
}
[data-theme="dark"] .pf-select:focus,
[data-theme="dark"] .pf-search:focus { border-color: var(--st-primary); background: var(--st-surface); }
[data-theme="dark"] .pf-search::placeholder { color: var(--st-text-faint); }
[data-theme="dark"] .pf-label { color: var(--st-text-muted); }

/* ── Forms / inputs (Bootstrap .form-control) ────────────────────── */
[data-theme="dark"] .form-control {
    background-color: var(--st-input-bg) !important;
    border-color: var(--st-input-border) !important;
    color: var(--st-text-hi) !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--st-surface) !important;
    border-color: var(--st-primary) !important;
    box-shadow: 0 0 0 3px rgba(53,99,169,.18) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--st-text-faint) !important; }
[data-theme="dark"] .input-group-addon {
    background: var(--st-surface-alt);
    border-color: var(--st-input-border);
    color: var(--st-text-muted);
}
[data-theme="dark"] .cs-input { background: var(--st-input-bg); border-color: var(--st-input-border); color: var(--st-text-hi); }
[data-theme="dark"] .er-filter-select { background: var(--st-surface); border-color: var(--st-input-border); color: var(--st-text-hi); }
[data-theme="dark"] .er-filter-bar { background: var(--st-surface-alt); border-bottom-color: var(--st-border); }

/* ── Modals ──────────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow-lg);
}
[data-theme="dark"] .modal-header { background: linear-gradient(135deg, #050a14 0%, #0a0e18 100%); border-bottom-color: var(--st-border); }
[data-theme="dark"] .modal-title { color: #e2e8f0; }
[data-theme="dark"] .close { color: rgba(255,255,255,.6); text-shadow: none; }
[data-theme="dark"] .close:hover { color: #fff; }
[data-theme="dark"] .modal-body { background: var(--st-surface-alt); color: var(--st-text); }
[data-theme="dark"] .modal-footer { background: var(--st-surface); border-top-color: var(--st-border); }

[data-theme="dark"] .adm-modal .modal-body  { background: var(--st-surface-alt); }
[data-theme="dark"] .adm-modal .modal-footer { background: var(--st-surface); border-top-color: var(--st-border); }
[data-theme="dark"] .ord-modal-body  { background: var(--st-surface-alt); }
[data-theme="dark"] .ord-modal-footer { background: var(--st-surface); border-top-color: var(--st-border); }
[data-theme="dark"] .ord-btn-cancel  { background: var(--st-surface); border-color: var(--st-border); color: var(--st-text); }
[data-theme="dark"] .ord-btn-cancel:hover { background: var(--st-row-hover); }

/* ── User dropdown ───────────────────────────────────────────────── */
[data-theme="dark"] .usr-dropdown { background: var(--st-surface); box-shadow: var(--st-shadow-lg); }
[data-theme="dark"] .usr-dropdown-item { color: var(--st-text); border-bottom-color: var(--st-border-faint); }
[data-theme="dark"] .usr-dropdown-item:hover { background: var(--st-row-hover); color: var(--st-text-hi); }

/* ── Notification panel ──────────────────────────────────────────── */
[data-theme="dark"] .ntf-panel { background: var(--st-surface); box-shadow: var(--st-shadow-lg); }
[data-theme="dark"] .ntf-panel-body::-webkit-scrollbar-thumb { background: var(--st-border); }
[data-theme="dark"] .ntf-item { border-bottom-color: var(--st-border-faint); }
[data-theme="dark"] .ntf-item:hover { background: var(--st-row-hover); }
[data-theme="dark"] .ntf-sender { color: var(--st-text-hi); }
[data-theme="dark"] .ntf-msg    { color: var(--st-text-muted); }
[data-theme="dark"] .ntf-time   { color: var(--st-text-faint); }
[data-theme="dark"] .ntf-panel-footer { border-top-color: var(--st-border-faint); }
[data-theme="dark"] .ntf-panel-footer a { color: #8fc0ff; }
[data-theme="dark"] .ntf-panel-empty { color: var(--st-text-faint); }

/* ── Action dropdown menus ───────────────────────────────────────── */
[data-theme="dark"] .act-menu { background: var(--st-surface); border-color: var(--st-border); box-shadow: var(--st-shadow-md); }
[data-theme="dark"] .act-menu a { color: var(--st-text); }
[data-theme="dark"] .act-menu a:hover { background: var(--st-row-hover); color: var(--st-text-hi); }
[data-theme="dark"] .act-menu-header { color: var(--st-text-faint); border-bottom-color: var(--st-border-faint); }
[data-theme="dark"] .act-menu-divider { border-top-color: var(--st-border-faint); }
[data-theme="dark"] .act-btn { background: var(--st-ctrl-bg); border-color: var(--st-ctrl-border); color: var(--st-text-muted); }
[data-theme="dark"] .act-btn:hover { background: var(--st-ctrl-hover); }

[data-theme="dark"] .ord-action-menu { background: var(--st-surface); border: 1px solid var(--st-border); box-shadow: var(--st-shadow-md); }
[data-theme="dark"] .ord-action-menu > li > a { color: var(--st-text); }
[data-theme="dark"] .ord-action-menu > li > a:hover { background: var(--st-row-hover); color: var(--st-text-hi); }

[data-theme="dark"] .dropdown-menu { background: var(--st-surface); border-color: var(--st-border); box-shadow: var(--st-shadow-md); }
[data-theme="dark"] .dropdown-menu > li > a { color: var(--st-text); }
[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus { background: var(--st-row-hover); color: var(--st-text-hi); }
[data-theme="dark"] .dropdown-menu .divider { background: var(--st-border); }

/* ── Bootstrap-select ────────────────────────────────────────────── */
[data-theme="dark"] .bootstrap-select > .dropdown-toggle { background: var(--st-input-bg) !important; border-color: var(--st-input-border) !important; color: var(--st-text-hi) !important; }
[data-theme="dark"] .bootstrap-select .dropdown-menu { background: var(--st-surface); border-color: var(--st-border); }
[data-theme="dark"] .bootstrap-select .dropdown-item,
[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a { color: var(--st-text); }
[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:hover { background: var(--st-row-hover); color: var(--st-text-hi); }

/* ── DataTables toolbar ──────────────────────────────────────────── */
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--st-text-muted); }
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background: var(--st-input-bg) !important;
    border-color: var(--st-input-border) !important;
    color: var(--st-text-hi) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--st-text-muted) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--st-row-hover) !important;
    border-color: var(--st-border) !important;
    color: var(--st-text-hi) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--st-primary) !important;
    border-color: var(--st-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--st-text-faint) !important; }
[data-theme="dark"] .dt-bot { border-top-color: var(--st-border-faint); }

/* ── Select2 ─────────────────────────────────────────────────────── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--st-input-bg);
    border-color: var(--st-input-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--st-text-hi); }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--st-text-faint); }
[data-theme="dark"] .select2-dropdown { background: var(--st-surface); border-color: var(--st-border); box-shadow: var(--st-shadow-md); }
[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--st-text); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--st-primary); color: #fff; }
[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--st-input-bg); border-color: var(--st-input-border); color: var(--st-text-hi); }
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--st-row-hover); }

/* ── SweetAlert2 ─────────────────────────────────────────────────── */
[data-theme="dark"] .swal2-popup { background: var(--st-surface); color: var(--st-text); border: 1px solid var(--st-border); }
[data-theme="dark"] .swal2-title { color: var(--st-text-hi); }
[data-theme="dark"] .swal2-html-container { color: var(--st-text-muted); }
[data-theme="dark"] .swal2-close { color: var(--st-text-muted); }

/* ── Bootstrap alerts ────────────────────────────────────────────── */
[data-theme="dark"] .alert-warning { background: #2d2410 !important; border-color: #4a3a10 !important; color: #ffd777 !important; }
[data-theme="dark"] .alert-danger  { background: #2d1010 !important; border-color: #4a1a1a !important; color: #ff9999 !important; }
[data-theme="dark"] .alert-success { background: #0f2419 !important; border-color: #1a4a28 !important; color: #88e0a0 !important; }
[data-theme="dark"] .alert-info    { background: #0f1e2d !important; border-color: #1a3248 !important; color: #88c4e0 !important; }
[data-theme="dark"] .portal.inner-banner h3.alert.alert-warning,
[data-theme="dark"] .portal.inner-banner h3.alert.alert-danger { background: #2d2410 !important; border-color: #4a3a10 !important; color: #ffd777 !important; }

/* ── Empty state cards ───────────────────────────────────────────── */
[data-theme="dark"] .pul-empty h4,
[data-theme="dark"] .rpt-empty h4  { color: var(--st-text-hi); }
[data-theme="dark"] .pul-empty p,
[data-theme="dark"] .rpt-empty p   { color: var(--st-text-muted); }
[data-theme="dark"] .pul-empty-icon,
[data-theme="dark"] .rpt-empty-icon { background: #0d1a2e; }

/* ── ER / Exchange rate page ─────────────────────────────────────── */
[data-theme="dark"] .er-section-title { color: #e2e8f0; }
[data-theme="dark"] .er-rate-pill { background: #0d1a2e; color: #8fc0ff; }
[data-theme="dark"] .er-table tbody tr:last-child td { border-bottom: none; }
[data-theme="dark"] .er-empty { color: var(--st-text-faint); }

/* ── Cancellation settings ───────────────────────────────────────── */
[data-theme="dark"] .cs-card-title  { color: var(--st-card-hdr-text); }
[data-theme="dark"] .cs-badge-active { background: #0d2419; color: #88e0a0; }
[data-theme="dark"] .cs-badge-off   { background: var(--st-surface-alt); color: var(--st-text-muted); }

/* ── Misc badges / pills ─────────────────────────────────────────── */
[data-theme="dark"] .pop-uploaded-badge { background: #0d2419; border-color: #1a4a28; color: #88e0a0; }
[data-theme="dark"] .tbl-doc-empty { background: var(--st-surface-alt); border-color: var(--st-border); color: var(--st-text-faint); }
[data-theme="dark"] .tbl-view-btn  { background: #0d1a2e; border-color: #1c3a6a; color: #8fc0ff; }
[data-theme="dark"] .tbl-view-btn:hover { background: #0f2040; color: #a8d4ff; }
[data-theme="dark"] .er-kpi { border-left-color: var(--st-primary); }

/* ── Scroll to top button ────────────────────────────────────────── */
[data-theme="dark"] .scroll-to-top { background: #3563a9; }

/* ── Prod CTA ────────────────────────────────────────────────────── */
[data-theme="dark"] .prod-cta { background: #080d18; }
[data-theme="dark"] .prod-cta-email { background: var(--st-surface); color: var(--st-text-hi); }
[data-theme="dark"] .prod-cta-email:hover { background: var(--st-row-hover); color: var(--st-text-hi); }