/* ============================================================
   GeekX Fiber — Dark Mode Theme
   Applied via html[data-theme="dark"] so it overrides :root
   ============================================================ */

html[data-theme="dark"] {
    /* Page / app background — covers all variable names used across pages */
    --background-light: #0f1117;
    --bg-light:         #0f1117;
    --bg:               #0f1117;
    --bg-page:          #0f1117;
    --bg-color:         #0f1117;
    --gray-50:          #141728;
    --gray-100:         #1a1d2e;
    --gray-200:         #252a42;
    --gray-300:         #2d3149;
    --gray-400:         #3d4460;
    --gray-500:         #64748b;
    --gray-600:         #94a3b8;
    --gray-700:         #cbd5e1;
    --gray-800:         #e2e8f0;
    --gray-900:         #f1f5f9;

    /* Card / surface — covers all variable names used across pages */
    --card-bg:          #1a1d2e;
    --card:             #1a1d2e;
    --surface:          #1a1d2e;
    --surface-2:        #1e2338;
    --white:            #1a1d2e;

    /* Borders */
    --border-color:     #2d3149;
    --border:           #2d3149;

    /* Text */
    --text-dark:        #e2e8f0;
    --text:             #e2e8f0;
    --text-light:       #94a3b8;
    --text-lighter:     #64748b;
    --text-muted:       #64748b;

    /* Primary (indigo) */
    --primary-color:    #818cf8;
    --primary:          #818cf8;
    --primary-light:    #1e1b4b;

    /* Secondary / success */
    --secondary-color:  #34d399;
    --secondary-light:  #064e3b;
    --success-bg:       #064e3b;
    --success-text:     #6ee7b7;

    /* Danger */
    --danger-color:     #f87171;
    --danger-light:     #450a0a;
    --danger-bg:        #450a0a;
    --danger-text:      #fca5a5;

    /* Warning */
    --warning-color:    #fbbf24;
    --warning-light:    #451a03;

    /* Info */
    --info-color:       #60a5fa;
    --info-light:       #1e3a5f;
    --info-bg:          #1e3a5f;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.5);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.6);
}

/* ── Body ─────────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background-color: #0f1117;
    color: #e2e8f0;
}

/* ── Inputs / Selects / Textareas ─────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #1a1d2e !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #818cf8 !important;
    outline-color: #818cf8 !important;
}

/* ── Tables ───────────────────────────────────────────────── */
html[data-theme="dark"] th {
    background-color: #141728 !important;
    color: #94a3b8 !important;
    border-color: #2d3149 !important;
}
html[data-theme="dark"] td {
    border-color: #2d3149 !important;
}
html[data-theme="dark"] tr:hover td {
    background-color: #1e2338 !important;
}
html[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: #161929 !important;
}

/* ── Modals ───────────────────────────────────────────────── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] [class*="modal-"] > div,
html[data-theme="dark"] .modal > div {
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: #2d3149 !important;
}
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0,0,0,0.7) !important;
}

/* ── Cards / Panels ───────────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer {
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
}

/* ── Buttons (neutral/secondary) ─────────────────────────── */
html[data-theme="dark"] .btn:not(.btn-primary):not([style*="background"]) {
    background-color: #1e2338 !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}
html[data-theme="dark"] .btn:not(.btn-primary):not([style*="background"]):hover {
    background-color: #252a42 !important;
}

/* ── Dropdowns / Selects ──────────────────────────────────── */
html[data-theme="dark"] option {
    background-color: #1a1d2e;
    color: #e2e8f0;
}

/* ── Sidebar (dashboard.html) ─────────────────────────────── */
html[data-theme="dark"] .sidebar {
    background: #13162b !important;
    border-right-color: #2d3149 !important;
}
html[data-theme="dark"] #navButtons button {
    color: #94a3b8 !important;
}
html[data-theme="dark"] #navButtons button:hover {
    background: #1e2338 !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] #navButtons button.active {
    background: #1e1b4b !important;
    color: #818cf8 !important;
}
html[data-theme="dark"] .nav-divider {
    border-color: #2d3149 !important;
}
html[data-theme="dark"] .sidebar-header {
    border-bottom-color: #2d3149 !important;
}
html[data-theme="dark"] .sidebar-footer {
    border-top-color: #2d3149 !important;
}
html[data-theme="dark"] .topbar {
    background: #1a1d2e !important;
    border-bottom-color: #2d3149 !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .branch-switcher select {
    background-color: #1a1d2e !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}

/* ── Badges / Tags ────────────────────────────────────────── */
html[data-theme="dark"] .badge,
html[data-theme="dark"] [class*="status-"] {
    border-color: #2d3149;
}

/* ── Scrollbar ────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f1117;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2d3149;
    border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d4460;
}

/* ── Filter / Tab bars ────────────────────────────────────── */
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .filter-group,
html[data-theme="dark"] .page-tabs {
    border-color: #2d3149 !important;
}
html[data-theme="dark"] .filter-group button:not(.active) {
    background-color: #1a1d2e !important;
    color: #94a3b8 !important;
    border-color: #2d3149 !important;
}

/* ── Code / Pre ───────────────────────────────────────────── */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: #141728 !important;
    color: #e2e8f0 !important;
}

