` cleanly restores the prior look. */
.plane .dot-anchor{
position:absolute;left:-1px;top:-1px;width:2px;height:2px;
background:var(--cy);border-radius:50%;
box-shadow:0 0 2px var(--cy-glow);
pointer-events:none;z-index:1;
}
.plane.is-sel .dot-anchor{
width:5px;height:5px;left:-2.5px;top:-2.5px;background:#fff;
box-shadow:0 0 0 1px var(--cy), 0 0 8px var(--cy-glow);
}
/* Selected plane always keeps its label, even if stacked. */
.plane.is-stacked.is-sel .tag{display:inline-flex;opacity:1}
.plane.is-stacked.is-sel .leader{display:block}
/* ── TAR1090 STYLE OVERRIDES for elements we keep ── */
/* Layer switcher — dočasne zviditeľnené pre testovanie mapových podkladov.
Pozícia: pod topbarom vpravo. Farby zladené s dark theme. */
.ol-layerswitcher{position:absolute !important;top:64px !important;right:12px !important;z-index:1100 !important}
.ol-layerswitcher button{background:var(--bg-2) !important;border:1px solid var(--border) !important;color:var(--text-0) !important}
.ol-layerswitcher .panel{background:var(--bg-1) !important;border:1px solid var(--border) !important;color:var(--text-1) !important;font-family:var(--cond) !important;font-size:12px !important;max-height:70vh !important;overflow-y:auto !important}
.ol-layerswitcher .panel ul{background:transparent !important}
.ol-layerswitcher .panel li.group>label{color:var(--text-0) !important;font-weight:600 !important;letter-spacing:.08em !important;text-transform:uppercase !important;font-size:10.5px !important}
.ol-layerswitcher .panel li label{color:var(--text-1) !important}
.ol-layerswitcher .panel li input[type="radio"],.ol-layerswitcher .panel li input[type="checkbox"]{accent-color:var(--cy,#3bc)}
/* Map attribution — solid background + explicit position so the z-index
actually kicks in and the element sits above the grain overlay. */
.ol-attribution{
position:absolute !important;
bottom:2px !important;right:2px !important;
z-index:50 !important;
background:#0a1628 !important;
color:var(--text-2) !important;
font-family:var(--mono) !important;
font-size:8px !important;
line-height:1.3 !important;
letter-spacing:.01em !important;
border:1px solid var(--border) !important;
padding:2px 5px !important;
}
.ol-attribution ul{color:var(--text-2) !important;font-size:8px !important;line-height:1.3 !important}
.ol-attribution a{color:var(--text-1) !important;font-size:8px !important}
.ol-attribution button{background:var(--bg-3) !important;color:var(--text-1) !important;font-size:9px !important;padding:0 4px !important;border:1px solid var(--border) !important}
.ol-zoom{display:none !important}
/* Responsive: below 1280px collapse right panel */
@media (max-width: 1279px){
.app{grid-template-columns:300px 1fr 0}
.right{display:none}
}
@media (max-width: 900px){
.app{grid-template-columns:260px 1fr 0}
}
/* ─── Measure tool ─────────────────────────────────────────────────── */
#gafr-mctx{
position:fixed;z-index:99999;display:none;min-width:240px;
background:rgba(8,18,32,.96);
border:1px solid rgba(250,204,21,.32);
border-radius:7px;padding:5px;
box-shadow:0 12px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35);
backdrop-filter:blur(10px) saturate(1.1);
font-family:'IBM Plex Sans',sans-serif;
}
#gafr-mctx.show{display:block;animation:fvMctxIn .12s ease-out}
@keyframes fvMctxIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#gafr-mctx button{
display:flex;align-items:center;gap:9px;width:100%;
background:none;border:0;color:#cde7ff;
padding:9px 11px;border-radius:5px;
font:500 12px/1 'IBM Plex Sans',sans-serif;letter-spacing:.01em;
cursor:pointer;text-align:left;
}
#gafr-mctx button svg{flex:0 0 14px;color:rgba(250,204,21,.8);transition:color .15s}
#gafr-mctx button:hover{background:rgba(250,204,21,.1);color:#fff}
#gafr-mctx button:hover svg{color:#fde047}
#gafr-mctx button + button{margin-top:1px}
/* ─── SEPTOOL right-click menu (white accent vs measure's yellow). ─── */
#gafr-septool-ctx{
position:fixed;z-index:99999;display:none;min-width:280px;max-width:420px;
background:rgba(8,18,32,.96);
border:1px solid rgba(255,255,255,.32);
border-radius:7px;padding:5px;
box-shadow:0 12px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35);
backdrop-filter:blur(10px) saturate(1.1);
font-family:'IBM Plex Sans',sans-serif;
}
#gafr-septool-ctx.show{display:block;animation:fvMctxIn .12s ease-out}
#gafr-septool-ctx button{
display:block;width:100%;
background:none;border:0;color:#cde7ff;
padding:9px 11px;border-radius:5px;
font:500 12px/1.3 'IBM Plex Sans',sans-serif;letter-spacing:.01em;
cursor:pointer;text-align:left;
}
#gafr-septool-ctx button:hover{background:rgba(255,255,255,.1);color:#fff}
#gafr-septool-ctx button + button{margin-top:1px}
#gafr-septool-ctx .ctx-sep{
height:1px;margin:6px 8px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
#gafr-septool-ctx .ctx-sep + button[data-act^="measure-"]{color:#fde047}
#gafr-septool-ctx button[data-act^="measure-"]:hover{
background:rgba(250,204,21,.12);color:#fff
}
#gafr-measure-tip{
position:fixed;z-index:9998;display:none;pointer-events:none;
background:rgba(8,18,32,.94);
border:1px solid rgba(250,204,21,.5);
border-radius:5px;padding:5px 9px;
font:500 11px/1.35 'IBM Plex Mono',ui-monospace,monospace;
color:#fde047;
box-shadow:0 4px 14px rgba(0,0,0,.5);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
#gafr-measure-tip.show{display:block}
#gafr-measure-tip .d{color:#fde047;font-weight:600}
#gafr-measure-tip .b{color:#cde7ff;margin-top:2px;font-weight:500}
body.gafr-measuring,
body.gafr-measuring .map,
body.gafr-measuring #map_canvas,
body.gafr-measuring .ol-viewport,
body.gafr-measuring canvas{cursor:crosshair !important}
body.gafr-septool,
body.gafr-septool .map,
body.gafr-septool #map_canvas,
body.gafr-septool .ol-viewport,
body.gafr-septool canvas{cursor:crosshair !important}
#gafr-measure-tip .snap{
margin-top:2px;color:#39de39;font-weight:600;
border-top:1px dashed rgba(57,222,57,.4);padding-top:2px;
}
/* ─── Time Replay (FR24-style traffic playback) ────────────────────── */
.gafr-replay-toggle.is-active,
body.gafr-replay-mode .gafr-replay-toggle{
background:rgba(245,158,11,.16);
border-color:rgba(245,158,11,.55);
color:#fde047;
}
/* In replay mode, dim only the top-search (it talks to /playback for live
* trace fetches; not relevant for archive playback). The ACFT LIST card is
* deliberately KEPT interactive — it gets re-bound to replay state in
* gafr-chrome.js#renderInViewList so it shows replay aircraft and clicks
* select via window.gafr.replay.select(). */
body.gafr-replay-mode .top-search{opacity:.45;pointer-events:none}
body.gafr-replay-mode .map-modes{opacity:.6}
/* gafr-labels overlay paints DOM badges on top of the
* map for live traffic. In replay mode we hide the whole label layer so the
* basemap reads clean before a window is loaded, and the only labels visible
* during playback come from the replay layer itself. */
body.gafr-replay-mode #gafr-label-layer{display:none}
/* Right-rail card visibility per mode:
* LIVE → display-card + priestory-card + inview-card + airspaces-trigger
* REPLAY → playback-settings-card + priestory-card + inview-card
* AUP-related context (display-card has WX + AUP toggle, airspaces-trigger
* shows current rezervácie) is irrelevant for archive playback — user wants
* playback purely tied to the replay window, no live AUP overlap. */
.playback-settings-card{display:none}
body.gafr-replay-mode .playback-settings-card{display:flex}
body.gafr-replay-mode .display-card{display:none}
body.gafr-replay-mode .airspaces-trigger{display:none}
/* Priestory card — same visual rhythm as Zobrazenie but its own card head
* (replaced the previous inline "PRIESTORY" header dashed strip). The
* .ovl-priestory inside no longer needs its own margin/border since the
* card-head separates it visually. */
.priestory-card .ovl-priestory{margin-top:0}
.priestory-card .ovl-priestory .priestory-head{display:none}
/* Playback Nastavenia card — uses the same .label-toggles layout as the
* settings popup, so this just re-uses styles defined earlier in the file
* (.lt-row, .lt-row .sw, .lt-row .nm). */
.playback-settings-card{flex-direction:column}
.playback-settings-card .label-toggles{padding:6px 16px 14px}
/* ─── Time Replay controller — clean 4-row layout ─────────────────── */
/* Layout summary:
* Row 1: header (tag + window summary + edit/close icons)
* Row 2: picker (date/time/duration/load — fold-able)
* Row 3: status (single-line status text, hidden when empty)
* Row 4: scrub (play + slider + time readout)
* Row 5: controls (speed selector + action buttons)
*
* Each row is its own flex line so nothing overlaps regardless of width.
* Width is content-driven inside a min/max range so the controller never
* forces a horizontal scrollbar on small screens.
*/
#gafr-replay-controller{
position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
z-index:8500;
width:min(720px, calc(100vw - 32px));
background:linear-gradient(180deg, rgba(10,22,40,.97), rgba(7,17,30,.98));
border:1px solid rgba(245,158,11,.42);
border-radius:12px;
box-shadow:0 18px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.45);
backdrop-filter:blur(14px) saturate(1.15);
color:#dceaf6;
font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
padding:10px 14px 12px;
display:flex;flex-direction:column;gap:9px;
pointer-events:auto;
}
#gafr-replay-controller[hidden]{display:none}
/* ── Row 1: header ───────────────────────────────────────────────── */
#gafr-replay-controller .grc-header{
display:flex;align-items:center;gap:10px;
padding-bottom:8px;
border-bottom:1px solid rgba(85,123,165,.22);
}
#gafr-replay-controller .grc-title{
flex:1 1 auto;min-width:0;
display:flex;align-items:center;gap:9px;
overflow:hidden;
}
#gafr-replay-controller .grc-clockico{
flex:0 0 auto;color:#fde047;
}
#gafr-replay-controller .grc-title-tag{
flex:0 0 auto;
font:700 10.5px/1 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
letter-spacing:.18em;text-transform:uppercase;
color:#fde047;
padding:4px 9px;border-radius:4px;
background:rgba(245,158,11,.14);
border:1px solid rgba(245,158,11,.4);
}
#gafr-replay-controller .grc-summary{
flex:1 1 auto;min-width:0;
font:600 12.5px/1.2 'IBM Plex Sans',sans-serif;
color:rgba(220,234,246,.85);
letter-spacing:.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#gafr-replay-controller .grc-header-actions{
display:inline-flex;gap:4px;flex:0 0 auto;
}
#gafr-replay-controller .grc-icon-btn{
background:rgba(7,16,28,.65);
border:1px solid rgba(85,123,165,.35);
color:rgba(220,234,246,.75);
width:30px;height:30px;
border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}
#gafr-replay-controller .grc-icon-btn:hover{
background:rgba(245,158,11,.2);
color:#fde047;
border-color:rgba(245,158,11,.55);
}
#gafr-replay-controller .grc-close-btn:hover{
background:rgba(239,68,68,.22);
color:#fca5a5;
border-color:rgba(239,68,68,.5);
}
/* ── Row 2: picker ───────────────────────────────────────────────── */
#gafr-replay-controller .grc-picker{
display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
#gafr-replay-controller .grc-picker[hidden]{display:none}
#gafr-replay-controller .grc-fld{
display:flex;flex-direction:column;gap:3px;
flex:0 0 auto;
}
#gafr-replay-controller .grc-fld>span{
font:600 9.5px/1 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(220,234,246,.55);
}
#gafr-replay-controller .grc-fld input,
#gafr-replay-controller .grc-fld select{
background:rgba(7,16,28,.8);
color:#e7f1fb;
border:1px solid rgba(85,123,165,.4);
border-radius:6px;
padding:7px 10px;
font:600 13px/1 'IBM Plex Mono',ui-monospace,monospace;
font-variant-numeric:tabular-nums;
min-width:0;
height:34px;
box-sizing:border-box;
}
#gafr-replay-controller .grc-fld input:focus,
#gafr-replay-controller .grc-fld select:focus{
outline:none;border-color:rgba(245,158,11,.7);
box-shadow:0 0 0 2px rgba(245,158,11,.18);
}
#gafr-replay-controller .grc-btn{
background:rgba(7,16,28,.85);
color:#e7f1fb;
border:1px solid rgba(85,123,165,.45);
border-radius:6px;
padding:0 16px;
height:34px;
font:700 12.5px/1 'IBM Plex Sans',sans-serif;
letter-spacing:.04em;
cursor:pointer;
transition:background .15s, border-color .15s, color .15s;
flex:0 0 auto;
}
#gafr-replay-controller .grc-btn:hover{
background:rgba(245,158,11,.18);
color:#fde047;
border-color:rgba(245,158,11,.55);
}
#gafr-replay-controller .grc-btn[disabled]{opacity:.5;cursor:not-allowed}
#gafr-replay-controller .grc-btn.grc-load{
background:linear-gradient(180deg, rgba(245,158,11,.36), rgba(217,119,6,.32));
border-color:rgba(245,158,11,.7);
color:#fde047;
margin-left:auto;
}
/* ── Row 3: status ───────────────────────────────────────────────── */
#gafr-replay-controller .grc-status{
font:500 12px/1.4 'IBM Plex Sans',sans-serif;
color:rgba(220,234,246,.78);
padding:7px 10px;
background:rgba(7,16,28,.55);
border-radius:6px;
border:1px dashed rgba(85,123,165,.32);
}
#gafr-replay-controller .grc-status.is-empty{display:none}
/* ── Row 4: scrub ────────────────────────────────────────────────── */
#gafr-replay-controller .grc-scrub{
display:flex;align-items:center;gap:13px;
padding-top:5px;
}
#gafr-replay-controller .grc-scrub[hidden]{display:none}
#gafr-replay-controller .grc-play{
background:rgba(245,158,11,.2);
border:1px solid rgba(245,158,11,.55);
color:#fde047;
width:42px;height:42px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
flex:0 0 auto;
transition:background .15s, transform .1s;
}
#gafr-replay-controller .grc-play:hover{background:rgba(245,158,11,.3)}
#gafr-replay-controller .grc-play:active{transform:scale(.94)}
#gafr-replay-controller .grc-play.is-playing{
background:rgba(34,197,94,.22);
border-color:rgba(34,197,94,.55);
color:#86efac;
}
#gafr-replay-controller .grc-track-wrap{
flex:1 1 auto;min-width:140px;
display:flex;flex-direction:column;gap:3px;
}
#gafr-replay-controller #grc-scrub{
width:100%;height:8px;margin:0;
-webkit-appearance:none;appearance:none;
background:linear-gradient(90deg,
rgba(245,158,11,.6) var(--p,0%),
rgba(85,123,165,.3) var(--p,0%));
border-radius:4px;
outline:none;cursor:pointer;
}
#gafr-replay-controller #grc-scrub::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;border-radius:50%;
background:#fde047;
border:2px solid #d97706;
cursor:grab;
box-shadow:0 2px 6px rgba(0,0,0,.5);
}
#gafr-replay-controller #grc-scrub:active::-webkit-slider-thumb{cursor:grabbing}
#gafr-replay-controller #grc-scrub::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;
background:#fde047;border:2px solid #d97706;cursor:grab;
}
#gafr-replay-controller .grc-track-axis{
display:flex;justify-content:space-between;
font:600 9.5px/1 'IBM Plex Mono',ui-monospace,monospace;
letter-spacing:.04em;
color:rgba(220,234,246,.45);
font-variant-numeric:tabular-nums;
}
#gafr-replay-controller .grc-readout{
flex:0 0 auto;
display:flex;flex-direction:column;align-items:flex-end;
min-width:90px;
padding:5px 9px;border-radius:6px;
background:rgba(7,16,28,.7);
border:1px solid rgba(85,123,165,.32);
}
#gafr-replay-controller .grc-readout strong{
font:700 16px/1 'IBM Plex Mono',ui-monospace,monospace;
letter-spacing:.04em;color:#fde047;
font-variant-numeric:tabular-nums;
}
#gafr-replay-controller .grc-readout span{
font:600 10px/1.2 'IBM Plex Mono',ui-monospace,monospace;
letter-spacing:.05em;color:rgba(220,234,246,.55);
font-variant-numeric:tabular-nums;
margin-top:2px;
}
/* ── Row 5: controls (speed + actions) ───────────────────────────── */
#gafr-replay-controller .grc-controls{
display:flex;align-items:center;gap:12px;
padding-top:7px;border-top:1px solid rgba(85,123,165,.18);
flex-wrap:wrap;
}
#gafr-replay-controller .grc-controls[hidden]{display:none}
#gafr-replay-controller .grc-spd-group{
display:inline-flex;align-items:center;gap:7px;
}
#gafr-replay-controller .grc-ctl-label{
font:600 9.5px/1 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
letter-spacing:.14em;text-transform:uppercase;
color:rgba(220,234,246,.5);
}
#gafr-replay-controller .grc-spd{
display:inline-flex;
border-radius:6px;overflow:hidden;
border:1px solid rgba(85,123,165,.32);
}
#gafr-replay-controller .grc-spd-btn{
background:rgba(7,16,28,.75);
border:0;
border-right:1px solid rgba(85,123,165,.32);
color:rgba(220,234,246,.65);
padding:6px 11px;
font:700 11.5px/1 'IBM Plex Mono',ui-monospace,monospace;
font-variant-numeric:tabular-nums;
cursor:pointer;
transition:background .12s, color .12s;
}
#gafr-replay-controller .grc-spd-btn:last-child{border-right:0}
#gafr-replay-controller .grc-spd-btn:hover{
color:#fde047;background:rgba(245,158,11,.12);
}
#gafr-replay-controller .grc-spd-btn.is-active{
background:rgba(245,158,11,.28);
color:#fde047;
}
#gafr-replay-controller .grc-actions{
display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap;
}
#gafr-replay-controller .grc-act-btn{
display:inline-flex;align-items:center;gap:7px;
background:rgba(7,16,28,.75);
border:1px solid rgba(85,123,165,.4);
color:rgba(220,234,246,.78);
border-radius:6px;
padding:6px 12px;
font:700 11.5px/1 'IBM Plex Sans',sans-serif;
letter-spacing:.03em;
cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}
#gafr-replay-controller .grc-act-btn:hover:not([disabled]){
background:rgba(245,158,11,.18);
border-color:rgba(245,158,11,.55);
color:#fde047;
}
#gafr-replay-controller .grc-act-btn[disabled]{
opacity:.35;cursor:not-allowed;
}
#gafr-replay-controller .grc-act-btn.is-active{
background:rgba(245,158,11,.3);
border-color:rgba(245,158,11,.7);
color:#fde047;
}
#gafr-replay-controller .grc-act-btn .grc-eyestrike{display:none}
#gafr-replay-controller .grc-act-btn.is-active .grc-eyestrike{display:inline}
/* While the controller is in the empty (pre-load) state we hide the
* scrub + controls rows entirely — picker only. */
#gafr-replay-controller.is-empty .grc-scrub,
#gafr-replay-controller.is-empty .grc-controls{display:none}
/* Mobile / narrow widths — stack actions row, lighter padding. */
@media (max-width: 720px){
#gafr-replay-controller{
width:calc(100vw - 16px);bottom:14px;padding:8px 10px 10px;gap:7px;
}
#gafr-replay-controller .grc-readout strong{font-size:14px}
#gafr-replay-controller .grc-act-btn span{display:none}
#gafr-replay-controller .grc-act-btn{padding:6px 9px}
#gafr-replay-controller .grc-title-tag{display:none}
}
/* ─── Detail sidebar for selected replay aircraft ───────────────────────
* Mirrors the radar mode pattern: full-height card pinned to the LEFT edge
* of the viewport (radar uses tar1090's #selected_infoblock at left:0).
* Width 320 px keeps room for the vertical profile + meta grid; max-height
* leaves the bottom controller (`#gafr-replay-controller`) untouched. */
#gafr-replay-detail{
position:fixed;
left:0;
top:64px; /* clear the topbar */
bottom:160px; /* clear the bottom controller */
z-index:8400;
width:320px;
max-width:calc(100vw - 36px);
background:linear-gradient(180deg, rgba(10,22,40,.97), rgba(7,17,30,.98));
border:1px solid rgba(245,158,11,.42);
border-left:0;
border-radius:0 10px 10px 0;
box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
backdrop-filter:blur(12px) saturate(1.1);
color:#dceaf6;
font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
padding:12px 13px 13px;
display:flex;flex-direction:column;gap:10px;
pointer-events:auto;
overflow-y:auto;
}
#gafr-replay-detail[hidden]{display:none}
/* Action bar inside the detail sidebar — replaces the duplicate buttons that
* used to live in the bottom controller. Toggle "skryť ostatné" + "posledná
* pozícia" only make sense while an aircraft is selected, so they belong
* with the detail; closing the sidebar via × auto-resets hide-others. */
#gafr-replay-detail .grd-actions{
display:flex;flex-direction:column;gap:6px;
}
#gafr-replay-detail .grd-act-btn{
display:flex;align-items:center;gap:8px;
padding:8px 10px;
background:rgba(7,16,28,.55);
border:1px solid rgba(85,123,165,.32);
border-radius:6px;
color:#dceaf6;
font:600 11.5px/1 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.06em;text-transform:uppercase;
cursor:pointer;
transition:background .14s ease, border-color .14s ease, color .14s ease;
}
#gafr-replay-detail .grd-act-btn:hover{
background:rgba(245,158,11,.14);
border-color:rgba(245,158,11,.45);
color:#fde047;
}
#gafr-replay-detail .grd-act-btn.is-active{
background:rgba(245,158,11,.22);
border-color:rgba(245,158,11,.55);
color:#fde047;
}
#gafr-replay-detail .grd-act-btn svg{flex:0 0 auto}
#gafr-replay-detail .grd-act-btn .grd-eyestrike{display:none}
#gafr-replay-detail .grd-act-btn.is-active .grd-eyestrike{display:inline}
#gafr-replay-detail .grd-head{
display:flex;align-items:center;gap:11px;
}
#gafr-replay-detail .grd-icon{
width:38px;height:38px;flex:0 0 38px;
background:rgba(7,16,28,.55);border:1px solid rgba(85,123,165,.32);
border-radius:7px;display:flex;align-items:center;justify-content:center;
}
#gafr-replay-detail .grd-icon svg{display:block}
#gafr-replay-detail .grd-title{
flex:1 1 auto;min-width:0;
display:flex;flex-direction:column;gap:1px;
overflow:hidden;
}
#gafr-replay-detail .grd-cs{
font:700 17px/1.1 'IBM Plex Mono',ui-monospace,monospace;
color:#fde047;letter-spacing:.04em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#gafr-replay-detail .grd-reg{
font:500 11.5px/1.2 'IBM Plex Sans',sans-serif;
color:rgba(220,234,246,.65);letter-spacing:.06em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#gafr-replay-detail .grd-close{
background:transparent;border:0;color:rgba(220,234,246,.6);
width:26px;height:26px;cursor:pointer;font:400 18px/1 sans-serif;
border-radius:5px;flex:0 0 auto;
}
#gafr-replay-detail .grd-close:hover{
background:rgba(245,158,11,.18);color:#fde047;
}
#gafr-replay-detail .grd-meta{
display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
background:rgba(7,16,28,.55);
border:1px solid rgba(85,123,165,.22);
border-radius:6px;
padding:7px 9px;
}
#gafr-replay-detail .grd-meta-cell{
display:flex;flex-direction:column;gap:1px;min-width:0;
}
#gafr-replay-detail .grd-meta-cell span{
font:500 9.5px/1.1 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(220,234,246,.5);
}
#gafr-replay-detail .grd-meta-cell b{
font:600 12px/1.2 'IBM Plex Mono',ui-monospace,monospace;
color:#e7f1fb;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#gafr-replay-detail .grd-live{
display:grid;grid-template-columns:repeat(4, 1fr);gap:4px;
}
#gafr-replay-detail .grd-live-cell{
background:rgba(7,16,28,.6);
border:1px solid rgba(85,123,165,.22);
border-radius:6px;
padding:6px 8px;
display:flex;flex-direction:column;align-items:flex-start;gap:1px;
min-width:0;
}
#gafr-replay-detail .grd-live-cell span{
font:500 9.5px/1.1 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.1em;text-transform:uppercase;
color:rgba(220,234,246,.55);
}
#gafr-replay-detail .grd-live-cell b{
font:700 14px/1 'IBM Plex Mono',ui-monospace,monospace;
color:#fde047;
}
#gafr-replay-detail .grd-live-cell i{
font:600 10px/1 'IBM Plex Sans',sans-serif;font-style:normal;
color:rgba(220,234,246,.6);
}
#gafr-replay-detail #grd-trend[data-dir="up"]{color:#86efac}
#gafr-replay-detail #grd-trend[data-dir="down"]{color:#fca5a5}
#gafr-replay-detail #grd-trend[data-dir="level"]{color:rgba(220,234,246,.6)}
#gafr-replay-detail .grd-section{display:flex;flex-direction:column;gap:5px}
#gafr-replay-detail .grd-section-head{
display:flex;justify-content:space-between;align-items:baseline;
font:600 10.5px/1.1 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(220,234,246,.55);
}
#gafr-replay-detail .grd-section-head em{
font-style:normal;
font:500 10.5px/1.1 'IBM Plex Mono',ui-monospace,monospace;
letter-spacing:.04em;text-transform:none;
color:rgba(253,224,71,.85);
}
#gafr-replay-detail .grd-profile{
background:linear-gradient(180deg, rgba(7,16,28,.65), rgba(7,16,28,.78));
border:1px solid rgba(85,123,165,.28);
border-radius:7px;
padding:0;
height:120px;
overflow:hidden;
}
#gafr-replay-detail .grd-profile svg{
width:100%;height:100%;display:block;cursor:crosshair;
}
#gafr-replay-detail .grd-prof-past{
fill:none;
stroke:#5fb6e0;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
filter:drop-shadow(0 0 4px rgba(95,182,224,0.4));
}
#gafr-replay-detail .grd-prof-future{
fill:none;
stroke:rgba(220,234,246,0.45);
stroke-width:1.3;
stroke-dasharray:3 4;
stroke-linecap:round;
stroke-linejoin:round;
}
#gafr-replay-detail .grd-prof-cursor{
stroke:#fde047;stroke-width:1.4;stroke-dasharray:2 2;
pointer-events:none;
}
#gafr-replay-detail .grd-prof-dot{
fill:#fde047;stroke:#0c0a04;stroke-width:0.8;
filter:drop-shadow(0 0 4px rgba(253,224,71,0.5));
}
#gafr-replay-detail .grd-prof-labels text{
font:600 9.5px/1 'IBM Plex Mono',ui-monospace,monospace;
fill:rgba(220,234,246,.65);
}
/* ─── SAR-style "posledná pozícia" popup ───────────────────────── */
.grl-overlay{
position:fixed;inset:0;z-index:9200;
background:rgba(4,9,18,.55);
backdrop-filter:blur(2px);
display:flex;align-items:center;justify-content:center;
padding:24px;
font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
}
.grl-card{
width:520px;max-width:100%;
background:linear-gradient(180deg, rgba(10,22,40,.97), rgba(7,17,30,.99));
border:1px solid rgba(245,158,11,.55);
border-radius:10px;
box-shadow:0 16px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(245,158,11,.25);
color:#dceaf6;
display:flex;flex-direction:column;
overflow:hidden;
}
.grl-head{
display:flex;align-items:center;justify-content:space-between;
padding:9px 14px;
background:rgba(245,158,11,.18);
border-bottom:1px solid rgba(245,158,11,.45);
}
.grl-tag{
font:700 11px/1 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.16em;
color:#fde047;
}
.grl-close{
background:transparent;border:0;color:#fde047;font:400 18px/1 sans-serif;
width:26px;height:26px;border-radius:5px;cursor:pointer;
}
.grl-close:hover{background:rgba(0,0,0,.3)}
.grl-title{
display:flex;flex-direction:column;gap:2px;
padding:11px 16px 0;
}
.grl-title strong{
font:700 19px/1 'IBM Plex Mono',ui-monospace,monospace;
color:#fde047;letter-spacing:.05em;
}
.grl-title span{
font:500 11.5px/1.4 'IBM Plex Sans',sans-serif;
color:rgba(220,234,246,.65);
}
.grl-body{
padding:8px 16px 14px;
display:flex;flex-direction:column;gap:5px;
}
.grl-row{
display:grid;grid-template-columns:130px 1fr;column-gap:10px;
align-items:baseline;
padding:5px 0;
border-bottom:1px dashed rgba(85,123,165,.25);
}
.grl-row:last-child{border-bottom:0}
.grl-row span{
font:500 10.5px/1.2 'IBM Plex Sans Condensed',sans-serif;
letter-spacing:.1em;text-transform:uppercase;
color:rgba(220,234,246,.55);
}
.grl-row b{
font:700 13.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;
color:#e7f1fb;
}
.grl-row i{
display:block;grid-column:2;
font:500 11px/1.3 'IBM Plex Sans',sans-serif;font-style:normal;
color:rgba(220,234,246,.6);
margin-top:1px;
}
.grl-trend-up{color:#86efac !important}
.grl-trend-down{color:#fca5a5 !important}
.grl-trend-level{color:rgba(220,234,246,.6) !important}
.grl-foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:9px 14px;
background:rgba(7,16,28,.55);
border-top:1px solid rgba(85,123,165,.25);
}
.grl-copy{
background:linear-gradient(180deg, rgba(245,158,11,.32), rgba(217,119,6,.28));
border:1px solid rgba(245,158,11,.65);
color:#fde047;
border-radius:5px;
padding:7px 13px;
font:600 12px/1 'IBM Plex Sans',sans-serif;
cursor:pointer;
}
.grl-copy:hover{background:rgba(245,158,11,.42)}
.grl-hint{
font:500 10.5px/1.3 'IBM Plex Sans',sans-serif;
color:rgba(220,234,246,.55);
flex:1;text-align:right;
}
/* ═══ Emergency squawk overlay (7700/7600/7500) ════════════════════════
- Pulsing ring centred on the plane icon (origin of .plane transform)
- Top banner with the offending callsign + dismiss × button
Colour palette per ICAO doc 4444 squawk semantics:
7700 EMERGENCY red #ef4444
7600 RADIO FAILURE amber #f59e0b
7500 HIJACK violet #a855f7
The pulse ring uses the .plane element's translate3d origin so it
tracks marker movement automatically — no separate per-frame layout.
*/
@keyframes gafrEmPulse {
0% { transform:translate(-50%,-50%) scale(0.55); opacity:0.95; }
70% { opacity:0.10; }
100% { transform:translate(-50%,-50%) scale(2.2); opacity:0; }
}
.plane .em-pulse{
position:absolute;
left:0; top:0;
width:34px; height:34px;
border-radius:50%;
border:2.5px solid var(--em-color, #ef4444);
box-shadow:0 0 0 1px rgba(0,0,0,.55) inset, 0 0 14px var(--em-color, #ef4444);
pointer-events:none;
display:none;
transform:translate(-50%,-50%) scale(1);
z-index:2;
}
.plane.is-em .em-pulse{
display:block;
animation:gafrEmPulse 1.35s ease-out infinite;
}
.plane.is-em-7700{ --em-color:#ef4444; }
.plane.is-em-7600{ --em-color:#f59e0b; }
.plane.is-em-7500{ --em-color:#a855f7; }
.plane.is-em .tag{
border-color:var(--em-color, #ef4444) !important;
color:#fff;
text-shadow:0 0 8px var(--em-color, #ef4444);
}
#gafr-em-banner{
position:fixed;
top:0; left:0; right:0;
z-index:9000;
display:flex; align-items:center; gap:12px;
padding:10px 18px;
background:#ef4444;
color:#fff;
font:700 14px/1.2 'IBM Plex Sans',system-ui,sans-serif;
letter-spacing:0.04em;
box-shadow:0 2px 14px rgba(0,0,0,.4);
text-transform:uppercase;
transform:translateY(-100%);
transition:transform .25s ease-out;
}
#gafr-em-banner.is-visible{ transform:translateY(0); }
#gafr-em-banner.sq-7700{ background:#ef4444; }
#gafr-em-banner.sq-7600{ background:#f59e0b; color:#1a1a1a; }
#gafr-em-banner.sq-7500{ background:#a855f7; }
#gafr-em-banner .gem-icon{
width:20px; height:20px;
border-radius:50%;
border:2px solid currentColor;
display:inline-flex; align-items:center; justify-content:center;
font-size:13px; font-weight:900;
}
#gafr-em-banner .gem-text{ flex:1; }
#gafr-em-banner .gem-cs{ font-weight:800; }
#gafr-em-banner .gem-zoom{
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.45);
color:inherit;
font:600 11px/1 'IBM Plex Mono',monospace;
padding:5px 9px;
border-radius:3px;
cursor:pointer;
}
#gafr-em-banner .gem-zoom:hover{ background:rgba(255,255,255,.28); }
#gafr-em-banner .gem-x{
background:transparent;
border:none;
color:inherit;
font:700 18px/1 'IBM Plex Sans',system-ui,sans-serif;
cursor:pointer;
padding:2px 6px;
opacity:.85;
}
#gafr-em-banner .gem-x:hover{ opacity:1; }
/* ── STALE DATA INDICATOR ─────────────────────────────────────────
When the live aircraft poll has not produced fresh data for > ~12 s
(OS sleep, browser throttle, network glitch) the map markers are
showing positions that are no longer current. We surface that two
ways: a topbar badge (always visible if stale, never blocking) and
a subtle filter on #map_canvas so the user can read at a glance
that "what's on screen is not now". The filter is lightweight —
grayscale + slight opacity drop — readable but visibly off-spec.
The activity-trigger force-refetch in script.js will normally clear
the state within ~1 fetch cycle once the user touches the page. */
/* Synchronization indicator — visually identical to .status-pill family so
* the topbar reads as one consistent row of subtle pills. Two states:
* .is-ok → mirrors .status-pill (green, soft, dot pulses)
* .is-stale → mirrors .status-pill.crit (red, soft, dot calm)
* No full-background pulse — the changing "· N s" counter and the red dot
* are enough signal without making the topbar shout. */
.gafr-stale-badge{
display:flex; align-items:center; gap:8px;
padding:5px 10px;
border:1px solid;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.gafr-stale-badge .dot{
width:7px; height:7px; border-radius:50%;
flex:0 0 auto;
}
.gafr-stale-badge .txt{
font-family:var(--cond);
font-size:11px; font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
}
.gafr-stale-badge.is-ok{
background:rgba(47,212,122,.08);
border-color:rgba(47,212,122,.3);
}
.gafr-stale-badge.is-ok .dot{
background:var(--ok);
box-shadow:0 0 0 0 var(--ok-glow);
animation:pulseOK 2s infinite;
}
.gafr-stale-badge.is-ok .txt{ color:var(--ok); }
.gafr-stale-badge.is-stale{
background:rgba(239,68,68,.08);
border-color:rgba(239,68,68,.3);
}
.gafr-stale-badge.is-stale .dot{
background:var(--crit);
box-shadow:none;
animation:none;
}
.gafr-stale-badge.is-stale .txt{ color:var(--crit); }
/* ═══════════════════════════════════════════════════════════════
LIGHT THEME — html.is-light override (revamp v3 = "moderný")
Aktivuje sa cez settings popup → Vzhľad → "Svetlý". Persist v
localStorage('gafr.theme').
PALETA — slate + cyan accent (modern aviation control room):
canvas #f1f4f8 (off-white background, jemný studený nádych)
surface #ffffff (cards, panels, buttons base)
surface dim #f7f8fb (popup head, hover states)
border #dadfe6 (hairline jemný studený sivý — slate-200)
accent #0891b2 (cyan-600, deep professional teal)
accent hover #06b6d4 (cyan-500)
ok #10b981 (emerald-500)
warn #f59e0b (amber-500)
crit #dc2626 (red-600)
play #ea580c (orange-600 PLAYBACK)
text #0f172a (slate-900 — sytá, vysoký kontrast)
text dim #475569 (slate-600)
text muted #94a3b8 (slate-400)
Princípy:
• Flat surfaces — žiadne sivé metalic gradienty (predtým "MOZNOST.png" look)
• Hairline borders + soft shadows pre depth (Linear/FlightAware estetika)
• Status pills: tinted bg + saturated foreground (clean, čitateľné)
• Konzistentný 4px radius na controls, 8px na cards/popups
═══════════════════════════════════════════════════════════════ */
html.is-light{
--lt-bg:#f1f4f8; --lt-bg-hi:#ffffff; --lt-bg-lo:#e7eaf0;
--lt-panel:#ffffff; --lt-panel-2:#f7f8fb; --lt-side:#f1f4f8;
--lt-border:#dadfe6; --lt-border-soft:rgba(15,23,42,.06);
--lt-border-strong:#b9c0cc;
--lt-text:#0f172a; --lt-text-2:#475569; --lt-text-3:#94a3b8;
--lt-accent:#0891b2; --lt-accent-2:#06b6d4; --lt-accent-soft:rgba(8,145,178,.10);
--lt-ok:#10b981; --lt-warn:#f59e0b; --lt-crit:#dc2626;
--lt-play:#ea580c;
--lt-shadow-1:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--lt-shadow-2:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
}
/* shared button base — flat white surface s hairline borderom + jemný
shadow. Hover = subtle accent tint, žiadne výrazné gradient prepínanie.
Font-weight 500 (predtým 600) — modernejší clean look. */
html.is-light .atc-btn,
html.is-light .atc-iconbtn,
html.is-light .atc-mode-btn{
color:var(--lt-text);
background:var(--lt-panel);
border:1px solid var(--lt-border);
box-shadow:var(--lt-shadow-1);
border-radius:4px;
font-weight:500;
text-shadow:none;
transition:background .12s, border-color .12s, color .12s;
}
html.is-light .atc-btn:hover,
html.is-light .atc-iconbtn:hover,
html.is-light .atc-mode-btn:hover{
background:var(--lt-accent-soft);
border-color:var(--lt-accent);
color:var(--lt-accent);
}
/* ── TOPBAR ────────────────────────────────────────────────── */
html.is-light .topbar{
background:var(--lt-panel) !important;
border-bottom:1px solid var(--lt-border);
box-shadow:0 1px 3px rgba(15,23,42,.06);
}
html.is-light .topbar::after{display:none}
html.is-light .brand-big{color:var(--lt-text);text-shadow:none}
html.is-light .top-search{border-right-color:var(--lt-border)}
html.is-light .search-wrap{
background:var(--lt-bg);border:1px solid var(--lt-border);
border-radius:6px;
box-shadow:none;
}
html.is-light .search-wrap:focus-within{
background:var(--lt-panel);
border-color:var(--lt-accent);
box-shadow:0 0 0 3px var(--lt-accent-soft);
}
html.is-light .search-wrap > svg{color:var(--lt-text-3)}
html.is-light .search-wrap input{color:var(--lt-text)}
html.is-light .search-wrap input::placeholder{color:var(--lt-text-3)}
/* ATC strip */
html.is-light .atc-strip{
background:transparent;
border-left-color:var(--lt-border);
}
html.is-light .atc-sec,
html.is-light .atc-sec-row,
html.is-light .atc-pickgrp,
html.is-light .atc-iconrow,
html.is-light .atc-clock{
border-right-color:var(--lt-border);
}
html.is-light .atc-label{
color:var(--lt-text-2);font-weight:500;
letter-spacing:.18em;font-size:9.5px;
}
/* value boxy — soft tinted bg + saturated foreground (modern pill look).
atc-val base = neutral surface; špecifické statusy prepnu na color tint. */
html.is-light .atc-val{
color:var(--lt-text);background:var(--lt-bg);
border:1px solid var(--lt-border);
border-radius:4px;
text-shadow:none;
box-shadow:none;
}
html.is-light .atc-val--ok{ /* OK — emerald soft tint */
color:#047857;background:rgba(16,185,129,.12);
border-color:rgba(16,185,129,.28);font-weight:600;
text-shadow:none;box-shadow:none;
}
html.is-light .atc-val--warn{ /* WARN — amber soft tint */
color:#b45309;background:rgba(245,158,11,.14);
border-color:rgba(245,158,11,.32);font-weight:600;
}
html.is-light .atc-val--crit{ /* CRIT — red soft tint */
color:#b91c1c;background:rgba(220,38,38,.10);
border-color:rgba(220,38,38,.30);font-weight:600;
}
html.is-light .atc-val--num{ /* RANGE/FILTER — saturated cyan na bielom */
color:var(--lt-accent);background:var(--lt-panel);
border-color:var(--lt-border);text-shadow:none;font-weight:500;
box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}
html.is-light .atc-val--num:focus,
html.is-light .atc-fl-input:focus,
html.is-light .atc-range-input:focus{
border-color:var(--lt-accent);
box-shadow:0 0 0 3px var(--lt-accent-soft);
}
html.is-light .atc-val--pick{ /* SPD/HIST picker */
color:var(--lt-text);background:var(--lt-panel);
border-color:var(--lt-border);font-weight:500;
box-shadow:none;
}
html.is-light .atc-val--pick:hover,
html.is-light .atc-val--pick.is-open{
border-color:var(--lt-accent); color:var(--lt-accent);
background:var(--lt-accent-soft);
}
html.is-light .atc-val--pick.is-off{ color:var(--lt-text-3) }
/* Floating pick menu — clean white card */
html.is-light .atc-pick-menu{
background:var(--lt-panel); border:1px solid var(--lt-border);
border-radius:6px;
box-shadow:var(--lt-shadow-2);
}
html.is-light .atc-pick-menu .pm-row{
color:var(--lt-text); border-bottom-color:var(--lt-border-soft);
}
html.is-light .atc-pick-menu .pm-row:hover{
background:var(--lt-accent-soft); color:var(--lt-accent);
}
html.is-light .atc-pick-menu .pm-row.is-on{
background:var(--lt-accent-soft); color:var(--lt-accent);
font-weight:600;
}
/* MODE button → PLAYBACK = oranžová (single saturated fill) */
html.is-light .atc-mode-btn.is-playback{
color:#fff;
background:var(--lt-play);
border:1px solid var(--lt-play);
box-shadow:0 1px 3px rgba(234,88,12,.32);
font-weight:600;
}
html.is-light .atc-mode-btn.is-playback:hover{
background:#c2410c;border-color:#c2410c;color:#fff;
}
/* QL active — amber tint na bielom */
html.is-light .atc-btn.is-quicklook{
color:#b45309;
background:rgba(245,158,11,.14);
border-color:rgba(245,158,11,.40);font-weight:600;
box-shadow:none;
}
html.is-light .atc-btn.is-quicklook:hover{
background:rgba(245,158,11,.22);
border-color:var(--lt-warn);color:#92400e;
}
/* clock — clean cyan na svetlom, žiadny tmavý box */
html.is-light .atc-time{
color:var(--lt-accent);text-shadow:none;
background:transparent;
padding:0;border:0;border-radius:0;
box-shadow:none;
}
html.is-light .atc-utc{ color:var(--lt-text-3) }
html.is-light .atc-clock{padding:0 20px}
html.is-light .atc-settings{color:var(--lt-text-2)}
html.is-light .atc-settings:hover{color:var(--lt-accent);background:var(--lt-accent-soft)}
html.is-light .atc-settings.is-active{color:var(--lt-accent);background:var(--lt-accent-soft)}
html.is-light .nav a{color:var(--lt-text-2)}
html.is-light .nav a.is-active{
color:var(--lt-accent);background:var(--lt-accent-soft);
border-color:transparent;box-shadow:inset 0 -2px 0 var(--lt-accent);
}
/* ── SIDEBAR (drawer) ──────────────────────────────────────── */
html.is-light .side{
background:var(--lt-panel);
border-right-color:var(--lt-border);
box-shadow:1px 0 3px rgba(15,23,42,.04);
}
html.is-light .side-head .side-title h2{color:var(--lt-text)}
html.is-light .side-title .count{
color:var(--lt-text-2);background:var(--lt-bg);
border:1px solid var(--lt-border);
}
html.is-light .side-head .sort{color:var(--lt-text-2)}
html.is-light .side-head .sort:hover{color:var(--lt-accent)}
html.is-light .side-search{
background:var(--lt-bg);border:1px solid var(--lt-border);
border-radius:6px;
box-shadow:none;
}
html.is-light .side-search:focus-within{
background:var(--lt-panel);border-color:var(--lt-accent);
box-shadow:0 0 0 3px var(--lt-accent-soft);
}
html.is-light .side-search svg{color:var(--lt-text-3)}
html.is-light .side-search input{color:var(--lt-text)}
html.is-light .side-search input::placeholder{color:var(--lt-text-3)}
/* detail card */
html.is-light .detail{background:var(--lt-panel);color:var(--lt-text)}
html.is-light .detail::before{display:none}
html.is-light .detail-cs .cs{color:var(--lt-text)}
html.is-light .detail-cs .type{
color:#fff;background:var(--lt-accent);border-color:var(--lt-accent);font-weight:600;
box-shadow:none;
}
html.is-light .detail-reg{color:var(--lt-text-2)}
html.is-light .detail-reg .pipe{color:var(--lt-text-3)}
html.is-light .detail-tag{
color:var(--lt-text);background:var(--lt-bg);border-color:var(--lt-border);
box-shadow:none;
}
html.is-light .detail-tag .dot{background:var(--lt-ok)}
html.is-light .detail-close{
background:var(--lt-panel);color:var(--lt-text-2);border-color:var(--lt-border);
}
html.is-light .detail-close:hover{
border-color:var(--lt-crit);color:var(--lt-crit);
background:rgba(220,38,38,.06);
}
html.is-light .detail-section-title{color:var(--lt-text);border-bottom-color:var(--lt-border)}
html.is-light .fields-rows .fr{border-bottom-color:var(--lt-border-soft)}
html.is-light .fields-rows .fr .k{color:var(--lt-text-2)}
html.is-light .fields-rows .fr .v{color:var(--lt-text)}
html.is-light .fields-rows .fr .v small{color:var(--lt-text-3)}
html.is-light .fields-rows .fr .v.vr-down{color:var(--lt-crit)}
html.is-light .fields-rows .fr .v .sqk-em{color:var(--lt-crit)}
html.is-light .empty-detail{color:var(--lt-text-2)}
html.is-light .empty-detail svg{color:var(--lt-text-3)}
html.is-light .empty-detail h4{color:var(--lt-text)}
/* ── STATUS BAR (footer) ──────────────────────────────────── */
html.is-light .status{
background:var(--lt-panel);
border-top:1px solid var(--lt-border);
color:var(--lt-text);
box-shadow:0 -1px 3px rgba(15,23,42,.04);
}
html.is-light .status .k{color:var(--lt-text-2)}
html.is-light .status .v{color:var(--lt-text)}
html.is-light .status .v.ok{color:#047857}
html.is-light .status .v.warn{color:#b45309}
html.is-light .status .v.crit{color:var(--lt-crit)}
html.is-light .status-warn{
color:#b45309;
background:rgba(245,158,11,.14);
border-color:rgba(245,158,11,.32);
}
html.is-light .status-copy{color:var(--lt-text-2)}
/* ── MAP HUD ──────────────────── */
html.is-light .map-modes button,
html.is-light .zoom-ctrl button{
color:var(--lt-text);
background:var(--lt-panel);
border:1px solid var(--lt-border);
border-radius:4px;
box-shadow:var(--lt-shadow-1);
font-weight:500;
}
html.is-light .map-modes button.is-on{
background:var(--lt-accent);
border-color:var(--lt-accent);color:#fff;
box-shadow:0 1px 3px rgba(8,145,178,.32);
}
html.is-light .map-modes button:hover,
html.is-light .zoom-ctrl button:hover{
background:var(--lt-accent-soft);
border-color:var(--lt-accent);color:var(--lt-accent);
}
html.is-light .map-modes button.is-on:hover{
background:var(--lt-accent-2);border-color:var(--lt-accent-2);color:#fff;
}
/* ── POPUPS ──────────────────────────────── */
html.is-light .popup{
background:var(--lt-panel);
border:1px solid var(--lt-border);
color:var(--lt-text);
box-shadow:var(--lt-shadow-2);
border-radius:8px;
}
html.is-light .popup-head{
background:var(--lt-panel-2);
border-bottom-color:var(--lt-border);
}
html.is-light .popup-head h3{color:var(--lt-text)}
html.is-light .popup-head .sub{color:var(--lt-text-2)}
html.is-light .popup-close{
background:var(--lt-panel);color:var(--lt-text-2);border-color:var(--lt-border);
box-shadow:none;
}
html.is-light .popup-close:hover{
border-color:var(--lt-crit);color:var(--lt-crit);
background:rgba(220,38,38,.06);
}
html.is-light .popup-backdrop{background:rgba(15,23,42,.30);backdrop-filter:blur(3px)}
html.is-light .slider .lbl-row{color:var(--lt-text)}
html.is-light .slider .lbl-row .v{color:var(--lt-text-2)}
html.is-light .slider input[type=range]{accent-color:var(--lt-accent)}
html.is-light .slider .ticks{color:var(--lt-text-3)}
html.is-light .label-toggles .lt-head{color:var(--lt-text)}
html.is-light .label-toggles .lt-row{color:var(--lt-text)}
html.is-light .label-toggles .lt-row .sw{
background:var(--lt-bg);border-color:var(--lt-border);
box-shadow:inset 0 1px 1px rgba(15,23,42,.04);
}
html.is-light .label-toggles .lt-row.is-on .sw{
background:var(--lt-ok);border-color:var(--lt-ok);
box-shadow:0 1px 3px rgba(16,185,129,.32);
}
html.is-light .label-toggles .lt-sep{border-color:var(--lt-border)}
html.is-light .tool-btn-inline{
color:var(--lt-text);
background:var(--lt-panel);
border:1px solid var(--lt-border);
border-radius:4px;
box-shadow:var(--lt-shadow-1);
font-weight:500;
}
html.is-light .tool-btn-inline:hover{
background:var(--lt-accent-soft);
border-color:var(--lt-accent);color:var(--lt-accent);
}
html.is-light .iv-segctl button{
color:var(--lt-text);
background:var(--lt-panel);
border:1px solid var(--lt-border);
font-weight:500;
}
html.is-light .iv-segctl button:hover{
background:var(--lt-accent-soft);
border-color:var(--lt-accent);color:var(--lt-accent);
}
html.is-light .iv-segctl button.is-on{
background:var(--lt-accent);
color:#fff;border-color:var(--lt-accent);
box-shadow:0 1px 3px rgba(8,145,178,.32);
}
html.is-light input[type=checkbox]{accent-color:var(--lt-accent)}
/* ── RIGHT PANEL ─── */
html.is-light .right{
background:var(--lt-panel);
border-left-color:var(--lt-border);color:var(--lt-text);
}
html.is-light .card{
background:var(--lt-panel);
border:1px solid var(--lt-border);
border-radius:8px;
box-shadow:var(--lt-shadow-1);
}
html.is-light .card h3{color:var(--lt-text)}
html.is-light .card .sub{color:var(--lt-text-2)}
html.is-light .airspace-row{border-bottom-color:var(--lt-border-soft);color:var(--lt-text)}
html.is-light .airspace-row:hover{background:var(--lt-accent-soft)}
html.is-light .inview-row{color:var(--lt-text);border-bottom-color:var(--lt-border-soft)}
html.is-light .inview-row:hover{background:var(--lt-accent-soft)}
/* ── EM banner — saturated red s bielym textom */
html.is-light #gafr-em-banner{
background:var(--lt-crit);
color:#fff;border-color:var(--lt-crit);
box-shadow:0 4px 14px rgba(220,38,38,.32);
}
html.is-light .gem-zoom,
html.is-light .gem-x{
color:var(--lt-crit);background:#fff;
border:1px solid #fff;font-weight:600;
box-shadow:var(--lt-shadow-1);
}
/* body / app canvas */
html.is-light body{background:var(--lt-bg)}
html.is-light .app{background:var(--lt-bg)}
/* ── gafr-timeline.js — FR24-style tick timeline ── */
.gafr-timeline { position: relative; width: 100%; height: 56px; user-select: none; }
.gafr-timeline-ticks { position: absolute; inset: 0 0 24px 0; pointer-events: none; }
.gafr-tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: #555; }
.gafr-tick.major { height: 12px; background: #aaa; }
.gafr-tick-label {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
font: 11px ui-monospace,Menlo,Consolas; color: #ccc; white-space: nowrap;
}
.gafr-timeline-range {
position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
appearance: none; background: transparent; margin: 0;
}
.gafr-timeline-range::-webkit-slider-runnable-track {
height: 4px; background: linear-gradient(to right, #e7a500 var(--p, 0%), #333 var(--p, 0%));
border-radius: 2px;
}
.gafr-timeline-range::-webkit-slider-thumb {
appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #e7a500;
border: 2px solid #fff; margin-top: -5px; cursor: grab;
}
.gafr-timeline-tooltip {
position: absolute; bottom: 28px; transform: translateX(-50%);
background: #000d; color: #fff; padding: 2px 6px; border-radius: 3px;
font: 11px ui-monospace,Menlo,Consolas; pointer-events: none;
}
/* ── Edge notification banner (Task 9.2) ── */
.grc-edge-notice {
display: flex; gap: 10px; align-items: center;
background: #2a2a2dcc; color: #f8d68a;
padding: 8px 14px; margin: 6px 0; border-radius: 4px;
border: 1px solid #f8d68a44; font-size: 12px;
}
.grc-edge-notice[hidden] { display: none; }
.grc-edge-icon { font-size: 14px; }
.grc-edge-msg { flex: 1; }
.grc-edge-open { background: #e7a500; color:#000; border:0; padding: 4px 10px; border-radius:3px; cursor:pointer; font: 11px ui-monospace; }
.grc-edge-x { background: transparent; border:0; color: #f8d68a; cursor: pointer; font-size: 14px; }
/* ── Preset buttons row (Task 9.4) ── */
.grc-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.grc-presets button {
background: #2a2a2d; color: #ccc; border: 1px solid #444;
padding: 4px 10px; border-radius: 3px; cursor: pointer;
font: 11px ui-monospace,Menlo,Consolas;
}
.grc-presets button:hover { border-color: #e7a500; color: #fff; }
/* ── Continuous speed slider (Task 10.2) ── */
.play-speed { display: inline-flex; align-items: center; gap: 6px; }
.play-speed-range { width: 100px; height: 18px; }
.play-speed-val { font: 11px ui-monospace; color: #ccc; min-width: 36px; text-align: right; }