/* ============================================================
   Raven ERP — Theme System
   ============================================================
   Usage: Add data-theme="dark" (or other theme name) to <html>.
   Default (no attribute) = light theme.
   ============================================================ */

/* ── Light Theme (Default; the softer, higher-contrast palette since 2026-09-27) ─────────────────────────────────── */
:root,
[data-theme="light"] {
    --primary:         #1D4ED8;
    --primary-dark:    #1E40AF;
    --primary-light:   #2563EB;
    --primary-bg:      #DBE6FC;
    --success:         #047857;
    --success-bg:      #D5F2E4;
    --warning:         #B45309;
    --warning-bg:      #FBEBCB;
    --danger:          #B91C1C;
    --danger-muted:    #DC2626;
    --danger-bg:       #FADCDC;
    --info:            #0369A1;

    --sidebar-bg:      #0F172A;
    --sidebar-text:    #A3B1C6;
    --sidebar-hover:   #1E293B;
    --sidebar-active:  #FFFFFF;

    --bg:              #DDE2E9;
    --bg-subtle:       #ECEFF4;
    --bg-card:         #F7F8FA;
    --surface:         #F7F8FA;
    --surface-hover:   #E9EDF2;
    --surface-raised:  #FBFCFD;

    --border:          #C3CBD6;
    --border-light:    #D6DCE4;

    --text:            #0F172A;
    --text-secondary:  #2C3A4F;
    --text-muted:      #475569;
    --text-faint:      #66748A;
    --text-on-primary: #FFFFFF;

    --input-bg:        #FFFFFF;
    --input-border:    #A9B4C3;
    --input-focus:     #1D4ED8;
    --input-placeholder: #758197;

    --table-stripe:    #EFF2F6;
    --table-hover:     #E4E9F0;

    --badge-muted-bg:  #DFE4EB;
    --badge-muted-text:#334155;

    --radius:          8px;
    --radius-sm:       4px;
    --radius-lg:       12px;
    --shadow:          0 1px 3px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.08);
    --shadow-md:       0 4px 8px rgba(15,23,42,.12), 0 2px 4px rgba(15,23,42,.08);
    --shadow-lg:       0 10px 18px rgba(15,23,42,.16), 0 4px 6px rgba(15,23,42,.08);

    /* Typography scale */
    --font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono:       'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --font-size-xs:    11px;
    --font-size-sm:    12px;
    --font-size-base:  13px;
    --font-size-md:    14px;
    --font-size-lg:    16px;
    --font-size-xl:    18px;
    --font-size-2xl:   24px;
    --line-height:     1.5;
}

/* ── Light: Bootstrap follows the theme, and component fixes ──
   (light only; dark and midnight have their own below). */
