/* ==========================================
   Owner Dashboard – Theme System (MD3 Inspired)
   ==========================================
   Uses CSS custom properties + data-theme attribute.
   Dark is the default. Same MD3 colour system as super-admin
   but with --od- prefix.
   ========================================== */

/* ---- Shared Design Tokens ---- */
:root {
    --od-font-en: 'Inter', sans-serif;
    --od-font-ar: 'Cairo', sans-serif;

    /* Spacing – 4 px baseline */
    --od-space-xs: 4px;
    --od-space-sm: 8px;
    --od-space-md: 16px;
    --od-space-lg: 24px;
    --od-space-xl: 32px;

    /* Shape */
    --od-radius-sm: 6px;
    --od-radius-md: 8px;
    --od-radius-lg: 12px;
    --od-radius-pill: 100px;
}

/* ---- Dark Theme (Default) ---- */
:root,
[data-theme="dark"] {
    --od-primary: #091426;
    --od-primary-deep: #060e1a;
    --od-accent: #34d399;
    --od-accent-hover: #2bb885;
    --od-accent-glow: rgba(52, 211, 153, 0.25);
    --od-accent-15: rgba(52, 211, 153, 0.15);
    --od-accent-20: rgba(52, 211, 153, 0.20);

    /* Surface hierarchy */
    --od-surface-0: #091426;
    --od-surface-1: #0d1b32;
    --od-surface-2: #10203b;
    --od-surface-3: #142745;

    --od-body-bg: linear-gradient(135deg, #060e1a 0%, #091426 40%, #0f2a4a 100%);
    --od-body-bg-flat: #091426;

    --od-card-bg: var(--od-surface-1);
    --od-card-border: rgba(255, 255, 255, 0.08);
    --od-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);

    --od-nav-bg: var(--od-surface-1);
    --od-nav-border: rgba(255, 255, 255, 0.06);
    --od-nav-link-hover: rgba(255, 255, 255, 0.10);
    --od-nav-link-active: rgba(52, 211, 153, 0.15);

    --od-text: #e8edf4;
    --od-text-secondary: rgba(232, 237, 244, 0.65);
    --od-text-muted: rgba(232, 237, 244, 0.45);
    --od-heading: #f0f4fa;

    --od-input-bg: var(--od-surface-2);
    --od-input-border: rgba(255, 255, 255, 0.10);
    --od-input-text: #e8edf4;
    --od-input-placeholder: rgba(232, 237, 244, 0.35);

    --od-table-head-bg: var(--od-surface-2);
    --od-table-border: rgba(255, 255, 255, 0.06);
    --od-table-hover: rgba(52, 211, 153, 0.06);
    --od-table-row-border: rgba(255, 255, 255, 0.05);

    --od-divider: rgba(255, 255, 255, 0.08);
    --od-bg-subtle: rgba(255, 255, 255, 0.02);

    --od-modal-bg: var(--od-surface-2);
    --od-modal-text: #e8edf4;
    --od-modal-label: rgba(232, 237, 244, 0.55);

    --od-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
    --od-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);

    --od-footer-text: rgba(232, 237, 244, 0.40);
    --od-footer-brand: rgba(232, 237, 244, 0.55);

    /* Login page */
    --od-login-body-bg: linear-gradient(135deg, #060e1a 0%, #091426 100%);
    --od-login-card-bg: #ffffff;
    --od-login-card-text: #374151;
    --od-login-header-bg: linear-gradient(135deg, #091426 0%, #0f2a4a 100%);
    --od-login-header-text: #ffffff;
    --od-login-input-bg: #ffffff;
    --od-login-input-border: #e5e7eb;
    --od-login-input-text: #1f2937;

    /* Badge/Status colours */
    --od-badge-green-bg: rgba(52, 211, 153, 0.15);
    --od-badge-green-text: #34d399;
    --od-badge-yellow-bg: rgba(251, 191, 36, 0.15);
    --od-badge-yellow-text: #fbbf24;
    --od-badge-red-bg: rgba(248, 113, 113, 0.15);
    --od-badge-red-text: #f87171;

    color-scheme: dark;
}

/* ---- Light Theme ---- */
[data-theme="light"] {
    --od-primary: #f8f9fc;
    --od-primary-deep: #ffffff;
    --od-accent: #006c49;
    --od-accent-hover: #005a3d;
    --od-accent-glow: rgba(0, 108, 73, 0.18);
    --od-accent-15: rgba(0, 108, 73, 0.11);
    --od-accent-20: rgba(0, 108, 73, 0.15);

    /* Surface hierarchy */
    --od-surface-0: #fbf8fa;
    --od-surface-1: #ffffff;
    --od-surface-2: #f4f1f4;
    --od-surface-3: #edeaed;

    --od-body-bg: #f4f1f4;
    --od-body-bg-flat: #f4f1f4;

    --od-card-bg: #ffffff;
    --od-card-border: #eae7e9;
    --od-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    --od-nav-bg: #ffffff;
    --od-nav-border: #eae7e9;
    --od-nav-link-hover: rgba(0, 0, 0, 0.04);
    --od-nav-link-active: rgba(0, 108, 73, 0.10);

    --od-text: #1a1c1e;
    --od-text-secondary: rgba(26, 28, 30, 0.60);
    --od-text-muted: rgba(26, 28, 30, 0.40);
    --od-heading: #111315;

    --od-input-bg: var(--od-surface-2);
    --od-input-border: #ddd9dc;
    --od-input-text: #1a1c1e;
    --od-input-placeholder: rgba(26, 28, 30, 0.35);

    --od-table-head-bg: var(--od-surface-2);
    --od-table-border: #eae7e9;
    --od-table-hover: rgba(0, 108, 73, 0.05);
    --od-table-row-border: #eae7e9;

    --od-divider: #eae7e9;
    --od-bg-subtle: rgba(0, 0, 0, 0.02);

    --od-modal-bg: #ffffff;
    --od-modal-text: #1a1c1e;
    --od-modal-label: rgba(26, 28, 30, 0.55);

    --od-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --od-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    --od-footer-text: rgba(26, 28, 30, 0.40);
    --od-footer-brand: rgba(26, 28, 30, 0.55);

    /* Login page */
    --od-login-body-bg: #f4f1f4;
    --od-login-card-bg: #ffffff;
    --od-login-card-text: #374151;
    --od-login-header-bg: linear-gradient(135deg, #091426 0%, #0f2a4a 100%);
    --od-login-header-text: #ffffff;
    --od-login-input-bg: #ffffff;
    --od-login-input-border: #ddd9dc;
    --od-login-input-text: #1f2937;

    /* Badge/Status colours */
    --od-badge-green-bg: rgba(5, 150, 105, 0.10);
    --od-badge-green-text: #059669;
    --od-badge-yellow-bg: rgba(217, 119, 6, 0.10);
    --od-badge-yellow-text: #d97706;
    --od-badge-red-bg: rgba(220, 38, 38, 0.08);
    --od-badge-red-text: #dc2626;

    color-scheme: light;
}


/* ==========================================
   Global Overrides — applied via data-theme
   ==========================================
   The owner dashboard uses Tailwind utility classes.
   In DARK mode we override them.
   In LIGHT mode Tailwind defaults are close but we
   still override body/nav/cards for MD3 consistency.
   ========================================== */

/* --- Body --- */
body {
    background: var(--od-body-bg) !important;
    color: var(--od-text);
    min-height: 100vh;
}

/* --- Navbar --- */
nav.shadow-xl,
nav.od-nav {
    background: var(--od-nav-bg) !important;
    border-bottom-color: var(--od-nav-border) !important;
    backdrop-filter: blur(12px);
}

/* Nav text in light mode */
[data-theme="light"] nav .text-white {
    color: var(--od-text) !important;
}
[data-theme="light"] nav .hover\:bg-white\/20:hover,
[data-theme="light"] nav .hover\:bg-white\/30:hover {
    background: var(--od-nav-link-hover) !important;
}
[data-theme="light"] nav .bg-white\/20 {
    background: var(--od-nav-link-active) !important;
}

/* --- Dark-mode Tailwind overrides --- */
[data-theme="dark"] .bg-white {
    background: var(--od-card-bg) !important;
    border: 1px solid var(--od-card-border) !important;
}
[data-theme="dark"] .bg-gray-50 {
    background: var(--od-bg-subtle) !important;
}
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--od-text) !important;
}
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: var(--od-text-secondary) !important;
}
[data-theme="dark"] .text-gray-400 {
    color: var(--od-text-muted) !important;
}
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--od-divider) !important;
}
[data-theme="dark"] .divide-gray-200 > * + * {
    border-color: var(--od-divider) !important;
}
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-md {
    box-shadow: var(--od-card-shadow) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--od-input-bg) !important;
    border-color: var(--od-input-border) !important;
    color: var(--od-input-text) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--od-input-placeholder) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .bg-green-100 {
    background: var(--od-badge-green-bg) !important;
}
[data-theme="dark"] .text-green-800 {
    color: var(--od-badge-green-text) !important;
}
[data-theme="dark"] .bg-yellow-100 {
    background: var(--od-badge-yellow-bg) !important;
}
[data-theme="dark"] .text-yellow-800 {
    color: var(--od-badge-yellow-text) !important;
}
[data-theme="dark"] .bg-red-100 {
    background: var(--od-badge-red-bg) !important;
}
[data-theme="dark"] .text-red-800 {
    color: var(--od-badge-red-text) !important;
}

