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:4px;
      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 columns are the embedded Stand A/B group plus the inline sim clock */
  grid-template-columns:minmax(260px, 430px) 92px 138px 176px minmax(260px, 320px) 1fr 408px 238px !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,
.embedded-sim-clock-slot{
  min-width:0 !important;
  align-self:stretch !important;
  display:flex !important;
}
.embedded-stand-slot{
  grid-column:7 !important;
  width:408px !important;
  max-width:408px !important;
  margin-left:0 !important;
  justify-self:end !important;
}

/* 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:1560px){
  .scenario-command-row{
    grid-template-columns:minmax(260px, 1.2fr) 92px 138px 176px minmax(240px, .9fr) 1fr 408px 238px !important;
  }
  .embedded-stand-slot{
    grid-column:7 / 8 !important;
    width:408px !important;
    max-width:408px !important;
    justify-self:end !important;
  }
  .embedded-sim-clock-slot{
    grid-column:8 / 9 !important;
    width:238px !important;
    max-width:238px !important;
    justify-self:end !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 / span 2 !important;
    width:408px !important;
    max-width:408px !important;
    margin-left:0 !important;
    justify-self:start !important;
  }
  .embedded-sim-clock-slot{
    grid-column:3 / span 2 !important;
    width:238px !important;
    max-width:238px !important;
    justify-self:end !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,
  .embedded-sim-clock-slot{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:0 !important;
  }
  .sim-clock-display{justify-content:center !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;
  }
}


.embedded-sim-clock-slot{
  grid-column:8 !important;
  width:238px !important;
  max-width:238px !important;
  min-width:238px !important;
  margin-left:auto !important;
  justify-self:end !important;
  align-self:stretch !important;
  display:flex !important;
}

.sim-clock-panel{
  width:100%;
  min-height:92px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(15,35,70,.10);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.sim-clock-panel-title{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#39485f;
}
.sim-clock-display{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  width:100%;
  overflow:hidden;
}
.sim-clock-box{
  min-width:50px;
  width:50px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(180deg,#20242a 0%, #101318 52%, #0a0c0f 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 16px rgba(0,0,0,.22), 0 8px 18px rgba(10,16,24,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.sim-clock-box::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:rgba(255,255,255,.12);
  transform:translateY(-0.5px);
}
.sim-clock-box span{
  font-family:"JetBrains Mono",Consolas,"Courier New",monospace;
  font-size:1.78rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  color:#f3f7fb;
  text-shadow:0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(255,255,255,.08);
}
.sim-clock-colon{
  font-family:"JetBrains Mono",Consolas,"Courier New",monospace;
  font-size:1.55rem;
  font-weight:900;
  color:#1f2d3d;
  margin:0;
  line-height:1;
  transform:translateY(-1px);
}
.sim-clock-panel-sub{
  font-size:.68rem;
  color:#73819a;
  letter-spacing:.02em;
}

/* =========================================================
   BLUE GLASS SIMULATOR REFRESH — lighter blue dashboard look
   Keeps existing layout/functionality, updates visual theme.
   ========================================================= */
:root{
  --bg:#0b3c80;
  --card:rgba(12,43,96,0.74);
  --accent:#46a8ff;
  --accent-soft:rgba(70,168,255,0.18);
  --muted:#b9d9ff;
  --text:#eef7ff;
  --border:rgba(138,196,255,0.20);
}

body.simulator-layout{
  color:var(--text) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(125,190,255,0.22), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(74,145,255,0.18), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(33,104,214,0.24), transparent 32%),
    linear-gradient(180deg, #0d468f 0%, #0a3e82 34%, #08366e 100%) !important;
  min-height:100vh;
}
body.simulator-layout::before,
body.simulator-layout::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:0;
  filter:blur(36px);
}
body.simulator-layout::before{
  width:360px;height:360px;left:-100px;top:-80px;
  background:radial-gradient(circle, rgba(117,190,255,0.26) 0%, rgba(117,190,255,0) 70%);
}
body.simulator-layout::after{
  width:420px;height:420px;right:-120px;top:80px;
  background:radial-gradient(circle, rgba(66,130,255,0.18) 0%, rgba(66,130,255,0) 72%);
}
body.simulator-layout .page{ position:relative; z-index:1; }

body.simulator-layout h1,
body.simulator-layout h2,
body.simulator-layout .scenario-header,
body.simulator-layout .scenario-text,
body.simulator-layout .scenario-header span.value,
body.simulator-layout .subtitle,
body.simulator-layout .command-field label,
body.simulator-layout .theme-indicator-pill,
body.simulator-layout .route-header-top,
body.simulator-layout .ewt-compact,
body.simulator-layout .ewt-compact-line,
body.simulator-layout .session-label,
body.simulator-layout .kpi-subvalue,
body.simulator-layout .dispatch-log-subtitle,
body.simulator-layout .sim-clock-panel-sub,
body.simulator-layout .ewt-hud-note,
body.simulator-layout .ewt-hud-target,
body.simulator-layout .ewt-hud-delta,
body.simulator-layout .ewt-hud-lost,
body.simulator-layout .wmn-exposure-label,
body.simulator-layout .wmn-exposure-sub,
body.simulator-layout .stand-hold-meta,
body.simulator-layout .stand-hold-line{
  color:#d7ebff !important;
}

body.simulator-layout .card.scenario,
body.simulator-layout .scenario-command-panel,
body.simulator-layout .sim-controls,
body.simulator-layout .schedule-table-card,
body.simulator-layout .kpi-dock,
body.simulator-layout .bus-command-dialog,
body.simulator-layout .dispatch-log-card,
body.simulator-layout .dispatch-log-card.dispatch-log-fixed,
body.simulator-layout .manual-log-card,
body.simulator-layout .incident-popup,
body.simulator-layout .bus-map-overlay-inner,
body.simulator-layout .real-map-popup,
body.simulator-layout .sim-clock-panel,
body.simulator-layout .stand-hold-monitor,
body.simulator-layout #standHoldMonitor{
  background:linear-gradient(180deg, rgba(18,65,130,0.78), rgba(10,40,88,0.84)) !important;
  border:1px solid rgba(144,200,255,0.22) !important;
  border-radius:18px !important;
  box-shadow:0 18px 40px rgba(1,12,33,0.28), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter:blur(12px);
  color:#eef7ff !important;
}

