/* ================================================
   STYLE GLOBAL — DA « Organic »
   Primitives : var(--g-*) (tokens.css).
   Ce qui bascule clair/sombre : var(--mud-palette-*)
   (générées par MudThemeProvider — OrganicTheme).
   ================================================ */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--mud-palette-background);
}

/* ================================================
   UTILITAIRES
   ================================================ */

.p-0 {
    padding: 0;
}

.m-0 {
    margin: 0;
}

/* Curseur (encore consommé par une douzaine de composants) */
.cursor-pointer {
    cursor: pointer;
}

/* ================================================
   ORGANIC — formes globales MudBlazor
   Boutons/chips en pilule, cartes 24px, dialogs 28px,
   menus/popovers 16px (le DefaultBorderRadius du thème).
   ================================================ */

/* Boutons : pilule */
.mud-button-root {
    border-radius: var(--g-radius-pill);
}

/* Chips : pilule */
.mud-chip {
    border-radius: var(--g-radius-pill);
}

/* Inputs mono-ligne outlined : pilule ; textarea garde le rayon du thème */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--g-radius-pill);
}

.mud-input.mud-input-outlined:has(textarea) .mud-input-outlined-border {
    border-radius: var(--g-radius-md);
}

/* Cartes : grand rayon 24px */
.mud-card {
    border-radius: var(--g-radius-card);
}

/* Dialogs : très grand rayon + backdrop flouté */
.mud-dialog {
    border-radius: var(--g-radius-lg);
}

.mud-dialog-container {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Menus / popovers : 16px suffit (DefaultBorderRadius du thème) */
.mud-popover,
.mud-menu-list {
    border-radius: var(--g-radius-md);
}

/* Tables */
.mud-table {
    border-radius: var(--g-radius-md);
}

.mud-table-head {
    font-weight: 600;
}

/* NavMenu popover menus — must sit above overlay (z-index 1400) */
.nav-popover-menu {
    z-index: 1500 !important;
}

.nav-popover-menu .mud-nav-link {
    color: var(--mud-palette-drawer-text);
    border-radius: 10px;
    margin: 2px calc(4px * var(--g-scale));
    font-weight: 500;
    font-size: 0.875rem;
}

.nav-popover-menu .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
}

.nav-popover-menu .mud-nav-link:hover {
    background: rgba(var(--mud-palette-action-default-rgb), 0.07) !important;
}

.nav-popover-menu .mud-nav-link.active {
    color: var(--mud-palette-drawer-text) !important;
    background: var(--mud-palette-background-gray) !important;
    font-weight: 600;
}

/* Flyout des tuiles du rail replié (NavTileTooltip → MudTooltip).
   Le contenu est rendu dans le MudPopoverProvider, hors du drawer et donc hors
   du CSS isolé de NavMenu : l'habillage « Organic » de la pilule doit vivre ici.
   Chargé après MudBlazor.min.css, à spécificité égale (0,2,0), on l'emporte
   sur .mud-tooltip.mud-tooltip-default.
   z-index : .mud-tooltip vaut --mud-zindex-tooltip (1600), ce qui ferait passer
   le flyout au-dessus des menus popover de la nav (.nav-popover-menu, 1500).
   On garde les 1400 d'origine — au-dessus de l'AppBar (1300), sous les menus. */
.mud-tooltip.nav-flyout-label {
    height: 40px;
    padding: 0 calc(16px * var(--g-scale));
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill);
    box-shadow: var(--g-shadow-md);
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    align-items: center;
    pointer-events: none;
    z-index: 1400;
}

/* ================================================
   SHELL — AppBar, drawer, contenu principal
   Global et non scopé à dessein : MudLayout est la racine de
   MainLayout.razor, donc MudAppBar/MudDrawer ne descendent d'aucun
   élément portant l'attribut de scope — un `::deep .gostan-appbar`
   dans MainLayout.razor.css ne matche jamais. Maquettes « Latérale &
   header » : pas d'ombre, un trait 1px lines-default entre le shell
   et la page (bordure basse de l'AppBar, bordure droite du drawer).
   ================================================ */

.gostan-appbar {
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

/* Boutons d'action : ronds 38px, survol en élévation. Leur couleur n'est pas posée ici :
   les boutons du header sont en `Color.Default`, MudBlazor leur donne action-default
   (#645c50 en clair, la maquette). Un `Color=` explicite est intouchable en CSS — les
   classes `.mud-*-text` de MudBlazor sont en `!important`. */
.gostan-appbar .mud-icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--g-radius-pill);
    transition: background 0.15s ease;
}

.gostan-appbar .mud-icon-button:hover {
    background: var(--mud-palette-gray-lighter);
}

