/* ProfitDesk shared visual design system — eBay Order Profit Tracker.
   Loaded AFTER each page's own inline <style> block on purpose: same-specificity selectors here
   win by source order, which lets this file re-skin every page (login, dashboard, team admin)
   through the --clr-* custom properties and shared class names without touching page markup or JS.

   Dark-first: the bare :root is the dark palette (the default), :root[data-theme="light"] swaps in
   the light palette. theme.js stamps data-theme before first paint and drives the Light/Dark toggle.
   Components only ever reference tokens — never a literal colour that works in just one theme. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap');

:root {
  color-scheme: dark;

  /* surfaces */
  --clr-bg: #14205F;
  --clr-surface: #1A2A7A;
  --clr-surface-2: #213391;          /* elevated: dropdowns, modals, table headers, secondary buttons */
  --clr-surface-3: #2A3FA6;          /* hover on elevated / active segment */
  --clr-row-hover: #1E2F86;          /* opaque, so sticky table cells can use it too */
  --clr-input: #111B52;
  --clr-bg-soft: var(--clr-surface-2);

  /* text */
  --clr-ink: #F8FAFC;
  --clr-ink-soft: #B6C2E8;
  --clr-ink-faint: #9AA9DA;

  /* lines */
  --clr-border: #3248A8;
  --clr-border-soft: #28388F;
  --clr-border-strong: #4960C4;

  /* brand + semantic */
  --clr-primary: #3F6FE0;
  --clr-primary-hover: #3560CC;
  --clr-primary-soft: rgba(59, 130, 246, .14);
  --clr-primary-line: rgba(59, 130, 246, .38);
  --clr-link: #8FB3FF;
  --clr-on-primary: #FFFFFF;
  --clr-teal: #36B700;
  --clr-teal-soft: rgba(54, 183, 0, .16);
  --clr-accent: var(--clr-teal);
  --clr-green: #36B700;
  --clr-green-soft: rgba(54, 183, 0, .16);
  --clr-green-line: rgba(54, 183, 0, .42);
  --clr-green-ink: #74D300;
  --clr-red: #EF4444;
  --clr-red-soft: rgba(239, 68, 68, .13);
  --clr-red-line: rgba(239, 68, 68, .38);
  --clr-red-ink: #FCA5A5;
  --clr-amber: #F59E0B;
  --clr-amber-soft: rgba(245, 158, 11, .13);
  --clr-amber-line: rgba(245, 158, 11, .38);
  --clr-amber-ink: #FCD34D;
  --clr-yellow: var(--clr-amber);
  --clr-info: #38BDF8;
  --clr-info-soft: rgba(56, 189, 248, .13);

  /* sidebar: dark navy in dark mode; light palette under [data-theme="light"] below */
  --sb-bg: #101A55;
  --sb-elev: #19267A;
  --sb-border: #28388F;
  --sb-ink: #E6EBFA;
  --sb-ink-muted: #A3B1DC;
  --sb-hover: rgba(148, 163, 184, .08);
  --sb-active-bg: rgba(59, 130, 246, .16);
  --sb-active-ink: #C7D4FF;
  --sb-heading: #36B700;        /* section headings: accent teal, distinct from items (grey) and active page (blue) */
  --sb-heading-hover: #74D300;
  --sb-scroll: #34479F;
  --sb-border-strong: #3A4FB0;

  --clr-scroll: #34479F;
  --clr-scroll-hover: #4960C4;
  --clr-backdrop: rgba(8, 12, 48, .7);
  --clr-focus: rgba(96, 165, 250, .55);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .6);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --clr-bg: #F6F8FC;
  --clr-surface: #FFFFFF;
  --clr-surface-2: #F1F5F9;
  --clr-surface-3: #E8EEF6;
  --clr-row-hover: #F5F8FD;
  --clr-input: #FFFFFF;
  --clr-ink: #0F172A;
  --clr-ink-soft: #64748B;
  --clr-ink-faint: #7B8799;
  --clr-border: #E2E8F0;
  --clr-border-soft: #EDF1F6;
  --clr-border-strong: #CBD5E1;
  --clr-primary: #2563EB;
  --clr-primary-hover: #1D4ED8;
  --clr-primary-soft: #EFF4FF;
  --clr-primary-line: #BFD3FB;
  --clr-link: #2563EB;
  --clr-teal: #2FA800;
  --clr-teal-soft: #EAF8E0;
  --clr-green: #2FA800;
  --clr-green-soft: #EAF8E0;
  --clr-green-line: #B5E39A;
  --clr-green-ink: #1F7A00;
  --clr-red: #DC2626;
  --clr-red-soft: #FEF2F2;
  --clr-red-line: #FECACA;
  --clr-red-ink: #991B1B;
  --clr-amber: #B45309;
  --clr-amber-soft: #FFFBEB;
  --clr-amber-line: #FDE68A;
  --clr-amber-ink: #92400E;
  --clr-info: #0284C7;
  --clr-info-soft: #E0F2FE;
  --clr-scroll: #CBD5E1;
  --clr-scroll-hover: #94A3B8;
  --clr-backdrop: rgba(15, 23, 42, .45);
  --clr-focus: rgba(37, 99, 235, .4);
  /* light sidebar: white panel, slate text, same teal headings (darkened for contrast on white) and blue active page */
  --sb-bg: #FFFFFF;
  --sb-elev: #F1F5F9;
  --sb-border: #E2E8F0;
  --sb-border-strong: #CBD5E1;
  --sb-ink: #0F172A;
  --sb-ink-muted: #475569;
  --sb-hover: rgba(15, 23, 42, .05);
  --sb-active-bg: #EFF4FF;
  --sb-active-ink: #1D4ED8;
  --sb-heading: #1F8F00;
  --sb-heading-hover: #167000;
  --sb-scroll: #CBD5E1;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07);
  --shadow-md: 0 8px 20px -6px rgba(15, 23, 42, .12);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .2);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--clr-bg); }

