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

/* Bandeau d'annonce (MandatoryNotificationBanner) — posé entre le shell et la page, dans la même
   gouttière que les pages pour s'aligner sur leur contenu. Teinté d'accent et plat : les
   bandeaux teintés ne portent pas d'ombre (design-system, § Ombres). Il vit ici plutôt que
   dans un .razor.css pour la même raison que le reste du shell : la feuille globale. */
.mandatory-notice {
    display: flex;
    align-items: flex-start;
    gap: calc(12px * var(--g-scale));
    padding: calc(14px * var(--g-scale)) calc(14px * var(--g-scale)) calc(14px * var(--g-scale)) calc(20px * var(--g-scale));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 34%, transparent);
    border-radius: var(--g-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.mandatory-notice-texts {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    /* min-width: 0 — sans quoi un flex item ne descend jamais sous la largeur de son texte. */
    flex: 1 1 auto;
    min-width: 0;
}

.mandatory-notice-title {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

.mandatory-notice-message {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* La croix reste alignée sur la première ligne du titre malgré l'align-items: flex-start. */
.mandatory-notice .mandatory-notice-close {
    flex: 0 0 auto;
    margin-top: calc(-2px * var(--g-scale));
    color: var(--mud-palette-text-secondary);
}

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

/* ── Le menu « … » d'une ligne du référentiel boissons (planche 1A) ──
   Global et non scopé : le contenu d'un MudMenu est téléporté dans le fournisseur de popovers,
   hors de la page qui le déclare. Une pastille de couleur devant chaque geste, comme la planche ;
   l'archivage en rouge brique. */
.mb-row-menu-popover {
    border-radius: 18px;
    padding: calc(7px * var(--g-scale));
    min-width: 236px;
    box-shadow: var(--g-shadow-lg);
}

.mb-row-menu-popover .mud-list {
    padding: 0;
}

.mb-row-menu-popover .mb-menu-item {
    border-radius: 13px;
    padding: calc(9px * var(--g-scale)) calc(12px * var(--g-scale));
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.mb-row-menu-popover .mb-menu-item:hover {
    background: var(--mud-palette-background);
}

.mb-row-menu-popover .mb-menu-item .mud-menu-item-text::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: calc(11px * var(--g-scale));
    border-radius: 999px;
    vertical-align: middle;
    background: var(--mud-palette-primary);
}

.mb-row-menu-popover .mb-menu-item--solid .mud-menu-item-text::before { background: var(--g-family-solid); }
.mb-row-menu-popover .mb-menu-item--deep .mud-menu-item-text::before { background: var(--mud-palette-tertiary); }
.mb-row-menu-popover .mb-menu-item--sage .mud-menu-item-text::before { background: var(--mud-palette-secondary); }
.mb-row-menu-popover .mb-menu-item--danger .mud-menu-item-text::before { background: var(--g-family-wine); }
.mb-row-menu-popover .mb-menu-item--danger { color: var(--mud-palette-error); }

/* ── Les teintes du référentiel boissons (« GoStan - Boissons (référentiel) ») ──
   Cinq teintes de la planche qui ne sont pas des rôles MudBlazor, composées depuis eux pour que
   l'ambiance sombre suive : sable (#eddfc9), pêche (#ffc6a5) et son encre (#8c491a), sauge
   claire (#e2ebcf) et son encre (#3f4b2b), et l'encre des éléments actifs. Posée sur l'enveloppe
   de chaque écran du référentiel ; les variables héritent jusqu'aux composants enfants. */
.bv-palette {
    --mb-sand: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    --mb-sand-line: color-mix(in srgb, var(--mud-palette-primary) 24%, var(--mud-palette-surface));
    --mb-peach: color-mix(in srgb, var(--mud-palette-primary) 36%, var(--mud-palette-surface));
    --mb-peach-ink: var(--mud-palette-tertiary);
    --mb-sage: color-mix(in srgb, var(--mud-palette-secondary) 24%, var(--mud-palette-surface));
    --mb-sage-ink: color-mix(in srgb, var(--mud-palette-secondary) 55%, var(--mud-palette-text-primary));
    /* L'encre des éléments actifs, composée depuis le texte principal et non posée sur le rôle
       Dark : celui-ci reste sombre dans l'ambiance sombre, où il se confondait avec la surface.
       Ainsi l'élément actif s'inverse — encre en salle, crème en cave — et son texte prend la
       surface. Son accent (le libellé d'une carte KPI active) se mêle à cette encre. */
    --mb-ink: color-mix(in srgb, var(--mud-palette-text-primary) 90%, var(--mud-palette-surface));
    --mb-ink-text: var(--mud-palette-surface);
    --mb-ink-accent: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mb-ink-text));
}