/* --- GLOBÁLNÍ PROMĚNNÉ --- */
:root {
    --bg-main: #0B1121;
    --bg-panel: #131C31;
    --text-main: #F3F4F6;
    --text-muted: #8ba0b8;
    --accent: #3B82F6;
    --accent-hover: #2563EB;
    --danger: #EF4444;
    --border: rgba(255, 255, 255, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    height: 100vh;
    /* dvh = skutečná výška viewportu na mobilu (bez adresního řádku prohlížeče).
       Bez toho 100vh přesahuje viditelnou plochu a spodní obsah mizí pod lištou. */
    height: 100dvh;
    overflow: hidden;
}

/* --- CUSTOM MODERNÍ SCROLLBARY --- */
/* Firefox: tenký scrollbar laděný do tmavého motivu. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    /* Průhledný okraj tvoří kolem tlačítka mezeru, takže vypadá tenčeji a "plave". */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.55); /* na hover se jemně obarví do accentu */
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--accent);
    background-clip: padding-box;
}

/* Roh, kde se potkávají vodorovný a svislý scrollbar. */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- GOOGLE MATERIAL IKONY --- */
.material-symbols-rounded {
    vertical-align: middle;
    font-size: 1.25em;
    position: relative;
    top: -1px;
}

/* --- OBECNÁ TLAČÍTKA A FORMULÁŘE --- */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    outline: none;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-submit,
.btn-secondary,
.btn-delete,
.btn-trip-action {
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-submit {
    background: linear-gradient(135deg, var(--accent), #6366F1);
    color: white;
    width: 100%;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, var(--accent-hover), #4F46E5);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent);
    border: 2px dashed rgba(59, 130, 246, 0.5);
}

.btn-secondary:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--accent);
}

