/* ==========================================================================
Shared Components — Buttons, Cards, Badges, Forms, Modals, Progress, etc.
========================================================================== */
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--neutral-300);
border-radius: var(--radius-md);
background: #fff;
color: var(--neutral-800);
font-size: var(--text-sm);
font-family: var(--font-family);
font-weight: var(--font-medium);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
text-decoration: none;
line-height: var(--leading-normal);
}
/* Bug #1140. `text-decoration: none` on hover too: base.css says
`a:hover { color: var(--primary-hover); text-decoration: underline }` at
(0,1,1), which beats `.btn`'s own `text-decoration` (0,1,0), so every
`` grew an underline under the pointer. `.btn:hover` is
(0,2,0) and wins whatever the load order (same fix as #1131 for `.sim-btn`). */
.btn:hover { background: var(--neutral-100); border-color: var(--neutral-400); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Substory #707, item 5 + item 3. Questa è TUTTA la quota di `.btn-*`: la
forma non ha più niente da chiudere. `.btn` legge `--radius-md`, che
design-system.css:301 fa alias di `--sim-radius`, lo stesso token che
`.sim-btn` legge — 12px da entrambe le parti, misurati. `min-height` invece
differisce davvero (`.sim-btn` porta `--sim-tap` 44px, `.btn` calcola 0), ma
è criterio di #767 per decisione precedente e prenderlo qui vorrebbe dire
rubare il varco di un'altra issue. Resta l'anello di fuoco, che finora su
ogni bottone legacy del prodotto era quello predefinito del browser
(`1px auto`): non una scelta di questo prodotto, e più sottile del minimo
di 2px che #778 ha fissato. */
.btn:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; }
/* Bug #839. Il fondo passa da `--primary` a `--action-fill`, e non è un
rinominare: `--primary` è tornato a essere il ROSSO DEL MARCHIO
(design-system.css, blocco alias), mentre il fondo di un bottone pieno resta
l'inchiostro. Con `--primary` qui dentro ogni `.btn-primary` della pagina
diventerebbe rosso — la lettera di ADR-0004, e l'errore che l'emendamento
del 2026-09-19 rifiuta per il rischio di somigliare alle pagine di IRCC.
`[data-primary-action]` ridefinisce `--action-fill` su di sé, quindi l'unico
`.btn-primary` che la pagina dichiara primario (la prima "Vedi la lista di
controllo" nella lista dei casi) prende l'accento e gli altri no. */
.btn-primary {
background: var(--action-fill);
color: #fff;
border-color: var(--action-fill);
}
/* Bug #1140. Each filled variant restates its white ink on hover. Without it
`a:hover` (0,1,1) beat `.btn-primary { color: #fff }` (0,1,0), and an
`` — the cases list's "Visualizza la lista di
controllo" — painted its label in the red hover colour on the red accent
fill: a blank bar, 1:1. Same leak on `.btn-secondary` / `.btn-success`.
`:active` is covered because a pressed pointer is still hovering; keyboard
focus never matches `a:hover`, so it keeps the resting `#fff`. */
.btn-primary:hover:not(:disabled) { background: var(--action-fill-hover); border-color: var(--action-fill-hover); color: #fff; }
.btn-secondary {
background: var(--neutral-700);
color: #fff;
border-color: var(--neutral-700);
}
.btn-secondary:hover:not(:disabled) { background: var(--neutral-800); color: #fff; }
.btn-outline {
background: transparent;
color: var(--primary);
border-color: var(--primary);
}
.btn-outline:hover:not(:disabled) { background: var(--primary-bg); }
.btn-danger {
color: var(--error);
border-color: transparent;
background: none;
padding: 0 var(--space-1);
font-size: var(--text-md);
}
.btn-danger:hover:not(:disabled) { color: var(--primary-hover); background: var(--error-light); }
.btn-success {
background: var(--success);
color: #fff;
border-color: var(--success);
}
.btn-success:hover:not(:disabled) { background: #1B5E20; color: #fff; }
.btn-lg {
padding: var(--space-3) var(--space-6);
font-size: var(--text-md);
border-radius: var(--radius-md);
}
/* --- Cards --- */
/* Substory #707, item 1. `--radius-md` -> `--radius-lg`, e non è un ritocco:
`--radius-md` è un alias di `--sim-radius` (12px) e `--radius-lg` di
`--sim-radius-lg` (18px), che è il raggio che `.sim-card` legge. Prima di
questa riga il prodotto disegnava DUE schede con due angoli diversi a
seconda di quale dei due sistemi di componenti avesse dipinto la pagina.
L'ombra non si tocca: `--shadow-md` è già un alias di `--sim-shadow`
(riga 304 di design-system.css), quindi le due schede la condividono già. */
.card {
background: #fff;
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-md);
transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
}
.card-body {
color: var(--neutral-700);
}
/* --- Badges --- */
.badge {
display: inline-block;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-medium);
line-height: 1.5;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: #795548; }
/* Substory #707, item 2. L'INCHIOSTRO si sposta, il FONDO no.
`--error` è un alias di `--sim-red` (#D22B3E), il rosso d'identità, e su
`--error-light` = `--sim-red-soft` (#FDECEE) misura 4.43:1 — sotto il 4.5
che WCAG 2.1 SC 1.4.3 chiede a un testo. `--sim-red-ink` (#B02334) esiste
per questo fondo e lo dice nella sua stessa dichiarazione
(design-system.css:101, "rosso leggibile su fondo rosa: 5.87 su
--sim-red-soft"). Il fondo resta rosa perché è l'identità dell'errore:
spostare il fondo su un neutro supererebbe la soglia lasciando il difetto
intatto e togliendo alla chip il colore che la fa leggere come errore.
Stessa correzione su tutte e sei le regole di questo file che portavano la
coppia: .badge-error (due volte), .validation-error, .modal .modal-error,
.doc-panel .doc-load-error, .form-status-failed. NON toccato: `--error` su
fondo neutro (.form-error-message, .modal-field-error, .summary-number.red),
che misura 5.05:1 su bianco ed è già corretto. */
.badge-error { background: var(--error-light); color: var(--sim-red-ink); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-neutral { background: var(--neutral-200); color: var(--neutral-700); }
/* Status badge (pill style for cases) */
.status-badge {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
.status-documents_pending { background: var(--warning-light); color: #795548; }
.status-documents_complete { background: var(--success-light); color: var(--success); }
.status-under_review { background: var(--info-light); color: var(--info); }
.status-created { background: var(--neutral-200); color: var(--neutral-700); }
/* --- Forms --- */
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--neutral-700);
margin-bottom: var(--space-1);
}
/* Substory #707, item 4. `.form-input` e `.form-control` SONO `.sim-input`.
=======================================================================
Nessuna delle due ha un consumatore: `.form-control` non compare da nessuna
parte nel repository — né CSS, né template, né JS — e `.form-input` ha
una regola e nessuno che la indossi. Il prodotto porta però i due nomi, e
il primo che li scriverà si aspetta il campo che questo prodotto ha. Quindi
invece di ammodernare una regola del 2019 la si ripunta sulle dichiarazioni
di `.sim-input` (design-system.css:625), che è l'unico campo del sistema.
PERCHÉ LA REGOLA STA QUI E NON NELL'ELENCO DI SELETTORI DI `.sim-input`.
Due ragioni, e nessuna delle due è di gusto:
1. ORDINE DI CARICAMENTO. base.html carica `design-system.css` e POI
`components.css`. Aggiungere `.form-input` all'elenco di `.sim-input`
lasciando in piedi la vecchia regola qui sotto le darebbe la stessa
specificità (0,1,0) e la vecchia, essendo più avanti, continuerebbe a
vincere: un diff che sembra una correzione e non cambia un pixel.
2. `apps/core/tests/test_beta_substory707_component_retheme_e2e.py`
::test_the_probed_classes_are_declared_only_in_components_css pretende
che queste classi siano dichiarate in UN foglio solo, ed è la
precondizione che rende valida su ogni pagina una misura presa sulla
landing. Una seconda dichiarazione in `design-system.css` vincerebbe o
perderebbe per ordine di caricamento pagina per pagina.
LE COSTANTI SONO DUPLICATE, E IL CONFRONTO È SORVEGLIATO. 10/13/16/1.3 sono
scritte anche qui perché `.sim-input` le scrive come numeri e non come
token, e inventare quattro token nuovi vorrebbe dire riscrivere una regola
del design system che questa substory non ha in perimetro. La deriva non è
affidata a questo commento: il test del punto 2 confronta 14 proprietà
calcolate di `.form-input` e `.form-control` con quelle di `.sim-input` a
ogni esecuzione della pipeline, e diventa rosso al primo valore che diverge.
`width: 100%` resta e non è in quel confronto: `.sim-input` dice sopra di
sé "la larghezza è disposizione, non aspetto", e quella di `.form-input`
era già lì. */
.form-input,
.form-control {
width: 100%;
display: block;
min-height: var(--sim-tap);
padding-block: 10px;
padding-inline: 13px;
border: 1px solid var(--sim-line-strong);
border-radius: var(--sim-radius);
background-color: var(--sim-surface);
color: var(--sim-ink);
font-family: var(--sim-font);
font-size: 16px;
line-height: 1.3;
}
.form-input::placeholder,
.form-control::placeholder { color: var(--sim-muted); }
/* Substory #707, item 3. L'anello di fuoco del sistema, lo stesso che
`.sim-btn`, `.sim-input`, `.sim-select`, `.sim-textarea`, `.sim-radio` e
`.sim-langswitch` dichiarano già — e lo stesso che `.drop-zone` usa già in
questo stesso file. Quello che c'era prima non era un anello più
discreto: era `box-shadow: 0 0 0 2px var(--primary-bg)` senza nessun
`outline`, e `--primary-bg` risolve a `--sim-soft` #F4F5F8, che su un campo
bianco misura 1.09:1. WCAG 2.2 SC 1.4.11 chiede 3:1 a un indicatore di
fuoco; `--sim-ink` ne misura 18.55. */
.form-input:focus-visible,
.form-control:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; }
/* --- Modals --- */
.modal-backdrop {
display: none;
position: fixed;
inset: 0; /* Bug #840: was top/left/right/bottom: 0. */
background: rgba(0, 0, 0, 0.5);
z-index: 100;
align-items: center;
justify-content: center;
}
.modal-backdrop.visible { display: flex; }
.modal {
background: #fff;
border-radius: var(--radius-lg);
padding: var(--space-8);
width: 90%;
max-width: 400px;
position: relative;
}
.modal h2 {
font-size: var(--text-xl);
margin-bottom: var(--space-4);
color: var(--neutral-900);
font-size: 1.3rem;
}
.modal .close-btn {
position: absolute;
top: var(--space-3);
/* Bug #840: was `right`. The dismiss control belongs in the corner the
reader's eye ends on, which is the left one in Urdu. */
inset-inline-end: var(--space-3);
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--neutral-500);
line-height: 1;
}
.modal .close-btn:hover { color: var(--neutral-900); }
.modal label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
margin-bottom: var(--space-1);
color: var(--neutral-700);
}
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="text"].password-visible {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--neutral-300);
border-radius: var(--radius-md);
font-size: var(--text-md);
margin-bottom: var(--space-3);
outline: none;
font-family: var(--font-family);
}
/* Substory #707, item 3 — lo stesso anello, sulla metà che un cliente incontra
davvero. Questa regola è la seconda metà della stessa prescrizione scaduta
di `.form-input:focus`, e il campo che dipinge è quello dell'email nella
modale di accesso: il primo modulo che la maggior parte dei visitatori vede.
Il bordo non cambia più colore al fuoco: `--primary` è tornato a essere il
ROSSO DEL MARCHIO (bug #839) e `.sim-input:focus-visible` non tocca il
bordo — è l'anello a dire dove sei. */
.modal input:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; }
/* --- Password Toggle --- */
.password-wrapper {
position: relative;
}
.password-wrapper input {
/* Bug #840: the well the toggle sits in, and the toggle below it, are one
pair — both physical, so in RTL the eye moved to the left of the field
while the hole stayed on the right and the glyph sat on top of the text. */
padding-inline-end: 2.5rem;
}
.password-toggle {
position: absolute;
inset-inline-end: var(--space-2);
top: 50%;
transform: translateY(calc(-50% - var(--space-3) / 2));
background: none;
border: none;
cursor: pointer;
color: var(--neutral-500);
font-size: var(--text-md);
padding: var(--space-1);
line-height: 1;
display: flex;
align-items: center;
}
.password-toggle:hover { color: var(--neutral-800); }
/* Bug #839, e QUI c'è una decisione, non solo un token rinominato.
Il bottone d'invio di una modale NON prende l'accento: resta l'inchiostro.
La modale galleggia sopra la pagina, e la pagina sotto continua a essere
dipinta — l'azione primaria della landing (`#send-btn`) è ancora lì, ancora
accentata, dietro il velo. Due rossi sullo stesso schermo sono esattamente
la rarità che questo bug viene a ripristinare, e "uno per schermata" è la
frase del criterio 1, non "uno per superficie".
E non serve: una modale ha già un velo, una trappola di fuoco e un solo
bottone pieno dentro di sé. Ciò che la rende l'unica cosa premibile non è
il colore, è che ha coperto tutto il resto.
`test_browser_design.py::test_the_modal_submit_is_the_ink_base_not_the_accent`
fissa questa decisione contro i valori scritti in ADR-0004, così promuovere
il submit all'accento diventa un cambio di record e non di foglio di stile. */
.modal .modal-submit {
width: 100%;
background: var(--action-fill);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-md);
font-weight: var(--font-medium);
cursor: pointer;
transition: background var(--transition-base);
font-family: var(--font-family);
}
.modal .modal-submit:hover { background: var(--action-fill-hover); }
.modal .modal-submit:disabled { opacity: 0.55; cursor: not-allowed; }
/* Substory #707, item 2 — vedi il commento su `.badge-error`. È l'unica delle
cinque superfici d'errore con un consumatore renderizzato: è il messaggio
che un accesso fallito mette sullo schermo. */
.modal .modal-error {
background: var(--error-light);
color: var(--sim-red-ink);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
margin-bottom: var(--space-3);
display: none;
}
.modal .modal-success {
background: var(--success-light);
color: var(--success);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
margin-bottom: var(--space-3);
display: none;
}
/* --- Inline field validation (bug #825) ---
*
* The page's replacement for the browser's constraint-validation bubble. The
* bubble was browser chrome: outside the DOM, unstyleable, and written in the
* browser's UI locale rather than the page's. These sit under the field they
* are about, in the page's own language.
*
* `display: none` while empty so nothing shifts on first paint, and so the
* probe in apps/accounts/tests/test_beta_bug825_auth_language_e2e.py counts
* only messages a person can actually read; the handler sets `display: block`
* together with the text.
*
* LOGICAL PROPERTIES ONLY, here and in .field-help. Urdu is RTL, and a
* `margin-left` would survive every LTR review and then detach the message
* from its field on /ur/ — which is what
* test_the_urdu_helper_line_fits_and_mirrors measures, by comparing the
* helper's inline-start edge with the input's.
*
* The negative block-start margin pulls each line up against the input, whose
* own `margin-bottom: var(--space-3)` would otherwise leave the message
* floating between two fields with nothing saying which it belongs to.
*/
.modal-field-error {
display: none;
color: var(--error);
font-size: var(--text-sm);
line-height: 1.4;
margin-block: calc(var(--space-2) * -1) var(--space-3);
margin-inline: 0;
padding-inline: 0;
text-align: start;
}
.modal input[aria-invalid="true"],
.auth-form input[aria-invalid="true"] {
border-color: var(--error);
}
/* The password rule, stated before the first keystroke and kept on screen
* while the person types. `.field-help--met` is the live check the issue asks
* for; it changes the colour only — the sentence itself is swapped through
* gettext() by the handler, so the state is readable and not merely green. */
.field-help {
color: var(--neutral-700);
font-size: var(--text-sm);
line-height: 1.4;
margin-block: calc(var(--space-2) * -1) var(--space-3);
margin-inline: 0;
padding-inline: 0;
text-align: start;
}
.field-help--met { color: var(--success); }
.modal .modal-link {
text-align: center;
font-size: var(--text-sm);
margin-top: var(--space-3);
}
.modal .modal-link a { color: var(--primary); cursor: pointer; }
.modal .modal-link a:hover { text-decoration: underline; }
/* --- Progress Bars --- */
.progress-bar {
height: 8px;
background: var(--neutral-300);
border-radius: var(--radius-sm);
overflow: hidden;
margin: var(--space-2) 0;
}
.progress-fill {
height: 100%;
background: var(--success);
border-radius: inherit;
transition: width 0.3s ease;
}
.progress-text {
font-size: var(--text-sm);
color: var(--neutral-600);
}
/* --- Summary Bar ---
DELETED by bug #1131, with `.summary-item`, `.summary-number`,
`.summary-label` and `.summary-item-link`. The four stat cards above the
Documenti section (Totale / Collegati / Mancanti / Avvisi) were the reason
the section started at y=708 on a 390x844 phone; #1131 takes them off the
screen and the counter card below answers the one question they did not.
The number the "Mancanti" card carried (`data-missing-count`) is now on the
card's primary action. */
/* --- The Documenti section (substory #711; bug #1131) ---
The screen `MobileDocs.dc.html` draws, on the design-system layer: one
counter card, then each group as a `.sim-group-head` label over ONE
`.sim-card--list` of compact rows, directly on the page background — no
wrapper card around the groups and no grey box per person (#1131, item 6).
#775's SIZE BUDGET IS INHERITED, not discarded: at 390x844 the card, the
MANCANTI heading and the first missing row must all clear the fold. That is
why the card is dense and why a row is one line.
What is left here is where a thing sits in the page and the parts of the row
no component knows about. Surfaces, buttons, headings and their states are
component classes on the elements. */
.documenti {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
/* THE CARD. Per person: the count still needed, drawn large, with its
sentence beside it; then one progress bar and the one primary action. */
.documenti-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
}
.documenti-counters {
display: flex;
flex-direction: column;
gap: 10px;
}
.documenti-counter {
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* The person is the quiet half and the number is the loud one. */
.documenti-counter-person {
font-size: var(--text-xs);
color: var(--sim-muted);
overflow-wrap: anywhere;
}
.documenti-counter-value {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--sim-ink);
line-height: 1.3;
}
/* The artboard's 34px/700. Baseline-aligned inside the sentence, so the
number and the words beside it read as one line in every word order. */
.documenti-counter-number {
font-size: 34px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin-inline-end: 6px;
}
.documenti-counter-number:empty { display: none; }
.documenti-progress {
height: 6px;
border-radius: 3px;
background: var(--sim-line);
overflow: hidden;
}
.documenti-progress-fill {
height: 100%;
border-radius: inherit;
background: var(--sim-ok);
}
/* "Carica i N che mancano": full width, 46px, the `+` the artboard draws. The
plus is a mask over `currentColor` rather than an inline