/* =====================================================================
   jcc-auth.css — the signed-out surface (Login / Logout / ChangePassword /
   AccessDenied).

   A SEPARATE stylesheet, linked only from _AuthLayout. The auth pages want a
   card that reads as the front door — dark ground, deep elevation, brand mark
   up top — and the shared .jcc-form is used by journal entry, invoice lines
   and every modal in the app. Restyling that class to make one page handsome
   would have redecorated the whole ledger. So these are their own classes, and
   this file is loaded on four pages and nowhere else.

   Palette sampled from the mark itself (wwwroot/img/joticle-wordmark.png):
   the navy dot, the blue ring, the steel wordmark. No new global tokens — a
   brand colour introduced here would drift from the app's slate the moment
   either changed.
   ===================================================================== */

.jcc-auth {
    --auth-navy:  #0C2340;   /* the dot at the top of the mark */
    --auth-blue:  #17709F;   /* the ring */
    --auth-steel: #7FA8C6;   /* the wordmark */

    min-height: 100vh;
    min-height: 100dvh;      /* mobile browser chrome eats vh; dvh is the real viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--jcc-space-6) var(--jcc-space-5);
    position: relative;
    overflow: hidden;

    /* Deep, not black. A near-black ground makes a white card float but reads
       as a consumer app; this keeps the corporate register while still giving
       the card somewhere to lift off from. */
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(23, 112, 159, .55), transparent 70%),
        radial-gradient(900px 500px at 85% 110%, rgba(127, 168, 198, .28), transparent 65%),
        linear-gradient(165deg, #0C2340 0%, #103154 55%, #0C2340 100%);
}

/* A single hairline arc echoing the ring in the mark. Decoration that costs no
   markup and no request, and is invisible to assistive tech. */
.jcc-auth::before {
    content: "";
    position: absolute;
    width: 62rem;
    height: 62rem;
    border: 1px solid rgba(127, 168, 198, .14);
    border-radius: 50%;
    top: -34rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.jcc-auth__content {
    position: relative;      /* above the arc */
    width: 100%;
    max-width: 27rem;
    display: flex;
    flex-direction: column;
    gap: var(--jcc-space-4);
}

/* ---------- the card ---------- */

.jcc-auth-card {
    background: var(--surface);
    border-radius: 14px;
    padding: var(--jcc-space-7) var(--jcc-space-6) var(--jcc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--jcc-space-4);

    /* Two shadows, not one: a wide soft cast for the lift, and a tight dark one
       under the edge so the card has a definite bottom rather than fading out. */
    box-shadow:
        0 24px 64px -12px rgba(6, 20, 38, .55),
        0 2px 8px rgba(6, 20, 38, .28);
}

.jcc-auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jcc-space-2);
    margin-bottom: var(--jcc-space-2);
}

/* Width-constrained, height auto: the mark is 401x175 and must never be
   stretched to fit a box. */
.jcc-auth-card__logo {
    width: 10.5rem;
    height: auto;
    display: block;
}

.jcc-auth-card__title {
    margin: 0;
    font-size: var(--jcc-size-body);
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .01em;
    text-align: center;
}

/* ---------- fields ---------- */

.jcc-auth-field { display: flex; flex-direction: column; gap: 6px; }

.jcc-auth-field__label {
    font-size: var(--jcc-size-label);
    font-weight: 500;
    color: var(--ink-3);
}

.jcc-auth-field__input {
    width: 100%;
    box-sizing: border-box;
    height: 2.75rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: var(--jcc-size-body);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: border-color var(--jcc-motion-fast), box-shadow var(--jcc-motion-fast);
}

.jcc-auth-field__input::placeholder { color: var(--faint); }

/* The focus ring is the brand blue and it is a RING, not a colour swap — the
   border alone is too quiet at this size to show a keyboard user where they are. */
.jcc-auth-field__input:focus {
    outline: none;
    border-color: var(--auth-blue);
    box-shadow: 0 0 0 3px rgba(23, 112, 159, .16);
}

.jcc-auth-field__error { font-size: var(--jcc-size-label); color: var(--alert); }

/* ---------- buttons ---------- */

.jcc-auth-btn {
    width: 100%;
    height: 2.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: var(--jcc-size-body);
    font-weight: 600;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--jcc-motion-fast), border-color var(--jcc-motion-fast),
                transform var(--jcc-motion-fast);
}

.jcc-auth-btn:active { transform: translateY(1px); }

.jcc-auth-btn--primary {
    background: var(--auth-blue);
    color: #fff;
}

.jcc-auth-btn--primary:hover { background: #145E85; }

.jcc-auth-btn--ghost {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--btn-border);
}

.jcc-auth-btn--ghost:hover { background: var(--surface-hover); border-color: var(--muted); }

.jcc-auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 112, 159, .3);
}

/* ---------- the "or" rule ---------- */

.jcc-auth__or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--faint);
    font-size: var(--jcc-size-label);
}

.jcc-auth__or::before,
.jcc-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- messages ---------- */

.jcc-auth__summary {
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: var(--jcc-size-label);
    line-height: 1.5;
    color: #8a1c1c;
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .22);
}

.jcc-auth__summary:empty { display: none; }   /* the validation partial renders an empty div */

.jcc-auth__prose {
    margin: 0;
    font-size: var(--jcc-size-body);
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

/* Sits under the card on the dark ground, so it is steel rather than muted grey. */
.jcc-auth__footnote {
    margin: 0;
    text-align: center;
    font-size: var(--jcc-size-label);
    color: rgba(255, 255, 255, .5);
}

.jcc-auth__footnote a { color: rgba(255, 255, 255, .78); }

/* ---------- development-only quick sign-in ----------
   Dashed and off-palette ON PURPOSE. It must never be mistaken for production
   UI, and it is the one thing on this page that should look slightly wrong. */

.jcc-devlogin {
    padding: 14px 16px;
    border: 1px dashed rgba(227, 200, 147, .5);
    border-radius: 12px;
    background: rgba(12, 35, 64, .55);
    backdrop-filter: blur(2px);
}

.jcc-devlogin__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.jcc-devlogin__tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #F0D9A8;
    background: rgba(181, 117, 29, .3);
    border: 1px solid rgba(227, 200, 147, .45);
    border-radius: 5px;
    padding: 1px 6px;
}

.jcc-devlogin__title { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.jcc-devlogin__hint  { margin: 0 0 10px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.jcc-devlogin__list  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.jcc-devlogin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
}

.jcc-devlogin__who  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jcc-devlogin__name { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.jcc-devlogin__meta { font-size: 10.5px; color: rgba(255, 255, 255, .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jcc-devlogin__go {
    flex: none;
    width: auto;
    height: 2rem;
    padding: 0 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .18);
}

.jcc-devlogin__go:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* ---------- small screens ---------- */

@media (max-width: 30rem) {
    .jcc-auth { padding: var(--jcc-space-4) var(--jcc-space-3); }
    .jcc-auth-card { padding: var(--jcc-space-6) var(--jcc-space-4) var(--jcc-space-5); }
    .jcc-auth::before { display: none; }
}

/* Somebody who asked for less motion did not ask for less contrast — only the
   transitions go. */
@media (prefers-reduced-motion: reduce) {
    .jcc-auth-field__input,
    .jcc-auth-btn { transition: none; }
    .jcc-auth-btn:active { transform: none; }
}