/* Vluchtenlijst — [schiphol_vluchten] */
.sgvl-wrap {
  --sgvl-card:   #ffffff;
  --sgvl-border: #e5e7eb;
  --sgvl-text:   #111827;
  --sgvl-muted:  #6b7280;
  --sgvl-accent: #c81e1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--sgvl-text);
  max-width: 100%;
  overflow: hidden;            /* niets mag breder worden dan de container */
}

.sgvl-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.sgvl-logo { height:44px; width:auto; flex:0 0 auto; }
.sgvl-titel { margin:0; font-size:22px; font-weight:700; line-height:1.2; }
.sgvl-ondertitel { margin:3px 0 0; font-size:14px; color:var(--sgvl-muted); }

/* Bedieningsbalk */
.sgvl-balk {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.sgvl-richting { display:inline-flex; border:1px solid var(--sgvl-border); border-radius:9px; overflow:hidden; }
.sgvl-richting-knop {
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--sgvl-card); color:var(--sgvl-text); border:0;
  border-right:1px solid var(--sgvl-border);
}
.sgvl-richting-knop:last-child { border-right:0; }
.sgvl-richting-knop:hover { background:#f3f4f6; }
.sgvl-richting-knop.actief { background:var(--sgvl-accent); color:#fff; }

.sgvl-zoek {
  flex:1 1 200px; min-width:160px; padding:8px 12px; font-size:14px;
  border:1px solid var(--sgvl-border); border-radius:9px; background:var(--sgvl-card);
  color:var(--sgvl-text);
}
.sgvl-knop {
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--sgvl-card); color:var(--sgvl-text);
  border:1px solid var(--sgvl-border); border-radius:9px;
}
.sgvl-knop:hover { background:#f3f4f6; }
.sgvl-knop:active { transform:translateY(1px); }

.sgvl-meta { font-size:12px; color:var(--sgvl-muted); margin-bottom:8px; }

/* Tabel — één regel per vlucht, horizontaal scrollen bij veel kolommen */
.sgvl-tabel-wrap {
  border:1px solid var(--sgvl-border); border-radius:12px; overflow:hidden;
  background:var(--sgvl-card);
}
.sgvl-results { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sgvl-tabel {
  width:100%; border-collapse:collapse; font-size:13px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sgvl-th {
  position:sticky; top:0; z-index:1;
  background:#f9fafb; text-align:left; padding:9px 12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--sgvl-muted); border-bottom:1px solid var(--sgvl-border);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.sgvl-th:hover { color:var(--sgvl-text); background:#f3f4f6; }
.sgvl-th:focus-visible { outline:2px solid var(--sgvl-accent); outline-offset:-2px; }

.sgvl-rij { border-bottom:1px solid #f3f4f6; }
.sgvl-rij:last-child { border-bottom:0; }
.sgvl-rij:hover { background:#f9fafb; }
.sgvl-rij-aankomst { background:#fefce8; }
.sgvl-rij-aankomst:hover { background:#fef9c3; }

.sgvl-td { padding:8px 12px; vertical-align:middle; }
.sgvl-td-flight { font-weight:700; }
.sgvl-td-gate, .sgvl-td-pier { font-weight:600; }
.sgvl-leeg-cel { color:#d1d5db; }

/* Eerste kolom vastzetten bij horizontaal scrollen */
.sgvl-th:first-child, .sgvl-td:first-child {
  position:sticky; left:0; z-index:2; background:inherit;
  box-shadow:1px 0 0 var(--sgvl-border);
}
.sgvl-th:first-child { z-index:3; background:#f9fafb; }
.sgvl-rij .sgvl-td:first-child { background:var(--sgvl-card); }
.sgvl-rij-aankomst .sgvl-td:first-child { background:#fefce8; }

.sgvl-status, .sgvl-leeg, .sgvl-error { padding:22px 16px; text-align:center; font-size:14px; }
.sgvl-status, .sgvl-leeg { color:var(--sgvl-muted); }
.sgvl-error { color:#b91c1c; }

@media (max-width:600px) {
  .sgvl-balk { gap:8px; }
  .sgvl-zoek { flex:1 1 100%; order:3; }
  .sgvl-tabel { font-size:12px; }
  .sgvl-td, .sgvl-th { padding:7px 9px; }
}

/* ── Blokken-weergave: alles over meerdere regels ── */
.sgvl-sorteerbalk {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--sgvl-border); background:#f9fafb;
  font-size:13px;
}
.sgvl-sorteer-label { color:var(--sgvl-muted); font-weight:600; }
.sgvl-sorteer {
  padding:5px 8px; font-size:13px; border:1px solid var(--sgvl-border);
  border-radius:7px; background:var(--sgvl-card); color:var(--sgvl-text);
}
.sgvl-sorteer-richting {
  padding:5px 10px; font-size:12px; cursor:pointer; line-height:1;
  background:var(--sgvl-card); color:var(--sgvl-text);
  border:1px solid var(--sgvl-border); border-radius:7px;
}
.sgvl-sorteer-richting:hover { background:#f3f4f6; }

.sgvl-blokken { padding:12px; display:flex; flex-direction:column; gap:10px; }

.sgvl-blok {
  border:1px solid var(--sgvl-border); border-radius:10px;
  padding:10px 12px; background:var(--sgvl-card);
}
.sgvl-blok-aankomst { background:#fefce8; border-color:#fde68a; }

.sgvl-blok-kop {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:8px; padding-bottom:7px; border-bottom:1px solid #f3f4f6;
}
.sgvl-blok-titel { font-size:16px; font-weight:700; letter-spacing:.01em; }
.sgvl-blok-richting {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sgvl-muted); padding:2px 7px; border-radius:999px;
  background:#f3f4f6; border:1px solid var(--sgvl-border);
}
.sgvl-blok-aankomst .sgvl-blok-richting { background:#fef3c7; border-color:#fcd34d; color:#92400e; }

/* Hier zit de winst: de velden breken vanzelf af over meerdere regels */
.sgvl-blok-velden {
  display:flex; flex-wrap:wrap; gap:5px 18px;
}
.sgvl-veld {
  display:flex; flex-direction:column; min-width:0;
  flex:0 1 auto; padding:2px 0;
}
.sgvl-veld-label {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sgvl-muted); line-height:1.4;
}
.sgvl-veld-waarde {
  font-size:13px; font-variant-numeric:tabular-nums; line-height:1.4;
  word-break:break-word;
}
.sgvl-veld-leeg .sgvl-veld-waarde { color:#d1d5db; }

@media (max-width:600px) {
  .sgvl-blok-velden { gap:5px 14px; }
  .sgvl-blok-titel { font-size:15px; }
}

/* Duidelijker maken dat de tabel horizontaal scrolt */
.sgvl-results { scrollbar-width:thin; }
.sgvl-scroll-hint {
  padding:6px 12px; font-size:11px; color:var(--sgvl-muted);
  background:#f9fafb; border-bottom:1px solid var(--sgvl-border);
}

/* ── Kleuren ── */
/* Statuskleuren: één set variabelen, overal hergebruikt */
.sgvl-wrap {
  --sgvl-rood:   #dc2626;  --sgvl-rood-bg:   #fef2f2;  --sgvl-rood-br:   #fecaca;
  --sgvl-oranje: #ea580c;  --sgvl-oranje-bg: #fff7ed;  --sgvl-oranje-br: #fed7aa;
  --sgvl-amber:  #b45309;  --sgvl-amber-bg:  #fffbeb;  --sgvl-amber-br:  #fde68a;
  --sgvl-groen:  #15803d;  --sgvl-groen-bg:  #f0fdf4;  --sgvl-groen-br:  #bbf7d0;
  --sgvl-blauw:  #1d4ed8;  --sgvl-blauw-bg:  #eff6ff;  --sgvl-blauw-br:  #bfdbfe;
  --sgvl-grijs:  #6b7280;  --sgvl-grijs-bg:  #f9fafb;  --sgvl-grijs-br:  #e5e7eb;
}

/* Statuschip */
.sgvl-chip {
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6;
  text-transform:lowercase; white-space:nowrap; border:1px solid transparent;
}
.sgvl-chip-rood     { color:var(--sgvl-rood);   background:var(--sgvl-rood-bg);   border-color:var(--sgvl-rood-br); }
.sgvl-chip-oranje   { color:var(--sgvl-oranje); background:var(--sgvl-oranje-bg); border-color:var(--sgvl-oranje-br); }
.sgvl-chip-amber    { color:var(--sgvl-amber);  background:var(--sgvl-amber-bg);  border-color:var(--sgvl-amber-br); }
.sgvl-chip-groen    { color:var(--sgvl-groen);  background:var(--sgvl-groen-bg);  border-color:var(--sgvl-groen-br); }
.sgvl-chip-blauw    { color:var(--sgvl-blauw);  background:var(--sgvl-blauw-bg);  border-color:var(--sgvl-blauw-br); }
.sgvl-chip-grijs    { color:var(--sgvl-grijs);  background:var(--sgvl-grijs-bg);  border-color:var(--sgvl-grijs-br); }
.sgvl-chip-neutraal { color:var(--sgvl-grijs);  background:var(--sgvl-grijs-bg);  border-color:var(--sgvl-grijs-br); }

/* Gekleurde streep links: in blokken een rand, in de tabel een balkje */
.sgvl-blok.sgvl-rand-rood     { border-left:4px solid var(--sgvl-rood); }
.sgvl-blok.sgvl-rand-oranje   { border-left:4px solid var(--sgvl-oranje); }
.sgvl-blok.sgvl-rand-amber    { border-left:4px solid var(--sgvl-amber); }
.sgvl-blok.sgvl-rand-groen    { border-left:4px solid var(--sgvl-groen); }
.sgvl-blok.sgvl-rand-blauw    { border-left:4px solid var(--sgvl-blauw); }
.sgvl-blok.sgvl-rand-grijs    { border-left:4px solid var(--sgvl-grijs); }
.sgvl-blok.sgvl-rand-neutraal { border-left:4px solid var(--sgvl-grijs-br); }

.sgvl-rij .sgvl-td:first-child { border-left:4px solid transparent; }
.sgvl-rij.sgvl-rand-rood   .sgvl-td:first-child { border-left-color:var(--sgvl-rood); }
.sgvl-rij.sgvl-rand-oranje .sgvl-td:first-child { border-left-color:var(--sgvl-oranje); }
.sgvl-rij.sgvl-rand-amber  .sgvl-td:first-child { border-left-color:var(--sgvl-amber); }
.sgvl-rij.sgvl-rand-groen  .sgvl-td:first-child { border-left-color:var(--sgvl-groen); }
.sgvl-rij.sgvl-rand-blauw  .sgvl-td:first-child { border-left-color:var(--sgvl-blauw); }
.sgvl-rij.sgvl-rand-grijs  .sgvl-td:first-child { border-left-color:var(--sgvl-grijs); }

/* Route in de kop: KL1234 → BCN */
.sgvl-blok-route {
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:15px; font-weight:600; color:var(--sgvl-text);
}
.sgvl-pijl { color:var(--sgvl-accent); font-weight:700; font-size:16px; }
.sgvl-via {
  font-size:11px; font-weight:500; color:var(--sgvl-muted); margin-left:3px;
}

/* Richtingsbadge */
.sgvl-richting-d { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.sgvl-richting-a { background:#fef3c7; border-color:#fcd34d; color:#92400e; }

/* Gate- en pierbadges, gekleurd per pier */
.sgvl-pier-badge, .sgvl-gate-badge {
  display:inline-block; padding:1px 8px; border-radius:6px;
  font-weight:700; font-size:12px; line-height:1.7;
  background:#f3f4f6; color:var(--sgvl-text); border:1px solid var(--sgvl-border);
}
.sgvl-pier-A { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.sgvl-pier-B { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.sgvl-pier-C { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.sgvl-pier-D { background:#f1f5f9; border-color:#cbd5e1; color:#334155; }
.sgvl-pier-E { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.sgvl-pier-F { background:#faf5ff; border-color:#e9d5ff; color:#7e22ce; }
.sgvl-pier-G { background:#ecfeff; border-color:#a5f3fc; color:#0e7490; }
.sgvl-pier-H { background:#fdf2f8; border-color:#fbcfe8; color:#be185d; }
.sgvl-pier-M { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; }

/* Tijd die afwijkt van de planning */
.sgvl-tijd-afwijkend { color:var(--sgvl-oranje); font-weight:700; }

/* Aankomstrij iets zachter nu de status al kleurt */
.sgvl-rij-aankomst { background:#fffdf5; }
.sgvl-rij-aankomst:hover { background:#fef9e7; }
.sgvl-blok-aankomst { background:#fffdf5; border-color:#fef3c7; }
.sgvl-rij-aankomst .sgvl-td:first-child { background:#fffdf5; }

/* ── Schakelaar "Vanaf nu" ── */
.sgvl-schakelaar {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 12px; border:1px solid var(--sgvl-border); border-radius:9px;
  background:var(--sgvl-card); font-size:13px; font-weight:600;
  user-select:none; white-space:nowrap;
}
.sgvl-schakelaar:hover { background:#f3f4f6; }
.sgvl-schakelaar input { margin:0; cursor:pointer; accent-color:var(--sgvl-accent); }
.sgvl-schakelaar-tekst { color:var(--sgvl-text); }

/* Verlopen vluchten (alleen zichtbaar als "Vanaf nu" uit staat) */
.sgvl-verlopen { opacity:.55; }
.sgvl-verlopen:hover { opacity:.85; }
.sgvl-blok.sgvl-verlopen { background:#fafafa; }

/* ── Bijgewerkt-klokje en stale-while-revalidate ── */
.sgvl-update-tijd {
  font-variant-numeric: tabular-nums;
  color: var(--sgvl-muted);
}
.sgvl-bezig {
  color: var(--sgvl-accent);
  font-style: italic;
  animation: sgvl-puls 1.2s ease-in-out infinite;
}
@keyframes sgvl-puls {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.sgvl-fout-klok {
  color: var(--sgvl-oranje);
  font-size: 12px;
}

/* Tabel "oud": subtiel gedempt terwijl nieuwe data binnenkomt.
   Geen flash, geen leeg scherm — de inhoud blijft leesbaar. */
.sgvl-oud {
  opacity: .7;
  transition: opacity .15s ease;
  pointer-events: none;   /* klikken op een verversende tabel voelt raar */
}
.sgvl-results:not(.sgvl-oud) {
  transition: opacity .2s ease;
}

/* Teller terwijl de rest van de rijen binnenloopt */
.sgvl-laadt-nog {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--sgvl-muted);
  text-align: center;
  background: #f9fafb;
  border-top: 1px solid var(--sgvl-border);
}