/* ==========================================================================
   MyKhata360 — AUTHENTICATION THEME
   --------------------------------------------------------------------------
   Login, register, forgot- and reset-password share one design system with the
   marketing site, because they are one visit: a person arrives from the
   homepage and signs in. Switching palette at the door reads as a different
   product.

   HOW THIS WORKS, and why it is not 400 rewritten declarations: the block below
   re-points the APP's --mk-* tokens at the SITE's --mk-site-* values, scoped to
   .auth. Every existing .login-* rule, every MyStackBlazor control and every
   inline var(--mk-...) inside an auth page then renders in paper/navy/blue with
   no edit of its own. Same trick website.css uses for its legacy --brand aliases.

   It follows that an auth page must NOT hardcode a colour — a literal is the one
   thing this indirection cannot reach. That is the house rule anyway
   (docs/css-design-system.md); here it is load-bearing.

   THEME-FIXED, like the site. A signed-in visitor can carry .dark onto /login by
   navigating there from the app; auth stays warm paper either way, so the screen
   never half-changes between themes.
   ========================================================================== */

.auth {
    /* --- surfaces ------------------------------------------------------- */
    --mk-bg:              var(--mk-site-paper);
    --mk-bg-surface:      var(--mk-site-surface);
    --mk-bg-subtle:       var(--mk-site-paper-alt);
    --mk-bg-muted:        var(--mk-site-paper-alt);
    --mk-border:          var(--mk-site-border);
    --mk-border-strong:   var(--mk-site-border);

    /* --- ink ------------------------------------------------------------ */
    --mk-text-strong:     var(--mk-site-ink);
    --mk-text:            var(--mk-site-text);
    --mk-text-2:          var(--mk-site-muted);
    --mk-text-muted:      var(--mk-site-muted);
    --mk-text-oncolor:    var(--mk-site-on-ink);

    /* --- action ---------------------------------------------------------
       --mk-primary-ink is the AA-safe variant in the app palette because the
       app orange is only ~2.9:1. On the site both roles are the same blue,
       which already clears 4.5:1 on paper, so they collapse to one value. */
    --mk-primary:         var(--mk-site-cta);
    --mk-primary-ink:     var(--mk-site-cta);
    --mk-primary-hover:   var(--mk-site-cta-hover);
    --mk-primary-lt:      var(--mk-site-cta-soft);
    --mk-focus-ring:      var(--mk-site-cta-ring);

    /* --- status --------------------------------------------------------- */
    --mk-fin-positive:    var(--mk-site-success);
    --mk-fin-positive-fg: var(--mk-site-success);
    --mk-fin-negative:    var(--mk-site-red);
    --mk-fin-negative-fg: var(--mk-site-red);

    /* --- type -----------------------------------------------------------
       Inter for every control, label, error and OTP digit. Kalam is an accent
       for the brand column only, opted into with .auth-hand. */
    --mk-font:            var(--mk-site-font);

    /* Bootstrap loads before app.css and still owns .bg-primary, which the package's
       buttons carry. It reads --bs-primary-rgb, not --color-primary, so aliasing only
       the latter left every primary button on this screen app-orange. */
    --bs-primary:         var(--mk-site-cta);
    --bs-primary-rgb:     var(--mk-site-cta-rgb);

    /* MyStackBlazor reads these two for its own primary. */
    --color-primary:            var(--mk-site-cta);
    --color-primary-foreground: var(--mk-site-on-ink);

    font-family: var(--mk-site-font);
    color: var(--mk-site-text);
    background: var(--mk-site-paper);
    -webkit-font-smoothing: antialiased;
}

/* The form column is the white card standing on the paper page.
   .auth.login-page is COMPOUND, not descendant: Login.razor puts both classes on
   the same element, so ".auth .login-page" matched nothing and the page stayed
   white. */
.auth.login-page        { background: var(--mk-site-paper); }
.auth .login-form-panel { background: var(--mk-site-surface); border-left-color: var(--mk-site-border); }

/* The brand column paints itself from the app's hero tokens (a peach gradient).
   Re-point those at the site's paper so the two halves read as one page. The
   panel keeps its own rules; only what they resolve to changes. */
.auth {
    --mk-hero-bg:   var(--mk-site-paper-alt);
    --mk-hero-fill: var(--mk-site-cta-soft);
    --mk-hero-fg:   var(--mk-site-ink);
    --mk-hero-fg-2: var(--mk-site-muted);
}

/* 45 / 55, the form taking the larger share. The panel was flex:1 against a fixed
   480px form, which at 1440px gave the brand story two thirds of the screen and
   squeezed the actual job into a third. */
@media (min-width: 769px) {
    .auth .login-brand      { flex: 0 0 45%; }
    .auth .login-form-panel { width: auto; flex: 1 1 55%; }
    .auth .login-form-inner { max-width: 460px; padding: 0 48px; }
}

/* --- Handwriting accent ------------------------------------------------
   Kalam is decorative and belongs to the brand column. Never on a label, an
   error, an OTP digit or a button. Never on Devanagari either: Kalam ships no
   Indic coverage, so a Marathi string set in it falls back mid-sentence and
   the line changes face halfway through. */
.auth .auth-hand {
    font-family: var(--mk-site-font-hand);
    font-size: var(--mk-site-hand);
    color: var(--mk-site-red);
    line-height: 1.3;
}
.auth :lang(hi) .auth-hand,
.auth :lang(mr) .auth-hand { font-family: var(--mk-site-font); font-style: italic; }

/* --- Card --------------------------------------------------------------
   One vertical read: heading, fields, recovery, primary action, alternative,
   switch link. Capped so the eye never travels sideways. */
.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--mk-site-surface);
    border: 1px solid var(--mk-site-border);
    border-radius: var(--mk-site-r-lg);
    padding: 38px;
    box-shadow: var(--mk-site-sh-md);
    box-sizing: border-box;
}

/* --- Controls ----------------------------------------------------------
   52px is a comfortable target for a shop owner on a phone. 16px text is not
   a style choice: iOS Safari zooms the viewport on focus for anything under
   16px, which throws the rest of the form off screen mid-entry. */
.auth-input,
.auth :where(input[type="text"], input[type="email"], input[type="tel"],
             input[type="password"], input[type="number"], select) {
    min-height: 52px;
    border: 1px solid var(--mk-site-border);
    border-radius: var(--mk-site-r-btn);
    padding: 0 14px;
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-body);
    color: var(--mk-site-text);
    background: var(--mk-site-surface);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--mk-dur-fast) var(--mk-ease),
                box-shadow var(--mk-dur-fast) var(--mk-ease);
}
.auth-input:focus,
.auth :where(input, select):focus {
    outline: none;
    border-color: var(--mk-site-cta);
    box-shadow: var(--mk-site-cta-ring);
}
.auth-input[aria-invalid="true"] { border-color: var(--mk-site-red); }

.auth-label {
    display: block;
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-ink);
    margin-bottom: 6px;
}

/* A red border on its own is invisible to a red-green colour deficiency, so an
   error always carries its sentence and a mark, never just the outline. */
.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-red);
    line-height: 1.45;
}

.auth-hint {
    margin-top: 6px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}
.auth-ok { color: var(--mk-site-success); }

/* --- Password field ----------------------------------------------------
   The eye sits inside the field, so the input reserves room for it instead of
   letting the button sit on top of a long typed value. */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap .auth-input { padding-right: 48px; }
.auth-pw-toggle {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--mk-site-muted);
    border-radius: var(--mk-site-r-sm);
}
.auth-pw-toggle:hover { color: var(--mk-site-ink); }
.auth-pw-toggle:focus-visible { outline: none; box-shadow: var(--mk-site-cta-ring); }

/* --- Buttons ---------------------------------------------------------- */
.auth-btn {
    width: 100%;
    min-height: 52px;
    border-radius: var(--mk-site-r-btn);
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-body);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--mk-dur-fast) var(--mk-ease);
}
.auth-btn-primary {
    background: var(--mk-site-cta);
    color: var(--mk-site-on-ink);
}
.auth-btn-primary:hover:not(:disabled) { background: var(--mk-site-cta-hover); }
.auth-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.auth-btn-secondary {
    background: var(--mk-site-surface);
    color: var(--mk-site-ink);
    border-color: var(--mk-site-border);
}
.auth-btn-secondary:hover:not(:disabled) {
    background: var(--mk-site-cta-soft);
    border-color: var(--mk-site-cta);
}
.auth-btn:focus-visible { outline: none; box-shadow: var(--mk-site-cta-ring); }

/* --- "or" divider ----------------------------------------------------- */
.auth-or {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}
.auth-or::before, .auth-or::after {
    content: ""; flex: 1; height: 1px; background: var(--mk-site-border);
}

/* --- Sign-in method switch ---------------------------------------------
   Password and OTP are the two real choices, so they share a two-up segmented
   control. QR is a tertiary route and sits below as a link: three equal tabs
   implied three equally likely paths, which is not true. "Email" as a tab
   label was worse than unequal — it was wrong, since the same field takes a
   mobile number, an email or a user ID. */
.auth-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--mk-site-paper-alt);
    border-radius: var(--mk-site-r-btn);
    margin-bottom: 22px;
}
.auth-mode {
    min-height: 40px;
    border: none; background: none; cursor: pointer;
    border-radius: var(--mk-site-r-sm);
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-muted);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-mode.is-on {
    background: var(--mk-site-surface);
    color: var(--mk-site-ink);
    box-shadow: var(--mk-site-sh-sm);
}
.auth-mode:focus-visible { outline: none; box-shadow: var(--mk-site-cta-ring); }

.auth-tertiary {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-cta);
}
.auth-tertiary:hover { text-decoration: underline; }

/* --- Desktop split ------------------------------------------------------
   45 / 55 in favour of the form: the brand column is context, the form is the
   job. Below 769px the brand column is removed outright — on a phone the
   person has already decided to sign in, and a full-height illustration only
   pushes the first field under the fold. */
@media (min-width: 769px) {
    .auth-split { display: flex; min-height: 100dvh; }
    .auth-split > .auth-brand-col { flex: 0 0 45%; }
    .auth-split > .auth-form-col  { flex: 1 1 55%; }
}
@media (max-width: 768.98px) {
    .auth-brand-col { display: none; }
    .auth-card { border: none; box-shadow: none; padding: 24px 20px; max-width: 100%; }
    .auth { background: var(--mk-site-surface); }
}