/* ==========================================================================
   Order Intel CRM - Dark Mode & Light Mode Theme Stylesheet
   Modern, Accessible, High-Contrast Multi-Theme System
   ========================================================================== */

/* ── Smooth Theme Transitions ────────────────────────────────────────────── */
body,
.sidebar,
.right-bar,
.mobile-top-navbar,
.display-container,
.db-kpi,
.ai-chart-card,
.View-Branch-div,
.live-header-card,
.schedule-header-box,
.config-card,
.roi-card,
.user-kpi-card,
.users-toolbar,
.users-table-container,
.notif-item,
.popup-box,
.create-user-modal-box {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   THEME TOGGLE CONTROLS (Sidebar, Mobile Bar, Profile & Modals)
   ========================================================================== */

/* ── Sidebar Segmented Theme Switcher ────────────────────────────────────── */
.sidebar-theme-container {
    padding: 16px 14px 18px 14px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    width: 100%;
}

.sidebar-theme-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-theme-segmented {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
    box-sizing: border-box;
    width: 100%;
}

.theme-seg-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.theme-seg-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.theme-seg-btn.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
}

.theme-seg-btn svg {
    flex-shrink: 0;
}

/* ── Icon Button (Mobile Top Bar, Top Navbar, Login) ─────────────────────── */
.theme-toggle-icon-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    color: #ffffff;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.theme-toggle-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.theme-toggle-icon-btn:active {
    transform: scale(0.96);
}

.theme-toggle-icon-btn svg {
    display: block;
}

/* ── Right-Bar Top Mode Switcher Bar ─────────────────────────────────────── */
.right-bar-theme-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px 16px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 10;
}

[data-theme="dark"] .right-bar-theme-bar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.right-bar-theme-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.right-bar-theme-label svg {
    stroke: currentColor;
    color: #ffffff !important;
}

.right-bar-theme-label span {
    color: #ffffff !important;
}

[data-theme="dark"] .right-bar-theme-label {
    color: #ffffff !important;
}

[data-theme="dark"] .right-bar-theme-label svg {
    color: #ffffff !important;
}

[data-theme="dark"] .right-bar-theme-label span {
    color: #ffffff !important;
}

.right-bar-segmented {
    flex: 1;
    max-width: 160px;
    margin-left: auto;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.right-bar-segmented .theme-seg-btn {
    color: #64748b;
    padding: 6px 8px;
    font-size: 11px;
}

.right-bar-segmented .theme-seg-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
}

.right-bar-segmented .theme-seg-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .right-bar-segmented {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .right-bar-segmented .theme-seg-btn {
    color: #94a3b8;
}

[data-theme="dark"] .right-bar-segmented .theme-seg-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[data-theme="dark"] .right-bar-segmented .theme-seg-btn.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
}

/* Hide in-page right bar mode switcher on tablet and mobile viewports (< 1024px) */
@media screen and (max-width: 1023px) {
    .right-bar-theme-bar {
        display: none !important;
    }
}

/* ── Topbar Theme Button in Main Navbar ─────────────────────────────────── */
.topbar-theme-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.topbar-theme-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0369a1;
    transform: scale(1.05);
}

