/* Work Tracking — the four anonymous account screens (Login, SignUp, ForgotPassword,
   ResetPassword). New in the standalone product; QHRM owned the login page before.

   Layout is a two-pane split declared here and framed by LoginLayout.razor: a gradient
   brand panel on the left, the form on the right. Everything colour-wise comes from the
   shell tokens in _PbLayout.css, so the screen belongs to the product rather than to
   QHRM — except inside the brand panel, which is deliberately dark in BOTH themes and
   therefore hard-codes its own light-on-dark palette.

   The form pane sits on --bg rather than --surface and the card is a real raised card on
   top of it. On a plain white pane the inputs (which are --surface-2, a near-white tint)
   had almost nothing to sit against; against the tinted ground the card has an edge and
   the fields read as fields.

   Loaded after _PbStyles.css, so the #pbApp overrides below win on equal specificity. */

/* ══ Split shell ══════════════════════════════════════════════ */
.pb-shell.pb-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;   /* mobile browsers: keep the URL bar out of the maths */
}

/* ══ Brand panel ══════════════════════════════════════════════ */
.pb-auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 46px 54px;
    color: #eaecff;
    background: linear-gradient(158deg, #141733 0%, #232a86 46%, #3d55e0 100%);
    isolation: isolate;
}

/* Two soft blooms and a hairline grid. Purely decorative: it gives the flat gradient
   somewhere for the eye to land without adding an image to download. */
.pb-auth-glow {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(38% 34% at 78% 16%, rgba(125,123,255,.55) 0%, transparent 70%),
        radial-gradient(44% 40% at 12% 88%, rgba(45,212,164,.28) 0%, transparent 72%);
    filter: blur(6px);
}

.pb-auth-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
            mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
}

/* Width-driven, like the sidebar lockup — the artwork is ~3.95:1 so height follows.
   Only the white variant is used here; the panel is dark in both themes. */
.pb-auth-logo { width: 196px; max-width: 60%; line-height: 0; }
.pb-auth-logo img { width: 100%; height: auto; display: block; }

.pb-auth-pitch { max-width: 31rem; }

.pb-auth-headline {
    margin: 0 0 14px;
    font-size: clamp(26px, 2.6vw, 37px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #ffffff;
    text-wrap: balance;
}

.pb-auth-lede {
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.62;
    color: rgba(234,236,255,.74);
    max-width: 26rem;
}

/* ── One day of the product ─────────────────────────
   A card of glass on the gradient rather than an app-token card: it belongs to the
   panel, not to the form pane, and it has to stay legible on the gradient in both
   themes. So the colours here are hard-coded like the rest of the panel. */
.pb-auth-led {
    max-width: 26rem;
    display: grid;
    gap: 12px;
    padding: 16px 17px;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
}

.pb-led-top { display: flex; align-items: baseline; justify-content: space-between; }

.pb-led-day {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(234,236,255,.6);
}

.pb-led-total {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.pb-led-bar {
    height: 8px;
    display: flex;
    gap: 2px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255,255,255,.1);
}

.pb-led-bar i { display: block; height: 100%; border-radius: 3px; }

.pb-auth-led ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.pb-auth-led li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(234,236,255,.78);
}

.pb-led-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 2px; }
.pb-led-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-led-hrs { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #ffffff; }

/* The one line of copy that says what the card is evidence of. */
.pb-led-foot {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(234,236,255,.52);
}

.pb-auth-foot { font-size: 12px; color: rgba(234,236,255,.5); }

/* ══ Form pane ════════════════════════════════════════════════ */
.pb-auth-main {
    position: relative;
    display: flex;
    background: var(--bg);
}

.pb-auth-theme {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

/* #pbApp carries an in-app min-height of calc(100vh - 53px), reserving a topbar this
   layout never renders. Its --bg fill is wanted here, though — it is the ground the
   card sits on — so unlike the old flat-white pane this only resets the height. */
#pbApp.pb-login-wrap {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}

/* The card. Everything each of the four pages renders sits inside it. */
.pb-login-card {
    width: 100%;
    max-width: 400px;
    padding: 38px 36px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

/* The folded-away lockup — only shown once the brand panel is gone (see the media query). */
.pb-login-mark { display: none; width: 176px; margin: 0 0 28px; line-height: 0; }
.pb-login-mark img { width: 100%; height: auto; display: block; }
.pb-login-mark .pb-mark-dark { display: none; }
.pb-shell.pb-dark .pb-login-mark .pb-mark-light { display: none; }
.pb-shell.pb-dark .pb-login-mark .pb-mark-dark { display: block; }

.pb-auth-title {
    margin: 0 0 7px;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--text);
}

.pb-auth-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ── Fields ─────────────────────────────────────── */
#pbApp .pb-login-card .pb-field { margin-bottom: 16px; }

#pbApp .pb-login-card .pb-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

#pbApp .pb-login-card .pb-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
}

#pbApp .pb-login-card .pb-field-aux {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
}

#pbApp .pb-login-card .pb-field-aux:hover { color: var(--accent); text-decoration: underline; }

/* Taller than the in-app inputs on purpose: this is the only thing on the screen and
   these are the two hardest fields in the product to type on a phone. */
#pbApp .pb-login-card .pb-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color .14s, box-shadow .14s, background .14s;
}

#pbApp .pb-login-card .pb-input::placeholder { color: var(--text-3); }

#pbApp .pb-login-card .pb-input:hover { border-color: var(--border-2); }

