/* Businfo — De Lijn-geel accent bovenop het gedeelde design system */

:root {
    --businfo-accent: #FFC20E;        /* De Lijn-geel */
    --businfo-accent-dark: #E0A800;
    --businfo-ink: #1a1a1a;           /* donkere tekst op geel */
    --businfo-accent-soft: rgba(255, 194, 14, 0.14);
}

/* Merknaam in de navbar */
.businfo-name { color: var(--businfo-ink); font-weight: 700; }
.businfo-suffix { color: var(--businfo-accent-dark); font-weight: 700; }
[data-bs-theme="dark"] .businfo-name { color: #f5f5f5; }

/* Primaire knoppen → geel met donkere tekst (De Lijn-stijl) */
.btn-primary {
    background: var(--businfo-accent);
    border-color: var(--businfo-accent);
    color: var(--businfo-ink);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--businfo-accent-dark);
    border-color: var(--businfo-accent-dark);
    color: var(--businfo-ink);
}

/* Actieve tab-pill */
.glass-tabs .nav-link.active { color: var(--businfo-ink) !important; }
.glass-tab-indicator { background: var(--businfo-accent) !important; }

/* ── Vertrekbord ── */
.dep-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--treinfo-border, rgba(0,0,0,.08));
}
.dep-row:last-child { border-bottom: none; }

