:root{
  --paper:#EEF3FC;
  --paper-raised:#FFFFFF;
  --ink:#122446;
  --ink-soft:#5B6B8C;
  --line:#D2DEF3;
  --accent:#2F6FED;
  --accent-hover:#1F5BDB;
  --accent-soft:#E1EBFF;
  --good:#1F9D63;
  --good-soft:#DEF5E9;
  --warn:#BD8A22;
  --warn-soft:#FAECCC;
  --critical:#D5473A;
  --critical-soft:#FBE1DD;
  --shadow: 0 2px 8px rgba(24,48,96,0.09);

  /* Sidebar is a deliberately fixed navy brand rail -- same in light and dark mode. */
  --sidebar-bg:#0F1B33;
  --sidebar-ink:#EAF0FF;
  --sidebar-ink-soft:#8CA2CE;
  --sidebar-active-bg:rgba(111,165,255,0.18);
  --sidebar-active-ink:#8FBBFF;
  --sidebar-hover-bg:rgba(255,255,255,0.06);
  --sidebar-border:rgba(255,255,255,0.08);
  --sidebar-brand-accent:#5B9BFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0B1526; --paper-raised:#111E33; --ink:#E8EEFC; --ink-soft:#8FA1C4;
    --line:#233252; --accent:#6FA5FF; --accent-hover:#8CBBFF; --accent-soft:#17253F;
    --good:#59D291; --good-soft:#12301F; --warn:#E7B75A; --warn-soft:#33270E;
    --critical:#F08A7A; --critical-soft:#3A1D18; --shadow: 0 2px 10px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --paper:#0B1526; --paper-raised:#111E33; --ink:#E8EEFC; --ink-soft:#8FA1C4;
  --line:#233252; --accent:#6FA5FF; --accent-hover:#8CBBFF; --accent-soft:#17253F;
  --good:#59D291; --good-soft:#12301F; --warn:#E7B75A; --warn-soft:#33270E;
  --critical:#F08A7A; --critical-soft:#3A1D18; --shadow: 0 2px 10px rgba(0,0,0,0.45);
}
:root[data-theme="light"]{
  --paper:#EEF3FC; --paper-raised:#FFFFFF; --ink:#122446; --ink-soft:#5B6B8C;
  --line:#D2DEF3; --accent:#2F6FED; --accent-hover:#1F5BDB; --accent-soft:#E1EBFF;
  --good:#1F9D63; --good-soft:#DEF5E9; --warn:#BD8A22; --warn-soft:#FAECCC;
  --critical:#D5473A; --critical-soft:#FBE1DD; --shadow: 0 2px 8px rgba(24,48,96,0.09);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:15px; line-height:1.5;
}
a{ color:var(--accent); }
h1,h2,h3,h4{ margin:0 0 0.5rem; text-wrap:balance; }
.mono, td.num, th.num, .tabular{ font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

.shell{ display:grid; grid-template-columns:210px 1fr; min-height:100vh; }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:1.15rem; line-height:1; cursor:pointer; padding:0.4rem 0.6rem; }
.nav-backdrop{ display:none; }

.sidebar{
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
  padding:1.25rem 0.75rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{
  font-weight:700; font-size:0.95rem; padding:0 0.5rem 1rem; display:flex; align-items:center; gap:0.5rem;
  color:var(--sidebar-ink);
}
.sidebar .brand::before{
  content:""; width:0.55rem; height:0.55rem; border-radius:50%;
  background:var(--sidebar-brand-accent); box-shadow:0 0 0 3px rgba(91,155,255,0.25); flex:0 0 auto;
}
.sidebar nav{ display:flex; flex-direction:column; gap:0.1rem; }
.sidebar a{ text-decoration:none; color:var(--sidebar-ink); font-size:0.87rem; padding:0.45rem 0.6rem; border-radius:4px; }
.sidebar a:hover{ background:var(--sidebar-hover-bg); }
.sidebar a.active{ background:var(--sidebar-active-bg); color:var(--sidebar-active-ink); font-weight:600; }
.sidebar .group-label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--sidebar-ink-soft); padding:0.9rem 0.6rem 0.2rem; }

.tab-switch{ display:flex; flex-direction:column; gap:0.25rem; margin:0.75rem 0 0.25rem; padding:0.25rem; background:rgba(255,255,255,0.04); border-radius:6px; }
.tab-btn{
  font-size:0.78rem; font-weight:600; text-align:left; padding:0.5rem 0.6rem; border-radius:4px;
  background:transparent; border:none; color:var(--sidebar-ink-soft); cursor:pointer; font-family:inherit;
}
.tab-btn:hover{ background:var(--sidebar-hover-bg); color:var(--sidebar-ink); }
.tab-btn.active{ background:var(--sidebar-active-bg); color:var(--sidebar-active-ink); }
.nav-section{ display:none; flex-direction:column; gap:0.1rem; }
.nav-section.active{ display:flex; }

