/* ================================================================
   AI CLINIC DASHBOARD — Theme System (Light / Dark)
   Applied via html[data-theme="dark"]
   ================================================================ */

/* ── LIGHT THEME (default, already defined in omnnea-dashboard-26.css) ── */
/* All defaults are in :root – no changes needed here */

/* ── DARK THEME OVERRIDES ───────────────────────────────────── */
/* Palette inspired by Linear / Vercel / Stripe Dashboard — refined
   slate-navy surfaces with clear step-ups between layers, vivid azure
   primary that reads cleanly on dark, and high-contrast text hierarchy. */
html[data-theme="dark"] {
    /* Core backgrounds — deeper base + clearer step between layers */
    --bg:            #0a0f1c;   /* page bg — deeper, slightly cooler */
    --surface:       #131a2a;   /* cards / panels — visibly lifts off bg */
    --surface-2:     #1c2438;   /* striped / inset / table headers */
    --surface-hover: #25304a;   /* hover state — clearly distinct */

    /* Borders — slate-tinted, more visible without being heavy */
    --border:        rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.24);

    /* Text — sharper hierarchy, brighter primary text */
    --text:    #f1f5f9;   /* primary text — near-white, warm */
    --text-2:  #cbd5e1;   /* secondary — clearly readable */
    --text-3:  #94a3b8;   /* muted / hint — still legible */

    /* Brand — vivid azure that pops against dark surfaces */
    --primary:      #6ea8fe;
    --primary-soft: rgba(110, 168, 254, 0.16);
    --primary-dark: #4a8ce8;
    --primary-pale: #1e2f4f;

    /* Semantic colors — sharper, more vivid */
    --success:      #4ade80;
    --success-soft: rgba(74, 222, 128, 0.14);
    --warning:      #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.16);
    --danger:       #f87171;
    --danger-soft:  rgba(248, 113, 113, 0.16);

    /* Backwards-compat aliases — keep in sync with above */
    --primary-color:    #6ea8fe;
    --primary-gradient: linear-gradient(180deg, #6ea8fe 0%, #4a8ce8 100%);
    --primary-light:    #93c0ff;
    --accent-glow:      rgba(110, 168, 254, 0.28);
    --text-dark:        #f1f5f9;
    --text-light:       #cbd5e1;
    --text-soft:        #94a3b8;
    --border-color:     rgba(148, 163, 184, 0.14);

    /* Shadows — deeper, more presence for floating elements */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ── BODY DARK OVERRIDES ────────────────────────────────────── */
html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text);
}

/* ── DASHBOARD WRAPPER ──────────────────────────────────────── */
html[data-theme="dark"] .dashboard-wrapper {
    background: var(--bg);
}

/* ── SIDEBAR ─────────────────────────────────────────────────
   Deep tinted-navy panel with a subtle vignette and a hairline brand-
   accent edge on the right. Sits visibly deeper than the content area
   so cards in the main view feel elevated above it. */
html[data-theme="dark"] .sidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(110,168,254,0.08) 0%, transparent 60%),
        linear-gradient(180deg, #1a2336 0%, #131a2a 100%) !important;
    border-right: 1px solid rgba(110, 168, 254, 0.1) !important;
    box-shadow:
        inset -1px 0 0 rgba(110, 168, 254, 0.07),
        2px 0 20px rgba(0, 0, 0, 0.25) !important;
}

/* Sidebar header divider — refined hairline */
html[data-theme="dark"] .sidebar-header {
    border-bottom-color: rgba(148, 163, 184, 0.08) !important;
}

/* Brand logo — subtle glow so it feels "lit" */
html[data-theme="dark"] .sidebar-brand {
    color: var(--text) !important;
}
html[data-theme="dark"] .sidebar-brand:hover {
    color: var(--primary-light) !important;
}

/* Collapse toggle — premium pill with brand-tinted edge */
html[data-theme="dark"] .sidebar-toggle {
    background: rgba(20, 28, 48, 0.9) !important;
    color: var(--text-2) !important;
    border-color: rgba(110, 168, 254, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .sidebar-toggle:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 14px rgba(110, 168, 254, 0.45) !important;
}

/* ── Sidebar nav items — Linear/Vercel-style with accent bar ── */
html[data-theme="dark"] .sidebar .nav-link {
    color: var(--text-2) !important;
    position: relative !important;
    transition: background .15s ease, color .15s ease !important;
}
html[data-theme="dark"] .sidebar .nav-link .nav-icon,
html[data-theme="dark"] .sidebar .nav-link i {
    color: var(--text-2) !important;
    transition: color .15s ease !important;
}

/* Hover — subtle brand-tinted fill, brighter text */
html[data-theme="dark"] .sidebar .nav-link:not(.active):hover {
    background: rgba(110, 168, 254, 0.07) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .sidebar .nav-link:not(.active):hover .nav-icon,
html[data-theme="dark"] .sidebar .nav-link:not(.active):hover i {
    color: var(--text) !important;
}

/* Active — clear brand fill + glowing left accent bar */
html[data-theme="dark"] .sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(110, 168, 254, 0.18) 0%, rgba(110, 168, 254, 0.06) 100%) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .sidebar .nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 0 12px rgba(110, 168, 254, 0.55) !important;
}
html[data-theme="dark"] .sidebar .nav-link.active .nav-icon,
html[data-theme="dark"] .sidebar .nav-link.active i {
    color: var(--primary-light) !important;
}

/* Divider between nav sections */
html[data-theme="dark"] .nav-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.12) 50%, transparent 100%) !important;
    height: 1px !important;
}

/* Section / sub-section labels (if any) — refined muted */
html[data-theme="dark"] .sidebar .nav-section-title,
html[data-theme="dark"] .sidebar .sidebar-section-label {
    color: var(--text-3) !important;
    letter-spacing: .8px !important;
}

/* Sidebar bottom + version */
html[data-theme="dark"] .sidebar-bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.06) !important;
}
html[data-theme="dark"] .sidebar-version {
    color: rgba(203, 213, 225, 0.4) !important;
    font-weight: 500 !important;
    letter-spacing: .3px !important;
}

