/* Digz - canonical site theme. Loads BEFORE per-page inline styles.
   :root[data-theme=...] outranks per-page :root rules. */

:root[data-theme="dark"] {
    /* ============================================================
       v26 - Premium SaaS (Linear / Vercel / Attio / Stripe)
       Warm charcoal layered system, ONE indigo accent, no neon.
       Hair-thin borders + soft elevation, not black + glow.
       ============================================================ */

    /* Surfaces - warm charcoal layered stack (lifted from pure black) */
    --bg-1:      #0f1115;     /* page base - warm charcoal, not pitch */
    --bg-2:      #12141b;
    --bg-3:      #151922;
    --bg: var(--bg-1);
    --surface:   #151922;     /* primary cards - Linear's "panel" */
    --surface-2: #1b2230;     /* raised / nested cards */
    --surface-3: #222a3a;     /* hover state */
    --surface-hover: #232a3a;

    /* Text - luxury hierarchy */
    --text:   #f5f6f9;        /* highest contrast - only for hero numbers/H1 */
    --text-1: var(--text);
    --text-2: #c9ccd6;        /* primary body */
    --text-3: #8b91a3;        /* secondary / labels */
    --muted:  #5b6175;        /* tertiary */

    /* Borders - hairline, almost invisible. Surface contrast carries the layout. */
    --border:        rgba(255,255,255,0.055);
    --border-strong: rgba(255,255,255,0.095);
    --border-accent: rgba(99,102,241,0.40);

    /* SINGLE accent - indigo. Used sparingly. */
    --accent:        #6366f1;     /* indigo-500 - fintech-iconic */
    --accent-hover:  #818cf8;
    --accent-strong: #4f46e5;
    --accent-soft:   rgba(99,102,241,0.13);

    /* Secondary tokens kept = accent to enforce single-color discipline */
    --accent-2:       var(--accent);
    --accent-2-soft:  var(--accent-soft);
    --accent-3:       #f59e0b;       /* amber - ONLY for warning semantics */
    --accent-3-soft:  rgba(245,158,11,0.10);

    /* Semantic */
    --good:      #10b981;
    --good-soft: rgba(16,185,129,0.12);
    --bad:       #ef4444;
    --bad-soft:  rgba(239,68,68,0.12);
    --pink:      var(--accent);
    --pink-soft: var(--accent-soft);
    --violet:    var(--accent);
    --violet-soft: var(--accent-soft);
    --lime:      var(--good);
    --lime-soft: var(--good-soft);

    /* Aliases for legacy per-page css */
    --card: var(--surface);
    --glass: var(--surface-2);

    /* Chart grid + tooltip */
    --grid: rgba(255,255,255,0.035);
    --tooltip-bg: #1b2230;
    --tooltip-edge: rgba(255,255,255,0.07);

    /* Shadows - refined depth. Inset highlight + outer shadow = "lifted card". */
    --shadow-1: 0 1px 0 rgba(255,255,255,0.035) inset, 0 1px 2px rgba(0,0,0,0.40);
    --shadow-2: 0 1px 0 rgba(255,255,255,0.04)  inset, 0 8px 20px rgba(0,0,0,0.40);
    --shadow-3: 0 1px 0 rgba(255,255,255,0.05)  inset, 0 22px 60px rgba(0,0,0,0.55);
    --shadow-elevated: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.55);

    /* Gradients - only same-hue shades. No multi-color sweeps. */
    --grad-accent: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --grad-amber:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --grad-good:   linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-violet: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    --grad-pink:   linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --grad-lime:   linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-bg-soft: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    --grad-hero:    none;

    /* Radii - generous, premium SaaS */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;       /* card default - larger, more elegant */
    --r-xl: 24px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* 8px spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* Type scale - Inter-tuned, Linear-grade */
    --t-xs:   11px;
    --t-sm:   12px;
    --t-md:   14px;
    --t-lg:   15px;
    --t-xl:   17px;
    --t-2xl:  20px;
    --t-3xl:  28px;
    --t-4xl:  36px;     /* hero numbers */
    --t-5xl:  44px;

    /* Floating sidebar metrics */
    --sb-w: 248px;
    --sb-w-collapsed: 72px;
    --sb-margin: 12px;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg-1: #f6f7fb;
    --bg-2: #eef0f9;
    --bg-3: #e3e7f4;
    --bg: var(--bg-1);
    --surface: #ffffff;
    --surface-2: #f6f7fb;
    --surface-3: #ebeef7;
    --surface-hover: #e8ebf6;

    --text: #0b1130;
    --text-1: var(--text);
    --text-2: #2e3656;
    --text-3: #5b6588;
    --muted: #6c7591;

    --border: rgba(11,17,48,0.08);
    --border-strong: rgba(11,17,48,0.18);
    --border-accent: rgba(94,80,222,0.40);

    /* Vibrant industry palette - indigo / teal / amber / rose / lime / violet */
    --accent: #5e50de;
    --accent-hover: #4a3dc9;
    --accent-soft: rgba(94,80,222,0.12);
    --accent-2: #0891b2;
    --accent-2-soft: rgba(8,145,178,0.12);
    --accent-3: #d97706;
    --accent-3-soft: rgba(217,119,6,0.14);
    --good: #059669;
    --good-soft: rgba(5,150,105,0.12);
    --bad: #e11d48;
    --bad-soft: rgba(225,29,72,0.12);
    --pink: #db2777;
    --pink-soft: rgba(219,39,119,0.12);
    --violet: #9333ea;
    --violet-soft: rgba(147,51,234,0.12);
    --lime: #65a30d;
    --lime-soft: rgba(101,163,13,0.12);

    --card: var(--surface);
    --glass: var(--surface-2);

    --grid: rgba(11,17,48,0.07);
    --tooltip-bg: #ffffff;
    --tooltip-edge: rgba(11,17,48,0.10);

    --shadow-1: 0 1px 0 rgba(11,17,48,0.04), 0 1px 2px rgba(11,17,48,0.06);
    --shadow-2: 0 8px 24px rgba(11,17,48,0.08), 0 1px 0 rgba(11,17,48,0.03);
    --shadow-3: 0 24px 60px rgba(11,17,48,0.12), 0 1px 0 rgba(11,17,48,0.04);

    --grad-accent: linear-gradient(135deg, #5e50de 0%, #0891b2 100%);
    --grad-amber:  linear-gradient(135deg, #d97706 0%, #db2777 100%);
    --grad-good:   linear-gradient(135deg, #059669 0%, #0891b2 100%);
    --grad-violet: linear-gradient(135deg, #9333ea 0%, #5e50de 100%);
    --grad-pink:   linear-gradient(135deg, #db2777 0%, #e11d48 100%);
    --grad-lime:   linear-gradient(135deg, #65a30d 0%, #059669 100%);
    --grad-bg-soft: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    --grad-hero:   linear-gradient(135deg, rgba(94,80,222,0.10) 0%, rgba(8,145,178,0.06) 50%, rgba(147,51,234,0.08) 100%);

    color-scheme: light;
}

/* Base body - matte SaaS surface, NO ambient glow */
html { background-color: var(--bg-1); }
body {
    background-color: var(--bg-1);
    background-image: none;     /* glow removed */
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--t-md, 14px);
    line-height: 1.55;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    letter-spacing: -0.005em;
    transition: background-color .2s ease, color .2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings - Linear-style tight tracking and confident weight */
h1, h2, h3, h4 { letter-spacing: -0.022em; color: var(--text); }
h1 { font-weight: 700; font-size: var(--t-3xl); line-height: 1.15; }
h2 { font-weight: 700; font-size: var(--t-2xl); line-height: 1.2; }
h3 { font-weight: 600; font-size: var(--t-xl); line-height: 1.3; }
h4 { font-weight: 600; font-size: var(--t-lg); line-height: 1.35; }
small, .small { font-size: var(--t-xs); color: var(--text-3); }

/* No underlines anywhere by default - only show on hover for content links */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* Smooth scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Theme-aware overrides for common DataTables + form pieces */
:root[data-theme="light"] table.dataTable tbody td { color: var(--text-2); }
:root[data-theme="light"] table.dataTable thead th { color: var(--text); }
:root[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-2) !important; }
:root[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
:root[data-theme="light"] .dataTables_wrapper .dataTables_length select {
    background: var(--surface); color: var(--text); border-color: var(--border);
}

/* Apex tooltip + legend match theme */
.apexcharts-tooltip {
    background: var(--tooltip-bg) !important;
    border: 1px solid var(--tooltip-edge) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-2) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}
.apexcharts-tooltip-title {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--tooltip-edge) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
}
.apexcharts-tooltip-series-group { padding: 4px 10px !important; }
.apexcharts-tooltip-y-group { padding: 2px 0 !important; }
.apexcharts-legend-text { color: var(--text-2) !important; font-weight: 500 !important; }
.apexcharts-text { fill: var(--muted) !important; }
.apexcharts-gridline { stroke: var(--grid) !important; }
.apexcharts-xaxis line, .apexcharts-yaxis line { stroke: var(--grid) !important; }

/* Form inputs base styling */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select { color: var(--text); }
:root[data-theme="light"] a { color: var(--accent); }

/* The floating theme toggle - premium pill */
.theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 1200;
    box-shadow: var(--shadow-2);
    transition: transform .18s cubic-bezier(.4,0,.2,1), background .15s ease, border-color .15s ease;
}
.theme-toggle:hover {
    border-color: var(--accent);
    transform: translateY(-2px) scale(1.04);
    background: var(--surface-2);
}
.theme-toggle:active { transform: translateY(0) scale(0.98); }
.theme-toggle i { font-size: 17px; color: var(--text-2); transition: color .2s ease; }
.theme-toggle:hover i { color: var(--accent); }
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }

/* Body background - extremely subtle ambient gradient (no harsh glow) */
:root[data-theme="dark"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(800px 600px at 0% 0%, rgba(107,142,255,0.05), transparent 60%),
        radial-gradient(600px 500px at 100% 100%, rgba(77,211,201,0.04), transparent 60%);
}
:root[data-theme="light"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(800px 600px at 0% 0%, rgba(59,109,220,0.04), transparent 60%),
        radial-gradient(600px 500px at 100% 100%, rgba(20,163,154,0.03), transparent 60%);
}

/* ============================================================
   v24 - SaaS-grade component layer (declared in :root so it wins
   the cascade against per-page CSS). Stripe / Linear / Vercel feel.
   ============================================================ */

/* Card - matte surface, hairline border, restrained shadow, large radius */
:root .card {
    border-radius: var(--r-lg, 18px) !important;
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-1) !important;
    transition: border-color .18s ease, box-shadow .22s ease, transform .12s ease;
    padding: var(--s-6, 24px);
}
:root .card:hover {
    border-color: var(--border-strong) !important;
}
:root .card.p-0 { padding: 0; }

