/* ==========================================================================
   ENKA Hub - VISUELE LAAG (v3)
   Laag 3 van 3. Volgorde in header.php:
      bootstrap.min.css -> hub-theme.css -> hub.css -> hub-ui.css
   Deze laag verandert alleen het uiterlijk: diepte, ritme, kleur, mobiel.
   Geen nieuwe markup nodig; alles haakt op bestaande klassen.
   ========================================================================== */

/* ===== 1. Tokens bijstellen ============================================= */
:root{
  /* Zachtere, koelere vlakken en een rustiger raster */
  --surface:#f5f6f8;
  --surface-2:#eceef2;
  --border:#e6e8ec;
  --border-strong:#d5d9e0;

  /* Ronder: sluit aan bij moderne dashboards */
  --r-xs:8px; --r-sm:10px; --r:14px; --r2:18px; --r-lg:22px;

  /* Gelaagde, zachte diepte in plaats van een enkele harde schaduw */
  --shadow-xs:0 1px 1px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-md:0 2px 4px rgba(16,24,40,.04), 0 12px 24px -8px rgba(16,24,40,.10);
  --shadow:0 8px 28px -6px rgba(16,24,40,.14);
  --shadow-lg:0 32px 64px -16px rgba(16,24,40,.22);
  --ring:0 0 0 4px rgba(37,99,235,.14);

  /* Extra accenten voor data en tegels */
  --violet:#7c3aed;  --violet-soft:rgba(124,58,237,.10);
  --teal:#0d9488;    --teal-soft:rgba(13,148,136,.10);
  --pink:#db2777;    --pink-soft:rgba(219,39,119,.10);
  --amber:#f59e0b;

  --topbar-h:64px;
  --sidebar-w:268px;
}
[data-bs-theme="dark"]{
  --surface:#0d0e12;
  --bg:#16181d;
  --card:#16181d;
  --surface-2:#22252c;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --shadow-xs:0 1px 1px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-md:0 2px 6px rgba(0,0,0,.45), 0 14px 28px -10px rgba(0,0,0,.6);
  --shadow:0 10px 34px -8px rgba(0,0,0,.65);
  --ring:0 0 0 4px rgba(91,141,255,.20);
  --violet:#a78bfa;  --violet-soft:rgba(167,139,250,.16);
  --teal:#2dd4bf;    --teal-soft:rgba(45,212,191,.16);
  --pink:#f472b6;    --pink-soft:rgba(244,114,182,.16);
}

/* Subtiele lichtval achter de app: haalt het vlakke grijs eraf */
body{
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(37,99,235,.055), transparent 62%),
    radial-gradient(700px 380px at 8% 4%, rgba(124,58,237,.045), transparent 60%);
  background-attachment:fixed;
}
[data-bs-theme="dark"] body{
  background-image:
    radial-gradient(900px 460px at 80% -10%, rgba(91,141,255,.10), transparent 60%),
    radial-gradient(760px 420px at 4% 2%, rgba(167,139,250,.07), transparent 60%);
}

