/* ============================================================================
   SawStreet Customer Portal v3 -- shared styles (see CLAUDE_portal.md)
   Colors and type are the new public site's (redesign/index.html :root), so the
   portal and the public site match. Light by default; dark follows the
   visitor's setting or the toggle (localStorage "ss-theme", same key as the site).
   ============================================================================ */
:root {
  --ss-blue:#006699; --ink:#0b1b2b;
  --bg:#f4f7f9; --surface:#ffffff; --surface-2:#eef2f5;
  --line:#d7e0e6; --line-soft:#e6ecf0;
  --text:#16232e; --text-mut:#56697a; --text-fade:#8496a3;
  --accent:#006699; --accent-ink:#004f77; --chip-bg:#eef4f8;
  --good:#2e7d4f; --warn:#a15c00; --bad:#b3261e;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --maxw: 1200px; --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#081521; --surface:#0e2233; --surface-2:#123049; --line:#1e3a52; --line-soft:#17303f;
    --text:#e7eef3; --text-mut:#9fb4c2; --text-fade:#6d8496; --accent:#2ea0d6; --accent-ink:#7fcbe8;
    --chip-bg:#123049; --good:#5cc08a; --warn:#e0a54a; --bad:#ef7a70;
  }
}
:root[data-theme="dark"] {
  --bg:#081521; --surface:#0e2233; --surface-2:#123049; --line:#1e3a52; --line-soft:#17303f;
  --text:#e7eef3; --text-mut:#9fb4c2; --text-fade:#6d8496; --accent:#2ea0d6; --accent-ink:#7fcbe8;
  --chip-bg:#123049; --good:#5cc08a; --warn:#e0a54a; --bad:#ef7a70;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-ink); }
h1,h2,h3 { margin:0; letter-spacing:-.015em; line-height:1.15; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---- header ---- */
header.cp { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
header.cp .bar { display:flex; align-items:center; gap:20px; height:72px; }
header.cp .brand img { height:38px; display:block; }
:root[data-theme="dark"] header.cp .brand img { filter:brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.cp .brand img { filter:brightness(0) invert(1); } }
header.cp .who { margin-left:auto; text-align:right; font-size:13px; color:var(--text-mut); line-height:1.3; }
header.cp .who b { display:block; color:var(--text); font-size:14px; }
header.cp .tools { display:flex; gap:8px; align-items:center; }
.pill { font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--text-mut); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; line-height:1.5; white-space:nowrap; }
.pill:hover { border-color:var(--accent); color:var(--accent); }
nav.cp { border-top:1px solid var(--line-soft); }
nav.cp .wrap { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
nav.cp .wrap::-webkit-scrollbar { display:none; }
nav.cp a { padding:10px 13px; font-size:14px; font-weight:550; color:var(--text-mut); white-space:nowrap; border-bottom:2px solid transparent; }
nav.cp a:hover { color:var(--text); }
nav.cp a.on { color:var(--accent); border-bottom-color:var(--accent); }
nav.cp a.soon { color:var(--text-fade); cursor:default; }

/* ---- page ---- */
main.cp { padding:28px 0 56px; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.page-title { font-size:28px; font-weight:700; margin:6px 0 4px; }
.page-sub { color:var(--text-mut); margin-bottom:22px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.card h2 { font-size:13px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-mut); font-weight:600; margin-bottom:12px; }
.stat { font-size:34px; font-weight:700; color:var(--text); line-height:1; }
.stat-sub { color:var(--text-mut); font-size:13px; margin-top:6px; }
.muted { color:var(--text-mut); }
.fade { color:var(--text-fade); }
.mono { font-family:var(--mono); }
table.cp { width:100%; border-collapse:collapse; font-size:14px; }
table.cp th { text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mut);
  font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.cp td { padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.cp td.mono, table.cp td.nw { white-space:nowrap; }   /* numbers and dates never break (NG-PO-2) -- the table scrolls instead */
.table-scroll { overflow-x:auto; }
.empty { padding:18px; text-align:center; color:var(--text-fade); }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:var(--r); padding:9px 16px; font-weight:600; font-size:14px; cursor:pointer; }
.btn:hover { background:var(--accent-ink); color:#fff; }
table.cp td.cmt { white-space:pre-line; min-width:220px; color:var(--text-mut); font-size:13.5px; }

.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
.btn-ghost:hover { background:var(--chip-bg); color:var(--accent-ink); }
table.cp td.acts .pill { display:inline-block; margin-right:6px; text-decoration:none; }
.pager { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:14px; font-size:13px; }
.pager .pill:disabled { opacity:.4; cursor:default; }
[hidden] { display:none !important; }
table.cp th.r, table.cp td.r { text-align:right; }
table.cp tr.click { cursor:pointer; }
table.cp tr.click:hover td { background:var(--chip-bg); }
table.cp tr.click .caret { display:inline-block; color:var(--text-fade); transition:transform .15s; }
table.cp tr.click.open .caret { transform:rotate(90deg); }
table.cp tr.detail > td { background:var(--surface-2); padding:10px 12px 14px; }
table.cp.sub { font-size:13px; }
table.cp.sub th { font-size:10.5px; }

details.explain { margin-bottom:12px; font-size:14px; color:var(--text-mut); }
details.explain summary { cursor:pointer; color:var(--accent); font-weight:550; }
details.explain p { margin:8px 0 0; max-width:900px; }
input[type=date].search { color-scheme:light dark; }

/* ---- lot review ---- */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:inherit; font-size:13.5px; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; }
.chip:hover { border-color:var(--accent); }
table.cp tr.grp td { border-top:2px solid var(--line); }
.btn:disabled { opacity:.45; cursor:default; }
.seg .cnt { font-family:var(--mono); font-size:11.5px; opacity:.75; margin-left:3px; }
.lr { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:16px; align-items:start; }
.lr-list { padding:8px; position:sticky; top:130px; max-height:calc(100vh - 150px); overflow:auto; }
.lr-list-h { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mut); padding:6px 8px; }
.lr-list button { display:flex; justify-content:space-between; gap:8px; width:100%; font:inherit; font-size:14px; text-align:left; background:transparent;
  border:0; border-radius:var(--r); padding:7px 8px; color:var(--text); cursor:pointer; }
.lr-list button span.fade { font-size:12px; }
.lr-list button:hover { background:var(--surface-2); }
.lr-list button.on { background:var(--accent); color:#fff; }
.lr-list button.on .fade { color:#fff; opacity:.8; }
.lr-dl { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px 18px; margin:0; }
.lr-dl dt { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mut); }
.lr-dl dd { margin:2px 0 0; font-size:14.5px; }
.lr-note { padding:12px 0; border-bottom:1px solid var(--line-soft); }
.lr-note:last-child { border-bottom:0; }
.lr-note-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--text-mut); margin-bottom:4px; }
.lr-note-meta b { color:var(--text); font-weight:600; }
.lr-note-text { white-space:pre-line; font-size:14.5px; max-width:900px; }
.lr-pics { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.lr-pic { font:inherit; text-align:left; padding:0; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:zoom-in; color:var(--text); }
.lr-pic img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg); }
.lr-pic .cap { display:block; padding:7px 9px; font-size:12.5px; color:var(--text-mut); white-space:pre-line; }
.lr-pic .cap b { color:var(--text); font-weight:600; }
.lb { position:fixed; inset:0; z-index:100; background:rgba(4,10,16,.88); display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; }
.lb figure { margin:0; max-width:min(1200px, 100%); display:flex; flex-direction:column; align-items:center; }
.lb img { max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; background:#000; border-radius:4px; }
.lb figcaption { color:#e7eef3; font-size:14px; margin-top:10px; text-align:center; white-space:pre-line; max-width:900px; }
.lb .pill { color:#e7eef3; border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.3); }
.lb-nav { font-size:22px !important; padding:6px 14px !important; }
.lb-x { position:absolute; top:16px; right:16px; }
@media (max-width: 800px) {
  .lr { grid-template-columns:1fr; }
  .lr-dl { grid-template-columns:1fr 1fr; }
  .kbd-hint { display:none; }
  .lr-list { position:static; max-height:none; display:flex; gap:6px; overflow-x:auto; padding:6px; }
  .lr-list-h { display:none; }
  .lr-list button { width:auto; flex:0 0 auto; flex-direction:column; gap:0; }
  .lb { padding:10px; gap:4px; }
  .lb-nav { position:absolute; bottom:18px; }
  #lbPrev { left:18px; } #lbNext { right:18px; }
}

/* ---- toolbar: view switch + search ---- */
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.seg button { font:inherit; font-size:14px; font-weight:550; color:var(--text-mut); background:transparent; border:0; padding:8px 14px; cursor:pointer; }
.seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--accent); color:#fff; }
.search { font:inherit; font-size:14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 12px; min-width:0; flex:1 1 240px; max-width:360px; }
.search:focus { outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color:var(--accent); }
.msg-err { background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); border-radius:var(--r); padding:10px 14px; margin-bottom:16px; }
.msg-ok { background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good); border-radius:var(--r); padding:10px 14px; margin-bottom:16px; }

/* ---- account (forms) ---- */
.acct { display:grid; gap:16px; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); align-items:start; }
.acct-col { display:grid; gap:16px; }
.acct .card p.hint { font-size:13px; color:var(--text-mut); margin:-4px 0 12px; }
.fgrid { display:grid; gap:10px 14px; grid-template-columns:repeat(6, minmax(0, 1fr)); }
.fld { display:flex; flex-direction:column; gap:4px; grid-column:span 3; min-width:0; }
.fld.s1 { grid-column:span 1; } .fld.s2 { grid-column:span 2; } .fld.s4 { grid-column:span 4; } .fld.s6 { grid-column:span 6; }
.fld > span { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mut); }
.fld > span i { font-style:normal; color:var(--bad); }
.inp { font:inherit; font-size:14.5px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; width:100%; min-width:0; }
.inp:focus { outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color:var(--accent); }
.inp[readonly] { background:var(--surface-2); color:var(--text-mut); }
.form-foot { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.form-foot .note { font-size:13px; }
.form-foot .note.ok { color:var(--good); } .form-foot .note.bad { color:var(--bad); }
.sep { border:0; border-top:1px solid var(--line-soft); margin:14px 0; }
.switch { display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.switch input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:0 0 auto; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:14.5px; }
.kv dt { color:var(--text-mut); } .kv dd { margin:0; }
@media (max-width: 860px) { .acct { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 560px) { .fld, .fld.s1, .fld.s2, .fld.s4 { grid-column:span 6; } .fld.half { grid-column:span 3; } }

/* ---- footer ---- */
footer.cp { border-top:1px solid var(--line); padding:20px 0 28px; color:var(--text-fade); font-size:13px; }
footer.cp .wrap { display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }

@media (max-width: 640px) {
  .wrap { padding:0 16px; }
  header.cp .bar { height:62px; gap:12px; }
  header.cp .brand img { height:30px; }
  header.cp .who span { display:none; }
  .page-title { font-size:23px; }
}

/* ---- sign-in pages (login / forgot / reset) ---- */
.auth { max-width:420px; margin:24px auto 40px; }
.auth .card { padding:24px; }
.auth .page-title { margin-bottom:6px; }
.auth .fgrid { margin-top:8px; }
.auth .btn { width:100%; padding:11px 16px; }
.auth-links { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:14px; }