/* LogiHub design system — seeded from the chosen "Ops Board" direction
   (docs/07-ui-design/ui-decision.md). Tokens first; no framework;
   no inline styles anywhere in the app. */
:root{
  --brand:#2b5fad; --brand-ink:#1c3f77;
  --surface:#f4f6f9; --card:#ffffff; --line:#dbe2ea; --line-soft:#e8edf3;
  --ink:#1c2733; --ink-2:#4a5a6a; --ink-3:#7b8a99;
  --blk-dpd:#2b5fad; --blk-pf:#0e8f76; --blk-ups:#9a4a00; --blk-adhoc:#7c3aed;
  --good:#1a7f37; --good-bg:#e8f4ec; --warn:#b45309; --warn-bg:#fdf3e4;
  --crit:#b91c1c; --crit-bg:#fdecec; --radius:6px;
}
*{box-sizing:border-box;margin:0}
body{font:13.5px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
h1{font-size:20px;letter-spacing:-.3px}
a{color:var(--brand-ink)}
.muted{color:var(--ink-3)}
/* app bar */
.appbar{background:#1c2733;color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;height:52px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;text-decoration:none}
.logo .tri{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid #6ea8ff}
.appbar nav{display:flex;gap:2px;margin-left:18px;height:52px}
.appbar nav a{color:#b9c6d4;text-decoration:none;padding:0 12px;display:flex;align-items:center;border-bottom:2px solid transparent;font-weight:600}
.appbar nav a.active{color:#fff;border-bottom-color:#6ea8ff}
.user{margin-left:auto;display:flex;align-items:center;gap:9px;color:#b9c6d4;font-size:12.5px}
.switcher{font:inherit;background:#26343f;color:#fff;border:1px solid #3a4a58;border-radius:5px;padding:4px 8px}
/* page scaffold */
.page{padding:0 18px 22px;max-width:1180px;margin:0 auto}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0 12px}
.spacer{flex:1}
button{font:inherit;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 13px;font-weight:600;cursor:pointer}
button.primary{background:var(--brand);border-color:var(--brand-ink);color:#fff}
button:disabled{opacity:.5;cursor:default}
input,select{font:inherit;border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;background:var(--card)}
/* statusbar (approved dashboard chrome) */
.weeknav{font-size:14px;font-weight:700}
.weeknav .wk{color:var(--ink-3);font-weight:600}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;background:#eef1f5;color:var(--ink-2)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.tile .lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.tile .num{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-top:3px}
.tile .sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.tile .sub .w{color:var(--warn);font-weight:700}
/* panels + list rows */
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden}
.panel h4{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);padding:12px 14px 8px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px}
.panel h4 .cnt{margin-left:auto;font-size:11px;color:var(--ink-2);background:#eef1f5;border-radius:999px;padding:1px 8px}
.dot{width:8px;height:8px;border-radius:2px;flex:none;background:#c3ccd6}
.panel.form{display:flex;gap:10px;padding:12px 14px;flex-wrap:wrap;align-items:center}
.rowi{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:13px}
.rowi:last-child{border-bottom:none}
.rowi .who{font-weight:700;min-width:130px}
.rowi .what{color:var(--ink-2)}
.rowi .due{margin-left:auto;font-weight:700;font-size:12px;border-radius:4px;padding:2px 8px;white-space:nowrap}
.due.warn{background:var(--warn-bg);color:var(--warn)}
.due.ok{background:#eef1f5;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* tables */
table.list{border-collapse:collapse;width:100%}
table.list th{background:#f8fafc;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:9px 14px;border-bottom:1px solid var(--line)}
table.list td{padding:9px 14px;border-bottom:1px solid var(--line-soft)}
table.list tr:hover td{background:#fbfcfe}
table.list tr:last-child td{border-bottom:none}
/* chips */
.chip{display:inline-block;border-radius:4px;padding:3px 8px;font-weight:600;font-size:12px;background:#eef3f9;border-left:3px solid var(--brand)}
.chip.off{background:#f1f3f5;border-left-color:var(--ink-3);color:var(--ink-2)}
.chip.warn{background:var(--warn-bg);border-left-color:var(--warn);color:var(--warn)}
.chip.crit{background:var(--crit-bg);border-left-color:var(--crit);color:var(--crit)}
label.check{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-2)}
/* pager */
.pager{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin:-6px 0 14px}
.pager button{padding:4px 10px;font-size:12px}
/* inline row forms (uploads, log-a-job) */
.rowi.upload{flex-wrap:wrap;background:#f8fafc;gap:8px}
.rowi.upload input,.rowi.upload select{padding:5px 8px;font-size:12.5px}
/* fault/reason: takes the row's free width and grows with its content so
   the full text stays visible while typing (field-sizing where supported,
   a wrapping textarea everywhere else — never a scrolling one-liner) */
.rowi.upload textarea.fault{flex:1 1 240px;min-width:200px;font:inherit;font-size:12.5px;
  border:1px solid var(--line);border-radius:var(--radius);padding:5px 8px;background:var(--card);
  resize:none;min-height:30px;max-height:110px;field-sizing:content}
select.jobstatus{margin-left:auto;font-size:12px;font-weight:600;padding:3px 6px}
/* responsive */
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
}
@media (max-width:700px){
  .appbar nav a{padding:0 9px;font-size:12.5px}
  .user{font-size:0}.user .switcher{font-size:12.5px}
  .rowi .who{min-width:96px}
  .tiles{grid-template-columns:1fr 1fr;gap:9px}
  .tile .num{font-size:22px}
  .page{padding:0 12px 16px}
  table.list th:nth-child(n+4),table.list td:nth-child(n+4){display:none}
}