/* =====================================================================
   operacni.cz – nový vzhled 2026-10 (načítá se PO style.css a přebíjí ho)
   Tmavý „velín“ včetně noční mapy, Geist, sklo, mobil = bottom sheety.
   ===================================================================== */
/* ───────────── TÉMA: světlé (výchozí) a tmavý „velín“ (data-theme="dark") ─────────────
   --ink = barva průhledných vrstev a čar, --paper = podklad skel, --shade = stíny. */
:root {
  --ink: 15,23,42; --paper: 255,255,255; --shade: 15,23,42; --shade-k: .32;
  --c-bg: #eef2f8; --c-panel: #ffffff; --c-input: #ffffff; --c-mapbg: #e5e9ef; --c-ph: #8a94a8; --c-strong: #0b1220;
  --t-amber: #92400e; --t-blue: #1e3a8a; --t-link: #1d4ed8; --t-green: #166534; --t-red: #9f1239; --t-orange: #9a3412; --t-body: #334155;
  --grad-title: linear-gradient(100deg, #d90429, #c2410c);
  --ui-bg: #eef2f8; --ui-surf: #ffffff; --ui-surf2: #f3f6fb;
  --ui-line: rgba(15,23,42,.10); --ui-line2: rgba(15,23,42,.20);
  --ui-txt: #0b1220; --ui-mut: #4a5873; --ui-red: #d90429; --ui-red2: #a1001f; --ui-blue: #1d4ed8; --ui-green: #15803d;
}
html.game:not([data-theme="dark"]) {
  --bg: #eef2f8; --bg2: #e3e9f2; --panel: #ffffff; --panel2: #f3f6fb;
  --line: rgba(15,23,42,.13); --txt: #0b1220; --mut: #4a5873; --acc: #1d4ed8;
  --fire: #d4111e; --police: #1d4ed8; --ems: #15803d; --warn: #b45309; --bad: #c81e1e; --ok: #15803d;
  --shadow: 0 10px 30px -14px rgba(15,23,42,.25);
  --glass: rgba(255,255,255,.97); --glass-line: rgba(15,23,42,.12);
  --glass-shadow: 0 18px 44px -24px rgba(15,23,42,.35), 0 1px 3px rgba(15,23,42,.06);
}
:root[data-theme="dark"] {
  --ink: 255,255,255; --paper: 7,11,20; --shade: 0,0,0; --shade-k: 1;
  --c-bg: #070b14; --c-panel: #0e1626; --c-input: #0a1120; --c-mapbg: #0a1020; --c-ph: #5b6884; --c-strong: #ffffff;
  --t-amber: #fde68a; --t-blue: #dbeafe; --t-link: #93c5fd; --t-green: #86efac; --t-red: #ffb3bf; --t-orange: #fdba74; --t-body: #c9d3e6;
  --grad-title: linear-gradient(100deg, #ff5a6e, #ffb26b);
  --ui-bg: #070b14; --ui-surf: #0f1626; --ui-surf2: #162036;
  --ui-line: rgba(255,255,255,.09); --ui-line2: rgba(255,255,255,.16);
  --ui-txt: #e8edf7; --ui-mut: #93a0ba; --ui-red: #ef233c; --ui-red2: #b80f2a; --ui-blue: #3b82f6; --ui-green: #22c55e;
}
:root {
  --r: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
html, body { font-family: 'Geist', "Segoe UI", system-ui, Roboto, Arial, sans-serif; }
body { -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }

/* ───────────── ÚVODNÍ OBRAZOVKA ───────────── */
#setup {
  position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 24px; color: var(--ui-txt);
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(239,35,60,.22), transparent 62%),
    radial-gradient(800px 520px at 92% 85%, rgba(59,130,246,.20), transparent 62%),
    var(--ui-bg);
}
#setup::before {   /* jemná mřížka jako na monitoru velína */
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--ink),.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink),.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.setup-wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr;
  width: min(1060px, 100%); border-radius: 28px; overflow: hidden;
  background: rgba(var(--paper),.82); border: 1px solid var(--ui-line);
  box-shadow: 0 40px 100px -30px rgba(var(--shade),calc(.8 * var(--shade-k))); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.setup-left { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--ui-line);
  background: linear-gradient(160deg, rgba(239,35,60,.10), transparent 55%); }
.setup-beacon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; margin-bottom: 22px;
  background: rgba(239,35,60,.14); border: 1px solid rgba(239,35,60,.35); animation: beacon 2.4s ease-in-out infinite; }
@keyframes beacon { 50% { box-shadow: 0 0 0 10px rgba(239,35,60,0), 0 0 40px rgba(239,35,60,.55); } }
.setup-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-red); margin-bottom: 10px; }
.setup-left h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 14px; color: var(--c-strong); }
.setup-left h1 em { font-style: normal; background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.setup-tagline { color: var(--ui-mut); font-size: 16px; line-height: 1.55; margin: 0 0 28px; }
.setup-svcs-preview { display: grid; gap: 10px; }
.setup-svc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ink),.04); border: 1px solid var(--ui-line); font-size: 14.5px; font-weight: 600; color: var(--ui-txt); }
.setup-svc-row .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(var(--ink),.06); flex: none; }
.setup-svc-row .desc { font-size: 12.5px; font-weight: 400; color: var(--ui-mut); margin-top: 2px; }
.setup-right { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.setup-right h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 22px; color: var(--c-strong); }
.sf-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ui-mut); margin-bottom: 8px; }
.sf-field { margin-bottom: 18px; }
#setup #nickIn, .sf-field input[type=text], .sf-field select {
  width: 100%; background: var(--c-input); border: 1px solid var(--ui-line2); color: var(--ui-txt); border-radius: 13px; padding: 13px 15px; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.sf-field input[type=text]::placeholder { color: var(--c-ph); }
