/*
 * style.css – Jízdní řády IDS JMK
 * ===================================
 *
 * Návrhové principy (přístupnost na prvním místě, dle zadání):
 *  - Žádný CSS Grid pro strukturu obsahu, jen pro velké rozložení stránky
 *    (sidebar + hlavní obsah) – sémantika zůstává v HTML, ne v CSS.
 *  - Vysoký kontrast textu (WCAG AA min. 4.5:1, většina spojů přes 7:1).
 *  - Barva NIKDY není jediný nositel informace (zpoždění má i text "+5 min",
 *    ne jen červenou barvu; typ vozidla má textovou zkratku BUS/TRAM/VLAK).
 *  - Viditelné :focus-visible obrysy na všech interaktivních prvcích –
 *    klávesnicoví uživatelé musí vždy vidět, kde jsou.
 *  - prefers-reduced-motion respektováno (žádné animace ve výchozím stavu,
 *    a i tak jen velmi jemné přechody, ne nutné k pochopení obsahu).
 *  - Relativní jednotky (rem) – respektuje uživatelské zvětšení písma
 *    v prohlížeči, nepřepisuje ho pevnými px hodnotami.
 *  - Minimální barevná paleta odvozená z barev IDS JMK (modrá #0055a4 jako
 *    fallback barva linek v importer.php), ne generická "AI design" paleta.
 */

:root {
    /* ── Základní paleta ─────────────────────────────────────────────────── */
    --barva-text:          #000000;      /* černá – kontrast 21:1 na bílé */
    --barva-text-tlumena:  #646569;      /* šedá – kontrast 5.7:1 na bílé (AA) */
    --barva-pozadi:        #ffffff;
    --barva-pozadi-tlumena:#f2f3f4;      /* světle šedá pro sekce */
    --barva-okraj:         #c0c2c6;

    /* ── IDS JMK – výchozí téma (jízdní řády, info stránky) ────────────── */
    --barva-primar:        #1D34FE;      /* IDS modrá – odkazy, aktivní prvky */
    --barva-primar-tmava:  #1228cc;      /* tmavší pro hover */
    --barva-akcent:        #FB5271;      /* magenta – důraz, ikony */
    --barva-header-bg:     #1D34FE;      /* header pozadí */
    --barva-header-text:   #ffffff;
    --barva-tab-active:    #FB5271;      /* aktivní záložka */

    /* ── Stavy zpoždění (kontrast ≥ 4.5:1 na bílé) ──────────────────────── */
    --barva-zpozdeni-mensi: #7a5c00;     /* žlutá zpoždění: tmavší pro kontrast */
    --barva-zpozdeni-vetsi: #b3261e;
    --barva-vcas:           #1a5c35;

    /* ── Zebra / zvýraznění ───────────────────────────────────────────────── */
    --barva-zvyrazneni:    #f2f3f4;

    /* ── Mezery ──────────────────────────────────────────────────────────── */
    --mezera-s: 0.5rem;
    --mezera-m: 1rem;
    --mezera-l: 2rem;

    /* ── Focus obrys ────────────────────────────────────────────────────── */
    --focus-barva:   #FB5271;
    --focus-sirka:   3px;
    --focus-offset:  3px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%; /* respektuje nastavení prohlížeče, NEpřepisuje na px */
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--barva-text);
    background: var(--barva-pozadi);
}

/* ── Skip link – první interaktivní prvek na stránce ─────────────────────── */

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--barva-primar-tmava);
    color: #fff;
    padding: var(--mezera-s) var(--mezera-m);
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

/* ── Viditelný focus na VŠECH interaktivních prvcích ─────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: var(--focus-sirka) solid var(--focus-barva);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
}

/* ── Hlavička webu ──────────────────────────────────────────────────────── */

.site-header {
    background: var(--barva-header-bg);
    color: var(--barva-header-text);
    padding: var(--mezera-m) var(--mezera-l);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mezera-m);
    border-bottom: 4px solid var(--barva-akcent);
}

.site-logo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.site-logo a {
    color: #fff;
    text-decoration: none;
}

.search-form {
    display: flex;
    gap: var(--mezera-s);
    align-items: center;
    flex-wrap: wrap;
}

.search-form label {
    /* Vizuálně skryté, ale čtečce dostupné – pole má i viditelný placeholder */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.search-form input[type="search"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    font-size: 1rem;
    min-width: 14rem;
}

.search-form button,
form button[type="submit"] {
    padding: 0.4rem 1rem;
    background: #fff;
    color: var(--barva-primar-tmava);
    border: 1px solid #fff;
    border-radius: 0.25rem;
    font-weight: 600;
    cursor: pointer;
}

.search-form button:hover {
    background: var(--barva-pozadi-tlumena);
}

/* ── Hlavní rozložení: sidebar + obsah ─────────────────────────────────────
 * Flexbox jen pro velké vizuální rozdělení – pořadí v HTML (nav PŘED main)
 * je smysluplné i bez CSS, takže lineární čtečka/Lynx dává smysl rovněž. */

.layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mezera-l);
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--mezera-m);
}

.route-nav {
    flex: 0 0 14rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    padding: var(--mezera-m);
    max-height: 80vh;
    overflow-y: auto;
}

.route-nav h2 {
    margin-top: 0;
    font-size: 1rem;
}

.route-nav-group {
    font-size: 0.9rem;
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #d5dde8;
    color: #33475b;
}
.route-nav-group:first-of-type { margin-top: 0.5rem; }

.route-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-nav li {
    margin-bottom: 0.25rem;
}

.route-nav a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    color: var(--barva-text);
    text-decoration: none;
    border-radius: 0.2rem;
}

.route-nav a:hover {
    background: var(--barva-okraj);
}

main {
    flex: 1 1 30rem;
    min-width: 0; /* zabrání přetečení širokých tabulek mimo flex item */
}

/* ── Odkazy ────────────────────────────────────────────────────────────── */

a {
    color: var(--barva-primar);
}

a:hover {
    color: var(--barva-primar-tmava);
}

/* ── Odznak linky (barevný štítek s číslem linky) ─────────────────────────
 * Barva NENÍ jediný nositel informace – uvnitř je vždy i textová zkratka
 * typu vozidla (BUS/TRAM/VLAK/...) a číslo linky jako text. */

.route-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.route-long-name {
    display: block;
    font-size: 0.85rem;
    color: var(--barva-text-tlumena);
    font-weight: 400;
}

/* ── Tabulky (jádro přístupnosti tohoto webu) ─────────────────────────────
 * Sémantické <table> všude, kde jrbrno.cz používá tabulky – záměrně
 * NEnahrazeno CSS gridem, viz zadání na přístupnost. */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--mezera-l);
}

caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: var(--mezera-s);
}

th,
td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--barva-okraj);
    vertical-align: top;
}

thead th {
    background: var(--barva-pozadi-tlumena);
    border-bottom: 2px solid var(--barva-okraj);
    font-weight: 700;
}

tbody tr:nth-child(even) {
    background: var(--barva-zvyrazneni);
}

tbody th[scope="row"] {
    font-weight: 600;
    white-space: nowrap;
}

/* Tabulky linkového JŘ (linka.php) bývají velmi široké (desítky sloupců =
 * desítky spojů) – povolit horizontální scroll v rámci kontejneru, ne
 * přetečení celé stránky. Sloupec se zastávkami (první) zůstává viditelný. */

