/* Stili dell'app sopra Pico.css: pensati prima per il telefono. */

:root {
  --lunghe-rosso: #c62828;
  --lunghe-arancio: #b25d00;
  --lunghe-verde: #2e7d32;
  --lunghe-grigio: #757575;
}

.marchio { text-decoration: none; }
nav form.esci { margin: 0; }
nav form.esci button { width: 100%; margin: 0; padding: .4rem .8rem; }

.riquadro-stretto { max-width: 26rem; margin-inline: auto; }

/* Messaggi */
.messaggi { margin-bottom: 1rem; }
.messaggio {
  padding: .6rem .9rem;
  border-radius: var(--pico-border-radius);
  border-left: 4px solid var(--lunghe-grigio);
  background: var(--pico-card-sectioning-background-color);
  margin-bottom: .5rem;
}
.messaggio.success { border-color: var(--lunghe-verde); }
.messaggio.warning { border-color: var(--lunghe-arancio); }
.messaggio.error { border-color: var(--lunghe-rosso); }
small.errore { color: var(--lunghe-rosso); }

/* Intestazione della settimana */
.navigazione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.navigazione a { white-space: nowrap; }
.scadenza { padding: .6rem .9rem; border-radius: var(--pico-border-radius); }
.scadenza.aperta { background: var(--pico-card-sectioning-background-color); }
.scadenza.chiusa {
  background: color-mix(in srgb, var(--lunghe-arancio) 15%, transparent);
  border-left: 4px solid var(--lunghe-arancio);
}

/* Griglia lun–ven: una colonna sul telefono, cinque sugli schermi larghi */
.griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
  .griglia { grid-template-columns: repeat(5, 1fr); }
}
.giorno {
  margin: 0;
  padding: .9rem 1rem;
  border-left: 4px solid var(--lunghe-verde);
}
.giorno > header {
  margin: -.9rem -1rem .6rem;
  padding: .5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.giorno h2 { font-size: 1.05rem; margin: 0; }
.giorno.scoperto { border-left-color: var(--lunghe-rosso); }
.giorno.segnalato { border-left-color: var(--lunghe-arancio); }
.giorno.libero { border-left-color: var(--lunghe-grigio); opacity: .75; }
.giorno.mio { box-shadow: 0 0 0 2px var(--pico-primary); }
.giorno ul { margin: 0 0 .6rem; padding-left: 0; }
.giorno li { list-style: none; margin: 0 0 .2rem; }
.giorno form { margin: 0; }
.giorno button { width: 100%; margin: 0; padding: .45rem .8rem; }
.persona-mia { font-weight: bold; color: var(--pico-primary); }
.vuoto { color: var(--pico-muted-color); }

.etichetta {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 1rem;
  font-size: .8rem;
  font-weight: bold;
  color: #fff;
  background: var(--lunghe-grigio);
  margin: 0 0 .4rem;
}
.etichetta.rosso { background: var(--lunghe-rosso); }
.etichetta.arancio { background: var(--lunghe-arancio); }
.etichetta.primaria { background: var(--pico-primary-background); }

/* I miei giorni */
.miei-giorni ul { margin: 0; padding-left: 0; list-style: none; }
.miei-giorni li { list-style: none; }

/* Riquadro admin */
.riquadro-admin { border-left: 4px solid var(--pico-secondary); }
.riquadro-admin .azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.riquadro-admin .azioni a { margin: 0; }

/* Durante una richiesta HTMX la griglia si attenua */
#settimana.htmx-request { opacity: .6; transition: opacity .2s; }