.sf-field input[type=text]:focus, .sf-field select:focus { border-color: var(--ui-blue); box-shadow: 0 0 0 4px rgba(59,130,246,.18); background: var(--c-input); }
.sf-field select option { background: var(--c-panel); color: var(--ui-txt); }
#setup .hint, #osLabel { color: var(--ui-mut) !important; }
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-card { position: relative; padding: 14px 8px 12px; text-align: center; cursor: pointer; user-select: none; border-radius: 14px; background: rgba(var(--ink),.04); border: 1px solid var(--ui-line2); transition: background .15s, border-color .15s, transform .15s; }
.svc-card:active { transform: scale(.97); }
.svc-card .sc-ic { font-size: 26px; margin-bottom: 6px; }
.svc-card .sc-nm { font-size: 13px; font-weight: 700; color: var(--ui-mut); }
.svc-card.on .sc-nm { color: var(--c-strong); }
.svc-card.on[data-s="F"] { background: rgba(239,35,60,.16); border-color: rgba(239,35,60,.7); box-shadow: inset 0 0 0 1px rgba(239,35,60,.35); }
.svc-card.on[data-s="P"] { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.7); box-shadow: inset 0 0 0 1px rgba(59,130,246,.35); }
.svc-card.on[data-s="Z"] { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.65); box-shadow: inset 0 0 0 1px rgba(34,197,94,.3); }
.svc-card::after { content: '✓'; position: absolute; top: 6px; right: 9px; font-size: 14px; font-weight: 900; color: var(--c-strong); opacity: 0; transition: opacity .15s; }
.svc-card.on::after { opacity: .9; }
.diff-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.diff-btn { padding: 12px 6px; border-radius: 12px; background: rgba(var(--ink),.04); border: 1px solid var(--ui-line2); color: var(--ui-mut); font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s; }
.diff-btn.on { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.7); color: var(--t-amber); }
.sf-check { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; font-size: 14.5px; color: var(--ui-mut); }
.sf-check input { width: 20px; height: 20px; accent-color: var(--ui-red); }
#resumeBar { background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.35); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
#resumeInfo { font-size: 13px; color: var(--ui-mut); margin-bottom: 8px; }
#resumeBtn { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; border-radius: 11px; cursor: pointer; background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.55); color: var(--t-blue); }
.btn-start { width: 100%; padding: 17px; font-size: 17px; font-weight: 800; letter-spacing: .01em; border: 0; border-radius: 15px; cursor: pointer; margin-bottom: 10px; color: var(--c-strong);
  background: linear-gradient(135deg, #ff3b55, #c8102e); box-shadow: 0 14px 34px -12px rgba(239,35,60,.8), inset 0 1px 0 rgba(var(--ink),.25); transition: transform .15s, box-shadow .15s; }
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(239,35,60,.9), inset 0 1px 0 rgba(var(--ink),.25); }
.btn-load { display: block; width: 100%; text-align: center; padding: 12px; font-size: 14.5px; font-weight: 600; border-radius: 13px; cursor: pointer; margin-bottom: 8px;
  background: transparent; border: 1px solid var(--ui-line2); color: var(--ui-mut); transition: .15s; }
.btn-load:hover { color: var(--c-strong); border-color: var(--ui-blue); }
.setup-hint { font-size: 13px; color: var(--ui-mut); line-height: 1.6; border-top: 1px solid var(--ui-line); padding-top: 14px; margin: 6px 0 0; }
.setup-hint b { color: var(--c-strong); }
.setup-foot { font-size: 12px; text-align: center; margin: 10px 0 0; }
.setup-foot a { color: var(--ui-mut); text-decoration: underline; }

/* ───────────── HORNÍ LIŠTA ───────────── */
.topbar {
  height: calc(58px + var(--safe-t)); padding: var(--safe-t) 14px 0; gap: 10px;
  background: rgba(var(--paper),.92); border-bottom: 1px solid var(--ui-line); box-shadow: 0 10px 30px -14px rgba(var(--shade),calc(.7 * var(--shade-k)));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.brand { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-right: 4px; }
.brand-dot { color: var(--ui-red); }
.pill { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pill.F { background: var(--ui-red); } .pill.P { background: var(--ui-blue); } .pill.Z { background: #16a34a; }
.metric { padding: 5px 11px; border-radius: 11px; background: rgba(var(--ink),.05); border: 1px solid var(--ui-line); }
.metric .k { font-size: 9.5px; color: var(--ui-mut); letter-spacing: .08em; }
.metric .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tbtn { background: rgba(var(--ink),.07); border: 1px solid var(--ui-line2); color: var(--c-strong); border-radius: 11px; padding: 8px 13px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s; }
.tbtn:hover { background: rgba(var(--ink),.14); border-color: rgba(var(--ink),.28); }
.hud-actions { display: flex; align-items: center; gap: 8px; }
.hud-actions .lbl-m { display: none; }
.hud-actions .tbtn:first-child .lbl-m { display: inline; }   /* „Nová hra“ na desktopu s popiskem */
#pauseBtn.on { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.5); color: var(--t-green); }

/* potvrzovací dialog (náhrada confirm()) */
.cdlg { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--paper),.6); backdrop-filter: blur(4px); }
.cdlg.open { display: flex; }
.cdlg-box { width: min(400px, 100%); background: var(--c-panel); color: var(--ui-txt); border: 1px solid var(--ui-line2); border-radius: 20px; padding: 22px; box-shadow: 0 30px 80px -20px rgba(var(--shade),calc(.8 * var(--shade-k))); }
.cdlg-box p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
.cdlg-btns { display: flex; gap: 10px; }
.cdlg-btns button { flex: 1; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--ui-line2); background: rgba(var(--ink),.06); color: var(--ui-txt); }
.cdlg-btns .cdlg-ok { border: 0; color: var(--c-strong); background: linear-gradient(135deg, #ff3b55, #c8102e); }
.hud-menu { display: none; }
#pauseBtn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); color: var(--t-amber); }

/* ───────────── VELÍN: tmavé téma celé hry ─────────────
   Proměnné ze style.css se přepínají na tmavé, takže se přebarví i vše, co kreslí game.js. */
html.game[data-theme="dark"] {
  --bg: var(--c-bg); --bg2: #0b1222; --panel: var(--c-panel); --panel2: #152036;
  --line: rgba(148,163,184,.16); --txt: #e6ecf7; --mut: #8e9bb5; --acc: #60a5fa;
  --fire: #ff3b55; --police: #3b82f6; --ems: #22c55e; --warn: #f59e0b; --bad: #ff3b55; --ok: #22c55e;
  --shadow: 0 24px 60px -24px rgba(var(--shade),calc(.85 * var(--shade-k)));
  --glass: rgba(var(--paper),.86); --glass-line: rgba(148,163,184,.14);
  --glass-shadow: 0 30px 70px -28px rgba(var(--shade),calc(.9 * var(--shade-k))), 0 0 0 1px rgba(var(--ink),.03) inset;
}
html.game body { background: var(--bg); color: var(--txt); }

/* tmavá mapa: OSM dlaždice převrácené do nočního režimu */
#map, .leaflet-container { background: var(--c-mapbg); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.92) contrast(.88) saturate(.55); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--txt) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(var(--paper),.7) !important; color: var(--mut) !important; }
.leaflet-control-attribution a { color: var(--acc) !important; }
.leaflet-bar { border: 1px solid var(--line) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--glass-shadow) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel) !important; color: var(--txt) !important; }
.leaflet-tooltip { background: var(--panel); color: var(--txt); border-color: var(--line); }

/* lišta: tenký pulzující pruh „poplachu“ nahoře */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fire) 20%, #ffb26b 50%, var(--police) 80%, transparent);
  opacity: .75; animation: hudline 6s linear infinite; background-size: 200% 100%; }
@keyframes hudline { to { background-position: -200% 0; } }
.metric .v { font-size: 18px; letter-spacing: -.01em; }
#mScore { color: var(--t-amber); text-shadow: 0 0 18px rgba(245,158,11,.45); }
#mFail { color: var(--t-red); }
#mHandled { color: var(--t-green); }

/* panely */
.panel { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--glass-shadow); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: var(--txt); }
#calls { top: calc(72px + var(--safe-t)); left: 14px; width: 330px; max-height: calc(100vh - 88px - var(--safe-t)); }
#dispatch { top: calc(72px + var(--safe-t)); left: 356px; width: 390px; max-height: calc(100vh - 88px - var(--safe-t)); }
#calls h2, #dispatch h2 { padding: 14px 16px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--txt); border-bottom: 1px solid var(--line); gap: 8px; justify-content: flex-start;
  background: linear-gradient(180deg, rgba(var(--ink),.04), transparent); }
#calls h2 #callCount { margin-left: 2px; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--fire); color: var(--c-strong); display: inline-grid; place-items: center; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 0 16px rgba(255,59,85,.6); }
#calls h2 .tbtn.xs, #dispatch h2 .tbtn.xs { margin-left: auto; background: rgba(var(--ink),.06); color: var(--txt); border-color: var(--line); padding: 5px 10px; font-size: 13px; border-radius: 9px; }
#callList, #unitList, #dispInfo, #settingsPanel { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.3) transparent; }
#callList { padding: 10px; gap: 8px; }

/* záložky Čekající / Probíhající */
.call-tabs { padding: 10px 10px 6px; border-bottom: 1px solid var(--line); gap: 6px; }
.ctab { border-radius: 10px; padding: 8px; background: rgba(var(--ink),.03); color: var(--mut); border-color: var(--line); font-weight: 600; }
.ctab.on { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.6); color: var(--t-blue); }
.ctab-n { background: rgba(var(--ink),.08); color: var(--txt); }

/* KARTY VÝZEV – tmavé, stav = barevný pruh vlevo + jemná záře */
.call { position: relative; background: linear-gradient(180deg, rgba(var(--ink),.045), rgba(var(--ink),.015)); border: 1px solid var(--line); border-left: 4px solid var(--mut);
  border-top-width: 1px !important; border-radius: 14px; padding: 11px 12px 10px; color: var(--txt); box-shadow: none; transition: transform .12s, border-color .12s, background .12s; }
.call:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(var(--ink),.07), rgba(var(--ink),.025)); }
.call.sev1 { border-left-color: var(--warn); background: linear-gradient(180deg, rgba(245,158,11,.07), rgba(var(--ink),.015)); }
.call.sev2 { border-left-color: #fb7c3c; background: linear-gradient(180deg, rgba(251,124,60,.09), rgba(var(--ink),.015)); }
.call.sev3 { border-left-color: var(--fire); background: linear-gradient(180deg, rgba(255,59,85,.11), rgba(var(--ink),.015)); }
.call.mci { background: linear-gradient(135deg, rgba(255,59,85,.22), rgba(120,0,20,.18)) !important; border-color: rgba(255,59,85,.55) !important; border-left-color: var(--fire) !important; }
.call.sel { outline: 2px solid var(--acc); outline-offset: 1px; }
.call.state-need { background: linear-gradient(135deg, rgba(255,59,85,.26), rgba(255,59,85,.08)) !important; border-color: rgba(255,59,85,.6) !important; border-left-color: var(--fire) !important; color: var(--c-strong);
  box-shadow: 0 0 0 1px rgba(255,59,85,.15), 0 10px 30px -14px rgba(255,59,85,.7); }
.call.state-dispatched { background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(34,197,94,.05)) !important; border-color: rgba(34,197,94,.5) !important; border-left-color: var(--ok) !important; color: var(--c-strong); }
.call.state-ok { background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(167,139,250,.06)) !important; border-color: rgba(167,139,250,.5) !important; border-left-color: #a78bfa !important; color: var(--c-strong); }
.call.state-trans { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.06)) !important; border-color: rgba(245,158,11,.5) !important; border-left-color: var(--warn) !important; color: var(--c-strong); }
.call .t { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.call .m, .call .m2 { color: var(--mut); }
.call.state-need .m, .call.state-dispatched .m, .call.state-ok .m, .call.state-trans .m,
.call.state-need .m2, .call.state-dispatched .m2, .call.state-ok .m2, .call.state-trans .m2 { color: rgba(var(--ink),.78) !important; }
.call .src { color: var(--t-link); }
.call .t .tm { color: var(--mut); background: rgba(var(--shade),calc(.25 * var(--shade-k))); border-radius: 7px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.inc-id { color: var(--mut); opacity: .8; }
.call .bar { background: rgba(var(--ink),.08); height: 3px; margin-top: 9px; }
.call .bar i { background: linear-gradient(90deg, #ff8a3c, var(--fire)); box-shadow: 0 0 10px rgba(255,59,85,.8); }
.call .bar.w i { background: linear-gradient(90deg, var(--t-green), var(--ok)); box-shadow: 0 0 10px rgba(34,197,94,.7); }
.call.fresh { animation: callflash 1.4s ease-in-out infinite; }
@keyframes callflash { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 60% { box-shadow: 0 0 0 3px rgba(245,158,11,.45), 0 0 26px rgba(245,158,11,.35); } }
@keyframes callflash-urg { 0%,100% { box-shadow: 0 0 0 0 rgba(255,59,85,0); } 50% { box-shadow: 0 0 0 3px rgba(255,59,85,.55), 0 0 30px rgba(255,59,85,.5); } }

/* štítky */
.tag { border-radius: 8px; font-size: 11.5px; padding: 3px 8px; background: rgba(var(--ink),.06); border: 1px solid var(--line); color: var(--txt); }
.tag.F { background: rgba(255,59,85,.2); border-color: rgba(255,59,85,.6); color: var(--t-red); }
.tag.P { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.6); color: var(--t-blue); }
.tag.Z { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.55); color: var(--t-green); }
.tag.ho { background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.6); color: var(--t-amber); }
.tag.missing { background: rgba(245,158,11,.25); border-color: var(--warn); color: var(--c-strong); }
.tag.done { background: rgba(148,163,184,.15) !important; border-color: rgba(148,163,184,.3) !important; color: var(--mut) !important; }
.call.state-need .tag, .call.state-dispatched .tag, .call.state-ok .tag, .call.state-trans .tag { background: rgba(var(--shade),calc(.28 * var(--shade-k))) !important; border-color: rgba(var(--ink),.22) !important; color: var(--c-strong) !important; }
.sev-badge { border-radius: 6px; }
.sev-badge.s1 { color: var(--t-amber); border-color: var(--t-amber); } .sev-badge.s2 { color: var(--t-orange); border-color: var(--t-orange); } .sev-badge.s3 { color: var(--t-red); border-color: var(--t-red); }
.cov-badge { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.6); color: var(--t-green); }