/* Lighter centre route panel like the reference */
body.simulator-layout .track-wrapper{
  background:linear-gradient(180deg, rgba(231,242,255,0.97), rgba(206,227,255,0.94)) !important;
  border:1px solid rgba(149,191,242,0.55) !important;
  border-radius:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 18px 42px rgba(3,20,56,0.16) !important;
}
body.simulator-layout .track-wrapper .track-label,
body.simulator-layout .track-wrapper .next-bus,
body.simulator-layout .track-wrapper .scenario-text{
  color:#46658a !important;
}
body.simulator-layout .track-wrapper .track-label .dot{ background:#5ea7ff !important; }
body.simulator-layout .track-line{ stroke:#9fbde6 !important; }
body.simulator-layout .track-line-hatch{ stroke:rgba(255,255,255,0.95) !important; }

body.simulator-layout .scenario-command-panel{
  padding:12px 14px !important;
}
body.simulator-layout .theme-indicator-pill,
body.simulator-layout .top-speed-readout,
body.simulator-layout .route-header-top{
  background:rgba(183,224,255,0.12) !important;
  border:1px solid rgba(150,206,255,0.24) !important;
  color:#eff7ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

body.simulator-layout button{
  background:linear-gradient(180deg, #3ea9ff 0%, #187cff 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(186,224,255,0.22) !important;
  box-shadow:0 12px 28px rgba(13,76,170,0.34) !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
}
body.simulator-layout button:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
body.simulator-layout button.secondary,
body.simulator-layout .bus-command-close.secondary,
body.simulator-layout #busCmdCancel.secondary,
body.simulator-layout #resetTest.secondary,
body.simulator-layout #busCommandHoldBack,
body.simulator-layout #busCommandCurtailBack,
body.simulator-layout #busCommandRunLightBack{
  background:rgba(255,255,255,0.08) !important;
  color:#dcedff !important;
  border:1px solid rgba(151,203,255,0.22) !important;
  box-shadow:none !important;
}
body.simulator-layout button:disabled{
  background:linear-gradient(180deg, rgba(87,136,193,0.36), rgba(60,101,152,0.34)) !important;
  color:rgba(255,255,255,0.55) !important;
  border-color:rgba(156,196,255,0.12) !important;
}

body.simulator-layout select,
body.simulator-layout input,
body.simulator-layout .command-field select,
body.simulator-layout .command-field .topSelect,
body.simulator-layout .session-input,
body.simulator-layout #busCommandHoldMinutes,
body.simulator-layout #busCommandCurtailSelect,
body.simulator-layout #busCommandRunLightStartSelect,
body.simulator-layout #busCommandRunLightEndSelect,
body.simulator-layout #busCmdDepartAtTime{
  background:rgba(4,19,48,0.34) !important;
  color:#eef7ff !important;
  border:1px solid rgba(145,196,255,0.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.simulator-layout select:focus,
body.simulator-layout input:focus{
  outline:none !important;
  border-color:rgba(116,192,255,0.95) !important;
  box-shadow:0 0 0 3px rgba(85,171,255,0.16) !important;
}
body.simulator-layout select option{
  background:#11346a;
  color:#eef7ff;
}
body.simulator-layout input::placeholder{ color:rgba(225,239,255,0.65) !important; }

body.simulator-layout .scenario-table-wrapper,
body.simulator-layout .schedule-table-wrapper,
body.simulator-layout .dispatch-log-wrapper,
body.simulator-layout .manual-log-body{
  border:1px solid rgba(144,196,255,0.15) !important;
  border-radius:14px !important;
  background:rgba(3,17,44,0.20) !important;
}
body.simulator-layout table{ color:#edf6ff !important; }
body.simulator-layout thead,
body.simulator-layout .dispatch-log-wrapper thead{
  background:rgba(6,23,57,0.82) !important;
}
body.simulator-layout th,
body.simulator-layout .dispatch-log-wrapper th{
  color:#9fd1ff !important;
  border-bottom:1px solid rgba(141,191,245,0.16) !important;
}
body.simulator-layout td,
body.simulator-layout .dispatch-log-wrapper td{
  color:#edf6ff !important;
  border-bottom:1px solid rgba(140,186,241,0.10) !important;
}
body.simulator-layout .scenario-table tbody tr:nth-child(even),
body.simulator-layout tbody tr:nth-child(even){
  background:rgba(255,255,255,0.03) !important;
}
body.simulator-layout tbody tr:hover{
  background:rgba(108,176,255,0.08) !important;
}

body.simulator-layout #ewtStrip{
  box-shadow:0 14px 32px rgba(1,12,33,0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body.simulator-layout #ewtStrip.ok{
  background:linear-gradient(180deg, rgba(38,105,82,0.96), rgba(22,76,57,0.96)) !important;
  border-color:rgba(126,231,171,0.34) !important;
  color:#effff6 !important;
}
body.simulator-layout #ewtStrip.warn{
  background:linear-gradient(180deg, rgba(153,104,19,0.97), rgba(113,72,10,0.97)) !important;
  border-color:rgba(252,211,77,0.34) !important;
  color:#fff9eb !important;
}
body.simulator-layout #ewtStrip.bad{
  background:linear-gradient(180deg, rgba(154,44,66,0.97), rgba(107,27,48,0.97)) !important;
  border-color:rgba(253,164,175,0.30) !important;
  color:#fff1f4 !important;
}
body.simulator-layout #ewtStrip .ewt-hud-title,
body.simulator-layout #ewtStrip .ewt-hud-value,
body.simulator-layout #ewtStrip .ewt-hud-unit,
body.simulator-layout #ewtStrip .ewt-hud-sub,
body.simulator-layout #ewtStrip .ewt-hud-target,
body.simulator-layout #ewtStrip .ewt-hud-delta,
body.simulator-layout #ewtStrip .ewt-hud-note,
body.simulator-layout #ewtStrip .ewt-hud-lost,
body.simulator-layout #ewtStrip .ewt-hud-pill,
body.simulator-layout #ewtStrip span{
  color:inherit !important;
}
body.simulator-layout #ewtStrip .ewt-hud-bar{
  background:rgba(255,255,255,0.12) !important;
}

body.simulator-layout .wmn-strip{
  background:linear-gradient(90deg, rgba(255,215,106,0.24), rgba(215,235,255,0.10)) !important;
  border:1px solid rgba(255,221,129,0.30) !important;
  box-shadow:0 10px 24px rgba(0,0,0,0.08) !important;
}
body.simulator-layout .wmn-icon{
  background:rgba(255,215,106,0.28) !important;
  border-color:rgba(255,221,129,0.30) !important;
}
body.simulator-layout .wmn-right{ border-left:1px solid rgba(255,232,170,0.18) !important; }

body.simulator-layout .kpi-dock{
  background:linear-gradient(180deg, rgba(13,43,91,0.92), rgba(8,29,63,0.94)) !important;
}
body.simulator-layout .kpi-tile{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border:1px solid rgba(142,197,255,0.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.simulator-layout .kpi-label{
  color:#9fd2ff !important;
}
body.simulator-layout .kpi-value,
body.simulator-layout .kpi-wrap,
body.simulator-layout #kpiComplianceHeadline,
body.simulator-layout #kpiComplianceDetail{
  color:#eef7ff !important;
}
body.simulator-layout .kpi-unit,
body.simulator-layout .kpi-currency{
  color:#b9d9ff !important;
}

body.simulator-layout .bus-command-dialog{
  border-radius:20px !important;
  transform:translateY(-55px);
}
body.simulator-layout .bus-command-title,
body.simulator-layout .bus-command-info strong,
body.simulator-layout .bus-command-map-title,
body.simulator-layout .bus-depart-at-title,
body.simulator-layout .dispatch-log-title,
body.simulator-layout .stand-hold-title,
body.simulator-layout .sim-clock-panel-title{
  color:#ffffff !important;
}
body.simulator-layout .bus-command-info,
body.simulator-layout .bus-command-headway-line,
body.simulator-layout .bus-command-note,
body.simulator-layout .dispatch-log-subtitle{
  color:#d8ebff !important;
}
body.simulator-layout .bus-command-map-col{
  border-left:1px solid rgba(145,196,255,0.16) !important;
}
body.simulator-layout #busCommandMapSvg{
  background:linear-gradient(180deg, rgba(236,246,255,0.98), rgba(219,236,255,0.95)) !important;
  box-shadow:inset 0 0 0 1px rgba(145,196,255,0.35) !important;
}

body.simulator-layout .sim-clock-panel{
  background:linear-gradient(180deg, rgba(15,53,113,0.90), rgba(8,31,72,0.92)) !important;
}
body.simulator-layout .sim-clock-panel-title{ color:#d9ebff !important; }
body.simulator-layout .sim-clock-box{
  background:linear-gradient(180deg,#1f2530 0%, #0e1218 52%, #090c11 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 16px rgba(0,0,0,.24), 0 8px 18px rgba(10,16,24,.26) !important;
}
body.simulator-layout .sim-clock-colon{ color:#dcecff !important; }

body.simulator-layout #standHoldMonitor .stand-hold-col{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(143,196,255,0.10) !important;
  border-radius:14px !important;
}
body.simulator-layout .stand-hold-bus,
body.simulator-layout .stand-hold-hw,
body.simulator-layout .stand-hold-dep{
  color:#eef7ff !important;
}

body.simulator-layout .app-disclaimer{
  color:rgba(223,237,255,0.78) !important;
}

/* Top HUDs */
body.simulator-layout #avlAccessHud{
  background:linear-gradient(180deg, rgba(11,37,82,0.94), rgba(8,25,55,0.96)) !important;
  color:#c9e8ff !important;
  border:1px solid rgba(145,196,255,0.22) !important;
  box-shadow:0 14px 34px rgba(2,12,31,0.26) !important;
  border-radius:15px !important;
}
body.simulator-layout .platform-home-btn{
  background:linear-gradient(180deg,#2d8fff,#1670ef) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  box-shadow:0 14px 30px rgba(3,20,56,0.22) !important;
}

/* =========================================================
   BLUE THEME TABLE VISIBILITY FIX
   Improves contrast for Early/Late and Headway columns.
   ========================================================= */
body.simulator-layout td.ontime,
body.simulator-layout td.early,
body.simulator-layout td.late,
body.simulator-layout td.action-cell,
body.simulator-layout td.headway-green,
body.simulator-layout td.headway-red,
body.simulator-layout td.headway-blue{
  font-weight:800 !important;
  text-shadow:none !important;
}

body.simulator-layout td.ontime{
  background:rgba(220,252,231,0.96) !important;
  color:#166534 !important;
}
body.simulator-layout td.early{
  background:rgba(255,237,213,0.98) !important;
  color:#9a3412 !important;
}
body.simulator-layout td.late{
  background:rgba(255,228,230,0.98) !important;
  color:#9f1239 !important;
}
body.simulator-layout td.action-cell{
  background:rgba(219,234,254,0.96) !important;
  color:#1d4ed8 !important;
}

/* Headway colours in the lighter blue theme:
   yellow = on target, red = too close, green = gap developing */
body.simulator-layout td.headway-green{
  background:rgba(254,243,199,0.98) !important;
  color:#92400e !important;
}
body.simulator-layout td.headway-red{
  background:rgba(254,226,226,0.98) !important;
  color:#b91c1c !important;
}
body.simulator-layout td.headway-blue{
  background:rgba(220,252,231,0.98) !important;
  color:#166534 !important;
}

body.simulator-layout td.hw-cell{
  padding-right:58px !important;
}
body.simulator-layout td.hw-cell .hw-micro{
  border:1px solid rgba(15,23,42,0.22) !important;
  background:rgba(15,23,42,0.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.34) !important;
}
body.simulator-layout td.hw-cell .hw-micro.headway-green::before{
  background:#facc15 !important;
}
body.simulator-layout td.hw-cell .hw-micro.headway-red::before{
  background:#ef4444 !important;
}
body.simulator-layout td.hw-cell .hw-micro.headway-blue::before{
  background:#22c55e !important;
}

/* =========================================================
   BLUE THEME STAND A / STAND B VISIBILITY FIX
   Makes rows and text readable inside stand cards.
   ========================================================= */
body.simulator-layout #standHoldMonitor .stand-hold-col{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border:1px solid rgba(143,196,255,0.18) !important;
}

body.simulator-layout #standHoldMonitor .stand-hold-meta{
  color:#d9ecff !important;
  opacity:0.95 !important;
}

body.simulator-layout #standHoldMonitor .stand-hold-list{
  max-height:70px !important;
}