body {
  font-family: var(--font-sans);
  background: var(--clr-bg);
  color: var(--clr-ink);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  line-height: 1.45;
}

::selection { background: var(--clr-primary-soft); color: var(--clr-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-scroll); border-radius: 10px; border: 2px solid var(--clr-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-scroll-hover); }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; color: var(--clr-ink); }
h1 { letter-spacing: -.02em; }
h3 { font-weight: 650; }

a { color: var(--clr-link); }
hr { border: 0; border-top: 1px solid var(--clr-border); }
code, kbd { background: var(--clr-surface-2); border: 1px solid var(--clr-border-soft); border-radius: var(--radius-xs); padding: 0 4px; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--clr-focus);
  outline-offset: 2px;
}

/* ---------- Native form controls ---------- */
input, select, textarea { color: var(--clr-ink); font-family: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select, textarea {
  background-color: var(--clr-input);
  border-color: var(--clr-border);
}
input::placeholder, textarea::placeholder { color: var(--clr-ink-faint); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--clr-primary); }
select option, select optgroup { background: var(--clr-surface-2); color: var(--clr-ink); }

.form-field label { font-weight: 600; letter-spacing: .02em; color: var(--clr-ink-soft); }
.form-field input, .password-field input, .form-field select, .form-field textarea,
.inline-cost, .inline-field, .first-biz-form input {
  border-radius: var(--radius-sm);
  border-color: var(--clr-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--clr-border-strong); }
.form-field input:focus, .password-field input:focus, .form-field select:focus,
.form-field textarea:focus, .inline-cost:focus, .inline-field:focus, .first-biz-form input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-soft);
}
.inline-cost:placeholder-shown { border-color: var(--clr-red-line); }