.btn-delete {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-delete:hover {
    background-color: var(--danger);
    color: white;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn-icon.danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
}

/* --- CHYBOVÉ STAVY FORMULÁŘŮ (INLINE VALIDACE) --- */
.input-error {
    border-color: var(--danger) !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    animation: shake 0.4s ease-in-out;
}

.error-bubble {
    color: #fca5a5;
    /* Světlejší červená pro dobrou čitelnost na tmavém pozadí */
    font-size: 0.8rem;
    margin-top: 8px;
    display: none;
    background: rgba(239, 68, 68, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--danger);
    animation: fadeIn 0.3s;
    line-height: 1.4;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- PŘIHLAŠOVÁNÍ A TAGY --- */
.auth-bg-art {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.8;
}


/* --- POZADÍ PŘIHLAŠOVACÍ OBRAZOVKY --- */
.auth-bg-art {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.9;
}

.auth-pin {
    position: absolute;
    width: 35px;
    height: 35px;
    /* Pomocí marginů umístíme přesný střed bodu na vypočítané souřadnice */
    margin-top: -26px;
    margin-left: -13px;
    /* Zajistíme, aby se při zvětšení ikonka roztahovala směrem nahoru a špička zůstala na trase */
    transform-origin: bottom center;
    /* Zvětšeno 1.8x, zcela statické, bez skákání a levitování */
    transform: scale(1.8);
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh; /* Fallback pro velmi staré prohlížeče */
    height: 95dvh !important;
    width: 100%;
    position: relative;
    z-index: 1;
}

.auth-box {
    background: linear-gradient(to bottom right, var(--bg-panel), #0f172a);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-height: calc(100dvh - 30px) !important;
    overflow-y: auto;
}

.auth-box h2 {
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-main);
    font-size: 1.6rem;
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-switch strong {
    color: var(--accent);
}

/* Banner nad přihlašovacím/registračním formulářem, když přišel uživatel přes pozvánkový odkaz. */
.join-hint {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 15px;
    color: var(--text-main);
    font-size: 0.85rem;
    text-align: center;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}

.tag-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    transition: all 0.2s;
    user-select: none;
}

.tag-pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tag-pill.active {
    color: white;
    border-color: transparent;
}

.tag-cat-bed.active {
    background-color: #3B82F6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.tag-cat-role.active {
    background-color: #10B981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.tag-cat-food.active {
    background-color: #F59E0B;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.tag-cat-pace.active {
    background-color: #8B5CF6;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* --- MODERNÍ DASHBOARD --- */
.dashboard-container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
    position: relative;
    z-index: 1;
}

.dashboard-header {
    /* position+z-index drží hlavičku (a tím i otevřené profilové menu) nad kartami
       výletů. backdrop-filter níž vytváří vlastní stacking context, do kterého by
       jinak z-index dropdownu nedosáhl a hover karty by menu překryl. */
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, rgba(19, 28, 49, 0.8) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-header h1 {
    font-size: 2rem;
    background: linear-gradient(to right, #ffffff, #9CA3AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

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

.trips-section {
    margin-bottom: 40px;
}

.trips-section h2 {
    margin-bottom: 20px;
    color: var(--text-muted);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trips-section h2::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}

.trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.trip-card {
    background: linear-gradient(to bottom right, var(--bg-panel), #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    min-height: 240px;
}

.trip-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    border-color: rgba(59, 130, 246, 0.3);
}

.trip-card h3 {
    margin-bottom: 5px;
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.trip-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 16px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.trip-card-add {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    color: var(--text-muted);
}

.trip-card-add:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.05);
}

.trip-card-add .plus-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
    font-weight: 300;
    line-height: 1;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trip-role-creator {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.trip-role-member {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--accent);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.trip-role-admin {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.trip-role-driver {
    background-color: rgba(236, 72, 153, 0.15);
    color: #EC4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

/* --- AKČNÍ TLAČÍTKA NA KARTIČCE --- */
.trip-actions {
    display: flex;
    flex-wrap: wrap;
    /* Dovolí tlačítkům odskočit na nový řádek, když není místo */
    gap: 8px;
    border-top: none;
    margin-top: 15px;
    margin-bottom: -5px;
    margin-left: -5px;
    margin-right: -5px;
}

.btn-trip-action {
    flex: 1;
    min-width: 100px;
    /* Tlačítko se nikdy nesmrskne do nečitelné velikosti */
    padding: 12px 10px;
    font-size: 0.95rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-trip-action:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.btn-trip-action.danger {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-trip-action.danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

.btn-trip-action.share {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-trip-action.share:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* --- RESPONZIVITA PRO MOBILY --- */
@media (max-width: 500px) {
    .trip-actions {
        flex-direction: column;
        /* Na mobilech se tlačítka seřadí pod sebe do sloupce */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .btn-trip-action {
        width: 100%;
        /* Každé tlačítko zabere celou šířku kartičky */
        padding: 14px 10px;
        /* Na mobilu ještě o chloupek vyšší pro snazší kliknutí palcem */
    }
}

.btn-trip-action.share {
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-trip-action.share:hover {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Kód pro sdílení výletu - celý řádek je klikací jako odkaz, ikona vpravo
   jen naznačuje akci kopírování. */
.share-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px 16px;
    transition: background-color 0.2s;
}

.share-code-wrapper:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.share-code-text {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 5px;
    color: var(--accent);
}

.share-code-icon {
    font-size: 1.4rem !important;
    color: var(--text-muted);
    transition: color 0.2s;
}

.share-code-wrapper:hover .share-code-icon {
    color: var(--accent);
}

/* Odkaz na pozvánku - kopírovací ikona sedí jako overlay uvnitř pole, ne jako tlačítko pod ním. */
.share-link-wrapper {
    position: relative;
    display: flex;
}

.share-link-wrapper input {
    width: 100%;
    padding: 10px 42px 10px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-size: 0.8rem;
    outline: none;
}

.share-link-copy-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.share-link-copy-btn:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

/* --- STRÁNKA PROFILU --- */
/* Scroll drží celá plná šířka (posuvník je tak u okraje okna), obsah uvnitř centruje
   profile-inner. Kdyby scrolloval rovnou centrovaný wrapper, posuvník by visel uprostřed. */
.profile-scroll {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.profile-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
}

@media (max-width: 1100px) {
    .profile-inner { padding: 15px; }
}

.profile-page-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* Jednotné tlačítko "Zpět" napříč aplikací (profil, mapa, HUB). */
.back-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.2s;
}

.back-btn:hover {
    color: var(--text-main);
}

.back-btn .material-symbols-rounded {
    font-size: 1.2rem;
}

/* Hlavička profilu s velkým avatarem - vystředěná karta nad formuláři. */
.profile-hero {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 25px;
}

/* --- OŘEZÁVAČ PROFILOVÉ FOTKY --- */
.crop-stage {
    position: relative;
    width: min(280px, 70vw);
    height: min(280px, 70vw);
    margin: 0 auto 15px auto;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    touch-action: none; /* vlastní gesta pro posun, ne scroll stránky */
    cursor: grab;
    user-select: none;
}

.crop-stage:active {
    cursor: grabbing;
}

.crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    max-width: none; /* přebije globální max-width:100% u obrázků */
}

/* Kruhová maska ukazuje, jaká část se ořízne (kruhový avatar). */
.crop-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.crop-zoom-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- MODÁLNÍ OKNA --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
}

.modal-content {
    background: linear-gradient(to bottom right, var(--bg-panel), #0f172a);
    padding: 25px;
    border-radius: 12px;
    width: 320px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    max-height: calc(100dvh - 30px) !important;
    overflow-y: auto !important;
}

.date-input {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
}

.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* --- ŠIPKY NAHORU/DOLŮ U ČÍSELNÝCH INPUTŮ --- */
/* color-scheme: dark řekne prohlížeči, ať nativní šipky vykreslí v tmavém motivu
   (jinak jsou to světlé "cvočky", co na tmavém pozadí ruší). */
input[type="number"] {
    color-scheme: dark;
}

/* Chrome/Safari: šipky ať jsou vidět vždycky (ne jen na hover) a mají místo. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 1;
    height: 24px;
    cursor: pointer;
}

/* --- MAPA A BOČNÍ PANELY NA PC --- */
.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.mobile-top-header {
    display: none;
}

/* Na PC defaultně skryto */

.sidebar {
    width: 480px;
    background: linear-gradient(to bottom right, var(--bg-panel), #0f172a);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    min-height: 0;
}

.sidebar-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.distance-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-radius: 12px;
    font-size: 0.85rem;
    padding: 4px 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    font-weight: bold;
}

/* Obalovač mapy a ostrov (bottom sheet) */
.map-wrapper {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

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

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: var(--bg-panel);
    color: var(--text-main);
}

.leaflet-routing-container {
    display: none !important;
}

/* SPODNÍ MAPOVÉ OKNO (FLOATING ISLAND) - UPRAVENO PRO PC */
.map-bottom-sheet {
    position: absolute;
    bottom: 35px;
    /* Výše od spodní hrany na PC */
    left: 50%;
    width: 80%;
    /* Skoro šířka mapy, ale nedotýká se okrajů */
    max-width: none;
    /* Odstraněn max-width pro PC, aby mohl být širší */
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    transform: translate(-50%, 150%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    /* Na PC stačí menší max-výška */
}

.map-bottom-sheet.open {
    transform: translate(-50%, 0);
}

.mbs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.mbs-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mbs-title-row h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.1rem;
}

.mbs-content {
    overflow-y: auto;
    padding-bottom: 5px;
}

.mbs-content::-webkit-scrollbar {
    display: none;
}

.right-sidebar {
    width: 350px;
    background: linear-gradient(to bottom left, var(--bg-panel), #0f172a);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    min-height: 0;
}

#days-wrapper {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Patička pod #days-wrapper - flex-shrink:0 ji drží vždy dole, mimo scroll dnů. */
.sidebar-footer {
    padding: 15px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pravý panel: nahoře scrollovatelný obsah (popis, posádka), dole pevná patička
   (role řidiče, náhled, HUB tlačítko) - ta se díky flex-shrink:0 nehýbe podle
   délky popisu ani počtu účastníků nahoře. */
.right-sidebar-scroll {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.right-sidebar-footer {
    padding: 20px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.day-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.day-card:hover {
    border-color: #374151;
}

.day-card.active {
    background-color: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.3);
}

.day-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.day-card-title {
    font-size: 1.05rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px currentColor;
}

.stops-in-day {
    display: flex;
    flex-direction: column;
}

.stop-item {
    background-color: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    transition: all 0.2s;
}

.stop-content {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.stop-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bg-main);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    line-height: 0;
    padding: 0;
    margin: 0;
}

.stop-item.dragging {
    opacity: 0.4;
}

.stop-item.drag-over .stop-content {
    border: 1px dashed var(--accent);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transform: translateY(2px);
}

.stop-content:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.route-segment {
    margin-left: 11px;
    border-left: 2px dashed var(--seg-color, var(--accent));
    padding: 10px 0 10px 20px;
    font-size: 0.8rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
}

.stop-info {
    flex: 1;
}

.stop-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-add-day-wide {
    width: 100%;
    background-color: rgba(59, 130, 246, 0.05);
    color: var(--accent);
    border: 2px dashed var(--accent);
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-add-day-wide:hover {
    background-color: var(--accent);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.participant-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.participant-avatar {
    position: relative; /* kotva pro fotku ležící přes iniciály */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    color: white;
    overflow: hidden; /* ořízne nahranou fotku do kruhu */
}

/* Sjednocená profilovka. Barva pozadí přichází inline z renderAvatar() v utils.js,
   proto tady žádný background - přebil by ji. */
.avatar {
    position: relative; /* kotva pro fotku, která leží přes iniciály */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0; /* bez tohohle se avatar ve flexu zdeformuje na ovál */
    overflow: hidden; /* ořízne fotku do kruhu */
}

/* Fotka leží přes barevný kruh s iniciálami (fallback pod ní). object-fit: cover
   ji vyplní ať má jakýkoliv poměr stran. */
.avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Velký avatar v hlavičce profilu - klikací, s ikonkou fotoaparátu v rohu. */
.profile-avatar-edit {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    cursor: pointer;
}

#profile-modal-avatar {
    position: relative; /* kotva pro fotku ležící přes iniciály */
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8B5CF6);
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 25px rgba(59, 130, 246, 0.3);
    border: 4px solid var(--bg-panel);
    overflow: hidden;
}

#profile-modal-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-cam {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
    border: 3px solid var(--bg-panel);
    top: auto;
}

.profile-avatar-edit:hover .profile-avatar-cam {
    background: var(--accent-hover);
}

.avatar-xs { width: 24px; height: 24px; font-size: 0.65rem; }
.avatar-sm { width: 30px; height: 30px; font-size: 0.9rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.avatar-lg { width: 45px; height: 45px; font-size: 1.1rem; }
.avatar-xl { width: 56px; height: 56px; font-size: 1.4rem; }

/* Překrývající se kolečka lidí u jedné věci */
.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack .avatar {
    margin-left: -8px;
    border: 2px solid var(--bg-panel); /* obrys dělá překryv čitelným */
}

.avatar-stack .avatar:first-child {
    margin-left: 0;
}

.avatar-more {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}

/* Výběr barvy profilovky v nastavení profilu */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}

.color-dot:hover {
    transform: scale(1.15);
}

.color-dot.active {
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.nav-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 5px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.nav-tab.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

/* --- MAPOVÉ IKONY --- */
.icon-option {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-main);
}

.icon-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.icon-option.active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent);
}

.custom-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}

.pin-marker {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

.pin-marker span {
    transform: rotate(45deg);
    color: white;
    font-size: 15px;
}

/* ===================================================================== */
/* --- VIZUÁL DETAILŮ A BUILDERU DLE NÁVRHU ---                          */
/* ===================================================================== */
.stop-details {
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 15px;
    margin-left: 34px;
    margin-top: -6px;
    margin-bottom: 10px;
    display: none;
}

.expand-arrow {
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.4rem !important;
    margin-left: 2px;
    pointer-events: none;
}

.expand-arrow.open {
    transform: rotate(180deg);
}

.view-main-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.view-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}

.view-icon-box span {
    font-size: 1.2rem !important;
}

.view-title {
    flex: 1;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
}

.btn-edit-top {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.btn-edit-top:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.3);
}

.stop-detail-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stop-detail-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #60a5fa;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stop-detail-header span {
    font-size: 1rem;
}

.stop-detail-value {
    font-size: 0.85rem;
    color: var(--text-main);
    padding-left: 24px;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}

.stop-detail-value a {
    color: #60a5fa;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stop-detail-value a:hover {
    text-decoration: underline;
}

.edit-main-header {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

.edit-icon-selector {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    position: relative;
}

.edit-icon-selector:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.tiny-edit-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #6366f1;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-panel);
}

.tiny-edit-badge span {
    font-size: 8px !important;
}

.edit-name-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: white;
    padding: 10px 12px;
    font-size: 1rem;
    font-weight: bold;
    outline: none;
    transition: 0.2s;
}

.edit-name-input:focus {
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.4);
}

.edit-row {
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
}

.edit-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-type-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    font-size: 0.85rem;
    width: fit-content;
}

.btn-remove-row {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    transition: 0.2s;
    margin-left: auto;
}

.btn-remove-row:hover {
    background: rgba(239, 68, 68, 0.15);
}

.detail-input {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 0.85rem;
}

.detail-input:focus {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--accent);
    padding: 9px;
}

.btn-add-detail {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #3B82F6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transition: all 0.2s;
    margin: 15px auto 20px auto;
}

.btn-add-detail:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.btn-save-big {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save-big:hover {
    background: linear-gradient(135deg, #4338ca, #2563eb);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}


/* ===================================================================== */
/* --- VIZUÁL HUB DLE NÁVRHU (ÚČASTNÍCI, VÝDAJE, SBALIT)                 */
/* ===================================================================== */
.hub-top-bar {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

/* Nadpis lišty se smrskne s ellipsis, ať neodtlačí profilové menu mimo obrazovku. */
.hub-top-bar h2 {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pravá skupina v horní liště Nástěnky: tlačítko úpravy rozložení + profil. */
.hub-top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Uvnitř skupiny už profil doprava netlačí - to řeší margin-left:auto skupiny. */
.hub-top-actions .profile-menu {
    margin-left: 0;
}

/* --- PROFILOVÉ MENU VPRAVO NAHOŘE (dashboard i Nástěnka) --- */
.profile-menu {
    position: relative;
    margin-left: auto; /* odtlačí menu úplně doprava */
    flex-shrink: 0;
}

.profile-menu-trigger {
    position: relative; /* kotva pro korunku tvůrce (opts.crownHtml) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    transition: all 0.2s;
}

.profile-menu-trigger:hover,
.profile-menu.open .profile-menu-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 6px;
    display: none;
    z-index: 10060; /* nad kartami, panely i mapou */
}

/* Otevřené menu si zvedne i vlastní stacking context, ať ho nepřekryjí sousedi. */
.profile-menu.open {
    z-index: 10060;
}

.profile-menu.open .profile-menu-dropdown {
    display: block;
}

.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.92rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.profile-menu-item span.material-symbols-rounded {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.profile-menu-item.danger {
    color: var(--danger);
}

.profile-menu-item.danger span.material-symbols-rounded {
    color: var(--danger);
}

.profile-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

.profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

@media (max-width: 600px) {
    .hub-top-bar h2 { font-size: 1.15rem; }
}

/* Profilové menu na stránce s mapou - v hlavičce pravého panelu (desktop) a v mobilní
   horní liště. V mobilní liště nechceme margin-left:auto (sedí hned za PDF tlačítkem). */
.mobile-top-header .profile-menu { margin-left: 6px; }

@media (max-width: 1100px) {
    /* Na mobilu je menu v horní liště, ať se v panelu Cestující neukazuje podruhé. */
    .right-sidebar .sidebar-header .profile-menu { display: none; }
}

.hub-dashboard {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hub-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hub-card.full-width {
    grid-column: 1 / -1;
}

/* ===================================================================== */
/* --- MODULÁRNÍ NÁSTĚNKA (Gridstack) ---                                */
/* ===================================================================== */
.hub-layout-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 40px 60px;
}

/* Karta modulu vyplní celou dlaždici mřížky; obsah uvnitř případně scrolluje. */
.grid-stack-item-content {
    overflow: hidden;
    border-radius: 16px;
}

.module-card {
    height: 100%;
    margin: 0;
    overflow: auto;
    position: relative;
}

/* Tělo modulu vyplní zbytek karty (mj. aby odhad u auta seděl u spodní hrany). */
.module-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Křížek na odebrání i "chytací" hlavička se ukážou jen v edit módu. */
/* Hlavička modulu: vlevo úchyt (ikona + název), vpravo akce (přejmenovat/odebrat). */
.module-drag-handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* aby se dlouhý název ořízl a neroztlačil hlavičku */
    cursor: default;
}

.module-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Akce se ukážou jen v edit módu. */
.module-actions {
    display: none;
    margin-left: auto;
    gap: 6px;
    flex-shrink: 0;
}

body.hub-editing .module-actions {
    display: flex;
}

.module-rename,
.module-remove {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

.module-rename:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
}

.module-remove {
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.12);
}

.module-remove:hover {
    background: var(--danger);
    color: white;
}

body.hub-editing .module-drag-handle {
    cursor: move;
}

/* V edit módu naznačíme okraje dlaždic, ať je vidět, s čím se hýbe. */
body.hub-editing .grid-stack-item-content {
    outline: 1px dashed rgba(96, 165, 250, 0.5);
    outline-offset: -1px;
}

/* Boční paleta modulů - vyjede z pravého kraje jen při editaci. */
.module-palette {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.4);
    padding: 20px 16px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 5000;
}

body.hub-editing .module-palette {
    transform: translateX(0);
}

.module-palette-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.palette-group {
    margin-bottom: 18px;
}

.palette-group-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 8px;
}

.palette-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.palette-item:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--accent);
}

.palette-item:disabled {
    opacity: 0.4;
    cursor: default;
}

.palette-item span.material-symbols-rounded {
    color: var(--accent);
}

/* --- Viditelnost editace: zóna, úchyty, kam a jak s moduly hýbat --- */

/* Celá plocha mřížky dostane v editaci viditelnou "zónu" (rámeček kolem). */
body.hub-editing .grid-stack {
    outline: 2px dashed rgba(96, 165, 250, 0.35);
    outline-offset: 12px;
    border-radius: 14px;
    min-height: 260px;
    background: rgba(96, 165, 250, 0.03);
}

/* Hlavička modulu = úchyt na přesun. V editaci ukáže ikonku a kurzor "move". */
body.hub-editing .module-drag-handle {
    cursor: move;
}

body.hub-editing .module-drag-handle::before {
    content: 'drag_indicator';
    font-family: 'Material Symbols Rounded';
    font-size: 1.2rem;
    color: var(--accent);
    margin-right: 2px;
    flex-shrink: 0;
}

/* Zvýraznění dlaždice pod myší v editaci. */
body.hub-editing .grid-stack-item:hover > .grid-stack-item-content {
    outline: 1px solid var(--accent);
}

/* Úchyt na změnu velikosti: jen ten nativní od Gridstacku, obarvený do accentu.
   (Dřív jsem k němu kreslil ještě vlastní roh - dva úchyty se pak překrývaly.) */
.grid-stack-item > .ui-resizable-se {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%233B82F6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
}

/* Placeholder (kam modul dopadne) při tažení - jasně čitelný. */
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed var(--accent);
    background: rgba(59, 130, 246, 0.1);
    border-radius: 14px;
}

/* Paleta je fixní overlay. Aby se mřížka při vstupu do editace NEZMENŠILA (a
   nepřeskládala), ubereme místo z celé stránky přes padding body - centrovaná
   mřížka (max-width 1200) si tak na širokém okně udrží šířku i pozici. */
@media (min-width: 769px) {
    body.hub-editing {
        padding-right: 240px;
        transition: padding-right 0.25s ease;
    }
}

.hub-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: var(--text-main);
}