/* --- .od-card (both themes) --- */
.od-card {
    background: var(--od-card-bg) !important;
    border: 1px solid var(--od-card-border) !important;
    box-shadow: var(--od-card-shadow) !important;
}

/* --- Light-mode text overrides for Tailwind dark text classes --- */
[data-theme="light"] .text-white {
    color: var(--od-heading) !important;
}
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-200 {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] .text-slate-500 {
    color: var(--od-text-muted) !important;
}
/* Keep coloured text as-is */
[data-theme="light"] .text-orange-400 { color: #ea580c !important; }
[data-theme="light"] .text-amber-400 { color: #d97706 !important; }

/* Light table row borders */
[data-theme="light"] .divide-y > * + * {
    border-color: var(--od-table-border) !important;
}

/* Logout / action buttons in light mode */
[data-theme="light"] .bg-white\/20 {
    background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .hover\:bg-white\/30:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Loading overlay */
[data-theme="light"] .loading-overlay {
    background: #f4f1f4 !important;
}
[data-theme="light"] .loading-overlay .text-white {
    color: #1a1c1e !important;
}
[data-theme="light"] .loading-overlay .text-white\/70 {
    color: rgba(26, 28, 30, 0.55) !important;
}
[data-theme="light"] .loading-overlay .spinner {
    border-color: rgba(0, 0, 0, 0.12);
    border-top-color: #006c49;
}

/* Footer */
footer {
    color: var(--od-footer-text) !important;
}
footer strong {
    color: var(--od-footer-brand) !important;
}

/* --- Login Pages --- */
body.od-login {
    background: var(--od-login-body-bg) !important;
}

[data-theme="light"] .login-container,
[data-theme="light"] body.od-login .login-container {
    box-shadow: var(--od-shadow-hover);
}

/* ==========================================
   Theme Toggle Button
   ========================================== */

.theme-toggle {
    background: var(--od-input-bg);
    border: 1px solid var(--od-card-border);
    color: var(--od-text);
    width: 40px;
    height: 40px;
    border-radius: var(--od-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--od-accent-15);
    border-color: var(--od-accent);
    color: var(--od-accent);
    transform: translateY(-1px);
    box-shadow: var(--od-shadow-hover);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: show sun icon */
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Light mode: show moon icon */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==========================================
   Smooth Transitions
   ========================================== */

body,
nav,
.bg-white,
.bg-gray-50,
footer,
input, select, textarea,
.loading-overlay {
    transition: background-color 0.3s ease,
                background 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ==========================================
   Light Mode — Fixes for hardcoded dark values
   ========================================== */

/* Table headers — hardcoded near-white (#e2e8f0) invisible on light bg */
[data-theme="light"] thead th {
    color: var(--od-text-secondary) !important;
}

/* Delete member button — keep dark but match light-mode style */
[data-theme="light"] .delete-user-btn {
    background: #374151 !important;
}
[data-theme="light"] .delete-user-btn:hover {
    background: #1f2937 !important;
}

/* Clear filters button — darker in light mode */
[data-theme="light"] button.bg-gray-500 {
    background: #4b5563 !important;
}
[data-theme="light"] button.bg-gray-500:hover {
    background: #374151 !important;
}

/* Chatbot analytics — period selector buttons */
[data-theme="light"] .period-btn {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] .period-btn.active-period {
    background: var(--od-accent-15) !important;
    color: var(--od-accent) !important;
}

/* Chatbot analytics — muted labels too light in light mode */
[data-theme="light"] [style*="color:#94a3b8"] {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] [style*="color:#64748b"] {
    color: var(--od-text-secondary) !important;
}

/* Chatbot analytics — report date label background */
[data-theme="light"] #reportDateLabel {
    background: var(--od-surface-3) !important;
}

/* Chatbot analytics — KPI cards: increase background visibility */
[data-theme="light"] div[style*="rgba(14,165,233,0.08)"] {
    background: rgba(14,165,233,0.12) !important;
    border-color: rgba(14,165,233,0.4) !important;
}
[data-theme="light"] div[style*="rgba(34,197,94,0.08)"] {
    background: rgba(34,197,94,0.12) !important;
    border-color: rgba(34,197,94,0.4) !important;
}
[data-theme="light"] div[style*="rgba(46,216,163,0.08)"] {
    background: rgba(46,216,163,0.12) !important;
    border-color: rgba(46,216,163,0.4) !important;
}
[data-theme="light"] div[style*="rgba(245,158,11,0.08)"] {
    background: rgba(245,158,11,0.12) !important;
    border-color: rgba(245,158,11,0.4) !important;
}

/* Chatbot analytics — near-transparent cards (lead funnel, members) */
[data-theme="light"] div[style*="rgba(255,255,255,0.03)"] {
    background: var(--od-surface-2) !important;
    border-color: var(--od-card-border) !important;
}
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.06)"] {
    border-top-color: var(--od-divider) !important;
}

/* Chatbot analytics — refresh button */
[data-theme="light"] #refreshAllBtn {
    background: rgba(14,165,233,0.10) !important;
    border-color: rgba(14,165,233,0.35) !important;
}

/* Chatbot analytics — lead funnel bar track */
[data-theme="light"] div[style*="rgba(255,255,255,0.06)"] {
    background: rgba(0,0,0,0.08) !important;
}

/* Chatbot analytics — loading/error state cards */
[data-theme="light"] div[style*="rgba(46,216,163,0.05)"] {
    background: var(--od-surface-2) !important;
    border-color: var(--od-accent-20) !important;
}
[data-theme="light"] div[style*="rgba(239,68,68,0.08)"] {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(220,38,38,0.3) !important;
}

/* ==========================================
   Light Mode — Page-Specific Overrides
   ==========================================
   Fixes hardcoded dark colors in per-page <style> blocks.
   All overrides use [data-theme="light"] to match theme.js.
   ========================================== */

/* ── Global: body text & background ─────────────────────────────── */
[data-theme="light"] body {
    color: var(--od-text) !important;
}

/* ── Generic: dark-glass patterns (rgba white backgrounds) ────────
   Many pages use rgba(255,255,255,0.04-0.1) for cards/columns.
   In light mode these are nearly invisible on white backgrounds.
   We remap them to light surface colors.                           */
[data-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"] {
    background: var(--od-surface-2) !important;
}
[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"] {
    background: var(--od-surface-2) !important;
}
[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"] {
    background: var(--od-surface-3) !important;
}
[data-theme="light"] [style*="background: rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.08)"] {
    background: var(--od-surface-2) !important;
}
[data-theme="light"] [style*="background: rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.1)"] {
    background: var(--od-surface-3) !important;
}

/* Generic: white-on-dark borders → use theme divider */
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.12)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.12)"] {
    border-color: var(--od-divider) !important;
}
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.06)"] {
    border-bottom-color: var(--od-divider) !important;
}

