/* ==========================================================================
   tecpack-ui.css — v1.0
   Eén stylesheet, identiek in elke TecPack-repository. Niet per app aanpassen.
   Kopieer dit bestand ongewijzigd en link het als eerste stylesheet.
   Alle kleuren, maten en fonts komen uit de variabelen hieronder.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600&display=swap');

:root {
  /* — grond & inkt — */
  --tp-paper:  #f2f2f3;   /* achtergrond van de pagina */
  --tp-plate:  #fbfbfc;   /* licht vlak: stapbalk, tabelkop-strook */
  --tp-ink:    #1d1f20;   /* tekst */
  --tp-muted:  rgba(29,31,32,.56);
  --tp-line:   rgba(29,31,32,.18);
  --tp-navy:   #1d2d3d;   /* de balk bovenaan */
  --tp-onbar:  #e9edf1;   /* tekst op de balk */

  /* — staalblauw: structuur, links, actieve staat — */
  --tp-steel-100:#eef6ff; --tp-steel-200:#d6ebff; --tp-steel-300:#b5d9fd;
  --tp-steel-400:#94bce3; --tp-steel-500:#749dc4; --tp-steel-600:#597ea3;
  --tp-steel-700:#416180; --tp-steel-800:#2c455d; --tp-steel-900:#1d2d3d;
  --tp-steel: #5980a6;

  /* — TecPack-oranje: uitsluitend de primaire handeling — */
  --tp-orange-100:#fff2e6; --tp-orange-200:#ffdcc0; --tp-orange-300:#ffbf8e;
  --tp-orange-400:#ffa25c; --tp-orange-500:#ff8a2b; --tp-orange-600:#f97008;
  --tp-orange-700:#cd5a05; --tp-orange-800:#9b4404; --tp-orange-900:#672d02;
  --tp-orange: #f97008;
  --tp-on-orange: #16191c;

  /* — neutraal — */
  --tp-n-100:#f5f5f8; --tp-n-200:#e7e7ea; --tp-n-300:#d4d4d7; --tp-n-400:#b7b7ba;
  --tp-n-500:#98989b; --tp-n-600:#7a7a7d; --tp-n-700:#5d5d60; --tp-n-800:#424244;
  --tp-n-900:#2b2b2d;

  /* — status — */
  --tp-ok:#4a7c59; --tp-warn:#a8712a; --tp-bad:#a2493f;

  /* — type — */
  --tp-font-head: "Barlow Condensed", system-ui, sans-serif;
  --tp-font-body: "Barlow", system-ui, sans-serif;

  /* — ruimte (0.85x schaal) — */
  --tp-1:3.4px; --tp-2:6.8px; --tp-3:10.2px; --tp-4:13.6px; --tp-6:20.4px; --tp-8:27.2px;

  --tp-surface: #ffffff;   /* vulling van blokken en kaarten */
  --tp-line-soft: rgba(29,31,32,.12);
  --tp-shadow: 0 1px 2px rgba(29,31,32,.07), 0 1px 1px rgba(29,31,32,.04);
  --tp-shadow-hover: 0 2px 6px rgba(29,31,32,.10), 0 1px 2px rgba(29,31,32,.06);
  --tp-radius: 4px;        /* blokken en velden; knoppen 3px */
}

/* — donker thema: zet data-theme="dark" op <html> — */
[data-theme="dark"] {
  --tp-paper:#15191d; --tp-plate:#1b2126; --tp-ink:#e9eaeb;
  --tp-muted:rgba(233,234,235,.56); --tp-line:rgba(233,234,235,.18);
  --tp-navy:#0d1215; --tp-steel:#94bce3; --tp-orange:#ff9436;
  --tp-ok:#7fae8c; --tp-warn:#d9a25f; --tp-bad:#d08a80;
  --tp-surface:#1f262c; --tp-line-soft:rgba(233,234,235,.13);
  --tp-shadow:0 1px 2px rgba(0,0,0,.45); --tp-shadow-hover:0 2px 8px rgba(0,0,0,.5);
}

/* ── basis ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tp-paper); color: var(--tp-ink);
  font-family: var(--tp-font-body); font-size: 15px; line-height: 1.55;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--tp-font-head); font-weight: 600; line-height: 1.12;
  letter-spacing: -.015em; margin: 0 0 var(--tp-2);
}
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px}
h4{font-size:20px} h5{font-size:16px}
h6{font-size:13px; letter-spacing:.08em; text-transform:uppercase}
p { margin: 0 0 var(--tp-3); text-wrap: pretty; }
a { color: var(--tp-steel-700); text-underline-offset: 3px; }
a:hover { color: var(--tp-steel-800); }
[data-theme="dark"] a { color: var(--tp-steel-400); }
[data-theme="dark"] a:hover { color: var(--tp-steel-300); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tp-steel); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--tp-steel) 30%, transparent); }
.tp-muted { color: var(--tp-muted); }
.tp-num { font-variant-numeric: tabular-nums; text-align: right; }
.tp-label {            /* elk veldlabel, elke kolomkop, elke kicker */
  font-family: var(--tp-font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tp-muted);
}