/* Button - solid accent, restrained motion, no neon glow */
:root .btn {
    border-radius: var(--r-sm, 10px);
    font-weight: 600;
    font-size: var(--t-md, 14px);
    letter-spacing: -0.006em;
    padding: 0 var(--s-4, 16px);
    height: 36px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 8px);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .18s ease, transform .12s ease;
}
:root .btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
:root .btn:active { transform: translateY(0); }
:root .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
:root .btn.btn-sm, :root .btn-sm { height: 30px; font-size: var(--t-sm, 13px); padding: 0 var(--s-3, 12px); }
:root .btn.btn-lg, :root .btn-lg { height: 44px; font-size: var(--t-lg, 15px); padding: 0 var(--s-5, 20px); }

/* Primary - single accent, FLAT (no gradient sweep), subtle elevation */
:root .btn-primary {
    background: var(--accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-strong) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.35) !important;
}
:root .btn-primary:hover { background: var(--accent-hover) !important; }
:root .btn-primary:active { background: var(--accent-strong) !important; }

/* Ghost / outline */
:root .btn.ghost,
:root .btn-ghost,
:root .btn-light,
:root .btn-dark {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
}
:root .btn.ghost:hover,
:root .btn-ghost:hover,
:root .btn-light:hover,
:root .btn-dark:hover { background: var(--surface-2) !important; color: var(--text) !important; }

/* Destructive */
:root .btn-danger {
    background: rgba(239,68,68,0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
}
:root .btn-danger:hover { background: rgba(239,68,68,0.18) !important; }
:root .btn-success {
    background: rgba(16,185,129,0.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16,185,129,0.30) !important;
}
:root .btn-success:hover { background: rgba(16,185,129,0.18) !important; }
:root .btn-warning {
    background: rgba(245,158,11,0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245,158,11,0.30) !important;
}
:root .btn-warning:hover { background: rgba(245,158,11,0.18) !important; }

/* Inputs - clean, accent focus */
:root input,
:root select,
:root textarea,
:root .form-control,
:root .form-select {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm, 10px);
    color: var(--text);
    font-size: var(--t-md, 14px);
    padding: 0 var(--s-3, 12px);
    height: 36px;
    transition: border-color .15s ease, box-shadow .18s ease, background .15s ease;
}
:root textarea, :root textarea.form-control { padding: var(--s-3, 12px); height: auto; min-height: 88px; line-height: 1.5; }
:root input:focus,
:root select:focus,
:root textarea:focus,
:root .form-control:focus,
:root .form-select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
    background: var(--surface-2);
}

/* Form labels */
:root label, :root .form-label {
    font-size: var(--t-xs, 12px);
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--s-2, 8px);
}

/* Sidebar premium polish */
/* Sidebar - matte, hair border, no glass gradient */
.sidebar, .admin-sidebar, aside.sidebar {
    background: var(--surface) !important;
    background-image: none !important;
    border-right: 1px solid var(--border) !important;
    backdrop-filter: none;
    box-shadow: none !important;
}
/* Sidebar nav items - Linear-style restrained */
.sidebar a, .adm-link, .sidebar .nav-link {
    border-radius: var(--r-sm, 10px) !important;
    color: var(--text-2) !important;
    font-weight: 500 !important;
    transition: background .15s ease, color .15s ease;
}
.sidebar a:hover, .adm-link:hover, .sidebar .nav-link:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
.sidebar a.active, .adm-link.active, .sidebar .nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
}
/* Section labels in sidebar */
.adm-section, .sidebar .nav-section, .sidebar .section-label {
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
    color: var(--text-3) !important;
    text-transform: uppercase;
    padding: var(--s-4, 16px) var(--s-4, 16px) var(--s-2, 8px) !important;
    font-weight: 600 !important;
}

/* Tables - sticky header, hairline rows, no zebra */
.table thead th,
.seller-listing-tbl thead th,
.rep-table thead th,
.sales-tbl thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    border-bottom: 1px solid var(--border) !important;
}
.table tbody td,
.seller-listing-tbl tbody td,
.rep-table tbody td,
.sales-tbl tbody td {
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    border-bottom: 1px solid var(--border);
}

/* Modal - soft blur backdrop */
.digz-modal-bg, .modal {
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.55) !important;
}
.digz-modal-card, .modal-content {
    border-radius: var(--r-xl, 22px) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

/* Badges - restrained pill, no shadow */
:root .badge {
    border-radius: var(--r-pill, 999px) !important;
    font-size: var(--t-xs, 12px) !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    padding: 4px 10px !important;
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
:root .badge-accent, :root .badge-primary {
    background: var(--accent-soft) !important; color: var(--accent-hover) !important;
    border-color: rgba(139,92,246,0.30) !important;
}
:root .badge-good, :root .badge-success {
    background: var(--good-soft) !important; color: #34d399 !important;
    border-color: rgba(16,185,129,0.30) !important;
}
:root .badge-bad, :root .badge-danger {
    background: var(--bad-soft) !important; color: #f87171 !important;
    border-color: rgba(239,68,68,0.30) !important;
}
:root .badge-warning {
    background: var(--accent-3-soft) !important; color: #fbbf24 !important;
    border-color: rgba(245,158,11,0.30) !important;
}

/* Page-head - Linear-grade hero */
.page-head, .modern-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s-4, 16px); flex-wrap: wrap;
    padding-bottom: var(--s-5, 20px);
    margin-bottom: var(--s-6, 24px);
    border-bottom: 1px solid var(--border);
}
.page-head h1, .modern-page-head h1 {
    font-size: clamp(20px, 1.1rem + 0.8vw, 28px);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 4px;
    line-height: 1.15;
}
.page-head .sub, .modern-page-head .sub {
    color: var(--text-3);
    font-size: var(--t-md, 14px);
}
.page-head .actions, .modern-page-head .actions {
    display: flex; gap: var(--s-2, 8px); flex-wrap: wrap;
}

/* KPI/stat cards - bigger, more dominant numbers */
.kpi-card, .stat-card, .leader-card, .reveal-item {
    border-radius: var(--r-lg, 18px) !important;
}
.kpi-val, .stat-card .val, .qs-val {
    font-size: clamp(22px, 1rem + 1.2vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
.kpi-label, .stat-card .lbl, .qs-lbl {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--text-3) !important;
    font-weight: 600 !important;
}

/* Topbar - clean and quiet */
.topbar, .seller-topbar, .admin-topbar, .navbar-top {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(8px);
    box-shadow: none !important;
}

/* Filter pills - Linear-style segmented */
.filter-pills .pill, .modern-toolbar .filter-pills .pill {
    border-radius: var(--r-sm, 10px) !important;
    padding: 6px 12px !important;
    font-size: var(--t-sm, 13px) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}
.filter-pills .pill:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.filter-pills .pill.active {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    border-color: rgba(139,92,246,0.40) !important;
    box-shadow: none !important;
}

/* Pager refined */
.listing-pager .pager-num,
.listing-pager .pager-arrow {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}
.listing-pager .pager-num.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Hairline separators */
hr, .hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--s-5, 20px) 0;
}

/* Removed: meta-pills with multi-color gradients now single-color */
.meta-pill {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}

/* Pulse-dot for "new" badges */
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Shimmer for skeletons */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 8px;
    color: transparent;
    user-select: none;
}

/* SaaS sidebar item radii */
.adm-link, .sidebar-nav a, .sidebar .nav-link {
    border-radius: 10px !important;
}

/* Scrollbar - refined */
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg-1); }