.gostan-drawer {
    background: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Le drawer garde son overflow-y: auto : en mode mini le rail dépasse la hauteur
   d'écran dès qu'on a les deux sections. Les flyout labels sortent du drawer via
   le popover (NavTileTooltip), pas en relâchant l'overflow — qui, en overflow-x,
   faisait apparaître une barre de scroll horizontale et rognait les libellés. */

.mud-main-content {
    background: var(--mud-palette-background);
    /* dvh : hauteur réellement visible (barre du navigateur mobile déduite), vh en repli. */
    min-height: 100vh;
    min-height: 100dvh;
}

/* ================================================
   TYPOGRAPHIES PERSONNALISÉES
   (classes encore consommées : .section-title → SectionTitle.razor, Home.razor)
   ================================================ */

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: var(--g-space-4);
}

/* ================================================
   COMPOSANTS MÉTIER
   (.stock-badge → StockBadge.razor)
   ================================================ */

.stock-badge {
    display: inline-block;
    padding: var(--g-space-1) var(--g-space-2);
    border-radius: var(--g-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.stock-badge.high {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.stock-badge.medium {
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.stock-badge.low {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .section-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .mud-button-base {
        width: 100%;
    }
}

/* ================================================
   ACCESSIBILITÉ
   (focus-visible : géré globalement dans tokens.css)
   ================================================ */

/* Réduit les mouvements si préféré */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   NAV ICONS — base styles (global, needed because SVGs
   are rendered via MarkupString and don't receive
   Blazor CSS-isolation attributes)
   ===================================================== */

.nav-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.nav-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

/* Glyphes duotone historiques (jobs, pos-sales, beverages, legacy-import —
   SuperAdmin uniquement). Le jeu linéaire « Organic » colore par
   stroke="currentColor" et n'a pas besoin de ces classes. */
.ni-s {
    fill: var(--mud-palette-text-secondary);
    transition: fill 0.15s ease;
}

.ni-p {
    fill: var(--mud-palette-text-primary);
    transition: fill 0.15s ease;
}

/* Chemin accent (legacy-import.svg) : accent translucide */
.ni-accent {
    fill: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    transition: fill 0.15s ease;
}

/* Tooltip au survol des graphiques MudChart de la page Analyses (/metrics) uniquement — cf. .metrics-page sur MetricsPage.razor. */
/* Ne pas retirer ce scoping : .svg-tooltip est une classe interne MudBlazor utilisée par tous les MudChart de l'appli (dashboard Accueil compris). */
/* font-size est posé en attribut SVG sur <text> par ChartTooltip.razor, en unités du viewBox interne du chart (pas des px CSS) : */
/* le viewBox est mis à l'échelle vers la taille physique affichée (Width/Height), donc une même valeur ne rend pas la même taille visuelle */
/* selon le ratio viewBox/taille-affichée de chaque chart. Cible directement <text>/<tspan> (pas .svg-tooltip, le <g> parent, qui ne l'écrase pas via héritage). */
/* Référence visuelle ~14px : valable tel quel pour les bar charts avec MatchBoundsToSize="true" (paramètre MudChart depuis v9 ; viewBox = taille physique, échelle ~1). */
.metrics-page .svg-tooltip text,
.metrics-page .svg-tooltip tspan {
    font-size: 14px !important;
}

/* Donut/Pie (Charts/Pie.razor) : viewBox fixe 280x280 (Radius=140*2), mis à l'échelle vers Height. */
/* Compensation = 14 / (Height / 280) pour un rendu visuel ~14px. */
.metrics-page .metrics-donut-sales .svg-tooltip text,
.metrics-page .metrics-donut-sales .svg-tooltip tspan {
    font-size: 26px !important; /* Height 150px → échelle 0,536 */
}

.metrics-page .metrics-donut-nonconsumed .svg-tooltip text,
.metrics-page .metrics-donut-nonconsumed .svg-tooltip tspan {
    font-size: 22px !important; /* Height 180px → échelle 0,643 */
}

.metrics-page .metrics-donut-profitability .svg-tooltip text,
.metrics-page .metrics-donut-profitability .svg-tooltip tspan {
    font-size: 22px !important; /* Height 180px → échelle 0,643 */
}

.metrics-page .metrics-pie-supplier .svg-tooltip text,
.metrics-page .metrics-pie-supplier .svg-tooltip tspan {
    font-size: 18px !important; /* Height 220px → échelle 0,786 */
}

/* Bar chart sans MatchBoundsToSize (MetricsStockTab) : viewBox fixe 700x350 (MudBlazor v9), mis à l'échelle vers Height. */
.metrics-page .metrics-bar-stockvolumes .svg-tooltip text,
.metrics-page .metrics-bar-stockvolumes .svg-tooltip tspan {
    font-size: 19px !important; /* Height 260px → échelle 0,743 */
}

/* ================================================
   SÉLECTEUR D'ÉTABLISSEMENT DU HEADER
   Le contenu du popover est écrit dans
   TenantEstablishmentSelector.razor et porte donc son scope, mais
   le papier du popover (.tes-popover) et la MudList qui l'enveloppe
   (.tes-list) sont rendus par MudBlazor : hors scope, ils se règlent ici.
   ================================================ */

.mud-popover.tes-popover {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    box-shadow: var(--g-shadow-lg);
    overflow: hidden;
}

.tes-popover .tes-list {
    padding: 0;
    background: transparent;
}