/* Below 820px the sidebar becomes a slide-in drawer (opened via .nav-toggle in the topbar) instead
   of a permanent column — it used to just be display:none with no way back in on a phone. Placed
   after the base .sidebar rule above so its position:fixed actually wins (equal specificity ties
   break on source order, media-query or not). */
@media (max-width:820px){
  .shell{ grid-template-columns:1fr; }
  .nav-toggle{ display:inline-flex; align-items:center; }
  .sidebar{
    display:block; position:fixed; inset:0 auto 0 0; z-index:50; width:min(280px,85vw);
    transform:translateX(-100%); transition:transform 0.2s ease; box-shadow:2px 0 12px rgba(0,0,0,0.25);
  }
  .shell.nav-open .sidebar{ transform:translateX(0); }
  .shell.nav-open .nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:40; }
}

.main{ padding:1.5rem clamp(1rem,3vw,2.5rem) 3rem; min-width:0; }
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; gap:1rem; flex-wrap:wrap; }
.topbar h1{ font-size:1.3rem; }
.topbar .who{ font-size:0.82rem; color:var(--ink-soft); }
.topbar .who a{ margin-left:0.6rem; }
.search-box{ flex:1; max-width:360px; display:flex; gap:0.4rem; }
.search-box input{ flex:1; padding:0.45rem 0.7rem; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-size:0.85rem; }
.search-box input:focus{ outline:none; border-color:var(--accent); }
.search-box button{ padding:0.45rem 0.6rem; border:1px solid var(--line); border-radius:6px; background:var(--paper); cursor:pointer; }

.bell-link{ position:relative; margin-right:0.6rem; text-decoration:none; font-size:1rem; }
.bell-badge{ position:absolute; top:-0.5rem; right:-0.6rem; background:var(--critical); color:#fff; border-radius:999px; font-size:0.65rem; padding:0.05rem 0.35rem; line-height:1.3; }

.js-hide-btn{ background:none; border:none; cursor:pointer; padding:0 0.3rem; color:var(--ink-soft); font-size:0.85rem; line-height:1; }
.js-hide-btn:hover{ color:var(--critical); }
.js-row-hidden{ display:none !important; }
.js-hidden-note{ font-size:0.8rem; color:var(--ink-soft); display:block; margin:0.4rem 0; }
.ts-icon{ cursor:help; color:var(--ink-soft); font-size:0.85rem; margin-left:0.3rem; }
.ts-icon:hover{ color:var(--ink); }
.js-hidden-note a{ color:var(--accent); }

.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:1.1rem 1.25rem; box-shadow:var(--shadow); margin-bottom:1.25rem; }
.card h2{ font-size:1rem; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }

.alert-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.alert-list li{ display:flex; justify-content:space-between; gap:0.75rem; align-items:baseline; font-size:0.88rem; padding:0.5rem 0.7rem; border-radius:4px; background:var(--paper); }
.alert-list a{ text-decoration:none; }

.chip{ display:inline-block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; padding:0.15rem 0.55rem; border-radius:20px; white-space:nowrap; }
.chip-good{ background:var(--good-soft); color:var(--good); }
.chip-warn{ background:var(--warn-soft); color:var(--warn); }
.chip-critical{ background:var(--critical-soft); color:var(--critical); }
.chip-neutral{ background:var(--line); color:var(--ink-soft); }

