/* ============================================================
   TIMBALY × MUDBLAZOR
   Correzioni a ciò che MudTheme non riesce a esprimere.

   Regola: qui si tocca SOLO MudBlazor, e solo con i token --tb-*.
   Se serve un valore che non è nei token, il token va aggiunto in
   timbaly-tokens.css, non inventato qui.

   Gli !important sono necessari perché MudBlazor.min.css è caricato
   prima e usa selettori di pari specificità: ogni occorrenza è motivata
   nel commento sopra la regola.
   ============================================================ */

/* ---------- Forma ----------
   MudTheme espone un solo raggio (DefaultBorderRadius, impostato a 2px per i
   controlli). Timbaly ne vuole due: 2px sui controlli, 4px sui contenitori (§5). */
.mud-paper,
.mud-card,
.mud-dialog,
.mud-table,
.mud-expansion-panels,
.mud-alert {
    border-radius: var(--tb-r-md);
}

/* --tb-r-full solo per pillole e avatar: qui si riafferma dove MudBlazor
   arrotonderebbe di suo. */
.mud-avatar,
.mud-chip {
    border-radius: var(--tb-r-full);
}

/* ---------- Separazione col bordo, non con l'ombra (§5) ---------- */
.mud-appbar {
    border-bottom: var(--tb-bw) solid var(--tb-rule);
}

.mud-drawer {
    border-right: var(--tb-bw) solid var(--tb-rule);
}

/* Il drawer dell'area Platform sta sotto una barra petrolio: il bordo destro
   resta, ma la superficie va tenuta chiara per leggibilità della navigazione. */
.mud-paper.mud-elevation-2.mud-drawer {
    box-shadow: none;
}

/* ---------- Testo secondario (ottone) ----------
   Nel tema Secondary = --tb-brass, che è il colore giusto per barre, bordi e
   icone ma NON per il testo: 3.86:1 su bianco, sotto il 4.5:1 richiesto (§4).
   MudBlazor colora il testo direttamente dalla palette, quindi il tema da solo
   non può distinguere i due usi: la distinzione si fa qui, dove si sa che
   l'elemento è testo. --tb-brass-text è lo stesso ottone a 5.69:1.

   Vale per MudText/MudTypography, per i bottoni text e outlined (dove il colore
   è il testo, non il fondo) e per i chip in variante text. I bottoni `filled`
   restano esclusi: lì il secondario è lo sfondo. */
.mud-secondary-text,
.mud-button-text-secondary,
.mud-button-outlined-secondary,
.mud-chip-text.mud-chip-color-secondary {
    color: var(--tb-brass-text);
}

/* ---------- Bottoni ----------
   Il maiuscolo forzato è già disattivato via Typography.Button.TextTransform.
   Qui si aggiunge solo il target tattile minimo di 44px (§5) e l'hover in
   ottone del bottone primario, come .tb-btn--primary:hover. */
.mud-button-root:not(.mud-icon-button) {
    min-height: var(--tb-tap);
}

.mud-button-filled.mud-button-filled-primary:hover:not(:disabled) {
    background-color: var(--tb-brass-text);
}

/* Bottone primario sulle superfici in petrolio (hero della dashboard, banner di
   onboarding). Serve una classe perché MudBlazor 9 preview NON genera
   `.mud-button-filled-surface`: un Filled con Color.Surface cade sulla regola
   generica `.mud-button-filled`, che dà testo primario (petrolio) su
   `action-default-hover` (quasi trasparente). Sul petrolio il risultato è
   petrolio su petrolio — invisibile finché non ci passi sopra col mouse.
   Qui la superficie è chiara e il testo petrolio: 12.35:1 (§3), e l'ombra
   materiale di MudBlazor sparisce perché in Timbaly si separa col bordo (§5). */
.mud-button-root.tb-btn-invert {
    background-color: var(--tb-surface);
    color: var(--tb-petrol);
    box-shadow: none;
}

