/* HVT Design System — Gedeelde tokens en componenten */

/* Veiligheidsnet tegen horizontale scroll op mobiel.
   Bij iedere page-regel die per ongeluk buiten de viewport breekt (100vw, fixed
   width elementen, table overflow) is dit de laatste verdediging zodat users
   nooit zijwaarts kunnen swipen na login. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* Touch targets mobile: minstens 44px hoog voor inputs/knoppen/selects. */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button,
  .btn {
    min-height: 44px;
  }
  /* iOS Safari zoomt automatisch in bij inputs < 16px font-size. Forceer
     overal 16px op mobiel om dit te voorkomen — voorkomt layout-shift op
     focus en gebruikers die in- en uitzoomen per veld. */
  input, select, textarea {
    font-size: 16px;
  }
}

/* Horizontale overflow is de meest voorkomende mobiel-bug. Forceer body
   om nooit horizontaal te scrollen. Specifieke secties kunnen dit per
   geval overschrijven. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Topbar op mobiel: wrappen zodat logout-knop altijd zichtbaar blijft, en
   niet-essentiele elementen verbergen (naam, id-badge, beschikbaar-label).
   Deze regels gelden voor alle 4 portalen via de gedeelde .topbar class. */
@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 6px 10px !important;
  }
  .topbar-right, .topbar-meta {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-left: auto;
  }
  /* Minder prioriteit: verberg op smalle schermen om ruimte te maken voor logout */
  .koerier-naam-top,
  #koerier-naam-top,
  #koerier-id-top,
  #klant-naam-topbar,
  #vracht-naam-topbar,
  #beschikbaar-text {
    display: none !important;
  }
  /* Beschikbaar-knop blijft als dot-icon zonder label — compacter */
  #beschikbaar-toggle {
    padding: 4px 6px !important;
    gap: 0 !important;
  }
  /* Logout altijd kort en duidelijk */
  .logout-btn, button[onclick="logout()"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

/* Mobile safety-net: inline-styled grids met minmax(>=240px) breken uit de
   viewport op smalle schermen (iPhone SE = 320px). Overflow-hidden knipt
   content dan af -> user ziet "tot de helft". Force naar single-column. */
@media (max-width: 480px) {
  [style*="minmax(340px"],
  [style*="minmax(320px"],
  [style*="minmax(300px"],
  [style*="minmax(280px"],
  [style*="minmax(260px"],
  [style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
  }
  /* Tabel-like rows met vaste min-width > 200px gaan scrollen */
  [style*="min-width:220px"],
  [style*="min-width: 220px"],
  [style*="min-width:240px"],
  [style*="min-width: 240px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Panel rechts (rit-detail, side-drawers) moet full-width op mobiel */
  [style*="max-width:400px"][style*="right:0"],
  [style*="max-width: 400px"][style*="right: 0"] {
    max-width: 100vw !important;
    border-left: none !important;
  }
}

:root {
  /* Spacing (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 0 3px rgba(229,62,62,0.15);

  /* Typography */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 20px;
  --font-2xl: 28px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* ── Status kleuren (uniform in ALLE portalen) ── */
  --status-nieuw: #6B7280;
  --status-nieuw-bg: rgba(107,114,128,0.12);
  --status-toegewezen: #3B82F6;
  --status-toegewezen-bg: rgba(59,130,246,0.12);
  --status-onderweg: #F59E0B;
  --status-onderweg-bg: rgba(245,158,11,0.12);
  --status-afgeleverd: #10B981;
  --status-afgeleverd-bg: rgba(16,185,129,0.12);
  --status-geannuleerd: #EF4444;
  --status-geannuleerd-bg: rgba(239,68,68,0.12);
  --status-wacht: #D69E2E;
  --status-wacht-bg: rgba(214,158,46,0.12);
  --status-controle: #9333EA;
  --status-controle-bg: rgba(147,51,234,0.12);
  --status-betaling: #E53E3E;
  --status-betaling-bg: rgba(229,62,62,0.12);
}

/* ── Status badges ── */
.badge-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.badge-nieuw { color: var(--status-nieuw); background: var(--status-nieuw-bg); border: 1px solid rgba(107,114,128,0.25); }
.badge-nieuw::before { background: var(--status-nieuw); }
.badge-toegewezen { color: var(--status-toegewezen); background: var(--status-toegewezen-bg); border: 1px solid rgba(59,130,246,0.25); }
.badge-toegewezen::before { background: var(--status-toegewezen); }
.badge-onderweg { color: var(--status-onderweg); background: var(--status-onderweg-bg); border: 1px solid rgba(245,158,11,0.25); }
.badge-onderweg::before { background: var(--status-onderweg); }
.badge-afgeleverd { color: var(--status-afgeleverd); background: var(--status-afgeleverd-bg); border: 1px solid rgba(16,185,129,0.25); }
.badge-afgeleverd::before { background: var(--status-afgeleverd); }
.badge-geannuleerd { color: var(--status-geannuleerd); background: var(--status-geannuleerd-bg); border: 1px solid rgba(239,68,68,0.25); }
.badge-geannuleerd::before { background: var(--status-geannuleerd); }
.badge-wacht { color: var(--status-wacht); background: var(--status-wacht-bg); border: 1px solid rgba(214,158,46,0.25); }
.badge-wacht::before { background: var(--status-wacht); }
.badge-controle { color: var(--status-controle); background: var(--status-controle-bg); border: 1px solid rgba(147,51,234,0.25); }
.badge-controle::before { background: var(--status-controle); }
.badge-betaling { color: var(--status-betaling); background: var(--status-betaling-bg); border: 1px solid rgba(229,62,62,0.25); }
.badge-betaling::before { background: var(--status-betaling); }

/* ── Urgentie balk ── */
.urgentie-balk {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  background: var(--bg3, #1E2328); border: 1px solid var(--border, #2A2F36);
  border-radius: var(--radius-md); margin-bottom: 20px;
}
.urgentie-balk:empty { display: none; }
.urgentie-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: var(--font-sm); font-weight: 600; cursor: pointer;
  transition: opacity var(--transition-base);
}
.urgentie-item:hover { opacity: 0.85; }
.urgentie-item.urgent { background: var(--status-geannuleerd-bg); color: var(--status-geannuleerd); }
.urgentie-item.warning { background: var(--status-wacht-bg); color: var(--status-wacht); }
.urgentie-item.info { background: var(--status-toegewezen-bg); color: var(--status-toegewezen); }
.urgentie-item .urgentie-count {
  background: currentColor; color: var(--bg, #0F1114);
  min-width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

/* ── Global loading bar (top 2px, animated when ANY fetch is in flight) ── */
#hvt-loading-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--red, #E53E3E), var(--yellow, #F59E0B));
  z-index: 10000; pointer-events: none; opacity: 0;
  transition: width .2s ease-out, opacity .15s ease-out;
}
#hvt-loading-bar.active { opacity: 1; width: 85%; transition: width 8s cubic-bezier(.1,.7,.2,1); }
#hvt-loading-bar.done { opacity: 0; width: 100%; transition: width .15s, opacity .3s .15s; }

/* ── Empty states ── */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text2, #8B95A1);
}
.empty-state-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-title { font-size: var(--font-md); font-weight: 600; margin-bottom: 6px; color: var(--text, #F0F2F5); }
.empty-state-text { font-size: var(--font-base); line-height: 1.5; max-width: 360px; margin: 0 auto; }
.empty-state-action { margin-top: 16px; }

/* ── Utility classes (batch 1 — vervangt meest herhaalde inline styles) ── */
.flex-row { display: flex; align-items: center; gap: 8px; }
.flex-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flex-col { display: flex; flex-direction: column; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-xs { font-size: var(--font-xs); } .text-sm { font-size: var(--font-sm); } .text-base { font-size: var(--font-base); } .text-md { font-size: var(--font-md); } .text-lg { font-size: var(--font-lg); } .text-xl { font-size: var(--font-xl); }
.text-muted { color: var(--text2); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-accent { color: var(--accent); }
.text-bold { font-weight: 700; }
.text-semibold { font-weight: 600; }
.text-upper { text-transform: uppercase; letter-spacing: 0.5px; }
.text-xs-muted { font-size: var(--font-xs); color: var(--text2); }
.text-sm-muted { font-size: var(--font-sm); color: var(--text2); }
.label-upper { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.4px; }
.header-upper { font-size: var(--font-xs); color: var(--text2); text-transform: uppercase; }
.section-title { font-weight: 700; margin-bottom: 12px; font-size: var(--font-md); }
.p-4 { padding: 4px; } .p-6 { padding: 6px; } .p-8 { padding: 8px; } .p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-24 { padding: 24px; }
.pad-row { padding: 8px 6px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }
.m-0 { margin: 0; }
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.bg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bg-pill { padding: 12px; background: var(--bg3); border-radius: var(--radius-md); }
.border-bottom { border-bottom: 1px solid var(--border); }
.row-divider { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tbl-compact { width: 100%; font-size: var(--font-sm); border-collapse: collapse; }
.tbl-compact th, .tbl-compact td { padding: 8px; text-align: left; }
.center-empty { text-align: center; padding: 24px; color: var(--text2); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.hidden { display: none; }
.chip-xs { font-size: var(--font-xs); padding: 4px 10px; border-radius: var(--radius-full); }

/* ── Tablet breakpoint (900px) ── */
@media (max-width: 900px) {
  .urgentie-balk { flex-direction: column; }
  .urgentie-item { width: 100%; }
}

/* Empty state tekst — 360px constraint zonder mobile overflow. */
.empty-state-text {
  max-width: min(360px, calc(100% - 24px));
}

/* Global focus-visible — consistent across interactieve elementen */
*:focus-visible {
  outline: 2px solid var(--accent, var(--red, #E53E3E));
  outline-offset: 2px;
  border-radius: 4px;
}
/* Links/buttons/inputs die anders stille focus hadden */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

/* Smooth transitions on interactive elements */
button, a, [role="tab"] {
  transition: all var(--transition-base);
}

input, select, textarea {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Button base improvements */
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: scale(0.98); opacity: 1; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-ghost:hover { border-color: var(--text2); }
.btn-ghost:active { transform: scale(0.98); }

/* Card hover effect */
.stat-card:hover, .rit-card:hover, .rit-kaart:hover, .settings-card:hover {
  border-color: var(--text2);
  box-shadow: var(--shadow-sm);
}

/* Table improvements */
table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}

/* Toast improvements */
.toast {
  animation: toastIn 0.2s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Smooth tab transitions */
.tab {
  transition: color var(--transition-base), border-color var(--transition-base);
}

/* Better scrollbar (dark mode) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}