/* Účastníci a bilance */
.hub-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hub-participant:last-child {
    border-bottom: none;
}

.hp-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hp-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366F1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
}

.hp-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hp-name {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-main);
}

.hp-role {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    width: fit-content;
    text-transform: uppercase;
    font-weight: bold;
}

.hp-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hp-paid {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-main);
}

.hp-balance {
    font-size: 0.9rem;
    font-weight: bold;
}

.hub-total-summary {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Výdaje */
.hub-expenses-list {
    flex: 1;
    overflow-y: auto;
    max-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.hub-expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.hub-expense-name {
    color: var(--text-muted);
}

.hub-expense-amount {
    color: var(--text-muted);
}

.hub-expense-amount strong {
    color: white;
    margin-left: 8px;
}

/* Input a tlačítko u výdajů. Seznam věcí má vlastní styl v .packing-item-add,
   protože přidávání je od té doby poslední dlaždicí seznamu. */
.expense-input-row {
    display: flex;
    gap: 12px;
}

.expense-input-row input[type="text"] {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 15px;
    border-radius: 8px;
    color: white;
    outline: none;
    transition: 0.2s;
}

.expense-input-row input:focus {
    border-color: var(--accent);
}

.expense-currency-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding-right: 15px;
    transition: 0.2s;
}

.expense-currency-wrapper:focus-within {
    border-color: var(--accent);
}

.expense-currency-wrapper input {
    border: none !important;
    background: transparent !important;
    width: 70px;
    text-align: right;
    padding-right: 0;
}

.expense-currency-wrapper span {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: bold;
}

.btn-add-action {
    background: #6366F1;
    border: none;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;
}

.btn-add-action:hover {
    background: #4F46E5;
    transform: scale(1.05);
}

/* Karta Auto je úzká a vysoká (jeden sloupec mřížky), takže vstupy jdou pod sebe. */
.car-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Souhrn odhadu ceny paliva. margin-top:auto ho drží dole u hrany karty,
   ať je karta natažená na výšku sousední karty jakkoliv. */
.car-estimate {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.car-estimate .car-estimate-total {
    color: var(--text-main);
    font-size: 1.6rem;
    font-weight: bold;
}

/* Seznam věcí - Přesný klon screenu */
.packing-grid {
    display: grid;
    /* Max 3 sloupce (33.3% šířky mínus mezery), při zmenšení modulu se zalomí na 2 až 1 (min 200px) */
    grid-template-columns: repeat(auto-fill, minmax(max(calc(33.333% - 10px), 250px), 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.packing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.1);
}

.packing-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.packing-item.active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

.packing-item-left {
    display: flex;
    align-items: center;
    gap: 4px; /* menší než dřív, mezeru si přináší klikací plocha checkboxu */
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
    min-width: 0;
}

/* Checkbox zůstává vizuálně 22x22, ale terč pro prst musí být aspoň 44px.
   Záporné marginy nafouknutí vyruší, takže se výška řádku opticky nezmění. */
.packing-checkbox-hit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -11px 0 -11px -11px;
    flex-shrink: 0;
}

.packing-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.2);
}

