/* =========================================================
   Meteo-Aalten  –  Stylesheet
   Bestand : style.css
   Versie  : 15.00

   versie 15.00
   - CSS-klassen "almanak-*" hernoemd naar "extremen-*"
     (.almanak-grid, .almanak-card, .almanak-row, etc.),
     in lijn met dezelfde hernoeming in extremen.js en
     weatherdata.php. Deze klassen worden uitsluitend
     gebruikt door de Extremen-pagina, niet door Astro.

   Indeling:
   1.  Root-variabelen
   2.  Reset / basis
   3.  Layout
   4.  Panels & cards
   5.  Grid-systemen
   6.  Typografie & titels
   7.  Metrics
   8.  Comfortstatus
   9.  Trendindicatoren
   10. Status / versheid
   11. Header
   12. Navigatie
   13. Dropdown-menu
   14. Info-pagina
   15. Extremen
   16. Grafieken
   17. Zoom-resetknop
   18. Responsive
========================================================= */


/* =========================================================
   1. ROOT-VARIABELEN
========================================================= */
:root {

    /* Kleuren algemeen */
    --bg:          #f4f6f8;
    --card:        #ffffff;
    --text:        #333333;
    --muted:       #666666;

    /* Statuskleur */
    --color-ok:    #16a34a;
    --color-warn:  #dc2626;

    /* Trendpijlen */
    --trend-up:    #dc2626;
    --trend-down:  #2563eb;
    --trend-flat:  #6b7280;

    /* UI */
    --radius:        8px;
    --gap:           12px;
    --shadow:        0 2px 6px rgba(0, 0, 0, 0.1);
    --button-hover:  #e5e7eb;

    /* Grafiekenpaneel */
    --chart-panel-bg: #ffffff;

    /*
     * Square-kleurenschema (header, nav, panels).
     * Pas hier aan om het kleurthema van de site te wijzigen.
     */
    --header-bg:  #91667A;
    --nav-bg:     #66917D;
    --panel-bg:   #7D6691;
}


/* =========================================================
   2. RESET / BASIS
========================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}


/* =========================================================
   3. LAYOUT
========================================================= */
main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
}


/* =========================================================
   4. PANELS & CARDS
========================================================= */
.panel {
    background: var(--panel-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 15px;
    margin-bottom: 12px;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 15px;
}


/* =========================================================
   5. GRID-SYSTEMEN
========================================================= */
.status-row,
.grid {
    display: grid;
    gap: var(--gap);
}

.status-row {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 20px;
}

.grid {
    grid-template-columns: repeat(2, 1fr);
}


/* =========================================================
   6. TYPOGRAFIE & TITELS
========================================================= */
.panel-title,
.status-title {
    margin: 0 0 14px 0;
}

.tile-title {
    font: inherit;
    font-weight: normal;
    margin-bottom: 6px;
}

.status-line {
    margin-bottom: 4px;
}


/* =========================================================
   7. METRICS
========================================================= */
.metric-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.metric-value {
    font-size: 20px;
    font-weight: bold;
}

.metric-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
}


/* =========================================================
   8. COMFORTSTATUS
========================================================= */
.comfort-line {
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}

.comfort-normal { color: var(--muted); }
.comfort-heat   { color: var(--color-warn); font-weight: normal; }
.comfort-cold   { color: var(--trend-down); font-weight: normal; }

/* Hittekracht */
.comfort-heatforce-medium  { color: #d4a000; font-weight: normal; }
.comfort-heatforce-high    { color: #e67e22; font-weight: normal; }
.comfort-heatforce-extreme { color: #d63031; font-weight: normal; }

/* UV-index */
.comfort-uv-medium  { color: #d4a000; font-weight: normal; }
.comfort-uv-high    { color: #e67e22; font-weight: normal; }
.comfort-uv-extreme { color: #d63031; font-weight: normal; }


/* =========================================================
   9. TRENDINDICATOREN
========================================================= */
.trend-up,
.trend-down,
.trend-flat {
    font-size: 12px;
}

.trend-up   { color: var(--trend-up);   }
.trend-down { color: var(--trend-down); }
.trend-flat { color: var(--trend-flat); }


/* =========================================================
   10. STATUS / VERSHEID
========================================================= */
.fresh-ok {
    color: var(--color-ok);
    font-weight: bold;
}

.fresh-warn {
    color: var(--color-warn);
    font-weight: bold;
}


/* =========================================================
   11. HEADER
========================================================= */
header {
    background: var(--header-bg);
    color: white;
    padding: 28px 20px;
}

header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
}


/* =========================================================
   12. NAVIGATIE
========================================================= */
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: var(--nav-bg);
}

nav button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: white;
    color: #111;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

nav button:hover {
    background: var(--button-hover);
}


/* =========================================================
   13. DROPDOWN-MENU
========================================================= */
.menu-dropdown {
    position: relative;
}

.dropdown-btn {
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 6px;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content button {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.dropdown-content button:last-child {
    margin-bottom: 0;
}


/* =========================================================
   14. INFO-PAGINA
========================================================= */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.info-item {
    background: var(--card);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.5;
}


/* =========================================================
   15. EXTREMEN
========================================================= */
.extremen-grid {
    grid-template-columns: repeat(2, 1fr);
}

.extremen-card {
    min-height: 120px;
}

.extremen-temp-card {
    min-height: auto;
}

.extremen-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}

.extremen-col {
    min-width: 0;
}

.extremen-label {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
}

.extremen-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.extremen-value {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}

.extremen-dt {
    font-size: 10px;
    color: #777;
    margin: 0;
}


/* =========================================================
   16. GRAFIEKEN
========================================================= */
.chart-panel {
    background: var(--chart-panel-bg);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/*
 * Vaste hoogte zodat Chart.js geen eigen
 * canvas-hoogte berekent.
 */
.chart-container {
    height: 300px;
    touch-action: pan-y;
}

canvas {
    height: 300px !important;
}


/* =========================================================
   17. ZOOM-RESETKNOP
========================================================= */
.zoom-reset-btn {
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #f4f4f4;
    transition: background 0.15s ease;
}

.zoom-reset-btn:hover {
    background: #e7e7e7;
}


/* =========================================================
   18. RESPONSIVE
========================================================= */
@media (max-width: 768px) {

    .status-row,
    .grid {
        grid-template-columns: 1fr;
    }
}