/* Základní reset, aby nikde nepřekážely okraje */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0b111e; /* Tmavá barva z tvého screenshotu */
    color: white;
    font-family: sans-serif;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Zabrání nechtěnému skrolování */
}

/* Horní lišta s názvem města a lupou */
header {
    height: 3.5rem; /* Tvoje původní výška */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: rgba(0, 0, 0, 0.2);
    z-index: 100;
}

/* Kontejnery pro grafy */
.chart-container {
    position: relative;
    width: 100%;
}

/* Hlavní graf (Teplota) - zabere víc místa */
#top-chart-wrapper {
    flex: 2; /* Poměrově větší */
    min-height: 0; /* Klíčové pro flexbox, aby se graf mohl zmenšit */
}

/* Druhý graf (Srážky/Vlhkost) - zabere míň místa */
#bottom-chart-wrapper {
    flex: 1; /* Poměrově menší */
    min-height: 0;
    border-top: 1px solid #2d3748;
}

/* Donutíme canvas, aby vyplnil přesně svůj kontejner */
canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}