/* ── blueprint-kader: elke kaart, elk paneel, elke figuur ─────────────── */
.tp-frame { position: relative; background: var(--tp-surface);
  border: 1px solid var(--tp-line-soft); border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow); }
.tp-frame > .corner { display: none; }
.tp-frame > .corner.tp-keep { display: block; position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--tp-ink) 55%, transparent); }
.tp-frame > .corner::before, .tp-frame > .corner::after { content:""; position:absolute; background: currentColor; }
.tp-frame > .corner::before { left:5px; top:0; width:1px; height:100%; }
.tp-frame > .corner::after  { top:5px; left:0; width:100%; height:1px; }
.tp-frame > .corner.tl{top:-6px;left:-6px}  .tp-frame > .corner.tr{top:-6px;right:-6px}
.tp-frame > .corner.bl{bottom:-6px;left:-6px} .tp-frame > .corner.br{bottom:-6px;right:-6px}
/* Kaart die op een handeling wacht (of geselecteerd is): */
.tp-frame-active { border-color: var(--tp-orange); box-shadow: var(--tp-shadow-hover); }
/* Klikbare kaart: */
a.tp-frame:hover, .tp-frame[role="button"]:hover, .tp-frame-link:hover {
  border-color: color-mix(in srgb, var(--tp-steel) 55%, var(--tp-line-soft));
  box-shadow: var(--tp-shadow-hover); }

/* ── de balk bovenaan (per app dezelfde bouw) ─────────────────────────── */
.tp-bar { display:flex; align-items:stretch; background: var(--tp-navy); color: var(--tp-onbar); }
.tp-bar-brand { display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-right:1px solid rgba(255,255,255,.16); font-family:var(--tp-font-head);
  font-weight:600; font-size:16px; letter-spacing:.03em; }
.tp-bar-brand svg { stroke: var(--tp-orange); stroke-width:1.5; }
.tp-bar-app { display:flex; align-items:center; padding:0 15px; background:rgba(255,255,255,.07);
  border-right:1px solid rgba(255,255,255,.16); font-family:var(--tp-font-head);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.tp-bar-nav { display:flex; align-items:stretch; }
.tp-bar-nav a { display:flex; align-items:center; padding:0 15px; text-decoration:none;
  color:rgba(233,237,241,.62); font-family:var(--tp-font-head); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; }
.tp-bar-nav a:hover { color:#fff; }
.tp-bar-nav a[aria-current="page"] { color: var(--tp-onbar); box-shadow: inset 0 -2px 0 var(--tp-steel); }
.tp-bar-end { margin-left:auto; display:flex; align-items:center; gap:12px; padding-right:16px;
  font-family:var(--tp-font-head); font-size:13px; letter-spacing:.06em; }
.tp-bar-role { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--tp-orange); }

/* ── stappen (voor apps met een flow, bv. genereren → aftekenen → historie) */
.tp-steps { display:flex; border-bottom:1px solid var(--tp-line); background: var(--tp-plate); }
.tp-step { display:flex; align-items:baseline; gap:10px; padding:14px 22px;
  border-right:1px solid var(--tp-line); color: var(--tp-muted);
  font-family: var(--tp-font-head); font-size:14px; letter-spacing:.1em; text-transform:uppercase; }
.tp-step > span:first-child { font-size:13px; }
.tp-step[aria-current="step"] { color: var(--tp-ink); box-shadow: inset 0 -3px 0 var(--tp-orange); }
.tp-step[aria-current="step"] > span:first-child { color: var(--tp-orange); }

/* ── knoppen: precies één gevulde per vlak ─────────────────────────────── */
.tp-btn { --tp-radius-btn:3px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none; font-family:var(--tp-font-head); font-weight:600;
  font-size:14px; line-height:1.2; padding:var(--tp-2) calc(var(--tp-3) * 1.2);
  color: var(--tp-ink); background: transparent;
  border:1px solid var(--tp-line); border-radius: 3px; }
.tp-btn svg { display:block; }
.tp-btn:disabled { opacity:.45; cursor:not-allowed; }
.tp-btn:hover { background: color-mix(in srgb, var(--tp-ink) 7%, transparent); }
.tp-btn:active { background: color-mix(in srgb, var(--tp-ink) 14%, transparent); }
.tp-btn-primary { background: var(--tp-orange); border-color: var(--tp-orange); color: var(--tp-on-orange); }
.tp-btn-primary:hover { background: var(--tp-orange-700); border-color: var(--tp-orange-700); }
.tp-btn-primary:active { background: var(--tp-orange-800); border-color: var(--tp-orange-800); }
.tp-btn-ghost { border-color: transparent; color: var(--tp-steel-700); }
[data-theme="dark"] .tp-btn-ghost { color: var(--tp-steel-400); }
.tp-btn-ghost:hover { background: color-mix(in srgb, var(--tp-steel) 12%, transparent); }
.tp-btn-icon { width:36px; height:36px; padding:0; }
.tp-btn-block { width:100%; }

/* ── velden ───────────────────────────────────────────────────────────── */
.tp-field { display:block; }
.tp-field > label { display:block; margin-bottom:5px;
  font-family: var(--tp-font-head); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color: var(--tp-muted); }
.tp-input { width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px;
  color: var(--tp-ink); caret-color: var(--tp-steel); background: var(--tp-plate);
  border:1px solid var(--tp-line); border-radius: var(--tp-radius); }
.tp-input:hover { border-color: color-mix(in srgb, var(--tp-ink) 45%, transparent); }
.tp-input:focus-visible { border-color: var(--tp-steel); outline-offset: 0; }
textarea.tp-input { min-height:90px; resize:vertical; }
.tp-radio { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.tp-radio input { position:absolute; opacity:0; width:0; height:0; }
.tp-radio .dot { width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid var(--tp-line); }
.tp-radio:hover .dot { border-color: var(--tp-steel); }
.tp-radio input:checked + .dot { border-color: var(--tp-steel); background: var(--tp-steel);
  box-shadow: inset 0 0 0 4px var(--tp-paper); }
.tp-seg { display:inline-flex; border:1px solid var(--tp-line); }
.tp-seg-opt { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 12px; font-size:13px; cursor:pointer; }
.tp-seg-opt input { position:absolute; opacity:0; width:0; height:0; }
.tp-seg-opt + .tp-seg-opt { border-left:1px solid var(--tp-line); }
.tp-seg-opt:has(input:checked) { background: var(--tp-steel); color: var(--tp-paper); }
.tp-seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--tp-ink) 7%, transparent); }

