/* ProjectDesk global stylesheet.

   Where a style goes, first step that fits:
     1. a MudBlazor parameter or ProjectDeskTheme (palette, typography, LayoutProperties);
     2. a MudBlazor utility class;
     3. an app utility of section 6;
     4. the .razor.css of the component that writes the element;
     5. this file, for what is global only.
   An inline Style carries only a computed value.

   Traps of this dressing:
     - The app bar is in flow with an automatic height: --mud-appbar-height (LayoutProperties.AppbarHeight)
       only offsets the clipped side drawer, and the role-simulation strip above the bar is added to it.
     - The app bar toolbar has Gutters="false": its padding comes from the markup, not from MudBlazor.
     - --mud-palette-background-gray is MudBlazor's grey; "-grey" does not exist.

   Sections: 1 Tokens · 2 Base · 3 Shell · 4 MudBlazor dressing · 5 Out-of-tree DOM · 6 App utilities · 7 Mobile.
   Load order (App.razor): MudBlazor, Quill, this file, then the scoped bundle ProjectDesk.Web.styles.css. */

/* ─── 1. Tokens ─────────────────────────────────────────────── */
/* Every token below is identical in both color schemes: no dark-mode value. */
:root {
    /* Height of the two-row app bar: the value of LayoutProperties.AppbarHeight in ProjectDeskTheme,
       which emits --mud-appbar-height. Repeated here for the role-simulation offset below. */
    --app-header-height: 128px;
    --app-sim-banner-height: 40px;
    --app-bandeau-height: 40px;

    /* Brand colors: they sit on the red rocket body, not on the page background. */
    --app-rocket-red: #c62828;
    --app-rocket-white: #ffffff;

    /* Perial logo blue, taken from the logo gradient: the filled pill of the active project page tab, a
       darker shade on hover, its white text and its tinted shadow. */
    --app-perial-bleu: #2e5397;
    --app-perial-bleu-hover: #264676;
    --app-perial-bleu-contrast: #ffffff;
    --app-perial-bleu-ombre: rgba(46, 83, 151, .30);

    /* Committee violet: the committee drawer accent and one shade per committee type. The four darkest
       fills take white text, the two lightest the violet text. */
    --app-comite: #9b51e0;
    --app-comite-contrast: #ffffff;
    --app-comite-contrast-dark: #4c1d95;
    --app-comite-codir: #3b1676;
    --app-comite-copil: #5b2aa8;
    --app-comite-technique: #7f34d0;
    --app-comite-coproj: var(--app-comite);
    --app-comite-revue: #c696f0;
    --app-comite-autre: #e9d6f9;

    /* Status colors outside the MudBlazor palette, read by StatutChipColors, StatutChip, the Gantt charts and
       the status charts (StatutGraphiqueCouleurs). "À démarrer" is the neutral blue-grey of a bar or a chart
       slice; "En pause" a dark blue-grey, with a lighter stripe for pause periods; "Hypercare" a teal,
       apart from the blue of "En cours" and the green of "Terminé"; "Atteint en retard" orange, distinct
       from the green of "Atteint"; "Planifié" light grey; "Annulé" dark grey. */
    --app-statut-a-demarrer: #90a4c4;
    --app-statut-en-pause: #455a64;
    --app-statut-en-pause-contrast: #ffffff;
    --app-statut-en-pause-hachure: #78909c;
    --app-statut-hypercare: #0097a7;
    --app-statut-hypercare-contrast: #ffffff;
    --app-statut-atteint-en-retard: #f57c00;
    --app-statut-atteint-en-retard-contrast: #ffffff;
    --app-statut-planifie: #cfd8dc;
    --app-statut-planifie-contrast: #212121;
    --app-statut-annule: #616161;
    --app-statut-annule-contrast: #ffffff;

    /* Light red of the overshoot stripes of both Gantt charts, alternating with --mud-palette-error. */
    --app-gantt-depassement: #ef9a9a;

    /* Categorical palette of the programmes in the time-tracking calendar, assigned in order of the
       programme names (CalendrierMensuelSemaines), then the grey of a project without programme. */
    --app-programme-1: #2a78d6;
    --app-programme-2: #eb6834;
    --app-programme-3: #1baf7a;
    --app-programme-4: #eda100;
    --app-programme-5: #e87ba4;
    --app-programme-6: #008300;
    --app-programme-7: #4a3aa7;
    --app-programme-8: #e34948;
    --app-programme-aucun: #9193a3;
}