/* Custom scrollbar inside the sidebar nav — slimmer & brand-tinted */
html[data-theme="dark"] .sidebar-nav-wrap::-webkit-scrollbar,
html[data-theme="dark"] .sidebar::-webkit-scrollbar {
    width: 6px !important;
}
html[data-theme="dark"] .sidebar-nav-wrap::-webkit-scrollbar-thumb,
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
    background: rgba(110, 168, 254, 0.15) !important;
    border-radius: 10px !important;
}
html[data-theme="dark"] .sidebar-nav-wrap::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(110, 168, 254, 0.3) !important;
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
html[data-theme="dark"] .user-utility-bar {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .company-display {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .company-display:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 2px 10px rgba(110, 168, 254, 0.2) !important;
}
html[data-theme="dark"] .company-name {
    color: var(--text) !important;
}

/* ── USER DROPDOWN ──────────────────────────────────────────── */
html[data-theme="dark"] .user-dropdown-trigger {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .user-dropdown-trigger:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .user-avatar-dropdown {
    background: var(--primary-pale) !important;
}
html[data-theme="dark"] .user-avatar-dropdown i {
    color: #93c0ff !important;
}
html[data-theme="dark"] .user-name-dropdown {
    color: var(--text) !important;
}
html[data-theme="dark"] .dropdown-menu-custom {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .dropdown-item-custom {
    color: var(--text) !important;
}
html[data-theme="dark"] .dropdown-item-custom:hover {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .dropdown-item-custom i {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .dropdown-divider {
    background: var(--border) !important;
}

/* ── CARDS ──────────────────────────────────────────────────── */
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .details-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .info-card:hover {
    border-color: var(--border-strong) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .main-card .header {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

/* ── CONTENT AREA ───────────────────────────────────────────── */
html[data-theme="dark"] .content-area {
    background: var(--bg) !important;
}

/* ── TABLES ─────────────────────────────────────────────────── */
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .table-responsive {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] thead th,
html[data-theme="dark"] th {
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] tbody td,
html[data-theme="dark"] td {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] tbody tr:hover td {
    background: var(--surface-2) !important;
}

/* ── FORMS ──────────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--text-3) !important; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.18) !important;
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .form-section {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .field-label {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .form-actions {
    border-top-color: var(--border) !important;
}

/* ── FILTER SECTION ─────────────────────────────────────────── */
html[data-theme="dark"] .filter-section {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .filter-group {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .filter-input {
    background: transparent !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .filter-input::placeholder { color: var(--text-3) !important; }

/* ── SEARCH BAR ─────────────────────────────────────────────── */
html[data-theme="dark"] .search-bar {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .search-input {
    color: var(--text) !important;
    background: transparent !important;
}
html[data-theme="dark"] .search-input::placeholder { color: var(--text-3) !important; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-reset,
html[data-theme="dark"] .btn-back,
html[data-theme="dark"] .btn-back-alt {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-reset:hover { background: var(--surface-hover) !important; }
html[data-theme="dark"] .btn-back:hover,
html[data-theme="dark"] .btn-back-alt:hover {
    background: var(--surface-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

html[data-theme="dark"] .action-icon {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .action-icon:hover {
    background: var(--primary-soft) !important;
    border-color: rgba(110, 168, 254, 0.3) !important;
    color: #93c0ff !important;
}

/* ── ALERTS ─────────────────────────────────────────────────── */
html[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,0.12) !important;  border-color: rgba(220,38,38,0.25) !important;  color: #fca5a5 !important; }
html[data-theme="dark"] .alert-success { background: rgba(22,163,74,0.12) !important;  border-color: rgba(22,163,74,0.25) !important;  color: #86efac !important; }
html[data-theme="dark"] .alert-info    { background: rgba(110,168,254,0.12) !important; border-color: rgba(110,168,254,0.25) !important; color: #93c0ff !important; }
html[data-theme="dark"] .alert-warning { background: rgba(217,119,6,0.12) !important;  border-color: rgba(217,119,6,0.25) !important;  color: #fcd34d !important; }

/* ── STATUS BADGES ──────────────────────────────────────────── */
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-badge.success,
html[data-theme="dark"] .status-badge.active  { background: rgba(22,163,74,0.15) !important;   color: #86efac !important; }
html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .status-badge.danger,
html[data-theme="dark"] .status-badge.inactive { background: rgba(220,38,38,0.15) !important;  color: #fca5a5 !important; }
html[data-theme="dark"] .badge-warn,
html[data-theme="dark"] .status-badge.warn     { background: rgba(217,119,6,0.15) !important;  color: #fcd34d !important; }
html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-badge.info,
html[data-theme="dark"] .status-badge.primary  { background: rgba(110,168,254,0.15) !important; color: #93c0ff !important; }

/* ── MODALS ─────────────────────────────────────────────────── */
html[data-theme="dark"] .modal-container,
html[data-theme="dark"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .modal-header {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] .modal-title { color: var(--text) !important; }
html[data-theme="dark"] .modal-body { color: var(--text) !important; }
html[data-theme="dark"] .modal-footer { background: var(--surface-2) !important; border-top-color: var(--border) !important; }
html[data-theme="dark"] .modal-close { color: var(--text-2) !important; }
html[data-theme="dark"] .modal-close:hover { background: var(--surface-hover) !important; }

/* ── PAGINATION ─────────────────────────────────────────────── */
html[data-theme="dark"] .pagination-wrapper {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .page-link {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .page-link:hover { background: var(--surface-hover) !important; }
html[data-theme="dark"] .page-link.active,
html[data-theme="dark"] .page-item.active .page-link {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}
html[data-theme="dark"] .nav-arrows {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .arrow-btn { background: var(--surface) !important; color: var(--text-2) !important; }
html[data-theme="dark"] .current-page-info { background: var(--surface) !important; border-color: var(--border-strong) !important; }

/* ── UPLOAD ZONE ────────────────────────────────────────────── */
html[data-theme="dark"] .upload-zone {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .upload-zone:hover {
    border-color: var(--primary) !important;
    background: var(--primary-soft) !important;
}

/* ── AUDIO PLAYER ───────────────────────────────────────────── */
html[data-theme="dark"] .audio-player-modal {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}

/* ── METADATA / INFO ITEMS ──────────────────────────────────── */
html[data-theme="dark"] .metadata-item { background: var(--surface-2) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .metadata-item i { background: var(--surface) !important; }
html[data-theme="dark"] .metadata-value { color: var(--text) !important; }
html[data-theme="dark"] .metadata-label { color: var(--text-3) !important; }
html[data-theme="dark"] .metadata-section { border-top-color: var(--border) !important; }

html[data-theme="dark"] .card-title { color: var(--text) !important; border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .card-title i { background: var(--surface-2) !important; }
html[data-theme="dark"] .info-value { color: var(--text) !important; }
html[data-theme="dark"] .info-label { color: var(--text-3) !important; }
html[data-theme="dark"] .info-value.empty { color: var(--text-3) !important; }

html[data-theme="dark"] .header { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .header-title h1 { color: var(--text) !important; }
html[data-theme="dark"] .header-title p { color: var(--text-2) !important; }

/* ── PHONE ITEM ─────────────────────────────────────────────── */
html[data-theme="dark"] .phone-item {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

/* ── SWEETALERT2 ────────────────────────────────────────────── */
html[data-theme="dark"] .swal2-popup {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
}
html[data-theme="dark"] .swal2-title { color: var(--text) !important; }
html[data-theme="dark"] .swal2-html-container { color: var(--text-2) !important; }

/* ── MOBILE MENU BUTTON ─────────────────────────────────────── */
html[data-theme="dark"] .mobile-menu-btn { background: var(--primary) !important; }

/* ── NAV TABS ───────────────────────────────────────────────── */
html[data-theme="dark"] .nav-tabs {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--primary) !important;
    color: white !important;
}

/* ── VALIDATION SUMMARY ─────────────────────────────────────── */
html[data-theme="dark"] .validation-summary-errors {
    background: rgba(220,38,38,0.1) !important;
    border-color: rgba(220,38,38,0.3) !important;
    color: #fca5a5 !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* ================================================================
   PERSONALITY_AI VIEWS
   Covers: GetAll_AI_Personality, Update_AI_Personality,
           Ai_Enable_OR_Desaible, Edit_Ai_Enable_OR_Desaible,
           Get_AI_Personality_ById
   ================================================================ */

/* ── GetAll_AI_Personality — personality card list ── */
html[data-theme="dark"] .ap-main-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] .ap-card {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .ap-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 16px rgba(110, 168, 254, 0.18) !important;
}
html[data-theme="dark"] .ap-name     { color: var(--text)   !important; }
html[data-theme="dark"] .ap-branch   { color: var(--text-3) !important; }
html[data-theme="dark"] .ap-header-title { color: var(--text)   !important; }
html[data-theme="dark"] .ap-header-sub   { color: var(--text-3) !important; }

html[data-theme="dark"] .ap-message {
    color: var(--text-3) !important;
    border-left-color: var(--border-strong) !important;
}
html[data-theme="dark"] .ap-status-pill.active {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .ap-status-pill.inactive {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}

/* Toggle switch track & thumb */
html[data-theme="dark"] .ap-toggle-track {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .ap-toggle input:checked + .ap-toggle-track {
    background: #16a34a !important;
}
html[data-theme="dark"] .ap-toggle-thumb {
    background: var(--text-3) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* Edit button (amber pill) */
html[data-theme="dark"] .ap-edit-btn {
    background: rgba(180, 83, 9, 0.15) !important;
    color: #fcd34d !important;
    border-color: rgba(180, 83, 9, 0.35) !important;
}
html[data-theme="dark"] .ap-edit-btn:hover {
    background: #d97706 !important;
    color: #fff !important;
    border-color: #d97706 !important;
}

/* Icon button */
html[data-theme="dark"] .ap-icon-btn {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .ap-icon-btn:hover {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .ap-icon-btn.danger:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
}

/* Alert */
html[data-theme="dark"] .ap-alert-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}

/* ── Update_AI_Personality — edit form card ── */
html[data-theme="dark"] .uap-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] .uap-section + .uap-section {
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .uap-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .uap-section-title::after {
    background: var(--border) !important;
}
html[data-theme="dark"] .uap-label {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .uap-ctrl {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .uap-ctrl:focus {
    border-color: var(--primary) !important;
    background: var(--surface-2) !important;
    box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.18) !important;
}
html[data-theme="dark"] .uap-ctrl::placeholder {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .uap-hint {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .uap-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .uap-btn-secondary {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .uap-btn-secondary:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .uap-alert-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}
html[data-theme="dark"] .uap-alert-success {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #86efac !important;
    border-left-color: #4ade80 !important;
}
html[data-theme="dark"] .uap-back-btn {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .uap-back-btn:hover {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .uap-page-title { color: var(--text)   !important; }
html[data-theme="dark"] .uap-page-sub   { color: var(--text-3) !important; }

/* ── Ai_Enable_OR_Desaible — status table ── */
html[data-theme="dark"] .btn-view {
    background: rgba(43, 108, 176, 0.14) !important;
    color: #93c0ff !important;
    border-color: rgba(43, 108, 176, 0.28) !important;
}
html[data-theme="dark"] .btn-view:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .status-active {
    background: rgba(22, 163, 74, 0.14) !important;
    color: #86efac !important;
    border-color: rgba(22, 163, 74, 0.28) !important;
}
html[data-theme="dark"] .status-inactive {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
}
/* Bulk action row inline bg */
html[data-theme="dark"] tr[style*="#f9fafb"],
html[data-theme="dark"] tr[style*="f9fafb"] {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] tr[style*="#f9fafb"] td,
html[data-theme="dark"] tr[style*="f9fafb"] td {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* ── Edit_Ai_Enable_OR_Desaible — toggle form ── */
html[data-theme="dark"] .slider {
    background-color: var(--surface-hover) !important;
}
html[data-theme="dark"] .slider:before {
    background-color: var(--text-3) !important;
}
html[data-theme="dark"] .switch input:checked + .slider {
    background-color: #16a34a !important;
}
/* Toggle wrapper (inline style, overridden via !important) */
html[data-theme="dark"] .toggle-wrapper {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}

/* ── Get_AI_Personality_ById — detail view ── */
html[data-theme="dark"] .message-box {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .status-active-lg  { color: #4ade80 !important; }
html[data-theme="dark"] .status-inactive-lg { color: #f87171 !important; }

/* ================================================================
   HOME VIEWS — AI_Training, Call_inbox, Settings
   These views embed iframes and have hardcoded colors in their
   inline <style> blocks. These overrides patch those elements.
   ================================================================ */

/* Wrapper background */
html[data-theme="dark"] .ai-wrap {
    background: var(--bg) !important;
}

/* Tab strip container */
html[data-theme="dark"] .tabs {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Individual tab (inactive) */
html[data-theme="dark"] .tab {
    color: var(--text-2) !important;
    background: transparent !important;
}
html[data-theme="dark"] .tab:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .tab.active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(110,168,254,0.35) !important;
}

/* Card body (Settings.cshtml uses background: #faf9f5) */
html[data-theme="dark"] .card-body {
    background: var(--surface-2) !important;
}

/* Call inbox main card */
html[data-theme="dark"] .main-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Loading spinner overlay */
html[data-theme="dark"] .loader {
    background: rgba(13, 17, 23, 0.96) !important;
    backdrop-filter: blur(4px) !important;
}
html[data-theme="dark"] .loader p {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .spin {
    border-color: rgba(255,255,255,0.1) !important;
    border-top-color: var(--primary) !important;
}

/* iFrame background */
html[data-theme="dark"] .the-iframe {
    background: var(--bg) !important;
}

/* Call inbox — live stat rows */
html[data-theme="dark"] .live-stat-row {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="dark"] .live-stat-row:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .live-stat-label {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .live-stat-value {
    color: var(--text) !important;
}

/* ================================================================
   HELP.cshtml — standalone HTML document dark mode
   Help.cshtml renders its own <html>/<head> so its dark mode
   is handled by data-theme on <html> set from localStorage.
   ================================================================ */

html[data-theme="dark"] .help-container {
    background: var(--surface) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

html[data-theme="dark"] .help-header {
    background: linear-gradient(135deg, #1c2438 0%, #0a0f1c 100%) !important;
    border-bottom-color: var(--primary-soft) !important;
}

html[data-theme="dark"] #searchInput {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] #searchInput:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
}

html[data-theme="dark"] .doc-section {
    background: var(--surface) !important;
}

html[data-theme="dark"] .section-title {
    color: var(--text) !important;
    border-left-color: var(--primary) !important;
}

html[data-theme="dark"] .subsection {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .subsection h3 {
    color: var(--primary-light) !important;
}
html[data-theme="dark"] .subsection h4,
html[data-theme="dark"] .subsection p,
html[data-theme="dark"] .subsection li {
    color: var(--text-2) !important;
}

html[data-theme="dark"] .steps {
    background: var(--surface-hover) !important;
}

html[data-theme="dark"] .role-card {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .role-card h4,
html[data-theme="dark"] .role-card p {
    color: var(--text) !important;
}

html[data-theme="dark"] .badge {
    background: var(--primary-soft) !important;
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .access-table th {
    background: var(--surface-hover) !important;
    color: var(--primary-light) !important;
    border-bottom-color: rgba(110,168,254,0.28) !important;
}
html[data-theme="dark"] .access-table td {
    border-bottom-color: var(--border) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .access-table tr:hover td {
    background: var(--surface-hover) !important;
}

html[data-theme="dark"] .img-card {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .img-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .img-placeholder {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .img-caption {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
    color: var(--primary-light) !important;
}

html[data-theme="dark"] hr {
    background: linear-gradient(to right, rgba(110,168,254,0.32), transparent) !important;
}

html[data-theme="dark"] .highlight-search {
    background-color: #5a3e00 !important;
    color: #fcd34d !important;
    box-shadow: 0 0 0 2px #92400e !important;
}
html[data-theme="dark"] .highlight-search.current-match {
    background-color: #b45309 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px #d97706 !important;
}

/* ================================================================
   THEME TOGGLE BUTTON — pill switch with SVG icons
   ================================================================ */

/* Outer button — no padding, no overflow:hidden, pure interaction target */
.theme-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle-btn:focus-visible .toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.theme-toggle-btn:hover { opacity: .9; }

/* Track — the pill background */
.toggle-track {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #fbbf24;
    border: 2px solid #f59e0b;
    box-shadow: 0 2px 6px rgba(245,158,11,.35), inset 0 1px 2px rgba(255,255,255,.4);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Thumb — the sliding circle */
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG icons inside the thumb */
.toggle-icon-sun,
.toggle-icon-moon {
    position: absolute;
    width: 12px;
    height: 12px;
    transition: opacity .3s ease, transform .3s ease;
}
.toggle-icon-sun  { color: #f59e0b; opacity: 1;  transform: scale(1);    }
.toggle-icon-moon { color: #6366f1; opacity: 0;  transform: scale(.7);   }

/* ── Dark state ─────────────────────────────────────────── */
html[data-theme="dark"] .toggle-track {
    background: #4f46e5;
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(79,70,229,.5), inset 0 1px 2px rgba(255,255,255,.12);
}
html[data-theme="dark"] .toggle-thumb {
    transform: translateX(24px);
    box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.3);
}
html[data-theme="dark"] .toggle-icon-sun  { opacity: 0;  transform: scale(.7);  }
html[data-theme="dark"] .toggle-icon-moon { opacity: 1;  transform: scale(1);   }

/* ================================================================
   SECTION 7 — SETTING VIEWS
   Covers all 12 views in Views/Setting/:
   Business_Details, Business_Hours, Business_Hours_Details,
   Business_Setting, Edit_BusinessInfo, Edit_BusinessHours,
   Edit_QwestionAndAnswer, Add_New, Add_BussinessInfo,
   Ai_Enable_OR_Desaible, Get_Clinic_Details, Get_All_QuestinAndAnswer
   ================================================================ */

/* ── Card containers ── */
html[data-theme="dark"] .qa-card,
html[data-theme="dark"] .ebh-card,
html[data-theme="dark"] .abi-card,
html[data-theme="dark"] .ebi-card {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}

/* ── Section dividers (border lines between sections) ── */
html[data-theme="dark"] .qa-section + .qa-section,
html[data-theme="dark"] .ebh-section + .ebh-section,
html[data-theme="dark"] .abi-section + .abi-section,
html[data-theme="dark"] .ebi-section + .ebi-section {
    border-top-color: var(--border) !important;
}

/* ── Section title labels (the ALL-CAPS headings with ::after line) ── */
html[data-theme="dark"] .qa-section-title,
html[data-theme="dark"] .ebh-section-title,
html[data-theme="dark"] .abi-section-title,
html[data-theme="dark"] .ebi-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .qa-section-title::after,
html[data-theme="dark"] .ebh-section-title::after,
html[data-theme="dark"] .abi-section-title::after,
html[data-theme="dark"] .ebi-section-title::after,
html[data-theme="dark"] .wh-header-title::after {
    background: var(--border) !important;
}

/* ── Form labels ── */
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .abi-label,
html[data-theme="dark"] .ebi-label,
html[data-theme="dark"] .sd-label {
    color: var(--text-2) !important;
}

/* ── Form controls (inputs, textareas, selects) ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .abi-ctrl,
html[data-theme="dark"] .ebi-ctrl,
html[data-theme="dark"] .wh-input,
html[data-theme="dark"] .time-input,
html[data-theme="dark"] .datetime-input,
html[data-theme="dark"] .sd-input,
html[data-theme="dark"] .filter-select {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .abi-ctrl:focus,
html[data-theme="dark"] .ebi-ctrl:focus,
html[data-theme="dark"] .wh-input:focus,
html[data-theme="dark"] .filter-select:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .abi-ctrl[readonly],
html[data-theme="dark"] .ebi-ctrl[readonly] {
    background: var(--surface) !important;
    color: var(--text-3) !important;
}
html[data-theme="dark"] .wh-input:disabled,
html[data-theme="dark"] .time-input:disabled {
    background: var(--surface) !important;
    color: var(--text-3) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .abi-ctrl::placeholder,
html[data-theme="dark"] .ebi-ctrl::placeholder,
html[data-theme="dark"] .wh-input::placeholder {
    color: var(--text-3) !important;
}

/* ── Hint / counter text ── */
html[data-theme="dark"] .char-counter,
html[data-theme="dark"] .abi-hint,
html[data-theme="dark"] .ebi-hint {
    color: var(--text-3) !important;
}

/* ── Footer bars ── */
html[data-theme="dark"] .form-footer,
html[data-theme="dark"] .ebh-footer,
html[data-theme="dark"] .abi-footer,
html[data-theme="dark"] .ebi-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}

/* ── Secondary / cancel buttons ── */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .ebh-btn-secondary,
html[data-theme="dark"] .abi-btn-secondary,
html[data-theme="dark"] .ebi-btn-secondary {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .ebh-btn-secondary:hover,
html[data-theme="dark"] .abi-btn-secondary:hover,
html[data-theme="dark"] .ebi-btn-secondary:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* ── Amber "Edit" / "btn-view" buttons (amber in light → muted gold in dark) ── */
html[data-theme="dark"] .btn-edit,
html[data-theme="dark"] .edit-btn,
html[data-theme="dark"] .btn-view.amber-btn,
html[data-theme="dark"] .Business_Hours_Details .btn-view {
    background: rgba(251,191,36,.1) !important;
    color: #fbbf24 !important;
    border-color: rgba(252,211,77,.25) !important;
}
html[data-theme="dark"] .btn-edit:hover,
html[data-theme="dark"] .edit-btn:hover {
    background: rgba(251,191,36,.22) !important;
    color: #fde68a !important;
    border-color: rgba(252,211,77,.45) !important;
    box-shadow: 0 3px 8px rgba(251,191,36,.18) !important;
}

/* ── Voice tools container ── */
html[data-theme="dark"] .voice-tools-container {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .voice-tools-container.recording {
    border-color: rgba(220,38,38,.45) !important;
    background: rgba(220,38,38,.06) !important;
}

/* ── Interim speech preview ── */
html[data-theme="dark"] .interim-preview {
    background: rgba(147,197,253,.08) !important;
    color: #93c0ff !important;
    border-left-color: #93c0ff !important;
}

/* ── Microphone permission warning ── */
html[data-theme="dark"] .mic-permission-warning {
    background: rgba(251,191,36,.08) !important;
    color: #fbbf24 !important;
    border-left-color: #fbbf24 !important;
}

/* ── Alert messages (inline alerts inside forms) ── */
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .ebh-alert-danger,
html[data-theme="dark"] .abi-alert-danger {
    background: rgba(248,113,113,.1) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .ebh-alert-success,
html[data-theme="dark"] .abi-alert-success {
    background: rgba(74,222,128,.1) !important;
    color: #86efac !important;
    border-left-color: #4ade80 !important;
}

/* ── Business_Setting: inline alert + badge ── */
html[data-theme="dark"] .badge-agent {
    background: rgba(167,139,250,.15) !important;
    color: #c4b5fd !important;
}

/* ── No-data / empty states ── */
html[data-theme="dark"] .no-data,
html[data-theme="dark"] .no-settings-state {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-3) !important;
}
html[data-theme="dark"] .no-data i,
html[data-theme="dark"] .no-settings-state i { color: var(--text-3) !important; }
html[data-theme="dark"] .no-data h3,
html[data-theme="dark"] .no-settings-state h3 { color: var(--text-2) !important; }
html[data-theme="dark"] .no-data p,
html[data-theme="dark"] .no-settings-state p  { color: var(--text-3) !important; }

/* ── Business_Hours_Details: phone & special day items ── */
html[data-theme="dark"] .phone-item {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .special-day-item,
html[data-theme="dark"] .special-day-reason {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .special-day-label { color: var(--text-3) !important; }
html[data-theme="dark"] .special-day-value { color: var(--text) !important; }

/* ── Business_Hours_Details: amber btn-view (inside header on primary bg) ── */
html[data-theme="dark"] .details-card .btn-view {
    background: rgba(251,191,36,.12) !important;
    color: #fbbf24 !important;
    border-color: rgba(252,211,77,.3) !important;
}
html[data-theme="dark"] .details-card .btn-view:hover,
html[data-theme="dark"] .details-card .btn-edit:hover {
    background: rgba(251,191,36,.28) !important;
    color: #fde68a !important;
}

/* ── Edit_BusinessHours: special day orange panel ── */
html[data-theme="dark"] .special-day-panel {
    background: rgba(246,166,35,.04) !important;
    border-color: rgba(252,217,160,.12) !important;
}
html[data-theme="dark"] .special-day-toggle-row {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

/* ── Edit_BusinessHours: calendar modal ── */
html[data-theme="dark"] .custom-calendar-container {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .calendar-weekrow > div {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .calendar-day {
    color: var(--text) !important;
    background: transparent !important;
}
html[data-theme="dark"] .calendar-day:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .calendar-day.weekend {
    color: var(--text-2) !important;
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .calendar-day.weekend:hover {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .calendar-day.today {
    background: var(--surface-2) !important;
    color: var(--primary) !important;
}
html[data-theme="dark"] .calendar-day.other-month {
    color: var(--text-3) !important;
    opacity: .5;
}
html[data-theme="dark"] .calendar-day.other-month:hover {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .modal-buttons {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}

/* ── Add_BussinessInfo: wrap + layout panels ── */
html[data-theme="dark"] .abi-wrap {
    background: var(--surface) !important;
}
html[data-theme="dark"] .abi-right {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .abi-left {
    border-right-color: var(--border) !important;
}
html[data-theme="dark"] .abi-section + .abi-section,
html[data-theme="dark"] .abi-left { border-bottom-color: var(--border) !important; }

/* Working hours rows (Add_BussinessInfo / Edit_BusinessHours) */
html[data-theme="dark"] .wh-row:hover,
html[data-theme="dark"] .day-row:hover {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .wh-day,
html[data-theme="dark"] .day-label { color: var(--text) !important; }
html[data-theme="dark"] .wh-sep,
html[data-theme="dark"] .time-separator { color: var(--text-3) !important; }
html[data-theme="dark"] .wh-closed label,
html[data-theme="dark"] .day-checkbox label { color: var(--text-3) !important; }
html[data-theme="dark"] .wh-row,
html[data-theme="dark"] .day-row { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .working-hours-container,
html[data-theme="dark"] .working-hours-panel { border-color: var(--border) !important; }

/* ── Get_All_QuestinAndAnswer: Q&A collapsible cards ── */
html[data-theme="dark"] .qa-collapsible-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .qa-collapsible-card:hover {
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .question-header {
    background: var(--surface) !important;
}
html[data-theme="dark"] .question-header:hover {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .question-text { color: var(--text) !important; }
html[data-theme="dark"] .answer-content {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .answer-text {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    border-left-color: var(--success, #22c55e) !important;
    color: var(--text) !important;
}

/* ── Business_Hours: inline badge spans ── */
html[data-theme="dark"] span[style*="#fff7ed"],
html[data-theme="dark"] span[style*="fff7ed"] {
    background: rgba(251,191,36,.1) !important;
    color: #fbbf24 !important;
    border-color: rgba(252,211,77,.25) !important;
}
html[data-theme="dark"] span[style*="#ecfdf5"],
html[data-theme="dark"] span[style*="ecfdf5"] {
    background: rgba(34,197,94,.1) !important;
    color: #86efac !important;
    border-color: rgba(34,197,94,.25) !important;
}

/* ── Get_Clinic_Details: cd-* classes ── */
html[data-theme="dark"] .cd-wrap {
    background: var(--surface) !important;
}
html[data-theme="dark"] .phone-card {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-copy {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-edit-yellow {
    background: rgba(251,191,36,.1) !important;
    color: #fbbf24 !important;
    border-color: rgba(252,211,77,.25) !important;
}

/* ── Danger-outline button (Edit Q&A Delete button) ── */
html[data-theme="dark"] .btn-danger-outline {
    background: rgba(220,38,38,.08) !important;
    color: #f87171 !important;
    border-color: rgba(248,113,113,.35) !important;
}
html[data-theme="dark"] .btn-danger-outline:hover {
    background: rgba(220,38,38,.2) !important;
    color: #fca5a5 !important;
}

/* ── ebi-* (Edit_BusinessInfo) ── */
html[data-theme="dark"] .ebi-card {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .ebi-section + .ebi-section {
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .ebi-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .ebi-section-title::after {
    background: var(--border) !important;
}

/* ── Business_Setting: alert block (not using alert-danger class) ── */
html[data-theme="dark"] .alert[style*="#fed7d7"],
html[data-theme="dark"] .alert[style*="fed7d7"] {
    background: rgba(248,113,113,.1) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}
/* The .alert in Business_Setting has inline styles baked in CSS, we target them by class combo */
html[data-theme="dark"] .Business_Setting .alert {
    background: rgba(248,113,113,.1) !important;
    color: #fca5a5 !important;
}

/* ── Business_Hours.cshtml inline badges (handled by span[style] above + explicit): ── */
/* These are <span style="background:#..."> tags – the span[style] selectors handle them  */

/* ── qa-meta-strip (Edit_QwestionAndAnswer) ── */
html[data-theme="dark"] .qa-meta-strip {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .qa-meta-item { color: var(--text-2) !important; }
html[data-theme="dark"] .qa-meta-item strong { color: var(--text) !important; }

/* ── qa-clinic-chip (Edit_QwestionAndAnswer) ── */
html[data-theme="dark"] .qa-clinic-chip {
    background: var(--primary-soft) !important;
    border-color: rgba(110,168,254,.22) !important;
    border-left-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ── Page header back button (shared across Edit views) ── */
html[data-theme="dark"] .qa-back-btn,
html[data-theme="dark"] .ebh-back-btn,
html[data-theme="dark"] .abi-back-btn {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .qa-back-btn:hover,
html[data-theme="dark"] .ebh-back-btn:hover,
html[data-theme="dark"] .abi-back-btn:hover {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ── Page header sub titles ── */
html[data-theme="dark"] .qa-page-title,
html[data-theme="dark"] .ebh-page-title,
html[data-theme="dark"] .abi-page-title { color: var(--text) !important; }
html[data-theme="dark"] .qa-page-sub,
html[data-theme="dark"] .ebh-page-sub,
html[data-theme="dark"] .abi-page-sub   { color: var(--text-3) !important; }

/* ── abi-alert (Add_BussinessInfo validation alert) ── */
html[data-theme="dark"] .abi-alert-val {
    background: rgba(248,113,113,.1) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}

/* ── Business_Setting: filter section border ── */
html[data-theme="dark"] .filter-section {
    border-bottom-color: var(--border) !important;
}

/* ── Business_Setting: table overrides (already covered by global table rules)
   Explicit repeats for specificity inside Business_Setting's local CSS ── */
html[data-theme="dark"] .Business_Setting .main-card,
html[data-theme="dark"] .container .main-card {
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
}

/* ── Edit_BusinessHours: ebh-empty state ── */
html[data-theme="dark"] .ebh-empty {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .ebh-empty h3 { color: var(--text-2) !important; }
html[data-theme="dark"] .ebh-empty p  { color: var(--text-3) !important; }

/* ── Edit_BusinessHours: alerts rendered with inline classes ── */
html[data-theme="dark"] .ebh-alert {
    border-radius: 10px;
}

/* ================================================================
   SECTION 8 — EXTENSIONS VIEWS
   Covers all views in Views/Extensions/:
   Get_Extension, Add_New, Edit_Extension, Delete
   ================================================================ */

/* ── Card container ── */
html[data-theme="dark"] .ext-card {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}

/* ── Section title (ALL-CAPS + ::after divider line) ── */
html[data-theme="dark"] .ext-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .ext-section-title::after {
    background: var(--border) !important;
}

/* ── Form labels ── */
html[data-theme="dark"] .ext-form-label {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .ext-form-label-left {
    color: var(--text-2) !important;
}

/* ── Controls: select & inputs ── */
html[data-theme="dark"] .ext-ctrl {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
    /* swap out the light arrow SVG for a dark-friendly one */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .8rem center !important;
}
html[data-theme="dark"] .ext-ctrl.no-arrow {
    background-image: none !important;
}
html[data-theme="dark"] .ext-ctrl:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .ext-ctrl::placeholder { color: var(--text-3) !important; }

/* ── Country code select (Add_New) ── */
html[data-theme="dark"] .ext-cc-select {
    background-color: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .4rem center !important;
}

/* ── Phone wrapper (Edit_Extension joined input) ── */
html[data-theme="dark"] .ext-phone-wrapper {
    border-color: var(--border-strong) !important;
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .ext-cc-input {
    background: var(--surface) !important;
    border-right-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .ext-cc-input:focus {
    background: var(--primary-soft) !important;
}
html[data-theme="dark"] .ext-local-input {
    color: var(--text) !important;
}
html[data-theme="dark"] .ext-local-input::placeholder { color: var(--text-3) !important; }
html[data-theme="dark"] .ext-phone-hint { color: var(--text-3) !important; }

/* ── Mode toggle (Phone / Extension) ── */
html[data-theme="dark"] .ext-mode-toggle {
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .ext-mode-toggle button:not(.active) {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .ext-mode-toggle button:not(.active):hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* ── Footer ── */
html[data-theme="dark"] .ext-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}

/* ── Alert messages ── */
html[data-theme="dark"] .ext-wrap .alert-danger {
    background: rgba(248,113,113,.1) !important;
    color: #fca5a5 !important;
    border-left-color: #f87171 !important;
}
html[data-theme="dark"] .ext-wrap .alert-success {
    background: rgba(74,222,128,.1) !important;
    color: #86efac !important;
    border-left-color: #4ade80 !important;
}

/* ── Page header back button & titles ── */
html[data-theme="dark"] .ext-back-btn {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .ext-back-btn:hover {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .ext-page-title { color: var(--text) !important; }
html[data-theme="dark"] .ext-page-sub   { color: var(--text-3) !important; }

/* ── Get_Extension: msg-full tooltip ── */
html[data-theme="dark"] .msg-full {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .msg-full::before {
    background: #2d3748 !important;
}

/* ── Get_Extension: filter select wrapper ── */
html[data-theme="dark"] .filter-select-wrapper {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .filter-select-wrapper .filter-select {
    color: var(--text) !important;
    background: transparent !important;
}

/* ============================================================
   SECTION 9 — MANAGE_USERS VIEWS
   Covers: Get_Users · Add_UserByAdmin · Edit_Role ·
           Update_User · ChangePassword_BYAdmin
   ============================================================ */

/* ── Get_Users: kebab dropdown menu ── */
html[data-theme="dark"] .kebab-menu {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .kebab-item { color: var(--text) !important; }
html[data-theme="dark"] .kebab-item:hover {
    background: var(--surface-hover) !important;
}
html[data-theme="dark"] .kebab-item.danger { color: #f87171 !important; }
html[data-theme="dark"] .kebab-item.danger:hover {
    background: rgba(220,38,38,.12) !important;
}

/* ── Get_Users: roles modal (already uses vars, keep border) ── */
html[data-theme="dark"] .roles-modal-content {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .roles-modal-header {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .role-badge-display {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* ── Add_UserByAdmin: card & layout ── */
html[data-theme="dark"] .aub-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .aub-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .aub-section-title::after {
    background: var(--border) !important;
}

/* ── Add_UserByAdmin: form controls ── */
html[data-theme="dark"] .aub-label { color: var(--text-2) !important; }
html[data-theme="dark"] .aub-hint  { color: var(--text-3) !important; }
html[data-theme="dark"] .aub-ctrl {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .aub-ctrl:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
html[data-theme="dark"] .aub-ctrl.is-invalid {
    background: rgba(220,38,38,.08) !important;
    border-color: rgba(220,38,38,.55) !important;
}
html[data-theme="dark"] .aub-ctrl::placeholder { color: var(--text-3) !important; }

/* ── Add_UserByAdmin: password requirements ── */
html[data-theme="dark"] .aub-req-item {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .aub-req-item.valid {
    color: #34d399 !important;
}
html[data-theme="dark"] .aub-req-item.invalid {
    color: #f87171 !important;
}
html[data-theme="dark"] .aub-req-item .aub-req-icon {
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .aub-req-item.valid .aub-req-icon {
    background: rgba(52,211,153,.15) !important;
    border-color: rgba(52,211,153,.4) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .aub-req-item.invalid .aub-req-icon {
    background: rgba(248,113,113,.12) !important;
    border-color: rgba(248,113,113,.4) !important;
    color: #f87171 !important;
}

/* ── Add_UserByAdmin: strength bar ── */
html[data-theme="dark"] .aub-strength-bar {
    background: var(--border-strong) !important;
}

/* ── Add_UserByAdmin: alerts & validation summary ── */
html[data-theme="dark"] .aub-alert-danger {
    background: rgba(220,38,38,.1) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .aub-alert-success {
    background: rgba(52,211,153,.1) !important;
    border-color: rgba(52,211,153,.35) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .aub-val-summary {
    background: rgba(220,38,38,.08) !important;
    border-color: rgba(220,38,38,.3) !important;
    color: #f87171 !important;
}

/* ── Add_UserByAdmin: footer & secondary button ── */
html[data-theme="dark"] .aub-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .aub-btn-secondary {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .aub-btn-secondary:hover {
    background: var(--surface-hover) !important;
}

/* ── Add_UserByAdmin: page header back button ── */
html[data-theme="dark"] .aub-back-btn {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .aub-back-btn:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* ── Edit_Role: card & layout ── */
html[data-theme="dark"] .er-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .er-user-info {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .er-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .er-section-title::after {
    background: var(--border) !important;
}

/* ── Edit_Role: role selection items ── */
html[data-theme="dark"] .er-role-item {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .er-role-item:hover {
    background: var(--surface-hover) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .er-role-item.assigned {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
}
html[data-theme="dark"] .er-role-item .er-role-name {
    color: var(--text) !important;
}
html[data-theme="dark"] .er-role-item .er-role-desc {
    color: var(--text-3) !important;
}

/* ── Edit_Role: toggle slider track ── */
html[data-theme="dark"] .er-slider {
    background: var(--border-strong) !important;
}

/* ── Edit_Role: alerts & footer ── */
html[data-theme="dark"] .er-alert-danger {
    background: rgba(220,38,38,.1) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .er-alert-success {
    background: rgba(52,211,153,.1) !important;
    border-color: rgba(52,211,153,.35) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .er-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}

/* ── Update_User: card & layout ── */
html[data-theme="dark"] .uu-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .uu-user-bar {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .uu-roles-bar {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .uu-roles-label {
    color: var(--text-3) !important;
}

/* ── Update_User: amber edit-roles button → muted gold ── */
html[data-theme="dark"] .uu-edit-roles {
    background: rgba(251,191,36,.1) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,.35) !important;
}
html[data-theme="dark"] .uu-edit-roles:hover {
    background: rgba(251,191,36,.18) !important;
}

/* ── Update_User: section titles & dividers ── */
html[data-theme="dark"] .uu-section-title {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .uu-section-title::after {
    background: var(--border) !important;
}

/* ── Update_User: form controls ── */
html[data-theme="dark"] .uu-label { color: var(--text-2) !important; }
html[data-theme="dark"] .uu-ctrl {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .uu-ctrl:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
html[data-theme="dark"] .uu-ctrl:disabled {
    background: var(--surface-hover) !important;
    color: var(--text-3) !important;
}
html[data-theme="dark"] .uu-ctrl::placeholder { color: var(--text-3) !important; }

/* ── Update_User: active toggle row ── */
html[data-theme="dark"] .uu-toggle-row {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .uu-toggle-label { color: var(--text) !important; }
html[data-theme="dark"] .uu-toggle-desc  { color: var(--text-3) !important; }

/* ── Update_User: alerts, footer & secondary button ── */
html[data-theme="dark"] .uu-alert-danger {
    background: rgba(220,38,38,.1) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .uu-alert-success {
    background: rgba(52,211,153,.1) !important;
    border-color: rgba(52,211,153,.35) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .uu-footer {
    background: var(--surface-2) !important;
    border-top-color: var(--border) !important;
}
html[data-theme="dark"] .uu-btn-secondary {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .uu-btn-secondary:hover {
    background: var(--surface-hover) !important;
}

/* ── Update_User: page header back button ── */
html[data-theme="dark"] .uu-back-btn {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}
html[data-theme="dark"] .uu-back-btn:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* ── ChangePassword_BYAdmin: main card & strength meter ── */
html[data-theme="dark"] .main-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .strength-meter {
    background: var(--border-strong) !important;
}

/* ================================================================
   SECTION 10 — USERS_AUTH VIEWS
   Covers: login, Register, ConfirmEmail, NewPassword, ResetYouPassword,
   Verify_Update_Email_or_PhoneNum, change_password, Profile
   ================================================================ */

/* ── Auth card containers ── */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .password-card,
html[data-theme="dark"] .vfy-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .ce-card,
html[data-theme="dark"] .reset-card,
html[data-theme="dark"] .auth-card {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
    color: var(--text) !important;
}

/* ── Headings & body text inside auth cards ── */
html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .login-card h3,
html[data-theme="dark"] .register-card h1,
html[data-theme="dark"] .register-card h2,
html[data-theme="dark"] .register-card h3,
html[data-theme="dark"] .password-card h1,
html[data-theme="dark"] .password-card h2,
html[data-theme="dark"] .password-card h3,
html[data-theme="dark"] .vfy-card h1,
html[data-theme="dark"] .vfy-card h2,
html[data-theme="dark"] .vfy-card h3,
html[data-theme="dark"] .profile-card h1,
html[data-theme="dark"] .profile-card h2,
html[data-theme="dark"] .profile-card h3,
html[data-theme="dark"] .ce-card h1,
html[data-theme="dark"] .ce-card h2,
html[data-theme="dark"] .ce-card h3 {
    color: var(--text) !important;
}

/* Title gradients — flip to brighter palette so they read on dark */
html[data-theme="dark"] .login-title,
html[data-theme="dark"] .register-title {
    background: linear-gradient(90deg, var(--primary-light), var(--primary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .login-subtitle,
html[data-theme="dark"] .register-subtitle,
html[data-theme="dark"] .vfy-subtitle,
html[data-theme="dark"] .auth-subtitle {
    color: var(--text-3) !important;
}

/* ── Form labels & helper text ── */
html[data-theme="dark"] .login-card .form-label,
html[data-theme="dark"] .register-card .form-label,
html[data-theme="dark"] .password-card .form-label,
html[data-theme="dark"] .vfy-card .form-label,
html[data-theme="dark"] .profile-card .form-label,
html[data-theme="dark"] .ce-card .form-label,
html[data-theme="dark"] .reset-card .form-label {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .login-card .form-label i,
html[data-theme="dark"] .register-card .form-label i,
html[data-theme="dark"] .password-card .form-label i,
html[data-theme="dark"] .vfy-card .form-label i,
html[data-theme="dark"] .profile-card .form-label i,
html[data-theme="dark"] .ce-card .form-label i,
html[data-theme="dark"] .reset-card .form-label i {
    color: var(--primary-light) !important;
}
/* Inline icon-color override (.form-label <i style="color:#7294b5">) */
html[data-theme="dark"] .form-label i[style*="7294b5"],
html[data-theme="dark"] .form-label i[style*="5a7a9e"] {
    color: var(--primary-light) !important;
}

/* ── Form controls (input/select/textarea) inside auth cards ── */
html[data-theme="dark"] .login-card .form-control,
html[data-theme="dark"] .register-card .form-control,
html[data-theme="dark"] .password-card .form-control,
html[data-theme="dark"] .vfy-card .form-control,
html[data-theme="dark"] .profile-card .form-control,
html[data-theme="dark"] .ce-card .form-control,
html[data-theme="dark"] .reset-card .form-control {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .login-card .form-control::placeholder,
html[data-theme="dark"] .register-card .form-control::placeholder,
html[data-theme="dark"] .password-card .form-control::placeholder,
html[data-theme="dark"] .vfy-card .form-control::placeholder,
html[data-theme="dark"] .profile-card .form-control::placeholder,
html[data-theme="dark"] .ce-card .form-control::placeholder,
html[data-theme="dark"] .reset-card .form-control::placeholder {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .login-card .form-control:focus,
html[data-theme="dark"] .register-card .form-control:focus,
html[data-theme="dark"] .password-card .form-control:focus,
html[data-theme="dark"] .vfy-card .form-control:focus,
html[data-theme="dark"] .profile-card .form-control:focus,
html[data-theme="dark"] .ce-card .form-control:focus,
html[data-theme="dark"] .reset-card .form-control:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

/* Input-error state */
html[data-theme="dark"] .input-error,
html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-control.input-error {
    border-color: var(--danger) !important;
    background: rgba(248, 113, 113, 0.08) !important;
}

/* Password-toggle (eye) buttons */
html[data-theme="dark"] .password-toggle-btn,
html[data-theme="dark"] .password-toggle {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .password-toggle-btn:hover,
html[data-theme="dark"] .password-toggle:hover {
    color: var(--primary-light) !important;
}

/* ── Alerts ── */
html[data-theme="dark"] .alert-custom,
html[data-theme="dark"] .alert-vfy {
    color: var(--text) !important;
}
html[data-theme="dark"] .alert-danger-custom,
html[data-theme="dark"] .alert-danger {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
    border-left-color: var(--danger) !important;
}
html[data-theme="dark"] .alert-success-custom,
html[data-theme="dark"] .alert-success {
    background: rgba(74, 222, 128, 0.12) !important;
    color: #86efac !important;
    border-left-color: var(--success) !important;
}
html[data-theme="dark"] .alert-info {
    background: var(--primary-soft) !important;
    color: var(--primary-light) !important;
    border-left-color: var(--primary) !important;
}

/* Validation summary */
html[data-theme="dark"] .validation-summary-custom,
html[data-theme="dark"] .validation-summary-errors {
    background: rgba(248, 113, 113, 0.10) !important;
    border-left-color: var(--danger) !important;
}
html[data-theme="dark"] .validation-summary-custom li,
html[data-theme="dark"] .validation-summary-errors li {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .text-danger-custom,
html[data-theme="dark"] .field-validation-error,
html[data-theme="dark"] .text-danger {
    color: #fca5a5 !important;
}

/* Remember-me checkbox label */
html[data-theme="dark"] .checkbox-custom span {
    color: var(--text-2) !important;
}
/* Forgot-password link (inline color in markup) */
html[data-theme="dark"] a[style*="7294b5"],
html[data-theme="dark"] a[style*="color:#7294b5"] {
    color: var(--primary-light) !important;
}

/* ── Primary CTA buttons ── */
html[data-theme="dark"] .btn-login,
html[data-theme="dark"] .btn-register,
html[data-theme="dark"] .btn-vfy-submit {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(110, 168, 254, 0.35) !important;
}
html[data-theme="dark"] .btn-login:hover:not(:disabled),
html[data-theme="dark"] .btn-register:hover:not(:disabled),
html[data-theme="dark"] .btn-vfy-submit:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(110, 168, 254, 0.5) !important;
}

/* ── Logo / icon containers ── */
html[data-theme="dark"] .login-logo,
html[data-theme="dark"] .register-logo,
html[data-theme="dark"] .auth-logo,
html[data-theme="dark"] .header-icon,
html[data-theme="dark"] .vfy-icon-wrap {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 6px 18px rgba(110, 168, 254, 0.35) !important;
}

/* ── Divider ("or") ── */
html[data-theme="dark"] .divider {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after {
    background: var(--border) !important;
}

/* Footer "already have an account / login link" */
html[data-theme="dark"] .login-link,
html[data-theme="dark"] .auth-link {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .login-link a,
html[data-theme="dark"] .auth-link a {
    color: var(--primary-light) !important;
}

/* ── Password strength meter ── */
html[data-theme="dark"] .password-requirements {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .requirements-title {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .requirement-item {
    color: var(--text-3) !important;
}
html[data-theme="dark"] .requirement-item.valid {
    color: #4ade80 !important;
}
html[data-theme="dark"] .requirement-item.invalid {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .strength-text {
    color: var(--text-2) !important;
}
html[data-theme="dark"] .match-success {
    color: #4ade80 !important;
}
html[data-theme="dark"] .match-error {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .confirm-password-match {
    color: var(--text-2) !important;
}

/* ── OTP verification boxes ── */
html[data-theme="dark"] .otp-box {
    background: var(--surface-2) !important;
    border: 1.5px solid var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .otp-box:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    background: var(--surface) !important;
}

/* Resend / timer / back links */
html[data-theme="dark"] .vfy-resend,
html[data-theme="dark"] .vfy-back {
    color: var(--primary-light) !important;
}
html[data-theme="dark"] .vfy-timer {
    color: var(--text-3) !important;
}

/* ── Secondary button (Cancel etc.) ── */
html[data-theme="dark"] .password-card .btn-secondary,
html[data-theme="dark"] .login-card .btn-secondary,
html[data-theme="dark"] .register-card .btn-secondary,
html[data-theme="dark"] .vfy-card .btn-secondary,
html[data-theme="dark"] .ce-card .btn-secondary,
html[data-theme="dark"] .profile-card .btn-secondary,
html[data-theme="dark"] .reset-card .btn-secondary {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border-strong) !important;
}
html[data-theme="dark"] .password-card .btn-secondary:hover,
html[data-theme="dark"] .login-card .btn-secondary:hover,
html[data-theme="dark"] .register-card .btn-secondary:hover,
html[data-theme="dark"] .vfy-card .btn-secondary:hover,
html[data-theme="dark"] .ce-card .btn-secondary:hover,
html[data-theme="dark"] .profile-card .btn-secondary:hover,
html[data-theme="dark"] .reset-card .btn-secondary:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* Date pickers inside auth cards */
html[data-theme="dark"] .login-card input[type="date"],
html[data-theme="dark"] .register-card input[type="date"],
html[data-theme="dark"] .profile-card input[type="date"] { color-scheme: dark; }

/* Select dropdown <option> */
html[data-theme="dark"] .login-card select option,
html[data-theme="dark"] .register-card select option,
html[data-theme="dark"] .profile-card select option {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* ── ConfirmEmail OTP card ── */
html[data-theme="dark"] .otp-card {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .otp-title { color: var(--text) !important; }
html[data-theme="dark"] .otp-subtitle { color: var(--text-3) !important; }
html[data-theme="dark"] .otp-input {
    background: var(--surface-2) !important;
    border: 1.5px solid var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .otp-input:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
html[data-theme="dark"] .btn-verify {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(110, 168, 254, 0.35) !important;
}
html[data-theme="dark"] .resend-text { color: var(--text-3) !important; }
html[data-theme="dark"] .btn-resend,
html[data-theme="dark"] .back-to-login {
    color: var(--primary-light) !important;
}
html[data-theme="dark"] .timer { color: var(--text-3) !important; }

/* ── ResetYouPassword: info box + additional links ── */
html[data-theme="dark"] .info-box {
    background: var(--primary-soft) !important;
    border: 1px solid rgba(110, 168, 254, 0.3) !important;
    color: var(--primary-light) !important;
}
html[data-theme="dark"] .info-box i { color: var(--primary-light) !important; }
html[data-theme="dark"] .additional-links { color: var(--text-3) !important; }
html[data-theme="dark"] .additional-links a {
    color: var(--primary-light) !important;
}

/* ── Profile modal ── */
html[data-theme="dark"] .profile-backdrop {
    background: rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="dark"] .profile-modal {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .profile-card-inner {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .profile-field {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .profile-field:hover {
    background: rgba(110, 168, 254, 0.06) !important;
}
html[data-theme="dark"] .field-label { color: var(--text-3) !important; }
html[data-theme="dark"] .field-value { color: var(--text) !important; }
html[data-theme="dark"] .field-icon-wrap {
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 3px 8px rgba(110, 168, 254, 0.35) !important;
}
html[data-theme="dark"] .btn-change-pass {
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(110, 168, 254, 0.4) !important;
}
html[data-theme="dark"] .btn-profile-action.btn-cancel,
html[data-theme="dark"] .btn-profile-action[class*="cancel"],
html[data-theme="dark"] .btn-profile-action[class*="close"] {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border-strong) !important;
}

/* Profile toast */
html[data-theme="dark"] .profile-toast {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .profile-toast-close { color: var(--text-3) !important; }
html[data-theme="dark"] .profile-toast-close:hover { color: var(--text) !important; }
html[data-theme="dark"] .profile-error { color: #fca5a5 !important; }
html[data-theme="dark"] .profile-close {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .profile-close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}