body.simulator-layout #standHoldMonitor .stand-hold-line,
body.simulator-layout #standHoldMonitor .stand-hold-row,
body.simulator-layout #standHoldMonitor .stand-hold-row.one-line{
  background:linear-gradient(180deg, rgba(245,250,255,0.98), rgba(231,241,255,0.96)) !important;
  color:#16345d !important;
  border:1px solid rgba(143,196,255,0.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(2,18,48,0.08) !important;
}

body.simulator-layout #standHoldMonitor .stand-hold-bus,
body.simulator-layout #standHoldMonitor .stand-hold-hw,
body.simulator-layout #standHoldMonitor .stand-hold-dep,
body.simulator-layout #standHoldMonitor .stand-hold-row span,
body.simulator-layout #standHoldMonitor .stand-hold-line span{
  color:#16345d !important;
}

body.simulator-layout #standHoldMonitor .stand-hold-empty{
  color:#dcecff !important;
  background:rgba(255,255,255,0.04) !important;
  border:1px dashed rgba(143,196,255,0.22) !important;
  border-radius:10px !important;
  padding:8px 10px !important;
}

/* =========================================================
   LIGHTER BLUE THEME + CITY BACKDROP ON AVL DIAGRAM
   - slightly lightens the overall blue theme
   - adds a faded skyline/city watermark behind the AVL route diagram
   - city label changes with the selected City Pack
   ========================================================= */
body.simulator-layout{
  background:
    radial-gradient(circle at 12% 12%, rgba(166,214,255,0.24), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(114,178,255,0.20), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(87,150,236,0.22), transparent 36%),
    linear-gradient(180deg, #1a5aae 0%, #144d9a 38%, #103f84 100%) !important;
}

body.simulator-layout::before{
  background:radial-gradient(circle, rgba(146,209,255,0.30) 0%, rgba(146,209,255,0) 72%) !important;
}
body.simulator-layout::after{
  background:radial-gradient(circle, rgba(99,163,255,0.22) 0%, rgba(99,163,255,0) 74%) !important;
}

body.simulator-layout .card.scenario,
body.simulator-layout .scenario-command-panel,
body.simulator-layout .sim-controls,
body.simulator-layout .schedule-table-card,
body.simulator-layout .kpi-dock,
body.simulator-layout .bus-command-dialog,
body.simulator-layout .dispatch-log-card,
body.simulator-layout .dispatch-log-card.dispatch-log-fixed,
body.simulator-layout .manual-log-card,
body.simulator-layout .incident-popup,
body.simulator-layout .bus-map-overlay-inner,
body.simulator-layout .real-map-popup,
body.simulator-layout .sim-clock-panel,
body.simulator-layout .stand-hold-monitor,
body.simulator-layout #standHoldMonitor{
  background:linear-gradient(180deg, rgba(32,88,166,0.78), rgba(18,59,116,0.84)) !important;
  border:1px solid rgba(165,213,255,0.24) !important;
}