/* ============================================================
   v25 - Final discipline pass. Strip every multi-color sweep
   and force the single-accent identity through stubborn legacy
   selectors. No glow, no neon, no gamer aesthetics.
   ============================================================ */

/* Kill any leftover body background image from older versions */
:root body { background-image: none !important; }

/* KPI icon boxes uniformly purple-tinted (was rainbow per category) */
:root .kpi .icon-box,
:root .kpi-ico {
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    border: 1px solid rgba(139,92,246,0.20) !important;
    box-shadow: none !important;
}
:root .kpi.amber .icon-box,  :root .kpi-ico.ico-amber  { background: var(--accent-3-soft) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.25) !important; }
:root .kpi.violet .icon-box, :root .kpi-ico.ico-violet { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: rgba(139,92,246,0.25) !important; }
:root .kpi-ico.ico-good      { background: var(--good-soft) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.25) !important; }
:root .kpi-ico.ico-bad       { background: var(--bad-soft) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.25) !important; }

/* card-box legacy KPI border-left -> swap rainbow for single accent */
:root .card-box.bg-primary,
:root .card-box.bg-info,
:root .card-box.bg-violet { border-left: 2px solid var(--accent) !important; }
:root .card-box.bg-success,
:root .card-box.bg-green   { border-left: 2px solid var(--good) !important; }
:root .card-box.bg-danger  { border-left: 2px solid var(--bad) !important; }
:root .card-box.bg-warning { border-left: 2px solid var(--accent-3) !important; }
:root .card-box.bg-dark    { border-left: 2px solid var(--border-strong) !important; }

/* Tabs (nav-tabs) - Linear-grade segmented */
:root .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    gap: 0 !important;
    padding: 0;
}
:root .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-size: var(--t-md, 14px) !important;
    font-weight: 600 !important;
    color: var(--text-3) !important;
    background: transparent !important;
    margin-bottom: -1px;
}
:root .nav-tabs .nav-link:hover { color: var(--text) !important; background: transparent !important; }
:root .nav-tabs .nav-link.active {
    color: var(--text) !important;
    border-bottom-color: var(--accent) !important;
    background: transparent !important;
}

/* Theme toggle button + icon-box neutral */
.theme-toggle, button.theme-toggle {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    border-radius: var(--r-sm, 10px) !important;
}

/* Modern toolbar restraint - no busy decorations */
.modern-toolbar {
    padding: var(--s-4, 16px) 0 var(--s-5, 20px) !important;
}

/* Container padding - 8px scale */
.content-container, .seller-content, .admin-content, #layoutSidenav_content {
    padding: var(--s-6, 24px) var(--s-8, 32px) var(--s-10, 40px) !important;
}
@media (max-width: 1024px) {
    .content-container, .seller-content, .admin-content, #layoutSidenav_content {
        padding: var(--s-12, 48px) var(--s-4, 16px) var(--s-6, 24px) !important;
    }
}

/* Card hover lift - restrained */
:root .card { transition: border-color .18s ease, transform .12s ease; }
:root .card:hover { border-color: var(--border-strong) !important; }
:root .kpi-card:hover, :root .stat-card:hover { border-color: var(--border-strong) !important; transform: none !important; }

/* Empty state polish */
.empty, .empty-state {
    padding: var(--s-12, 48px) var(--s-6, 24px);
    text-align: center;
    color: var(--text-3);
}
.empty i, .empty-state i { opacity: 0.6; font-size: 20px; }
.empty div, .empty-state div { margin-top: var(--s-3, 12px); font-size: var(--t-md, 14px); }

/* Remove "premium" rainbow pill - make crown subtle */
:root .premium-pill {
    background: var(--accent-3-soft) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245,158,11,0.30) !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Code blocks (credentials) - Linear-style mono */
:root pre, :root code, :root .r-cred-body {
    font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm, 10px) !important;
    color: var(--text) !important;
}

/* Site-wide focus ring discipline */
:root *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-sm, 10px);
}

/* ============================================================
   v26 - PREMIUM COMPONENT LAYER
   Linear / Vercel / Attio / Stripe discipline.
   Loaded last; targets :root for cascade priority.
   ============================================================ */

/* ---------- Typography refinements (Inter, tight tracking) ---------- */
:root body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","cv11","ss01","ss03";
    letter-spacing: -0.005em;
    background: var(--bg-1);
    color: var(--text-2);
}
:root h1, :root h2, :root h3 { color: var(--text); letter-spacing: -0.025em; }
:root h1 { font-size: clamp(22px, 1.4rem + 0.4vw, 30px); font-weight: 700; line-height: 1.15; }
:root h2 { font-size: clamp(18px, 1.1rem + 0.3vw, 22px); font-weight: 600; line-height: 1.2; }
:root h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }

/* ---------- Cards - Stripe/Linear flat surface with inset highlight ---------- */
:root .card {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    box-shadow: var(--shadow-1) !important;
    padding: var(--s-6, 24px);
    transition: border-color .18s ease, transform .15s ease, background .18s ease;
}
:root .card:hover { border-color: var(--border-strong) !important; }
:root .card.p-0 { padding: 0; }
:root .card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 var(--s-5, 20px); margin-bottom: var(--s-5, 20px);
    border-bottom: 1px solid var(--border);
    gap: var(--s-3, 12px);
}
:root .card-title {
    display: inline-flex; align-items: center; gap: var(--s-2, 8px);
    font-size: var(--t-md, 14px);
    font-weight: 600; color: var(--text);
    letter-spacing: -0.005em;
}
:root .card-title i { color: var(--text-3); font-size: 14px; }

/* ---------- Buttons - refined Linear/Stripe ---------- */
:root .btn {
    display: inline-flex; align-items: center; gap: var(--s-2, 8px);
    height: 36px; padding: 0 var(--s-4, 16px);
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-md, 14px);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease, box-shadow .18s ease;
}
:root .btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
:root .btn:active { transform: translateY(0.5px); }
:root .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
:root .btn-sm, :root .btn.btn-sm { height: 30px; font-size: var(--t-sm, 12px); padding: 0 var(--s-3, 12px); }
:root .btn-lg, :root .btn.btn-lg { height: 42px; font-size: var(--t-lg, 15px); padding: 0 var(--s-5, 20px); }

/* Primary - solid accent, subtle elevation */
:root .btn-primary {
    background: var(--accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-strong) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 1px 2px rgba(0,0,0,0.30) !important;
    font-weight: 500 !important;
}
:root .btn-primary:hover { background: var(--accent-hover) !important; }
:root .btn-primary:active { background: var(--accent-strong) !important; }

/* Ghost / outline */
:root .btn.ghost, :root .btn-ghost, :root .btn-light, :root .btn-dark {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
}
:root .btn.ghost:hover, :root .btn-ghost:hover, :root .btn-light:hover, :root .btn-dark:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Semantic variants - Linear-style tints, no solid blocks */
:root .btn-danger {
    background: rgba(239,68,68,0.10) !important; color: #fda4af !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
}
:root .btn-danger:hover { background: rgba(239,68,68,0.16) !important; }
:root .btn-success {
    background: rgba(16,185,129,0.10) !important; color: #6ee7b7 !important;
    border: 1px solid rgba(16,185,129,0.25) !important;
}
:root .btn-success:hover { background: rgba(16,185,129,0.16) !important; }
:root .btn-warning {
    background: rgba(245,158,11,0.10) !important; color: #fcd34d !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
}
:root .btn-warning:hover { background: rgba(245,158,11,0.16) !important; }

/* ---------- Form controls ---------- */
:root input, :root select, :root textarea,
:root .form-control, :root .form-select {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-md, 14px);
    padding: 0 var(--s-4, 16px);
    height: 38px;
    line-height: 1;
    transition: border-color .15s ease, box-shadow .18s ease, background .15s ease;
}
:root textarea, :root textarea.form-control { padding: var(--s-3, 12px); height: auto; min-height: 96px; line-height: 1.55; }
:root input::placeholder, :root textarea::placeholder { color: var(--muted); }
:root input:focus, :root select:focus, :root textarea:focus,
:root .form-control:focus, :root .form-select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
    background: var(--surface-2) !important;
}
:root label, :root .form-label {
    font-size: var(--t-sm, 12px);
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0;
    text-transform: none;
    display: block;
    margin-bottom: var(--s-2, 8px);
}

/* ---------- Floating sidebar - Linear-style ---------- */
:root aside.sidebar, :root .admin-sidebar {
    position: fixed !important;
    top: var(--sb-margin, 12px) !important;
    bottom: var(--sb-margin, 12px) !important;
    left: var(--sb-margin, 12px) !important;
    width: var(--sb-w, 248px) !important;
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    box-shadow: var(--shadow-1) !important;
    backdrop-filter: none !important;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: width .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}

