/* ─── 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 ───────────────────── */
:root {
    --mud-appbar-height: 128px !important;
}

.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-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;
    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 & Structural Elements ─────────────────────────── */
.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; }

/* Iframe wrapper — fills the remaining viewport so the PDF/HTML viewer
   stays inside the page (no double scrollbar). */
.amf-iframe-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 320px);
    min-height: 400px;
}

/* Sticky sidebar — the left list stays visible while the right pane scrolls.
   Applied to a wrapper div inside MudItem so it stays at the top of its
   stretched-flex parent while the page scrolls. */
.amf-sidebar {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* ─── Back-to-top floating button ──────────────────────────── */
.app-back-to-top {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 1200 !important;
}

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