/* ===================================================================
   Beastmode PO — eye-friendly skin (re-skin 2026-05-19)
   Token-driven. Built for 8-hour staff use.
   All original selectors preserved; palette + topbar + login restyled.
   =================================================================== */

:root {
  /* ---- Eye-friendly palette (canonical, from beastmode mockups) ---- */
  --page:        #ede7d9;
  --bg:          #faf6ec;   /* off-white page bg (not pure white) */
  --surface:     #fdfaf2;   /* cards */
  --soft:        #f1eadb;   /* sunken / hover */
  --soft-2:      #ebe2cf;
  --line:        #e8dfca;   /* warm border */
  --line-soft:   #f0e9d8;

  --ink:         #26424f;   /* body text (softened from pure black) */
  --ink-2:       #3d525c;
  --muted:       #7a8a92;
  --muted-2:     #94a1a8;

  --navy:        #234c5e;   /* primary accent / brand */
  --navy-2:      #2c5a6e;
  --navy-deep:   #1f4253;

  --orange:      #d56a1f;   /* CTA */
  --orange-soft: #e08746;
  --orange-bg:   #faecdc;

  --green:       #3d8a5a;   /* sage, not vibrant */
  --green-bg:    #e3eee2;
  --amber:       #b88324;
  --amber-bg:    #f5ecd3;
  --red:         #b84838;   /* brick, not stop-sign red */
  --red-bg:      #f5dfd6;
  --plum:        #6c5897;
  --plum-bg:     #ece4f1;

  /* ---- Backwards-compatible aliases (old token names) ----
     Every template uses these. Don't remove. */
  --bg-card:     var(--surface);
  --bg-sunken:   var(--soft);
  --rule:        var(--line);
  --rule-strong: #d4c9ad;
  --ink-3:       var(--muted);
  --accent:      var(--navy);
  --accent-2:    var(--orange);

  /* ---- Geometry ---- */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  /* ---- Typography ---- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Comfort scaling (overridden by body class / user prefs) ---- */
  --base-size: 14px;
  --warmth:    0;       /* 0..1 — extra warm filter on body */
}

/* Comfort: text size */
body.cf-text-90  { --base-size: 12.6px; }
body.cf-text-100 { --base-size: 14px;   }
body.cf-text-110 { --base-size: 15.4px; }
body.cf-text-120 { --base-size: 16.8px; }
body.cf-text-130 { --base-size: 18.2px; }

/* Comfort: extra warmth */
body.cf-warm-extra { filter: sepia(8%) saturate(105%); }

/* Comfort: reduced motion override */
body.cf-no-motion *, body.cf-no-motion *::before, body.cf-no-motion *::after {
  transition: none !important;
  animation: none !important;
}

/* Comfort: night mode */
body.cf-night {
  --bg:        #1d262b;
  --surface:   #243036;
  --soft:      #2c3a42;
  --soft-2:    #354650;
  --line:      #36464f;
  --line-soft: #2e3c44;
  --ink:       #e7eef1;
  --ink-2:     #c5d1d6;
  --muted:     #8fa0a8;
  --muted-2:   #6f818a;
  --bg-card:   var(--surface);
  --bg-sunken: var(--soft);
  --rule:      var(--line);
  --rule-strong: #4a5d68;
  --ink-3:     var(--muted);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--base-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 700;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.num { text-align: right; }
.small { font-size: 12px; }

/* ---------- Top bar (light, mockup-style) ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 20px;
  border-right: 1px solid var(--line);
  height: 100%;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px;
  background: var(--navy);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  letter-spacing: 0.5px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.navlinks {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: stretch;
  flex: 1;
  margin-left: 8px;
}
.navlink {
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
}
.navlink:hover { color: var(--ink); text-decoration: none; background: var(--soft); }
.navlink.active,
.navlink[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--orange);
}
.navlink-cta {
  margin-left: 8px;
  background: var(--orange);
  color: var(--surface);
  border-radius: 8px;
  padding: 0 14px;
  height: 36px;
  align-self: center;
  border-bottom: none !important;
}
.navlink-cta:hover { background: var(--orange-soft); color: var(--surface); }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-name { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.linkbtn {
  background: none; border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 6px;
  font-weight: 600;
}
.linkbtn:hover { color: var(--ink); background: var(--soft); }

/* Comfort gear button in topbar */
.comfort-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.comfort-btn:hover { background: var(--soft); color: var(--ink); }

/* ---------- Page ---------- */
.page { max-width: 1480px; margin: 0 auto; padding: 24px 24px 60px; }
.page-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  margin: 24px 0 12px;
  color: var(--ink);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
}
.card h3 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  margin: 18px 0 8px;
  color: var(--ink);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Filters ---------- */
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.filter-form { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.filter-group label {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 800;
}
.pillrow { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
}
.pill:hover { background: var(--soft); text-decoration: none; }
.pill-on {
  background: var(--navy); color: var(--bg);
  border-color: var(--navy);
}
.pill-on:hover { background: var(--navy-deep); color: var(--bg); }
.pillcount {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  padding: 0 7px; border-radius: 999px; font-size: 10px;
  font-weight: 700;
}
.pill:not(.pill-on) .pillcount { background: var(--soft); color: var(--muted); }
.entity-pill .entity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--entity-primary, var(--navy));
  display: inline-block;
}
.filter-search { margin-left: auto; display: flex; align-items: flex-end; gap: 6px; }
.filter-search input { width: 240px; }

