/* ============================================================
   IDMTSM 2.1 — Traffic Flow Simulator UI (Dr. Nasser 2026-09-17)
   Dark "control room" theme: deep navy, glowing accents, glass
   panels. Self-contained — loads only on the simulator page.
   Mobile-first: controls stack, canvas scales, tables scroll.
   ============================================================ */
.tsm-app{background:radial-gradient(1200px 500px at 50% -80px,#16283f 0%,#0c1828 55%,#0a1422 100%);padding:34px 16px 46px;margin-top:8px}
.tsm-shell{max-width:1060px;margin:0 auto;background:rgba(255,255,255,0.03);border:1px solid rgba(122,160,210,0.16);border-radius:22px;padding:18px;box-shadow:0 18px 60px rgba(2,8,18,0.5)}
.tsm-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 6px 14px;border-bottom:1px solid rgba(122,160,210,0.12);margin-bottom:14px}
.tsm-brand{font-size:22px;font-weight:800;letter-spacing:.5px;color:#eaf2fb}
.tsm-brand__sub{font-size:11px;font-weight:600;color:#7fa8d4;margin-inline-start:8px;letter-spacing:1.5px}
.tsm-chip{font-size:11.5px;font-weight:600;color:#a8c6e8;background:rgba(79,163,227,0.12);border:1px solid rgba(79,163,227,0.3);padding:4px 12px;border-radius:999px}
#tsm-clock{color:#7fd4a8;background:rgba(47,212,113,0.1);border-color:rgba(47,212,113,0.3);font-variant-numeric:tabular-nums}

.tsm-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tsm-group{border:1px solid rgba(122,160,210,0.16);border-radius:14px;padding:12px 14px 14px;margin:0;background:rgba(13,26,44,0.6)}
.tsm-group legend{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#7fa8d4;padding:0 8px}
.tsm-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#c9dbee;margin-top:9px}
.tsm-field input,.tsm-field select{background:#0d1a2c;border:1px solid rgba(122,160,210,0.3);color:#eaf2fb;border-radius:9px;padding:7px 10px;font-size:14px;width:100%;max-width:220px}
.tsm-field input:focus,.tsm-field select:focus{outline:none;border-color:#4fa3e3;box-shadow:0 0 0 3px rgba(79,163,227,0.18)}
.tsm-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#c9dbee;margin-top:9px;cursor:pointer}
.tsm-check input{width:16px;height:16px;accent-color:#4fa3e3}
.tsm-seg-wrap{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.tsm-seg{display:inline-flex;border:1px solid rgba(122,160,210,0.3);border-radius:9px;overflow:hidden}
.tsm-seg button{background:#0d1a2c;border:0;color:#a8c6e8;padding:6px 14px;font-size:13px;cursor:pointer}
.tsm-seg button.is-on{background:#4fa3e3;color:#06121f;font-weight:700}

.tsm-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px}
.tsm-btn{border:1px solid rgba(122,160,210,0.3);background:#12233a;color:#eaf2fb;font-size:14px;font-weight:700;padding:9px 20px;border-radius:11px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.tsm-btn:hover:not(:disabled){transform:translateY(-1px)}
.tsm-btn:disabled{opacity:.45;cursor:default}
.tsm-btn--go{background:linear-gradient(135deg,#2fd471,#1f9e54);color:#04140a;border-color:transparent;box-shadow:0 4px 18px rgba(47,212,113,0.35)}
.tsm-btn--accent{background:linear-gradient(135deg,#4fa3e3,#2d6fb0);color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(79,163,227,0.35)}
.tsm-btn--ghost{background:transparent}

.tsm-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(122,160,210,0.2);box-shadow:inset 0 0 40px rgba(4,10,20,0.6)}
#tsm-canvas{display:block;width:100%;height:auto}
.tsm-hud{position:absolute;top:12px;inset-inline-start:14px;background:rgba(6,14,26,0.72);border:1px solid rgba(122,160,210,0.25);backdrop-filter:blur(6px);color:#c9e8d8;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:999px;max-width:75%}
.tsm-legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 14px;font-size:12px;color:#8fb0cc;background:rgba(6,14,26,0.5)}
.tsm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.tsm-dot--cruise{background:#4fa3e3}.tsm-dot--slow{background:#e8b04b}
.tsm-dot--green{background:#2fd471}.tsm-dot--truck{background:#7d8ea3}

.tsm-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0 6px}
.tsm-metric{background:rgba(13,26,44,0.65);border:1px solid rgba(122,160,210,0.16);border-radius:13px;padding:12px 10px;text-align:center}
.tsm-metric b{display:block;font-size:24px;font-weight:800;color:#eaf2fb;font-variant-numeric:tabular-nums}
.tsm-metric span{font-size:11px;color:#8fb0cc}
#tsm-m-travel{color:#7fd4a8 !important}

.tsm-chart{margin:6px 0 12px;border:1px solid rgba(122,160,210,0.14);border-radius:13px;background:rgba(13,26,44,0.5);padding:6px}
#tsm-spark{display:block;width:100%;height:90px}

.tsm-compare,.tsm-batch{background:rgba(13,26,44,0.65);border:1px solid rgba(122,160,210,0.16);border-radius:14px;padding:14px 16px;margin-top:12px}
.tsm-compare h3,.tsm-batch h3{margin:0 0 10px;font-size:15px;color:#eaf2fb}
.tsm-table{width:100%;border-collapse:collapse}
.tsm-table th,.tsm-table td{padding:7px 10px;font-size:13.5px;text-align:start;border-bottom:1px solid rgba(122,160,210,0.1);color:#c9dbee;font-variant-numeric:tabular-nums}
.tsm-table thead th{color:#7fa8d4;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.tsm-table--scroll{max-height:280px;overflow-y:auto;display:block}
#tsm-c-verdict{font-size:13.5px;font-weight:600;color:#7fd4a8;margin:10px 0 0}
.tsm-batch-summary{font-size:13px;color:#a8c6e8;margin-top:10px}
@media (max-width:640px){
  .tsm-app{padding:20px 8px 30px}
  .tsm-shell{padding:12px;border-radius:16px}
  .tsm-metric b{font-size:20px}
  .tsm-hud{font-size:12px;max-width:65%}
}