/* Tema "Feel The Yarn" — la pelle morbida del tema moderno, il loro marchio.
 *
 * Stessa impostazione di temi/moderno.css: angoli tondi, superfici con ombra
 * leggera, niente maiuscolo spaziato, navigazione a pillole, bottone principale
 * in tinta. Restano loro il logo, il verde (BRAND_COLORE) e i titoli in
 * Playfair, che è il carattere del marchio.
 *
 * Le misure sono governate da due sole famiglie di valori: un'altezza per tutti
 * i comandi e una scala tipografica di quattro gradini. È quello che tiene
 * insieme bottoni, campi e tabelle senza che ognuno vada per conto suo.
 */

:root {
    /* --- Forma ---------------------------------------------------------- */
    --raggio: 8px;
    --raggio-grande: 14px;
    --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
    --maiuscolo: none;
    --tracking: 0;
    /* Nessun verde: nel CRM non è mai stato un colore d'azione, solo un
       accento. Le azioni restano nere, come sono sempre state. */
    --azione-bg: var(--fg);
    --azione-fg: var(--bg);
    --superficie: var(--bg);
    --focus-bordo: var(--fg);
    --focus-alone: 0 0 0 3px color-mix(in srgb, var(--fg) 14%, transparent);

    /* --- Colori di servizio --------------------------------------------- */
    --border: #E7E4DF;
    --row-alt: #FAF9F7;
    --muted: #8A857D;
    --fg: #1A1A1A;

    /* --- Misure ---------------------------------------------------------- */
    --h-comando: 42px;
    --t-etichetta: 0.78rem;
    --t-comando: 0.88rem;
    --t-corpo: 0.95rem;
    --t-nota: 0.85rem;
}

:root[data-theme="dark"] {
    --ombra: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);
    --border: #2C2A27;
    --row-alt: #171614;
    --muted: #9A948B;
    --fg: #E9E7E3;
    --azione-fg: #fff;
}

/* ------------------------------------------------------------------ testa */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0.75rem 2rem;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
.main-nav a {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: var(--t-comando);
    font-weight: 500;
    color: var(--muted);
    transition: background .15s, color .15s;
}
.main-nav a:hover {
    background: var(--row-alt);
    color: var(--fg);
    text-decoration: none;
}

/* ---------------------------------------------------------------- titoli */
.page-title { font-size: 2.3rem; line-height: 1.15; letter-spacing: -0.01em; }
.page-title-row { width: 100%; margin-bottom: 1.4rem; }
.page-subtitle, .hint, small { font-size: var(--t-nota); color: var(--muted); }

/* --------------------------------------------------------------- tabelle */
table.visitatori {
    border: 1px solid var(--border);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
    /* Niente overflow:hidden qui: farebbe della tabella un contenitore di
       scorrimento e l'intestazione appiccicata si staccherebbe di 62px,
       lasciando una banda vuota. Gli angoli si arrotondano sulle celle. */
    /* Colonne larghe quanto il contenuto: con le larghezze tutte uguali un
       codice lungo si spezzava in sei righe e la riga diventava altissima. */
    table-layout: auto;
}
table.visitatori th, table.visitatori td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 1rem;
    font-size: var(--t-corpo);
    line-height: 1.45;
}
table.visitatori th {
    position: sticky;
    top: 62px;                     /* sotto la testa, che è anch'essa in cima */
    z-index: 2;
    background: var(--row-alt);
    color: var(--muted);
    font-size: var(--t-etichetta);
    font-weight: 600;
    letter-spacing: 0;
}
table.visitatori tbody tr:nth-child(even) { background: transparent; }
table.visitatori tbody tr { transition: background .12s; }
table.visitatori tbody tr:hover { background: var(--row-alt); }
table.visitatori tbody tr:last-child td { border-bottom: none; }
/* Codici e indirizzi lunghi: troncati, non spezzati. Il valore intero si legge
   aprendo la scheda — in elenco conta riconoscerlo, non trascriverlo. */
table.visitatori td:first-child {
    max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Angoli: senza ritaglio del contenitore si arrotondano le celle d'angolo. */
table.visitatori thead tr:first-child th:first-child { border-top-left-radius: var(--raggio-grande); }
table.visitatori thead tr:first-child th:last-child { border-top-right-radius: var(--raggio-grande); }
table.visitatori tbody tr:last-child td:first-child { border-bottom-left-radius: var(--raggio-grande); }
table.visitatori tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raggio-grande); }

/* Riga dei filtri per colonna: campi leggeri appesi sotto l'intestazione. */
table.visitatori tr.col-filters th { background: var(--bg); padding-top: 0.4rem; padding-bottom: 0.6rem; }
table.visitatori tr.col-filters input {
    height: 32px; padding: 0 0.6rem; border-radius: var(--raggio);
    border-color: var(--border); font-size: var(--t-nota);
}

