/* Inter, self-hosted (OFL, LICENSE-Inter.txt beside it). Our CSP allows only
   our own origin, so no font CDN. latin-ext carries Czech (ř ě ů) and German;
   greek (30.9.2026) carries the Greek interface. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-greek-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Palette from Petr's prototype (22.9.2026): a deep forest for chrome, one
       working green, and green-tinted neutrals instead of cool greys. Every
       rule below that uses these tokens follows automatically. */

    /* ── Brand (GreenPedal) — one green + shades ─────────────────────────── */
    --brand: #208536;          /* primary fills, gauges, active nav */
    --brand-strong: #17692b;   /* hover, links on white */
    --brand-tint: #eef5ef;     /* pale green surfaces */
    --brand-light: #8fd694;    /* accents on the forest background */
    --forest: #0c3b28;         /* sidebar / chrome */

    /* ── Status (reserved: good / warning / critical) ───────────────────── */
    --good: #16a34a;
    --warn: #c98a12;
    --crit: #dc2626;
    --danger: #e23b3b;         /* badges / logout */

    /* ── Ink (text) ─────────────────────────────────────────────────────── */
    --ink: #102c24;
    --ink-2: #2f4a41;
    --ink-muted: #61716a;
    --ink-faint: #9aa8a1;      /* stale / placeholder values */

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --surface: #ffffff;
    --surface-2: #f1f4f1;
    --surface-page: #f4f6f2;
    --sidebar-ink: #102c24;

    /* ── Borders / gauge track ──────────────────────────────────────────── */
    --border: #e0e8e1;
    --border-strong: #cfdad1;
    --track: #e5ebe6;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 20px; --fs-xl: 28px;
    --lh: 1.5;
    --fw-med: 600; --fw-bold: 700;

    /* ── Spacing / radius / shadow ──────────────────────────────────────── */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
    --radius: 12px; --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 44, 36, 0.05);
    --shadow-md: 0 4px 16px rgba(16, 44, 36, 0.08);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    line-height: var(--lh);
    background: var(--surface-page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
}

.layout {
    display: flex;
    min-height: 100vh;
}

/* Forest sidebar: Petr's prototype puts the navigation on a deep green bar.
   Kept as a SIDEBAR rather than his top header for now — the header would
   touch every page and every role-dependent link a week before his fund
   presentation; see PROJECT_SUMMARY 2026-09-26. */
.sidebar {
    width: 330px;
    background: var(--forest);
    border-right: 1px solid var(--forest);
    display: flex;
    flex-direction: column;
    padding-top: 18px;
    flex-shrink: 0;
}

.sidebar-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 28px;
}

.sidebar-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.sidebar-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.sidebar--open .sidebar-hamburger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.sidebar--open .sidebar-hamburger span:nth-child(2) {
    opacity: 0;
}

.sidebar--open .sidebar-hamburger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.sidebar-logo {
    padding: 20px 28px 26px 28px;
}

.sidebar-logo-image {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 14px;
}

.sidebar-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 500;
    border-right: 6px solid transparent;
    background: transparent;
    display: block;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-right-color: var(--brand-light);
}

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-right-color: var(--brand-light);
}

/* The nav icons are dark SVG <img>s; on the forest they are drawn white. */
.sidebar .sidebar-icon {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
.sidebar-link.active .sidebar-icon,
.sidebar-link:hover .sidebar-icon {
    opacity: 1;
}

.sidebar-link-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e23b3b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.notif-ack-info {
    font-size: 12px;
    color: var(--ink-muted);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.gallery-item {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.gallery-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--surface-2);
}
.gallery-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--ink-2);
}
.gallery-download {
    color: var(--brand);
    text-decoration: none;
    font-size: 15px;
}
.gallery-download:hover {
    color: var(--brand-strong);
}

.retention-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.retention-days-input {
    width: 90px;
}

.sidebar-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.sidebar-bookmark-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
}
.sidebar-external-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
}
.sidebar-signout-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
}
.sidebar-account-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
}
.sidebar-nodes-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
}
.main-content {
    flex: 1;
    padding: 28px 30px 40px 30px;
    overflow-x: auto;
}

.page {
    width: 100%;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

/* Lead-in line above the data-outage log table. */
.outages-intro {
    margin: -8px 0 18px 0;
    max-width: 70ch;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
}

.page-title {
    margin: 0 0 26px 0;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}

.outline-button,
.star-button,
.mini-button {
    border: 1px solid var(--brand);
    color: var(--brand);
    border-radius: 8px;
    cursor: pointer;
}

.outline-button {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.outline-button:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

.star-button {
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.mini-button {
    width: 34px;
    height: 34px;
    font-size: 22px;
}

.top-cards {
    display: grid;
    grid-template-columns: 1.38fr 1.38fr 0.54fr;
    gap: 18px;
    margin-bottom: 18px;
}
.card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-title,
.section-title {
    margin: 0 0 18px 0;
    font-size: 23px;
    font-weight: 700;
}

.summary-content {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.summary-block {
    flex: 1;
    text-align: right;
}

.summary-number {
    font-size: 54px;
    font-weight: 400;
    margin-bottom: 6px;
}

.summary-label {
    font-size: 13px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.summary-card .summary-number {
    line-height: 1;
}
.notifications-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
}

.notification-icon-wrap {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.notification-bell-icon {
    width: 74px;
    height: 74px;
    display: block;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 44px;
    background: var(--brand);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-line {
    height: 4px;
    background: var(--brand);
    border-radius: 999px;
    margin-top: 10px;
}

.map-card {
    min-height: 420px;
}

.map-placeholder {
    height: 340px;
    border-radius: 10px;
    background: #d8e6d2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b6470;
    font-size: 24px;
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
}

.simple-table th,
.simple-table td {
    text-align: left;
    padding: 14px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
}

.simple-table th {
    font-weight: 700;
}

.simple-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.simple-table tbody tr:hover {
    background: var(--brand-tint);
}

.overview-row {
    cursor: pointer;
    transition: background 0.12s;
}

.overview-row-arrow {
    text-align: right;
    color: var(--brand);
    font-size: 20px;
    font-weight: 600;
    padding-right: 8px;
    width: 30px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 18px;
}

.small-card {
    min-height: 170px;
}

.medium-card {
    min-height: 150px;
}

.energy-card {
    min-height: 315px;
}

.big-status {
    font-size: 34px;
    font-weight: 600;
    margin-top: 28px;
}

.two-metrics {
    display: flex;
    gap: 24px;
    margin-top: 22px;
}

.small-number {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.small-label {
    font-size: 13px;
    color: var(--ink-muted);
}

.energy-layout {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

.battery-circle,
.circle-metric {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 18px solid var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    background: #ffffff;
}

.energy-side-metrics {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
}

.energy-metric {
    height: 62px;
    border-radius: 50px;
    border: 8px solid var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    max-width: 180px;
}

.camera-card {
    grid-column: 1 / span 2;
    min-height: 360px;
}
.camera-lower {
    margin-top: 88px;
}

/* One or more camera feeds inside a single camera card. A single camera fills
   the width (identical to before); two or more split into responsive columns. */
.camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 16px;
    row-gap: 34px;   /* extra vertical separation when panes stack */
    align-items: start;
}
.camera-pane {
    min-width: 0;
}
/* Breathing room below each camera image / placeholder. */
.camera-pane > img,
.camera-pane > .camera-placeholder {
    margin-bottom: 18px;
}
.camera-capture-dropdown {
    display: inline-block;
}
.camera-capture-status {
    font-size: 13px;
    color: #444;
    margin-top: 8px;
}
.camera-capture-status a {
    color: var(--brand-strong);
    font-weight: 600;
}
/* Narrow side-by-side panes can't fit title + controls on one row, so stack
   them. Single-camera cards keep the original inline header. */
.camera-card-multi .camera-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.camera-card-multi .camera-controls {
    flex-wrap: wrap;
}
/* Put the (wide) timestamp on its own row so the control buttons stay grouped. */
.camera-card-multi .camera-timestamp {
    flex-basis: 100%;
}

.camera-card .camera-placeholder {
    height: 255px;
}

/* Stats-only pane inside a camera card (the strict-country exterior camera).
   It reuses the summary-card markup, whose .summary-number is 54px — sized for a
   full-width card. Dropped into a ~220px camera column, two of those overflow
   the grid track and squeeze the sibling camera image down to a thumbnail:
   Petr, 2026-09-06, "jak ti vypadla ta jedna kamera tak se rozsypal layout te
   stranky". Scale the numbers to the pane, let them wrap, and give the pane the
   same height as a camera image so the two columns line up. */
.camera-stats-panel {
    min-height: 255px;
    padding: 18px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.camera-stats-panel .summary-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    width: 100%;
}
.camera-stats-panel .summary-block {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}
.camera-stats-panel .summary-number {
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.camera-stats-panel .summary-label {
    font-size: 11px;
}

.camera-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.camera-card-header .card-title {
    margin-bottom: 0;
}

.camera-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.camera-timestamp {
    font-size: 13px;
    color: #888;
    font-weight: 300;
}

.ru-btn-dark {
    color: #212529;
    border: 1px solid #212529;
}

.ru-btn-dark:hover {
    background: #212529;
    color: #fff;
}

.ru-btn-active {
    background: #212529;
    color: #fff;
}

/* Green Bootstrap tooltip matching original bb-tooltip-success */
.bb-tooltip-success .tooltip-inner {
    background-color: var(--brand);
    color: #fff;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    max-width: 200px;
}

.bb-tooltip-success.bs-tooltip-top .tooltip-arrow::before,
.bb-tooltip-success.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--brand);
}

.bb-tooltip-success.bs-tooltip-bottom .tooltip-arrow::before,
.bb-tooltip-success.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--brand);
}

.bb-tooltip-success.bs-tooltip-start .tooltip-arrow::before,
.bb-tooltip-success.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--brand);
}

.bb-tooltip-success.bs-tooltip-end .tooltip-arrow::before,
.bb-tooltip-success.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--brand);
}
.small-map {
    min-height: 360px;
}

.small-map .map-placeholder {
    height: 255px;
}

.leaflet-map-container {
    height: 255px;
    border-radius: 10px;
    overflow: hidden;
}

.leaflet-map-container--large {
    height: 500px;
}

.leaflet-map-container--home {
    height: 520px;
}

.node-top {
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
}