#pbApp .pb-login-card .pb-input:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* ── Field furniture ────────────────────────────────
   .pb-input-wrap is the positioning context for both the leading icon and the trailing
   reveal button. The 42px right padding is applied to every wrapped input rather than
   only the ones with a reveal: on an icon-only field it is a few pixels of unused room
   at the end of the line, which costs nothing and keeps the rule free of :has(). */
#pbApp .pb-login-card .pb-input-wrap { position: relative; }
#pbApp .pb-login-card .pb-input-wrap .pb-input { padding-right: 42px; }

/* The icon names the field at a glance and gives the 46px input something to balance
   against on the left. Pointer-events off so a click lands on the input behind it. */
#pbApp .pb-login-card .pb-input-ico {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--text-3);
    pointer-events: none;
    transition: color .14s;
}

#pbApp .pb-login-card .pb-input-ico + .pb-input { padding-left: 40px; }

/* The icon takes the accent while its field has focus. The icon precedes the input, so
   this needs :has() — it is colour only, and a browser without it just leaves the icon
   grey, which is the unfocused state and not a broken one. */
#pbApp .pb-login-card .pb-input-ico:has(+ .pb-input:focus) { color: var(--accent); }

/* Password reveal — sits inside the field's padding box. tabindex=-1 in the markup keeps
   it out of the tab run between the password and the submit button. */
#pbApp .pb-login-card .pb-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color .12s, background .12s;
}

#pbApp .pb-login-card .pb-reveal:hover { color: var(--text); background: var(--surface-3); }
#pbApp .pb-login-card .pb-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Default state is "password hidden", so the eye shows with a slash through it;
   pressing the button flips to the plain eye. */
.pb-reveal .pb-eye-off { display: inline; }
.pb-reveal[aria-pressed="true"] .pb-eye-off { display: none; }

/* ── Remember me ────────────────────────────────── */
#pbApp .pb-login-card .pb-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

#pbApp .pb-login-card .pb-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Submit ─────────────────────────────────────── */
#pbApp .pb-login-card .pb-login-submit,
#pbApp .pb-login-card button[type=submit],
#pbApp .pb-login-card .pb-btn.pri {
    width: 100%;
    height: 46px;
    margin-top: 22px;
    padding: 0 16px;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 11px;
}

/* ── Card foot ──────────────────────────────────────
   The rule separates "the form" from "everything after the form" — the way out to
   sign-up, and the line about what happens to the password. */
#pbApp .pb-login-card .pb-login-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 14px;
}

/* SignUp, ForgotPassword and ResetPassword render this on its own straight after the
   button, so it carries its own spacing; inside the foot the grid gap already provides it. */
#pbApp .pb-login-card .pb-login-alt {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--text-2);
    text-align: center;
}

#pbApp .pb-login-card .pb-login-foot .pb-login-alt { margin: 0; }

#pbApp .pb-login-card .pb-auth-note {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-3);
    text-align: center;
}

#pbApp .pb-login-card .pb-auth-note svg { flex-shrink: 0; margin-top: 2px; }

#pbApp .pb-login-card a { color: var(--accent); font-weight: 500; }

/* ── Alert ──────────────────────────────────────── */
#pbApp .pb-login-card .pb-alert.err,
.pb-alert.err {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--danger-soft);
    background: var(--danger-soft);
    color: var(--danger-text);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.pb-alert.err svg { flex-shrink: 0; margin-top: 1px; }

.pb-shell.pb-dark .pb-alert.err { border-color: rgba(241,103,92,.34); }

/* Not a failure - a heads-up. The invitation page tells whoever is at the keyboard that finishing
   will switch the session to the invited person, and with only .err defined here that sentence
   rendered as bare text jammed against the next field's label. */
#pbApp .pb-login-card .pb-alert.warn,
.pb-alert.warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--warning, #e8a33d);
    background: var(--warning-soft, rgba(232,163,61,.12));
    color: var(--warning-text, #8a5a12);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.pb-shell.pb-dark .pb-alert.warn { border-color: rgba(232,163,61,.34); color: #f0c489; }

/* ══ Folded layout ════════════════════════════════════════════
   Below 960px the brand panel would squeeze the form to nothing, so it collapses to a
   short header strip: the gradient and the lockup survive, the pitch and the day card
   do not. */
@media (max-width: 960px) {
    .pb-shell.pb-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

    .pb-auth-brand {
        padding: 26px 24px;
        gap: 0;
        justify-content: center;
        min-height: 96px;
    }

    .pb-auth-brand::after { display: none; }
    .pb-auth-pitch, .pb-auth-foot { display: none; }
    .pb-auth-logo { width: 168px; }
    #pbApp.pb-login-wrap { padding: 40px 24px 56px; }
}

/* Under 560px the strip is redundant — the lockup moves into the card and the whole
   screen becomes one column of content. The card drops its chrome with it: at this width
   it is the entire screen, so a border and a shadow are drawing a box around nothing. */
@media (max-width: 560px) {
    .pb-auth-brand { display: none; }
    .pb-shell.pb-auth { grid-template-rows: 1fr; }
    .pb-auth-main { background: var(--surface); }
    #pbApp.pb-login-wrap { align-items: flex-start; padding: 52px 20px 40px; }

    .pb-login-card {
        max-width: 420px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pb-login-mark { display: block; }
    .pb-auth-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    #pbApp .pb-login-card .pb-input,
    #pbApp .pb-login-card .pb-input-ico,
    #pbApp .pb-login-card .pb-reveal { transition: none; }
}