* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: #1f2937;
    background: #f3f4f6;
}

header {
    background: #1e3a8a;
    color: #fff;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

/* Header layout: nadpis VLEVO (vždy na levém okraji), auth tlačítko VPRAVO.
 * justify-content: space-between přitlačí h1 na levý okraj a auth na pravý.
 * flex-wrap: nowrap zabrání zalamování (jinak by auth skočilo na druhý řádek
 * a h1 by se opticky pohnulo). flex-shrink: 0 na auth + min-width: 0 na h1
 * dělá to, že když není místo, zmenší se nadpis (a ne tlačítko), ale h1
 * zůstává přesně na levém okraji. */
.header-top {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.header-top > h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 100%;
}

#head-block-auth {
    width: 50%;
    text-align: left;
}

#btn-block-auth {
    width: 50%;
    text-align: right;
}

/* Sjednocené tlačítko status+akce: vypadá jako badge (pill shape),
 * barva podle stavu (auth-anonymous = průhledně bílá, auth-authenticated
 * = zelená). Kliknutí provede login nebo logout (řídí JS). */
#btn-auth {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s;
}
#btn-auth.auth-anonymous          { background: rgba(255, 255, 255, 0.18); }
#btn-auth.auth-anonymous:hover    { background: rgba(255, 255, 255, 0.30); }
#btn-auth.auth-authenticated      { background: #16a34a; }
#btn-auth.auth-authenticated:hover{ background: #15803d; }

/* "Skryté" tlačítko Přihlásit – pro anonymní uživatele je defaultně
 * neviditelné; odhalí se pouze po dvojkliku (nebo double-tapu na touch)
 * v pravém horním rohu viewportu, viz #auth-reveal-zone níže.
 * Tlačítko Odhlásit (auth-authenticated) je vidět vždy. */
#btn-auth.auth-anonymous {
    display: none;
}
#btn-auth.auth-anonymous.is-revealed {
    display: inline-flex;
    /* Krátký fade-in, ať se objevení nedělá skokem. */
    animation: btn-auth-fade-in 0.2s ease;
}
@keyframes btn-auth-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Skrytá zóna pro odhalení/skrytí tlačítka Přihlásit.
 * Pevně umístěná v pravém horním rohu viewportu, ~44×44 px (pohodlný
 * touch target), zcela průhledná. Sedí nad celým UI (z-index), takže
 * dvojklik na ni funguje i přes hlavičku. touch-action: manipulation
 * říká prohlížeči, aby na ní vypnul double-tap-to-zoom – díky tomu
 * se na mobilu double-tap přeloží na dblclick bez 300ms zpoždění. */
#auth-reveal-zone {
    position: fixed;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: transparent;
    cursor: default;
    z-index: 1100;
    touch-action: manipulation;
}

/* Login modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-card h2 {
    margin: 0 0 1rem 0;
    color: #1e3a8a;
    font-size: 1.1rem;
}

.modal-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.6rem 0 0.2rem;
}

.modal-card input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.95rem;
}

.modal-card .form-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-card .form-buttons button {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.modal-card .form-buttons button[type="submit"] {
    background: #3b82f6;
    color: #fff;
}

.modal-card .form-buttons button[type="submit"]:hover { background: #2563eb; }

.modal-card .form-buttons button[type="button"] {
    background: #e5e7eb;
    color: #1f2937;
}

#login-status {
    margin: 0.6rem 0 0;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: #dc2626;
}

#login-status.success { color: #15803d; }

/* Disabled stav formuláře pro nepřihlášené */
#point-form.locked {
    opacity: 0.55;
    pointer-events: none;
}

/* Tlačítko stylované jako odkaz - používá se např. pro "načíst z mapy" u adresy */
.link-btn {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0 0 0 0.4rem;
    text-decoration: underline;
}
.link-btn:hover { color: #1d4ed8; }
.link-btn:disabled { color: #9ca3af; cursor: wait; text-decoration: none; }

.toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar input[type="search"] {
    flex: 1;
    min-width: 180px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.toolbar select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.toolbar button {
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: 4px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
}

.toolbar button:hover { background: #2563eb; }

.toolbar button:disabled {
    background: #94a3b8;
    cursor: wait;
}

/* Tlačítko "Moje poloha" - jen SVG ikona, bez textu.
 * align-self: stretch + parent .toolbar má align-items:center,
 * což roztáhne tlačítko na výšku ostatních (Hledat / Obnovit).
 * aspect-ratio: 1 udrží čtvercový tvar. */
#btn-locate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    align-self: stretch;
    aspect-ratio: 1 / 1;
}
#btn-locate svg {
    flex: 0 0 auto;
    display: block;
}

.hint {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-left: auto;
}

main {
    display: flex;
    height: calc(100% - 96px);
}

#map {
    flex: 1;
    height: 100%;
}

#sidebar {
    width: 380px;
    max-width: 42%;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    padding: 1rem;
    overflow-y: auto;
}