/* Generic: muted dark text colors used site-wide */
[data-theme="light"] [style*="color:#9aa9bc"],
[data-theme="light"] [style*="color: #9aa9bc"] {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] [style*="color:#e6edf6"],
[data-theme="light"] [style*="color: #e6edf6"] {
    color: var(--od-text) !important;
}
[data-theme="light"] [style*="color:#cbd5e1"],
[data-theme="light"] [style*="color: #cbd5e1"] {
    color: var(--od-text-secondary) !important;
}

/* Generic: rgba(255,255,255,...) text → dark equivalents */
[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.30)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"] {
    color: var(--od-text-muted) !important;
}
[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.50)"] {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.60)"] {
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] [style*="color:rgba(255,255,255,0.8)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.8)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.80)"] {
    color: var(--od-text) !important;
}

/* Tailwind bg-white/5, bg-white/10 (subscription info cells) */
[data-theme="light"] .bg-white\/5  { background: var(--od-surface-2) !important; }
[data-theme="light"] .bg-white\/10 { background: var(--od-surface-3) !important; }
[data-theme="light"] .bg-white\/20 { background: rgba(0,0,0,0.06) !important; }

/* Tailwind text-white/xx */
[data-theme="light"] .text-white\/30 { color: var(--od-text-muted) !important; }
[data-theme="light"] .text-white\/50 { color: var(--od-text-secondary) !important; }
[data-theme="light"] .text-white\/60 { color: var(--od-text-secondary) !important; }
[data-theme="light"] .text-white\/80 { color: var(--od-text) !important; }

