/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard design-systeem — 2026-restyle
   Alle kleuren komen uit de bedrijfsprofiel-variabelen (--gbi-rood/--gbi-blauw
   worden per bedrijf overschreven door head.ejs) — het hele systeem kleurt
   dus automatisch mee met de huisstijl van de instantie.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --gbi-rood:        #dd052b;
  --gbi-rood-dark:   #b00420;
  --gbi-rood-light:  #ff4060;
  --gbi-blauw:       #00437a;
  --gbi-blauw-dark:  #00305a;
  --gbi-blauw-light: #2d6bb0;
  --gbi-grijs:       #a1a5a7;
  --gbi-grijs-50:    #f7f8fa;
  --gbi-grijs-100:   #eef0f3;
  --gbi-grijs-200:   #dde1e6;
  --gbi-grijs-300:   #c3c8cf;
  --gbi-grijs-700:   #5b6470;
  --gbi-grijs-900:   #1c2430;

  --gbi-success: #1e9e5a;
  --gbi-warning: #e8920c;
  --gbi-error:   #de3b2f;

  --gbi-kaart:      #ffffff;
  --gbi-radius:     6px;
  --gbi-radius-sm:  4px;
  --gbi-shadow:     0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --gbi-shadow-lg:  0 4px 8px rgba(16,24,40,0.06), 0 12px 28px rgba(16,24,40,0.10);
  --gbi-ring:       color-mix(in srgb, var(--gbi-blauw) 18%, transparent);
}

/* ── Donker thema (schakelaar in de header; voorkeur in localStorage) ────── */
html.donker {
  --gbi-grijs-50:  #12161d;
  --gbi-grijs-100: #1a202a;
  --gbi-grijs-200: #2a3341;
  --gbi-grijs-300: #3b4656;
  --gbi-grijs-700: #9aa6b7;
  --gbi-grijs-900: #e8edf4;
  --gbi-kaart:     #1a202a;
  --gbi-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.35);
  --gbi-shadow-lg: 0 4px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.5);
  color-scheme: dark;
}
html.donker .gbi-nav { background: var(--gbi-kaart); }
html.donker img[alt="logo"] { background: var(--gbi-kaart); }

* { box-sizing: border-box; }

::selection { background: color-mix(in srgb, var(--gbi-blauw) 22%, white); }

body {
  margin: 0;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gbi-grijs-50);
  color: var(--gbi-grijs-900);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gbi-blauw); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--gbi-blauw); outline-offset: 2px; border-radius: 4px; }

/* Subtiele scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--gbi-grijs-300) transparent; }

/* ═══ HEADER ═══════════════════════════════════════════════════════════════ */
.gbi-header {
  background: var(--gbi-blauw);
  color: white;
  padding: 11px 28px;
  border-bottom: 2px solid var(--gbi-rood);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.gbi-header-merk {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gbi-header-logo {
  background: var(--gbi-rood);
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 3px;
}
.gbi-header-titel {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.2px;
}
.gbi-header-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-left: 8px;
}
.gbi-header-user {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.gbi-header-user .naam { font-weight: 600; }
.gbi-header-user .email { color: rgba(255,255,255,0.6); font-size: 12px; }
.gbi-header-user a {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.gbi-header-user a:hover {
  color: white;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
}

/* ═══ TABS / NAVIGATIE ═════════════════════════════════════════════════════ */
.gbi-nav {
  background: var(--gbi-kaart);
  border-bottom: 1px solid var(--gbi-grijs-200);
  padding: 0 20px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.gbi-nav a {
  padding: 12px 15px 10px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gbi-grijs-700);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: 0;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.gbi-nav a:hover {
  color: var(--gbi-blauw);
  text-decoration: none;
}
.gbi-nav a.actief {
  color: var(--gbi-blauw);
  background: none;
  border-bottom-color: var(--gbi-rood);
  font-weight: 700;
}

/* ═══ CONTAINER ═══════════════════════════════════════════════════════════ */
.gbi-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 28px 56px;
}
.gbi-container-smal {
  max-width: 540px;
  margin: 0 auto;
  padding: 28px;
}

/* ═══ KOPPEN ═══════════════════════════════════════════════════════════════ */
.gbi-h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--gbi-grijs-900);
  margin: 0 0 4px 0;
}
.gbi-h2 {
  font-size: 18px;
  font-weight: 650;
  color: var(--gbi-grijs-900);
  margin: 0 0 12px 0;
}
.gbi-sub {
  font-size: 13.5px;
  color: var(--gbi-grijs-700);
  margin-bottom: 22px;
}

/* ═══ KAARTEN ══════════════════════════════════════════════════════════════ */
.gbi-card {
  background: var(--gbi-kaart);
  border: 1px solid var(--gbi-grijs-200);
  border-radius: var(--gbi-radius);
  padding: 22px;
  box-shadow: var(--gbi-shadow);
  margin-bottom: 20px;
}
.gbi-card-titel {
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gbi-blauw);
  margin: 0 0 14px 0;
  border-bottom: 1px solid var(--gbi-grijs-100);
  padding-bottom: 10px;
}