/* ---------- Buttons ---------- */
.btn {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}
.btn:hover { border-color: var(--clr-border-strong); background: var(--clr-surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn-primary {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-on-primary);
}
.btn-primary:hover { background: var(--clr-primary-hover); border-color: var(--clr-primary-hover); color: var(--clr-on-primary); }
.btn-danger { background: var(--clr-red-soft); border-color: var(--clr-red-line); color: var(--clr-red-ink); }
.btn-danger:hover { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
select.btn { background-color: var(--clr-surface-2); }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.theme-toggle svg { flex: none; }
.btn.theme-toggle:not([data-theme-toggle="label"]) { padding: 7px 9px; }
.auth-theme-toggle { position: fixed; top: 14px; right: 78px; z-index: 5; }

/* ---------- Auth pages (login / forgot / reset password) ---------- */
body:has(.auth-card) { background: var(--clr-bg); }
.auth-card {
  position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--clr-ink);
}
.auth-card h1 { font-size: 19px; letter-spacing: -.01em; padding-top: 4px; }
/* the placeholder brand square that used to sit above the title is replaced by the real logo image (logo.png) */
.auth-card p.sub { color: var(--clr-ink-soft); }
.auth-card .btn-primary, .btn-primary#loginBtn { border-radius: var(--radius-sm); letter-spacing: .01em; }
.auth-card .btn-primary:hover:not(:disabled) { background: var(--clr-primary-hover); }
.auth-msg { border-radius: var(--radius-sm); font-weight: 500; background: var(--clr-red-soft); color: var(--clr-red-ink); border: 1px solid var(--clr-red-line); }
.auth-msg.info { background: var(--clr-primary-soft); color: var(--clr-link); border-color: var(--clr-primary-line); }
.password-toggle { color: var(--clr-ink-faint); }
.password-toggle:hover { color: var(--clr-ink); }
.back-link { color: var(--clr-link); }
.lang-switch { display: flex; gap: 8px; align-items: center; }
.lang-switch select { background-color: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-ink); border-radius: var(--radius-sm); }

/* ---------- App shell: sidebar (follows the theme through the --sb-* tokens) ---------- */
/* index.html sets overflow-x:hidden on html+body so wide tables never widen the page — but "hidden"
   turns <body> into a scroll container, which silently breaks the sidebar's position:sticky (it scrolled
   away and left an empty strip). "clip" clips the same way without creating a scroll container. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* Belt and braces: paint the sidebar colour down the full left column, so no empty strip can ever show. */
