*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,Arial;background:#f4f5f7}
/* dvh keeps the shell from being cut off under iOS Safari's dynamic toolbars;
   the plain vh line is the fallback for browsers without dvh. */
.sim-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
.sim-header{
background:#111827;color:#fff;padding:16px 20px;
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:10px 14px}
.sim-header h1{margin:0;font-size:20px;line-height:1.1}
.subtitle{opacity:.7;font-size:13px}
.sim-controls{display:flex;flex-wrap:wrap;gap:8px}
.sim-controls button{margin-left:0}
.sim-grid{
flex:1;display:grid;grid-template-columns:320px 1fr;
gap:16px;padding:16px;overflow:hidden;min-height:0}
.left-panel{overflow:auto}
.card,.metric,.map-card,.control-center{
background:#fff;border-radius:14px;
box-shadow:0 2px 8px rgba(0,0,0,.08)}
.card{padding:16px}
.card + .card{margin-top:16px}
.card label{display:block;margin-bottom:12px}
.card input{display:block;margin-top:6px}
.card select{display:block;margin-top:6px;width:100%;padding:6px 8px;border-radius:6px;border:1px solid #d7dad2;font-size:13px;background:#fff}
.card .check-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card .check-row input{display:inline-block;margin:0;width:auto}
.card .check-row label{display:inline;margin:0;cursor:pointer}
.card .field-hint{font-size:11px;color:#6b7160;line-height:1.4;margin-top:2px}
.metrics{
flex:0 0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px}
.metric{padding:16px}

/* main-panel scrolls as a whole if metrics+map+control-center exceed the
   viewport, instead of sim-grid's overflow:hidden silently clipping the
   bottom off with no way to reach it. */
.main-panel{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}

.map-card{
flex:1 1 420px;min-height:320px;
display:flex;flex-direction:column;
overflow:hidden}
.map-toolbar{
flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:8px 12px;border-bottom:1px solid #e5e7eb;font-size:12px;color:#6b7280}
.map-toolbar button{cursor:pointer}
.speed-group{display:flex;align-items:center;gap:6px;margin-left:14px;padding-left:14px;border-left:1px solid #e5e7eb}
.speed-group input[type=range]{width:130px;vertical-align:middle;cursor:pointer}
.speed-group #speedLabel{min-width:78px;font-family:ui-monospace,monospace;color:#374151}
.map-hint{margin-left:auto;color:#9aa092;font-style:italic}
#floorMap{
flex:1 1 auto;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;cursor:grab;background:#fafbfa}
#floorMap.dragging{cursor:grabbing;user-select:none}
#floorMap svg{transform-origin:top left}

/* ── Control Center ── */
.control-center{flex:0 0 auto;max-height:240px;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
.control-center h3{margin:0 0 10px;font-size:14px}
.control-center table{width:100%;border-collapse:collapse;font-size:13px}
.control-center th{
text-align:left;padding:6px 10px;border-bottom:2px solid #e5e7eb;
color:#6b7280;font-weight:600;font-size:11px;text-transform:uppercase;
position:sticky;top:0;background:#fff}
.control-center td{padding:6px 10px;border-bottom:1px solid #f0f1f3}
.control-center .cc-empty{color:#9aa092;font-style:italic;padding:12px 10px}
.cc-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
.cc-state{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.cc-state.traveling{background:#e4f0f8;color:#1f5c8a}
.cc-state.working{background:#e7f3ea;color:#2e6b3e}
.cc-state.idle{background:#f1f2ee;color:#6b7160}
.cc-state.done{background:#f4e6f1;color:#7a2e6b}

@media(max-width:900px){
.sim-grid{grid-template-columns:1fr}
.metrics{grid-template-columns:repeat(2,1fr)}
}

/* ── avatars + pick effect (see js/pages/simulator-engine.js) ── */
.flux-avatar{transition:transform 60ms linear}
.flux-avatar image{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.flux-avatar-ring{filter:blur(0.3px)}

.flux-pick-highlight{
  opacity:0; pointer-events:none;
  animation:fluxHighlightFlash 750ms ease-out forwards;
}
@keyframes fluxHighlightFlash{
  0%   { opacity:0; }
  18%  { opacity:.85; }
  100% { opacity:0; }
}

.flux-pick-pop{pointer-events:none}
.flux-pick-pop-inner{
  transform-box:fill-box; transform-origin:center;
  animation:fluxPop 750ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes fluxPop{
  0%   { transform:translateY(6px) scale(.3);  opacity:0; }
  25%  { transform:translateY(-6px) scale(1.25); opacity:1; }
  55%  { transform:translateY(-16px) scale(1);   opacity:1; }
  100% { transform:translateY(-34px) scale(.7);  opacity:0; }
}

/* ── digital clock ── */
.sim-clock{
font-family:ui-monospace,'SF Mono',monospace;font-size:22px;font-weight:700;
color:#7ee787;background:#0a0f1a;border:1px solid #263248;border-radius:8px;
padding:6px 16px;letter-spacing:1px}

.file-status{font-size:11px;color:#6b7160;margin:-8px 0 12px;min-height:14px}
.file-status.ok{color:#2e6b3e}
.file-status.err{color:#a0192a}

/* ── race rank / leaderboard ── */
.cc-rank{font-weight:700}
.cc-rank-1{color:#c9961a}
.cc-rank-2{color:#8a8f98}
.cc-rank-3{color:#a56a3a}

/* ══ Real Day Import modal ══ */
.modal-overlay{
position:fixed;inset:0;background:rgba(17,24,39,.6);
display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.modal-overlay[hidden]{display:none}
.modal-panel{
background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{
display:flex;align-items:center;justify-content:space-between;
padding:16px 20px;border-bottom:1px solid #e5e7eb}
.modal-head h3{margin:0;font-size:16px}
.modal-filename{font-weight:400;color:#6b7280;font-size:13px;margin-left:8px}
#modalClose{border:none;background:#f1f2ee;border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:14px;color:#6b7160}
#modalClose:hover{background:#e5e7e0}
.modal-body{padding:18px 20px;overflow:auto;flex:1 1 auto}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.modal-body h4{margin:0 0 10px;font-size:13px;color:#374151;display:flex;align-items:center;gap:8px}
.modal-body .hint{font-weight:400;color:#9aa092;font-size:11px}

.pie-card,.zone-table-card,.picker-card{background:#f9fafb;border-radius:10px;padding:14px}
.pie-wrap{display:flex;align-items:center;gap:16px}
#zonePie{width:130px;height:130px;flex:0 0 auto}
.pie-legend{font-size:12px;display:flex;flex-direction:column;gap:6px}
.pie-legend-item{display:flex;align-items:center;gap:7px}
.pie-swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.zone-select{font-size:12px;padding:2px 6px;border-radius:6px;border:1px solid #d7dad2;margin-left:auto}

.zone-table-scroll,.picker-scroll{max-height:180px;overflow:auto}
#zoneTable{width:100%;border-collapse:collapse;font-size:12.5px}
#zoneTable th,#zoneTable td{padding:5px 8px;text-align:left;border-bottom:1px solid #eceeea}
#zoneTable th{position:sticky;top:0;background:#f9fafb;color:#6b7280;font-size:11px;text-transform:uppercase}

.picker-actions{display:flex;gap:10px;margin-bottom:8px}
.link-btn{background:none;border:none;color:#457b9d;font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline}
.picker-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:12.5px}
.picker-row:hover{background:#eef0eb}
.picker-row label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-row .picker-meta{color:#9aa092;font-size:11px;flex:0 0 auto}

/* ── grouped Workload → Route → Batch tree (Real Day Import batch picker) ── */
#batchList.picker-scroll{max-height:260px}
.tree-row{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:6px;font-size:12.5px}
.tree-row:hover{background:#eef0eb}
.tree-row label{display:flex;align-items:center;gap:7px;flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-row .picker-meta{color:#9aa092;font-size:11px;flex:0 0 auto}
.tree-toggle{border:none;background:none;cursor:pointer;font-size:10px;color:#6b7280;width:16px;flex:0 0 auto;padding:0;line-height:1;text-align:center}
.tree-toggle:hover{color:#374151}
.wl-children{margin-left:13px;border-left:1px solid #e6e8e3;padding-left:6px}
.rt-children{margin-left:19px;border-left:1px solid #edeee9;padding-left:6px}
.wl-row>label b{font-weight:700}
.rt-row{font-size:12px}
.bt-row{padding-left:20px}
.bt-row .picker-meta{font-size:10.5px}
.only-btn{border:1px solid #d7dad2;background:#fff;color:#457b9d;font-size:10px;border-radius:5px;padding:1px 7px;cursor:pointer;flex:0 0 auto}
.only-btn:hover{background:#eef4f8;border-color:#9db8cc}

.modal-foot{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 20px;border-top:1px solid #e5e7eb;background:#fafbfa}
.modal-summary{font-size:12.5px;color:#6b7280}
#runRealDayBtn{
background:#111827;color:#fff;border:none;border-radius:8px;
padding:10px 18px;font-size:13.5px;cursor:pointer}
#runRealDayBtn:disabled{background:#c7cad2;cursor:not-allowed}

@media(max-width:720px){
.modal-row{grid-template-columns:1fr}
}

/* clickable Control Center rows -> zoom to selector (js/pages/simulator-page.js) */
.cc-row{cursor:pointer}
.cc-row:hover td{background:#eef3f7}
.cc-row-selected td{background:#e3f0e7;box-shadow:inset 3px 0 0 #2a9d8f}

/* ── timeline scrubber ── */
.scrubber-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:#fff;border-bottom:1px solid #e5e7eb}
.scrubber-bar .scrub-time{font-family:ui-monospace,monospace;font-size:12px;color:#6b7160;min-width:52px;text-align:center}
.scrubber-bar input[type=range]{flex:1;cursor:pointer;accent-color:#c9621a}
.scrubber-bar input[type=range]:disabled{opacity:.45;cursor:not-allowed}

/* ── clickable selector name in the Control Center ── */
.cc-name-link{color:#2b6cb0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.cc-name-link:hover{color:#1a4a80;text-decoration-style:solid}

/* ── selector detail panel (bottom-docked, map stays visible above) ── */
body.sd-open{padding-bottom:0}
.sd-panel{position:fixed;left:0;right:0;bottom:0;height:56vh;background:#fff;border-top:2px solid #c9621a;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);display:none;flex-direction:column;z-index:900;font-family:system-ui,Segoe UI,Roboto,sans-serif}
.sd-panel.open{display:flex}
.sd-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #eee}
.sd-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#23271c}
.sd-swatch{width:14px;height:14px;border-radius:3px;display:inline-block}
.sd-sub{font-weight:400;font-size:12px;color:#6b7160;margin-left:6px}
.sd-head-actions{display:flex;gap:8px}
.sd-btn{border:1px solid #d7dad2;background:#f5f6f3;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:12px;color:#23271c}
.sd-btn:hover{background:#eceee8}
.sd-btn-sm{padding:2px 8px;font-size:11px}
.sd-close{font-weight:700}
.sd-toolbar{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid #eee;flex-wrap:wrap}
.sd-live{font-size:12px;color:#374151;display:flex;align-items:center;gap:5px;cursor:pointer}
.sd-count{font-size:12px;color:#6b7160}
.sd-lookup{margin-left:auto;display:flex;align-items:center;gap:6px}
.sd-lookup input{padding:5px 8px;border:1px solid #d7dad2;border-radius:5px;font-size:12px;width:150px}
.sd-colpick{position:relative}
.sd-colmenu{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #d7dad2;border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;max-height:340px;overflow:auto;width:260px;z-index:50}
.sd-colmenu.hidden{display:none}
.sd-colmenu-actions{display:flex;gap:6px;margin-bottom:6px}
.sd-cp-group{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#9aa092;margin:8px 0 3px;font-weight:700}
.sd-cp-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#23271c;padding:2px 0;cursor:pointer}
.sd-cp-item.locked{opacity:.6;cursor:default}
.sd-lookup-results{padding:8px 16px;border-bottom:1px solid #eee;background:#fffdf7;max-height:130px;overflow:auto}
.sd-lookup-results.hidden{display:none}
.sd-lookup-title{font-size:12px;font-weight:700;color:#23271c;margin-bottom:4px}
.sd-lookup-empty{font-size:12px;color:#6b7160}
.sd-lookup-rows{display:flex;flex-direction:column;gap:4px}
.sd-lookup-item{display:flex;align-items:center;gap:12px;font-size:12px}
.sd-lk-batch{font-weight:700;color:#23271c;min-width:90px}
.sd-lk-count{color:#c9621a;font-weight:700}
.sd-lk-done{color:#6b7160;font-family:ui-monospace,monospace}
.sd-tablewrap{flex:1;overflow:auto;padding:0}
.sd-table{border-collapse:collapse;width:100%;font-size:12px}
.sd-table th,.sd-table td{border:1px solid #eceee8;padding:3px 8px;text-align:left;white-space:nowrap}
.sd-table thead th{background:#f5f6f3;position:sticky;top:0;z-index:2}
.sd-table thead tr.sd-filter-row th{top:26px;background:#fafbf8}
.sd-filter-row input{width:100%;min-width:70px;border:1px solid #dfe1da;border-radius:4px;padding:2px 5px;font-size:11px}
.sd-table tbody tr:nth-child(odd){background:#fcfdfb}
.sd-empty{color:#9aa092;font-style:italic;padding:14px}

/* ══════════════════════════════════════════════════════════════════
   MOBILE / PHONE SUPPORT  (iPhone Safari first)
   Convention going forward: design for a ~380px viewport, let rows wrap
   instead of overflowing, give inputs 16px font so iOS doesn't auto-zoom
   on focus, use dvh for full-height elements, and respect safe-area insets.
   ══════════════════════════════════════════════════════════════════ */

/* stop iOS Safari from zooming the page in when a small-font input is
   focused — 16px is the threshold. Applies to every text-ish input. */
@media (max-width: 768px){
  input[type=text], input[type=number], input[type=search], select, textarea{
    font-size: 16px;
  }
}

@media (max-width: 600px){
  /* ── header: title, clock, and transport controls each get their own
        line instead of colliding ── */
  .sim-header{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0))}
  .sim-header h1{font-size:18px}
  .subtitle{font-size:12px}
  .sim-header > div:first-child{flex:1 1 100%}
  #simClock{font-size:16px;padding:4px 10px;letter-spacing:.5px}
  .sim-controls{flex:1 1 100%;justify-content:space-between}
  .sim-controls button{flex:1 1 auto;min-height:38px;font-size:13px;padding:6px 8px}

  /* ── scrubber ── */
  .scrubber-bar{padding:8px 12px;gap:8px}
  .scrubber-bar .scrub-time{min-width:44px;font-size:11px}

  /* ── layout: single column, tighter gaps ── */
  /* let the whole document scroll as one on phones instead of trapping
     scroll inside the grid's fixed-height panes (nested scroll = bad UX) */
  .sim-shell{height:auto;min-height:100dvh}
  .sim-grid{padding:10px;gap:10px;overflow:visible;height:auto}
  .left-panel{overflow:visible}
  .main-panel{overflow:visible}
  .metrics{grid-template-columns:repeat(2,1fr);gap:8px}
  .metric{padding:12px}
  .card{padding:14px}
  .card h3{font-size:15px}
  .card label{margin-bottom:10px;font-size:14px}

  /* ── map: give it a usable fixed-ish height so it neither collapses nor
        swallows the whole screen; two-finger/drag pan still works ── */
  .map-card{flex:0 0 auto;height:52vh;height:52dvh;min-height:280px}
  .map-toolbar{font-size:11px;gap:6px}
  .map-toolbar button{min-height:34px;padding:5px 9px}
  .speed-group{margin-left:0;padding-left:0;border-left:none;flex:1 1 100%}
  .speed-group input[type=range]{flex:1}
  .map-hint{display:none}

  /* ── Control Center: horizontal scroll as a unit instead of clipping ── */
  .control-center{max-height:none;padding:12px}
  .control-center table{min-width:560px}
  .control-center th,.control-center td{padding:6px 8px}

  /* ── Real Day Import modal: near-fullscreen ── */
  .modal-overlay{padding:10px}
  .modal-panel{width:100%;max-height:92vh;max-height:92dvh;border-radius:12px}
  .modal-body{padding:14px}
  .modal-row{grid-template-columns:1fr;gap:14px}
  .pie-wrap{flex-direction:column;align-items:flex-start}
  .modal-foot{flex-direction:column;align-items:stretch;gap:10px}
  #runRealDayBtn{width:100%;padding:12px}

  /* ── selector detail panel: full-width bottom sheet, safe-area aware ── */
  .sd-panel{height:72vh;height:72dvh;padding-bottom:env(safe-area-inset-bottom,0)}
  .sd-head{padding:10px 12px}
  .sd-title{font-size:14px;flex-wrap:wrap}
  .sd-sub{margin-left:0;flex:1 1 100%}
  .sd-toolbar{gap:8px;padding:8px 12px}
  .sd-lookup{margin-left:0;flex:1 1 100%}
  .sd-lookup input{flex:1;width:auto}
  .sd-colmenu{width:min(280px,86vw)}
  .sd-btn{min-height:34px}
  .sd-table th,.sd-table td{padding:4px 6px}
}

/* very narrow phones (older/SE) */
@media (max-width: 380px){
  .metrics{grid-template-columns:1fr 1fr}
  .sim-header h1{font-size:16px}
  #simClock{font-size:15px}
}

/* ══ shared CaseTable (js/core/case-table.js) — used by selector detail
      AND the movable file viewer, so both look identical ══ */
.ct-root{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.ct-toolbar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #eee;flex-wrap:wrap}
.ct-toolbar-extra{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ct-count{font-size:12px;color:#6b7160}
.ct-btn{border:1px solid #d7dad2;background:#f5f6f3;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:12px;color:#23271c}
.ct-btn:hover{background:#eceee8}
.ct-btn-sm{padding:2px 8px;font-size:11px}
.ct-colpick{position:relative}
.ct-colmenu{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #d7dad2;border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;max-height:340px;overflow:auto;width:min(280px,86vw);z-index:50}
.ct-colmenu.hidden{display:none}
.ct-colmenu-actions{display:flex;gap:6px;margin-bottom:6px}
.ct-cp-group{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#9aa092;margin:8px 0 3px;font-weight:700}
.ct-cp-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#23271c;padding:2px 0;cursor:pointer}
.ct-cp-item.locked{opacity:.6;cursor:default}
.ct-tablewrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.ct-table{border-collapse:collapse;width:100%;font-size:12px}
.ct-table th,.ct-table td{border:1px solid #eceee8;padding:3px 8px;text-align:left;white-space:nowrap}
.ct-table thead th{background:#f5f6f3;position:sticky;top:0;z-index:2}
.ct-table thead tr.ct-filter-row th{top:26px;background:#fafbf8}
.ct-filter-row input{width:100%;min-width:70px;border:1px solid #dfe1da;border-radius:4px;padding:2px 5px;font-size:11px}
.ct-table tbody tr:nth-child(odd){background:#fcfdfb}
.ct-empty{color:#9aa092;font-style:italic;padding:14px}

/* selector-detail content host now just holds a CaseTable */
.sd-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ── "View uploaded file" launcher button ── */
.ghost-btn{width:100%;background:#fff;border:1px solid #d7dad2;border-radius:8px;padding:8px 12px;
  font-size:13px;cursor:pointer;margin:-2px 0 12px;color:#23271c}
.ghost-btn:hover:not(:disabled){background:#f5f6f3}
.ghost-btn:disabled{opacity:.5;cursor:not-allowed}

/* ══ movable / lockable file-viewer window (js/pages/file-viewer.js) ══ */
.fv-win{position:fixed;background:#fff;border:1px solid #d7dad2;border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);display:none;flex-direction:column;z-index:950;
  overflow:hidden;resize:both;min-width:300px;min-height:200px}
.fv-win.open{display:flex}
.fv-win.fv-dragging{opacity:.97}
.fv-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;
  background:#111827;color:#fff;cursor:move;user-select:none;touch-action:none;flex:0 0 auto}
.fv-win.fv-locked .fv-titlebar{cursor:default}
.fv-title-text{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-title-actions{display:flex;gap:6px;flex:0 0 auto}
.fv-btn{border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:5px;width:28px;height:28px;
  cursor:pointer;font-size:13px;line-height:1}
.fv-btn:hover{background:rgba(255,255,255,.30)}
.fv-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.fv-empty{padding:20px;color:#9aa092;font-style:italic}

@media (max-width:600px){
  .fv-win{max-width:calc(100vw - 16px)}
}