/* panel výjezdu */
#dispInfo { padding: 14px 16px; border-bottom: 1px solid var(--line); }
#dispInfo.covered { background: linear-gradient(135deg, rgba(34,197,94,.16), transparent); border-bottom-color: rgba(34,197,94,.5); }
#dispInfo.covered .di-h::after { color: var(--t-green); }
.di-h { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.di-m, .src-disp { color: var(--mut); font-size: 12.5px; }
.di-m.ph, .src-disp b { color: var(--t-link); }
.di-pac { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); }
.di-ho { color: var(--t-amber); }
.di-ho.urgent { color: var(--c-strong); background: rgba(255,59,85,.18); border-color: rgba(255,59,85,.5); }
.di-reinf { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.25); }
.di-units { border-top-color: var(--line); }
.diu, .lnk.ri { background: rgba(var(--ink),.05); border-color: var(--line); color: var(--txt); }
.trans-panel { background: rgba(96,165,250,.06); border-bottom-color: var(--line); padding: 12px 16px; }
.trans-btn { background: rgba(var(--ink),.04); border-color: var(--line); color: var(--txt); border-radius: 11px; }
.trans-btn:hover { background: rgba(var(--ink),.08); }
.disp-tabs { border-bottom-color: var(--line); }
.flt-btn, .nearest-btn { background: rgba(var(--ink),.04); border-color: var(--line); color: var(--mut); border-radius: 9px; }
.nearest-btn { padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--t-blue); background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.4); }
.flt-btn.on { background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.6); color: var(--t-blue); }
.flt-btn.svc-F.on { background: rgba(255,59,85,.16); color: var(--t-red); } .flt-btn.svc-P.on { background: rgba(59,130,246,.16); color: var(--t-blue); } .flt-btn.svc-Z.on { background: rgba(34,197,94,.15); color: var(--t-green); }
#unitList { padding: 10px; gap: 6px; }
.unit, .unit2 { border-radius: 12px; background: rgba(var(--ink),.035); border: 1px solid var(--line); color: var(--txt); }
.unit:hover, .unit2:not(.dis):hover { background: rgba(var(--ink),.07); border-color: rgba(96,165,250,.5); }
.unit.sel, .unit2.sel { outline: 2px solid var(--acc); background: rgba(96,165,250,.14) !important; }
.unit.row-ok, .unit2.row-ok:not(.dis) { background: rgba(34,197,94,.07) !important; border-color: rgba(34,197,94,.3); }
.unit.row-busy, .unit2.row-busy { background: rgba(255,59,85,.07) !important; border-color: rgba(255,59,85,.3); }
.u2-spz, .unit .nm .sub .spz, .unit .eta { color: var(--t-link); }
.u2-badge.stanice, .u2-badge.scene { background: rgba(34,197,94,.14); color: var(--t-green); border-color: rgba(34,197,94,.45); }
.u2-badge.pohyb { background: rgba(96,165,250,.14); color: var(--t-blue); border-color: rgba(96,165,250,.45); }
.u2-badge.alarm { background: rgba(255,59,85,.16); color: var(--t-red); border-color: rgba(255,59,85,.5); }
.enr-row { background: rgba(var(--ink),.04); border-color: var(--line); }
#moreRow .morerow { border-top-color: var(--line); }
.lnk { color: var(--t-link); }
.dispatch-foot { background: rgba(var(--paper),.95); border-top: 1px solid var(--line); padding: 10px; }
.btn { border-radius: 13px; }
.dispatch-foot .btn { background: linear-gradient(135deg, #ff4d64, #c8102e); box-shadow: 0 14px 30px -12px rgba(255,59,85,.85), inset 0 1px 0 rgba(var(--ink),.25); font-weight: 800; letter-spacing: .02em; font-size: 16px; padding: 14px; }
.empty { color: var(--mut); }
.dispatch-foot:has(#btnSendSel[style*="none"]) { display: none; }   /* prázdná patička bez tlačítka */

.crew-open { padding: 6px 2px; }
.crew-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 12px; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 800; color: var(--c-strong); border: 1px solid rgba(96,165,250,.6);
  background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(59,130,246,.15)); box-shadow: 0 12px 30px -14px rgba(59,130,246,.8); }
.crew-btn small { font-size: 12.5px; font-weight: 600; color: var(--t-blue); }
.crew-btn:hover { background: linear-gradient(135deg, rgba(59,130,246,.5), rgba(59,130,246,.22)); }
.ext-badge { display: inline-block; font-size: 10px; font-weight: 800; background: rgba(96,165,250,.16); color: var(--t-blue); border: 1px solid rgba(96,165,250,.5); border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; }
/* mobil: složky v liště jen jako ikony */
@media (max-width: 768px) {
  #hudSvc { display: flex; gap: 3px; flex: none; }
  #hudSvc .pill { font-size: 0; padding: 4px 6px; margin: 0; }
  #hudSvc .pill.F::before { content: '🚒'; font-size: 13px; }
  #hudSvc .pill.P::before { content: '🚓'; font-size: 13px; }
  #hudSvc .pill.Z::before { content: '🚑'; font-size: 13px; }
}

/* ── kompaktní výjezd ── */
#dispatch h2 #closeDisp { margin-left: 6px; }
#dispInfo { padding: 10px 14px; }
#dispInfo .di-h { font-size: 15.5px; }
#dispInfo .di-m, #dispInfo .src-disp { margin-top: 1px; font-size: 12px; }
.di-ul:has(.diu-hdr.bad) { display: none; }          /* „Požadované prostředky“ jen opakuje řádek Potřeba */
.disp-tabs { margin: 0; }
.disp-tab { padding: 8px 6px; font-size: 13px; }
.flt-sel { display: flex; gap: 6px; padding: 8px 10px 4px; }
.flt-select { flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none; background: rgba(var(--ink),.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e9bb5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line); color: var(--txt); border-radius: 10px; padding: 8px 28px 8px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.flt-full { flex: none; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: rgba(96,165,250,.16); border: 1px solid rgba(96,165,250,.6); color: var(--t-blue); }
.flt-full:hover { background: rgba(96,165,250,.28); }
#dispatch h2 #dispFull { font-weight: 700; color: var(--t-blue); border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.14); }
@media (max-width: 768px) { .flt-sel { flex-wrap: wrap; } .flt-full { flex: 1 1 100%; } }
.flt-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(96,165,250,.2); }
.flt-select option, .flt-select optgroup { background: var(--c-panel); color: var(--txt); }
#unitList { padding: 6px 10px 10px; gap: 5px; }
.unit2 { padding: 7px 10px; margin-bottom: 0; }
.u2-bot { margin-top: 2px; }
.mezi-hdr { padding: 8px 2px 4px; margin-top: 4px; }

/* ── výjezd na celou obrazovku: vlevo výzva, vpravo mřížka vozidel ── */
@media (min-width: 769px) {
  #dispatch.full { left: 0; right: 0; width: auto; z-index: 590; display: grid; grid-template-columns: minmax(300px, 380px) 1fr;
    grid-template-rows: auto auto auto 1fr auto auto; border-width: 0; animation: none; }
  #dispatch.full > h2 { grid-column: 1 / -1; grid-row: 1; }
  #dispatch.full > #dispInfo { grid-column: 1; grid-row: 2 / 7; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--line); max-height: none; }
  #dispatch.full > #transPanel { grid-column: 2; grid-row: 2; }
  #dispatch.full > #filterBar { grid-column: 2; grid-row: 3; }
  #dispatch.full > #unitList { grid-column: 2; grid-row: 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-content: start; gap: 8px; overflow-y: auto; max-height: none; }
  #dispatch.full > #unitList > .mezi-hdr, #dispatch.full > #unitList > .asgn-hdr, #dispatch.full > #unitList > .empty, #dispatch.full > #unitList > .nearest-wrap { grid-column: 1 / -1; }
  #dispatch.full > #moreRow { grid-column: 2; grid-row: 5; }
  #dispatch.full > .dispatch-foot { grid-column: 2; grid-row: 6; }
  #dispatch.full .flt-sel { max-width: 640px; }
}
@media (max-width: 768px) {
  #dispatch.full { max-height: none; top: calc(54px + var(--safe-t)); border-radius: 0; }
  #dispatch.full #dispInfo { max-height: 24dvh; }
  #dispatch.full #unitList { flex: 1 1 auto; }
}

