:root {
  /* Palette brand Enablit RSM (estratta dal logo: grigio #505050, rosso #E01020, blu #2090D0).
     Ruoli: blu = primario (link/azioni), grigio = chrome scuro, rosso = accento/brand. */
  --brand-red: #e11b22;
  --brand-grey: #4d4d4f;
  --brand-blue: #1f94d2;
  --color-primary: #126fb0;        /* blu Enablit scurito per contrasto AA su testo bianco */
  --color-primary-dark: #0d577f;
  --color-secondary: #4d4d4f;      /* grigio Enablit — chrome scuro (sidebar, titoli) */
  --color-accent: #e11b22;         /* rosso Enablit — indicatore attivo, evidenze brand */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #e0e2e6;
  --color-text: #333335;
  --color-text-muted: #6b6b6e;
  --color-success: #1a7f4b;
  --color-warning: #b5790a;
  --color-danger: #c0271f;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(28, 43, 57, 0.08), 0 1px 2px rgba(28, 43, 57, 0.06);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--color-primary); }

/* --- Layout ---
   Sperimentale (26/08/2026): menu orizzontale in alto invece della sidebar verticale.
   Per tornare alla sidebar verticale: .app-shell → flex-direction:row, .sidebar →
   flex-direction:column + width:220px, .sidebar a → border-left invece di border-bottom
   (vedi commento "ripristino" su ciascuna regola sotto). */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; } /* ripristino: row */

