/* =====================================================================
   Regole comuni a tutte le pagine (pulizia grafica di ottobre 2026)

   Raccoglie in un posto solo quello che prima era sparso e incoerente:
     1. titoli di pagina (stesso carattere, stessa misura, stessa icona);
     2. campi e menu a tendina fuori da ".form-group" (prima restavano con
        l'aspetto standard del sistema);
     3. filtri richiudibili e riquadro "Salva vista";
     4. Storico compatto: sotto i 1400 px ogni lavoro e' una scheda di due o
        tre righe invece di una tabella con 12 colonne.
   Caricato dopo gli altri fogli (vedi templates/_stylesheets.html) e prima
   di modern.css, cosi' puo' correggerli senza usare !important.
   ===================================================================== */

/* ----- 1. Titoli di pagina ------------------------------------------- */
.app-section-title,
.page-header-title,
.history-title,
.settings-header {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--green-800);
}
.history-title,
.settings-header { display: flex; align-items: center; gap: 0.5rem; }
/* Icone dei titoli: tutte 24 px e dello stesso verde. */
.app-section-title > :is(svg, i),
.page-header-title > :is(svg, i),
.history-title > :is(svg, i),
.settings-header > :is(svg, i) {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--green-600);
}

/* ----- 2. Campi fuori da .form-group ---------------------------------- */
/* :where() azzera la specificita': qualsiasi regola dei singoli componenti
   (campi delle tabelle, del calendario, ecc.) continua a vincere. Il resto
   prende lo stesso aspetto dei campi dentro i moduli. */
:where(main, .container, .modal-content) :where(
  select,
  textarea,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"],
            [type="file"], [type="color"], [type="submit"], [type="button"], [type="image"])
) {
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 0.5rem;
  background: var(--control-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
}

/* ----- 3. Filtri richiudibili ----------------------------------------- */
.filters-panel { margin-bottom: 1rem; }
.filters-panel > .filter-form { margin-bottom: 0; }
.filters-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.6rem;
}
.filters-panel:not([open]) > .filters-summary { margin-bottom: 0; }
.filters-count {
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-xs);
}

/* "Salva questa vista" nella bacheca: un riquadro chiuso, apri solo se serve. */
.save-filter-details { margin-top: 0.5rem; }
.save-filter-details > summary {
  display: inline-block;
  color: var(--green-800);
  text-decoration: underline;
  font-size: var(--text-sm);
  cursor: pointer;
}
.save-filter-details[open] > summary { margin-bottom: 0.5rem; }

/* ----- 4. Storico compatto (769 - 1399 px) ---------------------------- */
/* Ogni riga diventa una griglia:
     riga 1: casella, cliente, descrizione, tempo, data, azioni
     riga 2: operatore, interventi, esecuzione, fatturato, materiale
     riga 3: note (solo se ci sono)
   L'intestazione resta solo con casella "seleziona tutti" e i tre
   collegamenti per ordinare (Cliente, Tempo, Completato). */
