/* =========================================================
   STATIKA.INFO - HLAVNÍ STYLY MAPY A APLIKACE (v3.0)
   ========================================================= */

/* --- 1. ZÁKLAD A LAYOUT --- */
html, body, .app-wrapper, .app-main, #map {
    margin: 0; padding: 0;
    height: 100dvh !important; /* Dynamická výška pro mobily */
    width: 100vw !important;
    position: relative; overflow: hidden; background-color: #1a1a1a;
}
.app-wrapper { display: flex; flex-direction: column; }
#map canvas { cursor: crosshair !important; }
.hidden { display: none !important; }

/* Obecná tlačítka v UI */
.map-btn {
    background: #3d3d3d; color: #ffffff !important; border: 1px solid #555;
    padding: 3px 4px; cursor: pointer; border-radius: 4px; font-size: 0.85em;
    display: flex; align-items: center; gap: 4px;
}
.map-btn:hover { background: #4d4d4d; border-color: #777; }
.map-btn.active { background: #007bff; border-color: #0056b3; }


/* --- 2. HORNÍ LIŠTA A VYHLEDÁVÁNÍ --- */
.floating-top-bar {
    position: absolute; top: 15px; left: 15px; right: 15px; z-index: 5000;
    display: flex; flex-wrap: wrap; 
    align-items: center; 
    pointer-events: none; 
}
.floating-top-bar > div { pointer-events: auto !important; }

.logo-container {
    background: #141414; padding: 10px 20px 10px 15px;
    border-radius: 0 0 50px 0; display: flex; align-items: center;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3); cursor: default;
}
.app-logo-main { height: 32px; width: auto; display: block; color: #ffffff; }

.search-box {
    display: flex; margin-top: 10px; flex-grow: 1;
    min-width: 150px; max-width: 500px; position: relative;
}
.search-box input {
    background: rgba(0, 0, 0, 0.8) !important; border: 1px solid #555 !important;
    color: white !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    width: 100%; height: 35px; border-radius: 25px; outline: none;
    padding: 3px 15px !important; margin: 0 10px !important;
}

/* --- CHYTRÁ LUPA (FAB) --- */
#smart-search-container {
    position: relative;
    display: flex !important;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap !important;
    pointer-events: auto;
    margin-top: 0 !important;
}

/* Tlačítko lupy, když je pole roztažené, změní barvu/ikonu */
#smart-search-container.search-expanded #btn-search-trigger {
    background: #ff922b;
    border-color: #e67e22;
    color: white;
}

#btn-search-trigger {
    z-index: 2; /* Musí být fyzicky "nad" inputem */
    flex-shrink: 0; /* Nesmí se nikdy zdeformovat/zmenšit */
    margin: 0;
}

/* Obal pro samotný input - záměrně vyšší, aby se vešel stín a rámeček */
#search-input-wrapper {
    z-index: 1; 
    height: 60px; /* Zvětšeno z 38px, aby nůžky overflow nestříhaly stín */
    display: flex;
    align-items: center; /* Vycentruje políčko na střed obalu */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stav: ZAVŘENO */
#smart-search-container.search-collapsed #search-input-wrapper {
    width: 0px;
    opacity: 0;
    margin-left: -38px; /* Úplně schované pod tlačítkem */
    pointer-events: none;
}

/* Stav: OTEVŘENO */
#smart-search-container.search-expanded #search-input-wrapper {
    width: 250px;
    opacity: 1;
    margin-left: -15px;
    pointer-events: auto;
    flex-shrink: 0; /* ZÁKAZ SMRSKNUTÍ: Flexbox raději odřádkuje pravá tlačítka dolů, než aby uřízl input */
}

/* Políčko samotné */
#search-input-wrapper input {
    height: 38px !important;
    width: 100% !important; /* TOHLE JE DŮLEŽITÉ: Input musí vyplnit celý svůj obal */
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 19px !important;
    padding-left: 20px !important;
}


