/* ═══════════════════════════════════════════════════════════════
   FZ Flips Portal v8 — Complete Theme System
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables — Dark Theme ──────────────────────────────── */
:root {
  --bg:          #0f1523;
  --bg-2:        #141d2e;
  --bg-card:     #1a2236;
  --bg-card-2:   #1f2940;
  --border:      rgba(255,255,255,.10);
  --border-2:    rgba(255,255,255,.18);
  --blue:        #3b82f6;
  --blue-light:  #60a5fa;
  --blue-glow:   rgba(59,130,246,.18);
  --blue-glow-2: rgba(59,130,246,.10);
  --green:       #10b981;
  --green-light: #34d399;
  --red:         #ef4444;
  --amber:       #f59e0b;
  --purple:      #8b5cf6;
  --cyan:        #06b6d4;
  --pink:        #ec4899;
  --green-dim:   rgba(16,185,129,.14);
  --red-dim:     rgba(239,68,68,.14);
  --amber-dim:   rgba(245,158,11,.14);
  --purple-dim:  rgba(139,92,246,.14);
  --blue-dim:    rgba(59,130,246,.14);
  --cyan-dim:    rgba(6,182,212,.14);
  /* DARK: ALL text is white/light */
  --text-1:      #f0f4f8;
  --text-2:      #c4d1e0;
  --text-3:      #8fa3bc;
  --sidebar-w:   264px;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 4px 24px rgba(0,0,0,.5);
  --transition:  all .2s cubic-bezier(.4,0,.2,1);
  --surface-2:   var(--bg-card);
  --fs24: 24px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { color: var(--text-1); }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-1) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* GLOBAL: Every text element in dark mode is white/light */