.line-badge {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--businfo-accent);
    color: var(--businfo-ink);
}
.dep-headsign {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.dep-time {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dep-time .delay-pos { color: #dc3545; font-size: 0.78rem; display: block; font-weight: 600; }
.dep-time .delay-ok  { color: #198754; font-size: 0.72rem; display: block; font-weight: 500; }
.dep-time .rt-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #198754; margin-left: 4px; animation: rtpulse 1.6s infinite;
}
@keyframes rtpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.dep-vehicle {
    font-size: 0.72rem; color: var(--treinfo-text-muted, #888);
    display: block; margin-top: 2px;
}
.dep-cancelled { text-decoration: line-through; opacity: 0.55; }

/* Tram-badge afwijkende kleur */
.line-badge.tram { background: #0d6efd; color: #fff; }

/* ── Storingen ── */
.alert-card {
    border-left: 4px solid var(--businfo-accent);
    background: var(--businfo-accent-soft);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.alert-card h6 { font-weight: 700; margin-bottom: 4px; }
.alert-card .alert-lines { margin-top: 6px; }
.alert-card .alert-line-chip {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    background: var(--businfo-accent); color: var(--businfo-ink);
    border-radius: 6px; padding: 1px 7px; margin: 2px 2px 0 0;
}

/* ── Subnav ── */
.businfo-subnav {
  background: var(--treinfo-glass-bg, rgba(255,255,255,0.7));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--treinfo-border, rgba(0,0,0,0.07));
  position: sticky; top: 56px; z-index: 900;
}
.subnav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; text-decoration: none;
  color: var(--treinfo-text-muted, #666); font-size: 0.88rem; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.subnav-item:hover { color: var(--businfo-accent-dark, #E0A800); }
.subnav-item.active { color: #1a1a1a; border-bottom-color: var(--businfo-accent, #FFC20E); }
[data-bs-theme="dark"] .subnav-item { color: #aaa; }
[data-bs-theme="dark"] .subnav-item.active { color: #fff; }

/* ── Tracker / Kaart grid ── */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.vehicle-card {
  cursor: pointer;
  border-radius: 14px;
  padding: 14px;
  transition: transform .1s, box-shadow .1s;
}
.vehicle-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.vehicle-card .vc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; font-weight: 700; font-size: 1rem;
  padding: 5px 10px; border-radius: 8px;
  background: var(--businfo-accent); color: var(--businfo-ink);
}
.vehicle-card .vc-headsign {
  font-weight: 600; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vehicle-card .vc-vehicle { font-size: 0.78rem; color: var(--treinfo-text-muted, #888); }
.vehicle-card .vc-delay-pos { color: #dc3545; font-weight: 600; font-size: 0.82rem; }
.vehicle-card .vc-delay-ok  { color: #198754; font-size: 0.78rem; }

/* ── Rit detail ── */
.stop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--treinfo-border, rgba(0,0,0,.08));
}
.stop-row:last-child { border-bottom: none; }
.stop-row.current-stop { background: var(--businfo-accent-soft, rgba(255,194,14,.12)); }
.stop-row .sr-time {
  flex: 0 0 50px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem;
}
.stop-row .sr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-row .sr-status { flex: 0 0 auto; text-align: right; font-size: 0.78rem; }
.stop-row .sr-rt-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #198754; margin-left: 4px;
}
.stop-row.cancelled-stop .sr-name { text-decoration: line-through; opacity: 0.55; }

/* Autocomplete (overgenomen stijl) */
.station-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2000;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    max-height: 320px; overflow-y: auto; display: none; padding: 6px;
}
.station-suggestions.show { display: block; }
[data-bs-theme="dark"] .station-suggestions { background: rgba(30,30,35,0.92); border-color: rgba(255,255,255,0.1); }
.suggestion-item {
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; width: 100%;
}
.suggestion-item:hover, .suggestion-item.active {
    background: var(--businfo-accent); color: var(--businfo-ink);
}
.suggestion-item .sg-line {
    font-weight: 700; min-width: 34px;
}

/* ── Haltegroep-varianten ── */
.stop-variant-header {
    display: flex; align-items: flex-start; gap: 12px;
    width: 100%; padding: 14px 16px;
    background: none; border: none; text-align: left;
    cursor: pointer; transition: background .12s;
    border-bottom: 1px solid var(--treinfo-border, rgba(0,0,0,.06));
}
.stop-variant-header:hover { background: var(--businfo-accent-soft); }
.stop-variant-header.active { background: var(--businfo-accent-soft); }
.stop-variant-header .hv-header-left {
    flex: 1 1 auto; min-width: 0;
}
.stop-variant-header .hv-chevron {
    flex: 0 0 auto; margin-top: 2px; font-size: 1rem;
}
.hv-platform {
    display: block; font-weight: 700; font-size: 1rem; margin-bottom: 8px;
    color: var(--treinfo-text, #1a1a1a);
}
[data-bs-theme="dark"] .hv-platform { color: #f0f0f0; }

.hv-routes {
    display: flex; flex-direction: column; gap: 5px;
}
.hv-route-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem;
}
.hv-dest {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liveboard-inset {
    border-top: 1px solid var(--treinfo-border, rgba(0,0,0,.06));
}

/* Eindstation-badge (halte + vertrekbord) */
.terminus-badge {
    display: inline-flex; align-items: center;
    font-size: 0.68rem; font-weight: 600;
    background: rgba(108,117,125,0.12); color: #6c757d;
    border-radius: 6px; padding: 1px 7px;
    vertical-align: middle;
}
[data-bs-theme="dark"] .terminus-badge { background: rgba(255,255,255,0.1); color: #adb5bd; }

/* Eindhalte-badge op de variantkaart-header (prominent — perron is enkel aankomst) */
.hv-terminus-badge {
    display: inline-flex; align-items: center;
    font-size: 0.7rem; font-weight: 700;
    background: rgba(255,193,7,0.18); color: #8a6d00;
    border: 1px solid rgba(255,193,7,0.4);
    border-radius: 7px; padding: 2px 8px; margin-bottom: 8px;
}
[data-bs-theme="dark"] .hv-terminus-badge {
    background: rgba(255,193,7,0.12); color: #ffc107; border-color: rgba(255,193,7,0.3);
}

/* Eindhalte-badge per vertrekrij (compact, naast de bestemming) */
.dep-terminus-badge {
    display: inline-flex; align-items: center;
    font-size: 0.66rem; font-weight: 600;
    background: rgba(108,117,125,0.12); color: #6c757d;
    border-radius: 6px; padding: 1px 7px; margin-left: 6px;
    vertical-align: middle;
}
[data-bs-theme="dark"] .dep-terminus-badge { background: rgba(255,255,255,0.1); color: #adb5bd; }
.dep-row.dep-terminus { opacity: 0.92; }

/* ── Voertuig-historiek (dag-ritten van één bus) ── */
.vh-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; cursor: pointer;
    border-bottom: 1px solid var(--treinfo-border, rgba(0,0,0,.06));
    font-size: 0.9rem;
}
.vh-row:last-child { border-bottom: none; }
.vh-row:hover { background: rgba(255,193,7,0.08); }
.vh-badge { min-width: 34px; font-size: .74rem; padding: 2px 7px; }
.vh-dest {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vh-time { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.vh-delay { color: #dc3545; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }

/* Exploitant-regel (verrijking) */
.vc-operator { font-weight: 600; color: var(--businfo-accent-dark, #b58900); }
.dep-operator { color: var(--businfo-accent-dark, #b58900); font-weight: 600; }

/* Hercules-opzoeklink (Zone01-attributie) */
.hercules-link {
    color: var(--businfo-accent-dark, #b58900); font-weight: 600;
    text-decoration: none; font-size: 0.78rem;
}
.hercules-link:hover { text-decoration: underline; }

/* ── Omloop-strip op de rit-detailpagina ── */
.omloop-card { display: flex; flex-direction: column; gap: 6px; }
.omloop-title {
    font-size: 0.78rem; font-weight: 700; color: #6c757d;
    display: flex; align-items: center; gap: 6px;
}
.omloop-nr {
    background: rgba(108,117,125,0.14); color: #495057;
    border-radius: 5px; padding: 0 6px; font-variant-numeric: tabular-nums;
}
.omloop-veh { margin-left: auto; font-weight: 600; color: var(--businfo-accent-dark, #b58900); }
.omloop-strip {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent;
}
.omloop-strip::-webkit-scrollbar { height: 5px; }
.omloop-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
.omloop-chip {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    background: var(--treinfo-card, #fff); border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px; padding: 5px 9px; cursor: pointer;
    font-size: 0.8rem; max-width: 220px; transition: border-color .15s, transform .1s;
}
.omloop-chip:hover { border-color: var(--businfo-accent, #FFC20E); transform: translateY(-1px); }
.omloop-chip.current {
    border-color: var(--businfo-accent, #FFC20E);
    background: rgba(255,193,7,0.12); cursor: default; font-weight: 600;
}
.omloop-chip-time { font-variant-numeric: tabular-nums; font-weight: 700; color: #343a40; }
.omloop-chip-badge { min-width: 30px; font-size: .72rem; padding: 1px 6px; }
.omloop-chip-dest {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px;
    color: #495057;
}
.omloop-chip-delay { color: #dc3545; font-weight: 700; font-size: .74rem; }
.omloop-chip-cancel { color: #dc3545; font-weight: 600; font-size: .7rem; }
[data-bs-theme="dark"] .omloop-chip { background: #2a2a2e; border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .omloop-chip-time { color: #e9ecef; }
[data-bs-theme="dark"] .omloop-chip-dest { color: #ced4da; }
[data-bs-theme="dark"] .omloop-nr { background: rgba(255,255,255,.1); color: #ced4da; }

/* Geen-RT banner op de rit-detailpagina */
.rit-no-rt-banner {
    margin-top: 8px; padding: 7px 12px;
    background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.3);
    border-radius: 10px; font-size: 0.82rem; color: #856404;
    display: flex; align-items: center;
}
[data-bs-theme="dark"] .rit-no-rt-banner { background: rgba(255,193,7,0.08); color: #ffc107; border-color: rgba(255,193,7,0.2); }

/* Rit-stop tijd kolom — RT display */
.sr-times {
  flex: 0 0 60px; font-variant-numeric: tabular-nums; font-size: 0.88rem;
  text-align: right;
}
/* Tijdweergave in ritdetail — plan bovenaan (doorstreept bij vertraging), RT eronder */
.sr-time-plan {
  display: none;   /* verborgen tenzij .show */
  color: var(--treinfo-text-muted, #999);
  text-decoration: line-through;
  font-size: 0.75rem;
  line-height: 1.2;
}
.sr-time-plan.show { display: flex; align-items: baseline; gap: 3px; }
.sr-time-plan .sr-delay-chip {
  font-size: 0.68rem; font-weight: 700;
  color: #dc3545; text-decoration: none;
}
.sr-time-rt {
  font-weight: 700; font-size: 0.95rem; display: block; line-height: 1.3;
  color: inherit;   /* normaal = geen kleur; .late/.early kleuren het */
}
.sr-time-rt.late  { color: #dc3545; }
.sr-time-rt.early { color: #0d6efd; }