/* Tailwind border-white/10 */
[data-theme="light"] .border-white\/10 { border-color: var(--od-divider) !important; }

/* ── Pipeline page (.pl-*) ───────────────────────────────────────── */
[data-theme="light"] .pl-header .sub,
[data-theme="light"] .pl-col-value,
[data-theme="light"] .pl-card .meta,
[data-theme="light"] .pl-empty,
[data-theme="light"] .pl-loader {
    color: var(--od-text-secondary) !important;
}

[data-theme="light"] .pl-col {
    background: var(--od-surface-2) !important;
    border-color: var(--od-card-border) !important;
}

[data-theme="light"] .pl-col-header {
    border-bottom-color: var(--od-divider) !important;
}

[data-theme="light"] .pl-card {
    background: var(--od-card-bg) !important;
    border-color: var(--od-card-border) !important;
    color: var(--od-text) !important;
    box-shadow: var(--od-card-shadow) !important;
}

[data-theme="light"] .pl-card .name {
    color: var(--od-heading) !important;
}

[data-theme="light"] .pl-card select {
    background: var(--od-input-bg) !important;
    color: var(--od-input-text) !important;
    border-color: var(--od-input-border) !important;
}

/* ── Leads page (.ld-*, .form-row, .notes-timeline, .assignee-select) ── */
[data-theme="light"] .ld-header .sub,
[data-theme="light"] .ld-empty,
[data-theme="light"] .ld-loader {
    color: var(--od-text-secondary) !important;
}

