/* Tema "moderno" — angoli tondi, superfici morbide, niente maiuscolo spaziato.
 *
 * Si carica per ultimo (BRAND_CSS=/branding/tema.css), quindi qui si possono
 * ridefinire i gettoni dell'interfaccia e, dove serve, aggiungere regole
 * proprie. Non tocca il funzionamento: solo l'aspetto.
 *
 * Il colore di base resta quello della configurazione (BRAND_COLORE): questo
 * foglio lo USA, non lo decide, così ogni cliente resta col proprio.
 */
:root {
    --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;
    --azione-bg: var(--green);
    --azione-fg: #fff;
    --superficie: var(--bg);
    --border: #E4E7EC;
    --row-alt: #F9FAFB;
    --muted: #667085;
    --fg: #101828;
}

:root[data-theme="dark"] {
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --border: #2E3238;
    --row-alt: #17191C;
    --muted: #98A2B3;
    --fg: #E8EAED;
    --azione-fg: #fff;
}

/* Barra in alto: da riga di testo maiuscolo a navigazione con pillole. */
.site-header { border-bottom: 1px solid var(--border); box-shadow: none; }
.site-header nav a {
    padding: .45rem .8rem;
    border-radius: 999px;
    font-weight: 500;
}
.site-header nav a:hover { background: var(--row-alt); }
.site-header nav a.active,
.site-header nav a[aria-current="page"] { background: var(--green); color: #fff; }

/* Titoli: stesso carattere del testo, peso alto invece del serif. */
h1, h2, h3 { letter-spacing: -0.01em; }
.page-title { font-weight: 700; }

/* Bottoni: pieni e tondi quello principale, delicati gli altri. */
.btn-primary { border-radius: var(--raggio); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); background: var(--green); border-color: var(--green); }
.btn-link, .btn-secondary {
    border-color: var(--border); color: var(--fg); font-weight: 500;
    background: var(--bg); box-shadow: var(--ombra);
}
.btn-link:hover, .btn-secondary:hover { background: var(--row-alt); color: var(--fg); }

/* Tabelle: intestazione chiara su fondo tenue, righe separate da linee sottili. */
table.visitatori { border: 1px solid var(--border); overflow: hidden; box-shadow: var(--ombra); }
table.visitatori th {
    background: var(--row-alt); font-weight: 600; font-size: .8rem;
    color: var(--muted); border-bottom: 1px solid var(--border);
}
table.visitatori td { border-bottom: 1px solid var(--border); }

/* Campi: bordo tenue e messa a fuoco col colore del cliente. */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], select, textarea {
    border-color: var(--border);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

/* Riquadri di filtro e stati vuoti: schede morbide invece di cornici squadrate. */
.filters, .placeholder { border-color: var(--border); background: var(--row-alt); }
.form-card { border-color: var(--border); }