@media (min-width: 901px) { .app-shell { background: linear-gradient(to right, var(--sb-bg) 232px, transparent 232px); min-height: 100vh; } }
.sidebar { background: var(--sb-bg); border-right: 1px solid var(--sb-border); color: var(--sb-ink); }
.sidebar #pageTabs.page-tabs { border: 0; background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sb-scroll); border-color: var(--sb-bg); }
.sidebar-brand-title { color: var(--sb-ink); }
.sidebar-brand-mark { background: none; border-radius: 0; object-fit: contain; }
.sidebar #pageTabs .nav-section-toggle {
  background: transparent; color: var(--sb-ink-muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 6px 12px; margin: 16px 0 2px; border-radius: var(--radius-sm);
}
.sidebar #pageTabs .nav-section-toggle:first-of-type { margin-top: 4px; }
.sidebar #pageTabs .nav-section-toggle:not(.nav-sub-toggle) { color: var(--sb-heading); font-weight: 800; font-size: 11.5px; letter-spacing: .03em; gap: 6px; padding-right: 10px; text-align: left; white-space: nowrap; }
/* headings always stay on one line (long German/English names like "Inventory & Products" never wrap or centre) */
.sidebar #pageTabs .nav-section-toggle > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sidebar #pageTabs .nav-section-chevron { flex: none; }
.sidebar #pageTabs .nav-section-toggle:not(.nav-sub-toggle):hover { background: var(--sb-hover); color: var(--sb-heading-hover); }
.sidebar #pageTabs .page-tab {
  color: var(--sb-ink-muted); background: transparent; box-shadow: none;
  padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 500;
}
.sidebar #pageTabs .page-tab:hover:not(.active) { background: var(--sb-hover); color: var(--sb-ink); }
.sidebar #pageTabs .page-tab.active { background: var(--sb-active-bg); color: var(--sb-active-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--clr-primary); }
.sidebar #pageTabs .nav-soon { color: var(--sb-ink-muted); padding: 8px 12px; font-weight: 500; }
.sidebar #pageTabs .nav-soon .nav-soon-tag { background: var(--sb-hover); border-radius: var(--radius-xs); color: var(--sb-ink-muted); }
/* Nav entries that are not page tabs (Sourcing card shortcuts, Admin links) look exactly like page tabs */
.sidebar #pageTabs .nav-anchor, .sidebar #pageTabs .nav-link {
  display: flex; align-items: center; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--sb-ink-muted); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
  cursor: pointer; text-decoration: none;
}
.sidebar #pageTabs .nav-anchor:hover:not(.active), .sidebar #pageTabs .nav-link:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sidebar #pageTabs .nav-anchor.active { background: var(--sb-active-bg); color: var(--sb-active-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--clr-primary); }
.sidebar #pageTabs .nav-anchor.plan-locked { opacity: .72; }
/* Listing Analytics / Feedback Analytics: one level of nesting inside Marketplace */
.sidebar #pageTabs .nav-sub-toggle {
  margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--sb-ink-muted); border-radius: var(--radius-sm);
}
.sidebar #pageTabs .nav-sub-toggle:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sidebar #pageTabs .nav-sub-toggle.has-active { color: var(--sb-ink); font-weight: 600; }
.sidebar #pageTabs .nav-sub-group { margin: 0 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--sb-border); width: calc(100% - 14px); }
/* Smooth expand / collapse (the inline display:none set for a staff member's empty section still wins) */
.sidebar #pageTabs .nav-section-group { overflow: hidden; opacity: 1; transition: max-height .22s ease, opacity .18s ease; }
.sidebar #pageTabs .nav-section-group.collapsed { display: flex; max-height: 0; opacity: 0; visibility: hidden; transition: max-height .2s ease, opacity .15s ease, visibility 0s linear .2s; }
.sidebar #pageTabs button:focus-visible, .sidebar #pageTabs a:focus-visible { outline-offset: -2px; }
@media (max-width: 900px) {
  /* phone / small tablet: the sidebar sits above the content — keep the long menu bounded and scrollable */
  .sidebar #pageTabs.page-tabs { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar #pageTabs .nav-anchor, .sidebar #pageTabs .nav-link { width: auto; }
  .sidebar #pageTabs .nav-sub-toggle { width: auto; gap: 6px; }
  .sidebar #pageTabs .nav-sub-group { flex-basis: 100%; width: 100%; margin-left: 6px; }
}
/* Accounts (business picker): heading + a prominent card with an initial badge, name and eBay site */
.sidebar-accounts-label { padding: 2px 12px 7px; color: var(--sb-heading); font-weight: 800; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.sidebar .biz-trigger { display: flex; align-items: center; gap: 10px; padding: 9px 11px; min-height: 52px; background: var(--sb-active-bg); border: 1px solid var(--clr-primary-line); color: var(--sb-ink); border-radius: var(--radius-md); }
.sidebar .biz-trigger:hover { border-color: var(--clr-primary); }
.sidebar .biz-menu.open .biz-trigger { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-soft); }
.biz-trigger-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--clr-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.biz-trigger-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.sidebar #bizTriggerLabel { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--sb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-trigger-sub { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--sb-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-trigger-sub:empty { display: none; }
.sidebar .biz-chevron, .sidebar .account-chevron { color: var(--sb-ink-muted); }
.sidebar .account-menu { border-top-color: var(--sb-border); }
.sidebar .account-trigger { background: transparent; color: var(--sb-ink); border-radius: var(--radius-sm); }
.sidebar .account-trigger:hover { background: var(--sb-hover); }
.account-avatar { background: var(--clr-primary); color: #fff; }
@media (max-width: 900px) { .sidebar { border-bottom: 1px solid var(--sb-border); } }

/* Dropdown menus (account, business switcher) — elevated surface */
.account-dropdown, .biz-menu .biz-tabs {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--clr-ink);
}
.account-dropdown-row { border-bottom-color: var(--clr-border); }
.account-dropdown .btn { background: transparent; border: none; color: var(--clr-ink); font-weight: 500; }
.account-dropdown .btn:hover { background: var(--clr-surface-3); }
.account-dropdown #logoutBtn { color: var(--clr-red-ink); }
.account-dropdown-row:has(> #presenceBar:empty) { display: none; }   /* no colleagues online: no empty row */
.account-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--clr-border); font-size: 13px; color: var(--clr-ink-soft); }
.account-lang-row label { font-weight: 600; cursor: pointer; }
.account-dropdown .account-lang-row select.btn { min-width: 118px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--clr-ink); }
.account-dropdown select.btn { width: auto; display: inline-block; background: var(--clr-surface); border: 1px solid var(--clr-border); padding: 4px 8px; }