.sidebar {
  width: auto; /* ripristino: 220px */
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  flex-direction: row; /* ripristino: column */
  align-items: center;
  flex-wrap: wrap;
  padding: 0 var(--space-3);
  flex-shrink: 0;
}
.sidebar-brand { padding: var(--space-2) var(--space-3) var(--space-2) 0; display: flex; align-items: center; gap: var(--space-2); }
/* Logo su pannello chiaro: il logo Enablit ha testo grigio, illeggibile sul grigio della sidebar. */
.sidebar-brand .brand-logo {
  display: block; background: #fff; border-radius: var(--radius);
  padding: 4px 8px; margin-bottom: 0; width: 90px; flex-shrink: 0;
}
.sidebar-brand .brand-logo img { display: block; width: 100%; height: auto; }
.sidebar-brand .brand-nome {
  display: block; color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: 0; line-height: 1.25;
}
.sidebar-brand small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.72rem; letter-spacing: 0.03em; }
.sidebar nav { flex: 1; display: flex; flex-wrap: wrap; }
.sidebar a {
  display: block;
  padding: var(--space-3) var(--space-3);
  color: #d7d7d9;
  text-decoration: none;
  font-size: 0.92rem;
  border-left: none; /* ripristino: 3px solid transparent */
  border-bottom: 3px solid transparent; /* ripristino: rimuovere */
}
.sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar a.active { background: rgba(255,255,255,0.10); color: #fff; border-bottom-color: var(--color-accent); font-weight: 600; } /* ripristino: border-left-color */
.sidebar-footer { padding: var(--space-2) 0; font-size: 0.8rem; opacity: 0.7; flex-shrink: 0; }
.sidebar-footer form { margin: 0; }
.sidebar-footer button { width: auto !important; }

/* Selettore azienda, spostato dentro il menu in alto (era un .topbar separato sotto il menu). */
.selettore-azienda { display: flex; align-items: center; gap: 8px; margin: 0 var(--space-2); flex-shrink: 0; }
.selettore-azienda label { margin: 0; font-weight: 400; color: #d7d7d9; font-size: 0.85rem; white-space: nowrap; }
.selettore-azienda select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 0.85rem; }

/* Mobile: il menu orizzontale sopra (pensato per schermi larghi) va in wrap incontrollato sotto
   ~720px — ogni voce di nav finisce sulla propria riga con padding pieno, ingoiando lo schermo
   (nav è flex:1 dentro la riga della sidebar: sullo spazio stretto rimasto dopo il brand, le
   singole voci non ci stanno affiancate e vanno in colonna). Fix: niente più wrap generale,
   nav diventa una striscia orizzontale scorrevole (swipe), brand/selettore/logout restano
   impilati sopra e sotto ma compatti. */
@media (max-width: 720px) {
  .sidebar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; padding: 0; }
  .sidebar-brand { padding: var(--space-2) var(--space-3); }
  .sidebar nav {
    flex: none; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .sidebar a { flex-shrink: 0; white-space: nowrap; padding: var(--space-2) var(--space-3); }
  .selettore-azienda { margin: var(--space-2) var(--space-3); }
  .selettore-azienda select { flex: 1; }
  .sidebar-footer { padding: 0 var(--space-3) var(--space-2); }
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { padding: var(--space-4); flex: 1; width: 100%; }
.card { overflow-x: auto; }
/* Sezione Scadenze in dettaglio fattura: metà larghezza, allineata a destra. Su schermo
   stretto torna a piena larghezza (leggibilità su telefono). */
.card-scadenze { width: 50%; margin-left: auto; }
@media (max-width: 720px) { .card-scadenze { width: 100%; } }

/* --- Componenti --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.secondary { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.btn.secondary:hover { background: var(--color-bg); }
.btn.danger { background: var(--color-danger); }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  background: var(--color-border); color: var(--color-text-muted);
}
.badge.success { background: #e3f3ea; color: var(--color-success); }
.badge.warning { background: #fbf0dc; color: var(--color-warning); }
.badge.danger { background: #fae4e2; color: var(--color-danger); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
tbody tr:hover { background: var(--color-bg); }

/* Filtro per colonna + ordinamento (web/public/js/tabella.js) su <table class="tabella-dati"> */
th.ordinabile { cursor: pointer; user-select: none; }
th.ordinabile:hover { color: var(--color-text); }
.indicatore-ordinamento { display: inline-block; width: 10px; font-size: 0.75rem; }
.riga-filtri-tabella th { padding: 6px 12px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.filtro-colonna {
  width: 100%; min-height: 18px; padding: 1px 6px;
  font-size: 0.8rem; font-weight: 400; text-transform: none; letter-spacing: normal;
  border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff;
}
/* Riga totali a fondo tabella (colonne marcate data-totale sul <th>): si aggiorna coi filtri. */
.riga-totali-tabella td { border-bottom: none; border-top: 2px solid var(--color-border); font-weight: 600; }
.riga-totali-tabella .totale-colonna { color: var(--color-primary); }

.form-group { margin-bottom: var(--space-3); }
label { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
input, select, textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: 0.92rem; color: var(--color-text);
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }

/* Allinea l'altezza dei select a quella degli input di testo (i select nativi rendono più bassi). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
select {
  min-height: 40px;
}

.form-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-row > * { flex: 1 1 160px; min-width: 140px; }

/* Riga di pulsanti d'azione a fondo pagina (form e dettaglio): tutti sulla stessa riga, ordine
   coerente in tutte le sezioni — primario, azioni secondarie, navigazione indietro, distruttiva
   per ultima. A differenza di .form-row i pulsanti non si allargano al posto disponibile. */
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.tabs a { padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }

.autocomplete-risultati {
  display: none;
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; margin-top: 4px;
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; }
.autocomplete-item:hover { background: var(--color-bg); }
.autocomplete-item.autocomplete-vuoto { color: var(--color-text-muted); cursor: default; }
.autocomplete-item.autocomplete-vuoto:hover { background: none; }

.alert { padding: var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); font-size: 0.9rem; }
.alert.danger { background: #fae4e2; color: var(--color-danger); }
.alert.success { background: #e3f3ea; color: var(--color-success); }
.alert.warning { background: #fbf0dc; color: var(--color-warning); }

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--brand-grey), var(--color-primary));
}
.login-card { width: 360px; }
.login-card .brand-logo { display: block; margin: 0 auto var(--space-4); max-width: 240px; }
.login-card .brand-logo img { display: block; width: 100%; height: auto; }
.login-card h1 { font-size: 1.15rem; margin: 0 0 var(--space-4); text-align: center; }

/* Form compatto (Anagrafiche, 28/08/2026): meno spazio disperso tra campi/sezioni — scoped a
   .form-compatto per non toccare la spaziatura standard di card/form-group usata ovunque altro
   nell'app. Più colonne per riga (flex-basis più piccolo) e campi più bassi, non solo margini
   ridotti: altrimenti si stringe solo lo spazio vuoto ma la pagina resta comunque lunga. */
.form-compatto .card { padding: var(--space-3); margin-bottom: var(--space-2); }
.form-compatto .card h3 { margin-bottom: var(--space-2); font-size: 0.95rem; }
.form-compatto .form-group { margin-bottom: var(--space-2); }
.form-compatto label { margin-bottom: 2px; font-size: 0.78rem; }
/* height fisso (non solo min-height) su input/select: alcuni browser rendono i <select> nativi
   con un padding verticale diverso dagli <input> anche a parità di min-height dichiarato — height
   fisso + stesso padding elimina lo scarto visivo. textarea resta con min-height (deve poter
   restare multi-riga, es. Note). */
.form-compatto input, .form-compatto select { height: 34px; padding: 0 10px; }
.form-compatto textarea { min-height: 34px; padding: 6px 10px; }
.form-compatto .form-row { gap: var(--space-2); }
/* min-width basso apposta: i campi corti (Tipo, Paese, Civico, SDI...) impostano il loro flex-basis
   inline per riga (vedi form.ejs) — un min-width alto qui li impedirebbe di restare stretti. */
.form-compatto .form-row > * { flex: 1 1 130px; min-width: 70px; }
.form-compatto .indirizzo-riga { padding-bottom: var(--space-2) !important; margin-bottom: var(--space-2) !important; }

/* Dati anagrafici a 2 colonne: sinistra più larga (identità/fiscali), destra stretta (contatti,
   un campo per riga). Sotto un min-width: va a una colonna sola su schermi stretti. */
.dati-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 720px) { .dati-colonne { grid-template-columns: 1fr; } }
.titolo-colonna {
  margin: 0 0 var(--space-2); font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--color-text-muted);
}

/* Modale di modifica riga: edit rapido senza lasciare la pagina (lista/dettaglio) — un solo
   <dialog> condiviso per tutta l'app, popolato via htmx a ogni apertura (vedi footer.ejs e
   modale.js). Tenuto il più compatto possibile: la larghezza segue il contenuto entro un massimo
   ragionevole, mai a pagina intera. */
dialog.modale {
  border: none; border-radius: var(--radius); padding: 0;
  max-width: 560px; width: calc(100vw - 32px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.28);
}
dialog.modale::backdrop { background: rgba(0,0,0,0.45); }
dialog.modale .modale-corpo { padding: var(--space-4); max-height: 82vh; overflow-y: auto; }
dialog.modale .modale-corpo h3 { margin: 0 0 var(--space-3); font-size: 1.05rem; }
dialog.modale .modale-azioni { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
dialog.modale .modale-caricamento { padding: var(--space-4); color: var(--color-text-muted); text-align: center; }