/* ===================================
   WeerPuk Dashboard Styling
   =================================== */


.weerpuk-dashboard {

    max-width: 420px;

    margin: 30px auto;

    padding: 25px;

    border-radius: 25px;

    background: linear-gradient(
        145deg,
        #ffffff,
        #eef6ff
    );

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);

    font-family:
    Arial, sans-serif;

}



/* Header */

.weerpuk-header {

    text-align: center;

    margin-bottom: 20px;

}


.weerpuk-header h2 {

    margin: 0;

    font-size: 32px;

}


.weerpuk-header p {

    margin-top: 5px;

    color: #777;

}





/* Temperatuur kaart */

.weerpuk-temperatuur {

    background: white;

    border-radius: 18px;

    padding: 20px;

    margin-bottom: 20px;

    text-align: center;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.08);

}



.weerpuk-temperatuur span {

    display: block;

    font-size: 15px;

    color: #666;

}



.weerpuk-temperatuur strong {

    display: block;

    margin-top: 10px;

    font-size: 42px;

    color: #1976d2;

}





/* Kleine meetwaarden */

.weerpuk-grid {

    display: grid;

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

    gap: 12px;

}




.weerpuk-item {

    background: white;

    border-radius: 18px;

    padding: 15px 8px;

    text-align: center;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.06);

}



.weerpuk-item span {

    display: block;

    font-size: 14px;

    color: #666;

}



.weerpuk-item strong {

    display: block;

    margin-top: 8px;

    font-size: 20px;

    color: #222;

}





/* Status */

.weerpuk-status {

    margin-top: 25px;

    padding-top: 15px;

    border-top: 1px solid #ddd;

    text-align: center;

    color: #555;

    font-size: 14px;

}





/* Mobiele weergave */

@media (max-width:480px) {


    .weerpuk-dashboard {

        margin: 15px;

        padding: 20px;

    }



    .weerpuk-temperatuur strong {

        font-size: 36px;

    }



    .weerpuk-grid {

        grid-template-columns:
        1fr;

    }


}