/* Solo regole strutturali e i pezzi riusati in piu pagine. I colori arrivano dal
   MudTheme via var(--mud-palette-*): le tinte chiare (sfondo di pillole, icone,
   righe evidenziate) nascono qui con color-mix, cosi seguono da sole il tema scuro. */

:root {
    --iq-titoli: 'Bricolage Grotesque', 'Onest', system-ui, sans-serif;

    /* Il colore principale, schiarito per gli sfondi e scurito per il testo che
       ci sta sopra. In tema scuro "scurito" vuol dire mescolato col testo chiaro:
       resta leggibile senza una seconda palette. */
    --iq-primario-tenue: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    --iq-primario-forte: color-mix(in srgb, var(--mud-palette-primary) 72%, var(--mud-palette-text-primary));

    --iq-deve: var(--mud-palette-warning);
    --iq-deve-tenue: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    --iq-credito: var(--mud-palette-success);
    --iq-credito-tenue: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    --iq-attesa: var(--mud-palette-tertiary);
    --iq-attesa-tenue: color-mix(in srgb, var(--mud-palette-tertiary) 12%, var(--mud-palette-surface));
    --iq-errore: var(--mud-palette-error);
    --iq-errore-tenue: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface));
    --iq-neutro-tenue: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, var(--mud-palette-surface));
    --iq-incavo: color-mix(in srgb, var(--mud-palette-text-secondary) 6%, var(--mud-palette-surface));

    /* Luce e gas: giallo e arancio, distinti anche per luminosita. */
    --iq-luce: #A16207;
    --iq-luce-tenue: color-mix(in srgb, #EAB308 18%, var(--mud-palette-surface));
    --iq-gas: #C2410C;
    --iq-gas-tenue: color-mix(in srgb, #F97316 15%, var(--mud-palette-surface));

    --iq-raggio: 20px;
    --iq-raggio-piccolo: 12px;
}

html, body {
    font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--mud-palette-background);
}