/* ═══ DASHBOARD TEGELS ═════════════════════════════════════════════════════ */
.gbi-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.gbi-tegel {
  background: var(--gbi-kaart);
  border: 1px solid var(--gbi-grijs-200);
  border-radius: var(--gbi-radius);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  border-left: 3px solid var(--gbi-blauw);
  text-decoration: none;
  display: block;
  color: inherit;
  position: relative;
  box-shadow: var(--gbi-shadow);
}
.gbi-tegel:hover {
  text-decoration: none;
  box-shadow: var(--gbi-shadow-lg);
  border-color: var(--gbi-grijs-300);
}
.gbi-tegel-icon {
  font-size: 24px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 0;
}
.gbi-tegel-naam {
  font-size: 16px;
  font-weight: 650;
  color: var(--gbi-grijs-900);
  margin: 0 0 6px 0;
}
.gbi-tegel-oms {
  font-size: 13px;
  color: var(--gbi-grijs-700);
  line-height: 1.5;
  min-height: 38px;
}
.gbi-tegel-actie {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gbi-rood);
}
.gbi-cat-titel {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gbi-grijs-700);
  margin: 30px 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gbi-grijs-200);
}

.gbi-tegels-leeg {
  background: var(--gbi-kaart);
  border: 2px dashed var(--gbi-grijs-200);
  border-radius: var(--gbi-radius);
  padding: 60px 24px;
  text-align: center;
  color: var(--gbi-grijs-700);
}
.gbi-tegels-leeg .icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; }

/* ═══ FORMULIEREN ═════════════════════════════════════════════════════════ */
.gbi-veld { margin-bottom: 16px; }
.gbi-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gbi-grijs-700);
  margin-bottom: 5px;
}
.gbi-input, .gbi-select, .gbi-textarea {
  width: 100%;
  padding: 9px 13px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--gbi-grijs-300);
  border-radius: var(--gbi-radius-sm);
  background: var(--gbi-kaart);
  color: var(--gbi-grijs-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gbi-input:hover, .gbi-select:hover, .gbi-textarea:hover { border-color: var(--gbi-grijs-700); }
.gbi-input:focus, .gbi-select:focus, .gbi-textarea:focus {
  outline: none;
  border-color: var(--gbi-blauw);
  box-shadow: 0 0 0 4px var(--gbi-ring);
}
.gbi-textarea { min-height: 80px; resize: vertical; }

/* Form grid voor labels-naast-velden layout */
.gbi-form-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 16px;
  align-items: start;
}
.gbi-form-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gbi-grijs-900);
  padding-top: 9px;
}
.gbi-h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--gbi-grijs-900);
  margin: 0;
}
@media (max-width: 700px) {
  .gbi-form-grid { grid-template-columns: 1fr !important; gap: 4px 0; }
  .gbi-form-label { padding-top: 8px; padding-bottom: 0; }
}
.gbi-help {
  font-size: 12px;
  color: var(--gbi-grijs-700);
  margin-top: 5px;
}
.gbi-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gbi-veld-rij-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Checkbox-lijst voor rollen */
.gbi-checks {
  border: 1px solid var(--gbi-grijs-200);
  border-radius: var(--gbi-radius-sm);
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--gbi-grijs-50);
}
.gbi-check-rij {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.gbi-check-rij:hover { background: var(--gbi-kaart); box-shadow: var(--gbi-shadow); }
.gbi-check-rij input { margin: 0; accent-color: var(--gbi-blauw); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gbi-blauw); }

