/* LocateIQ platform design system — APWA marking-paint palette.
   Ported from the account-platform mockup (locateiq-platform-mockup.jsx).

   Load this AFTER a page's local <style> block. The new account pages each
   carry an older dark palette in their own :root; this file redefines those
   same custom properties plus the component classes built on them, so the
   pages adopt the platform look without rewriting their markup.

   Colors are the APWA utility marking paint set:
     yellow  gas / safety     -> brand accent, primary action
     green   sewer            -> synced, paid, active
     orange  communications   -> in progress, migrating
     red     electric         -> failed, past due
     blue    water            -> informational, links, references */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Platform tokens */
  --liq-paper:#f7f6f1;
  --liq-card:#ffffff;
  --liq-well:#fcfbf8;
  --liq-ink:#1b2320;
  --liq-ink-soft:#4a5450;
  --liq-ink-faint:#9aa39e;
  --liq-line:#dddad0;
  --liq-yellow:#edb111;
  --liq-yellow-dk:#b98705;
  --liq-yellow-bg:#fbf3da;
  --liq-green:#1f8a5d;
  --liq-green-bg:#e7f3ec;
  --liq-orange:#e0762b;
  --liq-orange-bg:#fbefe3;
  --liq-red:#cf4433;
  --liq-red-bg:#f9e9e6;
  --liq-blue:#1d6fd1;
  --liq-blue-bg:#e8f0fb;
  --liq-gray:#6b746f;
  --liq-gray-bg:#efeee8;
  --liq-font:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --liq-display:'Archivo Narrow','Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --liq-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Legacy variable names used by the account pages, remapped to the palette */
  --bg:var(--liq-paper);
  --panel:var(--liq-card);
  --panel2:var(--liq-well);
  --line:var(--liq-line);
  --ink:var(--liq-ink);
  --sub:var(--liq-ink-soft);
  --blue:var(--liq-blue);
  --green:var(--liq-green);
  --amber:var(--liq-yellow-dk);
  --red:var(--liq-red);
  --violet:#6d4aa8;
}