/* ---------- Inputs ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(213, 106, 31, 0.18);
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label, .stacked label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-2);
}
.stacked { display: flex; flex-direction: column; gap: 12px; }
.hint { font-size: 12px; color: var(--muted); }
.radiorow { display: flex; gap: 16px; padding: 6px 0; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.radio input { width: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.12s, transform 0.05s;
  line-height: 1.2;
  gap: 6px;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--orange); color: var(--surface);
  border-color: var(--orange);
}
.btn-primary:hover:not(:disabled) { background: var(--orange-soft); border-color: var(--orange-soft); }
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover:not(:disabled) { background: var(--soft); }
.btn-tertiary {
  background: transparent; color: var(--ink-2); border-color: transparent;
}
.btn-tertiary:hover:not(:disabled) { background: var(--soft); }
.btn-navy {
  background: var(--navy); color: var(--bg);
  border-color: var(--navy);
}
.btn-navy:hover:not(:disabled) { background: var(--navy-deep); }
.btn-danger {
  background: var(--red); color: var(--surface);
  border-color: var(--red);
}
.btn-danger:hover:not(:disabled) { background: #9d3a2c; }
.btn-warning {
  background: var(--amber-bg); color: var(--amber);
  border-color: var(--amber);
}
.btn-warning:hover:not(:disabled) { background: #ecdbac; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.iconbtn {
  background: transparent; border: 1px solid transparent;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted);
}
.iconbtn:hover { background: var(--soft); color: var(--red); }

/* ---------- Tables ---------- */
.potable-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.potable { width: 100%; border-collapse: collapse; }
.potable th {
  text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.potable th.num { text-align: right; }
.potable td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.potable tbody tr { cursor: pointer; transition: background 0.1s; }
.potable tbody tr:hover { background: var(--soft); }
.potable tbody tr:last-child td { border-bottom: none; }
.potable .empty { text-align: center; color: var(--muted); padding: 32px; cursor: default; }
.po-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}

/* ---------- Entity tag ---------- */
.entity-tag {
  display: inline-flex; align-items: center;
  background: var(--entity-primary, var(--navy));
  color: var(--entity-accent, var(--bg));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  margin-right: 8px;
}