/* Dokonale kulaté GPS tlačítko */
.btn-gps-round {
    width: 44px;           /* Pevná šířka */
    height: 44px;          /* Pevná výška = čtverec */
    border-radius: 50%;    /* Ze čtverce udělá kruh */
    padding: 0;            /* Vyrušíme případné dědičné okraje */
    background-color: rgba(0, 0, 0, 0.65); /* Černé průsvitné pozadí */
    color: #ffffff;        /* Bílý terč */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Jemný bílý rámeček pro kontrast s mapou */
    
    /* Vycentrování ikonky přesně doprostřed */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 20px;       /* Velikost ikonky */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* Lehký stín, aby levitovalo */
    transition: all 0.2s ease-in-out;
}

/* Reakce na najetí myší */
.btn-gps-round:hover {
    background-color: rgba(0, 0, 0, 0.85); /* Ztmavne */
    transform: scale(1.05); /* Lehce se zvětší */
}

/* Animace hledání polohy (z minula, jen mírně upravená) */
.gps-searching i {
    color: #ff922b; /* Při hledání může terč blikat oranžově (jako tvůj špendlík) */
    animation: pulse-gps 1.5s infinite;
}

@keyframes pulse-gps {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

.top-right-group { 
    display: flex; align-items: center; gap: 10px; 
    /* TOHLE JE TEN ZÁZRAK: Odtlačí celou skupinu doprava */
    margin-left: auto; 
    /* Zrušíme ten margin-top z minula, už není potřeba */
    margin-top: 0; 
    pointer-events: auto;
}
.base-layer-box {
    display: flex; align-items: center; background: #2d2d2d;
    border: 1px solid #555; border-radius: 25px; padding: 2px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.map-layers-pill { position: relative; width: 40px; height: 40px; padding: 0 !important; justify-content: center; overflow: hidden; }
.map-layers-pill i { color: white; font-size: 18px; pointer-events: none; }

.map-btn-select {
    background: transparent; color: white !important; border: none; padding: 8px 5px;
    font-size: 0.85em; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
    padding-right: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center;
}
/* Neviditelný select pro ikonu vrstev */
.map-layers-pill .map-btn-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.map-btn-select option { background: #2d2d2d; color: white; opacity: 1; }


/* --- 3. LEVÝ PANEL (Nástroje) --- */
.map-layer-floating-panel {
    position: absolute; top: 99px; left: 15px; z-index: 1000;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    pointer-events: none; background: transparent;
}
.opacity-slider-wrapper, .btn-pano { pointer-events: auto; }

/* Tlačítka Sníh / Vítr */
.map-btn-floating {
    width: 38px; height: 38px; background: rgba(255, 255, 255, 0.9);
    border: 2px solid #333; border-radius: 50%; color: #333; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: all 0.2s ease;
    pointer-events: auto !important;
}
.map-btn-floating:hover { background: #e9ecef; transform: scale(1.05); }
.map-btn-floating.active { background: #007bff; color: white; border-color: #0056b3; }

/* Slidery Průhlednosti - Neviditelný obal */
.opacity-slider-wrapper {
    display: flex; flex-direction: row; justify-content: center; gap: 10px;
    pointer-events: none; /* Důležité: neviditelný obal nesmí blokovat klikání na mapu! */
}
input[type="range"][orient="vertical"] {
    appearance: auto; -webkit-appearance: auto;
    writing-mode: vertical-lr; direction: rtl;
    width: 15px; height: 90px; cursor: pointer; margin: 0;
    pointer-events: auto; /* Samotné posuvníky jsou hmatatelné */
}

/* --- 4. EXTERNÍ ODKAZY A PANORAMA --- */
.map-external-actions {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(40, 40, 40, 0.9); padding: 8px; border-radius: 8px;
    border: 1px solid #ff922b; width: fit-content; pointer-events: auto; transition: all 0.3s ease;
}
.map-external-actions.hidden { display: none; }
.action-label { font-size: 9px; color: #ff922b; margin-bottom: 4px; text-transform: uppercase; font-weight: bold; text-align: center; }

.action-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 5px; }
.action-buttons a, .btn-pano {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: white !important; text-decoration: none; font-size: 16px;
    transition: transform 0.2s ease, filter 0.2s ease; border: none; cursor: pointer;
}
.btn-pano { background-color: #4dabf7 !important; border-radius: 50% !important; border: 2px solid white !important;} 
.btn-mapy { background-color: #ff922b; }
.btn-geo  { background-color: #51cf66; }
.btn-mine { background-color: #f06595; }
.btn-radon{ background-color: #845ef7; }

.action-buttons a:hover, .btn-pano:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }


/* --- 5. LEGENDA A SPODNÍ PRVKY --- */
.map-legend {
    position: absolute; top: 80px; right: 15px; z-index: 1000;
    background: rgba(40, 40, 40, 0.9); padding: 10px; border-radius: 8px;
    border: 1px solid #ff922b; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 11px; max-width: 160px; cursor: default; pointer-events: auto;
}
.legend-item { display: flex; align-items: center; margin: 4px 0; }
.color-box { width: 14px; height: 14px; margin-right: 8px; border-radius: 2px; flex-shrink: 0; }

.ol-zoom { top: auto !important; left: auto !important; bottom: 15px !important; right: 15px !important; }
.ol-zoom button {
    background-color: rgba(255, 255, 255, 0.9) !important; color: #333 !important;
    font-size: 20px !important; border: 2px solid #333 !important; border-radius: 6px !important;
    margin-bottom: 5px; width: 35px !important; height: 35px !important; cursor: pointer !important;
}

.map-provider-info {
    position: absolute; bottom: 15px; left: 15px; z-index: 300; pointer-events: auto;
    background: rgba(40, 40, 40, 0.7); padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 8px; 
}
.map-provider-info img { height: 14px; opacity: 0.8; transition: height 0.3s; }
.map-provider-info:hover img { height: 28px; opacity: 1; }
.map-provider-info .info-text { font-size: 9px; color: #ccc; }

#map-attribution {
    position: absolute; 
    right: 60px; 
    bottom: 15px; 
    z-index: 5000; /* Zvýšíme prioritu, aby byl kopyrajt nad vším */
    
    /* KLÍČOVÁ ZMĚNA: Musí být AUTO, aby šlo klikat na odkazy! */
    pointer-events: auto !important; 
    
    background: rgba(255, 255, 255, 0.85); 
    padding: 3px 10px; 
    font-size: 11px; 
    border-radius: 5px; 
    color: #333;
    cursor: default; /* Nad samotným boxem bude normální šipka */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Odkazy uvnitř kopyrajtu */
#map-attribution a {
    color: #ff922b !important; /* Naše oranžová */
    text-decoration: none;
    font-weight: bold;
    cursor: pointer; /* Ruka se objeví JEN nad odkazem */
    pointer-events: auto;
}

#map-attribution a:hover {
    text-decoration: underline;
    color: #e67e22 !important;
}

/* --- 6. PLYNULÉ MIZENÍ (Pro logiku Zoomu) --- */
.fade-transition {
    /* transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; */
    transition: all 0.6s ease;
    opacity: 1; visibility: visible; transform: translateY(0);
    /* Připraveno pro vyfouknutí */
    max-height: 300px; max-width: 300px; /* Přidáno max-width pro vodorovné smršťování */
    overflow: hidden;  /* Obsah nesmí přetéct ven, když se box zmenšuje */
}
.hide-smooth {
    opacity: 0 !important; visibility: hidden !important;
    transform: scale(0) !important; /* Efekt "scvrknutí" do středu */
    pointer-events: none !important;
    
    max-height: 0 !important; max-width: 0 !important; /* Vynuluje výšku i šířku! */
    padding: 0 !important; margin: 0 !important; border-width: 0 !important;
}


/* --- 7. PANELY NÁSTROJŮ (Terén, Vítr atd.) --- */
.inspector-panel {
    position: absolute; 
    top: 80px; 
    left: 70px; 
    background: #2a2a2a; 
    color: white; 
    width: 280px;
    border-radius: 6px; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); 
    z-index: 9000; 
    
    /* KLÍČOVÉ ZMĚNY PRO DESKTOP: */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px); /* Panel nikdy nebude vyšší než okno mínus rezerva */
    overflow: hidden; 
    pointer-events: auto;
}
.inspector-panel.hidden { display: none; }
.inspector-header { 
    flex: 0 0 auto; /* Hlavička se nesmí smrsknout */
    background: #444; 
    padding: 8px 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #555; 
    cursor: move; 
}
.btn-close-inspector { background: none; border: none; color: white; font-size: 18px; cursor: pointer; }
/* KLÍČOVÉ ZMĚNY PRO TĚLO PANELU: */
.inspector-body, .inspector-content { 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow-y: auto; /* TADY se objeví posuvník, pokud je obsah moc dlouhý */
    flex: 1 1 auto;   /* Tělo vyplní zbytek výšky panelu */
}

/* Vlastní tenký a elegantní posuvník pro obsah panelů */
.inspector-body::-webkit-scrollbar, 
.inspector-content::-webkit-scrollbar {
    width: 5px; /* Velmi tenký a moderní */
}
.inspector-body::-webkit-scrollbar-track, 
.inspector-content::-webkit-scrollbar-track {
    background: transparent; /* Neviditelná kolejnice */
}
.inspector-body::-webkit-scrollbar-thumb, 
.inspector-content::-webkit-scrollbar-thumb {
    background: #666; /* Decentní šedá barva jezdce */
    border-radius: 10px; /* Zcela kulaté konce */
}
.inspector-body::-webkit-scrollbar-thumb:hover, 
.inspector-content::-webkit-scrollbar-thumb:hover {
    background: #ff922b; /* Při najetí myší svítí tvou oranžovou */
}

/* --- 8. PRAVÝ PANEL (Bottom Sheet) A VÝSLEDKY --- */
.app-main { display: flex; flex-direction: row; height: 100dvh; overflow: hidden; }
#map { flex: 1 1 auto; position: relative; height: 100%; }

#bottom-sheet {
    width: 400px; min-width: 400px; background: #232323; border-left: 1px solid #444; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; z-index: 10; height: 100%; overflow: hidden;
}
.sheet-header {
    height: 45px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    flex: 0 0 auto;
    cursor: pointer;
}

/* Plynulé přechody barev pro hlavičku dokumentu (Semafor) */
#sheet-header-trigger {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    color: #ffffff !important; /* Vynucení bílého textu pro lepší kontrast */
}
/* Zajištění, aby i ikony nebo pod-texty uvnitř hlavičky byly bílé */
#sheet-header-trigger * {
    color: #ffffff !important;
}

#btn-close-point { font-size: 28px; color: #ff922b; cursor: pointer; margin-left: auto; padding: 0 10px; transition: transform 0.2s; }
#btn-close-point:hover { transform: scale(1.2); color: #fff; }

/* Obsah hlavičky (Summary) */
.sheet-summary { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; gap: 15px; padding: 5px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sheet-summary::-webkit-scrollbar { display: none; }
.summary-item { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 1.1em; }

/* obsah karty */
.sheet-content {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
    } 
    
.default-info
{
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    word-break: break-word;
    scroll-behavior: smooth;
    display: block;
    padding: 15px;
    background: #333;
    color: #f8f9fa;
 }
/* Vzhled posuvníku */
.default-info::-webkit-scrollbar { width: 8px; }
.default-info::-webkit-scrollbar-track { background: #1a1a1a; }
.default-info::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.default-info::-webkit-scrollbar-thumb:hover { background: #666; }
 
/* hlavní dokument */
.result-data  {
    display: none; flex: 1; flex-direction: column; overflow: hidden; }
/* dokument */
.main-document { 
 flex: 1;
 overflow-y: auto;
 scrollbar-gutter: stable; /* konec poskakování textu po zobrazení scroolbaru */
 word-break: break-word; /* rozdělení slov natvrdo pro dlouhá slova */
 scroll-behavior: smooth; /* luxusní jízda */
 background: white;
 color: black;
 padding: 20px; }
/* Vzhled posuvníku */
.main-document::-webkit-scrollbar { width: 8px; }
.main-document::-webkit-scrollbar-track { background: #1a1a1a; }
.main-document::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
.main-document::-webkit-scrollbar-thumb:hover { background: #999; }


/* Malý styl pro ikonky v dokumentu, aby nerušily, ale byly po ruce */
.doc-icon-btn {
background: none;
border: none;
color: #ccc;
cursor: pointer;
font-size: 14px;
padding: 0 5px;
transition: color 0.2s;
}
.doc-icon-btn:hover {
color: #ff922b; /* Tvá oranžová barva při najetí */
}

/* Obsah protokolu */
.boundary-alert { font-size: 0.65em; color: #ff922b; font-weight: bold; display: block; margin-top: 2px; }
#coord-jtsk, #coord-gps { font-family: 'Courier New', Courier, monospace; letter-spacing: -0.5px; }
.user-status-area { display: flex; justify-content: space-between; align-items: center; padding: 5px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85em; color: #eee; }
.user-info-left { display: flex; align-items: center; gap: 15px; }
.version-info-right { opacity: 0.5; font-style: italic; }

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
.blink-warning { animation: blink 1s infinite; font-weight: bold; color: #ff4d4d; white-space: nowrap; align-items: center; }
#btn-poddol.active { background: #e03131; border-color: #b01a1a; }

/* Geologie a Radon */
#geology-radon-section { margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); }
#geology-radon-section h3 { margin: 0 0 10px 0; color: #4dabf7; font-size: 12px; letter-spacing: 1px; font-weight: 600; }
.geo-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
.geo-item i { margin-top: 2px; width: 16px; text-align: center; }
.geo-label { font-weight: bold; color: #aaa; min-width: 70px; }
.geo-value { color: #eee; flex: 1; }
#link-geoportal { display: inline-block; margin-top: 8px; color: #666; transition: color 0.2s; }
#link-geoportal:hover { color: #4dabf7; }


/* --- 9. MODÁLY, LOGIN A NAŠEPTÁVAČ --- */
#panorama-container, .modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 8000; display: flex; justify-content: center; align-items: center;
}
.panorama-window { width: 90%; height: 80%; background: #000; border-radius: 12px; display: flex; flex-direction: column; }
.modal-content { background: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; position: relative; color: #333; }
.close-modal, .close-pano-btn { position: absolute; right: 20px; font-size: 28px; cursor: pointer; background: none; border: none; }
.close-pano-btn { color: white; top: 15px; } .close-modal { color: #888; top: 15px; }

/* Formuláře */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #444; }
.form-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; background: #f9f9f9 !important; color: #000 !important; }
.btn-primary-large { width: 100%; padding: 14px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1.1em; }

/* Našeptávač */
#autocomplete-results {
    position: absolute; top: 100%; left: 0; right: 0; background: #2d2d2d; color: white;
    border-radius: 12px; z-index: 6000; max-height: 250px; overflow-y: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
#autocomplete-results:not(:empty) { border: 1px solid #555; padding: 5px 0; }
#autocomplete-results div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 15px; cursor: pointer; }
#autocomplete-results div:hover { background: #444; }


/* --- 10. MOBILNÍ ZOBRAZENÍ (< 800px) --- */
/* Mobilní responzivita lupy */
@media (max-width: 768px) {
    .app-main { flex-direction: column; }
    #map { width: 100%; height: auto; }
    
    #smart-search-container.search-expanded #search-input-wrapper { 
        /* Vezme celou šířku displeje a odečte 100px na lupu a bezpečné okraje */
        width: calc(100vw - 100px); 
        max-width: 250px; /* Aby to na tabletech zase nebylo extrémně dlouhé */
    }
    
    #bottom-sheet {
        width: 100%; min-width: 100%; max-width: 100%;
        border-left: none; border-top: 1px solid #444;
        flex: 0 0 45px; /* Sbalený stav - je vidět jen hlavička 45px */
        transition: flex-basis 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    }
    #bottom-sheet.sheet-expanded { flex: 0 0 50vh; /* Rozbalený stav do půlky obrazovky */ }
    
    .map-right-controls, .map-layer-floating-panel, .map-legend { 
        top: 80px !important; 
    }
    .search-box { max-width: 100%; }
 

    /* Kontejner, co to drží pohromadě */
    .top-panel { 
        display: flex;
        flex-wrap: wrap; /* Dovolí prvkům odskočit na další řádek */
        align-items: center;
        justify-content: space-between;
    }

    /* 2. Ikonky (Sníh, Vítr, GPS) se natlačí hned vedle loga doprava */
    .top-right-controls {
        order: 2;
        margin-left: auto; /* Odtlačí ikonky co nejvíc doprava */
    }

    /* 3. Vyhledávání odskočí na druhý řádek a roztáhne se */
    .search-box {
        order: 3;
        width: 100%; /* Zabere celý druhý řádek */
        margin-top: 10px; /* Aby nebylo nalepené na logu */
    }

 
    .inspector-panel {
        position: fixed; 
        top: auto; 
        bottom: 0; 
        left: 0; 
        width: 100%;
        border-radius: 15px 15px 0 0;
        
        /* KLÍČOVÉ ZMĚNY PRO MOBIL: */
        max-height: 50vh; /* Na mobilu max polovina obrazovky */
        z-index: 10001;   /* Aby byl nad bottom-sheetem, pokud se potkají */
    }
}


/* --- 11. STYLY PROTOKOLU A OBSAHU --- */

/* Univerzální flex kontejnery */
.flex-col { display: flex; flex-direction: column; }
.flex-grow { flex: 1; }
.no-shrink { flex: 0 0 auto; }
.scroll-y { overflow-y: auto; }

/* Styly pro Protokol (to, co je v #main-document) */
.protocol-title { 
    color: #ff922b; 
    border-bottom: 2px solid #ff922b; 
    padding-bottom: 5px; 
    margin-bottom: 15px;
}

.protocol-section { margin-bottom: 20px; }

.protocol-h4 { 
    font-size: 14px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 5px; 
    margin-bottom: 10px;
}

.protocol-hint { 
    color: #666; 
    font-style: italic; 
    font-size: 0.9em; 
}

/* Varování (Poddolování) */
.warning-row { 
    color: red; 
    font-weight: bold; 
    padding: 5px 0;
}

/* Inspektoři - vnitřní prvky */
.inspector-label-group { margin-top: 15px; display: block; color: #555; }
.inspector-info-box {
    margin-top: 10px; 
    font-size: 0.85em; 
    background: #f9f9f9; 
    border: 1px solid #bbb; 
    padding: 8px; 
    border-radius: 4px; 
    color: #000;
}

/* =========================================================
   MATICE KATEGORIÍ (Nová tabulka pro růžici)
   ========================================================= */

.sector-matrix-table {
    width: 100%;
    table-layout: fixed; /* Zaručí všechny sloupečky stejně široké */
    border-collapse: separate;
    border-spacing: 2px;
    margin-top: 8px;
    font-size: 12px;
}

.sector-matrix-table th {
    background: #333; /* Tmavé pozadí hlavičky */
    color: #fff;      /* Bílý text */
    padding: 6px 2px;
    border-radius: 3px;
    cursor: help; /* Naznačíme, že je tam nápověda */
    text-align: center;
    font-weight: bold;
}

/* Pevná šířka pro směry (první sloupeček) a tmavé pozadí */
.sector-matrix-table th:first-child,
.sector-matrix-table td.dir-name {
    width: 90px; /* ZVĚTŠENO: Aby se vešel směr i s úhlem na jeden řádek */
    text-align: center;
    padding: 0 4px; /* Drobné odsazení od okrajů */
    background: #333; /* Tmavé pozadí pro směry */
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    white-space: nowrap; /* ZÁKAZ ZALAMOVÁNÍ TEXTU */
    font-size: 11px; /* Mírně zmenšeno pro lepší pasování */
}

.sector-matrix-table td {
    padding: 0;
}

/* Styl pro bílé buňky kategorií */
.cat-cell {
    height: 20px; /* ZMENŠENO: Výrazná úspora místa na výšku */
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 5px; /* Tvoje oblíbené kulaté rohy */
    cursor: pointer;
    transition: all 0.15s;
    color: #333;
}

.cat-cell:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* Aktivní vybraná kategorie */
.cat-cell.active {
    background: #007bff !important;
    border-color: #0056b3;
    position: relative;
}

/* Malá bílá tečka uprostřed aktivní buňky pro lepší viditelnost */
.cat-cell.active::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}