/* ZakoGo — itinerario.css
   Owner: M-IT (js/itinerario.js). Module-only extras.
   Tokens, shell and every shared component live in styles.css (F1) — do not
   redefine them here.

   What is genuinely module-specific:
     1. la barra dei 7 giorni resa persistente (sticky) durante lo scorrimento
     2. l'intestazione del giorno
     3. la card "Prossima attività" su legno
     4. la timeline (binario verticale + pallini) e la card attività
     5. gli stati del trascinamento per riordinare
     6. due dettagli della sheet aggiungi/modifica
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra dei giorni — resta appesa sotto la topbar
   --------------------------------------------------------------------------
   #views ha 14px di padding superiore: con top:-14px la barra si aggancia a
   filo del bordo dell'area di scorrimento invece che 14px più in basso.
   -------------------------------------------------------------------------- */

.it-days {
  position: sticky;
  top: -14px;
  z-index: 6;
  padding-top: 16px;
  padding-bottom: 8px;
  background: var(--snow);
}

/* --------------------------------------------------------------------------
   2. Intestazione del giorno
   -------------------------------------------------------------------------- */

.it-dayhead {
  margin: 12px 2px 14px;
}
.it-daytitle {
  font-size: 22px;
  line-height: 1.15;
  color: var(--pine-900);
}
.it-daymeta {
  margin-top: 3px;
}
/* il chip meteo (aimeteo.js) arriva subito dopo i dati del giorno: gli serve
   solo un po' d'aria, resta dov'era e sopra la striscia dei pasti */
.it-dayhead > .chip { margin-top: 9px; }

/* --------------------------------------------------------------------------
   2bis. Striscia dei pasti (Colazione / Pranzo / Cena)
   --------------------------------------------------------------------------
   Una riga sola e quieta: non va mai a capo, sugli schermi stretti scorre.
   Il padding verticale lascia posto all'anello di fuoco (offset 2px).
   -------------------------------------------------------------------------- */

.it-pasti {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.it-pasti::-webkit-scrollbar { display: none; }

.it-pasto { flex: 0 0 auto; }
.it-pasto .icn { color: var(--sunset-ink); }

/* --------------------------------------------------------------------------
   3. Hero "Prossima attività" (superficie legno)
   -------------------------------------------------------------------------- */

.it-hero {
  padding: 15px 16px 16px;
  margin-bottom: 18px;
}
.it-hero-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--wood-ink);
}
.it-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.it-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}
.it-hero-open { margin-top: 0; }
/* sopra l'area cliccabile del titolo: spunta e chip restano raggiungibili */
.it-hero .zcheck,
.it-hero .act-chips { position: relative; z-index: 2; }
.it-hero-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}
.it-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 4px;
  min-width: 0;
}
.it-hero-meta:empty { display: none; }
.it-hero-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.it-hero-place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--wood-ink);
}
.it-hero-place > span { min-width: 0; overflow-wrap: anywhere; }
.it-hero-place .icn { color: var(--wood-ink); }

/* le chip quiete su legno hanno bisogno di un fondo pieno per staccare */
.it-hero .chip-quiet {
  background: var(--card);
  border-color: var(--wood-500);
  color: var(--pine-900);
}
.it-hero .zcheck { border-color: var(--wood-500); }

/* --------------------------------------------------------------------------
   4. Timeline: binario verticale + pallini di categoria
   -------------------------------------------------------------------------- */

.tl {
  position: relative;
  padding-left: 26px;
}
.tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: var(--pine-100);
}

/* con una sola attività il binario sarebbe un trattino senza senso */
.tl:has(.tl-item:only-child)::before { display: none; }

.tl-item { position: relative; }
.tl-item + .tl-item { margin-top: 10px; }

.tl-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 21px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--c, var(--pine-500));
}
.tl-item.is-done::before {
  background: var(--sun);
  border-color: var(--sun-700);
}

/* --- card attività ------------------------------------------------------- */

.act-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 13px 2px;
}
.act-card > .grip {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 1px;
}
/* la spunta resta all'altezza dell'orario anche quando la card è alta */
.act-card > .zcheck {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 1px 0 0 2px;
}

.act-body {
  flex: 1 1 auto;
  min-width: 0;
}

.act-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
}
.act-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.act-time.is-empty { color: var(--ink-faint); letter-spacing: .2px; }

/* Il titolo è il bersaglio "apri": resta statico, così la sua area cliccabile
   (::after) si ancora alla card e la copre tutta, mentre grip, chip e spunta
   restano sopra (z-index 2). Un solo tab-stop per aprire l'attività. */
.act-open {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 0;
  text-align: left;
  background: none;
  border-radius: var(--radius-sm);
}
.act-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.act-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}

.act-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.act-place > span { min-width: 0; overflow-wrap: anywhere; }
.act-place .icn { color: var(--c, var(--pine-500)); }

