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

body { background-color: #121212; color: #ffffff; font-family: 'Segoe UI', Tahoma, sans-serif; padding: 20px; }
.dashboard-container { width: 100%; max-width: 1400px; margin: 0 auto; background-color: #1e1e1e; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 15px; }

header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; padding-bottom: 10px; }
h1 { font-size: 2rem; color: #ffffff; }
#status-bar { font-size: 1rem; padding: 8px 15px; border-radius: 8px; font-weight: bold; }
.status-loading { background-color: #ff9800; color: #000; }
.status-ok { background-color: #4CAF50; color: #000; }
.status-error { background-color: #f44336; color: #fff; }

.model-section { background-color: #252525; padding: 15px; border-radius: 10px; border-left: 4px solid #444; }
.model-section h2 { font-size: 1.3rem; margin-bottom: 15px; color: #ccc; }

.kpi-container { display: flex; gap: 15px; margin-bottom: 15px; }
.kpi-box { flex: 1; background-color: #1a1a1a; padding: 15px; border-radius: 8px; text-align: center; }
.model1-box { border-left: 4px solid #4CAF50; } 
.model2-box { border-left: 4px solid #2196F3; } 

.kpi-box h3 { color: #aaa; font-size: 1rem; margin-bottom: 5px; }
.kpi-box p { color: #fff; font-size: 2.5rem; font-weight: bold; }

.chart-wrapper { position: relative; height: 30vh; width: 100%; }

/* --- SEKCE MAPY POČASÍ --- */
.map-section {
    background-color: #252525;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #ff9800; /* Oranžová barva pro odlišení od FVE */
    margin-bottom: 20px;
}

.map-section h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #ccc;
}

.map-wrapper {
    position: relative;
    height: 50vh; /* Mapa zabere polovinu výšky obrazovky */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* --- RESPONZIVNÍ DESIGN (pro menší obrazovky) --- */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 10px; text-align: center; }
    .kpi-box p { font-size: 1.8rem; }
    .chart-wrapper { height: 25vh; }
}