h1,h2,h3,h4,h5,h6,p,span,div,label,td,th,li,a,small,strong,em,
.text-muted, .small { color: inherit; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;  /* dynamic viewport height on browsers that support it — avoids the mobile URL-bar-overlap that hid the logout */
  position: fixed; top: 0; left: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100; overflow: hidden;
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.sidebar-brand {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-brand .logo { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.sidebar-brand .logo-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 10px; display: grid; place-items: center;
  font-size: 16px; color: #fff;
  box-shadow: 0 4px 14px rgba(59,130,246,.4);
}
.sidebar-brand .logo-text { font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; transition: opacity .2s; }
.sidebar-brand .logo-text span { color: var(--blue-light); }
.sidebar-brand .logo-sub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; white-space: nowrap; }
.sidebar-collapse-btn {
  background: none; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4); border-radius: 6px;
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  cursor: pointer; font-size: 13px; transition: var(--transition);
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar.collapsed .sidebar-brand { flex-direction: column; padding: 14px 10px; gap: 10px; }
.sidebar.collapsed .sidebar-collapse-btn { width: 100%; height: 28px; }
.sidebar.collapsed .logo-text, .sidebar.collapsed .logo-sub { opacity: 0; width: 0; }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px; }
.nav-section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(255,255,255,.3);
  padding: 14px 8px 5px; white-space: nowrap;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.6);
  text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: var(--transition); margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; position: relative;
}
.nav-link i { font-size: 15px; width: 18px; flex-shrink: 0; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { background: var(--blue-glow); color: var(--blue-light); font-weight: 600; }
.nav-link.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:65%; background:var(--blue); border-radius:0 3px 3px 0; }
.nav-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 36px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.4); text-decoration: none; font-size: 12.5px;
  transition: var(--transition); margin-bottom: 1px;
  white-space: nowrap; overflow: hidden;
}
.nav-sub-link i { font-size: 13px; width: 15px; flex-shrink: 0; }
.nav-sub-link:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); }
.nav-sub-link.active { color: var(--blue-light); }
.nav-link.danger { color: #f87171; }
.nav-link.danger:hover { background: rgba(239,68,68,.1); color: #fca5a5; }
.nav-badge { margin-left:auto; background:rgba(59,130,246,.25); color:var(--blue-light); font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px; flex-shrink:0; }
.nav-label { transition: opacity .2s, width .2s; }
/* Collapsed */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-badge, .sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-sub { opacity:0; width:0; overflow:hidden; pointer-events:none; }
.sidebar.collapsed .nav-link, .sidebar.collapsed .nav-sub-link { justify-content:center; padding:9px; }
.sidebar.collapsed .nav-link i, .sidebar.collapsed .nav-sub-link i { margin:0; }
.sidebar.collapsed .sidebar-footer { padding: 10px; }
.sidebar.collapsed .theme-toggle { justify-content: center; }
.sidebar-footer { padding:10px; border-top:1px solid var(--border); flex-shrink:0; }
.sidebar-ops { padding:8px 12px; border-top:1px solid var(--border); flex-shrink:0; }
.op-item { margin-bottom: 6px; }
.prog { height:4px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.prog-fill { height:100%; border-radius:99px; background:var(--blue); transition:width .5s ease; }
.prog-fill.green { background:var(--green); } .prog-fill.blue { background:var(--blue); }
.prog-fill.amber { background:var(--amber); } .prog-fill.red { background:var(--red); }
.theme-toggle { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; background:none; border:none; cursor:pointer; color:rgba(255,255,255,.4); font-size:13px; width:100%; text-align:left; transition:background .15s; }
.theme-toggle:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); }
.theme-toggle i { font-size:14px; }
.toggle-switch { margin-left:auto; width:34px; height:18px; border-radius:99px; background:rgba(255,255,255,.12); position:relative; flex-shrink:0; }
.toggle-switch::after { content:''; position:absolute; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.5); top:3px; left:3px; transition:transform .25s; }
/* Mobile hamburger */
.mobile-hamburger { display:none; position:fixed; top:14px; left:14px; z-index:200; background:var(--bg-card); border:1px solid var(--border); color:#fff; border-radius:8px; width:40px; height:40px; font-size:18px; cursor:pointer; place-items:center; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99; backdrop-filter:blur(2px); }
.sidebar-overlay.show { display:block; }

/* ── MOBILE / TABLET — Full sidebar fix ─────────────────────── */
@media (max-width: 991px) {
  .mobile-hamburger { display: grid; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 150;
    width: var(--sidebar-w) !important; /* Always full width when open */
    /* Fix: mobile browsers (Safari/Chrome) render 100vh taller than the
       visible viewport when the URL bar is shown, which pushes the logout
       button off-screen. Use 100dvh (dynamic viewport height) with a 100vh
       fallback so the sidebar exactly fits the visible area. */
    height: 100vh;
    height: 100dvh;
    /* Support iOS notch / bottom bars */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }
  .main { margin-left: 0 !important; padding: 16px 14px 20px; padding-top: 62px; }
  /* When mobile sidebar open, restore all nav labels */
  .sidebar.mobile-open .nav-label,
  .sidebar.mobile-open .nav-section,
  .sidebar.mobile-open .nav-badge,
  .sidebar.mobile-open .logo-text,
  .sidebar.mobile-open .logo-sub { opacity: 1 !important; width: auto !important; overflow: visible !important; pointer-events: auto !important; }
  .sidebar.mobile-open .nav-link,
  .sidebar.mobile-open .nav-sub-link { justify-content: flex-start !important; padding: 8px 10px !important; }
  .sidebar.mobile-open .nav-link i,
  .sidebar.mobile-open .nav-sub-link i { margin: 0 !important; }
  /* Guarantee the logout / footer / theme toggle stay visible even on
     tall menus by letting the nav scroll and pinning the footer. */
  .sidebar-nav      { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .sidebar-footer,
  .sidebar-ops      { flex-shrink: 0 !important; }
}
/* Extra-short viewports (landscape phones): tighten spacing so the
   nav+footer fit without cropping */
@media (max-width: 991px) and (max-height: 620px) {
  .sidebar .nav-link, .sidebar .nav-sub-link { padding-top: 6px !important; padding-bottom: 6px !important; }
  .sidebar-brand { padding: 12px 16px 10px !important; }
  .sidebar-footer { padding: 8px 10px !important; }
}

/* ════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════════════ */
.main { margin-left:var(--sidebar-w); padding:24px 28px; min-height:100vh; transition:margin-left .25s cubic-bezier(.4,0,.2,1); }
.sidebar.collapsed ~ .main { margin-left: 60px; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-title { font-size: 21px; font-weight: 700; color: var(--text-1); letter-spacing: -.3px; }
.page-subtitle { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.page-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* ── Cards ─────────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.card-header { padding:12px 18px; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text-1); display:flex; align-items:center; justify-content:space-between; background:var(--bg-card); }
.card-hd { padding:11px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; color:var(--text-1); }
.card-body { padding:18px; }

/* ── KPI / Stat boxes — SMALL compact ─────────────────────── */
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s;
}
.kpi:hover { border-color: var(--border-2); }
.kpi-icon { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.kpi-val { font-size: 20px; font-weight: 700; color: var(--text-1); line-height: 1.15; }
.kpi-lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi-sub { font-size: 11px; color: var(--text-3); }
/* Stat mini boxes for all value displays */
.stat-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 14px; }
.stat-box .val { font-size:18px; font-weight:700; color:var(--text-1); }
.stat-box .lbl { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.fs24 { font-size:24px !important; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; text-decoration:none; transition:var(--transition); white-space:nowrap; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#2563eb; }
.btn-outline { background:transparent; border:1px solid var(--border-2); color:var(--text-2); }
.btn-outline:hover:not(:disabled) { border-color:var(--blue); color:var(--text-1); background:var(--blue-glow); }
.btn-ghost { background:transparent; color:var(--text-3); }
.btn-ghost:hover:not(:disabled) { background:rgba(255,255,255,.07); color:var(--text-1); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover:not(:disabled) { background:#059669; }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:6px; }

/* ── Table ─────────────────────────────────────────────────── */
.table-modern { width:100%; border-collapse:collapse; }
.table-modern thead th { padding:9px 13px; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); background:var(--bg-card-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.table-modern tbody td { padding:10px 13px; border-bottom:1px solid var(--border); color:var(--text-2); font-size:13px; vertical-align:middle; }
.table-modern tbody tr:last-child td { border-bottom:none; }
.table-modern tbody tr:hover td { background:rgba(255,255,255,.025); color:var(--text-1); }
.tbl { width:100%; border-collapse:collapse; }
.tbl thead th { padding:8px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); border-bottom:1px solid var(--border); }
.tbl tbody td { padding:9px 12px; font-size:12px; border-bottom:1px solid var(--border); color:var(--text-2); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover td { background:rgba(255,255,255,.03); }
.table-responsive { overflow-x:auto; }

/* ── Form controls ─────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px; padding: 8px 12px;
  color: var(--text-1) !important;
  font-size: 13px; font-family: inherit;
  width: 100%; transition: border-color .2s;
}
.form-control:focus, .form-select:focus { outline:none; border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(59,130,246,.14) !important; background:rgba(255,255,255,.08) !important; }
.form-control::placeholder { color:var(--text-3) !important; }
.form-label { font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; display:block; }
.input-group-text { background:rgba(255,255,255,.06); border:1px solid var(--border-2); color:var(--text-3); border-radius:8px; padding:8px 10px; font-size:13px; }
.form-text { font-size:11px; color:var(--text-3); margin-top:4px; }

/* ── Nav tabs (Bootstrap compat) ─────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border); display:flex; gap:2px; margin-bottom:20px; flex-wrap:wrap; }
.nav-tabs .nav-link { padding:8px 14px; border-radius:8px 8px 0 0; font-size:13px; color:var(--text-3); text-decoration:none; border:1px solid transparent; transition:var(--transition); }
.nav-tabs .nav-link:hover { color:var(--text-2); background:rgba(255,255,255,.04); }
.nav-tabs .nav-link.active { color:var(--text-1); background:var(--bg-card); border-color:var(--border) var(--border) var(--bg-card); font-weight:600; }
.tab-content > .tab-pane { display:none; }
.tab-content > .tab-pane.show.active { display:block; }

/* ── Badges ────────────────────────────────────────────────── */
.badge { padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.2px; }
.badge-green { background:rgba(16,185,129,.18); color:#34d399; }
.badge-blue  { background:rgba(59,130,246,.18); color:var(--blue-light); }
.badge-amber { background:rgba(245,158,11,.18); color:#fbbf24; }
.badge-red   { background:rgba(239,68,68,.18); color:#f87171; }
.badge-neutral { background:rgba(100,116,139,.18); color:#94a3b8; }
.badge-active { background:rgba(16,185,129,.15); color:#34d399; }
.badge-draft  { background:rgba(245,158,11,.15); color:#fbbf24; }
.badge-error  { background:rgba(239,68,68,.15); color:#f87171; }
.badge-ended  { background:rgba(100,116,139,.15); color:#94a3b8; }
.bg-secondary { background:rgba(100,116,139,.2) !important; color:var(--text-3) !important; }
.pos { color:var(--green) !important; } .neg { color:var(--red) !important; }
.text-amber { color:var(--amber); } .text-pink { color:var(--pink); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert-banner { display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:10px; font-size:13px; font-weight:500; background:rgba(59,130,246,.12); color:var(--blue-light); border:1px solid rgba(59,130,246,.2); }
.alert-banner.success { background:rgba(16,185,129,.12); color:#34d399; border-color:rgba(16,185,129,.2); }
.alert-banner.danger  { background:rgba(239,68,68,.12); color:#f87171; border-color:rgba(239,68,68,.2); }
.alert-banner.warning { background:rgba(245,158,11,.12); color:#fbbf24; border-color:rgba(245,158,11,.2); }
.alert { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:10px; font-size:13px; }
.alert-blue  { background:var(--blue-glow); border:1px solid rgba(59,130,246,.25); color:var(--blue-light); }
.alert-amber { background:var(--amber-dim); border:1px solid rgba(245,158,11,.25); color:#fbbf24; }

/* ── Progress ──────────────────────────────────────────────── */
.progress-modern { height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; background:var(--blue); transition:width .3s ease; }
.progress-fill.green { background:var(--green); } .progress-fill.amber { background:var(--amber); } .progress-fill.red { background:var(--red); }
.breakdown-bar { height:12px; border-radius:99px; overflow:hidden; display:flex; gap:2px; margin:10px 0; }
.breakdown-legend { display:flex; flex-wrap:wrap; gap:12px; }
.breakdown-legend-item { display:flex; align-items:center; gap:6px; }
.breakdown-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Listing tabs ──────────────────────────────────────────── */
.tabs { display:flex; gap:2px; background:rgba(255,255,255,.05); border-radius:9px; padding:3px; }
.tab-btn { padding:5px 14px; border-radius:7px; text-decoration:none; font-size:12.5px; font-weight:500; color:var(--text-3); transition:var(--transition); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.tab-btn:hover { color:var(--text-2); }
.tab-btn.active { background:var(--bg-card); color:var(--text-1); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.tab-count { background:rgba(255,255,255,.08); color:var(--text-3); font-size:11px; font-weight:600; padding:1px 6px; border-radius:10px; }
.tab-btn.active .tab-count { background:rgba(59,130,246,.2); color:#60a5fa; }

/* ── Bulk bar — sticky top ─────────────────────────────────── */
.bulk-bar { position:sticky; top:0; z-index:50; background:#1e3a5f; border:1px solid rgba(59,130,246,.35); border-radius:10px; padding:10px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 4px 16px rgba(0,0,0,.3); opacity:0; pointer-events:none; transform:translateY(-8px); transition:all .25s; margin-bottom:12px; }
.bulk-bar.show { opacity:1; pointer-events:all; transform:translateY(0); }

/* ── SEO / Score elements ──────────────────────────────────── */
.seo-track { height:4px; width:60px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.seo-fill { height:100%; border-radius:99px; }

/* ── Category dropdown — dark mode fix ─────────────────────── */
.cat-dropdown {
  position:absolute; top:100%; left:0; right:0; z-index:999;
  background:var(--bg-card);
  border:1px solid var(--border-2);
  border-radius:8px; max-height:220px; overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  margin-top:2px;
}
.cat-suggestion {
  padding:9px 14px; cursor:pointer; font-size:13px;
  color:var(--text-1) !important;
  border-bottom:1px solid var(--border);
  transition:background .1s;
}
.cat-suggestion:last-child { border-bottom:none; }
.cat-suggestion:hover { background:rgba(59,130,246,.15); color:var(--blue-light) !important; }
.cat-id { font-size:11px; color:var(--text-3); font-family:'JetBrains Mono',monospace; margin-left:6px; }

/* ── Misc ──────────────────────────────────────────────────── */
.spinner-border { display:inline-block; width:1.2rem; height:1.2rem; border:2px solid rgba(255,255,255,.2); border-top-color:var(--blue); border-radius:50%; animation:spin .65s linear infinite; }
.spinner-border-sm { width:.8rem; height:.8rem; border-width:2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-content { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; color:var(--text-1); }
.modal-header { border-bottom:1px solid var(--border); padding:16px 20px; }
.modal-body { padding:20px; }
.modal-footer { border-top:1px solid var(--border); padding:14px 20px; }
.btn-close { background:none; border:none; color:var(--text-3); font-size:18px; cursor:pointer; line-height:1; }
.btn-close::after { content:'×'; }
.btn-close:hover { color:var(--text-1); }
.form-check-input { width:16px; height:16px; cursor:pointer; }
.stat-num { font-size:20px; font-weight:700; color:var(--text-1); }
.mono { font-family:'JetBrains Mono',monospace; }
.period-tabs { display:flex; gap:2px; background:rgba(255,255,255,.05); border-radius:9px; padding:3px; }
.period-tab { padding:5px 14px; border-radius:7px; text-decoration:none; font-size:12.5px; font-weight:500; color:var(--text-3); transition:var(--transition); }
.period-tab:hover { color:var(--text-2); }
.period-tab.active { background:var(--bg-card); color:var(--text-1); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.job-running-banner { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:12px; padding:16px; }
.ai-progress-panel { background:var(--bg-card-2); border:1px solid var(--border); border-radius:12px; padding:16px; }
.tooltip-val { color:var(--text-1) !important; background:var(--bg-card) !important; }

/* ── Utilities ─────────────────────────────────────────────── */
.d-flex{display:flex!important}.d-none{display:none!important}.d-grid{display:grid}
.row{display:flex;flex-wrap:wrap;margin:-8px}.row.g-2{margin:-5px}.row.g-2>*{padding:5px}.row.g-3{margin:-8px}.row.g-3>*{padding:8px}.row.g-4{margin:-12px}.row.g-4>*{padding:12px}
.col-md-2{width:16.666%}.col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}
.col-md-6{width:50%}.col-md-8{width:66.666%}.col-md-12,.col-12{width:100%}
.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}
.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}
.col-xl-2{width:16.666%}.col-xl-3{width:25%}.col-xl-4{width:33.333%}
.col-6{width:50%}.col-4{width:33.333%}.col-3{width:25%}
@media(max-width:992px){.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8{width:100%}}
@media(max-width:768px){
  .col-md-2,.col-md-4,.col-md-5,.col-md-6,.col-md-8{width:100%}
  .col-md-3{width:50%}
  .col-xl-2,.col-xl-3,.col-xl-4{width:50%}
}
@media(max-width:480px){
  .col-md-3,.col-xl-3{width:50%}
  .col-6{width:50%}
}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:20px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:20px}
.ms-auto{margin-left:auto}.ms-1{margin-left:4px}.ms-2{margin-left:8px}
.me-1{margin-right:4px}.me-2{margin-right:8px}.me-3{margin-right:12px}
.p-2{padding:8px}.p-3{padding:14px}.p-4{padding:20px}
.px-3{padding-left:14px;padding-right:14px}.px-4{padding-left:20px;padding-right:20px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:14px;padding-bottom:14px}
.py-4{padding-top:20px;padding-bottom:20px}.py-5{padding-top:32px;padding-bottom:32px}
.w-100{width:100%}.flex-fill{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}
.text-center{text-align:center}.text-end{text-align:right}.text-start{text-align:left}
.fw6{font-weight:600}.fw-bold{font-weight:700}.fw-semibold{font-weight:600}
.fs10{font-size:10px!important}.fs11{font-size:11px!important}
.fs12{font-size:12px!important}.fs13{font-size:13px!important}.fs14{font-size:14px!important}
.t1{color:var(--text-1)!important}.t2{color:var(--text-2)!important}.t3{color:var(--text-3)!important}
.font-mono{font-family:'JetBrains Mono',monospace!important}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rounded{border-radius:8px}.position-relative{position:relative}.position-fixed{position:fixed}
.overflow-hidden{overflow:hidden}
/* Bootstrap compat */
.text-muted { color: var(--text-3) !important; }
.small { font-size: 12px !important; color: var(--text-3); }
.badge.bg-secondary { background: rgba(100,116,139,.2) !important; color: var(--text-3) !important; }
.pagination { display:flex; gap:2px; list-style:none; padding:0; margin:0; }
.page-item.active .page-link { background:var(--blue); color:#fff; border-color:var(--blue); }
.page-link { padding:5px 10px; border-radius:6px; border:1px solid var(--border); color:var(--text-2); text-decoration:none; font-size:12px; background:transparent; }
.page-link:hover { background:rgba(255,255,255,.06); color:var(--text-1); }

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — Dark sidebar, white content, BLACK text everywhere
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #f1f5f9;
  --bg-2:        #1e293b;
  --bg-card:     #ffffff;
  --bg-card-2:   #f8fafc;
  --border:      rgba(0,0,0,.09);
  --border-2:    rgba(0,0,0,.15);
  --blue:        #2563eb;
  --blue-light:  #1d4ed8;
  --blue-glow:   rgba(37,99,235,.08);
  --blue-glow-2: rgba(37,99,235,.05);
  --green:       #059669;
  --green-light: #047857;
  --red:         #dc2626;
  --amber:       #d97706;
  --purple:      #7c3aed;
  --cyan:        #0891b2;
  --pink:        #db2777;
  --green-dim:   rgba(5,150,105,.10);
  --red-dim:     rgba(220,38,38,.10);
  --amber-dim:   rgba(217,119,6,.10);
  --purple-dim:  rgba(124,58,237,.10);
  --blue-dim:    rgba(37,99,235,.10);
  --cyan-dim:    rgba(8,145,178,.10);
  /* LIGHT: ALL text is BLACK */
  --text-1:      #0f172a;
  --text-2:      #1e293b;
  --text-3:      #475569;
  --surface-2:   #ffffff;
}

[data-theme="light"] body { background:#f1f5f9; color:#0f172a !important; }
[data-theme="light"] * { color: inherit; }

/* Light — sidebar stays dark */
[data-theme="light"] .sidebar { background:#1e293b; border-right-color:rgba(0,0,0,.15); }
[data-theme="light"] .sidebar-brand { border-bottom-color:rgba(255,255,255,.08); }
[data-theme="light"] .nav-section { color:rgba(255,255,255,.3); }
[data-theme="light"] .nav-link { color:rgba(255,255,255,.6); }
[data-theme="light"] .nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
[data-theme="light"] .nav-link.active { background:rgba(59,130,246,.2); color:#93c5fd; }
[data-theme="light"] .nav-sub-link { color:rgba(255,255,255,.4); }
[data-theme="light"] .nav-sub-link:hover { color:rgba(255,255,255,.75); }
[data-theme="light"] .nav-sub-link.active { color:#93c5fd; }
[data-theme="light"] .nav-link.danger { color:#fca5a5; }
[data-theme="light"] .sidebar-footer,.nav-badge { border-top-color:rgba(255,255,255,.08); }
[data-theme="light"] .theme-toggle { color:rgba(255,255,255,.4); }
[data-theme="light"] .theme-toggle:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
[data-theme="light"] .sidebar-ops { border-top-color:rgba(255,255,255,.08); }
[data-theme="light"] .sidebar-collapse-btn { border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.4); }
[data-theme="light"] .sidebar-collapse-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
[data-theme="light"] .mobile-hamburger { background:#fff; border-color:rgba(0,0,0,.1); color:#0f172a; }
[data-theme="light"] .sidebar-overlay { background:rgba(0,0,0,.45); }
[data-theme="light"] .toggle-switch { background:var(--blue); }
[data-theme="light"] .toggle-switch::after { transform:translateX(16px); background:#fff; }

/* Light — main content: ALL text BLACK */
[data-theme="light"] .main { background:#f1f5f9; }
[data-theme="light"] .card { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 8px rgba(0,0,0,.06); color:#0f172a; }
[data-theme="light"] .card-header { background:#fff; border-bottom-color:rgba(0,0,0,.08); color:#0f172a; }
[data-theme="light"] .card-hd { border-bottom-color:rgba(0,0,0,.07); color:#0f172a; }
[data-theme="light"] .card-body { color:#0f172a; }
[data-theme="light"] .kpi { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 6px rgba(0,0,0,.05); color:#0f172a; }
[data-theme="light"] .kpi-val { color:#0f172a; }
[data-theme="light"] .kpi-lbl { color:#475569; }
[data-theme="light"] .kpi-sub { color:#475569; }
[data-theme="light"] .stat-box { background:#fff; border-color:rgba(0,0,0,.08); color:#0f172a; }
[data-theme="light"] .stat-box .val { color:#0f172a; }
[data-theme="light"] .stat-box .lbl { color:#475569; }
[data-theme="light"] .page-title { color:#0f172a; }
[data-theme="light"] .page-subtitle, [data-theme="light"] .page-sub { color:#475569; }
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6 { color:#0f172a !important; }
[data-theme="light"] .fw-bold,[data-theme="light"] .fw6 { color:#0f172a; }
[data-theme="light"] .text-muted,[data-theme="light"] .small { color:#475569 !important; }
[data-theme="light"] .t1 { color:#0f172a !important; }
[data-theme="light"] .t2 { color:#1e293b !important; }
[data-theme="light"] .t3 { color:#475569 !important; }
[data-theme="light"] .pos { color:#059669 !important; }
[data-theme="light"] .neg { color:#dc2626 !important; }
[data-theme="light"] .form-label { color:#1e293b; }
[data-theme="light"] .form-text { color:#475569; }
[data-theme="light"] .form-control,[data-theme="light"] .form-select { background:#fff !important; border-color:rgba(0,0,0,.15) !important; color:#0f172a !important; }
[data-theme="light"] .form-control:focus,[data-theme="light"] .form-select:focus { border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(37,99,235,.10) !important; }
[data-theme="light"] .form-control::placeholder { color:#94a3b8 !important; }
[data-theme="light"] .input-group-text { background:#f8fafc; border-color:rgba(0,0,0,.12); color:#475569; }
[data-theme="light"] .table-modern thead th { background:#f8fafc; color:#475569; border-bottom-color:rgba(0,0,0,.08); }
[data-theme="light"] .table-modern tbody td { color:#1e293b; border-bottom-color:rgba(0,0,0,.05); }
[data-theme="light"] .table-modern tbody tr:hover td { background:#f1f5f9; color:#0f172a; }
[data-theme="light"] .tbl thead th { color:#475569; border-bottom-color:rgba(0,0,0,.07); }
[data-theme="light"] .tbl tbody td { color:#1e293b; border-bottom-color:rgba(0,0,0,.05); }
[data-theme="light"] .tbl tbody tr:hover td { background:#f8fafc; color:#0f172a; }
[data-theme="light"] .btn-outline { border-color:rgba(0,0,0,.15); color:#1e293b; }
[data-theme="light"] .btn-outline:hover { border-color:var(--blue); color:var(--blue); background:rgba(37,99,235,.05); }
[data-theme="light"] .btn-ghost { color:#475569; }
[data-theme="light"] .btn-ghost:hover { background:rgba(0,0,0,.05); color:#0f172a; }
[data-theme="light"] .alert-banner { background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.15); color:var(--blue); }
[data-theme="light"] .alert-banner.success { background:rgba(5,150,105,.06); border-color:rgba(5,150,105,.2); color:#047857; }
[data-theme="light"] .alert-banner.danger  { background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.2); color:#b91c1c; }
[data-theme="light"] .alert-banner.warning { background:rgba(217,119,6,.06); border-color:rgba(217,119,6,.2); color:#92400e; }
[data-theme="light"] .alert-blue  { background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.2); color:var(--blue); }
[data-theme="light"] .alert-amber { background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.2); color:var(--amber); }
[data-theme="light"] .progress-modern { background:rgba(0,0,0,.07); }
[data-theme="light"] .prog { background:rgba(0,0,0,.08); }
[data-theme="light"] .period-tabs { background:rgba(0,0,0,.05); }
[data-theme="light"] .period-tab { color:#475569; }
[data-theme="light"] .period-tab:hover { color:#1e293b; }
[data-theme="light"] .period-tab.active { background:#fff; color:#0f172a; box-shadow:0 1px 4px rgba(0,0,0,.1); }
[data-theme="light"] .tabs { background:rgba(0,0,0,.05); }
[data-theme="light"] .tab-btn { color:#475569; }
[data-theme="light"] .tab-btn:hover { color:#1e293b; }
[data-theme="light"] .tab-btn.active { background:#fff; color:#0f172a; box-shadow:0 1px 4px rgba(0,0,0,.1); }
[data-theme="light"] .tab-count { background:rgba(0,0,0,.06); color:#475569; }
[data-theme="light"] .bulk-bar { background:#fff; border-color:rgba(37,99,235,.25); box-shadow:0 4px 16px rgba(0,0,0,.1); color:#0f172a; }
[data-theme="light"] .modal-content { background:#fff; border-color:rgba(0,0,0,.1); color:#0f172a; }
[data-theme="light"] .modal-header { border-bottom-color:rgba(0,0,0,.08); color:#0f172a; }
[data-theme="light"] .modal-footer { border-top-color:rgba(0,0,0,.08); }
[data-theme="light"] .btn-close { color:#475569; }
[data-theme="light"] .btn-close:hover { color:#0f172a; }
[data-theme="light"] .seo-track { background:rgba(0,0,0,.08); }
[data-theme="light"] .job-running-banner { background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.2); color:#92400e; }
[data-theme="light"] .nav-tabs { border-bottom-color:rgba(0,0,0,.1); }
[data-theme="light"] .nav-tabs .nav-link { color:#475569; }
[data-theme="light"] .nav-tabs .nav-link:hover { color:#0f172a; background:rgba(0,0,0,.03); }
[data-theme="light"] .nav-tabs .nav-link.active { color:#0f172a; background:#fff; border-color:rgba(0,0,0,.08) rgba(0,0,0,.08) #fff; }
[data-theme="light"] .page-link { border-color:rgba(0,0,0,.12); color:#334155; background:#fff; }
[data-theme="light"] .page-link:hover { background:#f1f5f9; color:#0f172a; }
[data-theme="light"] .page-item.active .page-link { background:var(--blue); color:#fff; }
/* Light category dropdown */
[data-theme="light"] .cat-dropdown { background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 8px 24px rgba(0,0,0,.12); }
[data-theme="light"] .cat-suggestion { color:#0f172a !important; border-bottom-color:rgba(0,0,0,.05); }
[data-theme="light"] .cat-suggestion:hover { background:rgba(37,99,235,.07); color:var(--blue) !important; }
[data-theme="light"] .cat-id { color:#475569; }
/* Light breakdown tooltips */
[data-theme="light"] .breakdown-tooltip { background:#0f172a !important; color:#fff !important; }
/* Light code/mono */
[data-theme="light"] code { background:#f1f5f9; color:#0f172a; padding:1px 5px; border-radius:4px; }

/* v17.2 — theme-aware date/month/year selectors on Orders & Analytics */
.theme-select,
select.theme-select,
input.theme-select {
  background-color: var(--bg-card) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border) !important;
}
.theme-select option { background-color: var(--bg-card); color: var(--text-1); }
[data-theme="light"] .theme-select,
[data-theme="light"] select.theme-select,
[data-theme="light"] input.theme-select {
  background-color: #ffffff !important;
  color: #111827 !important;
}
[data-theme="light"] .theme-select option { background-color:#ffffff; color:#111827; }
[data-theme="dark"] .theme-select,
[data-theme="dark"] select.theme-select,
[data-theme="dark"] input.theme-select {
  background-color: #0b1220 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .theme-select option { background-color:#0b1220; color:#f1f5f9; }
/* date picker icon visible in dark mode */
[data-theme="dark"] input.theme-select[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ── Orders Bootstrap table — dark theme support ─────────────────── */
[data-theme="dark"] .table,
[data-theme="dark"] table.table-hover {
  --bs-table-bg: var(--bg-card);
  --bs-table-color: var(--text-1);
  color: var(--text-1);
  background-color: var(--bg-card);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--bg-card);
  color: var(--text-1);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .table thead th {
  background-color: var(--bg-card-2);
  color: var(--text-1);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--bg-card-2);
  color: var(--text-1);
}
[data-theme="dark"] .table tfoot.table-light > tr > * ,
[data-theme="dark"] .table .table-light > * {
  background-color: var(--bg-card-2) !important;
  color: var(--text-1) !important;
}
[data-theme="dark"] .table .text-muted { color: var(--text-3) !important; }
[data-theme="dark"] .table .editable-cell { color: var(--text-1); }
[data-theme="dark"] .table .editable-cell:hover { background: rgba(99,102,241,.15); }
/* light theme keeps Bootstrap defaults (white bg, dark text) */

/* ════════════════════════════════════════════════════════════════
   DARK MODE TEXT VISIBILITY FIXES (Bootstrap utility class fixes)
   ════════════════════════════════════════════════════════════════
   Default is dark mode. Any Bootstrap class that forces dark text
   on light background (table-light, text-dark, bg-light, bg-white,
   alert variants) needs to be overridden so text remains visible. */

/* Orders totals row — clean, theme-aware, properly aligned */
.orders-totals { background: var(--bg-card-2); border-top: 2px solid var(--border-2); }
.orders-totals td { color: var(--text-1) !important; padding: 12px 14px; font-size: 13px; }
.orders-totals td.fw-semibold { font-weight: 700; }
[data-theme="light"] .orders-totals { background:#f1f5f9; }
[data-theme="light"] .orders-totals td { color:#0f172a !important; }

/* table-light tfoot/thead/tbody — force readable text in dark mode */
:root:not([data-theme="light"]) .table-light,
:root:not([data-theme="light"]) .table-light > th,
:root:not([data-theme="light"]) .table-light > td,
:root:not([data-theme="light"]) tfoot.table-light,
:root:not([data-theme="light"]) tfoot.table-light > tr > * {
  background-color: var(--bg-card-2) !important;
  color: var(--text-1) !important;
  --bs-table-color: var(--text-1);
  --bs-table-bg: var(--bg-card-2);
}

/* Bootstrap text-dark utility forces black text — invisible in dark mode */
:root:not([data-theme="light"]) .text-dark { color: var(--text-1) !important; }
/* Inside .badge bg-warning text-dark — the dark amber bg is fine, force white */
:root:not([data-theme="light"]) .badge.text-dark,
:root:not([data-theme="light"]) .badge.bg-warning.text-dark { color: var(--text-1) !important; }

/* bg-light / bg-white panels often pair with assumed dark text */
:root:not([data-theme="light"]) .bg-light,
:root:not([data-theme="light"]) .bg-white {
  background-color: var(--bg-card-2) !important;
  color: var(--text-1) !important;
}
:root:not([data-theme="light"]) .bg-light *,
:root:not([data-theme="light"]) .bg-white * { color: inherit; }

/* Bootstrap alerts that aren't using our alert-banner class */
:root:not([data-theme="light"]) .alert { color: var(--text-1); }
:root:not([data-theme="light"]) .alert-light { background: var(--bg-card-2); color: var(--text-1); border-color: var(--border); }
:root:not([data-theme="light"]) .alert-warning { color: #fbbf24; }
:root:not([data-theme="light"]) .alert-info { color: var(--blue-light); }
:root:not([data-theme="light"]) .alert-success { color: #34d399; }
:root:not([data-theme="light"]) .alert-danger { color: #f87171; }

/* Generic safety net — any element with hardcoded white background */
:root:not([data-theme="light"]) [style*="background:#fff"],
:root:not([data-theme="light"]) [style*="background-color:#fff"],
:root:not([data-theme="light"]) [style*="background: white"],
:root:not([data-theme="light"]) [style*="background:white"] {
  background-color: var(--bg-card-2) !important;
}

/* Form-text small labels should be readable in both modes */
.form-text { color: var(--text-3); }
[data-theme="light"] .form-text { color: #475569 !important; }

/* ════════════════════════════════════════════════════════════════
   v24 follow-ups — dark-mode visibility fixes
   ════════════════════════════════════════════════════════════════ */


/* credStatusBar dynamically injects cards with inline backgrounds — ensure
   inner text inherits the proper color in both themes */
#credStatusBar,
#credStatusBar * { color: var(--text-1); }
[data-theme="light"] #credStatusBar,
[data-theme="light"] #credStatusBar * { color: #0f172a !important; }
#credStatusBar .badge { color: #fff; }
#credStatusBar .badge.bg-secondary { background: rgba(148,163,184,.25) !important; color: var(--text-2) !important; }
[data-theme="light"] #credStatusBar .badge.bg-secondary { background: #e2e8f0 !important; color: #1e293b !important; }
#credStatusBar code { color: var(--text-1); background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 4px; }
[data-theme="light"] #credStatusBar code { color: #0f172a; background: #f1f5f9; }

/* Card with inline style="background:var(--bg-card-2)" should still have correct text */
.card[style*="background:var(--bg-card-2)"],
.card[style*="background: var(--bg-card-2)"] { color: var(--text-1); }
[data-theme="light"] .card[style*="background:var(--bg-card-2)"],
[data-theme="light"] .card[style*="background: var(--bg-card-2)"] {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Bootstrap card has default white bg in some setups */
:root:not([data-theme="light"]) .card { background: var(--bg-card); color: var(--text-1); }
:root:not([data-theme="light"]) .card-body { color: var(--text-1); }

/* Inline-editable cells on Products / Listings table */
.editable-cell-listing {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  transition: background .15s;
  display: inline-block;
  border-bottom: 1px dashed transparent;
}
.editable-cell-listing:hover {
  background: rgba(99,102,241,.15);
  border-bottom-color: var(--blue);
}
[data-theme="light"] .editable-cell-listing:hover {
  background: rgba(37,99,235,.10);
}
.inline-edit {
  padding: 2px 6px !important;
  font-size: 12px !important;
  height: auto !important;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   DROPDOWN / SELECT — minimal, no background-image arrows.
   We let browser render native arrow; we just style colors.
   Older overrides above are removed.
   ════════════════════════════════════════════════════════════════ */

/* Reset any previously-set background-image on selects */
select,
.form-select,
.form-select-sm,
.table select,
td select {
  background-image: none !important;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  padding-right: 8px !important;
}

/* DARK MODE — dark surface, light text, native arrow stays visible */
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) .form-select,
:root:not([data-theme="light"]) .table select,
:root:not([data-theme="light"]) td select {
  background-color: var(--bg-card-2) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-2) !important;
  color-scheme: dark;
}
:root:not([data-theme="light"]) select option,
:root:not([data-theme="light"]) .form-select option {
  background-color: var(--bg-card-2) !important;
  color: var(--text-1) !important;
}
:root:not([data-theme="light"]) select option:checked,
:root:not([data-theme="light"]) .form-select option:checked {
  background-color: rgba(99,102,241,0.25) !important;
  color: var(--text-1) !important;
}

/* LIGHT MODE — white surface, dark text */
[data-theme="light"] select,
[data-theme="light"] .form-select,
[data-theme="light"] .table select,
[data-theme="light"] td select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  color-scheme: light;
}
[data-theme="light"] select option,
[data-theme="light"] .form-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ════════════════════════════════════════════════════════════════
   v31 — Dropdown dark-mode (grouped bulk-action menus)
   ════════════════════════════════════════════════════════════════
   Bootstrap's default dropdown-menu is white with black text.  On
   dark mode that renders as white-on-white when hovered and dark-on-
   light everywhere else.  Bring it in line with our cards. */
:root:not([data-theme="light"]) .dropdown-menu {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
:root:not([data-theme="light"]) .dropdown-item {
  color: var(--text-1);
}
:root:not([data-theme="light"]) .dropdown-item:hover,
:root:not([data-theme="light"]) .dropdown-item:focus {
  background-color: var(--bg-card-2);
  color: var(--text-1);
}
:root:not([data-theme="light"]) .dropdown-divider { border-top-color: var(--border); }
/* Danger items in dropdowns (used on "Delete from Portal AND eBay") */
.dropdown-item[style*="ef4444"]:hover { background-color: rgba(239,68,68,.12); }

/* Safety-net: dark-mode tables that other pages render with plain
   <table> tags (not .table-modern / .table).  Ensures td text is visible. */
:root:not([data-theme="light"]) table:not([class*="table-"]):not(.table-modern) td,
:root:not([data-theme="light"]) table:not([class*="table-"]):not(.table-modern) th {
  color: var(--text-1);
}