/* ---------- Status badges ---------- */
.status {
  display: inline-block;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.status-draft           { background: var(--surface);  color: var(--muted);  border-color: var(--line); }
.status-sent            { background: var(--soft);     color: var(--navy);   border-color: transparent; }
.status-partially_received { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.status-received        { background: var(--green-bg); color: var(--green);  border-color: transparent; }
.status-invoiced        { background: var(--plum-bg);  color: var(--plum);   border-color: transparent; }
.status-closed          { background: var(--soft-2);   color: var(--ink-2);  border-color: transparent; }
.status-cancelled       { background: var(--red-bg);   color: var(--red);    border-color: transparent; }
.status-running         { background: var(--amber-bg); color: var(--amber);  border-color: transparent; }
.status-success         { background: var(--green-bg); color: var(--green);  border-color: transparent; }
.status-failed          { background: var(--red-bg);   color: var(--red);    border-color: transparent; }
.status-deposit_paid    { background: var(--orange-bg);color: var(--orange); border-color: transparent; }
.status-paid            { background: var(--green-bg); color: var(--green);  border-color: transparent; }
.status-partially_paid  { background: var(--amber-bg); color: var(--amber);  border-color: transparent; }
.status-overdue         { background: var(--red-bg);   color: var(--red);    border-color: transparent; }
.status-converted       { background: var(--plum-bg);  color: var(--plum);   border-color: transparent; }
.status-expired         { background: var(--soft-2);   color: var(--muted);  border-color: transparent; }
.status-declined        { background: var(--red-bg);   color: var(--red);    border-color: transparent; }

.badge {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-stock    { background: var(--amber-bg); color: var(--amber); }
.badge-adhoc    { background: var(--plum-bg);  color: var(--plum); margin-left: 4px; }
.badge-overdue  { background: var(--red-bg);   color: var(--red); }
.badge-success  { background: var(--green-bg); color: var(--green); }

/* ---------- Margin bands ---------- */
.margin {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}
.margin-green { background: var(--green-bg); color: var(--green); }
.margin-amber { background: var(--amber-bg); color: var(--amber); }
.margin-red   { background: var(--red-bg);   color: var(--red); }
.margin-na    { color: var(--muted); background: transparent; }

/* ---------- Forms (PO new etc) ---------- */
.po-form .card, .po-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.linetable { width: 100%; border-collapse: collapse; margin: 12px 0; }
.linetable th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 800;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  text-align: left;
}
.linetable th.num { text-align: right; }
.linetable td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.linetable.static td, .linetable.static th { padding: 11px 14px; }
.linetable input { padding: 6px 8px; }
.line-product { position: relative; min-width: 280px; }
.line-desc { font-size: 12px; margin-top: 4px; color: var(--ink-2); }
.sku-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 12px 28px rgba(74, 55, 30, 0.12);
}
.sku-hit { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.sku-hit:hover { background: var(--soft); }
.sku-hit:last-child { border-bottom: none; }

/* ---------- Customer typeahead (New/Edit Quote + Invoice) ---------- */
.customer-combo { position: relative; }
.customer-search { width: 100%; }
.customer-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 12px 28px rgba(74, 55, 30, 0.12);
}
.customer-result-item {
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.customer-result-item:hover { background: var(--soft); }
.customer-result-item:last-child { border-bottom: none; }
.line-actions { display: flex; gap: 8px; margin: 12px 0; }
.totals-row {
  display: flex; gap: 32px; justify-content: flex-end;
  padding: 14px 0; border-top: 2px solid var(--navy); margin-top: 8px;
}
.total-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.t-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 800;
}
.form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---------- Detail header + sticky action rail ---------- */
.po-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.po-header-id { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.po-num-h1 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  margin: 0; letter-spacing: -0.01em;
  color: var(--ink);
}
.po-meta { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; }
.po-meta .muted {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 2px; font-weight: 800;
}

/* Sticky action rail per brief §8 */
.po-header-actions {
  display: flex; gap: 8px; flex-shrink: 0;
  position: sticky; top: 16px;
  align-self: flex-start;
  flex-wrap: wrap;
  max-width: 360px;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .po-header-actions { position: static; max-width: none; }
}

/* Meta/info card row */
.po-meta-card { padding: 18px 20px; }
.meta-row { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.meta-row:last-child { border-bottom: none; }
.meta-label {
  flex: 0 0 140px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 800;
  padding-top: 2px;
}
.meta-value { flex: 1; color: var(--ink); font-size: 14px; }

/* Xero "Pushed" card */
.xero-bill-card { border-left: 3px solid var(--green); }

/* Invoice payment banner + estimate deposit-received banner — both have legacy inline styles in the templates */
.invoice-payment-banner,
.deposit-received-banner {
  background: var(--green-bg) !important;
  border: 1px solid #b8dcb8 !important;
  color: var(--green) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  margin: 14px 0 !important;
  font-size: 13px;
}

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 14px; align-items: baseline; font-size: 13px;
}
.timeline li:last-child { border-bottom: none; }

/* ---------- Flash messages ---------- */
.po-flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
.po-flash-success {
  background: var(--green-bg); color: var(--green); border-color: #b8dcb8;
}
.po-flash-error {
  background: var(--red-bg); color: var(--red); border-color: #e9b8b5;
}

.alert {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.alert-error   { background: var(--red-bg);   color: var(--red);   border: 1px solid #e9b8b5; }
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid #b8dcb8; }

/* ---------- Admin ---------- */
.sync-stats { display: flex; gap: 32px; margin: 12px 0 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .mono {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  color: var(--ink);
}
.sync-actions { display: flex; gap: 8px; margin-bottom: 18px; }
.swatch {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; vertical-align: middle;
  margin-right: 6px; border: 1px solid var(--line);
}

/* ---------- Entity cards (admin) ---------- */
.entity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.entity-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.entity-card-head {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.entity-card-code {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.entity-card-name { font-weight: 700; flex: 1; }
.entity-card-seq { font-size: 12px; opacity: 0.85; }
.entity-card-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.entity-card-body label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}

/* ---------- Login (warm, not dark) ---------- */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  padding: 24px; /* Phase 6 S3 — gutter so the card never touches screen edges on ≤360px */
  background: var(--page);
  background-image:
    radial-gradient(at 28% 18%, rgba(213, 106, 31, 0.10), transparent 55%),
    radial-gradient(at 72% 80%, rgba(35, 76, 94, 0.10), transparent 55%);
  font-family: var(--font-sans);
}
.login-card {
  background: var(--surface);
  padding: 36px;
  border-radius: var(--radius-lg);
  width: 100%; /* Phase 6 S3 — was fixed 380px, overflowed 360px phones */
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(74, 55, 30, 0.18);
  border: 1px solid var(--line);
}
.login-mark {
  background: var(--navy); color: var(--bg);
  font-family: var(--font-display);
  font-weight: 900;
  padding: 6px 12px; border-radius: 8px;
  display: inline-block;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  font-size: 14px;
}
.login-mark span { color: var(--orange); }
.login-card h1 {
  font-family: var(--font-display);
  font-size: 22px; margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.login-sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}

/* ---------- Stripe payment link panel ---------- */
.pay-link-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 14px 0;
}
.pay-link-card h4 {
  margin: 0 0 8px 0;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
}
.pay-link-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 0;
  flex-wrap: wrap;
}
.pay-link-row .label {
  font-weight: 700;
  min-width: 180px;
  font-size: 12px;
  color: var(--ink-2);
}
.pay-link-row .url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  word-break: break-all;
  color: var(--ink-2);
}
.pay-link-row .copy-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.pay-link-row .copy-btn:hover { background: var(--soft-2); }

/* ---------- Legacy class aliases (estimate_list, invoice_list) ---------- */
.status-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pill-active {
  background: var(--navy) !important;
  color: var(--bg) !important;
  border-color: var(--navy) !important;
}
.pill-count {
  display: inline-block;
  background: var(--soft);
  color: var(--muted);
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.pill-active .pill-count {
  background: rgba(255,255,255,0.20);
  color: var(--bg);
}
.po-list-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.po-list-table th {
  text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.po-list-table th.num { text-align: right; }
.po-list-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.po-list-table tbody tr { cursor: pointer; transition: background 0.1s; }
.po-list-table tbody tr:hover { background: var(--soft); }
.po-list-table tbody tr:last-child td { border-bottom: none; }
.po-list-table .empty { text-align: center; color: var(--muted); padding: 32px; cursor: default; }

/* ---------- Dashboard receive button ---------- */
.expected-cell { white-space: nowrap; }
.expected-date.overdue { color: var(--red); font-weight: 700; }
.expected-date.grace   { color: var(--amber); font-weight: 700; }
.expected-date.today   { color: var(--orange); font-weight: 700; }
.action-cell-dash { white-space: nowrap; text-align: right; }
.dashboard-receive-btn { padding: 4px 10px; font-size: 11px; }

/* Receive flow */
.status-display { color: var(--ink-2); }
.receive-actions {
  display: flex; gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.receive-help {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--soft);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-2);
}
.receive-help ul { margin: 6px 0 0; padding-left: 18px; }
.receive-qty {
  width: 90px;
  text-align: right;
}

/* ---------- Comfort settings panel ---------- */
.comfort-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(74, 55, 30, 0.20);
  padding: 18px;
  z-index: 100;
  display: none;
  font-size: 13px;
}
.comfort-panel.open { display: block; }
.comfort-panel h3 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 14px;
  color: var(--ink);
}
.comfort-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.comfort-row > label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.comfort-options { display: flex; gap: 4px; flex-wrap: wrap; }
.comfort-options button {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.comfort-options button.on {
  background: var(--navy); color: var(--bg);
  border-color: var(--navy);
}
.comfort-toggle { display: flex; justify-content: space-between; align-items: center; }
.comfort-toggle label { font-size: 13px; color: var(--ink); font-weight: 600; }
.comfort-foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

/* 20-20-20 toast */
.ttt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--bg);
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  display: none;
  font-family: var(--font-display);
}
.ttt-toast.open { display: block; }
.ttt-toast .ttt-sub { font-family: var(--font-sans); font-size: 12px; opacity: 0.85; margin-top: 4px; font-weight: 500; }