/* ═══ KNOPPEN ═════════════════════════════════════════════════════════════ */
.gbi-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--gbi-radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.gbi-btn:active { transform: translateY(1px); }
.gbi-btn-primary {
  background: var(--gbi-rood);
  color: white;
  box-shadow: 0 1px 2px rgba(16,24,40,0.1), inset 0 1px 0 rgba(255,255,255,0.12);
}
.gbi-btn-primary:hover {
  background: var(--gbi-rood-dark);
  text-decoration: none;
  color: white;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--gbi-rood) 35%, transparent);
}
.gbi-btn-secondary {
  background: var(--gbi-blauw);
  color: white;
  box-shadow: 0 1px 2px rgba(16,24,40,0.1), inset 0 1px 0 rgba(255,255,255,0.12);
}
.gbi-btn-secondary:hover {
  background: var(--gbi-blauw-dark);
  text-decoration: none;
  color: white;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--gbi-blauw) 35%, transparent);
}
.gbi-btn-ghost {
  background: var(--gbi-kaart);
  color: var(--gbi-grijs-700);
  border-color: var(--gbi-grijs-300);
}
.gbi-btn-ghost:hover {
  border-color: var(--gbi-blauw);
  color: var(--gbi-blauw);
  background: color-mix(in srgb, var(--gbi-blauw) 5%, white);
  text-decoration: none;
}
.gbi-btn-danger {
  background: var(--gbi-kaart);
  color: var(--gbi-error);
  border-color: color-mix(in srgb, var(--gbi-error) 45%, white);
}
.gbi-btn-danger:hover {
  background: var(--gbi-error);
  border-color: var(--gbi-error);
  color: white;
  text-decoration: none;
}
.gbi-btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

/* ═══ TABEL ═══════════════════════════════════════════════════════════════ */
.gbi-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--gbi-kaart);
  border: 1px solid var(--gbi-grijs-200);
  border-radius: var(--gbi-radius);
  overflow: hidden;
  box-shadow: var(--gbi-shadow);
}
.gbi-tbl th {
  background: var(--gbi-grijs-50);
  color: var(--gbi-grijs-700);
  text-align: left;
  padding: 11px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 650;
  border-bottom: 2px solid color-mix(in srgb, var(--gbi-blauw) 30%, var(--gbi-grijs-200));
}
.gbi-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gbi-grijs-100);
  font-size: 13px;
}
.gbi-tbl tr:last-child td { border-bottom: none; }
.gbi-tbl tr:hover td { background: color-mix(in srgb, var(--gbi-blauw) 3%, white); }

.gbi-tbl .acties { display: flex; gap: 4px; }
.gbi-tbl .gbi-btn-sm { padding: 3px 8px; }

/* Status pills */
.gbi-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gbi-pill-actief { background: color-mix(in srgb, var(--gbi-success) 12%, white); color: var(--gbi-success); border: 1px solid color-mix(in srgb, var(--gbi-success) 30%, white); }
.gbi-pill-pauze  { background: var(--gbi-grijs-100); color: var(--gbi-grijs-700); border: 1px solid var(--gbi-grijs-300); }
.gbi-pill-admin  { background: color-mix(in srgb, var(--gbi-rood) 10%, white); color: var(--gbi-rood); border: 1px solid color-mix(in srgb, var(--gbi-rood) 28%, white); }
.gbi-pill-rol    { background: color-mix(in srgb, var(--gbi-blauw) 8%, white); color: var(--gbi-blauw); border: 1px solid color-mix(in srgb, var(--gbi-blauw) 22%, white); margin-right: 3px; }

