/* ==========================================================================
   CaseDesk — shared authentication pages (Tabler sign-in / sign-up layout)
   Used by BOTH auth idioms:
     - Pages/Account/Login.cshtml   (MVC Razor Page, links Tabler itself)
     - Pages/Register.razor         (Blazor, Tabler comes from App.razor)
   Requires casedesk-tokens.css.

   The markup is Tabler's `page-center` + `card card-md` + `form-control`
   pattern, so this file only carries what Tabler doesn't: the illustration
   column, validation output from both idioms, a few button/link resets, and
   overrides for the global app.css rules that would otherwise leak in.

   Why global and not CSS isolation: scoped styles never reach elements a
   child component renders (ValidationMessage, BrandLogo), so it has to be
   global anyway.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

.auth-page {
    background-color: var(--cd-bg);
    font-family: var(--cd-font-sans);
    color: var(--cd-text);
}

.auth-page .card {
    border-color: var(--cd-border);
    box-shadow: var(--cd-shadow-card);
}

.auth-page .card-title,
.auth-page h2 {
    color: var(--cd-text-heading);
}

/* Brand sits centred above the card, like the template's logo. */
.auth-brand {
    display: inline-flex;
    padding: 0;
    margin: 0;
    height: auto;
}

/* Illustration column ----------------------------------------------------- */

.auth-illustration {
    width: 100%;
    max-width: 460px;
    height: auto;
}

/* --------------------------------------------------------------------------
   Controls — Tabler's own styles, plus overrides for app.css leaks
   -------------------------------------------------------------------------- */

/* app.css rounds every .btn to 12px and forces a 45px height. Not here. */
.auth-page .btn {
    min-height: 0;
    border-radius: var(--tblr-border-radius, 4px) !important;
}

.auth-page .btn-primary {
    background-color: var(--cd-primary-700);
    border-color: var(--cd-primary-700);
}

    .auth-page .btn-primary:hover:not(:disabled) {
        background-color: var(--cd-primary-800);
        border-color: var(--cd-primary-800);
    }

    .auth-page .btn-primary:active:not(:disabled) {
        background-color: var(--cd-primary-900);
        border-color: var(--cd-primary-900);
    }

.auth-page .form-control:focus {
    border-color: var(--cd-primary-700);
    box-shadow: var(--cd-focus-ring);
}

/* The input-group-flat text slot inherits the field's focus border. */
.auth-page .input-group-flat:focus-within {
    box-shadow: var(--cd-focus-ring);
    border-radius: var(--tblr-border-radius, 4px);
}

    .auth-page .input-group-flat:focus-within .form-control,
    .auth-page .input-group-flat:focus-within .input-group-text {
        border-color: var(--cd-primary-700);
        box-shadow: none;
    }

.auth-page .form-label {
    color: var(--cd-text-heading);
}

/* Blazor marks plain <input>s with `.valid` / `.invalid`; app.css paints them
   with green/red outlines. Tabler's border states replace that. */
.auth-page .form-control.valid,
.auth-page .form-control.invalid,
.auth-page .form-control.modified.valid {
    outline: none;
}

/* Validation output.
   `input-validation-error` / `field-validation-error` = jQuery unobtrusive (Login.cshtml)
   `is-invalid` / `validation-message`                 = Blazor EditForm (Register.razor) */
.auth-page .form-control.input-validation-error,
.auth-page .form-control.is-invalid {
    border-color: var(--cd-danger);
}

    .auth-page .form-control.input-validation-error:focus,
    .auth-page .form-control.is-invalid:focus {
        box-shadow: var(--cd-focus-ring-danger);
    }

.auth-page .input-group-flat:has(.input-validation-error),
.auth-page .input-group-flat:has(.is-invalid) {
    --tblr-border-color: var(--cd-danger);
}

.auth-page .field-validation-error,
.auth-page .validation-message {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cd-danger);
    margin-top: 0.25rem;
}

/* Tabler gives .form-hint display:block, which beats the `hidden` attribute. */
.auth-page [hidden] {
    display: none !important;
}

/* Reveal-password / status controls inside an input-group-text slot. */
.auth-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--cd-text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

    .auth-reveal:hover {
        color: var(--cd-primary-700);
    }

    .auth-reveal:focus-visible {
        outline: 2px solid var(--cd-primary-700);
        outline-offset: 2px;
        border-radius: 2px;
    }

.auth-status {
    display: inline-flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--cd-success);
}

/* A <button> that reads as an inline link (Forgot password, Resend code, Back). */
.auth-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    color: var(--cd-primary-700);
    text-decoration: none;
    cursor: pointer;
}

    .auth-link:hover {
        color: var(--cd-primary-800);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .auth-link:focus-visible {
        outline: 2px solid var(--cd-primary-700);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* One-time code: monospace-ish spacing. */
.auth-otp {
    letter-spacing: 0.4em;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

    .auth-otp::placeholder {
        letter-spacing: normal;
        font-weight: 400;
    }

/* Footer link under the card. */
.auth-page .auth-footer a {
    font-weight: 600;
    color: var(--cd-primary-700);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .auth-page .card-md > .card-body {
        padding: 1.5rem;
    }

    .auth-page .form-control {
        font-size: 1rem; /* >=16px stops iOS zoom-on-focus */
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Label with a trailing action (Forgot password / Resend code). Kept outside
   the <label> because a <button> is labelable content and can't live inside
   one. */
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .auth-label-row .form-label {
        margin-bottom: 0;
    }

    .auth-label-row .auth-link {
        font-size: 0.875rem;
    }

/* Plan toggle on /signup — segmented control, preselected from the landing
   page pricing cards. */
.signup-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.signup-plan-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cd-text-muted);
}

.signup-plan-toggle {
    display: inline-flex;
    padding: .25rem;
    gap: .25rem;
    background: var(--cd-surface-alt);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-pill);
}

.signup-plan-option {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .4375rem .875rem;
    border: 0;
    border-radius: var(--cd-radius-pill);
    background: transparent;
    color: var(--cd-text-muted);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color var(--cd-transition), color var(--cd-transition), box-shadow var(--cd-transition);
}

    .signup-plan-option .ti {
        font-size: 1.0625rem;
    }

    .signup-plan-option:hover {
        color: var(--cd-text-heading);
    }

    .signup-plan-option:focus-visible {
        outline: none;
        box-shadow: var(--cd-focus-ring);
    }

    .signup-plan-option.is-active {
        background: var(--cd-surface);
        color: var(--cd-primary-700);
        font-weight: 600;
        box-shadow: var(--cd-shadow-sm);
    }

.signup-plan-hint {
    font-size: .8125rem;
    color: var(--cd-text-muted);
}

/* Copyright line pinned to the bottom of the sign-in / sign-up pages. The
   card container carries my-auto so it stays vertically centred above it. */
.auth-copyright {
    margin-top: auto;
    padding: var(--cd-space-4) var(--cd-space-4) var(--cd-space-5);
    text-align: center;
    font-size: .8125rem;
    color: var(--cd-text-muted);
}