.route-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.route-timetable {
    margin-bottom: 0;
}

.route-timetable th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--barva-pozadi);
    box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.1);
}

.route-timetable tbody tr:nth-child(even) th[scope="row"] {
    background: var(--barva-zvyrazneni);
}

/* Hodinová tabulka (zastavka.php) – sloupec "Minuty odjezdu" obsahuje
 * víc klikacích odkazů vedle sebe, mezera mezi nimi je čitelnější s gap. */

.hours-table td {
    line-height: 2;
}

.dep-time {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    margin: 0.1rem;
    border-radius: 0.2rem;
    text-decoration: none;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
}

.dep-time:hover {
    background: var(--barva-okraj);
}

/* ── Zpoždění – barva DOPLŇUJE text, nenahrazuje ho ──────────────────────── */

.delay-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.delay-ontime {
    color: var(--barva-vcas);
}

.delay-minor {
    color: var(--barva-zpozdeni-mensi);
}

.delay-major {
    color: #fff;
    background: var(--barva-zpozdeni-vetsi);
}

/* ── Drobečková navigace ───────────────────────────────────────────────── */

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0;
    margin: 0 0 var(--mezera-m) 0;
    font-size: 0.9rem;
    color: var(--barva-text-tlumena);
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 0.3rem;
}

.breadcrumbs li[aria-current="page"] {
    font-weight: 600;
    color: var(--barva-text);
}

/* ── Úvodní stránka ────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.hero-search {
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.5rem;
    padding: var(--mezera-l);
    margin-bottom: var(--mezera-l);
}

.hero-search form {
    display: flex;
    gap: var(--mezera-s);
    flex-wrap: wrap;
}

.hero-search input[type="search"] {
    flex: 1 1 20rem;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.hero-search button {
    padding: 0.6rem 1.5rem;
    background: var(--barva-primar);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.hero-search button:hover {
    background: var(--barva-primar-tmava);
}

.hero-hint {
    margin-bottom: 0;
    color: var(--barva-text-tlumena);
    font-size: 0.9rem;
}

.route-group {
    margin-bottom: var(--mezera-l);
}

.route-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mezera-s);
}

.route-grid li a {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    min-width: 4rem;
}

.route-grid li a:hover {
    background: var(--barva-pozadi-tlumena);
}

/* ── Detail spoje – metadata jako definiční seznam ───────────────────────── */

.trip-meta {
    list-style: none;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    padding: var(--mezera-m);
    margin: 0 0 var(--mezera-l);
}

.trip-meta li {
    margin: 0;
    padding: 0.25rem 0;
    line-height: 1.5;
}

.trip-meta li + li {
    border-top: 1px solid var(--barva-okraj);
}

.trip-meta li strong {
    color: var(--barva-text-tlumena);
    font-weight: 600;
    margin-right: 0.35rem;
}

/* ── Drobnosti ──────────────────────────────────────────────────────────── */

.platform-code,
.zone-id,
.pickup-note {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.85rem;
    color: var(--barva-text-tlumena);
    font-weight: 400;
}

.accessibility-note {
    font-weight: 600;
}

.related-platforms {
    background: var(--barva-pozadi-tlumena);
    padding: var(--mezera-s) var(--mezera-m);
    border-radius: 0.25rem;
}

/* ── Patička ───────────────────────────────────────────────────────────── */

.site-footer {
    max-width: 75rem;
    margin: var(--mezera-l) auto 0;
    padding: var(--mezera-m);
    border-top: 1px solid var(--barva-okraj);
    color: var(--barva-text-tlumena);
    font-size: 0.85rem;
}

/* ── Responzivita: malé obrazovky ─────────────────────────────────────────
 * Sidebar se přesune nad obsah místo vedle něj – pořadí v DOM (nav před
 * main) zůstává stejné, jen se vizuálně naskládá pod sebe. */

@media (max-width: 48rem) {
    .layout {
        flex-direction: column;
    }

    .route-nav {
        flex: 1 1 auto;
        max-height: 14rem;
        width: 100%;
    }

    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Respektovat preferenci omezeného pohybu ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}

/* ── Linkový JŘ: hlavní layout (zastávky vlevo, odjezdy vpravo) ─────────── */

.route-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mezera-l);
    align-items: flex-start;
}

/* ── Přepínač směrů ──────────────────────────────────────────────────────── */

.direction-switcher {
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: .25rem;
    padding: var(--mezera-s) var(--mezera-m);
    margin-bottom: var(--mezera-m);
}

.direction-switcher__heading {
    display: inline;
    font-size: 1rem;
    margin: 0;
}

.direction-switcher__list {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.direction-switcher__list li {
    display: inline;
}

.direction-switcher__list li::before {
    content: ' · ';
    color: var(--barva-text-tlumena);
}

.direction-switcher__list li:first-child::before {
    content: ' ';
}

/* ── Seznam zastávek (levý panel) ────────────────────────────────────────── */

.stop-switcher {
    flex: 0 0 15rem;
    min-width: 12rem;
    max-width: 20rem;
}

.stop-switcher__heading {
    font-size: 1rem;
    margin-top: 0;
}

.stop-switcher__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 3px solid var(--barva-okraj);
}

.stop-switcher__item {
    position: relative;
    padding: .25rem .5rem .25rem .75rem;
    font-size: .9rem;
}

/* Aktivní zastávka je vizuálně zvýrazněna barevnou čarou */
.stop-switcher__item--active {
    border-left: 3px solid var(--barva-primar);
    margin-left: -3px;
    background: var(--barva-pozadi-tlumena);
}

.stop-switcher__item a {
    display: block;
    color: var(--barva-text);
    text-decoration: none;
}

.stop-switcher__item a:hover {
    color: var(--barva-primar);
    text-decoration: underline;
}

/* Mezičas nad položkou zastávky */
.stop-switcher__interval {
    display: block;
    font-size: .75rem;
    color: var(--barva-text-tlumena);
    padding-left: .1rem;
    margin-top: .2rem;
}

/* Zóna za názvem zastávky */
.stop-switcher__zone {
    display: inline-block;
    margin-left: .4rem;
    font-size: .75rem;
    color: var(--barva-text-tlumena);
    background: var(--barva-okraj);
    border-radius: .2rem;
    padding: 0 .3rem;
}

/* ── Odznak stanoviště/nástupně ──────────────────────────────────────────── */

