/* MCx Command Dispatcher – Seiten und Bausteine der Anwendung. Gemeinsame Basis: Ats.UI (ats-ui.css). */

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.kv span { color: var(--muted); }

/* ── Videoquellen und Vorschau ───────────────────────────── */
.source { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.source-active { background: rgba(47, 212, 184, .08); box-shadow: inset 2px 0 0 var(--accent); }
.source-active b { color: var(--accent); }
.source-thumb { width: 64px; height: 40px; flex: none; border-radius: 4px; overflow: hidden; border: 1px solid var(--line-2); }
.source-text { display: flex; flex-direction: column; font-size: .85rem; }

.perspectives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.persp { padding: 0; border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; background: var(--panel-2); cursor: pointer; text-align: left; }
.persp:hover { border-color: var(--accent); }
.persp .feed { aspect-ratio: 16 / 7; border-radius: 0; }
.persp-cap { display: block; padding: 5px 8px; font-size: .75rem; color: var(--text); }

/* Videobild */
.feed { position: relative; overflow: hidden; background: #08161a; width: 100%; height: 100%; }
.feed-big { aspect-ratio: 16 / 9; height: auto; border-radius: 4px; }
.feed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-big .feed-img { object-fit: contain; background: #06161a; }   /* große Ansicht: nichts abschneiden, kein Hochzoomen eines Hochformat-Bildes */
.feed-art, .feed-empty { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #1d4852, #091a1f); display: grid; place-items: center; color: var(--muted); }
.feed-standbild .feed-img, .feed-getrennt .feed-img { filter: grayscale(1) brightness(.6); }
.feed-tl, .feed-tl-s { position: absolute; top: 10px; left: 10px; }
.feed-tl-s { top: 4px; left: 4px; font-size: .55rem; padding: 1px 5px; }
.feed-tr { position: absolute; top: 10px; right: 10px; }
.feed-bl { position: absolute; left: 12px; bottom: 10px; font-size: .8rem; text-shadow: 0 1px 3px #000; }
.feed-br { position: absolute; right: 12px; bottom: 10px; font-size: .75rem; color: #cfe3e6; text-shadow: 0 1px 3px #000; }
.feed-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; padding: 12px; background: rgba(60, 40, 8, .78); display: flex; flex-direction: column; gap: 3px; }
.feed-banner b { letter-spacing: .06em; }
.feed-banner span { font-size: .8rem; color: #ffd98a; }

.data-card { position: absolute; right: 12px; top: 44px; min-width: 190px; padding: 10px 12px; background: rgba(8, 28, 33, .82); border: 1px solid var(--line-2); border-radius: 4px; font-size: .78rem; }
.data-title { color: #cfe3e6; margin-bottom: 4px; }
.data-row b { font-size: .88rem; }
.data-note { margin-top: 6px; font-size: .62rem; color: var(--muted); }

/* ── Lage / Plan ─────────────────────────────────────────── */
.plan { width: 100%; height: auto; display: block; }
.plan-mini { max-height: 200px; }
.plan-road { fill: #112a30; }
.plan-hall { fill: #0e2329; stroke: var(--line-2); stroke-width: 1.5; }
.plan-hall-line { stroke: var(--line-2); stroke-width: 1; }
.plan-fov { fill: rgba(47, 212, 184, .22); stroke: var(--accent); stroke-width: 1; display: none; }
.plan-halo { fill: rgba(47, 212, 184, .16); display: none; }
.plan-dot { fill: var(--accent); display: none; }
.plan-dot-warn { fill: var(--amber); }
.plan-node { fill: none; stroke: var(--accent); stroke-width: 2; display: none; }
.plan-tag { fill: #fff; font-size: 13px; font-weight: 700; display: none; }
.plan-label { fill: #8fb3b8; font-size: 12px; display: none; }
.plan-large .plan-label { display: block; }
/* Ebenen: im Mini-Plan alles sichtbar */
.plan-mini .plan-mini .plan-fov, .plan-mini .plan-halo, .plan-mini .plan-dot, .plan-mini .plan-node, .plan-mini .plan-tag { display: initial; }
.layer-blickfeld .plan-fov { display: initial; }
.layer-kraefte .plan-halo, .layer-kraefte .plan-dot, .layer-kraefte .plan-node, .layer-kraefte .plan-tag { display: initial; }
.layer-blickfeld .plan-label { display: block; }

.map-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tools-spacer { flex: 1; }
.map-body { padding: 0; }
.map-stage { padding: 6px; background: #081a1f; }
.map-panel .note { padding: 0 14px 12px; }
.plan-large { height: 300px; width: 100%; }

.livemap-wrap { position: relative; height: clamp(420px, calc(100vh - 560px), 1000px); }
.livemap { height: 100%; width: 100%; background: #081a1f; }
.livemap-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(.95) saturate(.6); }
.livemap-empty { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 500; padding: 8px 12px; border-radius: 4px; background: rgba(8, 28, 33, .88); border: 1px solid var(--line-2); color: var(--muted); font-size: .78rem; pointer-events: none; }
.livemap-offline { padding: 24px; color: var(--muted); }
.livemap-tip { background: rgba(8, 28, 33, .9); color: #fff; border: 1px solid var(--line-2); font-weight: 600; }

.troop { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 9px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.troop-active { background: rgba(47, 212, 184, .08); box-shadow: inset 2px 0 0 var(--accent); }
.troop-active b { color: var(--accent); }
.troop-sep { padding: 8px 14px; font-size: .7rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; background: #071418; }
.assigned { width: 100%; }
.alert-card { margin-bottom: 12px; padding: 12px 14px; border-radius: 6px; background: #231b0b; border: 1px solid #4a3a16; color: #f3cf8e; font-size: .8rem; }
.alert-card-warn { border-left: 3px solid var(--amber); }

/* ── Sprache ─────────────────────────────────────────────── */
.group { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.group-active { background: rgba(47, 212, 184, .08); box-shadow: inset 2px 0 0 var(--accent); }
.group-active b { color: var(--accent); }
.voice-main-body { padding: 14px 18px; }
.speaker { text-align: center; padding: 16px 0 10px; }
.speaker-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: var(--accent); background: #0f3a40; border: 2px solid var(--accent-dim); }
.speaker-on { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(47, 212, 184, .18); }
.speaker-label { font-size: .66rem; letter-spacing: .14em; color: var(--muted); }
.speaker-name { font-size: 1.45rem; font-weight: 700; margin: 4px 0; }
.speaker-floor { font-size: .78rem; color: var(--muted); }
.wave { display: flex; gap: 4px; justify-content: center; align-items: center; height: 34px; margin-top: 10px; }
.wave span { width: 4px; height: 8px; border-radius: 2px; background: var(--accent); opacity: .55; }
.wave-on span { animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); opacity: 1; }
@keyframes wave { 0%, 100% { height: 6px; } 50% { height: 30px; } }
.wave-real { height: 60px; }
.wave-real span { width: 6px; transition: height .09s linear; opacity: 1; }
.wave-rx span { background: var(--accent); }
.wave-mic span { background: var(--amber); opacity: .8; }
.wave-meta { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font-size: .7rem; color: var(--muted); }

.ptt-btn { width: 100%; padding: 14px; border-radius: 6px; border: 1px solid var(--accent-dim); background: rgba(47, 212, 184, .08); color: var(--accent); font-size: .95rem; cursor: pointer; user-select: none; }
.ptt-wide { padding: 18px; font-size: 1.05rem; margin-top: 8px; }
.ptt-requested { border-color: var(--amber); color: var(--amber); background: rgba(240, 180, 76, .1); }
.ptt-granted { background: var(--accent); color: #02231e; border-color: var(--accent); font-weight: 700; }
.ptt-denied { border-color: var(--red); color: #ffb4b6; background: rgba(229, 72, 77, .12); }
.voice-group { font-weight: 700; }
.voice-info { font-size: .78rem; color: var(--muted); margin: 3px 0 10px; }
.voice-state { font-size: .75rem; color: var(--muted); margin-top: 6px; }

.members { margin-top: 14px; border-top: 1px solid var(--line); }
.member { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--line); }

/* ── Kräfte ──────────────────────────────────────────────── */
.force { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.force-active { background: rgba(47, 212, 184, .08); box-shadow: inset 2px 0 0 var(--accent); }
.force-id { flex: none; width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--accent); background: #0f3a40; }
.force-text { display: flex; flex-direction: column; }
.force-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.vitals { display: flex; gap: 14px; margin: 10px 0; }
.vitals > div { flex: 1; display: flex; flex-direction: column; }
.vitals small { font-size: .7rem; }
.vitals b { font-size: 1.45rem; }
.vitals i { font-style: normal; font-size: .7rem; color: var(--muted); }
.vitals-big b { font-size: 2rem; }
.squad-state { display: flex; justify-content: space-between; margin-bottom: 4px; }
.chain { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── MCVideo / Netz / Tabellen ───────────────────────────── */
.path { list-style: none; margin: 0 0 8px; padding: 0; }
.path li { padding: 8px 12px; border-left: 2px solid var(--accent-dim); font-size: .85rem; }
.share-title { font-weight: 700; margin-bottom: 8px; }
.share-steps { display: flex; gap: 8px; margin-bottom: 10px; }
.share-step { flex: 1; text-align: center; padding: 6px; border-radius: 4px; background: var(--panel-2); color: var(--muted); font-size: .75rem; }
.share-on { background: var(--accent); color: #02231e; font-weight: 700; }

.link { stroke: var(--accent); stroke-width: 2.5; }
.link-warn { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 8 6; }
.link-bad { stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 3 7; }
.snr { fill: #cfe3e6; font-size: 12px; }
.snr-warn { fill: var(--amber); }
.snr-bad { fill: var(--red); }
.node rect { fill: #08262d; stroke: var(--accent); stroke-width: 1.5; }
.node text { fill: #fff; font-size: 13px; text-anchor: middle; }
.node-bad rect { stroke: var(--red); }
.node-label { fill: #cfe3e6; font-size: 12px; text-anchor: middle; }

.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th { text-align: left; padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: .75rem; }
.table td { padding: 10px 14px; border-top: 1px solid var(--line); }

.event-row { display: flex; gap: 14px; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: .8rem; }
.event-row:last-child { border-bottom: 0; }
.event-time { color: var(--muted); min-width: 56px; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 56px; margin-top: 6px; }

@media (max-width: 1250px) {
    .grid-3 { grid-template-columns: 220px minmax(0, 1fr); }
    .grid-3 .col-right { grid-column: 1 / -1; }
    .grid-2 { grid-template-columns: 1fr; }
}

/* Statusmeldungen der Trupps */
.st { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 10px; font-size: .72rem; font-weight: 600; border: 1px solid transparent; }
.st-ok { color: var(--accent); background: rgba(47, 212, 184, .12); border-color: var(--accent-dim); }
.st-warn { color: var(--amber); background: rgba(240, 180, 76, .12); border-color: rgba(240, 180, 76, .5); }
.st-done { color: #9cc2ff; background: rgba(110, 168, 254, .12); border-color: rgba(110, 168, 254, .5); }
.st-help { color: #ffb4b6; background: rgba(229, 72, 77, .18); border-color: var(--red); animation: st-pulse 1.4s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* PTT-Gerät (WebHID): Diagnose und Lernmodus */
.hid-panel { position: fixed; top: 76px; right: 16px; width: 440px; max-width: calc(100vw - 32px); z-index: 2000; padding: 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--accent-dim); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.hid-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hid-dev { display: flex; flex-direction: column; margin-bottom: 6px; }
.hid-dev small, .hid-cols { color: var(--muted); font-size: .74rem; }
.hid-cols { margin-bottom: 8px; }
.hid-map { font-size: .8rem; margin: 6px 0; }
.hid-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.hid-state { margin-left: auto; font-size: .78rem; padding: 3px 10px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); }
.hid-down { color: #02231e; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.hid-learn { margin: 8px 0; padding: 8px 10px; border-radius: 5px; background: rgba(240, 180, 76, .12); border: 1px solid rgba(240, 180, 76, .5); color: var(--amber); font-size: .85rem; }
.hid-error { margin: 8px 0; color: #ffb4b6; font-size: .8rem; }
.hid-log-title { margin-top: 10px; font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.hid-log { margin-top: 4px; max-height: 220px; overflow: auto; font-family: Consolas, monospace; font-size: .72rem; line-height: 1.5; background: #061a1f; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }

/* Audio-Geräte (Browser) */
.audio-panel { right: 480px; width: 360px; }
.audio-label { display: block; margin: 10px 0 4px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Gruppen-Abo und Mitgliederliste */
.group-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.group-row .group { flex: 1; border-bottom: 0; }
.group-sub { width: 58px; flex: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .72rem; cursor: pointer; }
.group-sub:hover { color: var(--accent); }
.group-sub-on { color: var(--accent); background: rgba(47, 212, 184, .10); font-weight: 600; }
.members-head { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.member small { color: var(--muted); font-size: .7rem; margin-left: 6px; }
.member-off span { color: var(--muted); }
.member-speaking { background: rgba(47, 212, 184, .12); border-radius: 4px; }
.text-muted { color: var(--muted); }

/* Seiteninhalte nach GUI-Konzept 0.5 */
.ptt-big { padding: 22px; font-size: 1.1rem; margin-top: 10px; }
.ctx-name { font-weight: 700; font-size: 1.05rem; }
.select-card { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 10px 12px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: .85rem; }
.select-card:hover { border-color: var(--accent); }
.select-card-on { border-color: var(--accent); color: var(--accent); }
.force-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
.share-heading { font-weight: 700; margin-bottom: 6px; }

/* Dashboard-Widgets: Bild füllt die Zelle des Rasters */
.dg-body .feed-big { aspect-ratio: auto; height: 100%; border-radius: 0; }
.dg-body .stage-body { height: 100%; }
.force-static { cursor: default; }

/* Lageplan: gewählter Trupp im Vordergrund */
.plan-halo-sel { fill: rgba(47, 212, 184, .30); stroke: #fff; stroke-width: 2; animation: plan-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.plan-dot-sel { stroke: #fff; stroke-width: 2.5; }
.plan-tag-sel { font-size: 16px; fill: #fff; stroke: #06161a; stroke-width: 3px; paint-order: stroke; }
@keyframes plan-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }

/* Dashboard-Widget "Karte": füllt die Kachel, Werkzeugleiste oben */
.karte-body { display: flex; flex-direction: column; }
.karte-widget { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.karte-tools { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.karte-widget .livemap-wrap { flex: 1; height: auto; min-height: 160px; }

/* Sprechgruppen-Widget: Sprechtaste je Zeile und Mitgliederliste unter abonnierten Gruppen */
.group-ptt { width: 58px; flex: none; border: 0; border-left: 1px solid var(--line); background: rgba(47, 212, 184, .08); color: var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; user-select: none; }
.group-ptt:hover { background: rgba(47, 212, 184, .18); }
.group-ptt-requested { background: rgba(240, 180, 76, .25); color: #f0b44c; }
.group-ptt-granted { background: var(--accent); color: #06161a; }
.group-ptt-denied { background: rgba(229, 72, 77, .25); color: #e5484d; }
.voice-speaker { margin-top: 10px; padding: 10px; border-radius: 6px; background: rgba(47, 212, 184, .16); border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.voice-speaker b { font-size: 1.35rem; color: var(--text, #e6f4f2); }
.voice-speaker small { font-size: .7rem; letter-spacing: .08em; }
.voice-speaker-idle { background: transparent; border-color: var(--line); color: var(--muted); }
.speaker-group { font-size: .9rem; color: var(--muted); }
.group-speaking { color: var(--accent); font-weight: 600; }

/* Einzelruf: Banner und Schaltflächen im Mitglieder-Widget */
.call-banner { align-items: center; }
.call-actions { display: flex; gap: 8px; align-items: center; }
.member-actions { display: flex; gap: 6px; align-items: center; }
.dial { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }

/* Nachrichten-Widget */
.msg-send { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.msg-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; overflow-y: auto; }
.msg { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.msg small { opacity: .7; display: block; }
.msg-out { align-self: flex-end; }

/* ── Sensordaten in Kategorien (Tabs), Messgeräte-Anzeigen und Verlaufsdiagramme ───────────────────── */
.stabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.stab { background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 6px; padding: 6px 12px; font-size: .82rem; cursor: pointer; }
.stab:hover { border-color: var(--line-2); }
.stab.active { color: var(--accent); border-color: var(--accent); background: rgba(47, 212, 184, .07); }
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 14px 14px 4px; }
.gauge { text-align: center; }
.gauge h4 { margin: 0 0 2px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.gauge svg { width: 100%; max-width: 190px; }
.gauge-val { fill: var(--text); font-size: 38px; font-weight: 700; }
.gauge-val-arc { font-size: 32px; }
.gauge-unit { fill: var(--muted); font-size: 15px; }
.gauge-min { fill: var(--muted); font-size: 11px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; padding: 10px 14px 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.chart-head b { color: var(--text); font-size: .9rem; }
.chart svg { width: 100%; height: auto; }
.chart line.chart-gridline { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 15px; }
.chart-thr { stroke-width: 1.2; stroke-dasharray: 5 4; }
.chart-warn { stroke: var(--amber); }
.chart-alarm { stroke: var(--red); }
.kv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 28px; padding: 6px 14px 10px; }