/* ============================================================
   STOA Customer Portal — shared stylesheet
   Static HTML + CSS only. No JS. Mobile-first.
   ------------------------------------------------------------
   Tokens are CSS custom properties named to match the STOA
   Tailwind/Filament theme scale delivered in the handoff sheet.
   Each var maps 1:1 to a Tailwind token, e.g.
     var(--primary-800)  ==  theme('colors.primary.800')  ==  bg-primary-800
     var(--neutral-200)  ==  border-neutral-200
   A developer can either keep these vars or drop the utility
   classes (bg-primary-800, text-neutral-700, lg:grid-cols-3 …)
   straight in — the values are identical.

   TENANT THEMING: only --accent / --accent-strong / --on-accent
   change per tenant. Default = STOA Aegean (primary-800).
   Override on a wrapper:  <div style="--accent:#8F3F28">…</div>
   ============================================================ */

:root {
  /* ---- primary · Aegean ---- */
  --primary-50:#EFF5F6;  --primary-100:#D7E7EA; --primary-200:#AFCFD6;
  --primary-300:#84B2BC; --primary-400:#5D96A3; --primary-500:#41808F;
  --primary-600:#316A78; --primary-700:#265562; --primary-800:#1E4A57;
  --primary-900:#173A44; --primary-950:#102830;

  /* ---- neutral · warm grey ---- */
  --neutral-50:#FAFAF8;  --neutral-100:#F3F2EF; --neutral-200:#E6E4DF;
  --neutral-300:#D4D1C9; --neutral-400:#B2AEA4; --neutral-500:#8B8780;
  --neutral-600:#6B6862; --neutral-700:#514E49; --neutral-800:#393631;
  --neutral-900:#232120; --neutral-950:#161513;

  /* ---- semantic ---- */
  --success-50:#ECF6F0; --success-500:#2F8A5E; --success-600:#257049; --success-700:#1F5B3C;
  --warning-50:#FBF3E3; --warning-200:#ECC98A; --warning-400:#CE8E2E; --warning-600:#946017; --warning-700:#784E16;
  --danger-50:#FBEDEB;  --danger-600:#9E3324;  --danger-700:#82291D;
  --info-50:#ECF2F9;    --info-500:#336BA3;    --info-600:#285684;   --info-700:#23496E;

  /* ---- named accent ---- */
  --parchment:#EFEADD;

  /* ---- semantic roles (light) ---- */
  --surface-page:var(--neutral-50);
  --surface-card:#FFFFFF;
  --surface-panel:var(--neutral-100);
  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --text:var(--neutral-900);
  --text-secondary:var(--neutral-700);
  --text-muted:var(--neutral-500);

  /* ---- tenant accent (override point) ---- */
  --accent:var(--primary-800);
  --accent-strong:var(--primary-900);
  --on-accent:#FFFFFF;

  /* ---- type ---- */
  --font-display:'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui:'IBM Plex Sans', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius:8px;
  --radius-lg:10px;
}

*, *::before, *::after { box-sizing:border-box; }

body {
  margin:0;
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
}

