/* Where a style goes (first match wins): 1. MudBlazor parameter or ImmoDeskTheme; 2. MudBlazor utility class; 3. app utility (section 6);
   4. the component's .razor.css; 5. this file, only for what is truly global. Inline Style only for a computed value (%, data color, --var from C#).
   Pitfalls: MudChip typography is fixed at 11px/600, Size only changes the height. MudCard look is fixed: Elevation and Outlined have no effect.
   --mud-appbar-height also sets the MudDrawerHeader min-height. Color.Secondary is the brand gold, mud-text-secondary is grey.
   A class set on a MudBlazor component is reachable from .razor.css only as `.root ::deep .class` (root = an HTML element of the component).
   html.crm-dark is the dark-mode signal (historical name). Sections:
   1 Tokens: --app-* design tokens, light and dark.
   2 Base: box sizing, viewport height, body background.
   3 Shell: app bar height with the top banners, app header toolbar.
   4 MudBlazor dressing: global look of buttons, dialogs, cards, chips, inputs, snackbars, overlays.
   5 Out-of-tree DOM: split dialogs and Leaflet/ESG map content, out of reach of isolated CSS.
   6 App utilities: classes MudBlazor 9 lacks.
   7 Mobile: below 600px. */

/* ─── 1. Tokens ────────────────────────────────────────────── */
:root {
    --app-radius-sm: 12px;
    --app-radius-lg: 28px;
    --app-shadow: 0 20px 50px rgba(15, 20, 30, 0.12);
    --app-radius-card: 14px;
    --app-shadow-card: 0 1px 3px rgba(15, 20, 30, 0.08), 0 1px 2px rgba(15, 20, 30, 0.06);
    --app-warning-text: #b45f06;
    --app-header-height: 128px;
    --app-banner-height: 40px;
    --app-body-background: radial-gradient(circle at top left, #fef1da 0%, #f5f0ea 35%, #efe6df 100%);
    --app-overlay-scrim: rgba(15, 20, 30, 0.35);
    --app-nav-tab-hover: rgba(128, 128, 128, 0.12);
    --app-aging-under30: #fbc02d;
    --app-invoice-invoice: #3bb273;
    --app-invoice-credit-note: #e7804e;
    --app-invoice-bad-debt: #4c86c3;
    --app-invoice-invoice-text: #1a7048;
    --app-invoice-credit-note-text: #a84d1f;
    --app-invoice-bad-debt-text: #2a5a9a;
    --app-we-accent-internal: #2e5397;
    --app-we-accent-pm: #e07a1f;
    --app-ticket-new: #ed6c02;
    --app-ticket-open: #d32f2f;
    --app-ticket-pending: #0047ab;
    --app-ticket-pending-pm: #0f52ba;
    --app-ticket-hold: #4169e1;
    --app-ticket-relance: #c9952c;
    --app-ticket-solved: #2e7d32;
    --app-ticket-closed: #757575;
    --app-radar-current-term: #9fb0a7;
    --app-radar-former: #6b4fa0;
    --app-radar-critical: #7f1d1d;
    --app-radar-verification: #3b78a8;
}

html.crm-dark {
    color-scheme: dark;
    --app-shadow: 0 20px 46px rgba(2, 6, 23, 0.58);
    --app-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    --app-warning-text: #ffb74d;
    --app-body-background: var(--mud-palette-background);
    --app-invoice-invoice-text: #7ddba8;
    --app-invoice-credit-note-text: #f0aa80;
    --app-invoice-bad-debt-text: #89b8f0;
    --app-radar-current-term: #6c8278;
    --app-radar-former: #9c86c9;
    --app-radar-critical: #ff9a9a;
    --app-radar-verification: #8cbce4;
}

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

html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

body { background: var(--app-body-background); }

/* ─── 3. Shell ─────────────────────────────────────────────── */
/* The app bar is in flow with height:auto, so --mud-appbar-height only offsets the clipped L2 drawer: every banner above the header adds to it. */
.mud-layout {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-sim-banner-h, 0px) + var(--app-imp-banner-h, 0px));
}

.mud-layout.has-role-simulation { --app-sim-banner-h: var(--app-banner-height); }
.mud-layout.has-impersonation { --app-imp-banner-h: var(--app-banner-height); }

.mud-appbar {
    box-shadow: var(--app-shadow);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The header stacks its rows: no fixed toolbar height, gutters or centring. */
.app-header .mud-toolbar,
.app-header .mud-toolbar-appbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: auto;
}

/* ─── 4. MudBlazor dressing ────────────────────────────────── */
/* Pill buttons; !important required, the MudButtonGroup and MudIconButton rules are more specific. */
.mud-button-root { border-radius: 9999px !important; }

/* Applies to every Color, Error/Warning/Info included; !important required, the per-color MudBlazor rules are more specific. */
.mud-button-outlined { border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent) !important; }