/* ═══ LOGIN PAGINA ═════════════════════════════════════════════════════════ */
.gbi-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--gbi-rood) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, color-mix(in srgb, var(--gbi-blauw-light, var(--gbi-blauw)) 35%, transparent), transparent 65%),
    linear-gradient(150deg, var(--gbi-blauw) 0%, var(--gbi-blauw-dark, #00305a) 100%);
  padding: 20px;
}
.gbi-login-box {
  background: var(--gbi-kaart);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 392px;
  overflow: hidden;
}
.gbi-login-header {
  background: var(--gbi-rood);
  padding: 26px 24px;
  color: white;
  text-align: center;
}
.gbi-login-header .merk {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}
.gbi-login-header .sub {
  font-size: 13px;
  opacity: 0.85;
}
.gbi-login-body {
  padding: 30px 26px 26px;
}
.gbi-login-error {
  background: color-mix(in srgb, var(--gbi-error) 8%, white);
  border: 1px solid color-mix(in srgb, var(--gbi-error) 30%, white);
  color: var(--gbi-error);
  padding: 10px 12px;
  border-radius: var(--gbi-radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.gbi-login-melding {
  background: color-mix(in srgb, var(--gbi-success) 8%, white);
  border: 1px solid color-mix(in srgb, var(--gbi-success) 30%, white);
  color: var(--gbi-success);
  padding: 10px 12px;
  border-radius: var(--gbi-radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.gbi-login-footer {
  padding: 15px 24px;
  background: var(--gbi-grijs-50);
  border-top: 1px solid var(--gbi-grijs-200);
  text-align: center;
  font-size: 12px;
  color: var(--gbi-grijs-700);
}

/* ═══ WACHTWOORD-OOGJE ═══════════════════════════════════════════════════ */
.gbi-pw-wrap {
  position: relative;
}
.gbi-pw-wrap .gbi-input {
  padding-right: 42px;
}
.gbi-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  color: var(--gbi-grijs-700);
  user-select: none;
}
.gbi-pw-toggle:hover { color: var(--gbi-blauw); }
.gbi-pw-toggle:focus { outline: 2px solid var(--gbi-blauw); outline-offset: 1px; }

/* ═══ TOAST / FLASH ════════════════════════════════════════════════════════ */
.gbi-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--gbi-grijs-900);
  color: white;
  padding: 13px 20px;
  border-radius: var(--gbi-radius);
  font-weight: 600;
  box-shadow: var(--gbi-shadow-lg);
  z-index: 9999;
}
.gbi-toast.success { background: var(--gbi-success); }
.gbi-toast.error   { background: var(--gbi-error); }

/* ═══ HULP-CLASSES ═════════════════════════════════════════════════════════ */
.gbi-flex { display: flex; align-items: center; gap: 8px; }
.gbi-flex-tussen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gbi-mt-0 { margin-top: 0; }
.gbi-mt-2 { margin-top: 12px; }
.gbi-mt-4 { margin-top: 24px; }
.gbi-mb-0 { margin-bottom: 0; }
.gbi-mb-2 { margin-bottom: 12px; }
.gbi-mb-4 { margin-bottom: 24px; }
.gbi-text-right { text-align: right; }
.gbi-text-muted { color: var(--gbi-grijs-700); }
.gbi-text-small { font-size: 12px; }

/* ═══ IN-SCHERM TABBLADEN (sub-tabs binnen één view) ═══════════════════════
   Vervangt lange één-koloms formulieren: verdeel velden over tabbladen.
   HTML: <nav class="gbi-tabs"><button class="gbi-tab actief">…</button>…</nav>
         <div class="gbi-tabpaneel actief">…</div><div class="gbi-tabpaneel">…</div> */
.gbi-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 4px 0 18px; border-bottom: 1px solid var(--gbi-grijs-200);
}
.gbi-tab {
  border: none; background: none; cursor: pointer;
  padding: 9px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--gbi-grijs-700);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--gbi-radius-sm) var(--gbi-radius-sm) 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.gbi-tab:hover { color: var(--gbi-blauw); background: var(--gbi-grijs-100); }
.gbi-tab.actief { color: var(--gbi-blauw); border-bottom-color: var(--gbi-rood); font-weight: 700; }
.gbi-tabpaneel { display: none; }
.gbi-tabpaneel.actief { display: block; }

/* ═══ DETAIL-SPLIT (lijst links, brede detail rechts — tegen 'lange kolom') ═ */
.gbi-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr); gap: 16px; align-items: start; }
.gbi-split-3 { display: grid; grid-template-columns: 200px minmax(0,1fr) minmax(0,1.55fr); gap: 14px; align-items: start; }
@media (max-width: 980px){ .gbi-split, .gbi-split-3 { grid-template-columns: 1fr; } }

/* ═══ BADGE — rechthoekig, VERVANGT ronde pills (huisstijl: geen 999px) ════ */
.gbi-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  background: var(--gbi-grijs-100); color: var(--gbi-grijs-700);
  border: 1px solid var(--gbi-grijs-200);
}
.gbi-badge-blauw { background: color-mix(in srgb,var(--gbi-blauw) 8%,white); color: var(--gbi-blauw); border-color: color-mix(in srgb,var(--gbi-blauw) 22%,white); }
.gbi-badge-rood  { background: color-mix(in srgb,var(--gbi-rood) 9%,white); color: var(--gbi-rood); border-color: color-mix(in srgb,var(--gbi-rood) 26%,white); }
.gbi-badge-ok    { background: color-mix(in srgb,var(--gbi-success) 12%,white); color: var(--gbi-success); border-color: color-mix(in srgb,var(--gbi-success) 30%,white); }

