html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
    :root{
      --bg: #e9effa;
      --card: #ffffff;
      --accent: #1e88e5;
      --accent-soft: rgba(30,136,229,0.12);
      --muted: #5f6b7a;
      --text: #102133;
      --border: #d0d7e2;
    }
    *{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
    body{
      margin:0;
      background:linear-gradient(180deg,#f5f7fc,#dde3f2);
      color:var(--text);
      padding:18px;
    }
    .page{max-width:100%;margin:0;}

    h1{
      font-size:1.5rem;
      margin:0 0 4px;
      letter-spacing:.03em;
    }
    h2{
      font-size:1rem;
      margin:0 0 8px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
    }
    .subtitle{
      font-size:.85rem;
      color:var(--muted);
      margin-bottom:8px;
    }

    .layout-top{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:4px;   /* tighter space under the tables */
      align-items:flex-start;
    }
    .card{
      background:#ffffff;
      border-radius:14px;
      border:1px solid var(--border);
      padding:12px 14px;
      box-shadow:0 10px 30px rgba(15,35,70,0.12);
    }
    .card.scenario{
      flex:1 1 520px;
      min-width:440px;
    }
    .card.controls{
      flex:1 1 320px;
      min-width:320px;
    }
    .card.sim-card{
      margin-top:0;
    }

    .card.controls-placeholder{
      flex:1 1 320px;
      min-height:240px;
    }

    .sim-controls{
      margin-top:4px;
      margin-bottom:8px;
      padding:8px 10px;
      background:#f4f7fd;
      border-radius:12px;
      border:1px solid #dde4f3;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:flex-end;
    }
    .sim-controls-main{
      flex:1 1 520px;
      min-width:260px;
    }
    .sim-controls-side{
      flex:0 0 220px;
      min-width:200px;
      display:flex;
      flex-direction:column;
      gap:4px;
      font-size:.75rem;
      color:var(--muted);
    }
    .sim-metrics{
      text-align:right;
    }
    .sim-controls-side input{
      width:100%;
      background:#f4f7fd;
      border-radius:9px;
      border:1px solid #c5d4f1;
      padding:3px 6px;
      font-size:.72rem;
      color:var(--text);
    }
    .sim-controls-side label{
      font-size:.68rem;
      text-transform:uppercase;
      letter-spacing:.12em;
    }
    @media (max-width:900px){
      .sim-controls{
        flex-direction:column;
        align-items:stretch;
      }
    }

    .card.schedule{
      margin-top:12px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:2px 8px;
      border-radius:999px;
      background:var(--accent-soft);
      color:var(--accent);
      font-size:.7rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      margin-bottom:4px;
    }
    .pill span{
      display:inline-block;
      width:6px;
      height:6px;
      border-radius:999px;
      background:var(--accent);
    }

    
    /* Median headway pill (green/amber/red) */
    .pill.hw-ok{
      background:#ecfdf3;
      border:1px solid #bbf7d0;
      color:#166534;
    }
    .pill.hw-warn{
      background:#fffbeb;
      border:1px solid #fed7aa;
      color:#92400e;
    }
    .pill.hw-bad{
      background:#fef2f2;
      border:1px solid #fecaca;
      color:#b91c1c;
    }

.scenario-title{
      font-weight:600;
      font-size:.9rem;
      margin-bottom:4px;
    }
    .scenario-text{
      font-size:.78rem;
      color:var(--muted);
      margin-bottom:6px;
    }
    .scenario-view-toggle{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .scenario-view-toggle-row{
      margin-top:6px;
      margin-bottom:4px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
    }
    .download-csv-inline{ white-space:nowrap; }
    .view-toggle{
      border-radius:999px;
      border:1px solid #c5d4f1;
      background:#f4f7fd;
      color:var(--muted);
      font-size:.7rem;
      padding:4px 10px;
      cursor:pointer;
      text-transform:uppercase;
      letter-spacing:.09em;
    }
    .view-toggle.active{
      background:var(--accent);
      color:#ffffff;
      border-color:var(--accent);
    }

    .scenario-table-wrapper{
      max-height:260px;
      overflow:auto;
      border-radius:10px;
      border:1px solid #dde4f3;
    }
    table{
      width:100%;
      border-collapse:collapse;
      font-size:.72rem;
    }
    thead{
      background:#f4f7fd;
      position:sticky;
      top:0;
      z-index:1;
    }
    th,td{
      padding:4px 6px;
      border-bottom:1px solid #e1e6f3;
      white-space:nowrap;
      text-align:left;
    }
    th{
      font-weight:600;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.1em;
      font-size:.7rem;
    }
    .scenario-table input{
      width:42px;
      background:#fff;
      border-radius:6px;
      border:1px solid #c5d4f1;
      padding:2px 4px;
      font-size:.7rem;
    }
    .headway-green{background:#e8f5e9;color:#2e7d32;font-weight:600;}
    .headway-red{background:#ffebee;color:#c62828;font-weight:600;}
    .headway-blue{background:#e3f2fd;color:#1565c0;font-weight:600;}
    .early{background:#fff3e0;color:#e65100;font-weight:600;}
    .late{background:#fce4ec;color:#c2185b;font-weight:600;}
    .ontime{background:#e8f5e9;color:#2e7d32;font-weight:600;}

    .controls-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:8px;
      margin-bottom:6px;
    }
    .controls-header-left{
      max-width:70%;
    }
    .sim-time-top{
      font-family:"JetBrains Mono",Consolas,monospace;
      font-size:.78rem;
      color:var(--muted);
      text-align:right;
    }
    .btn-row-top{
      display:flex;
      justify-content:flex-end;
      gap:6px;
      margin-top:4px;
      flex-wrap:wrap;
    }

    button{
      border:none;
      border-radius:999px;
      background:var(--accent);
      color:#ffffff;
      font-size:.8rem;
      padding:7px 12px;
      cursor:pointer;
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:0 8px 20px rgba(30,136,229,0.35);
      white-space:nowrap;
    }
    button.secondary{
      background:#f4f7fd;
      color:var(--accent);
      border:1px solid #c5d4f1;
      box-shadow:none;
    }
    button:active{
      transform:translateY(1px);
      box-shadow:0 4px 12px rgba(30,136,229,0.25);
    }
    button:disabled{
      opacity:0.4;
      cursor:not-allowed;
      box-shadow:none;
    }

    .control-block-text{
      font-size:.78rem;
      color:var(--muted);
      margin-bottom:8px;
    }

    .control-inputs{
      display:flex;
      gap:6px;
      align-items:flex-end;
      margin-top:6px;
      flex-wrap:wrap;
    }
    .control-inputs label{
      font-size:.68rem;
      color:var(--muted);
      display:block;
      margin-bottom:2px;
      text-transform:uppercase;
      letter-spacing:.12em;
    }
    .control-inputs input{
      width:90px;
      background:#f4f7fd;
      border-radius:9px;
      border:1px solid #c5d4f1;
      padding:3px 6px;
      color:var(--text);
      font-size:.72rem;
      outline:none;
    }
    .control-inputs select{
      background:#f4f7fd;
      border-radius:9px;
      border:1px solid #c5d4f1;
      padding:4px 6px;
      color:var(--text);
      font-size:.72rem;
      outline:none;
      min-width:120px;
    }
    .control-inputs input:focus,
    .control-inputs select:focus{
      border-color:#1e88e5;
      box-shadow:0 0 0 1px rgba(30,136,229,.25);
    }

    .control-row{
      margin-top:6px;
      font-size:.8rem;
      color:var(--muted);
    }
    .control-row span.value{color:var(--text);font-weight:600;}

    .control-buttons{
      margin-top:6px;
      display:flex;
      gap:4px;
      flex-wrap:wrap;
    }

    .scenario-header{
      margin-top:4px;
      font-size:.8rem;
      color:var(--muted);
    }
    .scenario-header span.value{color:var(--text);font-weight:600;}

    .sim-card-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:4px;
    }
    .sim-header-left{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    
    .sim-header-right{
      text-align:right;
      font-size:.78rem;
      color:var(--muted);
    }
    .location-select{
      background:#f4f7fd;
      border-radius:9px;
      border:1px solid #c5d4f1;
      padding:3px 6px;
      font-size:.72rem;
      color:var(--text);
      outline:none;
    }
    .metric-label-small{
      font-size:.68rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
    }
    .metric-value-small{
      font-size:1rem;
      font-weight:600;
    }

    
    .bus-tooltip{
      position:fixed;
      padding:4px 8px;
      border-radius:8px;
      background:rgba(15,23,42,0.96);
      color:#f9fafb;
      font-size:.7rem;
      pointer-events:none;
      box-shadow:0 4px 12px rgba(15,23,42,0.4);
      white-space:nowrap;
      z-index:999999;
      display:none;
    }
.track-wrapper{
      margin-top:6px;
      background:#f4f7fd;
      border-radius:16px;
      padding:18px 16px 16px;
      border:1px solid #dde4f3;
      position:relative;
      overflow:hidden;
    }
    .track-label{
      position:absolute;
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .track-label .main-line{
      display:flex;
      align-items:center;
      gap:4px;
    }
    .track-label span.dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--accent);
    }
    .track-label.top{left:14px;top:18px;}
    .track-label.bottom{right:14px;bottom:18px;align-items:flex-end;}
    .next-bus{
      font-size:.65rem;
      color:var(--muted);
      letter-spacing:0;
      text-transform:none;
      margin-left:14px;
    }
    .track-label.bottom .next-bus{
      margin-left:0;
      margin-right:14px;
    }

    /* AVL SVG needs extra vertical space so inbound banners rendered *below* buses
       are not clipped at the bottom edge. Also allow overflow for tags/banners. */
    svg{width:100%;height:270px;display:block;overflow:visible;}
    .track-line{
      stroke:#c4d0e8;
      stroke-width:3;
      stroke-linecap:round;
    }
    /* Broken white overlay across the whole route (grey+white as requested) */
    .track-line-hatch{
      stroke:rgba(255,255,255,0.95);
      stroke-width:2;
      stroke-linecap:round;
      stroke-dasharray:10 10;
      pointer-events:none;
    }
    .bus-rect{
      rx:9;
      ry:9;
      stroke:#0f172a;
      stroke-width:0.9;
      stroke-dasharray:none;
      shape-rendering:geometricPrecision;
      filter:drop-shadow(0 4px 6px rgba(15,23,42,0.20));
      transition:transform .18s ease, filter .18s ease;
    }
    
    .bus-good{fill:#43a047;}
    .bus-close{fill:#e53935;}
    .bus-wide{fill:#1e88e5;}
    .bus-recovery{fill:#90a4ae;opacity:.95;}
    .headway-band{opacity:0.55;}
    .headway-band-good{fill:#43a047;}
    .headway-band-close{fill:#e53935;}
    .headway-band-wide{fill:#1e88e5;}
    
    /* Pulse animations for problem buses */
    @keyframes busPulseClose{
      0%{transform:scale(1); filter:drop-shadow(0 4px 6px rgba(239,68,68,0.55));}
      50%{transform:scale(1.03); filter:drop-shadow(0 6px 10px rgba(239,68,68,0.85));}
      100%{transform:scale(1); filter:drop-shadow(0 4px 6px rgba(239,68,68,0.55));}
    }
    @keyframes busPulseWide{
      0%{transform:scale(1); filter:drop-shadow(0 4px 6px rgba(34,197,94,0.40));}
      50%{transform:scale(1.03); filter:drop-shadow(0 6px 10px rgba(34,197,94,0.80));}
      100%{transform:scale(1); filter:drop-shadow(0 4px 6px rgba(34,197,94,0.40));}
    }
    .bus-rect.bus-close{
      animation:busPulseClose 1.4s ease-in-out infinite;
    }
    .bus-rect.bus-wide{
      animation:busPulseWide 2.0s ease-in-out infinite;
    }
    /* Extra outline to make problem buses stand out even on low-contrast projectors */
    .bus-rect.bus-close,
    .bus-rect.bus-wide{
      stroke:#111827;
      stroke-width:1.2;
    }

    
    /* Stronger highlight for selected bus */
    .bus-rect.bus-selected{
      stroke-width:2;
      stroke:#0ea5e9;
      filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0));
      outline:2px solid transparent;
    }

    /* Brief emphasis when status flips into too close / too far */
    .bus-node.bus-status-emphasis{
      filter:brightness(1.25);
    }


    /* London vs Riyadh colour modes */
    body.london-mode .bus-good,
    body.london-mode .headway-band-good{
      fill:#fdd835; /* yellow for perfect headway */
    }
    body.london-mode .bus-wide,
    body.london-mode .headway-band-wide{
      fill:#43a047; /* green for far / wide gaps */
    }
    body.london-mode .legend-swatch.legend-good{
      background:#fdd835;
    }
    body.london-mode .legend-swatch.legend-wide{
      background:#43a047;
    }
    body.riyadh-mode .legend-swatch.legend-good{
      background:#43a047;
    }
    body.riyadh-mode .legend-swatch.legend-wide{
      background:#1e88e5;
    }

    /* London-specific table & label colours */
    body.london-mode .headway-green{
      /* Perfect headway shown as yellow in London */
      background:#fff9c4;
      color:#f57f17;
    }
    body.london-mode .headway-blue{
      /* Wide gaps shown as green in London */
      background:#e8f5e9;
      color:#2e7d32;
    }
    body.london-mode .bus-label{
      /* Black text on yellow/green tiles for better contrast */
      fill:#111827 !important;
    }

    .bus-selected .bus-rect{
      stroke:#ffffff;
      stroke-width:2;
      filter:drop-shadow(0 5px 10px rgba(15,23,42,0.35));
    }

    .bus-node{
      cursor:pointer;
      /* Avoid CSS transforms on SVG groups – they can fight with the SVG 'transform' attribute and cause hover-jitter */
      transition:filter .18s ease;
      transform-box: fill-box;
      transform-origin: center;
    }

    .bus-node.bus-hover{
      /* No translate/scale here to prevent the bus from visually 'jumping' when paused */
      filter:drop-shadow(0 7px 14px rgba(15,23,42,0.35));
    }

    .bus-node.bus-hover .bus-rect{
      animation:busGlow .7s ease-in-out alternate infinite;
      filter:drop-shadow(0 7px 14px rgba(37,99,235,0.55)) brightness(1.04);
    }

    .bus-label{
      font-size:.63rem;
      pointer-events:none;
      fill:#ffffff;
      text-shadow:0 1px 2px rgba(15,23,42,0.55);
    }
    .bus-line-1{font-weight:700;}
    .bus-line-2{font-size:.65rem;font-weight:700;}
    .bus-line-3{font-size:.6rem;font-weight:500;opacity:.9;}

    /* Incident ribbon inside bus box (clear at any zoom) */
    /* High-contrast incident banner (same visual weight as HOLD) */
    .bus-incident-ribbon{
      fill: #111827;           /* near-black background */
      stroke: #ef4444;         /* red outline */
      stroke-width: 1.4;
    }
    .bus-incident-ribbon-text{
      font-size: 11px;
      font-weight: 800;
      fill: #ffffff;           /* white text */
      paint-order: stroke;
      stroke: rgba(0,0,0,0.6); /* subtle dark stroke for any background */
      stroke-width: 1.6;
      stroke-linejoin: round;
      letter-spacing: 0.6px;
    }

    .bus-tag{
      font-size:.55rem;
      pointer-events:none;
      fill:#ffffff;
      text-anchor:start;
    }

    /* Incident tag banner (high contrast, must stay readable even on grey buses) */
    .bus-tag-incident-rect{
      fill: #111827 !important;      /* near-black background */
      stroke: #ef4444 !important;    /* red outline */
      stroke-width: 1.4 !important;
      opacity: 1 !important;
      filter: none !important;
    }

    .bus-tag-incident-text{
      fill: #ffffff !important;
      font-weight: 800;
      letter-spacing: 0.6px;
      paint-order: stroke;
      stroke: rgba(0,0,0,0.70);
      stroke-width: 1.8;
      stroke-linejoin: round;
      opacity: 1 !important;
    }
    .bus-trip{
      font-size:.55rem;
      pointer-events:none;
      fill:#ffffff;
      text-anchor:end;
    }

    /* tiny front "nose" piece – direction marker, filled in JS */
    .bus-nose{
      fill:rgba(15,23,42,0.16);
      stroke:rgba(15,23,42,0.55);
      stroke-width:0.7;
    }

    @keyframes busGlow{
      0%{
        filter:drop-shadow(0 0 0 rgba(59,130,246,0));
      }
      100%{
        filter:drop-shadow(0 0 10px rgba(59,130,246,0.9));
      }
    }


    .legend{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:8px;
      font-size:.7rem;
      color:var(--muted);
    }
    .legend-item{display:flex;align-items:center;gap:5px;}
    
    .legend-swatch{
      width:14px;height:7px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.15);
    }
    .legend-swatch.legend-good{background:#43a047;}
    .legend-swatch.legend-close{background:#e53935;}
    .legend-swatch.legend-wide{background:#1e88e5;}
    .legend-swatch.legend-grey{background:#90a4ae;}
    
    /* Stand departure overlay inside track */
    .stand-overlay{
      position:absolute;
      top:100px;   /* align roughly with grey box */
      left:8px;  /* slightly more left */
      right:8px; /* stretch towards Aldgate side */
      display:flex;
      justify-content:space-between;
      gap:8px;
      font-size:.7rem;
      pointer-events:none; /* children opt back in */
      z-index:20;
    }
    .stand-box{
      flex:0 0 45px;    /* fixed compact width */
      min-width:65px;
      background:#e3ebfb;
      border-radius:10px;
      border:1px solid #c5d4f1;
      padding:6px 6px 4px;
      box-shadow:0 4px 10px rgba(15,35,70,0.18);
      pointer-events:auto;
    }
    .stand-box-inbound{
      /* sits nearer Stand A (left) */
    }
    .stand-box-outbound{
      /* sits nearer Stand B (right) */
    }
    .stand-title{
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:.6rem;
      color:var(--muted);
      margin-bottom:3px;
    }
    .stand-list{
      display:flex;
      flex-direction:column;
      gap:2px;
      max-height:80px;
      overflow:auto;
    }
    .stand-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:1px 4px;
      border-radius:6px;
      background:#f4f7fd;
      cursor:pointer;
      transition:background .15s ease, transform .12s ease;
    }
    .stand-row:hover{
      background:#d0ddfa;
      transform:translateY(-1px);
    }
    .stand-row.bus-selected{
      outline:1px solid #1e88e5;
      background:#cddbf9;
    }
    .stand-bus-label{
      font-weight:600;
    }
    .stand-time-label{
      font-family:"JetBrains Mono",Consolas,monospace;
      font-size:.7rem;
    }
items:center;
      padding:2px 4px;
      border-radius:6px;
      background:#e3ebfb;
      cursor:pointer;
      transition:background .15s ease, transform .12s ease;
    }
    .stand-row:hover{
      background:#d0ddfa;
      transform:translateY(-1px);
    }
    .stand-row.bus-selected{
      outline:1px solid #1e88e5;
      background:#cddbf9;
    }
    .stand-bus-label{
      font-weight:600;
    }
    .stand-time-label{
      font-family:"JetBrains Mono",Consolas,monospace;
      font-size:.7rem;
    }


    .schedule-table-wrapper{overflow:auto;margin-top:4px;max-height:260px;}
    /* Neater schedule tables: wrap names & zebra stripes */
    .schedule-table-wrapper table th,
    .schedule-table-wrapper table td{
      white-space:normal;
      word-break:keep-all;
      padding:1px 3px;
      font-size:.68rem;
    }
    .schedule-table-wrapper table tbody tr:nth-child(even){
      background:#f8fafc;
    }
    /* Highlight current bus row in the full schedule */
    .full-sched-row.bus-current{
      background:#fff3cd !important;
      font-weight:600;
    }
    /* Stronger highlight for the exact timing-point cell */
    .full-sched-row.bus-current td.bus-current-cell{
      background:#ffe8b3 !important;
    }

    /* Small dot indicators inside full schedule cells */
    .schedule-bus-dots{
      display:flex;
      flex-wrap:wrap;
      gap:2px;
      margin-top:1px;
    }
    .schedule-bus-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      display:inline-block;
    }
    /* Abstract state classes */
    .schedule-bus-dot.state-ontime{opacity:0.95;}
    .schedule-bus-dot.state-early{opacity:0.95;}
    .schedule-bus-dot.state-late{opacity:0.95;}
    .schedule-bus-dot.state-action{opacity:0.95;}

    /* London theme colours */
    body.london-mode .schedule-bus-dot.state-ontime{background:#fdd835;} /* yellow perfect */
    body.london-mode .schedule-bus-dot.state-early{background:#66bb6a;}  /* green early */
    body.london-mode .schedule-bus-dot.state-late{background:#ef5350;}   /* red late */
    body.london-mode .schedule-bus-dot.state-action{background:#42a5f5;} /* blue for actions */

    /* Riyadh theme colours */
    body.riyadh-mode .schedule-bus-dot.state-ontime{background:#22c55e;} /* green good */
    body.riyadh-mode .schedule-bus-dot.state-early{background:#a3e635;}  /* lime early */
    body.riyadh-mode .schedule-bus-dot.state-late{background:#f97316;}   /* orange late */
    body.riyadh-mode .schedule-bus-dot.state-action{background:#6b7280;} /* grey for actions */



    .schedule-tables-row{display:flex;gap:10px;margin-top:6px;align-items:flex-start;}
    .schedule-table-card{flex:1 1 0;min-width:0;}
    .schedule-title{font-size:.8rem;font-weight:600;margin-bottom:4px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;}

    .status-ok{color:#2e7d32;}
    .status-close{color:#e53935;font-weight:600;}
    .status-wide{color:#1e88e5;font-weight:600;}
    .gap-ok{background:#e8f5e9;color:#2e7d32;font-weight:600;}
    .gap-close{background:#ffebee;color:#c62828;font-weight:600;}
    .gap-wide{background:#e3f2fd;color:#1565c0;font-weight:600;}

    /* Route infrastructure (stops/points + spine) */
    .route-point{
      fill:#f8fafc;               /* light fill so it pops on yellow/green spine */
      stroke:#111827;             /* strong outline */
      stroke-width:1.6;
      pointer-events:none;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
    }
    .route-label{
      font-size:.6rem;
      fill:#111827;
      font-weight:600;
      dominant-baseline: middle;
      alignment-baseline: middle;
      pointer-events:none;
      paint-order: stroke;
      stroke: rgba(248,250,252,.95); /* halo for readability over buses */
      stroke-width:3;
      stroke-linejoin: round;
    }
    .route-connector{
      stroke:#c4d0e8;
      stroke-width:2;
      stroke-dasharray:2 2;
      stroke-linecap:round;
      pointer-events:none;
      shape-rendering: geometricPrecision;
    }
    /* City-specific connector colours */
    body.london-mode .route-connector{
      stroke:#fdd835;  /* operator yellow spine */
      stroke-width:10;
      stroke-dasharray:none;
    }
    body.riyadh-mode .route-connector{
      stroke:#43a047;  /* Riyadh green spine */
      stroke-width:10;
      stroke-dasharray:none;
    }
    body.london-mode .route-label{
      fill:#111827;
    }



    .bus-incident{

    /* Ghost (not logged on) buses: broken outline, no fill, no status colour */
    .bus-rect.bus-ghost{
      fill: none !important;
      stroke: #64748b !important;
      stroke-width: 1.4 !important;
      stroke-dasharray: 5 4 !important;
      opacity: 0.75;
      filter: none !important;
      animation: none !important;
    }
    .bus-node.bus-ghost .bus-label{
      fill: #334155 !important;
      text-shadow: none !important;
      opacity: 0.9;
    }

      fill:#263238;
      stroke:#ffffff;
      stroke-width:1.6;
    }

    .incident-popup{
      position:fixed;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%) scale(.92);
      background:rgba(15,23,42,0.96);
      color:#f9fafb;
      padding:18px 26px;
      border-radius:18px;
      box-shadow:0 18px 45px rgba(15,23,42,0.7);
      font-size:.9rem;
      letter-spacing:.03em;
      opacity:0;
      pointer-events:none;
      z-index:9999;
      max-width:520px;
      text-align:center;
      transition:opacity .25s ease, transform .25s ease;
    
      white-space: pre-line;
}
    .incident-popup.show{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
    }

    /* Road-closure / diversion warning – full-width prominent banner */
    .incident-popup.road-closure-popup{
      left:50%;
      top:18%;
      transform:translate(-50%, -50%) scale(.96);
      width:min(1100px, 96vw);
      max-width:96vw;
      font-size:1.6rem;
      line-height:1.35;
      padding:26px 34px;
      border-radius:22px;
      box-shadow:0 22px 60px rgba(15,23,42,0.85);
      text-align:center;
    }
    .incident-popup.road-closure-popup.show{
      transform:translate(-50%, -50%) scale(1);
    }
    @media (max-width:900px){
      .card.scenario{min-width:100%;}
      .card.controls{min-width:100%;}
    }

    /* Bus command modal */
    .bus-command-backdrop{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,0.35);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:9999;
    }
    .bus-command-backdrop.show{
      display:flex;
    }
    .bus-command-dialog{
      transform: translateY(-75px); /* move up 2cm */
      background:#ffffff;
      border-radius:16px;
      padding:14px 16px 12px;
      box-shadow:0 18px 45px rgba(15,35,70,0.45);
      width:640px;
      max-width:96%;
      font-size:.8rem;
      color:var(--text);
    }
    .bus-command-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:6px;
    }
    .bus-command-title{
      font-weight:600;
      font-size:.85rem;
    }
    .bus-command-close{
      background:#f4f7fd;
      color:var(--muted);
      box-shadow:none;
      border:1px solid #c5d4f1;
      padding:4px 8px;
      font-size:.8rem;
    }
    .bus-command-info{
      font-size:.75rem;
      color:var(--muted);
      margin-bottom:4px;
    }

    .bus-command-headway-line{
      margin-top:2px;
      font-size:.7rem;
      color:var(--muted);
    }
    .bus-command-info strong{
      color:var(--text);
      font-weight:600;
    }
    #busCommandMain{
      display:flex;
      flex-direction:column;
      gap:4px;
      margin-top:6px;
    }
    #busCommandMain button{
      width:100%;
      justify-content:center;
    }
    .bus-command-lock{
      margin-top:8px;
      padding:8px 10px;
      border-radius:10px;
      font-size:0.78rem;
      line-height:1.1rem;
      border:1px solid #fecaca;
      background:#fef2f2;
      color:#991b1b;
    }
    .bus-command-dialog.locked #busCommandMain button,
    .bus-command-dialog.locked .button-row button{
      opacity:0.55;
      cursor:not-allowed;
    }

    #busCommandHoldPane,
    #busCommandCurtailPane{
      margin-top:8px;
      font-size:.75rem;
    }
    #busCommandHoldPane label,
    #busCommandCurtailPane label{
      display:block;
      margin-bottom:4px;
      font-size:.7rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
    }
    #busCommandHoldPane input,
    #busCommandCurtailPane select{
      width:100%;
      background:#f4f7fd;
      border-radius:9px;
      border:1px solid #c5d4f1;
      padding:4px 6px;
      font-size:.8rem;
      margin-bottom:6px;
    }
    #busCommandHoldPane .button-row,
    #busCommandCurtailPane .button-row{
      display:flex;
      gap:6px;
      justify-content:flex-end;
    }

  
.hiddenControls {
  display: none !important;
}

.ewt-strip{
  margin:6px 0 4px 0;
  padding:4px 10px;
  border-radius:999px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
  border:1px solid transparent;
  background:#f1f5f9;
}
.ewt-strip span.label{
  font-weight:600;
}

.theme-indicator-pill{
  margin-left:auto;
  padding:2px 8px;
  border-radius:999px;
  font-size:.7rem;
  background:#eef2ff;
  color:#4b5563;
  border:1px solid #c7d2fe;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ewt-strip.ok{
  background:#ecfdf3;
  border-color:#bbf7d0;
  color:#166534;
}
.ewt-strip.warn{
  background:#fffbeb;
  border-color:#fed7aa;
  color:#92400e;
}
.ewt-strip.bad{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}

.ewt-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.1rem;
}

    .ewt-compact-line{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      align-items:center;
      font-size:0.8rem;
    }
    .ewt-compact-line .spacer{
      margin:0 4px;
    }
    
/* Session header (trainer) */
.session-header{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.06);
}
.session-label{
  opacity:.9;
  font-weight:600;
  white-space:nowrap;
}
.session-input{
  width:180px;
  max-width:40vw;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  outline:none;
}
.session-input::placeholder{
  opacity:.7;
}

.ewt-start-row{
      justify-content:center;
      margin-top:-10px;
    }



.sim-controls-main .control-inputs,
.sim-controls-main .control-row{
  display:none;
}
.control-buttons #slowBtn,
.control-buttons #btnSkip,
.control-buttons #btnCurtail,
.control-buttons #btnDepart,
.control-buttons #btnCancelLast{
  display:none;
}
.control-buttons{
  justify-content:flex-start;
}

.container, .card, #avlPanel, .outer-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

#avlPanel svg {
  width: 100% !important;
}

/* Zebra stripes for LIVE (scenario) tables only */
.scenario-table tbody tr:nth-child(even){
  background:#f8fafc;
}

/* Slightly tighter rows so more buses fit on screen */
.scenario-table tbody tr td{
  padding-top:2px;
  padding-bottom:2px;
}

.simulator-layout{ padding-right:540px; }

/* Right-hand column: Stand A/B monitors + Dispatcher Log
   Fixed width, always fully visible, never stretches main simulator. */
.right-panel{
  position:fixed;
  top:10px;
  right:12px;
  bottom:25px;
  width:520px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
}

/* Stand monitor should behave like a normal card inside the right-panel */
.right-panel .stand-hold-monitor{
  position:static;
  width:100%;
  padding:10px 12px;
  z-index:auto;
}

/* Dispatcher log card fills remaining height in the right-panel */
.right-panel .dispatch-log-card.dispatch-log-fixed{
  margin-top:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.right-panel .dispatch-log-card.dispatch-log-fixed .dispatch-log-wrapper{
  flex:1 1 auto;
  max-height:none;
}

/* Dispatcher log – operator style panel */
.dispatch-log-card{
  margin-top:12px;
  background:#ffffff;
  border-radius:14px;
  border:1px solid var(--border);
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(15,35,70,0.14);
}

.dispatch-log-title{
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:6px;
}

.dispatch-log-subtitle{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:6px;
}

.dispatch-log-wrapper{
  max-height:180px;
  overflow:auto;
  border-radius:10px;
  border:1px solid #dde4f3;
  background:#f8fafc;
}

.dispatch-log-wrapper table{
  width:100%;
  border-collapse:collapse;
  font-size:.7rem;
}

.dispatch-log-wrapper th,
.dispatch-log-wrapper td{
  padding:3px 6px;
  border-bottom:1px solid #e1e6f3;
  white-space:nowrap;
}

.dispatch-log-wrapper thead{
  background:#eef2ff;
}

.dispatch-log-wrapper th{
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.dispatch-log-wrapper tbody tr:nth-child(even){
  background:#f4f7fd;
}

/* “now” time style – looks like AVL/ops log */
.dispatch-log-time{
  font-family:"JetBrains Mono",Consolas,monospace;
}

.dispatch-log-action{
  font-weight:600;
}

/* Colour pill for dispatcher log actions */
.log-tag{
  display:inline-block;
  padding:1px 6px;
  border-radius:999px;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ffffff;
}
.log-hold{ background:#2563eb; }
.log-curtail{ background:#f97316; }
.log-incident{ background:#dc2626; }
.log-resume{ background:#16a34a; }


.dispatch-log-bus{
  font-weight:600;
}

/* Stand windows: bus number centered, time hidden, first row highlighted */
.stand-bus-label{
  flex:1 1 auto;
  text-align:center;
  font-size:0.85rem;
  font-weight:600;
}
.stand-time-label{
  display:none !important;
}
.stand-list .stand-row:first-child{
  outline:2px solid #2563eb;
  background:#dbeafe;
  box-shadow:0 0 0 1px rgba(37,99,235,0.35);
}


/* Hide Stand A/B overlay box completely (use only real stand buses on the line) */
.stand-overlay{display:none !important;}


/* Floating dispatcher log overlay inside the track panel */
.dispatch-log-floating{
  position:fixed;
  top:10px;
  right:12px;
  bottom:25px;
  width:520px;
  max-height:none;
  background:white;
  border-radius:12px;
  border:1px solid #c5d4f1;
  padding:10px;
  box-shadow:0 8px 24px rgba(15,35,70,0.20);
  z-index:9999;
  display:flex;
  flex-direction:column;
}

.dispatch-log-wrapper{
  flex:1;
  max-height:none;
  overflow-y:auto;
}

/* Make sure the track wrapper can host absolute children */
.track-wrapper{
  position:relative;
}



/* === Injected: London live-table colours + bus command mini-map === */

/* London-specific LIVE TABLE status & gap colours */
body.london-mode .status-ok{
  /* "Good" = yellow (matches perfect headway) */
  color:#fbbf24;
  font-weight:600;
}

body.london-mode .status-wide{
  /* "Too far" = green (matches wide-gap buses) */
  color:#22c55e;
  font-weight:600;
}

body.london-mode .gap-ok{
  /* Perfect headway row background = yellow */
  background:#fff9c4;
  color:#92400e;
  font-weight:600;
}

body.london-mode .gap-close{
  /* Keep close gaps clearly red */
  background:#ffebee;
  color:#c62828;
  font-weight:600;
}

body.london-mode .gap-wide{
  /* Wide gaps = green row background */
  background:#e8f5e9;
  color:#166534;
  font-weight:600;
}

/* Bus command – mini live route map */
.bus-command-body {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 6px;
}

.bus-command-main-col {
  flex: 1 1 auto;
  min-width: 0;
}

.bus-command-map-col {
  flex: 0 0 320px;  /* wider map pane */
  border-left: 1px solid #e2e8f0;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bus-command-map-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

#busCommandMapSvg {
  width: 100%;
  height: 220px;  /* taller map */
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

/* Depart-at control (bus command modal, right column) */
.bus-depart-at {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.bus-depart-at-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 6px;
}

.bus-depart-at-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#busCmdDepartAtTime {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

#busCmdDepartAtApply {
  flex: 0 0 auto;
}

.bus-map-route {
  fill: none;
  stroke: #9ca3af;
  stroke-width: 6; /* wider base road */
}

body.london-mode #busCommandMapSvg .bus-map-route {
  stroke: #fbbf24; /* industry-style yellow spine */
  stroke-width: 10; /* wider carriageway */
}

body.riyadh-mode #busCommandMapSvg .bus-map-route {
  stroke: #22c55e; /* Riyadh green spine */
  stroke-width: 3;
}

.bus-map-stop {
  fill: #64748b;
}

.bus-map-stop-label {
  font-size: .55rem;
  fill: #475569;
}

.bus-map-bus-selected {
  fill: #1e293b;
  stroke: #ffffff;
  stroke-width: 1.6;
}

.bus-map-bus-other {
  fill: #0ea5e9;
  stroke: #e0f2fe;
  stroke-width: 1.2;
}

.bus-map-bus-label {
  font-size: .6rem;
  fill: #111827;
  font-weight: 600;
}

@media (max-width: 800px) {
  .bus-command-body {
    flex-direction: column;
  }
  .bus-command-map-col {
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding-left: 0;
    padding-top: 8px;
    flex: 1 1 auto;
  }
}



/* Direction-specific colours for mini route map buses */
.bus-map-bus-selected.bus-outbound,
.bus-map-bus-other.bus-outbound {
  fill: #22c55e; /* outbound = green */
}

.bus-map-bus-selected.bus-inbound,
.bus-map-bus-other.bus-inbound {
  fill: #3b82f6; /* inbound = blue */
}

/* Fullscreen route map overlay */
.bus-map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.bus-map-overlay.show {
  display: flex;
}

.bus-map-overlay-inner {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.45);
  padding: 16px 20px 14px;
  width: min(950px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bus-map-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.bus-map-overlay-close {
  border: none;
  background: #e5e7eb;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.bus-map-overlay-close:hover {
  background: #d1d5db;
}

#busMapOverlaySvg {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.bus-map-overlay-caption {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #4b5563;
  margin-top: 2px;
}

.bus-map-overlay-caption .inbound-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #3b82f6;
  margin-right: 6px;
}

.bus-map-overlay-caption .outbound-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  margin-right: 6px;
}


/* Flow arrows along the mini/overlay route map */
.flow-arrow-outbound {
  fill: none;
  stroke: #22c55e;
  stroke-width: 1.5;
}

.flow-arrow-inbound {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 1.5;
}


/* === Diversion / road-closure segment (red + broken white overlay) === */
.road-closure-seg{
  stroke:#e53935;
  stroke-width:6;
  stroke-linecap:round;
}
.road-closure-hatch{
  stroke:#ffffff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:7 12;
  stroke-dashoffset:4;
  pointer-events:none;
}

/* Diversion buses appear 50% faded */
.bus-node.bus-diversion{
  opacity:0.5;
}


/* === Delay zone segment (blue + dashed overlay) === */
.delay-zone-seg{
  stroke:#1e88e5;
  stroke-width:6;
  stroke-linecap:round;
  opacity:0.95;
}
.delay-zone-hatch{
  stroke:#b3e5ff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:10 10;
  stroke-dashoffset:2;
  pointer-events:none;
  opacity:0.9;
}

/* Delay zone HUD */
.delay-zone-hud{
  position:fixed;
  top:86px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:12px;
  background:rgba(10, 25, 55, 0.65);
  border:1px solid rgba(120, 200, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#eaf6ff;
  font-weight:700;
  letter-spacing:0.2px;
  z-index:9999;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 0 26px rgba(30,136,229,0.25);
}

/* Popup styling for delay zone */
.incident-popup.delay-zone-popup{
  border:1px solid rgba(120, 200, 255, 0.45);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 40px rgba(30,136,229,0.35);
}

/* === Diversion / road-closure visual (dotted) === */
.bus-node.bus-diversion .bus-rect{
  stroke-dasharray: 5 3;
  stroke-width: 2.2;
}
.bus-map-bus-other.bus-diversion,
.bus-map-bus-selected.bus-diversion{
  stroke-dasharray: 3 2;
  stroke-width: 2;
}


/* === Diversion blocks curtailment timing points (grey-out on diagram) === */
.route-point.diversion-blocked{
  fill:#cbd5e1 !important;
}
.route-label.diversion-blocked{
  fill:#94a3b8 !important;
}


/* === Full schedule CSV export === */
.schedule-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin: 6px 2px 10px;
}
.schedule-actions .view-toggle{
  padding: 8px 12px;
  font-size: 12.5px;
}


/* === PATCH v9: Action banner + priority highlight + command preview + HW unit + log grouping === */
.action-banner{
  margin:6px 0;
  padding:6px 12px;
  border-radius:10px;
  font-size:0.8rem;
  font-weight:600;
  background:#fff3cd;
  color:#92400e;
  border:1px solid #fde68a;
}
.action-banner.hidden{display:none;}
/* Hide the in-table Action banner (we surface this in the bottom KPI tile instead) */
.action-banner{display:none !important;}

.bus-node.bus-priority .bus-rect{
  stroke:#ef4444;
  stroke-width:4;
}
.bus-node.bus-priority-wide .bus-rect{
  stroke:#22c55e;
  stroke-width:4;
}

/* Bus command preview box */
.command-preview{
  margin-top:6px;
  font-size:0.75rem;
  padding:6px 8px;
  background:#f8fafc;
  border-radius:8px;
  border:1px solid #e5e7eb;
  color:#374151;
}

/* Quiet headway unit (SVG tspan) */
.bus-line-2 .hw-unit{
  font-size:.55rem;
  opacity:.72;
}

/* Dispatcher log warning tag */
.log-warn{ background:#fbbf24; color:#111827; }

.bus-el{
  font-size:0.55rem;
  font-weight:700;
  fill:#111827;
}
.bus-el.E{ fill:#16a34a; }
.bus-el.L{ fill:#dc2626; }


/* Patch1 classroom hidden labels */
#trainerPasswordLabel, #traineeNameLabel { display: inline-block; }


/* Trip delta on bus badge (SVG tspans) */
.trip-delta-late{
  fill:#ffffff;                 /* white = readable on red bus */
  font-weight:800;
  paint-order:stroke;
  stroke:rgba(0,0,0,0.55);      /* outline for contrast */
  stroke-width:2px;
  stroke-linejoin:round;
}

.trip-delta-early{
  fill:#102133;                 /* dark text = readable on green/yellow */
  font-weight:800;
  paint-order:stroke;
  stroke:rgba(255,255,255,0.45); /* subtle outline */
  stroke-width:2px;
  stroke-linejoin:round;
}
/* Fullscreen overlay prompt */
.fs-overlay{
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.fs-overlay-card{
  width: min(520px, 92vw);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  padding: 18px 18px 16px;
  text-align:center;
}
.fs-overlay-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.fs-overlay-sub{
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 14px;
}
.fs-overlay-btn{
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(30,136,229,0.95);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
}
.fs-overlay-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.hint{display:inline-block;margin-top:10px;font-size:13px;opacity:0.85;}

/* Trip delta on bus badge */
.trip-delta-ontime{ fill:#111; font-weight:700; }


/* === Live EWT HUD (soft colours, OK/WARN/BAD + pulse on breach) === */
.ewt-strip{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  width:min(420px, calc(100vw - 24px));
  padding:10px 12px;
  border-radius:14px;
  display:block;
  background:rgba(248,250,252,.92);
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 10px 30px rgba(15,23,42,.12);
  backdrop-filter: blur(8px);
}

.ewt-hud-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.ewt-hud-title{
  font-weight:800;
  letter-spacing:.08em;
  font-size:.72rem;
  color:#334155;
}
.ewt-hud-pill{
  font-size:.72rem;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(226,232,240,.9);
  color:#334155;
  border:1px solid rgba(148,163,184,.4);
}

.ewt-hud-main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ewt-hud-value{
  font-size:2.2rem;
  font-weight:900;
  line-height:1;
  color:#0f172a;
}
.ewt-hud-unit{
  margin-left:6px;
  font-size:.95rem;
  font-weight:800;
  color:#475569;
}
.ewt-hud-meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:150px;
}
.ewt-hud-target{
  font-size:.8rem;
  color:#334155;
  font-weight:700;
}
.ewt-hud-delta{
  font-size:.78rem;
  color:#475569;
  font-weight:800;
}

.ewt-hud-bar{
  margin-top:10px;
  height:7px;
  border-radius:999px;
  background:rgba(226,232,240,.9);
  overflow:hidden;
  border:1px solid rgba(148,163,184,.25);
}
.ewt-hud-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(34,197,94,.9);
  transition:width .25s ease;
}

.ewt-hud-sub{
  margin-top:8px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  color:#475569;
  font-size:.78rem;
  font-weight:700;
}
.ewt-hud-note{
  margin-top:6px;
  font-size:.72rem;
  color:#64748b;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* State colours */
.ewt-strip.ok{
  border-color:rgba(34,197,94,.35);
}
.ewt-strip.ok .ewt-hud-pill{
  background:rgba(220,252,231,.9);
  color:#166534;
  border-color:rgba(34,197,94,.25);
}
.ewt-strip.ok .ewt-hud-bar-fill{ background:rgba(34,197,94,.9); }

.ewt-strip.warn{
  border-color:rgba(245,158,11,.4);
}
.ewt-strip.warn .ewt-hud-pill{
  background:rgba(254,243,199,.95);
  color:#92400e;
  border-color:rgba(245,158,11,.25);
}
.ewt-strip.warn .ewt-hud-bar-fill{ background:rgba(245,158,11,.9); }

.ewt-strip.bad{
  border-color:rgba(239,68,68,.55);
}
.ewt-strip.bad .ewt-hud-pill{
  background:rgba(254,226,226,.95);
  color:#991b1b;
  border-color:rgba(239,68,68,.3);
}
.ewt-strip.bad .ewt-hud-bar-fill{ background:rgba(239,68,68,.92); }

/* Pulse/shake when BAD triggers */
@keyframes ewtPulse{
  0%{ transform:translateX(-50%) scale(1); box-shadow:0 10px 30px rgba(15,23,42,.12); }
  40%{ transform:translateX(-50%) scale(1.02); box-shadow:0 14px 40px rgba(239,68,68,.22); }
  100%{ transform:translateX(-50%) scale(1); box-shadow:0 10px 30px rgba(15,23,42,.12); }
}
@keyframes ewtShake{
  0%{ transform:translateX(-50%) translateX(0); }
  20%{ transform:translateX(-50%) translateX(-4px); }
  40%{ transform:translateX(-50%) translateX(4px); }
  60%{ transform:translateX(-50%) translateX(-3px); }
  80%{ transform:translateX(-50%) translateX(3px); }
  100%{ transform:translateX(-50%) translateX(0); }
}
.ewt-strip.bad.beat{
  animation: ewtPulse .6s ease-out, ewtShake .45s ease-in-out;
}


/* Stand HOLD departure display: D HH:MM */
.bus-dep{ font-size:11px; font-weight:800; paint-order:stroke; stroke:#ffffff; stroke-width:3px; }


/* Stand Hold Monitor (buses held at Stand A/B only) */
.stand-hold-monitor{
  position:absolute;
  right: 22px;
  top: 18px;
  width: 260px;
  padding: 10px 12px;
  z-index: 6;
  pointer-events: auto;
}

/* Stand hold monitor – top placement (next to Dispatcher Log, not on the schematic) */
.stand-hold-monitor-top{
  position: fixed;
  top: 10px;
  /* Place just to the left of the fixed Dispatcher Log (520px wide + margins). */
  right: 546px;
  width: 320px;
  z-index: 9998;
}
.stand-hold-monitor-cols{
  display:flex;
  gap:10px;
}
.stand-hold-col{
  flex:1 1 0;
  min-width:0;
}
.stand-hold-title{
  font-weight:700;
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#2d3b55;
  margin-bottom:6px;
}
.stand-hold-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height: 22px;
}
.stand-hold-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f7faff;
}
.stand-hold-row-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.stand-hold-bus{
  font-weight:700;
  font-size:12px;
  color:#1b2a43;
  white-space:nowrap;
}
.stand-hold-hw{
  font-weight:700;
  font-size:11px;
  color:#3a4a66;
  white-space:nowrap;
}
.stand-hold-dep{
  font-weight:700;
  font-size:12px;
  color:#1b2a43;
}
.stand-hold-empty{
  color: var(--muted);
  font-size:12px;
  padding:4px 2px;
}



/* Stand monitor: meta + one-line rows */
.stand-hold-meta{
  font-size: 12px;
  color: #64748b;
  margin: 2px 0 8px;
  white-space: nowrap;
}
.stand-hold-row.one-line{
  display:block;
  padding: 6px 8px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 10px;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}


/* Stand hold monitor (right column) */
.stand-hold-line{
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #f8fafc;
  margin: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.stand-hold-empty{
  font-size: 12px;
  opacity: 0.7;
  padding: 6px 8px;
}


/* === Legal footer (small + unobtrusive) === */
.app-disclaimer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6px;
  padding: 6px 12px;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(30,41,59,0.55);
  text-align: center;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
  text-wrap: balance;
}
.app-disclaimer-sep{ padding: 0 8px; opacity: 0.45; }
@media (max-width: 900px){
  .app-disclaimer{ font-size: 9px; padding: 6px 10px; }
}




/* =========================================================
   STEP 2 UI: Full-width main view + floating Stand A/B cards
   - Removes reserved space for right column
   - Stand A and Stand B become two floating cards (like EWT)
   ========================================================= */
.simulator-layout{
  padding-right:0 !important; /* remove reserved space for fixed right column */
}

/* Convert the former right-panel column into a lightweight floating tray */
.right-panel{
  position:fixed !important;
  top:20px !important;
  right:12px !important;
  bottom:auto !important;
  width:auto !important;
  max-width:unset !important;
  display:flex !important;
  flex-direction:row !important;
  gap:12px !important;
  align-items:flex-start !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  pointer-events:auto; /* floating tray must remain clickable (contains dispatcher flyout) */
}

/* Stand monitor becomes a container only; individual columns become cards */
#standHoldMonitor{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:none;
}
#standHoldMonitor .stand-hold-monitor-cols{
  display:flex;
  flex-direction:row;
  gap:12px;
}
#standHoldMonitor .stand-hold-col{
  width:252px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px 8px;
  box-shadow:0 10px 30px rgba(15,35,70,0.12);
  pointer-events:auto; /* enable interaction */
}
#standHoldMonitor .stand-hold-title{
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:2px;
}
#standHoldMonitor .stand-hold-meta{
  color:var(--muted);
  font-size:.74rem;
  margin-bottom:6px;
}

/* Ensure the dispatcher log flyout still works on top */
.dispatch-flyout,
.dispatch-fab{
  pointer-events:auto;
  z-index:10000;
}

/* Avoid the floating cards covering important top controls on smaller screens */
@media (max-width: 1200px){
  .right-panel{ top:64px !important; }
}



/* BOTTOM DOCK: KPI + RT */
.bottom-dock{
  position:fixed;
  left:16px;
  right:16px;
  bottom:44px; /* sits above disclaimer */
  z-index: 9000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none; /* allow map interaction; children re-enable */
}

.bottom-dock .card{ pointer-events:auto; }

.kpi-dock{
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.10);
}

.kpi-tiles{
  display:flex;
  gap:10px;
  align-items:stretch;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow:hidden;
}

.kpi-tile{
  flex:0 0 140px;
  min-width: 120px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 10px 12px;
}


/* KPI pulse on change */
.kpi-tile.kpi-pulse{
  animation: kpiPulse 420ms ease-out;
}
@keyframes kpiPulse{
  0%{ transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  35%{ transform: scale(1.03); box-shadow: 0 10px 24px rgba(15,23,42,0.18); }
  100%{ transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .kpi-tile.kpi-pulse{ animation: none; }
}


.kpi-label{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.65);
  font-weight: 800;
  line-height: 1.2;
}

.kpi-value{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
  display:flex;
  gap:6px;
  align-items:baseline;
}

.kpi-unit{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
}

.kpi-currency{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
  margin-right: 4px;
}

.rt-dock{
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.10);
  display:flex;
  gap:12px;
  align-items:center;
}

.rt-dock-left{
  min-width: 220px;
  max-width: 320px;
}

.rt-dock-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.75);
  font-weight: 900;
  line-height:1.2;
}

.rt-dock-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(15,23,42,0.55);
  font-weight: 600;
  line-height: 1.2;
}

.rt-dock-strip{
  flex: 1 1 auto;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.rt-chip{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  font-size: 12px;
  color: rgba(15,23,42,0.92);
  min-width: 280px;
}

.rt-chip .rt-t{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
}

.rt-chip .rt-bus{ font-weight: 900; }
.rt-chip .rt-issue{ font-weight: 800; color: rgba(15,23,42,0.72); }
.rt-chip .rt-action{ font-weight: 900; }
.rt-chip .rt-rt{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
}
.rt-chip .rt-outcome{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
}

.rt-chip.outcome-good .rt-outcome{ background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: rgba(21,128,61,0.95); }
.rt-chip.outcome-bad .rt-outcome{ background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: rgba(185,28,28,0.95); }
.rt-chip.outcome-neutral .rt-outcome{ background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.22); color: rgba(55,48,163,0.95); }

@media (max-width: 1200px){
  .kpi-tiles{ flex-wrap: wrap; }
  .kpi-tile{ min-width: 180px; }
  .rt-dock-left{ display:none; }
}
@media (max-width: 900px){
  .bottom-dock{ left:10px; right:10px; bottom:54px; }
  .kpi-value{ font-size: 18px; }
  .rt-chip{ min-width: 240px; }
}


/* --- KPI Dock: Action recommended tile --- */
.kpi-tile.kpi-tile-wide{ flex: 1 1 auto; min-width: 260px; }
.kpi-value.kpi-wrap{
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
  font-size: 0.98rem;
}
@media (max-width: 1100px){
  .kpi-tile.kpi-tile-wide{ flex: 1; }
  .kpi-value.kpi-wrap{ font-size: 0.92rem; }
}
.kpi-tile { flex: 0 0 160px; }
.kpi-tile.action { flex: 1 1 auto; min-width: 260px; }



/* === UI PATCH: BIGGER DISPATCHER LOG FLYOUT + MORE VISIBLE STANDS === */

/* Make the fixed right panel slimmer so the AVL has more usable width */
.right-panel{
  width:360px;
}

/* Reserve space so AVL content is not hidden behind the fixed right panel */
#avlPanel{
  padding-right:380px;
}

/* Dispatcher Log flyout: render as a large modal-style window when opened */
.dispatch-flyout{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,0.35);
  z-index: 12000;
  pointer-events: auto;
}

.dispatch-flyout.is-open{
  display: flex;
}

.dispatch-flyout.is-open .dispatch-log-card{
  width: min(96vw, 1400px);
  height: min(90vh, 850px);
  margin: 0;
}

.dispatch-flyout.is-open .dispatch-log-wrapper{
  flex: 1 1 auto;
  overflow: auto;
  max-height: none;
}

/* Keep text sizing unchanged (inherit existing sizes); only container grows */


/* === AVL diagram pixel-centre (only simSvg inside track wrapper) === */
.track-wrapper #simSvg{
  transform: translateY(var(--avlShift, 0px));
  will-change: transform;
}


/* === AVL labels: INBOUND (top) to right, OUTBOUND (bottom) to left (no height change) === */

.track-wrapper .track-label.top{
  left:auto !important;
  right:14px !important;
  top:18px !important;          /* keep original height */
  align-items:flex-end !important;
  text-align:right !important;
}
.track-wrapper .track-label.bottom{
  right:auto !important;
  left:14px !important;
  bottom:18px !important;       /* keep original height */
  align-items:flex-start !important;
  text-align:left !important;
}


/* --- What matters now strip --- */
.wmn-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px 0 6px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:linear-gradient(90deg, rgba(255,214,102,0.22), rgba(255,255,255,0.85));
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.wmn-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.wmn-icon{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:rgba(255,214,102,0.45);
  border:1px solid rgba(0,0,0,0.1);
  flex:0 0 auto;
}
.wmn-label{
  font-weight:700;
  letter-spacing:0.2px;
  flex:0 0 auto;
}
.wmn-sep{ opacity:0.55; flex:0 0 auto; }
.wmn-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wmn-right{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex:0 0 auto;
  padding-left:10px;
  border-left:1px solid rgba(0,0,0,0.08);
}
.wmn-exposure-label{ opacity:0.7; font-size:12px; }
.wmn-exposure-value{ font-weight:800; }
.wmn-exposure-sub{ opacity:0.65; font-size:12px; }

/* --- Headway microbar in tables (stronger colours) --- */
.hw-cell{
  position:relative;
  padding-right:56px;
}
.hw-micro{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:11px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.22);
  background:rgba(0,0,0,0.10);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.hw-micro::before{
  content:'';
  display:block;
  height:100%;
  width:calc(var(--hw, 0) * 50%); /* --hw is 0..2 => 0..100% */
  border-radius:999px;
  background:rgba(255,204,0,0.95); /* default */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}
/* State-driven, punchier fills */
.hw-micro.headway-green::before{
  background:rgba(52,199,89,0.95);
}
.hw-micro.headway-red::before{
  background:rgba(255,59,48,0.95);
}
.hw-micro.headway-blue::before{
  background:rgba(0,122,255,0.95);
}

/* Optional: make the remaining (empty) part read clearer */
.hw-micro{
  background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
}



/* HOLD / INSTRUCTION PILL */
.instr-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(30,60,120,0.35);
  box-shadow:0 0 18px rgba(40,120,255,0.18);
  font-weight:700;
}


/* Pending HOLD (instructed) banner */
.bus-tag-pending-text{ fill:#111827 !important; opacity:0.85; }


/* === Injected top control panel: scenario + speed + city pack + start/reset === */
.scenario-command-panel{
  position:relative;
  z-index:10020;
  margin-top:8px;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid #c9d9f5;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f5f8ff);
  box-shadow:0 10px 26px rgba(15,35,70,.10);
}
.scenario-command-panel,
.scenario-command-panel *{
  pointer-events:auto;
}
.scenario-command-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:end;
  justify-content:flex-start;
}
.command-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.command-field-scenario{
  flex:0 1 430px;
  min-width:260px;
  max-width:430px;
}
.command-field-time{
  flex:0 0 auto;
  width:108px;
}
.command-field-speed{
  flex:0 0 auto;
  width:96px;
}
.command-field-city{
  flex:0 0 auto;
  width:136px;
}
.command-field-driver-change{
  flex:0 0 auto;
  width:176px;
}
.command-field label{
  font-size:.68rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#627089;
  font-weight:800;
}
.command-field select,
.command-field .topSelect{
  width:100%;
  min-height:34px;
  border-radius:10px;
  border:1px solid #d5deef;
  background:#f8fbff;
  color:#132238;
  padding:6px 9px;
  font-size:.8rem;
  font-weight:650;
  outline:none;
}
.command-field select:focus{
  border-color:#1e88e5;
  box-shadow:0 0 0 3px rgba(30,136,229,.13);
}
.speed-field-inner{
  display:flex;
  gap:6px;
  align-items:center;
}
.speed-field-inner #speedSelect{
  flex:0 0 56px;
  width:56px;
  min-width:56px;
}
.command-field-city #locationSelect{
  width:136px;
  min-width:136px;
}
.command-field-time #timeBandSelect{
  width:108px;
  min-width:108px;
}
.top-speed-readout{
  display:inline-flex;
  min-width:36px;
  height:34px;
  padding:0 6px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#eef6ff;
  border:1px solid #c9ddfa;
  color:#1e5e9d;
  font-weight:900;
  font-size:.74rem;
  flex:0 0 auto;
}
.scenario-command-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.scenario-command-actions #togglePause,
.scenario-command-actions #resetTest{
  min-width:112px;
}
.scenario-command-actions .route-header-top{
  margin-left:auto;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ewt-compact .ewt-start-row{ display:none !important; }

/* The floating EWT HUD is read-only, so let clicks pass through to the controls below. */
.ewt-strip{
  pointer-events:none;
}

@media (max-width:1100px){
  .command-field-scenario{
    flex:1 1 100%;
    max-width:none;
  }
}
@media (max-width:760px){
  .scenario-command-row{
    align-items:stretch;
  }
  .command-field-scenario,
  .command-field-time,
  .command-field-speed,
  .command-field-city,
  .command-field-driver-change{
    width:100%;
    max-width:none;
    min-width:0;
    flex:1 1 100%;
  }
  .speed-field-inner #speedSelect,
  .command-field-time #timeBandSelect,
  .command-field-city #locationSelect,
  .command-field-driver-change #driverChangePointSelect{
    width:100%;
    min-width:0;
  }
  .scenario-command-actions .route-header-top{
    margin-left:0;
  }
}


/* === FINAL FIX: keep Live EWT HUD + Stand A/B monitor visible above top controls ===
   The top scenario panel was given a higher z-index than the floating HUD/stand cards.
   This keeps dropdowns clickable but stops the controls from hiding operational HUDs. */
.scenario-command-panel{
  z-index:120 !important;
}

.ewt-strip{
  z-index:2147482000 !important;
  pointer-events:none !important;
}

/* Stand monitors / dispatcher tray must float above the schedule card and top control panel.
   Move it just below the access HUD so the stand cards are not covered at the very top. */
.right-panel{
  top:58px !important;
  z-index:2147481000 !important;
  pointer-events:auto !important;
}

#standHoldMonitor,
#standHoldMonitor .stand-hold-monitor-cols,
#standHoldMonitor .stand-hold-col,
.right-panel .stand-hold-monitor{
  z-index:2147481000 !important;
}

/* Keep the access checking badge as the absolute top item. */
#avlAccessHud{
  z-index:2147483600 !important;
}