/* ─── 2. Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* The page never scrolls: MudMainContent does (section 4). */
html, body {
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    /* Cloud Dancer until MudThemeProvider has emitted its variables. */
    background-color: var(--mud-palette-background, #f0eee9);
}

/* ─── 3. Shell ──────────────────────────────────────────────── */
/* The role-simulation strip sits above the app bar: the clipped drawer must start below both. */
.mud-layout.has-role-simulation {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-sim-banner-height));
}

/* The application banner sits above everything, strip of the role simulation included: the drawer starts below all of them. */
.mud-layout.has-bandeau {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-bandeau-height));
}

.mud-layout.has-bandeau.has-role-simulation {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-sim-banner-height) + var(--app-bandeau-height));
}

.app-sim-banner { flex-shrink: 0; }

/* !important beats the py-1 utility of Perial.Blazor's RoleSimulationBanner: the strip has an exact height. */
.app-sim-banner > .mud-paper {
    height: var(--app-sim-banner-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.app-sim-banner > .mud-paper > * { height: 100%; }

/* Two-row app bar: title row, then the navigation tabs. Repeats MudBlazor's toolbar selectors to win
   on specificity and order: the toolbar stacks its rows and takes their height. */
.app-header .mud-toolbar,
.app-header .mud-toolbar-appbar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: auto;
}

.app-header-logo {
    height: 80px;
    width: 80px;
}

.app-header-tagline { opacity: 0.7; }

.app-rocket-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Top navigation tabs. */
.nav-row {
    overflow-x: auto;
    scrollbar-width: thin;
}

.nav-tab.mud-button-root {
    border-radius: 0;
    min-width: auto;
    padding: 8px 16px;
    font-weight: 400;
    font-size: 0.8125rem;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, background-color 0.2s;
}

.nav-tab.mud-button-root .mud-icon-button-label,
.nav-tab.mud-button-root .mud-button-icon-start {
    font-size: 1.125rem;
    margin-right: 4px;
}

.nav-tab.mud-button-root:hover:not(:disabled) {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
}

.nav-tab-active.mud-button-root {
    opacity: 1;
    font-weight: 500;
    box-shadow: inset 0 -3px 0 0 currentColor;
}

/* ─── 4. MudBlazor dressing ─────────────────────────────────── */
/* The layout is a full-height column: app bar, then the main content, which is the only scroll zone. */
.mud-layout {
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* No top padding: the app bar is in flow (see the header comment). */
.mud-main-content {
    background: transparent;
    flex: 1 1 0%;
    min-height: 0;
    padding-top: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* The app bar and the drawers never take the theme's rounded corners (neither has a Square parameter). */
.mud-appbar {
    border-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer { border-radius: 0; }

/* MudBlazor's required-field asterisk (.mud-input-required, from Required="true") only sets content: "*",
   so it renders in the label's color: every mandatory field gets the red marker of .pd-champ-obligatoire. */
.mud-input-required .mud-input-label::after {
    color: var(--mud-palette-error);
}

/* A field name in bold: the app's own field labels (chips, progress) and the labels of the side drawer's
   fields, MudBlazor (.mud-input-label) and rich text (.rte-label). */
.app-field-label,
.mud-drawer .mud-input-label,
.mud-drawer .rte-label {
    font-weight: 700;
}

/* Rich-text field and its read-only twin (RichTextEditor, FicheEmbarquementTexte): label above the content,
   in the look of a MudBlazor input label. */
.rte-field {
    display: flex;
    flex-direction: column;
}

.rte-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* ─── 5. Out-of-tree DOM ────────────────────────────────────── */
/* Snackbars (MudSnackbarProvider) open below the app bar's title row. */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: 64px; }

/* ─── 6. App utilities ──────────────────────────────────────── */
/* What MudBlazor 9 lacks, !important like MudBlazor's own utilities. */
.vh-100 { height: 100vh !important; height: 100dvh !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* ─── 7. Mobile ─────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .mud-snackbar { font-size: 0.8rem; padding: 6px 10px; min-width: 0; }
    .mud-snackbar-location-top-right { right: 8px; left: 8px; width: auto; }
}