/* Sidebar nav items - refined */
:root .sidebar a, :root .adm-link, :root .sidebar .nav-link {
    display: flex; align-items: center; gap: var(--s-3, 12px);
    margin: 1px var(--s-2, 8px);
    padding: var(--s-2, 8px) var(--s-3, 12px) !important;
    height: 36px;
    border-radius: 8px !important;
    color: var(--text-3) !important;
    font-size: var(--t-md, 14px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    transition: background .15s ease, color .15s ease;
    position: relative;
}
:root .sidebar a i, :root .adm-link i, :root .sidebar .nav-link i {
    width: 16px; text-align: center; font-size: 14px; color: var(--text-3); flex-shrink: 0;
}
:root .sidebar a:hover, :root .adm-link:hover, :root .sidebar .nav-link:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
:root .sidebar a:hover i, :root .adm-link:hover i { color: var(--text-2) !important; }
:root .sidebar a.active, :root .adm-link.active, :root .sidebar .nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
}
:root .sidebar a.active i, :root .adm-link.active i { color: var(--accent-hover) !important; }
/* Remove the legacy left bar marker - colored background is enough */
:root .adm-link.active::before, :root .sidebar a.active::before { display: none !important; }

/* Sidebar section labels */
:root .adm-section, :root .sidebar .nav-section, :root .sidebar .section-label {
    font-size: var(--t-xs, 11px) !important;
    letter-spacing: 0.06em !important;
    color: var(--muted) !important;
    text-transform: uppercase;
    padding: var(--s-5, 20px) var(--s-4, 16px) var(--s-2, 8px) !important;
    font-weight: 600 !important;
    background: transparent !important;
}
:root .adm-section::after { display: none !important; }  /* remove decorative line */

/* Sidebar profile / brand area */
:root .sidebar .sidebar-header, :root .adm-header {
    padding: var(--s-5, 20px) var(--s-4, 16px) var(--s-4, 16px) !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
}
:root .sidebar .sidebar-user, :root .adm-stats {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: var(--s-3, 12px) !important;
    margin: var(--s-3, 12px);
}

/* Push content to make room for the floating sidebar */
:root .content-container,
:root .seller-content,
:root .admin-content,
:root #layoutSidenav_content {
    margin-left: calc(var(--sb-w, 248px) + var(--sb-margin, 12px) * 2) !important;
    padding: var(--s-6, 24px) var(--s-8, 32px) var(--s-10, 40px) !important;
    max-width: none !important;
    width: auto !important;
}
:root body.sidebar-collapsed .content-container,
:root body.sidebar-collapsed .seller-content,
:root body.sidebar-collapsed .admin-content {
    margin-left: calc(var(--sb-w-collapsed, 72px) + var(--sb-margin, 12px) * 2) !important;
}
:root body.sidebar-is-hidden .content-container,
:root body.sidebar-is-hidden .seller-content,
:root body.sidebar-is-hidden .admin-content { margin-left: var(--s-4, 16px) !important; }
@media (max-width: 1024px) {
    :root .content-container, :root .seller-content, :root .admin-content {
        margin-left: var(--s-4, 16px) !important;
        padding: 64px var(--s-4, 16px) var(--s-6, 24px) !important;
    }
    :root aside.sidebar, :root .admin-sidebar { transform: translateX(calc(-100% - var(--sb-margin, 12px))); }
    :root aside.sidebar.open, :root .admin-sidebar.open { transform: translateX(0); }
}

/* ---------- Top bar refinements ---------- */
:root .topbar, :root .seller-topbar, :root .admin-topbar, :root .navbar-top {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(10px);
    box-shadow: none !important;
}

/* ---------- KPI / metric cards - Stripe-grade ---------- */
:root .kpi-card, :root .stat-card, :root .card-box {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    padding: var(--s-5, 20px) var(--s-6, 24px) !important;
    box-shadow: var(--shadow-1) !important;
    transition: border-color .18s ease, transform .12s ease;
}
:root .kpi-card:hover, :root .stat-card:hover { border-color: var(--border-strong) !important; transform: none !important; }
:root .kpi-val, :root .stat-card .val, :root .qs-val, :root .kpi .value, :root .card-box .inner h3 {
    font-size: clamp(24px, 1.2rem + 1.2vw, 32px) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
    margin: 4px 0 0 !important;
}
:root .kpi-label, :root .stat-card .lbl, :root .qs-lbl, :root .kpi .label, :root .card-box .inner p {
    font-size: var(--t-sm, 12px) !important;
    font-weight: 500 !important;
    color: var(--text-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}
:root .kpi-sub, :root .stat-card .sub, :root .kpi .sub {
    font-size: var(--t-xs, 11px) !important;
    color: var(--muted) !important;
    margin-top: var(--s-2, 8px) !important;
    font-weight: 500 !important;
}

/* Icon boxes - uniform indigo tint, no rainbow */
:root .kpi .icon-box, :root .kpi-ico {
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    border: 1px solid rgba(99,102,241,0.20) !important;
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px !important;
}
:root .card-box .icon {
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    border: 1px solid rgba(99,102,241,0.20) !important;
    border-radius: 10px !important;
}
/* Variant tints (used sparingly, semantic only) */
:root .kpi-ico.ico-good, :root .card-box.bg-success .icon, :root .card-box.bg-green .icon {
    background: var(--good-soft) !important; color: #34d399 !important;
    border-color: rgba(16,185,129,0.22) !important;
}
:root .kpi-ico.ico-bad, :root .card-box.bg-danger .icon {
    background: var(--bad-soft) !important; color: #f87171 !important;
    border-color: rgba(239,68,68,0.22) !important;
}
:root .kpi-ico.ico-amber, :root .card-box.bg-warning .icon {
    background: var(--accent-3-soft) !important; color: #fbbf24 !important;
    border-color: rgba(245,158,11,0.22) !important;
}

/* Kill the left-border bar on legacy card-box variants */
:root .card-box.bg-primary, :root .card-box.bg-info, :root .card-box.bg-violet,
:root .card-box.bg-success, :root .card-box.bg-green,
:root .card-box.bg-danger, :root .card-box.bg-warning, :root .card-box.bg-dark { border-left: 1px solid var(--border) !important; }

/* card-box-footer link */
:root .card-box .card-box-footer {
    margin-top: var(--s-3, 12px);
    padding-top: var(--s-3, 12px);
    border-top: 1px solid var(--border);
    font-size: var(--t-sm, 12px);
    color: var(--text-3);
    font-weight: 500;
}

/* ---------- Tables - Linear-grade ---------- */
:root .table thead th, :root .seller-listing-tbl thead th,
:root .rep-table thead th, :root .sales-tbl thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface) !important;
    color: var(--text-3) !important;
    font-size: var(--t-xs, 11px) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    border-bottom: 1px solid var(--border) !important;
}
:root .table tbody td, :root .seller-listing-tbl tbody td,
:root .rep-table tbody td, :root .sales-tbl tbody td {
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-2);
    font-size: var(--t-md, 14px);
}
:root .table tbody tr:hover, :root .seller-listing-tbl tbody tr:hover,
:root .rep-table tbody tr:hover, :root .sales-tbl tbody tr:hover {
    background: var(--surface-2) !important;
}

/* ---------- Badges ---------- */
:root .badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px;
    padding: 0 var(--s-2, 8px);
    border-radius: var(--r-pill, 999px);
    font-size: var(--t-xs, 11px);
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    box-shadow: none !important;
    letter-spacing: 0;
}
:root .badge-accent, :root .badge-primary {
    background: var(--accent-soft) !important; color: var(--accent-hover) !important;
    border-color: rgba(99,102,241,0.25) !important;
}
:root .badge-good, :root .badge-success {
    background: var(--good-soft) !important; color: #34d399 !important;
    border-color: rgba(16,185,129,0.25) !important;
}
:root .badge-bad, :root .badge-danger {
    background: var(--bad-soft) !important; color: #f87171 !important;
    border-color: rgba(239,68,68,0.25) !important;
}
:root .badge-warning {
    background: var(--accent-3-soft) !important; color: #fbbf24 !important;
    border-color: rgba(245,158,11,0.25) !important;
}

/* ---------- Page-head ---------- */
:root .page-head, :root .modern-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-4, 16px); flex-wrap: wrap;
    padding-bottom: var(--s-5, 20px);
    margin-bottom: var(--s-6, 24px);
    border-bottom: 1px solid var(--border);
}
:root .page-head > div:first-child, :root .modern-page-head > div:first-child { min-width: 0; flex: 1; }
:root .page-head h1, :root .modern-page-head h1 {
    font-size: clamp(22px, 1.4rem + 0.5vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
    color: var(--text) !important;
    margin: 0 0 4px !important;
    line-height: 1.15 !important;
    display: inline-flex; align-items: center; gap: var(--s-3, 12px);
}
:root .page-head h1 i, :root .modern-page-head h1 i { color: var(--accent-hover) !important; font-size: 22px; }
:root .page-head .sub, :root .modern-page-head .sub {
    color: var(--text-3) !important;
    font-size: var(--t-md, 14px) !important;
    margin-top: 2px;
}
:root .page-head .actions, :root .modern-page-head .actions {
    display: flex; gap: var(--s-2, 8px); flex-wrap: wrap; flex-shrink: 0;
}

/* ---------- Tabs (Linear-segmented) ---------- */
:root .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: var(--s-5, 20px) !important;
    display: flex; gap: 0; padding: 0;
}
:root .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    font-size: var(--t-md, 14px) !important;
    font-weight: 500 !important;
    color: var(--text-3) !important;
    background: transparent !important;
    margin-bottom: -1px !important;
}
:root .nav-tabs .nav-link:hover { color: var(--text-2) !important; background: transparent !important; }
:root .nav-tabs .nav-link.active {
    color: var(--text) !important;
    border-bottom-color: var(--accent) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* ---------- Filter pills ---------- */
:root .filter-pills .pill {
    height: 30px;
    padding: 0 var(--s-3, 12px) !important;
    border-radius: 8px !important;
    font-size: var(--t-sm, 12px) !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-3) !important;
    box-shadow: none !important;
}
:root .filter-pills .pill:hover { background: var(--surface-2) !important; color: var(--text-2) !important; }
:root .filter-pills .pill.active {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
    border-color: rgba(99,102,241,0.35) !important;
    font-weight: 600 !important;
}