.mud-button-root.tb-btn-invert:hover:not(:disabled) {
    background-color: var(--tb-brass-wash);
    color: var(--tb-petrol);
    box-shadow: none;
}

/* ---------- Selettore sito nella barra ----------
   L'etichetta è il nome del sito: deve restare su una riga sola dentro una barra
   alta 60px. `.mud-button-label` contiene anche le icone, quindi qui si tocca
   solo l'andata a capo — il troncamento del nome è fatto in C#, dove non rischia
   di tagliare il glifo. */
.tb-site-trigger .mud-button-label {
    white-space: nowrap;
}

/* A 375px la barra contiene menu, lockup, nome del sito, lingua e utente: il nome
   è l'unico che cresce (in tedesco anche del 30%, §10) e finiva sopra al logotipo,
   tagliato ai due lati. Si recupera spazio in due mosse.

   1. Via la parola "Timbaly": resta il simbolo, che è la variante Mark già prevista.
   2. Via le due icone del selettore, così `.mud-button-label` contiene SOLO testo
      e l'ellissi può agire senza mangiarsi il glifo — è la ragione per cui il
      troncamento sta in C# a schermo largo (vedi SiteSwitcher.razor).

   `min-width: 0` serve perché un figlio flex non si stringe sotto il proprio
   contenuto senza. */
@media (max-width: 599px) {
    .tb-logo--bar .tb-logo__word {
        display: none;
    }

    /* MudBlazor avvolge StartIcon/EndIcon in due span dentro `.mud-button-label`:
       il selettore deve prendere gli involucri, non gli <svg>. */
    .tb-site-trigger .mud-button-icon-start,
    .tb-site-trigger .mud-button-icon-end {
        display: none;
    }

    .tb-site-trigger {
        min-width: 0;
        overflow: hidden;
    }

    .tb-site-trigger .mud-button-label {
        max-width: 44vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- Campi ----------
   Il focus di MudBlazor colora il bordo col primario; in Timbaly il fuoco è
   sempre ottone, coerente con :focus-visible dei token e con .tb-input:focus. */
.mud-input-outlined-border {
    border-color: var(--tb-rule);
}

.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--tb-brass) !important;
    box-shadow: 0 0 0 3px rgba(168, 121, 46, .14);
}

/* ---------- Dati misurati ----------
   §4: il monospaziato segnala una misurazione. Le tabelle e i campi numerici
   sono il posto dove i numeri devono restare in colonna. */
.mud-table-cell .tb-metric,
.mud-input-slot[type="number"] {
    font-family: var(--tb-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tb-ls-mono);
}

/* ---------- Multilingua (§7) ----------
   Il tedesco cresce del 30%: le etichette dei bottoni e dei tab non devono
   essere troncate né forzare una riga sola quando lo spazio non basta. */
.mud-button-label {
    white-space: normal;
    overflow-wrap: break-word;
}

.mud-tab {
    min-width: 0;
}

/* ── Schede dei livelli di modello (Settings/AiConfig) ─────────────────────────────────────────
   MudBlazor stampa `align-items:center` su `label.mud-radio`, che con un'etichetta alta — qui
   l'etichetta è tutta la scheda: titolo, descrizione, tre righe di costo — piazza il pallino a metà
   del riquadro, staccato dalla parola che seleziona. Va in alto, accanto al titolo.

   Il mezzo gradino di scostamento allinea il centro del pallino alla riga del titolo: il controllo
   di MudBlazor ha un'area cliccabile più alta del glifo, quindi a flex-start nudo il pallino
   risulta un filo sopra il testo. */
.tb-tier-card .mud-radio {
    align-items: flex-start;
}

.tb-tier-card .mud-radio > .mud-input-control-boolean-input {
    margin-top: calc(-1 * var(--tb-s-1));
}

/* L'ottone come SFONDO di un filled secondario: il testo sopra è bianco e il rapporto
   è 3.86:1, lo stesso numero per cui l'ottone non è un colore di testo. Misurato sul
   chip «Free» della dashboard e sul bottone «Esporta sito (ZIP)». Portando il fondo su
   brass-text il bianco sale a 5.69:1, e la tinta resta la stessa famiglia. */
