/* ===========================================================
   FIRE INTELLIGENCE EUROPE 3.0
   DASHBOARD.CSS
=========================================================== */

/* ===========================
   Rechter dashboard
=========================== */

.dashboard{

    width:380px;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:20px;

    overflow-y:auto;

    background:#0f1828;

    border-left:1px solid rgba(255,255,255,.08);

}

/* ===========================
   Dashboard kaarten
=========================== */

.dashboard-card{

    background:#162235;

    border-radius:16px;

    padding:20px;

    border:1px solid rgba(255,255,255,.08);

}

/* ===========================
   Header
=========================== */

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.card-header h2{

    font-size:18px;

    font-weight:700;

}

/* ===========================
   Info grid
=========================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}

/* ===========================
   Info blok
=========================== */

.info-item{

    background:#22324b;

    border-radius:12px;

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:8px;

    transition:.25s;

}

.info-item:hover{

    background:#2b4060;

}

.info-item .label{

    font-size:13px;

    color:#9fb0c5;

}

.info-item strong{

    font-size:18px;

    color:white;

}

/* ===========================
   Weather
=========================== */

.weather-grid{

    display:grid;

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

    gap:14px;

}

.weather-item{

    background:#22324b;

    border-radius:12px;

    padding:16px;

    text-align:center;

}

.weather-item span{

    display:block;

    color:#9fb0c5;

    font-size:13px;

    margin-bottom:8px;

}

.weather-item strong{

    font-size:24px;

}

/* ===========================
   AI Score
=========================== */

.ai-score{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.score-circle{

    width:140px;

    height:140px;

    border-radius:50%;

    border:8px solid #ff5d2a;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:700;

    color:white;

    background:#22324b;

}

.score-text{

    text-align:center;

}

.score-text h3{

    margin-bottom:8px;

    font-size:22px;

    color:#ffb347;

}

.score-text p{

    color:#b9c6d8;

    font-size:14px;

    line-height:1.5;

}

/* ===========================
   Forecast
=========================== */

.forecast-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.forecast-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#22324b;

    padding:14px;

    border-radius:12px;

}

.forecast-item span{

    color:#b8c4d8;

}

.forecast-item strong{

    font-size:18px;

}

/* ===========================
   Operations
=========================== */

.operations-grid{

    display:grid;

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

    gap:14px;

}

.operation-item{

    background:#22324b;

    border-radius:12px;

    padding:16px;

}

.operation-item span{

    display:block;

    font-size:13px;

    color:#9fb0c5;

    margin-bottom:8px;

}

.operation-item strong{

    font-size:22px;

}

/* ===========================
   Incidenten
=========================== */

.incident-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.incident-placeholder{

    background:#22324b;

    border-radius:12px;

    padding:20px;

    color:#9fb0c5;

    text-align:center;

}

/* ===========================
   Europa tabel
=========================== */

.overview-table{

    width:100%;

}

.overview-table td{

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.overview-table td:last-child{

    text-align:right;

    font-weight:700;

}

/* ===========================
   Scrollbar
=========================== */

.dashboard::-webkit-scrollbar{

    width:8px;

}

.dashboard::-webkit-scrollbar-thumb{

    background:#30445f;

    border-radius:20px;

}

.dashboard::-webkit-scrollbar-track{

    background:transparent;

}