/* ------------------------------------------------------ filtri e schede */
.filters {
    background: var(--row-alt);
    border: 1px solid var(--border);
    border-radius: var(--raggio-grande);
    box-shadow: none;
    padding: 1.2rem 1.4rem;
    align-items: flex-start;
    gap: 1.2rem;
}
.filter-group { gap: 0.4rem; }
.filter-group label { font-size: var(--t-etichetta); font-weight: 500; }
/* I bottoni si allineano al CAMPO, non alla nota che sta sotto. */
.filter-group--bottom {
    align-self: flex-start;
    margin-top: calc(var(--t-etichetta) * 1.4 + 0.4rem);
}
.placeholder {
    background: var(--row-alt);
    border: 1px solid var(--border);
    border-radius: var(--raggio-grande);
    padding: 3rem 2rem;
}
.form-card {
    border: 1px solid var(--border);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
    padding: 2.2rem;
}
.form-fieldset { border-radius: var(--raggio); }
.form-fieldset legend, .form-card h2.section-title {
    font-family: var(--font-titoli);
    font-size: 1.15rem;
}

/* -------------------------------------------------------------- comandi */
/* Tutti della stessa altezza: prima "Excel", "Cerca" e la casella di ricerca
   erano tre misure diverse, e Salva era più alto di Annulla. */
.btn-primary, .btn-link, .btn-secondary, .btn-cancel,
.page-actions input[type="text"], .page-actions input[type="search"], .page-actions select,
.filter-group input[type="text"], .filter-group select, .filters button,
.nl-form input, .nl-form button {
    height: var(--h-comando);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: var(--t-comando);
    border-radius: var(--raggio);
}
.filter-group input[type="text"], .filter-group select, .nl-form input,
.page-actions input[type="text"], .page-actions input[type="search"], .page-actions select {
    justify-content: flex-start;
    font-size: var(--t-corpo);
    padding: 0 0.85rem;
}
.btn-primary {
    padding: 0 1.9rem;
    font-weight: 600;
    transition: filter .15s, box-shadow .15s, transform .08s;
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--fg) 88%, var(--bg));
    border-color: var(--fg);
    box-shadow: var(--ombra);
}
.btn-primary:active { transform: translateY(1px); }
.btn-link, .btn-secondary, .btn-cancel {
    padding: 0 1.15rem;
    background: var(--bg);
    border-color: var(--border);
    color: var(--fg);
    font-weight: 500;
    box-shadow: var(--ombra);
    transition: background .15s, border-color .15s;
}
.btn-link:hover, .btn-secondary:hover, .btn-cancel:hover {
    background: var(--row-alt);
    color: var(--fg);
    border-color: var(--border);
}
.icon-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border-color: var(--border);
    color: var(--muted);
    transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover {
    background: var(--row-alt);
    color: var(--fg);
    border-color: var(--fg);
}

/* ---------------------------------------------------------------- campi */
.form-field label { font-size: var(--t-etichetta); font-weight: 500; color: var(--muted); }
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select, .form-field textarea {
    min-height: var(--h-comando);
    padding: 0.65rem 0.9rem;
    font-size: var(--t-corpo);
    border-radius: var(--raggio);
    border-color: var(--border);
    transition: border-color .12s, box-shadow .12s;
}
/* La riga con la casella di spunta resta una riga, in tondo e col testo scuro:
   la regola delle etichette la trasformava in una scritta grigia in maiuscolo. */
.form-field label.checkbox-item, .checkbox-item,
.form-field label.checkbox-item span, .checkbox-item span {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-corpo);
    color: var(--fg);
    font-weight: 400;
}
.checkbox-item { display: inline-flex; align-items: center; gap: 0.6rem; }
.checkbox-item input[type="checkbox"] { margin: 0; }

/* -------------------------------------------------------------- dettagli */
.badge-hidden, .badge-accoglienza { border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.72rem; }
.alert { border-radius: var(--raggio); box-shadow: var(--ombra); }
.pagination { align-items: center; }
.pagination a { border-radius: var(--raggio); border-color: transparent; color: var(--muted); }
.pagination a:hover { border-color: var(--border); color: var(--fg); background: var(--row-alt); }
/* Collegamenti nel testo: colore del testo con sottolineatura, non il blu di
   sistema e non il verde. */
main a:not(.btn-link):not(.btn-secondary):not(.btn-primary):not(.btn-cancel):not(.icon-btn):not(.sort):not(.brand) {
    color: var(--fg);
    text-decoration-color: color-mix(in srgb, var(--fg) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}