/* Solo regole strutturali. I colori arrivano dal MudTheme via var(--mud-palette-*). */

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ---------- Scala tipografica (sezione 4 delle regole) ---------- */

.tipo-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; }
.tipo-h2 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; }
.tipo-h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0; }
.tipo-body { font-size: 15px; font-weight: 400; }
.tipo-small { font-size: 13px; font-weight: 400; color: var(--mud-palette-text-secondary); }

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

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

/* Blocchi di testo leggibili */
.testo-lungo { max-width: 65ch; }

/* ---------- Spaziature (sezione 3) ---------- */

.pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

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

@media (min-width: 961px) {
    .pagina { padding: 24px; }
    .sezione + .sezione { margin-top: 48px; }
}

/* ---------- Niente scroll orizzontale su mobile (sezione 3) ---------- */

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

/* ---------- Focus visibile in entrambi i temi (sezione 6.9) ---------- */

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

/* ---------- Pagine di accesso: esperienza dedicata full-bleed (eccezione 6.5) ---------- */

.accesso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--mud-palette-background-gray);
}

.accesso-card {
    width: 100%;
    max-width: 420px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: var(--mud-elevation-2);
}

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

.accesso-marchio span {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}


.campo { margin-bottom: 16px; }

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

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

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

.campo-aiuto {
    font-size: 12px;
    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: 46px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: 9px;
    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: 9px;
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid;
}

.avviso-errore {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.avviso-info {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

/* ---------- Griglie di card riusate in piu pagine ---------- */

.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: 24px; }
    .griglia-tre { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

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

/* ---------- Righe di tabella con azioni ---------- */

.saldo-medio {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

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

.riga-cliccabile { cursor: pointer; }

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

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

.carica-file:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

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

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

/* Tabelle con molte colonne: meglio farle scorrere dentro la card che
   comprimerle sotto la soglia di leggibilita. Lo scroll deve stare sul wrapper
   che MudSimpleTable genera, altrimenti le colonne finiscono tagliate fuori
   senza modo di raggiungerle. La pagina non scorre mai in orizzontale. */
.tabella-scorrevole--larga > .mud-table {
    min-width: 700px;
}

/* ---------- Spazio per la barra in basso su telefono ---------- */

/* Senza questo, l'ultima riga di ogni pagina finisce sotto la barra fissa. */
@media (max-width: 960px) {
    .pagina { padding-bottom: 76px; }
}

/* ---------- 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; }

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

   Queste tre classi finiscono su componenti MudBlazor (MudAppBar, MudText,
   MudDrawer). L'isolamento CSS di Blazor mette l'attributo di scope solo sugli
   elementi HTML scritti nel file .razor: la radice di un componente figlio non
   lo prende, e una regola in MainLayout.razor.css non arriverebbe mai. Per la
   barra alta e il menu non c'e nemmeno un elemento nostro sopra da cui partire
   con ::deep, quindi le regole stanno qui, globali. */
.barra-app {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.marchio-testo {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

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

.nav-sezione {
    display: block;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}