.mud-button-filled.mud-button-filled-secondary,
.mud-chip-filled.mud-chip-color-secondary {
    background-color: var(--tb-brass-text);
}

/* La regola qui sopra sui bottoni text/outlined secondari colora il ROOT, ma MudBlazor 9
   dipinge il testo sulla label interna, che vinceva sull'ereditarietà: misurato 3.86:1 su
   «Apri Chat» (outlined secondary) nonostante la regola esistesse già. */
.mud-button-text-secondary .mud-button-label,
.mud-button-outlined-secondary .mud-button-label {
    color: var(--tb-brass-text);
}

/* ===== Bersagli tattili =====
   Misurato a 375px: OGNI bottone-icona delle liste esce 26x26 — modifica,
   anteprima, versioni, elimina in Pagine; copia/comprimi/modifica/elimina in
   Media; e così in Piani SEO e nell'assistente. Il token --tb-tap (44px) esiste
   dal primo giorno e non era applicato a nessuno di loro: su un dito da 9mm
   quelle icone sono cinque bersagli affiancati da 26px, e si sbaglia riga.

   La regola vale sotto il breakpoint md e su qualsiasi puntatore grosso: un
   tablet a 1024px si tocca con il dito esattamente come un telefono, quindi la
   larghezza da sola non basta come criterio. */
@media (max-width: 959.98px), (pointer: coarse) {

    /* Due classi e non una: MudBlazor dichiara `min-width: auto` su
       `.mud-button-root`, che con una sola classe vinceva per specificità. Il
       sintomo era un bottone 44 di alto e 36 di largo — misurato sul menu
       «Altri strumenti» dell'elenco pagine: metà correzione, che è il modo
       peggiore di sbagliare perché sembra fatta. */
    .mud-button-root.mud-icon-button {
        min-width: var(--tb-tap);
        min-height: var(--tb-tap);
    }

    /* Le voci del menu di navigazione uscivano 42px: due in meno della soglia,
       e sono i bersagli che si toccano più spesso di tutti. */
    .mud-nav-link,
    .mud-nav-group > .mud-nav-link {
        min-height: var(--tb-tap);
    }

    /* Le file di icone nelle schede devono poter andare a capo, o il quarto
       bottone esce dallo schermo appena ognuno occupa i suoi 44px: è successo
       nella libreria media, che dopo la correzione sforava di 5px. */
    .mud-card-actions {
        flex-wrap: wrap;
    }

    /* MudBlazor mette il padding su Size.Small: senza azzerarlo il bottone
       cresce oltre i 44px e le file di icone vanno a capo. */
    .mud-icon-button.mud-button-root.mud-icon-button-size-small {
        padding: calc((var(--tb-tap) - 24px) / 2);
    }

    /* Le celle di azione di MudTable non devono allargarsi per compensare. */
    .mud-table-cell .mud-icon-button {
        margin: 0;
    }
}

/* ===== Nomi dei file nella libreria =====
   Misurato: tre nomi su quattro tagliati a 375px («il-pronto-intervento-di-
   idraulica-ferrari-4.jpg»). §10 vieta di troncare ciò che serve a riconoscere
   un elemento: il nome del file è l'unico modo che il cliente ha di distinguere
   due foto simili, quindi va a capo invece di finire in tre puntini. */
@media (max-width: 959.98px) {
    /* `.text-truncate` è l'utilità di MudBlazor che impone
       `white-space:nowrap; text-overflow:ellipsis`. Su schermo largo va bene;
       a 375px tagliava il nome di TRE file su quattro, e il nome è l'unico modo
       che il cliente ha di distinguere due foto simili (§10). */
    .mud-card-content .text-truncate,
    .mud-card .mud-typography-caption,
    .tb-media-name {
        overflow-wrap: anywhere;
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }
}