/* ---------- Business tabs (switcher list) ---------- */
.biz-tab {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
  color: var(--clr-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.biz-tab:hover { border-color: var(--clr-border-strong); }
.biz-tab.active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.biz-menu .biz-tab { background: transparent; border-color: transparent; font-weight: 500; }
.biz-menu .biz-tab:hover { background: var(--clr-surface-3); }
.biz-menu .biz-tab.active { background: var(--clr-primary-soft); color: var(--clr-link); border-color: transparent; font-weight: 600; }
/* Account rows: the name, then [settings][delete] icon buttons right-aligned in a fixed column */
.biz-menu .biz-tab { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.biz-tab-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-tab-actions { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.biz-menu .biz-tab .biz-tab-mkt, .biz-menu .biz-tab .biz-tab-del {
  margin: 0; opacity: 1; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-ink-soft);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.biz-menu .biz-tab .biz-tab-mkt:hover { background: var(--clr-primary-soft); border-color: var(--clr-primary-line); color: var(--clr-link); }
.biz-menu .biz-tab .biz-tab-del:hover { background: var(--clr-red-soft); border-color: var(--clr-red-line); color: var(--clr-red); text-decoration: none; }
.biz-menu .biz-tab.active .biz-tab-mkt, .biz-menu .biz-tab.active .biz-tab-del { color: var(--clr-ink-soft); }
.biz-menu .biz-tab.active .biz-tab-mkt:hover { color: var(--clr-link); }
.biz-menu .biz-tab.active .biz-tab-del:hover { color: var(--clr-red); }
.biz-tab-add { color: var(--clr-ink-soft); }

/* Horizontal page tabs (used outside the sidebar) */
.page-tabs { background: var(--clr-surface-2); border: 1px solid var(--clr-border-soft); border-radius: var(--radius-md); }
.page-tab { border-radius: var(--radius-sm); color: var(--clr-ink-soft); }
.page-tab.active { background: var(--clr-surface); color: var(--clr-link); box-shadow: var(--shadow-xs); }
.tab-badge { border-radius: var(--radius-xs); background: var(--clr-red); color: #fff; }

/* ---------- Header ---------- */
.main-col > .wrap > .top-row { align-items: center; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--clr-border-soft); }
.top-row h1 { font-size: 22px; line-height: 1.25; }
.subtitle { color: var(--clr-ink-soft); }
.wrap { padding: 24px 28px; }
@media (max-width: 640px) { .wrap { padding: 16px; } }

/* ---------- Cards & panels ---------- */
.ebay-status-bar, .vat-card, .onb-card, .first-biz, #apExtSection, #apTrendSection {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.ebay-status-bar .ebay-status-text strong { color: var(--clr-ink); }
.plan-lock { background: var(--clr-surface); border-color: var(--clr-border-strong); border-radius: var(--radius-md); }
.onb-step { background: var(--clr-surface-2); border-color: var(--clr-border-soft); }

.stat-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.stat-label { color: var(--clr-ink-soft); font-weight: 600; font-size: 11px; letter-spacing: .06em; }
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.015em; font-weight: 650; color: var(--clr-ink); }
.stat-value.positive, .overview-hero-value.positive, .dash-kpi-delta.positive, .profit-pos { color: var(--clr-green); }
.stat-value.negative, .overview-hero-value.negative, .dash-kpi-delta.negative, .profit-neg { color: var(--clr-red); }

.overview-hero {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.overview-hero-label { color: var(--clr-ink-soft); }
.overview-hero-value { letter-spacing: -.025em; color: var(--clr-ink); }

/* Segmented toggles (period / metric switches) */
.dash-toggle-group { background: var(--clr-surface-2); border: 1px solid var(--clr-border-soft); border-radius: var(--radius-sm); }
.dash-toggle-group button { border-radius: var(--radius-xs); color: var(--clr-ink-soft); }
.dash-toggle-group button:hover:not(.active) { color: var(--clr-ink); }
.dash-toggle-group button.active { background: var(--clr-surface-3); color: var(--clr-ink); box-shadow: inset 0 0 0 1px var(--clr-border-strong); }
:root[data-theme="light"] .dash-toggle-group button.active { background: var(--clr-surface); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--clr-border); }
.dash-filterbar .dash-compare-select { background-color: var(--clr-input); color: var(--clr-ink); border-radius: var(--radius-sm); }

/* Alerts & notices */
.dash-alert { border-radius: var(--radius-sm); }
.dash-alert:hover { filter: none; border-color: var(--clr-border-strong); }
.dash-alert.severity-high:hover { border-color: var(--clr-red); }
.dash-alert.severity-medium:hover { border-color: var(--clr-amber); }
.dash-alert-healthy { border: 1px solid var(--clr-green-line); color: var(--clr-green-ink); }
.vat-notice, .stock-notice, .dash-not-connected, .plan-banner { border-radius: var(--radius-sm); }
.plan-banner-info { color: var(--clr-ink); }

/* ---------- Charts (dependency-free bars) ---------- */
.dash-chart { border-bottom: 1px solid var(--clr-border-soft); background-image: linear-gradient(to top, var(--clr-border-soft) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 bottom; }
.dash-chart-bar { background: var(--clr-primary); border-radius: 3px 3px 0 0; }
.dash-chart-bar.negative { background: var(--clr-red); }
.dash-chart-bar-label { color: var(--clr-ink-faint); }
.dash-breakdown-bar-track, .ov-bar { background: var(--clr-surface-2); }
.dash-inventory-stat { background: var(--clr-surface-2); border: 1px solid var(--clr-border-soft); }
.dash-inventory-stat .num { font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-scroll {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  background: var(--clr-surface);
  -webkit-overflow-scrolling: touch;
}
table { background: var(--clr-surface); color: var(--clr-ink); }
th {
  background: var(--clr-surface-2);
  font-weight: 600;
  color: var(--clr-ink-soft);
  letter-spacing: .05em;
}
th, td { border-color: var(--clr-border-soft); }
td { font-variant-numeric: tabular-nums; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--clr-row-hover); }
.dash-mini-table, .dash-mini-table th { background: transparent; }
.dash-mini-table td { border-top-color: var(--clr-border-soft); }
.stock-table th.sortable:hover { color: var(--clr-link); }
#trackerTableScroll table th:nth-child(1), #trackerTableScroll table th:nth-child(2), #trackerTableScroll table th:nth-child(3) { background: var(--clr-surface-2); }
#trackerTableScroll table td:nth-child(1), #trackerTableScroll table td:nth-child(2), #trackerTableScroll table td:nth-child(3) { background: var(--clr-surface); }
#trackerTableScroll table th:nth-child(3), #trackerTableScroll table td:nth-child(3) { box-shadow: 1px 0 0 var(--clr-border); }
#trackerTableScroll tbody tr:hover td:nth-child(1),
#trackerTableScroll tbody tr:hover td:nth-child(2),
#trackerTableScroll tbody tr:hover td:nth-child(3) { background: var(--clr-row-hover); }
.pnl-total-row td { border-top-color: var(--clr-border-strong); }

/* ---------- Badges (tinted, not pills) ---------- */
.ebay-src-badge, .role-badge, .stock-pill, .plan-lock-badge { border-radius: var(--radius-xs); font-weight: 600; }
.ebay-src-badge { background: var(--clr-primary-soft); color: var(--clr-link); }
.role-badge { padding: 2px 8px; }
.role-badge.admin { background: var(--clr-primary-soft); color: var(--clr-link); }
.role-badge.manager { background: var(--clr-amber-soft); color: var(--clr-amber-ink); }
.role-badge.staff { background: var(--clr-surface-2); color: var(--clr-ink-soft); }

/* ---------- Modals ---------- */
.modal-backdrop { background: var(--clr-backdrop); backdrop-filter: none; }
.modal {
  background: var(--clr-surface-2);
  color: var(--clr-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--clr-border);
}
:root[data-theme="light"] .modal { background: var(--clr-surface); }
.modal h2 { letter-spacing: -.01em; }

/* ---------- Toast ---------- */
.plan-toast { background: var(--clr-surface-2); color: var(--clr-ink); border: 1px solid var(--clr-border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); }
.plan-toast a { color: var(--clr-link); }
.plan-toast-close { color: var(--clr-ink-soft); }

.empty-state { color: var(--clr-ink-faint); font-weight: 500; }

/* ---------- Sticky horizontal scrollbar ---------- */
.sticky-hscroll { background: var(--clr-surface); border-top-color: var(--clr-border); }

/* ---------- Quill rich-text editor (Add Product) ---------- */
.ql-toolbar.ql-snow { background: var(--clr-surface-2); border-color: var(--clr-border); }
.ql-container.ql-snow { background: var(--clr-input); color: var(--clr-ink); border-color: var(--clr-border); }
.ql-snow .ql-stroke { stroke: var(--clr-ink-soft); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--clr-ink-soft); }
.ql-snow .ql-picker { color: var(--clr-ink-soft); }
.ql-snow .ql-picker-options { background: var(--clr-surface-2); border-color: var(--clr-border); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--clr-link); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--clr-link); }
.ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--clr-link); }
.ql-editor.ql-blank::before { color: var(--clr-ink-faint); }
.ql-snow .ql-tooltip { background: var(--clr-surface-2); color: var(--clr-ink); border-color: var(--clr-border); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* EYSSAL logo: white-strip version on the dark theme (default), colour version on the light theme */
:root[data-theme="light"] .logo-for-dark { display: none; }
:root:not([data-theme="light"]) .logo-for-light { display: none; }
.auth-logo { display: block; margin: 0 auto 10px; width: 52px; height: 52px; }

/* Dark mode: blue gradient page background (#4A6AE1 -> #14205F family) */
:root:not([data-theme="light"]) { background: linear-gradient(135deg, #22338F 0%, #14205F 55%, #101A50 100%) fixed; }
:root:not([data-theme="light"]) body, :root:not([data-theme="light"]) body:has(.auth-card) { background: transparent; }

/* EYSSAL wordmark: Sora ExtraBold next to the logo, the A in the logo green */
.wm { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; letter-spacing: .01em; }
.wm .wm-a { display: inline-block; height: .73em; width: .79em; vertical-align: baseline; overflow: visible; }
.sidebar-brand-title .wm { font-size: 28px; line-height: 1; }
.auth-card h1 .wm { font-size: 36px; line-height: 1; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; }
.auth-brand h1 { margin: 0; padding-top: 0; }
.auth-brand .auth-logo { margin: 0; width: 44px; height: 44px; }
.auth-brand .auth-logo { width: 56px; height: 56px; }
.sidebar-brand-mark { width: 40px; height: 40px; }
.sidebar-brand { gap: 12px; }

/* Business switcher: eBay Store logo (index.html bizAvatarInner) in the trigger and in every dropdown row */
.biz-trigger-avatar.has-logo { background: transparent; padding: 0; overflow: hidden; }
.biz-trigger-avatar img, .biz-tab-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.biz-tab-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--clr-primary); color: var(--clr-on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; overflow: hidden; }
.biz-tab-avatar.has-logo { background: transparent; padding: 0; }
/* dark theme: the wordmark is pure white (the logo strips are too) */
:root:not([data-theme="light"]) .wm { color: #FFFFFF; }

/* Alert summary cards: "Critical" is always red, "Warning" always yellow (label and number) on every alerts page */
.stat-card.kpi-critical .stat-label, .stat-card.kpi-critical .stat-value { color: #F87171; }
.stat-card.kpi-warning .stat-label, .stat-card.kpi-warning .stat-value { color: #FACC15; }
:root[data-theme="light"] .stat-card.kpi-critical .stat-label, :root[data-theme="light"] .stat-card.kpi-critical .stat-value { color: #DC2626; }
:root[data-theme="light"] .stat-card.kpi-warning .stat-label, :root[data-theme="light"] .stat-card.kpi-warning .stat-value { color: #A16207; }