/* ---------- Base ---------- */
:root { color-scheme:light; }
html body { background:var(--liq-paper); color:var(--liq-ink); font-family:var(--liq-font); }
body h1, body h2, body h3 { font-family:var(--liq-display); letter-spacing:.01em; }
body h1, body h2 { text-transform:uppercase; font-weight:700; }
.muted, .sub, .label { color:var(--liq-ink-soft); }
.label { text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.mono, code { font-family:var(--liq-mono); }
.good { color:var(--liq-green); }
.warn { color:var(--liq-orange); }
.bad  { color:var(--liq-red); }

/* ---------- Surfaces ---------- */
.panel, .card { background:var(--liq-card); border:1px solid var(--liq-line); border-radius:8px; box-shadow:none; }
.card { background:var(--liq-card); }
.panel h2, .card h3 { color:var(--liq-ink); }
.metric-card { background:var(--liq-card); }
.metric { font-family:var(--liq-display); font-weight:700; font-size:30px; line-height:1.05; color:var(--liq-ink); }
.row { border-bottom-color:var(--liq-line); }
.row b { font-family:var(--liq-mono); font-weight:600; }

/* Accent rule — marks the primary card on a page (mockup: "Your subscription") */
.liq-accent-top { border-top:4px solid var(--liq-yellow); }

/* ---------- Chips ---------- */
.chip { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; white-space:nowrap; font-family:var(--liq-font); }
.chip.green  { color:var(--liq-green);     background:var(--liq-green-bg); }
.chip.orange { color:var(--liq-orange);    background:var(--liq-orange-bg); }
.chip.red    { color:var(--liq-red);       background:var(--liq-red-bg); }
.chip.blue   { color:var(--liq-blue);      background:var(--liq-blue-bg); }
.chip.yellow { color:var(--liq-yellow-dk); background:var(--liq-yellow-bg); }
.chip.gray   { color:var(--liq-gray);      background:var(--liq-gray-bg); }

/* Legacy source badges (live / mirror / stripe / none) reuse the chip tones */
.source { border-radius:4px; padding:2px 8px; font-size:10px; font-weight:700; }
.source::before { display:none; }
.source.live   { background:var(--liq-green-bg);  color:var(--liq-green); }
.source.mirror { background:var(--liq-yellow-bg); color:var(--liq-yellow-dk); }
.source.stripe { background:var(--liq-blue-bg);   color:var(--liq-blue); }
.source.none   { background:var(--liq-gray-bg);   color:var(--liq-gray); }

/* ---------- Sync stripe ----------
   Signature element: four dashes reading SSM -> Supabase -> Stripe -> QuickBooks.
   Renders the pipeline state of one account at a glance. */
.sync-stripe { display:inline-flex; align-items:flex-end; gap:6px; }
.sync-cell { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sync-bar { width:30px; height:6px; border-radius:2px; background:transparent; border:1.5px dashed var(--liq-line); box-sizing:border-box; }
.sync-stripe.lg .sync-bar { width:44px; height:10px; }
.sync-label { font-family:var(--liq-mono); font-size:9px; color:var(--liq-ink-soft); letter-spacing:.04em; }
/* Only REACHED states fill a bar — waiting/queued stages stay hollow so an
   unmigrated account can never read as "linked". */
.sync-bar.ok      { background:var(--liq-green); border:0; }
.sync-bar.pending { background:var(--liq-orange); border:0; }
.sync-bar.fail    { background:var(--liq-red); border:0; }
.sync-bar.wait    { background:transparent; border:1.5px dashed #9aa39e; }
.sync-bar.na,
.sync-bar.unknown { background:transparent; border:1.5px dashed var(--liq-line); }

/* ---------- Progress (hazard stripe) ---------- */
.hazard-track { flex:1; min-width:80px; height:10px; border-radius:999px; background:var(--liq-gray-bg); overflow:hidden; }
.hazard-fill { height:100%; background:repeating-linear-gradient(90deg,var(--liq-yellow),var(--liq-yellow) 14px,var(--liq-ink) 14px,var(--liq-ink) 18px); }

/* ---------- Tables ---------- */
table { font-family:var(--liq-font); }
thead tr { border-bottom:2px solid var(--liq-ink); }
th { color:var(--liq-ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:10px; }
td { border-bottom:1px solid var(--liq-line); color:var(--liq-ink); }
tbody tr:last-child td { border-bottom:0; }
td .id, td.num, .num { font-family:var(--liq-mono); }

/* ---------- Buttons ---------- */
.btn, button.btn { background:var(--liq-card); border:1px solid var(--liq-line); color:var(--liq-ink); border-radius:5px; font-weight:600; }
.btn:hover { background:var(--liq-gray-bg); }
.btn.primary { background:var(--liq-yellow); border-color:var(--liq-yellow); color:var(--liq-ink); font-weight:700; }
.btn.primary:hover { background:var(--liq-yellow-dk); border-color:var(--liq-yellow-dk); }
.btn.ink { background:var(--liq-ink); border-color:var(--liq-ink); color:var(--liq-yellow); font-weight:700; }
.btn.confirm { background:var(--liq-green); border-color:var(--liq-green); color:#fff; font-weight:700; }
.btn.danger { color:var(--liq-red); border-color:var(--liq-line); background:var(--liq-card); }
.btn.danger:hover { background:var(--liq-red-bg); }

/* ---------- Tabs ---------- */
.tabs, .main-tabs { border-bottom:1px solid var(--liq-line); }
.tab, .main-tab { color:var(--liq-ink-soft); font-family:var(--liq-font); font-weight:600; background:none; border-bottom:2px solid transparent; }
.tab:hover, .main-tab:hover { color:var(--liq-ink); }
.tab.on, .main-tab.active { color:var(--liq-ink); border-bottom-color:var(--liq-yellow); }
.side-tab { color:var(--liq-ink-soft); background:transparent; border:1px solid transparent; font-weight:600; }
.side-tab:hover { background:var(--liq-gray-bg); color:var(--liq-ink); }
.side-tab.on { background:var(--liq-yellow-bg); border-color:var(--liq-yellow); color:var(--liq-ink); }

/* ---------- Account list ---------- */
.account { border:1px solid transparent; }
.account:hover { background:var(--liq-well); border-color:var(--liq-line); }
.account.on { background:var(--liq-yellow-bg); border-color:var(--liq-yellow); }
.account-name { color:var(--liq-ink); }
.account-meta { color:var(--liq-ink-soft); }

/* Legacy status badges on admin-accounts, mapped onto the chip tones */
.badge { border-radius:4px; padding:2px 8px; font-size:10px; font-weight:700; background:var(--liq-gray-bg); color:var(--liq-gray); }
.badge::before { display:none; }
.badge.live { background:var(--liq-green-bg); color:var(--liq-green); }
.badge.trial { background:var(--liq-blue-bg); color:var(--liq-blue); }
.badge.hold { background:var(--liq-orange-bg); color:var(--liq-orange); }
.badge.stripe { background:var(--liq-blue-bg); color:var(--liq-blue); }
.badge.gray { background:var(--liq-gray-bg); color:var(--liq-gray); }
.badge.blue { background:var(--liq-blue-bg); color:var(--liq-blue); }
.badge.green { background:var(--liq-green-bg); color:var(--liq-green); }
.badge.amber { background:var(--liq-yellow-bg); color:var(--liq-yellow-dk); }
.badge.red { background:var(--liq-red-bg); color:var(--liq-red); }

/* Customer account home */
.hero h1 { font-family:var(--liq-display); text-transform:uppercase; }
.product { background:var(--liq-well); border:1px solid var(--liq-line); }
.product h3 { font-family:var(--liq-display); text-transform:uppercase; color:var(--liq-ink); }
.product p { color:var(--liq-ink-soft); }
.rows .key { color:var(--liq-ink-soft); }
.rows .row { border-bottom-color:var(--liq-line); }

.account-item { border:1px solid transparent; }
.account-item:hover { background:var(--liq-well); border-color:var(--liq-line); }
.account-item.selected { background:var(--liq-yellow-bg); border-color:var(--liq-yellow); }

/* ---------- Forms ---------- */
.search, .field input, .field select, .field textarea, input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  background:var(--liq-well); border:1px solid var(--liq-line); color:var(--liq-ink); font-family:var(--liq-font);
}
.field input:focus, .field select:focus, .field textarea:focus, .search:focus { outline:2px solid var(--liq-yellow); outline-offset:-1px; }
.field label { color:var(--liq-ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.field input[type=number], .quote-line input { font-family:var(--liq-mono); }

/* ---------- Modals and drawers ---------- */
.modal-bg { background:rgba(27,35,32,.35); }
.modal { background:var(--liq-card); border:1px solid var(--liq-line); }
.liq-drawer-bg { position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end; background:rgba(27,35,32,.35); }
.liq-drawer { width:min(460px,100%); height:100%; overflow-y:auto; padding:24px; background:var(--liq-card); }

/* ---------- Callouts ---------- */
.notice { background:var(--liq-yellow-bg); border:1px solid var(--liq-yellow); color:var(--liq-yellow-dk); }
.info-note { background:var(--liq-blue-bg); border:1px solid transparent; color:var(--liq-blue); border-radius:6px; padding:12px; font-size:12px; line-height:1.5; }
.error { background:var(--liq-red-bg); border:1px solid var(--liq-red); color:var(--liq-red); }
.empty, .loading { color:var(--liq-ink-soft); }

/* ---------- Event log ---------- */
.event { display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
.event-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--liq-gray); }
.event-dot.green { background:var(--liq-green); }
.event-dot.orange { background:var(--liq-orange); }
.event-dot.red { background:var(--liq-red); }
.event-dot.blue { background:var(--liq-blue); }
.event-type { font-family:var(--liq-mono); font-size:11px; font-weight:600; color:var(--liq-ink); }
.event-age { font-size:11px; color:var(--liq-ink-faint); }
.event-detail { font-size:12px; color:var(--liq-ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Shell overrides (app-shell.css is dark by default) ---------- */
/* Higher specificity than app-shell.css's .liq-shell so the light ground wins
   regardless of stylesheet load order (several pages load app-shell.css late). */
:root .liq-shell { background:var(--liq-paper); color:var(--liq-ink); }
/* The top bar and sidebar stay dark chrome — force their text light so the
   page title never renders ink-on-dark. */
:root .liq-shell-top { background:var(--liq-ink); border-color:#37423d; }
:root .liq-shell-top .liq-shell-title { color:#ffffff; }
:root .liq-shell-top .liq-shell-context { color:#b9c2bd; }
:root .liq-shell-top .liq-shell-menu { background:#2c3531; border-color:#37423d; color:#fff; }
/* Sidebar: same ink chrome as the top bar (replaces app-shell's navy), with a
   marking-paint yellow active state. */
:root .liq-sidebar { background:#161c19; border-color:#2c3531; }
:root .liq-brand { border-color:#2c3531; color:#fff; }
:root .liq-side-label { color:#8a938e; }
:root .liq-side-link { color:#b9c2bd; }
:root .liq-side-link:hover { color:#ffffff; background:rgba(255,255,255,.06); }
:root .liq-side-link.active { color:#1b2320; background:var(--liq-yellow); box-shadow:inset 3px 0 0 var(--liq-yellow-dk); font-weight:700; }
:root .liq-env { border-color:#2c3531; color:#8a938e; }

/* Wide tables scroll INSIDE their card instead of blowing out the layout —
   standard practice; applies to platform panels and the bridged Tailwind cards. */
.panel table, .card table, .modal table, .group-body table {
  display: block; max-width: 100%; overflow-x: auto;
}
.liq-sidebar { background:var(--liq-ink); border-right:0; }
.liq-brand { color:#fff; border-bottom-color:rgba(255,255,255,.08); font-family:var(--liq-display); text-transform:uppercase; }
.liq-side-label { color:var(--liq-yellow); font-family:var(--liq-mono); }
.liq-side-link { color:#8b948f; border-left:3px solid transparent; border-radius:0; font-weight:600; }
.liq-side-link:hover { background:rgba(255,255,255,.04); color:#fff; }
.liq-side-link.active { background:rgba(237,177,17,.08); color:var(--liq-yellow); border-left-color:var(--liq-yellow); box-shadow:none; }
.liq-side-icon { color:inherit; }
.liq-env { color:#8b948f; border-top-color:rgba(255,255,255,.08); }
.liq-shell-top { background:var(--liq-card); border-bottom-color:var(--liq-line); }
.liq-shell-title { font-family:var(--liq-display); text-transform:uppercase; letter-spacing:.02em; font-size:16px; }
.liq-shell-context { color:var(--liq-ink-soft); }
.liq-shell-menu { background:var(--liq-card); border-color:var(--liq-line); color:var(--liq-ink); }