table{ width:100%; border-collapse:collapse; font-size:0.87rem; }
th, td{ text-align:left; padding:0.5rem 0.65rem; border-bottom:1px solid var(--line); vertical-align:middle; }
th{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
.table-wrap{ overflow-x:auto; }
tr:hover td{ background:var(--paper); }
.nowrap{ white-space:nowrap; }
table.compliance-table th{ white-space:nowrap; }

/* Fixed column widths so headers line up vertically across separate tables on the same page
   instead of each table auto-sizing to its own longest cell content. */
table.summary-table{ table-layout:fixed; min-width:640px; }
table.summary-table th:nth-child(1), table.summary-table td:nth-child(1){ width:24%; }
table.summary-table th:nth-child(2), table.summary-table td:nth-child(2){ width:12%; }
table.summary-table th:nth-child(3), table.summary-table td:nth-child(3){ width:12%; }
table.summary-table th:nth-child(4), table.summary-table td:nth-child(4){ width:14%; }
table.summary-table th:nth-child(5), table.summary-table td:nth-child(5){ width:9%; }
table.summary-table th:nth-child(6), table.summary-table td:nth-child(6){ width:11%; }
table.summary-table th:nth-child(7), table.summary-table td:nth-child(7){ width:11%; }
table.summary-table th:nth-child(8), table.summary-table td:nth-child(8){ width:7%; }

table.drawings-table{ table-layout:fixed; min-width:720px; }
table.drawings-table th:nth-child(1), table.drawings-table td:nth-child(1){ width:22%; }
table.drawings-table th:nth-child(2), table.drawings-table td:nth-child(2){ width:22%; }
table.drawings-table th:nth-child(3), table.drawings-table td:nth-child(3){ width:13%; }
table.drawings-table th:nth-child(4), table.drawings-table td:nth-child(4){ width:17%; }
table.drawings-table th:nth-child(5), table.drawings-table td:nth-child(5){ width:14%; }
table.drawings-table th:nth-child(6), table.drawings-table td:nth-child(6){ width:12%; }

.btn{ display:inline-block; background:var(--accent); color:#fff; border:none; padding:0.5rem 0.9rem; border-radius:6px; font-size:0.85rem; cursor:pointer; text-decoration:none; font-weight:600; transition:background-color 0.15s ease; }
.btn:hover{ background:var(--accent-hover); }
.btn-secondary{ background:transparent; border:1px solid var(--line); color:var(--ink); font-weight:400; }
.btn-secondary:hover{ background:var(--accent-soft); }
.btn-small{ padding:0.3rem 0.6rem; font-size:0.78rem; }
.btn-danger{ background:var(--critical); }

/* Content-section tabs (e.g. GRN / Vendor Invoice on a PO's detail page) — distinct from the
   sidebar's own .tab-switch/.tab-btn, which is a different component for nav grouping. */
.section-tabs{ display:flex; gap:0.25rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.section-tab-btn{ background:none; border:none; padding:0.6rem 1rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.section-tab-btn:hover{ color:var(--ink); }
.section-tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
.section-tab-panel{ display:none; }
.section-tab-panel.active{ display:block; }

form.stack{ display:flex; flex-direction:column; gap:0.85rem; max-width:520px; }
label{ font-size:0.8rem; color:var(--ink-soft); display:block; margin-bottom:0.25rem; }
input, select, textarea{
  width:100%; padding:0.5rem 0.6rem; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); color:var(--ink); font-size:0.9rem; font-family:inherit;
}
textarea{ min-height:70px; }
.field-row{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.field-row > div{ flex:1 1 180px; }
.field-row-tight > div{ flex:1 1 120px; }
.checklist-item{ display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; padding:0.2rem 0; }
.checklist-item input{ width:auto; }

.progress-filter{ display:flex; gap:0.75rem; align-items:flex-end; flex-wrap:wrap; padding:0.85rem 1.1rem; }
.progress-filter > div{ min-width:150px; }
.progress-filter .filter-count{ font-size:0.8rem; color:var(--ink-soft); padding-bottom:0.55rem; }

.progress-row{ background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:0.65rem 0.9rem; margin-bottom:0.5rem; }
.progress-row-head{ display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; }
.progress-row-head .label-col{ flex:1 1 130px; padding-bottom:0.45rem; }
.progress-row-head .label-col strong{ display:block; font-size:0.88rem; margin-bottom:0.2rem; }
.progress-row-head .field-col{ flex:1 1 130px; }
.progress-row-head .field-col label{ font-size:0.72rem; margin-bottom:0.2rem; }
.progress-row-head .save-col{ flex:0 0 auto; }
.progress-row .row-note{ margin:0.35rem 0 0; }
details.progress-details{ margin-top:0.5rem; }
details.progress-details > summary{ cursor:pointer; font-size:0.78rem; color:var(--ink-soft); user-select:none; list-style:revert; }
details.progress-details .details-body{ margin-top:0.6rem; display:flex; flex-direction:column; gap:0.65rem; }

.empty{ color:var(--ink-soft); font-size:0.88rem; padding:1rem 0; }
.helptext{ font-size:0.78rem; color:var(--ink-soft); margin-top:0.2rem; }
.flash{ background:var(--accent-soft); border-left:3px solid var(--accent); padding:0.6rem 0.9rem; border-radius:0 4px 4px 0; font-size:0.87rem; margin-bottom:1rem; }
.flash-error{ background:var(--critical-soft); border-left-color:var(--critical); }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ width:100%; max-width:340px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }