/*
 * Base component & layout styles for the Keyple app shell.
 *
 * Extracted from the inline <style> block in templates/base.html (KMS-893).
 * Rule selectors and declarations are unchanged from the original, only
 * re-homed into a real CSS file. Linked BEFORE sidebar.css so the original
 * top-to-bottom cascade order is preserved.
 *
 * Sidebar/nav rules live in sidebar.css. The two orphaned, malformed lines
 * that originally sat after `.keyple-status-banner i` (a bare `margin-left: 0;`
 * and a stray `}`) belong with `.user-menu` — whose desktop rule they silently
 * drop via CSS error-recovery — so they were moved to sidebar.css to keep that
 * production rendering intact. See the NOTE there for details.
 */

body {
    min-height: 100vh;
    background: linear-gradient(to bottom right, var(--brand-surface-tint), white);
    margin: 0;
    font-family: var(--kp-font-sans);
}

/*
 * Brand type scale (KMS-897). One family (`--kp-font-sans`, set on `body` above
 * and inherited by headings) plus a fixed size ramp so default heading elements
 * render consistently across every screen instead of drifting with Bootstrap's
 * responsive defaults. Linked after Bootstrap in the base shells, so these
 * element rules win over Reboot's `h1`–`h4` sizes at equal specificity.
 *
 * Scope is intentional: only bare `h1`–`h4` elements. Bootstrap heading
 * *classes* (`.h1`–`.h6`, `.display-*`, `.fs-*`) keep their own sizing for
 * places that opt into a different scale (e.g. a `<h1 class="h2">`).
 */
h1 { font-size: var(--kp-text-4xl); }
h2 { font-size: var(--kp-text-3xl); }
h3 { font-size: var(--kp-text-2xl); }
h4 { font-size: var(--kp-text-xl); }

.person-read-only,
.person-read-only a,
.person-read-only .text-body {
    opacity: 0.55;
    color: #6c757d;
}
.person-read-only .badge {
    opacity: 0.85;
}

.wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Impersonation banner styling */
.impersonation-banner {
    background: linear-gradient(135deg, var(--bs-danger), #c82333);
    color: white;
    padding: 12px 0;
    position: static;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.impersonation-banner .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    font-weight: 500;
}

.impersonation-banner .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

/* Keyple Status banner styling */
.keyple-status-banner {
    padding: 12px 0;
    position: static;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: -1rem -1rem 1rem -1rem;
}

.keyple-status-banner-new {
    background: linear-gradient(135deg, var(--brand-success), var(--brand-success-hover));
    color: white;
}

.keyple-status-banner-current {
    background: linear-gradient(135deg, var(--bs-danger), #c82333);
    color: white;
}

.keyple-status-banner-prior {
    background: linear-gradient(135deg, var(--bs-warning), #ffb007);
    color: #333;
}

.keyple-status-banner i {
    font-size: 1.1rem;
}

/*
 * NOTE (KMS-893): the original inline <style> block had two orphaned lines
 * here — a bare `margin-left: 0;` and a stray top-level `}` immediately after
 * the rule above. They have been relocated to sidebar.css (adjacent to
 * `.user-menu`, whose desktop rule they drop via CSS error-recovery) so that
 * this extraction preserves production rendering exactly. See the NOTE in
 * sidebar.css.
 */