.packing-item.active .packing-checkbox {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.packing-item.active .packing-checkbox::after {
    content: 'check';
    font-family: 'Material Symbols Rounded';
    font-size: 16px;
    font-weight: bold;
}

/* Pravá strana drží pohromadě stav věci: kolik se jich bere a kdo je bere. */
.packing-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Dlouhý název nesmí odtlačit stav mimo dlaždici. */
.packing-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Obě varianty (text "Zatím nikdo" i kolečka lidí) musí být stejně vysoké,
   jinak řádek při prvním zaškrtnutí povyskočí. Avatar má 24px + 2px obrys. */
.packing-who,
.avatar-stack {
    min-height: 28px;
    display: flex;
    align-items: center;
}

.packing-who {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Poslední dlaždice seznamu slouží k přidání věci - vypadá stejně jako ostatní,
   jen přerušovaným rámečkem naznačuje, že je to vstup. */
.packing-item-add {
    gap: 8px;
    border-style: dashed;
    background: transparent;
    cursor: default;
}

.packing-item-add:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.packing-item-add input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 0.95rem;
    padding: 0;
    min-width: 0;
}

.packing-item-add input::placeholder {
    color: var(--text-muted);
}

.packing-item-add input[type="text"]:first-child {
    flex: 1;
}

/* Odznak pokrytí "2/3", u položek s "a víc" pak "4/3+".
   U běžné věci na jeden kus se nevykresluje vůbec. */
.qty-badge {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.qty-badge.done {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.4);
}

/* Vzali víc, než se vejde - jen upozornění, zápis se nikdy neblokuje. */
.qty-badge.over {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.45);
}

