/* Základní styly pro celou stránku */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

/* HlaviÄŤka a patiÄŤka */
header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1200;
    background-color: #005A9C; color: #fff; padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex;
    justify-content: center; align-items: center; height: 36px;
}
header h1 { font-size: 1.2rem; margin: 0; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
footer { background-color: #005A9C; color: #fff; text-align: center; padding: 1rem 0; margin-top: auto; }

main { width: 90%; max-width: 1200px; margin: 2rem auto; flex: 1 0 auto; }
section { background: #fff; padding: 1.5rem; margin-bottom: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.live-widget-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    margin-bottom: 1.5rem;
}
.live-widget-container .live-card {
    margin-bottom: 0.8rem;
}
h2 { color: #003366; }

/* Tabulka */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }
thead th { background-color: #e9ecef; font-weight: bold; }
td a { color: #005A9C; text-decoration: none; }
td a:hover { text-decoration: underline; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background-color: #f5f5f5; }

/* Formuláře */
.formular, .formular-v2 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: bold; }
input, select, textarea { padding: 10px; border-radius: 5px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; }

/* --- Styly pro TlaÄŤĂ­tka --- */
.button, button {
    display: inline-block;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: auto;
}
.formular button {
    grid-column: 1 / -1;
    width: auto;
}
.button:hover, button:hover {
    transform: translateY(-2px);
    filter: brightness(110%);
}
.button-success { background-color: #28a745; }
.button-secondary { background-color: #6c757d; }
.button-delete { background-color: #dc3545; }
.button-edit { background-color: #007bff; }
.button-small { padding: 4px 8px; font-size: 0.8rem; }

/* Statistiky */
#statistiky-sekce { background-color: #e0eef9; border: 1px solid #b3d4f2; }
.statistiky-kontejner { display: flex; justify-content: space-around; text-align: center; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid #b3d4f2; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.stat-polozka { display: flex; flex-direction: column; }
.stat-hodnota { font-size: 2.5rem; font-weight: bold; color: #005A9C; }
.stat-popisek { font-size: 1rem; color: #555; }
.pokrocile-statistiky { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.stat-blok h3 { margin-top: 0; border-bottom: 2px solid #005A9C; padding-bottom: 0.5rem; color: #003366; }
.stat-blok ul { list-style: none; padding: 0; margin: 0; }
.stat-blok li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}
.stat-blok li:last-child {
    border-bottom: none;
}

/* Finální styl pro odkazy ve statistikách */
.pokrocile-statistiky a {
    text-decoration: none;
    color: inherit;
}
.pokrocile-statistiky a:hover {
    text-decoration: underline;
}
.stat-link-block {
    display: inline;
    padding: 0;
    background-color: transparent;
}
.stat-link-block:hover {
    background-color: transparent;
    transform: none;
    text-decoration: none;
}
.stat-link-block p {
    margin: 0;
    display: inline;
}


/* Přihlášený uživatel & Dropdown */
.user-info { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; align-items: center; }
.profilovka-header { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #fff; cursor: pointer; }
.profile-dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: 0; top: 45px; background-color: white; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 5px; overflow: hidden; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; background-color: white; margin-left: 0; border-radius: 0; }
.dropdown-content a:hover { background-color: #f1f1f1; text-decoration: none; }
.dropdown-header { padding: 12px 16px; background-color: #f1f1f1; color: #333; border-bottom: 1px solid #ddd; }

/* Lokomotivy */
.loko-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; color: white; margin: 2px; font-size: 0.85em; border: 1px solid rgba(0,0,0,0.2); }
.loko-tag.default-loko { background-color: #888; }
.loko-column { min-width: 180px; text-align: center; }

/* Formulář v2 */
.formular-v2 { display: flex; flex-direction: column; gap: 2rem; }
.formular-v2 fieldset { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; background-color: #f9f9f9; }
.formular-v2 legend { font-weight: bold; font-size: 1.2rem; color: #003366; padding: 0 10px; margin-left: 10px; }
.formular-v2 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

/* --- Stránka Detail Jízdy --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.header-actions {
    display: flex;
    gap: 0.5rem;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.detail-grid p {
    margin: 0;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.detail-grid a {
    text-decoration: none;
    color: #005A9C;
    font-weight: bold;
}
.detail-grid a:hover {
    text-decoration: underline;
}
.loko-list .loko-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}
.loko-list .loko-item:last-child {
    border-bottom: none;
}
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #005A9C;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.back-link:hover {
    color: #005A9C;
}

/* ========================================= */
/* RESPONZIVNĂŤ STYLY */
/* ========================================= */
@media (max-width: 1024px) {
    .formular, .formular-v2 .form-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
    main { width: 95%; margin: 1rem auto; }
    .formular, .formular-v2 .form-grid { grid-template-columns: 1fr; }
    header h1 { font-size: 1.1rem; }
    .user-info { right: 10px; }
    table { font-size: 0.9rem; }
}

/* === STYLY PRO TOOLTIP (DYNAMICKĂť) === */
.loko-tooltip {
    display: inline-block; /* Klíčová vlastnost */
    position: relative;
    vertical-align: middle; /* Zarovnání na střed řádku */
    margin: 2px; /* MalĂ˝ rozestup */
}

/* 1. Skryjeme původní CSS bublinu, protože by byla oříznutá posuvníkem */
.loko-tooltip .loko-tooltip-text {
    display: none !important;
}

/* 2. Styl pro nový dynamický tooltip, který se vkládá JavaScriptem přímo do <body> */
#dynamic-tooltip {
    position: fixed; /* Fixní pozice = plave nad vším, ignoruje posuvníky */
    z-index: 10000;  /* Nejvyšší vrstva */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease;
    
    /* Vzhled bubliny (stejný jako dříve) */
    background-color: rgba(33, 37, 41, 0.98);
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 0;
    width: max-content;
    min-width: 180px;
    max-width: 250px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    line-height: 1.4;
    
    /* Výchozí posun pro animaci */
    transform: translateY(10px);
}

/* Třída, která tooltip zobrazí */
#dynamic-tooltip.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* --- Styly vnitřku tooltipu (přenesené z functions.php) --- */
#dynamic-tooltip .tooltip-header {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #fff;
}

#dynamic-tooltip .tooltip-body {
    padding: 8px 12px;
    color: #ddd;
    font-size: 0.9em;
}

#dynamic-tooltip .tooltip-stats {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85em;
}

#dynamic-tooltip .tooltip-stats div {
    display: flex;
    flex-direction: column;
}

#dynamic-tooltip .tooltip-footer {
    padding: 6px 12px;
    font-size: 0.75em;
    color: #87cefa;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-style: italic;
}

/* === STYLY PRO MAPU === */
.mapa-kontejner {
    width: 100%;
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden; 
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.mapa-kontejner iframe {
    width: 100%;
    height: 600px; 
    border: none;
    display: block; 
}

/* --- Styly pro Live Search --- */
.search-box-container {
    position: relative; /* Nutné pro správné pozicování výsledků */
    width: 250px; /* Nebo jakákoliv šířka, která ti vyhovuje */
}

.search-results {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute;
    top: 100%; /* Zobrazí se přesně pod vyhledávacím polem */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100; /* ZajistĂ­, Ĺľe bude nad ostatnĂ­m obsahem */
    max-height: 300px; /* Omezí výšku, pokud je výsledků mnoho */
    overflow-y: auto; /* Přidá posuvník, pokud je potřeba */
}

.search-results a {
    display: block;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
}

.search-results a:hover {
    background-color: #f5f5f5; /* Zvýraznění při najetí myší */
}

/* --- Styly pro řazení tabulek (AJAX) - Upraveno --- */
th.sortable {
    cursor: pointer;
    user-select: none; /* Aby se neoznačoval text při klikání */
    /* Odstranili jsme padding-right a position: relative */
}

th.sortable .sort-arrow {
    /* * PryÄŤ je position: absolute. 
     * Šipka je teď normálně v toku textu hned za ním.
     */
    font-size: 0.8em;
    color: #888;
    margin-left: 5px; /* Dáme jí malý odstup od textu */
    
    /* * PouĹľijeme 'visibility' mĂ­sto 'display', aby text 
     * neposkakoval, když se šipka objeví/skryje.
     */
    visibility: hidden; 
}

th.sortable.active {
    color: #007bff; /* Zvýraznění aktivního sloupce */
}

th.sortable.active .sort-arrow {
    visibility: visible; /* Zobrazit šipku u aktivního */
    color: #007bff;
}
/* --- Konec stylů pro řazení --- */

/* --- Styly pro SVG lokomotivy (Finální oprava specificity) --- */

/* 1. ObalovaÄŤ */
.loko-tag.loko-svg-wrapper {
    position: relative !important; 
    display: inline-block;
    height: 2.5em; 
    vertical-align: middle;
    line-height: 2.5em; 
    background: none !important;
    border: none;
    padding: 0;
    margin: 0 1px;
}

/* 2. Samotný SVG obrázek (<img>) - PŘIDÁN RESET CLIP-PATH */
.loko-tag.loko-svg-wrapper .loko-svg-img {
    display: block;
    height: 100%; 
    width: auto !important; 
    min-width: 0 !important; 
    
    /* TOTO JE NOVÁ, KLÍČOVÁ OPRAVA: */
    clip-path: none !important; /* Zruší jakékoliv ořezávání z laky.css */
    
    border: none;
    background: none !important; 
    padding: 0;
    margin: 0;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* 3. TextovĂ˝ overlay (<span>) */
.loko-tag.loko-svg-wrapper .loko-svg-text {
    position: absolute !important; 
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.6em; 
    font-weight: bold;
    color: black;
    
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    
    pointer-events: none; 
}

/* 4. Pravidlo pro otáčení */
.loko-tag.loko-svg-wrapper .loko-svg-img.loko-reverse {
    transform: scaleX(-1);
}

/* --- Přidat na konec souboru style.css --- */

.search-results a.selected {
    background-color: #f0f0f0; /* Světle šedé pozadí */
    color: #005A9C;           /* Barva textu, kterou už používáš */
    font-weight: bold;
}

/* * Oprava pro odstranění modrého okraje (outline) 
 * u odkazĹŻ na lokomotivy s tooltipem.
 */
.loko-tooltip a,
.loko-tooltip a:focus,
.loko-tooltip a:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important; 
}

/* ========================================= */
/* STYLY PRO KARTY JÍZD (NÁHRADA TABULKY) */
/* ========================================= */

.karty-kontejner {
    display: grid;
    /* * Karty budou v responzivnĂ­m gridu. 
     * Automaticky se přizpůsobí šířce obrazovky.
     * minmax(320px, 1fr) znamená, že karta má minimálně 320px 
     * a maximálně 1fr (zabere volné místo).
     */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.jizda-karta {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column; 
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.jizda-karta:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 1. HlaviÄŤka karty (Datum a vlak) */
.karta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #e9ecef; 
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    
    /* PŘIDEJ TYTO DVA ŘÁDKY: */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.karta-datum {
    font-weight: bold;
    color: #333;
}

.karta-vlak {
    font-weight: bold;
    color: #003366; /* Tmavě modrá pro zvýraznění */
}

/* 2. Tělo karty (Trasa a detaily) */
.karta-body {
    padding: 1rem;
    flex-grow: 1; /* Tělo se natáhne, aby vyplnilo místo */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.karta-trasa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
}

.karta-trasa .stanice-vychozi,
.karta-trasa .stanice-koncova {
    flex: 1; /* ObÄ› stanice zaberou stejnÄ› mĂ­sta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Zabrání přetečení u dlouhých názvů */
}
.karta-trasa .stanice-vychozi { text-align: left; }
.karta-trasa .stanice-koncova { text-align: right; }

.karta-trasa .sipka {
    flex: 0 0 auto; /* Šipka zabere jen své místo */
    padding: 0 0.5rem;
    color: #555;
    font-weight: normal;
}

.karta-trasa a {
    color: #333;
    text-decoration: none;
}
.karta-trasa a:hover {
    color: #005A9C;
    text-decoration: underline;
}

.karta-detaily {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #444;
}

/* 3. PatiÄŤka karty (Lokomotivy) */
.karta-loko {
    padding: 0.75rem 1rem;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* Zajistíme, že patička nepřeteče */
    overflow: hidden; 
}

/* UpravĂ­me wrapper lokomotiv - TOTO JE TA HLAVNĂŤ OPRAVA */
.karta-loko .loko-wrapper {
    display: flex;           /* Zásadní: Flexbox řadí prvky vedle sebe */
    flex-direction: row;     /* Směr řádku (zleva doprava) */
    align-items: center;     /* Zarovnání na střed výšky */
    justify-content: flex-start; 
    gap: 4px;                /* Mezera mezi mašinkami */
    
    /* Nastavení pro scrollování do boku (pokud je jich hodně) */
    flex-wrap: nowrap;       /* Zakážeme zalamování na další řádek */
    overflow-x: auto;        /* Povolíme posouvání do boku */
    padding-bottom: 5px;     /* MĂ­sto pro scrollbar (kterĂ˝ pak skryjeme) */
    
    /* Skrytí scrollbaru (vizuální úprava) */
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Pro jistotu skryjeme scrollbar i v Chrome/Safari */
.karta-loko .loko-wrapper::-webkit-scrollbar {
    display: none;
}

/* Oprava pro samotné položky uvnitř karty */
.karta-loko .loko-tooltip {
    flex-shrink: 0;          /* Zakážeme smrskávání mašinek */
    width: auto !important;  /* Zrušíme 100% šířku, kterou má div defaultně */
}

/* ========================================= */
/* STYLY PRO INFINITE SCROLL SPINNER */
/* ========================================= */

#loading-spinner {
    padding: 2rem;
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    font-weight: bold;
}

/* ================================================== */
/* ÚPRAVA KARET: HORIZONTÁLNÍ SCROLL LOKOMOTIV */
/* ================================================== */

.karta-loko .loko-wrapper {
    /* 1. Vynutíme, aby lokomotivy byly jen na jednom řádku 
       (přepíše původní 'flex-wrap: wrap') */
    flex-wrap: nowrap;
    
    /* 2. Povolíme horizontální posouvání, pokud se nevejdou */
    overflow-x: auto;
    
    /* 3. Malý trik pro vizuální skrytí scrollbaru: 
       Přidáme vnitřní odsazení (padding) dole, aby tagy "vystrčily"
       scrollbar níž, a pak vnějším záporným okrajem (margin) 
       ten scrollbar "schováme" pod okraj karty.
       Scrollbar bude neviditelný, ale funkční (půjde posouvat myší/prstem).
    */
    padding-bottom: 10px;
    margin-bottom: -10px;

    /* 4. Pojistka pro skrytí scrollbaru v různých prohlížečích */
    scrollbar-width: none; /* Pro Firefox */
    -ms-overflow-style: none; /* Pro IE/Edge */
}

/* 5. SkrytĂ­ scrollbaru pro Chrome, Safari, atd. */
.karta-loko .loko-wrapper::-webkit-scrollbar {
    display: none; 
}

/* --- MobilnĂ­ optimalizace pro Detail jĂ­zdy --- */

/* Obal pro tabulky (jízdní řád) */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto; /* Umožní horizontální posun */
    -webkit-overflow-scrolling: touch; /* Plynulé scrollování na iPhonech */
    margin-bottom: 15px;
    border: 1px solid #ddd; /* Volitelné: orámování pro lepší vzhled */
}

/* Obal pro řazení vlaku (lokomotivy a vagony) */
.razeni-scroll {
    display: flex;
    flex-wrap: nowrap; /* Zajistí, že vagony zůstanou v jedné řadě a neskočí pod sebe */
    overflow-x: auto;
    gap: 4px; /* Mezera mezi vagony */
    padding-bottom: 10px; /* MĂ­sto pro scrollbar */
    align-items: center; /* Zarovnání na střed výšky */
}

/* Ujistíme se, že SVG uvnitř se nezmenšují příliš */
.razeni-scroll img, 
.razeni-scroll svg {
    flex-shrink: 0; /* Zabrání deformaci vagonů */
    max-width: none; /* Umožní vagonům mít svou plnou šířku */
}

/* === ĂšPRAVA ODKAZU DOPRAVCE V KARTÄš === */
.karta-detaily a {
    color: inherit;        /* Převezme barvu textu od rodiče (šedá #444), takže nebude modrý/fialový */
    text-decoration: none; /* OdstranĂ­ podtrĹľenĂ­ */
    transition: color 0.2s;
}

.karta-detaily a:hover {
    color: #005A9C;        /* Při najetí myší zmodrá (stejně jako ostatní odkazy) */
    text-decoration: underline;
}

/* Pojistka proti fialové barvě navštíveného odkazu */
.karta-detaily a:visited {
    color: inherit;
}

/* --- Univerzální třída pro horizontální posuv bez scrollbaru --- */
/* Použito např. v detail_rady.php pro nejčastějšího zástupce */
.no-scrollbar-container {
    width: 100%;
    overflow-x: auto;
    text-align: left;
    
    /* Trik pro skrytĂ­ scrollbaru */
    padding-bottom: 10px;
    margin-bottom: -10px;
    
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.no-scrollbar-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ========================================= */
/* NOVĂť DASHBOARD LAYOUT (index.php)         */
/* ========================================= */

.dashboard-main {
    width: 95%;
    max-width: 1300px; /* Trochu širší, aby měly karty a boční panel místo */
    margin: 2rem auto;
}

#dashboard-header {
    background-color: #e0eef9;
    border: 1px solid #b3d4f2;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #b3d4f2;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-grid {
    display: grid;
    /* Rozdělí obrazovku: levá část pro filtry a jízdy zabere víc místa (např. 2.5 dílů), pravý sidebar (1 díl) */
    grid-template-columns: 2.5fr 1fr; 
    gap: 2rem;
    align-items: start; /* Velmi důležité! Zabrání roztahování pravého sloupce dolů s přibývajícími kartami jízd */
}

/* Úprava karet v novém menším sloupci */
.dashboard-left .karty-kontejner {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dashboard-right section {
    margin-bottom: 2rem;
}

/* Zmenšení mapy pro boční panel */
.sidebar-mapa iframe {
    height: 350px !important;
}

/* V bočním panelu chceme statistiky přehledně pod sebou */
.sidebar-statistiky {
    display: flex;
    flex-direction: column;
}

/* Responzivita - Na tabletech a mobilech zrušíme sloupce a dáme vše pod sebe */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Změníme vizuální pořadí: Jízdy první, Mapa a detailní statisky dole */
    .dashboard-left {
        order: 2;
    }
    .dashboard-right {
        order: 1;
    }
    
    /* Na mobilu může být mapa zase trochu vyšší */
    .sidebar-mapa iframe {
        height: 400px !important;
    }
}

/* ========================================= */
/* STYLY PRO ODKAZY V POSTRANNĂŤM PANELU      */
/* ========================================= */

/* Odstranění výchozí modré barvy a podtržení pro všechny odkazy v sidebaru */
.sidebar-statistiky a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Zvýraznění odkazů v seznamech (např. TOP dopravci) při najetí myší */
.sidebar-statistiky .stat-blok li a:hover {
    color: #005A9C; /* Zmodrá, ale bez podtržení */
}

/* Vylepšený blok pro "Nejdelší jízdu" - Vzhled klikací minikarty */
.sidebar-statistiky .stat-link-block {
    display: block;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
    background-color: #f8f9fa; /* Velmi světle šedé pozadí */
    border: 1px solid #e9ecef; /* Jemný rámeček */
    border-radius: 8px;        /* Zakulacené rohy jako u velkých karet */
    color: #333;
    transition: all 0.2s ease-in-out;
}

/* Interakce při najetí myší na minikartu (hover) */
.sidebar-statistiky .stat-link-block:hover {
    background-color: #ffffff; 
    transform: translateY(-3px); /* Karta lehce povyskoÄŤĂ­ nahoru */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Přidá se stín */
    color: #005A9C; /* Text se obarvĂ­ firemnĂ­ modrou */
}

/* Zajištění správného řádkování uvnitř minikarty */
.sidebar-statistiky .stat-link-block p {
    margin: 0;
    line-height: 1.6;
    display: block;
}

/* ========================================= */
/* STYLY PRO STRÁNKU STATISTIKY.PHP          */
/* ========================================= */

/* Grid pro horní číselné metriky (KPI) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Karta jednotlivé metriky */
.kpi-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 4px solid #005A9C; /* FiremnĂ­ modrĂ˝ prouĹľek na boku */
    transition: transform 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
}

.kpi-title {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #003366;
    line-height: 1;
}

/* DvousloupcovĂ˝ grid pro tabulky vedle sebe */
.dashboard-grid-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: start;
}

/* Kontejner (karta) pro tabulku/statistiku */
.dashboard-widget {
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Aby hlaviÄŤka widgetu zakulatila rohy */
    display: flex;
    flex-direction: column;
}

.widget-header {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.widget-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #003366;
}

.widget-body {
    padding: 0; /* Tabulka by měla sahat až do krajů widgetu */
}

/* ModernĂ­ vzhled tabulek uvnitĹ™ widgetĹŻ */
table.modern-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

table.modern-table thead th {
    background-color: #ffffff;
    border-bottom: 2px solid #e9ecef;
    color: #495057;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
}

table.modern-table tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
    color: #333;
}

table.modern-table tbody tr:last-child td {
    border-bottom: none; /* Poslední řádek nemá čáru dole */
}

table.modern-table tbody tr:hover {
    background-color: #f8f9fa; /* Jemné zvýraznění řádku */
}

/* Odkazy uvnitĹ™ modernĂ­ch tabulek */
table.modern-table a {
    color: #005A9C;
    text-decoration: none;
    transition: color 0.2s;
}

table.modern-table a:hover {
    text-decoration: underline;
}

/* Responzivita pro statistiky */
@media (max-width: 1024px) {
    .dashboard-grid-half {
        grid-template-columns: 1fr; /* Na menších displejích pod sebe */
        gap: 1.5rem;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr); /* Na tabletu 2 vedle sebe */
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr; /* Na mobilu ĂşplnÄ› pod sebou */
    }
    
    table.modern-table thead th,
    table.modern-table tbody td {
        padding: 0.75rem 1rem; /* Na mobilu menší okraje v tabulce */
    }
}

/* Odkazy v KPI kartách (např. hlavní dopravce) */
.kpi-value a,
.kpi-value a:visited {
    color: #005A9C; /* Vynutíme naši firemní modrou i po kliknutí */
    text-decoration: none;
    transition: color 0.2s;
}

.kpi-value a:hover {
    color: #003366; /* Při najetí myší lehce ztmavne */
    text-decoration: underline;
}
/* ========================================= */
/* SPECIÁLNÍ KARTA PRO CESTY (Summary)      */
/* ========================================= */

.jizda-karta.cesta-karta {
    border-left: 5px solid #17a2b8 !important;
    background: linear-gradient(to right, #f0f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.jizda-karta.cesta-karta::after {
    content: "??";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 3rem;
    opacity: 0.1;
    transform: rotate(15deg);
    pointer-events: none;
}

.jizda-karta.cesta-karta .karta-header {
    background-color: #d1ecf1;
    border-bottom: 1px solid #bee5eb;
    color: #0c5460;
}

.jizda-karta.cesta-karta .karta-vlak {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.jizda-karta.cesta-karta .karta-body {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.jizda-karta.cesta-karta .karta-trasa .sipka {
    color: #17a2b8;
}

.jizda-karta.cesta-karta .karta-detaily span strong {
    color: #17a2b8;
    font-size: 1.1rem;
}

.jizda-karta.cesta-karta:hover {
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.2);
}


/* Vyhledvn dopravce v hlev obsahu */
.header-search-container {
    position: relative;
    width: 250px;
    margin-left: auto;
}
.header-search-input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border: 1px solid #e0e6ed;
    border-radius: 20px;
    font-size: 0.9rem;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.header-search-input:focus {
    outline: none;
    border-color: #005a9c;
    box-shadow: 0 4px 10px rgba(0,90,156,0.1);
    
}
.header-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    z-index: 2000;
    display: none;
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 8px 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

/* HlaviÄŤka a patiÄŤka */
header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1200;
    background-color: #005A9C; color: #fff; padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex;
    justify-content: center; align-items: center; height: 36px;
}
header h1 { font-size: 1.2rem; margin: 0; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
footer { background-color: #005A9C; color: #fff; text-align: center; padding: 1rem 0; margin-top: auto; }

main { width: 90%; max-width: 1200px; margin: 2rem auto; flex: 1 0 auto; }
section { background: #fff; padding: 1.5rem; margin-bottom: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.live-widget-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    margin-bottom: 1.5rem;
}
.live-widget-container .live-card {
    margin-bottom: 0.8rem;
}
h2 { color: #003366; }

/* Tabulka */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }
thead th { background-color: #e9ecef; font-weight: bold; }
td a { color: #005A9C; text-decoration: none; }
td a:hover { text-decoration: underline; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background-color: #f5f5f5; }

/* Formuláře */
.formular, .formular-v2 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: bold; }
input, select, textarea { padding: 10px; border-radius: 5px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; }

/* --- Styly pro TlaÄŤĂ­tka --- */
.button, button {
    display: inline-block;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: auto;
}
.formular button {
    grid-column: 1 / -1;
    width: auto;
}
.button:hover, button:hover {
    transform: translateY(-2px);
    filter: brightness(110%);
}
.button-success { background-color: #28a745; }
.button-secondary { background-color: #6c757d; }
.button-delete { background-color: #dc3545; }
.button-edit { background-color: #007bff; }
.button-small { padding: 4px 8px; font-size: 0.8rem; }

/* Statistiky */
#statistiky-sekce { background-color: #e0eef9; border: 1px solid #b3d4f2; }
.statistiky-kontejner { display: flex; justify-content: space-around; text-align: center; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid #b3d4f2; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.stat-polozka { display: flex; flex-direction: column; }
.stat-hodnota { font-size: 2.5rem; font-weight: bold; color: #005A9C; }
.stat-popisek { font-size: 1rem; color: #555; }
.pokrocile-statistiky { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.stat-blok h3 { margin-top: 0; border-bottom: 2px solid #005A9C; padding-bottom: 0.5rem; color: #003366; }
.stat-blok ul { list-style: none; padding: 0; margin: 0; }
.stat-blok li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}
.stat-blok li:last-child {
    border-bottom: none;
}

/* Finální styl pro odkazy ve statistikách */
.pokrocile-statistiky a {
    text-decoration: none;
    color: inherit;
}
.pokrocile-statistiky a:hover {
    text-decoration: underline;
}
.stat-link-block {
    display: inline;
    padding: 0;
    background-color: transparent;
}
.stat-link-block:hover {
    background-color: transparent;
    transform: none;
    text-decoration: none;
}
.stat-link-block p {
    margin: 0;
    display: inline;
}


/* Přihlášený uživatel & Dropdown */
.user-info { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; align-items: center; }
.profilovka-header { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #fff; cursor: pointer; }
.profile-dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: 0; top: 45px; background-color: white; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 5px; overflow: hidden; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; background-color: white; margin-left: 0; border-radius: 0; }
.dropdown-content a:hover { background-color: #f1f1f1; text-decoration: none; }
.dropdown-header { padding: 12px 16px; background-color: #f1f1f1; color: #333; border-bottom: 1px solid #ddd; }

/* Lokomotivy */
.loko-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; color: white; margin: 2px; font-size: 0.85em; border: 1px solid rgba(0,0,0,0.2); }
.loko-tag.default-loko { background-color: #888; }
.loko-column { min-width: 180px; text-align: center; }

/* Formulář v2 */
.formular-v2 { display: flex; flex-direction: column; gap: 2rem; }
.formular-v2 fieldset { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; background-color: #f9f9f9; }
.formular-v2 legend { font-weight: bold; font-size: 1.2rem; color: #003366; padding: 0 10px; margin-left: 10px; }
.formular-v2 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

/* --- Stránka Detail Jízdy --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.header-actions {
    display: flex;
    gap: 0.5rem;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.detail-grid p {
    margin: 0;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.detail-grid a {
    text-decoration: none;
    color: #005A9C;
    font-weight: bold;
}
.detail-grid a:hover {
    text-decoration: underline;
}
.loko-list .loko-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}
.loko-list .loko-item:last-child {
    border-bottom: none;
}
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #005A9C;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.back-link:hover {
    color: #005A9C;
}

/* ========================================= */
/* RESPONZIVNĂŤ STYLY */
/* ========================================= */
@media (max-width: 1024px) {
    .formular, .formular-v2 .form-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
    main { width: 95%; margin: 1rem auto; }
    .formular, .formular-v2 .form-grid { grid-template-columns: 1fr; }
    header h1 { font-size: 1.1rem; }
    .user-info { right: 10px; }
    table { font-size: 0.9rem; }
}

/* === STYLY PRO TOOLTIP (DYNAMICKĂť) === */
.loko-tooltip {
    display: inline-block; /* Klíčová vlastnost */
    position: relative;
    vertical-align: middle; /* Zarovnání na střed řádku */
    margin: 2px; /* MalĂ˝ rozestup */
}

/* 1. Skryjeme původní CSS bublinu, protože by byla oříznutá posuvníkem */
.loko-tooltip .loko-tooltip-text {
    display: none !important;
}

/* 2. Styl pro nový dynamický tooltip, který se vkládá JavaScriptem přímo do <body> */
#dynamic-tooltip {
    position: fixed; /* Fixní pozice = plave nad vším, ignoruje posuvníky */
    z-index: 10000;  /* Nejvyšší vrstva */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease;
    
    /* Vzhled bubliny (stejný jako dříve) */
    background-color: rgba(33, 37, 41, 0.98);
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 0;
    width: max-content;
    min-width: 180px;
    max-width: 250px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    line-height: 1.4;
    
    /* Výchozí posun pro animaci */
    transform: translateY(10px);
}

/* Třída, která tooltip zobrazí */
#dynamic-tooltip.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* --- Styly vnitřku tooltipu (přenesené z functions.php) --- */
#dynamic-tooltip .tooltip-header {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #fff;
}

#dynamic-tooltip .tooltip-body {
    padding: 8px 12px;
    color: #ddd;
    font-size: 0.9em;
}

#dynamic-tooltip .tooltip-stats {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85em;
}

#dynamic-tooltip .tooltip-stats div {
    display: flex;
    flex-direction: column;
}

#dynamic-tooltip .tooltip-footer {
    padding: 6px 12px;
    font-size: 0.75em;
    color: #87cefa;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-style: italic;
}

/* === STYLY PRO MAPU === */
.mapa-kontejner {
    width: 100%;
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden; 
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.mapa-kontejner iframe {
    width: 100%;
    height: 600px; 
    border: none;
    display: block; 
}

/* --- Styly pro Live Search --- */
.search-box-container {
    position: relative; /* Nutné pro správné pozicování výsledků */
    width: 250px; /* Nebo jakákoliv šířka, která ti vyhovuje */
}

.search-results {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute;
    top: 100%; /* Zobrazí se přesně pod vyhledávacím polem */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100; /* ZajistĂ­, Ĺľe bude nad ostatnĂ­m obsahem */
    max-height: 300px; /* Omezí výšku, pokud je výsledků mnoho */
    overflow-y: auto; /* Přidá posuvník, pokud je potřeba */
}

.search-results a {
    display: block;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
}

.search-results a:hover {
    background-color: #f5f5f5; /* Zvýraznění při najetí myší */
}

/* --- Styly pro řazení tabulek (AJAX) - Upraveno --- */
th.sortable {
    cursor: pointer;
    user-select: none; /* Aby se neoznačoval text při klikání */
    /* Odstranili jsme padding-right a position: relative */
}

th.sortable .sort-arrow {
    /* * PryÄŤ je position: absolute. 
     * Šipka je teď normálně v toku textu hned za ním.
     */
    font-size: 0.8em;
    color: #888;
    margin-left: 5px; /* Dáme jí malý odstup od textu */
    
    /* * PouĹľijeme 'visibility' mĂ­sto 'display', aby text 
     * neposkakoval, když se šipka objeví/skryje.
     */
    visibility: hidden; 
}

th.sortable.active {
    color: #007bff; /* Zvýraznění aktivního sloupce */
}

th.sortable.active .sort-arrow {
    visibility: visible; /* Zobrazit šipku u aktivního */
    color: #007bff;
}
/* --- Konec stylů pro řazení --- */

/* --- Styly pro SVG lokomotivy (Finální oprava specificity) --- */

/* 1. ObalovaÄŤ */
.loko-tag.loko-svg-wrapper {
    position: relative !important; 
    display: inline-block;
    height: 2.5em; 
    vertical-align: middle;
    line-height: 2.5em; 
    background: none !important;
    border: none;
    padding: 0;
    margin: 0 1px;
}

/* 2. Samotný SVG obrázek (<img>) - PŘIDÁN RESET CLIP-PATH */
.loko-tag.loko-svg-wrapper .loko-svg-img {
    display: block;
    height: 100%; 
    width: auto !important; 
    min-width: 0 !important; 
    
    /* TOTO JE NOVÁ, KLÍČOVÁ OPRAVA: */
    clip-path: none !important; /* Zruší jakékoliv ořezávání z laky.css */
    
    border: none;
    background: none !important; 
    padding: 0;
    margin: 0;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* 3. TextovĂ˝ overlay (<span>) */
.loko-tag.loko-svg-wrapper .loko-svg-text {
    position: absolute !important; 
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.6em; 
    font-weight: bold;
    color: black;
    
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    
    pointer-events: none; 
}

/* 4. Pravidlo pro otáčení */
.loko-tag.loko-svg-wrapper .loko-svg-img.loko-reverse {
    transform: scaleX(-1);
}

/* --- Přidat na konec souboru style.css --- */

.search-results a.selected {
    background-color: #f0f0f0; /* Světle šedé pozadí */
    color: #005A9C;           /* Barva textu, kterou už používáš */
    font-weight: bold;
}

/* * Oprava pro odstranění modrého okraje (outline) 
 * u odkazĹŻ na lokomotivy s tooltipem.
 */
.loko-tooltip a,
.loko-tooltip a:focus,
.loko-tooltip a:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important; 
}

/* ========================================= */
/* STYLY PRO KARTY JÍZD (NÁHRADA TABULKY) */
/* ========================================= */

.karty-kontejner {
    display: grid;
    /* * Karty budou v responzivnĂ­m gridu. 
     * Automaticky se přizpůsobí šířce obrazovky.
     * minmax(320px, 1fr) znamená, že karta má minimálně 320px 
     * a maximálně 1fr (zabere volné místo).
     */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.jizda-karta {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column; 
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.jizda-karta:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 1. HlaviÄŤka karty (Datum a vlak) */
.karta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #e9ecef; 
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    
    /* PŘIDEJ TYTO DVA ŘÁDKY: */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.karta-datum {
    font-weight: bold;
    color: #333;
}

.karta-vlak {
    font-weight: bold;
    color: #003366; /* Tmavě modrá pro zvýraznění */
}

/* 2. Tělo karty (Trasa a detaily) */
.karta-body {
    padding: 1rem;
    flex-grow: 1; /* Tělo se natáhne, aby vyplnilo místo */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.karta-trasa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
}

.karta-trasa .stanice-vychozi,
.karta-trasa .stanice-koncova {
    flex: 1; /* ObÄ› stanice zaberou stejnÄ› mĂ­sta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Zabrání přetečení u dlouhých názvů */
}
.karta-trasa .stanice-vychozi { text-align: left; }
.karta-trasa .stanice-koncova { text-align: right; }

.karta-trasa .sipka {
    flex: 0 0 auto; /* Šipka zabere jen své místo */
    padding: 0 0.5rem;
    color: #555;
    font-weight: normal;
}

.karta-trasa a {
    color: #333;
    text-decoration: none;
}
.karta-trasa a:hover {
    color: #005A9C;
    text-decoration: underline;
}

.karta-detaily {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #444;
}

/* 3. PatiÄŤka karty (Lokomotivy) */
.karta-loko {
    padding: 0.75rem 1rem;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* Zajistíme, že patička nepřeteče */
    overflow: hidden; 
}

/* UpravĂ­me wrapper lokomotiv - TOTO JE TA HLAVNĂŤ OPRAVA */
.karta-loko .loko-wrapper {
    display: flex;           /* Zásadní: Flexbox řadí prvky vedle sebe */
    flex-direction: row;     /* Směr řádku (zleva doprava) */
    align-items: center;     /* Zarovnání na střed výšky */
    justify-content: flex-start; 
    gap: 4px;                /* Mezera mezi mašinkami */
    
    /* Nastavení pro scrollování do boku (pokud je jich hodně) */
    flex-wrap: nowrap;       /* Zakážeme zalamování na další řádek */
    overflow-x: auto;        /* Povolíme posouvání do boku */
    padding-bottom: 5px;     /* MĂ­sto pro scrollbar (kterĂ˝ pak skryjeme) */
    
    /* Skrytí scrollbaru (vizuální úprava) */
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Pro jistotu skryjeme scrollbar i v Chrome/Safari */
.karta-loko .loko-wrapper::-webkit-scrollbar {
    display: none;
}

/* Oprava pro samotné položky uvnitř karty */
.karta-loko .loko-tooltip {
    flex-shrink: 0;          /* Zakážeme smrskávání mašinek */
    width: auto !important;  /* Zrušíme 100% šířku, kterou má div defaultně */
}

/* ========================================= */
/* STYLY PRO INFINITE SCROLL SPINNER */
/* ========================================= */

#loading-spinner {
    padding: 2rem;
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    font-weight: bold;
}

/* ================================================== */
/* ÚPRAVA KARET: HORIZONTÁLNÍ SCROLL LOKOMOTIV */
/* ================================================== */

.karta-loko .loko-wrapper {
    /* 1. Vynutíme, aby lokomotivy byly jen na jednom řádku 
       (přepíše původní 'flex-wrap: wrap') */
    flex-wrap: nowrap;
    
    /* 2. Povolíme horizontální posouvání, pokud se nevejdou */
    overflow-x: auto;
    
    /* 3. Malý trik pro vizuální skrytí scrollbaru: 
       Přidáme vnitřní odsazení (padding) dole, aby tagy "vystrčily"
       scrollbar níž, a pak vnějším záporným okrajem (margin) 
       ten scrollbar "schováme" pod okraj karty.
       Scrollbar bude neviditelný, ale funkční (půjde posouvat myší/prstem).
    */
    padding-bottom: 10px;
    margin-bottom: -10px;

    /* 4. Pojistka pro skrytí scrollbaru v různých prohlížečích */
    scrollbar-width: none; /* Pro Firefox */
    -ms-overflow-style: none; /* Pro IE/Edge */
}

/* 5. SkrytĂ­ scrollbaru pro Chrome, Safari, atd. */
.karta-loko .loko-wrapper::-webkit-scrollbar {
    display: none; 
}

/* --- MobilnĂ­ optimalizace pro Detail jĂ­zdy --- */

/* Obal pro tabulky (jízdní řád) */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto; /* Umožní horizontální posun */
    -webkit-overflow-scrolling: touch; /* Plynulé scrollování na iPhonech */
    margin-bottom: 15px;
    border: 1px solid #ddd; /* Volitelné: orámování pro lepší vzhled */
}

/* Obal pro řazení vlaku (lokomotivy a vagony) */
.razeni-scroll {
    display: flex;
    flex-wrap: nowrap; /* Zajistí, že vagony zůstanou v jedné řadě a neskočí pod sebe */
    overflow-x: auto;
    gap: 4px; /* Mezera mezi vagony */
    padding-bottom: 10px; /* MĂ­sto pro scrollbar */
    align-items: center; /* Zarovnání na střed výšky */
}

/* Ujistíme se, že SVG uvnitř se nezmenšují příliš */
.razeni-scroll img, 
.razeni-scroll svg {
    flex-shrink: 0; /* Zabrání deformaci vagonů */
    max-width: none; /* Umožní vagonům mít svou plnou šířku */
}

/* === ĂšPRAVA ODKAZU DOPRAVCE V KARTÄš === */
.karta-detaily a {
    color: inherit;        /* Převezme barvu textu od rodiče (šedá #444), takže nebude modrý/fialový */
    text-decoration: none; /* OdstranĂ­ podtrĹľenĂ­ */
    transition: color 0.2s;
}

.karta-detaily a:hover {
    color: #005A9C;        /* Při najetí myší zmodrá (stejně jako ostatní odkazy) */
    text-decoration: underline;
}

/* Pojistka proti fialové barvě navštíveného odkazu */
.karta-detaily a:visited {
    color: inherit;
}

/* --- Univerzální třída pro horizontální posuv bez scrollbaru --- */
/* Použito např. v detail_rady.php pro nejčastějšího zástupce */
.no-scrollbar-container {
    width: 100%;
    overflow-x: auto;
    text-align: left;
    
    /* Trik pro skrytĂ­ scrollbaru */
    padding-bottom: 10px;
    margin-bottom: -10px;
    
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.no-scrollbar-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ========================================= */
/* NOVĂť DASHBOARD LAYOUT (index.php)         */
/* ========================================= */

.dashboard-main {
    width: 95%;
    max-width: 1300px; /* Trochu širší, aby měly karty a boční panel místo */
    margin: 2rem auto;
}

#dashboard-header {
    background-color: #e0eef9;
    border: 1px solid #b3d4f2;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #b3d4f2;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-grid {
    display: grid;
    /* Rozdělí obrazovku: levá část pro filtry a jízdy zabere víc místa (např. 2.5 dílů), pravý sidebar (1 díl) */
    grid-template-columns: 2.5fr 1fr; 
    gap: 2rem;
    align-items: start; /* Velmi důležité! Zabrání roztahování pravého sloupce dolů s přibývajícími kartami jízd */
}

/* Úprava karet v novém menším sloupci */
.dashboard-left .karty-kontejner {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dashboard-right section {
    margin-bottom: 2rem;
}

/* Zmenšení mapy pro boční panel */
.sidebar-mapa iframe {
    height: 350px !important;
}

/* V bočním panelu chceme statistiky přehledně pod sebou */
.sidebar-statistiky {
    display: flex;
    flex-direction: column;
}

/* Responzivita - Na tabletech a mobilech zrušíme sloupce a dáme vše pod sebe */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Změníme vizuální pořadí: Jízdy první, Mapa a detailní statisky dole */
    .dashboard-left {
        order: 2;
    }
    .dashboard-right {
        order: 1;
    }
    
    /* Na mobilu může být mapa zase trochu vyšší */
    .sidebar-mapa iframe {
        height: 400px !important;
    }
}

/* ========================================= */
/* STYLY PRO ODKAZY V POSTRANNĂŤM PANELU      */
/* ========================================= */

/* Odstranění výchozí modré barvy a podtržení pro všechny odkazy v sidebaru */
.sidebar-statistiky a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Zvýraznění odkazů v seznamech (např. TOP dopravci) při najetí myší */
.sidebar-statistiky .stat-blok li a:hover {
    color: #005A9C; /* Zmodrá, ale bez podtržení */
}

/* Vylepšený blok pro "Nejdelší jízdu" - Vzhled klikací minikarty */
.sidebar-statistiky .stat-link-block {
    display: block;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
    background-color: #f8f9fa; /* Velmi světle šedé pozadí */
    border: 1px solid #e9ecef; /* Jemný rámeček */
    border-radius: 8px;        /* Zakulacené rohy jako u velkých karet */
    color: #333;
    transition: all 0.2s ease-in-out;
}

/* Interakce při najetí myší na minikartu (hover) */
.sidebar-statistiky .stat-link-block:hover {
    background-color: #ffffff; 
    transform: translateY(-3px); /* Karta lehce povyskoÄŤĂ­ nahoru */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Přidá se stín */
    color: #005A9C; /* Text se obarvĂ­ firemnĂ­ modrou */
}

/* Zajištění správného řádkování uvnitř minikarty */
.sidebar-statistiky .stat-link-block p {
    margin: 0;
    line-height: 1.6;
    display: block;
}

/* ========================================= */
/* STYLY PRO STRÁNKU STATISTIKY.PHP          */
/* ========================================= */

/* Grid pro horní číselné metriky (KPI) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Karta jednotlivé metriky */
.kpi-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 4px solid #005A9C; /* FiremnĂ­ modrĂ˝ prouĹľek na boku */
    transition: transform 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
}

.kpi-title {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #003366;
    line-height: 1;
}

/* DvousloupcovĂ˝ grid pro tabulky vedle sebe */
.dashboard-grid-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: start;
}

/* Kontejner (karta) pro tabulku/statistiku */
.dashboard-widget {
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Aby hlaviÄŤka widgetu zakulatila rohy */
    display: flex;
    flex-direction: column;
}

.widget-header {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.widget-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #003366;
}

.widget-body {
    padding: 0; /* Tabulka by měla sahat až do krajů widgetu */
}

/* ModernĂ­ vzhled tabulek uvnitĹ™ widgetĹŻ */
table.modern-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

table.modern-table thead th {
    background-color: #ffffff;
    border-bottom: 2px solid #e9ecef;
    color: #495057;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
}

table.modern-table tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
    color: #333;
}

table.modern-table tbody tr:last-child td {
    border-bottom: none; /* Poslední řádek nemá čáru dole */
}

table.modern-table tbody tr:hover {
    background-color: #f8f9fa; /* Jemné zvýraznění řádku */
}

/* Odkazy uvnitĹ™ modernĂ­ch tabulek */
table.modern-table a {
    color: #005A9C;
    text-decoration: none;
    transition: color 0.2s;
}

table.modern-table a:hover {
    text-decoration: underline;
}

/* Responzivita pro statistiky */
@media (max-width: 1024px) {
    .dashboard-grid-half {
        grid-template-columns: 1fr; /* Na menších displejích pod sebe */
        gap: 1.5rem;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr); /* Na tabletu 2 vedle sebe */
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr; /* Na mobilu ĂşplnÄ› pod sebou */
    }
    
    table.modern-table thead th,
    table.modern-table tbody td {
        padding: 0.75rem 1rem; /* Na mobilu menší okraje v tabulce */
    }
}

/* Odkazy v KPI kartách (např. hlavní dopravce) */
.kpi-value a,
.kpi-value a:visited {
    color: #005A9C; /* Vynutíme naši firemní modrou i po kliknutí */
    text-decoration: none;
    transition: color 0.2s;
}

.kpi-value a:hover {
    color: #003366; /* Při najetí myší lehce ztmavne */
    text-decoration: underline;
}
/* ========================================= */
/* SPECIÁLNÍ KARTA PRO CESTY (Summary)      */
/* ========================================= */

.jizda-karta.cesta-karta {
    border-left: 5px solid #17a2b8 !important;
    background: linear-gradient(to right, #f0f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.jizda-karta.cesta-karta::after {
    content: "??";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 3rem;
    opacity: 0.1;
    transform: rotate(15deg);
    pointer-events: none;
}

.jizda-karta.cesta-karta .karta-header {
    background-color: #d1ecf1;
    border-bottom: 1px solid #bee5eb;
    color: #0c5460;
}

.jizda-karta.cesta-karta .karta-vlak {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.jizda-karta.cesta-karta .karta-body {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.jizda-karta.cesta-karta .karta-trasa .sipka {
    color: #17a2b8;
}

.jizda-karta.cesta-karta .karta-detaily span strong {
    color: #17a2b8;
    font-size: 1.1rem;
}

.jizda-karta.cesta-karta:hover {
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.2);
}


/* Vyhledávání dopravce v hlavě obsahu */
.header-search-container {
    position: relative;
    width: 250px;
    margin-left: auto;
    box-sizing: border-box;
}
.header-search-input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border: 1px solid #e0e6ed;
    border-radius: 20px;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    box-sizing: border-box;
}
.header-search-input:focus {
    outline: none;
    border-color: #005a9c;
    box-shadow: 0 4px 10px rgba(0,90,156,0.1);
}
.header-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.header-search-results {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 10005;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.header-search-results.show { display: block; }
.header-search-results a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.header-search-results a:hover { background: #f0f7ff; color: #005a9c; }
.header-search-results .no-results {
    padding: 15px;
    color: #666;
    text-align: center;
    font-style: italic;
    font-size: 0.85rem;
}

/* ========================================= */
/* NOVÝ DETAIL LOKOMOTIVY (UPPER BLOCK)      */
/* ========================================= */

.loko-hero-card {
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.loko-identity-v2 {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.loko-identity-img {
    background: #f8fafc;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #edf2f7;
    transition: transform 0.3s ease;
}

.loko-identity-img:hover {
    transform: scale(1.02);
}

.loko-identity-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loko-back-link {
    font-size: 0.85rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    margin-bottom: 4px;
}

.loko-back-link:hover {
    color: #005a9c;
}

.loko-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loko-number-v2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    margin: 0;
}

.loko-series-badge {
    font-size: 0.9rem;
    background: #005a9c;
    color: #fff;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.loko-series-badge:hover {
    background: #004a80;
}

.loko-header-side {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-search-container-v2 {
    position: relative;
    width: 280px;
}

.header-search-input-v2 {
    background: #f1f5f9;
    border: 1px solid transparent;
    padding: 10px 16px 10px 40px;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.header-search-input-v2:focus {
    background: #fff;
    border-color: #005a9c;
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
    outline: none;
}

.search-icon-v2 {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

@media (max-width: 768px) {
    .loko-hero-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
    .loko-identity-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .loko-header-side {
        width: 100%;
        justify-content: space-between;
    }
    .header-search-container-v2 {
        width: 100%;
    }
}

.loko-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Zmenšení horního okraje karty, protože teď má baru nad sebou */
.loko-hero-card {
    margin-top: 0.5rem;
}

.loko-hero-card.centered {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 2rem;
    position: relative;
}

.loko-identity-v2.centered {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.loko-title-row.centered {
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.loko-number-v2.large {
    font-size: 2.8rem;
    line-height: 1;
}

.loko-actions-v2.absolute {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* --- Vylep�en� zv�razn�n� v�b�ru ve vyhled�v�n� --- */
.search-results a.selected,
.header-search-results a.selected,
.header-search-results-v2 a.selected {
    background-color: #eef6fc !important;
    color: #005a9c !important;
    font-weight: 800 !important;
    border-left: 5px solid #005a9c !important;
    padding-left: 15px !important;
    transition: all 0.1s ease-in-out !important;
    box-shadow: inset 0 0 5px rgba(0,90,156,0.05);
}

/* Fix pro vycentrovani na mobilu - cislo a badge pod obrazkem */
.loko-hero-card.centered,
.loko-identity-v2.centered,
.loko-title-row.centered {
    align-items: center !important;
}

/* Sjednoceni sirky a stylu hlavniho bloku s widgety na mobilu */
@media (max-width: 580px) {
    .loko-hero-card.centered {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        padding: 1.5rem 1rem !important;
    }
}