/* ---------- Synced-to-Xero strip (per brief §8) ---------- */
.synced-strip {
  background: var(--green-bg);
  border: 1px solid #b8dcb8;
  color: var(--green);
  padding: 10px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.synced-strip::before { content: '✓'; font-weight: 800; }

/* ===================================================================
   Phase 2 — Workspace shell (sidebar + main pad) for Home / Sales Perf / Cashflow
   =================================================================== */

.workspace {
  display: flex;
  align-items: stretch;
  max-width: 1480px;
  margin: 0 auto;
  min-height: calc(100vh - 56px);
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 22px 0;
  overflow-y: auto;
}
.side-section { padding: 0 16px 18px; }
.side-section + .side-section { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.side-section h4 {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 10px 8px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.side-link:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.side-link.active { background: var(--soft); color: var(--navy); font-weight: 700; }
.side-link .si {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}
.side-link.active .si { color: var(--orange); }
.side-link .count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  background: var(--soft-2);
  color: var(--ink-2);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
}
.side-link.active .count { background: var(--orange); color: var(--surface); }
/* Item 14 — Sync Conflicts danger badge (a problem, not pending work) + faint
   all-clear indicator for genuine zeros. Uses the existing --red brick token. */
.side-link .count.count-danger { background: var(--red-bg); color: var(--red); }
.side-link .si.si-danger { color: var(--red); }
.side-link .count-clear {
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.55;
}
/* Item 14 follow-up — Pending Xero Push shows two pills (neutral pending +
   red stuck). Wrap them in one right-aligned cluster so the second pill doesn't
   fight the .count margin-left:auto. */
.side-link .qmeta { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.side-link .qmeta .count,
.side-link .qmeta .count-clear { margin-left: 0; }
.main-pad {
  flex: 1;
  padding: 26px 32px 60px;
  min-width: 0;  /* prevent flex children from forcing overflow */
}

/* Hamburger button — hidden on desktop, shown at <=900px */
.hamburger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}
.hamburger:hover { background: var(--soft); color: var(--ink); }
.hamburger svg { width: 18px; height: 18px; }

/* Drawer overlay (mobile only) */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 38, 0.42);
  z-index: 90;
}
.drawer-backdrop.open { display: block; }