/* ---------- Pager ---------- */
:root .listing-pager .pager-num, :root .listing-pager .pager-arrow {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-3) !important;
    box-shadow: none !important;
    height: 32px;
    min-width: 32px;
    border-radius: 8px !important;
    font-size: var(--t-sm, 12px) !important;
    font-weight: 500 !important;
}
:root .listing-pager .pager-num:hover, :root .listing-pager .pager-arrow:hover:not([disabled]) {
    background: var(--surface-2) !important; color: var(--text) !important;
}
:root .listing-pager .pager-num.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* ---------- Modal ---------- */
:root .digz-modal-bg, :root .modal {
    backdrop-filter: blur(8px);
    background: rgba(8,10,16,0.6) !important;
}
:root .digz-modal-card, :root .modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-xl, 24px) !important;
    box-shadow: var(--shadow-3) !important;
}

/* ---------- Hairlines ---------- */
:root hr, :root .hr {
    border: 0; border-top: 1px solid var(--border);
    margin: var(--s-6, 24px) 0;
}

/* ---------- Meta pills (used by topbar/badges in legacy code) ---------- */
:root .meta-pill {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-3) !important;
    border-radius: var(--r-pill, 999px) !important;
    padding: 4px 10px !important;
    font-size: var(--t-xs, 11px) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
:root .meta-pill i { color: var(--text-3) !important; }

/* ---------- Theme toggle neutral ---------- */
:root .theme-toggle, :root button.theme-toggle {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

/* ---------- Premium pill - subtle amber ---------- */
:root .premium-pill {
    background: var(--accent-3-soft) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245,158,11,0.30) !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: var(--t-xs, 11px) !important;
}

/* ---------- Code / credentials ---------- */
:root pre, :root code, :root .r-cred-body {
    font-family: "JetBrains Mono","Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: var(--t-sm, 12px) !important;
}

/* ---------- Site-wide focus ring ---------- */
:root *:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px; }

/* ---------- Skeleton shimmer ---------- */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 8px;
    color: transparent;
    user-select: none;
}

/* ---------- Misc legacy normalization ---------- */
:root .alert { border-radius: 12px; padding: var(--s-3, 12px) var(--s-4, 16px); font-size: var(--t-md, 14px); }
:root .alert ul { margin: 0; padding-left: 1.1rem; line-height: 1.7; }

/* ============================================================
   v27 - Admin pages polish - DataTables + legacy filter rows
   Fixes the color clash on /admin/* pages that mix Bootstrap +
   DataTables + raw <h1>. Targets actual legacy markup precisely.
   ============================================================ */

/* ---------- Naked h1 page header on admin pages ---------- */
:root .admin-content .container-fluid > h1,
:root #layoutSidenav_content .container-fluid > h1 {
    font-size: clamp(22px, 1.4rem + 0.5vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
    color: var(--text) !important;
    margin: 0 0 var(--s-6, 24px) !important;
    padding-bottom: var(--s-5, 20px) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex; align-items: center; gap: var(--s-3, 12px);
}

/* H3 follow-up subtitle on admin sales pages */
:root .admin-content .container-fluid > h3,
:root #layoutSidenav_content .container-fluid > h3 {
    font-size: var(--t-md, 14px) !important;
    color: var(--text-3) !important;
    font-weight: 500 !important;
    margin: -16px 0 var(--s-5, 20px) !important;
    letter-spacing: 0 !important;
}
:root .admin-content .container-fluid > h3 b,
:root #layoutSidenav_content .container-fluid > h3 b {
    color: var(--text-2) !important;
    font-weight: 600;
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 6px;
}

/* ---------- Inline filter button rows ---------- */
/* Legacy admin pages put filter buttons as bare <a class="btn btn-dark btn-sm">
   directly in the markup. Wrap them visually so they look like a Linear-grade
   segmented filter row. */
:root #menu, :root #layoutSidenav_content #menu, :root .admin-content #menu {
    display: flex; gap: var(--s-2, 8px); flex-wrap: wrap;
    margin-bottom: var(--s-5, 20px);
    padding: 0 !important;
}
:root #menu > a.btn,
:root #menu > .btn-group,
:root #menu > br { /* hide raw <br> spacers between buttons */ }
:root #menu > br { display: none; }
:root #menu > a.btn.btn-sm {
    height: 32px;
    padding: 0 12px;
    border-radius: 10px !important;
    font-size: var(--t-sm, 12px) !important;
    font-weight: 500 !important;
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border-strong) !important;
    text-decoration: none;
    box-shadow: none !important;
}
:root #menu > a.btn.btn-sm:hover {
    background: var(--surface-3) !important;
    color: var(--text) !important;
}
/* Reuse Bootstrap variant classes to convey filter target without screaming */
:root #menu > a.btn-dark    { background: var(--surface-2) !important; color: var(--text-2) !important; }
:root #menu > a.btn-primary { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: rgba(99,102,241,0.30) !important; }
:root #menu > a.btn-success { background: var(--good-soft) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.30) !important; }
:root #menu > a.btn-danger  { background: var(--bad-soft) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.30) !important; }
:root #menu > a.btn-warning { background: var(--accent-3-soft) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.30) !important; }
:root #menu > a.btn-info    { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: rgba(99,102,241,0.30) !important; }

/* ---------- DataTables wrapper - full theme ---------- */
:root .dataTables_wrapper {
    margin-top: var(--s-3, 12px);
}
:root .dataTables_wrapper .row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-3, 12px);
    margin: 0 0 var(--s-3, 12px) !important;
}
:root .dataTables_wrapper .row > [class*="col-"] {
    flex: 1 1 auto; min-width: 0; padding: 0 !important;
}

/* DataTables length select ("Show 25 entries") */
:root .dataTables_length {
    color: var(--text-3); font-size: var(--t-sm, 12px); font-weight: 500;
    display: flex; align-items: center; gap: var(--s-2, 8px);
    margin: 0 !important;
}
:root .dataTables_length label {
    margin: 0 !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
    color: var(--text-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
:root .dataTables_length select,
:root .dataTables_wrapper select.form-control,
:root select[name="example_length"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: var(--t-sm, 12px) !important;
    height: 30px !important;
    padding: 0 28px 0 10px !important;
    line-height: 1 !important;
    margin: 0 4px !important;
}

/* DataTables search input */
:root .dataTables_filter {
    text-align: right;
    color: var(--text-3); font-size: var(--t-sm, 12px);
    margin: 0 !important;
}
:root .dataTables_filter label {
    margin: 0 !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    color: var(--text-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
:root .dataTables_filter input,
:root .dataTables_filter input[type="search"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: var(--t-sm, 13px) !important;
    height: 32px !important;
    padding: 0 12px !important;
    margin-left: 4px !important;
    width: 240px !important;
    max-width: 100%;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .18s ease;
}
:root .dataTables_filter input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
:root .dataTables_filter input::placeholder { color: var(--muted) !important; }

/* DataTables info text */
:root .dataTables_info {
    color: var(--text-3) !important;
    font-size: var(--t-sm, 12px) !important;
    padding: var(--s-3, 12px) 0 0 !important;
    margin: 0 !important;
}

/* DataTables pagination */
:root .dataTables_paginate {
    display: flex; justify-content: flex-end; gap: 4px;
    padding-top: var(--s-3, 12px) !important;
    margin: 0 !important;
}
:root .dataTables_paginate .paginate_button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px !important; min-width: 32px !important;
    padding: 0 var(--s-3, 12px) !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-3) !important;
    font-size: var(--t-sm, 12px) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
:root .dataTables_paginate .paginate_button:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
:root .dataTables_paginate .paginate_button.current,
:root .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
:root .dataTables_paginate .paginate_button.disabled,
:root .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4 !important;
    background: transparent !important;
    color: var(--text-3) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
}

/* Page-length entries text gap */
:root .dataTables_length, :root .dataTables_filter, :root .dataTables_info, :root .dataTables_paginate {
    background: transparent;
}

/* ---------- Tables: kill the legacy striping fighting the theme ---------- */
:root .table.table-striped tbody tr:nth-of-type(odd),
:root .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;  /* let theme hover handle */
}
:root .table.table-striped tbody tr:hover,
:root .table-striped tbody tr:hover { background: var(--surface-2) !important; }

/* table-bordered: thin hairlines only */
:root .table.table-bordered,
:root .table-bordered {
    border: 1px solid var(--border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--r-md, 14px);
    overflow: hidden;
}
:root .table.table-bordered td,
:root .table.table-bordered th,
:root .table-bordered td, :root .table-bordered th {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
}
:root .table.table-bordered tbody tr:last-child td,
:root .table.table-bordered tbody tr:last-child th { border-bottom: none !important; }

/* Tables wrapped in a card stay borderless on the outside */
:root .card > .table-responsive, :root .card .dataTables_wrapper { margin: -8px 0 0; }
:root .card > .dataTables_wrapper .table-bordered { border: none !important; border-radius: 0; }

/* Wrap a raw table-responsive in a quiet card-style container */
:root .admin-content .table-responsive,
:root #layoutSidenav_content .table-responsive,
:root .seller-content .table-responsive {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-1) !important;
    padding: 0 !important;
}