.qty-badge-icon {
    font-size: 0.85rem !important;
    vertical-align: -2px;
    margin-left: 2px;
}

/* Informativní seznam "co si vzít" - stejné dlaždice jako u věcí,
   ale bez avatarů, protože zaškrtnutí je soukromé. */
.checklist-progress {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--text-muted);
    text-transform: none;
}

.checklist-progress.done {
    color: #10B981;
}

/* Křížek je vidět vždycky. Schovávat ho za hover by ho na mobilu
   udělalo nedostupným - tam se najet myší nedá. */
.checklist-item .checklist-delete {
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.checklist-item:hover .checklist-delete,
.checklist-item .checklist-delete:hover,
.checklist-item .checklist-delete:focus {
    opacity: 1;
}

/* Nastavení rozsahu v detailu věci */
.idm-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
}

.idm-range-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.qty-value.muted {
    color: var(--text-muted);
    font-weight: normal;
    font-size: 0.85rem;
}

/* Nastavení počtu kusů v detailu věci */
.idm-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Hodnota "bez limitu" je širší než číslo - pevná šířka drží tlačítka na místě. */
.qty-stepper .qty-value {
    min-width: 68px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}

.qty-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: bold;
    color: var(--text-main);
}

@media (max-width: 900px) {
    .hub-dashboard {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    /* .packing-grid řídí šířku přes auto-fill podle šířky modulu, ne okna. */

    .hub-top-bar {
        padding: 15px 20px;
    }
}

/* Červená tlačítka (Smazat / Opustit) na dashboardu */
.btn-trip-action.danger {
    color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-trip-action.danger:hover {
    background-color: #EF4444 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-1px);
}

/* Tlačítko GPS zaměřovače na mapě */
#btn-gps {
    position: absolute;
    top: 10px; /* Umístění pod přepínačem vrstev mapy */
    left: 50px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-panel);
    border: 2px solid var(--border);
    color: var(--text-main);
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

#btn-gps:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Aktivní stav (když se poloha právě sleduje) */
#btn-gps.active {
    color: var(--accent);
    border-color: var(--accent);
    background-color: rgba(59, 130, 246, 0.1);
}