.act-note {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.act-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 9px;
}
.act-bell { cursor: default; }

/* --- stato fatto: la card si comprime --------------------------------- */

.act-card.is-done {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--snow);
  box-shadow: 0 1px 4px rgba(18, 63, 46, .07);
}
.act-card.is-done .act-title {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--pine-500);
  text-decoration-thickness: 2px;
}
.act-card.is-done .act-time { color: var(--ink-faint); }
.act-card.is-done .badge { opacity: .8; }

/* --------------------------------------------------------------------------
   5. Trascinamento per riordinare
   -------------------------------------------------------------------------- */

/* segnaposto: nessuno spostamento di layout, solo il vuoto tratteggiato */
.tl-item.is-drag-src {
  border-radius: var(--radius-lg);
  background: var(--pine-050);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.tl-item.is-drag-src .act-card { visibility: hidden; }
.tl-item.is-drag-src::before { opacity: .35; }

/* il clone che segue il dito (posizione e transform arrivano da JS) */
.tl-item.drag-ghost { list-style: none; }
.tl-item.drag-ghost::before { display: none; }
.tl-item.drag-ghost .act-card { background: var(--card); }

/* --------------------------------------------------------------------------
   5bis. Scheda attività (sola lettura)
   --------------------------------------------------------------------------
   Si legge dall'alto: orario grande, categoria, luogo, nota per intero.
   Nessun campo: la modifica sta nel piede della sheet.
   -------------------------------------------------------------------------- */

.itv-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.itv-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.itv-time.is-empty {
  font-size: 15.5px;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.itv-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
}
.itv-place-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 150px;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--pine-900);
}
.itv-place-name > span { min-width: 0; overflow-wrap: anywhere; }
.itv-place-name .icn { flex: 0 0 auto; color: var(--c, var(--pine-500)); }

/* la nota si legge com'è stata scritta: a capo e spaziature restano */
.itv-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--snow);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pine-900);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.itv-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.itv-line .icn { flex: 0 0 auto; color: var(--pine-500); }
.itv-done { color: var(--sun-ink); }
.itv-done .icn { color: var(--sun-ink); }

/* --------------------------------------------------------------------------
   6. Sheet aggiungi / modifica attività
   -------------------------------------------------------------------------- */

.it-time-field input[type="time"] { max-width: 190px; }

.it-form .req { color: var(--berry-ink); }

/* Posizione facoltativa: pannello richiudibile, aperto se le coordinate ci
   sono già. Stessa grammatica delle altre superfici della sheet. */
.it-pos {
  margin-top: 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
}
.it-pos > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}
.it-pos > summary::-webkit-details-marker { display: none; }
.it-pos > summary::marker { content: ""; }
.it-pos > summary:focus-visible { outline: 3px solid var(--focus-color); outline-offset: -2px; }
.it-pos > summary:active { background: var(--pine-050); }
.it-pos[open] > summary {
  border-bottom: 1.5px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.it-pos-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pine-900);
}
.it-pos > summary > .icn:first-child { color: var(--pine-700); flex: 0 0 auto; }
.it-pos > summary > .icn:last-child {
  color: var(--ink-faint);
  flex: 0 0 auto;
  transition: transform 160ms var(--ease-out);
}
.it-pos[open] > summary > .icn:last-child { transform: rotate(180deg); color: var(--pine-700); }

/* il pannello si comporta come un campo: stesso stacco da quello che segue */
.it-pos + .field, .it-pos + .check-row { margin-top: 15px; }

.it-pos-body { padding: 13px 12px 14px; }

.it-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* nella griglia i due campi stanno affiancati: niente stacco verticale */
.it-pos-grid .field + .field { margin-top: 0; }
.it-pos-grid input { font-size: 17px; letter-spacing: .2px; }

.it-fatto { margin-top: 15px; }

.it-delete {
  width: 100%;
  margin-top: 18px;
  color: var(--berry-ink);
}
.it-delete .icn { color: currentColor; }
.it-delete:active { background: var(--berry-tint); }

@media (hover: hover) and (pointer: fine) {
  .it-delete:hover { background: var(--berry-tint); }
  .it-pasto:hover { background: var(--sunset-tint); border-color: var(--sunset); color: var(--pine-900); }
  .it-hero .chip-quiet:hover { background: var(--wood-100); border-color: var(--wood-500); }
  .it-pos > summary:hover { background: var(--pine-050); }
}

@media (prefers-reduced-motion: reduce) {
  .it-pos > summary > .icn:last-child { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Schermi stretti
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  .it-daytitle { font-size: 20px; }
  .it-hero-title { font-size: 21px; }
  .tl { padding-left: 22px; }
  .tl-item::before { left: -21px; }
  .act-card { gap: 6px; }
  .it-pos-grid { gap: 8px; }
  .it-pos-grid input { font-size: 16px; padding-left: 11px; padding-right: 11px; }
}