/* ===== 2. Sidebar ======================================================= */
.hub-sidebar{
  background:linear-gradient(180deg,#111217 0%,#0a0b0e 60%,#08090c 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:1px 0 0 rgba(0,0,0,.4);
}
.hub-brand{border-bottom:1px solid rgba(255,255,255,.06);padding:0 16px}
.hub-brand-mark{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(140deg,#ffffff,#d7dae2);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.hub-nav{padding:14px 12px 8px;gap:2px}
.hub-nav-label{
  font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.28);
  padding:16px 14px 7px;
}
.hub-nav-item{
  padding:10px 12px;border-radius:11px;font-size:14px;
  color:rgba(255,255,255,.66);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.hub-nav-item i{
  width:26px;height:26px;line-height:26px;border-radius:8px;font-size:13px;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.62);
  opacity:1;transition:all var(--t-fast);
}
.hub-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.hub-nav-item:hover i{background:rgba(255,255,255,.10);color:#fff}
.hub-nav-item.is-active{
  background:linear-gradient(90deg,rgba(37,99,235,.30),rgba(37,99,235,.10));
  color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(120,160,255,.22);
}
.hub-nav-item.is-active i{
  background:linear-gradient(140deg,var(--accent),#1e40af);
  color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.45);
}
.hub-nav-item.is-active::before{
  left:-12px;width:3px;height:22px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#7ba4ff,var(--accent));
  box-shadow:0 0 12px rgba(91,141,255,.7);
}
.hub-nav-subitem{padding:7px 12px 7px 46px;font-size:12.5px;color:rgba(255,255,255,.5)}
.hub-nav-subitem::before{left:27px}
.hub-nav-subitem.is-active{background:rgba(255,255,255,.07)}
.hub-nav-subitem.is-active::before{background:#7ba4ff;box-shadow:0 0 8px rgba(123,164,255,.9)}
.hub-nav-badge{background:rgba(255,255,255,.12);font-size:10px;height:18px}
.hub-sidebar-foot{border-top:1px solid rgba(255,255,255,.06);padding:12px}
.hub-sidebar-btn{height:36px;border-radius:10px}

/* ===== 3. Topbar ======================================================== */
.hub-topbar{
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:saturate(1.8) blur(16px);
  -webkit-backdrop-filter:saturate(1.8) blur(16px);
  border-bottom:1px solid transparent;
  box-shadow:0 1px 0 var(--border);
  transition:box-shadow var(--t),background var(--t);
}
.hub-topbar.is-stuck{box-shadow:0 1px 0 var(--border),0 6px 20px -12px rgba(16,24,40,.35)}
.hub-page-title{font-size:16px;letter-spacing:-.015em}
.hub-crumbs{font-size:12px}
.hub-searchbtn{
  height:38px;border-radius:11px;background:var(--surface);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
}
@media (min-width:1201px){ .hub-searchbtn{min-width:240px} }
@media (max-width:1200px){ .hub-searchbtn{width:38px;height:38px} }
.hub-searchbtn:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.hub-avatar{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(140deg,#2b2c33,#0b0b0d);
  box-shadow:0 2px 8px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.10);
}
[data-bs-theme="dark"] .hub-avatar{background:linear-gradient(140deg,#f4f4f5,#c9cad0);color:#0b0b0d}
.hub-userbtn{border-radius:12px}
.hub-collapse-btn,.hub-navtoggle{border-radius:11px;width:38px;height:38px}
.hub-navtoggle:hover,.hub-collapse-btn:hover{background:var(--surface);color:var(--accent)}

/* ===== 4. Pagina-kop ==================================================== */
.hub-pagehead{
  align-items:center;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.hub-pagehead-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.12em;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);
  padding:3px 10px;border-radius:var(--r-pill);margin-bottom:10px;
}
.hub-pagehead h1{font-size:26px;letter-spacing:-.035em;line-height:1.15}
.hub-pagehead-sub{font-size:13.5px;margin-top:8px}
.hub-pagehead.is-card{border-radius:var(--r2);padding:20px 22px}

/* ===== 5. Kerncijfers (stat-tegels) ===================================== */
.hub-stats{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin-bottom:22px;
}
.hub-stat{
  display:block;position:relative;
  padding:17px 18px 16px;border-radius:var(--r2);
  background:var(--bg);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  min-height:104px;
  isolation:isolate;
}
/* Zachte kleurwaas in de hoek: geeft de tegel karakter zonder lawaai */
.hub-stat::before{
  content:"";position:absolute;inset:auto -30% -60% auto;width:170px;height:170px;
  border-radius:50%;background:var(--accent-soft);filter:blur(26px);opacity:.55;
  z-index:-1;transition:opacity var(--t),transform var(--t);
}
.hub-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.hub-stat:hover::before{opacity:.9;transform:scale(1.12)}
.hub-stat::after{display:none}
.hub-stat>div{min-width:0}

.hub-stat .hub-stat-ico2{
  position:absolute;top:15px;right:15px;
  width:38px;height:38px;border-radius:12px;font-size:15px;
  background:linear-gradient(140deg,var(--accent),#1d4ed8);color:#fff;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.7);
}
.hub-stat .hub-stat-ico2.is-ok{background:linear-gradient(140deg,#22c55e,#15803d);box-shadow:0 6px 16px -6px rgba(22,163,74,.65)}
.hub-stat .hub-stat-ico2.is-warn{background:linear-gradient(140deg,#fbbf24,#d97706);box-shadow:0 6px 16px -6px rgba(217,119,6,.6)}
.hub-stat .hub-stat-ico2.is-down{background:linear-gradient(140deg,#f87171,#dc2626);box-shadow:0 6px 16px -6px rgba(220,38,38,.6)}
.hub-stat .hub-stat-ico2.is-muted{
  background:var(--surface);color:var(--muted-2);
  box-shadow:inset 0 0 0 1px var(--border);
}
.hub-stat:has(.is-ok)::before{background:var(--ok-soft)}
.hub-stat:has(.is-warn)::before{background:var(--warn-soft)}
.hub-stat:has(.is-down)::before{background:var(--danger-soft)}
.hub-stat:has(.is-muted)::before{opacity:.3}

.hub-stat-value{
  font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.05;
  padding-right:46px;
}
.hub-stat-label{
  font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4;
  padding-right:8px;
}
.hub-stat-trend{
  display:inline-flex;padding:2px 7px;border-radius:var(--r-pill);
  font-size:11px;margin-left:7px;
}
.hub-stat-trend.is-up{background:var(--ok-soft)}
.hub-stat-trend.is-down{background:var(--danger-soft)}

/* ===== 6. Kaarten, panelen, lijsten ==================================== */
.hub-card,.hub-panel,.hub-tablecard,.hub-filterbar{border-radius:var(--r2)}
.hub-card{padding:20px}
.hub-card-icon{
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(140deg,var(--accent-soft),var(--accent-soft-2));
  color:var(--accent-2);
}
a.hub-card:hover,.hub-card.is-clickable:hover{transform:translateY(-3px)}

.hub-panel-head,.hub-tablecard-head{padding:15px 18px;border-bottom:1px solid var(--border)}
.hub-panel-title,.hub-tablecard-title{font-size:14px;letter-spacing:-.005em}
.hub-panel-title i,.hub-tablecard-title i{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);font-size:12px;
}
.hub-panel-body{padding:10px}
.hub-panel-link{
  padding:4px 10px;border-radius:var(--r-pill);background:var(--surface);
  font-size:11.5px;transition:all var(--t-fast);
}
.hub-panel-link:hover{background:var(--accent-soft);color:var(--accent-2)}

.hub-list-item{padding:11px 12px;border-radius:12px}
.hub-list-ico{width:40px;height:40px;border-radius:12px;transition:transform var(--t-fast)}
.hub-list-item:hover .hub-list-ico{transform:scale(1.06)}
.hub-list-title{font-size:13.5px}
.hub-list-item>.fa-chevron-right{transition:transform var(--t-fast),color var(--t-fast)}
.hub-list-item:hover>.fa-chevron-right{transform:translateX(3px);color:var(--accent)}

.hub-metric{border-radius:var(--r2);padding:15px 16px}
.hub-metric-ico{width:40px;height:40px;border-radius:12px}

/* ===== 7. Grafiek ====================================================== */
.hub-barchart{padding:22px 18px 12px;gap:8px}
.hub-bar-track{height:170px;border-bottom:1px solid var(--border);position:relative}
/* Rustige hulplijnen achter de staven (los laagje, geen extra breedte) */
.hub-barchart{position:relative}
.hub-barchart::before{
  content:"";position:absolute;left:18px;right:18px;top:22px;height:170px;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--border) 0 1px,transparent 1px 25%);
  opacity:.5;
}
.hub-bar-fill{
  width:66%;max-width:34px;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#60a5fa,var(--accent) 55%,#1d4ed8);
  box-shadow:0 -2px 10px -2px rgba(37,99,235,.5);
  transition:height .5s cubic-bezier(.2,.7,.3,1),filter var(--t-fast);
}
.hub-bar-col:hover .hub-bar-fill{filter:brightness(1.12) saturate(1.1)}
.hub-bar-fill.is-zero{background:var(--surface-2);box-shadow:none}
.hub-bar-lbl{font-size:10px;letter-spacing:.07em}
.hub-bar-col:hover .hub-bar-lbl{color:var(--ink)}
/* Lege reeks: toon dat er niets is in plaats van een leeg vlak */
.hub-barchart:not(:has(.hub-bar-fill:not(.is-zero))){position:relative}
.hub-barchart:not(:has(.hub-bar-fill:not(.is-zero)))::after{
  content:"Nog geen gegevens in deze periode";
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--muted-2);pointer-events:none;
}

/* ===== 8. Tabellen ===================================================== */
.hub-table th,.hub-table td{padding:13px 18px;font-size:13.5px}
.hub-table thead th{
  background:transparent;font-size:10.5px;letter-spacing:.08em;color:var(--muted-2);
  border-bottom:1px solid var(--border);padding-top:14px;padding-bottom:12px;
}
.hub-tablecard .hub-table thead th{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.hub-table tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.hub-table tbody td{border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.hub-mono{border-radius:11px;background:linear-gradient(140deg,#2b2c33,#0b0b0d)}
[data-bs-theme="dark"] .hub-mono{background:linear-gradient(140deg,#3a3d46,#22242a);color:#fff}
.hub-mono-accent{background:linear-gradient(140deg,var(--accent),#1d4ed8);color:#fff}
/* Rijacties pas tonen bij aandacht: rustiger overzicht */
@media (hover:hover) and (min-width:993px){
  .hub-table tbody td.hub-actions{opacity:.62;transition:opacity var(--t-fast)}
  .hub-table tbody tr:hover td.hub-actions,
  .hub-table tbody tr:focus-within td.hub-actions{opacity:1}
}
.hub-pager{padding:14px 18px}
.hub-pager-btn{border-radius:10px}
.hub-pager-btn.is-active{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

/* ===== 9. Badges, knoppen, velden ====================================== */
.hub-badge{padding:4px 11px;font-size:11px;font-weight:700;letter-spacing:.01em}
.hub-badge-ok{box-shadow:inset 0 0 0 1px rgba(22,163,74,.20)}
.hub-badge-warn{box-shadow:inset 0 0 0 1px rgba(217,119,6,.20)}
.hub-badge-down{box-shadow:inset 0 0 0 1px rgba(220,38,38,.20)}
.hub-badge-info{box-shadow:inset 0 0 0 1px rgba(37,99,235,.18)}

.hub-btn{border-radius:11px;padding:10px 16px}
.hub-btn-primary{
  background:linear-gradient(180deg,#26262b,#0a0a0b);
  box-shadow:0 1px 2px rgba(16,24,40,.18),0 8px 18px -10px rgba(16,24,40,.7),inset 0 1px 0 rgba(255,255,255,.10);
}
.hub-btn-primary:hover{background:linear-gradient(180deg,#3a3a41,#171719);transform:translateY(-1px)}
.hub-btn-accent{
  background:linear-gradient(180deg,#3b82f6,var(--accent));
  box-shadow:0 1px 2px rgba(37,99,235,.25),0 10px 20px -10px rgba(37,99,235,.85),inset 0 1px 0 rgba(255,255,255,.22);
}
.hub-btn-accent:hover{background:linear-gradient(180deg,#2563eb,#1d4ed8);transform:translateY(-1px)}
[data-bs-theme="dark"] .hub-btn-primary{background:linear-gradient(180deg,#fafafa,#d9d9de)}
[data-bs-theme="dark"] .hub-btn-primary:hover{background:linear-gradient(180deg,#fff,#e8e8ee)}
.hub-btn-ghost:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.hub-btn-icon{width:38px;height:38px;border-radius:11px}
.hub-iconbtn{border-radius:9px}

.hub-field label{font-size:12px;letter-spacing:.01em;color:var(--muted);font-weight:600;margin-bottom:7px}
.hub-search input,.hub-input,.hub-select,.form-control,.form-select{border-radius:11px}
.hub-search input{padding-top:9px;padding-bottom:9px}
.hub-filterbar{padding:14px 16px;gap:10px}

.hub-empty{border-radius:var(--r2);padding:52px 26px;background:var(--bg)}
.hub-empty i{
  display:grid;place-items:center;width:60px;height:60px;margin:0 auto 16px;
  border-radius:18px;background:var(--accent-soft);font-size:24px;opacity:1;
}

/* ===== 10. Overlays: modal, toast, palette ============================= */
.hub-modal{border-radius:var(--r-lg)}
.hub-modal-backdrop{background:rgba(9,10,12,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hub-toast{border-radius:var(--r2);box-shadow:var(--shadow-lg)}
.hub-cmdk{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

/* ===== 11. Tabs ======================================================== */
.hub-tabs{
  gap:4px;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;
}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tab{border-radius:10px 10px 0 0;padding:11px 15px;flex:0 0 auto}
.hub-tab:hover{background:var(--surface)}
.hub-tab.is-active{border-bottom-width:2px}
.hub-subtab{border-radius:var(--r-pill);padding:6px 13px}

/* ===== 12. Beweging ==================================================== */
.hub-content{animation:hubRise .34s cubic-bezier(.2,.7,.3,1)}
@keyframes hubRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Kerncijfers komen na elkaar binnen: geeft het dashboard leven bij het laden */
.hub-stats>*{animation:hubRise .4s cubic-bezier(.2,.7,.3,1) backwards}
.hub-stats>*:nth-child(1){animation-delay:.02s}
.hub-stats>*:nth-child(2){animation-delay:.05s}
.hub-stats>*:nth-child(3){animation-delay:.08s}
.hub-stats>*:nth-child(4){animation-delay:.11s}
.hub-stats>*:nth-child(5){animation-delay:.14s}
.hub-stats>*:nth-child(6){animation-delay:.17s}
.hub-stats>*:nth-child(7){animation-delay:.20s}
.hub-stats>*:nth-child(8){animation-delay:.23s}

/* ===== 13. Tablet (tot 1200px) ========================================= */
@media (max-width:1200px){
  .hub-stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .hub-stat-value{font-size:26px}
}

/* ===== 14. Tablet en kleiner (tot 992px) =============================== */
@media (max-width:992px){
  :root{--content-pad:18px}
  .hub-content{padding:20px var(--content-pad) 56px}
  .hub-topbar{padding:0 var(--content-pad)}
  .hub-sidebar{width:290px;flex-basis:290px}
  /* De lade krijgt lucht onderaan zodat de laatste items bereikbaar blijven */
  .hub-nav{padding-bottom:22px}
  .hub-nav-item{padding:12px}
  .hub-nav-subitem{padding-top:10px;padding-bottom:10px}
  .hub-nav-overlay{background:rgba(6,7,10,.55);backdrop-filter:blur(3px)}
  .hub-pagehead{align-items:stretch;padding-bottom:16px;margin-bottom:18px}
  .hub-pagehead-actions{gap:8px}
  .hub-dash-grid{gap:16px}
  .hub-stats{grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px}
  .hub-stat{min-height:96px;padding:15px 16px}
  .hub-stat-value{font-size:24px;padding-right:42px}
  .hub-stat .hub-stat-ico2{width:34px;height:34px;font-size:13.5px;border-radius:11px;top:13px;right:13px}
  .hub-stat-label{font-size:11.5px}
  .hub-barchart{padding:18px 12px 10px;gap:5px}
  .hub-barchart::before{left:12px;right:12px;top:18px;height:140px}
  .hub-bar-track{height:140px}
}

/* ===== 15. Telefoon (tot 768px) ======================================== */
@media (max-width:768px){
  /* Twee kolommen: acht tegels onder elkaar is te veel scrollen */
  .hub-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hub-stat{min-height:88px;padding:13px 14px;border-radius:16px}
  .hub-stat-value{font-size:21px;padding-right:0}
  .hub-stat-label{font-size:11px;margin-top:4px;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .hub-stat .hub-stat-ico2{
    position:static;width:30px;height:30px;font-size:12.5px;
    border-radius:9px;margin-bottom:9px;display:grid;
  }
  .hub-stat::before{inset:auto -40% -70% auto;width:130px;height:130px}

  /* Rijkaarten: kop links, waarden rechts, actieknoppen als volle rij */
  .hub-table tr{border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm)}
  .hub-table td{padding:7px 0;font-size:13px}
  .hub-table td::before{font-size:12px;color:var(--muted-2);font-weight:600}
  .hub-table td.hub-cell-head{padding-bottom:11px}
  .hub-table td.hub-actions{opacity:1;padding-top:12px}
  .hub-table td.hub-actions .hub-iconbtn{width:38px;height:38px;border-radius:11px}

  .hub-panel-head,.hub-tablecard-head{padding:0 2px 12px}
  .hub-panel-body{padding:0}
  .hub-list-item{padding:12px 12px;border:1px solid var(--border);background:var(--bg);border-radius:14px;margin-bottom:8px;box-shadow:var(--shadow-xs)}
  .hub-list-item:hover{background:var(--bg)}
  .hub-filterbar{padding:12px;border-radius:16px}
}

/* ===== 16. Kleine telefoon (tot 560px) ================================= */
@media (max-width:560px){
  :root{--topbar-h:60px;--content-pad:14px}
  .hub-content{padding:16px var(--content-pad) 48px}
  .hub-pagehead h1{font-size:21px}
  .hub-pagehead-sub{font-size:13px}
  .hub-pagehead-eyebrow{font-size:10px;padding:2px 9px}
  /* Knoppen in de paginakop: gelijk verdeeld, volle breedte, prettig aan te tikken */
  .hub-pagehead-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .hub-pagehead-actions>*{width:100%;justify-content:center;min-height:42px}
  .hub-pagehead-actions>.hub-btn-primary,
  .hub-pagehead-actions>.hub-btn-accent{grid-column:1 / -1}
  .hub-pagehead-actions .hub-live{
    justify-content:center;border:1px solid var(--border);border-radius:11px;background:var(--bg);
  }
  .hub-topbar{gap:8px}
  .hub-navtoggle,.hub-btn-icon{width:40px;height:40px}
  .hub-avatar{width:34px;height:34px;border-radius:10px}
  .hub-barchart{padding:14px 8px 8px;gap:3px}
  .hub-barchart::before{left:8px;right:8px;top:14px;height:118px}
  .hub-bar-track{height:118px}
  .hub-bar-lbl{font-size:9px;letter-spacing:.02em}
  .hub-tabs{margin-left:calc(var(--content-pad) * -1);margin-right:calc(var(--content-pad) * -1);padding:0 var(--content-pad)}
  .hub-btn{min-height:40px}
  .hub-empty{padding:38px 18px}
  .hub-empty i{width:52px;height:52px;font-size:21px}
}

/* ===== 17. Toegankelijkheid ============================================ */
:focus-visible{outline:none}
a:focus-visible,button:focus-visible,.hub-btn:focus-visible,.hub-card:focus-visible,.hub-stat:focus-visible{
  box-shadow:var(--ring);border-radius:11px;
}
@media (prefers-reduced-motion:reduce){
  .hub-content,.hub-stats>*{animation:none}
  .hub-stat:hover,.hub-card:hover,.hub-btn:hover{transform:none}
}

/* ===== 18. Filterbalk als raster ======================================= */
/* Losse velden naast elkaar zakken op smalle schermen in elkaar. Als raster
   houden ze gelijke breedte en blijft de balk rustig. */
@media (max-width:1100px){
  .hub-filterbar{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    align-items:center;
  }
  .hub-filterbar .hub-search{grid-column:1 / -1;min-width:0}
  .hub-filterbar .hub-search input,
  .hub-filterbar .hub-select,
  .hub-filterbar .hub-input{width:100%;max-width:none}
  .hub-filterbar .hub-btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  .hub-filterbar{grid-template-columns:1fr 1fr}
  .hub-filterbar>.hub-btn{grid-column:1 / -1}
}

/* ===== 19. Tablet: tabelrijen als kaarten in twee kolommen ============= */
/* Tussen 769 en 992px propt een brede beheertabel de kolommen dicht (namen
   breken over vijf regels). Dezelfde kaartweergave als op telefoon, maar dan
   twee naast elkaar zodat de breedte benut blijft. */
@media (min-width:769px) and (max-width:992px){
  .hub-tablecard,.hub-panel:has(>.hub-table){border:none;background:transparent;overflow:visible;box-shadow:none}
  .hub-tablecard-head,.hub-panel:has(>.hub-table) .hub-panel-head{padding:0 2px 12px;border-bottom:none}
  .hub-panel:has(>.hub-table) .hub-panel-body{padding:0}
  .hub-table{display:block;overflow:visible;white-space:normal;border:none;background:transparent}
  .hub-table thead{display:none}
  .hub-table tbody{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .hub-table tr{
    display:block;background:var(--bg);border:1px solid var(--border);border-radius:16px;
    padding:15px 17px;margin:0;box-shadow:var(--shadow-sm);
    transition:box-shadow var(--t),border-color var(--t);
  }
  .hub-table tbody tr:hover{background:var(--bg);border-color:var(--border-strong);box-shadow:var(--shadow-md)}
  .hub-table td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:6px 0;border:none !important;text-align:right;white-space:normal;min-height:0;font-size:13px;
  }
  .hub-table td::before{
    content:attr(data-label);color:var(--muted-2);font-weight:600;font-size:12px;
    text-transform:none;letter-spacing:0;text-align:left;flex:0 0 auto;
  }
  .hub-table td.hub-selcell,.hub-table th.hub-selcell{display:none}
  .hub-table td.hub-cell-head{
    padding:0 0 11px;margin-bottom:6px;text-align:left;
    border-bottom:1px solid var(--border) !important;
  }
  .hub-table td.hub-cell-head::before{display:none}
  .hub-table td.hub-cell-head .hub-cellname{width:100%}
  .hub-table td.hub-actions{
    padding:11px 0 0;margin-top:6px;opacity:1;
    border-top:1px solid var(--border) !important;justify-content:flex-end;flex-wrap:wrap;gap:8px;
  }
  .hub-table td.hub-actions::before{display:none}
  .hub-table tr[data-empty],.hub-table tr.hub-noresult{
    grid-column:1 / -1;border:none;background:transparent;box-shadow:none;padding:0;
  }
  .hub-table tr[data-empty] td,.hub-table tr.hub-noresult td{
    display:block;text-align:center;border:none;padding:30px 16px;
  }
  .hub-table tr[data-empty] td::before,.hub-table tr.hub-noresult td::before{display:none}
  .hub-pager{padding:14px 2px;grid-column:1 / -1}
}

/* ===== 20. Rijkaart: kop en waarden uitlijnen ========================== */
@media (max-width:992px){
  .hub-table td.hub-cell-head .hub-cellname strong,
  .hub-table td.hub-cell-head .hub-link-strong{font-size:14.5px;line-height:1.3}
  .hub-table td>*{min-width:0}
  .hub-table td .hub-badge,.hub-table td .hub-pill{flex:0 0 auto}
  .hub-pager-info{width:100%;text-align:center}
  .hub-pager{justify-content:center}
  .hub-pager-nav{margin:0 auto}
}

/* ===== 21. Zijpaneel-lijsten: tekst netjes afkappen =================== */
.hub-list-title,.hub-list-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-list-main{overflow:hidden}
@media (max-width:560px){
  .hub-list-title{white-space:normal}
}

/* ===== 22. Brede tabellen op desktop ================================== */
/* Een beheertabel met acht kolommen liep buiten de kaart of perste namen over
   vier regels. Binnen de kaart horizontaal schuiven houdt de rijen op een regel. */
@media (min-width:993px){
  .hub-tablecard{overflow-x:auto}
  .hub-tablecard>.hub-table{min-width:900px}
  .hub-tablecard>.hub-table td{white-space:nowrap}
  /* Deze twee mogen wel afbreken: daar staat de langste tekst in */
  .hub-tablecard>.hub-table td.hub-cell-head,
  .hub-tablecard>.hub-table td[data-label="Omschrijving"],
  .hub-tablecard>.hub-table td[data-label="Adres"]{white-space:normal}
  .hub-tablecard>.hub-table td .hub-cellname{max-width:340px}
  .hub-tablecard>.hub-table td .hub-cellname .hub-list-sub,
  .hub-tablecard>.hub-table td .hub-cellname small,
  .hub-tablecard>.hub-table td .hub-muted{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  }
}

/* ===== 23. Bezig-staat en skeletons =================================== */
.hub-btn.is-loading{position:relative;color:transparent !important}
.hub-btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:inherit;
  animation:hubSpin .6s linear infinite;
}
.hub-btn-primary.is-loading::after,.hub-btn-accent.is-loading::after{border-color:#fff;border-top-color:transparent}
@keyframes hubSpin{to{transform:rotate(360deg)}}
.hub-skeleton{
  border-radius:8px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%);
  background-size:400% 100%;animation:hubShimmer 1.4s ease infinite;color:transparent !important;
}
@keyframes hubShimmer{from{background-position:100% 0}to{background-position:0 0}}
[data-live] .is-refreshing{opacity:.55;transition:opacity var(--t)}

/* ===== 24. Live-indicator ============================================= */
.hub-live{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ok-soft);color:var(--ok-ink);font-size:12px;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.18);
}
.hub-live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(22,163,74,.55);animation:hubPulse 2.2s ease-out infinite;
}
@keyframes hubPulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}

/* ===== 25. Mode-schakelaar (live/sandbox) ============================= */
.hub-modeswitch{
  background:var(--surface);border-radius:var(--r-pill);padding:3px;
  box-shadow:inset 0 0 0 1px var(--border);
}
.hub-modeswitch a,.hub-modeswitch button{border-radius:var(--r-pill);font-size:12px;font-weight:700;padding:5px 13px}
.hub-modeswitch .is-active{box-shadow:var(--shadow-xs)}

/* ===== 26. Inlogscherm ================================================ */
.hub-guest{
  background-color:#08090c;
  background-image:
    radial-gradient(900px 520px at 18% 8%, rgba(37,99,235,.26), transparent 62%),
    radial-gradient(720px 520px at 84% 88%, rgba(124,58,237,.20), transparent 62%),
    radial-gradient(600px 400px at 60% 40%, rgba(255,255,255,.05), transparent 60%);
}
.hub-auth-card{
  border-radius:var(--r-lg);padding:34px 32px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px var(--border);
}
.hub-auth-brand .hub-brand-mark{
  background:linear-gradient(140deg,#26262b,#0a0a0b);color:#fff;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
}
.hub-auth-card .hub-btn{width:100%;min-height:44px}

/* ===== 27. Rasterkolommen mogen krimpen =============================== */
/* Zonder minmax(0,...) rekt een lange url of naam de kolom op en schuift het
   hele scherm horizontaal weg. */
.hub-dash-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1100px){ .hub-dash-grid{grid-template-columns:minmax(0,1fr)} }
.hub-edit-grid{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:1000px){ .hub-edit-grid{grid-template-columns:minmax(0,1fr)} }
.hub-dash-grid>*,.hub-edit-grid>*,.hub-detail-grid>*,.hub-settings-grid>*{min-width:0}

/* ===== 28. Kleine afwerking =========================================== */
/* Selectievakjes, radio's en voortgangsbalken in de accentkleur */
input[type=checkbox],input[type=radio],progress,.hub-range{accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;cursor:pointer}

/* Scrollbalk in de zijbalk mag niet opvallen */
.hub-nav::-webkit-scrollbar{width:8px}
.hub-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);background-clip:content-box}
.hub-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20);background-clip:content-box}
.hub-sidebar{scrollbar-color:rgba(255,255,255,.14) transparent}

/* Invoervelden iets royaler: minder gedrongen op tablet en telefoon */
.hub-input,.hub-select,.form-control,.form-select{min-height:40px}
.hub-field .hub-input,.hub-field .hub-select{width:100%}
.hub-input:focus,.hub-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.hub-field-hint{font-size:11.5px;color:var(--muted-2);margin-top:5px}

/* Tekstselectie en markeringen in de huisstijl */
::selection{background:var(--accent-soft-2);color:var(--ink)}
mark,.hub-mark{background:var(--warn-soft);color:var(--warn-ink);border-radius:4px;padding:0 3px}

/* Afbeeldingen in lijsten krijgen dezelfde ronding als de rest */
.hub-thumb,.hub-table img,.hub-cellname img{border-radius:10px}

/* Kaart in kaart (detailpagina's) net iets rustiger */
.hub-kv{padding:10px 0;font-size:13px}
.hub-kv-label{font-size:12.5px}

/* ===== 29. Panelen zonder tabel blijven ook op telefoon een kaart ====== */
/* hub.css maakt op smalle schermen alle panelen vlak, omdat tabelrijen daar
   kaarten worden. Een grafiek of lijstblok leest juist prettiger als kaart. */
@media (max-width:768px){
  .hub-panel:not(:has(>.hub-table)){
    background:var(--bg);border:1px solid var(--border);border-radius:16px;
    box-shadow:var(--shadow-sm);overflow:hidden;
  }
  .hub-panel:not(:has(>.hub-table)) .hub-panel-head{
    padding:14px 15px;border-bottom:1px solid var(--border);
  }
  .hub-panel:not(:has(>.hub-table)) .hub-panel-body{padding:8px}
  .hub-panel:not(:has(>.hub-table)) .hub-list-item{
    border:none;background:transparent;box-shadow:none;margin-bottom:0;border-radius:10px;
  }
}

/* ===== 30. Kolombreedtes en tegelbreedtes ============================= */
/* De naamkolom is de belangrijkste: geef hem ruimte, anders breekt een
   productnaam over drie regels terwijl er rechts ruimte over is. */
@media (min-width:993px){
  .hub-tablecard>.hub-table td.hub-cell-head,
  .hub-tablecard>.hub-table thead th:first-child:not(.hub-selcell),
  .hub-tablecard>.hub-table thead th:nth-child(2){min-width:250px}
  .hub-tablecard>.hub-table td .hub-cellname{max-width:none}
}
/* auto-fill i.p.v. auto-fit: twee tegels worden geen halve schermbreedte meer,
   maar houden hun natuurlijke maat en lijnen links uit. */
.hub-stats{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
@media (max-width:1200px){ .hub-stats{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} }
@media (max-width:992px){ .hub-stats{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))} }
@media (max-width:768px){ .hub-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ==========================================================================
   31. TOOLTIPS
   Elk element met een title krijgt via hub-ui.js een data-tip. De tooltip zelf
   is EEN los element (.hub-tip) dat hub-ui.js in de <body> hangt en met
   position:fixed neerzet. Reden: als ::after op het element zelf werd hij
   afgesneden door elke kaart, tabel of paneel met overflow:hidden.
   Verschijnt ook bij toetsenbordfocus.
   ========================================================================== */
.hub-tip{
  position:fixed;top:0;left:0;z-index:2000;
  max-width:300px;padding:6px 10px;border-radius:9px;
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--font);font-size:11.5px;font-weight:600;line-height:1.35;letter-spacing:.01em;
  text-align:left;text-transform:none;white-space:normal;overflow-wrap:anywhere;
  box-shadow:0 8px 24px -8px rgba(16,24,40,.55);
  opacity:0;pointer-events:none;
  transform:translateY(4px) scale(.97);transform-origin:50% 100%;
  transition:opacity .14s var(--t-fast),transform .14s var(--t-fast);
}
.hub-tip.is-bottom{transform:translateY(-4px) scale(.97);transform-origin:50% 0}
.hub-tip.is-open{opacity:1;transform:translateY(0) scale(1)}
/* Pijltje wijst naar het element; hub-ui.js zet --tip-ax op de juiste plek. */
.hub-tip::after{
  content:"";position:absolute;top:100%;left:var(--tip-ax,50%);margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--brand);
}
.hub-tip.is-bottom::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--brand)}
/* Op een telefoon zijn er geen hovers en is de ruimte krap: geen tooltips. */
@media (hover:none),(max-width:768px){
  .hub-tip{display:none !important}
}

/* ==========================================================================
   32. KNOPPEN: rustiger in rust, duidelijk bij aanwijzen
   ========================================================================== */
.hub-btn{font-weight:600;letter-spacing:.005em}
.hub-btn i{opacity:.85}
.hub-btn:hover i{opacity:1}

/* Randknop pakt de accentkleur bij hover, zoals in de rest van de huisstijl */
.hub-btn-ghost{color:var(--ink);background:var(--bg);border-color:var(--border)}
.hub-btn-ghost i{color:var(--muted)}
.hub-btn-ghost:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.hub-btn-ghost:hover i{color:var(--accent)}
.hub-btn-soft{background:var(--surface);color:var(--ink)}
.hub-btn-soft:hover{background:var(--surface-2)}
.hub-btn-danger{box-shadow:0 1px 2px rgba(220,38,38,.24),0 8px 18px -10px rgba(220,38,38,.8)}
.hub-btn-danger:hover{transform:translateY(-1px)}

/* Icoonknop: even hoog als de rest, met accent bij aanwijzen */
.hub-iconbtn{border-radius:10px;color:var(--muted);background:var(--bg)}
.hub-iconbtn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.hub-iconbtn:active{transform:translateY(1px)}
.hub-iconbtn-danger:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.hub-table td.hub-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}

/* Knoppen in de paginakop: allemaal even hoog, duidelijke rand, rustige kleur */
.hub-pagehead-actions>.hub-btn{min-height:38px}
.hub-pagehead-actions .hub-btn-ghost{
  background:var(--bg);border-color:var(--border);color:var(--ink);box-shadow:var(--shadow-xs);
}
.hub-pagehead-actions .hub-btn-ghost i{color:var(--muted)}
.hub-pagehead-actions .hub-btn-ghost:hover{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);
}
.hub-pagehead-actions .hub-btn-ghost:hover i{color:var(--accent)}
/* Een knop zonder tekst wordt vierkant (klasse gezet door hub-ui.js) */
.hub-btn.is-iconly{width:38px;padding:0;flex:0 0 auto}
.hub-btn.is-iconly.hub-btn-sm{width:32px;height:32px}
.hub-btn.is-iconly i{font-size:14px}
.hub-danger-ico{color:var(--danger)}
.hub-pagehead-actions .hub-btn-ghost:has(.hub-danger-ico):hover{
  background:var(--danger-soft);border-color:var(--danger);
}
.hub-pagehead-actions .hub-btn-ghost:has(.hub-danger-ico):hover i{color:var(--danger)}

/* ==========================================================================
   33. TABS
   ========================================================================== */
.hub-tabs{gap:2px;padding-bottom:1px}
.hub-tab{
  padding:11px 14px;border-radius:10px 10px 0 0;color:var(--muted);
  border-bottom:2px solid transparent;
}
.hub-tab i{color:var(--muted-2);transition:color var(--t-fast)}
.hub-tab:hover{background:var(--surface);color:var(--ink)}
.hub-tab:hover i{color:var(--muted)}
.hub-tab.is-active{
  color:var(--accent-2);border-bottom-color:var(--accent);
  background:linear-gradient(180deg,transparent,var(--accent-soft));
}
.hub-tab.is-active i{color:var(--accent)}
/* Teller in een tab */
.hub-tab .hub-count,.hub-tab>span:not(:first-child):not(:last-child){
  min-width:20px;height:19px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:700;
  display:inline-grid;place-items:center;box-shadow:none;
}
.hub-tab.is-active .hub-count{background:var(--accent-soft-2);color:var(--accent-2)}

/* Pil-tabs (subtabs): actief in de merkkleur, net als de hoofdknop */
.hub-subtab{
  padding:7px 14px;border-color:var(--border);background:var(--bg);color:var(--muted);
  box-shadow:var(--shadow-xs);
}
.hub-subtab i{color:var(--muted-2)}
.hub-subtab:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.hub-subtab:hover i{color:var(--accent)}
.hub-subtab.is-active{
  background:linear-gradient(180deg,#26262b,#0a0a0b);border-color:transparent;color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.2),0 8px 16px -10px rgba(16,24,40,.75);
}
.hub-subtab.is-active i{color:rgba(255,255,255,.7)}
.hub-subtab.is-active span{background:rgba(255,255,255,.18);color:#fff}
[data-bs-theme="dark"] .hub-subtab.is-active{background:linear-gradient(180deg,#f4f4f5,#d4d4d8);color:#0b0b0d}
[data-bs-theme="dark"] .hub-subtab.is-active i{color:rgba(0,0,0,.55)}

/* Segmented control (hub-seg) in dezelfde taal */
.hub-seg{background:var(--surface);border-radius:var(--r-pill);padding:3px;box-shadow:inset 0 0 0 1px var(--border)}
.hub-seg button,.hub-seg a{border-radius:var(--r-pill);font-size:12.5px;font-weight:600;padding:6px 14px}
.hub-seg .is-active{background:var(--bg);box-shadow:var(--shadow-xs);color:var(--ink)}

/* ==========================================================================
   34. MODALS
   Kop en voet blijven staan, alleen het formulier scrollt. Op een lang
   formulier stond de opslaan-knop anders ergens onderaan de pagina.
   ========================================================================== */
.hub-modal-backdrop{padding:40px 20px;background:rgba(9,10,12,.55)}
.hub-modal{
  display:flex;flex-direction:column;
  max-height:calc(100dvh - 80px);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(16,24,40,.55),0 0 0 1px var(--border);
}
/* De kop/body/voet zitten meestal in een form: die moet de kolom doorgeven,
   anders puilt een lang formulier onder de rand van het venster uit. */
.hub-modal>form,.hub-modal>div:only-child{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;
  border-radius:inherit;
}
.hub-modal-head{
  padding:18px 22px;flex:0 0 auto;
  background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.hub-modal-head h3{font-size:16.5px;letter-spacing:-.015em}
.hub-modal-close{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg);font-size:16px;
}
.hub-modal-close:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.hub-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px}
.hub-modal-foot{
  flex:0 0 auto;padding:14px 22px;background:var(--surface);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.hub-modal-foot .hub-btn{min-height:38px}
/* Het formulier ademt iets meer en de hulpteksten zijn duidelijk ondergeschikt */
.hub-modal-body .hub-field{margin-bottom:15px}
.hub-modal-body .hub-field label{color:var(--muted);font-size:12px}
.hub-modal-body small,.hub-modal-body .hub-hint{
  display:block;font-size:11.5px;color:var(--muted-2);margin-top:5px;line-height:1.45;
}
/* Op een telefoon is een venster dat van onderen komt prettiger te bedienen */
@media (max-width:560px){
  .hub-modal-backdrop{padding:0;align-items:flex-end}
  .hub-modal{
    max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;border-bottom:none;
    animation:hubSheetIn .24s cubic-bezier(.2,.7,.3,1);
  }
  .hub-modal-head{border-radius:20px 20px 0 0;padding:16px 18px}
  /* Greepje bovenaan, zoals bij een systeemvenster */
  .hub-modal-head::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--border-strong);
  }
  .hub-modal-head{position:relative;padding-top:20px}
  .hub-modal-body{padding:18px}
  .hub-modal-foot{padding:12px 18px 16px;border-radius:0}
  .hub-modal-foot .hub-btn{flex:1;justify-content:center;min-height:44px}
}
@keyframes hubSheetIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ==========================================================================
   35. MELDINGEN, LEGE LIJSTEN EN TOASTS
   ========================================================================== */
.hub-alert,.hub-flash{
  border-radius:var(--r2);padding:13px 16px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-xs);
}
.hub-sandbox-banner{border-radius:var(--r2);padding:12px 16px}
.hub-toast{border-radius:14px;padding:13px 16px;font-size:13.5px;font-weight:600}

/* Lege lijst: een tekstregel in een tabel oogt als een fout, dit als een staat */
.hub-table tr[data-empty] td,.hub-noresult td{padding:44px 20px;color:var(--muted)}
.hub-table tr[data-empty] td i,.hub-noresult td i{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;
  border-radius:16px;background:var(--surface);color:var(--muted-2);font-size:20px;opacity:1;
}

/* ==========================================================================
   36. FORMULIEREN
   ========================================================================== */
.hub-field label{display:flex;align-items:center;gap:6px}
.hub-req{color:var(--danger);font-weight:700}
.hub-row,.hub-row-3{gap:16px}
/* background-color, niet background: de shorthand wist het pijltje dat een
   select als achtergrondplaatje draagt. */
.hub-input,.hub-select,.form-control,.form-select{
  padding:9px 12px;font-size:13.5px;background-color:var(--bg);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast);
}
.hub-input:hover,.hub-select:hover{border-color:var(--border-strong)}
.hub-input::placeholder{color:var(--muted-2)}
textarea.hub-input{min-height:96px;line-height:1.6}
/* Een veldgroep met een knop ernaast (postcode ophalen, IBAN controleren) */
.hub-inputgroup{display:flex;gap:8px;align-items:center}
.hub-inputgroup .hub-input{flex:1;min-width:0}

/* ==========================================================================
   37. MOBIEL: laatste hobbels
   ========================================================================== */
/* iOS Safari zoomt het hele scherm in zodra je een veld aanraakt met een
   lettergrootte onder 16px, en zoomt daarna niet vanzelf terug. Op
   telefoonformaat krijgen invoervelden daarom 16px. */
@media (max-width:768px){
  .hub-input,.hub-select,.hub-textarea,.form-control,.form-select,
  .hub-search input,.hub-ie-input,.hub-ie-select,.hub-cmdk-input input,
  input[type=text],input[type=number],input[type=email],input[type=password],
  input[type=search],input[type=tel],input[type=url],input[type=date],
  input[type=time],input[type=datetime-local],input[type=month],
  textarea,select{font-size:16px}
  .hub-input.sm,.hub-select.sm{font-size:16px;padding:8px 10px}
  /* Een veld met een knop ernaast mag niet buiten de kaart lopen */
  .hub-inputgroup{flex-wrap:wrap}
  .hub-inputgroup .hub-input{min-width:0;flex:1 1 160px}
  /* Drie velden naast elkaar is op een telefoon een kolom van niets */
  .hub-row-3{grid-template-columns:1fr}
}

/* Een raster met een vaste minimumkolom loopt buiten beeld zodra het scherm
   smaller is dan die minimumwaarde. min() houdt de kolom binnen de kaart. */
.hub-detail-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.hub-settings-grid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

/* Wrapper om een brede tabel die per stuk mag schuiven. Op telefoon wordt de
   tabel toch een kaartenlijst, dan is schuiven niet meer nodig. */
.hub-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:768px){ .hub-table-wrap{overflow-x:visible} }

/* Een tabel die op telefoon GEEN kaartenlijst mag worden - denk aan een
   vergelijking met rowspan, waar de kaartweergave de samengevoegde cellen uit
   elkaar trekt. Die blijft een tabel en schuift horizontaal in zijn wrapper. */
@media (max-width:992px){
  .hub-table-wrap.is-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
  .hub-table-wrap.is-scroll>.hub-table{display:table;min-width:660px;border:none;background:var(--bg);margin:0}
  .hub-table-wrap.is-scroll>.hub-table thead{display:table-header-group}
  .hub-table-wrap.is-scroll>.hub-table tbody{display:table-row-group}
  .hub-table-wrap.is-scroll>.hub-table tr{
    display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none;
  }
  .hub-table-wrap.is-scroll>.hub-table td{
    display:table-cell;text-align:left;padding:9px 11px;font-size:12.5px;
    border-top:1px solid var(--border) !important;
  }
  .hub-table-wrap.is-scroll>.hub-table td::before{display:none}
}

/* Factuur- en contractdocument: staat vast op A4-breedte, dus op telefoon
   dichter op elkaar zodat de regels binnen het scherm blijven. */
@media (max-width:560px){
  .inv-head{gap:16px}
  .inv-meta{text-align:left}
  .inv-meta-tbl{margin-left:0}
  .inv-title{font-size:18px}
  .inv-lines{font-size:12px}
  .inv-lines th,.inv-lines td{padding:7px 4px}
  .inv-totals{margin-bottom:14px}
  .inv-totals table{min-width:0;width:100%}
  .hub-invoice{padding:18px 14px}
}

/* Een cel die over de hele rij loopt (uitklap met details, een nestje tabel)
   is geen label-waarde-paar: die krijgt de volle breedte in plaats van de
   kaartopmaak met het label links. */
@media (max-width:992px){
  .hub-table td[colspan]{display:block;text-align:left;padding:8px 0}
  .hub-table td[colspan]::before{display:none}
}

/* Lange, ononderbroken tekst (API-sleutel, url, bestandsnaam) mag de kaart
   niet oprekken; op telefoon is daar geen ruimte voor. */
@media (max-width:768px){
  .hub-table td,.hub-list-sub,.hub-card,.hub-panel-body{overflow-wrap:anywhere}
  .hub-token code{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
}

/* De pagina staat op "viewport-fit=cover" (nodig voor de PWA), dus in liggende
   stand op een iPhone valt de inhoud anders achter de notch en onder de
   home-balk. Alleen de kant waar het misgaat krijgt extra ruimte. */
@supports (padding:max(0px,env(safe-area-inset-left))){
  @media (max-width:992px){
    .hub-topbar{
      padding-left:max(var(--content-pad),env(safe-area-inset-left));
      padding-right:max(var(--content-pad),env(safe-area-inset-right));
    }
    .hub-content{
      padding-left:max(var(--content-pad),env(safe-area-inset-left));
      padding-right:max(var(--content-pad),env(safe-area-inset-right));
      padding-bottom:calc(56px + env(safe-area-inset-bottom));
    }
    .hub-sidebar{padding-left:env(safe-area-inset-left)}
    .hub-modal-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    .hub-toasts{right:max(12px,env(safe-area-inset-right))}
  }
}

/* Kleine telefoon: het inlogkaartje mag niet tegen de schermranden plakken */
@media (max-width:400px){
  .hub-guest{padding:14px}
  .hub-auth-card{padding:24px 18px}
}

/* ==========================================================================
   38. AANRAAKVLAKKEN EN MATEN  (ontwerpcheck 8 sep 2026)
   Gemeten op 390 / 768 / 1440. Norm: 44x44 tot en met 768px, 36px daarboven,
   minstens 8px tussen twee vlakken. Alles hieronder zat daaronder.
   ========================================================================== */

/* --- 38.1 Het pijltje van een keuzelijst ---------------------------------
   Sectie 36 zette `padding:9px 12px` als shorthand en wiste daarmee de
   `padding-right:34px` uit hub.css. Gevolg: in ELKE select liep de tekst
   onder het pijltje door ("Actief + uitgeschake|v"). */
.hub-select,select.form-select{padding-right:34px;text-overflow:ellipsis}

/* --- 38.2 Icoonknoppen ---------------------------------------------------
   Stonden op 34x34 op desktop (norm 36, en 40 voor een knop zonder woord) en
   38x38 op telefoon (norm 44). De maten zelf staan bij elkaar in 42.1. */
.hub-cat-toggle{margin-right:2px}
.hub-code-copy{top:8px;right:8px}

/* Een knop die alleen uit een teken of icoontje bestaat en geen eigen maat
   heeft: het raakvlak groeit, het uiterlijk blijft. */
.hub-payload-toggle{
  display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:9px;vertical-align:middle;margin-left:4px;
}
.hub-payload-toggle:hover{background:var(--surface)}

/* --- 38.3 Zijbalk: subitem haalde 33,4px --------------------------------- */
@media (min-width:993px){
  .hub-nav-subitem{min-height:36px}
  .hub-crumbs a,.hub-crumbs .is-current{display:inline-flex;align-items:center;min-height:36px}
}

/* --- 38.4 Telefoon en tablet: alles naar 44px ---------------------------- */
@media (max-width:768px){
  .hub-iconbtn,
  .hub-table td.hub-actions .hub-iconbtn,
  .hub-btn.is-iconly,.hub-btn-icon,
  .hub-navtoggle,.hub-searchbtn,.hub-modal-close,
  .hub-pager-btn,.hub-cat-toggle,.hub-code-copy,
  .hub-payload-toggle{
    width:44px;height:44px;min-width:44px;
  }
  .hub-btn.is-iconly.hub-btn-sm{width:44px;height:44px}
  .hub-btn,.hub-btn-sm,.hub-subtab,.hub-seg a,.hub-seg button{min-height:44px}
  .hub-tab{min-height:44px}
  .hub-avatar{width:38px;height:38px}
  .hub-userbtn{min-height:44px}
  /* Ruimte tussen twee raakvlakken: 6px, 4px en 2px gemeten */
  .hub-table td.hub-actions{gap:8px}
  .hub-pager-nav{gap:8px}
  .hub-subtabs{gap:8px}
  .hub-tabs{gap:8px}
  .hub-usage-chips{gap:8px}
  .hub-actions .hub-btn,.hub-actions .hub-iconbtn{margin-left:0}
}

/* --- 38.5 Kleine losse raakvlakken --------------------------------------
   Een chip of naamlink is een aanwijsbaar doel, geen lopende tekst. */
.hub-usage-chip{min-height:36px;padding:6px 12px}
.hub-dupname{padding:5px 0;min-height:36px;display:flex;align-items:center}
.media-chip-x{
  display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:8px;padding:0;font-size:16px;
}
.media-chip-x:hover{background:var(--danger-soft)}
@media (max-width:768px){
  .hub-usage-chip{min-height:44px}
  .hub-dupname{min-height:44px}
  .media-chip-x{width:44px;height:44px}
}

/* --- 38.6 Knop met tekst: minstens 96px --------------------------------
   Een knop van 53px ("Toon", "Check") leest als een half knopje naast een
   volwaardige buur. Icoonknoppen houden hun vierkante maat. */
.hub-btn{min-width:96px;max-width:100%}
.hub-btn.is-iconly,.hub-btn-icon,.hub-btn.hub-btn-block{min-width:0}
.hub-btn-block{width:100%}

/* ==========================================================================
   39. KOLOMMEN EN GROEPEN
   ========================================================================== */

/* --- 39.1 Knoppen in de paginakop ---------------------------------------
   Het raster van 2 kolommen liet bij een oneven aantal knoppen een gat vallen:
   op /catalog/products stond "Moneybird" alleen op zijn regel met een lege cel
   ernaast (gemeten 177px naast 362px). Als flexrij groeit de laatste knop
   vanzelf dicht en blijft de hoofdactie een eigen volle regel. */
@media (max-width:560px){
  .hub-pagehead-actions{
    display:flex;flex-wrap:wrap;gap:8px;width:100%;
  }
  .hub-pagehead-actions>*{flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px);justify-content:center;min-height:44px}
  .hub-pagehead-actions>.hub-btn-primary,
  .hub-pagehead-actions>.hub-btn-accent,
  .hub-pagehead-actions>.hub-live{flex-basis:100%;min-width:100%}
  /* Een knop zonder woord blijft vierkant; zijn buurman met tekst vult de rest
     van de regel op. Anders staat er een naamloos vlak over de volle breedte,
     of blijft er een gat naast een blokje van 44px. */
  .hub-pagehead-actions>.hub-btn.is-iconly,
  .hub-pagehead-actions>.hub-btn-icon{flex:0 0 44px;min-width:44px;width:44px}
  .hub-pagehead-actions:has(>.hub-btn.is-iconly)>.hub-btn:not(.is-iconly):not(.hub-btn-icon){
    flex:1 1 120px;min-width:120px;
  }
  /* De hoofdactie deelt dan zijn regel met dat vierkante knopje in plaats van
     hem alleen achter te laten op een regel met een gat ernaast. */
  .hub-pagehead-actions:has(>.hub-btn.is-iconly)>.hub-btn-primary,
  .hub-pagehead-actions:has(>.hub-btn.is-iconly)>.hub-btn-accent{flex-basis:120px;min-width:120px}
}

/* --- 39.2 Een lege kolom naast zijn buurman -----------------------------
   Een .hub-row met een leeg veld ernaast (factuur/abonnement aanmaken) laat
   de eerste kolom halveren zonder reden. */
.hub-row>.hub-field:empty,.hub-row-3>.hub-field:empty{display:none}
.hub-row:has(>.hub-field:only-child),
.hub-row-3:has(>.hub-field:only-child){grid-template-columns:minmax(0,1fr)}

/* ==========================================================================
   40. RUIMTE
   ========================================================================== */

/* --- 40.1 Kop en wat eronder staat: minstens 12px -----------------------
   Gemeten: h1 -> ondertitel 8px, kaartkop -> tekst 6px, sectiekop -> tekst 3px. */
.hub-pagehead-sub{margin-top:12px}
.hub-card-title{margin-bottom:14px}
.hub-card-title+.hub-card-desc,.hub-card-title+p{margin-top:0}
.hub-docs-section h2{margin-bottom:12px}
.hub-docs-section h3{margin-bottom:12px}
@media (max-width:768px){ .media-actions{gap:8px} }

/* --- 40.2 Tekst tot de rand: minstens 14px ------------------------------ */
.hub-alert,.hub-flash,.hub-sandbox-banner{padding:14px 16px}
@media (max-width:768px){
  .hub-stat{padding:14px 16px}
  .hub-filterbar{padding:14px}
  /* is-pad betekent "dit blok wil echte ruimte"; sectie 29 zette hem terug
     naar 8px zodra het paneel geen tabel bevat. */
  .hub-panel:not(:has(>.hub-table)) .hub-panel-body.is-pad{padding:16px}
}

/* ==========================================================================
   41. SUMMERNOTE (productomschrijving, e-mailsjablonen)
   Een externe editor met een eigen lichte look: witte balk, grijze randen en
   zwarte tekst in een vak dat in het donkere thema zwart is (gemeten 1,18:1).
   De klassen blijven staan - het script hangt eraan - alleen de opmaak gaat
   mee met de tokens.
   ========================================================================== */
.note-editor.note-frame{
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg);overflow:hidden;
}
.note-editor.note-frame.codeview{background:var(--bg)}
.note-toolbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;
}
.note-btn-group{display:inline-flex;gap:4px;margin:0}
.note-btn{
  min-width:36px;height:36px;padding:0 9px;border-radius:9px;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.note-btn:hover,.note-btn:focus{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink)}
.note-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.note-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.note-editable{
  background:var(--bg) !important;color:var(--ink) !important;
  padding:14px 16px;line-height:1.6;
}
.note-editable *{color:inherit}
.note-editor .note-placeholder,.note-placeholder{color:var(--muted);padding:14px 16px}
.note-statusbar{background:var(--surface);border-top:1px solid var(--border)}
.note-statusbar .note-resizebar{border-top-color:var(--border)}
.note-codable{background:var(--surface);color:var(--ink);border:none;font-family:var(--font-mono);font-size:12.5px}
.note-dropdown-menu{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-md);color:var(--ink);
}
.note-dropdown-item,.note-dropdown-menu a{color:var(--ink)}
.note-dropdown-item:hover,.note-dropdown-menu a:hover{background:var(--surface)}
.note-modal .modal-content{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--r2)}
.note-modal .form-control{background:var(--bg);color:var(--ink);border-color:var(--border)}
@media (max-width:768px){
  .note-btn{min-width:44px;height:44px}
  .note-toolbar{gap:8px}
}

/* ==========================================================================
   42. TWEEDE RONDE: wat na sectie 38 nog onder de maat zat
   ========================================================================== */

/* --- 42.1 Icoonknop: vierkant en minstens 40px -------------------------- */
.hub-iconbtn,.hub-btn.is-iconly,.hub-btn-icon,
.hub-navtoggle,.hub-collapse-btn,.hub-searchbtn,
.hub-modal-close,.hub-pager-btn,.hub-cat-toggle,
.hub-code-copy,.hub-payload-toggle{
  width:40px;height:40px;min-width:40px;flex:0 0 auto;
}
.hub-btn.is-iconly.hub-btn-sm{width:40px;height:40px}
.hub-searchbtn{width:auto;min-width:240px}
@media (max-width:1200px){ .hub-searchbtn{width:40px;min-width:40px} }
.hub-pager-btn{width:auto;min-width:40px;padding:0 11px}

/* --- 42.2 Knop met tekst: minstens 36px hoog boven 768px ---------------- */
.hub-btn-sm,.hub-btn{min-height:38px}
.hub-btn-sm{min-height:36px}
.hub-subtab,.hub-seg a,.hub-seg button,.hub-modeswitch a,.hub-tab{min-height:36px}
.hub-modeswitch a{display:inline-flex;align-items:center}
.mb-desc-toggle{min-height:36px}

/* --- 42.3 Losse links die wel een doel zijn ----------------------------- */
.hub-back,.hub-crumbs a{display:inline-flex;align-items:center;min-height:36px}
/* .is-current is geen link: die houdt zijn afkapping met puntjes, want een
   inline-flex-doos kapt zijn eigen tekst niet af. */
.hub-crumbs .is-current{display:block}
.hub-back{margin-bottom:8px}
.media-chip{min-height:36px;padding-left:12px}
.media-chip a{display:inline-flex;align-items:center;min-height:36px}
.hub-varthumb,a.hub-pswp{min-width:40px;min-height:40px}

/* --- 42.4 Selectievakjes -------------------------------------------------
   16x16 is voor een muis krap en voor een vinger te klein. 18px is het
   maximum dat binnen een tabelcel past; de cel eromheen groter maken vraagt
   een label om het vakje heen (voorstel, geen ingreep). */
input[type=checkbox],input[type=radio]{width:18px;height:18px}
.hub-check input,.hub-checkitem input,.hub-cattree-check input{width:18px;height:18px}

/* --- 42.5 Overlay-knoppen op een miniatuur -------------------------------
   Bewuste uitzondering op de 44px-regel: twee knoppen van 44px passen niet in
   een tegel van 92px. Ze worden 36px op een apparaat zonder muis, en daar
   staan ze dan ook meteen aan, want de hover komt er nooit. */
.hub-imgcard-btn{width:32px;height:32px}
@media (hover:none){
  .hub-imgcard-tools{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
  .hub-imgcard-btn{width:36px;height:36px}
}

@media (max-width:768px){
  .hub-iconbtn,.hub-btn.is-iconly,.hub-btn-icon,
  .hub-navtoggle,.hub-collapse-btn,.hub-searchbtn,
  .hub-modal-close,.hub-pager-btn,.hub-cat-toggle,
  .hub-code-copy,.hub-payload-toggle,.media-chip-x{
    width:44px;height:44px;min-width:44px;
  }
  .hub-searchbtn{width:44px;min-width:44px}
  .hub-pager-btn{width:auto;min-width:44px}
  .hub-btn.is-iconly.hub-btn-sm{width:44px;height:44px}
  .hub-btn,.hub-btn-sm{min-height:44px}
  .hub-subtab,.hub-seg a,.hub-seg button,.hub-modeswitch a,.hub-tab{min-height:44px}
  .hub-back,.hub-crumbs a{min-height:44px}
  .media-chip,.media-chip a{min-height:44px}
  .hub-varthumb,a.hub-pswp{min-width:44px;min-height:44px}
  .mb-desc-toggle{min-height:44px}
}

/* --- 42.6 Cel met meer dan een waarde ------------------------------------
   In de kaartweergave is een cel een flexrij. Staan er losse elementen in
   (een reeks links, een rij pillen), dan wordt elk element een eigen flexitem
   en knijpen ze elkaar plat. Laten wrappen in plaats van knijpen. */
@media (max-width:992px){
  .hub-table td:not(.hub-cell-head):not(.hub-actions){flex-wrap:wrap;justify-content:flex-end}
  .hub-table td:not(.hub-cell-head):not(.hub-actions)::before{margin-right:auto}
}

/* --- 42.7 Knoppen in een tabelcel --------------------------------------
   Sectie 20 zet `min-width:0` op elk kind van een cel om overloop te stoppen.
   Dat won ook van de 96px-ondergrens van een knop, dus stond er in een rij
   een knopje van 87px. Knoppen zijn een uitzondering op die regel. */
.hub-table td>.hub-btn,.hub-table td .hub-actions>.hub-btn{min-width:96px;max-width:100%}
.hub-table td>.hub-btn.is-iconly,.hub-table td>.hub-btn-icon{min-width:40px}
@media (max-width:768px){
  .hub-table td>.hub-btn.is-iconly,.hub-table td>.hub-btn-icon{min-width:44px}
}

/* --- 42.8 Knoppen in kop en modalvoet ----------------------------------
   Sectie 32 en 34 zetten min-height:38px met een hogere gewichtsklasse dan de
   algemene regel, waardoor die knoppen op telefoon op 38px bleven staan. */
@media (max-width:768px){
  .hub-pagehead-actions>.hub-btn,
  .hub-modal-foot .hub-btn{min-height:44px}
}

/* --- 42.9 Losse doelen die nog onder de maat zaten ---------------------- */
.media-chip-x{width:40px;height:40px;min-width:40px;flex:0 0 auto}
a.hub-badge,a.hub-pill{min-height:36px;padding-top:0;padding-bottom:0}
.mb-est-chip{min-height:36px}
.hub-crumbs a{padding:0 2px}
/* Een naamlink in een tabelcel is het doel van die rij */
.hub-table .hub-link-strong,.hub-table .hub-cellname>a{
  display:inline-flex;align-items:center;min-height:36px;
}
@media (max-width:768px){
  a.hub-badge,a.hub-pill{min-height:44px}
  .mb-est-chip{min-height:44px}
  .hub-crumbs a{min-width:44px;justify-content:center;padding:0 4px}
  .hub-table .hub-link-strong,.hub-table .hub-cellname>a{min-height:44px}
}

/* --- 42.10 Een raster van vier op tablet is 3+1 ------------------------- */
/* Vier kaarten in een rij van drie laat er een alleen achter. Twee naast
   twee leest rustiger en vult de breedte. */
@media (min-width:561px) and (max-width:992px){
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 42.11 Selectievakje krijgt een aanraakvlak -------------------------
   Een <input type=checkbox> kan zelf niet groter zonder er groot uit te zien.
   Het label eromheen is het doel: 36px op desktop, 44 op telefoon; het vinkje
   blijft 18px. */
.hub-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;cursor:pointer;margin:0;
}
.hub-tick:hover{background:var(--surface-2)}
.hub-tick:has(input:focus-visible){box-shadow:var(--ring)}
@media (max-width:768px){ .hub-tick{width:44px;height:44px} }

/* --- 42.12 Laatste maten, na de breekpunten ----------------------------
   Deze regels moeten NA sectie 42.9 staan: een algemene regel daaronder
   maakte de mediaquery hierboven dood (media-chip-x bleef op 40px). */
@media (max-width:768px){
  .media-chip-x{width:44px;height:44px;min-width:44px}
}
a.hub-badge,a.hub-pill{min-width:36px;justify-content:center}
.mb-chip{min-height:36px}
@media (max-width:768px){
  a.hub-badge,a.hub-pill{min-width:44px}
  .mb-chip{min-height:44px}
}

/* --- 42.13 Link in een paneelkop --------------------------------------- */
.hub-panel-link{display:inline-flex;align-items:center;min-height:36px}
@media (max-width:768px){ .hub-panel-link{min-height:44px} }

/* --- 42.14 Klein extern-linkje naast een url ---------------------------- */
.hub-extlink{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:2px;border-radius:9px;font-size:11px;vertical-align:middle;
}
.hub-extlink:hover{background:var(--surface-2);color:var(--accent)}
@media (max-width:768px){ .hub-extlink{width:44px;height:44px} }

/* --- 42.15 Vinkje met tekst ernaast ------------------------------------- */
.hub-check{padding:9px 0}
@media (max-width:768px){ .hub-check{padding:13px 0} }

/* --- 42.16 Rode knop in het donkere thema -------------------------------
   Wit op #f04747 haalt 3,69:1. In een donker thema is een heldere vulling met
   donkere letters de leesbare kant op (dezelfde keuze als --brand/--brand-ink). */
[data-bs-theme="dark"] .hub-btn-danger:not(.hub-btn-ghost):not(.hub-btn-soft){color:#150708}
[data-bs-theme="dark"] .hub-btn-danger:not(.hub-btn-ghost):not(.hub-btn-soft) i{color:inherit}
[data-bs-theme="dark"] .hub-nav-badge.is-danger,
[data-bs-theme="dark"] .hub-bell-badge{color:#150708}

/* --- 42.17 Twee velden die bij elkaar horen in de filterbalk ------------
   Attribuut + waarde deelden een rastercel van 170px: beide labels werden tot
   drie letters afgekapt. Samen krijgen ze een hele rij. */
.hub-filter-pair{display:inline-flex;gap:8px;align-items:center;min-width:0}
.hub-filter-pair>*{min-width:0}
@media (max-width:1100px){
  .hub-filterbar .hub-filter-pair{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hub-filterbar .hub-filter-pair>.hub-select,
  .hub-filterbar .hub-filter-pair>.hub-input{max-width:none;width:100%}
}

/* --- 42.18 Een oneven laatste tegel vult de rij -------------------------
   Drie tegels in twee kolommen lieten er een alleen achter met een lege cel
   ernaast. De laatste van een oneven rij pakt de volle breedte. */
@media (max-width:768px){
  .hub-stats>*:last-child:nth-child(odd),
  .hub-metrics>*:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:561px) and (max-width:992px){
  .hub-grid>*:last-child:nth-child(odd){grid-column:1 / -1}
}

/* --- 42.19 Laatste losse doelen ---------------------------------------- */
.hub-switch{min-height:36px}
details>summary{min-height:36px;display:flex;align-items:center}
.set-tab,.mb-tabs a{min-height:36px}
.hub-table .hub-link-strong,.hub-table .hub-cellname>a{min-width:44px}
.hub-extlink{width:40px;height:40px}
/* Een icoonknop in de paginakop mag op telefoon niet als los blokje van 44px
   naast een gat blijven staan: hij deelt de rij net als de rest. */
@media (max-width:768px){
  .hub-switch{min-height:44px}
  details>summary{min-height:44px}
  .set-tab,.mb-tabs a{min-height:44px}
  .hub-extlink{width:44px;height:44px}
}

/* --- 42.20 Broodkruimels op een telefoon --------------------------------
   Op 390px hielden twee bovenliggende kruimels (elk 44px aanraakvlak) alle
   ruimte bezet en bleef er 0px over voor de naam van de pagina zelf. Op een
   klein scherm telt alleen waar je BENT; terug gaat via het menu of de
   "terug"-link boven de kop. */
@media (max-width:560px){
  .hub-crumbs>a,.hub-crumbs>i{display:none}
  .hub-crumbs>.is-current{
    font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}