/* =============================================================================
   URBINATOR V2 — "BLUEPRINT" BASE + CORE COMPONENTS
   Consumes v2/tokens.css. Everything styles THROUGH tokens — never hardcode a
   theme colour here. This is the foundation each feature is rebuilt against.
   ============================================================================= */

/* ---- Reset-ish ---- */
*,*::before,*::after{box-sizing:border-box}
/* The [hidden] attribute must ALWAYS win, even over class display rules like
   .zonegrid{display:grid} / .v2-scrim{display:flex} — otherwise JS toggling
   `el.hidden` fails silently (POP picker + modals staying visible). */
[hidden]{display:none!important}
/* An empty toast must not linger as a coloured pill at the bottom of the page. */
.urb-toast:empty,.toast:empty,.sv-toast:empty{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure{margin:0}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---- Type helpers ---- */
.u-display{font-size:var(--fs-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);text-wrap:balance}
.u-h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em;line-height:var(--lh-title)}
.u-title{font-size:var(--fs-title);font-weight:700;letter-spacing:-.01em;line-height:var(--lh-title)}
.u-label{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
.u-mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.01em}
.u-muted{color:var(--ink-3)}
.u-sub{color:var(--ink-2)}
.u-num{font-variant-numeric:tabular-nums}

/* ---- App shell / topbar ---- */
.app-bar{
  display:flex;align-items:center;gap:var(--s4);
  padding:10px var(--s4);
  background:var(--bar);color:var(--bar-ink);
  border-bottom:1px solid var(--bar);
}
.app-bar .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:15px;color:var(--bar-ink)}
.app-bar .brand .mark{width:11px;height:11px;border-radius:2px;background:var(--orange)}
.app-bar .brand small{font-family:var(--font-mono);font-size:10px;color:var(--bar-ink-2);font-weight:500;letter-spacing:.04em}

/* ---- Tabs ---- */
.tabs{display:flex;gap:2px;font-size:12.5px}
.tabs.on-bar{margin-left:auto}
.tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--bar-ink-2);font-weight:600;cursor:pointer;
  border:0;background:transparent;transition:color var(--dur) var(--ease);
}
.tab:hover{color:var(--bar-ink)}
.tab[aria-selected="true"],.tab.is-active{color:var(--bar-ink);box-shadow:inset 0 -2px 0 var(--orange)}
/* light tab-strip variant (on surface) */
.tabs.on-surface .tab{color:var(--ink-3);border-radius:var(--r-sm) var(--r-sm) 0 0}
.tabs.on-surface .tab:hover{color:var(--ink)}
.tabs.on-surface .tab.is-active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}

/* ---- Cards / panels ---- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh);
  padding:var(--s5);
}
.card--pad-sm{padding:var(--s4)}
.card--hover{transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card--hover:hover{box-shadow:var(--sh-md)}
.panel-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s4);background:var(--surface-2);
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;
}

/* ---- Section header (numbered, Blueprint plate) ---- */
.sec-head{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3)}
.sec-head .plate{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  min-width:24px;height:24px;padding:0 5px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cobalt);color:#fff;letter-spacing:.02em;
}
.sec-head .t{font-weight:700;letter-spacing:-.01em}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:650;line-height:1;
  padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(.5px)}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-hover)}
.btn--data{background:var(--cobalt);color:#fff}
.btn--data:hover{background:var(--cobalt-hover)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--line-strong);background:var(--surface-2)}
.btn--quiet{background:transparent;color:var(--ink-2)}
.btn--quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn--danger{background:var(--st-weiger-bg);color:var(--st-weiger-fg);border-color:var(--st-weiger-bd)}
.btn--danger:hover{background:#fecaca}
.btn--sm{padding:6px 11px;font-size:11.5px}
.btn--lg{padding:11px 20px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Inputs ---- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s3)}
.field > label{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
.input,.select,.textarea{
  width:100%;font-family:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 11px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--orange);box-shadow:var(--focus-ring)}
.textarea{min-height:76px;resize:vertical;line-height:1.45}
.input-affix{position:relative;display:flex;align-items:center}
.input-affix .suffix{position:absolute;right:11px;font-size:11.5px;color:var(--ink-3);pointer-events:none}
.input-affix .input{padding-right:56px}
.input--invalid{border-color:var(--st-weiger-bd);background:var(--st-weiger-bg)}
.field-error{font-size:11.5px;color:var(--st-weiger-fg)}

