/* forecast.css */

body{
font-family:'DM Sans',sans-serif;
background:#0c0c0c;
color:#eee;
margin:0;
padding:0;
}

/* HEADER IMAGE */
.header-image{
width:100%;
display:block;
}

/* MAIN TITLE BAR */
.forecast-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0 18px 0;
border-bottom:1px solid #ddd;
margin-bottom:18px;
}

.header-left{
display:flex;
gap:12px;
align-items:center;
}

.badge-lab{
background:#ef4444;
color:#fff;
padding:7px 12px;
font-weight:700;
border-radius:4px;
font-size:14px;
}

.title-main{
font-family:'Bebas Neue',sans-serif;
font-size:30px;
letter-spacing:.8px;
line-height:1;
}

.subtitle{
font-size:12px;
color:#666;
margin-top:3px;
}

.header-right{
display:flex;
align-items:center;
gap:14px;
}

.live-box{
background:#111;
color:#22c55e;
padding:7px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
}

.clock{
font-size:13px;
font-weight:600;
color:#444;
}

.pulse{
display:inline-block;
width:8px;
height:8px;
background:#22c55e;
border-radius:50%;
margin-right:6px;
animation:pulse 1s infinite;
}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:.3;}
100%{opacity:1;}
}

/* LAYOUT */
.dashboard{
display:grid;
grid-template-columns:35% 65%;
gap:20px;
margin-bottom:30px;
}

/* MAP */
#map{
height:720px;
border-radius:12px;
overflow:hidden;
background:#0b1e3a;
box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.legend{
background:#111;
color:#fff;
padding:12px;
margin-top:10px;
display:flex;
flex-wrap:wrap;
gap:12px;
font-size:12px;
border-radius:10px;
}

.c{
width:12px;
height:12px;
display:inline-block;
border-radius:3px;
margin-right:5px;
}

.safe{background:#22c55e;}
.caution{background:#eab308;}
.ecaution{background:#f97316;}
.danger{background:#dc2626;}
.edanger{background:#7f1d1d;}

/* PANEL */
.panel{
background:#111;
padding:18px;
border-radius:12px;
box-shadow:0 12px 28px rgba(0,0,0,.25);
min-height:720px;
}

/* TABS */
.tabs{
display:flex;
gap:8px;
margin-bottom:14px;
}

.tab{
padding:8px 14px;
background:#1f2937;
color:#fff;
border-radius:6px;
cursor:pointer;
font-weight:600;
font-size:13px;
transition:.25s;
}

.tab:hover{
background:#334155;
}

.tab.active{
background:#3b82f6;
}

/* DEFAULT */
.default-panel{
padding:60px 20px;
text-align:center;
background:#181818;
border-radius:10px;
border:1px solid #222;
}

.default-icon{
font-size:42px;
margin-bottom:14px;
}

.default-title{
font-size:22px;
font-weight:700;
margin-bottom:8px;
}

.default-text{
font-size:14px;
color:#aaa;
line-height:1.6;
max-width:340px;
margin:auto;
}

/* CHARTS */
.charts{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.chart-box{
background:#181818;
padding:12px;
border-radius:12px;
border:1px solid #222;
}

.chart-box h3{
font-size:15px;
margin:0 0 10px 0;
font-weight:700;
}

canvas{
width:100% !important;
height:220px !important;
}

/* CARD */
.card-box{
margin-top:15px;
background:#181818;
padding:18px;
border-radius:12px;
border:1px solid #222;
}

.card-box h2{
margin:0 0 10px 0;
font-size:26px;
font-family:'Bebas Neue',sans-serif;
letter-spacing:.5px;
}

.risk-badge{
padding:7px 14px;
border-radius:8px;
font-weight:700;
display:inline-block;
margin-bottom:12px;
font-size:13px;
}

.risk-safe{
background:#22c55e22;
color:#22c55e;
}

.risk-caution{
background:#eab30822;
color:#eab308;
}

.risk-extreme-caution{
background:#f9731622;
color:#f97316;
}

.risk-danger{
background:#dc262622;
color:#dc2626;
}

.risk-extreme-danger{
background:#7f1d1d55;
color:#ffb4b4;
}

/* BAR */
.bar{
height:8px;
background:#333;
border-radius:6px;
margin:12px 0;
overflow:hidden;
}

#fillBar{
height:100%;
width:0%;
border-radius:6px;
transition:.7s;
background:linear-gradient(90deg,#f97316,#ef4444);
}

#deltaText{
font-size:13px;
color:#ccc;
margin-bottom:14px;
}

/* INFO */
.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:10px;
}

.box{
background:#222;
padding:12px;
border-radius:10px;
font-size:13px;
line-height:1.55;
}

.red{
background:#4b0000;
}

/* UTIL */
.hidden{
display:none !important;
}

/* MOBILE */
@media(max-width:1100px){

.dashboard{
grid-template-columns:1fr;
}

#map{
height:440px;
}

.panel{
min-height:auto;
}

.charts{
grid-template-columns:1fr;
}

.forecast-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

}

/* =========================
TABLET
========================= */
@media (max-width: 1100px){

.dashboard{
display:block;
}

.map-side,
.panel{
width:100%;
}

#map{
height:500px;
margin-bottom:15px;
}

.charts{
grid-template-columns:1fr;
}

.title-main{
font-size:24px;
}

}

/* =========================
PHONE
========================= */
@media (max-width: 768px){

.container{
padding-left:10px;
padding-right:10px;
}

.forecast-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.header-right{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
}

.title-main{
font-size:20px;
line-height:1.1;
}

.subtitle{
font-size:12px;
}

#map{
height:360px;
border-radius:8px;
}

.legend{
font-size:11px;
gap:8px;
padding:10px;
}

.tabs{
flex-wrap:wrap;
gap:6px;
}

.tab{
flex:1;
text-align:center;
padding:10px 8px;
font-size:14px;
}

.panel{
padding:0;
}

.charts{
grid-template-columns:1fr;
gap:12px;
}

.chart-box,
.card-box{
padding:12px;
}

canvas{
height:240px !important;
}

.info-grid{
grid-template-columns:1fr;
}

.default-title{
font-size:20px;
}

}

/* =========================
SMALL PHONE
========================= */
@media (max-width: 480px){

.title-main{
font-size:18px;
}

.badge-lab{
padding:5px 8px;
font-size:12px;
}

#map{
height:300px;
}

.chart-box h3{
font-size:14px;
}

.card-box h2{
font-size:22px;
}

.risk-badge{
font-size:13px;
padding:6px 10px;
}

body{
font-size:14px;
}

}