.tall-card {
    min-height: 260px;
}

.empty-state {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    text-align: center;
    font-size: 24px;
}

.node-sections {
    margin-top: 18px;
    margin-bottom: 18px;
}

@media (max-width: 1400px) {
    .top-cards,
    .two-column-layout,
    .dashboard-grid,
    .node-top {
        grid-template-columns: 1fr;
    }

    .camera-card {
        grid-column: auto;
    }

    .energy-layout,
    .summary-content,
    .two-metrics {
        flex-direction: column;
    }
}
.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.profile-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: start;
}

.profile-image-card {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image-placeholder {
    width: 195px;
    height: 195px;
    border-radius: 6px;
    background: #97a0a9;
}

.profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-info-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
}

.profile-line {
    font-size: 38px;
    font-weight: 400;
    color: var(--ink);
}

.profile-role {
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
}

.password-card {
    padding: 28px 32px;
}

.password-card .section-title {
    margin-bottom: 20px;
}

.password-card .user-form {
    max-width: 380px;
    gap: 16px;
}

.password-card .filter-input {
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.password-card .filter-input:focus {
    border-color: var(--brand);
}

.profile-section-card {
    min-height: 170px;
}

.profile-list,
.languages-list {
    margin: 0;
    padding-left: 24px;
}

.profile-list li,
.languages-list li {
    font-size: 18px;
    margin-bottom: 18px;
    color: var(--ink);
}

.language-active {
    color: #17924c;
    font-weight: 700;
}

.language-item {
    list-style: none;
    margin-bottom: 18px;
    padding-left: 0;
}

.language-item form {
    margin: 0;
    padding: 0;
}

.language-button {
    background: none;
    border: none;
    padding: 0;
    font-size: 18px;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.language-button:hover {
    color: #17924c;
    text-decoration: underline;
}

.language-button--active {
    color: #17924c;
    font-weight: 700;
}

.languages-list {
    padding-left: 0;
}

@media (max-width: 1200px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-line {
        font-size: 28px;
    }

    .profile-role {
        font-size: 22px;
    }
}
.dashboard-header-row {
    align-items: flex-start;
}

.dashboard-title {
    margin-bottom: 10px;
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-dots-icon {
    width: 28px;
    height: auto;
    opacity: 0.95;
}

.unit-dashboard-grid {
    display: grid;
    /* Left column widened (was 205px) so the small cards — and the per-slot
       charging widget — aren't cramped, especially with longer Czech/German labels. */
    /* Same 300 : 310 : 445 proportions as the old fixed widths, but they now
       stretch: the sidebar is gone (2026-09-27), so fixed widths left an empty
       band down the right of every station page. */
    grid-template-columns: minmax(240px, 300fr) minmax(250px, 310fr) minmax(360px, 445fr);
    grid-template-rows: 205px 205px auto;
    column-gap: 16px;
    row-gap: 34px;
    align-items: start;
}
.unit-row-2 {
    margin-top: 0px;
}
.unit-small-card {
    min-height: 0;
    height: 205px;
    padding: 16px 16px 18px 16px;
}

.unit-energy-card {
    min-height: 444px;
    padding: 16px 22px 22px 22px;
    grid-column: 3;
    grid-row: 1 / span 2;
}

/* Explicit placement in the desktop 3-column grid so the layout stays intact when
   the Inputs card is hidden on V1 stations (without this, the camera card floats
   up and overlaps Visits). Applies wherever the 3-column grid does (>1024px);
   the narrower breakpoints stack. It was >1280px while the sidebar took 330px. */
@media (min-width: 1025px) {
    .unit-dashboard-grid #socket-card { grid-column: 1; grid-row: 1; }
    .unit-dashboard-grid .modem-card-tall { grid-column: 2; grid-row: 1; }
    .unit-dashboard-grid .inputs-card { grid-column: 1; grid-row: 2; }
    .unit-dashboard-grid .visits-card { grid-column: 2; grid-row: 2; }
    /* Explicit span: a generic ≤1400px rule resets .camera-card to one column. */
    .unit-dashboard-grid .camera-lower { grid-column: 1 / span 2; grid-row: 3; }
    .unit-dashboard-grid .kiosk-lower { grid-column: 3; grid-row: 3; }
    /* No Inputs card → Visits takes column 1 so row 2 isn't left lopsided. */
    .unit-dashboard-grid.no-inputs .visits-card { grid-column: 1; }
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.card-corner-icon {
    flex-shrink: 0;
    display: block;
}

.socket-icon {
    width: 36px;
    height: 36px;
}

.bike-icon {
    width: 44px;
    height: 44px;
}

.dots-icon-wrap {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 9px;
    flex-shrink: 0;
    cursor: pointer;
}

.dots-dropdown-btn {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.unit-dropdown-menu {
    min-width: 140px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
    padding: 4px 0;
}

.unit-restart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding: 8px 16px;
    color: #dc2626;
}

.unit-restart-btn:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.dots-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: auto;
    display: block;
    transition: opacity 0.15s ease;
}
.dots-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.dots-icon-light {
    opacity: 1;
}

.dots-icon-dark {
    opacity: 0;
}

.dots-icon-wrap:hover .dots-icon-light {
    opacity: 0;
}

.dots-icon-wrap:hover .dots-icon-dark {
    opacity: 1;
}

.socket-status-row {
    margin-top: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.fake-toggle {
    width: 62px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #d7d7d7;
    background: #f5f5f5;
    position: relative;
}

.fake-toggle-knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #bdbdbd;
    position: absolute;
    left: 6px;
    top: 3px;
}

.socket-toggle {
    width: 62px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #d7d7d7;
    background: #f5f5f5;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    padding: 0;
}

.socket-toggle--on {
    background: var(--brand);
    border-color: var(--brand);
}

.socket-toggle-knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #bdbdbd;
    position: absolute;
    left: 5px;
    top: 3px;
    transition: left 0.2s ease, background 0.2s ease;
}

.socket-toggle--on .socket-toggle-knob {
    left: 31px;
    background: #ffffff;
}

.socket-toggle--pending {
    opacity: 0.6;
    cursor: wait;
}

.modem-metrics,
.visits-metrics {
    margin-top: 52px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}
.modem-label {
    white-space: nowrap;
}
.modem-number {
    white-space: nowrap;
}

.modem-metrics > div,
.visits-metrics > div {
    flex: 1;
    min-width: 0;
}
.modem-card-tall {
    height: 230px;
}

.kiosk-lower {
    margin-top: 88px;
}
.inputs-content-row {
    margin-top: 34px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.inputs-circles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 2px;
}

.input-dot {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #202733;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Per-slot bike-charging widget (replaces the static Inputs card on HW stations).
   One row per slot: numbered dot (green while charging) + session / total kWh. */
.charging-slots {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.charge-slot {
    display: flex;
    align-items: center;
    gap: 10px;
}
.charge-dot {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    background: #202733;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.charge-slot.is-charging .charge-dot {
    background: #17924c;   /* green = currently charging */
    box-shadow: 0 0 0 3px rgba(23, 146, 76, 0.18);
}
.charge-kwh {
    font-size: 14px;
    white-space: nowrap;
}
.charge-session { font-weight: 700; color: #202733; }
.charge-sep { color: #b6bcc6; margin: 0 3px; }
.charge-total { color: var(--ink-muted); }
.charge-unit { color: #9aa1ad; font-size: 12px; margin-left: 4px; }

.energy-main-layout {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 28px;
    align-items: start;
}

.energy-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 22px;
}

.large-battery-circle {
    width: 195px;
    height: 195px;
    border-width: 22px;
    font-size: 22px;
    margin: 4px auto 0 auto;
}

.battery-gauge-wrap {
    position: relative;
    width: 195px;
    height: 195px;
    margin: 4px auto 0 auto;
}

.battery-gauge-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    pointer-events: none;
}

.battery-footer-text {
    margin-top: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-2);
}

.energy-right-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 6px;
}

/* Supporting power readings as stat tiles (label + value). Replaces the old
   near-empty ring gauges — a 59 W arc against a 1000 W max carried no signal. */
.energy-side-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.energy-side-item:last-child {
    border-bottom: 0;
}

.energy-side-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-med);
    line-height: 1.2;
    color: var(--ink-2);
    text-align: left;
}

/* Shared stat-tile value (energy card + node dashboard). */
.energy-side-value,
.node-metric-value {
    font-weight: var(--fw-bold);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.energy-side-value {
    font-size: 24px;
    white-space: nowrap;
}

/* Stale / missing reading — visually distinct from a real value. */
.is-stale {
    color: var(--ink-faint);
    font-weight: var(--fw-med);
}

.unit-small-card .big-status {
    margin-top: 0;
    font-size: 31px;
    font-weight: 600;
}

.unit-small-card .small-number {
    font-size: 31px;
    font-weight: 600;
    line-height: 1.08;
}
.unit-small-card .small-label {
    font-size: 16px;
    color: #2f3744;
    line-height: 1.05;
    margin-top: 10px;
}

/* (A max-width:1280px rule stood here: it set the grid to ONE column but left
   the energy card pinned to column 3 and the camera spanning 2, so the browser
   invented columns and the camera card landed on top of the energy card —
   the 1201–1280px fault noted in August. Removed 2026-09-27 when the 3-column
   grid was extended down to 1025px; ≤1024px has its own complete reset.) */

/* =========================
   People counting page
   ========================= */

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.secondary-button {
    padding: 12px 18px;
    font-size: 16px;
    border: 1px solid #777;
    background: #f5f5f5;
    color: #222;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.people-counting-layout {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 22px;
    align-items: start;
}

.people-table-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 980px;
    padding: 22px 24px;
    min-width: 0;
}

.people-side-column {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.people-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.people-table th,
.people-table td {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-strong);
}

.people-table th {
    font-weight: 700;
}

.people-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.people-table tbody tr:hover {
    background: var(--brand-tint);
}

.people-total-row td {
    font-weight: 700;
}

/* An unmeasured value on a card: same treatment as the battery ring's N/A —
   visibly not a reading, so "we don't know" never reads as "it is off". */
.big-status--unmeasured {
    color: var(--ink-muted);
}

/* Per-station camera labelling blocks on /admin/stations. */
.station-cameras-card {
    margin-bottom: 18px;
}
.station-cameras-card .camera-grid {
    margin-top: 12px;
}
.station-cameras-card .camera-pane {
    max-width: 320px;
}

/* ── Role badges ─────────────────────────────────────────────────────────── */
.role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}
.role-badge--super_admin { background: #fef9c3; color: #713f12; }
.role-badge--admin        { background: #fef9c3; color: #713f12; }
.role-badge--senior_user  { background: #dbeafe; color: #1e3a8a; }
.role-badge--unit_manager { background: #dbeafe; color: #1e3a8a; }
.role-badge--user         { background: #dcfce7; color: #166534; }
.role-badge--dispatcher   { background: #dcfce7; color: #166534; }
.role-badge--content_manager { background: #dcfce7; color: #166534; }
.role-badge--host         { background: #f1f5f9; color: #475569; }

/* ── User management ─────────────────────────────────────────────────────── */
.users-actions-col {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 13px;
}

.danger-button {
    background: none;
    border: 1px solid #f87171;
    color: #dc2626;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 16px;
    transition: background 0.15s;
}
.danger-button:hover { background: #fee2e2; }

.user-form-card { max-width: 640px; }

.user-form { display: flex; flex-direction: column; gap: 20px; }

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-weight: 600;
    font-size: 14px;
}

.form-hint {
    font-size: 12px;
    color: var(--ink-muted);
}

.form-actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

.form-success-banner {
    background: #dcfce7;
    color: #166534;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.form-error-banner {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.groups-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.text-muted { color: var(--ink-faint); }

/* ── Audit log layout ────────────────────────────────────────────────────── */
.audit-log-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-filter-card {
    padding: 24px 26px 22px;
}

.audit-table-card {
    overflow: hidden;
}

.audit-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.audit-showing {
    font-size: 14px;
    color: var(--ink-muted);
}

.audit-export-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.audit-table-wrapper {
    overflow-x: auto;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    white-space: nowrap;
}

.audit-table th,
.audit-table td {
    text-align: left;
    padding: 11px 24px;
    border-bottom: 1px solid var(--border-strong);
}

.audit-table th {
    font-weight: 700;
    background: #f8f9fa;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.audit-table tbody tr:last-child td {
    border-bottom: none;
}

.audit-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.audit-table tbody tr:hover {
    background: var(--brand-tint);
}

.audit-col-date {
    color: var(--ink-muted);
    font-size: 13px;
}

.audit-col-desc {
    white-space: normal;
    min-width: 160px;
    color: var(--ink-muted);
    font-size: 13px;
}

.audit-result-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}

.audit-result-badge--success {
    background: #dcfce7;
    color: #166534;
}

.audit-result-badge--failure {
    background: #fee2e2;
    color: #991b1b;
}

.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border-strong);
}

.audit-page-info {
    font-size: 14px;
    color: var(--ink-muted);
}

.people-visits-card {
    min-height: 140px;
}

.people-visits-card .summary-content {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.people-visits-card .summary-block {
    flex: 1;
    text-align: right;
}

.chart-card {
    min-height: 400px;
}

.small-summary-card {
    min-height: 120px;
}

.chart-placeholder {
    margin-top: 18px;
    border: 1px solid #d8d8d8;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: top left;
    background-color: #f8f8f8;
}

.chart-placeholder-hourly {
    height: 300px;
}

.chart-placeholder-week {
    height: 260px;
}

@media (max-width: 900px) {
    .people-counting-layout {
        grid-template-columns: 1fr;
    }

    .people-table-card {
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
    }

    .people-side-column {
        grid-column: auto;
        grid-row: auto;
    }
}

/* =========================
   Measured values page
   ========================= */

.measured-values-card {
    padding: 0;
    overflow: hidden;
}

.measured-values-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.measured-values-table thead th {
    text-align: left;
    padding: 12px 8px;
    font-weight: 700;
    border-bottom: 2px solid #2a2a2a;
}

.measured-values-table tbody td {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-strong);
    vertical-align: top;
}

.measured-values-table th:nth-child(1),
.measured-values-table td:nth-child(1) {
    width: 46%;
}

.measured-values-table th:nth-child(2),
.measured-values-table td:nth-child(2) {
    width: 28%;
}

.measured-values-table th:nth-child(3),
.measured-values-table td:nth-child(3) {
    width: 12%;
    white-space: nowrap;
}

.measured-values-table th:nth-child(4),
.measured-values-table td:nth-child(4) {
    width: 14%;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .measured-values-card {
        overflow-x: auto;
    }

    .measured-values-table {
        min-width: 1000px;
    }
}

.people-empty-card {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.people-empty-state {
    text-align: center;
}

.people-empty-title {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

.people-empty-subtitle {
    font-size: 20px;
    color: #333;
}

.secondary-button {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.secondary-button:hover {
    background: #202733;
    border-color: #202733;
    color: #ffffff;
}

.people-left-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.people-filter-card {
    padding: 24px 26px 22px;
}

.is-hidden {
    display: none !important;
}

.people-filter-card.is-hidden {
    display: none !important;
}

.filter-info-banner {
    border: 1px solid #d9dee5;
    border-left: 4px solid #f0a33b;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    color: #2f3542;
    background: #fafbfc;
}

.people-filter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 330px;
}

.filter-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 12px;
}

.filter-label {
    font-size: 16px;
    color: #222;
}

.filter-input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cfd5dc;
    border-radius: 6px;
    font-size: 15px;
    color: #222;
    background: #fff;
}

.filter-actions {
    padding-left: 102px;
}

.filter-actions .outline-button {
    min-width: 84px;
}

.filter-row-check {
    padding-left: 102px;
}

.filter-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--ink-2);
    cursor: pointer;
}

.filter-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}

@media (max-width: 900px) {
    .filter-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filter-actions {
        padding-left: 0;
    }

    .people-filter-form {
        max-width: 100%;
    }
}
/* =========================
   Favorite modal on node page
   ========================= */

.related-units-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.related-units-table th,
.related-units-table td {
    padding: 14px 8px;
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
}

.related-units-table thead th {
    border-bottom: 2px solid #2a2a2a;
    font-weight: 700;
}

.related-actions-col {
    width: 80px;
}

.related-actions {
    text-align: right;
    white-space: nowrap;
}

/* Bootstrap-style outline buttons for the related-units table */
.ru-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 31px;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.ru-btn-star {
    color: var(--brand);
    border: 1px solid var(--brand);
}

.ru-btn-star:hover {
    background: var(--brand);
    color: #fff;
}

.ru-btn-arrow {
    color: var(--brand);
    border: 1px solid var(--brand);
}

.ru-btn-arrow:hover {
    background: var(--brand);
    color: #fff;
}

/* Table row hover highlight */
.related-units-table--hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.mini-star-button,
.mini-arrow-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--brand);
    border-radius: 4px;
    background: #fff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    margin-left: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mini-star-button:hover,
.mini-arrow-button:hover {
    background: var(--brand);
    color: #fff;
}

.mini-star-button.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.favorite-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.favorite-modal-overlay.is-hidden {
    display: none;
}

.favorite-modal {
    width: min(1100px, 100%);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.favorite-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 16px;
    border-bottom: 1px solid #d9dee5;
}

.favorite-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.favorite-close-button {
    border: none;
    background: transparent;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

.favorite-modal-body {
    padding: 18px 18px 28px;
    min-height: 220px;
}

.favorite-modal-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}

.favorite-selected-unit {
    display: inline-block;
    min-height: 48px;
    margin-bottom: 18px;
    padding: 12px 18px;
    border-radius: 6px;
    background: #151515;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.favorite-position-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 0 18px;
}

.favorite-position-button {
    width: 54px;
    height: 54px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.favorite-position-button:hover {
    background: var(--brand);
    color: #fff;
}

.favorite-position-button.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.favorite-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 18px;
    border-top: 1px solid #d9dee5;
}

.favorite-back-button {
    border: none;
    background: #7a8694;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

/* =========================
   Node dashboard layout
   ========================= */

.node-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 18px;
    align-items: stretch;
}

.node-top-metrics-card {
    grid-column: 1 / 7;
    grid-row: 1;
}

.node-visits-card {
    grid-column: 7 / 11;
    grid-row: 1;
    min-height: 240px;
}

.node-underlying-card {
    grid-column: 1 / 6;
    grid-row: 2;
    min-height: 200px;
}

.related-units-card {
    grid-column: 6 / 11;
    grid-row: 2;
    min-height: 200px;
}

.node-map-card {
    grid-column: 1 / 11;
    grid-row: 3;
}

.node-empty-state {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #2f3744;
    font-size: 20px;
    line-height: 1.35;
}

.node-top-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Node top-metrics as stat tiles (title + value) — replaces ring gauges that
   plotted a value against a fixed 1000 max (a near-empty sliver for voltage). */
.node-metric-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.node-metric-title {
    width: 100%;
    font-size: var(--fs-md);
    font-weight: var(--fw-med);
    color: var(--ink-muted);
    text-align: left;
}

.node-metric-value {
    font-size: 34px;
    line-height: 1.1;
}

.node-breadcrumb {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--brand);
    font-size: 15px;
}

@media (max-width: 1200px) {
    .node-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .node-top-metrics-card,
    .node-visits-card,
    .node-underlying-card,
    .related-units-card,
    .node-map-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .node-top-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.mini-star-button.is-active {
    background: #1ec0e9;
    border-color: #1ec0e9;
    color: #0b1d33;
}

.mini-star-button.temp-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- Tablet landscape (≤ 1024px) ---- */
@media (max-width: 1024px) {
    .sidebar {
        width: 260px;
    }

    .sidebar-link {
        font-size: 15px;
        padding: 16px 16px;
    }

    .main-content {
        padding: 22px 20px 32px 20px;
    }

    .page-title {
        font-size: 30px;
    }

    .unit-dashboard-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .unit-energy-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .camera-card {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 0;
    }

    .kiosk-lower {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

/* ---- Tablet portrait / large mobile (≤ 768px) ---- */
@media (max-width: 768px) {
    /* Layout: sidebar becomes top bar */
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--forest);
        padding-top: 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .sidebar-top-bar {
        padding: 12px 20px;
    }

    .sidebar-logo {
        display: none;
    }

    .sidebar-hamburger {
        display: flex;
    }

    .sidebar-nav {
        display: none;
        padding-top: 0;
        padding-bottom: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .sidebar--open .sidebar-nav {
        display: flex;
    }

    .sidebar-link {
        padding: 13px 20px;
        font-size: 15px;
        border-right: none;
        border-left: 4px solid transparent;
    }

    .sidebar-link:hover,
    .sidebar-link.active {
        border-right-color: transparent;
        border-left-color: var(--brand-light);
    }

    .main-content {
        padding: 20px 16px 32px 16px;
    }

    .page-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .page-header-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* All multi-column grids → single column */
    .top-cards {
        grid-template-columns: 1fr;
    }

    .two-column-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .unit-dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .unit-energy-card,
    .camera-card,
    .kiosk-lower {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 0;
    }

    .energy-main-layout {
        grid-template-columns: 1fr;
    }

    .node-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .node-top-metrics-card,
    .node-visits-card,
    .node-underlying-card,
    .related-units-card,
    .node-map-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .node-top-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .people-counting-layout {
        grid-template-columns: 1fr;
    }

    .people-table-card,
    .people-side-column {
        grid-column: 1 / -1;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .energy-layout {
        flex-direction: column;
    }

    .summary-content {
        flex-direction: row;
    }

    /* Cards */
    .card-title {
        font-size: 16px;
    }

    .summary-number {
        font-size: 40px;
    }

    /* Node gauge: 3 per row → 1 per row */
    .node-top-metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .node-gauge-wrap {
        width: 110px;
        height: 135px;
    }

    /* Camera controls */
    .camera-timestamp {
        display: none;
    }

    /* Maps */
    .leaflet-map-container {
        height: 220px;
    }

    .leaflet-map-container--home {
        height: 260px;
    }

    .leaflet-map-container--large {
        height: 320px;
    }
}

/* Period toggle (Day / Month / Year) */
.period-toggle {
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 3px;
}

.period-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--ink-muted);
    transition: background 0.15s, color 0.15s;
}

.period-btn:hover {
    background: var(--border);
    color: var(--ink);
}

.period-btn--active {
    background: #ffffff;
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Login page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-wrap .login-logo { display: block; margin-bottom: 28px; }
.login-wrap .page-title { margin: 4px 0; }
.login-note { margin: 14px 0 0; font-size: 13px; }
.login-lang { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; }
.login-lang .stats-select { width: auto; }

.login-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    margin-top: 20px;
}

.login-logo {
    width: 200px;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}

.login-field input {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s;
}

.login-field input:focus {
    border-color: var(--brand);
}

.login-button {
    padding: 11px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
}

.login-button:hover {
    background: #0f9115;
}

.login-error {
    color: #a3261b;
    background: #fde8e6;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    margin: 0;
    width: 100%;
}

/* ---- Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
    .main-content {
        padding: 14px 12px 24px 12px;
    }

    .page-title {
        font-size: 20px;
    }

    .top-cards {
        grid-template-columns: 1fr;
    }

    .summary-number {
        font-size: 32px;
    }

    .node-top-metrics-grid {
        grid-template-columns: 1fr;
    }

    .node-gauge-wrap {
        width: 140px;
        height: 160px;
    }

    .camera-timestamp {
        display: none;
    }

    .filter-row {
        grid-template-columns: 1fr;
    }

    .measured-values-card {
        overflow-x: auto;
    }

    .measured-values-table {
        min-width: 600px;
    }

    .page-header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =========================
   Statistics page
   ========================= */

.stats-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.stats-filter-form {
    display: contents;
}

.stats-select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.stats-select:focus {
    border-color: var(--brand);
}

.stats-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.stats-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: var(--ink-2);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

.stats-nav-btn:hover {
    background: var(--surface-2);
    border-color: var(--ink-faint);
}

.stats-nav-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    min-width: 160px;
    text-align: center;
}

.stats-kpi-grid > * { min-width: 0; }
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stats-kpi-card {
    display: flex;
    flex-direction: column;
    padding: 20px 24px 22px;
}

.stats-kpi-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.stats-kpi-value {
    font-size: 44px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.stats-kpi-unit {
    font-size: 15px;
    color: var(--ink-muted);
    margin-top: 6px;
}

.stats-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.stats-charts-single {
    grid-template-columns: 1fr;
}

.stats-chart-card {
    min-height: 320px;
}

@media (max-width: 1100px) {
    .stats-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
    .stats-charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    /* One column: year totals (e.g. 162 444 visits) overflow half a phone. */
    .stats-kpi-grid  { grid-template-columns: 1fr; }
    .stats-nav       { margin-left: 0; width: 100%; justify-content: center; }
    .stats-nav-label { min-width: 120px; }
}

/* ── Loading pulse ───────────────────────────────────────────────────────── */
@keyframes pulse-fade {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

.is-loading {
    animation: pulse-fade 1.2s ease-in-out infinite;
    color: var(--ink-faint) !important;
}

/* ── Service mode ──────────────────────────────────────────────────────── */
.muted-text {
    color: var(--ink-muted);
    font-size: 13px;
    margin: 4px 0 16px;
}

.service-table-card {
    padding: 0;
    overflow: hidden;
}

/* Let the service table wrap and shrink to fit instead of forcing a wide,
   horizontally-scrolling layout that hides the action buttons. */
.service-table th,
.service-table td {
    white-space: normal;
    vertical-align: middle;
    padding: 11px 14px;
}

.service-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}

.service-status-badge--online {
    background: #dcfce7;
    color: #166534;
}

.service-status-badge--offline {
    background: #fee2e2;
    color: #991b1b;
}

.service-actions-cell {
    white-space: normal;
}

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 320px;
}

.service-btn {
    padding: 7px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.service-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Quick data test (data-outage page) ──────────────────────────────────────
   A service technician standing at the kiosk reads this on a phone, so the
   controls wrap and the verdict badge is the biggest thing on the card. */
.feed-test-card {
    margin-bottom: 18px;
    padding: 18px 20px;
}

.feed-test-title {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 600;
}

.feed-test-hint {
    margin: 0 0 14px 0;
    max-width: 70ch;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
}

.feed-test-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.feed-test-select {
    min-width: 220px;
    max-width: 100%;
}

.feed-test-auto {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: 13px;
    white-space: nowrap;
}

.feed-test-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.feed-test-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    background: var(--border);
    color: var(--ink-2);
}

.feed-test-badge--flowing {
    background: #dcfce7;
    color: #166534;
}

.feed-test-badge--stale {
    background: #fef3c7;
    color: #92400e;
}

.feed-test-badge--gap,
.feed-test-badge--never {
    background: #fee2e2;
    color: #991b1b;
}

.feed-test-detail {
    color: var(--ink-muted);
    font-size: 13px;
}

/* Per-component health (components.py). Six states rather than the service
   page's online/offline pair, because "arriving late", "same picture every
   time" and "never installed" each need a different reaction from a technician
   — collapsing them into red/green is what hid the Vyšší Brod camera. */
.components-card {
    margin-top: 16px;
}

.components-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
}

.component-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--line, var(--border));
}