/* ---------- Cell alignment helpers (Bootstrap legacy) ---------- */
:root .table .align-middle, :root .table td.align-middle, :root .table th.align-middle {
    vertical-align: middle !important;
}

/* ---------- <font color=...> and inline <font face=...> normalization ---------- */
:root font[color], :root font[face], :root font[size] {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ---------- show_order modal table cells ---------- */
:root .digz-modal-body table.table.text-dark { color: var(--text-2) !important; }
:root .digz-modal-body table.table.text-dark td {
    color: var(--text-2) !important;
    border-bottom: 1px solid var(--border);
}
:root .digz-modal-body table.table.text-dark td:first-child { color: var(--text-3) !important; font-weight: 500; }
:root .digz-modal-body table.table.text-dark a { color: var(--accent-hover) !important; }

/* ---------- Description-block (legacy stat tile) ---------- */
:root .description-block {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    padding: var(--s-5, 20px) !important;
    text-align: center;
    box-shadow: var(--shadow-1);
}
:root .description-block.border-right { border-right: 1px solid var(--border) !important; }
:root .description-header {
    font-size: var(--t-2xl, 20px) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
:root .description-text {
    font-size: var(--t-xs, 11px) !important;
    color: var(--text-3) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}

/* ---------- Alerts inside admin pages - quiet, not loud ---------- */
:root .admin-content .alert,
:root #layoutSidenav_content .alert {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md, 14px) !important;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    font-size: var(--t-md, 14px) !important;
    box-shadow: none !important;
}
:root .admin-content .alert.alert-info, :root .admin-content .alert.bg-info,
:root #layoutSidenav_content .alert.alert-info, :root #layoutSidenav_content .alert.bg-info {
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    border-color: rgba(99,102,241,0.25) !important;
}
:root .admin-content .alert.alert-danger, :root .admin-content .alert.bg-danger,
:root #layoutSidenav_content .alert.alert-danger, :root #layoutSidenav_content .alert.bg-danger {
    background: var(--bad-soft) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,0.25) !important;
}
:root .admin-content .alert.alert-success, :root .admin-content .alert.bg-success,
:root #layoutSidenav_content .alert.alert-success, :root #layoutSidenav_content .alert.bg-success {
    background: var(--good-soft) !important;
    color: #34d399 !important;
    border-color: rgba(16,185,129,0.25) !important;
}
:root .admin-content .alert.alert-warning, :root .admin-content .alert.bg-warning,
:root #layoutSidenav_content .alert.alert-warning, :root #layoutSidenav_content .alert.bg-warning {
    background: var(--accent-3-soft) !important;
    color: #fbbf24 !important;
    border-color: rgba(245,158,11,0.25) !important;
}
:root .admin-content .alert .btn-close, :root #layoutSidenav_content .alert .btn-close {
    background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer;
}
:root .admin-content .alert .btn-close:hover { opacity: 1; }
:root .admin-content .alert.text-light, :root .admin-content .alert.text-dark {
    color: inherit !important;
}

/* ---------- Status badges in legacy table cells ---------- */
:root .table .badge.badge-primary { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: rgba(99,102,241,0.25) !important; }
:root .table .badge.badge-success { background: var(--good-soft) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.25) !important; }
:root .table .badge.badge-danger  { background: var(--bad-soft) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.25) !important; }
:root .table .badge.badge-warning { background: var(--accent-3-soft) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.25) !important; }
:root .table .badge.badge-info    { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: rgba(99,102,241,0.25) !important; }
:root .table .badge.badge-dark    { background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border-strong) !important; }

/* ---------- Flag icons / inline images inside tables ---------- */
:root .table img { border-radius: 3px; vertical-align: middle; }

/* ---------- Container padding cleanup ---------- */
:root .admin-content .container-fluid,
:root #layoutSidenav_content .container-fluid {
    padding: 0 !important;
}
:root .admin-content > main > .container-fluid.p-4,
:root #layoutSidenav_content > main > .container-fluid.p-4 {
    padding: 0 !important;
}

/* ---------- Center wrap utility legacy ---------- */
:root center { display: block; text-align: center; }

/* ============================================================
   v28 - LAYOUT ARCHITECTURE REBUILD
   Fixes the "boxed-in" feeling on buyer item listings.
   Killing nested wrappers, restoring fluid content, adding
   real breathing room to tables and cells.
   ============================================================ */

/* ---------- 1. Kill the Tailwind centered container max-width ---------- */
/* The legacy buyer pages wrap content in `.container mx-auto px-4` which
   constrains to ~1200px AND adds horizontal padding. Override aggressively. */
:root .content-container .container,
:root .content-container .container.mx-auto,
:root .content-container > .container,
:root .content-container > div > .container,
:root .content-container > .flex > .container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- 2. Kill the unused flex wrapper on buyer pages ---------- */
:root body > .flex.min-h-screen { display: block; min-height: auto; }

/* ---------- 3. Unbox the giant outer card on listing pages ---------- */
/* When a .card directly contains a <table>, it's a layout wrapper, not a
   real card. Strip its own padding/border/shadow so each inner section
   (alert, filter form, table) renders as its own properly-spaced section. */
:root .content-container .card.p-4:has(.table-responsive),
:root .content-container .card.p-4:has(table),
:root .content-container .card.p-6:has(.table-responsive),
:root .content-container > div > .card.p-4:has(table),
:root .content-container > .container > .card.p-4:has(table) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------- 4. Each child of the unboxed wrapper becomes its own card ---------- */
/* The instructions alert at the top */
:root .content-container .card.p-4:has(table) > .alert,
:root .content-container .card.p-4:has(.table-responsive) > .alert {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    padding: var(--s-4, 16px) var(--s-6, 24px) !important;
    box-shadow: var(--shadow-1) !important;
    margin: 0 0 var(--s-5, 20px) !important;
    font-size: var(--t-md, 14px);
}
:root .content-container .card.p-4:has(table) > .alert::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--accent-hover); margin-right: 10px;
}

/* The filter form becomes its own card */
:root .content-container .card.p-4:has(table) > form,
:root .content-container .card.p-4:has(.table-responsive) > form {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    padding: var(--s-6, 24px) !important;
    box-shadow: var(--shadow-1) !important;
    margin: 0 0 var(--s-5, 20px) !important;
}

/* The table-responsive becomes its own card with internal table */
:root .content-container .card.p-4:has(table) > .table-responsive,
:root .content-container .card.p-4:has(.table-responsive) > .table-responsive {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    box-shadow: var(--shadow-1) !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible;
}

/* DataTables wrapper inside an unboxed parent - sits in its own card */
:root .content-container .card.p-4:has(table) > .dataTables_wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 20px);
    padding: var(--s-5, 20px) var(--s-6, 24px) !important;
    box-shadow: var(--shadow-1);
    margin: 0 !important;
}

/* ---------- 5. Table - proper breathing room, no nested borders ---------- */
:root .content-container .table,
:root .content-container table.table,
:root .content-container .seller-listing-tbl {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    font-size: var(--t-md, 14px);
}

/* Table header - Linear-style */
:root .content-container .table thead th,
:root .content-container table.table thead th {
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 20px !important;       /* generous horizontal breathing room */
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

/* Table cells - real padding, no left/right borders */
:root .content-container .table tbody td,
:root .content-container .table tbody th,
:root .content-container table.table tbody td,
:root .content-container table.table tbody th {
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-2);
    vertical-align: middle;
    background: transparent;
}
:root .content-container .table tbody tr:last-child td,
:root .content-container .table tbody tr:last-child th {
    border-bottom: none !important;
}

/* Hover - soft, no harsh outline */
:root .content-container .table tbody tr,
:root .content-container table.table tbody tr {
    transition: background .14s ease;
}
:root .content-container .table tbody tr:hover,
:root .content-container table.table tbody tr:hover {
    background: rgba(255,255,255,0.025) !important;
}

/* Strip Bootstrap zebra striping */
:root .content-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}

/* min-w-[1200px] kept for h-scroll, but never forces width when not needed */
:root .content-container .table[class*="min-w-"] { min-width: auto !important; }
@media (min-width: 1280px) {
    :root .content-container .table[class*="min-w-[1200px]"] { min-width: 100% !important; }
}

