/* Inšpekcia PK – vzhľad podľa návrhu obrazoviek (IBM Plex, tmavá hlavička, modrá/oranžová). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url(../vendor/fonts/ibm-plex-sans-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url(../vendor/fonts/ibm-plex-sans-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; src: url(../vendor/fonts/ibm-plex-sans-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; src: url(../vendor/fonts/ibm-plex-sans-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-sans-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-sans-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url(../vendor/fonts/ibm-plex-mono-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url(../vendor/fonts/ibm-plex-mono-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-mono-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-mono-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-sans-condensed-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; src: url(../vendor/fonts/ibm-plex-sans-condensed-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; src: url(../vendor/fonts/ibm-plex-sans-condensed-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; src: url(../vendor/fonts/ibm-plex-sans-condensed-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --bg: #F4F3EF;
  --panel: #FFFFFF;
  --ink: #1C1F24;
  --muted: #5A5F66;
  --line: #D9D6CE;
  --line-soft: #ECEAE4;
  --head: #1F2A33;
  --head-ink: #F4F3EF;
  --head-muted: #C9CFD4;
  --accent: #D97706;
  --blue: #1E4E8C;
  --blue-dark: #163A6A;
  --blue-soft: #E8EEF6;
  --orange: #C2410C;
  --warn-bg: #FFF4E5;
  --warn-line: #F0C48C;
  --hud: rgba(20, 24, 28, 0.78);
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --cond: "IBM Plex Sans Condensed", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 14px;
  display: grid; grid-template-rows: 56px minmax(0, 1fr); overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* header */
