/*
 * Merk-thema bovenop Bootstrap 5.3.3 (static/vendor/bootstrap/), zonder Sass-
 * rebuild. Wordt NA bootstrap.min.css geladen (zie base.html).
 *
 * Belangrijk om te weten voor wie hierin iets aanpast: Bootstrap's
 * gecompileerde CSS leest zijn kleuren op twee manieren, en dat bepaalt
 * hier of je alleen de :root-variabelen hoeft te overschrijven, of ook de
 * component zelf:
 *   1. Utility-classes (.bg-primary, .text-primary, .text-bg-success,
 *      .alert-success, ...) verwijzen op de root-variabele ZELF
 *      (bv. `background-color:RGBA(var(--bs-primary-rgb),...)`), dus
 *      overschrijf je hieronder --bs-primary-rgb, dan volgt de hele
 *      utility-class vanzelf mee.
 *   2. Componenten met hun EIGEN scoped variabelen (.btn-primary,
 *      .btn-danger, .dropdown-menu, ...) bakken de kleur bij het compileren
 *      vast in hún eigen `--bs-btn-bg` e.d. (bv. `.btn-primary{--bs-btn-bg:
 *      #0d6efd}` - een hardgecodeerde hexwaarde, GEEN `var(--bs-primary)`).
 *      Root-variabelen overschrijven heeft daar dus geen enkel effect; die
 *      componenten moeten hieronder los, met hun eigen `--bs-btn-*`-namen,
 *      overschreven worden. Zie de vendored bootstrap.min.css zelf om na te
 *      gaan of een component tot categorie 1 of 2 hoort.
 */

:root,
[data-bs-theme=light] {
  /* --- Basispalet (was style.css :root, nu Bootstrap-variabelen) --- */
  --bs-body-bg: #F6F5F1;
  --bs-body-color: #1B2B2A;
  --bs-secondary-color: #4B5F5C;
  --bs-border-color: #DEDCD3;
  --bs-border-color-translucent: #DEDCD3;
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-pill: 999px;
  --bs-font-sans-serif: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bs-link-color: #1F4B43;
  --bs-link-color-rgb: 31, 75, 67;
  --bs-link-hover-color: #143530;
  --bs-link-hover-color-rgb: 20, 53, 48;
  --bs-emphasis-color: #1B2B2A;

  /* --- Primary: het diepgroen dat de hele app al gebruikte --- */
  --bs-primary: #1F4B43;
  --bs-primary-rgb: 31, 75, 67;
  --bs-primary-text-emphasis: #143530;
  --bs-primary-bg-subtle: #E7F0EE;
  --bs-primary-border-subtle: #B9CFC9;

  /* --- Secondary: gedempt/grijsgroen, voor de "geen-match"-badge e.d. --- */
  --bs-secondary: #4B5F5C;
  --bs-secondary-rgb: 75, 95, 92;
  --bs-secondary-text-emphasis: #33413f;
  --bs-secondary-bg-subtle: #EEECE4;
  --bs-secondary-border-subtle: #cfd3d1;

  /* --- Success/danger/warning/info: overgenomen van de bestaande
     .flash-*/.badge-*-kleuren, zodat status-indicatoren precies hetzelfde
     ogen als vóór de Bootstrap-migratie. --- */
  --bs-success: #1E5B33;
  --bs-success-rgb: 30, 91, 51;
  --bs-success-text-emphasis: #1E5B33;
  --bs-success-bg-subtle: #E7F2E9;
  --bs-success-border-subtle: #bfdcc8;

  --bs-danger: #A3341E;
  --bs-danger-rgb: 163, 52, 30;
  --bs-danger-text-emphasis: #A3341E;
  --bs-danger-bg-subtle: #FBEAE7;
  --bs-danger-border-subtle: #eec4bb;

  --bs-warning: #8A5A16;
  --bs-warning-rgb: 138, 90, 22;
  --bs-warning-text-emphasis: #8A5A16;
  --bs-warning-bg-subtle: #FCEFDD;
  --bs-warning-border-subtle: #f0d4a8;

  --bs-info: #2A5578;
  --bs-info-rgb: 42, 85, 120;
  --bs-info-text-emphasis: #2A5578;
  --bs-info-bg-subtle: #EAF1F6;
  --bs-info-border-subtle: #bcd3e2;

  --bs-accent: #C97A3A;
  --bs-accent-rgb: 201, 122, 58;
}

body { line-height: 1.5; }

/* --- Knoppen: eigen, bij het merk passende varianten. .btn-primary is de
   hoofd-call-to-action (vult in met --bs-primary hierboven); wat vroeger
   ".btn-secondary" heette (witte knop met primary-kleurige rand/tekst) is
   qua betekenis een outline-knop in de merkkleur, dus .btn-outline-primary
   in plaats van Bootstraps neutraal-grijze .btn-outline-secondary. --- */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #143530;
  --bs-btn-hover-border-color: #143530;
  --bs-btn-active-bg: #0f2823;
  --bs-btn-active-border-color: #0f2823;
  --bs-btn-disabled-bg: #B7C4C0;
  --bs-btn-disabled-border-color: #B7C4C0;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: #7c2515;
  --bs-btn-hover-border-color: #7c2515;
  --bs-btn-active-bg: #611d10;
  --bs-btn-active-border-color: #611d10;
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }

/* --- Losse pixel-breedte-helpers en een tekstuitloop-helper, om inline
   style="..."-attributen te vermijden: die worden geblokkeerd door de CSP
   van de app (`Content-Security-Policy: default-src 'self'`, zonder
   'unsafe-inline' - style-src-attr valt daarop terug, zie SECURITY.md
   bevinding 4). Bootstrap zelf heeft geen losse px-breedte-utilities. --- */
.mw-140 { max-width: 140px; }
.mw-280 { max-width: 280px; }
.mw-320 { max-width: 320px; }
.mw-480 { max-width: 480px; }
.mw-520 { max-width: 520px; }
.mw-560 { max-width: 560px; }
.text-break-all { word-break: break-all; }
.plate-value-url { font-size: .95rem; word-break: break-all; }

/* --- Navbar: eigen kleur i.p.v. Bootstraps .bg-dark/.navbar-dark. Zit
   bewust in deze stylesheet i.p.v. een style="background-color:..."-
   attribuut op de <nav> zelf in base.html - dat laatste wordt door
   dezelfde CSP hierboven geblokkeerd (geen 'unsafe-inline' voor
   style-src-attr), dus de navbalk-achtergrond deed het anders niet. --- */
.app-navbar { background-color: var(--bs-primary); }
.navbar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bs-accent);
  color: #fff;
  font-weight: 800;
}
.badge-viewing {
  background: var(--bs-accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .68rem;
}

/* --- Kleine, terugkerende structuur-helpers zonder directe Bootstrap-
   utility-equivalent (of: te vaak herhaald - ~20 templates - om overal los
   met utility-classes op te lossen). --- */
p.subtitle { color: var(--bs-secondary-color); margin-top: 0; margin-bottom: 1.5rem; }
.auth-wrap { max-width: 420px; margin: 2.5rem auto; }
.muted-link { text-align: center; margin-top: .875rem; font-size: .9rem; color: var(--bs-secondary-color); }

/* --- Bestaat niet als Bootstrap-component: het gestippelde kenteken-vak,
   ongewijzigd overgenomen uit de vorige style.css. --- */
.slot-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  margin-bottom: 6px;
}
.plate-value {
  font-family: "Consolas", monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 6px 10px;
  border: 2px dashed var(--bs-border-color);
  border-radius: 6px;
  display: inline-block;
  min-width: 120px;
  text-align: center;
}
.locked-note { font-size: .8rem; color: var(--bs-accent); }
.footer-version { font-family: "Consolas", monospace; opacity: .7; }

/* --- Tabellen die op een telefoon écht responsive zijn, niet alleen
   zijwaarts scrollbaar. `.table-responsive` (horizontaal scrollen) blijft
   als vangnet voor tablet/smal-desktop staan, maar onder de md-breakpoint
   (768px) - waar zijwaarts scrollen door een tabel op een telefoon
   sowieso een vervelende manier van lezen is - herschikt `.table-stack`
   elke rij tot een eigen kaart met veld:waarde-paren, zonder JS: puur CSS
   die de tabelelementen als blokken laat renderen i.p.v. tabelcellen, plus
   een `::before` die de kolomkop herhaalt via het `data-label`-attribuut
   dat elke `<td>` meekrijgt. Kolommen zonder zinvol label (bv. de
   actie-knoppen-kolom) gebruiken bewust data-label="" - dan blijft de rij
   overzichtelijk in plaats van "Acties:" boven een dropdown-knop te tonen. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
    display: block;
    width: 100%;
  }
  .table-stack.table > :not(caption) > * > * { border-width: 0; }
  .table-stack tr {
    margin-bottom: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
  }
  .table-stack tr:last-child { margin-bottom: 0; }
  .table-stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .3rem 0;
    text-align: right;
  }
  .table-stack td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
    text-align: left;
    flex-shrink: 0;
  }
  .table-stack td:empty { display: none; }
  /* Voor cellen met lopende tekst (bv. de audit-log-omschrijving) staat
     rechts uitgelijnd naast het label minder prettig te lezen dan gewoon
     een blok tekst onder het label - .stack-block schakelt zo'n cel terug
     naar een normaal blok i.p.v. flex-rij. */
  .table-stack td.stack-block {
    display: block;
    text-align: left;
  }
  .table-stack td.stack-block[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
  }
  /* Een <input class="mw-140"> (bv. het leverancierskenteken-veld) mag in
     kaartweergave zijn vaste pixel-max-breedte niet meenemen - anders
     blijft het een smal kolommetje i.p.v. gewoon de rest van de kaart te
     vullen naast het label. */
  .table-stack td .form-control,
  .table-stack td .form-select {
    max-width: none;
    flex: 1 1 auto;
    margin-left: .75rem;
  }
}