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

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

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