[data-theme="dark"] .topbar-theme-btn {
    background: #131d31;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #38bdf8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .topbar-theme-btn:hover {
    background: #1e293b;
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

/* Login Page Floating Theme Switcher */
.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   DARK THEME SPECIFIC OVERRIDES (html[data-theme="dark"] & body.dark-theme)
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-theme {
    background-color: #0b1120 !important;
    color: #f1f5f9 !important;
}

/* ── Custom Dark Scrollbars ─────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0b1120;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ── Left Sidebar Dark Mode ─────────────────────────────────────────────── */
html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #090e1a 0%, #0f1d38 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .mobile-top-navbar {
    background: linear-gradient(180deg, #090e1a 0%, #0f1d38 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sidebar .menu li:hover {
    background-color: rgba(29, 191, 255, 0.2) !important;
}

html[data-theme="dark"] .sidebar .menu li.active-menu-item {
    background-color: rgba(29, 191, 255, 0.25) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .sidebar .menu li.active-submenu-item {
    background-color: rgba(29, 191, 255, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .sidebar .menu li.active-subaction-item {
    background-color: rgba(29, 191, 255, 0.35) !important;
    color: #38bdf8 !important;
}

/* ── Top Navbar & Breadcrumbs ───────────────────────────────────────────── */
html[data-theme="dark"] .display-container-navbar-left h1,
html[data-theme="dark"] .users-page-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .dashboard-display-branch {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .users-page-subtitle {
    color: #94a3b8 !important;
}

/* ── Right Bar & Profile ────────────────────────────────────────────────── */
html[data-theme="dark"] .right-bar {
    background: linear-gradient(180deg, #090e1a 0%, #0e172a 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .welcome-msg-greeting,
html[data-theme="dark"] .welcome-msg-greeting-include {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .welcome-msg-username,
html[data-theme="dark"] .welcome-msg-username-include {
    color: #f8fafc !important;
}

html[data-theme="dark"] .welcome-msg-email {
    color: #64748b !important;
}

/* ── Dashboard KPI Cards ────────────────────────────────────────────────── */
html[data-theme="dark"] .db-kpi,
html[data-theme="dark"] .db-kpi.ai-kpi-card {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .db-kpi.ai-kpi-card:hover {
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.3) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

html[data-theme="dark"] .db-kpi.ai-kpi-card .db-kpi-heading {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .db-kpi.ai-kpi-card .db-kpi-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .ai-kpi-unit {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .ai-kpi-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .ai-kpi-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .ai-kpi-card.kpi-accuracy .ai-kpi-chip {
    background: rgba(2, 132, 199, 0.22) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .ai-kpi-card.kpi-downtime .ai-kpi-chip,
html[data-theme="dark"] .ai-kpi-card.kpi-hours .ai-kpi-chip {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .ai-kpi-card.kpi-violations .ai-kpi-chip,
html[data-theme="dark"] .ai-kpi-card.kpi-today .ai-kpi-chip {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .ai-kpi-card.kpi-peak .ai-kpi-chip {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #c084fc !important;
}

html[data-theme="dark"] .ai-kpi-card.kpi-wait .ai-kpi-chip {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #34d399 !important;
}

/* ── Dashboard Chart Cards ──────────────────────────────────────────────── */
html[data-theme="dark"] .ai-chart-card.db-charts,
html[data-theme="dark"] .chart-container.db-charts,
html[data-theme="dark"] .chart-container {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .ai-chart-card:hover {
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .ai-chart-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ai-graph-heading {
    color: #f8fafc !important;
}

html[data-theme="dark"] .ai-graph-subtext {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .ai-metric-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .ai-metric-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .ai-metric-val {
    color: #f8fafc !important;
}

html[data-theme="dark"] .ai-empty-telemetry {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .ai-empty-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .ai-empty-sub {
    color: #94a3b8 !important;
}

/* ── Filters & Selects in Dashboard / Reports ────────────────────────────── */
html[data-theme="dark"] .branch-filters h4,
html[data-theme="dark"] .outlet-filters h4 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .branch-filters select,
html[data-theme="dark"] .outlet-filters select,
html[data-theme="dark"] .filter-containers select,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .filter-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .filter-btn:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .filter-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

html[data-theme="dark"] .filter-containers {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .filter-containers label {
    color: #cbd5e1 !important;
}

/* ── Tables & Reports (Branches Order, Domino's, Summaries) ───────────────── */
html[data-theme="dark"] .View-Branch-div {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .View-Branch-Table th {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .View-Branch-Table td {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .View-Branch-Table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .View-Branch-Table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .View-Branch-Table tr:hover td {
    background-color: #1a2d4c !important;
    color: #ffffff !important;
}

/* ── Disconnected / Down Branch Row in Dark Mode ── */
html[data-theme="dark"] .View-Branch-Table tr.branch-down,
html[data-theme="dark"] .View-Branch-Table .branch-down,
html[data-theme="dark"] .branch-down {
    background-color: rgba(239, 68, 68, 0.14) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.28) !important;
}

html[data-theme="dark"] .View-Branch-Table tr.branch-down td,
html[data-theme="dark"] .View-Branch-Table .branch-down td,
html[data-theme="dark"] .branch-down td {
    color: #fca5a5 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .View-Branch-Table tr.branch-down:hover td {
    background-color: rgba(239, 68, 68, 0.24) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .branch-down .outline-btn {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .branch-down .outline-btn:hover {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .live-preview-dropdown-btn {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .live-preview-dropdown-btn:hover {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .branch-down .live-preview-dropdown-btn {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .branch-down .live-preview-dropdown-btn:hover {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .live-preview-dropdown-menu {
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .live-preview-dropdown-item {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .live-preview-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .outline-btn {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .outline-btn:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

html[data-theme="dark"] .search-container {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .search-container input {
    color: #f8fafc !important;
}

html[data-theme="dark"] .search-container input::placeholder {
    color: #64748b !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .pagination a {
    background-color: #131d31 !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .pagination a:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

html[data-theme="dark"] .pagination a.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* ── KPI Toggles in Branch Pages ─────────────────────────────────────────── */
html[data-theme="dark"] .kpi-toggles {
    border-color: rgba(56, 189, 248, 0.4) !important;
}

html[data-theme="dark"] .kpi-toggles button {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .kpi-toggles button:hover {
    background: rgba(56, 189, 248, 0.15) !important;
}

html[data-theme="dark"] .kpi-toggles button.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* ── Live Violations & Configuration Cards ───────────────────────────────── */
html[data-theme="dark"] .live-header-card,
html[data-theme="dark"] .schedule-header-box,
html[data-theme="dark"] .config-card,
html[data-theme="dark"] .roi-card,
html[data-theme="dark"] .opening-closing-card,
html[data-theme="dark"] .branch_product,
html[data-theme="dark"] .violation_card,
html[data-theme="dark"] .avg-table,
html[data-theme="dark"] .table-card {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .live-title-group h1,
html[data-theme="dark"] .schedule-header-box h2,
html[data-theme="dark"] .config-card-title,
html[data-theme="dark"] .roi-card-title,
html[data-theme="dark"] .avg-table-heading,
html[data-theme="dark"] .table-heading {
    color: #f8fafc !important;
}

html[data-theme="dark"] .live-title-group p,
html[data-theme="dark"] .schedule-header-box p {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .channel-tab-pill {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .channel-tab-pill.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

html[data-theme="dark"] .scope-alert-banner {
    background: rgba(245, 158, 11, 0.12) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fcd34d !important;
}

/* ── User Management Page ───────────────────────────────────────────────── */
html[data-theme="dark"] .user-kpi-card {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .user-kpi-card:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-2px);
}

html[data-theme="dark"] .kpi-title {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .kpi-number {
    color: #f8fafc !important;
}

html[data-theme="dark"] .users-toolbar,
html[data-theme="dark"] .users-table-container {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .search-box {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .search-box input {
    background: transparent !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .search-box input::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] .users-table th {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .users-table td {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .users-table tr:hover td {
    background-color: rgba(56, 189, 248, 0.08) !important;
}

/* ── Notifications Page & Toasts ────────────────────────────────────────── */
html[data-theme="dark"] .notif-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .notif-select {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .notif-item {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .notif-item.unread {
    background: rgba(2, 132, 199, 0.12) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

html[data-theme="dark"] .notif-item-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .notif-item-body {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .notif-toast {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .notif-toast-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .notif-toast-body {
    color: #cbd5e1 !important;
}

/* ── Modals & Popups ────────────────────────────────────────────────────── */
html[data-theme="dark"] .create-user-modal-box,
html[data-theme="dark"] .popup-box,
html[data-theme="dark"] .Select-popup-box {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .popup-box h1 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .modal-subtitle,
html[data-theme="dark"] .popup-box label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .modal-body input,
html[data-theme="dark"] .modal-body select,
html[data-theme="dark"] .popup-box input[type="text"],
html[data-theme="dark"] .popup-box input[type="number"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .close-icon {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .close-icon:hover {
    color: #ffffff !important;
}

/* ── Auth / Login Page Overrides ────────────────────────────────────────── */
html[data-theme="dark"] .login-inputs input {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .login-inputs input::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] body.login-body {
    background: radial-gradient(circle at top left, #050b14, #0b1324, #0f1d38, #132448) !important;
}

/* ── Violation Reports Light Mode & Dark Mode System ─────────────────────── */
.outlet-date-display,
.outlet-date-info {
    color: #0f172a;
    padding-left: 15px;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

html[data-theme="dark"] .outlet-date-display,
html[data-theme="dark"] .outlet-date-info {
    color: #f8fafc !important;
}

/* ── Universal Date Picker Indicator & Calendar Icon System ───────────── */
input[type="date"] {
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* Default / Base Date Filter styling on Right Bar (Light Mode on blue bar) */
.Date-filters,
.outlet-filters,
.branch-filters,
.search-filters {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.Date-filters h4,
.outlet-filters h4,
.branch-filters h4,
.search-filters h4 {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

.Date-filters label,
.date-filter-field-label {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.Date-filters input,
.Date-filters-selectors input,
.right-bar input[type="date"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color-scheme: light !important;
    height: 40px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.Date-filters input:focus,
.Date-filters-selectors input:focus,
.right-bar input[type="date"]:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}

.Date-filters input::-webkit-calendar-picker-indicator,
.Date-filters-selectors input::-webkit-calendar-picker-indicator,
.right-bar input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    opacity: 0.75 !important;
    cursor: pointer !important;
}

.Date-filters input::-webkit-calendar-picker-indicator:hover,
.Date-filters-selectors input::-webkit-calendar-picker-indicator:hover,
.right-bar input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

#applyCustomBtn,
.Date-filters-selectors button {
    background: #ffffff !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#applyCustomBtn:hover,
.Date-filters-selectors button:hover {
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px);
}

/* ── Explicit LIGHT MODE Overrides ────────────────────────────────────── */
html[data-theme="light"] .Date-filters,
html[data-theme="light"] .outlet-filters,
html[data-theme="light"] .branch-filters,
html[data-theme="light"] .search-filters {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="light"] .Date-filters input,
html[data-theme="light"] .Date-filters-selectors input,
html[data-theme="light"] .right-bar input[type="date"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] .oc-date-input,
html[data-theme="light"] .filter-date-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    color-scheme: light !important;
}

html[data-theme="light"] .Date-filters input::-webkit-calendar-picker-indicator,
html[data-theme="light"] .Date-filters-selectors input::-webkit-calendar-picker-indicator,
html[data-theme="light"] .right-bar input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .oc-date-input::-webkit-calendar-picker-indicator,
html[data-theme="light"] .filter-date-input::-webkit-calendar-picker-indicator {
    -webkit-filter: brightness(0) !important;
    filter: brightness(0) !important;
    opacity: 0.75 !important;
    display: inline-block !important;
    cursor: pointer !important;
}

html[data-theme="light"] #applyCustomBtn,
html[data-theme="light"] .Date-filters-selectors button {
    background: #ffffff !important;
    color: #0284c7 !important;
}

/* ── Explicit DARK MODE Overrides ─────────────────────────────────────── */
html[data-theme="dark"] .Date-filters,
html[data-theme="dark"] .outlet-filters,
html[data-theme="dark"] .branch-filters,
html[data-theme="dark"] .search-filters {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .Date-filters h4,
html[data-theme="dark"] .outlet-filters h4,
html[data-theme="dark"] .branch-filters h4,
html[data-theme="dark"] .search-filters h4 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .Date-filters label,
html[data-theme="dark"] .date-filter-field-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .Date-filters input,
html[data-theme="dark"] .Date-filters-selectors input,
html[data-theme="dark"] .right-bar input[type="date"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] .oc-date-input,
html[data-theme="dark"] .filter-date-input {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color-scheme: dark !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .Date-filters input:focus,
html[data-theme="dark"] .Date-filters-selectors input:focus,
html[data-theme="dark"] .right-bar input[type="date"]:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .Date-filters input::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .Date-filters-selectors input::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .right-bar input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .oc-date-input::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .filter-date-input::-webkit-calendar-picker-indicator {
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.95 !important;
    display: inline-block !important;
    cursor: pointer !important;
}

html[data-theme="dark"] #applyCustomBtn,
html[data-theme="dark"] .Date-filters-selectors button {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35) !important;
}

/* Light Mode Overrides for Domino's Violation Category Tables */
html[data-theme="light"] .category-breadcrumbs {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .category-breadcrumbs a {
    color: #0284c7 !important;
}

html[data-theme="light"] .category-breadcrumbs .crumb-current {
    color: #0f172a !important;
}

html[data-theme="light"] .category-nav-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .category-hero-card.theme-chiller {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 50%, #ffffff 100%) !important;
    border-color: #bae6fd !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08) !important;
}

html[data-theme="light"] .category-hero-card.theme-apron {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #ffffff 100%) !important;
    border-color: #fde68a !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.08) !important;
}

html[data-theme="light"] .hero-titles h2 {
    color: #0f172a !important;
}

html[data-theme="light"] .hero-titles p {
    color: #475569 !important;
}

html[data-theme="light"] .hero-avatar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .meta-chip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .date-filter-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .date-filter-title {
    color: #1e293b !important;
}

html[data-theme="light"] .date-filter-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] .date-filter-pill:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .date-group-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .date-group-header {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .date-group-title {
    color: #0f172a !important;
}

html[data-theme="light"] .date-group-count {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] .category-data-table th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

html[data-theme="light"] .category-data-table td {
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .category-data-table tbody tr:nth-child(even) {
    background: #fafbfc !important;
}

html[data-theme="light"] .category-data-table tbody tr:hover {
    background: #f1f5f9 !important;
}

html[data-theme="light"] .empty-state-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .empty-state-title {
    color: #0f172a !important;
}

html[data-theme="light"] .empty-state-desc {
    color: #64748b !important;
}

html[data-theme="light"] .empty-tag {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] .cat-summary-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] .cat-summary-title {
    color: #0f172a !important;
}

html[data-theme="light"] .cat-val-title {
    color: #0f172a !important;
}

/* ── Light Mode & Dark Mode: Branch Opening & Closing Report ── */
html[data-theme="light"] .oc-categories-toolbar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .oc-toolbar-badge {
    color: #475569 !important;
}
html[data-theme="light"] .oc-toolbar-badge span {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
html[data-theme="light"] .oc-toggle-all-btn {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .oc-toggle-all-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .oc-date-category {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .oc-date-category:hover {
    border-color: #93c5fd !important;
}
html[data-theme="light"] .oc-date-category.is-open {
    border-color: #bfdbfe !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .oc-date-header {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .oc-date-header:hover {
    background: #f1f5f9 !important;
}
html[data-theme="light"] .oc-calendar-icon {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
html[data-theme="light"] .oc-date-text {
    color: #0f172a !important;
}
html[data-theme="light"] .oc-chevron {
    color: #64748b !important;
}
html[data-theme="light"] .oc-date-category.is-open .oc-chevron {
    color: #0284c7 !important;
}
html[data-theme="light"] .oc-chip-open {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}
html[data-theme="light"] .oc-chip-close {
    background: #faf5ff !important;
    color: #9333ea !important;
    border: 1px solid #e9d5ff !important;
}
html[data-theme="light"] .oc-chip-na {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .oc-date-body {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .oc-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] .oc-card-header {
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .oc-opening-card .oc-card-title {
    color: #0284c7 !important;
}
html[data-theme="light"] .oc-closing-card .oc-card-title {
    color: #7e22ce !important;
}
html[data-theme="light"] .oc-info-row {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .oc-info-label {
    color: #64748b !important;
}
html[data-theme="light"] .oc-info-val {
    color: #0f172a !important;
}
html[data-theme="light"] .oc-opening-card .oc-time-highlight {
    color: #0284c7 !important;
}
html[data-theme="light"] .oc-closing-card .oc-time-highlight {
    color: #7e22ce !important;
}
html[data-theme="light"] .oc-image-label {
    color: #475569 !important;
}
html[data-theme="light"] .oc-image-wrapper {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .oc-image-missing {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    color: #64748b !important;
}
html[data-theme="light"] .oc-empty-state {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .oc-empty-state-title {
    color: #0f172a !important;
}
html[data-theme="light"] .oc-lightbox-content {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="light"] .oc-lightbox-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .oc-lightbox-title {
    color: #0f172a !important;
}
html[data-theme="light"] .oc-lightbox-close {
    background: #e2e8f0 !important;
    color: #475569 !important;
}
html[data-theme="light"] .oc-lightbox-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .oc-opening-card .status-badge {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
html[data-theme="light"] .oc-closing-card .status-badge {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border: 1px solid #e9d5ff !important;
}

/* ==========================================================================
   EMAIL NOTIFICATION & ALERT SETTINGS (Dark Mode Overrides)
   ========================================================================== */
html[data-theme="dark"] .alert-email-header-box {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .alert-email-header-box h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .alert-email-header-box p {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .branch-selector-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .branch-selector-dropdown {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .branch-selector-dropdown option {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .branch-scope-badge {
    background: rgba(29, 191, 255, 0.14) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

/* Outbound Sender Status Bar */
html[data-theme="dark"] .sender-status-banner {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .sender-dispatch-info {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .sender-dispatch-email {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .sender-status-pill.configured {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

html[data-theme="dark"] .sender-status-pill.unconfigured {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Sender Credentials Collapsible Box */
html[data-theme="dark"] .collapsible-box {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .collapsible-header {
    background: #17233d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .collapsible-header:hover {
    background: #1c2b4a !important;
}

html[data-theme="dark"] .collapsible-content {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sender-card-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .sender-card-hint {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .sender-form-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Card Panels */
html[data-theme="dark"] .card-panel {
    background: #131d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .card-panel-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .card-panel-subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .badge-total-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Form Fields & Inputs */
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .notification-mode-heading {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .form-input {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .form-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .form-input::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] .btn-toggle-pwd {
    color: #94a3b8 !important;
}

/* Notification Mode Cards */
html[data-theme="dark"] .mode-card-label {
    background: #0f172a !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .mode-card-label:hover {
    background: #17233d !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .mode-card-label.selected {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.16) !important;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.25) !important;
}

html[data-theme="dark"] .mode-card-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .mode-card-desc {
    color: #94a3b8 !important;
}

/* Custom Categories Box */
html[data-theme="dark"] .custom-categories-box {
    background: #0f172a !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .custom-cat-title {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .category-checkbox-item {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .category-checkbox-item strong {
    color: #f1f5f9 !important;
}

/* Buttons */
html[data-theme="dark"] .btn-secondary {
    background: #17233d !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    background: #1e2e4e !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-action-icon {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-action-icon:hover {
    background: #17233d !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-action-delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Recipients Table */
html[data-theme="dark"] .recipients-table th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .recipients-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .recipients-table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .recipient-name {
    color: #f8fafc !important;
}

html[data-theme="dark"] .recipient-email {
    color: #94a3b8 !important;
}

/* Badges & Switch Toggle */
html[data-theme="dark"] .badge-all {
    background: rgba(30, 64, 175, 0.3) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

html[data-theme="dark"] .badge-chiller {
    background: rgba(3, 105, 161, 0.3) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
}

html[data-theme="dark"] .badge-custom {
    background: rgba(180, 83, 9, 0.3) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html[data-theme="dark"] .slider-toggle {
    background-color: #334155 !important;
}

html[data-theme="dark"] input:checked + .slider-toggle {
    background-color: #10b981 !important;
}

/* Empty State, Quick Tip & Info Callout */
html[data-theme="dark"] .no-recipients-box {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .no-recipients-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .email-quick-tip {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .email-quick-tip strong {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .info-callout {
    background: rgba(2, 132, 199, 0.15) !important;
    border-left-color: #38bdf8 !important;
    color: #bae6fd !important;
}