/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

/* ─── MudBlazor Layout Overrides ───────────────────────────── */
.mud-layout {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.mud-main-content {
    background: transparent !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

/* ─── AppBar: two-row auto-height header ───────────────────── */
/* The app bar is in-flow with height:auto, so --mud-appbar-height only drives
   the top offset of the clipped L2 drawer. Anything stacked above the app bar
   must be added to it, or the drawer slides under the header. */
:root {
    --app-header-height: 128px;
    --app-sim-banner-height: 40px;
    --mud-appbar-height: var(--app-header-height) !important;
}

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

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

.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%; }

.mud-appbar {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.app-header.mud-appbar {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: var(--mud-zindex-appbar) !important;
}

.app-header .mud-toolbar,
.app-header .mud-toolbar-appbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

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

.nav-tab.mud-button-root {
    border-radius: 0 !important;
    text-transform: none !important;
    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(255, 255, 255, 0.15);
}

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

/* ─── Drawer ────────────────────────────────────────────────── */
.mud-drawer { border-radius: 0 !important; }

/* ─── Layout Utilities ──────────────────────────────────────── */
.h-100 { height: 100%; }
.vh-100 { height: 100vh; height: 100dvh; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }

/* ─── Text Utilities ────────────────────────────────────────── */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-nowrap { white-space: nowrap; }

/* ─── Snackbar Positioning ──────────────────────────────────── */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: 64px !important; }

@media (max-width: 600px) {
    .mud-snackbar { font-size: 0.8rem; padding: 6px 10px; min-width: 0; }
    .mud-snackbar-location-top-right { right: 8px !important; left: 8px !important; width: auto !important; }
}

/* ── Notification list divider ──────────────────── */
.border-bottom-divider {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ── Origine Encours — color-coding des lignes ──── */
/*
 * rgba semi-transparent : se fond sur le --mud-palette-surface actif.
 * Fonctionne en mode Light (surface blanche) et Dark (surface sombre)
 * sans surcharger la couleur du texte gérée par le thème MudBlazor.
 */
.origin-row--vert {
    background-color: rgba(76, 175, 80, 0.22) !important;
}
.origin-row--bleu {
    background-color: rgba(33, 150, 243, 0.20) !important;
}
.origin-row--rouge {
    background-color: rgba(244, 67, 54, 0.20) !important;
}

/* Tableau Origine Encours (18 colonnes) — police et padding réduits */
.table-origine .mud-table-cell,
.table-origine .mud-table-head-cell {
    font-size: 0.75rem !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Pastille carrée utilisée dans la légende */
.origin-legend-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Tableau politique de commissionnement (disclaimer exclusion upfront) ── */
.pol-com-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.pol-com-table th,
.pol-com-table td {
    padding: 8px 14px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    text-align: center;
    vertical-align: middle;
    color: var(--mud-palette-text-primary);
}

.pol-com-table thead th {
    background-color: rgba(0, 0, 0, 0.15);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.4;
}

.pol-com-table tbody td {
    background-color: rgba(0, 0, 0, 0.04);
}

.pol-com-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.08);
}

.pol-com-table .pol-com-partner {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.18) !important;
    text-align: left;
    width: 22%;
}