/* ============================================================
   eCAP Layout
   ------------------------------------------------------------
   Page-level structural chrome that's shared across every route:
   AppBar height variable, page-header pattern (and its variants),
   greeting block, drawer/appbar dividers, top-of-page progress
   sliver, skip-to-main-content link.

   What does NOT go here:
   - Component-internal layout (use Razor scoped CSS)
   - Page-specific tweaks (use Razor scoped CSS)
   - Semantic theming (theme.css)
   ============================================================ */

/* ---------- AppBar height ----------
   Single source of truth for layout calculations that depend on
   the AppBar (sticky toolbar offset, main-container top padding,
   case-detail slim bar position). MudBlazor's `--mud-appbar-height`
   is fixed at 64px so we maintain our own that shrinks at the xs
   breakpoint to match the actually-rendered AppBar height. */
:root {
    --ecap-appbar-height: 64px;
    /* Height of the fixed slim case-detail bar. Single source of
       truth so sticky-position offsets (sidebar, mobile tabs) stay
       aligned. */
    --ecap-slimbar-height: 56px;
}

@media (max-width: 599.98px) {
    :root { --ecap-appbar-height: 56px; }
}

/* ---------- AppBar / drawer dividers ---------- */
.ecap-appbar-divider { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ecap-drawer-divider { border-right: 1px solid var(--mud-palette-lines-default); }

/* ---------- IntersectionObserver sentinel (sticky-header pattern) ----------
   Sits in document flow just below a main header but is *visually*
   translated up by --ecap-appbar-height. IO observes the transformed
   box, so intersection with the viewport top fires the moment the
   header's bottom edge would be covered by the AppBar. Used by both
   CaseDetailPage and CloseCaseView to drive their slim sticky bars. */
.ecap-sticky-sentinel {
    height: 1px;
    transform: translateY(calc(-1 * var(--ecap-appbar-height, 64px)));
    visibility: hidden;
    pointer-events: none;
}

/* ---------- Top-of-page progress sliver ----------
   Fixed at the very top of the viewport while a filter/page reload
   is in flight. Sits above the AppBar (z-index 1200). */
.ecap-page-progress.mud-progress-linear {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 2px !important;
    z-index: 1200;
}

/* ---------- Page header ----------
   Time-of-day greeting + summary line. White background extending
   edge-to-edge over the page tint (negative left/right margins
   break out of the MudContainer's pa-4 = 16px padding). */
.ecap-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: -16px -16px 24px;
    padding: 24px;
    background: var(--ecap-color-white);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* Flush variant — sits immediately above the sticky tab bar with no
   gap, used on pages where the next element is a sibling white
   surface. */
.ecap-page-header.ecap-page-header--flush { margin-bottom: 0; }

/* Mobile: tighten the header's vertical padding. The default 24px was
   designed for the desktop hero treatment; on a phone that wastes
   real-estate before the tab bar. The horizontal 24px stays so the
   title has readable side gutters. */
@media (max-width: 599.98px) {
    .ecap-page-header { padding: 16px 24px; }
}

/* Detail variant — overrides the default flex layout so the header
   can stack a top row (back nav + actions) above a multi-line summary
   block. Used on the case detail page where the summary content lives
   inside the header strip instead of in a separate outlined card.
   Scrolls away naturally; a separate fixed `.ecap-case-slimbar`
   overlay takes over once it's gone (see CaseDetailPage scoped CSS).
   On mobile we hide the hero header outright — the slim bar + sticky
   tabs are the primary chrome there. */
.ecap-page-header.ecap-page-header--detail { display: block; }

@media (max-width: 959.98px) {
    .ecap-page-header.ecap-page-header--detail { display: none; }
}

.ecap-page-header-text { min-width: 0; }
.ecap-page-greeting {
    font-weight: var(--ecap-fw-bold);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 6px;
}
.ecap-page-greeting-sub {
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
.ecap-page-greeting-sub strong {
    color: var(--mud-palette-text-primary);
    font-weight: var(--ecap-fw-semibold);
}

/* ---------- Skip-to-main-content link ----------
   Visually hidden until focused. WCAG 2.4.1: lets keyboard users
   bypass repeated nav. */
.ecap-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--mud-palette-primary);
    color: var(--ecap-color-white);
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: var(--ecap-fw-semibold);
    font-size: var(--ecap-text-base);
}
.ecap-skip-link:focus { top: 0; }

/* ---------- Page sticky footer ----------
   Fixed action bar at the bottom of the viewport (right-aligned Cancel /
   Submit on the closure form). Sits beside the open desktop drawer the
   same way the slim bar does. The matching `.ecap-page-footer-spacer`
   div in the page body adds bottom padding so the last panel isn't
   hidden under the footer.

   Background uses the subtle page-tint (gray-50) so the footer reads as
   a distinct surface beneath the white content panels. A deeper upward
   shadow casts onto the content area to signal the footer is floating
   over the scroll region. */
.ecap-page-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--ecap-color-gray-50);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -6px 16px rgb(0 0 0 / 0.08), 0 -2px 4px rgb(0 0 0 / 0.04);
}
.ecap-page-footer-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
}
/* Modifier: status on the left, action buttons on the right. Used by
   the Organisation tab footer (Settings.razor) where the "All changes
   saved" / "Unsaved changes" indicator pairs with Discard / Save. */
.ecap-page-footer-inner--split { justify-content: space-between; }
.ecap-page-footer-spacer { height: 72px; }
@media (min-width: 960px) {
    .ecap-page-footer { left: 240px; }
    body:has(.ecap-drawer--mini) .ecap-page-footer { left: 72px; }
}
/* Mobile: push the footer up above the bottom tab bar (56px min-height +
   any iOS safe-area inset) so both stay visible. Bump the spacer too so
   the last content panel clears both the footer and the tab bar.
   Action buttons inside the footer expand to fill the row equally so
   tap targets are generous; the dirty-state status text hides since
   the buttons' own disabled/enabled state already conveys it. */
@media (max-width: 959.98px) {
    .ecap-page-footer { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .ecap-page-footer-spacer { height: calc(72px + 56px); }
    .ecap-page-footer-inner { padding: 10px 16px; gap: 8px; }
    .ecap-page-footer-inner--split .ecap-org-save-status { display: none; }
    .ecap-page-footer-inner--split .ecap-org-save-actions { flex: 1; display: flex; }
    .ecap-page-footer-inner--split .ecap-org-save-actions .mud-button-root { flex: 1; }
    /* Standard (non-split) footers — e.g. the closure form's
       Cancel / Save Draft / Submit row. Let buttons size to their
       label so longer ones (e.g. "Re-submit for Review") don't get
       compressed into a 2-line wrap. */
    .ecap-page-footer-inner > .mud-button-root { flex: 0 1 auto; }
    /* Lock the label to a single line everywhere in the footer —
       MudButton's default lets text wrap once the container narrows,
       which looks broken with tight padding. */
    .ecap-page-footer .mud-button-root,
    .ecap-page-footer .mud-button-label {
        white-space: nowrap;
        min-width: 0;
    }
    .ecap-page-footer .mud-button-root {
        padding-left: 12px;
        padding-right: 12px;
    }
}