/* Ensure the platform menu button stays above ordinary content but below access badge. */
.platform-home-btn{
  z-index:2147483000 !important;
}


/* =========================================================
   FINAL EMBEDDED HUD FIX
   Live EWT + Stand A/B are embedded in the top scenario window
   immediately after City Pack. This removes the floating-window behaviour.
   ========================================================= */
.card.scenario{
  flex:1 1 100% !important;
  width:100% !important;
  min-width:0 !important;
}

.scenario-command-panel{
  position:relative !important;
  z-index:300 !important;
  overflow:visible !important;
  padding:10px 12px !important;
}

.scenario-command-row{
  display:grid !important;
  /* final column is the embedded Stand A/B group — kept compact, about half of the previous width */
  grid-template-columns:minmax(260px, 430px) 92px 138px 176px minmax(260px, 320px) 408px !important;
  gap:10px 12px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

.command-field-scenario,
.command-field-time,
.command-field-speed,
.command-field-city,
.command-field-driver-change{
  align-self:start !important;
}
.command-field-driver-change{
  width:176px !important;
  max-width:176px !important;
}
.command-field-driver-change #driverChangePointSelect{
  width:176px !important;
  min-width:176px !important;
}

.embedded-ewt-slot,
.embedded-stand-slot{
  min-width:0 !important;
  align-self:stretch !important;
  display:flex !important;
}
.embedded-stand-slot{
  width:408px !important;
  max-width:408px !important;
  margin-left:34px !important; /* move Stand A/B to the right; Live EWT stays fixed */
}