/* ---------- 6. Inline action buttons in cells (Cart / Buy / Send / Check) ---------- */
:root .content-container .table td .btn,
:root .content-container .table td .cart-btn,
:root .content-container .table td button.btn-sm,
:root .content-container .table td a.btn-sm {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 6px 12px !important;
    height: 28px !important;
    min-height: 28px;
    border-radius: 8px !important;
}

/* ---------- 7. Filter form grid - better spacing & label hierarchy ---------- */
:root .content-container form .grid {
    gap: var(--s-3, 12px) var(--s-4, 16px);
}
:root .content-container form label.block {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-3) !important;
    letter-spacing: 0;
    text-transform: none !important;
    margin-bottom: 6px !important;
}
:root .content-container form .form-control {
    height: 38px;
    font-size: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
}
:root .content-container form .flex.gap-3 { gap: var(--s-2, 8px); margin-top: var(--s-3, 12px); }
:root .content-container form .btn-success {
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid var(--accent-strong) !important;
}
:root .content-container form .btn-success:hover { background: var(--accent-hover) !important; }
:root .content-container form .btn-primary {
    background: transparent !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
}
:root .content-container form .btn-primary:hover { background: var(--surface-2) !important; }

/* ---------- 8. Filter-bar (collapsible "Search & filter") cleanup ---------- */
:root .filter-bar, :root .content-container .filter-bar {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 20px) !important;
    padding: 0 !important;
    box-shadow: var(--shadow-1) !important;
    margin: 0 0 var(--s-5, 20px) !important;
}
:root .filter-bar .filter-toggle {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--text-2) !important;
    padding: var(--s-4, 16px) var(--s-6, 24px) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--t-md, 14px) !important;
    font-weight: 500 !important;
}
:root .filter-bar .filter-toggle:hover { background: rgba(255,255,255,0.02) !important; }
:root .filter-bar .filter-toggle .toggle-ico {
    color: var(--text-3); font-size: 12px; transition: transform .2s ease;
}
:root .filter-bar.open .filter-toggle .toggle-ico { transform: rotate(180deg); }
:root .filter-bar .filter-label { display: none !important; } /* duplicate decoration */
:root .filter-bar .filter-group {
    padding: 0 var(--s-6, 24px) var(--s-5, 20px) !important;
    border-top: 1px solid var(--border);
    padding-top: var(--s-5, 20px) !important;
    display: none;
}
:root .filter-bar.open .filter-group { display: flex !important; flex-wrap: wrap; gap: var(--s-2, 8px); }

/* ---------- 9. Content-container - fluid edge-to-edge padding ---------- */
:root .content-container {
    padding: var(--s-6, 24px) var(--s-8, 32px) var(--s-10, 40px) !important;
}
@media (min-width: 1440px) {
    :root .content-container { padding: var(--s-8, 32px) var(--s-10, 40px) var(--s-12, 48px) !important; }
}
@media (max-width: 1024px) {
    :root .content-container { padding: 64px var(--s-4, 16px) var(--s-6, 24px) !important; }
}

/* ---------- 10. Page-head spacing on listing pages ---------- */
:root .content-container .modern-page-head {
    padding-bottom: var(--s-5, 20px) !important;
    margin-bottom: var(--s-6, 24px) !important;
}

/* ---------- 11. DataTables length/info sit cleanly above/below the table ---------- */
:root .content-container .dataTables_length,
:root .content-container .dataTables_info,
:root .content-container .dataTables_paginate {
    padding: var(--s-3, 12px) var(--s-6, 24px) !important;
}
:root .content-container .dataTables_filter input { width: 280px !important; }

/* ============================================================
   v29 - Sidebar collapse / hide states (forgotten in v26)
   Without these, my :root width rule with !important wins over
   navbar.php's local .sidebar.collapsed width rule, so the
   sidebar shrinks visually but width stays at 248px and the
   content doesn't expand into the freed space.
   ============================================================ */

/* COLLAPSED - sidebar shrinks to icon-only, content expands */
:root aside.sidebar.collapsed,
:root .admin-sidebar.collapsed {
    width: var(--sb-w-collapsed, 72px) !important;
}
:root body.sidebar-collapsed .content-container,
:root body.sidebar-collapsed .seller-content,
:root body.sidebar-collapsed .admin-content,
:root body.sidebar-collapsed #layoutSidenav_content {
    margin-left: calc(var(--sb-w-collapsed, 72px) + var(--sb-margin, 12px) * 2) !important;
}

/* HIDDEN - sidebar fully off-screen, content goes edge-to-edge */
:root aside.sidebar.sidebar-hidden,
:root .admin-sidebar.sidebar-hidden {
    transform: translateX(calc(-100% - var(--sb-margin, 12px) - 4px)) !important;
    box-shadow: none !important;
}
:root body.sidebar-is-hidden .content-container,
:root body.sidebar-is-hidden .seller-content,
:root body.sidebar-is-hidden .admin-content,
:root body.sidebar-is-hidden #layoutSidenav_content {
    margin-left: 0 !important;
    padding-left: var(--s-8, 32px) !important;
}
@media (max-width: 1024px) {
    :root body.sidebar-is-hidden .content-container { padding-left: var(--s-4, 16px) !important; }
}

/* The floating "open" button that appears when sidebar is hidden */
:root body.sidebar-is-hidden .sidebar-opener,
:root .sidebar-opener {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-2) !important;
    box-shadow: var(--shadow-2) !important;
    border-radius: 10px !important;
    width: 38px !important; height: 38px !important;
}
:root body.sidebar-is-hidden .sidebar-opener:hover,
:root .sidebar-opener:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-2) !important;
}
:root .sidebar-opener .material-icons { font-size: 20px !important; }

/* When collapsed, only show icons cleanly (kill the residual text wrapping) */
:root .sidebar.collapsed .sidebar-user .user-meta,
:root .sidebar.collapsed .logo-text,
:root .sidebar.collapsed .menu-item span:not(.icon),
:root .sidebar.collapsed .menu-item .arrow,
:root .sidebar.collapsed .menu-item .badge,
:root .sidebar.collapsed .special-item span:not(.icon),
:root .sidebar.collapsed .sub-menu,
:root .sidebar.collapsed .section-title { display: none !important; }
:root .sidebar.collapsed .menu-item, :root .sidebar.collapsed .special-item {
    justify-content: center !important;
    padding: 10px !important;
    margin: 1px 8px !important;
}
:root .sidebar.collapsed .menu-item .icon, :root .sidebar.collapsed .special-item .icon {
    margin-right: 0 !important;
}
:root .sidebar.collapsed .sidebar-user {
    justify-content: center !important;
    padding: 10px !important;
}
:root .sidebar.collapsed .sidebar-header {
    padding: 14px 12px !important;
}
:root .sidebar.collapsed .logo-container {
    justify-content: center !important;
    gap: 0 !important;
}
/* When collapsed, the chevron flips */
:root .sidebar.collapsed .collapse-btn .material-icons {
    transform: rotate(180deg) !important;
}

/* When sidebar is fully hidden, drop the sidebar-opener into a sensible top-left position */
:root .sidebar-opener {
    position: fixed !important;
    top: var(--s-4, 16px) !important;
    left: var(--s-4, 16px) !important;
    z-index: 1100 !important;
}

/* Content-container smooth transition so collapse feels intentional */
:root .content-container,
:root .seller-content,
:root .admin-content,
:root #layoutSidenav_content {
    transition: margin-left .25s cubic-bezier(.4,0,.2,1), padding-left .25s cubic-bezier(.4,0,.2,1) !important;
}
:root aside.sidebar,
:root .admin-sidebar {
    transition: width .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) !important;
}

/* Mobile: sidebar slides off, content fills */
@media (max-width: 1024px) {
    :root aside.sidebar,
    :root .admin-sidebar {
        transform: translateX(calc(-100% - var(--sb-margin, 12px) - 4px));
    }
    :root aside.sidebar.sidebar-open,
    :root .admin-sidebar.sidebar-open {
        transform: translateX(0);
    }
    :root .content-container,
    :root .seller-content,
    :root .admin-content,
    :root #layoutSidenav_content {
        margin-left: 0 !important;
    }
}

/* ============================================================
   v30 - FULL-WIDTH ENFORCEMENT
   Zero empty space on the right. Every wrapper, container,
   row, card, table - forced to 100% width. Kill every legacy
   max-width / fixed-width / fit-content that might pinch the
   layout. Sidebar + content = full viewport always.
   ============================================================ */

/* ---------- Body never overflows horizontally ---------- */
html, body { width: 100%; overflow-x: hidden; }
html { min-height: 100%; }

/* ---------- Page wrappers - fill all available space ---------- */
:root .content-container,
:root .seller-content,
:root .admin-content,
:root #layoutSidenav_content,
:root .seller-shell,
:root .admin-shell,
:root #layoutSidenav {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* When sidebar IS visible, content takes (100vw - sidebar - margins) */
:root .content-container,
:root .seller-content,
:root .admin-content,
:root #layoutSidenav_content {
    width: calc(100vw - var(--sb-w, 248px) - var(--sb-margin, 12px) * 2) !important;
}
:root body.sidebar-collapsed .content-container,
:root body.sidebar-collapsed .seller-content,
:root body.sidebar-collapsed .admin-content,
:root body.sidebar-collapsed #layoutSidenav_content {
    width: calc(100vw - var(--sb-w-collapsed, 72px) - var(--sb-margin, 12px) * 2) !important;
}
:root body.sidebar-is-hidden .content-container,
:root body.sidebar-is-hidden .seller-content,
:root body.sidebar-is-hidden .admin-content,
:root body.sidebar-is-hidden #layoutSidenav_content {
    width: 100vw !important;
    margin-left: 0 !important;
}
@media (max-width: 1024px) {
    :root .content-container,
    :root .seller-content,
    :root .admin-content,
    :root #layoutSidenav_content {
        width: 100vw !important;
        margin-left: 0 !important;
    }
}

