/* ─────────────────────────────────────────────────────────────────────────
   Dark-mode overrides for hard-coded CSS inside dashboard pages
   ─────────────────────────────────────────────────────────────────────────
   Most dashboard pages (patients, doctors, finance, reports,
   employee_management, audit_logs, ...) ship their CSS inline in
   <style> blocks. That CSS uses hard-coded color literals
   (e.g. color:#1d1d1f, background:white, border:1px solid #e5e5e7)
   which do NOT adapt when [data-theme="dark"] is applied.

   The cleanest long-term fix is to refactor each page to use
   CSS variables. Until that lands, this file provides *generic*
   dark-mode overrides scoped under .dpms-page so every page that
   extends base_dashboard.html gets a usable dark mode.

   How it works:
   - We target the most common prefixes (em-, rep-, al-, pt-, fin-,
     odo-, arch-, bar-, stat-, tabs-, user-, btn-, day-, hs-, od-,
     tp-, item-, page-, help-, logo-) and remap their hard-coded
     surface/text/border colors to the corresponding theme tokens.
   - `!important` is required because the inline <style> blocks
     have the same specificity as the cascade — so we win by
     importance.
   - Brand-tinted elements (purple accent #5856d6, status pills
     with semantic colors) are kept readable via the
     --accent-soft / --success-soft / --danger-soft / --warning-soft
     tokens that already exist in theme.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Generic surface remap for any [class*="-container"],
       [class*="-card"], [class*="-panel"], [class*="-box"] inside
       the dashboard page ───────────────────────────────────────────── */