.component-row:last-child {
    border-bottom: none;
}

.component-name {
    font-weight: 600;
    min-width: 210px;
    flex: 1 1 210px;
}

.component-meta {
    color: var(--ink-muted);
    font-size: 13px;
    flex: 1 1 auto;
    text-align: right;
}

.component-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.component-badge--flowing { background: #dcfce7; color: #166534; }
.component-badge--stale   { background: #fef3c7; color: #92400e; }
/* Frozen and gap are both faults, but a frozen camera is the sneakier one —
   amber-red keeps it distinct from a plain silence at a glance. */
.component-badge--frozen  { background: #ffedd5; color: #9a3412; }
.component-badge--implausible { background: #fae8ff; color: #86198f; }
.component-badge--gap     { background: #fee2e2; color: #991b1b; }
.component-badge--dormant { background: var(--border); color: #4b5563; }
.component-badge--never   { background: var(--surface-2); color: var(--ink-muted); }
.component-badge--error   { background: #ede9fe; color: #5b21b6; }

.components-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Component rows nested under a station row on the service page. */
.service-components-row > td {
    background: var(--surface-muted, #f9fafb);
    padding: 0 12px 12px;
}

/* Station log vs component log. Two links styled as tabs rather than a select:
   the choice is worth being visible at a glance, since the two logs answer
   different questions about the same outage. */
.outage-scope-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.outage-scope-tabs .is-active {
    background: var(--brand-green, #4caf50);
    color: #fff;
    border-color: var(--brand-green, #4caf50);
}

/* Filter controls in the outage/audit panels sat on a `90px 1fr` grid, so a
   three-option "Typ" dropdown stretched the full 734px of the card and read as
   broken. Capping the control (rather than narrowing the grid column) keeps the
   labels aligned and still lets the fields go full width on a phone, where the
   column is already narrower than the cap. */
#audit-filter-panel .filter-input {
    max-width: 420px;
}

/* ── Component health polish ─────────────────────────────────────────────────
   A technician reads this list looking for the one row that is wrong, so the
   design's whole job is to make that row impossible to miss: a colour dot to
   scan down, a tint behind the bad rows, and a verdict on top so a healthy
   station can be dismissed without reading any rows at all. */
.components-summary-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.component-summary {
    font-weight: 600;
    font-size: 13px;
    padding: 3px 12px;
    border-radius: 99px;
}

.component-summary--ok  { background: #dcfce7; color: #166534; }
.component-summary--bad { background: #fee2e2; color: #991b1b; }

.component-checked {
    color: var(--ink-muted);
    font-size: 12px;
}

/* The dot carries the state on its own, so the row is scannable before any
   text is read; the badge then says it in words for anyone who needs them. */
.component-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.component-dot--flowing { background: #16a34a; }
.component-dot--stale   { background: #f59e0b; }
.component-dot--frozen  { background: #ea580c; }
.component-dot--implausible { background: #c026d3; }
.component-dot--gap     { background: #dc2626; }
.component-dot--dormant { background: var(--ink-faint); }
.component-dot--never   { background: #d1d5db; }
.component-dot--error   { background: #7c3aed; }

.component-row--bad {
    background: #fef2f2;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

/* Long station names and long timestamps must not collide: below this the meta
   drops to its own line under the name instead of being squeezed. */
@media (max-width: 720px) {
    .component-meta {
        text-align: left;
        flex-basis: 100%;
        padding-left: 22px;
    }
}


/* Auto-discovered stations awaiting confirmation (home, super admin only).
   Deliberately loud: an unconfirmed station is invisible to everyone else, so
   this prompt is the only thing standing between a live kiosk and nobody
   seeing it. */
.pending-stations-card { border-left: 4px solid #f59e0b; margin-bottom: 24px; }
.pending-stations-intro { margin: 4px 0 14px; color: var(--ink-muted); font-size: 14px; }
.pending-station-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 8px 0; border-top: 1px solid var(--surface-2);
}
.pending-station-thing {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; color: var(--ink-2); min-width: 130px;
}
.pending-station-name { flex: 1 1 220px; max-width: 340px; }
@media (max-width: 600px) {
    .pending-station-row { flex-direction: column; align-items: stretch; }
    .pending-station-name { max-width: none; }
}


/* Battery state-of-charge that is not actually measured (pinned Victron
   registers). The ring draws an empty track and the label greys out via the
   existing .is-stale token, with one line of explanation so nobody reads the
   blank as a flat battery. */
.battery-unmeasured-note {
    margin-top: 6px; font-size: 12px; line-height: 1.35;
    color: var(--ink-faint); text-align: center; max-width: 210px;
}

.pending-station-cameras { flex: 0 1 260px; max-width: 300px; }

/* ══════════════════════════════════════════════════════════════════════════
   Network overview + station list — Petr's prototype (22.9.2026)
   ══════════════════════════════════════════════════════════════════════════ */
.ov svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

.ov-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.ov-head .page-title { margin: 2px 0 0; }
.ov-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-muted);
}
.ov-date { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.ov-date small { display: block; color: var(--ink-muted); font-size: 12px; }
.ov-date-icon { width: 26px !important; height: 26px !important; color: var(--ink-2); }

/* Hero */
.ov-hero {
    display: grid; grid-template-columns: minmax(340px, 1fr) 1.45fr;
    padding: 0; overflow: hidden; margin-bottom: 20px;
}
.ov-hero--nophoto { grid-template-columns: 1fr; }
.ov-hero-text {
    padding: 40px 32px; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; gap: 14px;
}
.ov-kicker {
    display: inline-flex; align-items: center; gap: 8px; color: var(--brand);
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ov-kicker-icon { font-size: 18px; display: inline-flex; }
.ov-hero-title {
    margin: 0; font-size: 36px; line-height: 1.12; font-weight: 600;
    letter-spacing: -0.02em; color: var(--ink);
}
.ov-hero-sub { margin: 0; color: var(--ink-2); font-size: 16px; }
.ov-hero-sub strong { color: var(--ink); }
.ov-hero-photo { margin: 0; position: relative; min-height: 440px; }
.ov-hero-photo { background: var(--surface-2); }
.ov-hero-slide {
    position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.ov-hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease; }
.ov-hero-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ov-hero-photo figcaption {
    position: absolute; right: 12px; bottom: 12px; padding: 4px 10px;
    background: rgba(12, 59, 40, 0.72); color: #fff; font-size: 12px; border-radius: 999px;
}
.ov-hero-photo figcaption a { color: #fff; text-decoration: none; }
.ov-hero-photo figcaption a:hover { text-decoration: underline; }
.ov-hero-dots {
    position: absolute; left: 12px; bottom: 12px; display: flex; z-index: 1;
    padding: 2px 4px; gap: 0; border-radius: 999px; background: rgba(12, 59, 40, 0.45);
}
.ov-hero-dot {
    /* 16 px to tap, 8 px to see: the padding is left unpainted */
    width: 16px; height: 16px; padding: 4px; border: 0; border-radius: 50%; cursor: pointer;
    background-color: rgba(255, 255, 255, 0.55); background-clip: content-box;
}
.ov-hero-dot.is-active { background-color: #fff; }
.ov-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ov-hero-slide { transition: none; } }

.ov-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
    background: var(--forest); color: #fff; border-radius: 8px; font-weight: 600;
    font-size: 15px; text-decoration: none; transition: background-color 0.12s ease;
}
.ov-btn:hover { background: var(--brand-strong); color: #fff; }
.ov-btn--block { display: flex; justify-content: space-between; width: 100%; margin-top: auto; }
.ov-attention-link {
    display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2);
    font-size: 14px; text-decoration: none;
}
.ov-attention-link:hover { color: var(--ink); }
.ov-warn-icon { color: var(--warn); display: inline-flex; font-size: 16px; }

/* Tiles */
.ov-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.ov-tile { display: flex; align-items: center; gap: 16px; padding: 20px; }
.ov-tile-icon {
    flex: 0 0 52px; height: 52px; border-radius: 50%; background: var(--brand-tint);
    color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.ov-tile-label { color: var(--ink-2); font-size: 14px; }
.ov-tile-value {
    font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.ov-tile-value.is-stale { color: var(--ink-faint); }
.ov-tile-unit { font-size: 18px; font-weight: 500; color: var(--ink-2); }
.ov-tile-sub { color: var(--ink-muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }

/* Chart + attention row */
.ov-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; align-items: start; }
.ov-row--single { grid-template-columns: 1fr; }  /* no attention panel below super admin */
.ov-chart-card, .ov-attention { display: flex; flex-direction: column; }
.ov-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-card-head .card-title { margin: 0; }
.ov-link { color: var(--brand); text-decoration: none; font-weight: 600; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px; }
.ov-link:hover { color: var(--brand-strong); }
.ov-chart-wrap { position: relative; height: 230px; }
.ov-chart-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; font-size: 14px;
}
.ov-chart-total strong { color: var(--brand); }
.ov-bolt { color: var(--brand); }
.ov-chart-note { color: var(--ink-muted); font-size: 12px; }
.ov-empty, .ov-ok { color: var(--ink-muted); margin: 8px 0 16px; }

.ov-pill {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ov-pill--warn { background: #fdf3dc; color: #8a5a00; border: 1px solid #f1dca8; }
.ov-pill--ok { background: var(--brand-tint); color: var(--brand-strong); border: 1px solid #cfe5d2; }

.ov-attention-list { list-style: none; margin: 0 0 16px; padding: 0; }
.ov-attention-list li + li { border-top: 1px solid var(--border); }
.ov-attention-row {
    display: grid; grid-template-columns: 40px 1fr auto 20px; align-items: center; gap: 12px;
    padding: 12px 0; text-decoration: none; color: inherit;
}
.ov-attention-row:hover .ov-attention-name { color: var(--brand-strong); }
.ov-attention-icon {
    width: 40px; height: 40px; border-radius: 50%; background: #fdf3dc; color: var(--warn);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.ov-attention-text { display: flex; flex-direction: column; min-width: 0; }
.ov-attention-name { font-weight: 600; color: var(--ink); }
.ov-attention-meta { font-size: 13px; color: var(--ink-muted); }
.ov-attention-go { color: var(--ink-muted); display: inline-flex; }

.ov-map-legend { color: var(--ink-muted); font-size: 13px; margin: 10px 0 8px; }
.ov-attention-more { margin: 0 0 8px; }
.ov-attention-note { color: var(--ink-muted); font-size: 12px; margin: 0 0 14px; }

/* Six tiles (wind added 29.9.): 3+3 — six in a row wrapped every label at the
   1440 px content cap — then 2+2+2, then 1. */
@media (max-width: 900px) {
    .ov-tiles { grid-template-columns: repeat(2, 1fr); }
    .ov-tiles > .ov-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .ov-hero { grid-template-columns: 1fr; }
    .ov-hero-photo { min-height: 240px; order: -1; }
    /* the dots take the bottom edge on a phone; the station name moves up */
    .ov-hero-photo figcaption { top: 12px; bottom: auto; }
    .ov-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ov-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ov-hero-text { padding: 24px 20px; }
    .ov-hero-title { font-size: 28px; }
    .ov-tiles { grid-template-columns: 1fr; gap: 12px; }
    .ov-tile-value { font-size: 28px; }
    .ov-attention-row { grid-template-columns: 36px 1fr 20px; }
    .ov-attention-row .ov-pill { display: none; }
}

/* Station list */
.st-intro { margin: 4px 0 0; color: var(--ink-muted); }
.st-search-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink-2); }
.st-search { width: 100%; max-width: none; margin-bottom: 20px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.st-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.st-card[hidden] { display: none; }
.st-photo {
    position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden;
    text-decoration: none;
}
.st-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.st-card:hover .st-photo img { transform: scale(1.03); }
.st-photo--none { display: flex; align-items: center; justify-content: center; }
.st-nophoto { color: var(--ink-faint); font-size: 14px; }
.st-status { position: absolute; left: 12px; bottom: 12px; }
.st-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-name { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.st-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); font-size: 13px; }
.st-today { color: var(--brand-strong); font-weight: 600; }
.st-open { margin-top: auto; text-align: center; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Top bar — Petr's header (2026-09-27), replacing the sidebar. Every link and
   its role condition is unchanged; tests/test_topbar.py holds it to that.
   ══════════════════════════════════════════════════════════════════════════ */
.layout--topbar { display: block; }
.layout--topbar .main-content {
    max-width: 1440px; margin: 0 auto; padding: 28px 32px 48px; overflow-x: visible;
}

.topbar { background: var(--forest); position: sticky; top: 0; z-index: 1000; }
.topbar-inner {
    max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 64px;
    display: flex; align-items: center; gap: 28px;
}
.topbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.topbar-logo img { height: 26px; width: auto; display: block; }

.topbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; height: 100%; }
.topbar-group { position: relative; height: 100%; display: flex; }
.topbar-group > summary { list-style: none; }
.topbar-group > summary::-webkit-details-marker { display: none; }

.topbar-link {
    display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px;
    color: rgba(255, 255, 255, 0.82); font-size: 15px; font-weight: 500; text-decoration: none;
    cursor: pointer; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
    white-space: nowrap; user-select: none;
}
.topbar-link:hover, .topbar-group[open] > .topbar-link { color: #fff; }
.topbar-link.active { color: #fff; border-bottom-color: var(--brand-light); }
.topbar-link:focus-visible, .topbar-item:focus-visible, .topbar-burger:focus-visible {
    outline: 2px solid var(--brand-light); outline-offset: -2px;
}
.topbar-chevron { width: 12px; height: 12px; opacity: 0.8; transition: transform 0.15s ease; }
.topbar-group[open] .topbar-chevron { transform: rotate(180deg); }

.topbar-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1;
}

.topbar-menu {
    position: absolute; top: calc(100% - 4px); left: 0; min-width: 240px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 44, 36, 0.16); display: flex; flex-direction: column; z-index: 1001;
}
.topbar-menu--scroll { min-width: 320px; max-height: min(80vh, 700px); overflow-y: auto; }
.topbar-menu--scroll .topbar-item { padding-top: 7px; padding-bottom: 7px; }
.topbar-menu--right { left: auto; right: 0; }
.topbar-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px;
}
.topbar-item:hover { background: var(--surface-2); }
.topbar-item.active { background: var(--brand-tint); color: var(--brand-strong); font-weight: 600; }
.topbar-item--strong { font-weight: 600; }
.topbar-sep { height: 1px; background: var(--border); margin: 6px 4px; }

.topbar-user { margin-left: auto; }
.topbar-avatar-btn { gap: 10px; }
.topbar-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--forest);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.topbar-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.topbar-burger {
    display: none; margin-left: auto; width: 40px; height: 40px; padding: 10px 8px;
    background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between;
}
.topbar-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.topbar--open .topbar-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.topbar--open .topbar-burger span:nth-child(2) { opacity: 0; }
.topbar--open .topbar-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1100px) {
    .topbar-user-name { display: none; }
    .topbar-inner { gap: 16px; }
    .topbar-link { padding: 0 10px; }
}

/* Phone / small tablet: the burger opens the whole menu as one panel, and the
   groups expand in place instead of floating. */
@media (max-width: 860px) {
    .topbar-inner { height: 56px; padding: 0 16px; }
    .topbar-burger { display: flex; }
    .topbar-nav {
        display: none; position: absolute; top: 56px; left: 0; right: 0; height: auto;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 12px;
        background: var(--forest); border-top: 1px solid rgba(255, 255, 255, 0.12);
        max-height: calc(100vh - 56px); overflow-y: auto;
    }
    .topbar--open .topbar-nav { display: flex; }
    .topbar-group { height: auto; flex-direction: column; }
    .topbar-link {
        height: auto; padding: 13px 20px; border: 0; border-left: 4px solid transparent; justify-content: space-between;
    }
    .topbar-link.active { border-left-color: var(--brand-light); border-bottom: 0; }
    .topbar-menu, .topbar-menu--right {
        position: static; box-shadow: none; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.06);
        padding: 4px 0; min-width: 0; max-height: none;
    }
    .topbar-item { color: rgba(255, 255, 255, 0.88); padding: 11px 20px 11px 36px; border-radius: 0; }
    .topbar-item:hover { background: rgba(255, 255, 255, 0.06); }
    .topbar-item.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
    .topbar-sep { background: rgba(255, 255, 255, 0.12); margin: 4px 20px; }
    .topbar-user { margin-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 6px; }
    .topbar-user-name { display: inline; }
    .topbar-avatar-btn { justify-content: flex-start; }
    .topbar-avatar-btn .topbar-chevron { margin-left: auto; }
    .layout--topbar .main-content { padding: 20px 16px 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Station summary — Petr's station design (27.9.), above the card grid
   ══════════════════════════════════════════════════════════════════════════ */
/* .card.sd-hero, not .sd-hero: the station page also loads Bootstrap AFTER this
   file, and Bootstrap's .card is display:flex column — it silently won. */
.card.sd-hero { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.4fr; gap: 28px; padding: 16px; margin-bottom: 16px; align-items: center; }
.sd-photo { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); }
.sd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-photo--none { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 14px; }
.sd-copy { display: flex; flex-direction: column; gap: 10px; padding-right: 12px; }
.sd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand); }
.sd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.sd-hero--stale .sd-kicker { color: #8a5a00; } .sd-hero--stale .sd-dot { background: var(--warn); }
.sd-hero--battery .sd-dot, .sd-hero--assist .sd-dot { background: var(--warn); }
.sd-title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.sd-text { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 560px; }
.sd-source { color: var(--ink-muted); font-size: 12px; }

.sd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.sd-tiles--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sd-tiles--4 { grid-template-columns: repeat(2, 1fr); } }
.sd-tile { padding: 18px 20px; }
.sd-tile-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sd-tile-value { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sd-tile-value.is-stale { color: var(--ink-faint); font-size: 24px; }
.sd-tile-unit { font-size: 18px; color: var(--ink-2); }
.sd-tile-sub { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }
.sd-bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 8px; max-width: 240px; }
.sd-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }

.sd-endurance { margin-bottom: 24px; }
.sd-end-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.sd-end-value { font-size: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--forest); font-variant-numeric: tabular-nums; }
.sd-end-sub { color: var(--ink-muted); font-size: 13px; }
.sd-goal { padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.sd-goal-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sd-goal-full { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 640px) { .sd-goal-wrap { align-items: flex-start; } }
.sd-goal--ok { background: var(--brand-tint); color: var(--brand-strong); border: 1px solid #cfe5d2; }
.sd-goal--no { background: #fdf3dc; color: #8a5a00; border: 1px solid #f1dca8; }
.sd-end-note { color: var(--ink-muted); font-size: 12px; margin: 12px 0 0; }

@media (max-width: 900px) {
    .card.sd-hero { grid-template-columns: 1fr; gap: 16px; }
    .sd-copy { padding: 0 4px 8px; }
    .sd-title { font-size: 28px; }
}
@media (max-width: 600px) {
    .sd-tiles { grid-template-columns: 1fr; gap: 12px; }
    .sd-end-value { font-size: 36px; }
}

/* Station photos on /admin/stations (upload / restore). */
.station-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.station-photo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 84px; }
.station-photo-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
/* absolute, so a baked photo that is not 4:3 (CZ02's is 800x780) cannot stretch the box */
.station-photo-img { position: relative; }
.station-photo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.station-photo-img--none { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 14px; }
.station-photo-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.station-photo-name { font-weight: 600; color: var(--ink); }
.station-photo-meta { font-size: 13px; }
.station-photo-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.station-photo-form input[type=file] { font-size: 13px; max-width: 100%; min-width: 0; }
.station-photo-reset { background: none; border: 0; padding: 0; color: var(--ink-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.station-photo-reset:hover { color: var(--danger); }
.station-photo-msg { color: var(--danger); }
.station-photo-msg--ok { color: var(--brand); }
.sd-photo { position: relative; }
.sd-photo-change {
    position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12px; font-weight: 600;
    text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.sd-photo-change:hover { background: #fff; color: var(--brand); }

/* User form: what a grant really gives (PavelZ, 28.9.2026). */
.grant-covers { color: var(--ink-muted); font-size: 12px; margin-left: 4px; }
.grant-covered-note { color: var(--ink-faint); font-size: 12px; margin-left: 6px; font-style: italic; }
.grant-node--covered { color: var(--ink-muted); }
.grant-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.grant-summary-title { font-weight: 600; color: var(--ink); }
.grant-summary-list { font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* Statistiky: bike charging (28.9.2026). */
.stats-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .stats-kpi-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .stats-kpi-grid--4 { grid-template-columns: 1fr; } }
.stats-kpi-value.is-stale { color: var(--ink-faint); }
.stats-charging-card { margin-top: 18px; }
.stats-charging-wrap { position: relative; height: 280px; }
.stats-charging-table { margin-top: 14px; border-collapse: collapse; font-size: 14px; min-width: 260px; }
.stats-charging-table th { text-align: left; font-size: 12px; color: var(--ink-muted); font-weight: 600; padding: 4px 16px 4px 0; }
.stats-charging-table td { padding: 4px 16px 4px 0; color: var(--ink); border-top: 1px solid var(--border); }
.stats-charging-table td:not(:first-child), .stats-charging-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; padding-left: 16px; }
.stats-swatch--none { background: var(--border-strong); }
.stats-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.stats-charging-note { font-size: 13px; margin: 12px 0 0; }
.stats-charging-empty { margin: 24px 0 8px; }

/* Station tabs + Nabíjení tab (Petr's layout, 29.9.2026). */
.st-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 18px; overflow-x: auto; }
.st-tab { padding: 10px 14px; color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: 15px;
          border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.st-tab:hover { color: var(--ink); }
.st-tab.is-active { color: var(--brand-strong); border-bottom-color: var(--brand); }
.ch-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.ch-ports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.ch-port { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ch-port--charging { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ch-port-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-port-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.ch-port-label { color: var(--ink-muted); font-weight: 500; }
.ch-port-icon { color: var(--ink-muted); margin: 8px 0 2px; }
.ch-port-icon svg { width: 44px; height: 30px; display: block; }
.ch-port--charging .ch-port-icon { color: var(--brand); }
.ch-port-value { font-size: 30px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-port-value span { font-size: 15px; color: var(--ink-muted); font-weight: 500; }
.ch-port-value.is-stale { color: var(--ink-faint); }
.ch-port-line { font-size: 13px; color: var(--ink-muted); }
.ch-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
            background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); white-space: nowrap; }
.ch-badge--charging { background: var(--brand-tint); color: var(--brand-strong); border-color: #cfe5d2; }
.ch-badge--unknown { background: #fdf3dc; color: #8a5a00; border-color: #f1dca8; }
.ch-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-panel { padding: 18px 20px; }
.ch-panel .card-title { margin: 0 0 8px; }
.ch-panel-text { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.ch-warn { color: #8a5a00; font-weight: 600; }
@media (max-width: 1100px) { .ch-ports { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
    .ch-tiles, .ch-panels { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .ch-ports { grid-template-columns: 1fr; } }

/* Energie tab (Petr's layout, 29.9.2026). */
.en-chart-card { padding: 18px 20px; margin-bottom: 16px; }
.en-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.en-head .card-title { margin: 0; }
.en-segment { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 2px; }
.en-seg { padding: 6px 12px; border-radius: 6px; color: var(--ink-muted); text-decoration: none; font-size: 14px; font-weight: 600;
          border: 0; background: transparent; font-family: inherit; cursor: pointer; line-height: inherit; }
.en-seg.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.en-chart-wrap { position: relative; height: 260px; }
.en-totals { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 12px; }
.en-totals > div { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.en-totals strong { font-size: 20px; color: var(--ink); font-weight: 600; }
.en-totals small { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.en-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.en-dot--solar { background: #208536; }
.en-dot--load { background: #2a78d6; }
.en-note { font-size: 13px; color: var(--ink-muted); margin: 8px 0 0; }
.en-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.en-panel { padding: 18px 20px; }
.en-panel .card-title { margin: 0 0 10px; }
.en-outlook { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.en-outlook > div { display: flex; flex-direction: column; gap: 2px; }
.en-outlook-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.en-outlook-value { font-size: 28px; font-weight: 500; color: var(--ink); }
.en-outlook-value.is-stale { color: var(--ink-faint); }
.en-outlook-sub { font-size: 13px; color: var(--ink-muted); }
.en-why-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); margin: 0; }
.en-sub { font-size: 14px; font-weight: 600; color: var(--ink); margin: 16px 0 6px; }
.en-rows { margin: 0; }
.en-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.en-rows dt { color: var(--ink-muted); font-weight: 500; }
.en-rows dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
@media (max-width: 800px) { .en-panels, .en-outlook { grid-template-columns: 1fr; } }

/* Návštěvnost tab (29.9.2026). */
.pp-toolbar { margin-bottom: 14px; }
.pp-window { margin: 0; }
.pp-view[hidden] { display: none; }
.pp-table { width: 100%; max-width: 420px; }

/* Kamery tab (29.9.2026): the shared panes, full width. */
.cam-tab-card { margin-bottom: 16px; }
.cam-tab-card .camera-controls .ch-badge { margin-left: 4px; }

/* Diagnostika tab (29.9.2026). */
.components-card { margin-bottom: 16px; }
.dg-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.dg-link { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 14px; }

/* Souhrn in Petr's layout (29.9.2026). */
.hd-titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hd-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd-picker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 0; }
.hd-picker select { padding: 6px 28px 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font: inherit; color: var(--ink); max-width: 260px; }
.hd-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.hd-badge--ok { background: var(--brand-tint); color: var(--brand-strong); border-color: #cfe5d2; }
.hd-badge--warn { background: #fdf3dc; color: #8a5a00; border-color: #f1dca8; }
.so-help-btn { align-self: flex-start; margin-top: 4px; padding: 8px 14px; border-radius: 8px; border: 0; cursor: pointer;
               background: var(--brand-tint); color: var(--brand-strong); font: inherit; font-weight: 600; font-size: 14px; }
.so-help-btn:hover { background: #d6ecd9; }
.so-dialog { border: 0; border-radius: 14px; padding: 22px 24px; max-width: 560px; width: calc(100% - 32px); color: var(--ink); }
.so-dialog::backdrop { background: rgba(16, 44, 36, .45); }
.so-dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.so-dialog-top h2 { font-size: 20px; margin: 0; }
.so-dialog-close { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1; }
.so-dialog .en-rows dd { text-align: left; font-weight: 500; color: var(--ink-2); }
.so-dialog .en-rows dt { color: var(--ink); font-weight: 700; min-width: 90px; }
.so-help-state { font-weight: 600; }
.so-overview { margin-bottom: 16px; }
.so-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.so-cards .so-card { border-radius: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.so-cards .so-card:first-child { border-top-left-radius: var(--radius); }
.so-cards .so-card:last-child { border-top-right-radius: var(--radius); }
.so-card-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.so-num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); letter-spacing: 0; }
.so-card-value { font-size: 32px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.so-card-value small { font-size: 16px; color: var(--ink-muted); font-weight: 500; }
.so-card-value.is-stale { color: var(--ink-faint); }
.so-card-sub { margin: 0; font-size: 14px; color: var(--ink-2); }
.so-card-detail { font-size: 14px; color: var(--ink-2); }
.so-card-note { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.so-mini { margin: 4px 0 0; font-size: 13px; }
.so-mini > div { display: flex; gap: 6px; }
.so-mini dt { color: var(--ink-muted); font-weight: 500; }
.so-mini dd { margin: 0; color: var(--ink); font-weight: 600; }
.so-ribbon { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px;
             border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-2); }
.so-ribbon--full { background: var(--brand-tint); }
.so-ribbon strong { color: var(--ink); font-size: 14px; }
.so-ribbon p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.so-no-export { text-align: right; font-size: 12px; color: var(--ink-muted); border-left: 1px solid var(--border-strong); padding-left: 14px; white-space: nowrap; }
.so-no-export small { display: block; font-size: 11px; }
.so-bottom { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.so-bottom .en-chart-card { margin-bottom: 0; }
.so-ops { padding: 18px 20px; }
.so-ops .en-head { margin-bottom: 6px; }
.so-good { color: var(--brand-strong) !important; }
.so-warn { color: #8a5a00 !important; }
.so-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.so-socket .unit-small-card { min-height: 0; height: auto; padding: 16px 20px; justify-content: flex-start; gap: 6px; }
.so-socket .card-top-row { margin-bottom: 0; }
.so-socket .socket-status-row { margin-top: 8px; }
.so-socket .card-title { font-size: 18px; }
.so-socket .big-status { font-size: 28px; margin-top: 4px; }
@media (max-width: 1000px) { .so-bottom { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
    .so-cards { grid-template-columns: 1fr; }
    .so-cards .so-card { border-radius: 0 !important; }
    .so-cards .so-card:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
    .so-ribbon { flex-direction: column; align-items: flex-start; }
    .so-no-export { border-left: 0; padding-left: 0; text-align: left; }
}

/* Statistiky in Petr's layout (29.9.2026). */
.an-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.an-eyebrow { font-size: 13px; color: var(--ink-muted); font-weight: 600; margin-bottom: 2px; }
.an-head .page-title { margin: 0; }
.an-desc { margin: 4px 0 0; }
.an-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.an-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin: 0; }
.an-field .stats-select { min-width: 200px; }
.an-period { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.an-period .stats-nav { margin-left: auto; }
.an-tz { font-size: 13px; }
.an-panel { padding: 18px 20px; margin-top: 4px; }
.an-title { margin: 12px 0 8px; }
.an-chart-wrap { position: relative; height: 320px; }
.an-metric-pane[hidden], [data-an-pane][hidden] { display: none; }
.an-table { width: 100%; }
.an-foot, .an-info { font-size: 13px; }
.an-info { margin-top: 12px; }
@media (max-width: 700px) { .an-period .stats-nav { margin-left: 0; } .an-field .stats-select { min-width: 0; width: 100%; } .an-field { flex: 1 1 100%; } }

/* Události in Petr's layout (29.9.2026). */
.ev-count { font-size: 13px; margin: 0 0 8px; }
.ev-table .ev-text { font-weight: 600; color: var(--ink); }
.ev-sub { font-size: 13px; }
.ev-row[hidden], .ev-detail[hidden] { display: none; }
.ev-detail td { background: var(--surface-2); }
.ev-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 10px; }
.ev-detail-text { margin: 0 0 8px; color: var(--ink); }
@media (max-width: 800px) { .ev-detail-grid { grid-template-columns: 1fr; } }
/* Výpadky dat (29.9.2026): filters inline and always visible. */
.og-filters { padding: 14px 18px; margin-bottom: 12px; }
.og-filters .audit-filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; text-align: left; }
.og-filters .filter-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; min-width: 170px; }
.og-filters .filter-label { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left; }
.og-filters .filter-actions { margin: 0; padding-left: 0; }
@media (max-width: 600px) { .og-filters .filter-row { flex: 1 1 100%; } }
.og-filters + .card, .feed-test-card { margin-top: 12px; }
/* Události on a phone: each event stacks, so Detail and Potvrdit stay in reach. */
@media (max-width: 700px) {
    .ev-table thead { display: none; }
    .ev-table, .ev-table tbody { display: block; }
    .ev-table tr.ev-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .ev-table tr.ev-row > td { display: block; padding: 0 12px; border: 0; background: none; }
    .ev-table tr.ev-row > td:first-child { grid-column: 1 / -1; }
    .ev-table tr.ev-detail:not([hidden]) { display: block; }
    .ev-table tr.ev-detail > td { display: block; }
}
/* The card's own display must not beat [hidden] (search with results showed "no events"). */
.people-empty-card[hidden] { display: none; }
/* Archiv kamer (30.9.2026, Petr's prototype): 3 / 2 columns, 16:9 frames, a preview dialog. */
.ar-filters .ar-subbar { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding-top: 4px; }
.ar-range { font-size: 13px; }
.ar-error { margin: 0 0 12px; }
.ar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.ar-item { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ar-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
/* Tiles take the camera's own shape (most are 640x640, AT05 is 1920x1080), set
   from the first loaded image — a fixed 16:9 cropped the top and bottom of square
   frames (production check, 30.9.2026). */
.ar-frame { display: block; width: 100%; aspect-ratio: var(--ar, 1); object-fit: cover; background: var(--surface-2); border-radius: 8px; }
@media (min-width: 1200px) { .ar-grid--square { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-item:hover .ar-frame { opacity: .92; }
.ar-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; font-size: 13px; }
.ar-dialog { width: min(860px, calc(100vw - 32px)); max-height: 90vh; border: 0; border-radius: 16px; padding: 24px; }
.ar-dialog::backdrop { background: rgba(22, 37, 27, .7); }
.ar-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.ar-dialog-top .card-title { margin: 0; }
.ar-frame--large { aspect-ratio: auto; max-height: 68vh; object-fit: contain; background: #000; }
.ar-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
@media (max-width: 850px) { .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 600px) { .ar-dialog { padding: 16px; } }
/* Station tabs on a phone: tighter, so more of the strip fits; the rest scrolls. */
@media (max-width: 600px) {
    .st-tabs { gap: 0; scrollbar-width: none; }
    .st-tab { padding: 10px 9px; font-size: 14px; }
}
/* Spotřeba při nabíjení kol (30.9.2026): chart + per-port table side by side. */
.chh-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.chh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.chh-table th, .chh-table td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.chh-table th:last-child, .chh-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chh-table tfoot th { border-bottom: 0; }
.chh-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
@media (max-width: 800px) { .chh-body { grid-template-columns: 1fr; } }
/* Remaining time while the sun covers the station (30.9.2026). */
.sd-end-day { margin: 6px 0 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
/* Socket switch confirmation (30.9.2026). */
.socket-note:empty { display: none; }
.socket-note--wait { color: var(--ink-muted); }
.socket-note--ok { color: var(--brand-strong); }
.socket-note--bad { color: #b3261e; }
/* Stanice / Regionální uzel (30.9.2026). */
.sl-viewbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 12px; }
.sl-viewbar .sl-tabs { margin: 0; flex: 1 1 auto; }
.sl-tabs button.st-tab { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
.sl-sub { font-size: 12px; }
.sl-table td { vertical-align: middle; }
.sl-detail[hidden] { display: none; }
.sl-detail td { background: var(--surface-2); }
.sl-detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.sl-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sl-row[hidden] { display: none; }
.nd-kpis { margin-top: 12px; }
@media (max-width: 800px) {
    .sl-detail-grid { grid-template-columns: 1fr; }
    .sl-table thead { display: none; }
    .sl-table, .sl-table tbody { display: block; }
    .sl-table tr.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .sl-table tr.sl-row > td { min-width: 0; overflow-wrap: anywhere; }
    .sl-table { table-layout: fixed; width: 100%; }
    .sl-table tr.sl-row > td { display: block; padding: 0 12px; border: 0; background: none; }
    .sl-table tr.sl-row > td:first-child { grid-column: 1 / -1; }
    .sl-table tr.sl-detail:not([hidden]) { display: block; }
    .sl-table tr.sl-detail > td { display: block; }
}
/* Návštěvnost sítě (30.9.2026). */
.pn-range { margin: 8px 0 12px; }
.pn-agg { margin: 4px 0 12px; }
.en-segment button.en-seg { border: 0; background: none; cursor: pointer; font: inherit; }
/* Naměřené hodnoty (30.9.2026). */
.mv-row[hidden], .mv-detail[hidden] { display: none; }
.mv-detail td { background: var(--surface-2); }
.mv-path { overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 800px) {
    .mv-table thead { display: none; }
    .mv-table, .mv-table tbody { display: block; }
    .mv-table tr.mv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .mv-table tr.mv-row > td { display: block; padding: 0 12px; border: 0; background: none; min-width: 0; }
    .mv-table tr.mv-row > td:first-child { grid-column: 1 / -1; }
    .mv-table tr.mv-detail:not([hidden]) { display: block; }
    .mv-table tr.mv-detail > td { display: block; }
}
/* Správa: users + customers in Petr's layout (30.9.2026). */
.adm-count { align-self: flex-end; padding-bottom: 10px; font-size: 13px; }
.adm-sub { font-size: 12px; }
.adm-name { color: inherit; text-decoration: none; }
.adm-name:hover strong { text-decoration: underline; }
.adm-row[hidden] { display: none; }
a.adm-act { text-decoration: none; display: inline-block; }
button.adm-act { border: 0; background: none; cursor: pointer; font: inherit; }
.adm-act--danger { color: #b3261e; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.adm-stack { display: flex; flex-direction: column; gap: 16px; }
.adm-panel { padding: 20px 22px; }
.adm-panel .card-title { margin: 0 0 12px; }
.adm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.adm-form .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.adm-form .form-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.adm-result { position: sticky; top: 80px; }
.adm-result-note { font-size: 13px; margin-top: 12px; }
.adm-pw summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.adm-actions { display: flex; gap: 10px; }
.adm-narrow { max-width: 760px; }
.adm-narrow.adm-form { display: flex; flex-direction: column; gap: 16px; }
.adm-assign { margin-top: 12px; }
@media (max-width: 900px) { .adm-grid, .adm-fields { grid-template-columns: 1fr; } .adm-result { position: static; } }
/* the old flex action cell broke the row's borders in the new tables */
.adm-table td.users-actions-col { display: table-cell; white-space: nowrap; }
@media (max-width: 800px) {
    .adm-table thead { display: none; }
    .adm-table, .adm-table tbody { display: block; }
    .adm-table tr.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .adm-table tr.adm-row > td { display: block; padding: 0 12px; border: 0; background: none; min-width: 0; }
    .adm-table tr.adm-row > td:first-child { grid-column: 1 / -1; }
    .adm-table tr.adm-row[hidden] { display: none; }
}
/* Správa stations: names, camera policy, camera labels (30.9.2026). */
a.adm-link { align-self: flex-end; margin-bottom: 6px; text-decoration: none; }
.adm-detail[hidden] { display: none; }
.adm-detail td { background: var(--surface-2); }
.adm-rename-form { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.adm-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.adm-save-row { margin-top: 14px; align-items: center; }
.adm-info { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.adm-online { align-self: flex-end; margin-bottom: 10px; }
.adm-cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.adm-cam-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.adm-cam-none { padding: 24px 12px; }
/* Správa panels on a phone: the grid columns may shrink, the tables wrap. */
.adm-grid > * { min-width: 0; }
.adm-panel .audit-table { min-width: 0; width: 100%; }
@media (max-width: 600px) { .adm-panel .audit-table th, .adm-panel .audit-table td { padding: 8px 6px; white-space: normal; } }
.ch-warn a { color: var(--brand-strong); font-weight: 600; }
.adm-cam-grid { margin-top: 12px; }
/* Uchovávání snímků (30.9.2026). */
.rt-preview { margin-top: 16px; }
.rt-table select, .rt-table input { max-width: 100%; }
.rt-days { width: 90px; }
@media (max-width: 800px) { .rt-table tr.adm-row > td:nth-child(3), .rt-table tr.adm-row > td:nth-child(4) { grid-column: 1 / -1; } }

/* Záznam kamer: brand slider; an interval unused in video mode reads as inactive */
.adm-form input[type="range"] { width: 100%; accent-color: #208536; }
.adm-form .filter-input[readonly] { opacity: .55; }

/* Servis stanic (Petr's AdminPages Service) */
.ch-badge--offline { background: #fde8e6; color: #a3261b; border-color: #f5c6c0; }
.sv-card { min-height: 0; grid-row: auto; grid-column: auto; }
.sv-panel-title { margin: 0 0 8px; }
.sv-hint { align-self: flex-end; padding-bottom: 10px; }
.sv-row.is-selected td { background: var(--brand-tint); }
.sv-sub { font-size: 14px; font-weight: 700; margin: 20px 0 10px; }
.sv-station .adm-actions { flex-wrap: wrap; }
.sv-restarts .outline-button { width: 100%; text-align: left; }
.sv-commands { margin-top: 20px; }
.sv-commands .an-info { margin-top: 12px; }
#sv-components-box { margin-top: 12px; }

/* Auditní log (Petr's AdminPages Audit) */
.au-export { display: flex; gap: 8px; align-items: center; }
.au-filters { margin-bottom: 20px; }
.au-filters .an-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.au-filters .an-field, .au-filters .stats-select { width: 100%; min-width: 0; }
.au-tech { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.au-tech summary { cursor: pointer; }
@media (max-width: 800px) { .au-export { width: 100%; } .adm-table tr.adm-detail:not([hidden]), .adm-table tr.adm-detail > td { display: block; } }

/* Účet (Petr's AdminPages Account) */
.ac-who { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.ac-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; font-weight: 700; flex: none; }
.ac-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-langs form { margin: 0; }
.ac-stations { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
/* a long action label (Greek "Επεξεργασία ονόματος") must not push a phone row wider than the screen */
@media (max-width: 800px) { .adm-table tr.adm-row > td.users-actions-col { grid-column: 1 / -1; white-space: normal; } .adm-table .adm-act { white-space: normal; } }

/* Přehled oprávnění (Petr, 1.10.2026) */
.acc-card { margin-bottom: 20px; }
.acc-scroll { overflow-x: auto; }
.acc-matrix { min-width: 760px; }
.acc-matrix th[scope="row"] { text-align: left; font-weight: 600; min-width: 200px; }
.acc-role-pick { display: none; }
@media (max-width: 800px) {
    .acc-role-pick { display: flex; margin-bottom: 12px; }
    .acc-matrix { min-width: 0; width: 100%; }
    .acc-matrix [data-col]:not(.is-col) { display: none; }
    .acc-matrix th[scope="row"] { min-width: 0; width: 58%; white-space: normal; font-size: 13px; }
    .acc-matrix td { white-space: normal; }
    .acc-split { justify-content: flex-end; flex-wrap: wrap; }
}
.acc-matrix td { text-align: center; vertical-align: middle; }
.acc-yes { color: var(--brand-strong); font-weight: 700; font-size: 16px; }
.acc-no { color: var(--ink-2); }
.acc-group th { background: var(--surface-2); text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.acc-split { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 2px 0; font-size: 12px; }
.acc-tally .ch-badge { margin: 2px 4px 2px 0; }

/* Události: several at once (Petr, 2.10.2026) */
.ev-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 18px; margin-bottom: 12px; position: sticky; top: 64px; z-index: 5; }
.ev-bulk .adm-actions { margin: 0 0 0 auto; }
.ev-check-all { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ev-check-col { width: 36px; text-align: center; }
.ev-check, #ev-all { width: 18px; height: 18px; accent-color: #208536; cursor: pointer; }
.ev-table tr.is-selected > td { background: var(--brand-tint); }
.ev-one { margin-top: 12px; }
@media (max-width: 800px) {
    .ev-bulk { top: 56px; }
    .ev-bulk .adm-actions { margin: 0; width: 100%; }
    .ev-bulk .adm-actions .outline-button { flex: 1; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ev-bulk-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 800px) {
    /* the phone grid outranked [hidden], so search/priority filters hid nothing on a phone */
    .ev-table tr.ev-row[hidden] { display: none; }
    /* with checkboxes: tick column on the left, the rest beside it */
    .ev-table tr.ev-row:has(> td.ev-check-col) { grid-template-columns: 34px 1fr auto; }
    .ev-table tr.ev-row > td.ev-check-col { grid-column: 1; grid-row: 1 / span 3; padding: 2px 0 0 8px; width: auto; text-align: left; }
    .ev-table tr.ev-row > td.ev-check-col + td { grid-column: 2 / -1; padding-left: 4px; }
    .ev-table tr.ev-row > td.ev-check-col ~ td:nth-child(3), .ev-table tr.ev-row > td.ev-check-col ~ td:nth-child(5) { grid-column: 2; padding-left: 4px; }
    .ev-table tr.ev-row > td.ev-check-col ~ td:nth-child(4), .ev-table tr.ev-row > td.ev-check-col ~ td:nth-child(6) { grid-column: 3; }
}
@media (max-width: 800px) {
    .ev-table tr.ev-row:has(> td.ev-check-col) { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .ev-table tr.ev-row > td { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    .ev-table tr.ev-row.is-selected { background: var(--brand-tint); }
    .ev-table tr.ev-row.is-selected > td { background: none; }
}