:root{
  --bg: #F1EFE8;
  --surface: #FFFFFF;
  --surface-alt: #F7F5EF;
  --ink: #20261F;
  --ink-soft: #616F5C;
  --ink-faint: #93A08C;
  --accent: #B5652D;
  --accent-strong: #94501F;
  --accent-wash: #F3E4D5;
  --accent-2: #3E7C7A;
  --accent-2-wash: #E1EEED;
  --line: #E3DDCF;
  --line-soft: #EDE8DC;
  --danger: #B23B2E;
  --danger-wash: #FBEAE7;
  --ok: #3E7C4A;
  --ok-wash: #E8F1E9;
  --warn: #A5721F;
  --warn-wash: #F5EBD8;
  --sidebar-bg: #1A2018;
  --sidebar-bg-raised: #232B20;
  --sidebar-ink: #C6CDC0;
  --sidebar-ink-soft: #838F7D;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(32,38,31,.05), 0 1px 1px rgba(32,38,31,.04);
  --shadow-md: 0 4px 12px rgba(32,38,31,.08), 0 1px 3px rgba(32,38,31,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-2); text-decoration: none; }
a:hover{ text-decoration: underline; }
::selection{ background: var(--accent-wash); color: var(--accent-strong); }

.shell{ display:flex; min-height:100vh; }

