/* ── AppLayout structural ── */
.bl-root { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.bl-root--public { height: calc(100dvh - var(--mud-appbar-height) - 48px); }
.bl-body { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
.bl-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 99; }
.bl-right-side { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.bl-inner-row { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }

/* ── AppHeader ── */
.bl-header { flex-shrink: 0; height: 56px; background: var(--ap-surface); color: var(--ap-ink); display: flex; align-items: center; padding: 0 16px; gap: 12px; border-bottom: 1px solid var(--ap-hairline); z-index: 200; }

/* ── AppNav ── */
.bl-nav { flex-shrink: 0; width: var(--bl-nav-w, var(--ap-sidebar-width)); min-height: 0; background: var(--ap-sidebar-bg); border-right: 1px solid var(--ap-sidebar-bg); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; transition: transform .25s ease; z-index: 100; }
/* The brand block above the menu supplies the top spacing now. */
.bl-nav > .mud-navmenu { padding-top: 0; }
.bl-nav .mud-nav-link .mud-nav-link-text { font-size: 0.9375rem !important; }
.bl-nav .mud-nav-link .mud-nav-link-icon { margin-top: 2px; }
.app-nav-spacer { flex: 1; min-height: 0; }
.app-nav-footer { padding: 0 12px 8px; }
.app-nav-version { text-align: center; font-size: 11px; color: var(--ap-sidebar-fg); opacity: .7; margin-top: 8px; padding-bottom: 4px; }

/* ── NavSupportBox ── */

/* ── AppSubHeader ── */
.bl-sub-header { flex-shrink: 0; height: 56px; background: var(--ap-surface); color: var(--ap-ink); display: flex; align-items: center; padding: 0 16px; gap: 8px; border-bottom: 1px solid var(--ap-hairline); overflow: hidden; }
.bl-sub-header--public { display: none; }
.bl-sub-header-breadcrumbs { flex-shrink: 0; font-size: 0.8125rem; display: flex; align-items: center; margin-top: 1px; }
.bl-sub-header-breadcrumbs nav { display: flex; align-items: center; }
.bl-sub-header-breadcrumbs ol { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.bl-sub-header-breadcrumbs li { display: flex; align-items: center; white-space: nowrap; line-height: 1; }
.bl-sub-header-breadcrumbs li a, .bl-sub-header-breadcrumbs li span { vertical-align: baseline; line-height: 1; }
.bl-sub-header-divider { display: block; width: 1px; min-width: 1px; height: 20px; background-color: var(--ap-hairline-strong); margin: 0 4px; flex-shrink: 0; align-self: center; }
.bl-sub-header-title { color: var(--ap-ink); font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; line-height: 1; }
.bl-sub-header-spacer { flex: 1 1 0; min-width: 0; }
.bl-sub-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Width for toolbar date pickers goes through Class (picker root only), never Style — MudPicker copies
   Style onto the teleported calendar paper too, which would clip the 310px calendar. See issue #8971. */
.date-filter { width: 210px; }

/* Shell-owned controls at the right end of the bar, after any page actions. */
.bl-sub-header-shell-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 8px; }
.bl-company-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ap-radius-md); background: var(--ap-surface-sunken); color: var(--ap-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ── Top bar (optional, flush between sub-header and content) ── */
.bl-top-bar { flex-shrink: 0; background: var(--ap-surface); border-bottom: 1px solid var(--ap-hairline); }
.bl-editor-top-bar { display: flex; align-items: stretch; height: 41px; }
.bl-editor-top-bar .chapter-editor-toolbar-react,
.bl-editor-top-bar .chapter-editor-toolbar-react > div { flex: 1; display: flex; align-items: stretch; width: 100%; }
.bl-editor-top-bar .chapter-editor-toolbar-bar { flex: 1; display: flex; align-items: stretch; width: 100%; height: 100%; }

/* ── Page header (on the canvas, not the bar) ── */
.bl-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.bl-page-header-text { flex: 1 1 320px; min-width: 0; }
.bl-page-header-description { margin-top: 4px; max-width: 70ch; }
.bl-page-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ── Sidebars ── */
.bl-left { flex-shrink: 0; width: var(--bl-left-w, 220px); min-height: 0; background: var(--ap-surface); border-right: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-left2 { flex-shrink: 0; width: var(--bl-left2-w, 240px); min-height: 0; background: var(--ap-surface); border-right: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-right { flex-shrink: 0; width: var(--bl-right-w, 220px); min-height: 0; background: var(--ap-surface); border-left: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-left-body { flex: 1; overflow-y: auto; }
.bl-right-body { flex: 1; overflow-y: auto; }

/* ── Panel headers (match toolbar height) ── */
.bl-panel-header { flex-shrink: 0; height: 42px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--ap-hairline); background: var(--ap-surface); }
.bl-panel-header-title { font-weight: 600; }
.bl-panel-header > .mud-input-control { width: 100%; }
.bl-panel-footer { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--ap-hairline); background: var(--ap-surface); }
.bl-panel-scroll-col { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.bl-no-pointer { pointer-events: none; }
.bl-main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.bl-main { flex: 1; overflow-y: auto; padding: 24px; background: var(--ap-canvas); }
.bl-main--no-pad { padding: 0; background: var(--ap-surface); }

/* ── Toggle buttons ── */
.bl-toggle-btn { display: none; background: none; border: none; color: var(--ap-ink-muted); cursor: pointer; padding: 8px; border-radius: var(--ap-radius-sm); align-items: center; }
.bl-toggle-btn:hover { background: var(--ap-surface-sunken); }
.bl-toggle-btn-subheader { display: none; background: none; border: none; color: var(--ap-ink-muted); cursor: pointer; padding: 8px; border-radius: 4px; align-items: center; }
.bl-toggle-btn-subheader:hover { background: var(--ap-surface-sunken); }

/* ── Action buttons ── */
/* PrimaryActionButton and SecondaryActionButton previously re-skinned MudButton here with
   !important and a hardcoded palette at a fixed 28px height. aeroplan-theme.css now styles
   MudButton from tokens, so only the toolbar's tighter size remains. */
.bl-primary-action-btn, .bl-secondary-action-btn { min-height: 32px !important; }
.bl-secondary-action-btn.bl-action-btn--active { border-color: var(--ap-primary) !important; color: var(--ap-primary) !important; background: var(--ap-surface-sunken) !important; }

/* ── Resize handles (fixed on body via JS, top/left/height set inline) ── */
.bl-resize-handle { position: fixed; width: 6px; z-index: 9999; cursor: col-resize; }
.bl-resize-handle::after { content: ''; position: absolute; inset: 0; background: transparent; transition: background .15s; }
.bl-resize-handle:hover::after { background: var(--ap-primary); opacity: .4; }
body:has(.mud-dialog-container) .bl-resize-handle { pointer-events: none; }
body.bl-resizing { cursor: col-resize !important; user-select: none !important; }

/* ── Responsive ── */

/* 1280–1619px: left visible, right hidden as overlay */
@media (min-width: 1280px) and (max-width: 1619px) {
    .bl-sub-header--public { display: flex; }
    .bl-toggle-btn-right { display: flex; }
    .bl-right { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(100%); }
    .bl-right.open { transform: translateX(0); box-shadow: -4px 0 16px rgba(0,0,0,.15); }
    .bl-resize-handle--left { display: none; }
}

/* < 1280px: left, right, and nav all hidden as overlays */
@media (max-width: 1279px) {
    .bl-sub-header--public { display: flex; }
    .bl-toggle-btn { display: flex; }
    .bl-toggle-btn-subheader { display: flex; }
    .bl-nav { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-nav.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
    .bl-left { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-left.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
    .bl-left2 { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-left2.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
    .bl-right { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(100%); }
    .bl-right.open { transform: translateX(0); box-shadow: -4px 0 16px rgba(0,0,0,.15); }
    /* No resize on mobile — panels are overlays */
    .bl-resize-handle { display: none; }
}