.platform-badge {
    display: inline-block;
    margin-left: .3rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: .2rem;
    padding: 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ── Odjezdová sekce (pravý panel) ──────────────────────────────────────── */

.departure-section {
    flex: 1 1 22rem;
    min-width: 0;
}

.zone-info {
    color: var(--barva-text-tlumena);
    font-size: .9rem;
    margin-top: -.5rem;
    margin-bottom: var(--mezera-m);
}

/* Odjezdové časy v hodinové tabulce */
.dep-time {
    display: inline-block;
    padding: .1rem .35rem;
    margin: .1rem .1rem .1rem 0;
    border-radius: .2rem;
    text-decoration: none;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    white-space: nowrap;
}

.dep-time:hover {
    background: var(--barva-okraj);
}

/* Nízkopodlažní symbol (vizuálně za minutou) */
.dep-wheelchair {
    font-size: .85rem;
    margin-left: .1rem;
    color: #1e6b3c;
}

/* Nástup na znamení */
.dep-demand {
    font-size: .75rem;
    font-weight: 700;
    margin-left: .1rem;
    color: var(--barva-text-tlumena);
    background: var(--barva-okraj);
    border-radius: .15rem;
    padding: 0 .15rem;
}

/* Kód varianty konečné (A/B/C jako superscript) */
.dep-variant {
    font-size: .65rem;
    color: var(--barva-text-tlumena);
    font-weight: 700;
}

/* ── Legendy ─────────────────────────────────────────────────────────────── */

.variant-legend,
.symbol-legend {
    margin-top: var(--mezera-l);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: .25rem;
    font-size: .9rem;
}

.variant-legend dl,
.symbol-legend dl {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
}

.variant-legend dl div,
.symbol-legend dl div {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.variant-legend dt,
.symbol-legend dt {
    font-weight: 700;
    min-width: 1.5rem;
}

/* ── Responzivita: úzké obrazovky ────────────────────────────────────────── */

@media (max-width: 42rem) {
    .route-layout {
        flex-direction: column;
    }

    .stop-switcher {
        flex: 1 1 auto;
        max-width: 100%;
        /* Na malé obrazovce zobrazit seznam zastávek jako vodorovný scrollovatelný pás */
        overflow-x: auto;
    }

    .stop-switcher__list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-left: none;
        border-bottom: 3px solid var(--barva-okraj);
        gap: 0;
    }

    .stop-switcher__item {
        border-left: none;
        border-bottom: 3px solid transparent;
        margin-left: 0;
        margin-bottom: -3px;
        white-space: nowrap;
    }

    .stop-switcher__item--active {
        border-left: none;
        border-bottom: 3px solid var(--barva-primar);
        margin-left: 0;
    }

    /* Na úzkých obrazovkách skrýt mezičasy (ušetří místo v horizontálním pásu) */
    .stop-switcher__interval {
        display: none;
    }
}

/* ── Linka layout: levý panel zastávek + pravý panel odjezdů ─────────────── */

.linka-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--mezera-l);
}

/* Levý panel se seznamem zastávek */
.stop-list {
    flex: 0 0 16rem;
    position: sticky;
    top: var(--mezera-m);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    background: var(--barva-pozadi-tlumena);
}

.stop-list table {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Aktuálně vybraná zastávka – výrazně odlišená */
.stop-list-current {
    background: var(--barva-primar);
    color: #fff;
}

.stop-list-current a,
.stop-list-current strong {
    color: #fff;
}

/* Sloupec mezičasů – zarovnat vpravo, menší font */
.stop-list-minutes {
    text-align: right;
    white-space: nowrap;
    color: var(--barva-text-tlumena);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.stop-list-current .stop-list-minutes {
    color: rgba(255, 255, 255, 0.8);
}

/* Pravý panel odjezdů */
.departure-section {
    flex: 1 1 0;
    min-width: 0; /* zabránit přetečení */
}

/* Přepínač směrů nad tabulkou */
.direction-switcher {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mezera-s);
    padding: 0;
    margin: 0 0 var(--mezera-l) 0;
}

.direction-switcher li {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    background: var(--barva-pozadi-tlumena);
}

.direction-switcher strong {
    color: var(--barva-primar-tmava);
}

/* Horní index kódu varianty konečné (A, B, C...) */
/* Barva DOPLŇUJE text v legendě, není jediný nositel informace */
.variant-code {
    font-size: 0.65em;
    vertical-align: super;
    font-weight: 700;
    color: var(--barva-zpozdeni-mensi);
    margin-left: 1px;
}

/* Nízkopodlažní spoj – zvýrazněný rámeček, info předává aria-labelledby */
.dep-time-np {
    border-color: var(--barva-vcas);
}

/* Legenda variant konečných (pod tabulkou) */
.variant-legend {
    margin-top: var(--mezera-l);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.variant-legend h3 {
    margin-top: 0;
    font-size: 0.9rem;
}

.variant-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.variant-legend li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Responzivita: na malých obrazovkách linka-layout vertikálně */
@media (max-width: 48rem) {
    .linka-layout {
        flex-direction: column;
    }

    .stop-list {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: 14rem;
    }
}

/* ── Linkový JŘ – nový layout (linka.php přepis) ─────────────────────────── */

/* Dvousloupcový layout: seznam zastávek vlevo, tabulka vpravo */
.route-layout {
    display: flex;
    gap: var(--mezera-l);
    align-items: flex-start;
}

/* ── Seznam zastávek (levý panel) ──────────────────────────────────────────── */

.stop-list {
    flex: 0 0 16rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    padding: var(--mezera-m);
    max-height: 80vh;
    overflow-y: auto;
    position: sticky;
    top: var(--mezera-m);
}

.stop-list h2 {
    margin-top: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--barva-text-tlumena);
}

.stop-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stop-list-item {
    position: relative;
    padding-left: 1.5rem; /* místo pro mezičas */
}

/* Svislá čára spojující zastávky vizuálně */
.stop-list-item::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--barva-okraj);
}

.stop-list-item:first-child::before {
    top: 50%;
}

.stop-list-item:last-child::before {
    bottom: 50%;
}

/* Kulatý bod u každé zastávky */
.stop-list-item a::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--barva-okraj);
    border: 2px solid var(--barva-pozadi-tlumena);
}

.stop-list-item--active a::before {
    background: var(--barva-primar);
}

.stop-list-item a {
    display: block;
    padding: 0.3rem 0.3rem 0.3rem 0;
    color: var(--barva-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
}

.stop-list-item--active a {
    font-weight: 700;
    color: var(--barva-primar);
}

.stop-list-item a:hover {
    color: var(--barva-primar);
}

/* Mezičas "+X min" nad názvem zastávky */
.travel-time {
    display: block;
    font-size: 0.72rem;
    color: var(--barva-text-tlumena);
    padding-left: 0.3rem;
    margin-top: 0.1rem;
}

/* Odznak zóny */
.zone-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.25rem;
    font-size: 0.72rem;
    background: var(--barva-okraj);
    border-radius: 0.2rem;
    vertical-align: middle;
    color: var(--barva-text-tlumena);
}

/* ── Oblast s tabulkou odjezdů ───────────────────────────────────────────── */

.timetable-area {
    flex: 1;
    min-width: 0;
}

.timetable-area h2 {
    margin-top: 0;
}

/* ── Přepínač směru (direction-tabs) ────────────────────────────────────── */

.direction-switcher {
    margin-bottom: var(--mezera-m);
}

.direction-tabs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.direction-tabs a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--barva-text);
}

.direction-tabs a.active,
.direction-tabs a[aria-current="true"] {
    background: var(--barva-primar);
    border-color: var(--barva-primar);
    color: #fff;
    font-weight: 600;
}

.direction-tabs a:hover:not(.active) {
    background: var(--barva-pozadi-tlumena);
}

/* ── Záložky kategorie dnů ────────────────────────────────────────────────── */

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--mezera-m);
}

.category-tabs a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--barva-text);
}

.category-tabs a.active,
.category-tabs a[aria-selected="true"] {
    background: var(--barva-pozadi-tlumena);
    border-color: var(--barva-primar);
    border-bottom-color: var(--barva-pozadi-tlumena);
    font-weight: 600;
    color: var(--barva-primar);
}

/* ── Tabulka odjezdů (HH | MM MM MM ...) ───────────────────────────────── */

.departure-table {
    border-collapse: collapse;
    margin-bottom: var(--mezera-m);
    width: 100%;
}