/* ═══ KLEIN SCHERM — telefoon en tablet ═══════════════════════════════════
   Fundament voor de responsive-eis (kluis 18-09: "responsive is een
   acceptatie-eis, geen afwerking"). Gemeten met scripts/responsive-scan.mjs
   op 390 px (telefoon) en 820 px (tablet).

   Hier staat alleen wat voor ÉLKE tegel geldt. Heeft een tegel een eigen
   probleem, dan lost hij dat op in zijn eigen view — niet hier, anders
   verandert er van alles op schermen waar niets mis mee was.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Een tabel met meer dan drie kolommen is op een telefoon nooit smal
     genoeg. Zonder deze regel schuift de hele PAGINA opzij en is de tegel
     onleesbaar; met deze regel schuift alleen de tabel, binnen zijn eigen
     kader. Dat is de afspraak uit het plan: "tabellen scrollen of stapelen". */
  main table, .gbi-container table, .gbi-card table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Velden naast elkaar worden velden onder elkaar. */
  .gbi-veld-rij, .gbi-veld-rij-3 { grid-template-columns: 1fr; }

  /* Twee of drie kolommen naast elkaar stapelen. */
  .gbi-split, .gbi-split-3 { grid-template-columns: 1fr; }

  /* Ruimte terugwinnen die op een telefoon te duur is. */
  .gbi-container { padding-left: 14px; padding-right: 14px; }
  .gbi-card { padding: 14px; }

  /* Een knop moet je met een duim kunnen raken (40 px is de ondergrens die
     Apple en Google allebei aanhouden). Alleen echte knoppen, geen links
     midden in een zin. De knoppen in de kopbalk staan hier apart bij: die
     waren met 34 px het vaakst te klein, op bijna elke pagina. */
  .gbi-btn, button, input[type="submit"], input[type="button"],
  .gbi-header-dashboard, .gbi-header-user > a, .gbi-omgeving-wissel summary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Ook de kleine knop: op een telefoon is er geen reden voor een knop van
     34 px. Op een beeldscherm met een muis blijft hij klein. */
  .gbi-btn-sm { min-height: 40px; }

  /* Invoervelden: 16 px tekst (onder die grens zoomt iOS bij het aantikken
     in, en dan staat de pagina scheef) en 40 px hoog. Aankruisvakjes en
     keuzerondjes niet: die raak je via hun label, en 40 px hoog maakt ze
     lelijk zonder dat het helpt. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea, .gbi-input {
    font-size: 16px;
    min-height: 40px;
  }

  /* Kolomkoppen in hoofdletters op 11,5 px zijn op een telefoon niet te
     lezen; 12 px is de ondergrens die we aanhouden. */
  .gbi-tbl th { font-size: 12px; letter-spacing: 0.4px; }
}

/* ═══ AANRAAKSCHERMEN — telefoon én tablet ══════════════════════════════════
   De nulmeting van 19-09 (responsive-scan, 73 pagina's) was op de telefoon
   bijna overal groen, maar op de tablet (820 px) stonden 29 pagina's op ⚠:
   de regels hierboven gelden alleen onder 700 px, en een iPad is breder.
   Wat een duim nodig heeft hangt niet af van de breedte maar van het
   scherm: daarom hier één blok voor elk aanraakscherm (pointer: coarse) en,
   als vangnet voor browsers die dat niet melden, alles tot 1024 px.
   Alleen tikdoelen en leesbaarheid — geen indeling; die blijft bij 700 px. */
