).
Non è un wrapper opzionale da ricordare pagina per pagina: l'identità è
applicata alla radice, i .ui-* restano componenti di layout da mettere
sopra. Le pagine pubbliche (login) stanno fuori da .container-page e non
vengono toccate. */
main .container-page {
--bs-table-bg: var(--ui-surface);
--bs-table-color: var(--ui-ink);
--bs-table-border-color: var(--ui-line);
--bs-table-striped-color: var(--ui-ink);
--bs-table-hover-color: var(--ui-ink);
}
/* .table → resa "ui-datalist-like" */
main .container-page .table {
font-size: .85rem; color: var(--ui-ink); border-color: var(--ui-line);
}
main .container-page .table > thead > tr > th {
font: 500 .66rem/1.2 var(--ui-font-body); letter-spacing: .07em; text-transform: uppercase;
color: var(--ui-ink-faint); background: var(--ui-surface-2);
border-bottom-color: var(--ui-line); vertical-align: middle;
}
main .container-page .table > :not(caption) > * > * { border-color: var(--ui-line); }
main .container-page .table > tbody > tr > td { vertical-align: middle; }
/* .badge → forma a pill + font del design system (i colori solidi di
Bootstrap restano: sono leggibili anche in scuro perché testo su fondo pieno) */
main .container-page .badge {
border-radius: 999px; font-family: var(--ui-font-body); font-weight: 600;
letter-spacing: .01em; padding: .35em .7em;
}
/* .nav-tabs → sottolineatura sobria coi token (es. log.php) */
main .container-page .nav-tabs { border-bottom-color: var(--ui-line); gap: 2px; }
main .container-page .nav-tabs .nav-link {
border: 0; border-bottom: 2px solid transparent; border-radius: 0;
font-family: var(--ui-font-body); font-weight: 500; color: var(--ui-ink-soft);
}
main .container-page .nav-tabs .nav-link:hover { color: var(--ui-ink); border-bottom-color: var(--ui-line); background: transparent; }
main .container-page .nav-tabs .nav-link.active {
color: var(--ui-brand); background: transparent; border-bottom-color: var(--ui-brand);
}
/* Rimappe SOLO in tema scuro: i colori "solidi" tarati su sfondo chiaro (numeri
.text-*, righe .table-*) sulla palette navy restano spenti/illeggibili. */
:root[data-bs-theme="dark"] main .container-page .text-success { color: var(--ui-ok) !important; }
:root[data-bs-theme="dark"] main .container-page .text-warning { color: var(--ui-warn) !important; }
:root[data-bs-theme="dark"] main .container-page .text-danger { color: var(--ui-crit) !important; }
:root[data-bs-theme="dark"] main .container-page .text-info,
:root[data-bs-theme="dark"] main .container-page .text-primary { color: var(--ui-info) !important; }
:root[data-bs-theme="dark"] main .container-page .text-muted { color: var(--ui-ink-faint) !important; }
/* righe/celle tabella tinteggiate contestualmente */
:root[data-bs-theme="dark"] main .container-page .table-success { --bs-table-bg: var(--ui-ok-bg); --bs-table-color: var(--ui-ink); }
:root[data-bs-theme="dark"] main .container-page .table-danger { --bs-table-bg: var(--ui-crit-bg); --bs-table-color: var(--ui-ink); }
:root[data-bs-theme="dark"] main .container-page .table-warning { --bs-table-bg: var(--ui-warn-bg); --bs-table-color: var(--ui-ink); }
:root[data-bs-theme="dark"] main .container-page .table-info { --bs-table-bg: var(--ui-info-bg); --bs-table-color: var(--ui-ink); }
/* =============================================================================
COMPONENTI
============================================================================= */
/* .ui-dash / .ui-page = helper di LAYOUT, opzionali. Il tema (colori, campi,
tabelle, badge, tipografia) arriva già da `main .container-page` + ponte
token: una pagina senza questo wrapper è comunque a tema. Qui si aggiunge
solo il ritmo verticale (stacco dalla navbar + margine fra i blocchi) e il
font display sui titoli inline. Layout a colonne = griglia Bootstrap
(.row / .col-*); dove i blocchi sono figli di .row usare .mb-3 nel markup
per non entrare in conflitto coi gutter negativi. */
.ui-dash, .ui-page {
font-family: var(--ui-font-body);
color: var(--ui-ink);
padding-top: 1.75rem; /* stacco dalla navbar */
}
/* Pagine senza wrapper .ui-page: dà lo stesso stacco al primo blocco del
design system (breadcrumb, o intestazione se la pagina non ha breadcrumb). */
.container-page > .ui-breadcrumb-nav:first-child,
.container-page > .ui-pagehead:first-child { margin-top: 1.75rem; }
.ui-dash > *, .ui-page > * { margin-bottom: var(--ui-gap); }
.ui-dash > *:last-child, .ui-page > *:last-child { margin-bottom: 0; }
.ui-dash h1, .ui-dash h2, .ui-dash h3, .ui-dash h4,
.ui-page h1, .ui-page h2, .ui-page h3, .ui-page h4 {
font-family: var(--ui-font-display);
color: var(--ui-ink);
}
/* --- Hero ------------------------------------------------------------------- */
.ui-hero {
border-radius: var(--ui-radius);
padding: 18px 20px;
background: linear-gradient(130deg, var(--ui-brand-deep), var(--ui-brand));
color: #fff;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.ui-hero__who { min-width: 0; }
.ui-hero h2 { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -.01em; color: #fff; }
.ui-hero__role {
display: inline-block; margin-top: 6px; font-size: .68rem; letter-spacing: .09em;
text-transform: uppercase; background: rgba(255,255,255,.16); padding: 3px 9px; border-radius: 6px;
}
.ui-hero__date { opacity: .82; font-size: .85rem; margin-top: 9px; text-transform: capitalize; }
.ui-hero__spacer { flex: 1; }
/* --- KPI ------------------------------------------------------------------- */
/* Colonne fluide: si adattano alla larghezza disponibile, nessun breakpoint
fisso, nessun riquadro "orfano" che lascia buchi. */
.ui-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 12px;
}
.ui-kpi {
position: relative; overflow: hidden;
background: var(--ui-surface); border: 1px solid var(--ui-line);
border-radius: var(--ui-radius-sm); padding: 14px 15px;
display: flex; flex-direction: column; gap: 5px;
}
.ui-kpi::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--_sc, transparent);
}
a.ui-kpi--link {
text-decoration: none; color: inherit;
transition: border-color .15s ease, filter .15s ease;
}
a.ui-kpi--link:hover { border-color: var(--ui-brand); filter: brightness(.99); }
a.ui-kpi--link:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
.ui-kpi__label {
font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
color: var(--ui-ink-faint);
}
.ui-kpi__value {
font-family: var(--ui-font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1;
color: var(--ui-ink); font-variant-numeric: tabular-nums;
}
.ui-kpi__sub { font-size: .78rem; color: var(--ui-ink-soft); }
.ui-kpi__chip {
position: absolute; right: 11px; top: 11px; width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center;
background: var(--_scbg, var(--ui-surface-2)); color: var(--_sc, var(--ui-ink-soft)); font-size: 1rem;
}
.ui-kpi--ok { --_sc: var(--ui-ok); --_scbg: var(--ui-ok-bg); }
.ui-kpi--warn { --_sc: var(--ui-warn); --_scbg: var(--ui-warn-bg); }
.ui-kpi--crit { --_sc: var(--ui-crit); --_scbg: var(--ui-crit-bg); }
.ui-kpi--info { --_sc: var(--ui-info); --_scbg: var(--ui-info-bg); }
/* --- Card -------------------------------------------------------------------- */
/* Il layout a colonne lo fa la griglia Bootstrap (.row / .col-*); .ui-card
riempie in altezza la propria colonna così le card affiancate restano
allineate (foot in fondo via .ui-card__body{flex:1}). */
.ui-card {
height: 100%;
background: var(--ui-surface); border: 1px solid var(--ui-line);
border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm);
display: flex; flex-direction: column; overflow: hidden;
}
.ui-card--attention { border-left: 3px solid var(--_sc, var(--ui-warn)); }
.ui-card--ok { --_sc: var(--ui-ok); }
.ui-card--warn { --_sc: var(--ui-warn); }
.ui-card--crit { --_sc: var(--ui-crit); }
.ui-card--info { --_sc: var(--ui-info); }
.ui-card__header {
display: flex; align-items: center; gap: 11px; padding: 13px 15px;
border-bottom: 1px solid var(--ui-line);
}
.ui-card__header h3 {
font-family: var(--ui-font-display); font-size: .95rem; font-weight: 700; margin: 0; flex: 1;
color: var(--ui-ink);
}
.ui-card__body {
padding: 15px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.ui-card__body--flush { padding: 0; }
.ui-card__foot { padding: 12px 15px; border-top: 1px solid var(--ui-line); }
/* Input data/ora: in tema scuro la lente/calendario nativa è scura su scuro,
quasi invisibile — la schiariamo (solo dentro il design system). */
:root[data-bs-theme="dark"] main .container-page
:is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.4);
}
/* icona in chip */
.ui-ichip {
width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
background: var(--ui-surface-2); color: var(--ui-ink-soft); font-size: 1rem;
}
.ui-kebab, .ui-kebab:hover, .ui-kebab:focus { color: var(--ui-ink-faint); flex: none; font-size: 1.05rem; line-height: 1; }
.ui-kebab:hover { color: var(--ui-ink); }
/* --- Pill / stato --------------------------------------------------------- */
.ui-pill {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: .74rem; font-weight: 500; padding: 3px 10px; border-radius: 999px;
background: var(--_scbg, var(--ui-surface-2)); color: var(--_sc, var(--ui-ink-soft));
}
.ui-pill--ok { --_sc: var(--ui-ok); --_scbg: var(--ui-ok-bg); }
.ui-pill--warn { --_sc: var(--ui-warn); --_scbg: var(--ui-warn-bg); }
.ui-pill--crit { --_sc: var(--ui-crit); --_scbg: var(--ui-crit-bg); }
.ui-pill--info { --_sc: var(--ui-info); --_scbg: var(--ui-info-bg); }
/* --- Bottoni ------------------------------------------------------------- */
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 18px; border-radius: var(--ui-radius-sm);
font-family: var(--ui-font-body); font-weight: 500; font-size: .88rem;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: filter .15s ease, background-color .15s ease;
}
.ui-btn:hover { filter: brightness(.96); text-decoration: none; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn.disabled { opacity: .5; pointer-events: none; }
.ui-btn--block { width: 100%; }
/* colore esplicito anche su :hover/:focus per battere `a:hover` di custom.css */
.ui-btn--primary, .ui-btn--primary:hover, .ui-btn--primary:focus { background: var(--ui-brand); color: #fff; }
.ui-btn--ghost, .ui-btn--ghost:hover, .ui-btn--ghost:focus { background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink); }
.ui-btn--onbrand, .ui-btn--onbrand:hover, .ui-btn--onbrand:focus { background: #fff; color: var(--ui-brand-deep); }
.ui-btn--danger, .ui-btn--danger:hover, .ui-btn--danger:focus { background: var(--ui-crit); color: #fff; }
.ui-btn--soft, .ui-btn--soft:hover, .ui-btn--soft:focus { background: var(--ui-surface-2); border-color: var(--ui-line); color: var(--ui-ink); }
.ui-btn--ok, .ui-btn--ok:hover, .ui-btn--ok:focus { background: var(--ui-ok); color: #fff; }
.ui-btn--warn, .ui-btn--warn:hover, .ui-btn--warn:focus { background: var(--ui-warn); color: #fff; }
/* pagina corrente all'interno di un gruppo di azioni di modulo */
.ui-btn.is-active { box-shadow: inset 0 0 0 2px var(--ui-brand); font-weight: 700; }
/* --- Intestazione di pagina (uiPageHead) ---------------------------- */
.ui-pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: var(--ui-gap); }
.ui-pagehead h1 {
display: flex; align-items: center; gap: 10px; margin: 0;
font-family: var(--ui-font-display); font-weight: 700;
font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.75rem);
color: var(--ui-ink);
}
.ui-pagehead__ico { display: inline-flex; color: var(--ui-brand); font-size: 1.15rem; }
.ui-pagehead__ico .bi, .ui-pagehead__ico svg { width: 1em; height: 1em; }
.ui-pagehead__spacer { flex: 1 1 auto; }
.ui-pagehead__act { display: flex; flex-wrap: wrap; gap: 8px; }
/* Form a livello di pagina: figlio diretto di .container-page (o di .ui-page),
con intestazione uiPageHead ma senza ui-card attorno. Gli diamo la cornice
di una ui-card. Regola di componente: un form "di pagina" ha sempre questo
contenitore; chi vuole controllo pieno mette una ui-card esplicita (allora
il :not(:has(.ui-card)) qui sotto si disattiva). Padding generoso per
assorbire i gutter negativi della .row di Bootstrap. */
.container-page:has(> .ui-pagehead) > form:not(:has(.ui-card)),
.ui-page > form.needs-validation:not(:has(.ui-card)) {
background: var(--ui-surface);
border: 1px solid var(--ui-line);
border-radius: var(--ui-radius);
box-shadow: var(--ui-shadow-sm);
padding: 20px 22px;
}
/* --- Breadcrumb (uiBreadcrumb) --------------------------------------- */
/* Sostituisce il markup copiato a mano in ~94 pagine (classi Bootstrap
`breadcrumb breadcrumb-chevron bg-body-tertiary rounded-4` + varianti
incoerenti sui link). Un'unica resa, con i token del design system. */
.ui-breadcrumb-nav { margin-bottom: var(--ui-gap); }
.ui-breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
margin: 0; padding: 0; list-style: none;
font-family: var(--ui-font-body); font-size: .85rem; line-height: 1.4;
}
.ui-breadcrumb__item { display: inline-flex; align-items: center; color: var(--ui-ink-faint); }
.ui-breadcrumb__item + .ui-breadcrumb__item::before {
content: "\203A"; margin-right: 8px; color: var(--ui-ink-faint); font-weight: 400;
}
.ui-breadcrumb__item a { color: var(--ui-ink-soft); text-decoration: none; border-radius: 6px; }
.ui-breadcrumb__item a:hover, .ui-breadcrumb__item a:focus-visible { color: var(--ui-brand); text-decoration: underline; }
.ui-breadcrumb__item--active { color: var(--ui-ink); font-weight: 600; }
/* --- Toolbar azioni di pagina (uiToolbar) --------------------------- */
/* Riga di azioni subito sotto il breadcrumb. Convenzione: UNA sola azione
primaria (la principale della pagina), il resto `--soft`; stesso set e
stesso ordine per tutte le pagine dello stesso modulo. */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ui-gap); }
.ui-toolbar .ui-btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
.ui-toolbar { gap: 6px; }
.ui-toolbar .ui-btn { flex: 1 1 auto; }
}
/* .ui-btn dentro un .input-group di Bootstrap: raccorda gli angoli come farebbe
Bootstrap con un .btn (che ha border-radius proprio, non ereditato). */
.input-group > .ui-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .ui-btn:not(:last-child) { border-radius: 0; }
/* --- Stat line / ministats --------------------------------------------- */
.ui-statline { display: flex; align-items: baseline; gap: 8px; font-size: .86rem; color: var(--ui-ink-soft); }
.ui-statline b {
font-family: var(--ui-font-display); font-weight: 700; font-size: 1.05rem; color: var(--ui-ink);
font-variant-numeric: tabular-nums;
}
.ui-ministats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-ministat {
background: var(--ui-surface-2); border-radius: var(--ui-radius-sm); padding: 10px 12px;
display: flex; flex-direction: column; gap: 3px;
}
.ui-ministat__num {
font-family: var(--ui-font-display); font-weight: 700; font-size: 1.25rem; color: var(--ui-ink);
font-variant-numeric: tabular-nums;
}
.ui-ministat__lab { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-ink-faint); }
/* --- Testo lungo (privacy, termini, informative) --------------------- */
.ui-longform { max-width: 80ch; }
.ui-longform h1, .ui-longform h2 { font-family: var(--ui-font-display); font-size: 1.4rem; font-weight: 700; color: var(--ui-ink); margin: 1.6em 0 .5em; }
.ui-longform h3, .ui-longform h4, .ui-longform h5 { font-family: var(--ui-font-display); font-size: 1.05rem; font-weight: 700; color: var(--ui-ink); margin: 1.3em 0 .4em; }
.ui-longform p, .ui-longform li { color: var(--ui-ink-soft); line-height: 1.65; }
.ui-longform ul, .ui-longform ol { padding-left: 1.3em; }
.ui-longform a { color: var(--ui-brand); text-decoration: underline; }
.ui-longform > :first-child { margin-top: 0; }
/* --- Avviso ------------------------------------------------------------- */
.ui-avviso h4 { margin: 0 0 4px; font-size: .9rem; font-weight: 600; color: var(--ui-ink); }
.ui-avviso time { font-size: .74rem; color: var(--ui-ink-faint); }
.ui-avviso p { margin: 6px 0 0; font-size: .84rem; color: var(--ui-ink-soft); }
/* --- Data list (tabella → lista su mobile) ---------------------------- */
.ui-datalist { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ui-datalist th {
text-align: left; font: 500 .66rem/1 var(--ui-font-body); letter-spacing: .07em; text-transform: uppercase;
color: var(--ui-ink-faint); padding: 9px 12px; border-bottom: 1px solid var(--ui-line);
}
.ui-datalist td { padding: 10px 12px; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); vertical-align: middle; }
.ui-datalist tbody tr:last-child td { border-bottom: 0; }
.ui-datalist tbody tr[role="link"], .ui-datalist tbody tr.is-clickable { cursor: pointer; }
.ui-datalist tbody tr.is-clickable:hover td { background: var(--ui-surface-2); }
/* Cella "a due righe": principale + secondaria.
Vale per QUALSIASI td di .ui-datalist, così ogni elenco rende la riga
secondaria allo stesso modo senza dover ricordare una classe (.ui-veh
resta come alias storico). */
.ui-datalist td > b { display: block; font-weight: 500; }
.ui-datalist td > b ~ span { display: block; font-size: .76rem; color: var(--ui-ink-faint); font-style: normal; }
.ui-datalist .ui-veh b { display: block; font-weight: 500; }
.ui-datalist .ui-veh span { font-size: .76rem; color: var(--ui-ink-faint); }
.ui-datalist__empty { padding: 22px 12px; text-align: center; color: var(--ui-ink-faint); }
/* =============================================================================
RESPONSIVE (viewport-based: supporto universale)
============================================================================= */
@media (max-width: 719.98px) {
.ui-hero { gap: 12px; }
.ui-hero__spacer { display: none; }
.ui-hero .ui-btn { width: 100%; }
.ui-datalist thead { display: none; }
.ui-datalist, .ui-datalist tbody, .ui-datalist tr, .ui-datalist td { display: block; width: 100%; }
.ui-datalist tr {
border: 1px solid var(--ui-line); border-radius: 12px; margin-bottom: 10px; padding: 4px 2px;
}
.ui-datalist tbody tr:last-child { margin-bottom: 0; }
.ui-datalist td {
border: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 8px 12px; text-align: right;
}
.ui-datalist td::before {
content: attr(data-label);
font: 500 .64rem/1.4 var(--ui-font-body); letter-spacing: .06em; text-transform: uppercase;
color: var(--ui-ink-faint); text-align: left;
}
.ui-datalist td:empty { display: none; }
.ui-datalist .ui-veh { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
.ui-btn, a.ui-kpi--link { transition: none; }
}
/* =====================================================================
Menu e footer — rifinitura coerente col design system.
Scoped su #header / #footer, caricato dopo custom.css. Nessuna modifica
strutturale: solo tipografia, colori dai token, spaziatura e dropdown.
===================================================================== */
/* --- Header / navbar -------------------------------------------------- */
#header .sitename { font-family: var(--ui-font-display); letter-spacing: .01em; }
#header .navbar .nav-link { font-family: var(--ui-font-body); font-weight: 500; }
/* barra di navigazione principale: in scuro `bg-body-tertiary` di Bootstrap
è un grigio che stona col resto della palette navy — la riportiamo su
--ui-surface (bianca in chiaro, navy in scuro) con hairline in basso. */
#header .navbar.bg-body-tertiary {
background-color: var(--ui-surface) !important;
border-bottom: 1px solid var(--ui-line);
}
#header .navbar.bg-body-tertiary .nav-link { color: var(--ui-ink-soft); }
#header .navbar.bg-body-tertiary .nav-link:hover,
#header .navbar.bg-body-tertiary .nav-link:focus,
#header .navbar.bg-body-tertiary .nav-item.show > .nav-link { color: var(--ui-brand); }
/* dropdown allineati a card/pill del resto dell'app */
#header .dropdown-menu {
border: 1px solid var(--ui-line);
border-radius: var(--ui-radius-sm);
box-shadow: var(--ui-shadow);
padding: 6px;
}
#header .dropdown-item { border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
#header .dropdown-item:hover,
#header .dropdown-item:focus { background: var(--ui-surface-2); color: var(--ui-brand); }
#header .dropdown-header {
font-family: var(--ui-font-display); font-size: .72rem;
text-transform: uppercase; letter-spacing: .06em; color: var(--ui-ink-faint);
}
/* --- Footer -------------------------------------------------------------- */
/* Footer volutamente scuro in entrambi i temi: colori espliciti (non da
token di superficie) così regge sia in chiaro sia in scuro. */
#footer.footer {
background-color: var(--ui-brand-deep);
color: #c3cbec;
padding: 40px 0 26px;
margin-top: 3rem !important;
}
#footer .container { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#footer img { height: 92px; width: auto; margin-bottom: 12px; }
#footer h3.sitename { font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
#footer p { font-size: .9rem; font-style: normal; margin: 0 0 14px; line-height: 1.6; color: #b3bce3; }
#footer a { color: #fff; }
#footer a:hover { color: #fff; text-decoration: underline; }
#footer .social-links { display: flex; justify-content: center; gap: 10px; margin: 2px 0 16px; }
#footer .social-links a {
width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .10); color: #fff; font-size: 1rem;
transition: background-color .2s ease;
}
#footer .social-links a:hover { background: var(--ui-brand); text-decoration: none; }
#footer .copyright {
padding-top: 16px; margin-top: 4px;
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: .8rem; color: #9fa9d4;
}
#footer .copyright a { color: #c3cbec; text-decoration: underline; }
#footer .copyright .sitename { color: #fff; }
/* =====================================================================
Campi form — aspetto unificato su OGNI pagina applicativa.
Scope `main .container-page`: non serve che la pagina abbia un wrapper
.ui-* — l'identità dei campi (bordo, raggio, superficie, focus brand,
etichette) è la stessa ovunque. :not(.is-invalid):not(.is-valid) per non
calpestare gli stati di validazione (bordo rosso/verde). Non tocchiamo
background-image: la freccetta della select resta quella di Bootstrap
(già theme-aware).
===================================================================== */
main .container-page :is(.form-control, .form-select):not(.is-invalid):not(.is-valid) {
border-color: var(--ui-line);
border-radius: var(--ui-radius-sm);
background-color: var(--ui-surface);
color: var(--ui-ink);
}
main .container-page :is(.form-control, .form-select):focus {
border-color: var(--ui-brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 25%, transparent);
}
main .container-page .form-label {
font-family: var(--ui-font-body); font-weight: 500;
font-size: .85rem; color: var(--ui-ink-soft); margin-bottom: 4px;
}