body.simulator-layout .kpi-dock{
  background:linear-gradient(180deg, rgba(22,68,133,0.92), rgba(14,50,102,0.94)) !important;
}
body.simulator-layout .kpi-tile{
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
}

body.simulator-layout .theme-indicator-pill,
body.simulator-layout .top-speed-readout,
body.simulator-layout .route-header-top{
  background:rgba(205,234,255,0.14) !important;
  border:1px solid rgba(176,218,255,0.28) !important;
}

body.simulator-layout .track-wrapper{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:linear-gradient(180deg, rgba(240,247,255,0.97), rgba(219,235,255,0.95)) !important;
  border:1px solid rgba(163,201,245,0.62) !important;
}

body.simulator-layout .track-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.33;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 520' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d8eaff' stop-opacity='.78'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' fill-opacity='.52' stroke='%238fb7e3' stroke-opacity='.24' stroke-width='2'%3E%3Cpath d='M0 430 L0 402 70 402 70 360 95 360 95 312 125 312 125 402 200 402 200 372 228 372 228 330 264 330 264 385 320 385 320 308 355 308 355 272 382 272 382 385 444 385 444 338 472 338 472 298 506 298 506 376 562 376 562 248 582 248 582 210 622 210 622 376 700 376 700 332 728 332 728 292 760 292 760 376 826 376 826 318 862 318 862 246 900 246 900 376 982 376 982 332 1010 332 1010 280 1042 280 1042 376 1122 376 1122 328 1155 328 1155 254 1188 254 1188 376 1272 376 1272 334 1305 334 1305 296 1340 296 1340 376 1420 376 1420 338 1456 338 1456 292 1490 292 1490 430 1600 430 1600 520 0 520 Z'/%3E%3Cpath d='M1118 376 C1135 334 1174 290 1228 274 C1220 329 1189 366 1118 376 Z' fill-opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%, cover;
  background-position:center center, center bottom;
}

body.simulator-layout .track-wrapper::after{
  position:absolute;
  inset:auto 24px 22px 24px;
  pointer-events:none;
  z-index:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-size:clamp(42px, 5vw, 88px);
  font-weight:900;
  letter-spacing:.42em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(66,111,163,0.12);
  text-shadow:0 2px 18px rgba(255,255,255,0.55);
}

body.simulator-layout .track-wrapper > .track-label,
body.simulator-layout .track-wrapper > #simSvg,
body.simulator-layout .track-wrapper > .stand-overlay{
  position:relative;
  z-index:2;
}

body.simulator-layout[data-city-pack="london"] .track-wrapper::after{ content:"LONDON"; }
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::after{ content:"RIYADH"; }
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::after{ content:"BELGRADE"; }
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::after{ content:"BERLIN"; }
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::after{ content:"BELFAST"; }
body.simulator-layout[data-city-pack="braga"] .track-wrapper::after{ content:"BRAGA"; }
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::after{ content:"DUBLIN"; }
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::after{ content:"LISBON"; }
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::after{ content:"MADRID"; }
body.simulator-layout[data-city-pack="milan"] .track-wrapper::after{ content:"MILAN"; }
body.simulator-layout[data-city-pack="paris"] .track-wrapper::after{ content:"PARIS"; }
body.simulator-layout[data-city-pack="porto"] .track-wrapper::after{ content:"PORTO"; }
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::after{ content:"PRISHTINA"; }
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::after{ content:"TIRANA"; }
body.simulator-layout[data-city-pack="default"] .track-wrapper::after,
body.simulator-layout:not([data-city-pack]) .track-wrapper::after{ content:"CITY"; }

body.simulator-layout select,
body.simulator-layout input,
body.simulator-layout .command-field select,
body.simulator-layout .command-field .topSelect,
body.simulator-layout .session-input,
body.simulator-layout #busCommandHoldMinutes,
body.simulator-layout #busCommandCurtailSelect,
body.simulator-layout #busCommandRunLightStartSelect,
body.simulator-layout #busCommandRunLightEndSelect,
body.simulator-layout #busCmdDepartAtTime{
  background:rgba(8,27,66,0.30) !important;
  border:1px solid rgba(165,213,255,0.24) !important;
}