[data-theme="light"] .ld-toolbar select,
[data-theme="light"] .ld-toolbar input {
    background: var(--od-input-bg) !important;
    border-color: var(--od-input-border) !important;
    color: var(--od-input-text) !important;
}

[data-theme="light"] .ld-table-wrap {
    background: var(--od-card-bg) !important;
    border-color: var(--od-card-border) !important;
}

[data-theme="light"] .ld-table th {
    background: var(--od-table-head-bg) !important;
    color: var(--od-text-secondary) !important;
}

[data-theme="light"] .ld-table th,
[data-theme="light"] .ld-table td {
    border-bottom-color: var(--od-table-row-border) !important;
    color: var(--od-text) !important;
}

[data-theme="light"] .ld-table tr:hover td {
    background: var(--od-table-hover) !important;
}

[data-theme="light"] .btn-secondary {
    background: var(--od-surface-3) !important;
    color: var(--od-text) !important;
    border-color: var(--od-divider) !important;
}
[data-theme="light"] .btn-secondary:hover {
    background: var(--od-surface-2) !important;
}

[data-theme="light"] .assignee-select {
    background: var(--od-input-bg) !important;
    color: var(--od-input-text) !important;
    border-color: var(--od-input-border) !important;
}

/* Leads Modal */
[data-theme="light"] .ld-modal {
    background: var(--od-modal-bg) !important;
    color: var(--od-modal-text) !important;
    border-color: var(--od-card-border) !important;
}

[data-theme="light"] .ld-modal-head,
[data-theme="light"] .ld-modal-foot {
    background: var(--od-modal-bg) !important;
    border-color: var(--od-divider) !important;
}

[data-theme="light"] .form-row label {
    color: var(--od-modal-label) !important;
}

[data-theme="light"] .form-row input,
[data-theme="light"] .form-row select,
[data-theme="light"] .form-row textarea {
    background: var(--od-input-bg) !important;
    color: var(--od-input-text) !important;
    border-color: var(--od-input-border) !important;
}

[data-theme="light"] .notes-timeline {
    background: var(--od-surface-2) !important;
    border-color: var(--od-divider) !important;
    color: var(--od-text-secondary) !important;
}

[data-theme="light"] .notes-timeline:empty::before {
    color: var(--od-text-muted) !important;
}

