/* ================================================================
   pvi-admin-login.css — BLOCK 2 (page-specific)
   Sign-in + forced new-password screens. Loaded by the master frame
   via the stylesheet slot, after pvi-master-frame.css.

   Colors come exclusively from the frame's :root design tokens
   (--white, --dark-grey, --mid-grey, --light-grey, --green,
   --green-hover, --dull-blue, --focus-ring-blue, --dull-red,
   --dull-red-bg, --rule). No hardcoded hex, no local palette.

   Card chrome, labels, hints, and the error callout use the system
   onboarding classes (.su-section, .su-lbl, .field-hint,
   .error-block) so this page matches signup / thank-you /
   account-confirmed. Everything is scoped under .pvi-login so it
   cannot collide with the frame's Bootstrap classes.
   ================================================================ */


/* ----------------------------------------------------------------
   1. Centering shell — horizontal and vertical
   The frame's .content-area flexes to fill the viewport, so a short
   single-card page is centered in the available space rather than
   pinned under the header.
   ---------------------------------------------------------------- */
.pvi-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}


/* ----------------------------------------------------------------
   2. Card — system .su-section, capped narrow for a single-purpose
   form. Only one state is visible at a time; the engine emits the
   `hidden` attribute on the other.
   ---------------------------------------------------------------- */
.pvi-login .su-section {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    padding: 1.75rem;
    color: var(--dark-grey);
}

.pvi-login .screen[hidden] { display: none !important; }


/* ----------------------------------------------------------------
   3. Card header — divider-headed h3, per the onboarding standard.
   The frame header already owns the page h1.
   ---------------------------------------------------------------- */
.pvi-login h3 {
    margin: 0 0 .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-grey);
}

.pvi-login .su-sub {
    margin: 0 0 1.35rem;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--mid-grey);
}


/* ----------------------------------------------------------------
   4. Fields
   ---------------------------------------------------------------- */
.pvi-login .su-field { margin-bottom: 1.1rem; }

.pvi-login .su-lbl {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--dark-grey);
}

.pvi-login input[type="text"],
.pvi-login input[type="password"] {
    width: 100%;
    padding: .6rem .7rem;
    font-size: .95rem;
    color: var(--dark-grey);
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 6px;
}

.pvi-login input[type="text"]:focus,
.pvi-login input[type="password"]:focus {
    outline: none;
    border-color: var(--dull-blue);
    box-shadow: 0 0 0 3px var(--focus-ring-blue);
}

.pvi-login .field-hint {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--mid-grey);
}


/* ----------------------------------------------------------------
   5. Primary green submit button — system green, full-card width
   ---------------------------------------------------------------- */
.pvi-login .btn-login {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .7rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background: var(--green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.pvi-login .btn-login:hover,
.pvi-login .btn-login:focus {
    background: var(--green-hover);
    color: var(--white);
}

.pvi-login .btn-login:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring-blue);
}


/* ----------------------------------------------------------------
   6. Error slot — hidden until the engine sets error_class to
   `is-shown`. Renders hidden when the token is left unsubstituted.
   ---------------------------------------------------------------- */
.pvi-login .error-block {
    display: none;
    margin: 0 0 1.1rem;
    padding: .6rem .7rem;
    font-size: .85rem;
    color: var(--dull-red);
    background: var(--dull-red-bg);
    border-left: 3px solid var(--dull-red);
    border-radius: 0 6px 6px 0;
}

.pvi-login .error-block.is-shown { display: block; }


/* ----------------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .pvi-login {
        min-height: 0;
        padding: 1.5rem .75rem;
    }
    .pvi-login .su-section { padding: 1.35rem 1.15rem; }
}