/* ===========================================
   WeatherStation v2
   style.css
=========================================== */

:root{

    body[data-theme="dark"]{

    --background:#0f172a;
    --card:#111c33;
    --card2:#0b1224;

    --text:#e5e7eb;
    --text-light:#94a3b8;

    --primary:#3b82f6;

    --border:#1f2a44;

    --shadow:0 8px 25px rgba(0,0,0,.4);

}

    --background:#eef2f7;
    --card:#ffffff;
    --card2:#f8fafc;

    --text:#222;
    --text-light:#666;

    --primary:#2c7be5;

    --border:#d8dee8;

    --shadow:0 8px 25px rgba(0,0,0,.08);

    --radius:16px;

}

/* =========================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:var(--background);

    color:var(--text);

}

/* =========================================== */

.container{

    width:min(1400px,95%);

    margin:40px auto;

}

/* =========================================== */

header{

    text-align:center;

    margin-bottom:35px;

}

header h1{

    font-size:2.8rem;

    margin-bottom:8px;

}

header p{

    color:var(--text-light);

}

/* =========================================== */
/* huidige waarden */
/* =========================================== */

.current{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:35px;

}

.card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    text-align:center;

}

.card h2{

    font-size:1rem;

    margin-bottom:18px;

    color:var(--text-light);

    font-weight:600;

}

.card div{

    font-size:2.3rem;

    font-weight:bold;

}

/* =========================================== */
/* knoppen */
/* =========================================== */

.buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-bottom:40px;

}

.buttons button{

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:white;

    padding:12px 20px;

    cursor:pointer;

    transition:.25s;

    font-size:1rem;

}

.buttons button:hover{

    transform:translateY(-2px);

    opacity:.92;

}

/* actieve knop */

.buttons button.active{

    background:#184c93;

}

/* =========================================== */
/* grafieken */
/* =========================================== */

.chart{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    margin-bottom:30px;

}

.chart h2{

    margin-bottom:20px;

}

.chart-canvas-wrapper{

    position:relative;

    width:100%;

    height:420px;

}

/* =========================================== */
/* statistieken */
/* =========================================== */

.statistics{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    margin-bottom:30px;

}

.statistics h2{

    margin-bottom:20px;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.stat{

    background:var(--card2);

    border-radius:12px;

    padding:20px;

    text-align:center;

}

.stat span{

    display:block;

    color:var(--text-light);

    margin-bottom:10px;

}

.stat strong{

    font-size:1.6rem;

}

/* =========================================== */
/* responsive */
/* =========================================== */

@media (max-width:900px){

.current{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.chart-canvas-wrapper{

height:300px;

}

header h1{

font-size:2rem;

}

}

/* =========================================== */
/* kleine animaties */
/* =========================================== */

.card,
.chart,
.statistics{

transition:.25s;

}

.card:hover,
.chart:hover,
.statistics:hover{

transform:translateY(-3px);

}

.last-update{
    margin-top:10px;
    font-size:0.9rem;
    color:var(--text-light);
}

.theme-toggle{

    margin-top:15px;

    border:none;
    padding:10px 14px;

    border-radius:10px;

    cursor:pointer;

    background:var(--card);
    color:var(--text);

    box-shadow:var(--shadow);

    transition:.2s;

}

.theme-toggle:hover{
    transform:scale(1.05);
}

button{
    font-family:inherit;
}

.chart, .card, .statistics{
    transition: transform .2s ease, box-shadow .2s ease;
}

.chart:hover, .card:hover, .statistics:hover{
    transform: translateY(-2px);
}

.loading{
    text-align:center;
    padding:20px;
    color:var(--text-light);
    font-size:0.9rem;
}

.spinner{
    width:18px;
    height:18px;
    border:3px solid var(--border);
    border-top:3px solid var(--primary);
    border-radius:50%;
    display:inline-block;
    animation:spin 1s linear infinite;
    margin-right:8px;
    vertical-align:middle;
}

@keyframes spin{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}