/* ── Subscription page (.glass-card, .promo-input, .progress-bar, .skeleton, .badge-active) ── */
[data-theme="light"] .glass-card {
    background: var(--od-card-bg) !important;
    border-color: var(--od-card-border) !important;
    box-shadow: var(--od-card-shadow) !important;
}

[data-theme="light"] .badge-active {
    background: rgba(5, 150, 105, 0.12) !important;
    color: #059669 !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
}

[data-theme="light"] .progress-bar {
    background: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .promo-input {
    background: var(--od-input-bg) !important;
    border-color: var(--od-input-border) !important;
    color: var(--od-input-text) !important;
}

[data-theme="light"] .promo-btn {
    background: var(--od-accent-15) !important;
    color: var(--od-accent) !important;
    border-color: var(--od-accent-20) !important;
}

/* Skeleton shimmer — light mode uses gray tones */
[data-theme="light"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.06) 25%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.06) 75%
    ) !important;
    background-size: 200% 100% !important;
}

/* ── Subscription / dynamically-rendered payment history rows ──────
   Uses inline style border-bottom with rgba(255,255,255,...).
   Handled by the generic border override above.                    */

/* ── Audit logs + other pages: generic dark card/container cleanup ─ */
[data-theme="light"] .od-surface-card,
[data-theme="light"] [class*="card"] {
    color: var(--od-text);
}

/* Inline color:#6b7a8c (empty state, pl-empty) */
[data-theme="light"] [style*="color:#6b7a8c"],
[data-theme="light"] [style*="color: #6b7a8c"] {
    color: var(--od-text-muted) !important;
}

/* Inline color:#6b7280 (payment status — pending) */
[data-theme="light"] [style*="color:#6b7280"],
[data-theme="light"] [style*="color: #6b7280"] {
    color: var(--od-text-secondary) !important;
}

/* ── Profile page light mode cleanup ────────────────────────────── */
/* Cards on profile use Tailwind bg-white which is fine, but some
   inline dark backgrounds need fixing.                            */