/* ===================================================================== */
/* --- CHYTRÁ RESPONZIVITA A SPODNÍ NAVIGACE (MOBILY A TABLETY) ---      */
/* ===================================================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 1100px) {
    body {
        overflow: hidden;
    }

    .mobile-top-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: var(--bg-panel);
        padding: 15px 20px;
        border-bottom: 1px solid var(--border);
        position: relative; /* Přidáno */
        z-index: 10500;     /* Zvýšeno ze 100, aby přebilo všechny panely a mapu */
        flex-shrink: 0;
    }

    .mobile-top-header .back-btn {
        margin-bottom: 10px; /* zbytek vzhledu dědí z globální .back-btn */
    }

    .mobile-top-header .trip-title-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
    }

    .mobile-top-header .title-text {
        color: white;
        font-size: 1.3rem;
    }

    .desktop-only-header {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: var(--bg-panel);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        z-index: 10000;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    }

    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 0.7rem;
        cursor: pointer;
        flex: 1;
        transition: 0.2s;
        position: relative;
        height: 100%;
    }

    .mobile-bottom-nav .nav-item span.material-symbols-rounded {
        font-size: 1.4rem;
        margin-bottom: 2px;
        transition: 0.2s;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--accent);
    }

    .mobile-bottom-nav .nav-item.active span.material-symbols-rounded {
        transform: translateY(-2px);
    }

    .mobile-bottom-nav .nav-item.active::after {
        content: '';
        position: absolute;
        bottom: 8px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
    }

    .app-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        /* Rezerva přesně na výšku spodní lišty (65px) i případný home indicator,
           aby lišta nepřekrývala patičková tlačítka (HUB, Přidat den). */
        padding-bottom: calc(65px + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .sidebar,
    .right-sidebar,
    .map-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        border: none;
        box-shadow: none;
        overflow: hidden;
        min-height: 0;
    }

    /* OPRAVA PRO MOBIL: Ostrov levituje na mobilu nad lištou a nedotýká se krajů */
    .map-bottom-sheet {
        bottom: 15px;
        /* Výše nad spodní lištou na mobilu */
        width: calc(100% - 30px);
        /* Mezera 15px zleva a zprava na mobilu */
        max-width: none;
        /* Necháme roztažené na celou šířku mobilu mínus okraje */
        max-height: 60vh;
    }

    #days-wrapper {
        flex: 1;
        overflow-y: auto;
        background: var(--bg-main);
        padding: 15px;
        min-height: 0;
    }

    .mobile-view-itinerary .map-wrapper {
        display: none;
    }

    .mobile-view-itinerary .right-sidebar {
        display: none;
    }

    .mobile-view-itinerary .sidebar {
        display: flex;
    }

    .mobile-view-map .sidebar {
        display: none;
    }

    .mobile-view-map .right-sidebar {
        display: none;
    }

    .mobile-view-map .map-wrapper {
        display: flex;
    }

    .mobile-view-info .sidebar {
        display: none;
    }

    .mobile-view-info .map-wrapper {
        display: none;
    }

    .mobile-view-info .right-sidebar {
        display: flex;
    }

    .modal-content {
        width: 95% !important;
        max-width: 400px;
        padding: 20px;
    }

    .auth-box {
        width: 90%;
        padding: 30px 20px;
    }

    .dashboard-container {
        padding: 15px;
    }

    .dashboard-header {
        /* Pozdrav a profilovka zůstávají vedle sebe i na telefonu (profilovka vpravo),
           ne pod sebou. */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        gap: 15px;
    }

    /* Ať dlouhý pozdrav nevytlačí profilovku - text se zalomí, profilovka drží velikost. */
    .dashboard-header h1 { font-size: 1.6rem; }
    .dashboard-header > div:first-child { min-width: 0; }
    #dashboard-profile-menu { flex-shrink: 0; }

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