.departure-table th,
.departure-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--barva-okraj);
    vertical-align: top;
    text-align: left;
}

.departure-table thead th {
    background: var(--barva-pozadi-tlumena);
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Sloupec hodiny – tučný, čitelný, zarovnaný */
.departure-table tbody th[scope="row"] {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--barva-primar);
    min-width: 2.5rem;
}

/* Odjezd – jeden klikací čas */
.dep-min {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    margin: 0.1rem 0.05rem;
    border-radius: 0.2rem;
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--barva-text);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    white-space: nowrap;
}

.dep-min:hover {
    background: var(--barva-okraj);
}

/* Odjezd na znamení – přerušená hranice */
.dep-min--ondemand {
    border-style: dashed;
}

/* Symbol vozíku (nízkopodlažní) – vizuální, pro SR neviditelný */
.sym-wheelchair {
    font-size: 0.7rem;
    vertical-align: super;
    margin-left: 0.05rem;
    /* aria-hidden="true" je nastaveno přímo v HTML */
}

/* Kód zkrácené konečné (A, B, C...) */
.dir-code {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--barva-primar-tmava);
    vertical-align: super;
    margin-left: 0.05rem;
}

/* ── Legenda ────────────────────────────────────────────────────────────── */

.timetable-legend {
    margin-top: var(--mezera-l);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

.timetable-legend h3 {
    margin-top: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--barva-text-tlumena);
}

.timetable-legend dl {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.3rem 0.8rem;
    margin: 0;
}

.timetable-legend dt {
    font-weight: 700;
    text-align: center;
}

.timetable-legend dd {
    margin: 0;
}

/* ── Responzivita ────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
    .route-layout {
        flex-direction: column;
    }

    .stop-list {
        flex: 1 1 auto;
        max-height: 12rem;
        width: 100%;
        position: static;
    }
}

/* ── Linka.php – nový layout ─────────────────────────────────────────────── */

/* Panel se zastávkami (levý sloupec v linka-layout) */
.stops-panel {
    flex: 0 0 17rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    padding: var(--mezera-m);
    max-height: 80vh;
    overflow-y: auto;
}

.stops-panel h2 {
    margin-top: 0;
    font-size: 1rem;
}

.stops-panel-hint {
    font-size: 0.85rem;
    color: var(--barva-text-tlumena);
    margin-top: 0;
}

/* Seřazený seznam zastávek */
.stops-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Každá zastávka jako položka */
.stop-item {
    padding: 0.3rem 0.5rem;
    border-radius: 0.2rem;
    line-height: 1.4;
}

.stop-item a {
    display: block;
    color: var(--barva-text);
    text-decoration: none;
}

.stop-item a:hover {
    background: var(--barva-okraj);
    border-radius: 0.2rem;
}

/* Aktivní (právě zobrazená) zastávka */
.stop-item--active {
    background: var(--barva-primar);
    color: #fff;
    font-weight: 600;
}

.stop-item--active .zone-badge {
    color: rgba(255,255,255,0.8);
}

/* Mezičas mezi zastávkami (li.travel-time) */
.travel-time {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--barva-text-tlumena);
    font-size: 0.75rem;
}

.travel-time::before,
.travel-time::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--barva-okraj);
}

.travel-min {
    white-space: nowrap;
}

/* Panel s odjezdy (pravý/spodní) */
.departures-panel {
    flex: 1 1 30rem;
    min-width: 0;
}

/* Přepínač směrů */
.direction-switcher {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--mezera-l) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mezera-s);
}

.direction-switcher li a,
.direction-switcher li .direction-active {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--barva-text);
}

.direction-active {
    background: var(--barva-primar);
    border-color: var(--barva-primar);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.direction-switcher li a:hover {
    background: var(--barva-pozadi-tlumena);
}

.trip-count {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Odjezd "na znamení" – vizuálně odlišený (kurzíva) */
.dep-time--demand {
    font-style: italic;
    opacity: 0.85;
}

/* Kód varianty konečné (A/B jako superscript) */
.variant-code {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--barva-primar);
    margin-left: 0.1rem;
    vertical-align: super;
}

/* Legenda variant konečných */
.variant-legend {
    margin-top: var(--mezera-l);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

.variant-legend h3 {
    margin-top: 0;
    font-size: 0.95rem;
}

.variant-legend dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--mezera-l);
}

.variant-legend div {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.variant-legend dt sup {
    font-weight: 700;
    color: var(--barva-primar);
}

/* Zónové označení zastávky */
.zone-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--barva-text-tlumena);
    margin-left: 0.3rem;
}

/* Responzivita: stops-panel pod tabulkou na malých obrazovkách */
@media (max-width: 48rem) {
    .linka-layout {
        flex-direction: column;
    }

    .stops-panel {
        flex: 1 1 auto;
        max-height: 14rem;
        width: 100%;
    }
}

/* ── Pseudotaby ──────────────────────────────────────────────────────────── */

/* Kontejner pseudotabů – vizuálně "lišta záložek" pod hlavičkou */
.pseudotabs {
    background: #0d1ea8;   /* o tón tmavší než header */
    padding: 0 var(--mezera-l);
    border-bottom: 3px solid var(--barva-akcent);
}

.pseudotabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pseudotabs-list li {
    display: inline-block;
}

/* Každý pseudotab */
.pseudotab {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.pseudotab:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-bottom-color: rgba(255,255,255,0.4);
}

/* Aktivní pseudotab */
.pseudotab--active {
    color: #000;
    background: var(--barva-pozadi);
    border-bottom-color: var(--barva-pozadi);
    border-radius: 0.3rem 0.3rem 0 0;
    font-weight: 700;
}

.pseudotab--active:hover {
    color: #000;
    background: var(--barva-pozadi);
    border-bottom-color: var(--barva-pozadi);
}

/* Layout bez sidebaru (tabu Linky a Hledat) – full width */
.layout:not(.layout--with-sidebar) {
    display: block;
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--mezera-m);
}

/* ── Záložka Zastávky (zastavky.php) ─────────────────────────────────────── */

/* Sekce s vyhledávacím comboboxem */
.stops-search-section {
    margin-bottom: var(--mezera-l);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.stops-search-section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

/* Combobox kontejner (WAI-ARIA pattern) */
.combobox-container {
    position: relative;
    max-width: 32rem;
}

.combobox-container label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.combobox-wrap {
    display: block;
}

.combobox-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-size: 1.05rem;
    border: 2px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.combobox-input:focus {
    outline: 3px solid var(--barva-primar);
    outline-offset: 1px;
    border-color: var(--barva-primar);
}

/* Listbox s výsledky (vyskakuje pod inputem) */
.combobox-listbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    background: var(--barva-pozadi);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 20rem;
    overflow-y: auto;
    z-index: 20;
}

.listbox-option {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}

.listbox-option:last-child {
    border-bottom: none;
}

.listbox-option:hover,
.listbox-option[aria-selected="true"] {
    background: var(--barva-primar);
    color: #fff;
}

.listbox-empty {
    padding: 0.5rem 0.8rem;
    color: var(--barva-text-tlumena);
    font-style: italic;
}

/* ── Vyhledávání ve výlukách ─────────────────────────────────────────────── */
.vyluky-search {
    margin-bottom: var(--mezera-l);
}