/* Live EWT: embedded card, no fixed positioning, no overlap */
.embedded-ewt-slot #ewtStrip,
#ewtStrip{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:auto !important;
  width:100% !important;
  max-width:none !important;
  min-height:92px !important;
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(15,35,70,.10) !important;
  pointer-events:auto !important;
  display:block !important;
}

#ewtStrip .ewt-hud-header{ margin-bottom:5px !important; }
#ewtStrip .ewt-hud-main{ margin-bottom:5px !important; }
#ewtStrip .ewt-hud-value{ font-size:1.55rem !important; }
#ewtStrip .ewt-hud-unit{ font-size:.82rem !important; }
#ewtStrip .ewt-hud-sub{ font-size:.68rem !important; gap:8px !important; }
#ewtStrip .ewt-hud-note{ font-size:.66rem !important; margin-top:2px !important; }

/* Stand A/B: embedded side-by-side compact cards */
.embedded-stand-slot #standHoldMonitor,
#standHoldMonitor{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  display:block !important;
}

#standHoldMonitor .stand-hold-monitor-cols{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  height:100% !important;
}

#standHoldMonitor .stand-hold-col{
  width:auto !important;
  min-width:0 !important;
  min-height:92px !important;
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  padding:8px 8px 7px !important;
  box-shadow:0 8px 22px rgba(15,35,70,.10) !important;
  pointer-events:auto !important;
}

