:root {
--bg: #0b1020;
--muted: #101735;
--card: #121a3a;
--text: #e7ebff;
--accent: #6ea8fe;
--soft: #a0b6ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; display: grid; grid-template-columns: 280px 1fr; background: var(--bg); color: var(--text);
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.sidebar {
position: sticky; top: 0; height: 100vh; padding: 24px; background: var(--muted); border-right: 1px solid #151c3f; display: flex; flex-direction: column;
}
.sidebar h1 { margin: 0 0 16px; font-size: 22px; }
.sidebar form { display: grid; gap: 10px; margin-bottom: 18px; }
.sidebar label { display: grid; gap: 6px; font-size: 13px; }
.sidebar input {
padding: 10px 12px; border-radius: 10px; background: #0e1430; border: 1px solid #202a57; color: var(--text);
}
.sidebar button {
padding: 10px 12px; border-radius: 12px; background: var(--accent); border: 0; color: #07122b; font-weight: 700; cursor: pointer;
}
.presets { display: grid; gap: 8px; padding-bottom: 8px; }
.presets h2 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: var(--soft); }
.presets button { padding: 8px 10px; border-radius: 10px; background: #0f1634; border: 1px solid #202a57; color: var(--text); cursor: pointer; }
footer { position: static; margin-top: auto; color: #9fb3ff; }
footer a { color: #cfe0ff; }


.content { padding: 24px; display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid #182057; border-radius: 16px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.card h2 { margin: 0 0 12px; font-size: 18px; }


.grid { display: flex; flex-direction :column; gap: 12px; }
.kv { background: #0f1634; border: 1px solid #202a57; border-radius: 12px; padding: 12px; }
.kv .k { font-size: 12px; color: #a9b8ff; }
.kv .v { font-size: 20px; font-weight: 700; }


.list { display: flex; flex-directio: column; gap: 12px; }
.item { background: #0f1634; border: 1px solid #202a57; border-radius: 12px; padding: 12px; }
.item .title { font-size: 14px; color: #a9b8ff; }
.item .val { font-size: 16px; font-weight: 700; }


.scroll { display: flex; flex-direction: column; gap: 8px; }
.badge { background: #0f1634; border: 1px solid #202a57; border-radius: 10px; padding: 8px; min-width: 100px; text-align: center; }
.badge .title { font-size: 12px; color: #a9b8ff; }
.badge .val { font-size: 14px; font-weight: 700; }


@media (max-width: 880px) {
body { grid-template-columns: 1fr; }
.sidebar { position: relative; height: auto; auto; display: flex; flex-direction: column; }
footer { margin-top: 16px; }
}

/* --- Mappa inline --- */
.map { width: 100%; max-width: 100%; height: 320px; border-radius: 12px; overflow: hidden; }
.map-info { margin-top: 8px; color: #9fb3ff; font-size: 0.9rem; }
@media (min-width: 900px) {
  .map { height: 420px; }
}
/* lista orizzontale scrollabile per "Prossime ore" */
.scroll-x {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;     /* scroll orizzontale */
  overflow-y: hidden;
  padding-bottom: 6px;  /* spazio per la scrollbar */
  scroll-snap-type: x proximity; /* piacevole “snap” facoltativo */
}

/* ogni “badge” ha larghezza fissa e non va a capo */
.scroll-x .badge {
  flex: 0 0 auto;       /* non comprimere, non andare a capo */
  width: 140px;         /* regola a piacere (120–160) */
  scroll-snap-align: start;
}

/* (opzionale) altezza fissa della card per stabilizzare il layout */
#hourly.card, #hourly {
  /* max-height: 220px; */  /* se vuoi proprio fissare l’altezza della sezione */
}

/* --- Consenti lo scroll verticale della pagina --- */
html, body { height: 100%; }
body { overflow-y: auto; overflow-x: hidden; }

/* Contenitore principale: può estendersi e far scorrere la pagina se serve */
.content {
  min-height: 100svh;                    /* altezza minima, non forziamo il taglio */
  overflow: visible;                      /* niente blocco */
  display: flex; flex-direction: column; gap: 16px;
  min-height: 0;
}

/* Ogni card può avere scroll interno */
.card { display: flex; flex-direction: column; min-height: 0; }
.card > * { min-height: 0; }             /* eredità per i figli scrollabili */

/* --- MAPPA: altezza fissa (adatta se vuoi) --- */
#map-section { flex: 0 0 auto; }
.map { width: 100%; height: 320px; border-radius: 12px; overflow: hidden; }
@media (min-width: 900px) { .map { height: 420px; } }

/* --- SITUAZIONE ATTUALE: lascia in altezza naturale --- */
#current { flex: 0 0 auto; }

/* Evita che la pagina scorra orizzontalmente */
html, body { overflow-x: hidden; }

/* Importante per permettere l'overflow interno: i contenitori non devono forzare larghezze */
.content, .card, #daily, #hourly, #daily-list, #hourly-list { min-width: 0; max-width: 100%; }

/* --- PROSSIMI GIORNI: ORIZZONTALE + scroll interno --- */
#daily { flex: 0 0 auto; max-height: 190px; min-height: 0; }
#daily-list {
  display: flex;
  flex-wrap: nowrap;       /* non andare a capo */
  gap: 8px;
  overflow-x: auto;        /* scroll interno */
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;   /* iOS inerzia */
  touch-action: pan-x;                 /* preferisci pan orizzontale */
  overscroll-behavior-inline: contain; /* niente “rubber band” pagina */
}
#daily-list .item {
  flex: 0 0 160px;         /* larghezza fissa; regola a piacere */
  scroll-snap-align: start;
}

/* --- PROSSIME ORE: lista ORIZZONTALE scrollabile --- */
#hourly { flex: 0 0 auto; max-height: 180px; min-height: 0; }
#hourly-list {
  display: flex;
  flex-wrap: nowrap;       /* non andare a capo */
  gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-inline: contain;
}
#hourly-list .badge { flex: 0 0 140px; scroll-snap-align: start; }

/* scrollbar un filo più carina */
#hourly-list::-webkit-scrollbar,
#daily-list::-webkit-scrollbar { height: 8px; }
#hourly-list::-webkit-scrollbar-thumb,
#daily-list::-webkit-scrollbar-thumb { background: #2b3a7a; border-radius: 8px; }
#hourly-list, #daily-list { scrollbar-width: thin; scrollbar-color: #2b3a7a transparent; }

/* Mobile: una colonna, manteniamo la logica di overflow nei box */
@media (max-width: 880px) {
  .content { min-height: 100svh; }  /* niente altezza fissa, consenti scroll pagina */
  /* su mobile puoi ridurre le altezze per salvare spazio */
  #daily { max-height: 170px; }
  #hourly { max-height: 160px; }
}

.brand {
  margin: 0 auto 24px;
  max-width: 520px;         /* regola la larghezza del logo */
}
.brand svg {
  width: 100%;
  height: auto;
  display: block;
}