/* Přepínač režimu (linky × místa) */
.search-mode {
    border: 1px solid var(--barva-okraj);
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    margin: 0 0 var(--mezera-s);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    align-items: center;
}

.search-mode legend {
    font-weight: 700;
    padding: 0 0.3rem;
}

.search-mode label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.search-hint {
    margin: 0.4rem 0 0;
}

/* Textové tlačítko (vypadá jako odkaz, ale je to <button> pro čtečku) */
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--barva-primar);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.link-button:hover,
.link-button:focus-visible {
    text-decoration: none;
}

/* Blok jedné obce */
.city-block {
    margin-bottom: var(--mezera-l);
}

.city-heading {
    font-size: 1.15rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--barva-primar);
    margin-bottom: var(--mezera-s);
}

.city-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--barva-text-tlumena);
}

/* Seznam stanic v obci */
.station-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.station-link-list li {
    flex: 0 1 auto;
}

.station-link-list a {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--barva-text);
}

.station-link-list a:hover {
    background: var(--barva-primar);
    color: #fff;
    border-color: var(--barva-primar);
}

.stop-count-badge {
    font-size: 0.75rem;
    color: var(--barva-text-tlumena);
    margin-left: 0.2rem;
}

.station-link-list a:hover .stop-count-badge {
    color: rgba(255,255,255,0.85);
}

.stops-list-hint {
    color: var(--barva-text-tlumena);
    font-size: 0.9rem;
    margin-bottom: var(--mezera-l);
}

/* Zvýraznění stanice po skoku z autocompletu */
.station-highlight {
    animation: station-flash 2s ease-out;
}

@keyframes station-flash {
    0%, 30% { background: #fff3cd; }
    100% { background: transparent; }
}

/* Respektovat preferenci omezeného pohybu – bez animace */
@media (prefers-reduced-motion: reduce) {
    .station-highlight {
        animation: none;
        background: #fff3cd;
    }
}

/* ── Záložka Agregované zastávky (agregovane.php) ───────────────────────────── */

/* Přepínač dne */
.day-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mezera-s);
    margin-bottom: var(--mezera-m);
}

.day-switcher-label {
    font-weight: 600;
}

.day-switcher a,
.day-switcher .day-active {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--barva-text);
}

.day-switcher .day-active {
    background: var(--barva-primar);
    border-color: var(--barva-primar);
    color: #fff;
    font-weight: 600;
}

.day-switcher a:hover {
    background: var(--barva-pozadi-tlumena);
}

/* Směrová skupina */
.direction-group {
    margin-bottom: var(--mezera-l);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    overflow: hidden;
}

.direction-group-heading {
    margin: 0;
    padding: var(--mezera-s) var(--mezera-m);
    background: var(--barva-primar);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Kompasová značka (SZ/JV/...) */
.compass-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: rgba(255,255,255,0.25);
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Blok jedné koncové zastávky */
.terminal-block {
    padding: var(--mezera-s) var(--mezera-m);
    border-top: 1px solid var(--barva-okraj);
}

.terminal-block:first-of-type {
    border-top: none;
}

.terminal-heading {
    font-size: 1rem;
    margin: var(--mezera-s) 0;
}

.terminal-lines {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--barva-text-tlumena);
}

/* Tabulka agregovaných odjezdů */
.agg-departures {
    margin-bottom: var(--mezera-s);
}

.agg-departures td {
    padding: 0.3rem 0.6rem;
}

.agg-departures .route-badge {
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
}

/* ── linka.php – směry, větve, kumulativní časy ────────────────────────────── */

/* Přepínač opačného směru */
.opposite-direction {
    margin-bottom: var(--mezera-m);
}

.opposite-direction a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 600;
}

.opposite-direction a:hover {
    background: var(--barva-okraj);
}

/* Kumulativní jízdní čas v seznamu zastávek */
.cum-time {
    display: inline-block;
    min-width: 2.4rem;
    margin-right: 0.4rem;
    color: var(--barva-text-tlumena);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Zastávka na znamení – textová značka u názvu */
.on-demand-tag {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--barva-text-tlumena);
    margin-left: 0.2rem;
}

/* Vnořený seznam slepých větví */
.branch-list {
    list-style: none;
    margin: 0.3rem 0 0.3rem 1.5rem;
    padding-left: 0.6rem;
    border-left: 2px dashed var(--barva-okraj);
}

.branch-label {
    font-size: 0.78rem;
    color: var(--barva-text-tlumena);
    font-style: italic;
    padding: 0.15rem 0;
}

.branch-stop {
    padding: 0.2rem 0.4rem;
}

.branch-stop a {
    display: block;
    color: var(--barva-text);
    text-decoration: none;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
}

.branch-stop a:hover {
    background: var(--barva-okraj);
}

/* ── linka.php – výběr dne a poznámka o zobrazeném JŘ ───────────────────────── */

/* Poznámka, jaký den se právě zobrazuje */
.current-day-note {
    margin: var(--mezera-s) 0 var(--mezera-m);
    padding: 0.5rem 0.8rem;
    background: var(--barva-pozadi-tlumena);
    border-left: 4px solid var(--barva-primar);
    border-radius: 0.2rem;
    font-size: 0.95rem;
}

/* Rozbalovací výběr konkrétního data */
.date-picker {
    margin: var(--mezera-s) 0;
    font-size: 0.95rem;
}

.date-picker summary {
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    display: inline-block;
    font-weight: 600;
}

.date-picker summary:hover {
    background: var(--barva-okraj);
}

.date-picker-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: var(--mezera-s) 0;
}

.date-picker-form input[type="date"] {
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--barva-okraj);
    border-radius: 0.25rem;
    font-size: 1rem;
}

.date-picker-form input[type="date"]:focus {
    outline: 3px solid var(--barva-primar);
    outline-offset: 1px;
    border-color: var(--barva-primar);
}

.date-picker-form button {
    padding: 0.4rem 1rem;
    background: var(--barva-primar);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 600;
}

.date-picker-form button:hover {
    filter: brightness(0.92);
}

.date-picker-hint {
    font-size: 0.85rem;
    color: var(--barva-text-tlumena);
    margin: 0.3rem 0 0;
}

/* Odznak "dnes" v poznámce o dni */
.day-today-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--barva-primar);
    margin-left: 0.2rem;
}

/* ── linka.php – výběr data (kalendář + textové pole) ───────────────────────── */

/* Datum v H1 nadpisu */
.h1-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--barva-text-tlumena);
    margin-top: 0.2rem;
}

/* Sekce výběru data */
.date-select {
    margin: var(--mezera-s) 0 var(--mezera-m);
    padding: var(--mezera-m);
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
}

.date-select .date-picker-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mezera-m);
}

.date-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.date-field input {
    padding: 0.45rem 0.6rem;
    border: 2px solid var(--barva-okraj);
    border-radius: 0.25rem;
    font-size: 1rem;
    min-width: 14rem;
}

.date-field input:focus {
    outline: 3px solid var(--barva-primar);
    outline-offset: 1px;
    border-color: var(--barva-primar);
}

.date-select button[type="submit"] {
    align-self: flex-end;
    padding: 0.5rem 1rem;
    background: var(--barva-primar);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 600;
}

.date-select button[type="submit"]:hover {
    filter: brightness(0.92);
}

/* Poznámka o platnosti dat */
.data-validity {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--barva-text-tlumena);
}

