/* ============================================================================
   Vias Backoffice — visueel ontwerp (bron: "Vias Backoffice.dc.html")
   Donkere app-shell-zijbalk + lichte werkruimte, Lato, mint-groen accent.

   Deze stylesheet hertematiseert de (lokale) Bootstrap-componentklassen die de
   bestaande backoffice-views al gebruiken (.card, .table, .btn, .badge,
   .form-control, .nav-tabs, .pagination …) zodat elke view de nieuwe look erft,
   en voegt de app-shell + eigen componentklassen (bo-*) toe.

   Zelf-gehoste Lato (geen externe requests) — SIL Open Font License.
   ============================================================================ */

/* ---- Lato (self-hosted) ------------------------------------------------- */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../fonts/lato-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../fonts/lato-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/lato-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/lato-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/lato-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url(../fonts/lato-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url(../fonts/lato-900-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --bo-bg:        #EDF1F3;
  --bo-surface:   #ffffff;
  --bo-surface-2: #F7F9FA;
  --bo-border:    #DCE3E7;
  --bo-border-2:  #E4EAED;
  --bo-line:      #EDF1F3;

  --bo-ink:       #26333C;   /* primaire tekst */
  --bo-ink-2:     #3C4B55;
  --bo-muted:     #5A6973;
  --bo-muted-2:   #8593A0;

  /* Donkere zijbalk */
  --bo-side:      #2B3D4A;
  --bo-side-text: #C5D2D9;
  --bo-side-muted:#7E909B;

  /* Merk / accent */
  --bo-mint:      #51DEB8;
  --bo-green:     #1B7A60;   /* primaire actieknop */
  --bo-green-d:   #146A53;
  --bo-green-ink: #0E7A5E;   /* tekst op lichtgroen */
  --bo-green-bg:  #E3F8F1;

  --bo-radius:    12px;
  --bo-radius-sm: 8px;
  --bo-shadow-sm: 0 1px 2px rgba(16,32,48,.05), 0 1px 3px rgba(16,32,48,.07);
  --bo-shadow:    0 10px 30px rgba(16,32,48,.12);

  --bo-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Bootstrap-variabelen meekleuren */
  --bs-body-font-family: var(--bo-font);
  --bs-body-color: var(--bo-ink);
  --bs-border-color: var(--bo-border);
  --bs-border-radius: var(--bo-radius-sm);
  --bs-link-color: var(--bo-green);
  --bs-link-hover-color: var(--bo-green-d);
}

/* ============================================================================
   APP-SHELL
   ============================================================================ */
body.bo-app {
  margin: 0;
  font-family: var(--bo-font);
  color: var(--bo-ink);
  background: var(--bo-bg);
  -webkit-font-smoothing: antialiased;
}
.bo-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* ---- Overnamebalk ------------------------------------------------------- */
/* Zolang VIAS in het scherm van een klant werkt. Opzettelijk opvallend: wie vergeet in wiens
   scherm hij zit, wijzigt gegevens van een klant in de overtuiging dat het zijn eigen omgeving is.
   De shell krimpt mee, anders duwt de balk de app-hoogte voorbij het venster en gaat de hele
   pagina scrollen. */
:root { --fc-overname-h: 40px; }
body:has(.fc-overname) .bo-shell { height: calc(100vh - var(--fc-overname-h)); }
body:has(.fc-overname) .bo-auth-wrap { top: var(--fc-overname-h); }
.fc-overname {
  /* Boven alles: de aanmeld- en foutschermen leggen een `position:fixed; inset:0`-laag over de
     hele viewport, en daar verdween de balk onder. Net op die schermen heb je hem nodig — dat is
     waar je belandt als je tijdens een overname een backofficelink volgt. */
  position: relative; z-index: 50;
  height: var(--fc-overname-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: #8A4B12; color: #fff;
  font-size: 13px; font-weight: 700;
}
.fc-overname-tekst { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.fc-overname-tekst strong { font-weight: 900; letter-spacing: .4px; text-transform: uppercase; font-size: 11.5px; }
.fc-overname-tijd { opacity: .85; }
.fc-overname form { margin: 0; }
.fc-overname-knop {
  border: 1px solid rgba(255,255,255,.6); border-radius: 6px; background: transparent;
  color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 10px; cursor: pointer;
  white-space: nowrap;
}
.fc-overname-knop:hover { background: rgba(255,255,255,.14); }

/* Scrollbars (webkit) */
.bo-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.bo-app ::-webkit-scrollbar-thumb { background: #C4CED4; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.bo-app ::-webkit-scrollbar-thumb:hover { background: #A9B6BE; background-clip: content-box; }

/* ---- Zijbalk ------------------------------------------------------------ */
.bo-side {
  width: 250px; flex: 0 0 250px;
  background: var(--bo-side); color: var(--bo-side-text);
  display: flex; flex-direction: column; overflow: hidden;
}
.bo-side-head {
  position: relative; height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; padding: 0 20px; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.bo-side-head::after {
  content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(81,222,184,.18) 50%, transparent 52%),
    linear-gradient(135deg, transparent 58%, rgba(81,222,184,.12) 60%, transparent 62%);
  pointer-events: none;
}
.bo-brand { line-height: 1; position: relative; z-index: 1; }
.bo-brand .bo-brand-1 { font-weight: 900; font-size: 21px; color: #fff; letter-spacing: -.3px; }
.bo-brand .bo-brand-2 { font-weight: 300; font-size: 21px; color: var(--bo-mint); margin-left: 3px; }
.bo-brand .bo-brand-sub { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bo-side-muted); margin-top: 3px; font-weight: 700; }

.bo-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.bo-nav-group { margin-bottom: 2px; }
.bo-nav-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; padding: 9px 20px 7px;
  color: var(--bo-side-muted); font-size: 11px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
}
.bo-nav-toggle .bo-caret { font-size: 9px; opacity: .8; transition: transform .15s ease; transform: rotate(90deg); }
.bo-nav-toggle.collapsed .bo-caret { transform: rotate(0deg); }
.bo-nav-items { padding-bottom: 4px; }
.bo-side .bo-nav-link {
  display: flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none;
  padding: 7px 20px 7px 24px; font-size: 13.5px; color: var(--bo-side-text);
  border-left: 3px solid transparent; font-weight: 400;
}
.bo-side .bo-nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.bo-side .bo-nav-link .bo-dot { width: 5px; height: 5px; border-radius: 50%; background: #566975; flex: 0 0 5px; }
.bo-side .bo-nav-link.active {
  color: #fff; font-weight: 700; background: rgba(81,222,184,.12);
  border-left-color: var(--bo-mint);
}
.bo-side .bo-nav-link.active .bo-dot { background: var(--bo-mint); }

.bo-side-foot {
  flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 10px;
}
.bo-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bo-mint); color: #143A30;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex: 0 0 34px;
}
.bo-side-foot .bo-user { min-width: 0; flex: 1; }
.bo-side-foot .bo-user-name { font-size: 13px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-side-foot .bo-user-role { font-size: 11px; color: var(--bo-side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-logout { color: var(--bo-side-muted); font-size: 16px; cursor: pointer; background: none; border: 0; padding: 0; line-height: 1; }
.bo-logout:hover { color: var(--bo-mint); }

/* ---- Hoofdkolom + topbalk ----------------------------------------------- */
.bo-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.bo-topbar {
  flex: 0 0 64px; height: 64px; background: var(--bo-surface); border-bottom: 1px solid var(--bo-border);
  display: flex; align-items: center; padding: 0 24px; gap: 18px;
}
.bo-topbar .bo-titlewrap { flex: 1; min-width: 0; }
.bo-crumb { font-size: 11.5px; color: var(--bo-muted-2); font-weight: 700; letter-spacing: .3px; }
.bo-title { font-size: 19px; font-weight: 900; color: var(--bo-ink); letter-spacing: -.3px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-topbar-actions { display: flex; align-items: center; gap: 10px; }
.bo-content { flex: 1; overflow-y: auto; padding: 24px; }

/* Mobiele zijbalk-schakelaar (verschijnt < lg) */
.bo-side-toggle { display: none; }
@media (max-width: 991.98px) {
  .bo-shell { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .bo-side { width: 100%; flex: 0 0 auto; }
  .bo-nav { max-height: 60vh; }
  .bo-main { overflow: visible; }
  .bo-content { overflow: visible; }
}

/* ============================================================================
   COMPONENTEN  (hertematiseren Bootstrap-klassen + eigen helpers)
   ============================================================================ */

.bo-app h1, .bo-app h2, .bo-app h3, .bo-app h4 { letter-spacing: -.3px; color: var(--bo-ink); }
.bo-app a { color: var(--bo-green); }
.bo-app a:hover { color: var(--bo-green-d); }
.bo-app .text-muted { color: var(--bo-muted) !important; }

/* ---- Kaart / paneel ----------------------------------------------------- */
.bo-app .card,
.bo-card {
  background: var(--bo-surface); border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius); box-shadow: none;
}
.bo-app .card { overflow: hidden; }
.bo-card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--bo-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bo-card-head h1, .bo-card-head h2, .bo-card-head h3 { font-size: 15px; font-weight: 900; margin: 0; }
.bo-card-body { padding: 18px 20px; }
.bo-card-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--bo-line); background: #FAFCFB;
}
.bo-app .card-title { font-weight: 900; }

/* Statkaart (dashboard) */
.bo-stat { background: var(--bo-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-radius); padding: 16px 18px; }
.bo-stat-label { font-size: 12px; color: var(--bo-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.bo-stat-value { font-size: 30px; font-weight: 900; color: var(--bo-ink); margin-top: 6px; letter-spacing: -1px; line-height: 1.1; }
.bo-stat-delta { font-size: 12px; font-weight: 700; margin-top: 2px; }
.stat-link { display: block; text-decoration: none; color: inherit; }
.stat-link .bo-stat, .stat-link .card { transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.stat-link:hover .bo-stat, .stat-link:hover .card,
.stat-link:focus-visible .bo-stat, .stat-link:focus-visible .card {
  border-color: var(--bo-mint); box-shadow: var(--bo-shadow); transform: translateY(-2px);
}

/* ---- Tabellen ----------------------------------------------------------- */
.bo-app .table {
  --bs-table-bg: transparent;
  margin: 0; font-size: 13px; color: var(--bo-ink);
}
.bo-app .table > thead th,
.bo-table thead th {
  background: var(--bo-surface-2);
  text-align: left; padding: 10px 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--bo-muted-2); font-weight: 900; border-bottom: 1px solid var(--bo-border-2);
  white-space: nowrap;
}
.bo-app .table > tbody > tr { border-top: 1px solid var(--bo-line); }
.bo-app .table > tbody > tr:first-child { border-top: 0; }
.bo-app .table > tbody > td,
.bo-app .table > tbody > tr > td {
  padding: 9px 18px; vertical-align: middle; border: 0; border-top: 1px solid var(--bo-line); color: var(--bo-muted);
}
.bo-app .table > tbody > tr:hover > td { background: #F7FBFA; }
.bo-app .table.bo-table-card { border-collapse: collapse; }
.bo-num { font-variant-numeric: tabular-nums; }
.bo-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--bo-muted); }
/* een kaart die enkel een tabel bevat: ronde hoeken niet door de tabel laten doorsnijden */
.bo-card.bo-table-wrap, .bo-app .card.bo-table-wrap { overflow: hidden; }
.bo-table-scroll { overflow-x: auto; }

/* ---- Badges (pills) ----------------------------------------------------- */
.bo-app .badge, .bo-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
}
.bo-badge--green  { background: #E3F8F1; color: #0E7A5E; }
.bo-badge--grey   { background: #EEF1F3; color: #6B7780; }
.bo-badge--orange { background: #FDECDC; color: #B5651D; }
.bo-badge--red    { background: #FBE6E3; color: #B4554A; }
.bo-badge--blue   { background: #E6EEF3; color: #3A5A70; }
/* Bootstrap-badgevarianten op dezelfde tonen mappen */
.bo-app .badge.text-bg-success, .bo-app .badge.bg-success { background: #E3F8F1 !important; color: #0E7A5E !important; }
.bo-app .badge.text-bg-danger,  .bo-app .badge.bg-danger  { background: #FBE6E3 !important; color: #B4554A !important; }
.bo-app .badge.text-bg-warning, .bo-app .badge.bg-warning { background: #FDECDC !important; color: #B5651D !important; }
.bo-app .badge.text-bg-secondary, .bo-app .badge.bg-secondary { background: #EEF1F3 !important; color: #6B7780 !important; }
.bo-app .badge.text-bg-info, .bo-app .badge.bg-info { background: #E6EEF3 !important; color: #3A5A70 !important; }

/* ---- Knoppen ------------------------------------------------------------ */
.bo-app .btn, .bo-btn {
  --bs-btn-border-radius: 8px;
  height: 38px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; text-decoration: none; line-height: 1;
}
.bo-app .btn-lg { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 900; border-radius: 9px; }
.bo-app .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.bo-app .btn-primary, .bo-btn--primary {
  --bs-btn-bg: var(--bo-green); --bs-btn-border-color: var(--bo-green);
  --bs-btn-hover-bg: var(--bo-green-d); --bs-btn-hover-border-color: var(--bo-green-d);
  --bs-btn-active-bg: var(--bo-green-d); --bs-btn-active-border-color: var(--bo-green-d);
  --bs-btn-disabled-bg: var(--bo-green); --bs-btn-disabled-border-color: var(--bo-green);
  background: var(--bo-green); border-color: var(--bo-green); color: #fff;
}
.bo-app .btn-primary:hover, .bo-btn--primary:hover { background: var(--bo-green-d); border-color: var(--bo-green-d); color: #fff; }
.bo-app .btn-success { --bs-btn-bg: var(--bo-green); --bs-btn-border-color: var(--bo-green); --bs-btn-hover-bg: var(--bo-green-d); --bs-btn-hover-border-color: var(--bo-green-d); }
.bo-app .btn-secondary, .bo-app .btn-outline-secondary, .bo-app .btn-light, .bo-btn--ghost {
  background: #fff; border-color: var(--bo-border); color: var(--bo-muted);
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--bo-border); --bs-btn-color: var(--bo-muted);
  --bs-btn-hover-bg: var(--bo-surface-2); --bs-btn-hover-border-color: #C9D3D9; --bs-btn-hover-color: var(--bo-ink);
}
.bo-app .btn-outline-primary {
  --bs-btn-color: var(--bo-green); --bs-btn-border-color: var(--bo-green);
  --bs-btn-hover-bg: var(--bo-green); --bs-btn-hover-border-color: var(--bo-green); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bo-green-d); --bs-btn-active-border-color: var(--bo-green-d);
}
.bo-app .btn-danger {
  --bs-btn-bg: #C0473A; --bs-btn-border-color: #C0473A; --bs-btn-hover-bg: #A53B30; --bs-btn-hover-border-color: #A53B30;
}
.bo-app .btn-outline-danger { --bs-btn-color: #B4554A; --bs-btn-border-color: #E3B7B0; --bs-btn-hover-bg: #C0473A; --bs-btn-hover-border-color: #C0473A; --bs-btn-hover-color: #fff; }
.bo-app .btn-link { --bs-btn-color: var(--bo-green); --bs-btn-hover-color: var(--bo-green-d); font-weight: 700; height: auto; padding: 0; border: 0; }
/* Tekst-actie in tabellen ("Bewerken" / "Verwijderen") */
/* Rij-acties als knop. Ze stonden als gekleurde tekst naast elkaar, wat in een tabel vol tekst
   niet als aanklikbaar leest -- zeker niet bij "Deactiveren" of "Verwijderen", waar je maar beter
   ziet dat je iets aan het indrukken bent. De marge zit op het element zelf en niet op
   `.bo-act + .bo-act`: de meeste acties zitten in een eigen <form>, dus het zijn geen broers en
   die regel greep daar nooit. */
.bo-act {
    display: inline-flex; align-items: center; white-space: nowrap;
    font-size: 12.5px; font-weight: 700; line-height: 1;
    padding: 6px 10px; margin: 2px 4px 2px 0;
    border: 1px solid; border-radius: 6px; background: #fff;
    cursor: pointer; text-decoration: none;
}
.bo-act:focus-visible { outline: 2px solid var(--bo-green); outline-offset: 1px; }
.bo-act--edit { color: var(--bo-green); border-color: #BFD8CE; }
.bo-act--edit:hover { color: var(--bo-green-d); border-color: var(--bo-green); background: var(--bo-green-bg); text-decoration: none; }
.bo-act--del { color: #B4554A; border-color: #E6C6C1; }
.bo-act--del:hover { color: #8F392F; border-color: #B4554A; background: #FBEFEC; text-decoration: none; }

/* De actiekolom mag afbreken zodra er meer dan een paar knoppen staan; de tabel schuift al
   horizontaal, maar een rij van vijf knoppen duwt de leesbare kolommen anders uit beeld. */
.bo-table-card td.bo-acties { white-space: normal; }

/* ---- Formulieren -------------------------------------------------------- */
.bo-app .form-control, .bo-app .form-select, .bo-input, .bo-select {
  border: 1px solid var(--bo-border); border-radius: 8px;
  height: 40px; padding: 0 12px; font-size: 14px; color: var(--bo-ink); background: #fff;
}
.bo-app textarea.form-control { height: auto; padding: 9px 12px; line-height: 1.5; }
.bo-app .form-control:focus, .bo-app .form-select:focus, .bo-input:focus, .bo-select:focus {
  border-color: var(--bo-mint); box-shadow: 0 0 0 3px rgba(81,222,184,.20); outline: none;
}
.bo-app .form-label, .bo-label {
  display: block; font-size: 12px; font-weight: 900; color: var(--bo-muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.bo-app .form-text { color: var(--bo-muted-2); }
.bo-hint { color: #9AA7B0; font-weight: 400; text-transform: none; }

/* Filterbalk boven tabellen */
.bo-filterbar { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--bo-line); flex-wrap: wrap; }
.bo-filterbar .form-select, .bo-filterbar .bo-select { height: 36px; width: auto; }
.bo-filterbar .bo-count { margin-left: auto; font-size: 13px; color: var(--bo-muted-2); font-weight: 700; }

/* ---- Tabs (nav-tabs) ---------------------------------------------------- */
.bo-app .nav-tabs, .bo-tabs { border-bottom: 1px solid var(--bo-line); gap: 4px; padding: 0 4px; }
.bo-app .nav-tabs .nav-link {
  border: 0; border-radius: 8px 8px 0 0; padding: 8px 14px; margin-bottom: -1px;
  font-size: 13px; font-weight: 700; color: var(--bo-muted-2); background: transparent; height: auto;
}
.bo-app .nav-tabs .nav-link:hover { color: var(--bo-ink); border: 0; }
.bo-app .nav-tabs .nav-link.active {
  background: #fff; border: 1px solid var(--bo-border-2); border-bottom-color: #fff;
  color: var(--bo-ink); font-weight: 900;
}
/* Kleine "pill"-taalkiezer (NL/FR/DE/EN) */
.bo-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.bo-pill { padding: 5px 12px; border-radius: 7px; background: #F2F5F6; color: var(--bo-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; text-decoration: none; }
.bo-pill:hover { background: #E7ECEE; color: var(--bo-ink); }
.bo-pill.active { background: var(--bo-side); color: #fff; }

/* ---- Paginatie ---------------------------------------------------------- */
.bo-app .pagination { gap: 5px; margin: 0; }
.bo-app .page-link {
  height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bo-border); background: #fff; border-radius: 7px !important;
  color: var(--bo-ink); font-weight: 700; font-size: 13px;
}
.bo-app .page-item.active .page-link { background: var(--bo-side); border-color: var(--bo-side); color: #fff; }
.bo-app .page-item.disabled .page-link { color: var(--bo-muted-2); }
.bo-pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--bo-line); }
.bo-pager .bo-pager-info { font-size: 13px; color: var(--bo-muted-2); }

/* ---- Alerts / meldingen ------------------------------------------------- */
.bo-app .alert { border-radius: 9px; border: 1px solid transparent; font-size: 13.5px; padding: 12px 15px; }
.bo-app .alert-success { background: var(--bo-green-bg); border-color: #BCE9DA; color: #0E5E48; }
.bo-app .alert-danger  { background: #FBE6E3; border-color: #F2C6BF; color: #8F392F; }
.bo-app .alert-warning, .bo-note {
  background: #FFF7EE; border: 1px solid #F7D9B4; color: #7A5320; border-radius: 9px;
  padding: 13px 15px; font-size: 12.5px; line-height: 1.5; display: flex; gap: 11px;
}
.bo-note .bo-note-ico { color: #C57A1E; font-size: 16px; flex: 0 0 auto; }
.bo-app .alert-info { background: #E6EEF3; border-color: #CBDCE7; color: #2C4B5F; }

/* ---- Diversen ----------------------------------------------------------- */
.bo-backlink { display: inline-block; font-size: 13px; font-weight: 700; color: var(--bo-green); cursor: pointer; margin-bottom: 14px; text-decoration: none; }
.bo-backlink:hover { color: var(--bo-green-d); }
.bo-empty { padding: 40px 20px; text-align: center; color: var(--bo-muted-2); }
:focus-visible { outline: 3px solid var(--bo-mint); outline-offset: 2px; border-radius: 4px; }

/* Skip-link (toegankelijkheid) — gedeeld door alle shells die backoffice.css laden */
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 1080; background: var(--bo-green); color: #fff; padding: .5rem .9rem; border-radius: var(--bo-radius-sm); }
.skip-link:focus { left: .5rem; }

/* Tag-chips (talen op partij-/voertuigformulier) */
.bo-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: var(--bo-green-bg); color: var(--bo-green-ink); font-size: 12.5px; font-weight: 700; }
.bo-chip--add { background: transparent; border: 1px dashed #C4CED4; color: var(--bo-muted-2); cursor: pointer; }
/* Uitgevinkte koppeling: de rij blijft staan met doorstreepte naam, zodat zichtbaar is dat er
   iets ontkoppeld wordt bij het opslaan en de vergissing terug te draaien is. */
.bo-chip.is-uit { background: #F1F3F5; color: var(--bo-muted-2); text-decoration: line-through; }

/* Statistiek-analyse: sleep-en-neerzet pivotbouwer (zoals de mockup) */
.bo-pivot-builder { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.bo-pivot-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bo-palette-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--bo-muted-2); font-weight: 900; margin: 0 0 10px; }
.bo-dim-list, .bo-meas-list { display: flex; flex-direction: column; gap: 7px; }
/* Sleepbare dimensie-chip (palet + zones) */
.bo-dim-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--bo-border-2); border-radius: 8px; background: var(--bo-surface-2);
  font-size: 13px; font-weight: 700; color: var(--bo-ink-2); cursor: grab; user-select: none;
}
.bo-dim-chip:hover { border-color: #C9D3D9; }
.bo-dim-chip.bo-dragging { opacity: .45; }
.bo-dim-grip { color: #B4C0C8; letter-spacing: -1px; flex: 0 0 auto; }
.bo-dim-chip .bo-dim-x { margin-left: auto; color: #9AA7B0; cursor: pointer; font-weight: 900; text-decoration: none; padding: 0 2px; }
.bo-dim-chip .bo-dim-x:hover { color: #B4554A; }
/* Maat-toggle */
.bo-meas {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--bo-border-2); background: var(--bo-surface-2);
  font-size: 13px; font-weight: 700; color: var(--bo-ink-2); cursor: pointer; user-select: none;
}
.bo-meas:hover { border-color: #C9D3D9; }
.bo-meas.active { background: #EBFAF5; border-color: #CDEFE4; color: var(--bo-green-ink); }
.bo-meas .bo-meas-mark { width: 16px; flex: 0 0 16px; text-align: center; opacity: .5; }
.bo-meas.active .bo-meas-mark { opacity: 1; }
/* Sleepzones Rijen / Kolommen */
.bo-drop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bo-drop { background: var(--bo-surface); border: 1px dashed #B9E5D6; border-radius: 12px; padding: 13px 15px; min-height: 78px; }
.bo-drop.bo-drop-over { border-color: var(--bo-green); background: #F3FCF9; }
.bo-drop-h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--bo-muted-2); font-weight: 900; margin-bottom: 9px; }
.bo-drop-items { display: flex; gap: 7px; flex-wrap: wrap; min-height: 30px; align-content: flex-start; }
.bo-drop-items .bo-dim-chip { background: var(--bo-side); border-color: var(--bo-side); color: #fff; padding: 5px 11px; border-radius: 20px; }
.bo-drop-items .bo-dim-chip .bo-dim-grip { color: rgba(255,255,255,.5); }
.bo-drop-items .bo-dim-chip .bo-dim-x { color: rgba(255,255,255,.7); }
.bo-drop-items .bo-dim-chip .bo-dim-x:hover { color: #fff; }
.bo-drop-empty { font-size: 12.5px; color: #9AA7B0; }
.bo-pivot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  .bo-pivot-builder { grid-template-columns: 1fr; }
  .bo-drop-row { grid-template-columns: 1fr; }
}

/* Dashboard: maandgrafiek (pure CSS-staven) */
.bo-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; }
.bo-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.bo-chart-bar { width: 100%; min-height: 3px; background: var(--bo-mint); border-radius: 5px 5px 0 0; transition: filter .12s ease; }
.bo-chart-col:hover .bo-chart-bar { filter: brightness(.94); }
/* Tweede grafiek (gecontroleerden) in een andere tint, zodat de twee niet verwarren. */
.bo-chart-bar--alt { background: var(--bo-side); }
/* Aantal boven de balk (T-018): zonder cijfers viel er niets af te lezen. */
.bo-chart-val { font-size: 11px; font-weight: 900; color: var(--bo-muted); line-height: 1; min-height: 11px; }
.bo-chart-lbl { font-size: 11px; color: var(--bo-muted-2); font-weight: 700; }

/* Dashboard: snelkoppelingen */
.bo-quicklinks { display: flex; flex-direction: column; gap: 9px; }
.bo-quicklink { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--bo-border-2); border-radius: 9px; background: var(--bo-surface-2); font-size: 13.5px; font-weight: 700; color: var(--bo-ink); text-decoration: none; }
.bo-quicklink:hover { border-color: var(--bo-mint); color: var(--bo-ink); background: #fff; }
.bo-quicklink-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--bo-green-bg); color: var(--bo-green-ink); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; line-height: 1; flex: 0 0 40px; }
.bo-quicklink-arr { margin-left: auto; color: #9AA7B0; }

@media (max-width: 860px) { .bo-dash-row { grid-template-columns: 1fr !important; } }

/* Merge-tag (mono chip) */
.bo-mergetag { padding: 4px 9px; border-radius: 6px; background: #F2F5F6; border: 1px solid var(--bo-border-2); color: var(--bo-ink-2); font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }

/* ============================================================================
   AANMELDSCHERM (login / 2FA)  —  donkere achtergrond, gecentreerde kaart
   ============================================================================ */
body.bo-auth { margin: 0; font-family: var(--bo-font); background: var(--bo-side); -webkit-font-smoothing: antialiased; }
.bo-auth-wrap { position: fixed; inset: 0; display: flex; background: var(--bo-side); overflow: hidden; }
.bo-auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bo-auth-bg::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 560px; height: 560px;
  background:
    linear-gradient(135deg, transparent 47%, rgba(81,222,184,.16) 49%, transparent 51%),
    linear-gradient(135deg, transparent 57%, rgba(81,222,184,.10) 59%, transparent 61%),
    linear-gradient(135deg, transparent 67%, rgba(81,222,184,.07) 69%, transparent 71%);
}
.bo-auth-panel { margin: auto; width: 400px; max-width: 92vw; position: relative; padding: 16px; }
.bo-auth-brand { text-align: center; margin-bottom: 24px; }
.bo-auth-brand .bo-brand-1 { font-weight: 900; font-size: 30px; color: #fff; letter-spacing: -.4px; }
.bo-auth-brand .bo-brand-2 { font-weight: 300; font-size: 30px; color: var(--bo-mint); margin-left: 4px; }
.bo-auth-brand .bo-brand-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--bo-side-muted); margin-top: 5px; font-weight: 700; }
.bo-auth-card { background: #fff; border-radius: 14px; padding: 30px 30px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.bo-auth-card h1, .bo-auth-card h2 { font-size: 19px; font-weight: 900; color: var(--bo-ink); margin: 0 0 4px; }
.bo-auth-card .bo-auth-lead { font-size: 13.5px; color: var(--bo-muted-2); margin-bottom: 20px; }
.bo-auth-card .form-control { height: 42px; }
.bo-auth-foot { text-align: center; font-size: 12px; color: var(--bo-side-muted); margin-top: 18px; }
/* 6-cijferige 2FA-codevakken (cosmetisch; het echte invoerveld kan eronder) */
.bo-code { display: flex; gap: 9px; justify-content: space-between; margin-bottom: 20px; }
.bo-code input { width: 48px; height: 56px; border: 1px solid var(--bo-border); border-radius: 9px; text-align: center; font-size: 22px; font-weight: 900; color: var(--bo-ink); outline: none; padding: 0; }
.bo-code input:focus, .bo-code input.filled { border-color: var(--bo-mint); }
/* 2FA-enrolment: QR + handmatige sleutel */
.bo-auth-card .bo-enroll-qr { text-align: center; margin: 6px 0 16px; }
.bo-auth-card .bo-enroll-qr svg, .bo-auth-card .bo-enroll-qr img { width: 180px; height: 180px; display: inline-block; background: #fff; }
.bo-enroll-secret { background: var(--bo-surface-2); border: 1px solid var(--bo-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; text-align: center; }
.bo-enroll-secret code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--bo-ink); word-break: break-all; letter-spacing: 1px; }

/* ---- Opvolgingsoverzicht (T-033/T-034) --------------------------------- */
/* Voortgang per groep: kaartjes die in één oogopslag tonen wat af is. */
.opv-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
/* Eén cel per groep: het kaartje en de plan-link zitten in hetzelfde kader. Stond de link
   los in het raster, dan schoof ze als eigen cel tussen de kaartjes (T-062). Stretch houdt
   de kaders van één rij even hoog, ook bij een lange groepsnaam. */
.opv-groep-cel { display: flex; flex-direction: column; border: 1px solid var(--bo-border-2); border-radius: 11px; background: #fff; overflow: hidden; }
.opv-groep-cel:hover { border-color: var(--bo-green); }
.opv-groep-cel:has(.is-volledig) { border-color: var(--bo-green); background: #F2FAF7; }
.opv-groep { display: block; padding: 10px 12px; flex: 1; }
/* Ook zonder :has() blijft een afgewerkte groep herkenbaar. */
.opv-groep.is-volledig { background: #F2FAF7; }
.opv-groep .nm { font-size: 13.5px; font-weight: 800; color: var(--bo-ink); margin-bottom: 7px; }
.opv-groep .pb { height: 6px; border-radius: 3px; background: #E8EDEF; overflow: hidden; }
.opv-groep .pb span { display: block; height: 100%; background: var(--bo-green); }
.opv-groep .cnt { font-size: 12px; font-weight: 700; color: var(--bo-muted); margin-top: 6px; }
/* De actie hoort visueel bij het kaartje: onderaan, over de volle breedte, met een scheiding. */
.opv-groep-actie { display: block; padding: 7px 12px; font-size: 12px; font-weight: 800; color: var(--bo-green); border-top: 1px solid var(--bo-border-2); background: rgba(0,0,0,.015); }
.opv-groep-actie:hover { background: var(--bo-green); color: #fff; }
.opv-groep-actie, .opv-groep-actie:hover { text-decoration: none; }

/* Opvolgingstabel (T-075): status, datum en aantal krimpen tot hun inhoud en breken niet af.
   Naam, groep en site houden zo de vrije ruimte en de smalle kolommen staan recht onder
   elkaar in plaats van mee te schuiven met de langste naam. */
.opv-tabel .opv-krap { width: 1%; white-space: nowrap; }
.opv-tabel td, .opv-tabel th { vertical-align: middle; }

/* Filterbalk: schikt zich vanzelf naar de schermbreedte. */
.opv-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.opv-filter-knoppen { display: flex; gap: 6px; align-items: center; }
/* Groepskaartjes zijn links, maar mogen niet als tekstlink onderstreept worden. */
.opv-groep, .opv-groep:hover { text-decoration: none; }

/* Aanvinklijst (bv. de sites van een beheerder): twee kolommen, één op smal scherm. */
.bo-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 700px) { .bo-checklist { grid-template-columns: 1fr; } }

/* Herschikken door slepen (T-041). De greep is de hele rij; een subtiele markering
   toont welke rij verplaatst wordt en dat de tabel even wacht op de server. */
table[data-herschik] tbody tr { cursor: grab; }
table[data-herschik] tbody tr.is-gesleept { opacity: .45; background: var(--bo-side); }
table[data-herschik].is-bezig { opacity: .6; pointer-events: none; }

/* ---- Zoeken en sorteren binnen één tabel (T-047, T-059, T-081) ---------- */
.tbl-zoekbalk { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tbl-zoek { max-width: 320px; }
.tbl-teller { white-space: nowrap; }
/* De kop is een knop: dat mag te zien zijn, zonder de tabel druk te maken. */
.tbl-sorteerbaar { cursor: pointer; user-select: none; }
.tbl-sorteerbaar:hover { color: var(--bo-ink); }
.tbl-sorteerbaar::after { content: "↕"; opacity: .35; margin-left: 5px; font-size: 11px; }
.tbl-sort-op::after { content: "↑"; opacity: 1; }
.tbl-sort-af::after { content: "↓"; opacity: 1; }
.tbl-sorteerbaar:focus-visible { outline: 2px solid var(--bo-green); outline-offset: -2px; }

/* Sterretje bij een verplicht veld (T-081): zichtbaar, maar niet luider dan het label. */
.bo-verplicht { color: #C0392B; font-weight: 700; }

/* Het echte logo in de donkere schil (T-009). Het woordmerk was in tekst nagebouwd; het
   aangeleverde SVG is breed (1698×196) en wit, dus het volstaat om de breedte te begrenzen —
   de hoogte volgt vanzelf. */
.bo-brand img { display: block; width: 100%; max-width: 186px; height: auto; }
.bo-auth-brand img { display: block; margin: 0 auto; width: 100%; max-width: 240px; height: auto; }

/* ---- Tussentitel per hoofdcategorie in de controlepunt-statistiek --------
   Een rij die geen cijfers draagt maar de groep eronder benoemt; rustig grijs
   zodat ze zich onderscheidt van de datarijen zonder de aandacht op te eisen. */
.stat-groeprij th {
  background: var(--bo-surface-2);
  color: var(--bo-muted-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ---- Statistiekscherm van de verantwoordelijke: ruimer ritme (variant 1A) ---
   De klant vond het scherm te vol. Zelfde layout en componenten, enkel meer lucht.
   Bewust gescoped op .stat-lucht: _StatistiekOverzicht.cshtml hangt ook onder het
   beheerder- en VIAS-scherm, en die mogen niet mee verschuiven. */
.bo-content:has(> .stat-lucht) { padding: 36px 32px 44px; }

.stat-lucht { display: flex; flex-direction: column; gap: 32px; }
.stat-lucht > * { margin-bottom: 0; }        /* de mb-3/mb-4 van Bootstrap uit; gap regelt het */

.stat-lucht .alert { padding: 16px 18px; line-height: 1.55; }
.stat-lucht .bo-card-body { padding: 24px; gap: 20px; }
.stat-lucht .form-label, .stat-lucht .bo-label { margin-bottom: 8px; }

/* Cijferkaarten */
.stat-lucht .row.g-3 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.stat-lucht .card .card-body { padding: 32px 20px; }
.stat-lucht .display-6 { font-size: 44px; font-weight: 300; line-height: 1.1; }
.stat-lucht .card-body .small { font-size: 13px; margin-top: 10px; }

/* Titel + tabel vormen samen één blok: 16px onder de titel, 32px tot het volgende blok. */
.stat-lucht .stat-blok { display: flex; flex-direction: column; gap: 16px; }
.stat-lucht .stat-blok > * { margin: 0; }
.stat-lucht h2.h5 { font-size: 16px; font-weight: 900; }

/* Tabellen */
.stat-lucht .table > thead th { padding: 14px 24px; }
.stat-lucht .table > tbody > tr > td { padding: 16px 24px; }
.stat-lucht .stat-groeprij th { padding: 12px 24px; }
.stat-lucht .progress { height: 18px; border-radius: 4px; }