body.simulator-layout button{
  background:linear-gradient(180deg, #4db0ff 0%, #2389ff 100%) !important;
}

body.simulator-layout .sim-clock-panel{
  background:linear-gradient(180deg, rgba(22,72,144,0.92), rgba(12,44,92,0.94)) !important;
}


/* City-specific monument backdrops on AVL route diagram */
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V430h145v-26h18v26h95v-50h26v50h66v-112h34v112h48v-72h26v72h58v-34h210v34h54v-82h20v82h120v-40h20v40h165v-28h18v28h60v90z%27/%3E%20%3Cpath%20d%3D%27M392%20430v-188h24v188zM384%20248h40l-20-40z%27/%3E%20%3Ccircle%20cx%3D%27620%27%20cy%3D%27310%27%20r%3D%2792%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.34%27%20stroke-width%3D%2712%27/%3E%20%3Cpath%20d%3D%27M620%20218v184M528%20310h184%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%274%27/%3E%20%3Cpath%20d%3D%27M1005%20430V320h18v110zM1030%20430V300h18v130zM1055%20430V280h18v150z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V438h120v-40h60v40h90v-58h40v58h130v-32h90v32h110v-160h54v160h84v-110h28v110h180v-48h48v48h150v82z%27/%3E%20%3Cpath%20d%3D%27M690%20438V180h74v258z%27/%3E%20%3Cpath%20d%3D%27M708%20180h38l36-52v12l-14%2024%2014%2016-16%200-8-10-8%2010-16%200%2014-16-14-24V128z%27%20/%3E%20%3Cpath%20d%3D%27M890%20438V215h60v223zM920%20215l30-82%2030%2082z%27/%3E%20%3Cpath%20d%3D%27M1120%20438V250h36v188zM1110%20250h56l-28-38z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V440h150v-30h58v30h170v-58h42v58h118v-74h86v74h150v-48h62v48h150v80z%27/%3E%20%3Cpath%20d%3D%27M560%20440V270h84v170zM548%20270h108l-54-44z%27/%3E%20%3Cpath%20d%3D%27M595%20226c14-28%2038-40%2062%200%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%275%27/%3E%20%3Cpath%20d%3D%27M870%20440V210h26v230zM850%20230h66v-20h-66zM860%20210l16-42%2016%2042z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V438h160v-22h60v22h180v-36h80v36h220v-30h78v30h120v-38h78v38h160v82z%27/%3E%20%3Cpath%20d%3D%27M590%20438V188h20v250zM565%20212h70l-35-70zM575%20238h50%27%20/%3E%20%3Cpath%20d%3D%27M900%20438V286h160v152zM920%20286v-30h18v30M952%20286v-30h18v30M984%20286v-30h18v30M1016%20286v-30h18v30M1048%20286v-30h18v30M1080%20286v-30h18v30%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h130v-18h44v18h180v-44h100v44h130v-30h50v30h130v-40h70v40h170v74z%27/%3E%20%3Cpath%20d%3D%27M432%20446V280h54v166zM418%20280h82l-41-50z%27/%3E%20%3Cpath%20d%3D%27M860%20446V250h20v196zM820%20286l50-80%2050%2080zM930%20446V250h20v196zM890%20286l50-80%2050%2080z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="braga"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h150v-18h44v18h220v-34h86v34h200v-50h110v50h130v72z%27/%3E%20%3Cpath%20d%3D%27M430%20448V270h28v178zM404%20448V300h22v148zM462%20448V300h22v148zM410%20300h68v-20h-68zM418%20280l20-28%2020%2028z%27%20/%3E%20%3Cpath%20d%3D%27M785%20448c0-38%2018-58%2038-74%2018-14%2034-28%2034-54%200%2026%2016%2040%2034%2054%2020%2016%2038%2036%2038%2074z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h180v-24h44v24h180v-34h84v34h138v-46h94v46h130v74z%27/%3E%20%3Cpath%20d%3D%27M790%20446V170h20v276zM776%20184h48l-24-70z%27%20/%3E%20%3Cpath%20d%3D%27M430%20446V286h76v160zM418%20286h100l-50-34z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h180v-24h44v24h160v-30h92v30h176v-44h120v44h150v74z%27/%3E%20%3Cpath%20d%3D%27M315%20446V320h26v126zM300%20320h56v-18h-56zM304%20302l12-18h24l12%2018z%27%20/%3E%20%3Cpath%20d%3D%27M760%20392h220v10H760zM780%20392V280h14v112zM820%20392V260h14v132zM860%20392V240h14v152zM900%20392V220h14v172zM940%20392V240h14v152z%27%20fill%3D%27%23d8eaff%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h170v-22h44v22h210v-28h100v28h184v-38h118v38h150v74z%27/%3E%20%3Cpath%20d%3D%27M545%20446V296h130v150zM558%20296v-28h104v28M575%20296V260M606%20296V260M638%20296V260M669%20296V260%27%20/%3E%20%3Cpath%20d%3D%27M875%20446V230h24v216zM860%20250h54v-18h-54zM872%20230l14-26%2014%2026z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="milan"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h190v-20h44v20h210v-32h80v32h250v-42h110v42h170v72z%27/%3E%20%3Cpath%20d%3D%27M640%20448V250h140v198zM650%20250l12-18%2012%2018%2012-24%2012%2024%2012-18%2012%2018%2012-20%2012%2020%2012-18%2012%2018zM668%20448V300M700%20448V284M732%20448V302M764%20448V290%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="paris"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h150v-20h44v20h170v-34h90v34h230v-40h100v40h160v74z%27/%3E%20%3Cpath%20d%3D%27M620%20446%20700%20170%20780%20446zM664%20330h72M648%20380h104M680%20446V306h40v140z%27%20/%3E%20%3Cpath%20d%3D%27M960%20446V330h120v116zM972%20330v-24h96v24M990%20330V300M1020%20330V300M1050%20330V300%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="porto"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h160v-20h44v20h140v-34h86v34h170v-48h110v48h130v72z%27/%3E%20%3Cpath%20d%3D%27M330%20392h250v10H330zM350%20392V320h14v72zM390%20392V300h14v92zM430%20392V280h14v112zM470%20392V300h14v92zM510%20392V320h14v72z%27%20/%3E%20%3Cpath%20d%3D%27M780%20448V248h22v200zM770%20260h42v-20h-42zM781%20248l10-30%2010%2030z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h160v-22h44v22h230v-34h96v34h170v-46h110v46h150v72z%27/%3E%20%3Cpath%20d%3D%27M560%20448V300h160v148zM582%20340c0-24%2016-40%2034-40s34%2016%2034%2040-16%2040-34%2040-34-16-34-40zm70%200c0-24%2016-40%2034-40s34%2016%2034%2040-16%2040-34%2040-34-16-34-40z%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.34%27%20stroke-width%3D%278%27/%3E%20%3Cpath%20d%3D%27M810%20448V260h24v188zM798%20272h48v-16h-48z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h170v-18h44v18h180v-34h90v34h190v-44h102v44h150v72z%27/%3E%20%3Cpath%20d%3D%27M540%20448V260h28v188zM530%20272h48v-18h-48zM544%20260l10-24%2010%2024z%27%20/%3E%20%3Cpath%20d%3D%27M620%20448V286h18v162zM638%20448V314h58v134zM650%20314l17-42%2017%2042z%27%20/%3E%20%3Cpath%20d%3D%27M840%20448V300h120l-60-70z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;}


/* =========================================================
   FINAL VISIBILITY + CITY BACKDROP TUNE-UP
   - stronger monument backdrop
   - remove faint abstract blocks behind London skyline
   - darker readable footer/result text where needed
   ========================================================= */
body.simulator-layout .track-wrapper::before{
  opacity:0.56 !important;
  filter:saturate(1.08) contrast(1.02);
}
body.simulator-layout .track-wrapper::after{
  color:rgba(22,46,82,0.18) !important;
  text-shadow:0 2px 14px rgba(255,255,255,0.38) !important;
}
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.01)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23cfe4ff%27%20fill-opacity%3D%27.80%27%20stroke%3D%27%237ea8d7%27%20stroke-opacity%3D%27.26%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h150v-18h38v18h110v-42h20v42h62v-146h28v146h60v-38h18v38h110v-160h26v160h58v-52h18v52h120v-30h18v30h78v-100h18v100h86v-46h18v46h95v-28h18v28h160v72z%27/%3E%20%3Cpath%20d%3D%27M380%20448V235h28v213zM370%20244h48l-24-48z%27%20/%3E%20%3Ccircle%20cx%3D%27665%27%20cy%3D%27314%27%20r%3D%27108%27%20fill%3D%27none%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.52%27%20stroke-width%3D%2714%27/%3E%20%3Cpath%20d%3D%27M665%20206v216M557%20314h216M588%20237l154%20154M742%20237L588%20391%27%20fill%3D%27none%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.30%27%20stroke-width%3D%274%27/%3E%20%3Cpath%20d%3D%27M1078%20448V336h16v112zM1102%20448V308h18v140zM1128%20448V284h20v164z%27%20/%3E%20%3C/g%3E%20%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:100% 100%, cover !important;
  background-position:center center, center bottom !important;
}
/* Make diagram captions and simulator legal/footer copy darker */
body.simulator-layout .track-label,
body.simulator-layout .track-label .next-bus,
body.simulator-layout .legend,
body.simulator-layout .legend-item,
body.simulator-layout .legend span{
  color:#26364d !important;
}
body.simulator-layout .app-disclaimer,
body.simulator-layout .app-disclaimer span,
body.simulator-layout .app-disclaimer-sep{
  color:rgba(8,15,28,0.82) !important;
  opacity:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,0.25) !important;
}
/* Stronger contrast for result tables */
body.simulator-layout td.ontime,
body.simulator-layout td.early,
body.simulator-layout td.late,
body.simulator-layout td.action-cell,
body.simulator-layout td.headway-green,
body.simulator-layout td.headway-red,
body.simulator-layout td.headway-blue,
body.simulator-layout td.hw-cell,
body.simulator-layout td.status,
body.simulator-layout td:last-child{
  text-shadow:none !important;
}
body.simulator-layout td.ontime,
body.simulator-layout td.early,
body.simulator-layout td.late,
body.simulator-layout td.action-cell,
body.simulator-layout td.headway-green,
body.simulator-layout td.headway-red,
body.simulator-layout td.headway-blue{
  color:#101820 !important;
}


