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

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

:root {
    /* Brand colors, identical in both color schemes: they sit on the red rocket body,
       not on the page background. Scheme-dependent tones live in ProjectDeskTheme. */
    --pd-rocket-red: #c62828;
    --pd-rocket-white: #ffffff;
}

body {
    /* Repli sur Cloud Dancer tant que MudThemeProvider n'a pas émis ses variables. */
    background-color: var(--mud-palette-background, #f0eee9);
}

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

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

.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(128, 128, 128, 0.12);
}

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

/* ─── Rich text editor (Quill) ──────────────────────────────── */
.rte-field {
    display: flex;
    flex-direction: column;
}

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

.rte-editor {
    background: var(--mud-palette-surface);
    min-height: 120px;
}

.rte-field .ql-toolbar.ql-snow,
.rte-field .ql-container.ql-snow {
    border-color: var(--mud-palette-lines-inputs);
}

.rte-field .ql-toolbar.ql-snow {
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

.rte-field .ql-container.ql-snow {
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
    font-family: inherit;
    font-size: 0.875rem;
}

/* ─── Rich text read-only rendering ─────────────────────────── */
.rte-content {
    overflow-wrap: anywhere;
}

.rte-content p {
    margin: 0 0 0.5rem;
}

.rte-content p:last-child {
    margin-bottom: 0;
}

.rte-content ul,
.rte-content ol {
    margin: 0 0 0.5rem;
    padding-left: 1.5rem;
}