#standHoldMonitor .stand-hold-title{
  font-size:.74rem !important;
  line-height:1 !important;
  margin-bottom:5px !important;
  text-align:right !important;
}

#standHoldMonitor .stand-hold-meta{
  font-size:.68rem !important;
  margin:0 0 5px !important;
  text-align:right !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#standHoldMonitor .stand-hold-list{
  gap:5px !important;
  max-height:62px !important;
  overflow:auto !important;
}

#standHoldMonitor .stand-hold-line,
#standHoldMonitor .stand-hold-row,
#standHoldMonitor .stand-hold-row.one-line{
  font-size:.68rem !important;
  line-height:1.15 !important;
  padding:5px 7px !important;
  border-radius:9px !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Right panel no longer positions the stand cards. Keep it only as an invisible host for modal flyouts. */
.right-panel{
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.right-panel .dispatch-flyout,
.right-panel .manual-log-flyout{
  pointer-events:auto !important;
}

.scenario-command-actions{
  margin-top:8px !important;
}

@media (max-width:1350px){
  .scenario-command-row{
    grid-template-columns:minmax(260px, 1.2fr) 92px 138px 176px minmax(240px, .9fr) !important;
  }
  .embedded-stand-slot{
    grid-column:1 / -1 !important;
    width:408px !important;
    max-width:408px !important;
    margin-left:34px !important;
    justify-self:start !important;
  }
}

@media (max-width:950px){
  .scenario-command-row{
    grid-template-columns:1fr !important;
  }
  .command-field-scenario,
  .command-field-time,
  .command-field-speed,
  .command-field-city,
  .command-field-driver-change{
    width:100% !important;
    max-width:none !important;
  }
  .speed-field-inner #speedSelect,
  .command-field-time #timeBandSelect,
  .command-field-city #locationSelect,
  .command-field-driver-change #driverChangePointSelect{
    width:100% !important;
    min-width:0 !important;
  }
  .embedded-stand-slot{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
  }
  #standHoldMonitor .stand-hold-monitor-cols{
    grid-template-columns:1fr !important;
  }
}


