/* --- TLAČÍTKA NAHOŘE VPRAVO (Lokace a Severka) --- */
#locate-btn {
    position: absolute; top: 20px; right: 20px; z-index: 1000;
    background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(8px);
    color: #58d68d; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%; width: 44px; height: 44px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); display: flex;
    align-items: center; justify-content: center; transition: all 0.2s ease;
    font-size: 20px;
}
#locate-btn:hover { background: rgba(40, 40, 40, 0.9); }
#locate-btn:active { transform: scale(0.95); }

#compass-btn {
    position: absolute; top: 74px; right: 20px; z-index: 1000; /* Odsazeno pod tlačítko lokace */
    background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; transition: opacity 0.2s ease;
}
#compass-btn:hover { background: rgba(40, 40, 40, 0.9); }
#compass-btn:active { transform: scale(0.95); }

/* --- PULZUJÍCÍ BOD MOJÍ POLOHY --- */
.user-location-marker {
    width: 16px; height: 16px;
    background-color: #3498db;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: relative;
}
.user-location-marker::after {
    content: ''; position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%; border: 2px solid #3498db;
    animation: locationPulse 2s infinite; opacity: 0;
}
@keyframes locationPulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* --- MODERNÍ DETAILNÍ PANEL / BOTTOM SHEET (VDV Design) --- */
#detail-panel {
    position: absolute; top: 20px; left: 20px; width: 380px; 
    max-height: calc(100vh - 80px);
    background: #1e1e1e; /* Tmavá ze screenshotu VDV */
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    z-index: 1000; display: none; flex-direction: column;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #eee; overflow: hidden; transition: transform 0.3s ease-out;
}

/* Hlavička pro vizitku vlaku */
.panel-header {
    padding: 15px; display: flex; justify-content: space-between;
    align-items: center; border-bottom: 1px solid #333;
}
.panel-header h3 { margin: 0; font-size: 18px; font-weight: bold; color: #fff; }
.panel-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa; padding: 0; line-height: 1; }
.panel-close-btn:hover { color: #fff; }

.panel-content { padding: 15px; overflow-y: auto; flex-grow: 1; }

/* Tabulky VDV styl (Detaily) */
.vdv-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 13px; }
.vdv-table th, .vdv-table td { padding: 8px; border-bottom: 1px solid #333; text-align: left; }
.vdv-table th { color: #aaa; font-weight: normal; width: 40%; white-space: nowrap; }
.vdv-table td { color: #fff; font-weight: bold; }

/* Základní tlačítko */
.panel-btn {
    width: 100%; padding: 10px 16px; border: none; border-radius: 6px;
    font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s;
}
.panel-btn-primary { background: #58d68d; color: #111; }
.panel-btn-primary:hover { background: #45b373; }

/* --- NOVÝ JÍZDNÍ ŘÁD (Podle VDV Screenshotu) --- */
.tt-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #333;
}
.tt-back-btn {
    background: #58d68d; color: #111; border: none; padding: 8px 16px;
    border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer;
    transition: 0.2s;
}
.tt-back-btn:hover { background: #45b373; }

.tt-header-info { text-align: right; font-size: 14px; color: #eee; }
.tt-header-info strong { color: #fff; }
.tt-header-info .delay-val { font-weight: bold; }

.tt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tt-table th {
    color: #aaa; font-weight: normal; padding: 0 8px 10px 8px;
    text-align: center; border-bottom: 1px solid #333;
}
.tt-table th:first-child { text-align: left; width: 45%; }
.tt-table td {
    padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center; white-space: nowrap;
}
.tt-table tr:nth-child(even) { background-color: rgba(255,255,255,0.02); }
.tt-table td:first-child {
    text-align: left; font-weight: bold; color: #fff; white-space: normal; line-height: 1.3;
}

/* Plánovaný a aktuální čas zobrazen vedle sebe přeškrtnutý */
.tt-time-planned { color: #777; text-decoration: line-through; margin-right: 6px; font-size: 12px; font-family: monospace; }
.tt-time-planned-nodelay { color: #777; margin-right: 6px; font-size: 12px; font-family: monospace; text-decoration: none; }
.tt-time-actual { font-weight: bold; font-size: 13px; font-family: monospace; }

/* Značka lokální náhradní dopravy (Malá u stanice) */
.nad-badge {
    font-size: 9px;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    background: transparent;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* RESPONZIVITA (Vyjetí ze spodku na mobilu) */
@media (max-width: 767px) {
    #detail-panel {
        top: auto; left: 0; bottom: 0; width: 100%; max-height: 75vh;
        border-radius: 16px 16px 0 0; border: none;
        border-top: 1px solid rgba(255,255,255,0.2);
        transform: translateY(100%);
    }
    #detail-panel.open { transform: translateY(0); }
}