/* ===================================================================
   Phase 2 — Dashboard tiles
   =================================================================== */

.dash-greet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-greet h1 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.dash-greet .subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dash-greet .page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.kpi-tile .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.kpi-tile .label {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kpi-tile .icon-w {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--soft);
  display: grid; place-items: center;
  color: var(--navy);
  font-size: 16px;
}
.kpi-tile.green .icon-w  { background: var(--green-bg);  color: var(--green); }
.kpi-tile.orange .icon-w { background: var(--orange-bg); color: var(--orange); }
.kpi-tile.plum .icon-w   { background: var(--plum-bg);   color: var(--plum); }
.kpi-tile.amber .icon-w  { background: var(--amber-bg);  color: var(--amber); }
.kpi-tile .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
  line-height: 1.1;
}
.kpi-tile .delta {
  font-size: 12px; font-weight: 700;
  margin-top: 6px;
}
.kpi-tile .delta.up   { color: var(--green); }
.kpi-tile .delta.down { color: var(--red); }
.kpi-tile .sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.second-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dash-card .head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-card .head h3 {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.dash-card .head a { font-size: 12px; color: var(--orange); font-weight: 700; }

.chart-tabs { display: flex; gap: 4px; }
.chart-tab {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
}
.chart-tab:hover { background: var(--soft); color: var(--ink-2); text-decoration: none; }
.chart-tab.active { background: var(--soft); color: var(--navy); }

.chart-area { padding: 14px 18px 18px; height: 240px; position: relative; }
.chart-area.tall { height: 320px; }
.chart-svg { width: 100%; height: 100%; }
.chart-svg .axis-label { fill: var(--muted); font-size: 10px; font-family: var(--font-sans); font-weight: 600; }
.chart-svg .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .area-fill { fill: var(--orange); fill-opacity: 0.12; }
.chart-svg .line-stroke { stroke: var(--orange); stroke-width: 2.5; fill: none; }
.chart-svg .point { fill: var(--surface); stroke: var(--orange); stroke-width: 2; }
.chart-svg .bar-in  { fill: var(--green); }
.chart-svg .bar-out { fill: var(--red); }

.activity-list .row {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.activity-list .row:last-child { border-bottom: none; }
.li-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.li-icon.invoice { background: var(--green-bg); color: var(--green); }
.li-icon.po      { background: var(--orange-bg); color: var(--orange); }
.li-icon.quote   { background: var(--soft); color: var(--navy); }
.li-icon.payment { background: var(--plum-bg); color: var(--plum); }
.li-content { flex: 1; min-width: 0; }
.li-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.li-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
}

.mini-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  gap: 10px;
}
.mini-list .row:last-child { border-bottom: none; }
.mini-list .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mini-list .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mini-list .right { text-align: right; }
.mini-list .right .amt { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }
.mini-list .empty { padding: 24px 18px; text-align: center; color: var(--muted); font-size: 13px; }