/* === Time band selector: AM / PM / Evening service start === */
.command-field-time{
  flex:0 0 auto !important;
  width:108px !important;
  max-width:108px !important;
}
.command-field-time #timeBandSelect{
  width:108px !important;
  min-width:108px !important;
}
@media (max-width:950px){
  .command-field-time{
    width:100% !important;
    max-width:none !important;
  }
  .command-field-time #timeBandSelect{
    width:100% !important;
    min-width:0 !important;
  }
}


/* === Time selector underneath Select Scenario === */
.scenario-time-subrow{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:6px !important;
}
.scenario-time-subrow label{
  margin:0 !important;
  font-size:.62rem !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  color:#627089 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.scenario-time-subrow #timeBandSelect{
  width:136px !important;
  min-width:136px !important;
  min-height:30px !important;
  border-radius:9px !important;
  padding:4px 8px !important;
  font-size:.78rem !important;
}
@media (max-width:950px){
  .scenario-time-subrow{
    align-items:stretch !important;
    flex-direction:column !important;
  }
  .scenario-time-subrow #timeBandSelect{
    width:100% !important;
    min-width:0 !important;
  }
}
.command-field-custom-route{min-width:150px}.command-field-load-route{min-width:105px}.command-field-load-route .btn{height:36px;padding:0 14px;border-radius:18px;background:linear-gradient(90deg,#29d7e6,#2b9af8);color:#06121f;font-weight:900;border:0;cursor:pointer}
.custom-route-banner{margin:6px 0 8px 0;padding:8px 12px;border:1px solid rgba(25,210,225,.35);background:rgba(16,45,62,.75);border-radius:14px;color:#bde8ff;font-weight:800;font-size:12px;letter-spacing:.02em}


/* === V6.1.3 compact simulator header: route buttons stacked, EWT + Stand A/B on same row === */
.scenario-command-panel{
  padding:8px 10px !important;
  margin-top:4px !important;
  margin-bottom:6px !important;
}
.scenario-command-row{
  display:grid !important;
  grid-template-columns:minmax(260px, 420px) 92px 136px 168px 150px minmax(230px, 292px) minmax(330px, 408px) !important;
  gap:8px 10px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
.command-field-route-actions,
.command-field-load-route{
  width:150px !important;
  max-width:150px !important;
  min-width:150px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
.command-field-route-actions label{white-space:nowrap !important;}
.command-field-route-actions .btn,
.command-field-load-route .btn{
  width:100% !important;
  min-width:0 !important;
  height:29px !important;
  min-height:29px !important;
  padding:0 8px !important;
  border-radius:14px !important;
  font-size:.68rem !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
}
.command-field-route-actions .secondary,
#loadLocalRouteBtn{
  background:#f6f9ff !important;
  color:#1d5d9f !important;
  border:1px solid #cbdcf3 !important;
  box-shadow:none !important;
}
.command-field-local-route{display:none !important;}
/* Saved routes now carry driver-change points. Keep the selector hidden so the route controls do not consume a second row. */
.command-field-driver-change{display:none !important;}
.embedded-ewt-slot,
.embedded-stand-slot{align-self:stretch !important; min-width:0 !important;}
.embedded-stand-slot{
  width:auto !important;
  max-width:none !important;
  margin-left:0 !important;
}
.embedded-ewt-slot #ewtStrip,
#ewtStrip{
  min-height:74px !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
#ewtStrip .ewt-hud-header{margin-bottom:3px !important;}
#ewtStrip .ewt-hud-main{margin-bottom:3px !important;}
#ewtStrip .ewt-hud-value{font-size:1.35rem !important; line-height:1 !important;}
#ewtStrip .ewt-hud-sub{font-size:.62rem !important; gap:6px !important; flex-wrap:nowrap !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
#ewtStrip .ewt-hud-bar{margin-top:5px !important; height:5px !important;}
#ewtStrip .ewt-hud-note{display:none !important;}
#standHoldMonitor .stand-hold-col{
  min-height:74px !important;
  padding:7px 7px 6px !important;
  border-radius:12px !important;
}
#standHoldMonitor .stand-hold-title{font-size:.68rem !important; margin-bottom:4px !important;}
#standHoldMonitor .stand-hold-meta{font-size:.62rem !important; margin-bottom:4px !important;}
#standHoldMonitor .stand-hold-list{max-height:48px !important; gap:4px !important;}
#standHoldMonitor .stand-hold-line,
#standHoldMonitor .stand-hold-row,
#standHoldMonitor .stand-hold-row.one-line{font-size:.62rem !important; padding:4px 6px !important;}
.scenario-command-actions{margin-top:6px !important;}
.scenario-header{margin-top:4px !important;}
.scenario-text{display:none !important;}
@media (max-width:1500px){
  .scenario-command-row{
    grid-template-columns:minmax(260px, 1fr) 92px 136px 168px 150px minmax(230px, 292px) !important;
  }
  .embedded-stand-slot{grid-column:1 / -1 !important; width:408px !important; justify-self:start !important;}
}
@media (max-width:1050px){
  .scenario-command-row{grid-template-columns:1fr 1fr !important;}
  .command-field-route-actions,.command-field-load-route{width:100% !important; max-width:none !important; min-width:0 !important;}
  .embedded-ewt-slot,.embedded-stand-slot{grid-column:1 / -1 !important; width:100% !important; max-width:none !important;}
}

/* V6.1.17: on-bus late / early marker */
.bus-earlylate{
  font-size:6.3px !important;
  font-weight:900 !important;
  letter-spacing:.05px !important;
  paint-order:stroke;
  stroke:#ffffff;
  stroke-width:1.6px;
  stroke-linejoin:round;
}
.bus-late-label{ fill:#dc2626 !important; }
.bus-early-label{ fill:#f97316 !important; }

/* Scenario Loader / Timeline v6.1.26 */
.scenario-load-status{margin-top:5px;font-size:10px;font-weight:900;letter-spacing:.04em;color:#64748b;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}.scenario-load-status.ready{color:#047857}.scenario-load-status.running{color:#0369a1}.scenario-load-status.loading{color:#b45309}.scenario-load-status.error{color:#dc2626}.scenario-timeline{display:none;margin:6px 12px 0;padding:8px 10px;border:1px solid rgba(14,165,233,.18);border-radius:12px;background:rgba(239,246,255,.78);font-size:11px;color:#334155}.scenario-timeline:has(.scenario-timeline-row){display:block}.scenario-timeline-title{font-weight:1000;letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px;color:#0f3f60}.scenario-timeline-row{display:inline-flex;align-items:center;gap:6px;margin:2px 5px 2px 0;padding:4px 7px;border-radius:999px;background:#fff;border:1px solid rgba(148,163,184,.35)}.scenario-timeline-row b{color:#0369a1}.scenario-timeline-row em{font-style:normal;color:#64748b}.scenario-timeline-row.fired{background:#ecfdf5;border-color:#86efac}.scenario-timeline-empty{color:#64748b}