/* ============================================================================
   VIGILIS — UI paramétrable. Couleurs pilotées par variables CSS, surchargées
   par [data-theme]. L'accent peut être personnalisé par le joueur (--accent).
   ========================================================================== */
:root{
  --bg:#0b1220; --panel:#131c2e; --panel2:#0f1726; --line:#243049;
  --txt:#e6edf7; --muted:#8aa0bf; --accent:#3b82f6; --accent2:#1d4ed8;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --radius:12px;
}
body[data-theme="nuit"]{ --bg:#05080f; --panel:#0b1220; --panel2:#070d18; --line:#1b2438; --accent:#6366f1; }
body[data-theme="sapeur"]{ --bg:#1a0c0c; --panel:#241313; --panel2:#1c0e0e; --line:#3a2020; --accent:#ef4444; --accent2:#b91c1c; }

/* ---- Thèmes premium ---- */
body[data-theme="graphite"]{ --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --line:#2a2a2a; --accent:#6366f1; --accent2:#4338ca; }
body[data-theme="slate"]{ --bg:#0f172a; --panel:#1e293b; --panel2:#162032; --line:#334155; --accent:#06b6d4; --accent2:#0891b2; }
body[data-theme="arctic"]{ --bg:#f0f4f8; --panel:#ffffff; --panel2:#e8edf4; --line:#cbd5e1; --accent:#0ea5e9; --accent2:#0284c7; --txt:#1e293b; --muted:#64748b; }
body[data-theme="crimson"]{ --bg:#0d0608; --panel:#1a0c10; --panel2:#140810; --line:#3d1420; --accent:#f43f5e; --accent2:#e11d48; }
body[data-theme="forest"]{ --bg:#060d08; --panel:#0d1c10; --panel2:#091509; --line:#1a3a1e; --accent:#22c55e; --accent2:#16a34a; }


*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt);overflow:hidden}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--txt);border-radius:8px;padding:7px 11px;font-size:13px}
button:hover{border-color:var(--accent)}
button.go,button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
input,select{width:100%;padding:9px 11px;margin:5px 0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:14px}
.muted{color:var(--muted);font-size:12px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin:4px 0}

/* AUTH */
#auth{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#16233c,var(--bg))}
.auth-card{width:340px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center}
.auth-card h1{margin:8px 0 0;letter-spacing:3px}
.auth-row{display:flex;gap:8px;margin-top:8px}
.auth-row button{flex:1}
.brand-xl{width:64px;height:64px;border-radius:16px;margin:0 auto;background:var(--accent);display:grid;place-items:center;font-size:34px;font-weight:800;color:#fff}

/* CARTE + TOP */
#map{position:fixed;inset:0;z-index:0;background:#0a0f1a}
#top{position:fixed;top:0;left:0;right:0;height:48px;z-index:501;display:flex;align-items:center;gap:10px;
     padding:0 12px;background:linear-gradient(180deg,rgba(11,18,32,.96),rgba(11,18,32,.78));border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{font-weight:800;letter-spacing:2px;color:var(--accent)}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;white-space:nowrap}
#xpwrap{display:flex;flex-direction:column;gap:2px;min-width:120px}
#xpbar{height:6px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
#xpbar i{display:block;height:100%;width:0;background:var(--accent)}
#top #btn-logout{margin-left:auto}
#c-conn{color:var(--bad)} #c-conn.on{color:var(--ok)}

/* DOCK */
#dock{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:600;display:flex;gap:6px;
      background:rgba(19,28,46,.92);border:1px solid var(--line);border-radius:14px;padding:6px;backdrop-filter:blur(6px);flex-wrap:wrap;max-width:96vw;justify-content:center}
#dock button{font-size:12px;padding:7px 10px}
#dock button.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* FENÊTRES */
.win{position:fixed;z-index:400;min-width:220px;min-height:120px;background:var(--panel);border:1px solid var(--line);
     border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.win.hidden{display:none}
.win-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel2);border-bottom:2px solid var(--acc);cursor:grab;user-select:none;border-radius:12px 12px 0 0}
.win-head b{font-size:13px;flex:1}
.win-head .x{cursor:pointer;color:var(--muted);font-weight:700;padding:0 4px}
.win-head .x:hover{color:var(--bad)}
.win-body{padding:10px;overflow:auto;flex:1;font-size:13px}
.win .grip{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;
           background:linear-gradient(135deg,transparent 50%,var(--muted) 50%,var(--muted) 60%,transparent 60%)}
.win-head:active{cursor:grabbing}

/* listes / éléments */
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{font-size:13px}.row .s{font-size:11px;color:var(--muted)}
.tag{font-size:10px;padding:1px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.list{display:flex;flex-direction:column}
.radio-line{padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.radio-line .v{color:var(--accent);font-weight:600}
.chat-box{display:flex;flex-direction:column;height:100%}
.chat-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.chat-msg{font-size:12px}.chat-msg .who{color:var(--accent);font-weight:600}
.chat-send{display:flex;gap:6px}.chat-send input{margin:0}
.buyrow{display:flex;gap:6px;align-items:center;justify-content:space-between}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.sw.sel{border-color:#fff}
.sw.locked{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}
.lb-rank{display:inline-block;width:20px;color:var(--muted)}
.pin{display:grid;place-items:center;border-radius:50%;border:2px solid #fff;color:#fff;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* Leaflet z-index sous l'UI */
.leaflet-pane,.leaflet-control{z-index:1 !important}
@media(max-width:640px){ .win{max-width:96vw} #top .muted{display:none} }

/* MODALE (examen QCM) */
.modal{position:fixed;inset:0;z-index:800;background:rgba(2,6,14,.66);display:grid;place-items:center;padding:16px}
.modal.hidden{display:none}
.modal-card{width:520px;max-width:96vw;max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.modal-card h3{margin:0 0 6px}
.exam-q{padding:8px 0;border-bottom:1px solid var(--line)}
.exam-opt{display:flex;gap:8px;align-items:center;padding:4px 0;cursor:pointer;font-size:13px}
.exam-opt input{width:auto;margin:0}

/* FICHE BÂTIMENT — fenêtre flottante déplaçable (non bloquante) */
.float-win{position:fixed;top:68px;left:70px;z-index:520;width:460px;max-width:94vw;max-height:85vh;
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.55);overflow:hidden}
.float-head:active{cursor:grabbing}
.float-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel2);
  border-bottom:1px solid var(--line);cursor:move;user-select:none}
.float-head b{flex:1;font-size:14px}
.float-head .x{cursor:pointer;color:var(--muted);font-weight:700;padding:0 4px}
.float-head .x:hover{color:var(--bad)}
.float-body{padding:14px;overflow:auto}
.center-card{width:480px}
.center-top{display:flex;align-items:center;gap:10px}
.center-top .pin{display:grid;place-items:center;border-radius:50%;border:2px solid #fff;color:#fff;font-weight:700}
.center-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.kv{display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.kv b{font-size:13px}
.center-mini{height:200px;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.center-sect{margin-top:4px}
.center-sect button{margin:4px 0}
.warn-line{color:var(--warn);font-size:12px;margin:4px 0}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
.center-tabs{display:flex;gap:6px;margin-top:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ctab{font-size:12px;padding:6px 10px}
.center-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ctab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.veh-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.veh-row:last-child{border-bottom:0}
.veh-actions{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.badge{display:inline-block;font-size:10px;font-weight:700;color:#fff;padding:1px 6px;border-radius:6px;vertical-align:middle}
.lnk{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.revbar{height:7px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:2px 0 4px}
.revbar i{display:block;height:100%;width:0}

/* ---- Login password wrapper avec bouton oeil ---- */
.pass-wrap { position:relative; width:100%; }
.pass-wrap input { width:100%; padding-right:44px; box-sizing:border-box; }
.eye-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:18px;
  padding:4px; line-height:1; color:var(--muted);
}
.eye-btn:hover { color:var(--text); }

/* ---- Couleurs par service (universelles) ---- */
:root{
  --svc-pompiers:#ef4444; --svc-police:#3b82f6; --svc-gendarmerie:#8b5cf6;
  --svc-ambu:#10b981; --svc-smur:#06b6d4; --svc-hopital:#0ea5e9;
  --svc-croix:#f97316; --svc-codis:#0d9488; --svc-cta:#14b8a6;
  --svc-formation:#64748b; --svc-secu:#dc2626; --svc-helibase:#f59e0b;
  --svc-support:#475569;
}

/* ---- Onglets Mon compte ---- */
.acc-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;border-bottom:2px solid var(--line);padding-bottom:10px;position:sticky;top:0;z-index:10;background:var(--panel)}
.acc-tab{font-size:13px;padding:7px 14px;background:transparent;border:1px solid transparent;color:var(--muted);border-radius:8px 8px 0 0;cursor:pointer;transition:all .15s;white-space:nowrap}
.acc-tab:hover{color:var(--txt);background:var(--panel2);border-color:var(--line)}
.acc-tab.active{color:var(--accent,#3b82f6);background:var(--panel2);border-color:var(--line);border-bottom-color:var(--panel);font-weight:700}
@media(max-width:600px){.acc-tab{font-size:11px;padding:5px 8px}}
/* Clickable entity links */
.entity-link{cursor:pointer;color:var(--accent,#3b82f6);text-decoration:none;border-bottom:1px dotted var(--accent,#3b82f644)}
.entity-link:hover{color:#60a5fa;border-bottom-color:#60a5fa}

/* ---- Cards centres ---- */
.bld-group{margin-bottom:14px}
.bld-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.bld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.bld-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;border-left:3px solid var(--svc-col,var(--line));position:relative}
.bld-card-name{font-size:13px;font-weight:600;margin-bottom:2px}
.bld-card-sub{font-size:11px;color:var(--muted);margin-bottom:6px}
.bld-lvl-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:6px}
.bld-lvl-fill{height:100%;background:var(--svc-col,var(--accent))}
.bld-card-actions{display:flex;justify-content:flex-end}
.bld-card-actions button{font-size:10px;padding:3px 8px}

/* ---- Cards véhicules ---- */
.veh-filters{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.veh-filter{font-size:11px;padding:3px 9px;border-radius:999px}
.veh-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.veh-list{display:flex;flex-direction:column;gap:5px}
.veh-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.veh-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.veh-info-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.veh-info-sub{font-size:11px;color:var(--muted);margin-top:1px}
.veh-rev-bar{height:2px;background:var(--line);border-radius:1px;overflow:hidden;margin-top:3px;width:100%}
.veh-rev-fill{height:100%}
.veh-crew{font-size:11px;margin-top:2px}

/* ---- Planning personnel ---- */
.staff-week{overflow-x:auto;margin-top:8px}
.staff-week table{width:100%;border-collapse:collapse;font-size:11px}
.staff-week th{padding:4px 6px;text-align:center;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line)}
.staff-week td{padding:3px 4px;text-align:center}
.staff-week td:first-child{text-align:left;font-size:11px;padding-left:2px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-day-cell{display:inline-block;width:30px;height:20px;border-radius:4px;font-size:9px;line-height:20px;cursor:pointer;user-select:none;border:1px solid transparent}
.staff-day-cell:hover{filter:brightness(1.2)}

/* ---- Budget charts ---- */
.budget-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
.budget-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.budget-kpi-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.budget-kpi-val{font-size:18px;font-weight:700}
.ledger-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.ledger-row:last-child{border-bottom:none}

/* ---- Stats ---- */
.stat-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.stat-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.stat-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}
.stat-bar-fill{height:100%;border-radius:3px;background:var(--accent)}

/* ---- SVG charts intégrés ---- */
.svg-chart{width:100%;display:block}

/* ---- Section "Construire" compacte ---- */
.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px;margin-top:6px}
.build-item{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.build-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.build-info{flex:1;min-width:0}
.build-info-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-info-sub{font-size:10px;color:var(--muted)}
.build-item button{font-size:10px;padding:3px 8px;flex-shrink:0;white-space:nowrap}

.panel-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 5px}
.panel-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.panel-divider{border:none;border-top:1px solid var(--line);margin:12px 0}

/* Tooltip géré par JS portal (voir app.js #tt-portal) */
[data-tt]{position:relative}

/* ── Cosmétiques premium ──────────────────────────────────── */
/* Livrée dorée : anneau or sur les marqueurs véhicules */
body.cosm-livree-or .veh-dot {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 8px #fbbf2488 !important;
}
body.cosm-livree-or .veh-row .veh-dot {
  border: 2px solid #fbbf24;
}

/* Gyrophares animés : pulsation sur les points véhicules */
@keyframes gyro-pulse {
  0%,100% { box-shadow: 0 0 4px 2px var(--gyro-col, #3b82f6); }
  50%      { box-shadow: 0 0 10px 6px var(--gyro-col, #3b82f6); opacity:.8; }
}
body.cosm-gyro .veh-dot {
  animation: gyro-pulse 1.4s ease-in-out infinite;
}
body.cosm-gyro .veh-dot[style*="#22c55e"] { --gyro-col:#22c55e; }
body.cosm-gyro .veh-dot[style*="#f59e0b"] { --gyro-col:#f59e0b; }
body.cosm-gyro .veh-dot[style*="#ef4444"] { --gyro-col:#ef4444; }

/* Badge soutien : label dans le profil */
body.cosm-badge #badge-soutien-label { display:inline-flex !important; }
#badge-soutien-label {
  display:none;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 7px;
  border-radius:10px;
  margin-left:6px;
}

/* ── Marqueurs véhicules sur la carte (icônes + gyrophare premium) ── */
.vehm-wrap { background: none !important; border: none !important; }
.vehm {
  width: 30px; height: 30px; border-radius: 50%;
  background: #f8fafc; border: 3px solid var(--vs, #22c55e);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  position: relative; transition: transform .15s;
}
.vehm:hover { transform: scale(1.18); z-index: 2; }
.vehm-e { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.vehm-nr { border-style: dashed; border-color: #f59e0b; }
/* véhicule en mission : pulsation de la couleur de service */
.vehm-active { animation: vehm-pulse 1.3s ease-in-out infinite; }
@keyframes vehm-pulse {
  0%,100% { box-shadow: 0 2px 7px rgba(0,0,0,.55); }
  50%     { box-shadow: 0 0 12px 4px var(--vs, #22c55e); }
}
/* gyrophare animé (cosmétique premium gyro_custom) : pastille rouge/bleu clignotante */
.vehm-gyro::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 8px 3px #ef4444;
  animation: vehm-gyro-blink .55s steps(1) infinite;
}
@keyframes vehm-gyro-blink {
  0%   { background:#ef4444; box-shadow:0 0 8px 4px #ef4444; }
  50%  { background:#2563eb; box-shadow:0 0 8px 4px #2563eb; }
  100% { background:#ef4444; box-shadow:0 0 8px 4px #ef4444; }
}

/* ── Insignes de grade ─────────────────────────────────────────────────────── */
.insigne-wrap { display:inline-flex; align-items:center; vertical-align:middle; }
.insigne-wrap svg { display:block; }

/* === Big modal overlay for main panels === */
.big-modal-overlay{position:fixed;inset:0;z-index:700;background:rgba(2,6,14,.88);display:flex;justify-content:center;align-items:flex-start;padding:16px;overflow-y:auto}
.big-modal-overlay .big-modal-content{width:calc(100vw - 40px);max-width:1600px;min-height:calc(100vh - 48px);max-height:calc(100vh - 32px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 28px;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.big-modal-overlay .big-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.big-modal-overlay .big-modal-head h2{margin:0;font-size:18px}
.big-modal-overlay .big-modal-head .x{font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;color:var(--muted)}
.big-modal-overlay .big-modal-head .x:hover{background:var(--panel2);color:#ef4444}
@media(max-width:600px){.big-modal-overlay .big-modal-content{width:calc(100vw - 12px);min-height:calc(100vh - 24px);border-radius:10px;padding:12px 10px}}

/* ═══ SIDEBAR NAVIGATION ═══ */
#sidebar{position:fixed;left:0;top:44px;bottom:0;width:52px;background:var(--panel);border-right:1px solid var(--line);z-index:500;display:flex;flex-direction:column;padding:6px 0;gap:2px;overflow-y:auto}
#sidebar button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:16px;border-left:3px solid transparent;transition:all .15s}
#sidebar button:hover{color:var(--txt);background:var(--panel2)}
#sidebar button.active{color:var(--accent,#3b82f6);border-left-color:var(--accent,#3b82f6);background:var(--panel2)}
#sidebar button .sb-label{font-size:8px;line-height:1;margin-top:1px;white-space:nowrap}
#sidebar button .sb-badge{position:absolute;top:2px;right:4px;background:#ef4444;color:#fff;font-size:8px;font-weight:700;border-radius:8px;padding:0 4px;min-width:14px;text-align:center}
#sidebar hr{border:none;border-top:1px solid var(--line);margin:4px 8px}
@media(max-width:600px){#sidebar{width:44px}#sidebar button{padding:6px 2px;font-size:14px}#sidebar button .sb-label{display:none}#sidebar .sb-brand .sb-label{display:none}}

/* ═══ SIDE PANEL (replaces big modal) ═══ */
#sidepanel{position:fixed;top:44px;right:0;bottom:0;width:min(680px,calc(100vw - 60px));background:var(--panel);border-left:1px solid var(--line);z-index:600;transform:translateX(100%);transition:transform .2s ease;overflow:hidden;display:flex;flex-direction:column}
#sidepanel.open{transform:translateX(0)}
#sidepanel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
#sidepanel-head h2{margin:0;font-size:16px;font-weight:700}
#sidepanel-close{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px}
#sidepanel-close:hover{color:#ef4444;background:var(--panel2)}
#sidepanel-body{flex:1;overflow-y:auto;padding:14px 16px}
@media(max-width:600px){#sidepanel{width:calc(100vw - 48px)}}

/* ═══ Adjust map for sidebar ═══ */
#map{left:52px!important}
@media(max-width:600px){#map{left:44px!important}}

/* ═══ Hide old dock + hamburger ═══ */
#dock{display:none!important}
#btn-menu{display:none!important}
#topmenu{display:none!important}

/* ═══ v0.9.0 UI improvements ═══ */
/* Tighter sidebar */
#sidebar{width:64px}
#sidebar button{padding:6px 2px;font-size:15px}
#sidebar button .sb-label{font-size:7px}
@media(max-width:600px){#sidebar{width:40px}}
#map{left:64px!important}
@media(max-width:600px){#map{left:40px!important}}

/* Wider sidepanel on large screens */
@media(min-width:1400px){#sidepanel{width:min(800px,calc(100vw - 60px))}}

/* Better sidepanel content */
#sidepanel-body{padding:12px 14px}
#sidepanel-body .t{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;margin:10px 0 6px}
#sidepanel-body .stat-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center}
#sidepanel-body .row{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
#sidepanel-body .row:hover{background:var(--panel2)}

/* Better vehicle cards in fleet */
.veh-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:4px;transition:all .15s;cursor:pointer}
.veh-row:hover{background:var(--panel2);border-color:var(--accent,#3b82f644)}
.veh-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.veh-info-name{font-size:12px;font-weight:600}
.veh-info-sub{font-size:10px;color:var(--muted)}
.veh-rev-bar{height:3px;background:#1e293b;border-radius:2px;margin:3px 0}
.veh-rev-fill{height:3px;border-radius:2px}
.veh-crew{font-size:10px}

/* Better center cards */
.bld-card{background:var(--panel2);border:1.5px solid var(--line);border-radius:10px;padding:12px;transition:all .15s;cursor:pointer;border-left:4px solid var(--svc-col,var(--line))}
.bld-card:hover{border-color:var(--svc-col,var(--accent));box-shadow:0 2px 8px #0003}
.bld-card-name{font-size:14px;font-weight:700}
.bld-card-sub{font-size:11px;color:var(--muted);margin-top:2px}
.bld-lvl-bar{height:4px;background:#1e293b;border-radius:2px;margin:6px 0}
.bld-lvl-fill{height:4px;border-radius:2px;background:var(--svc-col,var(--accent))}
.bld-card-actions{margin-top:6px}
.bld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:12px}
.bld-group{margin-bottom:16px}
.bld-group-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}

/* Build items grid */
.build-item{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.build-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;flex-shrink:0}
.build-info{flex:1;min-width:0}
.build-info-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-info-sub{font-size:10px;color:var(--muted)}

/* Tags */
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}

/* Entity links */
.entity-link{color:var(--accent,#3b82f6);cursor:pointer;border-bottom:1px dotted var(--accent,#3b82f644)}
.entity-link:hover{color:#60a5fa;border-bottom-color:#60a5fa}

/* Filters */
.filter-bar{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.filter-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.filter-btn.active{background:var(--accent,#3b82f6);color:#fff;border-color:var(--accent,#3b82f6)}

#faq-btn{display:none!important}

/* Sidebar bottom items */
#sidebar{justify-content:flex-start}
#sb-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:8px}

/* Header merged with sidebar */

/* Fix header chips background */
#top{background:var(--panel)!important;border-bottom:1px solid var(--line)}
#top .chip{background:transparent!important}


#top .brand{width:64px;justify-content:center;flex-shrink:0;border-right:1px solid var(--line)}

.sb-brand{border-bottom:1px solid var(--line);margin-bottom:4px}
@keyframes vigPulse{0%,100%{opacity:1}50%{opacity:.5}}