/* ---- Ja/Nee (YES/NO) pill toggle ---- */
.yn{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.yn button{
  border:0;background:var(--surface);color:var(--ink-2);
  font-family:inherit;font-size:12px;font-weight:650;padding:7px 18px;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.yn button + button{border-left:1px solid var(--line)}
.yn button[aria-pressed="true"]{background:var(--orange);color:#fff}
.yn button:hover:not([aria-pressed="true"]){background:var(--surface-2)}

/* ---- Checkbox / radio (accent) ---- */
.check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);cursor:pointer}
.check input{accent-color:var(--orange);width:16px;height:16px}

/* ---- Status pills — Blueprint "coded plate": sharp rectangle, mono, caps.
   The default across the tool (reads like a stamped status on instrument gear).
   Use .pill--round only where a soft chip is genuinely wanted (rare). ---- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-xs);border:1px solid transparent;white-space:nowrap;
}
.pill--round{
  font-family:var(--font-ui);text-transform:none;font-weight:650;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:3px 10px;
}
/* field status */
.pill.blank{background:var(--st-blank-bg);color:var(--st-blank-fg);border-color:var(--st-blank-bd)}
.pill.veldok{background:var(--st-veldok-bg);color:var(--st-veldok-fg);border-color:var(--st-veldok-bd)}
.pill.nothome{background:var(--st-nothome-bg);color:var(--st-nothome-fg);border-color:var(--st-nothome-bd)}
.pill.toplan{background:var(--st-toplan-bg);color:var(--st-toplan-fg);border-color:var(--st-toplan-bd)}
.pill.wacht{background:var(--st-wacht-bg);color:var(--st-wacht-fg);border-color:var(--st-wacht-bd)}
.pill.weiger{background:var(--st-weiger-bg);color:var(--st-weiger-fg);border-color:var(--st-weiger-bd)}
.pill.nac{background:var(--st-nac-bg);color:var(--st-nac-fg);border-color:var(--st-nac-bd)}
.pill.cancel{background:var(--st-cancel-bg);color:var(--st-cancel-fg);border-color:var(--st-cancel-bd)}
.pill.sdu{background:var(--st-sdu-bg);color:var(--st-sdu-fg);border-color:var(--st-sdu-bd)}
/* SSV status */
.pill.ongoing{background:var(--sv-ongoing-bg);color:var(--sv-ongoing-fg);border-color:var(--sv-ongoing-bd)}
.pill.done{background:var(--sv-done-bg);color:var(--sv-done-fg);border-color:var(--sv-done-bd)}
.pill.preval{background:var(--st-toplan-bg);color:var(--st-toplan-fg);border-color:var(--st-toplan-bd)}
.pill.toconfirm{background:var(--st-wacht-bg);color:var(--st-wacht-fg);border-color:var(--st-wacht-bd)}
.pill.validated{background:var(--sv-valid-bg);color:var(--sv-valid-fg);border-color:var(--sv-valid-bd)}
.pill.rework{background:var(--st-nothome-bg);color:var(--st-nothome-fg);border-color:var(--st-nothome-bd)}
.pill.declined{background:var(--sv-declined-bg);color:var(--sv-declined-fg);border-color:var(--sv-declined-bd)}

/* ---- Progress bar (DATA = cobalt) ---- */
.progress{height:7px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;border:1px solid var(--line-soft)}
.progress > span{display:block;height:100%;background:var(--cobalt);border-radius:var(--r-pill);transition:width .4s var(--ease)}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
table.data th{
  text-align:left;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--ink-2);background:var(--surface-2);padding:9px var(--s3);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:9px var(--s3);border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
table.data .mono{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2)}

/* ---- Meta row (dashboard stats) ---- */
.metarow{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.metarow b{color:var(--ink);font-weight:700}

/* ---- Divider ---- */
.hr{height:1px;background:var(--line);border:0;margin:var(--s4) 0}

/* ---- Modal / slide-in scrim ---- */
.scrim{position:fixed;inset:0;background:rgba(18,35,61,.42);backdrop-filter:saturate(1.1)}
/* the hidden attribute must always win over a scrim's display:flex (dashboard.css
   .v2-scrim / .drawer-scrim set display:flex, which otherwise defeats [hidden]
   and leaves static modals/drawers stuck open on page load) */
.scrim[hidden],.v2-scrim[hidden],.drawer-scrim[hidden]{display:none!important}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:var(--s5)}

/* ---- Empty state ---- */
.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--ink-3)}
.empty .mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--cobalt)}

/* ---- Motion off ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}