.sync-panel {
  background: var(--navy);
  color: var(--bg);
  padding: 18px;
  border-radius: var(--radius-lg);
}
.sync-panel h3 {
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.sync-panel .sync-when { font-size: 11px; opacity: 0.7; margin-bottom: 12px; }
.sync-panel .sync-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 12px;
  border-bottom: 1px solid rgba(253, 250, 242, 0.10);
}
.sync-panel .sync-row:last-child { border-bottom: none; }
.sync-panel .sync-row .src { display: flex; gap: 8px; align-items: center; }
.sync-panel .pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2);
}
.sync-panel .pill-dot.green { background: #87d3a1; }
.sync-panel .pill-dot.amber { background: #efc78c; }
.sync-panel .pill-dot.red   { background: #e09f93; }
.sync-panel .sync-cta {
  background: rgba(253,250,242,0.10);
  border: 1px solid rgba(253,250,242,0.18);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 12px;
  width: 100%;
}
.sync-panel .sync-cta:hover { background: rgba(253,250,242,0.16); }

/* ---------- Responsive trim ---------- */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .entity-grid { grid-template-columns: 1fr; }
  .po-header { flex-direction: column; }
  .filter-search { margin-left: 0; width: 100%; }
  .topbar-inner { padding: 0 12px; gap: 8px; }
  .navlinks { gap: 0; }
  .navlink { padding: 0 10px; font-size: 12px; }
  .brand { padding-right: 12px; }
  .page { padding: 16px 12px 40px; }
  .dash-grid { grid-template-columns: 1fr; }
  .second-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   Phase 2 — mobile pass (<= 768px)
   Hamburger drawer, 44px tap targets, 16px inputs (no iOS auto-zoom),
   stacked KPIs, full-bleed Comfort panel.
   =================================================================== */
@media (max-width: 768px) {
  /* Inputs: 16px to suppress iOS focus zoom + 44px tap target */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="date"],
  select, textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea { min-height: 88px; }

  /* Buttons: 44px tap target */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .linkbtn { min-height: 44px; padding: 10px 14px; }
  .iconbtn, .comfort-btn { width: 44px; height: 44px; }

  /* Topbar — hide nav links, show hamburger */
  .navlinks { display: none; }
  .hamburger { display: inline-flex; }
  .topbar-inner { gap: 6px; }
  .brand { padding-right: 8px; border-right: none; }
  .brand-name { display: none; } /* keep just the BM mark to save width */
  .user-name { display: none; }   /* Sign out + gear are enough */

  /* Comfort panel: full-screen sheet */
  .comfort-panel {
    top: 56px;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    overflow-y: auto;
    padding: 24px 18px 60px;
  }

  /* Sidebar: off-canvas drawer */
  .workspace { display: block; }
  .workspace > .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 86%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    border-right: 1px solid var(--line);
  }
  .workspace > .sidebar.open { transform: translateX(0); }
  body.drawer-open { overflow: hidden; }
  .drawer-backdrop { z-index: 90; }
  .side-link { min-height: 44px; padding: 11px 12px; }
  .main-pad { padding: 18px 12px 60px; }

  /* Dashboard tile stacking */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-tile .num { font-size: 22px; }
  .dash-grid, .second-grid { grid-template-columns: 1fr; gap: 14px; }
  .dash-greet { gap: 10px; }
  .dash-greet h1 { font-size: 22px; }

  /* Page chrome */
  .page { padding: 14px 10px 60px; }
  .page-title { font-size: 22px; }
  .section-title { font-size: 15px; }
  .card { padding: 16px; }

  /* Filters: stack the form vertically and full-width search */
  .filter-form { flex-direction: column; gap: 12px; }
  .filter-search { width: 100%; flex-direction: column; align-items: stretch; }
  .filter-search input { width: 100%; }

  /* Pills already wrap — bump tap target a touch */
  .pill { padding: 8px 12px; font-size: 13px; }

  /* Action header on detail pages: full-width stack, primary visually elevated */
  .po-header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .po-header-actions .btn { width: 100%; }
  .po-header-actions form { display: block !important; margin: 0 !important; }
  .po-header-actions form .btn { width: 100%; }
  /* Promote primary on mobile so the most-used action stands out in a stack */
  .po-header-actions .btn-primary {
    order: -1;
    font-size: 15px;
    min-height: 48px;
    box-shadow: 0 2px 0 rgba(213, 106, 31, 0.18);
  }

  /* Profit page KPIs */
  .invoice-payment-banner { font-size: 12px; padding: 10px 12px !important; }
  .pay-link-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .pay-link-row .label { min-width: 0; }
  .pay-link-row .url { font-size: 11px; }

  /* Comfort options: wrap freely */
  .comfort-options button { min-height: 36px; }

  /* C4: desktop-suggest banner on new-doc forms */
  .mobile-suggest-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--amber-bg);
    border: 1px solid #ecd9a8;
    color: var(--amber);
    padding: 12px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
  }
  .mobile-suggest-banner button {
    background: transparent;
    border: 1px solid var(--amber);
    color: var(--amber);
    font-family: inherit; font-size: 12px; font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    margin-left: auto;
    min-height: 36px;
  }
}
/* Desktop hides the banner entirely */
.mobile-suggest-banner { display: none; }
.mobile-suggest-banner.dismissed { display: none !important; }

/* Very small phones: collapse KPIs to single column */
@media (max-width: 420px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* ===================================================================
   Phase 2 — Tables → cards transform (mobile)
   Applies to list tables (.potable, .po-list-table, .xero-po-table) and
   the read-only .linetable.static blocks on detail pages.
   Each <td> needs a data-label="..." attr for the label-value pair.
   =================================================================== */
@media (max-width: 768px) {
  /* Hide the thead, dissolve the table */
  .potable thead,
  .po-list-table thead,
  .xero-po-table thead,
  .linetable.static thead { display: none; }

  .potable,
  .po-list-table,
  .xero-po-table,
  .linetable.static {
    display: block;
    background: transparent;
    border: none;
  }
  .potable-wrap, .table-card {
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .potable tbody, .po-list-table tbody, .xero-po-table tbody, .linetable.static tbody {
    display: block;
  }

  .potable tbody tr,
  .po-list-table tbody tr,
  .xero-po-table tbody tr,
  .linetable.static tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(74, 55, 30, 0.04);
  }

  .potable tbody td,
  .po-list-table tbody td,
  .xero-po-table tbody td,
  .linetable.static tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border: none;
    text-align: left;
    font-size: 13px;
  }

  /* Label, derived from data-label attribute */
  .potable tbody td[data-label]::before,
  .po-list-table tbody td[data-label]::before,
  .xero-po-table tbody td[data-label]::before,
  .linetable.static tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 80px;
  }

  /* Right-aligned number cells stay right-aligned on the value side */
  .potable tbody td.num,
  .po-list-table tbody td.num,
  .xero-po-table tbody td.num,
  .linetable.static tbody td.num { text-align: right; }

  /* First row cell (typically the doc number / SKU) gets a top divider */
  .potable tbody td:first-child,
  .po-list-table tbody td:first-child,
  .xero-po-table tbody td:first-child,
  .linetable.static tbody td:first-child {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 10px;
    margin-bottom: 4px;
  }

  /* Action cell (no data-label) takes full width on its own line */
  .potable tbody td:not([data-label]),
  .po-list-table tbody td:not([data-label]),
  .xero-po-table tbody td:not([data-label]),
  .linetable.static tbody td:not([data-label]) {
    justify-content: flex-end;
  }
  .potable tbody td.action-cell-dash,
  .xero-po-table tbody td:last-child {
    justify-content: stretch;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    margin-top: 4px;
  }
  .potable tbody td.action-cell-dash form,
  .potable tbody td.action-cell-dash .btn,
  .xero-po-table tbody td:last-child .btn { width: 100%; }

  /* Empty state row */
  .potable tbody td.empty,
  .po-list-table tbody td.empty,
  .xero-po-table tbody td.empty,
  .linetable.static tbody td.empty {
    justify-content: center;
    padding: 24px 0;
    color: var(--muted);
  }
}

/* ===================================================================
   Phase 6 S1 — editable PO line-table (.linetable-stack) reflow on phones.
   A horizontal-scroll wrapper would clip the .sku-results autocomplete
   dropdown (overflow-x:auto forces overflow-y to auto — no CSS override),
   so instead each row reflows into a stacked mini-form: SKU search full
   width (dropdown floats free), then Qty / Unit cost / Sell each as
   labelled fields, then the computed Line cost / Markup, then Remove.
   Scoped to .linetable-stack so the read-only .linetable.static card
   transform above and the estimate/invoice tables are untouched. Desktop
   is unaffected; the 'best on desktop' banner stays (po_new include).
   =================================================================== */
@media (max-width: 768px) {
  .linetable-stack { display: block; border: none; background: transparent; margin: 8px 0; }
  .linetable-stack thead { display: none; }
  .linetable-stack tbody { display: block; }

  .linetable-stack tbody tr.line-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(74, 55, 30, 0.04);
  }

  .linetable-stack tbody td { display: block; padding: 0; border: none; }

  /* Drag handle hidden on mobile — row reordering is a mouse interaction */
  .linetable-stack td.drag-handle { display: none; }

  /* SKU search on its own full-width line so the dropdown floats free */
  .linetable-stack td.line-product { flex: 1 1 100%; min-width: 0; }
  .linetable-stack td.line-product .sku-search { width: 100%; }

  /* Labelled fields: Qty / Unit cost / Sell each / Line cost / Markup */
  .linetable-stack td[data-label] { flex: 1 1 28%; min-width: 92px; }
  .linetable-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 800; color: var(--muted); margin-bottom: 4px;
  }
  .linetable-stack td[data-label] input { width: 100%; }
  .linetable-stack td.line-total,
  .linetable-stack td.line-margin { text-align: left; }

  /* Remove button on its own full-width line, right-aligned */
  .linetable-stack td:last-child { flex: 1 1 100%; text-align: right; padding-top: 2px; }
}

/* Phase 4 — Supplier contact card on PO form */
.supplier-contact-card {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}
.supplier-contact-name { margin-bottom: 4px; }
.supplier-contact-name strong { color: var(--ink-2, var(--muted)); font-weight: 600; }
.supplier-contact-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
}
.supplier-contact-label { font-weight: 600; color: var(--muted-2); }
.supplier-contact-value { color: var(--muted); margin-right: 8px; }
@media (max-width: 640px) {
  .supplier-contact-pair { flex-direction: column; gap: 2px; }
  .supplier-contact-value { margin-right: 0; }
}

/* Phase 4 — Prices freshness indicator (top of estimate/invoice/po forms) */
.prices-freshness {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 4px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
}
.prices-freshness span { color: var(--ink-2, var(--muted)); font-weight: 600; }

/* ---------- Brief #1 — PO line-item preview on the dashboard list ---------- */
.po-items-cell { max-width: 280px; }
.po-items-wrap { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.po-items {
  color: var(--text-soft, #3D525C);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.po-items-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .po-items-cell { max-width: none; }
  .po-items { white-space: normal; }
}

/* =========================================================================
   Carpet Whipping Tracker (Step 5)
   Carpet-scoped status pills (.cstatus-*) deliberately NOT reusing the shared
   .status-* family: .status-received is green (PO "terminal/received"), but a
   carpet "Received" is the INITIAL state. Scoping also isolates carpets from
   future PO/invoice pill changes. All colours reuse existing tokens — no new
   tokens added.
   ========================================================================= */

/* Status pills — reuse the .status base for shape; colour only here.
   Visual weight is intentionally distinct on Received vs Collected so they
   don't read the same at a glance on the list:
     Received  = fresh / needs attention (soft bg + navy accent, like .status-sent)
     Collected = archived / quiet        (soft-2 bg + muted grey) */
.cstatus-received     { background: var(--soft);     color: var(--navy);  border-color: transparent; }
.cstatus-in_progress  { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.cstatus-done         { background: var(--green-bg); color: var(--green); border-color: transparent; }
.cstatus-collected    { background: var(--soft-2);   color: var(--muted); border-color: transparent; }

/* List search */
.carpet-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.carpet-search input[type="search"] { flex: 1 1 240px; min-width: 0; }

/* Photo thumbnails — display side. The empty tile is a token-only diagonal
   slash so a NULL photo reads as an intentional "no image", not a broken img.
   Step 6 fills photo_*_path and the <img> branch renders instead. */
.carpet-thumbs { display: flex; gap: 6px; align-items: center; }
.thumb {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  object-fit: cover; background: var(--soft); display: inline-block;
}
.thumb-empty {
  background:
    linear-gradient(135deg, transparent 46%, var(--line) 46%, var(--line) 54%, transparent 54%),
    var(--soft);
}
.carpet-thumbs-lg .thumb { width: 96px; height: 96px; }

.carpet-desc { display: block; }

/* Form radios + inline validation */
.radio-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hint-error { color: var(--red); font-weight: 600; }

/* Detail status transition buttons + disabled notify row */
.status-actions { display: flex; flex-wrap: wrap; align-items: center; }
.notify-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* =========================================================================
   Carpet form layout (Step 5 mobile addendum)
   .form-group / .form-row are unstyled in app.css (they were only ever
   inline-styled elsewhere). With type="text" added the inputs now pick up the
   global width:100% rule; these scoped rules give consistent label spacing and
   make .form-row a responsive 2-up that wraps to stacked under ~220px/field
   (so it is single-column on a 360px phone, side-by-side on desktop).
   Existing tokens only.
   ========================================================================= */
#carpet-form .form-group { margin-bottom: 12px; }
#carpet-form .form-group label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
#carpet-form .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
#carpet-form .form-row > .form-group { flex: 1 1 220px; }

/* =========================================================================
   Carpet photos (Step 6) — upload forms (detail page) + "add photos" hint
   block (create/edit form). Existing tokens only.
   ========================================================================= */
.photo-uploads { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.photo-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-upload-form label { flex: 1 1 100%; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.photo-upload-form input[type="file"] { flex: 1 1 180px; min-width: 0; }

.photo-next { display: flex; gap: 12px; align-items: flex-start; }
.photo-next-icon { color: var(--navy); flex: 0 0 auto; margin-top: 2px; }
.photo-next strong { display: block; margin-bottom: 2px; }