.mud-dialog {
    background: var(--mud-palette-background);
    box-shadow: var(--app-shadow);
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-dialog:not(.mud-dialog-fullscreen) { border-radius: var(--app-radius-lg); }

.mud-dialog-title { font-weight: 700; }

/* Elevation and Outlined have no visible effect on MudCard. */
.mud-card {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--app-shadow);
}

.mud-card-content.mud-card-content-padding { padding: 8px 20px 20px 20px; }

/* The size only changes the height; never set font-size on a chip. */
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.mud-chip.chip-h18 { height: 18px; }
.mud-chip.chip-h20 { height: 20px; }
.mud-chip.chip-h22 { height: 22px; }

.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--app-radius-sm); }

.mud-snackbar { border-radius: 14px; }

/* Template value: it overlaps the 128px header (known). */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: 64px; }

.mud-overlay-dialog, .mud-overlay-drawer { background: var(--app-overlay-scrim); }

.mud-progress-linear .mud-progress-linear-bar { border-radius: 999px; }

/* ─── 5. Out-of-tree DOM ───────────────────────────────────── */
/* Rendered by DialogProvider, PopoverProvider or Leaflet, so isolated CSS cannot reach it. */
.app-split-dialog {
    width: min(1100px, 96vw);
    max-height: 90vh;
}

.app-split-dialog .mud-dialog-title {
    padding: 18px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-split-dialog .mud-dialog-content {
    padding: 20px 24px 24px;
}

.app-split-dialog-row-active {
    outline: 1px solid var(--mud-palette-tertiary);
    outline-offset: -1px;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--mud-palette-tertiary) 20%, transparent);
}

@media (max-width: 959.98px) {
    /* !important beats MudBlazor's .mud-dialog-title:has(.mud-button-close){padding-inline-end:64px}. */
    .app-split-dialog .mud-dialog-title,
    .app-split-dialog .mud-dialog-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Popover of the ESG evidence (BuildingEsgCard) and tooltip of the last evolution date (RelettingMandateListPage). */
.esg-evidence-popover { max-width: 420px; }
.reletting-evolution-tooltip { max-width: 260px; }

.esg-map-legend {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--mud-palette-lines-default);
    max-height: 260px;
    overflow-y: auto;
}

.esg-map-legend-title {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.esg-map-legend-title-next {
    margin-top: 6px;
    display: block;
}

/* leaflet.css sets its own sans-serif stack on the map; the app font applies to the map text too. */
.leaflet-container { font-family: inherit; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* :hover and :focus match the more specific leaflet.css rule. */
.leaflet-container a.leaflet-popup-close-button,
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    color: var(--mud-palette-text-secondary);
}

.esg-map-popup-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.esg-map-popup-distance {
    color: var(--mud-palette-text-disabled);
    font-size: 11px;
}

.esg-map-grayscale {
    filter: grayscale(1) brightness(1.05) contrast(1.05);
}

html.crm-dark .esg-map-grayscale {
    filter: grayscale(1) invert(1) brightness(0.95) contrast(0.9);
}

/* ─── 6. App utilities ─────────────────────────────────────── */
/* Perial.Blazor components use min-w-0 and min-h-full here, text-truncate and text-nowrap below. */
.vh-100 { height: 100vh; height: 100dvh; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }

/* Missing from MudBlazor 9; !important like the MudBlazor utilities. */
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.text-nowrap { white-space: nowrap !important; }
/* They beat the .mud-simple-table td{text-align:start} rule. */
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fst-italic { font-style: italic !important; }
.text-break-anywhere { overflow-wrap: anywhere !important; }
/* Two lines at most, then an ellipsis; !important beats the display of the element it is set on. */
.line-clamp-2 { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden !important; }
.user-select-none { user-select: none !important; }
.tabular-nums { font-variant-numeric: tabular-nums !important; }
.money { font-variant-numeric: tabular-nums !important; font-weight: 600 !important; white-space: nowrap !important; }
.input-surface { background: var(--mud-palette-surface) !important; border-radius: var(--mud-default-borderradius) !important; }

/* ─── 7. Mobile ────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    /* Page titles and KPI values; !important kept so the shrink wins over any font size a component sets on them. */
    .mud-container .mud-typography-h4 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    .mud-container .mud-typography-h5 {
        font-size: 1.15rem !important;
    }

    /* !important needed against px-4 in the PageFooterShell of Perial.Blazor. */
    .mud-container { padding-left: 12px !important; padding-right: 12px !important; }

    .mud-table { overflow-x: auto; }

    .mud-snackbar { font-size: 0.8rem; padding: 6px 10px; min-width: 0; }
    .mud-snackbar-location-top-right { right: 8px; left: 8px; width: auto; }
}