@media (pointer: coarse), (max-width: 1024px) {
  /* Alles waar je op drukt: 40 px hoog (ondergrens van Apple en Google). */
  .gbi-btn, .gbi-btn-sm, button, input[type="submit"], input[type="button"],
  .gbi-header-merk, .gbi-header-dashboard, .gbi-header-user > a, #themaKnop,
  .gbi-omgeving-wissel summary, details > summary,
  a.back, a.mw-terug, a.terugKnop, a.rel-tile, .fb-chip, .ord-tab, .hb-item, .kvk-chip {
    min-height: 40px;
  }
  .gbi-btn, .gbi-btn-sm, .gbi-header-dashboard, .gbi-header-user > a, #themaKnop,
  a.back, a.mw-terug, a.terugKnop, .fb-chip, .ord-tab, .kvk-chip {
    display: inline-flex; align-items: center; justify-content: center;
  }
  details > summary { display: flex; align-items: center; }
  /* Een filter-wisknop van 12 px is geen knop: minstens een vingertop. */
  button.cat-filter-clear { min-width: 40px; font-size: 12px; }
  /* Invoervelden en keuzelijsten: 40 px hoog, zodat je ze raakt waar je kijkt. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
  select, textarea, .gbi-input {
    min-height: 40px;
  }
  /* Leesbaarheid: kolomkoppen, kleine tekst en labels niet onder 12 px. */
  th, small, label, .gbi-text-small, .dash-rol, .eyebrow, .tag, .vp-opt, .vt-label { font-size: max(12px, 1em); }
  .gbi-tbl th, .dash-rol { font-size: 12px; }
}

/* ═══ KOPBALK EN CONSOLE OP DE TELEFOON (20-09) ═════════════════════════════
   Frank, vanaf zijn telefoon op de console: "alle letters schieten door
   elkaar". De foto op 390 px liet zien waarom: de kopbalk is een flexrij
   met min-width:0 op het linkerblok, dus de bedrijfsnaam brak over drie
   regels en de knop Dashboard en de gebruikersnaam tekenden eróverheen.
   Dit stond op elke pagina, niet alleen op de console. Onder 700 px is de
   kopbalk nu één regel: naam (afgekapt met …), 🏠, thema, uitloggen; de
   gebruikersnaam en het versienummer verdwijnen (die staan op Mijn
   instellingen). De console krijgt een schuifbare tabbalk en een vaste
   onderbalk met de vier dingen die je het vaakst doet. */
