:root {
    --colorTkePurple: #7000bd;
    --colorTkeOrange: #f26c08;
}

/* Il posto della barra di scorrimento resta sempre tenuto: quando una pagina o una scheda diventava
   piu' lunga dello schermo la barra compariva, il contenuto si stringeva di 15px e filtri, pulsanti e
   schede si spostavano di lato. */
#MainContent {
    scrollbar-gutter: stable;
}

/* La griglia a due colonne di "SALES Org" e "SERVICE Org" (FluentGrid, Id CompanyDashBoard) e' alta quanto
   il suo contenitore piu' i due margini da 8px che FluentGrid le toglie per le spaziature: senza, restava
   alta quanto il contenuto, le colonne non potevano dire "100%" e la pagina scorreva invece degli elenchi. */
#CompanyDashBoard {
    height: calc(100% + 16px);
}

/* Nei dialoghi FluentUI ad altezza fissa (in TKE quelli degli stati) il contenitore dentro il corpo
   (BaseFluentDialog, .fluetPassyDialog, 1.5rem di margine sopra) e' alto quanto il corpo. Senza altezza
   le catene di "height: 100%" del modulo si misuravano sul contenuto e uscivano di qualche pixel corte:
   la scheda e l'elenco delle regole facevano comparire barre di scorrimento per 5-10px. Cosi' scorre il
   contenuto della scheda, sotto le schede ferme. */
fluent-dialog:not([style*="--dialog-height: unset"]):not([class~="right"]):not([class~="left"]) .fluetPassyDialog {
    height: calc(100% - 1.5rem);
}

/* Le pagine, le schede, le tabelle e i riquadri entrano con una dissolvenza breve e salgono di 6px,
   invece di comparire di colpo. Parte solo quando l'elemento nasce: cambiare pagina o scheda li
   ricrea, aggiornare i dati no. `backwards` e non `both`: finita l'entrata non resta nessuna
   trasformazione, che farebbe da riferimento agli elementi `position: fixed` dentro.
   Solo sotto html.tke-animazioni, che App.razor accende quando la pagina prerenderizzata e' stata
   sostituita da quella interattiva: prima a ogni ricaricamento le entrate ripartivano e la pagina
   lampeggiava. */
html.tke-animazioni #MainContent > *,
html.tke-animazioni .mud-tab-panel-active,
html.tke-animazioni .passy-tab-content,
html.tke-animazioni .mud-table-container,
html.tke-animazioni .PassyCard,
html.tke-animazioni .mud-alert {
    animation: tke-entra 220ms cubic-bezier(0.2, 0, 0.2, 1) backwards;
}

@keyframes tke-entra {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* I dialoghi FluentUI si posano partendo da 96 come quelli MudBlazor (components.css), e il fondo scuro
   si accende insieme invece di scattare. I pannelli laterali (right, left) restano come sono. */
fluent-dialog:not([class~="right"]):not([class~="left"])::part(control) {
    animation: tke-dialogo-entra 200ms cubic-bezier(0.2, 0, 0.2, 1) backwards;
}

fluent-dialog::part(overlay) {
    animation: tke-dissolvenza 200ms ease-out backwards;
}

@keyframes tke-dialogo-entra {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes tke-dissolvenza {
    from {
        opacity: 0;
    }
}

/* I menu a comparsa FluentUI, come quello dell'utente, scendono di 4px aprendosi. */
.fluent-popover-content {
    animation: tke-menu-entra 160ms cubic-bezier(0.2, 0, 0.2, 1) backwards;
}

@keyframes tke-menu-entra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Le attese si vedono solo se durano: il velo grigio con il cerchio e la barra delle tabelle aspettano
   150ms trasparenti e poi si accendono. Una lettura veloce (30-100ms) faceva lampeggiare il velo e il
   cerchio; una lunga li mostra come prima. Non il velo che porta lo splash di una pagina ("Home",
   ascensore): lo splash ha il suo ritardo (app.css). Vale anche durante un ricaricamento: il circuito che ridisegna
   la pagina fa ripartire l'attesa, e un velo ricreato resta trasparente un po' di piu', senza lampi. */
.fluent-overlay:not(:has(.passy-application-loading-splash)),
.mud-table-loading-progress {
    animation: tke-dissolvenza 200ms ease-out 150ms backwards;
}

/* Al passaggio del mouse righe e schede cambiano colore in 140ms invece che di colpo. */
.PassyCard,
.mud-table-row {
    transition: background-color 140ms cubic-bezier(0.2, 0, 0.2, 1), border-color 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* La barra di caricamento delle tabelle passa sopra la prima riga invece di prendersi 4px: durante
   ogni ricerca le righe scendevano e poi risalivano. */
.mud-table-loading-row > .mud-table-loading {
    height: 0;
    padding: 0;
    border: 0;
}

.mud-table-loading-row .mud-table-loading-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Il cerchio di caricamento dei pulsanti FluentUI prende il posto dell'icona alla stessa misura: era
   di 16px contro 20, e il pulsante "Cerca" si stringeva di 4px a ogni ricerca. */
fluent-button > fluent-progress-ring[slot="start"] {
    width: 20px !important;
    height: 20px !important;
}

/* Chi ha chiesto meno movimento al sistema non ne vede nessuno: resta l'apparire. */
@media (prefers-reduced-motion: reduce) {
    #MainContent > *,
    .mud-tab-panel-active,
    .passy-tab-content,
    .mud-table-container,
    .PassyCard,
    .mud-alert,
    .fluent-popover-content,
    .fluent-overlay,
    .mud-table-loading-progress {
        animation: none !important;
    }

    fluent-dialog::part(control),
    fluent-dialog::part(overlay) {
        animation: none !important;
    }

    .PassyCard,
    .mud-table-row {
        transition: none;
    }
}