/* Seznam dat spoje seskupený po měsících (spoj.php) */
.trip-dates-months {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.trip-dates-months li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}
.trip-dates-months strong {
    display: inline-block;
    min-width: 9rem;
}

/* ── Krokování data (předchozí/následující den) ────────────────────────────── */
.date-select-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mezera-m);
}

.date-step {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
}

.date-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: var(--barva-pozadi-tlumena);
    border: 1px solid var(--barva-okraj);
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--barva-text);
    font-size: 0.85rem;
    white-space: nowrap;
}

.date-step-btn:hover {
    background: var(--barva-primar);
    color: #fff;
    border-color: var(--barva-primar);
}

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

.date-step-btn--disabled:hover {
    background: var(--barva-pozadi-tlumena);
    color: var(--barva-text);
    border-color: var(--barva-okraj);
}

/* Odjezd: čas (klikací) + značky vně odkazu (vozík, kód konečné, zpoždění) */
.dep-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    margin: 0.1rem 0.35rem 0.1rem 0;
    white-space: nowrap;
}
.dep-wrap .dep-time {
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.dep-wrap .dep-icon,
.dep-wrap .variant-code,
.dep-wrap .delay-badge {
    font-size: 0.75rem;
}

/* ── JŘ označníku: odjezdy po hodinách (seznam) ─────────────────────────────── */

/* Seznam linek na označníku (chips) */
.lines-on-stop {
    margin-bottom: var(--mezera-l);
}
.lines-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
}
.lines-chips a {
    display: inline-block;
    text-decoration: none;
    border-radius: 0.25rem;
}
.lines-chips a:focus-visible {
    outline: 3px solid var(--barva-primar);
    outline-offset: 2px;
}

/* Nadpis hodiny */
.hour-heading {
    margin: var(--mezera-m) 0 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--barva-primar);
    color: #fff;
    border-radius: 0.25rem;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Seznam odjezdů dané hodiny */
.hour-departures {
    list-style: none;
    margin: 0 0 var(--mezera-s);
    padding: 0;
}
.hour-departure {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}
.hour-departure:last-child {
    border-bottom: none;
}

.hour-dep-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--barva-text);
    flex: 1;
    min-width: 0;
}
.hour-dep-link:hover {
    text-decoration: underline;
}
.hour-dep-link:focus-visible {
    outline: 3px solid var(--barva-primar);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.hour-dep-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 3.2rem;
}
.hour-dep-headsign {
    color: var(--barva-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seznam označníků stanice (odkazy s vypovídajícím názvem) */
.stop-link-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.stop-link-list li {
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}
.stop-link-list li:last-child {
    border-bottom: none;
}
.stop-link-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    color: var(--barva-text);
}
.stop-link-list a:hover {
    background: var(--barva-pozadi-tlumena);
    text-decoration: underline;
}
.stop-link-list a:focus-visible {
    outline: 3px solid var(--barva-primar);
    outline-offset: 2px;
}

/* Sloučený čas (příjezd = odjezd) v detailu spoje */
.time-single {
    text-align: center;
    color: var(--barva-text-tlumena);
}

/* Jeden sloupec Čas v detailu spoje: příjezd/odjezd hezky pod sebou */
.time-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.time-pair {
    display: inline-flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.25;
}
.time-arr {
    color: var(--barva-text-tlumena);
    font-size: 0.9em;
}
.time-dep {
    font-weight: 600;
}
.time-lbl {
    display: inline-block;
    min-width: 2.2em;
    font-size: 0.78em;
    color: var(--barva-text-tlumena);
    font-weight: 400;
}

/* ── Textová mapa vozidel (Vozidla DPMB / Krajská vozidla) ─────────────────── */

.vehicles-updated {
    color: var(--barva-text-tlumena);
    font-size: 0.9rem;
    margin-bottom: var(--mezera-m);
}

/* Seznam linek / zón jako klikací dlaždice */
.vehicle-line-list,
.vehicle-zone-list {
    list-style: none;
    margin: 0.5rem 0 var(--mezera-l);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.vehicle-line-list a,
.vehicle-zone-list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    color: var(--barva-text);
    border: 1px solid var(--barva-pozadi-tlumena);
    border-radius: 0.3rem;
}
.vehicle-line-list a:hover,
.vehicle-zone-list a:hover {
    background: var(--barva-pozadi-tlumena);
}
.vehicle-line-list a:focus-visible,
.vehicle-zone-list a:focus-visible {
    outline: 3px solid var(--barva-primar);
    outline-offset: 2px;
}
.line-badge {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--barva-primar);
    color: #fff;
    text-align: center;
    border-radius: 0.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vehicle-count {
    color: var(--barva-text-tlumena);
    font-size: 0.9em;
}

/* Tabulka vozidel */
.vehicles-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--mezera-l);
}
.vehicles-table th,
.vehicles-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}
.vehicles-table thead th {
    border-bottom: 2px solid var(--barva-primar);
    font-size: 0.9rem;
}
.vehicles-table td {
    font-variant-numeric: tabular-nums;
}

/* Doplňková poznámka v detailu (kurz apod.) */
.meta-note {
    color: var(--barva-text-tlumena);
    font-size: 0.85em;
}

/* Ovládání "vozidla v okolí" (geolokace) */
.near-control {
    background: var(--barva-pozadi-tlumena);
    border-radius: 0.4rem;
    padding: 0.8rem 1rem;
    margin-bottom: var(--mezera-l);
}
.near-control h2 {
    margin-top: 0;
    font-size: 1.1rem;
}
.near-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.near-form label {
    font-weight: 600;
}
.near-form input[type="number"] {
    width: 5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--barva-primar);
    border-radius: 0.25rem;
}
.near-form button {
    padding: 0.45rem 0.9rem;
    background: var(--barva-primar);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
}
.near-form button:hover {
    background: var(--barva-primar-tmava);
}
.near-form button:focus-visible {
    outline: 3px solid var(--barva-text);
    outline-offset: 2px;
}
.near-status {
    margin: 0.4rem 0 0;
    color: var(--barva-text-tlumena);
    min-height: 1.2em;
}

/* Atribuce zdrojů otevřených dat (licenční podmínka CC BY 4.0) */
.footer-attribution {
    font-size: 0.8rem;
    color: var(--barva-text-tlumena);
    margin-top: 0.5rem;
}
.footer-attribution a { color: inherit; }

/* Seznam "Kdy spoj jede" – jede v… / nejede… */
.trip-runs {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--mezera-m);
}
.trip-runs li {
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--barva-pozadi-tlumena);
}
.trip-runs li:last-child { border-bottom: none; }

/* Rychlé odkazy v patičce – sémanticky seznam, vizuálně vodorovně */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}
.footer-links li { margin: 0; }

/* Živá poloha vozidla u odjezdu (jen u realtime-sledovaných spojů) */
.live-location {
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.85em;
    color: #1a6c1a;
    white-space: nowrap;
}

/* Živá poloha vozidla u odjezdu (kompaktní ikona) */
.live-dot {
    margin-left: 0.3em;
    font-size: 0.85em;
    cursor: help;
}

/* Směry (konečné) u označníku – pomáhají rozlišit označníky stejného jména */
.stop-directions {
    display: block;
    font-size: 0.85em;
    color: #555;
    margin-top: 0.15em;
}

/* Směry u linky na označníku */
.line-directions {
    font-size: 0.85em;
    color: #555;
    margin-left: 0.3em;
}

