/* ============================================================================
   pages.css — shared logged-in page grammar (loaded AFTER app.css)
   ----------------------------------------------------------------------------
   Mijn Advieswijzer (Personal) twin of the Conexxus pages.css — VERBATIM except
   the one subtitle rgba, which shifts from navy to mosgroen ink. The redesign's
   page-level layer: the shared <PageHeader> block plus a couple of light layout
   helpers so the app's inner pages read as one product with the dashboard "Nu"
   zone. Fully tokenised (all colour resolves from tokens.css) so it introduces
   no new colour and cannot drift from the dashboard header it echoes.

   Cascade note: linked after app.css in index.html. The .page-header here is the
   page analogue of dashboard.css's .dashboard-pheader (same title weight,
   spacing rhythm, and hairline), reused across Pages/* via the PageHeader
   component. Light theme only (dark is out of redesign scope).
   ============================================================================ */

/* --- Page shell: full-bleed wrapper (design §3.1 — the app canvas is full-width;
   MainLayout .main-content already supplies the page padding). No outer cap,
   so every inner page fills the surface like the dashboard "Nu" zone. Long-form
   reading columns set their OWN inner max-width for legibility. ----------------- */
.page-shell {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Neutralise Bootstrap's .container width-cap + gutter when it wraps a page-shell
   (several pages use `class="container page-shell"`); the shell is full-bleed. */
.container.page-shell,
.page-shell.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* --- Page measure: header AND content share one centred column ----------------
   A capped page must cap its HEADER too. Cap only the content and the title hangs
   at the canvas edge while the form floats in the middle — the two read as
   unrelated. So the measure goes on the PAGE container (.account-page /
   .settings-page), which holds both the <PageHeader> and the body wrapper.
   Precedent: Help/Docs cap and centre the whole page the same way.

   These rules must sit AFTER .page-shell above: both are single-class selectors,
   so source order decides, and .page-shell sets max-width:none. They also come
   after app.css (pages.css is linked later), which is what lets them replace
   app.css's own .settings-page full-bleed rule. ------------------------------- */
.account-page,
.settings-page {
    margin-inline: auto;
}

.account-page {
    max-width: 680px;
}

.settings-page {
    max-width: 720px;
}

/* The inner wrappers are spacing containers only — the page owns the measure. */
.account-body,
.settings-body {
    max-width: none;
}

/* Below the measure there is nothing to centre — let the column use the canvas. */
@media (max-width: 720px) {
    .account-page,
    .settings-page {
        max-width: none;
    }
}

/* --- Privacy: same rule as Terms (which owns a scoped sheet). The header and the
   legal card share one 760px measure; the card fills it instead of re-centring at
   its own width, which is what left the title at the canvas edge. Overrides
   app.css's .legal-page centring — pages.css is linked later. ----------------- */
.privacy-page {
    max-width: 760px;
    margin-inline: auto;
}

.privacy-page .legal-page {
    max-width: none;
    margin: 0;
}

/* --- Logboek: the Tijdlijn column is centred at 760px, so the page header has to
   be too. It was sitting in a bare Bootstrap .container — centred, but at the
   container's much wider measure and behind its gutter, so the title never lined
   up with the timeline underneath it. Same measure, no gutter (.main-content
   already supplies the page padding). ---------------------------------------- */
.container.logboek-page,
.logboek-page.container {
    max-width: 760px;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

/* --- Shared page header (PageHeader.razor) ---------------------------------- */
/* Echoes .dashboard-pheader: title left, muted subtitle under it, page actions
   right-aligned. No closing hairline (design feedback 2026-08, app-wide): the
   header opens straight onto the page's first structural beat. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.page-header-text {
    min-width: 0;
}

.page-header-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}

.page-header-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(20, 53, 40, 0.5);
    margin: var(--space-1) 0 0;
}

/* Actions slot: right-aligned page-level affordances (buttons, links). */
.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}