body {
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Scala tipografica ---------- */

.tipo-h1 { font-family: var(--iq-titoli); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }
.tipo-h2 { font-family: var(--iq-titoli); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.tipo-h3 { font-size: 17px; font-weight: 650; line-height: 1.35; margin: 0; }
.tipo-body { font-size: 15px; font-weight: 400; }
.tipo-small { font-size: 13.5px; font-weight: 400; color: var(--mud-palette-text-secondary); }

@media (min-width: 961px) {
    .tipo-h1 { font-size: 38px; }
    .tipo-h2 { font-size: 24px; }
}

/* Cifre grandi: stesso carattere dei titoli, sempre a colonne. */
.cifra {
    font-family: var(--iq-titoli);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Numeri e importi: allineati in colonna */
.numerico, .mud-table-cell.numerico {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.testo-lungo { max-width: 65ch; }
.testo-deve { color: var(--iq-deve); }
.testo-credito { color: var(--iq-credito); }
.testo-tenue { color: var(--mud-palette-text-secondary); }

/* ---------- Spaziature ---------- */

.pagina {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 16px 24px;
}

.sezione + .sezione { margin-top: 24px; }

@media (min-width: 961px) {
    .pagina { padding: 8px 40px 56px; }
    .sezione + .sezione { margin-top: 32px; }
}

/* Su telefono l'ultima riga non deve finire sotto la barra in basso. */
@media (max-width: 960px) {
    .pagina { padding-bottom: 104px; }
}

.pila { display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spingi-destra { margin-left: auto; }

.tabella-scorrevole { overflow-x: auto; }

/* Visibile solo da una parte della soglia del cassetto. */
@media (max-width: 960px) { .solo-desktop { display: none !important; } }
@media (min-width: 961px) { .solo-telefono { display: none !important; } }

/* ---------- Focus visibile in entrambi i temi ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

a { color: var(--mud-palette-primary); }

/* ---------- Pagine di accesso: esperienza dedicata a tutta pagina ---------- */

.accesso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 15% 0%, var(--iq-primario-tenue), transparent 55%),
        var(--mud-palette-background);
}

.accesso-card {
    width: 100%;
    max-width: 440px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 24px 48px -24px rgba(20, 23, 28, 0.18);
}

.accesso-marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.accesso-marchio span {
    font-family: var(--iq-titoli);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.accesso-card .tipo-h2 { font-size: 28px; }

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--mud-palette-text-primary);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    box-sizing: border-box;
    /* 16px evita lo zoom automatico su iOS al focus */
    font-size: 16px;
    font-family: inherit;
    padding: 11px 14px;
    min-height: 48px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--mud-palette-primary);
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.campo-aiuto {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}

.campo-errore {
    font-size: 13px;
    color: var(--mud-palette-error);
    margin-top: 6px;
}

.bottone-pieno {
    width: 100%;
    min-height: 50px;
    font-size: 15.5px;
    font-weight: 650;
    font-family: inherit;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.bottone-pieno:hover { filter: brightness(1.08); }
.bottone-pieno:disabled { opacity: 0.6; cursor: not-allowed; }

.avviso {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.avviso-errore {
    color: var(--mud-palette-error);
    background: var(--iq-errore-tenue);
}

.avviso-info {
    color: var(--mud-palette-text-primary);
    background: var(--iq-primario-tenue);
}

.avviso-ok {
    color: var(--iq-credito);
    background: var(--iq-credito-tenue);
}

/* ---------- Griglie riusate ---------- */

.griglia-due,
.griglia-tre {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 601px) {
    .griglia-tre { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 961px) {
    .griglia-due { grid-template-columns: 1fr 1fr; gap: 20px; }
    .griglia-tre { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Statistiche in fila: quante ne stanno, almeno 200px l'una. */
.griglia-stat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

@media (min-width: 961px) { .griglia-stat { gap: 16px; } }

/* Su telefono due per riga: una per riga, quattro numeri riempivano lo schermo. */
@media (max-width: 600px) {
    .griglia-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .griglia-stat .statistica { padding: 14px; border-radius: 16px; }
    .griglia-stat .statistica-valore { font-size: 20px; }
    .griglia-stat .statistica-etichetta,
    .griglia-stat .statistica-nota { font-size: 12.5px; }
}

/* Schede di persone o cose: due per riga su schermo largo. */
.griglia-schede {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}

@media (min-width: 961px) { .griglia-schede { gap: 20px; } }

/* ---------- Statistica: etichetta, cifra, nota ---------- */

.statistica {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 18px;
    padding: 16px 18px;
    min-width: 0;
}

.statistica-etichetta { margin: 0; font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.statistica-valore { margin: 4px 0 2px; font-size: 26px; }
.statistica-nota { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); }

@media (min-width: 961px) {
    .statistica { padding: 18px 20px; }
    .statistica-valore { font-size: 28px; }
}

/* ---------- Riquadro principale (l'"eroe" di una pagina) ---------- */

.eroe {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

@media (min-width: 961px) { .eroe { padding: 28px; gap: 22px; } }

.eroe-etichetta { margin: 0; font-size: 15px; font-weight: 600; opacity: 0.9; }
.eroe-cifra { font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.eroe-testo { margin: 12px 0 0; font-size: 15px; opacity: 0.92; max-width: 56ch; }

@media (min-width: 961px) { .eroe-cifra { font-size: 64px; } }

.eroe-dati {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary-text) 22%, transparent);
}

.eroe-dati p { margin: 0; }
.eroe-dati .eroe-dato-etichetta { font-size: 13px; opacity: 0.85; }
.eroe-dati .eroe-dato-valore { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }

.eroe .mud-button-filled {
    background: var(--mud-palette-primary-text) !important;
    color: var(--mud-palette-primary) !important;
}

.eroe .mud-button-outlined {
    color: var(--mud-palette-primary-text) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary-text) 50%, transparent) !important;
}

/* La versione chiara dello stesso riquadro, quando il protagonista e un saldo. */
.eroe--chiaro {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
}

.eroe--chiaro .eroe-dati { border-top-color: var(--mud-palette-divider); }
.eroe--chiaro .mud-button-filled { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; }

/* ---------- Titolo di sezione con un link a destra ---------- */

.testa-sezione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.testa-sezione h2 { margin: 0; }

.link-freccia {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    color: var(--iq-primario-forte);
}

.link-freccia:hover { text-decoration: underline; }

/* ---------- Elenchi a righe: la forma base di ogni lista ----------

   Una riga ha una tessera (icona o iniziale), un testo su due righe e una coda
   a destra (importo, stato, azioni). Funziona uguale su telefono e desktop: e
   la ragione per cui le liste non sono piu tabelle. */

.lista { display: flex; flex-direction: column; }

.riga {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-divider-light);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.lista > .riga:first-child,
.lista > :first-child > .riga { border-top: 0; }

a.riga, button.riga, .riga--cliccabile { cursor: pointer; }

button.riga {
    width: 100%;
    font: inherit;
    text-align: left;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

a.riga:hover, button.riga:hover, .riga--cliccabile:hover {
    background: linear-gradient(90deg, transparent, var(--mud-palette-table-hover) 8%, var(--mud-palette-table-hover) 92%, transparent);
}

.riga-testo { flex: 1 1 auto; min-width: 0; }

.riga-titolo {
    display: block;
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riga-sotto {
    display: block;
    margin: 1px 0 0;
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.riga-sotto--una { white-space: nowrap; }

.riga-coda {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.riga-importo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.riga-azioni { flex: none; display: flex; align-items: center; gap: 2px; }
.riga-freccia { flex: none; color: var(--mud-palette-text-disabled); }

/* Su telefono una riga con importo e menu lasciava al testo un dito di spazio:
   la coda (importo, stato) scende sotto il titolo e il testo prende la riga
   intera. Icona a sinistra e menu a destra restano dove sono. */
@media (max-width: 600px) {
    .riga:has(> .riga-coda) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 3px;
        align-items: center;
    }
    .riga:has(> .riga-coda) > .tessera,
    .riga:has(> .riga-coda) > .avatar { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .riga:has(> .riga-coda) > .riga-testo { grid-column: 2; grid-row: 1; }
    .riga:has(> .riga-coda) > .riga-coda {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px 10px;
        text-align: left;
    }
    .riga:has(> .riga-coda) > .riga-azioni,
    .riga:has(> .riga-coda) > .riga-freccia { grid-column: 3; grid-row: 1 / span 2; }
}

/* Intestazione di un gruppo (un mese, una categoria) dentro o sopra un elenco. */
.gruppo-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 6px;
    font-size: 14px;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.gruppo-testa span { font-weight: 400; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Tessere: il quadratino colorato con un'icona dentro ---------- */

.tessera {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--iq-neutro-tenue);
    color: var(--mud-palette-text-primary);
}

.tessera .mud-icon-root { font-size: 21px; }
.tessera--grande { width: 48px; height: 48px; border-radius: 14px; }
.tessera--primario { background: var(--iq-primario-tenue); color: var(--iq-primario-forte); }
.tessera--deve { background: var(--iq-deve-tenue); color: var(--iq-deve); }
.tessera--credito { background: var(--iq-credito-tenue); color: var(--iq-credito); }
.tessera--attesa { background: var(--iq-attesa-tenue); color: var(--iq-attesa); }
.tessera--errore { background: var(--iq-errore-tenue); color: var(--iq-errore); }
.tessera--luce { background: var(--iq-luce-tenue); color: var(--iq-luce); }
.tessera--gas { background: var(--iq-gas-tenue); color: var(--iq-gas); }

/* ---------- Pillole: stato o categoria scritti a parole ---------- */

.pillola {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--iq-neutro-tenue);
    color: var(--mud-palette-text-secondary);
}

.pillola .mud-icon-root { font-size: 15px; }
.pillola--primario { background: var(--iq-primario-tenue); color: var(--iq-primario-forte); }
.pillola--deve { background: var(--iq-deve-tenue); color: var(--iq-deve); }
.pillola--credito { background: var(--iq-credito-tenue); color: var(--iq-credito); }
.pillola--attesa { background: var(--iq-attesa-tenue); color: var(--iq-attesa); }
.pillola--errore { background: var(--iq-errore-tenue); color: var(--iq-errore); }
.pillola--luce { background: var(--iq-luce-tenue); color: var(--iq-luce); }
.pillola--gas { background: var(--iq-gas-tenue); color: var(--iq-gas); }

/* Lo stato senza sfondo, solo icona e parola: per le colonne fitte. */
.stato-testo { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.stato-testo .mud-icon-root { font-size: 17px; }

/* ---------- Avatar con l'iniziale ---------- */

.avatar {
    --tono: var(--mud-palette-primary);
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    background: color-mix(in srgb, var(--tono) 15%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--tono) 75%, var(--mud-palette-text-primary));
}

.avatar--piccolo { width: 32px; height: 32px; font-size: 13px; }
.avatar--grande { width: 48px; height: 48px; font-size: 18px; }
.avatar--t1 { --tono: var(--mud-palette-primary); }
.avatar--t2 { --tono: #0F766E; }
.avatar--t3 { --tono: #7C3AED; }
.avatar--t4 { --tono: #C2410C; }
.avatar--t5 { --tono: #BE185D; }
.avatar--t6 { --tono: #15803D; }

/* ---------- Schede: controllo a segmenti per scegliere una vista ---------- */

.schede {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--iq-neutro-tenue);
    max-width: 100%;
}

.schede--piena { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }

.scheda-voce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 14.5px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.scheda-voce:hover { color: var(--mud-palette-text-primary); }

.scheda-voce--attiva {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 650;
    box-shadow: 0 1px 3px rgba(20, 23, 28, 0.12);
}

.scheda-conta { font-size: 12.5px; font-weight: 500; color: var(--mud-palette-text-secondary); }

/* Filtri a pillola, in una fila che scorre se non ci stanno. */
.filtri {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.filtro {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.filtro--attivo {
    background: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

.filtro .scheda-conta { color: inherit; opacity: 0.75; }

/* ---------- Barra di proporzione (due o piu parti di un totale) ---------- */

.proporzione {
    display: flex;
    gap: 3px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--iq-neutro-tenue);
}

.proporzione > span { display: block; height: 100%; min-width: 4px; }

.legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
}

.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda strong { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.legenda-punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------- Riquadro incassato (dentro una scheda) ---------- */

.incavo {
    background: var(--iq-incavo);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 0;
}

.nota-info {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--iq-primario-tenue);
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.nota-info > .mud-icon-root { flex: none; color: var(--iq-primario-forte); }

/* ---------- Tabelle ---------- */

/* Override deliberato verso MudSimpleTable, che imposta i propri bordi. */
.riga-totale td {
    border-top: 1px solid var(--mud-palette-divider) !important;
}

.saldo-medio {
    font-family: var(--iq-titoli);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.azioni-riga {
    white-space: nowrap;
    text-align: right;
}

.riga-cliccabile { cursor: pointer; }

/* Tabelle con molte colonne: scorrono dentro la scheda invece di comprimersi. */
.tabella-scorrevole--larga > .mud-table {
    min-width: 700px;
}

/* Tabella che su telefono diventa un elenco di schede: ogni cella mostra la
   sua etichetta (data-etichetta) a sinistra e il valore a destra. La cella con
   .cella-titolo fa da intestazione della scheda. Cosi una tabella non scorre
   mai di lato e la colonna dell'importo non finisce fuori schermo. */
@media (max-width: 600px) {
    /* !important: MudSimpleTable rimette display:table-* con selettori piu
       specifici, e la tabella resterebbe una tabella schiacciata. */
    .tabella-card .mud-table-container { overflow: visible !important; }
    .tabella-card table,
    .tabella-card tbody,
    .tabella-card tr,
    .tabella-card td { display: block !important; width: 100% !important; }
    .tabella-card thead { display: none !important; }
    .tabella-card tbody tr {
        padding: 12px 0;
        border-top: 1px solid var(--mud-palette-divider-light);
    }
    .tabella-card tbody tr:first-child { border-top: 0; }
    .tabella-card.mud-simple-table table * tr > td,
    .tabella-card .mud-simple-table table * tr > td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0 !important;
        border: 0 !important;
        text-align: right;
        min-height: 28px;
    }
    .tabella-card td[data-etichetta]::before {
        content: attr(data-etichetta);
        flex: none;
        font-size: 13px;
        color: var(--mud-palette-text-secondary);
        text-align: left;
    }
    .tabella-card td.cella-titolo { justify-content: flex-start; text-align: left; font-weight: 650; font-size: 15px; }
    .tabella-card td.azioni-riga { justify-content: flex-end; padding-top: 6px !important; }
    .tabella-card td:empty { display: none !important; }
}

/* ---------- Caricamento file: label che avvolge un InputFile nascosto ---------- */

.carica-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    margin-top: 4px;
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 14px;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.carica-file:hover {
    border-color: var(--mud-palette-primary);
    color: var(--iq-primario-forte);
    background: var(--iq-primario-tenue);
}

.carica-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carica-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Elenchi nelle pagine di testo ---------- */

.elenco {
    margin: 0;
    padding-left: 20px;
    max-width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.elenco li { line-height: 1.55; }

.solo-lettori {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Chrome dell'applicazione (barra alta, cassetto, menu) ----------

   Queste classi finiscono su componenti MudBlazor (MudAppBar, MudDrawer,
   MudNavLink). L'isolamento CSS di Blazor mette l'attributo di scope solo sugli
   elementi HTML scritti nel file .razor, quindi le regole stanno qui, globali. */

.barra-app.mud-appbar {
    background: color-mix(in srgb, var(--mud-palette-background) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.barra-app .mud-toolbar { gap: 6px; }

.marchio-testo {
    font-family: var(--iq-titoli);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.mud-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

.cassetto {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 18px 12px 12px;
}

.cassetto-marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    text-decoration: none;
}

.cassetto-casa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
}

.cassetto-casa .tessera { width: 36px; height: 36px; border-radius: 10px; }
.cassetto-casa-nome { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.cassetto-casa-sotto { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); line-height: 1.25; }

.cassetto-piede { margin-top: auto; }

.nav-sezione {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu .mud-nav-link {
    min-height: 44px;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 2px;
    border-radius: 12px;
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
}

.mud-navmenu .mud-nav-link:hover { background: var(--mud-palette-table-hover); }

.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--iq-primario-tenue);
    color: var(--iq-primario-forte);
    font-weight: 650 !important;
}

.mud-navmenu .mud-nav-link.active .mud-nav-link-icon { color: var(--iq-primario-forte); }
.mud-navmenu .mud-nav-link-text { display: flex; align-items: center; gap: 8px; }

.nav-conta {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.nav-conta--attenzione { background: var(--mud-palette-warning); color: var(--mud-palette-warning-text); }
.nav-nota { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--mud-palette-text-secondary); }

/* ---------- Ritocchi ai componenti MudBlazor ----------

   Il look di serie e quello di Material: pulsanti in maiuscolo con l'ombra,
   angoli piccoli. Qui diventa quello di Inquilo una volta sola, per tutte le
   pagine e tutti i dialoghi. */

.mud-button-root.mud-button { border-radius: 12px; }
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active { box-shadow: none !important; }

.mud-button.mud-button-filled:not(.mud-button-size-small):not(.mud-button-size-large),
.mud-button.mud-button-outlined:not(.mud-button-size-small):not(.mud-button-size-large) {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
}

.mud-button.mud-button-text:not(.mud-button-size-small) { min-height: 40px; padding-left: 12px; padding-right: 12px; }
.mud-button.mud-button-size-large { min-height: 50px; border-radius: 14px; }
.mud-button.mud-button-size-small { min-height: 34px; border-radius: 10px; }

.mud-button-outlined { border-color: var(--mud-palette-divider); }
.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined:not([class*="mud-button-outlined-"]) { background: var(--mud-palette-surface); }

.mud-icon-button { border-radius: 12px; }

.mud-chip { border-radius: 999px; font-weight: 600; }

.mud-paper { border-radius: 16px; }
.mud-paper-outlined { border-color: var(--mud-palette-divider); }

.mud-dialog {
    border-radius: 24px;
    box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.35);
}

.mud-dialog .mud-dialog-title {
    padding: 20px 24px 8px;
    font-family: var(--iq-titoli);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mud-dialog .mud-dialog-title .mud-typography { font-family: var(--iq-titoli); font-weight: 700; font-size: 1.35rem; }
.mud-dialog .mud-dialog-content { padding-left: 24px; padding-right: 24px; }
.mud-dialog .mud-dialog-actions { padding: 12px 20px 20px; gap: 8px; }

/* Su telefono i dialoghi salgono dal basso, come un foglio. */
@media (max-width: 600px) {
    .mud-dialog-container { align-items: flex-end !important; }
    .mud-dialog-container .mud-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0;
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

.mud-alert { border-radius: 14px; }
.mud-snackbar { border-radius: 14px; font-weight: 500; }

.mud-input-outlined .mud-input-outlined-border { border-radius: 12px; }
.mud-input-control.mud-input-control-margin-dense { margin-top: 6px; }

.mud-expand-panel { border-radius: 14px; }
.mud-expand-panel .mud-expand-panel-header { min-height: 56px; }

.mud-popover { border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(20, 23, 28, 0.25); }
.mud-popover .mud-list { padding: 6px; }
.mud-popover .mud-menu-item,
.mud-popover .mud-list-item { border-radius: 10px; min-height: 42px; }

.mud-skeleton { border-radius: 12px; }

.mud-progress-linear { border-radius: 999px; }

.mud-tabs-tabbar { border-radius: 14px; }
.mud-tab { text-transform: none; font-weight: 600; letter-spacing: normal; }

.mud-simple-table table * tr > th {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-simple-table table * tr > td {
    font-size: 14.5px;
    border-bottom-color: var(--mud-palette-table-lines);
}

.mud-simple-table.mud-table-dense * tr td,
.mud-simple-table.mud-table-dense * tr th { padding: 10px 12px; }

.mud-simple-table.mud-table-dense * tr td:first-child,
.mud-simple-table.mud-table-dense * tr th:first-child { padding-left: 4px; }

.mud-simple-table.mud-table-dense * tr td:last-child,
.mud-simple-table.mud-table-dense * tr th:last-child { padding-right: 4px; }

.mud-simple-table tbody tr:last-child td { border-bottom: 0; }

.mud-table .mud-table-cell { border-bottom-color: var(--mud-palette-table-lines); }
.mud-table-head .mud-table-cell { font-weight: 600; font-size: 13px; color: var(--mud-palette-text-secondary); }

.mud-badge.mud-badge-default, .mud-badge { font-weight: 700; }

.mud-switch-span .mud-switch-track { border-radius: 999px; }

/* ---------- Scheda semplice (senza titolo predefinito) e pulsante tenue ---------- */

.scheda-semplice {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 22px;
    padding: 18px 18px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 961px) { .scheda-semplice { padding: 22px 22px 14px; } }

.scheda-titolo-semplice { margin: 0; font-size: 18px; font-weight: 650; }

/* La versione tenue del pulsante principale: quando la scheda ha gia un
   protagonista forte, due blu pieni farebbero a gara. */
.bottone-tenue.mud-button-filled {
    background: var(--iq-primario-tenue) !important;
    color: var(--iq-primario-forte) !important;
}

/* Nel riquadro principale il pulsante secondario e trasparente: su fondo blu
   un fondo "superficie" lo spegnerebbe. */
.eroe .mud-button-outlined { background: transparent !important; }

/* In tema scuro il blu principale e chiaro: un riquadro tutto di quel colore
   abbaglia. Diventa una tinta scura del blu, col testo chiaro sopra. */
.tema-scuro .eroe:not(.eroe--chiaro) {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-surface));
}

.tema-scuro .eroe:not(.eroe--chiaro) .eroe-dati { border-top-color: var(--mud-palette-divider); }

.tema-scuro .eroe:not(.eroe--chiaro) .mud-button-filled {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.tema-scuro .eroe:not(.eroe--chiaro) .mud-button-outlined {
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
}