:root:not([data-theme="dark"], [data-theme="midnight"]) {
    color-scheme: light;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-faint);
    --bs-secondary-bg: var(--bg-subtle);
    --bs-tertiary-bg: var(--bg-subtle);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: rgba(15,23,42,.18);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 29,78,216;
    --bs-link-hover-color: var(--primary-dark);
    --bs-link-hover-color-rgb: 30,64,175;
    --bs-primary-rgb: 29,78,216;
    color: var(--text);
}
:root:not([data-theme="dark"], [data-theme="midnight"]) :is(.card, .modal-content, .kpi-card, .order-tabs-wrap) { background-color: var(--bg-card); border-color: var(--border); color: var(--text); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .card-header { background-color: var(--bg-subtle); border-bottom-color: var(--border); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .dropdown-menu { background-color: var(--surface-raised); border-color: var(--border); box-shadow: var(--shadow-md); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .dropdown-item:hover { background-color: var(--surface-hover); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .modal-header, :root:not([data-theme="dark"], [data-theme="midnight"]) .modal-footer { border-color: var(--border); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--table-stripe); --bs-table-hover-bg: var(--table-hover); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .table > thead > tr > th { color: var(--text-secondary); }
:root:not([data-theme="dark"], [data-theme="midnight"]) :is(.form-control, .form-select) { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); }
:root:not([data-theme="dark"], [data-theme="midnight"]) :is(.form-control, .form-select):focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(29,78,216,.18); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .form-control::placeholder { color: var(--input-placeholder); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .form-control:disabled, :root:not([data-theme="dark"], [data-theme="midnight"]) .form-select:disabled { background-color: var(--bg-subtle); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .input-group-text { background-color: var(--bg-subtle); border-color: var(--input-border); color: var(--text-muted); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .form-check-input { border-color: var(--input-border); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .form-text, :root:not([data-theme="dark"], [data-theme="midnight"]) .text-muted { color: var(--text-muted) !important; }
:root:not([data-theme="dark"], [data-theme="midnight"]) .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-dark); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .btn-light { --bs-btn-bg: var(--surface-raised); --bs-btn-border-color: var(--input-border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--text-faint); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .btn-outline-secondary { --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--input-border); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--text-faint); }
:root:not([data-theme="dark"], [data-theme="midnight"]) .badge.bg-secondary, :root:not([data-theme="dark"], [data-theme="midnight"]) .badge.text-bg-secondary { background-color: var(--badge-muted-bg) !important; color: var(--badge-muted-text) !important; }
:root:not([data-theme="dark"], [data-theme="midnight"]) :is(.nav-tabs .nav-link.active) { background-color: var(--bg-card); border-color: var(--border) var(--border) var(--bg-card); }
/* Inline "white" panels on older pages take the panel colour instead of glaring white */
:root:not([data-theme="dark"], [data-theme="midnight"]) :is([style*="background:#fff"], [style*="background:#FFF"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:#ffffff"], [style*="background:#FFFFFF"]):not(input, textarea, select) { background-color: var(--bg-card) !important; }
:root:not([data-theme="dark"], [data-theme="midnight"]) :is([style*="background:#F8FAFC"], [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#F1F5F9"], [style*="background:#f1f5f9"]) { background-color: var(--bg-subtle) !important; }
:root:not([data-theme="dark"], [data-theme="midnight"]) :is([style*="border:1px solid #E2E8F0"], [style*="border: 1px solid #e2e8f0"], [style*="border:1px solid #e2e8f0"], [style*="border-bottom:1px solid #E2E8F0"], [style*="border-bottom:1px solid #e2e8f0"]) { border-color: var(--border) !important; }

/* ── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"] {
    --primary:         #3B82F6;
    --primary-dark:    #2563EB;
    --primary-light:   #60A5FA;
    --primary-bg:      #1E3A5F;
    --success:         #10B981;
    --success-bg:      #064E3B;
    --warning:         #F59E0B;
    --warning-bg:      #78350F;
    --danger:          #EF4444;
    --danger-muted:    #F87171;
    --danger-bg:       #7F1D1D;
    --info:            #38BDF8;

    --sidebar-bg:      #0B0F19;
    --sidebar-text:    #94A3B8;
    --sidebar-hover:   #1E293B;
    --sidebar-active:  #FFFFFF;

    --bg:              #0F172A;
    --bg-subtle:       #1E293B;
    --bg-card:         #1E293B;
    --surface:         #1E293B;
    --surface-hover:   #334155;
    --surface-raised:  #334155;

    --border:          #334155;
    --border-light:    #1E293B;

    --text:            #E2E8F0;
    --text-secondary:  #CBD5E1;
    --text-muted:      #94A3B8;
    --text-faint:      #64748B;
    --text-on-primary: #FFFFFF;

    --input-bg:        #0F172A;
    --input-border:    #475569;
    --input-focus:     #3B82F6;
    --input-placeholder: #64748B;

    --table-stripe:    #1E293B;
    --table-hover:     #334155;

    --badge-muted-bg:  #334155;
    --badge-muted-text:#94A3B8;

    --shadow:          0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --shadow-md:       0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
    --shadow-lg:       0 10px 15px rgba(0,0,0,.4), 0 4px 6px rgba(0,0,0,.3);

    color-scheme: dark;
}

/* ── Dark/Midnight: Bootstrap component overrides ─────────── */
/* Using :is() to apply to both themes without duplicating selectors */
:is([data-theme="dark"], [data-theme="midnight"]) .form-control,
:is([data-theme="dark"], [data-theme="midnight"]) .form-select {
    background-color: var(--input-bg); border-color: var(--input-border); color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .form-control:focus,
:is([data-theme="dark"], [data-theme="midnight"]) .form-select:focus {
    background-color: var(--input-bg); border-color: var(--input-focus); color: var(--text);
    box-shadow: 0 0 0 0.2rem rgba(59,130,246,.25);
}
:is([data-theme="dark"], [data-theme="midnight"]) .form-control::placeholder { color: var(--input-placeholder); }
:is([data-theme="dark"], [data-theme="midnight"]) .input-group-text { background-color: var(--surface); border-color: var(--input-border); color: var(--text-muted); }
/* Card inner element radius — prevent square corners bleeding past card border-radius */
.card > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

:is([data-theme="dark"], [data-theme="midnight"]) .card { background-color: var(--bg-card); border-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .card-header { background-color: var(--surface); border-bottom-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .table {
    color: var(--text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--table-stripe);
    --bs-table-hover-bg: var(--table-hover); border-color: var(--border);
}
:is([data-theme="dark"], [data-theme="midnight"]) .table th { color: var(--text-muted); border-color: var(--border); }
:is([data-theme="dark"], [data-theme="midnight"]) .table td { border-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .table-hover > tbody > tr:hover > * { background-color: var(--table-hover); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-outline-secondary { color: var(--text-muted); border-color: var(--border); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-outline-secondary:hover { background-color: var(--surface-hover); color: var(--text); border-color: var(--text-muted); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-outline-primary { color: var(--primary-light); border-color: var(--primary); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-outline-danger { color: var(--danger); border-color: var(--danger); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-light { --bs-btn-bg: var(--surface-raised); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--text-muted); --bs-btn-hover-color: var(--text); --bs-btn-active-bg: var(--surface-hover); --bs-btn-active-color: var(--text); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-color: var(--text-muted); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-secondary { background-color: var(--surface-raised); border-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .dropdown-menu { background-color: var(--surface-raised); border-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .dropdown-item { color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .dropdown-item:hover { background-color: var(--surface-hover); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-content { background-color: var(--bg-card); border-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header { border-bottom-color: var(--border); color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-footer { border-top-color: var(--border); }
:is([data-theme="dark"], [data-theme="midnight"]) .alert-warning { background-color: var(--warning-bg); border-color: #92400E; color: var(--warning); }
:is([data-theme="dark"], [data-theme="midnight"]) .alert-danger { background-color: var(--danger-bg); border-color: #991B1B; color: var(--danger); }
:is([data-theme="dark"], [data-theme="midnight"]) .alert-success { background-color: var(--success-bg); border-color: #065F46; color: var(--success); }
:is([data-theme="dark"], [data-theme="midnight"]) .alert-info { background-color: var(--primary-bg); border-color: #1E40AF; color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) .alert-light { background-color: var(--bg-subtle); border-color: var(--border); color: var(--text); }
/* Severity-tinted modal headers. The colored bg + colored title combo
   used in light mode (e.g. light-pink + dark-red) doesn't translate to
   dark themes — both the bg and text need to be reds, which collapses
   contrast and becomes hard to read. In dark + midnight we drop the bg
   tint and lean on a thicker colored border-bottom + bright title text
   over the standard --bg-card to deliver the same severity cue. */
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-error,
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-warning,
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-info {
    background-color: var(--bg-card);
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-error   { border-bottom-color: var(--danger);  }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-warning { border-bottom-color: var(--warning); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-info    { border-bottom-color: var(--primary); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-error   .modal-title { color: var(--danger);  }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-warning .modal-title { color: var(--warning); }
:is([data-theme="dark"], [data-theme="midnight"]) .modal-header-info    .modal-title { color: var(--primary); }
:is([data-theme="dark"], [data-theme="midnight"]) .badge.bg-warning { color: #000 !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .breadcrumb-item a { color: var(--primary-light); }
:is([data-theme="dark"], [data-theme="midnight"]) .breadcrumb-item.active { color: var(--text-muted); }
:is([data-theme="dark"], [data-theme="midnight"]) a { color: var(--primary-light); }
:is([data-theme="dark"], [data-theme="midnight"]) .text-muted { color: var(--text-muted) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) hr { border-color: var(--border); }
:is([data-theme="dark"], [data-theme="midnight"]) .form-label { color: var(--text-muted); }
:is([data-theme="dark"], [data-theme="midnight"]) .form-text { color: var(--text-faint); }
:is([data-theme="dark"], [data-theme="midnight"]) label { color: var(--text); }
:is([data-theme="dark"], [data-theme="midnight"]) strong { color: inherit; }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-primary { background-color: var(--primary); border-color: var(--primary); }
:is([data-theme="dark"], [data-theme="midnight"]) .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }
:is([data-theme="dark"], [data-theme="midnight"]) .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); }
:is([data-theme="dark"], [data-theme="midnight"]) .form-check-label { color: var(--text); }

/* ── Shared dark overrides (dark + midnight) ──────────────── */
/* Catch inline hardcoded colors that don't use CSS vars */
[data-theme="dark"],
[data-theme="midnight"] {
    /* Global text color inheritance */
    color: var(--text);
}
/* Set default border color on structural elements — avoid overriding .btn borders */
:is([data-theme="dark"], [data-theme="midnight"]) :is(div, section, aside, nav, header, footer, main, table, thead, tbody, tr, td, th, ul, ol, li, hr, input, select, textarea) {
    border-color: var(--border);
}
/* Tables — force dark background on all table elements */
[data-theme="dark"] table,
[data-theme="midnight"] table,
[data-theme="dark"] .table-responsive,
[data-theme="midnight"] .table-responsive {
    background-color: transparent;
    color: var(--text);
}
[data-theme="dark"] thead,
[data-theme="midnight"] thead {
    background-color: var(--surface);
}
[data-theme="dark"] tbody tr,
[data-theme="midnight"] tbody tr {
    background-color: transparent;
}
[data-theme="dark"] .table-sm td,
[data-theme="dark"] .table-sm th,
[data-theme="midnight"] .table-sm td,
[data-theme="midnight"] .table-sm th {
    color: var(--text);
    border-color: var(--border);
}
/* Tab navigation */
[data-theme="dark"] .tab-btn,
[data-theme="midnight"] .tab-btn {
    color: var(--text-muted);
}
[data-theme="dark"] .tab-btn.active,
[data-theme="midnight"] .tab-btn.active {
    color: var(--text);
}
[data-theme="dark"] .tab-btn:hover,
[data-theme="midnight"] .tab-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}
[data-theme="dark"] .order-tab-nav,
[data-theme="midnight"] .order-tab-nav {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .order-tabs-wrap,
[data-theme="midnight"] .order-tabs-wrap {
    background: var(--bg-card);
    border-color: var(--border);
}
/* Topbar */
[data-theme="dark"] .topbar,
[data-theme="midnight"] .topbar {
    background: var(--surface);
    border-bottom-color: var(--border);
    color: var(--text);
}
/* Content body */
[data-theme="dark"] .content-body,
[data-theme="midnight"] .content-body {
    background: var(--bg);
}
/* KPI cards on dashboard */
[data-theme="dark"] .kpi-card,
[data-theme="midnight"] .kpi-card {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}
/* Badges — ensure readable on dark backgrounds */
[data-theme="dark"] .badge.bg-secondary,
[data-theme="midnight"] .badge.bg-secondary {
    background-color: var(--badge-muted-bg) !important;
    color: var(--badge-muted-text) !important;
}
[data-theme="dark"] .badge.text-bg-secondary,
[data-theme="midnight"] .badge.text-bg-secondary {
    background-color: var(--badge-muted-bg) !important;
    color: var(--badge-muted-text) !important;
}
/* Fix hardcoded white backgrounds */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="midnight"] [style*="background:#fff"],
[data-theme="midnight"] [style*="background:#FFF"],
[data-theme="midnight"] [style*="background:white"],
[data-theme="midnight"] [style*="background: #fff"],
[data-theme="midnight"] [style*="background: white"],
[data-theme="midnight"] [style*="background-color:#fff"],
[data-theme="midnight"] [style*="background-color: #fff"] {
    background-color: var(--bg-card) !important;
}
/* Fix hardcoded light grey backgrounds */
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#F8FAFC"],
[data-theme="dark"] [style*="background:#f4f4f4"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="midnight"] [style*="background:#f8fafc"],
[data-theme="midnight"] [style*="background:#F8FAFC"],
[data-theme="midnight"] [style*="background:#f4f4f4"],
[data-theme="midnight"] [style*="background:#f5f5f5"] {
    background-color: var(--bg-subtle) !important;
}
/* Fix hardcoded dark text on dark themes */
[data-theme="dark"] [style*="color:#1E293B"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="midnight"] [style*="color:#1E293B"],
[data-theme="midnight"] [style*="color:#333"],
[data-theme="midnight"] [style*="color:#000"],
[data-theme="midnight"] [style*="color:black"] {
    color: var(--text) !important;
}
/* Fix hardcoded muted text */
[data-theme="dark"] [style*="color:#718096"],
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color:#a0aec0"],
[data-theme="midnight"] [style*="color:#718096"],
[data-theme="midnight"] [style*="color:#64748B"],
[data-theme="midnight"] [style*="color:#6c757d"],
[data-theme="midnight"] [style*="color:#a0aec0"] {
    color: var(--text-muted) !important;
}
/* Fix Bootstrap specific dark issues */
[data-theme="dark"] .bg-light,
[data-theme="midnight"] .bg-light {
    background-color: var(--bg-subtle) !important;
}
[data-theme="dark"] .bg-white,
[data-theme="midnight"] .bg-white {
    background-color: var(--bg-card) !important;
}
[data-theme="dark"] .text-dark,
[data-theme="midnight"] .text-dark {
    color: var(--text) !important;
}
[data-theme="dark"] .border,
[data-theme="midnight"] .border {
    border-color: var(--border) !important;
}
/* Page title and headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="midnight"] h1, [data-theme="midnight"] h2, [data-theme="midnight"] h3,
[data-theme="midnight"] h4, [data-theme="midnight"] h5, [data-theme="midnight"] h6 {
    color: var(--text);
}
/* Pagination and links */
[data-theme="dark"] .btn-secondary,
[data-theme="midnight"] .btn-secondary {
    background-color: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="midnight"] .btn-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--text-muted);
    color: var(--text);
}
/* Select/option in dark mode */
[data-theme="dark"] select option,
[data-theme="midnight"] select option {
    background-color: var(--input-bg);
    color: var(--text);
}
/* Autocomplete/datalist */
[data-theme="dark"] datalist,
[data-theme="midnight"] datalist {
    background-color: var(--input-bg);
    color: var(--text);
}
/* Inline stat rows */
[data-theme="dark"] .stat-row td,
[data-theme="midnight"] .stat-row td {
    color: var(--text);
}
[data-theme="dark"] .stat-row td:first-child,
[data-theme="midnight"] .stat-row td:first-child {
    color: var(--text-muted);
}
/* Chart.js — make chart backgrounds transparent */
[data-theme="dark"] canvas,
[data-theme="midnight"] canvas {
    filter: none;
}
/* Card body — force text color inheritance */
:is([data-theme="dark"], [data-theme="midnight"]) .card-body {
    background-color: var(--bg-card);
    color: var(--text);
}
/* Bootstrap text utilities — force theme colors */
:is([data-theme="dark"], [data-theme="midnight"]) .text-body {
    color: var(--text) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-success {
    color: var(--success) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-danger {
    color: var(--danger) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-warning {
    color: var(--warning) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-info {
    color: var(--info) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-primary {
    color: var(--primary) !important;
}
/* Bootstrap fs-X (font size) classes inherit color — ensure they get theme text */
:is([data-theme="dark"], [data-theme="midnight"]) .fs-1,
:is([data-theme="dark"], [data-theme="midnight"]) .fs-2,
:is([data-theme="dark"], [data-theme="midnight"]) .fs-3,
:is([data-theme="dark"], [data-theme="midnight"]) .fs-4,
:is([data-theme="dark"], [data-theme="midnight"]) .fs-5,
:is([data-theme="dark"], [data-theme="midnight"]) .fs-6 {
    color: var(--text);
}
/* Override specificity for text-success/danger on fs-3 (dashboard KPIs) */
:is([data-theme="dark"], [data-theme="midnight"]) .fs-3.text-success { color: var(--success) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .fs-3.text-danger { color: var(--danger) !important; }
/* Ensure all div, span, p, li inside card-body get theme color */
:is([data-theme="dark"], [data-theme="midnight"]) .card-body div,
:is([data-theme="dark"], [data-theme="midnight"]) .card-body span,
:is([data-theme="dark"], [data-theme="midnight"]) .card-body p,
:is([data-theme="dark"], [data-theme="midnight"]) .card-body li {
    color: inherit;
}
/* Re-apply specific color classes after the inherit reset */
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .text-muted { color: var(--text-muted) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .text-success { color: var(--success) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .text-danger { color: var(--danger) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .text-warning { color: var(--warning) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .text-primary { color: var(--primary) !important; }
/* Topbar page title */
:is([data-theme="dark"], [data-theme="midnight"]) .page-title,
:is([data-theme="dark"], [data-theme="midnight"]) .topbar h2,
:is([data-theme="dark"], [data-theme="midnight"]) .topbar span {
    color: var(--text);
}
/* Breadcrumbs */
:is([data-theme="dark"], [data-theme="midnight"]) .breadcrumb {
    color: var(--text-muted);
}
/* Ensure number displays on dashboard are readable */
:is([data-theme="dark"], [data-theme="midnight"]) .fw-bold {
    color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .fw-bold.text-success { color: var(--success) !important; }
:is([data-theme="dark"], [data-theme="midnight"]) .fw-bold.text-danger { color: var(--danger) !important; }
/* Summary number displays (product view, etc) */
:is([data-theme="dark"], [data-theme="midnight"]) .summary-value {
    color: var(--text);
}
/* Toast notifications */
:is([data-theme="dark"], [data-theme="midnight"]) .toast-msg {
    background: transparent;
    color: var(--text);
}

/* Breadcrumb separators */
:is([data-theme="dark"], [data-theme="midnight"]) .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-faint);
}
/* Fix Bootstrap list-group on PO views etc */
:is([data-theme="dark"], [data-theme="midnight"]) .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}
/* Table within card-body — catch nested tables in PO views */
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .table {
    color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .card-body .table td {
    color: var(--text);
}
/* Form labels that use fw-semibold */
:is([data-theme="dark"], [data-theme="midnight"]) .fw-semibold {
    color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .text-uppercase.text-muted.fw-semibold {
    color: var(--text-muted) !important;
}

/* ── Midnight Theme ────────────────────────────────────────── */
[data-theme="midnight"] {
    --primary:         #818CF8;
    --primary-dark:    #6366F1;
    --primary-light:   #A5B4FC;
    --primary-bg:      #312E81;
    --success:         #34D399;
    --success-bg:      #064E3B;
    --warning:         #FBBF24;
    --warning-bg:      #78350F;
    --danger:          #F87171;
    --danger-muted:    #FCA5A5;
    --danger-bg:       #7F1D1D;
    --info:            #67E8F9;

    --sidebar-bg:      #020617;
    --sidebar-text:    #94A3B8;
    --sidebar-hover:   #0F172A;
    --sidebar-active:  #FFFFFF;

    --bg:              #020617;
    --bg-subtle:       #0F172A;
    --bg-card:         #0F172A;
    --surface:         #0F172A;
    --surface-hover:   #1E293B;
    --surface-raised:  #1E293B;

    --border:          #1E293B;
    --border-light:    #0F172A;

    --text:            #E2E8F0;
    --text-secondary:  #CBD5E1;
    --text-muted:      #94A3B8;
    --text-faint:      #475569;
    --text-on-primary: #FFFFFF;

    --input-bg:        #020617;
    --input-border:    #334155;
    --input-focus:     #818CF8;
    --input-placeholder: #475569;

    --table-stripe:    #0F172A;
    --table-hover:     #1E293B;

    --badge-muted-bg:  #1E293B;
    --badge-muted-text:#94A3B8;

    --shadow:          0 1px 3px rgba(0,0,0,.5);
    --shadow-md:       0 4px 6px rgba(0,0,0,.5);
    --shadow-lg:       0 10px 15px rgba(0,0,0,.6);

    color-scheme: dark;
}

/* ── Image thumbnails — white background for transparency ──── */
:is([data-theme="dark"], [data-theme="midnight"]) img[src*="/products/images/"],
:is([data-theme="dark"], [data-theme="midnight"]) img[src*="cdn.shopify.com"],
:is([data-theme="dark"], [data-theme="midnight"]) img[src*="i.ebayimg.com"],
:is([data-theme="dark"], [data-theme="midnight"]) .img-card img,
:is([data-theme="dark"], [data-theme="midnight"]) .product-thumb,
:is([data-theme="dark"], [data-theme="midnight"]) td img[style*="object-fit"],
:is([data-theme="dark"], [data-theme="midnight"]) .img-grid-wrap img {
    background-color: #ffffff;
    border-radius: 2px;
}

/* ── Form switches (Bootstrap toggle) — fix dark appearance ── */
:is([data-theme="dark"], [data-theme="midnight"]) .form-check-input {
    background-color: var(--surface-raised);
    border-color: var(--text-faint);
}
:is([data-theme="dark"], [data-theme="midnight"]) .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
:is([data-theme="dark"], [data-theme="midnight"]) .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394A3B8'/%3e%3c/svg%3e");
}
:is([data-theme="dark"], [data-theme="midnight"]) .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ── Fix btn-primary/success/danger/warning appearance in dark ── */
:is([data-theme="dark"], [data-theme="midnight"]) .btn-primary,
:is([data-theme="dark"], [data-theme="midnight"]) .btn-success,
:is([data-theme="dark"], [data-theme="midnight"]) .btn-danger,
:is([data-theme="dark"], [data-theme="midnight"]) .btn-warning {
    color: #fff !important;
    opacity: 1;
}
:is([data-theme="dark"], [data-theme="midnight"]) a.btn-primary,
:is([data-theme="dark"], [data-theme="midnight"]) a.btn-success,
:is([data-theme="dark"], [data-theme="midnight"]) a.btn-danger {
    color: #fff !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .btn-primary:hover,
:is([data-theme="dark"], [data-theme="midnight"]) .btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff !important;
}

/* ── Order view meta bar ───────────────────────────────────── */
:is([data-theme="dark"], [data-theme="midnight"]) .order-meta-body {
    background-color: var(--bg-card);
    color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .omf-value {
    color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .order-meta-field {
    border-right-color: var(--border);
}

/* ── Channel pills — softer in dark themes ─────────────────── */
:is([data-theme="dark"], [data-theme="midnight"]) .channel-pill {
    opacity: 0.75;
    font-weight: 500;
}

/* ── Badges — softer in dark themes ────────────────────────── */
:is([data-theme="dark"], [data-theme="midnight"]) .badge.text-bg-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .badge.text-bg-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .badge.text-bg-success {
    background-color: var(--success-bg) !important;
    color: var(--success) !important;
}
:is([data-theme="dark"], [data-theme="midnight"]) .badge.text-bg-primary {
    background-color: var(--primary-bg) !important;
    color: var(--primary-light) !important;
}

/* ── Bulk action bar ──────────────────────────────────────────── */
.bulk-action-bar {
    position: sticky; top: 0; z-index: 100;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 12px;
    align-items: center; gap: 12px;
    background: var(--primary); color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.bulk-bar-btn-primary {
    background: #fff; color: var(--primary); font-weight: 600; padding: 5px 14px;
}
.bulk-bar-btn-primary:hover { background: #f0f0f0; color: var(--primary); }
.bulk-bar-btn {
    background: rgba(255,255,255,.15); color: #fff; padding: 5px 14px;
}
.bulk-bar-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.bulk-bar-btn-danger {
    background: rgba(220,38,38,.2); color: #fca5a5; padding: 5px 14px;
    border: 1px solid rgba(220,38,38,.4);
}
.bulk-bar-btn-danger:hover { background: rgba(220,38,38,.35); color: #fecaca; }

:is([data-theme="dark"], [data-theme="midnight"]) .bulk-action-bar {
    background: var(--surface-raised, #334155);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn-primary {
    background: var(--primary); color: #fff;
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn-primary:hover {
    background: var(--primary-dark); color: #fff;
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn {
    background: rgba(255,255,255,.08); color: var(--text-secondary);
    border: 1px solid var(--border);
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn:hover {
    background: rgba(255,255,255,.14); color: var(--text);
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn-danger {
    background: rgba(239,68,68,.12); color: var(--danger-muted);
    border: 1px solid rgba(239,68,68,.3);
}
:is([data-theme="dark"], [data-theme="midnight"]) .bulk-bar-btn-danger:hover {
    background: rgba(239,68,68,.22); color: var(--danger);
}