/* --- PŘEPÍNAČ (TOGGLE) --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 24px;
    border: 1px solid var(--border);
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked+.slider {
    background-color: rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.5);
}

.toggle-switch input:checked+.slider:before {
    transform: translateX(20px);
    background-color: #EC4899;
}

/* --- PDF EXPORT --- */
.exporting-pdf .btn-add-day-wide,
.exporting-pdf .btn-icon.danger,
.exporting-pdf .expand-arrow,
.exporting-pdf .btn-edit-top,
.exporting-pdf .material-symbols-rounded[title="Chytni a přesuň"] {
    display: none !important;
}

.exporting-pdf {
    background-color: var(--bg-main) !important;
    padding: 15px;
    height: auto !important;
    /* Aby nevynechal oříznuté přeskládané věci */
    overflow: visible !important;
}

.exporting-pdf .day-card {
    page-break-inside: avoid;
    /* Aby se karty dnů nelámaly v půlce stránky */
}

/* --- PŘEPÍNAČ VRSTEV MAPY (LEAFLET) --- */
.leaflet-control-layers {
    background-color: var(--bg-panel) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
}

.leaflet-control-layers-expanded {
    padding: 10px 14px !important;
}

.leaflet-control-layers-list label {
    color: var(--text-main) !important;
    font-size: 0.9rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaflet-control-layers-list input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- MODERNÍ KARTY PROFILU --- */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.profile-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.02);
}

.profile-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-card-title span {
    color: var(--accent);
}

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

@media (max-width: 600px) {
    .hub-edit-text {
        display: none;
    }
    
    #hub-edit-toggle {
        padding: 8px 10px; /* Udělá z tlačítka hezčí čtverec, když zbude jen ikona */
    }
}