/* Re-apply stronger city backdrop art for all city packs */
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V430h145v-26h18v26h95v-50h26v50h66v-112h34v112h48v-72h26v72h58v-34h210v34h54v-82h20v82h120v-40h20v40h165v-28h18v28h60v90z%27/%3E%20%3Cpath%20d%3D%27M392%20430v-188h24v188zM384%20248h40l-20-40z%27/%3E%20%3Ccircle%20cx%3D%27620%27%20cy%3D%27310%27%20r%3D%2792%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.34%27%20stroke-width%3D%2712%27/%3E%20%3Cpath%20d%3D%27M620%20218v184M528%20310h184%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%274%27/%3E%20%3Cpath%20d%3D%27M1005%20430V320h18v110zM1030%20430V300h18v130zM1055%20430V280h18v150z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V438h120v-40h60v40h90v-58h40v58h130v-32h90v32h110v-160h54v160h84v-110h28v110h180v-48h48v48h150v82z%27/%3E%20%3Cpath%20d%3D%27M690%20438V180h74v258z%27/%3E%20%3Cpath%20d%3D%27M708%20180h38l36-52v12l-14%2024%2014%2016-16%200-8-10-8%2010-16%200%2014-16-14-24V128z%27%20/%3E%20%3Cpath%20d%3D%27M890%20438V215h60v223zM920%20215l30-82%2030%2082z%27/%3E%20%3Cpath%20d%3D%27M1120%20438V250h36v188zM1110%20250h56l-28-38z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V440h150v-30h58v30h170v-58h42v58h118v-74h86v74h150v-48h62v48h150v80z%27/%3E%20%3Cpath%20d%3D%27M560%20440V270h84v170zM548%20270h108l-54-44z%27/%3E%20%3Cpath%20d%3D%27M595%20226c14-28%2038-40%2062%200%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%275%27/%3E%20%3Cpath%20d%3D%27M870%20440V210h26v230zM850%20230h66v-20h-66zM860%20210l16-42%2016%2042z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V438h160v-22h60v22h180v-36h80v36h220v-30h78v30h120v-38h78v38h160v82z%27/%3E%20%3Cpath%20d%3D%27M590%20438V188h20v250zM565%20212h70l-35-70zM575%20238h50%27%20/%3E%20%3Cpath%20d%3D%27M900%20438V286h160v152zM920%20286v-30h18v30M952%20286v-30h18v30M984%20286v-30h18v30M1016%20286v-30h18v30M1048%20286v-30h18v30M1080%20286v-30h18v30%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h130v-18h44v18h180v-44h100v44h130v-30h50v30h130v-40h70v40h170v74z%27/%3E%20%3Cpath%20d%3D%27M432%20446V280h54v166zM418%20280h82l-41-50z%27/%3E%20%3Cpath%20d%3D%27M860%20446V250h20v196zM820%20286l50-80%2050%2080zM930%20446V250h20v196zM890%20286l50-80%2050%2080z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="braga"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h150v-18h44v18h220v-34h86v34h200v-50h110v50h130v72z%27/%3E%20%3Cpath%20d%3D%27M430%20448V270h28v178zM404%20448V300h22v148zM462%20448V300h22v148zM410%20300h68v-20h-68zM418%20280l20-28%2020%2028z%27%20/%3E%20%3Cpath%20d%3D%27M785%20448c0-38%2018-58%2038-74%2018-14%2034-28%2034-54%200%2026%2016%2040%2034%2054%2020%2016%2038%2036%2038%2074z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h180v-24h44v24h180v-34h84v34h138v-46h94v46h130v74z%27/%3E%20%3Cpath%20d%3D%27M790%20446V170h20v276zM776%20184h48l-24-70z%27%20/%3E%20%3Cpath%20d%3D%27M430%20446V286h76v160zM418%20286h100l-50-34z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h170v-22h44v22h210v-28h100v28h184v-38h118v38h150v74z%27/%3E%20%3Cpath%20d%3D%27M545%20446V296h130v150zM558%20296v-28h104v28M575%20296V260M606%20296V260M638%20296V260M669%20296V260%27%20/%3E%20%3Cpath%20d%3D%27M875%20446V230h24v216zM860%20250h54v-18h-54zM872%20230l14-26%2014%2026z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="milan"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h190v-20h44v20h210v-32h80v32h250v-42h110v42h170v72z%27/%3E%20%3Cpath%20d%3D%27M640%20448V250h140v198zM650%20250l12-18%2012%2018%2012-24%2012%2024%2012-18%2012%2018%2012-20%2012%2020%2012-18%2012%2018zM668%20448V300M700%20448V284M732%20448V302M764%20448V290%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="paris"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V446h150v-20h44v20h170v-34h90v34h230v-40h100v40h160v74z%27/%3E%20%3Cpath%20d%3D%27M620%20446%20700%20170%20780%20446zM664%20330h72M648%20380h104M680%20446V306h40v140z%27%20/%3E%20%3Cpath%20d%3D%27M960%20446V330h120v116zM972%20330v-24h96v24M990%20330V300M1020%20330V300M1050%20330V300%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="porto"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h160v-20h44v20h140v-34h86v34h170v-48h110v48h130v72z%27/%3E%20%3Cpath%20d%3D%27M330%20392h250v10H330zM350%20392V320h14v72zM390%20392V300h14v92zM430%20392V280h14v112zM470%20392V300h14v92zM510%20392V320h14v72z%27%20/%3E%20%3Cpath%20d%3D%27M780%20448V248h22v200zM770%20260h42v-20h-42zM781%20248l10-30%2010%2030z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h160v-22h44v22h230v-34h96v34h170v-46h110v46h150v72z%27/%3E%20%3Cpath%20d%3D%27M560%20448V300h160v148zM582%20340c0-24%2016-40%2034-40s34%2016%2034%2040-16%2040-34%2040-34-16-34-40zm70%200c0-24%2016-40%2034-40s34%2016%2034%2040-16%2040-34%2040-34-16-34-40z%27%20fill%3D%27none%27%20stroke%3D%27%239fc7ef%27%20stroke-opacity%3D%27.34%27%20stroke-width%3D%278%27/%3E%20%3Cpath%20d%3D%27M810%20448V260h24v188zM798%20272h48v-16h-48z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201600%20520%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20fill%3D%27%23d8eaff%27%20fill-opacity%3D%27.58%27%20stroke%3D%27%238fb7e3%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272%27%3E%20%3Cpath%20d%3D%27M0%20520V448h170v-18h44v18h180v-34h90v34h190v-44h102v44h150v72z%27/%3E%20%3Cpath%20d%3D%27M540%20448V260h28v188zM530%20272h48v-18h-48zM544%20260l10-24%2010%2024z%27%20/%3E%20%3Cpath%20d%3D%27M620%20448V286h18v162zM638%20448V314h58v134zM650%20314l17-42%2017%2042z%27%20/%3E%20%3Cpath%20d%3D%27M840%20448V300h120l-60-70z%27%20/%3E%20%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-size:100% 100%, cover !important;background-position:center center, center bottom !important;;opacity:0.88 !important;filter:saturate(1.22) contrast(1.10) !important;}
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::before{filter:saturate(1.22) contrast(1.10) !important;opacity:0.9 !important;}