.font-display { font-family:var(--font-display); }
.font-mono { font-family:var(--font-mono); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.app-main { flex:1; }

/* top bar (logged-in chrome) */
.topbar {
  display:flex; align-items:center; gap:16px;
  background:var(--surface-card);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
}
.topbar__brand { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.topbar__brand-name {
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.04em; color:var(--neutral-950);
}
.topbar__brand-name--short { display:inline; }
.topbar__brand-name--full { display:none; }
.nav { display:none; gap:22px; font-size:13px; color:var(--text-secondary); }
.nav a { color:inherit; text-decoration:none; }
.nav a.is-active { color:var(--accent); font-weight:600; }
.search {
  display:flex; align-items:center; gap:9px;
  background:var(--surface-panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:0 13px; height:38px;
  color:var(--text-muted); font-size:13px; flex:1; min-width:0;
}
.topbar__actions { display:flex; align-items:center; gap:16px; margin-left:auto; }
.cart { position:relative; font-size:20px; color:var(--text-secondary); line-height:1; }
.cart__count {
  position:absolute; top:-6px; right:-9px; background:var(--accent);
  color:var(--on-accent); font-size:9px; font-weight:600;
  border-radius:999px; padding:1px 5px;
}
.avatar {
  width:32px; height:32px; border-radius:50%; background:var(--primary-100);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--accent); flex-shrink:0;
}

/* bottom tab bar (mobile nav) */
.bottom-tabs {
  position:sticky; bottom:0; z-index:20;
  display:flex; justify-content:space-around;
  background:var(--surface-card); border-top:1px solid var(--border);
  padding:10px 0 max(14px, env(safe-area-inset-bottom));
}
.bottom-tabs a {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:9.5px; color:var(--text-muted); text-decoration:none;
}
.bottom-tabs a .ico { font-size:18px; line-height:1; }
.bottom-tabs a.is-active { color:var(--accent); font-weight:600; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font:inherit; font-weight:600; font-size:14px;
  height:46px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn--primary { background:var(--accent); color:var(--on-accent); }
.btn--primary:hover { background:var(--accent-strong); }
.btn--outline { background:var(--surface-card); border-color:var(--accent); color:var(--accent); }
.btn--warning { background:var(--warning-600); color:#fff; }
.btn--ghost { background:var(--surface-card); border-color:var(--border-strong); color:var(--text-secondary); }
.btn--block { width:100%; }
.btn--sm { height:38px; font-size:13px; padding:0 14px; }
.btn--lg { height:50px; font-size:15px; }

/* ============================================================
   CARDS / FIELDS / CHIPS
   ============================================================ */
.card {
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.field__label { font-size:11.5px; font-weight:500; color:var(--text-secondary); margin-bottom:7px; display:block; }
.field__input {
  width:100%; height:46px; background:var(--surface-card);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:0 14px; font:inherit; font-size:14px; color:var(--text);
}
.field__input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--primary-100); }

.tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.03em;
  padding:3px 8px; border-radius:999px; line-height:1.4;
}
.tag--stock { background:var(--success-50); color:var(--success-700); }
.tag--mto   { background:var(--warning-50); color:var(--warning-700); border:1px solid var(--warning-200); }

.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; padding:6px 12px; border-radius:999px;
  background:var(--surface-card); border:1px solid var(--border-strong);
  color:var(--text-secondary); white-space:nowrap;
}
.chip.is-active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }

/* status chips — lifecycle, customer-facing */
.status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; padding:4px 10px; border-radius:999px; }
.status .dot { width:6px; height:6px; border-radius:50%; }
.status--quote        { background:var(--info-50);    color:var(--info-700); }
.status--quote .dot   { background:var(--info-500); }
.status--awaiting     { background:var(--warning-50); color:var(--warning-700); }
.status--awaiting .dot{ background:var(--warning-400); }
.status--deposit      { background:var(--warning-50); color:var(--warning-700); font-weight:600; border:1px solid var(--warning-200); }
.status--deposit .dot { background:var(--warning-600); }
.status--confirmed    { background:var(--primary-50); color:var(--primary-700); }
.status--confirmed .dot{ background:var(--primary-600); }
.status--placed       { background:var(--primary-50); color:var(--primary-700); }
.status--placed .dot  { background:var(--accent); }
.status--fulfilled    { background:var(--success-50); color:var(--success-700); }
.status--fulfilled .dot{ background:var(--success-600); }

/* callouts */
.callout { display:flex; gap:11px; border-radius:var(--radius); padding:13px 15px; font-size:12.5px; line-height:1.55; }
.callout--warning { background:var(--warning-50); border:1px solid var(--warning-200); color:var(--warning-700); }
.callout--info    { background:var(--primary-50); border:1px solid var(--primary-200); color:var(--primary-700); }
.callout b { color:inherit; }

