/* Beebil – stile della web app */
:root {
  --miele: #c47f00;
  --miele-chiaro: #fff4dc;
  --fondo: #faf7f2;
  --carta: #ffffff;
  --testo: #2f2a24;
  --tenue: #7a7166;
  --bordo: #e8e1d6;
  --su: #2f8f46;
  --giu: #c0392b;
  --raggio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--testo); }
a { color: var(--miele); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0 0 .6rem; line-height: 1.2; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
.tenue { color: var(--tenue); font-weight: normal; }
.piccolo { font-size: .85em; }

.barra { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.2rem; background: var(--carta); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 10; }
.marchio { font-weight: 700; font-size: 1.1rem; color: var(--testo); }
.barra nav { display: flex; gap: 1rem; flex: 1; }
.barra nav a { color: var(--testo); }
.utente { display: flex; gap: .8rem; align-items: center; }
.utente form { margin: 0; }

.pagina { max-width: 1200px; margin: 0 auto; padding: 1.2rem; }
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.briciole { margin: 0 0 .8rem; color: var(--tenue); }

.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.scheda.stretta { width: min(380px, 100%); }
.intestazione { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; margin-bottom: .8rem; }
.intestazione h1, .intestazione h2 { margin: 0; }
.org { margin: 1.4rem 0 .8rem; }
.colonne { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.colonne .scheda { margin-bottom: 0; }
/* Gli elementi di una griglia hanno min-width: auto: senza questo un campo largo
   (data e ora, select con nomi lunghi) allarga la colonna oltre lo schermo (#17) */
.colonne > *, .nota-form > * { min-width: 0; }
.nota-form input, .nota-form select, .modulo.compatto select { max-width: 100%; text-overflow: ellipsis; }

.griglia-arnie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.arnia-card { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--bordo); border-radius: 8px; color: var(--testo); background: var(--fondo); transition: border-color .15s; }
.arnia-card:hover { border-color: var(--miele); text-decoration: none; }
.arnia-card .nome { font-weight: 600; }
.arnia-card .peso { font-size: 1.5rem; font-weight: 700; color: var(--miele); }
.arnia-card .variazioni { display: flex; flex-wrap: wrap; gap: 0 .7rem; font-size: .88em; white-space: nowrap; }
.su { color: var(--su); }
.giu { color: var(--giu); }
.pari { color: var(--tenue); }

.cifre { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.cifre div { display: flex; flex-direction: column; }
.cifre strong { font-size: 1.3rem; }

.basi { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9em; }
.stato-base { display: inline-flex; align-items: center; gap: .35rem; }
.pallino { width: .6rem; height: .6rem; border-radius: 50%; background: var(--su); display: inline-block; }
.offline .pallino { background: var(--giu); }
.ritardo .pallino { background: var(--miele); }
.etichetta { display: inline-block; font-size: .78rem; padding: .05rem .4rem; border-radius: 4px; background: var(--miele-chiaro); color: var(--testo); font-weight: normal; }
.etichetta.attenzione { background: #fde2e1; }

.grafico { width: 100%; height: 360px; }
.grafico.alto { height: 460px; }
/* Mappa (Leaflet): isolata dentro il suo contesto, così i controlli non passano sopra la barra */
.mappa { position: relative; z-index: 0; width: 100%; height: 320px; border-radius: 6px; background: var(--miele-chiaro); }
.mappa.alta { height: min(70vh, 640px); }
.mappa-avviso { position: absolute; inset: 0; display: grid; place-items: center; z-index: 500; color: var(--tenue); pointer-events: none; }
.legenda-mappa { display: flex; gap: .4rem 1rem; flex-wrap: wrap; margin: 0; }
.segnaposto-apiario { display: grid; place-items: center; font-size: 18px; line-height: 1; background: var(--carta); border: 3px solid var(--su); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.segnaposto-apiario.ritardo { border-color: var(--miele); }
.segnaposto-apiario.offline { border-color: var(--giu); }
path.segnaposto-base { fill: var(--su); }
path.segnaposto-base.ritardo { fill: var(--miele); }
path.segnaposto-base.offline { fill: var(--giu); }
.popup-mappa p { margin: .3rem 0; }
.popup-mappa ul { margin: .3rem 0; padding-left: 1.1rem; }
.assenti { margin: 0; padding-left: 1.1rem; }
.periodo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.periodo .personalizzato { display: inline-flex; gap: .3rem; align-items: center; margin-left: .6rem; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; padding: .35rem .75rem; border: 1px solid var(--bordo); background: var(--carta); border-radius: 6px; color: var(--testo); }
button:hover { border-color: var(--miele); }
button.attivo, button.primario { background: var(--miele); border-color: var(--miele); color: #fff; }
button.link { border: 0; background: none; padding: 0; color: var(--miele); }
input, select, textarea { padding: .4rem .5rem; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; }
label { display: block; margin-bottom: .8rem; }
label input { display: block; width: 100%; margin-top: .2rem; }
.scheda.stretta button.primario { width: 100%; padding: .55rem; }

.nota-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.nota-form textarea { grid-column: 1 / -1; }
.nota-form button { grid-column: 1 / -1; justify-self: start; }
.note { list-style: none; padding: 0; margin: 0; }
.note li { padding: .55rem 0; border-top: 1px solid var(--bordo); }
.note form { display: inline; }

.scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .92em; }
.tabella th, .tabella td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella th { color: var(--tenue); font-weight: 600; }

.avviso { padding: .5rem .8rem; border-radius: 6px; background: var(--miele-chiaro); }
.avviso.error { background: #fde2e1; color: var(--giu); }

/* Pulsanti come link, moduli, gestione */
.pulsante { display: inline-block; padding: .35rem .75rem; border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta); color: var(--testo); white-space: nowrap; }
.pulsante:hover { border-color: var(--miele); text-decoration: none; }
.pulsante.primario { background: var(--miele); border-color: var(--miele); color: #fff; }
.pulsante.piccolo { font-size: .8rem; font-weight: normal; padding: .15rem .5rem; vertical-align: middle; margin-left: .4rem; }
button.pericolo { border-color: var(--giu); color: var(--giu); }
button:disabled { opacity: .5; cursor: not-allowed; border-color: var(--bordo); }
.zona-azioni p { flex-basis: 100%; margin: 0; }
details.dismessi summary { cursor: pointer; font-weight: 600; }
details.dismessi ul { margin: .6rem 0 .4rem; padding-left: 1.1rem; }
.arnia-card.aggiungi { justify-content: center; align-items: center; color: var(--miele); border-style: dashed; min-height: 6rem; }
.gruppo { margin: 1.6rem 0 .7rem; }
.riga-basi { margin: 0 0 1rem; }
.riga-basi a { color: var(--testo); }
.scheda.media { max-width: 640px; }
.modulo .campo { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.modulo .campo > label { font-weight: 600; }
.modulo .campo input:not([type=checkbox]), .modulo .campo select, .modulo .campo textarea { width: 100%; }
.modulo .campo.spunta label { font-weight: normal; display: flex; gap: .5rem; align-items: center; }
.modulo .campo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.modulo .campo ul label { font-weight: normal; display: flex; gap: .5rem; align-items: center; margin: 0; }
.modulo .campo.errato input, .modulo .campo.errato select { border-color: var(--giu); }
.modulo small { font-size: .82rem; }
.errore { color: var(--giu); }
.pulsanti { display: flex; gap: 1rem; align-items: center; margin-top: 1.2rem; }
.zona-azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.modulo.compatto { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.modulo.compatto select { width: 100%; }
.modulo.compatto button { align-self: flex-start; }
.credenziali { border-collapse: collapse; margin: 1rem 0; }
.credenziali th { text-align: left; padding: .4rem 1rem .4rem 0; color: var(--tenue); font-weight: normal; }
.credenziali code { font-size: 1.15rem; background: var(--miele-chiaro); padding: .15rem .45rem; border-radius: 4px; }
code.chiave { word-break: break-all; font-size: .8rem; }
.tabella tr.spento td { opacity: .55; }
h3 { margin: 1rem 0 .4rem; }

@media (max-width: 760px) {
  .colonne { grid-template-columns: 1fr; }
  .nota-form { grid-template-columns: 1fr; }
  .barra { flex-wrap: wrap; gap: .6rem 1rem; }
  .periodo .personalizzato { margin-left: 0; flex-wrap: wrap; width: 100%; }
  .periodo .personalizzato input { flex: 1; min-width: 0; }
  .grafico.alto { height: 380px; }
  .mappa.alta { height: 60vh; }
}