/* ---------------------------------------------------------------- Sidebar */
.sidebar{
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg-raised), var(--sidebar-bg) 140px);
  color: var(--sidebar-ink);
  display:flex; flex-direction:column;
  padding: 1.3rem 0 1rem;
  position: sticky; top:0; height:100vh; overflow-y:auto;
  transition: width .15s ease, padding .15s ease;
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:1.05rem; letter-spacing:-.01em;
  color:#F4F2EA;
  padding: 0 1.3rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: 1rem;
}
.sidebar-toggle{
  margin-left:auto; background:none; border:none; color: var(--sidebar-ink-soft);
  font-size:1.1rem; line-height:1; cursor:pointer; padding:.2rem .4rem; border-radius: var(--radius-sm);
  transition: background-color .12s ease, color .12s ease;
}
.sidebar-toggle:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar-reopen{
  display:none; position:fixed; top:1rem; left:0; z-index:20;
  background: var(--sidebar-bg); color: var(--sidebar-ink-soft);
  border:1px solid rgba(255,255,255,.12); border-left:none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width:1.4rem; height:2.2rem; align-items:center; justify-content:center;
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar-reopen:hover{ background: var(--sidebar-bg-raised); color:#fff; }
html.sidebar-collassata .sidebar{ width:0; padding:0; overflow:hidden; border:none; }
html.sidebar-collassata .sidebar-reopen{ display:flex; }
.brand-mark{
  width:.6rem; height:.6rem; border-radius:2px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink:0;
}
.sidebar nav{ display:flex; flex-direction:column; gap:.15rem; flex:1; padding: 0 .6rem; }
.nav-group{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color: var(--sidebar-ink);
  padding: 1.1rem .65rem .4rem;
  margin-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.nav-group:first-child{ border-top:none; margin-top:0; padding-top:.2rem; }
.sidebar nav a, .sidebar nav span.nav-todo{
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-ink);
  font-size: .89rem;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar nav a:hover{ background: rgba(255,255,255,.07); text-decoration:none; color:#fff; }
.sidebar nav a.active{
  background: var(--accent);
  color:#fff; font-weight:600;
  box-shadow: 0 2px 8px rgba(181,101,45,.35);
}
.sidebar nav span.nav-todo{ color: rgba(255,255,255,.28); cursor: default; }
.nav-settings{ margin-top: 1rem; }
.sidebar-footer{
  padding: 1rem 1.3rem 0;
  margin-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:space-between;
  font-size: .85rem;
}
.who{ color: var(--sidebar-ink); display:flex; align-items:center; gap:.45rem; }
.who-dot{ width:.5rem; height:.5rem; border-radius:50%; background: var(--ok); box-shadow: 0 0 0 2px rgba(62,124,74,.25); flex-shrink:0; }
.link-btn{
  background:none; border:none; color: var(--sidebar-ink-soft); cursor:pointer;
  font: inherit; padding:0; text-decoration: underline;
  transition: color .12s ease;
}
.link-btn:hover{ color: #fff; }

/* ----------------------------------------------------------------- Layout */
.content{ flex:1; padding: 2rem 2.4rem 4rem; max-width: 1240px; min-width:0; }

h1{ font-size: 1.5rem; margin: 0 0 1.3rem; letter-spacing:-.01em; text-wrap: balance; }
h2{ font-size: 1.05rem; margin: 1.7rem 0 .75rem; letter-spacing:-.005em; }

.flash{
  background: var(--ok-wash); color: var(--ok); border: 1px solid rgba(62,124,74,.25);
  padding: .65rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.3rem; font-size: .9rem;
  box-shadow: var(--shadow-sm);
}
/* Riquadro degli errori di validazione: stessa forma del flash di successo, colori
   di errore, con l'elenco dei campi da correggere. */
.flash.errore{
  background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(178,59,46,.25);
}
.flash.errore ul{ margin: .4rem 0 0; padding-left: 1.1rem; }
.flash.errore li{ margin-top: .15rem; }

.error{
  background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(178,59,46,.25);
  padding: .65rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.3rem; font-size: .9rem;
  box-shadow: var(--shadow-sm);
}

.toolbar{ display:flex; gap:.7rem; align-items:center; margin-bottom: 1.3rem; flex-wrap: wrap; }
.toolbar form{ display:flex; gap:.5rem; flex:1; }
.toolbar input[type=search]{ flex:1; max-width: 340px; }

/* ------------------------------------------------------------------ Forms */
input, select, textarea{
  font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover{ border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-wash);
}
input[type=file]{ border: 1px dashed var(--line); background: var(--surface-alt); cursor:pointer; }
input::placeholder, textarea::placeholder{ color: var(--ink-faint); }
label{ font-size: .74rem; text-transform: uppercase; letter-spacing:.05em; font-weight:600; color: var(--ink-soft); display:block; margin-bottom:.3rem; }
.field{ margin-bottom: .95rem; }
.field-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.field-row .field{ flex:1; min-width: 180px; }

fieldset{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem; margin: 0 0 1.3rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
legend{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color: var(--accent-strong); padding:0 .5rem; margin-left:-.2rem;
}

/* ----------------------------------------------------------------- Button */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font: inherit; cursor:pointer;
  background: var(--accent); color:#fff; border: 1px solid transparent;
  padding: .6rem 1.15rem; border-radius: var(--radius-sm); font-weight:600; font-size:.89rem;
  box-shadow: var(--shadow-sm);
  transition: background-color .12s ease, box-shadow .12s ease, transform .05s ease;
}
.btn:hover{ background: var(--accent-strong); text-decoration:none; box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: var(--surface); color: var(--ink); border:1px solid var(--line); }
.btn.secondary:hover{ background: var(--surface-alt); border-color: var(--ink-faint); }
.btn.danger{ background: var(--danger); }
.btn.danger:hover{ background: #942F25; }

/* ------------------------------------------------------------------ Table */
.table-wrap{ overflow-x:auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.data{ width:100%; border-collapse: collapse; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
table.data th, table.data td{ padding:.65rem .9rem; border-bottom:1px solid var(--line-soft); text-align:left; font-size:.87rem; }
table.data th{
  background: var(--surface-alt); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; color:var(--ink-soft);
}
table.data tbody tr{ transition: background-color .1s ease; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background: var(--surface-alt); }
table.data tfoot td{ background: var(--surface-alt); }
table.data tr.riga-venduto td{ background: var(--ok-wash); }
table.data tr.riga-venduto:hover td{ background: color-mix(in srgb, var(--ok-wash) 80%, var(--surface-alt)); }
table.data tr.riga-da-vendere td{ background: var(--danger-wash); }
table.data tr.riga-da-vendere:hover td{ background: color-mix(in srgb, var(--danger-wash) 80%, var(--surface-alt)); }

.ricerca-toggle{ margin-bottom:.6rem; }
tr.riga-ricerca th{ background: var(--accent-wash); padding:.4rem .5rem; }
tr.riga-ricerca input{
  width:100%; box-sizing:border-box; padding:.35rem .5rem; font-size:.8rem; font-weight:400;
  text-transform:none; letter-spacing:normal; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
}
tr.riga-ricerca-azioni td{ background: var(--accent-wash); padding:.5rem .9rem; text-align:right; }
tr.riga-ricerca-azioni .btn, tr.riga-ricerca-azioni .link-btn{ font-size:.8rem; }

/* ------------------------------------------------------------------- Pill */
mark.evidenziato-log{ background: var(--accent-wash); color: var(--accent-strong); padding:.05rem .2rem; border-radius:3px; box-shadow:0 0 0 2px var(--accent); animation: evidenzia-pulsa 1.8s ease-out 1; }
input.evidenziato-log, textarea.evidenziato-log{ box-shadow:0 0 0 2px var(--accent); animation: evidenzia-pulsa 1.8s ease-out 1; }
@keyframes evidenzia-pulsa{ from{ box-shadow:0 0 0 4px var(--accent); } to{ box-shadow:0 0 0 2px var(--accent); } }

.pill{ display:inline-block; font-size:.7rem; padding:.2rem .6rem; border-radius:20px; font-weight:700; letter-spacing:.01em; }
.pill.obsoleto{ background: var(--surface-alt); color:var(--ink-soft); }
.pill.cliente{ background: var(--accent-2-wash); color:var(--accent-2); }
.pill.fornitore{ background: var(--accent-wash); color:var(--accent-strong); }
.pill.stato-rosso{ background: var(--danger-wash); color:var(--danger); }
.pill.stato-arancio{ background:#FBE9DA; color:#94501F; }
.pill.stato-giallo{ background:#FBF3D9; color:#8A6F1F; }
.pill.stato-viola{ background:#EDE7F6; color:#5B4A8A; }
.pill.stato-verde{ background: var(--ok-wash); color: var(--ok); }
.pill.stato-grigio{ background: var(--surface-alt); color: var(--ink-soft); }
.pill.stato-nero{ background:#20261F; color:#fff; }

fieldset.warn{ border-color: rgba(165,114,31,.35); background: var(--warn-wash); }
fieldset.warn legend{ color: var(--warn); }
fieldset.warn code{ background:rgba(255,255,255,.55); padding:.1rem .35rem; border-radius:4px; }

/* -------------------------------------------------------------------- Tab */
.tabs{ display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin-bottom:1.3rem; }
.tabs a{ padding:.65rem 1rem; color:var(--ink-soft); border-bottom:2px solid transparent; font-size:.89rem; font-weight:500; }
.tabs a:hover{ color:var(--ink); text-decoration:none; }
.tabs a.active{ color:var(--accent-strong); border-color:var(--accent); font-weight:700; }

/* ------------------------------------------------------------ Servizi list */
details.servizio{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
  margin: 0 0 .7rem; overflow: hidden;
}
details.servizio summary{
  list-style: none; cursor: pointer; padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .7rem; user-select: none;
}
details.servizio summary::-webkit-details-marker{ display: none; }
details.servizio summary::before{
  content: '›'; display: inline-block; font-size: 1.1rem; color: var(--ink-faint);
  transform: rotate(0deg); transition: transform .15s ease; width: 1rem; text-align: center;
}
details.servizio[open] summary::before{ transform: rotate(90deg); }
details.servizio summary .servizio-nome{ font-weight: 700; flex: 1; }
details.servizio summary .servizio-badge{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: .2rem .6rem; border-radius: 20px;
}
details.servizio summary .servizio-badge.on{ background: var(--ok-wash); color: var(--ok); }
details.servizio summary .servizio-badge.off{ background: var(--surface-alt); color: var(--ink-soft); }
details.servizio .servizio-corpo{ padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line-soft); padding-top: 1rem; }

/* --------------------------------------------------------------- Info grid */
.info-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; align-items:start; margin-bottom:1.3rem; }
/* min-width:0 evita che un contenuto largo e non comprimibile (es. <input type="file">,
   che ha una larghezza minima intrinseca) sfondi la colonna della grid e si sovrapponga
   al riquadro accanto — senza questo, i fieldset crescono oltre la loro traccia. */
.info-grid fieldset{ margin:0; min-width:0; }
.info-grid fieldset input[type="file"]{ max-width:100%; }
/* Stesso problema di larghezza minima intrinseca, ma un livello più in profondità: un
   form interno con display:flex (es. "Aggiungi foto") ha come figli diretti il .field
   (che contiene l'input file) e il pulsante — anche i .field, essendo flex item, di
   default non si restringono sotto la dimensione del loro contenuto (min-width:auto),
   quindi vanno anch'essi forzati a min-width:0; flex-wrap fa scendere il pulsante a
   capo invece di farlo sfondare quando lo spazio nella colonna è comunque insufficiente. */
.info-grid fieldset form{ flex-wrap:wrap; }
.info-grid fieldset form .field{ min-width:0; flex:1 1 auto; }
.info-card-empty{ display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:1.3rem; letter-spacing:.08em; }
dl.dl{ margin:0; }
dl.dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
dl.dl > div:last-child{ border-bottom:none; padding-bottom:0; }
dl.dl > div:first-child{ padding-top:0; }
dl.dl dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--ink-soft); flex-shrink:0; }
dl.dl dd{ margin:0; text-align:right; color:var(--ink); font-size:.89rem; }
.doc-thumbs{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line-soft); }
.doc-thumb{ display:flex; flex-direction:column; align-items:center; gap:.35rem; width:80px; text-decoration:none; }
.doc-thumb img{ width:80px; height:80px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-alt); }
.doc-thumb-pdf{ width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); }
.doc-thumb-label{ font-size:.68rem; color:var(--ink-soft); text-align:center; line-height:1.3; }
.doc-thumb:hover .doc-thumb-label{ color:var(--accent-strong); }
.doc-thumb:hover img, .doc-thumb:hover .doc-thumb-pdf{ border-color:var(--accent); }

/* ------------------------------------------------------------- Pagination */
.pagination{ display:flex; gap:.35rem; margin-top:1rem; font-size:.85rem; }
.pagination a, .pagination span{ padding:.32rem .65rem; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pagination a:hover{ text-decoration:none; border-color: var(--ink-faint); }
.pagination .current{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }

/* ------------------------------------------------------------------ Login */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 15%, var(--accent-wash) 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, var(--accent-2-wash) 0%, transparent 45%),
    var(--bg);
}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding:2.2rem 2.4rem; width:340px; box-shadow: var(--shadow-md);
}
.login-card h1{ font-size:1.25rem; display:flex; align-items:center; gap:.6rem; }
.login-card h1::before{
  content:""; display:inline-block; width:.7rem; height:.7rem; border-radius:2px;
  background: var(--accent); transform: rotate(45deg);
}
.login-card .field{ margin-bottom:1.1rem; }
.login-card input{ width:100%; }
.login-card .btn{ width:100%; justify-content:center; margin-top:.5rem; }

/* ----------------------------------------------------------- Kanban board */
.kanban{ display:flex; gap:1rem; align-items:flex-start; overflow-x:auto; padding-bottom: 1rem; }
.kanban-col{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); width:280px; flex-shrink:0; box-shadow: var(--shadow-sm); }
.kanban-col h3{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-soft);
  margin:0; padding:.85rem 1rem; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between;
}
.kanban-col .count{ color: var(--ink-soft); background: var(--surface-alt); border-radius:10px; padding:.05rem .55rem; font-weight:700; }
.kanban-col-meta{ display:flex; align-items:center; gap:.4rem; }
.kanban-col-totale{ color: var(--accent-strong); font-weight:700; letter-spacing:normal; text-transform:none; font-variant-numeric: tabular-nums; }
.kanban-cards{ padding:.6rem; display:flex; flex-direction:column; gap:.55rem; }
.kanban-card{
  display:block; background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--ink-faint);
  border-radius: var(--radius-sm); padding:.65rem .75rem; color:var(--ink); font-size:.85rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
}
.kanban-card:hover{ text-decoration:none; border-color: var(--accent-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card .device{ font-weight:700; }
.kanban-card .cliente{ color:var(--ink-soft); font-size:.8rem; }
.kanban-card .date{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin-top:.35rem; }
.kanban-card.stato-rosso{ border-left-color: var(--danger); }
.kanban-card.stato-arancio{ border-left-color: #C97A2B; }
.kanban-card.stato-giallo{ border-left-color: #C9A62B; }
.kanban-card.stato-viola{ border-left-color: #7B5FB0; }
.kanban-card.stato-verde{ border-left-color: var(--ok); }
.kanban-card.stato-grigio{ border-left-color: var(--ink-faint); }
.kanban-card.stato-nero{ border-left-color: #20261F; }
.kanban-card .tecnico{ font-size:.72rem; color:var(--ink-faint); }

.empty-state{ color:var(--ink-soft); font-size:.85rem; padding:1rem 0; }
code{ font-family:var(--font-mono); background:var(--surface-alt); padding:.1rem .4rem; border-radius:4px; font-size:.9em; }

/* Intestazione dei registri fiscali: discreta a schermo, ben visibile in stampa —
   è il dato che identifica di chi e di quale negozio è il registro consegnato. */
.registro-intestazione{
  font-size:.85rem; color: var(--ink-soft); margin:.6rem 0 .2rem;
  padding-bottom:.4rem; border-bottom:1px solid var(--hairline);
}
.registro-intestazione .registro-negozio{ display:block; margin-top:.15rem; }

@media print{
  .sidebar, .no-print{ display:none !important; }
  .registro-intestazione{ color:#000; font-size:.9rem; border-bottom:1px solid #000; }
  .content{ padding:0; max-width:none; }
  body{ background:#fff; }
  table.data{ border:none; box-shadow:none; }
  .table-wrap{ box-shadow:none; }
}

/* ------------------------------------------------------- Ricerca globale */
.ricerca-globale{ padding: 0 .8rem .6rem; }
.ricerca-globale input{
  width:100%; box-sizing:border-box; padding:.5rem .7rem; font-size:.85rem;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
  color:#fff;
}
.ricerca-globale input::placeholder{ color: var(--sidebar-ink-soft); }
.ricerca-globale input:focus{ outline:none; border-color: var(--accent); background: rgba(255,255,255,.1); }
.ricerca-globale .autocomplete-list{ font-size:.85rem; }

/* ---------------------------------------------------------- Autocomplete */
.autocomplete{ position:relative; }
.autocomplete-list{
  display:none; position:absolute; z-index:10; top:100%; left:0; right:0; margin-top:.25rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-sm); max-height:220px; overflow-y:auto;
  list-style:none; padding:.25rem;
  box-shadow: var(--shadow-md);
}
.autocomplete-list li{ padding:.5rem .6rem; border-radius: var(--radius-sm); cursor:pointer; font-size:.88rem; }
.autocomplete-list li:hover{ background: var(--accent-2-wash); }
.autocomplete-list li.quick-create-cliente:hover{ background:none; }
.autocomplete-list li.quick-create-cliente input{ font-size:.85rem; padding:.3rem .5rem; border:1px solid var(--line); border-radius: var(--radius-sm); }

@media (max-width: 900px){
  .sidebar{ width:190px; }
  .content{ padding: 1.4rem 1.2rem 3rem; }
}

/* --- Registro dei corrispettivi in formato cartaceo -------------------------
   Riproduce il modulo che usa il commercialista: griglia fitta, tutti i giorni
   del mese, A4 orizzontale. Le misure sono in punti perche' il riferimento e'
   il foglio stampato, non lo schermo. */
.registro-cartaceo{ font-size: 7.5pt; color:#000; }
.registro-testata{ margin-bottom:.5rem; line-height:1.5; }
.registro-periodo{ margin-left: 8rem; }
.registro-griglia{ width:100%; border-collapse:collapse; table-layout:fixed; }
.registro-griglia th,
.registro-griglia td{ border:1px solid #000; padding:2px 3px; vertical-align:middle; height:14pt; }
.registro-griglia th{ font-weight:400; text-align:center; font-size:6.5pt; line-height:1.1; }
.registro-griglia .rg-settore{ text-align:left; padding-left:6px; }
.registro-griglia .rg-giorno{ width:3.2%; text-align:center; }
.registro-griglia .rg-incasso{ width:5.6%; }
.registro-griglia .rg-totale{ width:6.5%; }
.registro-griglia .rg-note{ width:22%; }
.registro-griglia .rg-aliquota{ font-size:6pt; }
.registro-griglia .rg-importo{ text-align:right; font-variant-numeric: tabular-nums; }
/* Nel modello cartaceo "giorno" e' in basso nella cella d'angolo. */
.registro-griglia .rg-giorno-testata{ vertical-align:bottom; padding-bottom:3px; }
.registro-liquidazione{ margin-top:3.5rem; font-size:7.5pt; }

@media print{
  /* Il registro sta in orizzontale: in verticale le colonne non ci stanno. */
  @page{ size: A4 landscape; margin: 10mm; }
  .registro-cartaceo{ font-size:7pt; }
}

/* --- Chat interna ----------------------------------------------------------- */
.chat{ display:flex; gap:1rem; align-items:stretch; height:calc(100vh - 11rem); min-height:24rem; }
.chat-elenco{
  flex:0 0 15rem; overflow-y:auto; border:1px solid var(--bordo);
  border-radius:var(--radius-sm); padding:.5rem; background:var(--superficie);
}
.chat-sezione{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; opacity:.6; margin:.8rem .6rem .3rem; }
.chat-voce{
  display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:var(--radius-sm);
  text-decoration:none; color:inherit; font-size:.9rem;
}
.chat-voce:hover{ background:var(--sfondo-hover, rgba(0,0,0,.04)); }
.chat-voce.attiva{ background:var(--accento-wash, rgba(0,0,0,.07)); font-weight:600; }
.chat-pallino{ width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; }
.chat-badge, .nav-badge{
  margin-left:auto; background:var(--danger); color:#fff; border-radius:999px;
  padding:0 .4rem; font-size:.7rem; line-height:1.4; min-width:1.2rem; text-align:center;
}
.nav-badge{ display:inline-block; margin-left:.4rem; }
/* Senza questa riga il display esplicito qui sopra vince sull'attributo hidden,
   e il contatore resterebbe visibile con lo zero anche senza messaggi nuovi. */
.nav-badge[hidden], .chat-badge[hidden]{ display:none; }

.chat-corpo{ flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-messaggi{
  flex:1; overflow-y:auto; border:1px solid var(--bordo); border-radius:var(--radius-sm);
  padding:.8rem; background:var(--superficie); display:flex; flex-direction:column; gap:.6rem;
}
.chat-messaggio{ max-width:min(46rem, 85%); }
/* I propri messaggi stanno a destra: si distingue a colpo d'occhio chi ha scritto. */
.chat-messaggio.mio{ align-self:flex-end; text-align:right; }
.chat-meta{ font-size:.72rem; opacity:.7; margin-bottom:.15rem; }
.chat-autore{ font-weight:600; }
.chat-testo{
  display:inline-block; padding:.45rem .7rem; border-radius:var(--radius-sm);
  background:var(--sfondo-hover, rgba(0,0,0,.05)); white-space:pre-wrap; text-align:left;
}
.chat-messaggio.mio .chat-testo{ background:var(--accento-wash, rgba(0,0,0,.09)); }
.chat-testo.eliminato{ opacity:.5; font-style:italic; }
.chat-tag{ margin-top:.25rem; display:flex; flex-wrap:wrap; gap:.3rem; justify-content:inherit; }
.chat-chip{
  display:inline-block; font-size:.75rem; padding:.1rem .45rem; border-radius:999px;
  border:1px solid var(--bordo); text-decoration:none; color:inherit; cursor:pointer;
}
.chat-chip.mancante{ opacity:.5; cursor:default; }
.chat-azioni{ margin-top:.2rem; display:flex; gap:.5rem; justify-content:inherit; }
.chat-messaggio.mio .chat-azioni{ justify-content:flex-end; }
.chat-link{ background:none; border:0; padding:0; font-size:.72rem; opacity:.7; cursor:pointer; text-decoration:underline; color:inherit; }
/* Senza questa riga il display:flex batteva l'attributo hidden e il riquadro di
   modifica restava sempre aperto sotto ogni proprio messaggio. */
.chat-modifica{ margin-top:.3rem; display:flex; gap:.4rem; }
.chat-modifica[hidden]{ display:none; }
.chat-modifica textarea{ flex:1; }

.chat-invio{ margin-top:.6rem; }
.chat-riga{ display:flex; gap:.5rem; align-items:flex-end; }
.chat-riga textarea{ flex:1; resize:vertical; }
.chat-pulsanti{ display:flex; flex-direction:column; gap:.3rem; }
.chat-chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.3rem; }
.chat-ricerca{ margin-top:.4rem; }
.chat-ricerca input{ width:100%; }
.chat-risultati{ display:flex; flex-direction:column; margin-top:.2rem; }
.chat-risultato{
  text-align:left; background:none; border:0; border-bottom:1px solid var(--bordo);
  padding:.35rem .2rem; cursor:pointer; font-size:.85rem; color:inherit;
}
.chat-risultato:hover{ background:var(--sfondo-hover, rgba(0,0,0,.04)); }

/* --- Riepilogo iniziale ------------------------------------------------------ */
.dash{ display:grid; grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); gap:1rem; align-items:start; }
/* Le liste lunghe (riparazioni in ritardo) prendono due colonne dove c'e' spazio. */
.dash-larga{ grid-column:span 2; }
@media (max-width:1100px){ .dash-larga{ grid-column:span 1; } }

.dash-card{
  border:1px solid var(--bordo); border-radius:var(--radius-sm);
  padding:.9rem 1rem; background:var(--superficie);
}
/* Il bordo colorato segnala quello che richiede un'azione, senza urlare. */
.dash-card.attenzione{ border-left:3px solid var(--danger); }
.dash-titolo{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; margin-bottom:.4rem;
}
.dash-link{ text-transform:none; letter-spacing:0; font-size:.78rem; text-decoration:none; opacity:.8; }
.dash-numero{ font-size:1.9rem; font-weight:650; line-height:1.1; font-variant-numeric:tabular-nums; }
.dash-sottotitolo{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; opacity:.6; margin:.7rem 0 .2rem; }

.dash-stati{ display:flex; flex-direction:column; margin-top:.5rem; }
.dash-stato{
  display:flex; align-items:center; gap:.45rem; padding:.25rem 0;
  text-decoration:none; color:inherit; font-size:.88rem; border-bottom:1px solid var(--bordo);
}
.dash-stato:last-child{ border-bottom:0; }
.dash-stato strong{ margin-left:auto; font-variant-numeric:tabular-nums; }
.dash-pallino{ width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; }

.dash-lista{ list-style:none; margin:.4rem 0 0; padding:0; }
.dash-lista li{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding:.3rem 0; border-bottom:1px solid var(--bordo); font-size:.88rem;
}
.dash-lista li:last-child{ border-bottom:0; }
.dash-secondario{ opacity:.65; font-size:.82rem; }
.dash-ritardo{ margin-left:auto; font-size:.78rem; color:var(--danger); font-variant-numeric:tabular-nums; }
.dash-autore{ font-weight:600; }

/* --- Bolla di chat in basso a destra ---------------------------------------
   La chat a pagina intera resta com'era: questa e' la stessa conversazione in un
   pannello che galleggia sopra il lavoro in corso. Sta sopra a tutto (z-index) ma
   fuori dal flusso, cosi' non sposta di un pixel il contenuto delle pagine. */
/* column-reverse: nel markup il pulsante viene prima (e' lui il punto d'ingresso),
   ma a schermo il pannello deve stare sopra la bolla, non sotto. */
.chat-bolla{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:900; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:.6rem; }
.chat-bolla-btn{
  position:relative; width:3.4rem; height:3.4rem; border-radius:50%; border:0; cursor:pointer;
  background:var(--accento, #b5652d); color:#fff; font-size:1.4rem; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .12s ease;
}
.chat-bolla-btn:hover{ transform:translateY(-2px); }
.chat-bolla.aperta .chat-bolla-btn{ transform:none; }
.chat-bolla-icona{ display:block; }
.chat-bolla-badge{
  position:absolute; top:-.15rem; right:-.15rem; min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  border-radius:.7rem; background:#c0392b; color:#fff; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff;
}
.chat-bolla-badge[hidden]{ display:none; }

.chat-pannello{
  width:22rem; max-width:calc(100vw - 2rem); height:28rem; max-height:calc(100vh - 6rem);
  background:var(--sfondo-pannello, #fff); border:1px solid var(--bordo, #ddd8cf); border-radius:.7rem;
  box-shadow:0 10px 34px rgba(0,0,0,.24); display:flex; flex-direction:column; overflow:hidden;
}
.chat-pannello[hidden]{ display:none; }
.chat-pannello-testa{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem;
  border-bottom:1px solid var(--bordo, #e4e2dc); background:var(--sfondo-testa, #faf9f6);
}
.chat-pannello-titolo{ flex:1; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-pannello-azione, .chat-pannello-indietro{
  background:none; border:0; cursor:pointer; font-size:1rem; line-height:1; padding:.2rem .35rem;
  color:inherit; text-decoration:none; opacity:.7; border-radius:.3rem;
}
.chat-pannello-azione:hover, .chat-pannello-indietro:hover{ opacity:1; background:rgba(0,0,0,.06); }
.chat-pannello-indietro{ font-size:1.3rem; }
.chat-pannello-indietro[hidden]{ display:none; }

.chat-pannello-elenco{ flex:1; overflow-y:auto; padding:.4rem; display:flex; flex-direction:column; gap:.1rem; }
.chat-pannello-elenco[hidden]{ display:none; }
.chat-pannello-elenco .chat-voce{ width:100%; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }

.chat-pannello-conversazione{ flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-pannello-conversazione[hidden]{ display:none; }
.chat-pannello-messaggi{ flex:1; overflow-y:auto; padding:.6rem; display:flex; flex-direction:column; gap:.5rem; }
/* Nel pannello lo spazio e' meno di un terzo: i messaggi possono allargarsi quasi tutti. */
.chat-pannello-messaggi .chat-messaggio{ max-width:95%; }
.chat-pannello-messaggi .chat-testo{ font-size:.85rem; }
.chat-pannello-invio{ display:flex; gap:.4rem; align-items:flex-end; padding:.5rem; border-top:1px solid var(--bordo, #e4e2dc); }
.chat-pannello-invio textarea{ flex:1; resize:none; min-height:2.2rem; max-height:7rem; font:inherit; }
.chat-pannello-errore{ margin:0; padding:0 .6rem .5rem; color:var(--danger, #c0392b); font-size:.78rem; }
.chat-pannello-errore[hidden]{ display:none; }

@media print{ .chat-bolla{ display:none; } }