/* Backoffice: densità alta, decorazione bassa. Chi lo usa ci passa la
   giornata e deve vedere molte righe insieme, non respirare. */
:root {
  --ink: #14171f; --muted: #626a7a; --line: #e3e6ec; --bg: #fff;
  --accent: #1f5eff; --danger: #c0392b; --ok: #1a7f4b; --warn: #b26a00;
  --soft: #f6f7f9;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #edf0f6; --muted: #98a1b3; --line: #2a2f3c; --bg: #12141a; --soft: #191c24; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body.centrato { display: grid; place-items: center; min-height: 100vh; }
main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

header.bo {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--line);
}
header.bo .brand { font-weight: 700; text-decoration: none; color: var(--ink); }
header.bo nav { display: flex; gap: 1rem; margin-right: auto; }
header.bo nav a { color: var(--muted); text-decoration: none; font-size: .9375rem; }
header.bo nav a:hover { color: var(--accent); }
header.bo nav em { font-style: normal; background: var(--warn); color: #fff;
                   border-radius: 1rem; padding: 0 .4rem; font-size: .75rem; }

h1 { font-size: 1.5rem; margin: 1.25rem 0 .5rem; }
h2 { font-size: 1.0625rem; margin: 2rem 0 .5rem; }
a { color: var(--accent); }
.meta { color: var(--muted); font-size: .8125rem; }
.titolo { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.empty { color: var(--muted); }
.urgente { color: var(--danger); }
.chiuso { opacity: .55; }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); border-bottom: 1px solid var(--line); padding: .5rem .5rem; }
td { padding: .625rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.stato-in_progress { background: color-mix(in srgb, var(--ok) 8%, transparent); }
tr.stato-pending_approval { background: color-mix(in srgb, var(--warn) 8%, transparent); }

ul { list-style: none; padding: 0; margin: 0; }
.lista li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.avvisi { margin: 1rem 0; }
.avvisi li { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .5rem;
             margin-bottom: .5rem; background: var(--soft); }
.avvisi b { font-size: 1.125rem; }
.avvisi span { display: block; color: var(--muted); font-size: .8125rem; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .75rem;
         border: 1px solid var(--line); }
.badge.confirmed, .badge.completed { border-color: var(--ok); color: var(--ok); }
.badge.pending_approval, .badge.minor, .badge.hold { border-color: var(--warn); color: var(--warn); }
.badge.cancelled, .badge.no_show, .badge.major, .badge.critical { border-color: var(--danger); color: var(--danger); }

.detail { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem 1rem; margin-top: 1rem; }
.detail dt { color: var(--muted); }
.quality { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .875rem 1rem; margin: 1rem 0;
           border: 1px solid var(--line); border-radius: .625rem; }
.quality li b { display: block; font-size: 1.25rem; }
.quality li span { color: var(--muted); font-size: .75rem; }

form.inline { display: inline; }
form.riga { display: flex; gap: .5rem; margin-top: .5rem; }
form.riga input[type=text] { flex: 1; }
.form, .card { display: grid; gap: .75rem; max-width: 30rem; }
.card { padding: 1.5rem; border: 1px solid var(--line); border-radius: .75rem; }
.card.evidenza { max-width: none; border-color: var(--accent); }
label { display: grid; gap: .25rem; font-size: .8125rem; color: var(--muted); }
input, select { padding: .5rem .625rem; border: 1px solid var(--line); border-radius: .375rem;
                background: var(--bg); color: var(--ink); font: inherit; }
button { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: .375rem;
         background: var(--bg); color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.pericolo { color: var(--danger); border-color: var(--danger); }
button.link { border: 0; background: none; color: var(--muted); padding: 0; }
/* Un collegamento che nella riga delle azioni deve pesare come un pulsante:
   «chi viene» è una pagina, non un'operazione, e la differenza si vede
   dall'assenza di conferma — non dall'aspetto. */
a.bottone { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: .375rem;
            font-size: .8125rem; text-decoration: none; color: var(--ink); }
a.bottone:hover { border-color: var(--accent); }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.azioni-blocco { margin-top: 1.5rem; }
.errore { color: var(--danger); font-size: .875rem; }
.chiave { display: block; padding: .75rem; background: var(--soft); border-radius: .375rem;
          font-family: ui-monospace, monospace; font-size: .8125rem; word-break: break-all; }

.card.larga { max-width: none; margin-bottom: 1.5rem; }
.riga-check { display: flex; align-items: center; gap: .5rem; grid-template-columns: none;
              color: var(--ink); font-size: .9375rem; }
.riga-check input { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem 1rem; }
legend { color: var(--muted); font-size: .8125rem; padding: 0 .35rem; }

.form.larga { max-width: 42rem; }
.form fieldset { display: grid; gap: .75rem; margin: .5rem 0; }
.riga-ruolo { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.riga-ruolo label:first-of-type { min-width: 8rem; }
.riga-ruolo label:last-of-type { flex: 1; min-width: 12rem; }
textarea { font: inherit; font-size: .9375rem; padding: .5rem .625rem; border: 1px solid var(--line);
           border-radius: .375rem; background: var(--bg); color: var(--ink); resize: vertical; }

.crumbs { font-size: .8125rem; color: var(--muted); margin-bottom: .5rem; }
.crumbs a { color: var(--muted); }
.scorciatoie { margin-top: 1.5rem; }
td input[type=time] { width: 8rem; }

/* I dati sensibili si vedono, ma si vede anche che lo sono. */
td.sensibile { color: var(--muted); }

/* --------------------------------------------------- la giornata per risorsa
   Una colonna per risorsa, il tempo in verticale. Le posizioni sono
   percentuali calcolate dal server: la pagina resta leggibile senza
   JavaScript e si stampa uguale a com'è a schermo — che è il modo in cui
   l'elenco della giornata finisce davvero in mano a chi lavora. */
.barra-giorno { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
                margin: 1rem 0 1.25rem; }
.barra-giorno input, .barra-giorno select {
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: .375rem;
  background: transparent; color: var(--ink); font: inherit; }

.giornata { display: grid; grid-template-columns: 3.5rem repeat(var(--colonne), minmax(9rem, 1fr));
            gap: .375rem; overflow-x: auto; }
.giornata .ore { position: relative; height: 32rem; margin-top: 3.25rem; }
.giornata .ora { position: absolute; right: .375rem; transform: translateY(-.55em);
                 font-size: .6875rem; color: var(--muted); }

.giornata .colonna header { height: 3.25rem; display: flex; flex-direction: column;
                            gap: .05rem; overflow: hidden; }
.giornata .colonna header strong { font-size: .8125rem; }
.giornata .colonna header .meta { font-size: .6875rem; }
.giornata .colonna header .libera { color: var(--accent); }

.giornata .pista { position: relative; height: 32rem;
                   border: 1px solid var(--line); border-radius: .375rem;
                   background: color-mix(in srgb, var(--ink) 2%, transparent); }
.giornata .riga { position: absolute; left: 0; right: 0; height: 1px;
                  background: var(--line); }

.giornata .blocco { position: absolute; left: 2px; right: 2px; overflow: hidden;
                    border-radius: .3rem; padding: .15rem .35rem; font-size: .6875rem;
                    text-decoration: none; display: block; min-height: .9rem;
                    background: color-mix(in srgb, var(--accent) 16%, var(--bg));
                    border-left: 3px solid var(--accent); color: var(--ink); }
.giornata .blocco:hover { background: color-mix(in srgb, var(--accent) 28%, var(--bg)); }
.giornata .blocco.sessione { border-left-color: var(--muted);
                             background: color-mix(in srgb, var(--muted) 16%, var(--bg)); }
.giornata .blocco .quando { display: block; color: var(--muted); }
.giornata .blocco .chi { display: block; white-space: nowrap; text-overflow: ellipsis;
                         overflow: hidden; }

/* Gli sfondi non sono nostri impegni: spiegano perché lì non si vende. */
.giornata .sfondo { position: absolute; left: 0; right: 0; }
.giornata .sfondo.chiuso { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.giornata .sfondo.esterno {
  background: repeating-linear-gradient(45deg,
    transparent, transparent 4px,
    color-mix(in srgb, var(--ink) 10%, transparent) 4px,
    color-mix(in srgb, var(--ink) 10%, transparent) 8px); }

/* Gli orari alternativi quando si sposta una prenotazione: pulsanti di un
   form, non collegamenti, perché ognuno porta con sé il motivo scritto sopra
   e il riferimento dell'offerta. */
.slots-sposta { display: grid; gap: .5rem; margin: 1rem 0;
                grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.slots-sposta button { text-align: left; display: flex; flex-direction: column; gap: .1rem; }
.slots-sposta .quando { font-size: .8125rem; }
.slots-sposta .meta { font-size: .6875rem; }

.inline-label { display: inline-flex; align-items: center; gap: .35rem;
                font-size: .8125rem; color: var(--muted); }
.inline-label input { padding: .4rem .5rem; border: 1px solid var(--line);
                      border-radius: .375rem; background: transparent;
                      color: var(--ink); font: inherit; }

/* La console dello sportello: due numeri grandi e due pulsanti. Chi ci sta
   davanti guarda il cliente, non lo schermo. */
.chiamata { display: flex; gap: 3rem; margin-bottom: 1rem; }
.numero-grande { font-size: 3rem; font-weight: 700; line-height: 1.1;
                 font-variant-numeric: tabular-nums; }

/* Il trascinamento nella giornata. Gli stili esistono solo quando il
   JavaScript è attivo: senza, i blocchi restano collegamenti e non succede
   niente di strano. */
.giornata .blocco[draggable="true"] { cursor: grab; }
.giornata .blocco.in-volo { opacity: .4; }
.giornata .blocco.in-corso { opacity: .6; cursor: progress; }
.giornata .pista.bersaglio { outline: 2px dashed var(--accent); outline-offset: -2px; }