#sidebar h2 {
    font-size: 0.85rem;
    margin: 0.7rem 0 0.35rem 0;
    color: #1e3a8a;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.2rem;
}

#sidebar h2:first-of-type { margin-top: 0; }

form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
}

form input, form textarea, form select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    background: #fff;
}

form textarea { resize: vertical; }

.form-row {
    display: flex;
    gap: 0.5rem;
}

.form-row > div {
    flex: 1;
}

.muted {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.form-buttons {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.form-buttons button {
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    background: #3b82f6;
    color: #fff;
    font-weight: 500;
}

.form-buttons button:hover { background: #2563eb; }
.form-buttons button.danger { background: #dc2626; }
.form-buttons button.danger:hover { background: #b91c1c; }

#btn-clear { background: #6b7280; }
#btn-clear:hover { background: #4b5563; }

#form-status {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    min-height: 1.2em;
}

#form-status.error { color: #dc2626; }
#form-status.success { color: #15803d; }

/* Správa uživatelů */
#user-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

#user-status {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    min-height: 1.2em;
}

#user-status.error   { color: #dc2626; }
#user-status.success { color: #15803d; }

/* Verze / build / kontakt – levý dolní roh mapy (Leaflet control) */
.map-build-info {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    white-space: nowrap;
    margin-right: 0px !important;
    opacity: 70%;
}

.map-build-info__row {
    font-size: 0.7rem;
    color: #374151;
    line-height: 1.5;
}

/* Verze + datum buildu – dole v sidebaru */
#build-info {
    margin-top: 1rem;
    padding: 0.4rem 0;
    border-top: 1px solid #e2e8f0;
    font-size: 0.7rem;
    color: #9ca3af;
    text-align: center;
    letter-spacing: 0.02em;
    user-select: none;
}

.legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
}

.legend li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}

.legend .swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid #1f2937;
    flex-shrink: 0;
}

#points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#points-list li {
    padding: 0.4rem 0.45rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 0.3rem;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
}

#points-list li:hover { background: #f1f5f9; }

#points-list .li-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

#points-list .li-body { flex: 1; min-width: 0; }

#points-list li .pt-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e3a8a;
}

#points-list li .pt-coords {
    font-size: 0.72rem;
    color: #6b7280;
    font-family: monospace;
    padding-left: 2px;
    margin-top: 0.2rem;
}

#points-list li .pt-desc {
    font-size: 0.78rem;
    color: #374151;
    margin-top: 0.15rem;
}

#points-list li .pt-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#points-list li .pt-address {
    font-size: 0.72rem;
    color: #374151;
    margin-top: 0.1rem;
    font-style: italic;
}

#points-list li .pt-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
}

#points-list li .pt-dist {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: #1d4ed8;
    font-weight: 600;
}

/* Custom marker (divIcon) styling - removes Leaflet's default white box */
.mp-marker { background: transparent !important; border: 0 !important; }
.mp-marker svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.mp-marker img.custom-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    background: #fff;
    object-fit: cover;
}

/* Popup bodu – kompaktnější typografie.
 * Leaflet defaultně dává .leaflet-popup-content margin 13px 19px a font-size
 * 12px (přibližně); zde zmenšujeme základ a explicitně nadpis (název bodu
 * vykresluje app.js jako prosté <strong>...</strong>). */
.leaflet-popup-content {
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0.5rem 0.75rem;
}
.leaflet-popup-content strong {
    display: inline-block;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
    color: #1e3a8a;
}
.leaflet-popup-content small {
    font-size: 0.72rem;
}

/* ---- Tlačítko "Body a legenda" je primárně mobilní – na desktopu skryté.
 *      Na desktopu zůstává #info-panel inline součástí sidebaru. ---- */
#info-toggle { display: none; }