/* štítky na mapě a legenda */
.veh-lbl, .inc-lbl { background: rgba(var(--paper),.94) !important; color: var(--txt) !important; border: 1px solid var(--line) !important; box-shadow: 0 8px 20px -8px rgba(var(--shade),calc(.8 * var(--shade-k))) !important; border-radius: 8px !important; }
.mk { background: var(--c-panel); box-shadow: 0 0 0 3px rgba(var(--paper),.6), 0 4px 12px rgba(var(--shade),calc(.7 * var(--shade-k))); }
.mk-cnt { border-color: var(--c-panel); }
.legend { border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--mut); box-shadow: var(--glass-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* nastavení, toast */
#settingsPanel { top: calc(70px + var(--safe-t)); border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); color: var(--txt); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sett-row { border-bottom-color: var(--line); }
.sett-toggle span { background: rgba(var(--ink),.08); border-color: var(--line); }
.toast { top: calc(72px + var(--safe-t)); border-radius: 13px; background: var(--c-panel); color: var(--c-strong); border: 1px solid var(--line); box-shadow: 0 16px 40px -14px rgba(var(--shade),calc(.8 * var(--shade-k))); font-weight: 600; }
.toast.good { border-color: var(--ok); box-shadow: 0 0 24px -6px rgba(34,197,94,.6); } .toast.bad { border-color: var(--fire); box-shadow: 0 0 24px -6px rgba(255,59,85,.6); }

/* konec směny */
.overlay { background: radial-gradient(900px 500px at 50% 0%, rgba(255,59,85,.22), transparent), rgba(var(--paper),.9); }
.dialog { border-radius: 24px; background: var(--c-panel); border: 1px solid var(--line); color: var(--txt); box-shadow: 0 40px 100px -30px rgba(var(--shade),calc(.9 * var(--shade-k))); }
.dialog h1 { font-size: 32px; letter-spacing: -.035em; }
.go-stats .s { border-radius: 14px; background: rgba(var(--ink),.04); border-color: var(--line); }
.lb th, .lb td { border-bottom-color: var(--line); }

/* zásady (modal má inline světlé styly) */
#gdpr-modal > div { background: var(--c-panel) !important; color: var(--txt); border: 1px solid var(--line); }
#gdpr-modal p, #gdpr-modal td { color: var(--t-body) !important; }
#gdpr-modal th, #gdpr-modal thead tr { background: rgba(var(--ink),.05) !important; color: var(--c-strong); }
#gdpr-modal th, #gdpr-modal td { border-color: var(--line) !important; }
#gdpr-modal a { color: var(--t-link); }
#gdpr-ok { background: linear-gradient(135deg, #ff4d64, #c8102e) !important; }

/* cookie lišta */
#cookie-banner { left: 14px; right: auto; bottom: calc(14px + var(--safe-b)); max-width: 560px; border-radius: 16px; border: 1px solid var(--ui-line2); background: var(--c-panel); color: var(--ui-txt); box-shadow: 0 20px 50px -18px rgba(var(--shade),calc(.7 * var(--shade-k))); padding: 12px 14px; flex-wrap: wrap; }
#cookie-banner b { color: var(--c-strong); }
#cookie-banner button { border-radius: 10px; padding: 10px 16px; font-size: 13.5px; background: var(--ui-red); }
#cookie-banner a { color: var(--t-link) !important; }

/* úvod: radar za nadpisem */
.setup-left { position: relative; overflow: hidden; }
.setup-left::after { content: ''; position: absolute; width: 560px; height: 560px; right: -230px; top: -170px; border-radius: 50%; pointer-events: none; opacity: .55;
  background:
    repeating-radial-gradient(circle, transparent 0 55px, rgba(255,59,85,.16) 56px 57px),
    conic-gradient(from 0deg, rgba(255,59,85,.45), rgba(255,59,85,0) 22%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%); mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  animation: radar 5s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.setup-left > * { position: relative; z-index: 1; }
.setup-left h1 { font-size: clamp(36px, 4.4vw, 58px); }
.setup-kicker { display: inline-flex; align-items: center; gap: 8px; }
.setup-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-red); box-shadow: 0 0 0 4px rgba(239,35,60,.25); animation: beacon 2s ease-in-out infinite; }

/* ───────────── ROZLOŽENÍ PULTU (tablet a desktop) ─────────────
   Fronta výzev = pevný sloupec vlevo, výjezd = pevný sloupec vpravo, mapa uprostřed zůstává volná. */
@media (min-width: 769px) {
  :root { --colL: 340px; --colR: 410px; --hudH: calc(58px + var(--safe-t)); }
  #calls { top: var(--hudH); left: 0; bottom: 0; width: var(--colL); max-height: none; border-radius: 0; border-width: 0 1px 0 0; }
  #dispatch { top: var(--hudH); right: 0; left: auto; bottom: 0; width: var(--colR); max-height: none; border-radius: 0; border-width: 0 0 0 1px;
    transform: translateX(0); }
  #dispatch.open { animation: slidein .22s ease-out; }
  @keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
  #calls.collapsed { width: 64px; }
  #calls.collapsed #callList, #calls.collapsed .call-tabs { display: none; }
  #calls.collapsed h2 { flex-direction: column; font-size: 0; gap: 10px; padding: 14px 0; }
  #calls.collapsed h2 #callCount { font-size: 12px; }
  #calls.collapsed h2 .tbtn.xs { margin: 0; font-size: 13px; }
  /* mapové ovládací prvky a legenda uhýbají sloupcům */
  .leaflet-left { left: var(--colL); }
  body:has(#calls.collapsed) .leaflet-left { left: 64px; }
  body:has(#dispatch.open) .leaflet-right, body:has(#dispatch.open) .legend { right: calc(var(--colR) + 12px); }
  .legend { right: 12px; bottom: 28px; }
  .toast { left: calc(50% + (var(--colL) - 0px) / 2); }
  #dispatch .dispatch-foot { padding: 12px 14px calc(12px + var(--safe-b)); }
  #calls h2, #dispatch h2 { min-height: 50px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --colL: 300px; --colR: 360px; }
  .metric.wide { display: none; }
  .legend { display: none; }
}
/* na tabletu na výšku se výjezd vysouvá přes frontu i mapu */
@media (min-width: 769px) and (max-width: 860px) {
  :root { --colR: min(440px, calc(100vw - 60px)); }
  #dispatch { box-shadow: -30px 0 80px -20px rgba(var(--shade),calc(.9 * var(--shade-k))); z-index: 560; }
}

/* ───────────── PRŮVODCE PRVNÍ HROU ───────────── */
.coach { position: fixed; inset: 0; z-index: 11000; display: none; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + var(--safe-b));
  background: rgba(var(--paper),.55); backdrop-filter: blur(3px); }
