/* ============================================================
   IdentityServer site.css — overrides on top of Modernize.
   Mirrors the WebApp's site.css patterns so login / register /
   forgot-password feel like the same product as the rest of
   Rentiqa.
   ============================================================
   Loaded after Modernize so cascade gives us the override for free.
   Don't edit Modernize CSS directly — vendor code stays untouched.
   ----------------------------------------------------------------- */

/* Body background now comes from the design tokens (rq-bridge.css maps
   --bs-body-bg to the --rq-page role), so the hardcoded #2b3035 that
   used to live here is gone. It was the Modernize template grey, and it
   was the reason the sign-in screen looked like a different product to
   the app it signs you into.

   The user's persisted theme preference (npbnb-bs-theme localStorage
   key) still carries across the WebApp ↔ IdentityServer redirect, and
   rq-theme.css handles both modes, so light still works. */

html { font-size: 14px; }
@media (min-width: 768px) {
    html { font-size: 16px; }
}

html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; }

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Auth pages wrapper — opt-in via class="auth-page" on the page's
   root <div>. Vertically centers a card-based form within the
   viewport (minus topbar+footer) and pads it. Pages handle their
   own width via Bootstrap row/col inside the card. */
.auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.auth-page .auth-card {
    width: 100%;
    max-width: 480px;
}

/* Modernize cards by default get a slightly-lighter dark surface
   than the body. The auth card on a dark page wants the same
   contrast — but ensures form labels read in dark mode without
   needing per-page text-color overrides. */
/* The auth card sits one step above the page in both themes. Reading
   the roles rather than a literal means it tracks the palette — and it
   no longer needs a [data-bs-theme="dark"] guard, because the roles
   already know which mode they are in. */
.auth-page .card {
    background-color: var(--rq-surface);
    border-color: var(--rq-border);
}


/* ---- Password field affordances --------------------------------------
   Reveal toggle, live requirements checklist, strength meter.

   The rules themselves are rendered server-side from the real
   IdentityOptions policy — see Register.cshtml. Nothing here decides what
   a valid password is; it only shows what the server already decided. */

.rq-pw { position: relative; }
.rq-pw input { padding-right: 44px; }
.rq-pw-reveal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--rq-sub);
    cursor: pointer;
    border-radius: 0 6px 6px 0;
}
.rq-pw-reveal:hover { color: var(--rq-text); }
.rq-pw-reveal:focus-visible {
    outline: 2px solid var(--rq-accent);
    outline-offset: -2px;
}

.rq-pw-panel { margin-top: 8px; }

/* Strength is "how much of the actual policy is satisfied" — see the note
   in rq.password.js about why this is not an entropy estimate. */
.rq-pw-meter {
    height: 4px;
    border-radius: 999px;
    background: var(--rq-muted);
    overflow: hidden;
}
.rq-pw-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .15s ease, background-color .15s ease;
}
.rq-pw-meter-fill.weak    { background: var(--rq-danger); }
.rq-pw-meter-fill.partial { background: var(--rq-warning); }
.rq-pw-meter-fill.full    { background: var(--rq-success); }
.rq-pw-meter-label {
    display: block;
    font-size: 12px;
    color: var(--rq-sub);
    margin-top: 6px;
    min-height: 1em;   /* reserve the line so the form does not jump */
}

.rq-pw-rules {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px 12px;
    font-size: 12px;
    color: var(--rq-sub);
}
.rq-pw-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rq-pw-rules li i { font-size: 14px; flex-shrink: 0; }
/* -text, not the plain fill: this is 12px type. */
.rq-pw-rules li.met { color: var(--rq-success-text); }


/* ---- Logo swap --------------------------------------------------------
   The auth pages ship both wordmarks and let CSS pick one. The rule that
   does that lives in rq-shell.css, which is synced into this project but
   deliberately NOT linked — the rest of it is sidebar and topbar geometry
   IdentityServer has no use for. Without it both logos painted, so every
   auth screen showed "Rentiqa Rentiqa".

   Doing it in CSS rather than script also means the correct one is right on
   the first frame; the original Modernize behaviour hid one in JavaScript
   and flashed both until the script ran. */
.dark-logo { display: none; }
[data-bs-theme="dark"] .dark-logo { display: inline; }
[data-bs-theme="dark"] .light-logo { display: none; }