/* Upozornění na výluky na homepage */
.alert-banner {
    background: #fff8e1;
    border: 1px solid #f0c000;
    border-radius: 6px;
    padding: 0.8em 1em;
    margin: 1em 0;
}
.alert-banner h2 {
    font-size: 1.05em;
    margin: 0 0 0.3em;
}

/* Stránka výluk */
.alert-list {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}
.alert-item {
    border: 1px solid #ddd;
    border-left: 4px solid #f0c000;
    border-radius: 4px;
    padding: 0.8em 1em;
    margin-bottom: 1em;
}
.alert-header {
    font-size: 1.1em;
    margin: 0 0 0.4em;
}
.alert-lines {
    margin: 0 0 0.5em;
}
.alert-lines .line-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    background: #333;
    color: #fff;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    margin-right: 0.3em;
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size: 0.9em;
}

/* Piktogram dopravního prostředku uvnitř badge */
.vehicle-icon {
    flex: 0 0 auto;
    vertical-align: -0.125em;
}

/* Barevné odlišení typu dopravy (badge ve výlukách) */
.alert-lines .line-badge--tramvaj   { background: #b5121b; } /* tramvaj – červená */
.alert-lines .line-badge--trolejbus { background: #1f6f3c; } /* trolejbus – zelená */
.alert-lines .line-badge--autobus   { background: #123c78; } /* autobus – modrá */
.alert-lines .line-badge--vlak      { background: #4a4a4a; } /* vlak – šedá */
.alert-lines .line-badge--lod       { background: #0d6a8a; } /* loď – tyrkysová */
.alert-lines .line-badge--neznamy   { background: #333;    } /* neznámý typ */
.alert-desc {
    margin: 0;
    color: #333;
    line-height: 1.5;
}

/* Náhradní doprava (jiný typ vozu než linka standardně) */
.substitute-tag {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    padding: 0.05em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    white-space: nowrap;
}

/* ── Souhrnné odjezdy z uzlu (uzel.php) ──────────────────────────────────── */
.uzel-link {
    margin: var(--mezera-s) 0 var(--mezera-m);
    font-weight: 600;
}

.uzel-window-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: var(--mezera-m);
    padding: 0.6rem 0.8rem;
    background: var(--barva-pozadi-tlumena);
    border-radius: 6px;
}

.uzel-window-form label {
    font-weight: 600;
}

.uzel-window-form select {
    padding: 0.35rem 0.5rem;
    font: inherit;
    border: 1px solid var(--barva-okraj);
    border-radius: 4px;
    background: var(--barva-pozadi);
    color: var(--barva-text);
}

.uzel-departures {
    width: 100%;
    border-collapse: collapse;
}

.uzel-departures th,
.uzel-departures td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--barva-okraj);
    vertical-align: middle;
}

.uzel-departures thead th {
    border-bottom: 2px solid var(--barva-primar);
}

.uzel-time a {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.uzel-time a:hover span:first-child,
.uzel-time a:focus-visible span:first-child {
    text-decoration: underline;
}

.uzel-time span:first-child {
    font-weight: 700;
    font-size: 1.05rem;
}

.uzel-countdown {
    font-size: 0.8rem;
    color: var(--barva-text-tlumena);
}

.empty-note {
    padding: 0.8rem 1rem;
    background: var(--barva-pozadi-tlumena);
    border-radius: 6px;
    color: var(--barva-text-tlumena);
}

/* Souhrnná tabule uzlu: pravidelný + skutečný čas, poslední zastávka */
.uzel-time-scheduled.is-delayed {
    text-decoration: line-through;
    color: var(--barva-text-tlumena);
    font-weight: 400;
    font-size: 0.9rem;
}
.uzel-time-real {
    display: block;
    font-weight: 700;
    color: var(--barva-zpozdeni-vetsi);
    font-size: 1.05rem;
}
.uzel-last-stop {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Probíhající výluka */
.alert-ongoing-icon { color:#c62828; vertical-align:-0.15em; margin-right:0.3em; }
.alert-item--ongoing .alert-header { display:flex; align-items:center; }
.alert-item--ongoing { border-left:4px solid #c62828; padding-left:0.6rem; }

/* Dvojí čas (pravidelný + skutečný) – agregovane + uzel */
.dep-time-scheduled.is-delayed { text-decoration:line-through; color:var(--barva-text-tlumena); font-weight:400; font-size:0.9em; margin-right:0.3em; }
.dep-time-real { font-weight:700; color:#b5121b; }

/* Přepínač řazení agregovane */
.agg-sort-form { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin:0 0 1rem; padding:0.6rem 0.8rem; background:var(--barva-pozadi-tlumena); border-radius:6px; }
.agg-sort-form label { font-weight:600; }
.agg-sort-form select { padding:0.35rem 0.5rem; font:inherit; border:1px solid var(--barva-okraj); border-radius:4px; background:var(--barva-pozadi); color:var(--barva-text); }

/* Přepínač řazení uzel */
.uzel-control { display:inline-flex; align-items:center; gap:0.4rem; margin-right:1rem; }
.uzel-control select { padding:0.35rem 0.5rem; font:inherit; border:1px solid var(--barva-okraj); border-radius:4px; background:var(--barva-pozadi); color:var(--barva-text); }

/* Výluky — datum platnosti a podtitulek */
.alert-period {
    margin: 0.3em 0 0.4em;
    font-size: 0.9rem;
    color: var(--barva-text-tlumena);
}
.alert-subtitle {
    margin: 0.2em 0 0.3em;
    font-weight: 600;
}
.alert-lines-label {
    font-size: 0.85rem;
    color: var(--barva-text-tlumena);
    margin-right: 0.4em;
}

/* Výluka: nadpis s linkami inline */
.alert-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em; }
.alert-header-text { flex: 0 0 auto; }
.alert-header-lines { display: inline-flex; flex-wrap: wrap; gap: 0.25em; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════
 * TÉMA: DPMB / Drak – stránka vozidla-dpmb
 * Bílá + červená + jemná polygonální geometrie v pozadí headeru.
 * ══════════════════════════════════════════════════════════════════════════ */
body.tema-dpmb {
    --barva-header-bg:    #E30613;
    --barva-header-text:  #ffffff;
    --barva-akcent:       #E30613;
    --barva-primar:       #E30613;
    --barva-primar-tmava: #b80010;
    --barva-tab-active:   #ffffff;
    --focus-barva:        #E30613;
}

body.tema-dpmb .site-header {
    border-bottom: 4px solid rgba(0,0,0,0.2);
    /* Jemná polygonální textura v duchu "Draka DPMB" */
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.05) 25%, transparent 25%),
        linear-gradient(45deg,  rgba(255,255,255,0.05) 25%, transparent 25%);
    background-size: 40px 40px;
}

body.tema-dpmb .pseudotabs {
    background: #b80010;
    border-bottom-color: rgba(255,255,255,0.3);
}

body.tema-dpmb .pseudotab--active {
    color: #b80010;
}

/* ══════════════════════════════════════════════════════════════════════════
 * TÉMA: KRAJSKÁ VOZIDLA – stránka vozidla-kraj
 * Vlaky Moravia + regionální autobusy: tmavě šedá + modrá + oranžový akcent.
 * ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
 * TÉMA: KRAJSKÁ VOZIDLA – viz níže (přepsáno správnými barvami Moravia)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVITA – mobilní zařízení
 * ══════════════════════════════════════════════════════════════════════════ */

/* Větší tap targets na mobilech */
@media (max-width: 48rem) {
    .pseudotab {
        padding: 0.75rem 0.9rem;
        font-size: 0.9rem;
    }

    .site-header {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    /* Tabulky na mobilu scrollují horizontálně místo přetékání */
    .vehicles-table,
    .hours-table,
    .departures-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Větší font pro minuty odjezdů na malé obrazovce */
    .dep-time,
    .hour-dep-link {
        font-size: 1.05rem;
        padding: 0.2rem 0.1rem;
    }

    /* Karty místo řádků u tabulky vozidel */
    .vehicles-table thead {
        display: none;  /* skrýt hlavičku – popisky jsou v aria-label */
    }

    .vehicles-table tr {
        display: block;
        border: 1px solid var(--barva-okraj);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: var(--barva-pozadi);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .vehicles-table td {
        display: block;
        border: none;
        padding: 0.15rem 0;
        text-align: left;
    }

    /* Hodiny/minuty v zastavka – větší buňky pro dotek */
    .hour-dep-link {
        min-width: 2.8rem;
        min-height: 2.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Velmi malé telefony */
@media (max-width: 30rem) {
    .pseudotab {
        padding: 0.65rem 0.6rem;
        font-size: 0.82rem;
    }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * LOGO IDS JMK – SVG inline (používá se v layout.php)
 * ══════════════════════════════════════════════════════════════════════════ */
.site-logo-svg {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--barva-header-text);
}

.site-logo-svg svg {
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
}

.site-logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Hodinová tabulka – TD namísto TH pro hodinu */
.hour-cell {
    font-weight: 700;
    color: var(--barva-text-tlumena);
    font-size: 0.95rem;
    padding-right: 0.75rem;
    white-space: nowrap;
    vertical-align: top;
    padding-top: 0.4rem;
    width: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
 * TÉMA: DPMB / Drak – stránka vozidla-dpmb
 * ══════════════════════════════════════════════════════════════════════════ */
body.tema-dpmb {
    --barva-header-bg:    #E30613;
    --barva-akcent:       #E30613;
    --barva-primar:       #E30613;
    --barva-primar-tmava: #b80010;
    --focus-barva:        #E30613;
}
body.tema-dpmb .site-header {
    border-bottom-color: rgba(0,0,0,0.25);
    background-image: linear-gradient(135deg,rgba(255,255,255,0.05) 25%,transparent 25%),linear-gradient(225deg,rgba(255,255,255,0.05) 25%,transparent 25%),linear-gradient(315deg,rgba(255,255,255,0.05) 25%,transparent 25%),linear-gradient(45deg,rgba(255,255,255,0.05) 25%,transparent 25%);
    background-size: 40px 40px;
}
body.tema-dpmb .pseudotabs { background:#b80010; border-bottom-color:rgba(255,255,255,0.3); }
body.tema-dpmb .pseudotab--active { color:#b80010; }

/* ══════════════════════════════════════════════════════════════════════════
 * TÉMA: KRAJSKÁ VOZIDLA – stránka vozidla-kraj
 * Moravia: bílý podklad, jihomoravská červená, antracitová šedá.
 * ══════════════════════════════════════════════════════════════════════════ */
body.tema-kraj {
    --barva-header-bg:    #3a3a3a;      /* antracitová – střecha/technické části */
    --barva-akcent:       #E30613;      /* jihomoravská červená */
    --barva-primar:       #E30613;
    --barva-primar-tmava: #b80010;
    --focus-barva:        #E30613;
}
body.tema-kraj .site-header {
    border-bottom: 4px solid #E30613;
    /* Jemný svislý pruh v duchu červených linií na bocích vlaku */
    background-image: repeating-linear-gradient(
        90deg,
        rgba(227,6,19,0.15) 0px,
        rgba(227,6,19,0.15) 4px,
        transparent 4px,
        transparent 48px
    );
}
body.tema-kraj .pseudotabs { background:#2a2a2a; border-bottom-color:#E30613; }
body.tema-kraj .pseudotab--active { color:#2a2a2a; }

/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVITA – mobilní
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 48rem) {
    .site-header { padding:0.75rem 1rem; gap:0.5rem; }
    .pseudotab { padding:0.75rem 0.9rem; font-size:0.9rem; }
    .vehicles-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .vehicles-table thead { display:none; }
    .vehicles-table tr { display:block; border:1px solid var(--barva-okraj); border-radius:0.5rem; margin-bottom:0.75rem; padding:0.5rem 0.75rem; background:var(--barva-pozadi); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
    .vehicles-table td { display:block; border:none; padding:0.15rem 0; text-align:left; }
    .hour-dep-link { min-width:2.8rem; min-height:2.8rem; display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 30rem) {
    .pseudotab { padding:0.65rem 0.6rem; font-size:0.82rem; }
    h1 { font-size:1.35rem; }
}

/* Hodinová tabulka – TD (místo TH) pro hodinu */
.hour-cell {
    font-weight:700;
    color:var(--barva-text-tlumena);
    font-size:0.95rem;
    padding-right:0.75rem;
    white-space:nowrap;
    vertical-align:top;
    padding-top:0.4rem;
    width:2.5rem;
}

/* Logo kontejner */
.site-logo-svg { display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--barva-header-text); }
.site-logo-svg svg { width:2.8rem; height:2.8rem; flex-shrink:0; }

/* Přejezdové spoje – vizuálně tlumené, stále čitelné */
.vehicle-row--deadhead {
    opacity: 0.6;
    font-style: italic;
}
.vehicle-row--deadhead:hover {
    opacity: 0.85;
}
.deadhead-tag {
    font-size: 0.8em;
    color: var(--barva-text-tlumena);
    margin-left: 0.25em;
}

/* ── Vyhledávání spojení ─────────────────────────────────────────────────── */
.spojeni-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin: 1rem 0 2rem;
    padding: 1rem;
    background: var(--barva-pozadi-tlumena);
    border-radius: 0.5rem;
}
.spojeni-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 16rem; }
.spojeni-field label { font-weight: 600; font-size: 0.95rem; }
.spojeni-form button {
    padding: 0.6rem 1.5rem;
    background: var(--barva-primar);
    color: #fff;
    border: none;
    border-radius: 0.3rem;
    font-size: 1rem;
    cursor: pointer;
}
.spojeni-form button:hover { background: var(--barva-primar-tmava); }

.spojeni-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.spojeni-item {
    border: 1px solid var(--barva-okraj);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--barva-pozadi);
}
.spojeni-summary { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--barva-primar); }
.spojeni-legs { list-style: none; margin: 0; padding: 0; }
.spojeni-leg { padding: 0.25rem 0; }
.spojeni-leg a { text-decoration: none; color: var(--barva-text); display: block; padding: 0.3rem 0.5rem; border-radius: 0.3rem; }
.spojeni-leg a:hover { background: var(--barva-pozadi-tlumena); }
.spojeni-transfer { color: var(--barva-text-tlumena); font-size: 0.9rem; padding-left: 0.5rem; }
.spojeni-meta { color: var(--barva-text-tlumena); }

@media (max-width: 48rem) {
    .spojeni-field { min-width: 100%; }
    .spojeni-form button { width: 100%; }
}
.spojeni-loading { font-size: 1.1rem; color: var(--barva-primar); padding: 1rem; }