.coach.open { display: flex; }
@media (min-width: 769px) { .coach { align-items: center; } }
.coach-box { width: min(460px, 100%); background: var(--c-panel); color: var(--ui-txt); border: 1px solid var(--ui-line2); border-radius: 22px; padding: 22px 22px 18px; box-shadow: 0 40px 100px -30px rgba(var(--shade),calc(.95 * var(--shade-k))); }
.coach-step { display: none; }
.coach-step.on { display: block; animation: coachin .25s ease-out; }
@keyframes coachin { from { opacity: 0; transform: translateY(8px); } }
.coach-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; margin-bottom: 12px; background: rgba(255,59,85,.14); border: 1px solid rgba(255,59,85,.4); }
.coach-step h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; color: var(--c-strong); }
.coach-step p { margin: 0; color: var(--ui-mut); font-size: 15px; line-height: 1.55; }
.coach-step p b { color: var(--c-strong); }
.coach-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.coach-dots { display: flex; gap: 6px; flex: 1; }
.coach-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink),.18); }
.coach-dots i.on { background: var(--ui-red); width: 20px; border-radius: 4px; }
.coach-foot button { border-radius: 12px; padding: 11px 16px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--ui-line2); background: transparent; color: var(--ui-mut); }
.coach-foot .coach-next { border: 0; color: var(--c-strong); background: linear-gradient(135deg, #ff4d64, #c8102e); }

/* tablet: akce hry schované do menu ☰ */
@media (max-width: 1024px) {
  .hud-menu { display: inline-flex; font-size: 18px; padding: 7px 11px; }
  .hud-actions { display: none; position: fixed; top: calc(62px + var(--safe-t)); right: 8px; z-index: 720; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 10px; border-radius: 16px; background: rgba(var(--paper),.96); border: 1px solid var(--ui-line2); box-shadow: 0 20px 50px -18px rgba(var(--shade),calc(.8 * var(--shade-k))); min-width: 210px; }
  .hud-actions.open { display: flex; }
  .hud-actions .tbtn { justify-content: flex-start; padding: 12px 14px; font-size: 15px; }
  .hud-actions .tbtn .lbl-m { display: inline; }
}
@media (max-width: 900px) {
  .brand { display: none; }
  #pauseBtn .lbl { display: none; }
  .topbar { gap: 6px; }
  .metric { padding: 4px 9px; }
}

/* ───────────── MOBIL (≤ 700 px) – bottom sheety ───────────── */
@media (max-width: 768px) {
  #setup { padding: 0; display: block; }
  .setup-wrap { grid-template-columns: 1fr; border-radius: 0; border: 0; min-height: 100%; width: 100%; }
  .setup-left { overflow: visible; }
  .setup-left { padding: calc(28px + var(--safe-t)) 20px 18px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .setup-beacon { width: 52px; height: 52px; font-size: 28px; border-radius: 16px; margin-bottom: 14px; }
  .setup-left h1 { font-size: 32px; }
  .setup-tagline { font-size: 15px; margin-bottom: 0; }
  .setup-svcs-preview { display: none; }
  .setup-right { padding: 20px 20px calc(20px + var(--safe-b)); justify-content: flex-start; overflow: visible; }
  .setup-right h2 { display: none; }
  .btn-start { position: sticky; bottom: calc(10px + var(--safe-b)); z-index: 2; }

  .topbar { height: calc(54px + var(--safe-t)); gap: 6px; padding: var(--safe-t) 8px 0; }
  .brand { display: none; }
  #hudSvc .pill { padding: 4px 6px; font-size: 0; }
  .metric { padding: 4px 8px; border-radius: 9px; }
  .metric .k { font-size: 8.5px; }
  .metric .v { font-size: 14px; }
  #pauseBtn { padding: 7px 10px; font-size: 16px; }
  #pauseBtn .lbl { display: none; }                         /* na mobilu jen ikona */
  .hud-actions { top: calc(58px + var(--safe-t)); }

  /* Volání = spodní panel; klepnutím na hlavičku se sbalí na lištu */
  #calls { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 46vh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: var(--safe-b); }
  #calls h2 { cursor: pointer; padding: 6px 16px 12px; }
  #calls.collapsed #callList, #calls.collapsed .call-tabs { display: none; }
  #calls.collapsed { max-height: none; }
  /* Výjezd = vysoký spodní panel přes volání */
  #dispInfo { flex-shrink: 1; overflow-y: auto; max-height: 38vh; max-height: 38dvh; }
  #calls { max-height: 46dvh; }
  #dispatch { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 86vh; max-height: 86dvh; border-radius: 22px 22px 0 0; border-bottom: 0; z-index: 560; padding-bottom: var(--safe-b); }
  body:has(#dispatch.open) #calls { display: none !important; }
  #dispatch h2 { padding: 6px 16px 12px; }
  #unitList { flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; }  .dispatch-foot { padding: 10px 12px calc(10px + var(--safe-b)); }
  .dispatch-foot .btn { padding: 15px; font-size: 16px; }
  #dispatch::before, #calls::before { background: rgba(var(--ink),.22); width: 44px; height: 5px; border-radius: 3px; margin: 8px auto 2px; }

  #settingsPanel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(14px + var(--safe-b)); }
  .toast { top: calc(62px + var(--safe-t)); white-space: normal; width: max-content; max-width: calc(100vw - 24px); }
  #cookie-banner { left: 8px; right: 8px; max-width: none; bottom: calc(8px + var(--safe-b)); font-size: 12.5px; }
  .call { padding: 11px 12px; }
  .unit, .unit2 { min-height: 52px; }
  .tbtn.xs { min-height: 34px; }
}

/* ───────────── QA opravy 2026-10-03 ───────────── */
/* karty složek jsou tlačítka (klávesnice, čtečky) */
button.svc-card { color: var(--ui-txt); font: inherit; width: 100%; }
button.svc-card:focus-visible, .diff-btn:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 2px; }

/* důvěra veřejnosti v liště */
#mTrust { color: var(--t-green); }
#mTrust.mid { color: var(--t-amber); }
#mTrust.low { color: var(--t-red); text-shadow: 0 0 14px rgba(255,59,85,.6); }
#mScore.low { color: var(--t-red); }
.hud-actions .tbtn { white-space: nowrap; }   /* „Nová hra“ se nesmí lámat */

/* štítky požadavků: nesplněný = jednotně oranžový rámeček, složku značí jen proužek vlevo; splněný = šedý */
.tag.F, .tag.P, .tag.Z { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.7); color: var(--t-amber); border-left-width: 4px; }
.tag.F { border-left-color: var(--fire); } .tag.P { border-left-color: var(--police); } .tag.Z { border-left-color: var(--ems); }
.tag.F.done, .tag.P.done, .tag.Z.done { border-left-width: 4px; }
.tag.F.done { border-left-color: rgba(255,59,85,.55) !important; } .tag.P.done { border-left-color: rgba(59,130,246,.55) !important; } .tag.Z.done { border-left-color: rgba(34,197,94,.55) !important; }
.tag.ho-t { background: rgba(var(--ink),.04); border-style: dashed; color: var(--mut); }
.di-ho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.di-ho .ho-btn { background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.6); color: var(--t-amber); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; }
.di-ho .ho-btn:hover { background: rgba(245,158,11,.28); text-decoration: none; }
.di-ho .ho-ok { color: var(--mut); font-size: 12px; }
.di-law { color: var(--mut) !important; font-size: 11.5px !important; }

/* karta vozidla: název celý, odznaky HZS/SDH/AED/jiný kraj na druhém řádku; zkrátí se raději volací znak */
.u2-nm { flex: none; }
.u2-cs { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metric .v { white-space: nowrap; }
/* lišta na menších desktopech: složky jen jako ikony (jinak se pilulky lámou do dvou řádků) */
@media (max-width: 1600px) { .metric.d-hide-s { display: none; } }   /* počet výzev je i v hlavičce fronty */
@media (max-width: 1500px) {
  #hudSvc { display: flex; gap: 3px; flex: none; }
  #hudSvc .pill { font-size: 0; padding: 5px 7px; margin: 0; }
  #hudSvc .pill.F::before { content: '🚒'; font-size: 14px; }
  #hudSvc .pill.P::before { content: '🚓'; font-size: 14px; }
  #hudSvc .pill.Z::before { content: '🚑'; font-size: 14px; }
}
.u2-badge { margin-left: 0; }
.u2-home { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-badges .sdh-badge, .u2-badges .hzs-badge, .u2-badges .aed-badge, .u2-badges .ext-badge { margin-left: 3px; }

/* nastavení: rychlost hry a legenda v mřížce */
.speed-seg { display: inline-flex; gap: 4px; }
.speed-btn { min-width: 42px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(var(--ink),.05); color: var(--txt); font-weight: 700; cursor: pointer; }
.speed-btn.on { background: rgba(96,165,250,.2); border-color: rgba(96,165,250,.7); color: var(--t-blue); }
.sett-note { color: var(--mut); }
.sett-legend { display: grid; grid-template-columns: 24px minmax(90px, 120px) 1fr; gap: 4px 8px; align-items: baseline; font-size: 11.5px; padding: 4px 0 6px; }
.sett-legend .lg-ic { text-align: center; }
.sett-legend .lg-nm { color: var(--txt); }
.sett-legend .lg-full { color: var(--mut); }

/* požadavky nad seznamem vozidel – jen na mobilu, kde je popis výzvy sbalený */
.flt-req { display: none; }

/* cookie lišta jen na úvodní obrazovce – ve hře nesmí zakrývat výzvy */
body:has(#setup[style*="none"]) #cookie-banner { display: none !important; }

/* toast: nepřekrývat otevřené menu ani nastavení; na desktopu jen nad mapou mezi sloupci */
body:has(#hudActions.open) .toast, body:has(#settingsPanel[style*="block"]) .toast { opacity: 0 !important; }
.toast { white-space: normal; }
@media (min-width: 861px) {
  body:has(#dispatch.open) .toast { left: calc(var(--colL) + (100vw - var(--colL) - var(--colR)) / 2); max-width: calc(100vw - var(--colL) - var(--colR) - 32px); }
  body:has(#dispatch.full) .toast { left: 50%; max-width: min(720px, 90vw); top: auto; bottom: calc(86px + var(--safe-b)); }
}
@media (min-width: 769px) and (max-width: 860px) {
  body:has(#dispatch.open) .toast { left: calc((100vw - var(--colR)) / 2); max-width: calc(100vw - var(--colR) - 24px); }
  body:has(#dispatch.full) .toast { left: 50%; max-width: 90vw; top: auto; bottom: calc(86px + var(--safe-b)); }
}

/* dotykové plochy na tabletu a mobilu */
@media (pointer: coarse) {
  .lnk, .recall-big, .ho-btn, .speed-btn { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; }
  .lnk.ri { min-height: 40px; }
  #dispatch h2 .tbtn.xs, #calls h2 .tbtn.xs { min-height: 40px; min-width: 40px; justify-content: center; }
  .morerow { gap: 8px; flex-wrap: wrap; }
}

/* mobil: celoobrazovkové Posádky – nahoře jen název výzvy (max. 2 řádky) a požadavky */
@media (max-width: 768px) {
  #dispatch.full #dispInfo { max-height: none; overflow: visible; flex: none; padding: 8px 14px 6px; }
  #dispatch.full #dispInfo > :not(.di-h) { display: none; }
  #dispatch.full .di-h { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  #dispatch.full .flt-req { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 2px 10px 6px; font-size: 12px; color: var(--mut); }
  .toast { top: auto; bottom: calc(46dvh + 10px); }
  body:has(#calls.collapsed) .toast { bottom: calc(70px + var(--safe-b)); }
  body:has(#dispatch.open) .toast { bottom: auto; top: calc(62px + var(--safe-t)); }
  body:has(#dispatch.full) .toast { top: auto; bottom: calc(84px + var(--safe-b)); }
  .sett-legend { grid-template-columns: 24px 96px 1fr; }
}

/* omezené animace: jen zklidnit, ne vypnout (provozovatel je má v systému vypnuté) */
@media (prefers-reduced-motion: reduce) {
  .setup-beacon { animation-duration: 4s; }
  .setup-left::after { animation-duration: 16s; }
  .topbar::after { animation-duration: 20s; }
  .call, .btn-start, .svc-card { transition: none; }
}

/* ===== 2026-10-12: traumaplán, cíl překladu ===== */
.tag.trauma { background: var(--ui-red); border-color: var(--ui-red); color: var(--c-strong); font-weight: 800; letter-spacing: .04em; }
.di-tp { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ui-red); background: rgba(239,35,60,.08); font-size: 13px; }
.di-tp.done { border-color: var(--ui-line2); background: transparent; }
.tp-list { display: grid; gap: 6px; margin: 8px 0; }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-n { display: flex; flex-direction: column; font-weight: 600; }
.tp-n small { font-weight: 400; color: var(--ui-mut); font-size: 11.5px; }
.tp-row input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ui-line2); background: var(--ui-surf2); color: var(--ui-txt); font: inherit; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tp-sum { color: var(--ui-mut); font-weight: 700; }
.tp-sum.ok { color: var(--t-green); }

/* ===== 2026-10-12: složky v panelu výjezdu, cíl zaneprázdněné jednotky, splněná potřeba ===== */
.svc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.svc-tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ui-line2); background: var(--ui-surf2); color: var(--ui-txt); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.2; }
.svc-tab small { font-size: 11px; font-weight: 500; color: var(--ui-mut); }
.svc-tab.on { border-color: var(--ui-red); box-shadow: inset 0 0 0 1px var(--ui-red); }
.svc-tab.ho { border-style: dashed; }
.svc-tab.ho.need { border-color: var(--t-amber); }
.svc-tab.ho.need small { color: var(--t-amber); }
.svc-tab.ho.done { cursor: default; opacity: .75; }
.svc-tab.ho.done small { color: var(--t-green); }
.u2-tgt { margin-top: 4px; }
.u2-target { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--t-amber); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.req-ok { color: var(--t-green); font-weight: 700; font-size: 12.5px; }

/* ===== téma: výjimky – bílý text na barevných tlačítkách a odznacích ===== */
.btn-start, .cdlg-btns .cdlg-ok, .coach-foot .coach-next, #calls h2 #callCount, .tag.trauma, .tag.mci, .tag.inj,
.dispatch-foot .btn, #cookie-banner button, #gdpr-ok, .pill, .tp-btn, .di-mci, .crew-btn { color: #fff !important; }
.crew-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.crew-btn small { color: rgba(255,255,255,.85); }
.di-ho.urgent { color: var(--c-strong); }
/* světlé téma: karty výzev a štítky se světlým podkladem */
html.game:not([data-theme="dark"]) .call { background: #fff; }
html.game:not([data-theme="dark"]) .call.sev1 { background: linear-gradient(180deg, #fff8eb, #fff); }
html.game:not([data-theme="dark"]) .call.sev2 { background: linear-gradient(180deg, #fff3ec, #fff); }
html.game:not([data-theme="dark"]) .call.sev3 { background: linear-gradient(180deg, #fff0f2, #fff); }
html.game:not([data-theme="dark"]) .call.state-need { background: #ffe9ec !important; box-shadow: 0 6px 18px -12px rgba(212,17,30,.6); }
html.game:not([data-theme="dark"]) .call.state-dispatched { background: #e8f7ee !important; }
html.game:not([data-theme="dark"]) .call.state-ok { background: #f1edff !important; border-left-color: #6d28d9 !important; }
html.game:not([data-theme="dark"]) .call.state-trans { background: #fff5e0 !important; }
html.game:not([data-theme="dark"]) .call.state-need .tag, html.game:not([data-theme="dark"]) .call.state-dispatched .tag,
html.game:not([data-theme="dark"]) .call.state-ok .tag, html.game:not([data-theme="dark"]) .call.state-trans .tag { background: rgba(255,255,255,.75) !important; border-color: rgba(15,23,42,.22) !important; color: var(--c-strong) !important; }
html.game:not([data-theme="dark"]) .call.state-need .tag.trauma { background: var(--ui-red) !important; color: #fff !important; }
html.game:not([data-theme="dark"]) .call .t .tm { background: rgba(15,23,42,.06); color: var(--c-strong); }
html.game:not([data-theme="dark"]) .call .src { color: var(--t-link); }
html.game:not([data-theme="dark"]) #mScore { text-shadow: none; }
html.game:not([data-theme="dark"]) .mk { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 3px 10px rgba(15,23,42,.35); }
html.game:not([data-theme="dark"]) .mk-cnt { border-color: #fff; }
html.game:not([data-theme="dark"]) .veh-lbl, html.game:not([data-theme="dark"]) .inc-lbl { background: rgba(255,255,255,.97) !important; box-shadow: 0 4px 12px -6px rgba(15,23,42,.4) !important; }
html.game:not([data-theme="dark"]) .leaflet-control-attribution { background: rgba(255,255,255,.85) !important; }
html.game:not([data-theme="dark"]) .sev-badge.s1 { color: #92400e; border-color: #b45309; }
html.game:not([data-theme="dark"]) .sev-badge.s2 { color: #9a3412; border-color: #c2410c; }
html.game:not([data-theme="dark"]) .sev-badge.s3 { color: #9f1239; border-color: #be123c; }
html.game:not([data-theme="dark"]) #setup { background: radial-gradient(900px 520px at 12% 18%, rgba(217,4,41,.10), transparent 62%), radial-gradient(800px 520px at 92% 85%, rgba(29,78,216,.10), transparent 62%), var(--ui-bg); }
html.game:not([data-theme="dark"]) .setup-wrap { background: rgba(255,255,255,.92); box-shadow: 0 30px 80px -40px rgba(15,23,42,.45); }
html.game:not([data-theme="dark"]) .svc-card.on .sc-nm { color: var(--c-strong); }
html.game:not([data-theme="dark"]) .svc-card::after { color: var(--c-strong); }
html.game:not([data-theme="dark"]) .diff-btn.on { color: var(--t-amber); }
html.game:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,.96); box-shadow: 0 6px 20px -14px rgba(15,23,42,.4); }
html.game:not([data-theme="dark"]) .leaflet-popup-content-wrapper, html.game:not([data-theme="dark"]) .leaflet-popup-tip { background: #fff !important; color: var(--c-strong) !important; }
html.game:not([data-theme="dark"]) .overlay { background: radial-gradient(900px 500px at 50% 0%, rgba(217,4,41,.12), transparent), rgba(238,242,248,.92); }

/* ===== 2026-10-12: klasické menu s textem (všechny šířky) ===== */
.menu-btn { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 700; }
.menu-btn .mb-ic { font-size: 17px; line-height: 1; }
.hud-actions, .hud-actions.menu-list { display: none; position: fixed; top: calc(62px + var(--safe-t)); right: 10px; z-index: 720; flex-direction: column; align-items: stretch; gap: 2px;
  width: min(330px, calc(100vw - 20px)); max-height: calc(100dvh - 80px - var(--safe-t)); overflow-y: auto; padding: 8px; border-radius: 16px;
  background: var(--c-panel); border: 1px solid var(--ui-line2); box-shadow: 0 24px 60px -24px rgba(var(--shade),calc(.8 * var(--shade-k))), 0 2px 8px rgba(var(--shade),calc(.15 * var(--shade-k))); }
.hud-actions.open { display: flex; }
.menu-list > button, .menu-list > label, .menu-list > a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ui-txt); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; }
.menu-list > button:hover, .menu-list > label:hover, .menu-list > a:hover, .menu-list > :focus-visible { background: rgba(var(--ink),.07); outline: none; }
.menu-list .mi-ic { width: 26px; text-align: center; font-size: 18px; flex: none; }
.menu-list .mi-t { display: flex; flex-direction: column; line-height: 1.25; }
.menu-list .mi-t small { font-size: 12px; font-weight: 400; color: var(--ui-mut); }
.menu-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-mut); padding: 10px 12px 4px; }
.menu-h:first-child { padding-top: 4px; }
#pauseBtn .lbl { display: inline !important; }
/* logo v liště = tlačítko */
.brand { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 6px; border-radius: 10px; cursor: pointer; color: var(--txt); font: inherit; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.brand:hover { background: rgba(var(--ink),.06); }
.brand-logo { width: 28px; height: 28px; display: block; }
@media (max-width: 900px) { .brand { display: inline-flex; } .brand .brand-ops, .brand .brand-dot { display: none; } }
@media (max-width: 768px) {
  .menu-btn { padding: 7px 10px; }
  .menu-btn .mb-lbl { font-size: 14px; }
  #pauseBtn { font-size: 14px; }
  .metric.m-hide { display: none; }
  .hud-actions, .hud-actions.menu-list { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 80dvh; border-radius: 22px 22px 0 0; padding: 10px 10px calc(14px + var(--safe-b)); }
}

/* ===== rozložení: fronta výzev | výjezd | mapa vpravo ===== */
@media (min-width: 861px) {
  #dispatch { left: var(--colL); right: auto; border-width: 0 1px 0 0; }
  @keyframes slidein { from { transform: translateX(-30px); opacity: 0; } }
  body:has(#calls.collapsed) #dispatch { left: 64px; }
  body:has(#dispatch.open) .leaflet-left { left: calc(var(--colL) + var(--colR)); }
  body:has(#calls.collapsed):has(#dispatch.open) .leaflet-left { left: calc(64px + var(--colR)); }
  body:has(#dispatch.open) .leaflet-right, body:has(#dispatch.open) .legend { right: 0; }
  body:has(#dispatch.open) .toast { left: calc(var(--colL) + var(--colR) + (100vw - var(--colL) - var(--colR)) / 2); max-width: calc(100vw - var(--colL) - var(--colR) - 32px); }
  #dispatch.full { left: 0; }
}

/* ===== cookies: lišta a nastavení ===== */
#cookie-banner { gap: 10px 14px; align-items: center; }
#cookie-banner .cb-text { flex: 1 1 260px; font-size: 13px; line-height: 1.5; }
#cookie-banner .cb-text b { display: block; margin-bottom: 2px; color: var(--c-strong); }
#cookie-banner .cb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#cookie-banner button.sec { background: transparent !important; color: var(--ui-txt) !important; border: 1px solid var(--ui-line2); }
.ck-box h3 { margin: 0 0 12px; font-size: 18px; color: var(--c-strong); }
.ck-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ui-line); cursor: pointer; }
.ck-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ui-red); flex: none; }
.ck-row span { display: flex; flex-direction: column; font-size: 14.5px; }
.ck-row small { color: var(--ui-mut); font-size: 12.5px; }
.ck-note { font-size: 12.5px !important; color: var(--ui-mut); margin: 12px 0 16px !important; }
.setup-foot a { margin: 0 2px; }
/* světlé téma: bílé texty ze style.css (původně pro tmavou lištu a syté karty) */
html.game:not([data-theme="dark"]) .topbar, html.game:not([data-theme="dark"]) .brand, html.game:not([data-theme="dark"]) .brand-ops,
html.game:not([data-theme="dark"]) .metric .v, html.game:not([data-theme="dark"]) .metric .v.sm, html.game:not([data-theme="dark"]) .tbtn { color: var(--c-strong); }
html.game:not([data-theme="dark"]) .brand-dot { color: var(--ui-red); }
html.game:not([data-theme="dark"]) .call.state-need, html.game:not([data-theme="dark"]) .call.state-dispatched, html.game:not([data-theme="dark"]) .call.state-ok, html.game:not([data-theme="dark"]) .call.state-trans { color: var(--c-strong); }
html.game:not([data-theme="dark"]) .call .t, html.game:not([data-theme="dark"]) .call .tm { color: var(--c-strong) !important; }
html.game:not([data-theme="dark"]) .call .m, html.game:not([data-theme="dark"]) .call .m2 { color: #334155 !important; }
html.game:not([data-theme="dark"]) .call .src { color: var(--t-link) !important; }
html.game:not([data-theme="dark"]) .call .sev-badge { color: var(--c-strong) !important; border-color: rgba(15,23,42,.35) !important; background: rgba(255,255,255,.7) !important; }
html.game:not([data-theme="dark"]) .call.state-need { border-color: #e11d48 !important; }
html.game:not([data-theme="dark"]) .call.state-dispatched { border-color: #16a34a !important; }
html.game:not([data-theme="dark"]) #pauseBtn { color: #7c2d12; background: #fff7e6; border-color: #f59e0b; }
html.game:not([data-theme="dark"]) #pauseBtn.on { color: #14532d; background: #ecfdf3; border-color: #16a34a; }
/* lišta nesmí být „containing block“ pro menu (backdrop-filter by ho uvěznil v liště) */
.topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (max-width: 768px) {
  .topbar { overflow: hidden; }
  #hudSvc, .topbar .brand { display: none !important; }
  .topbar .metric:not(:has(#mClock)):not(:has(#mScore)):not(:has(#mTrust)) { display: none; }
  .topbar .spacer { flex: 1 1 auto; min-width: 0; }
  #pauseBtn, .menu-btn { flex: none; padding: 7px 9px; font-size: 13.5px; }
}
/* (≤370 px skóre zůstává – řeší blok TELEFON) */

/* ═════════════════════ TELEFON (≤ 768 px) – vlastní rozhraní 2026-10-13 ═════════════════════
   Lišta: čas, skóre, důvěra ▾ (statistiky), Pauza. Dole navigace Výzvy · Mapa · Jednotky · Menu
   (body[data-mtab]). Výjezd přes celou obrazovku s lepivým „Vyslat“, dialogy jako bottom sheety. */
.mnav, .mfab, #munits, .stats-btn, .mstats, .mpeek { display: none; }
.mpeek[hidden], .mstats[hidden] { display: none !important; }
@media (max-width: 768px) {
  :root { --hudH: calc(56px + var(--safe-t)); --navH: calc(64px + var(--safe-b)); }
  html.game body { font-size: 16px; }

  /* horní lišta */
  .topbar { height: var(--hudH) !important; padding: var(--safe-t) 10px 0 !important; gap: 8px !important; overflow: visible !important; }
  .topbar .metric, #hudSvc, .topbar .brand, #hudMenuBtn { display: none !important; }
  .topbar .metric:has(#mClock), .topbar .metric:has(#mScore) { display: flex !important; flex-direction: column; padding: 5px 11px !important; }
  .topbar .metric .k, .stats-btn .k { font-size: 11px !important; letter-spacing: .06em; }
  .topbar .metric .v { font-size: 19px !important; }
  .stats-btn { display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 26px 5px 11px !important; position: relative; border-radius: 11px; min-height: 44px; }
  .stats-btn .k { color: var(--mut); text-transform: uppercase; font-weight: 600; }
  .stats-btn .v { font-size: 19px; font-weight: 800; color: var(--t-green); line-height: 1.1; }
  .stats-btn.low .v { color: var(--t-red); }
  .stats-btn .sb-arr { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mut); }
  .stats-btn[aria-expanded="true"] .sb-arr { transform: translateY(-50%) rotate(180deg); }
  .topbar .spacer { flex: 1 1 auto; min-width: 0; }
  #pauseBtn { min-height: 44px; padding: 8px 14px !important; font-size: 15px !important; }
  #pauseBtn .lbl { display: inline !important; }
  .mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 730; top: calc(var(--hudH) + 6px); left: 8px; right: 8px; padding: 12px;
    background: var(--c-panel); border: 1px solid var(--ui-line2); border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(var(--shade),calc(.7 * var(--shade-k))); }
  .mstats div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink),.04); }
  .mstats span { font-size: 13px; color: var(--ui-mut); }
  .mstats b { font-size: 17px; color: var(--ui-txt); }

  /* dolní navigace */
  .mnav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--navH); padding: 0 4px var(--safe-b); z-index: 650;
    grid-template-columns: repeat(4, 1fr); background: var(--c-panel); border-top: 1px solid var(--ui-line2); box-shadow: 0 -8px 24px -16px rgba(var(--shade),calc(.5 * var(--shade-k))); }
  body:has(#hud[style*="flex"]) .mnav { display: grid; }
  .mnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--ui-mut);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 6px 2px; min-height: 56px; }
  .mnav .ni { font-size: 22px; line-height: 1; }
  .mnav button.on { color: var(--ui-red); }
  .mnav button.on::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ui-red); }
  .mnav .nb { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ui-red); color: #fff; font-size: 13px; line-height: 22px; text-align: center; }
  .mnav .nb[hidden] { display: none; }
  .mnav .ns { font-size: 12px; font-weight: 600; color: var(--ui-mut); }

  /* záložky: Výzvy / Mapa / Jednotky */
  #calls { top: var(--hudH) !important; bottom: var(--navH) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; padding-bottom: 0 !important; z-index: 500; }
  #calls::before, #calls h2 { display: none !important; }
  #calls.collapsed #callList { display: flex !important; }
  #calls.collapsed .call-tabs { display: flex !important; }
  body:not([data-mtab="calls"]) #calls { display: none !important; }
  #munits { position: fixed; top: var(--hudH); bottom: var(--navH); left: 0; right: 0; z-index: 500; flex-direction: column; border-radius: 0; border: 0; overflow: hidden; }
  body[data-mtab="units"]:has(#hud[style*="flex"]) #munits { display: flex; }
  #munits h2 { margin: 0; padding: 12px 14px 4px; font-size: 18px; font-weight: 800; color: var(--ui-txt); display: flex; align-items: center; gap: 8px; }
  .mu-count { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--ink),.08); color: var(--ui-mut); }
  #muFilters { padding: 4px 10px 6px; border-bottom: 1px solid var(--ui-line); }
  .mu-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
  .mu-chip { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ui-line2); background: transparent; color: var(--ui-txt); font: inherit; font-size: 15px; font-weight: 600; }
  .mu-chip.on { background: var(--ui-red); border-color: var(--ui-red); color: #fff; }
  #muList { flex: 1; overflow-y: auto; padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 6px; }
  .mu-unit { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--c-panel); cursor: pointer; }
  .mu-ic { font-size: 24px; flex: none; }
  .mu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; }
  .mu-main small { font-size: 13px; color: var(--ui-mut); font-family: ui-monospace, monospace; }
  .mu-sub { font-size: 14px; color: var(--ui-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mu-tgt { font-size: 14px; font-weight: 700; color: var(--t-amber); }
  .mu-unit .u2-badge { flex: none; font-size: 12.5px; }
  .mu-more { align-self: center; margin-top: 6px; font-size: 15px; min-height: 44px; }

  /* mapa: celá plocha, ovládání nad navigací */
  .leaflet-bottom { bottom: var(--navH) !important; }
  .leaflet-left { left: 0 !important; }
  .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
  .leaflet-control-attribution { font-size: 10px; }
  body[data-mtab="map"]:has(#hud[style*="flex"]) .mfab { display: block; }
  body:has(#mpeek:not([hidden])) .mfab { display: none !important; }
  .mfab { position: fixed; left: 12px; bottom: calc(var(--navH) + 14px); z-index: 600; }
  .mfab button { min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ui-line2); background: var(--c-panel); color: var(--ui-txt); font: inherit; font-size: 15px; font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(var(--shade),calc(.6 * var(--shade-k))); }
  .mpeek { display: block; position: fixed; left: 8px; right: 8px; bottom: calc(var(--navH) + 8px); z-index: 640; padding: 14px 16px 16px; border-radius: 20px;
    background: var(--c-panel); border: 1px solid var(--ui-line2); box-shadow: 0 -10px 40px -16px rgba(var(--shade),calc(.6 * var(--shade-k))); color: var(--ui-txt); }
  .mp-h { display: flex; align-items: center; gap: 8px; font-size: 18px; padding-right: 40px; position: relative; }
  .mp-ic { font-size: 22px; }
  .mp-x { position: absolute; right: -6px; top: -6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(var(--ink),.06); color: var(--ui-txt); font-size: 18px; }
  .mp-m { font-size: 15px; color: var(--ui-mut); margin-top: 4px; }
  .mp-t { color: var(--ui-txt); font-weight: 600; }
  .mp-need { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 2px; }
  .mp-open { width: 100%; margin-top: 12px; min-height: 50px; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff3b55, #c8102e); border: 0; border-radius: 14px; }

  /* karty výzev */
  #callList { padding: 10px 10px 16px !important; gap: 8px !important; }
  .call-tabs { padding: 8px 10px !important; }
  .ctab { min-height: 44px; font-size: 15px !important; }
  .call { padding: 12px 14px !important; border-left-width: 6px !important; }
  .call .t { font-size: 16.5px !important; line-height: 1.3; }
  .call .t .tm { font-size: 15px !important; }
  .call .m, .call .m2 { font-size: 14.5px !important; margin-top: 3px; }
  .call .m.src { display: none !important; }
  .call .inc-id { display: none; }
  .call .tags { flex-wrap: nowrap !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .tag { font-size: 13px !important; padding: 4px 9px !important; white-space: nowrap; }

  /* výjezd = celá obrazovka, jednotky jako velké řádky, dole lepivé Vyslat */
  #dispatch { top: var(--hudH) !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; z-index: 680 !important; overflow-y: auto !important; padding-bottom: 0 !important; transform: none !important; }
  #dispatch.open { display: block !important; }
  #dispatch::before { display: none !important; }
  #dispatch h2 { position: sticky; top: 0; z-index: 4; background: var(--c-panel); padding: 8px 10px 8px 16px !important; min-height: 56px; }
  #dispFull { display: none !important; }
  #closeDisp { min-width: 44px; min-height: 44px; font-size: 18px !important; }
  #dispInfo { max-height: none !important; overflow: visible !important; padding: 12px 16px !important; }
  #dispInfo .di-h { font-size: 19px !important; }
  #dispInfo .di-m, #dispInfo .src-disp, .di-pac, .di-inj { font-size: 14.5px !important; }
  #dispInfo .di-law { display: none; }
  .di-req { font-size: 15px; margin-top: 8px; }
  .flt-req { display: none !important; }
  .disp-tab { min-height: 48px; font-size: 15px !important; }
  .flt-select { min-height: 44px; font-size: 15px !important; }
  .svc-tab { min-height: 48px; font-size: 15px; padding: 8px 12px; }
  .svc-tab small { font-size: 12.5px; }
  #filterBar { padding: 0 10px; }
  #unitList { max-height: none !important; overflow: visible !important; padding: 8px 10px 12px !important; gap: 8px !important; }
  .unit2 { min-height: 64px; padding: 10px 12px !important; border-radius: 14px !important; display: flex; flex-direction: column; justify-content: center; }
  .u2-top { gap: 8px; }
  .u2-ic { font-size: 22px; }
  .u2-nm { font-size: 16.5px !important; }
  .u2-cs, .u2-spz { font-size: 12.5px !important; }
  .u2-bot { font-size: 14px !important; }
  .u2-badge { font-size: 12.5px !important; }
  .u2-target { font-size: 14px !important; }
  .u2-chk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ui-line2); display: grid; place-items: center; font-size: 16px; color: #fff !important; flex: none; order: 9; }
  .unit2.sel .u2-chk { background: var(--ui-blue); border-color: var(--ui-blue); }
  .unit2.dis .u2-chk { visibility: hidden; }
  .mezi-hdr, .asgn-hdr { font-size: 14px !important; }
  #moreRow .morerow { padding: 6px 10px; flex-wrap: wrap; gap: 8px; }
  #moreRow .lnk { min-height: 44px; font-size: 15px; }
  .dispatch-foot { position: sticky !important; bottom: 0; z-index: 5; padding: 10px 12px calc(10px + var(--safe-b)) !important; background: var(--c-panel) !important; border-top: 1px solid var(--ui-line2); }
  .dispatch-foot .btn { min-height: 54px; font-size: 18px !important; }
  .trans-btn { min-height: 52px; font-size: 15px; }

  /* dialogy jako bottom sheety */
  .cdlg { align-items: flex-end !important; padding: 0 !important; z-index: 12000; }
  .cdlg-box { width: 100% !important; max-width: none !important; border-radius: 22px 22px 0 0 !important; padding: 22px 18px calc(18px + var(--safe-b)) !important; max-height: 90dvh; overflow-y: auto; }
  .cdlg-btns button { min-height: 50px; font-size: 16px; }
  #gdpr-modal { align-items: flex-end !important; padding: 0 !important; }
  #gdpr-modal > div { border-radius: 22px 22px 0 0 !important; max-height: 88dvh !important; padding: 22px 18px calc(18px + var(--safe-b)) !important; }
  .overlay { place-items: end stretch !important; }
  .dialog { width: 100% !important; border-radius: 22px 22px 0 0 !important; max-height: 92dvh !important; padding: 22px 18px calc(18px + var(--safe-b)) !important; }
  .coach { padding: 0 !important; }
  .coach-box { width: 100% !important; border-radius: 22px 22px 0 0 !important; padding-bottom: calc(18px + var(--safe-b)) !important; }
  .hud-actions, .hud-actions.menu-list { z-index: 760 !important; }
  .menu-list > button, .menu-list > label, .menu-list > a { min-height: 52px; font-size: 16px; }
  .menu-list .mi-t small { font-size: 13px; }
  #settingsPanel { z-index: 760 !important; }
  .toast { top: auto !important; bottom: calc(var(--navH) + 12px) !important; font-size: 15px; }
  body:has(#dispatch.open) .toast { bottom: calc(86px + var(--safe-b)) !important; }

  /* úvodní obrazovka */
  .setup-tagline { font-size: 16px; }
  .sf-label { font-size: 12.5px; }
  .svc-card .sc-nm { font-size: 15px; }
  .diff-btn { font-size: 15px; min-height: 48px; }
  .setup-hint { font-size: 14.5px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mpeek:not([hidden]), .cdlg.open .cdlg-box, .hud-actions.open { animation: msheet .2s ease-out; }
  @keyframes msheet { from { transform: translateY(24px); opacity: .4; } }
}
@media (max-width: 768px) { #dispatch h2 #closeDisp { margin-left: auto !important; } #dispatch h2 { justify-content: flex-start !important; } }
@media (max-width: 768px) {
  .hud-actions, .hud-actions.menu-list { bottom: var(--navH) !important; max-height: calc(100dvh - var(--hudH) - var(--navH) - 8px) !important; padding-bottom: 10px !important; }
  .topbar .metric, .stats-btn, #pauseBtn { white-space: nowrap; flex: none; }
}
@media (max-width: 380px) {
  .topbar { gap: 5px !important; padding: var(--safe-t) 6px 0 !important; }
  .topbar .metric:has(#mClock), .topbar .metric:has(#mScore) { padding: 5px 8px !important; }
  .topbar .metric .v, .stats-btn .v { font-size: 17px !important; }
  .stats-btn { padding: 5px 20px 5px 8px !important; }
  .stats-btn .sb-arr { right: 6px; }
  #pauseBtn { padding: 8px 10px !important; }
}
@media (max-width: 768px) { body:has(#hudActions.open) .mfab, body:has(#settingsPanel[style*="block"]) .mfab { display: none !important; } }