/* =========================================================
   KPI FOOTER LAYOUT SPREAD FIX
   - spread bottom KPI tiles so all key panels are visible
   - make the last 3 panels (incentive / action / compliance) fully visible
   ========================================================= */
body.simulator-layout .bottom-dock{
  left:12px !important;
  right:12px !important;
}
body.simulator-layout .kpi-tiles{
  display:grid !important;
  grid-template-columns: repeat(7, minmax(110px, 1fr)) minmax(190px, 1.15fr) minmax(320px, 1.9fr) minmax(360px, 2.1fr) !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:visible !important;
}
body.simulator-layout .kpi-tile,
body.simulator-layout .kpi-tile.kpi-tile-wide,
body.simulator-layout .kpi-tile.action{
  min-width:0 !important;
  width:auto !important;
  flex:auto !important;
}
body.simulator-layout .kpi-tile{
  padding:9px 10px !important;
}
body.simulator-layout .kpi-value.kpi-wrap{
  font-size:0.92rem !important;
  line-height:1.18 !important;
}
body.simulator-layout #kpiComplianceHeadline{
  font-size:1.0rem !important;
  line-height:1.15 !important;
}
body.simulator-layout #kpiComplianceDetail{
  font-size:0.78rem !important;
  line-height:1.18 !important;
}
@media (max-width: 1700px){
  body.simulator-layout .kpi-tiles{
    grid-template-columns: repeat(7, minmax(100px, 1fr)) minmax(170px, 1.05fr) minmax(280px, 1.7fr) minmax(300px, 1.8fr) !important;
  }
}
@media (max-width: 1450px){
  body.simulator-layout .kpi-tiles{
    grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(180px, 1.2fr) minmax(240px, 1.5fr) minmax(260px, 1.7fr) !important;
  }
}
@media (max-width: 1200px){
  body.simulator-layout .kpi-tiles{
    grid-template-columns: repeat(3, minmax(140px, 1fr)) repeat(2, minmax(220px, 1.3fr)) !important;
  }
}

/* =========================================================
   BOTTOM RESULTS STACK FIX
   Shows all 3 result sections instead of hiding them behind KPI dock:
   1) What matters now
   2) Selected / EWT status strip
   3) KPI results dock
   ========================================================= */
body.simulator-layout .wmn-strip{
  position:relative !important;
  z-index:20 !important;
  margin:10px 14px 6px 14px !important;
  width:auto !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,221,129,0.42) !important;
  background:linear-gradient(90deg, rgba(255,230,150,0.92), rgba(234,244,255,0.88)) !important;
  color:#101820 !important;
  box-shadow:0 8px 20px rgba(0,0,0,0.10) !important;
}
body.simulator-layout .wmn-label,
body.simulator-layout .wmn-text,
body.simulator-layout .wmn-sep,
body.simulator-layout .wmn-exposure-label,
body.simulator-layout .wmn-exposure-value,
body.simulator-layout .wmn-exposure-sub{
  color:#101820 !important;
  opacity:1 !important;
}
body.simulator-layout .wmn-label{
  font-weight:900 !important;
}

body.simulator-layout .sim-controls.ewt-compact{
  position:relative !important;
  z-index:19 !important;
  margin:6px 14px 8px 14px !important;
  width:auto !important;
  box-sizing:border-box !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(165,213,255,0.30) !important;
  background:linear-gradient(180deg, rgba(220,236,255,0.92), rgba(190,216,249,0.88)) !important;
  color:#101820 !important;
  box-shadow:0 8px 20px rgba(0,0,0,0.10) !important;
}
body.simulator-layout .sim-controls.ewt-compact *,
body.simulator-layout .sim-controls.ewt-compact .value,
body.simulator-layout .sim-controls.ewt-compact .session-label{
  color:#101820 !important;
}
body.simulator-layout .sim-controls.ewt-compact .session-input{
  background:rgba(255,255,255,0.74) !important;
  color:#101820 !important;
  border:1px solid rgba(35,68,115,0.22) !important;
}

body.simulator-layout .bottom-dock{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:18 !important;
  display:block !important;
  width:auto !important;
  margin:8px 14px 10px 14px !important;
  pointer-events:auto !important;
}
body.simulator-layout .kpi-dock{
  width:100% !important;
  box-sizing:border-box !important;
  padding:12px 12px !important;
}
body.simulator-layout .kpi-tiles{
  overflow:visible !important;
}

/* Footer should not sit over the result panels */
body.simulator-layout .app-disclaimer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:1 !important;
  display:block !important;
  padding:6px 110px 8px 110px !important;
  color:rgba(8,15,28,0.82) !important;
  background:transparent !important;
}

/* Keep the floating buttons visible but out of the KPI panel way */
body.simulator-layout #aboutBtn{
  bottom:10px !important;
  z-index:10000 !important;
}
body.simulator-layout #manualLogToggleBtn{
  right:168px !important;
  bottom:10px !important;
  z-index:10000 !important;
}
body.simulator-layout #dispatchToggleBtn{
  right:16px !important;
  bottom:10px !important;
  z-index:10000 !important;
}

@media (max-width: 1000px){
  body.simulator-layout .app-disclaimer{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* =========================================================
   REALISTIC CITY PHOTO BACKDROPS — injected version
   Uses actual cityscape image files instead of SVG/arrow-style outlines.
   The pale overlay keeps buses, stops, route lines, and labels readable.
   ========================================================= */
body.simulator-layout .track-wrapper{
  background:linear-gradient(180deg, rgba(235,246,255,0.96), rgba(211,231,255,0.93)) !important;
}

body.simulator-layout .track-wrapper::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  filter:none !important;
  background-repeat:no-repeat !important;
  background-size:100% 100%, cover !important;
  background-position:center center, center center !important;
  background-blend-mode:normal !important;
}

/* remove the giant city-word watermark because the photo landmarks identify the city */
body.simulator-layout .track-wrapper::after{
  content:"" !important;
  display:none !important;
}

/* keep operational content above the city photo */
body.simulator-layout .track-wrapper > .track-label,
body.simulator-layout .track-wrapper > #simSvg,
body.simulator-layout .track-wrapper > .stand-overlay,
body.simulator-layout .track-wrapper .bus-label,
body.simulator-layout .track-wrapper .next-bus{
  position:relative !important;
  z-index:2 !important;
}

/* Main requested city images */
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.46), rgba(218,236,255,0.42)), url("assets/city-bg/london.jpg") !important;
}
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.46), rgba(218,236,255,0.42)), url("assets/city-bg/berlin.jpg") !important;
}
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.46), rgba(218,236,255,0.42)), url("assets/city-bg/madrid.jpg") !important;
}
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.46), rgba(218,236,255,0.42)), url("assets/city-bg/lisbon.jpg") !important;
}
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.46), rgba(218,236,255,0.42)), url("assets/city-bg/belgrade.jpg") !important;
}

