/* aisnav - responsive nautical UI (dark default, light theme via [data-theme=light]) */
:root {
  --bg: #07121d; --bg2: #0a1826; --panel: #0d1d2d; --panel2: #12283b; --line: #1d3954; --line2: #27496a;
  --text: #d9e7f3; --muted: #88a2ba; --accent: #2ec4d6; --accent2: #5aa9ff;
  --ok: #2fd27a; --warn: #f6b73c; --bad: #ff4d4d; --own: #ff9f1c;
  --rail: 64px; --top: 48px; --bottom: 0px; --panel-w: 380px; --list-w: 320px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --map-bg: #0b1f30;
}
:root[data-theme="light"] {
  --bg: #eef3f7; --bg2: #e3eaf1; --panel: #ffffff; --panel2: #f1f5f9; --line: #cfdae6; --line2: #b7c7d8;
  --text: #15283a; --muted: #5a7088; --accent: #0b8fa3; --accent2: #1f6fd6;
  --ok: #1a9f5b; --warn: #c7811a; --bad: #d63333; --own: #d97b00;
  --shadow: 0 6px 24px rgba(20,40,60,.18); --map-bg: #cfe1ee;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); overflow: hidden; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }

#app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--rail) 1fr; grid-template-rows: var(--top) 1fr; grid-template-areas: "rail top" "rail main"; }

/* ------------------------------------------------------------- rail */
#rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: var(--bg2); border-right: 1px solid var(--line); z-index: 30; }
#rail .logo { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .3px; margin: 2px 0 10px; } #rail .logo b { color: var(--text); }
#rail .spacer { flex: 1; }
.nav { width: 56px; min-height: 52px; border: 0; background: none; border-radius: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0; }
.nav .ic { font-size: 20px; line-height: 1; } .nav .lb { font-size: 10.5px; }
.nav:hover { background: var(--panel2); color: var(--text); }
.nav.on { background: var(--panel2); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.nav.toggled { color: var(--warn); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent2); color: #fff; font-size: 13px !important; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ----------------------------------------------------------- topbar */
#topbar { grid-area: top; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--bg2); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; z-index: 20; }
.tb-btn { min-width: 40px; height: 36px; border: 1px solid var(--line); background: var(--panel2); border-radius: 9px; font-size: 17px; padding: 0 8px; }
.tb-btn.on { border-color: var(--accent); color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); flex-shrink: 0; min-width: 0; }
.chip .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.chip .val { font-family: var(--mono); font-weight: 600; font-size: 13.5px; }
.chip .sub { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 9px; }
.chip.ok .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.chip.warn .dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.chip.bad .dot { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
.chip.info .dot { background: var(--accent2); }
.chip.bad .val { color: #ff8a8a; } .chip.warn .val { color: #ffd47f; }
.chip.wide { max-width: 260px; overflow: hidden; flex-shrink: 1; } .chip.wide .val { overflow: hidden; text-overflow: ellipsis; }
.chip.replay { background: #1b2f63; border-color: #3c5ec4; } :root[data-theme="light"] .chip.replay { background: #dbe7ff; }
#tb-conn { background: #4a1212; border-color: var(--bad); }
.spacer { flex: 1; }
.alert-btn { background: #5a1010; border-color: var(--bad); color: #fff; font-weight: 700; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 rgba(255,77,77,0); } to { box-shadow: 0 0 12px rgba(255,77,77,.9); } }

/* ------------------------------------------------------------- main */
#main { grid-area: main; position: relative; min-height: 0; min-width: 0; display: flex; }
#mapwrap { flex: 1; position: relative; min-width: 0; z-index: 0; }  /* own stacking context: Leaflet panes stay below the sheets */
#map { position: absolute; inset: 0; background: var(--map-bg); }
#app[data-view="vessels"] #mapwrap, #app[data-view="stats"] #mapwrap { display: none; }
#app:not([data-view="live"]) #list, #app:not([data-view="live"]) .live-only { display: none !important; }
#app:not([data-view="day"]) #daypanel, #app:not([data-view="day"]) #replaybar { display: none !important; }
#app[data-view="day"] #gpspanel { display: none; }
#app[data-view="day"] .leaflet-bottom.leaflet-right { bottom: 86px; }
#app[data-view="day"] .leaflet-bottom.leaflet-left { bottom: 86px; }

/* ------------------------------------------------------------ sheets */
.sheet { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; z-index: 25; }
.sheet-handle { display: none; }
#list { width: var(--list-w); flex: 0 0 var(--list-w); order: -1; border-left: 0; border-right: 1px solid var(--line); }
#list.closed { display: none; }
#detail { width: var(--panel-w); flex: 0 0 var(--panel-w); box-shadow: var(--shadow); }
#app[data-view="day"] #detail { position: absolute; top: 0; bottom: 0; right: var(--panel-w); z-index: 26; }
#app[data-view="day"]:has(#detail:not(.hidden)) #replaybar { right: calc(var(--panel-w) + 10px); }
#app[data-view="day"]:has(#detail:not(.hidden)) #mapbtns { right: calc(var(--panel-w) + 10px); }
#daypanel { width: var(--panel-w); flex: 0 0 var(--panel-w); }

/* list */
.sb-head { padding: 8px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.sb-row { display: flex; align-items: center; gap: 8px; }
#search, #vt-search { flex: 1; height: 42px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); padding: 0 12px; font-size: 15px; min-width: 0; }
#search:focus, #vt-search:focus { outline: none; border-color: var(--accent); }
select { height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); padding: 0 8px; }
#list-count { margin-left: auto; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; } .chips.collapsed { display: none; }
.chipx { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 15px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; user-select: none; cursor: pointer; }
.chipx i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .chipx.off { opacity: .35; }
.small-btn { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); font-size: 12.5px; }
.small-btn.on { border-color: var(--warn); color: var(--warn); } .small-btn.filtered { border-color: var(--warn); color: var(--warn); }
.vlist { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.vi { display: grid; grid-template-columns: 6px 1fr auto; gap: 0 9px; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; min-height: 54px; align-items: center; }
.vi:hover, .vi.sel { background: var(--panel2); } .vi.stale { opacity: .55; } .vi.danger { background: #3a0f12; } :root[data-theme="light"] .vi.danger { background: #ffe1e1; }
.vi .bar { width: 6px; align-self: stretch; border-radius: 0 3px 3px 0; }
.vi .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi .meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi .r { text-align: right; font-family: var(--mono); font-size: 12px; line-height: 1.45; } .vi .r b { font-size: 13px; color: var(--text); }
.cc { display: inline-block; font: 600 10px/1 var(--mono); padding: 2px 3px; border-radius: 3px; background: var(--line2); color: var(--text); margin-left: 4px; vertical-align: 1px; }
.src-mark { color: var(--warn); font-weight: 700; margin-left: 3px; cursor: help; }
.sb-foot { border-top: 1px solid var(--line); padding: 6px 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* detail */
.dt-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 10px 4px 12px; gap: 8px; }
.dt-title { display: flex; gap: 10px; min-width: 0; } .dt-tt { min-width: 0; }
.swatch { width: 8px; border-radius: 4px; align-self: stretch; flex: 0 0 8px; }
.dt-name { font-size: 20px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.dt-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.dt-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 12px; }
.key { background: var(--panel2); border-radius: 9px; padding: 6px 8px; min-width: 0; }
.key .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
.key .v { font-family: var(--mono); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key .v small { font-size: 11px; color: var(--muted); font-weight: 400; }
.key.danger { background: #4a1212; } .key.danger .v { color: #ff8a8a; }
.dt-actions { display: flex; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); }
.act { flex: 1; height: 42px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); font-weight: 600; font-size: 13px; padding: 0 4px; }
.act.on { border-color: var(--accent); color: var(--accent); }
.dt-body { overflow-y: auto; padding: 4px 12px 16px; flex: 1; min-height: 0; }
.sec { margin-top: 10px; } .sec h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; } .kv .k { color: var(--muted); } .kv .v { font-family: var(--mono); word-break: break-word; }
.badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.badge.red { background: var(--bad); color: #fff; } .badge.amber { background: var(--warn); color: #222; } .badge.grey { background: var(--line2); color: var(--text); }
.badge.src { background: #3d3410; color: #ffd47f; border: 1px solid #7a6420; font-weight: 600; } :root[data-theme="light"] .badge.src { background: #fff2cc; color: #7a5200; }
.badge.cat { color: #000; }
.dt-edit { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; gap: 7px; flex: 0 1 auto; max-height: 60%; overflow-y: auto; }
.dt-edit label { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dt-edit input, .dt-edit textarea { height: 40px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); padding: 0 10px; font-size: 14px; color: var(--text); width: 100%; }
.dt-edit textarea { height: 58px; padding: 6px 10px; resize: vertical; }
.dt-edit input:focus, .dt-edit textarea:focus { outline: none; border-color: var(--accent); }
.dt-edit .row { display: flex; gap: 6px; flex-wrap: wrap; } .dt-edit .row .act { flex: 1 1 30%; min-width: 90px; }
.dt-edit .act.danger { border-color: #7a2a2a; color: #ff9b9b; }
.dt-edit .links { font-size: 12px; color: var(--muted); line-height: 1.6; } .dt-edit .msg { font-size: 12px; color: var(--warn); min-height: 1em; }
.spark { vertical-align: middle; }

/* ------------------------------------------------------- map controls */
#mapbtns { position: absolute; right: 10px; top: 60px; z-index: 1150; display: flex; flex-direction: column; gap: 8px; }
.map-btn { width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 22px; box-shadow: var(--shadow); }
.map-btn.on { border-color: var(--own); color: var(--own); } #btn-labels { font-size: 15px; font-weight: 700; }
.chip-float { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--panel); border: 1px solid var(--accent); border-radius: 20px; padding: 6px 8px 6px 14px; display: flex; gap: 8px; align-items: center; }
.chip-float button { border: 0; background: var(--panel2); border-radius: 14px; width: 30px; height: 30px; color: var(--text); }
.toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + 72px); transform: translateX(-50%); z-index: 3000; background: var(--panel); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: 92vw; }

.leaflet-container { font: inherit; background: var(--map-bg); }
.leaflet-bar a, .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-bar { border: 1px solid var(--line) !important; border-radius: 11px !important; overflow: hidden; }
.leaflet-control-layers { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 11px !important; }
.leaflet-control-layers-toggle { width: 46px !important; height: 46px !important; } :root:not([data-theme="light"]) .leaflet-control-layers-toggle { filter: invert(.85) hue-rotate(180deg); }
.leaflet-control-layers-expanded { padding: 10px 12px; font-size: 15px; } .leaflet-control-layers label { margin: 6px 0; } .leaflet-control-layers input { width: 18px; height: 18px; vertical-align: -3px; }
.leaflet-control-attribution { background: rgba(7,18,29,.75) !important; color: #8ba3b8 !important; font-size: 10px; } .leaflet-control-attribution a { color: #9cc7e0 !important; }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.75) !important; color: #456 !important; }
.leaflet-tooltip { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; box-shadow: var(--shadow); }
.leaflet-tooltip-top:before { border-top-color: var(--line); }
.leaflet-tooltip.vlabel { background: none; border: 0; box-shadow: none; padding: 0 0 0 10px; font: 600 11px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.leaflet-tooltip.vlabel:before { display: none; }
:root[data-theme="light"] .leaflet-tooltip.vlabel { color: #0b1c2c; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }

.vmk { background: none; border: 0; } .vmk .vm { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vmk svg { display: block; transition: transform .3s; filter: drop-shadow(0 0 1px rgba(0,0,0,.8)); }
.vmk.stale { opacity: .4; } .vmk.sel .vm { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255,255,255,.7); }
.vmk.danger .vm { border-radius: 50%; animation: dangerRing .8s infinite alternate; }
@keyframes dangerRing { from { box-shadow: 0 0 0 2px rgba(255,60,60,.9); } to { box-shadow: 0 0 0 7px rgba(255,60,60,.25); } }
.own-mk { background: none; border: 0; } .own-mk svg { display: block; transition: transform .3s; }
.ring-lbl { background: none; border: 0; color: var(--own); font: 600 11px var(--mono); text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; }
.home-mk, .rp-mk { background: none; border: 0; }

/* alerts */
#alerts { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1100; min-width: 320px; max-width: 92%; background: rgba(70,8,12,.95); border: 2px solid var(--bad); border-radius: 10px; box-shadow: var(--shadow); color: #fff; }
#alerts .ah { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-weight: 700; color: #ffd0d0; }
#alerts .ah button { border: 1px solid #a33; background: #5a1515; border-radius: 6px; height: 32px; min-width: 36px; color: #fff; }
#alerts .ai { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-top: 1px solid rgba(255,77,77,.4); cursor: pointer; }
#alerts .ai .r { text-align: right; font-family: var(--mono); color: #ffd6d6; } #alerts.collapsed .ai { display: none; }

/* GPS panel */
#gpspanel { position: absolute; left: 10px; bottom: 22px; z-index: 1050; width: 390px; max-width: calc(100% - 20px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: calc(100% - 40px); }
.gp-head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; background: none; width: 100%; text-align: left; font-weight: 600; color: var(--text); }
.gp-head .chev { margin-left: auto; transition: transform .2s; } #gpspanel.collapsed .gp-body { display: none; } #gpspanel.collapsed .chev { transform: rotate(180deg); }
.gp-body { overflow-y: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.gp-snr-head, .gp-raw-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; text-transform: uppercase; gap: 8px; }
.legend { text-transform: none; font-size: 11px; } .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: -1px; }
.lg.gps { background: #4ea8ff; } .lg.glo { background: #ff7a59; } .lg.sbas { background: #9aa5b1; } .lg.unused { background: transparent; border: 1px solid #8aa; }
.snr { display: flex; align-items: flex-end; gap: 3px; height: 128px; padding: 4px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.sat { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 18px; flex: 1 0 18px; height: 100%; }
.sat .b { width: 100%; max-width: 20px; border-radius: 3px 3px 0 0; background: transparent; border: 1px solid; border-bottom: 0; opacity: .55; } .sat.used .b { opacity: 1; }
.sat .s { font: 10px var(--mono); color: var(--muted); } .sat .p { font: 10px var(--mono); color: var(--text); padding: 2px 0; }
.sat.GPS .b { border-color: #4ea8ff; } .sat.GPS.used .b { background: #4ea8ff; } .sat.GLONASS .b { border-color: #ff7a59; } .sat.GLONASS.used .b { background: #ff7a59; }
.sat.SBAS .b { border-color: #9aa5b1; } .sat.SBAS.used .b { background: #9aa5b1; } .sat.Galileo .b { border-color: #b39ddb; } .sat.Galileo.used .b { background: #b39ddb; } .sat.BeiDou .b { border-color: #ffd166; } .sat.BeiDou.used .b { background: #ffd166; }
.raw { margin: 0; height: 150px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px; font: 11px/1.35 var(--mono); color: #9fd3a8; white-space: pre; }
:root[data-theme="light"] .raw { color: #1a6b2a; }
.gp-msg { color: var(--warn); font-size: 12px; }

/* --------------------------------------------------------- replay bar */
#replaybar { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 1050; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); }
.rp-btn { height: 44px; min-width: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-size: 18px; font-weight: 700; }
.rp-btn.on { border-color: var(--accent); color: var(--accent); }
.rp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-row { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; } .rp-time { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); }
#rp-slider { width: 100%; height: 30px; accent-color: var(--accent); margin: 0; }
#rp-speed { height: 44px; }

/* --------------------------------------------------------- day panel */
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 10px; padding: 3px; }
.tabs button { border: 0; background: none; color: var(--muted); height: 34px; padding: 0 12px; border-radius: 8px; font-weight: 600; }
.tabs button.on { background: var(--panel2); color: var(--text); }
.dp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dp-summary .key .v { font-size: 17px; }
.dp-body { flex: 1; overflow: auto; min-height: 0; }
.ev { display: grid; grid-template-columns: 54px 1fr auto; gap: 2px 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.ev:hover { background: var(--panel2); }
.ev .t { font-family: var(--mono); font-size: 13px; } .ev .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .meta { color: var(--muted); font-size: 12px; } .ev .tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.ev .tag.arrival { background: #11402a; color: #7ee2a8; } .ev .tag.departure { background: #3d2a10; color: #ffcf7a; }
:root[data-theme="light"] .ev .tag.arrival { background: #d8f5e3; color: #146c3a; } :root[data-theme="light"] .ev .tag.departure { background: #fff0d4; color: #8a5300; }
.ev-day { padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--bg2); position: sticky; top: 0; }

/* ------------------------------------------------------------ tables */
.page { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.page-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 18px; } #vt-search { max-width: 260px; height: 38px; }
.table-wrap { flex: 1; overflow: auto; min-height: 0; }
table.vt { border-collapse: collapse; width: 100%; font-size: 13px; }
table.vt th, table.vt td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.vt td:first-child, table.vt th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 2; }
table.vt th { position: sticky; top: 0; background: var(--bg2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; user-select: none; z-index: 1; }
table.vt th.sorted { color: var(--accent); } table.vt tr:hover td { background: var(--panel2); } table.vt tr { cursor: pointer; }
table.vt td.num, table.vt th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.vt .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pill-in { color: var(--ok); font-weight: 600; } .pill-out { color: var(--muted); }

/* ------------------------------------------------------------- cards */
.cards { flex: 1; overflow-y: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-content: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
.card.span2 { grid-column: span 2; } @media (max-width: 700px) { .card.span2 { grid-column: span 1; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tile { background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.tile .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.tile .v { font-family: var(--mono); font-size: 22px; font-weight: 700; } .tile .v small { font-size: 12px; color: var(--muted); font-weight: 400; }
.tile .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart svg { width: 100%; height: auto; display: block; } .chart .grid { stroke: var(--line); stroke-width: 1; } .chart .ax { fill: var(--muted); font-size: 11px; }
.ch-title { font-size: 12px; color: var(--muted); margin: 6px 0 4px; display: flex; justify-content: space-between; } .ch-legend .lg { width: 9px; height: 9px; }
.donut-wrap { display: flex; gap: 12px; align-items: center; } .donut-wrap svg { width: 120px; flex: 0 0 120px; } .donut-n { fill: var(--text); font: 700 16px var(--mono); }
.donut-legend { flex: 1; display: grid; gap: 3px; font-size: 12.5px; } .dl { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; } .dl i { width: 10px; height: 10px; border-radius: 3px; }
.hbars { display: grid; gap: 4px; } .hb { display: grid; grid-template-columns: 70px 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; }
.hb-bar { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; } .hb-bar i { display: block; height: 100%; border-radius: 6px; } .hb-v { text-align: right; font-family: var(--mono); }
.rec-list { display: grid; gap: 6px; } .rec { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; cursor: pointer; padding: 6px 8px; border-radius: 8px; background: var(--panel2); }
.rec b { font-family: var(--mono); }

/* ------------------------------------------------------- mobile nav */
#bottomnav { display: none; }
#more-menu { position: fixed; right: 8px; bottom: calc(var(--bottom) + 8px); z-index: 2500; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 4px; min-width: 200px; }
#more-menu button { height: 44px; border: 0; background: none; color: var(--text); text-align: left; padding: 0 12px; border-radius: 8px; font-size: 15px; } #more-menu button:hover { background: var(--panel2); }
.mobile-only { display: none; }

@media (max-width: 899px) {
  :root { --rail: 0px; --top: 44px; --bottom: 58px; --list-w: 100%; --panel-w: 100%; }
  #app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  #rail { display: none; } #bottomnav { display: flex; }
  .mobile-only { display: inline-flex; }
  #bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom); background: var(--bg2); border-top: 1px solid var(--line); display: flex; z-index: 2000; padding-bottom: env(safe-area-inset-bottom); }
  #bottomnav .nav { flex: 1; width: auto; min-height: 0; height: 100%; border-radius: 0; font-size: 11px; gap: 1px; } #bottomnav .nav.on { box-shadow: inset 0 3px 0 var(--accent); }
  #main { padding-bottom: var(--bottom); }
  #topbar { gap: 4px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; } #topbar::-webkit-scrollbar { display: none; } .chip { height: 32px; padding: 0 7px; gap: 4px; } .chip .lbl { display: none; } #tb-gps .lbl { display: inline; } .chip.clock:last-of-type, #tb-range { display: none; }
  #alerts { left: 8px; right: 66px; transform: none; width: auto; min-width: 0; max-width: none; } #alerts .ah { font-size: 12px; }
  .tb-btn { height: 34px; min-width: 36px; }
  .sheet { position: absolute; left: 0; right: 0; bottom: var(--bottom); top: auto; height: 48vh; width: 100% !important; flex: none !important; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.45); transition: height .2s; order: 0; }
  .sheet.full { height: calc(100% - var(--bottom) - 8px); } .sheet.half { height: 48vh; } .sheet.peek { height: 108px; }
  .sheet-handle { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: 8px auto 2px; flex: 0 0 5px; cursor: grab; position: relative; }
  .sheet-handle::before { content: ''; position: absolute; left: -160px; right: -160px; top: -10px; height: 30px; }
  #list.closed { display: none; }
  #mapbtns { top: 56px; } #gpspanel { bottom: calc(var(--bottom) + 10px); width: calc(100% - 20px); left: 10px; }
  .raw { height: 100px; } .snr { height: 100px; }
  #replaybar { left: 6px; right: 6px; bottom: calc(var(--bottom) + 116px); padding: 6px 8px; gap: 6px; z-index: 1060; } #rp-speed { display: none; }
  #app[data-view="day"] .leaflet-bottom.leaflet-right { bottom: 176px; }
  #app[data-view="day"].sheet-open #replaybar { display: none !important; }
  .dt-keys { grid-template-columns: repeat(3, 1fr); } .dp-summary { grid-template-columns: repeat(4, 1fr); }
  .page-head { padding: 8px 10px; } .cards { padding: 8px; gap: 8px; grid-template-columns: 1fr; }
  table.vt { font-size: 12.5px; } table.vt th, table.vt td { padding: 6px 7px; }
  .toast { bottom: calc(var(--bottom) + 12px); }
}
@media (max-width: 899px) and (max-height: 640px) { .sheet.half { height: 56vh; } }

/* Raspberry Pi 7" (1024x600) and small laptops: keep the rail, tighten vertical space */
@media (min-width: 900px) and (max-height: 640px) {
  :root { --top: 44px; } .nav { min-height: 44px; } .nav .lb { display: none; }
  .raw { height: 90px; } .snr { height: 96px; } #gpspanel { bottom: 12px; } .dt-keys { padding: 4px 12px; } .act { height: 38px; }
}
@media (min-width: 900px) and (max-width: 1280px) {
  :root { --panel-w: 340px; --list-w: 290px; }
  .chip .lbl { font-size: 10.5px; } .chip { padding: 0 7px; }
}