@media (max-width: 700px) {
  .gbi-header { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .gbi-header-links { gap: 8px; flex: 1 1 auto; min-width: 0; }
  .gbi-header-merk { min-width: 0; flex: 1 1 auto; }
  .gbi-header-merk img { height: 28px !important; margin-right: 6px !important; }
  .gbi-header-titel { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; }
  .gbi-header-sub { display: none; }
  .gbi-header-dashboard { font-size: 0 !important; padding: 6px 9px !important; min-width: 40px; }
  .gbi-header-dashboard::before { content: '🏠'; font-size: 18px; line-height: 1; }
  .gbi-header-user { gap: 6px; flex: 0 0 auto; }
  .gbi-header-user > div { display: none; }
  .gbi-header-user a { padding: 6px 9px; min-width: 40px; }
  .gbi-header-user a[href="/logout"] { font-size: 0; }
  .gbi-header-user a[href="/logout"]::before { content: '⏻'; font-size: 17px; line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
  .gbi-omgeving-wissel summary { font-size: 0 !important; padding: 6px 9px !important; }
  .gbi-omgeving-wissel summary::before { content: '⇄'; font-size: 17px; line-height: 1; }
  /* Een titelrij met knoppen ernaast mag omslaan in plaats van de knoppen buiten beeld duwen. */
  .gbi-flex-tussen { flex-wrap: wrap; gap: 8px 12px; }
  .gbi-h1 { font-size: 22px; }
}

/* Console-tabbalk: op een scherm gewoon een rij die omslaat; op de telefoon
   één schuifbare rij met tikdoelen van 44 px. */
.console-tabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px 6px; }
.console-tabs a { padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; color: #42526e; white-space: nowrap; }
.console-tabs a.actief { background: var(--gbi-blauw); color: #fff; }
.console-tabs a.console-tabs-zij { color: #6b7280; font-size: 13px; padding: 8px 12px; }
.console-tabs .console-tabs-rek { flex: 1; }
.console-onderbalk { display: none; }
@media (max-width: 700px) {
  .console-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px; margin-bottom: 12px !important; }
  .console-tabs::-webkit-scrollbar { display: none; }
  .console-tabs a { min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; }
  .console-tabs .console-tabs-rek { display: none; }
  .console-onderbalk {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--gbi-kaart, #fff); border-top: 1px solid var(--gbi-grijs-200, #e5e7eb);
    padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }
  .console-onderbalk a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; text-decoration: none; color: #42526e; font-size: 12px; font-weight: 600; }
  .console-onderbalk a .ico { font-size: 22px; line-height: 1; }
  .console-onderbalk a.actief { color: var(--gbi-blauw); }
  .console-onderbalk a .tel { position: absolute; margin-left: 26px; margin-top: -4px; background: var(--gbi-rood); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 5px; }
  body.console-pagina main, body.console-pagina .gbi-container { padding-bottom: 76px; }
  /* De zwevende 💬-knop (tegel-feedback.js) stond precies op "Kluis" in de onderbalk. */
  body.console-pagina [style*="border-radius:50%"][style*="bottom:18px"],
  body.console-pagina [style*="border-radius: 50%"][style*="bottom: 18px"] { bottom: 84px !important; }
  body.console-pagina [style*="bottom:80px"][style*="max-height:70vh"],
  body.console-pagina [style*="bottom: 80px"][style*="max-height: 70vh"] { bottom: 146px !important; }
}
@media (pointer: coarse), (max-width: 1024px) {
  .console-tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  /* Kleine grijze tekst op de console (sleutels, groepsnamen, pillen): niet onder 12 px. */
  code.gbi-text-muted, span.gbi-text-muted, .kop-groep-naam, .gbi-pill { font-size: max(12px, 1em); }
}

/* ═══ INFO-TOOLTIP (20-09) ══════════════════════════════════════════════════
   Vijf tegels (Inkoopcombinatie, Order-testen, Leveringsrisico-instellingen,
   Bedrijfsgegevens, Mail-inname) gebruiken <span class="gbi-info-i">i<span
   class="gbi-info-tip">…</span></span> in hun kop, maar de stijl bestond
   nergens: de hele toelichting stond als platte tekst ín de titel
   (tegel-doorloop ronde 2). Nu een rond i-tje, uitleg bij hover of focus. */
.gbi-info-i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--gbi-grijs-300); color: var(--gbi-grijs-700); background: var(--gbi-kaart, #fff); font: 600 12px/1 Georgia, "Times New Roman", serif; font-style: italic; vertical-align: middle; cursor: help; outline: none; }
.gbi-info-i:hover, .gbi-info-i:focus { border-color: var(--gbi-blauw); color: var(--gbi-blauw); }
.gbi-info-tip { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 80; min-width: 260px; max-width: min(420px, 80vw); padding: 10px 12px; border-radius: 8px; background: var(--gbi-kaart, #fff); color: var(--gbi-grijs-900); border: 1px solid var(--gbi-grijs-200); box-shadow: var(--gbi-shadow-lg); font: 400 13px/1.5 inherit; font-family: inherit; font-style: normal; text-align: left; white-space: normal; }
.gbi-info-i:hover .gbi-info-tip, .gbi-info-i:focus .gbi-info-tip, .gbi-info-i:focus-within .gbi-info-tip { display: block; }
@media (max-width: 700px) { .gbi-info-tip { left: auto; right: -8px; transform: none; } }


/* ── Aan/uit-schakelaar ─────────────────────────────────────────────────────
   23-09 (wens): "gewoon een toggle switch aan/uit". Bewust een echte
   <input type=checkbox> eronder in plaats van een div met een klik-afhandeling:
   dan werkt spatie/enter, leest een schermlezer hem voor, en doet een
   formulier het ook zonder JavaScript. Het vakje zelf is onzichtbaar maar
   niet display:none — dat laatste haalt hem uit de toetsenbordvolgorde. */
.gbi-schakelaar { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.gbi-schakelaar input { position: absolute; opacity: 0; width: 0; height: 0; }
.gbi-schakelaar-baan {
  position: relative; width: 38px; height: 22px; border-radius: 11px;
  background: #cbd5e1; transition: background .15s; flex: 0 0 auto;
}
.gbi-schakelaar-knop {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.gbi-schakelaar input:checked + .gbi-schakelaar-baan { background: #1f7a3f; }
.gbi-schakelaar input:checked + .gbi-schakelaar-baan .gbi-schakelaar-knop { transform: translateX(16px); }
.gbi-schakelaar input:focus-visible + .gbi-schakelaar-baan { outline: 2px solid #00437a; outline-offset: 2px; }
.gbi-schakelaar input:disabled + .gbi-schakelaar-baan { opacity: .5; cursor: wait; }
.gbi-schakelaar-tekst { font-size: 12px; font-weight: 600; color: #475569; min-width: 20px; }