/* Regional fallbacks until dedicated images are supplied/generated */
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::before,
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.48), rgba(218,236,255,0.44)), url("assets/city-bg/london.jpg") !important;
}
body.simulator-layout[data-city-pack="braga"] .track-wrapper::before,
body.simulator-layout[data-city-pack="porto"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.48), rgba(218,236,255,0.44)), url("assets/city-bg/lisbon.jpg") !important;
}
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::before,
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.48), rgba(218,236,255,0.44)), url("assets/city-bg/belgrade.jpg") !important;
}
body.simulator-layout[data-city-pack="milan"] .track-wrapper::before,
body.simulator-layout[data-city-pack="paris"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.48), rgba(218,236,255,0.44)), url("assets/city-bg/madrid.jpg") !important;
}
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::before,
body.simulator-layout[data-city-pack="default"] .track-wrapper::before,
body.simulator-layout:not([data-city-pack]) .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.50), rgba(218,236,255,0.46)), url("assets/city-bg/berlin.jpg") !important;
}

/* make route labels readable over the photo */
body.simulator-layout .track-wrapper .track-label,
body.simulator-layout .track-wrapper .next-bus{
  color:#073763 !important;
  text-shadow:0 1px 0 rgba(255,255,255,0.72), 0 0 8px rgba(255,255,255,0.62) !important;
}

/* =========================================================
   CITY PHOTO POSITION FIX
   - lowers the city photographs inside the AVL route window
   - stretches/fits the full image into the diagram area so landmarks are visible
   - reduces the white overlay so city attractions can be seen clearly
   ========================================================= */
body.simulator-layout .track-wrapper::before{
  background-repeat:no-repeat !important;
  background-size:100% 100%, 100% 100% !important;
  background-position:center center, center bottom !important;
  opacity:1 !important;
}
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.30), rgba(218,236,255,0.24)), url("assets/city-bg/london.jpg") !important;
}
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.30), rgba(218,236,255,0.24)), url("assets/city-bg/berlin.jpg") !important;
}
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.30), rgba(218,236,255,0.24)), url("assets/city-bg/madrid.jpg") !important;
}
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.30), rgba(218,236,255,0.24)), url("assets/city-bg/lisbon.jpg") !important;
}
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.30), rgba(218,236,255,0.24)), url("assets/city-bg/belgrade.jpg") !important;
}
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::before,
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.32), rgba(218,236,255,0.26)), url("assets/city-bg/london.jpg") !important;
}
body.simulator-layout[data-city-pack="braga"] .track-wrapper::before,
body.simulator-layout[data-city-pack="porto"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.32), rgba(218,236,255,0.26)), url("assets/city-bg/lisbon.jpg") !important;
}
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::before,
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.32), rgba(218,236,255,0.26)), url("assets/city-bg/belgrade.jpg") !important;
}
body.simulator-layout[data-city-pack="milan"] .track-wrapper::before,
body.simulator-layout[data-city-pack="paris"] .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.32), rgba(218,236,255,0.26)), url("assets/city-bg/madrid.jpg") !important;
}
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::before,
body.simulator-layout[data-city-pack="default"] .track-wrapper::before,
body.simulator-layout:not([data-city-pack]) .track-wrapper::before{
  background-image:linear-gradient(180deg, rgba(232,244,255,0.34), rgba(218,236,255,0.28)), url("assets/city-bg/berlin.jpg") !important;
}


/* =========================================================
   FINAL HIGH-QUALITY REALISTIC CITY PHOTO BACKDROPS
   These overrides replace earlier SVG/low-res/faded attempts.
   ========================================================= */
body.simulator-layout .track-wrapper{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:linear-gradient(180deg, rgba(236,247,255,0.98), rgba(219,236,255,0.96)) !important;
}
body.simulator-layout .track-wrapper::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  filter:none !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center center !important;
}
body.simulator-layout .track-wrapper::after{
  display:none !important;
  content:"" !important;
}
body.simulator-layout .track-wrapper > .track-label,
body.simulator-layout .track-wrapper > #simSvg,
body.simulator-layout .track-wrapper > .stand-overlay{
  position:relative !important;
  z-index:2 !important;
}
body.simulator-layout[data-city-pack="london"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/london.jpg") !important;}
body.simulator-layout[data-city-pack="riyadh"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/riyadh.jpg") !important;}
body.simulator-layout[data-city-pack="belfast"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/belfast.jpg") !important;}
body.simulator-layout[data-city-pack="belgrade"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/belgrade.jpg") !important;}
body.simulator-layout[data-city-pack="berlin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/berlin.jpg") !important;}
body.simulator-layout[data-city-pack="braga"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/braga.jpg") !important;}
body.simulator-layout[data-city-pack="dublin"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/dublin.jpg") !important;}
body.simulator-layout[data-city-pack="lisbon"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/lisbon.jpg") !important;}
body.simulator-layout[data-city-pack="madrid"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/madrid.jpg") !important;}
body.simulator-layout[data-city-pack="milan"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/milan.jpg") !important;}
body.simulator-layout[data-city-pack="paris"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/paris.jpg") !important;}
body.simulator-layout[data-city-pack="porto"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/porto.jpg") !important;}
body.simulator-layout[data-city-pack="prishtina"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/prishtina.jpg") !important;}
body.simulator-layout[data-city-pack="tirana"] .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/tirana.jpg") !important;}
body.simulator-layout[data-city-pack="default"] .track-wrapper::before,
body.simulator-layout:not([data-city-pack]) .track-wrapper::before{background-image:linear-gradient(180deg, rgba(236,247,255,0.08), rgba(219,236,255,0.06)), url("assets/city-bg/london.jpg") !important;}


/* === ALWAYS-ON-TOP ACTION ENTRY / DISPATCHER LOG MODAL FIX === */
#dispatchFlyout,
#manualLogFlyout{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  right:auto !important;
  bottom:auto !important;
  left:0 !important;
  top:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px !important;
  background:rgba(3,12,32,.64) !important;
  backdrop-filter:blur(8px) !important;
  z-index:2147483000 !important;
  pointer-events:auto !important;
  overflow:auto !important;
}
#dispatchFlyout.is-open,
#manualLogFlyout.is-open{
  display:flex !important;
}
#dispatchFlyout .dispatch-log-card,
#manualLogFlyout .dispatch-log-card{
  position:relative !important;
  z-index:2147483001 !important;
  width:min(96vw,1400px) !important;
  height:min(88vh,840px) !important;
  max-height:min(88vh,840px) !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#manualLogFlyout .manual-log-card{
  width:min(96vw,900px) !important;
  height:auto !important;
  min-height:360px !important;
  max-height:min(88vh,840px) !important;
}
#dispatchFlyout .dispatch-log-wrapper,
#manualLogFlyout .dispatch-log-wrapper{
  flex:1 1 auto !important;
  max-height:none !important;
  overflow:auto !important;
}
#dispatchFlyout .dispatch-flyout-close,
#manualLogFlyout .dispatch-flyout-close{
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}