/* Uit base.html gehaald: geladen via <link> zodat de browser het cachet. */
    /* HTMX loading indicator */
    .htmx-indicator        { display: none; }
    .htmx-request          .htmx-indicator,
    .htmx-request.htmx-indicator { display: inline-flex; }

    /* Smooth fade for HTMX swaps */
    .htmx-swapping { opacity: 0; transition: opacity 150ms ease-in; }
    .htmx-settling { opacity: 1; transition: opacity 150ms ease-out; }

    /* Row-diff (shared.js): gewijzigde rij licht op in NS-geel, nieuwe rij faadt in */
    @keyframes row-flash {
      0%, 25% { background-color: rgba(255, 201, 23, 0.35); }
      100%    { background-color: transparent; }
    }
    @keyframes row-enter {
      0%   { opacity: 0; background-color: rgba(0, 48, 130, 0.08); }
      40%  { opacity: 1; }
      100% { background-color: transparent; }
    }
    tr.row-flash { animation: row-flash 2.4s ease-out; }
    tr.row-enter { animation: row-enter 1.2s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      tr.row-flash, tr.row-enter { animation: none; }
    }

    /* Sidebar actief item */
    .sidebar-item.active {
      background: rgba(255,255,255,0.14);
      color: white !important;
      font-weight: 600;
    }
    .sidebar-item.active::before {
      content: '';
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      background: #FFC917;
      border-radius: 0 2px 2px 0;
    }

    /* Leaflet kaart onder de sticky navbar houden. De container krijgt
       een eigen stacking context met lage z-index; interne panes
       behouden hun Leaflet-z-index voor correcte stacking. Controls
       moeten boven de hoogste pane (userLocation z=750 op de live-kaart)
       blijven, anders worden ze door markers/overlays afgedekt. */
    .leaflet-container { position: relative; z-index: 10; }
    .leaflet-control,
    .leaflet-top,
    .leaflet-bottom { z-index: 800; }

    /* NS-stijl spoornummerbadge */
    .track-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.75rem;
      height: 1.75rem;
      padding: 0 4px;
      border: 2px solid #003082;
      color: #003082;
      font-weight: 700;
      font-size: 0.78rem;
      font-family: ui-monospace, monospace;
      border-radius: 2px;
      background: #fff;
      line-height: 1;
    }
    .track-badge::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      width: 7px;
      height: 7px;
      background: #003082;
    }
    .track-badge.track-changed {
      border-color: #dc2626;
      color: #dc2626;
    }
    .track-badge.track-changed::before {
      background: #dc2626;
    }
    .track-badge.track-cancelled {
      border-color: #9ca3af;
      color: #9ca3af;
    }
    .track-badge.track-cancelled::before {
      background: #9ca3af;
    }

    /* NS-stijl stationsbord (geïnverteerde track-badge) — voor header title */
    .station-sign {
      position: relative;
      display: inline-block;
      padding: 0.35rem 0.85rem 0.35rem 0.95rem;
      border: 2px solid #fff;
      color: #fff;
      font-weight: 700;
      letter-spacing: 0.01em;
      border-radius: 2px;
      background: transparent;
      line-height: 1;
      transition: opacity 150ms ease;
    }
    .station-sign::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      width: 10px;
      height: 10px;
      background: #fff;
    }
    .station-sign:hover { opacity: 0.85; }

    /* Station autocomplete */
    .ac-dropdown { position:absolute; top:100%; left:0; right:0; z-index:50;
      background:#fff; border:1px solid #d1d5db; border-top:none;
      border-radius:0 0 0.5rem 0.5rem; box-shadow:0 4px 12px rgba(0,0,0,0.1);
      max-height:260px; overflow-y:auto; }
    .ac-item { padding:0.5rem 0.75rem; cursor:pointer; font-size:0.875rem;
      display:flex; align-items:center; gap:0.5rem; }
    .ac-item:hover, .ac-item.active { background:#eff6ff; }
    .ac-item .ac-code { font-size:0.7rem; color:#64748b; font-family:'IBM Plex Mono', ui-monospace, monospace; }
    .ac-wrap { position:relative; }

    /* View Transitions: zachte cross-fade bij paginanavigatie */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 120ms ease out-fade; }
    ::view-transition-new(root) { animation: 120ms ease in-fade; }
    @keyframes out-fade { from { opacity: 1; } to { opacity: 0; } }
    @keyframes in-fade  { from { opacity: 0; } to { opacity: 1; } }

    /* HTMX content cards: fade-in + lichte opwaartse beweging */
    @keyframes card-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .htmx-card-in {
      animation: card-in 260ms ease-out both;
    }

    /* Header is altijd blauw: alle tekst in header wit maken */
    header [class*="text-gray"], header [class*="text-ns-blue"],
    header [class*="text-red"], header [class*="text-blue"] {
      color: rgba(255,255,255,0.85) !important;
    }
    header [class*="border-ns-blue"], header [class*="border-gray"] {
      border-color: rgba(255,255,255,0.4) !important;
    }
    header [class*="hover:bg-ns-blue"]:hover {
      background: rgba(255,255,255,0.2) !important;
    }
    header select {
      background: rgba(0,0,0,0.2);
      color: white !important;
      border-color: rgba(255,255,255,0.3) !important;
    }

    /* ── Uitklapbare sidebar ─────────────────────────────────────── */
    @media (min-width: 768px) {
      #desktop-sidebar { position: absolute; top: 0; left: 0; bottom: 0; z-index: 70; }
      #main-col { margin-left: 64px; transition: margin-left 200ms ease; }
      /* Hover legt zich kortstondig over de content heen; vastgezet (touch)
         zou dat permanent zijn, dus dan schuift de content mee op. */
      #desktop-sidebar.sidebar-expanded ~ #main-col { margin-left: 220px; }
    }
    #desktop-sidebar { overflow-x: hidden; }

    /* Uitklappen kan op drie manieren, want hover bestaat niet op touch:
       aanwijzerapparaten krijgen hover, toetsenbordgebruikers focus-within,
       en touch-apparaten (iPad) de knop #sidebar-expand-btn die
       .sidebar-expanded zet. */
    #desktop-sidebar.sidebar-expanded,
    #desktop-sidebar:focus-within { width: 220px !important; }
    @media (hover: hover) {
      #desktop-sidebar:hover { width: 220px !important; }
    }

    /* De expand-knop is er alleen waar hover ontbreekt. */
    #desktop-sidebar .sidebar-expand-btn { display: none; }
    @media (hover: none) {
      #desktop-sidebar .sidebar-expand-btn {
        display: flex;
        align-items: center;
        min-height: 44px;
      }
    }

    /* Sectiekoppen: altijd zelfde hoogte; tekst transparant ingeklapt, streepje via ::after */
    #desktop-sidebar .sidebar-section-header { position: relative; color: transparent !important; }
    #desktop-sidebar .sidebar-section-header::after {
      content: '';
      position: absolute;
      left: 0.75rem; right: 0.75rem;
      top: 50%; height: 1px;
      background: rgba(255,255,255,0.15);
      transform: translateY(-50%);
    }
    #desktop-sidebar.sidebar-expanded .sidebar-section-header,
    #desktop-sidebar:focus-within .sidebar-section-header { color: rgba(255,255,255,0.6) !important; }
    #desktop-sidebar.sidebar-expanded .sidebar-section-header::after,
    #desktop-sidebar:focus-within .sidebar-section-header::after { display: none; }
    @media (hover: hover) {
      #desktop-sidebar:hover .sidebar-section-header { color: rgba(255,255,255,0.6) !important; }
      #desktop-sidebar:hover .sidebar-section-header::after { display: none; }
    }

    #desktop-sidebar .sidebar-item {
      padding: 0.5rem 0;
      gap: 0;
      justify-content: flex-start;
    }
    #desktop-sidebar .sidebar-item-icon {
      width: 64px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #desktop-sidebar .sidebar-label {
      opacity: 0;
      white-space: nowrap;
      overflow: hidden;
      transition: opacity 150ms ease;
    }
    #desktop-sidebar .sidebar-version {
      opacity: 0;
      white-space: nowrap;
      transition: opacity 150ms ease;
    }
    #desktop-sidebar.sidebar-expanded .sidebar-label,
    #desktop-sidebar.sidebar-expanded .sidebar-version,
    #desktop-sidebar:focus-within .sidebar-label,
    #desktop-sidebar:focus-within .sidebar-version {
      opacity: 1;
      transition: opacity 150ms ease 80ms;
    }
    @media (hover: hover) {
      #desktop-sidebar:hover .sidebar-label,
      #desktop-sidebar:hover .sidebar-version {
        opacity: 1;
        transition: opacity 150ms ease 80ms;
      }
    }
      /* Journey kaart: permanente stop-tooltips */
    .journey-stop-tooltip {
      background: white;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      padding: 5px 8px;
      pointer-events: none;
    }
    .journey-stop-tooltip::before { display: none; }
    .leaflet-tooltip.journey-stop-tooltip { white-space: normal; }

    /* Live trein-positie tooltip */
    .journey-live-tooltip {
      background: white;
      border: 1px solid #003082;
      border-radius: 7px;
      box-shadow: 0 2px 10px rgba(0,48,130,0.2);
      color: #003082;
      padding: 4px 8px;
      pointer-events: none;
    }
    /* Geen Leaflet-pijltje: de live badge volgt de stijl van kaartcontrols. */
    .leaflet-tooltip-top.journey-live-tooltip::before {
      display: none;
    }
    .leaflet-tooltip-top.journey-live-tooltip::after {
      display: none;
    }

    /* Gedeelde compacte ritdetails-weergave voor side panels. */
    .journey-detail-content .j-route-section { display: none !important; }
    .journey-detail-content .bg-white.rounded-xl.border.shadow-sm {
      border-radius: 8px !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: none !important;
      margin: 0 0.75rem 0.75rem !important;
    }
    .journey-stock-chip {
      border-radius: 3px !important;
      box-shadow: none !important;
    }
    .journey-stock-chip {
      border: 1px solid #e5e7eb !important;
    }
    .journey-train-badge {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .journey-stock-chip {
      align-items: flex-start !important;
    }
    .journey-detail-content .flex.flex-col.gap-6 { gap: 0 !important; }
    .journey-detail-content h2.text-base.font-semibold {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      padding: 0.5rem 1rem 0.25rem;
      margin-bottom: 0 !important;
    }
    .journey-detail-content .sm\:table-cell { display: none !important; }
    .journey-detail-content .sm\:hidden     { display: block !important; }
    .journey-detail-content .sm\:inline     { display: none !important; }
    .journey-detail-content .sm\:flex-row   { flex-direction: column !important; }
    .journey-detail-content .sm\:items-center { align-items: flex-start !important; }
    .journey-detail-content .sm\:gap-1\.5   { gap: 0 !important; }
    .journey-overview-content {
      padding: 1rem;
    }

    .panel-resize-handle {
      position: absolute;
      top: 0; right: -5px; bottom: 0;
      width: 10px;
      cursor: col-resize;
      touch-action: none;
      z-index: 1;
    }
    .panel-resize-handle::after {
      content: '';
      position: absolute;
      top: 50%; left: 4px;
      width: 2px; height: 48px;
      border-radius: 999px;
      background: rgba(0,48,130,0.22);
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 150ms ease, background 150ms ease;
    }
    .panel-resize-handle:hover::after,
    .panel-resize-handle:focus-visible::after,
    body.panel-resizing .panel-resize-handle::after {
      opacity: 1;
      background: rgba(0,48,130,0.5);
    }
    body.panel-resizing { cursor: col-resize; user-select: none; }
    @media (max-width: 767px) { .panel-resize-handle { display: none !important; } }

    /* ── Gedeeld glass blur effect voor side panels ─────────────── */
    .glass-panel {
      background: rgba(255, 255, 255, 0.60);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      border-right: 1px solid rgba(229, 231, 235, 0.5);
      box-shadow: 8px 0 40px rgba(0,0,0,0.10);
    }
    @media (max-width: 767px) {
      .glass-panel {
        background: rgba(255, 255, 255, 0.60);
        border-right: none;
        border-top: 1px solid rgba(229, 231, 235, 0.6);
        box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
        transition: box-shadow 200ms ease;
      }
      .glass-panel.panel-dragging {
        box-shadow: 0 -16px 60px rgba(0,0,0,0.25);
      }
      .glass-panel.panel-dragging .mobile-panel-grip > div {
        width: 3rem;
        height: 0.375rem;
        transition: width 150ms ease, height 150ms ease;
      }
    }

    /* Tabel-rij hover binnen glass-panels: semi-transparant zodat blur doorschijnt */
    .glass-panel tr.hover\:bg-gray-50:hover,
    .glass-panel .hover\:bg-gray-50:hover {
      background-color: rgba(249, 250, 251, 0.5) !important;
    }
    .glass-panel tr.hover\:bg-blue-50:hover,
    .glass-panel .hover\:bg-blue-50:hover {
      background-color: rgba(239, 246, 255, 0.5) !important;
    }

    /* Verstoringskaarten in glass-panels: semi-transparant */
    .glass-panel .disruption-card {
      background: rgba(255, 255, 255, 0.60) !important;
    }

    /* Frosted glass voor alle Leaflet-controls (zelfde look als filterbalk) */
    .leaflet-bar {
      background: rgba(255, 255, 255, 0.60);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      border: 1px solid rgba(229, 231, 235, 0.5);
    }
    .leaflet-bar a,
    .leaflet-bar button {
      background: transparent;
    }
    .leaflet-bar a:hover,
    .leaflet-bar button:hover {
      background: rgba(0, 48, 130, 0.08);
    }

    /* Map display control (gedeeld door index + verstoringen + afwijkingen) */
    .display-control button {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      color: #003082;
      cursor: pointer;
      line-height: 1;
      transition: background 100ms, color 100ms;
    }
    .display-control button:hover:not(.display-control-btn-active) {
      background: rgba(0, 48, 130, 0.08);
    }
    .display-control button:focus-visible {
      outline: 2px solid #003082;
      outline-offset: -3px;
    }
    .display-control .display-control-btn-active:focus-visible { outline-color: #fff; }
    .display-control i { font-size: 1rem; }
    .display-control .display-control-btn-active {
      background: #003082;
      color: #fff;
    }
    .display-control .display-control-btn-active:hover {
      background: #00256a;
    }
    .display-control .display-control-btn-active i { color: #fff !important; }

    /* ── Mobiele "Meer"-drawer en overlay boven Leaflet-kaart houden ─── */
    #meer-overlay { z-index: 1000; }
    #meer-drawer  { z-index: 1010; }

    /* Mobiele lay-out: body NS blauw voor Safari iOS 26 toolbar-sampling */
    @media (max-width: 767px) {
      body {
        height: 100dvh !important;
        background-color: #003082 !important;
      }
      /* Het blauw is alleen voor de overscroll-randen: de contentkolom krijgt
         zijn eigen lichte achtergrond, anders schijnt het blauw door overal
         waar een pagina geen opaak paneel heeft (stats-tabs, glaspanelen). */
      #main-col {
        background-color: #f9fafb;
      }

      /* iOS Safari zoomt automatisch in op invoervelden kleiner dan 16px en
         zoomt daarna niet terug. De velden staan op text-sm (14px); op mobiel
         dwingen we 16px af zodat de lay-out niet wegspringt bij focus. */
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      select,
      textarea {
        font-size: 16px;
      }
    }