@media (min-width: 769px) and (max-width: 1399px) {
  .history-table { display: block; min-width: 0; table-layout: auto; }
  .history-table colgroup { display: none; }
  .history-table tbody { display: block; }
  /* Le due righe dell'intestazione affiancate: casella a sinistra, ordinamento accanto. */
  .history-table thead { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.5rem; }

  .history-table thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
  .history-table thead th { display: none; position: static; padding: 0.4rem 0; background: transparent; }
  .history-table thead th[class*="history-col-"] { width: auto; max-width: none; white-space: nowrap; }
  .history-table thead th.history-col-check,
  .history-table thead th.history-col-client,
  .history-table thead th.history-col-time,
  .history-table thead th.history-col-date { display: block; }
  .history-table thead .history-group-row { display: flex; }
  .history-table thead .history-group-row th:not(.history-col-check) { display: none; }
  .history-table thead tr:not(.history-group-row) { padding: 0 0 0.4rem 0; }
  .history-table thead tr:not(.history-group-row) th.history-col-client::before { content: 'Ordina per: '; color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .history-table thead .sticky-col { position: static; border-right: 0; background: transparent; }
  .history-table thead tr:not(.history-group-row) th.history-col-client { border-radius: 0; }
  /* La casella "seleziona tutti" ha la stessa larghezza (2.25rem) e lo stesso
     centro delle caselle delle righe sotto: prima era 8 px piu' a sinistra. */
  .history-table thead th.history-col-check[rowspan] {
    width: 2.25rem;
    box-sizing: border-box;
    padding: 0.4rem 0.25rem;
    text-align: center;
    vertical-align: middle;
  }

  .history-table tbody tr {
    display: grid;
    grid-template-columns: 2.25rem 10rem minmax(0, 1fr) 5rem 6.5rem 6rem 3.5rem;
    grid-template-areas:
      "chk cli desc desc time date act"
      "chk ass ops ops exec fatt mat"
      "chk .   note note note note note";
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .history-table tbody tr:nth-child(even) { background: var(--green-50); }
  .history-table tbody tr:hover { background: var(--green-100); }
  .history-table tbody td,
  .history-table tbody tr:nth-child(even) td:not(.sticky-col),
  .history-table tbody tr:hover td,
  .history-table tbody tr:hover td.sticky-col,
  .history-table tbody tr:nth-child(even) .sticky-col {
    padding: 0.1rem 0.25rem;
    border: 0;
    background: transparent;
  }
  .history-table tbody .sticky-col { position: static; border-right: 0; }
  /* Le larghezze percentuali della tabella non servono: la griglia decide. */
  .history-table tbody td[class*="history-col-"] { width: auto; max-width: none; }

  .history-table td.history-col-check { grid-area: chk; }
  .history-table td.history-col-client { grid-area: cli; }
  .history-table td.history-col-desc { grid-area: desc; font-weight: 600; }
  .history-table td.history-col-time { grid-area: time; }
  .history-table td.history-col-date { grid-area: date; }
  .history-table td.history-col-actions { grid-area: act; }
  .history-table td.history-col-assigned { grid-area: ass; text-align: left; color: var(--text-secondary); font-size: var(--text-sm); }
  .history-table td.history-col-operations { grid-area: ops; }
  .history-table td.history-col-exec { grid-area: exec; }
  .history-table td.history-col-fatturato { grid-area: fatt; }
  .history-table td.history-col-material { grid-area: mat; }
  .history-table td.history-col-note { grid-area: note; text-align: left; }
  .history-table td.history-col-note.is-empty { display: none; }
  /* Riga "nessun lavoro": una sola cella a tutta larghezza. */
  .history-table tbody tr:has(td.empty-state) { display: block; }
}

/* ----- Storico: vista "Righe" scelta dall'utente (da 1400 px) --------- */
/* Copia del blocco precedente con il prefisso [data-view="rows"]: tenere allineati
   (lo controlla un test). Sotto i 1400 px la vista a righe e' gia' l'unica. */
@media (min-width: 1400px) {
  .history-table[data-view="rows"] { display: block; min-width: 0; table-layout: auto; }
  .history-table[data-view="rows"] colgroup { display: none; }
  .history-table[data-view="rows"] tbody { display: block; }
  /* Le due righe dell'intestazione affiancate: casella a sinistra, ordinamento accanto. */
  .history-table[data-view="rows"] thead { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.5rem; }

  .history-table[data-view="rows"] thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
  .history-table[data-view="rows"] thead th { display: none; position: static; padding: 0.4rem 0; background: transparent; }
  .history-table[data-view="rows"] thead th[class*="history-col-"] { width: auto; max-width: none; white-space: nowrap; }
  .history-table[data-view="rows"] thead th.history-col-check,
  .history-table[data-view="rows"] thead th.history-col-client,
  .history-table[data-view="rows"] thead th.history-col-time,
  .history-table[data-view="rows"] thead th.history-col-date { display: block; }
  .history-table[data-view="rows"] thead .history-group-row { display: flex; }
  .history-table[data-view="rows"] thead .history-group-row th:not(.history-col-check) { display: none; }
  .history-table[data-view="rows"] thead tr:not(.history-group-row) { padding: 0 0 0.4rem 0; }
  .history-table[data-view="rows"] thead tr:not(.history-group-row) th.history-col-client::before { content: 'Ordina per: '; color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .history-table[data-view="rows"] thead .sticky-col { position: static; border-right: 0; background: transparent; }
  .history-table[data-view="rows"] thead tr:not(.history-group-row) th.history-col-client { border-radius: 0; }
  /* La casella "seleziona tutti" ha la stessa larghezza (2.25rem) e lo stesso
     centro delle caselle delle righe sotto: prima era 8 px piu' a sinistra. */
  .history-table[data-view="rows"] thead th.history-col-check[rowspan] {
    width: 2.25rem;
    box-sizing: border-box;
    padding: 0.4rem 0.25rem;
    text-align: center;
    vertical-align: middle;
  }

  .history-table[data-view="rows"] tbody tr {
    display: grid;
    grid-template-columns: 2.25rem 10rem minmax(0, 1fr) 5rem 6.5rem 6rem 3.5rem;
    grid-template-areas:
      "chk cli desc desc time date act"
      "chk ass ops ops exec fatt mat"
      "chk .   note note note note note";
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .history-table[data-view="rows"] tbody tr:nth-child(even) { background: var(--green-50); }
  .history-table[data-view="rows"] tbody tr:hover { background: var(--green-100); }
  .history-table[data-view="rows"] tbody td,
  .history-table[data-view="rows"] tbody tr:nth-child(even) td:not(.sticky-col),
  .history-table[data-view="rows"] tbody tr:hover td,
  .history-table[data-view="rows"] tbody tr:hover td.sticky-col,
  .history-table[data-view="rows"] tbody tr:nth-child(even) .sticky-col {
    padding: 0.1rem 0.25rem;
    border: 0;
    background: transparent;
  }
  .history-table[data-view="rows"] tbody .sticky-col { position: static; border-right: 0; }
  /* Le larghezze percentuali della tabella non servono: la griglia decide. */
  .history-table[data-view="rows"] tbody td[class*="history-col-"] { width: auto; max-width: none; }

  .history-table[data-view="rows"] td.history-col-check { grid-area: chk; }
  .history-table[data-view="rows"] td.history-col-client { grid-area: cli; }
  .history-table[data-view="rows"] td.history-col-desc { grid-area: desc; font-weight: 600; }
  .history-table[data-view="rows"] td.history-col-time { grid-area: time; }
  .history-table[data-view="rows"] td.history-col-date { grid-area: date; }
  .history-table[data-view="rows"] td.history-col-actions { grid-area: act; }
  .history-table[data-view="rows"] td.history-col-assigned { grid-area: ass; text-align: left; color: var(--text-secondary); font-size: var(--text-sm); }
  .history-table[data-view="rows"] td.history-col-operations { grid-area: ops; }
  .history-table[data-view="rows"] td.history-col-exec { grid-area: exec; }
  .history-table[data-view="rows"] td.history-col-fatturato { grid-area: fatt; }
  .history-table[data-view="rows"] td.history-col-material { grid-area: mat; }
  .history-table[data-view="rows"] td.history-col-note { grid-area: note; text-align: left; }
  .history-table[data-view="rows"] td.history-col-note.is-empty { display: none; }
  /* Riga "nessun lavoro": una sola cella a tutta larghezza. */
  .history-table[data-view="rows"] tbody tr:has(td.empty-state) { display: block; }
  /* Solo in questa vista: la casella dell'intestazione perde lo sfondo a due toni della tabella. */
  .history-table[data-view="rows"] thead th.history-col-check[rowspan] { background: transparent; }
  .history-table[data-view="rows"] tbody td.history-col-check { text-align: center; }
}

/* ----- Telefono ----------------------------------------------------- */
@media (max-width: 768px) {
  /* Titolo un po' piu' piccolo (su schermo stretto andava a capo e spingeva via il resto). */
  .app-section-title,
  .page-header-title,
  .history-title,
  .settings-header { font-size: var(--text-xl); }
  /* Nelle schede del telefono il riassunto degli interventi resta di seguito al badge. */
  .history-ops-summary { display: inline; margin: 0 0 0 0.35rem; }
}

/* ----- Storico (tabella a colonne, da 1400 px): casella "seleziona tutti" ---- */
/* La casella occupa le due righe dell'intestazione: prima stava a meta' altezza
   (ne' in linea con "CLIENTE" ne' con le caselle delle righe) e il suo sfondo era
   del colore della riga bassa anche nella parte alta. Ora sta in linea con i
   titoli della seconda riga e lo sfondo segue le due righe (chiara sopra, piu'
   piena sotto; 1.55rem e' l'altezza della riga dei gruppi). */
@media (min-width: 1400px) {
  .history-table .history-col-check[rowspan] {
    vertical-align: bottom;
    padding-bottom: 0.8rem;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--green-100) 55%, var(--surface)) 0 1.55rem,
      var(--green-100) 1.55rem
    );
  }
}

/* ----- Interruttore Tabella / Righe (solo >= 1400 px) -------------------- */
.history-view-toggle { display: none; }
@media (min-width: 1400px) {
  .history-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); overflow: hidden; margin-right: 0.5rem; }
  .history-view-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border: 0; background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
  .history-view-btn + .history-view-btn { border-left: 1px solid var(--border); }
  .history-view-btn[aria-pressed="true"] { background: var(--green-100); color: var(--green-800); font-weight: 600; }
}