.topbar { background: var(--head); color: var(--head-ink); display: flex; align-items: stretch; gap: 28px; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.brand-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; }
.tabs { display: flex; gap: 2px; }
.tab { display: flex; align-items: center; padding: 0 14px; border: 0; background: none; color: var(--head-muted); font-weight: 500; border-bottom: 3px solid transparent; }
.tab[aria-selected="true"] { color: #fff; font-weight: 600; border-bottom-color: var(--accent); }
.tab:disabled { opacity: .45; cursor: default; }
.topbar-right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--head-muted); }
.pill { border: 1px solid #5B6770; border-radius: 999px; padding: 3px 10px; color: var(--head-ink); }

/* views */
.view { min-height: 0; }
#view-map { display: grid; grid-template-columns: clamp(220px, 19vw, 280px) minmax(0, 1fr) clamp(300px, 26vw, 380px); }
#view-video { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px); gap: 16px; padding: 16px; overflow-y: auto; }

.side { background: var(--panel); overflow-y: auto; min-height: 0; }
.side-left { border-right: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.side-right { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.project-name { font-family: var(--cond); font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; }

.ride-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 6px; border: 1px solid #E3DFD6; background: #fff; text-align: left; margin-bottom: 6px; }
.ride-btn[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); }
.ride-btn:disabled { cursor: not-allowed; opacity: .7; }
.ride-btn .t { font-weight: 600; }
.ride-btn .s { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ride-btn .warn { font-size: 12px; color: var(--orange); }

.layer { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.layer input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.layer .lbl { flex: 1; }
.layer .cnt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sw { flex-shrink: 0; display: inline-block; }
.sw-track { width: 18px; height: 5px; border-radius: 3px; background: var(--blue); }
.sw-photo { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.sw-hilight { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.sw-note { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }

.list-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #E3DFD6; border-radius: 6px; background: #fff; text-align: left; font-size: 13px; margin-bottom: 6px; }
.list-item[aria-current="true"] { border-color: var(--blue); background: var(--blue-soft); }
.list-item .time { font-family: var(--mono); color: var(--muted); }
.list-item .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .km { font-family: var(--mono); }
.empty { font-size: 13px; color: var(--muted); }

.notice { margin-top: auto; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.45; }

/* map */
.map-wrap { position: relative; min-width: 0; min-height: 0; }
.map { position: absolute; inset: 0; }
.map-hint { position: absolute; left: 14px; top: 14px; max-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 12px; color: var(--muted); line-height: 1.45; }
.map-hint b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--head); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

.mk { display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; padding: 0; }
.mk-hilight { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: 16px; }
.mk-note { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; }
.mk-trigger { width: 28px; height: 28px; border-radius: 7px; background: var(--head); color: #fff; }
.mk-trigger.rejected { opacity: .45; }
.sw-trigger { width: 12px; height: 12px; border-radius: 3px; background: var(--head); }
.mk[aria-current="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--blue); }
.maplibregl-marker.mk-pos { z-index: 3; }
.mk-pos { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--blue); box-shadow: 0 0 0 8px rgba(30,78,140,.18); pointer-events: none; position: relative; }
.mk-pos::after { content: ""; position: absolute; left: 50%; top: -14px; margin-left: -5px; border: 5px solid transparent; border-bottom: 8px solid var(--blue); transform-origin: 5px 23px; transform: rotate(var(--hdg, 0deg)); }
.mk-sel { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }

/* detail panel */
.detail-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.badge { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--head); color: #fff; }
.badge.photo { background: var(--blue-soft); color: var(--blue); }
.badge.hilight { background: var(--orange); }
.badge.note { background: var(--blue); }
.detail-title { font-family: var(--cond); font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; }
.detail-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.shot { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: #C9D6DE; aspect-ratio: 16 / 9; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(20,24,28,.8); color: var(--head-ink); font-family: var(--mono); font-size: 12px; padding: 5px 10px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 8px; margin: 0; }
.kv div { display: flex; flex-direction: column; gap: 1px; }
.kv dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; }
.kv .wide { grid-column: span 2; }
.note-text { background: var(--bg); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid #CFCBC1; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.btn-danger { color: #8F1D1D; border-color: #E0B4B4; }
.btn.grow { flex: 1; }
.fineprint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.derived { color: var(--orange); }

/* video view */
.video-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.video-wrap { position: relative; background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; max-height: calc(100vh - 56px - 32px - 60px - 200px - 24px); width: 100%; margin: 0 auto; }
.video-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.hud { position: absolute; background: var(--hud); color: var(--head-ink); border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.hud .small { font-size: 12px; color: var(--head-muted); }
.hud-tl { left: 16px; top: 16px; }
.hud-tl .big { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.hud-tr { right: 16px; top: 16px; align-items: flex-end; font-family: var(--mono); }
.hud-bl { left: 16px; bottom: 16px; }
.hud-bl .big { font-family: var(--mono); font-size: 36px; font-weight: 600; line-height: 1; }
.hud-bl .big small { font-size: 15px; font-weight: 500; }
.hud-bc { left: 50%; bottom: 16px; transform: translateX(-50%); flex-direction: row; align-items: center; gap: 12px; }
.hud-bc .gvals { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 12px; white-space: pre; }
.chart-imu-lbl { margin-top: 8px; align-items: center; }
.chart-imu-lbl select { min-height: 28px; margin-left: 8px; font-size: 12px; }
.hud-br { right: 16px; bottom: 16px; align-items: flex-end; font-family: var(--mono); font-size: 13px; }
.video-wrap.no-hud .hud { display: none; }
.video-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #eee; padding: 40px; font-size: 14px; line-height: 1.5; background: #111; }

.controls { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.controls .timeline { min-width: 180px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.icon-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.timecode { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.timeline { position: relative; flex: 1; height: 44px; cursor: pointer; touch-action: none; }
.timeline .rail { position: absolute; left: 0; right: 0; top: 20px; height: 5px; border-radius: 3px; background: #E3DFD6; }
.timeline .fill { position: absolute; left: 0; top: 20px; height: 5px; border-radius: 3px; background: var(--blue); }
.timeline .knob { position: absolute; top: 14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.timeline .tm { position: absolute; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: grid; place-items: center; }
.timeline .tm.hilight { background: var(--orange); }
.timeline .tm.note { background: var(--blue); }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
select.rate { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 6px; }

.chart-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.chart-box .lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.chart-box canvas { display: block; width: 100%; height: 64px; cursor: pointer; }
.timeline .tm.trigger { background: var(--head); border-radius: 3px; width: 10px; height: 10px; margin-left: -5px; top: 30px; }
.trig-count { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 30px; }
.trig-count .n { margin-left: auto; font-family: var(--mono); }
.trig-count .ico { width: 22px; height: 22px; border-radius: 5px; background: var(--head); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.trig-count .ico svg { width: 13px; height: 13px; }
.badge.trigger { background: var(--head); }
.badge.rejected { background: #8A8F96; }

.video-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.card-title button { border: 0; background: none; color: var(--blue); font-size: 13px; padding: 0; }
.mini-map { position: relative; height: 240px; border-radius: 6px; overflow: hidden; }
.events { flex: 1; min-height: 0; overflow: hidden; }
.events .scroll { overflow-y: auto; min-height: 0; flex: 1; }

/* summary view */
#view-summary { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; overflow: hidden; }
.sum-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sum-title { margin: 0; font-family: var(--cond); font-size: 28px; font-weight: 600; }
.sum-actions { margin-left: auto; }
.sum-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.sum-side { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.tile { border-radius: 8px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; background: var(--blue); color: #fff; font-weight: 600; }
.tile b { font-family: var(--mono); font-size: 26px; }
.tile.warn { background: var(--accent); color: var(--ink); }
.tile.muted-tile { background: #E3DFD6; color: var(--ink); }
.sum-side .notice { margin-top: 0; }
.sum-export { font-size: 13px; }
.sum-main { overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0 12px; }
.sum-h2 { font-size: 14px; font-weight: 600; margin: 12px 16px 8px; }
.tbl .tr { display: grid; gap: 12px; padding: 8px 16px; align-items: center; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tbl .th { background: var(--head); color: var(--head-ink); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tbl button.tr { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; text-align: left; }
.tbl button.tr:hover { background: var(--blue-soft); }
.tbl-notes .tr { grid-template-columns: 50px 90px 70px 190px minmax(0, 1fr) 96px; }
.tbl-trig .tr { grid-template-columns: 50px 210px 90px 70px minmax(0, 1fr) 130px 120px; }
.tbl-jn .tr { grid-template-columns: 50px 200px 90px minmax(0, 1fr) 150px 96px 128px; }
.tbl-br .tr { grid-template-columns: 150px 36px minmax(0, 1fr) 90px 80px 90px 90px 70px 160px; }
.tbl-br .tr > img { width: 160px; height: auto; }
.tbl-jn img + img, .tbl-jn .tr > img:last-child { width: 128px; height: 80px; }
.tbl img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; display: block; }
.st-open { color: #8A4A00; font-weight: 600; }
.st-rej { color: var(--muted); }

/* dialog */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(640px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(20,24,28,.45); }
.dlg-head { padding: 18px 22px 10px; }
.dlg-head h2 { margin: 0; font-family: var(--cond); font-size: 24px; font-weight: 600; }
.dlg-body { padding: 8px 22px 16px; display: flex; flex-direction: column; gap: 14px; }
.dlg-top { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; align-items: start; }
.dlg-top .shot { aspect-ratio: 16 / 9; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.field textarea { min-height: 110px; padding: 8px 10px; border: 1px solid #CFCBC1; border-radius: 6px; font-weight: 400; line-height: 1.4; resize: vertical; }
.dlg-foot { padding: 12px 22px 18px; display: flex; justify-content: flex-end; gap: 10px; }
.err { color: #8F1D1D; font-size: 13px; }

.maplibregl-ctrl-attrib { font-size: 11px; }

/* stage 2: chainage, deficits */
.stn { display: flex; flex-direction: column; gap: 8px; }
.stn-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.stn-f input, .stn-f select { min-height: 36px; border: 1px solid #CFCBC1; border-radius: 6px; padding: 0 8px; background: #fff; color: var(--ink); font-size: 14px; }
.stn-pt { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.stn-pt .v { font-family: var(--mono); font-weight: 600; }
.stn-pt .d { font-family: var(--mono); color: var(--muted); font-size: 12px; flex: 1; }
.stn-pt button { border: 0; background: none; color: #8F1D1D; font-size: 12px; padding: 4px; }
.sw-deficit { width: 12px; height: 12px; border-radius: 3px; background: #8F1D1D; }
.mk-deficit { width: 30px; height: 30px; border-radius: 7px; }
.mk-km { background: #fff; border: 2px solid var(--ink); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.risk-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.badge.deficit { color: #fff; }
.wide-dlg { width: min(860px, 94vw); }
.wide-dlg .dlg-top { grid-template-columns: minmax(0, 1fr) 220px; }
.kv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field select, .field input { min-height: 40px; border: 1px solid #CFCBC1; border-radius: 6px; padding: 0 10px; font-weight: 400; background: #fff; }
.field textarea { min-height: 70px; }
.risk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.risk-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 70px; padding: 9px 11px; border-radius: 6px; text-align: left; background: #fff; border: 2px solid #E3DFD6; font-weight: 400; }
.risk-btn b { font-size: 14px; }
.risk-btn span { font-size: 12px; line-height: 1.35; }
details.client { border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px 12px; }
details.client summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.client-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.def-text { background: var(--bg); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.def-text b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.tile.risk-vysoka { background: #8F1D1D; }
.tile.risk-stredna { background: #D97706; color: var(--ink); }
.tile.risk-nizka { background: #FDE68A; color: var(--ink); }
.tbl-def .tr { grid-template-columns: 70px 90px 90px minmax(0, 1fr) 190px 96px; }
.tbl .grp { padding: 9px 16px; font-size: 14px; font-weight: 600; }
.tbl .sub { padding: 6px 16px; background: var(--bg); font-size: 13px; font-weight: 600; border-bottom: 1px solid #E3DFD6; }

/* stage 3: accidents */
.sw-accident { width: 11px; height: 11px; border-radius: 50%; background: #B91C1C; border: 2px solid #fff; box-shadow: 0 0 0 1px #B91C1C; }
.sw-hotspot { width: 18px; height: 9px; border-radius: 5px; background: rgba(185, 28, 28, .35); }
#view-accidents { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; overflow: hidden; }
.acc-body { grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 16px; }
.acc-analysis .stn-f input, .acc-analysis .stn-f select { width: 100%; min-width: 0; }
.small { font-size: 12px; }
.acc-filter { min-width: 170px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset.costs { border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px 10px 10px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
fieldset.costs legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.tbl-acc .tr { grid-template-columns: 12px 92px 100px minmax(0, 1fr) 76px; gap: 10px; padding: 7px 12px; }
.tbl-acc .tr.excluded { opacity: .5; }
.sev-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.sev-dot.review { background: #fff !important; border: 2.5px solid; box-sizing: border-box; }
.st-review { color: #8A4A00; font-weight: 600; }
.acc-imp { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.acc-imp .h { font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; }
.acc-imp button { align-self: flex-start; border: 0; background: none; color: #8F1D1D; font-size: 12px; padding: 2px 0; }
.acc-res { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.acc-res .m { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.acc-res .m b { font-family: var(--mono); }
.acc-res .sec { font-family: var(--mono); font-size: 12px; }
.acc-res .na { color: var(--muted); font-size: 12px; }
.acc-res .final { background: #FDECEC; border: 1px solid #F3B7B7; border-radius: 6px; padding: 8px 10px; }
.acc-res .final button { border: 0; background: none; color: var(--blue); font-family: var(--mono); font-size: 12px; padding: 1px 0; text-align: left; }
.acc-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.acc-map .stn-f select { min-height: 32px; font-size: 13px; }
.acc-map .stn-f.set select { border-color: var(--blue); background: var(--blue-soft); }
.acc-personal { background: var(--blue-soft); border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.45; }
.acc-sample-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.acc-sample { display: table; border-collapse: collapse; font-size: 12px; }
.acc-sample .r { display: table-row; }
.acc-sample .c { display: table-cell; padding: 4px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.acc-sample .r.h .c { background: var(--head); color: var(--head-ink); font-weight: 600; }
.acc-sample .c.used { background: var(--blue-soft); }
.acc-sample .r.h .c.used { background: var(--blue); }
.acc-sample .c.personal { color: #8A8F96; text-decoration: line-through; }
.acc-check { font-size: 13px; line-height: 1.5; }
.acc-check ul { margin: 4px 0 0; padding-left: 18px; max-height: 150px; overflow-y: auto; font-size: 12px; }
.tbl-def .tr { grid-template-columns: 70px 90px 90px minmax(0, 1fr) 190px 64px 96px; }
.badge.accident { background: #B91C1C; }
.problems { margin: 0; padding-left: 18px; font-size: 13px; color: #8A4A00; }
.linkish { border: 0; background: none; padding: 0; color: var(--blue); font-family: var(--mono); font-size: 13px; text-align: left; cursor: pointer; }
.tbl-acc .tr > span:nth-child(2) { white-space: nowrap; }
.map.placing .maplibregl-marker { pointer-events: none; }
.map.placing .maplibregl-canvas-container canvas { cursor: crosshair !important; }
.video-detail { position: relative; padding: 0; max-height: 55%; overflow-y: auto; flex-shrink: 0; }
.video-detail .detail-head { padding: 12px 36px 10px 14px; }
.video-detail .detail-title { font-size: 18px; }
.video-detail .detail-body { padding: 10px 14px 14px; gap: 10px; }
.video-detail .shot { display: none; }
.vd-close { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; font-size: 20px; color: var(--muted); z-index: 1; }
.vd-close:hover { background: var(--bg); }
.events .list-item[aria-current="true"] { border-color: var(--blue); background: var(--blue-soft); }
.shot img, .tbl img { cursor: zoom-in; }
dialog.img-dlg { width: auto; max-width: 96vw; max-height: 96vh; padding: 0; background: #111418; overflow: hidden; cursor: zoom-out; }
dialog.img-dlg::backdrop { background: rgba(10, 12, 14, .85); }
.img-dlg img { display: block; max-width: 96vw; max-height: calc(96vh - 36px); object-fit: contain; }
.img-dlg .img-cap { margin: 0; padding: 8px 12px; color: var(--head-ink); font-family: var(--mono); font-size: 13px; min-height: 36px; box-sizing: border-box; }
.img-dlg .img-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(20,24,28,.7); color: #fff; font-size: 22px; }
.pill-link { text-decoration: none; background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.pill-link:hover { filter: brightness(1.08); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.add-ride-btn { width: 100%; min-height: 36px; margin-top: 6px; font-size: 13px; }
.dlg-err { display: block; padding: 0 22px; }
.stn-pt { flex-wrap: wrap; row-gap: 0; }
.stn-pt .d { order: 3; flex-basis: 100%; }
.photo-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.photo-nav .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.photo-nav .btn:disabled { opacity: .45; }
.photo-nav span { text-align: center; font-size: 12px; }
.img-dlg .img-nav { position: absolute; top: calc(50% - 36px); width: 48px; height: 72px; border: 0; border-radius: 8px; background: rgba(20,24,28,.55); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.img-dlg .img-nav:hover { background: rgba(20,24,28,.8); }
.img-dlg .img-prev { left: 10px; }
.img-dlg .img-next { right: 10px; }
#btn-km-here { width: 100%; flex: none; min-height: 40px; }
.mk-km { pointer-events: auto; cursor: pointer; }
.mk-km[aria-current="true"] { background: var(--accent); border-color: var(--ink); }
.stn-pt { cursor: pointer; border-radius: 4px; }
.stn-pt:hover { background: var(--blue-soft); }
.stn-pt[aria-current="true"] { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); padding-left: 6px; }
.stn-btn { min-height: 34px; font-size: 13px; padding: 0 12px; }
.stn-sel { min-height: 34px; border: 1px solid #CFCBC1; border-radius: 6px; padding: 0 6px; background: #fff; font-size: 12px; flex: 1; min-width: 0; }
.axis-card { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); background: var(--blue-soft); border: 1px solid #C9D6E8; border-radius: 6px; padding: 8px 10px; }
.axis-card b { color: var(--ink); font-size: 13px; }
.axis-card .row { margin-top: 4px; gap: 6px; }
.axis-card.off { background: var(--bg); border-color: var(--line); opacity: .8; }
.stn-sub { margin: 4px 0 0; }
.sw-post { width: 16px; height: 12px; border-radius: 2px; background: #fff; border: 2px solid #2F6B3A; }
.mk-post { background: #fff; border: 2px solid #2F6B3A; color: #2F6B3A; border-radius: 3px; padding: 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; cursor: help; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.axis-card .row { flex-wrap: wrap; }
.axis-card .stn-sel { flex-basis: 100%; }

/* ---- junction inspection ---- */
#view-junctions { display: grid; grid-template-columns: clamp(220px, 19vw, 280px) minmax(0, 1fr) clamp(300px, 26vw, 380px); min-height: 0; }
#view-junctions .jn-col { padding: 16px; overflow-y: auto; }
#view-junctions .jn-side { padding: 16px 16px 16px 0; overflow-y: auto; }
.jn-player { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jn-rec-f { min-width: 260px; }
.jn-empty { max-width: 520px; margin: 12vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.jn-item .txt { white-space: normal; line-height: 1.3; }
.jn-item .km { min-width: 22px; text-align: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.jn-acts { display: flex; gap: 12px; }
.jn-acts .danger { color: #8F1D1D; }
.jm-detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; padding: 4px 2px 14px; }
.jm-detail .jm-text { display: flex; flex-direction: column; gap: 10px; }
.jm-detail .row { flex-wrap: wrap; }
.jm-detail .kv { grid-template-columns: minmax(0, 1fr); }
.jn-marks-card .list-item .txt { white-space: normal; }
.jn-sug { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mk-jn { width: 22px; height: 22px; border-radius: 4px; background: var(--orange); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--orange), 0 1px 3px rgba(0,0,0,.35); transform: rotate(45deg); }
#jn-timeline .tm { cursor: pointer; border: 0; padding: 0; }
.jn-hud-dir { color: #F0B35A; font-weight: 600; }
.jn-dir-card canvas { width: 100%; height: 96px; display: block; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid #CFCBC1; border-radius: 6px; overflow: hidden; flex: none; }
.card-title .seg button { padding: 3px 10px; color: var(--ink); font-size: 12px; border-radius: 0; }
.card-title .seg button + button { border-left: 1px solid #CFCBC1; }
.card-title .seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.card-title .seg button:disabled { color: #A9A59C; cursor: not-allowed; }
.jn-dir-hits { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.jn-dir-hits button { border: 1px solid var(--blue); background: var(--blue-soft); color: var(--blue); border-radius: 12px; padding: 2px 10px; font-family: var(--mono); font-size: 12px; }
.jn-north-list { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.jn-north-list .np { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.jn-north-list .np button { border: 0; background: none; color: #8F1D1D; font-size: 12px; padding: 0; }
.mk-jm { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; }
.mk-jm[aria-current="true"] { background: var(--orange); }
@media (max-width: 1100px) {
  #view-junctions { grid-template-columns: 220px minmax(0, 1fr); }
  #view-junctions .jn-side { grid-column: 1 / -1; padding: 0 16px 16px; }
}

/* ---- inspection team and equipment (wizard + Súhrn) ---- */
.teamform { display: flex; flex-direction: column; gap: 16px; }
.tf-sec { display: flex; flex-direction: column; gap: 8px; }
.tf-h { font-weight: 600; font-size: 14px; }
.tf-team { display: flex; flex-direction: column; gap: 6px; }
.tf-row { display: grid; grid-template-columns: 1.2fr 1.3fr 0.8fr 1fr 28px; gap: 6px; align-items: center; }
.tf-row.tf-head span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.teamform input, .teamform textarea { min-height: 36px; border: 1px solid #CFCBC1; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.teamform textarea { resize: vertical; width: 100%; box-sizing: border-box; }
.tf-del { border: 0; background: none; color: #8F1D1D; font-size: 20px; line-height: 1; cursor: pointer; }
.tf-add { align-self: flex-start; min-height: 32px; font-size: 13px; }
.tf-equip { display: flex; flex-direction: column; gap: 10px; }
.tf-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #FCFBF8; }
.tf-item-top { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.tf-photos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tf-photos figure { margin: 0; position: relative; width: 120px; height: 80px; border-radius: 6px; overflow: hidden; background: #E3DFD6; }
.tf-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-photos figure button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(20,24,28,.75); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.tf-addphoto { display: grid; place-items: center; width: 120px; height: 80px; border: 1px dashed #A9A59C; border-radius: 6px; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; }
.tf-sum { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; font-size: 13px; line-height: 1.4; }
/* road-databank (CDB) data */
#cdb-status .stn-btn { width: 100%; }
.cdb-head { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.cdb-job { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cdb-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.cdb-bar div { height: 100%; background: var(--blue); transition: width .3s; }
.sw.cdb-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.sw.cdb-dash { width: 18px; height: 0; border-top: 3px dashed; }
.sw.cdb-band-sw { width: 18px; height: 9px; border-radius: 2px; background: linear-gradient(90deg, #16A34A, #EAB308, #DC2626); opacity: .7; }
.sw.cdb-none { width: 18px; height: 1px; background: var(--line); }
.cdb-band-sel { margin-top: 6px; }
.cdb-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.cdb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cdb-group { border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 12px 8px; margin: 0 0 10px; }
.cdb-group legend { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.cdb-theme { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.cdb-theme:last-child { border-bottom: 0; }
.cdb-theme input { margin-top: 3px; accent-color: var(--blue); }
.cdb-theme .sw { margin-top: 4px; }
.cdb-theme .t { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cdb-theme .t b { font-weight: 600; }
.cdb-theme small { color: var(--muted); font-size: 12px; }
.cdb-theme .warn { color: var(--orange); font-size: 12px; }
#cdb-themes { max-height: 56vh; overflow: auto; }
.dlg-foot .grow { flex: 1; }
.cdb-here { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
#cdb-here .cdb-here { border-top: 0; padding-top: 0; }
.cdb-here-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cdb-here-row .sw { margin-top: 4px; }
.cdb-here-row > div { display: flex; flex-direction: column; min-width: 0; }
.cdb-here-row .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cdb-link { border: 0; background: none; padding: 1px 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.cdb-link:hover { color: var(--blue); text-decoration: underline; }
.badge.cdb { color: #fff; }
.cdb-nomap { cursor: default; }
.cdb-nobox { width: 16px; flex-shrink: 0; }
.cdb-nomap .lbl small { display: block; font-size: 11px; color: var(--muted); }
.cdb-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid var(--line); padding: 6px 10px 2px; }
.cdb-strip canvas, canvas.cdb-strip-canvas { display: block; width: 100%; cursor: pointer; }
.sw.cdb-strip-sw { width: 18px; height: 11px; background: repeating-linear-gradient(180deg, #16A34A 0 3px, #fff 3px 4px, #2563EB 4px 7px, #fff 7px 8px, #374151 8px 11px); }
.def-cdb { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: -6px; }
.traffic-eyebrow { margin-top: 14px; }
.traffic-row { display: flex; flex-direction: column; font-size: 13px; margin-bottom: 6px; }
.traffic-row span { color: var(--muted); font-size: 12px; }
#traffic-sum .stn-btn { width: 100%; }
.traffic-top { align-items: flex-end; }
.traffic-maps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip.on { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.traffic-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.traffic-tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.traffic-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; }
.traffic-tbl td.acts { text-align: right; white-space: nowrap; font-family: var(--sans); }
.traffic-tbl td.acts .btn { padding: 3px 10px; min-height: 0; font-size: 12px; }
.traffic-tbl tr.off td { color: var(--muted); }
#traffic-cands { max-height: 34vh; overflow: auto; }
.traffic-add { align-items: flex-end; }
.traffic-add .grow { flex: 1; }
#traffic-dlg .linkish { font: inherit; text-decoration: underline; }
.prop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-right: 16px; }
.prop-help { margin: 0 16px 10px; }
.prop-list { display: flex; flex-direction: column; gap: 8px; margin: 0 16px 18px; }
.prop-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 250px; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.prop-row.missing { box-shadow: inset 4px 0 0 var(--accent); }
.prop-def { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.prop-def .muted { flex-basis: 100%; font-size: 12px; }
.prop-def .linkish { font-weight: 600; }
.risk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.prop-row textarea { width: 100%; min-height: 54px; resize: vertical; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box; }
.prop-side { display: flex; flex-direction: column; gap: 6px; }
.prop-side select { font: inherit; font-size: 13px; padding: 5px 6px; }
.prop-state { font-size: 12px; color: var(--muted); min-height: 16px; }
.prop-state.ok { color: #15803D; }
.prop-state.err { color: var(--orange); }
#sum-prop-tile { cursor: pointer; }
#sum-prop-tile.warn b { color: var(--accent); }
#view-brakes { display: grid; grid-template-columns: clamp(220px, 19vw, 280px) minmax(0, 1fr) clamp(300px, 26vw, 380px); min-height: 0; }
#view-brakes .br-col { padding: 16px; overflow-y: auto; min-width: 0; }
#view-brakes .br-side { padding: 16px 16px 16px 0; overflow-y: auto; }
.br-main { display: flex; flex-direction: column; gap: 12px; }
.br-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.br-ev { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.br-ev.off { opacity: .6; }
.br-ev-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.br-ev-head b { font-size: 15px; }
.br-ev img.graph { width: 100%; height: auto; border: 1px solid var(--line-soft); border-radius: 4px; }
.br-ev-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.br-ev-body .shot img { width: 100%; border-radius: 4px; }
.br-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.br-metrics div { display: flex; flex-direction: column; }
.br-metrics dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.br-metrics dd { margin: 0; font-family: var(--mono); font-size: 14px; }
.br-metrics dd.big { font-size: 18px; font-weight: 600; }
#br-map { height: 260px; position: relative; }

/* Príprava: section from the road databank before the ride */
#view-prep { display: grid; grid-template-columns: clamp(220px, 19vw, 280px) minmax(0, 1fr) clamp(300px, 26vw, 380px); min-height: 0; }
#view-prep .prep-col { padding: 16px; overflow-y: auto; min-width: 0; }
#view-prep .prep-side { padding: 16px 16px 16px 0; overflow-y: auto; }
.prep-form { display: flex; flex-direction: column; gap: 10px; }
.prep-km { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prep-km .field input { min-width: 0; width: 100%; }
.prep-job .jstep { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.prep-job .ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #E3DFD6; }
.prep-job .bezi .ico { background: var(--blue); color: #fff; }
.prep-job .hotovo .ico { background: #2F6B3A; color: #fff; }
.prep-job .chyba .ico { background: #8F1D1D; color: #fff; }
.prep-job .l { font-weight: 600; font-size: 13px; }
.prep-job .msg { font-size: 12px; color: var(--muted); line-height: 1.35; }
.prep-job .chyba .msg { color: #8F1D1D; }
.prep-job .pct { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--muted); }
.prep-job .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.prep-job .bar i { display: block; height: 100%; background: var(--blue); transition: width .4s; }
.prep-docs .list-item .txt { white-space: normal; }
.prep-sheets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.prep-main { display: flex; flex-direction: column; gap: 12px; }
.prep-main .notice { margin-top: 0; }
.prep-map { height: clamp(320px, 52vh, 620px); position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.prep-layers { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.prep-layers label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.prep-sec { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.prep-sec h3 { margin: 0; font-size: 15px; display: inline; }
.prep-sec summary { cursor: pointer; }
.prep-lists { display: flex; flex-direction: column; gap: 12px; }
.prep-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.prep-tbl th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.prep-tbl td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prep-tbl .n { font-family: var(--mono); text-align: right; white-space: nowrap; }
.prep-tbl tr.off td { color: var(--muted); }
.prep-rows tr { cursor: pointer; }
.prep-rows tr:hover td, .prep-rows tr.active td { background: var(--blue-soft); }
.prep-rows td.acts { text-align: right; white-space: nowrap; }
.prep-rows td.acts .linkish { font-family: var(--sans); font-size: 12px; margin-left: 8px; }
.prep-rows td.acts .btn { margin-left: 8px; }
#view-prep .linkish { text-decoration: underline; }
.prep-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.prep-links .linkish { font-family: var(--sans); font-size: 12px; }
.prep-badge { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: 12px; border-radius: 4px; padding: 2px 4px; color: #fff; background: #C81E2D; }
.prep-badge.obj { background: #1E4E8C; }
.prep-info { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.prep-info dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.prep-info dd { margin: 0; font-size: 13px; line-height: 1.35; }
.prep-plan { margin: 0; font-size: 13px; line-height: 1.45; }
.prep-check { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.prep-objinfo { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0; }
.btn.btn-sm { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.pr-mk { border: 0; padding: 0; cursor: default; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
button.pr-mk { cursor: pointer; }
.pr-mk.km { background: #fff; border: 1px solid var(--ink); border-radius: 3px; font-size: 11px; padding: 0 4px; line-height: 15px; font-weight: 600; box-shadow: none; }
.pr-mk.jn { background: #fff; border: 3px solid #C81E2D; color: #C81E2D; border-radius: 14px; font-size: 12px; min-width: 34px; line-height: 18px; text-align: center; }
.pr-mk.jn.taken { background: #C81E2D; color: #fff; }
.pr-mk.obj { background: #1E4E8C; color: #fff; border: 1px solid #fff; border-radius: 3px; font-size: 11px; line-height: 17px; padding: 0 4px; }
.pr-mk.obj.small { background: #5A7FB0; font-size: 10px; line-height: 14px; }
.pr-mk.end { width: 28px; height: 28px; border-radius: 50%; background: #111827; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-size: 13px; }
.pr-mk.end.start { background: #16803D; }
.pr-mk.rad { width: 22px; height: 22px; border-radius: 50%; background: #111827; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-size: 11px; }
.acc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.prep-tbl tr[data-fly] { cursor: pointer; }
.prep-tbl tr[data-fly]:hover td { background: var(--blue-soft); }
@media (max-width: 1100px) {
  #view-prep { grid-template-columns: 220px minmax(0, 1fr); }
  #view-prep .prep-side { grid-column: 1 / -1; padding: 0 16px 16px; }
}

/* typical measures (dialog over the deficit form and the Summary list) */
.def-meas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -6px; }
#meas-dlg { width: min(920px, 94vw); }
.meas-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.meas-tools input { min-height: 40px; border: 1px solid #CFCBC1; border-radius: 6px; padding: 0 10px; font-weight: 400; }
.meas-list { max-height: min(56vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.meas-sec h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.meas-sec .fineprint { margin: 0 0 6px; }
.meas-row { display: flex; gap: 8px; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.meas-row.editing { flex-direction: column; padding: 8px 0; }
.meas-pick { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 8px 6px; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; font: inherit; color: var(--ink); }
.meas-pick:hover, .meas-pick:focus-visible { background: var(--blue-soft); outline: none; }
.meas-text { font-size: 14px; line-height: 1.4; }
.meas-basis { font-size: 12px; color: var(--muted); }
.meas-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.meas-tag { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; color: var(--muted); background: #fff; }
.meas-tag.h { border-color: #B8C7DD; color: var(--blue); }
.meas-tag.a { border-color: var(--warn-line); color: #8A4A00; }
.meas-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meas-acts .linkish { font-family: var(--sans); font-size: 12px; text-decoration: underline; }
.meas-acts .danger { color: #8F1D1D; }
.meas-edit { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #CFCBC1; border-radius: 6px; resize: vertical; }
.meas-edit-h { font: inherit; font-size: 13px; padding: 4px 6px; }
.prop-side .btn-sm { align-self: flex-start; }
@media (max-width: 700px) { .meas-tools { grid-template-columns: 1fr; } }

/* moving a junction video to another junction */
.jn-recrow { display: block; }
.jn-recrow .linkish { font-family: var(--sans); font-size: 12px; text-decoration: underline; margin-left: 6px; }
.jv-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.jv-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; line-height: 1.35; }
.jv-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.jv-opt input { margin-top: 2px; }
.jv-tag { font-size: 11px; color: var(--muted); background: #EEF2F7; border-radius: 3px; padding: 0 5px; }
.jv-new { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 6px; }
#jv-dlg .dlg-body { display: flex; flex-direction: column; gap: 10px; }
#jv-dlg label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }

/* server version (tp092 serve): signed-in user, desktop-only controls hidden */
.pill-btn { background: none; font: inherit; font-size: inherit; cursor: pointer; }
.pill-btn:hover { border-color: var(--head-ink); }
.pill-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); font-weight: 600; }
body.server [data-desktop] { display: none !important; }
.tbl-users .tr { grid-template-columns: minmax(0, 1fr) 160px 110px 170px 100px; }
@media (max-width: 720px) {
  .tbl-users .tr { grid-template-columns: minmax(0, 1fr) 90px; }
  .tbl-users .tr > span:nth-child(2), .tbl-users .tr > span:nth-child(4) { display: none; }
}