/* ── KPI / Stat cards ─────────────────────────────────────── */
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .stat-card {
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
}

/* ── Detail panel / right panel ──────────────────────────── */
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .right-panel,
html[data-theme="dark"] .client-detail {
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
}

/* ── Logo visibility on dark sidebar ─────────────────────── */
html[data-theme="dark"] #sidebarLogo {
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    padding: 3px;
}

/* ── Hardcoded white/near-white backgrounds (inventory, olt, etc.) ── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-panel,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .list-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .box,
html[data-theme="dark"] .config-content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .inner-card,
html[data-theme="dark"] .schedule-card,
html[data-theme="dark"] .receipt-card,
html[data-theme="dark"] .ledger-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .voucher-card,
html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .header-section,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .action-bar,
html[data-theme="dark"] .filter-tab,
html[data-theme="dark"] .search-wrapper,
html[data-theme="dark"] .threshold-box,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .float-card,
html[data-theme="dark"] .leaderboard-card,
html[data-theme="dark"] .survey-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .reward-card,
html[data-theme="dark"] .points-card,
html[data-theme="dark"] .voucher-row,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .placeholder-guide {
    background: #1a1d2e !important;
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
    color: #e2e8f0;
}

/* ── Outline/icon buttons with hardcoded white bg ─────────── */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white {
    background: #1e2338 !important;
    background-color: #1e2338 !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}

/* ── White modal content ──────────────────────────────────── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .custom-modal,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .dialog-content,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .popup {
    background: #1a1d2e !important;
    background-color: #1a1d2e !important;
    border-color: #2d3149 !important;
    color: #e2e8f0 !important;
}

/* ── White section / page headers inside iframes ─────────── */
html[data-theme="dark"] header:not(.topbar) {
    background: #1a1d2e !important;
    border-color: #2d3149 !important;
    color: #e2e8f0 !important;
}

/* ── Table-related whites ─────────────────────────────────── */
html[data-theme="dark"] table,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .table-wrapper {
    background: #1a1d2e !important;
}

/* ── White inline-style dropdown menus ───────────────────── */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8faff"],
html[data-theme="dark"] [style*="background: #f8faff"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f9f9f9"],
html[data-theme="dark"] [style*="background: #f9f9f9"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background: #f3f4f6"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f0f4f8"],
html[data-theme="dark"] [style*="background: #f0f4f8"],
html[data-theme="dark"] [style*="background-color:#f8fafc"],
html[data-theme="dark"] [style*="background-color:#f1f5f9"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f9fafb"],
html[data-theme="dark"] [style*="background-color:#f3f4f6"] {
    background: #1a1d2e !important;
    background-color: #1a1d2e !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}

/* ── Green / tinted info boxes (templates.html marketing tips, etc.) ── */
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#d1fae5"],
html[data-theme="dark"] [style*="background: #d1fae5"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background: #ecfdf5"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4"],
html[data-theme="dark"] [style*="background:#e8f5e9"],
html[data-theme="dark"] [style*="background: #e8f5e9"],
html[data-theme="dark"] [style*="background:#fef9c3"],
html[data-theme="dark"] [style*="background: #fef9c3"],
html[data-theme="dark"] [style*="background:#fefce8"],
html[data-theme="dark"] [style*="background: #fefce8"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background: #e0f2fe"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background:#ede9fe"],
html[data-theme="dark"] [style*="background: #ede9fe"],
html[data-theme="dark"] [style*="background:#fce7f3"],
html[data-theme="dark"] [style*="background: #fce7f3"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"] {
    background: #1e2338 !important;
    background-color: #1e2338 !important;
    color: #e2e8f0 !important;
    border-color: #2d3149 !important;
}

/* ── Status / alert class overrides ─────────────────────────── */
html[data-theme="dark"] .status-message.success,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert.alert-success {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #065f46 !important;
}
html[data-theme="dark"] .status-message.error,
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert.alert-danger {
    background: #450a0a !important;
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}
html[data-theme="dark"] .status-message.warning,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert.alert-warning {
    background: #451a03 !important;
    color: #fde68a !important;
    border-color: #78350f !important;
}
html[data-theme="dark"] .status-message.info,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert.alert-info {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #1e40af !important;
}

/* ── Smooth transition on toggle ─────────────────────────── */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}