[data-theme="light"] .status-pending {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

/* ==========================================
   Light Mode — batch-import, upgrade, payment, payment-approvals
   ========================================== */

/* ── batch-import.html ────────────────────────────────────────────
   .header has hard-coded dark bg + white text                     */
[data-theme="light"] .header {
    background: var(--od-surface-2) !important;
    color: var(--od-heading) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .header h1 {
    color: var(--od-heading) !important;
}

/* batch-import .card */
[data-theme="light"] .card {
    background: var(--od-card-bg) !important;
    border-color: var(--od-card-border) !important;
    color: var(--od-text) !important;
    box-shadow: var(--od-card-shadow) !important;
}
[data-theme="light"] .card h2 {
    color: var(--od-accent) !important;
}

/* batch-import preview table */
[data-theme="light"] .preview-table th,
[data-theme="light"] .preview-table td {
    color: var(--od-text) !important;
    border-bottom-color: var(--od-table-row-border) !important;
}
[data-theme="light"] .preview-table th {
    background: var(--od-table-head-bg) !important;
    color: var(--od-accent) !important;
}

/* batch-import upload area */
[data-theme="light"] .upload-area {
    border-color: rgba(0,108,73,0.35) !important;
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] .upload-area:hover {
    background: rgba(0,108,73,0.05) !important;
    border-color: var(--od-accent) !important;
}

/* ── upgrade.html ──────────────────────────────────────────────── */
[data-theme="light"] .cycle-btn {
    background: var(--od-surface-3) !important;
    border-color: var(--od-divider) !important;
    color: var(--od-text-secondary) !important;
}
[data-theme="light"] .cycle-btn:hover {
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
}
[data-theme="light"] .cycle-btn.active {
    background: var(--od-accent-15) !important;
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
}

[data-theme="light"] .discount-tag {
    background: var(--od-accent-15) !important;
    color: var(--od-accent) !important;
}

/* plan-card inherits glass-card (already fixed); text inside */
[data-theme="light"] .plan-card .text-white\/70 { color: var(--od-text-secondary) !important; }
[data-theme="light"] .plan-card .text-white\/40 { color: var(--od-text-muted) !important; }
[data-theme="light"] .plan-card .text-white\/50 { color: var(--od-text-secondary) !important; }
[data-theme="light"] .plan-card .text-white     { color: var(--od-heading) !important; }
[data-theme="light"] .plan-card .border-white\/10 { border-color: var(--od-divider) !important; }

/* current plan badge inside plan card */
[data-theme="light"] .plan-card .bg-white\/10 {
    background: var(--od-surface-3) !important;
    color: var(--od-text-secondary) !important;
}

/* ── payment.html ─────────────────────────────────────────────── */
/* method tabs */
[data-theme="light"] .method-tab {
    border-color: var(--od-divider) !important;
    color: var(--od-text-secondary) !important;
    background: var(--od-surface-2) !important;
}
[data-theme="light"] .method-tab:hover {
    border-color: var(--od-accent) !important;
}
[data-theme="light"] .method-tab.active {
    background: var(--od-accent-15) !important;
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
}
[data-theme="light"] .method-tab .text-white\/40 { color: var(--od-text-muted) !important; }

/* Action Buttons (across upgrade, payment, payment-approvals) */
[data-theme="light"] .btn-pay,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-approve {
    background: var(--od-accent) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 108, 73, 0.2) !important;
}
[data-theme="light"] .btn-pay:hover:not(:disabled),
[data-theme="light"] .btn-submit:hover:not(:disabled),
[data-theme="light"] .btn-approve:hover:not(:disabled) {
    background: #005a3c !important;
    box-shadow: 0 6px 16px rgba(0, 108, 73, 0.3) !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .btn-reject {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
}
[data-theme="light"] .btn-reject:hover:not(:disabled) {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}

[data-theme="light"] .btn-receipt {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
[data-theme="light"] .btn-receipt:hover:not(:disabled) {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
}

/* upload area on payment page */
[data-theme="light"] .upload-area {
    border-color: rgba(0,108,73,0.3) !important;
}
[data-theme="light"] .upload-area .text-white\/30,
[data-theme="light"] .upload-area .text-white\/50 {
    color: var(--od-text-muted) !important;
}

/* instapay address box */
[data-theme="light"] .instapay-address {
    background: rgba(0,108,73,0.08) !important;
    border-color: rgba(0,108,73,0.3) !important;
}

/* Inputs with hardcoded color:#fff — cover both inline style and class rule */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="email"],
[data-theme="light"] textarea {
    background: var(--od-input-bg) !important;
    border-color: var(--od-input-border) !important;
    color: var(--od-input-text) !important;
}
/* Inline style overrides for the amountPaid input */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:white"],
[data-theme="light"] [style*="color: white"] {
    color: var(--od-text) !important;
}

/* ── payment-approvals.html ───────────────────────────────────── */
[data-theme="light"] .stat-card {
    background: var(--od-surface-2) !important;
    border-color: var(--od-card-border) !important;
}
[data-theme="light"] .stat-card .text-white\/40 { color: var(--od-text-muted) !important; }

[data-theme="light"] .filter-btn {
    border-color: var(--od-divider) !important;
    color: var(--od-text-secondary) !important;
    background: var(--od-surface-2) !important;
}
[data-theme="light"] .filter-btn:hover {
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
    background: var(--od-accent-15) !important;
}
[data-theme="light"] .filter-btn.active {
    background: var(--od-accent-15) !important;
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
}

[data-theme="light"] .request-card {
    background: var(--od-card-bg) !important;
    border-color: var(--od-card-border) !important;
    color: var(--od-text) !important;
}
[data-theme="light"] .request-card:hover {
    border-color: rgba(0,108,73,0.3) !important;
    background: var(--od-surface-2) !important;
}

[data-theme="light"] .amount-box {
    background: var(--od-surface-2) !important;
    color: var(--od-text) !important;
}

[data-theme="light"] .modal-content {
    background: var(--od-modal-bg) !important;
    border-color: rgba(0,108,73,0.25) !important;
    color: var(--od-modal-text) !important;
}

[data-theme="light"] .page-btn {
    background: var(--od-surface-2) !important;
    border-color: var(--od-divider) !important;
    color: var(--od-text) !important;
}
[data-theme="light"] .page-btn:hover {
    border-color: var(--od-accent) !important;
}
[data-theme="light"] .page-btn.active {
    background: var(--od-accent-15) !important;
    border-color: var(--od-accent) !important;
    color: var(--od-accent) !important;
}

/* payment-approvals textarea */
[data-theme="light"] textarea {
    background: var(--od-input-bg) !important;
    border-color: var(--od-input-border) !important;
    color: var(--od-input-text) !important;
}

/* payment-approvals: dynamically-rendered inline color text */
[data-theme="light"] .text-cyan-300 { color: #0369a1 !important; }