/* ==========================================================================
   Sign-in / account pages (Components/Account/Pages/*), served through
   AccountLayout. Plain CSS on purpose: these pages are static SSR, so the
   MudBlazor component library is not available to them.

   Two problems this fixes, both visible on a phone (2026-09-24):

   1. The stock Identity markup uses Bootstrap's `.form-floating` pattern,
      which only works because Bootstrap makes the placeholder transparent
      until focus. app.css (from the .NET template) overrides that and paints
      the placeholder visible, so every field rendered its label ON TOP of its
      placeholder. We drop floating labels entirely here: label above input is
      shorter to read, works at any width, and cannot collide.

   2. `.row > .col-md-4` gave a third-width column INSIDE a layout that was
      already only 40% of a phone screen. The card below is width-first.
   ========================================================================== */

.acct-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    background: #f4f6f8;
}

.acct-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 20px rgba(0, 0, 0, .06);
}

.acct-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    text-decoration: none;
    color: #12345b;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.acct-brand img { height: 40px; width: auto; }

.acct-foot {
    margin: 0;
    font-size: .75rem;
    color: #6b7885;
}

/* ── Typography ────────────────────────────────────────────────────────────
   The stock pages carry both an <h1> and an <h2> saying nearly the same thing
   ("Reset password" / "Reset your password."). Rather than edit every page,
   the h1 carries the page and the h2 drops to a quiet sub-line. */
.acct-card h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #12345b;
}

.acct-card h2 {
    font-size: .92rem;
    font-weight: 400;
    color: #5a6673;
    margin: 0 0 16px;
}

.acct-card hr { margin: 16px 0; border: 0; border-top: 1px solid #e3e8ed; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.acct-card .row,
.acct-card [class*="col-"] {
    /* Neutralise the Bootstrap grid: the card IS the column. */
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
}

/* The stock markup puts the <input> BEFORE its <label> (that is what makes
   floating labels work). Once the label is static it would render underneath
   the field, so reorder with flex rather than touching 15 pages of markup. */
.acct-card .form-floating {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.acct-card .form-floating > label { order: -1; }
.acct-card .form-floating > .validation-message { order: 1; }

/* Label above the field, never over it. */
.acct-card .form-floating > label,
.acct-card .form-label {
    position: static;
    display: block;
    height: auto;
    padding: 0 0 4px;
    transform: none;
    font-size: .82rem;
    font-weight: 500;
    color: #45525f;
    pointer-events: auto;
    opacity: 1;
}

.acct-card .form-control,
.acct-card .form-select {
    width: 100%;
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 16px;
    line-height: 1.4;
    padding: 11px 12px;
    height: auto;
    border: 1px solid #c8d0d8;
    border-radius: 8px;
    background: #fff;
}

.acct-card .form-floating > .form-control { padding: 11px 12px; }

.acct-card .form-control:focus {
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
    outline: none;
}

/* The placeholder is now redundant next to a visible label, and app.css
   right-aligns it. Hide it rather than fight two stylesheets. */
.acct-card .form-floating > .form-control::placeholder { color: transparent; }

.acct-card .checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
}

.acct-card .form-check-input { width: 18px; height: 18px; margin: 0; }

.acct-card .btn {
    /* 48px min: a thumb target, not a mouse target. */
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 16px;
}

.acct-card .btn-lg { font-size: 1rem; }

.acct-card .btn-primary {
    background: #1b6ec2;
    border-color: #1861a8;
}

/* ── Links under the form ─────────────────────────────────────────────────
   Stacked <p><a>…</a></p> per link in the stock markup: fine, but tighten the
   spacing and give each one a proper tap height. */
.acct-card a { color: #1b6ec2; }

.acct-card form + div p,
.acct-card form div > p {
    margin: 0;
}

.acct-card section > div:last-child p a,
.acct-card form p a {
    display: inline-block;
    padding: 8px 0;
    font-size: .9rem;
}

/* ── Validation + status ─────────────────────────────────────────────────── */
.acct-card .validation-message,
.acct-card .text-danger { font-size: .82rem; }

.acct-card .alert {
    font-size: .88rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
}

@media (max-width: 420px) {
    .acct-shell { padding-left: 12px; padding-right: 12px; }
    .acct-card  { padding: 20px 16px 24px; }
}

.acct-back {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e3e8ed;
    font-size: .9rem;
}

.acct-back a { display: inline-block; padding: 6px 0; }