html, body { height: 100%; }
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.brand-title { font-family: 'Oswald', sans-serif; font-size: 15px; }
.brand-sub { font-size: 11px; color: #8A93A0; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: #B7BEC9; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-item:hover { background: #ffffff10; color: #fff; }
.nav-item.active { background: var(--panel-2); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

/* ---- Menu a sezioni (fisarmonica) ---- */
.nav-group-header { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; color: #B7BEC9; padding: 11px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-group-header:hover { background: #ffffff10; color: #fff; }
.nav-group.current > .nav-group-header { color: #fff; }
.nav-chevron { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.18s ease; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; transition: max-height 0.22s ease; margin-left: 17px; border-left: 1px solid #ffffff14; padding-left: 8px; }
.nav-group.open .nav-sub { max-height: 320px; padding-bottom: 6px; }
.nav-sub .nav-item { font-size: 13px; padding: 8px 10px; }
.nav-actions { margin-top: 4px; padding-top: 5px; border-top: 1px solid #ffffff14; display: flex; flex-direction: column; gap: 1px; }
.nav-action { display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: #8A93A0; padding: 7px 10px; border-radius: 7px; font-size: 12px; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-action:hover { background: #ffffff10; color: var(--accent); }
.nav-single { font-weight: 600; }
.sidebar-foot { font-size: 10.5px; color: #5C6472; margin-top: auto; padding-top: 16px; }

/* ==== Telefono: barra in alto con ☰, menu laterale a tendina, tabelle a schede ====
   NB: deve stare DOPO le regole base qui sopra (stessa specificità: vince l'ultima). */
.topbar { display: none; }
.backdrop { display: none; }
@media (max-width: 760px) {
  /* minmax(0,…): senza, la colonna si allarga al contenuto */
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* barra in alto: ☰, titolo della vista corrente, stato del bridge */
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
            background: var(--bg); color: #fff;
            padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)); }
  .topbar-btn { background: transparent; border: 1px solid #ffffff33; color: #fff; border-radius: 9px;
                width: 42px; height: 42px; font-size: 21px; cursor: pointer; flex: none; }
  .topbar-title { font-family: 'Oswald', sans-serif; font-size: 18px; flex: 1; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .badge { flex: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* la barra laterale diventa un pannello che entra da sinistra (☰ / sfondo per chiudere) */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); z-index: 40;
             transform: translateX(-100%); transition: transform 0.22s ease; overflow-y: auto;
             padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  /* L'ombra SOLO a menu aperto: da chiuso il pannello e' fuori schermo ma il suo bordo destro
     resta a x=0, e l'ombra sfumerebbe per 24px dentro la pagina — una striscia scura sempre
     visibile a sinistra. */
  .shell.menu-aperto .sidebar { transform: none; box-shadow: 4px 0 24px #0006; }
  .backdrop { position: fixed; inset: 0; background: #0008; z-index: 35; }
  .shell.menu-aperto .backdrop { display: block; }
  /* voci più alte: si toccano col dito */
  .nav-item, .nav-group-header { font-size: 15.5px; padding: 12px 12px; }
  .nav-sub .nav-item { font-size: 15px; padding: 11px 10px; }
  .nav-group.open .nav-sub { max-height: 600px; }
  .nav-action { font-size: 13.5px; padding: 9px 10px; }

  /* tabelle -> schede: una riga = una scheda; ogni cella mostra la propria intestazione
     (data-label, che admin.js copia dal <th> dopo ogni render) */
  .table-wrap { border: none; background: transparent; overflow: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; box-sizing: border-box; }
  .table-wrap thead { display: none; }
  .table-wrap tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin-bottom: 10px; }
  .table-wrap td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                   padding: 9px 0 !important; border-bottom: 1px solid #F0EBE0 !important; text-align: right; }
  .table-wrap td:last-child { border-bottom: none !important; }
  .table-wrap td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
                           color: var(--muted); font-weight: 600; text-align: left; flex: none; }
  /* celle senza intestazione (pulsanti azione): niente etichetta, pulsanti allineati a destra */
  .table-wrap td:not([data-label])::before { content: none; }
  .table-wrap td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; }
  .table-wrap td.empty-row { display: block; text-align: center; }
  .table-wrap td.empty-row::before { content: none; }
  /* email e testi lunghi vanno a capo invece di sbordare dalla scheda */
  .table-wrap td { overflow-wrap: anywhere; }
  /* la cella "identita'" (quella col nome) diventa il titolo della scheda: tutta larga,
     a sinistra, senza etichetta davanti. Le altre restano etichetta-a-sinistra/valore-a-destra. */
  .table-wrap td:has(.cell-title) { display: block; text-align: left; padding: 12px 0 10px !important; }
  .table-wrap td:has(.cell-title)::before { content: none; }
  .table-wrap td .cell-title { font-size: 17px; font-weight: 700; }
  /* la prima colonna quando e' una spunta (Importa da Distribu): niente etichetta, a sinistra */
  .table-wrap td:first-child:has(input[type="checkbox"]) { justify-content: flex-start; }
  .table-wrap td:first-child:has(input[type="checkbox"])::before { content: none; }

  /* filtri e intestazioni impilati a tutta larghezza */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar .field, .toolbar select, .toolbar input { width: 100%; box-sizing: border-box; }
  .view-header { flex-direction: column; align-items: stretch; }
  /* i pulsanti d'intestazione stanno in un div con style inline: per batterlo serve !important.
     Sul telefono vanno impilati a tutta larghezza, altrimenti le parole si spezzano. */
  .view-header > div + div { flex-direction: column !important; align-items: stretch !important; width: 100%; }
  .view-header > div + div .btn { width: 100%; }
}

.main { padding: 30px 34px; overflow-y: auto; }
.view { max-width: 1040px; }
.view-narrow { max-width: 480px; }

.view-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.title { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; margin: 0; }
.desc { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; max-width: 560px; }

.search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 18px; }
.search input { border: none; outline: none; font-size: 13.5px; flex: 1; background: transparent; }

.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #F4F0E6; white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
.cell-title { font-weight: 600; }
.empty-row { text-align: center; padding: 30px !important; color: var(--muted); font-size: 13px; }

.row-actions { display: flex; gap: 6px; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; font-size: 13px; }
.icon-btn:hover { border-color: #C9C1AC; }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.tag-list { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: #EEE9DA; }

.form-grid { max-width: 460px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; cursor: pointer; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 16px; }

.back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 18px; }
.back-link:hover { color: var(--ink); }

.toolbar { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar-spacer { flex: 1; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

/* Cisterne: gauge di livello + mini-grafico andamento */
.tank-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tank-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.tank-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.tank-card-name { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.tank-card-pct { font-size: 22px; font-weight: 700; }

.tank-gauge { display: flex; gap: 14px; align-items: stretch; }
.tank-gauge-shell {
  width: 34px;
  height: 108px;
  border-radius: 8px;
  background: #F0ECDF;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  flex-shrink: 0;
}
.tank-gauge-fill { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.3s ease; }
.tank-gauge-info { display: flex; flex-direction: column; justify-content: center; }
.tank-gauge-litri { font-size: 19px; font-weight: 700; }

.tank-spark-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tank-spark { width: 100%; height: 40px; display: block; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.summary-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.summary-card-name { font-weight: 600; font-size: 13.5px; }
.summary-card-total { font-size: 22px; font-weight: 600; margin-bottom: 10px; }

.invoice { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 10px; }
.invoice-from { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; }
.invoice-period { font-family: 'Oswald', sans-serif; font-size: 15px; color: var(--accent); text-transform: capitalize; }
.invoice-total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.invoice-card-block { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.invoice-card-block:last-child { border-bottom: none; }
.invoice-card-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.invoice-doc-type { font-size: 12px; color: var(--muted); margin-top: 2px; }
.invoice-issued { font-size: 11px; color: var(--muted); margin-top: 2px; }
.invoice-note { margin-top: 12px; font-size: 11px; color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,24,29,0.5); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal { background: #fff; border-radius: 12px; padding: 22px; width: 320px; }
.modal-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Stampa (proforma dai Riepiloghi): resta solo il documento, tipografia da carta */
@media print {
  .sidebar, .no-print, .view-header, .toolbar { display: none !important; }
  html, body { height: auto; background: #fff; }
  .shell { grid-template-columns: 1fr; min-height: 0; }
  .main { padding: 0; overflow: visible; }
  .view { max-width: none; }
  .invoice { border: none; border-radius: 0; padding: 0; }
  .invoice-period { color: #000; }
  .invoice-card-block { page-break-inside: avoid; }
  table.data { font-size: 12px; }
  table.data th { background: #fff; color: #000; border-bottom: 1px solid #000; padding: 7px 10px; }
  table.data td { padding: 7px 10px; }
  .invoice-total { border-top: 2px solid #000; font-size: 15px; }
}
@page { margin: 16mm 14mm; }

/* Miniatura della firma nella tabella Operazioni */
.firma-mini { height: 34px; width: auto; max-width: 120px; background: #fff; border: 1px solid var(--line); border-radius: 4px; vertical-align: middle; }
.firma-mini:hover { outline: 2px solid var(--accent); }

@media print {
  /* Le firme restano anche sulla proforma stampata: è il documento che si mette davanti al
     cliente quando contesta un addebito, quindi la prova deve stare accanto alla riga.
     Righe un po' più alte per far posto all'immagine, senza spezzarle tra due pagine. */
  .col-firma { display: table-cell !important; width: 26mm; }
  .firma-mini {
    height: auto !important; max-height: 12mm; max-width: 24mm;
    border: none !important; outline: none !important;
    filter: grayscale(100%) contrast(140%); /* nitida anche in bianco e nero */
  }
  .invoice .data tr { page-break-inside: avoid; }
}

/* ---- Sezione Aggiornamenti ---- */
.avviso-rilascio {
  background: #FFF4E5; border: 1px solid #F0D9B5; border-radius: 10px;
  padding: 12px 14px; margin: 18px 0; font-size: 13px; line-height: 1.5;
}
.azioni-rilascio { display: flex; gap: 10px; flex-wrap: wrap; }
.log-rilascio {
  margin-top: 14px; background: #1D1B18; color: #E8E2D6;
  border-radius: 10px; padding: 14px; font-size: 12px; line-height: 1.5;
  font-family: 'Roboto Mono', monospace; white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto;
}

/* ==== Webapp sul telefono: login, abbinamento, ritocchi mobile ==== */

/* Login: una scatola centrata, grande abbastanza per il dito */
.login-box { max-width: 380px; margin: 8vh auto 0; text-align: center; }
.login-mark { font-size: 44px; margin-bottom: 6px; }
.login-box .form-grid { text-align: left; margin-top: 18px; }
.login-errore { background: #FBE7E1; color: var(--danger); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 12px; }

/* Abbina tessera: liste a "carte" grandi (cliente, poi targa) */
.link-back { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0; margin-bottom: 14px; font-size: 14px; }
.pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pick { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.pick:active { border-color: var(--accent); background: #FFF8EF; }
.pick-main { font-weight: 700; font-size: 18px; }
.pick-main.mono { font-size: 22px; letter-spacing: 0.5px; }
.pick-sub { font-size: 12.5px; color: var(--muted); }
.card-stato { background: #F6F1E7; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.uid-input { font-size: 20px !important; letter-spacing: 1px; text-transform: uppercase; }
.btn-danger-soft { background: #FBE7E1; color: var(--danger); border-color: #F0C9BE; }

/* Telefono: respiri piu' stretti, tocchi piu' grandi, niente zoom automatico di iOS
   (che scatta sotto i 16px negli input) e margini per la tacca dell'iPhone. */
@media (max-width: 760px) {
  .main { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .view, .view-narrow { max-width: none; }
  input, select, textarea { font-size: 16px; }
  .btn { padding: 12px 16px; font-size: 15px; }
  .btn-block { width: 100%; }
  .title { font-size: 22px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}