@media (max-width: 700px) {
    /* --- HLAVIČKA na mobilu: kompaktnější – menší padding, menší písma,
     *     nižší tlačítka i textová pole, aby celá hlavička zabírala co
     *     nejmíň výšky a zbylo víc místa na mapu. */
    header {
        padding: 0.4rem 0.6rem;
    }
    .header-top {
        gap: 0.5rem;
    }
    header h1 {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.2;
    }
    .auth-area {
        font-size: 0.72rem;
    }
    #btn-auth {
        padding: 0.15rem 0.55rem;
        font-size: 0.72rem;
        border-radius: 10px;
    }

    /* Toolbar (vyhledávání, filtr, tlačítka): užší padding, menší písmo,
     * těsnější mezery. Na mobilu navíc rozkládáme do dvou řádků:
     *   řádek 2 (= druhý řádek hlavičky): vyhledávací pole přes celou šířku
     *   řádek 3: filtr typu + tlačítka (Hledat, Obnovit, GPS) vedle sebe
     * Toho dosáhneme tím, že search inputu dáme flex-basis 100 % – sebere si
     * celý řádek a všechno za ním se zalomí na další řádek. */
    .toolbar {
        gap: 0.3rem;
        margin-top: 0.35rem;
    }
    .toolbar input[type="search"] {
        flex: 1 1 100%;          /* přes celou šířku – sám tvoří řádek */
        min-width: 0;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    .toolbar select {
        flex: 1 1 auto;          /* na třetím řádku se roztáhne přes volné místo */
        min-width: 0;
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
    .toolbar button {
        padding: 0.25rem 0.65rem;
        font-size: 0.8rem;
    }
    /* GPS tlačítko zachovává čtvercový tvar přes aspect-ratio – jen menší
     * vnitřní mezera kolem ikony. */
    #btn-locate {
        padding: 0 0.35rem;
    }
    #btn-locate svg {
        width: 15px;
        height: 15px;
    }

    main { flex-direction: column; }

    /* Na mobilu žije toggle i panel mimo normální tok (position: fixed),
     * sidebar je proto „prázdný" a vizuálně neutrální. Jediné, co v něm
     * fyzicky bývá, je editační formulář (jen pro přihlášené). */
    #sidebar {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        flex-shrink: 0;
        padding: 0;
        background: transparent;
        border: 0;
        overflow: visible;
    }
    #edit-section {
        background: #fff;
        padding: 1rem;
        border-top: 1px solid #e5e7eb;
        /* Volný prostor pod formulářem, ať ho nepřekryje fixní toggle (40px). */
        margin-bottom: 48px;
    }
    #map {
        flex: 1;
        height: auto;
        min-height: 200px;
    }
    .hint { display: none; }

    /* ===== BOTTOM-SHEET DESIGN =====
     * Toggle je fixovaný tab dole, panel se z něj vytahuje nahoru.
     * Layout v <main> je nezávislý – panel ani toggle nepřispívají k jeho
     * výšce, takže nic nemůže propadnout pod viewport.
     */

    /* --- TOGGLE: fixovaný "tab" dole, přes celou šířku --- */
    #info-toggle {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 40px;
        padding: 0 1rem;
        margin: 0;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
    }
    #info-toggle::after {
        /* Šipka nahoru = "vytáhnout"; ve stavu rozbaleném se otočí dolů. */
        content: "▴";
        font-size: 1.1em;
        line-height: 1;
        transition: transform 0.25s ease;
    }
    #info-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* --- PANEL: fixovaný overlay nad tabem, slide-up animace ---
     * V kolapsu je posunutý pod viewport (translateY = jeho výška + výška
     * tabu). Po kliknutí na toggle se translateY změní na 0.
     * Používáme sourozenecký selektor "+" mezi tlačítkem a panelem – funguje
     * 100 % všude, žádný :has() ani JS-class fallback. */
    #info-panel {
        position: fixed;
        bottom: 40px;            /* sedí těsně nad tabem (40px high) */
        left: 0;
        right: 0;
        z-index: 1000;
        max-height: 50vh;        /* maximálně polovina viewportu – panel je nižší,
                                    horní hrana sedí dál od horního okraje obrazovky
                                    (= seznam je vizuálně níže, mapa zůstává víc vidět) */
        padding: 0.75rem 1rem 1rem;
        margin: 0;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        transform: translateY(calc(100% + 40px));   /* skrytý pod viewportem */
        transition: transform 0.3s ease;
    }
    /* Vizuální „úchyt" nahoře panelu, ať je jasné, že jde o sheet. */
    #info-panel::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        margin: 0 auto 0.75rem;
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* Klíčové pravidlo: stav atributu na tlačítku → posun panelu. */
    #info-toggle[aria-expanded="true"] + #info-panel {
        transform: translateY(0);
    }

    /* Seznam bodů má vlastní vnitřní scroll a vejdou se do něj zhruba 2 karty.
     * Zbytek si uživatel doroluje uvnitř seznamu. Legenda a oba nadpisy
     * (Legenda typů / Seznam bodů ve výřezu) zůstávají vždy viditelné nahoře,
     * neschovají se mimo viewport. */
    #info-panel #points-list {
        max-height: 145px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Login modal – záložky (Heslem / API klíčem)
   ============================================================ */
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e2e8f0;
}

.tab-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: #64748b;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
    color: #1e293b;
}

.tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}