[data-theme="dark"] .dpms-page [class*="-container"]:not([class*="-brand"]):not([class*="-dark"]) {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dpms-page [class*="-card"]:not([class*="-brand"]):not([class*="-dark"]):not([class*="-stat"]):not([class*="-user"]) {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dpms-page [class*="-panel"]:not([class*="-brand"]):not([class*="-dark"]) {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* ─── Employees (em-*) ─────────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .em-container { background-color: var(--bg-page) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .em-title,
[data-theme="dark"] .dpms-page .em-stat-value,
[data-theme="dark"] .dpms-page .em-activity-desc,
[data-theme="dark"] .dpms-page .em-modal-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .em-subtitle,
[data-theme="dark"] .dpms-page .em-stat-label,
[data-theme="dark"] .dpms-page .em-activity-meta,
[data-theme="dark"] .dpms-page .em-form-help { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .em-card,
[data-theme="dark"] .dpms-page .em-stat-card,
[data-theme="dark"] .dpms-page .em-table,
[data-theme="dark"] .dpms-page .em-modal,
[data-theme="dark"] .dpms-page .em-modal-content,
[data-theme="dark"] .dpms-page .em-empty,
[data-theme="dark"] .dpms-page .em-input,
[data-theme="dark"] .dpms-page .em-select,
[data-theme="dark"] .dpms-page .em-textarea,
[data-theme="dark"] .dpms-page .em-action-btn,
[data-theme="dark"] .dpms-page .em-page-btn {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dpms-page .em-table tr:hover td { background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .em-modal-header,
[data-theme="dark"] .dpms-page .em-modal-footer,
[data-theme="dark"] .dpms-page .em-modal-body { background-color: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .em-table th { color: var(--text-secondary) !important; }
[data-theme="dark"] .dpms-page .em-table td { color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .em-empty { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .em-empty-icon { color: var(--text-faint) !important; }
[data-theme="dark"] .dpms-page .em-action-btn:hover { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .dpms-page .em-page-btn:hover:not(:disabled) { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .dpms-page .em-btn-secondary { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .em-btn-secondary:hover { background-color: var(--bg-subtle) !important; }

/* ─── Reports (rep-*) ──────────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .rep-card { background-color: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-card-flat { background-color: var(--bg-subtle) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-stat-label { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .rep-stat-value,
[data-theme="dark"] .dpms-page .rep-section-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .rep-section-sub { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .rep-tab-bar { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-tab { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .rep-tab:hover { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .rep-btn { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-btn:hover { background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .rep-input,
[data-theme="dark"] .dpms-page .rep-select { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-table thead th { background-color: var(--bg-subtle) !important; color: var(--text-muted) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-table tbody td { color: var(--text-primary) !important; border-bottom-color: var(--border-subtle) !important; }
[data-theme="dark"] .dpms-page .rep-table tbody tr:hover { background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .rep-pill-flat { background-color: var(--bg-muted) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .dpms-page .rep-pill-up   { background-color: var(--success-soft) !important; color: var(--success) !important; }
[data-theme="dark"] .dpms-page .rep-pill-down { background-color: var(--danger-soft)  !important; color: var(--danger)  !important; }
[data-theme="dark"] .dpms-page .rep-empty { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .rep-empty i { color: var(--text-faint) !important; }
[data-theme="dark"] .dpms-page .rep-loading { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .rep-spinner { border-color: var(--border) !important; border-top-color: var(--accent) !important; }
[data-theme="dark"] .dpms-page .rep-progress { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .dpms-page .rep-skeleton-card { background-color: var(--bg-subtle) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .rep-skeleton-line { background: linear-gradient(90deg, var(--bg-muted) 0%, var(--border) 50%, var(--bg-muted) 100%) !important; background-size: 200% 100% !important; }
[data-theme="dark"] .dpms-page .rep-error { background-color: var(--danger-soft) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
[data-theme="dark"] .dpms-page .rep-error-content p { color: var(--text-secondary) !important; }
/* Icon-box brand tints (semi-static accents) */
[data-theme="dark"] .dpms-page .rep-ic-pink { background-color: #4a1942 !important; color: #fbcfe8 !important; }
[data-theme="dark"] .dpms-page .rep-ic-cyan { background-color: #164e63 !important; color: #a5f3fc !important; }

/* ─── Reports — print styles (global fallback) ────────────────────── */
@media print {
    .dpms-page .rep-card { background: #fff !important; color: #000 !important; border-color: #ddd !important; box-shadow: none !important; }
    .dpms-page .rep-stat-value,
    .dpms-page .rep-section-title { color: #000 !important; }
    .dpms-page .rep-stat-label { color: #444 !important; }
    .dpms-page .rep-table thead th { background: #f5f5f7 !important; color: #000 !important; }
    .dpms-page .rep-table tbody td { color: #000 !important; border-bottom-color: #ddd !important; }
    .dpms-page .rep-tab-bar,
    .dpms-page .rep-no-print { display: none !important; }
    .dpms-page .rep-card { page-break-inside: avoid; }
}

/* ─── Patients (pt-*) ─────────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .pt-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .pt-card,
[data-theme="dark"] .dpms-page .pt-table-wrap,
[data-theme="dark"] .dpms-page .pt-stat-card,
[data-theme="dark"] .dpms-page .pt-input,
[data-theme="dark"] .dpms-page .pt-select,
[data-theme="dark"] .dpms-page .pt-textarea {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dpms-page .pt-page-title,
[data-theme="dark"] .dpms-page .pt-stat-value,
[data-theme="dark"] .dpms-page .pt-section-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .pt-search-input { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .pt-table th { color: var(--text-secondary) !important; background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .pt-table td { color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .pt-table tr:hover td { background-color: var(--bg-subtle) !important; }

/* ─── Appointments (al-*) ──────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .al-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .al-card,
[data-theme="dark"] .dpms-page .al-table,
[data-theme="dark"] .dpms-page .al-input,
[data-theme="dark"] .dpms-page .al-select,
[data-theme="dark"] .dpms-page .al-textarea { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .al-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .al-subtitle { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .al-table th { color: var(--text-secondary) !important; background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .al-table td { color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .al-table tr:hover td { background-color: var(--bg-subtle) !important; }

/* ─── Audit logs (audit-*) ─────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .audit-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .audit-card,
[data-theme="dark"] .dpms-page .audit-table,
[data-theme="dark"] .dpms-page .audit-input,
[data-theme="dark"] .dpms-page .audit-select { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .audit-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .audit-table th { color: var(--text-secondary) !important; background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .audit-table td { color: var(--text-primary) !important; border-color: var(--border) !important; }

/* ─── Finance (fin-*) ──────────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .fin-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .fin-card,
[data-theme="dark"] .dpms-page .fin-table,
[data-theme="dark"] .dpms-page .fin-input,
[data-theme="dark"] .dpms-page .fin-select { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .fin-title { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .fin-table th { color: var(--text-secondary) !important; background-color: var(--bg-subtle) !important; }
[data-theme="dark"] .dpms-page .fin-table td { color: var(--text-primary) !important; border-color: var(--border) !important; }

/* ─── Odontogram (odo-*, od-*) ─────────────────────────────────────── */
[data-theme="dark"] .dpms-page .odo-container,
[data-theme="dark"] .dpms-page .od-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .odo-card,
[data-theme="dark"] .dpms-page .odo-tooth,
[data-theme="dark"] .dpms-page .od-card,
[data-theme="dark"] .dpms-page .od-tooth { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .odo-tooth-number,
[data-theme="dark"] .dpms-page .od-tooth-number { color: var(--text-secondary) !important; }

/* ─── Doctors, services, settings, schedules, treatment plans, etc.
       (generic stat-, user-, btn-, help-, arch-, bar-, tabs-) ──────── */
[data-theme="dark"] .dpms-page .stat-card,
[data-theme="dark"] .dpms-page .stat-box { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .stat-label,
[data-theme="dark"] .dpms-page .stat-caption { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .stat-value,
[data-theme="dark"] .dpms-page .stat-number { color: var(--text-primary) !important; }

[data-theme="dark"] .dpms-page .user-profile,
[data-theme="dark"] .dpms-page .user-card { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .user-name { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .user-role { color: var(--text-muted) !important; }

[data-theme="dark"] .dpms-page .btn-light,
[data-theme="dark"] .dpms-page .btn-white-primary { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .btn-light:hover,
[data-theme="dark"] .dpms-page .btn-white-primary:hover { background-color: var(--bg-subtle) !important; }

[data-theme="dark"] .dpms-page .help-text,
[data-theme="dark"] .dpms-page .help-block { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .arch-row { border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .bar-track { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .dpms-page .bar-name { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .bar-amount { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .tabs-container { background-color: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .tab-btn,
[data-theme="dark"] .dpms-page .cat-tab { color: var(--text-muted) !important; }
[data-theme="dark"] .dpms-page .tab-btn:hover,
[data-theme="dark"] .dpms-page .cat-tab:hover { color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .tab-btn.active,
[data-theme="dark"] .dpms-page .cat-tab.active { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ─── Status pills (b-paid, b-pending, ...) — used in many tables ──── */
[data-theme="dark"] .dpms-page .b-paid      { background-color: var(--success-soft) !important; color: var(--success) !important; }
[data-theme="dark"] .dpms-page .b-pending   { background-color: var(--warning-soft) !important; color: var(--warning) !important; }
[data-theme="dark"] .dpms-page .b-overdue,
[data-theme="dark"] .dpms-page .b-rejected,
[data-theme="dark"] .dpms-page .b-cancelled { background-color: var(--danger-soft)  !important; color: var(--danger)  !important; }
[data-theme="dark"] .dpms-page .b-approved,
[data-theme="dark"] .dpms-page .b-completed,
[data-theme="dark"] .dpms-page .b-processed { background-color: var(--success-soft) !important; color: var(--success) !important; }
[data-theme="dark"] .dpms-page .b-draft,
[data-theme="dark"] .dpms-page .b-proposed,
[data-theme="dark"] .dpms-page .b-issued    { background-color: var(--bg-muted)      !important; color: var(--text-secondary) !important; }

/* ─── Day cells (used in calendar/schedule views) ──────────────────── */
[data-theme="dark"] .dpms-page .day-cell,
[data-theme="dark"] .dpms-page .day-name { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpms-page .day-cell.other-month { color: var(--text-faint) !important; }
[data-theme="dark"] .dpms-page .day-cell.today { background-color: var(--accent-soft) !important; color: var(--accent) !important; }

/* ─── Item rows (used in patient lists, plan lists, ...) ───────────── */
[data-theme="dark"] .dpms-page .item-card,
[data-theme="dark"] .dpms-page .item-row { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .item-card:hover,
[data-theme="dark"] .dpms-page .item-row:hover { background-color: var(--bg-subtle) !important; }

/* ─── HS (Hospital/Schedule?) and TP (Treatment Plan?) prefixes ────── */
[data-theme="dark"] .dpms-page .hs-container,
[data-theme="dark"] .dpms-page .tp-container { background-color: var(--bg-page) !important; }
[data-theme="dark"] .dpms-page .hs-card,
[data-theme="dark"] .dpms-page .tp-card { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .dpms-page .hs-title,
[data-theme="dark"] .dpms-page .tp-title { color: var(--text-primary) !important; }

/* ─── Logo + page header blocks ────────────────────────────────────── */
[data-theme="dark"] .dpms-page .logo-block,
[data-theme="dark"] .dpms-page .page-header-card { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }

/* ─── Action badges (audit log) ────────────────────────────────────── */
[data-theme="dark"] .dpms-page .action-badge { background-color: var(--bg-muted) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .dpms-page .a-create { background-color: var(--success-soft) !important; color: var(--success) !important; }
[data-theme="dark"] .dpms-page .a-update { background-color: var(--info-soft)    !important; color: var(--info)    !important; }
[data-theme="dark"] .dpms-page .a-delete { background-color: var(--danger-soft)  !important; color: var(--danger)  !important; }
[data-theme="dark"] .dpms-page .a-login  { background-color: var(--accent-soft)  !important; color: var(--accent-fg) !important; }
[data-theme="dark"] .dpms-page .a-logout { background-color: var(--bg-muted)     !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .dpms-page .a-view,
[data-theme="dark"] .dpms-page .a-export { background-color: var(--info-soft)   !important; color: var(--info)   !important; }

/* ─── Floating theme toggle variant (used in auth pages) ───────────── */
.theme-toggle-floating {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 10;
}

/* ─── RBAC Welcome Banner (dashboard/index.html) ──────────────────────
   The banner used to ship with hard-coded `bg-gradient-to-l from-blue-50
   to-indigo-50 border-blue-200 text-gray-900/800`. In dark mode that
   light-blue gradient became a bright spot against the dark page and
   the dark text disappeared against it. We now drive every color from
   theme tokens so the banner feels native in both modes. The role-row
   icon classes (.role-icon-{color}) use the same 600/400 split that
   other role indicators use across the dashboard. */
.rbac-welcome-banner {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--info)   6%, var(--bg-surface)) 100%);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

/* Subtle decorative blob in the corner — adds depth without distracting */
.rbac-welcome-banner::before {
    content: "";
    position: absolute;
    top: -40px; left: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
    pointer-events: none;
    opacity: .8;
    transition: var(--transition);
}

.rbac-banner-title { color: var(--text-primary); }
.rbac-banner-title-en { color: var(--text-secondary); font-weight: 500; }
.rbac-banner-body  { color: var(--text-secondary); }
.rbac-banner-body strong { color: var(--text-primary); }
.rbac-banner-roles { color: var(--text-secondary); }
.rbac-banner-roles strong { color: var(--text-primary); }

.rbac-banner-close {
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.rbac-banner-close:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}

/* Banner icon — uses the same color tokens as the topbar role badge */
.rbac-banner-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: var(--transition);
}
.rbac-banner-icon.is-red     { background: color-mix(in srgb, #ef4444 14%, var(--bg-surface)); color: #ef4444; border-color: color-mix(in srgb, #ef4444 30%, var(--border)); }
.rbac-banner-icon.is-blue    { background: color-mix(in srgb, #3b82f6 14%, var(--bg-surface)); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 30%, var(--border)); }
.rbac-banner-icon.is-green   { background: color-mix(in srgb, #10b981 14%, var(--bg-surface)); color: #10b981; border-color: color-mix(in srgb, #10b981 30%, var(--border)); }
.rbac-banner-icon.is-yellow  { background: color-mix(in srgb, #f59e0b 14%, var(--bg-surface)); color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 30%, var(--border)); }
.rbac-banner-icon.is-teal    { background: color-mix(in srgb, #14b8a6 14%, var(--bg-surface)); color: #14b8a6; border-color: color-mix(in srgb, #14b8a6 30%, var(--border)); }
.rbac-banner-icon.is-purple  { background: color-mix(in srgb, #8b5cf6 14%, var(--bg-surface)); color: #8b5cf6; border-color: color-mix(in srgb, #8b5cf6 30%, var(--border)); }
.rbac-banner-icon.is-gray    { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border); }

[data-theme="dark"] .rbac-banner-icon.is-red     { background: color-mix(in srgb, #f87171 18%, var(--bg-surface)); color: #fca5a5; border-color: color-mix(in srgb, #f87171 35%, var(--border)); }
[data-theme="dark"] .rbac-banner-icon.is-blue    { background: color-mix(in srgb, #60a5fa 18%, var(--bg-surface)); color: #93c5fd; border-color: color-mix(in srgb, #60a5fa 35%, var(--border)); }
[data-theme="dark"] .rbac-banner-icon.is-green   { background: color-mix(in srgb, #34d399 18%, var(--bg-surface)); color: #6ee7b7; border-color: color-mix(in srgb, #34d399 35%, var(--border)); }
[data-theme="dark"] .rbac-banner-icon.is-yellow  { background: color-mix(in srgb, #fbbf24 18%, var(--bg-surface)); color: #fcd34d; border-color: color-mix(in srgb, #fbbf24 35%, var(--border)); }
[data-theme="dark"] .rbac-banner-icon.is-teal    { background: color-mix(in srgb, #2dd4bf 18%, var(--bg-surface)); color: #5eead4; border-color: color-mix(in srgb, #2dd4bf 35%, var(--border)); }
[data-theme="dark"] .rbac-banner-icon.is-purple  { background: color-mix(in srgb, #a78bfa 18%, var(--bg-surface)); color: #c4b5fd; border-color: color-mix(in srgb, #a78bfa 35%, var(--border)); }

/* Role row icons — bright 600 in light, 400 in dark for AA contrast */
.role-icon { font-size: 14px; line-height: 1.2; }
.role-icon-red    { color: #dc2626; }
.role-icon-blue   { color: #2563eb; }
.role-icon-green  { color: #059669; }
.role-icon-yellow { color: #d97706; }
[data-theme="dark"] .role-icon-red    { color: #fca5a5; }
[data-theme="dark"] .role-icon-blue   { color: #93c5fd; }
[data-theme="dark"] .role-icon-green  { color: #6ee7b7; }
[data-theme="dark"] .role-icon-yellow { color: #fcd34d; }


   These pages don't use the .auth-shell pattern from login.html.
   They have a single card on a gradient background; we just need
   to make text colors and the card surface theme-aware. */
[data-theme="dark"] .glass-effect { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--text-faint) !important; }
[data-theme="dark"] .border-gray-200 { border-color: var(--border) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--border-strong) !important; }
[data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; }

/* ─── Role Guide Panel (slide-down) ────────────────────────────────────
   The panel lives OUTSIDE .dpms-page (it sits between the topbar and
   <main>), so the generic Tailwind remaps in theme.css don't reach it.
   We drive every surface / border / text color from theme tokens and
   apply a brand-tinted accent per role (red/blue/green/yellow/teal/
   purple/gray). The :root variables (--text-primary, --bg-surface,
   --border, --text-muted, ...) already exist in theme.css for both
   light and dark. The color-mix() expressions blend the role's brand
   color with the current surface so the panel feels at home in both
   themes. */
.role-guide-panel {
    background-color: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.role-guide-panel .text-primary { color: var(--text-primary); }
.role-guide-panel .text-secondary { color: var(--text-secondary); }
.role-guide-panel .text-muted { color: var(--text-muted); }
.role-guide-panel .text-faint { color: var(--text-faint); }

.role-guide-icon {
    /* Default tint for .is-gray (no role matched). Per-role overrides
       below brighten the icon in dark mode for AA contrast. */
    color: var(--text-secondary);
    transition: var(--transition);
}

.role-guide-close {
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.role-guide-close:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}

/* The two inner cards (Capabilities / Restrictions) used to ship with
   `bg-white bg-opacity-60` — a translucent white plate. In dark mode
   that white plate became a glaring highlight. We swap it for a
   translucent elevated surface token so it stays visible but never
   outshines the parent panel. */
.role-guide-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: var(--transition);
}

/* ── Per-role brand tints (light mode defaults) ────────────────────── */
.role-guide-panel.is-red {
    background-color: color-mix(in srgb, #ef4444 8%, var(--bg-surface));
    border-color: color-mix(in srgb, #ef4444 35%, var(--border)) !important;
}
.role-guide-panel.is-red .role-guide-icon { color: #ef4444; }
.role-guide-panel.is-blue {
    background-color: color-mix(in srgb, #3b82f6 8%, var(--bg-surface));
    border-color: color-mix(in srgb, #3b82f6 35%, var(--border)) !important;
}
.role-guide-panel.is-blue .role-guide-icon { color: #3b82f6; }
.role-guide-panel.is-green {
    background-color: color-mix(in srgb, #10b981 8%, var(--bg-surface));
    border-color: color-mix(in srgb, #10b981 35%, var(--border)) !important;
}
.role-guide-panel.is-green .role-guide-icon { color: #10b981; }
.role-guide-panel.is-yellow {
    background-color: color-mix(in srgb, #f59e0b 10%, var(--bg-surface));
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border)) !important;
}
.role-guide-panel.is-yellow .role-guide-icon { color: #f59e0b; }
.role-guide-panel.is-teal {
    background-color: color-mix(in srgb, #14b8a6 8%, var(--bg-surface));
    border-color: color-mix(in srgb, #14b8a6 35%, var(--border)) !important;
}
.role-guide-panel.is-teal .role-guide-icon { color: #14b8a6; }
.role-guide-panel.is-purple {
    background-color: color-mix(in srgb, #8b5cf6 8%, var(--bg-surface));
    border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)) !important;
}
.role-guide-panel.is-purple .role-guide-icon { color: #8b5cf6; }
.role-guide-panel.is-gray {
    background-color: var(--bg-surface);
    border-color: var(--border) !important;
}
.role-guide-panel.is-gray .role-guide-icon { color: var(--text-secondary); }

/* ── Per-role brand tints (dark mode) — lighter 400/300 swatches with
      translucent elevated surface so the panel sits on the dark
      background without burning the eye. ───────────────────────────── */
[data-theme="dark"] .role-guide-panel.is-red {
    background-color: color-mix(in srgb, #f87171 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #f87171 35%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-red .role-guide-icon { color: #fca5a5; }
[data-theme="dark"] .role-guide-panel.is-blue {
    background-color: color-mix(in srgb, #60a5fa 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #60a5fa 35%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-blue .role-guide-icon { color: #93c5fd; }
[data-theme="dark"] .role-guide-panel.is-green {
    background-color: color-mix(in srgb, #34d399 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #34d399 35%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-green .role-guide-icon { color: #6ee7b7; }
[data-theme="dark"] .role-guide-panel.is-yellow {
    background-color: color-mix(in srgb, #fbbf24 14%, var(--bg-surface));
    border-color: color-mix(in srgb, #fbbf24 40%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-yellow .role-guide-icon { color: #fcd34d; }
[data-theme="dark"] .role-guide-panel.is-teal {
    background-color: color-mix(in srgb, #2dd4bf 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #2dd4bf 35%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-teal .role-guide-icon { color: #5eead4; }
[data-theme="dark"] .role-guide-panel.is-purple {
    background-color: color-mix(in srgb, #a78bfa 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #a78bfa 35%, var(--border)) !important;
}
[data-theme="dark"] .role-guide-panel.is-purple .role-guide-icon { color: #c4b5fd; }
[data-theme="dark"] .role-guide-panel.is-gray {
    background-color: var(--bg-surface);
    border-color: var(--border) !important;
}
[data-theme="dark"] .role-guide-panel.is-gray .role-guide-icon { color: var(--text-secondary); }

/* ─── Quick Actions card + tiles (dashboard/index.html) ───────────────
   The card itself uses the standard Tailwind utilities (handled by
   theme.css's [data-theme="dark"] .dpms-page .bg-white remap). The
   four tiles, however, shipped with hard-coded gradient utilities
   (from-blue-50 to-blue-100 etc.) that did NOT adapt in dark mode —
   the gradient stayed pale-blue while the rest of the page went dark,
   so the tiles looked washed out and out of place. We drive the
   surface from the role's brand color via color-mix and a soft
   translucent gradient that reads correctly in both modes. */
.qa-card { background: var(--bg-surface); transition: var(--transition); }

.qa-tile {
    text-decoration: none;
    border: 1px solid transparent;
}
.qa-tile span { color: var(--text-primary); }

/* Light mode defaults — soft 50→100 gradient with 600 icon. */
.qa-tile-blue {
    background: linear-gradient(135deg,
        color-mix(in srgb, #3b82f6 12%, var(--bg-surface)) 0%,
        color-mix(in srgb, #3b82f6 22%, var(--bg-surface)) 100%);
    color: #2563eb;
    border-color: color-mix(in srgb, #3b82f6 25%, var(--border));
}
.qa-tile-blue:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #3b82f6 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #3b82f6 32%, var(--bg-surface)) 100%);
}
.qa-tile-green {
    background: linear-gradient(135deg,
        color-mix(in srgb, #10b981 12%, var(--bg-surface)) 0%,
        color-mix(in srgb, #10b981 22%, var(--bg-surface)) 100%);
    color: #059669;
    border-color: color-mix(in srgb, #10b981 25%, var(--border));
}
.qa-tile-green:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #10b981 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #10b981 32%, var(--bg-surface)) 100%);
}
.qa-tile-yellow {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 14%, var(--bg-surface)) 0%,
        color-mix(in srgb, #f59e0b 24%, var(--bg-surface)) 100%);
    color: #d97706;
    border-color: color-mix(in srgb, #f59e0b 25%, var(--border));
}
.qa-tile-yellow:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 24%, var(--bg-surface)) 0%,
        color-mix(in srgb, #f59e0b 34%, var(--bg-surface)) 100%);
}
.qa-tile-purple {
    background: linear-gradient(135deg,
        color-mix(in srgb, #8b5cf6 12%, var(--bg-surface)) 0%,
        color-mix(in srgb, #8b5cf6 22%, var(--bg-surface)) 100%);
    color: #7c3aed;
    border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.qa-tile-purple:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #8b5cf6 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #8b5cf6 32%, var(--bg-surface)) 100%);
}

/* Dark mode — switch to 400-tint icons on a translucent dark surface so
   the gradient still reads as "this action is blue/green/..." but
   never becomes a bright spot against the dark page. */
[data-theme="dark"] .qa-tile-blue {
    background: linear-gradient(135deg,
        color-mix(in srgb, #60a5fa 14%, var(--bg-surface)) 0%,
        color-mix(in srgb, #60a5fa 24%, var(--bg-surface)) 100%);
    color: #93c5fd;
    border-color: color-mix(in srgb, #60a5fa 30%, var(--border));
}
[data-theme="dark"] .qa-tile-blue:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #60a5fa 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #60a5fa 34%, var(--bg-surface)) 100%);
}
[data-theme="dark"] .qa-tile-green {
    background: linear-gradient(135deg,
        color-mix(in srgb, #34d399 14%, var(--bg-surface)) 0%,
        color-mix(in srgb, #34d399 24%, var(--bg-surface)) 100%);
    color: #6ee7b7;
    border-color: color-mix(in srgb, #34d399 30%, var(--border));
}
[data-theme="dark"] .qa-tile-green:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #34d399 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #34d399 34%, var(--bg-surface)) 100%);
}
[data-theme="dark"] .qa-tile-yellow {
    background: linear-gradient(135deg,
        color-mix(in srgb, #fbbf24 16%, var(--bg-surface)) 0%,
        color-mix(in srgb, #fbbf24 26%, var(--bg-surface)) 100%);
    color: #fcd34d;
    border-color: color-mix(in srgb, #fbbf24 35%, var(--border));
}
[data-theme="dark"] .qa-tile-yellow:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #fbbf24 24%, var(--bg-surface)) 0%,
        color-mix(in srgb, #fbbf24 36%, var(--bg-surface)) 100%);
}
[data-theme="dark"] .qa-tile-purple {
    background: linear-gradient(135deg,
        color-mix(in srgb, #a78bfa 14%, var(--bg-surface)) 0%,
        color-mix(in srgb, #a78bfa 24%, var(--bg-surface)) 100%);
    color: #c4b5fd;
    border-color: color-mix(in srgb, #a78bfa 30%, var(--border));
}
[data-theme="dark"] .qa-tile-purple:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #a78bfa 22%, var(--bg-surface)) 0%,
        color-mix(in srgb, #a78bfa 34%, var(--bg-surface)) 100%);
}

/* ─── Global Modals & Forms ────────────────────────────────────────── */
[data-theme="dark"] .dpms-page .modal-content,
[data-theme="dark"] .dpms-page .modal-dialog {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dpms-page .modal-header,
[data-theme="dark"] .dpms-page .modal-footer {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .dpms-page .modal-body {
    background-color: var(--bg-elevated) !important;
}

[data-theme="dark"] .dpms-page .modal-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dpms-page .modal-close {
    color: var(--text-muted) !important;
    background: transparent !important;
}
[data-theme="dark"] .dpms-page .modal-close:hover {
    color: var(--text-primary) !important;
    background: var(--bg-muted) !important;
}

[data-theme="dark"] .dpms-page .form-input,
[data-theme="dark"] .dpms-page .form-select,
[data-theme="dark"] .dpms-page .form-textarea,
[data-theme="dark"] .dpms-page .form-control {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dpms-page .form-input:focus,
[data-theme="dark"] .dpms-page .form-select:focus,
[data-theme="dark"] .dpms-page .form-textarea:focus,
[data-theme="dark"] .dpms-page .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

[data-theme="dark"] .dpms-page .form-label {
    color: var(--text-secondary) !important;
}

/* ── Sidebar nav active state (theme-aware) ────────────────────────── */
.dpms-nav-active {
    background: var(--bg-subtle) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
[data-theme="dark"] .dpms-nav-active {
    background: var(--bg-muted) !important;
    color: var(--accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   GLOBAL: Number input spinner dark-mode fix
   - Applies to every <input type="number"> in the project when dark theme
     is active. Light mode is left completely untouched.
   - Browser default spinners paint a WHITE background on Chromium/Safari
     and a light box on Firefox. We remap those to theme tokens so the
     spinner buttons share the input's surface, border and arrow colors.
   - Uses only CSS variables (design-system tokens), no hard-coded colors.
   - Cross-browser: -webkit- (Chromium/Safari/Edge) + -moz- (Firefox).
   ───────────────────────────────────────────────────────────────────────── */

/* 1) Base number input — same surface/border/text as .form-input in dark */
[data-theme="dark"] input[type="number"] {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* 2) Chromium / Safari / Edge spin buttons */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
    opacity: 1 !important;
    /* match input surface so no white box shows through */
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    /* arrow glyph color (the ▲▼) */
    filter: invert(0) !important;
    cursor: pointer;
}

/* The spin button arrow color is controlled via the glyph color in
   Chromium; force it to a light, readable token. */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button {
    color: var(--text-muted) !important;
}

[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button:hover,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button:hover {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}

/* 3) Firefox spin buttons (::-moz-number-spin-*) — keep the native
      spinner, just recolor it (do NOT use appearance:textfield which
      would hide the spin box entirely). */
[data-theme="dark"] input[type="number"]::-moz-number-spin-box {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] input[type="number"]::-moz-number-spin-up,
[data-theme="dark"] input[type="number"]::-moz-number-spin-down {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] input[type="number"]::-moz-number-spin-up:hover,
[data-theme="dark"] input[type="number"]::-moz-number-spin-down:hover {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}

/* 4) Focus / hover on the input itself — theme-aware, no white anywhere */
[data-theme="dark"] input[type="number"]:hover {
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] input[type="number"]:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
[data-theme="dark"] input[type="number"]:disabled {
    background-color: var(--bg-subtle) !important;
    color: var(--text-faint) !important;
    cursor: not-allowed;
}