/* ---------- Children inside content area always fill 100% ---------- */
:root .content-container > *,
:root .seller-content > main > *,
:root .admin-content > main > *,
:root #layoutSidenav_content > main > *,
:root .seller-content main,
:root .admin-content main,
:root #layoutSidenav_content main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* ---------- Kill ALL .container / .container-* max-widths ---------- */
:root .content-container .container,
:root .content-container .container-fluid,
:root .content-container .container-sm,
:root .content-container .container-md,
:root .content-container .container-lg,
:root .content-container .container-xl,
:root .content-container .container-xxl,
:root .seller-content .container,
:root .seller-content .container-fluid,
:root .admin-content .container,
:root .admin-content .container-fluid,
:root #layoutSidenav_content .container,
:root #layoutSidenav_content .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 auto !important;
}

/* Kill Tailwind max-w-* utility classes if they leak into content */
:root .content-container .max-w-7xl,
:root .content-container .max-w-6xl,
:root .content-container .max-w-5xl,
:root .content-container .max-w-4xl,
:root .content-container .max-w-3xl,
:root .content-container [class*="max-w-["] {
    max-width: 100% !important;
}

/* ---------- Cards & sections always full width within their parent ---------- */
:root .content-container .card,
:root .seller-content .card,
:root .admin-content .card,
:root #layoutSidenav_content .card,
:root .content-container .alert,
:root .seller-content .alert,
:root .admin-content .alert,
:root #layoutSidenav_content .alert,
:root .content-container > form,
:root .content-container .table-responsive,
:root .seller-content .table-responsive,
:root .admin-content .table-responsive,
:root #layoutSidenav_content .table-responsive,
:root .content-container .filter-bar,
:root .seller-content .filter-bar,
:root .admin-content .filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ---------- Tables fill their card ---------- */
:root .content-container table,
:root .seller-content table,
:root .admin-content table,
:root #layoutSidenav_content table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto;
}

/* When a table card needs horizontal scroll on small viewports, allow it
   to overflow inside its own wrapper - but the wrapper itself stays 100%. */
:root .table-responsive { overflow-x: auto; }

/* ---------- DataTables wrapper full width ---------- */
:root .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
:root .dataTables_wrapper > .row {
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- Bootstrap row inside content area fills 100% ---------- */
:root .content-container .row,
:root .seller-content .row,
:root .admin-content .row,
:root #layoutSidenav_content .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto !important;
}

/* ---------- Page head full width ---------- */
:root .page-head,
:root .modern-page-head {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- KPI grid full width ---------- */
:root .kpi-grid,
:root .rep-stats,
:root .dual-grid,
:root .grid,
:root .leaders-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Hard fallback: nothing in the content area can exceed its parent ---------- */
:root .content-container *,
:root .seller-content *,
:root .admin-content *,
:root #layoutSidenav_content * {
    max-width: 100%;
}
/* Buttons / badges / pills are allowed their natural width */
:root .btn, :root .badge, :root .pill, :root .meta-pill { max-width: none !important; }

/* ---------- Cards in unboxed listing pages get true full width ---------- */
:root .content-container > div > .card,
:root .content-container > .container > .card,
:root .content-container > div > div > .card {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Container-fluid p-4 (Bootstrap admin / seller wrapper) ---------- */
:root .container-fluid.p-4,
:root .container-fluid.px-4 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Sidebar opener stays on top of everything ---------- */
:root .sidebar-opener { z-index: 1100 !important; }

/* ---------- Belt-and-suspenders: ensure aside.sidebar respects collapsed/hidden ---------- */
:root aside.sidebar { box-sizing: border-box; }
:root aside.sidebar.sidebar-hidden { width: var(--sb-w, 248px) !important; }

/* ============================================================
   v32 - Payment-option chips (admin/withdrawals.php)
   Stylish horizontal cards with a check pill on the right.
   Replaces the old form-check vertical stack.
   ============================================================ */
:root .payopt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}
@media (min-width: 720px) {
    :root .payopt-grid { grid-template-columns: 1fr 1fr; }
}
:root .payopt {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 14px;
    background: var(--surface, #151922);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
    user-select: none;
}
:root .payopt:hover {
    border-color: var(--border-strong, #3a4150);
    background: var(--surface-2, #1b2230);
}
:root .payopt input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
:root .payopt-icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2, #1b2230);
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 10px;
    color: var(--text-2, #c7cad1);
    font-size: 1.05rem;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
:root .payopt-body {
    display: flex; flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
:root .payopt-title {
    font-weight: 600;
    color: var(--text, #f1f3f5);
    font-size: .95rem;
}
:root .payopt-sub {
    font-size: .76rem;
    color: var(--text-3, #8d93a0);
    margin-top: 2px;
}
:root .payopt-check {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 8px;
    color: transparent;
    background: transparent;
    transition: all .15s ease;
    font-size: .78rem;
}
:root .payopt.is-on,
:root .payopt:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface, #151922));
}
:root .payopt.is-on .payopt-icon,
:root .payopt:has(input:checked) .payopt-icon {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
    background: var(--accent-soft, rgba(99,102,241,.13));
    color: var(--accent, #6366f1);
}
:root .payopt.is-on .payopt-check,
:root .payopt:has(input:checked) .payopt-check {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
}

/* ============================================================
   v32 - Seller edit form (admin/sellers.php?edit)
   Two-column grid with grouped sections, plus chip-style section toggles.
   ============================================================ */
:root .seller-edit-form { padding: 1rem 0; }
:root .seller-edit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 980px) {
    :root .seller-edit-grid { grid-template-columns: 1fr 1fr; }
}
:root .seller-edit-col {
    display: flex; flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
:root .seller-edit-section {
    background: var(--surface, #151922);
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-1, 0 1px 0 rgba(255,255,255,.02));
}
:root .seller-edit-heading {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3, #8d93a0);
    margin: 0 0 .9rem 0;
    font-weight: 700;
}
:root .seller-edit-form .form-group { margin-bottom: 1rem; }
:root .seller-edit-form .form-group:last-child { margin-bottom: 0; }
:root .seller-edit-form .form-label {
    display: block;
    font-size: .82rem;
    color: var(--text-2, #c7cad1);
    margin-bottom: .35rem;
    font-weight: 500;
}
:root .seller-edit-form .form-control {
    background: var(--surface-2, #1b2230);
    border: 1px solid var(--border, #2a2f3a);
    color: var(--text, #f1f3f5);
    border-radius: 10px;
    padding: .55rem .75rem;
    font-size: .92rem;
    width: 100%;
    transition: border-color .15s ease, background .15s ease;
}
:root .seller-edit-form .form-control:focus {
    outline: none;
    border-color: var(--accent, #6366f1);
    background: var(--surface, #151922);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(99,102,241,.13));
}
:root .seller-edit-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
:root .section-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
}
:root .section-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--surface-2, #1b2230);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
}
:root .section-chip:hover {
    border-color: var(--border-strong, #3a4150);
    transform: translateY(-1px);
}
:root .section-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
:root .section-chip-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface, #151922);
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 8px;
    color: var(--text-3, #8d93a0);
    font-size: .82rem;
    transition: all .15s ease;
}
:root .section-chip-name {
    font-size: .88rem;
    color: var(--text-2, #c7cad1);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:root .section-chip-check {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong, #3a4150);
    border-radius: 5px;
    color: transparent;
    font-size: .62rem;
    transition: all .15s ease;
}
:root .section-chip.is-on,
:root .section-chip:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #6366f1) 9%, var(--surface-2, #1b2230));
}
:root .section-chip.is-on .section-chip-icon,
:root .section-chip:has(input:checked) .section-chip-icon {
    background: var(--accent-soft, rgba(99,102,241,.13));
    border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
    color: var(--accent, #6366f1);
}
:root .section-chip.is-on .section-chip-name,
:root .section-chip:has(input:checked) .section-chip-name {
    color: var(--text, #f1f3f5);
}
:root .section-chip.is-on .section-chip-check,
:root .section-chip:has(input:checked) .section-chip-check {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
}
:root .seller-edit-actions {
    display: flex; gap: .6rem;
    margin-top: 1.25rem;
}
:root .btn-ghost {
    background: transparent;
    border: 1px solid var(--border, #2a2f3a);
    color: var(--text-2, #c7cad1);
    padding: .5rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all .15s ease;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .9rem;
}
:root .btn-ghost:hover {
    border-color: var(--border-strong, #3a4150);
    color: var(--text, #f1f3f5);
    background: var(--surface, #151922);
}