/* Layout/components for the pre-auth pages (login, change-password) only. Colors are deliberately
   NOT hardcoded here - they reference the same CSS custom properties style.css defines (:root for
   light, .dark for dark), so these pages track whichever theme was last chosen elsewhere in the
   app. <nav> itself (structure/classes) comes from style.css - only the logo sub-label below is
   specific to this page. */

.nav-logo-sub {
    font-weight: 400;
    opacity: 0.65;
    color: inherit;
    text-decoration: none;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--big-bg);
    color: var(--text);
}

.auth-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Watermark: the brand mark scattered at varying sizes across the page behind the card. One image,
   referenced many times with different background-size/-position per layer - the browser fetches
   it once and reuses it from cache for every layer, so this costs nothing extra over a single copy. */
.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.07;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        url("../img/omukristu-pis-logo.png"), url("../img/omukristu-pis-logo.png"),
        url("../img/omukristu-pis-logo.png"), url("../img/omukristu-pis-logo.png"),
        url("../img/omukristu-pis-logo.png"), url("../img/omukristu-pis-logo.png"),
        url("../img/omukristu-pis-logo.png"), url("../img/omukristu-pis-logo.png"),
        url("../img/omukristu-pis-logo.png"), url("../img/omukristu-pis-logo.png"),
        url("../img/omukristu-pis-logo.png");
    background-position:
        90% 8%, 96% 35%, 92% 55%, 98% 80%,
        75% 90%, 50% 92%, 15% 88%, 30% 75%,
        78% 45%, 55% 8%,
        -220px -220px;
    background-size:
        120px, 70px, 150px, 90px,
        130px, 100px, 140px, 80px,
        60px, 60px,
        650px;
}

/* Small screens: the scattered small logos read as clutter at this size - keep only the one big
   corner mark, unchanged from the desktop layer above (last position/size in each list). */
@media (max-width: 600px) {
    .auth-page::before {
        background-image: url("../img/omukristu-pis-logo.png");
        background-position: -220px -220px;
        background-size: 650px;
    }
}

/* Glass panel over the watermark - same treatment style.css's own .widgets-row uses
   (var(--z-bg) + backdrop-filter), just a heavier blur since this is a bigger, more prominent
   panel rather than a thin bar. */
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: var(--z-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--antique);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 32px;
}

.auth-card h1 {
    font-size: 20px;
    margin: 0 0 12px;
    color: var(--text);
}

.auth-divider {
    border: none;
    border-top: 1px solid var(--antique);
    margin: 0 0 16px;
}

.auth-card p.subtitle {
    margin: 0 0 24px;
    color: var(--text);
    opacity: 0.7;
    font-size: 14px;
}

/* .field/.btn/.form-actions/.alert* live in forms.css, shared with the authenticated shell's own
   forms (e.g. Account Manager). */