/* ── labels/tags: omlijnd, nooit gevuld ───────────────────────────────── */
.tp-tag { display:inline-flex; align-items:center; padding:3px 10px; font-size:11px;
  letter-spacing:.02em; border:1px solid var(--tp-line); color: var(--tp-muted); }
.tp-tag-ok   { border-color: var(--tp-ok);    color: var(--tp-ok); }
.tp-tag-warn { border-color: var(--tp-warn);  color: var(--tp-warn); }
.tp-tag-bad  { border-color: var(--tp-bad);   color: var(--tp-bad); }
.tp-tag-info { border-color: var(--tp-steel); color: var(--tp-steel-700); }
[data-theme="dark"] .tp-tag-info { color: var(--tp-steel-400); }

/* ── kentallen: losse tegels met ruimte ertussen, klikbaar als filter ──── */
.tp-tiles { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; }
.tp-tile { padding:14px 16px; background: var(--tp-surface);
  border:1px solid var(--tp-line-soft); border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow); }
.tp-tile > b, .tp-tile > div:first-child { display:block; font-family:var(--tp-font-head);
  font-weight:600; font-size:34px; line-height:1; font-variant-numeric: tabular-nums; }
.tp-tile > span, .tp-tile > div:last-child { font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--tp-muted); }
button.tp-tile, .tp-tile[role="button"] { cursor:pointer; text-align:left; font:inherit; }
button.tp-tile:hover, .tp-tile[role="button"]:hover { box-shadow: var(--tp-shadow-hover);
  border-color: color-mix(in srgb, var(--tp-steel) 55%, var(--tp-line-soft)); }
.tp-tile[aria-selected="true"] { border-color: var(--tp-orange);
  background: var(--tp-orange-100); box-shadow: var(--tp-shadow-hover); }
.tp-tile[aria-selected="true"] > b, .tp-tile[aria-selected="true"] > div:first-child { color: var(--tp-orange-700); }

/* ── tabellen ─────────────────────────────────────────────────────────── */
.tp-table { width:100%; border-collapse:collapse; font-size:14px; }
.tp-table th { text-align:left; padding:var(--tp-2); font-family:var(--tp-font-head);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--tp-muted); border-bottom:1px solid var(--tp-line); }
.tp-table td { padding:var(--tp-2); border-bottom:1px solid color-mix(in srgb, var(--tp-ink) 8%, transparent); }
.tp-table tbody tr:hover { background: color-mix(in srgb, var(--tp-ink) 4%, transparent); }
.tp-table td.tp-num, .tp-table th.tp-num { text-align:right; font-variant-numeric: tabular-nums; }

/* ── dialoog ──────────────────────────────────────────────────────────── */
.tp-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:var(--tp-4);
  background: color-mix(in srgb, #0d1215 55%, transparent); }
.tp-dialog { width:min(460px,100%); padding:var(--tp-6); background: var(--tp-surface);
  border:1px solid var(--tp-line-soft); border-radius: var(--tp-radius);
  box-shadow: 0 12px 32px rgba(13,18,21,.22); }