/* price / money */
.money { font-family:var(--font-mono); }
.price-net { font-family:var(--font-mono); font-weight:500; color:var(--accent); }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty {
  text-align:center; padding:48px 24px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.empty__icon { font-size:34px; color:var(--neutral-300); }
.empty__title { font-size:16px; font-weight:600; color:var(--text); }
.empty__body { font-size:13px; color:var(--text-secondary); max-width:340px; line-height:1.55; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.eyebrow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.section-title { font-family:var(--font-display); font-size:24px; color:var(--text); }
.page-pad { padding:20px 16px; }

/* ============================================================
   01 · LOGIN
   ============================================================ */
.login { display:flex; flex-direction:column; min-height:100vh; }
.login__brand {
  background:var(--accent); color:var(--parchment);
  padding:40px 28px; display:flex; flex-direction:column; gap:28px;
}
.login__brand-lockup { display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; }
.login__headline { font-family:var(--font-display); font-size:22px; line-height:1.2; text-align:center; }
.login__form-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 24px; }
.login__form { width:100%; max-width:380px; }

/* ============================================================
   02 · CATALOGUE
   ============================================================ */
.chip-row { display:flex; gap:8px; overflow-x:auto; padding:10px 16px; background:var(--surface-card); border-bottom:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.filter-rail { display:none; }
.catalogue__body { display:block; }
.catalogue__results { padding:14px 16px 20px; }
.catalogue__results-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:13px; color:var(--text-secondary); }
.grid-products { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.product-card { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.product-card__media { height:132px; background:linear-gradient(135deg,#ECEAE3,#D5DCDD); position:relative; }
.product-card__media .tag { position:absolute; top:8px; left:8px; }
.product-card__body { padding:12px; display:flex; flex-direction:column; flex:1; }
.product-card__name { font-size:13px; font-weight:600; color:var(--text); line-height:1.25; }
.product-card__meta { font-size:11px; color:var(--text-muted); margin-top:3px; }
.product-card__price { display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; padding-top:10px; }
.product-card__price .price-net { font-size:15px; }
.product-card__price .lbl { font-size:10px; color:var(--text-muted); }
.product-card .btn { margin-top:10px; }

/* ============================================================
   03 · CONFIGURATOR
   ============================================================ */
.config { display:flex; flex-direction:column; min-height:100vh; }
.config__head { background:var(--surface-card); border-bottom:1px solid var(--border); padding:12px 16px; }
.config__progress { display:flex; gap:4px; margin-top:10px; }
.config__progress span { flex:1; height:4px; border-radius:2px; background:var(--border); }
.config__progress span.is-done { background:var(--accent); }
.config__step-rail { display:none; }
.config__body { flex:1; }
.config__step { padding:22px 16px; }
.config__option { display:flex; align-items:center; gap:13px; border:1px solid var(--border-strong); background:var(--surface-card); border-radius:var(--radius-lg); padding:13px 14px; margin-bottom:11px; }
.config__option.is-selected { border:1.5px solid var(--accent); background:var(--primary-50); }
.config__swatch { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.config__option-tick { width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; margin-left:auto; }
.config__sticky { position:sticky; bottom:0; background:var(--surface-card); border-top:1px solid var(--border); padding:14px 16px max(16px, env(safe-area-inset-bottom)); }
.running-net { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.running-net__label { font-size:12px; color:var(--text-secondary); }
.running-net__value { font-family:var(--font-mono); font-size:19px; font-weight:500; color:var(--accent); }

/* desktop price panel content (hidden mobile, shown in aside on lg) */
.price-panel { display:none; }
.price-panel__preview { aspect-ratio:16/10; border-radius:var(--radius); background:linear-gradient(135deg,#ECEAE3,#D5DCDD); }
.config-line { display:flex; justify-content:space-between; font-size:12.5px; padding:4px 0; }
.config-line.is-pending { color:var(--neutral-400); }

/* ============================================================
   04 · BASKET   05 · QUOTE  (shared two-pane)
   ============================================================ */
.two-pane { display:flex; flex-direction:column; }
.two-pane__main { padding:16px; }
.two-pane__aside { display:none; }

.line-item { display:flex; gap:12px; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px; margin-bottom:12px; }
.line-item__thumb { width:64px; height:64px; border-radius:7px; background:linear-gradient(135deg,#ECEAE3,#D5DCDD); flex-shrink:0; }
.line-item__body { flex:1; min-width:0; }
.line-item__top { display:flex; justify-content:space-between; gap:10px; }
.line-item__name { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; }
.line-item__config { font-size:11.5px; color:var(--text-secondary); margin-top:3px; line-height:1.5; }
.line-item__foot { display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.link { color:var(--primary-700); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; }
.link--muted { color:var(--text-muted); font-weight:400; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:7px; overflow:hidden; margin-left:auto; }
.qty button { width:30px; height:30px; border:none; background:var(--surface-card); color:var(--text-secondary); font-size:15px; cursor:pointer; }
.qty span { width:34px; text-align:center; font-family:var(--font-mono); font-size:13px; }

/* totals */
.totals__row { display:flex; justify-content:space-between; padding:7px 0; font-size:13px; }
.totals__row .lbl { color:var(--text-secondary); }
.totals__row .val { font-family:var(--font-mono); color:var(--text); }
.totals__row--border { border-bottom:1px solid var(--border); }
.totals__final { display:flex; justify-content:space-between; align-items:center; background:var(--accent); color:var(--on-accent); border-radius:var(--radius); padding:14px 16px; margin-top:12px; }
.totals__final .lbl { font-size:14px; font-weight:600; }
.totals__final .val { font-family:var(--font-mono); font-size:18px; font-weight:500; }

/* sticky mobile summary */
.summary-bar { position:sticky; bottom:0; background:var(--surface-card); border-top:1px solid var(--border); padding:14px 16px max(16px, env(safe-area-inset-bottom)); z-index:20; }

/* quote-specifics */
.expiry-banner { display:flex; align-items:center; gap:14px; background:var(--primary-50); border:1px solid var(--primary-200); border-radius:var(--radius-lg); padding:14px 16px; }
.expiry-banner__icon { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.expiry-banner__count { margin-left:auto; text-align:right; }
.expiry-banner__count .n { font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--accent); }
.expiry-banner__count .u { font-size:10px; color:var(--text-muted); }

.deposit-block { background:var(--accent); color:var(--parchment); border-radius:var(--radius-lg); padding:18px; }
.deposit-block__label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-200); }
.deposit-block__amount { font-family:var(--font-mono); font-size:28px; font-weight:600; color:#fff; }
.deposit-block__note { font-size:11.5px; color:var(--primary-100); margin-top:6px; line-height:1.5; }

.quote-lines { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.quote-lines__row { display:flex; justify-content:space-between; gap:12px; padding:13px 16px; font-size:13px; }
.quote-lines__row + .quote-lines__row { border-top:1px solid var(--border); }

/* ============================================================
   06 · HISTORY
   ============================================================ */
.history-filters { display:flex; gap:8px; }
.history-table { display:none; }
.history-cards { display:flex; flex-direction:column; gap:11px; padding:14px 16px; }
.history-card { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; }
.history-card.is-actionable { border-color:var(--warning-200); }
.history-card__top { display:flex; justify-content:space-between; align-items:center; }
.history-card__ref { font-family:var(--font-mono); font-size:12.5px; color:var(--text); }
.history-card__summary { font-size:12px; color:var(--text-secondary); margin-top:8px; }
.history-card__foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.history-card__total { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--text); }

/* ============================================================
   DESKTOP  ·  lg breakpoint (1024px+)
   Equivalent to Tailwind `lg:` utilities.
   ============================================================ */
@media (min-width:1024px) {
  body { font-size:14px; }

  .topbar { padding:0 26px; height:62px; gap:20px; }
  .topbar__brand-name--short { display:none; }
  .topbar__brand-name--full { display:inline; }
  .nav { display:flex; margin-left:14px; }
  .search { flex:0 1 360px; margin-left:auto; }
  .topbar__actions { margin-left:0; }
  .bottom-tabs { display:none; }

  /* login → split */
  .login { flex-direction:row; }
  .login__brand { width:46%; padding:52px 48px; justify-content:space-between; }
  .login__brand-lockup { align-items:flex-start; text-align:left; }
  .login__headline { font-size:34px; text-align:left; }
  .login__form-wrap { flex:1; }

  /* catalogue → rail + 3-up */
  .chip-row { display:none; }
  .catalogue__body { display:flex; align-items:flex-start; }
  .filter-rail { display:block; width:218px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface-card); padding:24px 22px; align-self:stretch; }
  .filter-rail__group + .filter-rail__group { margin-top:24px; }
  .filter-rail__legend { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
  .filter-rail__opt { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-secondary); padding:4px 0; }
  .catalogue__results { flex:1; padding:24px 26px; }
  .grid-products { grid-template-columns:repeat(3,1fr); gap:18px; }
  .product-card__media { aspect-ratio:auto; height:140px; }
  .product-card__name { font-size:13.5px; }
  .product-card .btn { height:38px; }

  /* configurator → 3 region */
  .config__head { padding:0 24px; height:54px; display:flex; align-items:center; gap:14px; }
  .config__progress { display:none; }
  .config__body { display:flex; align-items:stretch; }
  .config__step-rail { display:block; width:212px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface-card); padding:18px 0; }
  .config__step-rail .step { display:flex; align-items:center; gap:11px; padding:9px 22px; font-size:13px; color:var(--text-muted); }
  .config__step-rail .step .num { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:10px; }
  .config__step-rail .step.is-done { color:var(--success-700); }
  .config__step-rail .step.is-done .num { background:var(--success-50); border-color:var(--success-50); color:var(--success-700); font-weight:700; }
  .config__step-rail .step.is-active { color:var(--accent); font-weight:600; background:var(--primary-50); border-left:3px solid var(--accent); padding-left:19px; }
  .config__step-rail .step.is-active .num { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
  .config__step { flex:1; padding:30px 34px; }
  .config__sticky { display:none; }                 /* desktop uses the aside panel */
  .price-panel { display:flex; flex-direction:column; width:300px; flex-shrink:0; border-left:1px solid var(--border); background:var(--surface-card); padding:24px; }

  /* two-pane (basket/quote) */
  .two-pane { flex-direction:row; align-items:flex-start; }
  .two-pane__main { flex:1; padding:24px 26px; }
  .two-pane__aside { display:block; width:330px; flex-shrink:0; border-left:1px solid var(--border); background:var(--surface-card); padding:26px; align-self:stretch; }
  .summary-bar { display:none; }                     /* desktop uses the aside */
  .line-item__thumb { width:76px; height:76px; }
  .expiry-banner__count .n { font-size:22px; }

  /* history → table */
  .history-cards { display:none; }
  .history-table { display:block; }
  .history-table__head, .history-row { display:flex; align-items:center; padding:13px 26px; font-size:13px; }
  .history-table__head { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding-top:14px; padding-bottom:10px; }
  .history-row { border-top:1px solid var(--border); background:var(--surface-card); }
  .col-ref { width:150px; font-family:var(--font-mono); color:var(--text); }
  .col-type { width:100px; color:var(--text-secondary); }
  .col-summary { flex:1; color:var(--text-secondary); }
  .col-total { width:110px; text-align:right; font-family:var(--font-mono); color:var(--text); }
  .col-status { width:180px; display:flex; justify-content:center; }
  .col-pdf { width:90px; text-align:right; }
}

/* small layout helpers */
.field-row { display:flex; gap:16px; }
.field-row > * { flex:1; }
.config__actions { display:none; }
.stack-gap > * + * { margin-top:12px; }
@media (min-width:1024px) {
  .config__actions { display:flex; gap:12px; margin-top:30px; }
  .config__actions .btn--continue { flex:1; }
}

/* checkbox/radio faux marks used in filters & options (static) */
.box { width:15px; height:15px; border:1.5px solid var(--border-strong); border-radius:4px; flex-shrink:0; }
.box.is-checked { background:var(--accent); border-color:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px; }