/* ==========================================================================
   BALOCH SM — AUTHENTICATION DESIGN SYSTEM
   ==========================================================================

   FILE:
   <DOMAIN_ROOT>/public_html/assets/css/auth.css

   WEBSITE:
   https://investt.online

   VERSION:
   1.0.0

   ==========================================================================
   INTEGRATED PAGES

   public_html/login.php
   public_html/signup.php

   public_html/admin/login.php
   public_html/admin/logout.php

   ==========================================================================
   EXISTING HTML COMPONENTS

   .auth-page
   .admin-auth-page
   .page-shell
   .app-topbar
   .app-topbar-inner
   .auth-layout
   .auth-hero
   .auth-kicker
   .auth-card
   .auth-form
   .field
   .field-help
   .auth-links
   .auth-note
   .auth-disclaimer
   .alert
   .alert-error
   .btn
   .btn-primary
   .btn-ghost
   .full-width
   .footer-minimal

   ADMIN MFA IDS

   #admin-password-form
   #admin-mfa-form
   #admin-username
   #admin-password
   #admin-authenticator-code
   #admin-login-error
   #admin-logout-error

   ==========================================================================
   CSS DEPENDENCIES

   reset.css
   tokens.css
   themes/{approved-theme}.css
   layout.css
   components.css

   Subsequent stylesheets:
   responsive.css
   accessibility.css
   motion/reduced-motion.css

   ==========================================================================
   SECURITY DESIGN RULES

   01. No credentials in CSS.
   02. No external font or tracking requests.
   03. No JavaScript execution.
   04. No simulated login success.
   05. Password visibility requires actual controlled JavaScript.
   06. MFA validity comes only from the private service.
   07. Admin authentication remains separate from member login.
   08. No hidden protected content is made visible.
   09. No styling-dependent authorization decisions.
   10. Browser password managers remain supported.

   ========================================================================== */


/* ==========================================================================
   01. AUTHENTICATION PAGE FOUNDATION
   ========================================================================== */

body.auth-page,
body.page-auth {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    background-color: var(--bsm-bg-page);

    color: var(--bsm-text-primary);

    font-family: var(--bsm-font-sans);

    isolation: isolate;
}


/* ==========================================================================
   02. SUBTLE PREMIUM AUTHENTICATION BACKGROUND
   ==========================================================================

   The ambient background uses CSS gradients only.

   It contains no remote resources or financial data.

   Very small or reduced-motion devices remain supported.
   ========================================================================== */

.auth-page {
    background-image:
        radial-gradient(
            circle at 12% 16%,
            var(--bsm-color-primary-soft) 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 82%,
            var(--bsm-color-accent-soft) 0%,
            transparent 30%
        );

    background-attachment: scroll;
}

.auth-page .page-shell,
.auth-page .app-shell {
    background-color: transparent;
}


/* ==========================================================================
   03. AUTHENTICATION HEADER
   ==========================================================================

   Uses the existing app-topbar markup.

   Mobile navigation must remain accessible without JS.
   ========================================================================== */

.auth-page .app-topbar {
    background-color: var(--bsm-bg-header);

    border-bottom:
        1px solid
        var(--bsm-border-subtle);
}

.auth-page .app-topbar-inner {
    gap: var(--bsm-space-4);
}

.auth-page .app-topbar .brand {
    font-size: var(--bsm-text-lg);

    font-weight: var(--bsm-weight-bold);
}

.auth-page .app-topbar .brand-mark {
    width: 42px;
    height: 42px;
}

.auth-page .app-topbar nav {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--bsm-space-2);
}

.auth-page .app-topbar nav .btn {
    white-space: normal;
}


/* ==========================================================================
   04. AUTHENTICATION MAIN AREA
   ========================================================================== */

.auth-page .app-main {
    display: flex;
    align-items: center;

    flex: 1 0 auto;

    width: 100%;

    padding-block:
        clamp(
            var(--bsm-space-6),
            5vw,
            var(--bsm-space-16)
        );
}

.auth-page .auth-layout {
    align-items: center;

    min-width: 0;
}

.auth-page .auth-layout > * {
    min-width: 0;
}


/* ==========================================================================
   05. AUTHENTICATION HERO PANEL
   ==========================================================================

   Supports member login, signup, administrator login and logout.

   Large headings remain readable on narrow screens.
   ========================================================================== */

.auth-hero {
    position: relative;

    isolation: isolate;

    color: var(--bsm-text-primary);
}

.auth-hero > * {
    position: relative;
}

.auth-hero .auth-kicker {
    color: var(--bsm-color-primary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-extrabold);

    letter-spacing: var(--bsm-tracking-label);
}

.auth-hero h1 {
    color: var(--bsm-text-primary);

    font-family: var(--bsm-font-display);

    font-weight: var(--bsm-weight-extrabold);

    line-height: var(--bsm-leading-tight);

    letter-spacing: var(--bsm-tracking-tight);

    text-wrap: balance;
}

.auth-hero h1 .accent,
.auth-hero h1 .highlight,
.auth-hero .text-accent {
    color: var(--bsm-color-primary);
}

.auth-hero > p:not(.auth-kicker) {
    max-width: 56ch;

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base);

    line-height: var(--bsm-leading-relaxed);
}


/* ==========================================================================
   06. AUTHENTICATION HERO ARTWORK
   ==========================================================================

   Existing login/admin pages use approved SVG assets.

   Responsive sizing must not distort their viewBox geometry.
   ========================================================================== */

.auth-hero > img,
.auth-hero > svg,
.auth-hero .auth-artwork {
    display: block;

    width: auto;

    max-width: min(100%, 440px);

    height: auto;

    margin-block: var(--bsm-space-2);

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 28px rgba(0, 0, 0, 0.18)
        );
}

.auth-hero .auth-artwork {
    pointer-events: none;
}


/* ==========================================================================
   07. HERO DECORATIVE DIVIDER
   ========================================================================== */

.auth-hero-rule,
.auth-hero-divider {
    display: block;

    width: min(200px, 48%);

    height: 3px;

    border: 0;

    border-radius: var(--bsm-radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--bsm-color-primary),
            var(--bsm-color-accent),
            transparent
        );
}


/* ==========================================================================
   08. AUTHENTICATION CARD
   ==========================================================================

   layout.css establishes the card's positioning.

   components.css establishes its surface and border.

   This file adds authentication-specific appearance.

   Works with both member and administrator forms.
   ========================================================================== */

.auth-card {
    position: relative;

    isolation: isolate;

    padding:
        clamp(
            var(--bsm-space-5),
            3vw,
            var(--bsm-space-8)
        );

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-2xl);

    background-color: var(--bsm-bg-card);

    color: var(--bsm-text-primary);

    box-shadow:
        var(--bsm-shadow-xl);

    overflow: visible;
}

.auth-card > * {
    min-width: 0;
}


/* ==========================================================================
   09. AUTHENTICATION CARD BRAND
   ========================================================================== */

.auth-card > .brand,
.auth-card > .auth-brand {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: var(--bsm-space-3);

    max-width: 100%;

    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-base);

    font-weight: var(--bsm-weight-bold);

    letter-spacing: var(--bsm-tracking-tight);
}

.auth-card > .brand .brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 auto;
}


/* ==========================================================================
   10. CARD HEADING AND INTRODUCTION
   ========================================================================== */

.auth-card h1,
.auth-card h2 {
    max-width: 100%;

    color: var(--bsm-text-primary);

    font-size: var(--bsm-heading-section);

    font-weight: var(--bsm-weight-bold);

    line-height: var(--bsm-leading-tight);

    letter-spacing: var(--bsm-tracking-tight);

    overflow-wrap: break-word;

    text-wrap: balance;
}

.auth-card > p:not(.auth-kicker):not(.auth-disclaimer) {
    max-width: 62ch;

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

    line-height: var(--bsm-leading-relaxed);
}

.auth-card .auth-kicker {
    color: var(--bsm-color-primary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-extrabold);

    letter-spacing: var(--bsm-tracking-label);

    text-transform: uppercase;
}


/* ==========================================================================
   11. AUTHENTICATION FORM STRUCTURE
   ========================================================================== */

.auth-form {
    width: 100%;

    min-width: 0;
}

.auth-form > * {
    min-width: 0;
}

.auth-form .field,
.auth-form .form-field {
    display: flex;

    flex-direction: column;

    gap: var(--bsm-space-2);

    min-width: 0;
}


/* ==========================================================================
   12. FORM LABELS
   ========================================================================== */

.auth-form label,
.auth-form .input-label {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

    font-weight: var(--bsm-weight-semibold);

    line-height: var(--bsm-leading-heading);
}

.auth-form .required-mark {
    color: var(--bsm-color-danger);
}


/* ==========================================================================
   13. AUTHENTICATION INPUTS
   ==========================================================================

   Input sizing inherits the shared components.css system.

   These rules add sign-in-specific text rendering.
   ========================================================================== */

.auth-form input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"],
    [type="number"]
),
.auth-form select {
    width: 100%;

    min-width: 0;

    min-height: var(--bsm-input-height-lg);

    padding-inline: var(--bsm-space-4);

    border-radius: var(--bsm-radius-md);

    background-color: var(--bsm-bg-input);

    color: var(--bsm-text-primary);

    font-size: 1rem;

    line-height: 1.45;
}

.auth-form input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"]
)::placeholder {
    color: var(--bsm-text-placeholder);
}


/* ==========================================================================
   14. INPUT INTERACTION
   ==========================================================================

   Keep focus visible.

   Do not use outline:none without an accessible replacement.
   ========================================================================== */

.auth-form input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"],
    [type="number"]
):focus-visible {
    border-color: var(--bsm-border-focus);

    outline:
        2px solid
        var(--bsm-focus-color);

    outline-offset: 2px;

    box-shadow: var(--bsm-focus-shadow);
}


/* ==========================================================================
   15. USERNAME AND EMAIL FIELDS
   ==========================================================================

   Preserve the user's text.

   CSS must not visually transform username characters and
   cause confusion about case-sensitive credentials.
   ========================================================================== */

.auth-form input[
    autocomplete="username"
],
.auth-form input[
    autocomplete="email"
] {
    font-variant-ligatures: none;
}

.auth-form input[
    autocomplete="username"
] {
    letter-spacing: normal;
}


/* ==========================================================================
   16. PHONE NUMBER INPUT
   ==========================================================================

   Registration uses username + phone + one password.

   Phone normalization to E.164 is handled by the private
   RegistrationService, not by CSS.
   ========================================================================== */

.auth-form input[type="tel"] {
    font-variant-numeric: tabular-nums;

    direction: ltr;

    text-align: start;
}

.auth-form .phone-prefix,
.auth-form .country-prefix {
    color: var(--bsm-text-secondary);

    font-family: var(--bsm-font-financial);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   17. PASSWORD FIELD
   ==========================================================================

   The browser is responsible for password autofill and
   password-manager integration.

   Actual passwords must never appear in the DOM as
   CSS-generated content.
   ========================================================================== */

.auth-form input[type="password"] {
    font-family: var(--bsm-font-sans);

    letter-spacing: 0.04em;

    font-variant-ligatures: none;
}

.auth-form input[type="password"]::placeholder {
    letter-spacing: normal;
}


/* ==========================================================================
   18. PASSWORD TOGGLE WRAPPER
   ==========================================================================

   Supports markup such as:

   .password-field
       input[type=password]
       button.password-toggle

   IMPORTANT:

   This file supplies the visual integration.

   Only the appropriate existing JavaScript auth module
   may change input.type between password and text.

   The toggle must never transmit or log the password.
   ========================================================================== */

.password-field,
.password-input-wrap,
.input-with-action {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-width: 0;
}

.password-field > input,
.password-input-wrap > input,
.input-with-action > input {
    flex: 1 1 auto;

    width: 100%;

    min-width: 0;
}

.password-field:has(.password-toggle) > input,
.password-input-wrap:has(.password-toggle) > input,
.input-with-action:has(.input-action) > input {
    padding-inline-end: 90px;
}


/* ==========================================================================
   19. PASSWORD VISIBILITY BUTTON
   ========================================================================== */

.password-toggle,
.input-action,
.show-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: var(--bsm-space-1);

    min-height: var(--bsm-touch-target-min);

    padding:
        var(--bsm-space-2)
        var(--bsm-space-3);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-sm);

    background-color: var(--bsm-bg-surface-raised);

    color: var(--bsm-text-secondary);

    font-family: inherit;

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);

    cursor: pointer;
}

.password-field > .password-toggle,
.password-input-wrap > .password-toggle,
.input-with-action > .input-action {
    position: absolute;

    inset-inline-end: 5px;

    inset-block-start: 50%;

    transform: translateY(-50%);

    z-index: var(--bsm-z-raised);

    max-width: 84px;

    border-color: transparent;

    background-color: var(--bsm-bg-input);
}

.password-toggle:hover,
.input-action:hover,
.show-password-toggle:hover {
    color: var(--bsm-text-primary);

    background-color: var(--bsm-bg-hover);
}

.password-toggle:focus-visible,
.input-action:focus-visible,
.show-password-toggle:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: 2px;
}


/* ==========================================================================
   20. BROWSER AUTOFILL COMPATIBILITY
   ==========================================================================

   Native password managers must continue working.

   Use active theme variables rather than a hardcoded
   light or dark color.
   ========================================================================== */

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--bsm-text-primary);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--bsm-bg-input)
        inset;

    caret-color: var(--bsm-text-primary);
}


/* ==========================================================================
   21. VALIDATION STATES
   ==========================================================================

   Validation classes must originate from legitimate form
   state or the server's response.

   Never style unsubmitted fields as failures merely because
   they are empty.
   ========================================================================== */

.auth-form [aria-invalid="true"],
.auth-form .is-invalid {
    border-color: var(--bsm-color-danger);

    background-color: var(--bsm-color-danger-soft);
}

.auth-form [aria-invalid="true"]:focus-visible,
.auth-form .is-invalid:focus-visible {
    outline-color: var(--bsm-color-danger);

    box-shadow:
        0 0 0 3px
        var(--bsm-color-danger-soft);
}

.auth-form [aria-invalid="false"].is-validated,
.auth-form .is-valid {
    border-color: var(--bsm-color-success-border);
}


/* ==========================================================================
   22. FIELD HELP AND FORM ERRORS
   ========================================================================== */

.auth-form .field-help,
.auth-form .form-help,
.auth-card .field-help {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    line-height: var(--bsm-leading-relaxed);

    overflow-wrap: break-word;
}

.auth-form .field-error,
.auth-form .form-error,
.auth-card .field-error {
    color: var(--bsm-color-danger);

    font-size: var(--bsm-text-sm);

    font-weight: var(--bsm-weight-medium);

    line-height: var(--bsm-leading-normal);
}


/* ==========================================================================
   23. GLOBAL AUTHENTICATION ERROR ALERTS
   ==========================================================================

   Existing admin markup uses:

   #admin-login-error
   #admin-logout-error

   Preserve screen-reader role="alert" from the HTML.

   CSS alone does not announce messages to assistive technology.
   ========================================================================== */

.auth-card .alert-error,
.auth-card .alert-danger,
#admin-login-error,
#admin-logout-error {
    padding:
        var(--bsm-space-3)
        var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-color-danger-border);

    border-inline-start:
        3px solid
        var(--bsm-color-danger);

    border-radius: var(--bsm-radius-md);

    background-color: var(--bsm-color-danger-soft);

    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-sm);

    font-weight: var(--bsm-weight-medium);

    line-height: var(--bsm-leading-relaxed);
}


/* ==========================================================================
   24. SUCCESS AND WARNING ALERTS
   ========================================================================== */

.auth-card .alert-success {
    border-inline-start:
        3px solid
        var(--bsm-color-success);

    background-color: var(--bsm-color-success-soft);

    border-color: var(--bsm-color-success-border);

    color: var(--bsm-text-primary);
}

.auth-card .alert-warning {
    border-inline-start:
        3px solid
        var(--bsm-color-warning);

    background-color: var(--bsm-color-warning-soft);

    border-color: var(--bsm-color-warning-border);

    color: var(--bsm-text-primary);
}


/* ==========================================================================
   25. AUTHENTICATION SUPPORT NOTES
   ==========================================================================

   Used for:
   - Temporary backend unavailability
   - Administrator sign-out status
   - MFA session information
   - Password recovery instructions
   ========================================================================== */

.auth-note {
    display: block;

    padding: var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

    background-color: var(--bsm-bg-surface-alt);

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);

    line-height: var(--bsm-leading-relaxed);
}

.auth-note[role="alert"] {
    border-color: var(--bsm-color-warning-border);

    border-inline-start:
        3px solid
        var(--bsm-color-warning);
}


/* ==========================================================================
   26. AUTHENTICATION SUBMIT BUTTONS
   ========================================================================== */

.auth-form > .btn,
.auth-form > button[type="submit"],
.auth-form > input[type="submit"] {
    width: 100%;

    min-height: var(--bsm-button-height-lg);

    font-size: var(--bsm-text-base);

    font-weight: var(--bsm-weight-bold);
}

.auth-card > form:not(.auth-form) > .btn.full-width {
    width: 100%;
}

.auth-card .btn-primary {
    border-radius: var(--bsm-radius-md);
}

.auth-card .btn-primary:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: 3px;
}


/* ==========================================================================
   27. AUTHENTICATION LOADING BUTTONS
   ==========================================================================

   .is-loading and aria-busy values are controlled by
   frontend application state.

   CSS never claims a login succeeded.
   ========================================================================== */

.auth-form .btn[aria-busy="true"],
.auth-form .btn.is-loading {
    cursor: progress;

    pointer-events: none;
}

.auth-form .btn[aria-busy="true"]::after,
.auth-form .btn.is-loading::after {
    flex: 0 0 auto;
}


/* ==========================================================================
   28. LINK GROUPS
   ========================================================================== */

.auth-links {
    display: flex;
    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
        var(--bsm-space-2)
        var(--bsm-space-4);

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);
}

.auth-links a {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    color: var(--bsm-text-link);

    font-weight: var(--bsm-weight-semibold);

    text-decoration: underline;

    text-underline-offset: 3px;
}

.auth-links a:hover {
    color: var(--bsm-text-link-hover);
}

.auth-links a:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: var(--bsm-focus-offset);
}


/* ==========================================================================
   29. AUTHENTICATION DISCLAIMERS
   ========================================================================== */

.auth-disclaimer {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    line-height: var(--bsm-leading-relaxed);

    overflow-wrap: break-word;
}

.auth-card .auth-disclaimer {
    padding-top: var(--bsm-space-3);

    border-top:
        1px solid
        var(--bsm-border-subtle);
}

.auth-hero .auth-disclaimer {
    max-width: 55ch;

    font-size: var(--bsm-text-xs);
}


/* ==========================================================================
   30. SIGNUP AGREEMENT AND CONSENT COMPONENTS
   ==========================================================================

   Signup forms in Baloch SM need:
   - Username
   - Phone
   - Single password

   No extra mandatory registration field is introduced by CSS.

   Optional terms/consent interfaces can use these styles
   if actually included in the HTML.
   ========================================================================== */

.auth-checkbox-row,
.auth-agreement,
.auth-consent {
    display: flex;
    align-items: flex-start;

    gap: var(--bsm-space-3);

    min-width: 0;

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);

    line-height: var(--bsm-leading-relaxed);
}

.auth-checkbox-row input[type="checkbox"],
.auth-agreement input[type="checkbox"],
.auth-consent input[type="checkbox"] {
    flex: 0 0 auto;

    margin-top: 3px;

    width: 18px;
    height: 18px;

    accent-color: var(--bsm-color-primary);
}

.auth-agreement a,
.auth-consent a {
    color: var(--bsm-text-link);
}


/* ==========================================================================
   31. PASSWORD REQUIREMENT TEXT
   ==========================================================================

   Purely informational.

   The final password policy must be validated by the
   private registration and authentication services.
   ========================================================================== */

.password-requirements,
.password-hints {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-2);

    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);
}

.password-requirements ul,
.password-hints ul {
    margin: 0;

    padding-inline-start: var(--bsm-space-5);
}

.password-requirements li,
.password-hints li {
    margin-block: var(--bsm-space-1);
}

.password-requirements .is-met,
.password-hints .is-met {
    color: var(--bsm-color-success);
}

.password-requirements .is-unmet,
.password-hints .is-unmet {
    color: var(--bsm-text-muted);
}


/* ==========================================================================
   32. PASSWORD STRENGTH METER
   ==========================================================================

   A visual password strength estimate does not override
   the private backend's password policy.
   ========================================================================== */

.password-strength,
.password-meter {
    width: 100%;

    min-width: 0;
}

.password-strength-track,
.password-meter-track {
    width: 100%;
    height: 5px;

    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-border-subtle);

    overflow: hidden;
}

.password-strength-fill,
.password-meter-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background-color: var(--bsm-color-warning);

    transition:
        width var(--bsm-motion-fast)
            var(--bsm-ease-out);
}

.password-strength[data-strength="weak"]
    .password-strength-fill {
    background-color: var(--bsm-color-danger);
}

.password-strength[data-strength="medium"]
    .password-strength-fill {
    background-color: var(--bsm-color-warning);
}

.password-strength[data-strength="strong"]
    .password-strength-fill {
    background-color: var(--bsm-color-success);
}


/* ==========================================================================
   33. ADMINISTRATOR AUTHENTICATION THEME
   ==========================================================================

   Existing:
   body.admin-auth-page

   Administrator pages use the same layout foundation,
   but are visually distinguishable from regular member login.

   This is visual separation only.

   Session separation remains a private backend requirement.
   ========================================================================== */

.admin-auth-page .auth-card {
    border-color: var(--bsm-color-primary-border);

    box-shadow:
        var(--bsm-shadow-xl),
        var(--bsm-shadow-primary-glow);
}

.admin-auth-page .auth-hero .auth-kicker,
.admin-auth-page .auth-card .auth-kicker {
    color: var(--bsm-color-primary);

    letter-spacing: var(--bsm-tracking-label);
}

.admin-auth-page .auth-card > .brand {
    margin-bottom: var(--bsm-space-1);
}


/* ==========================================================================
   34. ADMINISTRATOR LOGIN FORM
   ==========================================================================

   Existing markup:
   #admin-password-form

   The private AdminIdentityService validates the credentials.
   ========================================================================== */

#admin-password-form {
    gap: var(--bsm-space-4);
}

#admin-username,
#admin-password {
    min-height: var(--bsm-input-height-lg);
}

#admin-username {
    font-family: var(--bsm-font-sans);

    letter-spacing: normal;
}

#admin-password {
    font-variant-ligatures: none;
}


/* ==========================================================================
   35. MANDATORY ADMINISTRATOR MFA
   ==========================================================================

   Existing markup:
   #admin-mfa-form
   #admin-authenticator-code

   The six-digit code is checked ONLY by the private MFA service.

   This CSS does not implement TOTP and does not store codes.
   ========================================================================== */

#admin-mfa-form {
    gap: var(--bsm-space-5);
}

#admin-mfa-form .field {
    gap: var(--bsm-space-3);
}

#admin-authenticator-code {
    display: block;

    width: 100%;

    min-height: 68px;

    padding:
        var(--bsm-space-3)
        var(--bsm-space-4);

    border:
        2px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

    background-color: var(--bsm-bg-input);

    color: var(--bsm-text-primary);

    font-family: var(--bsm-font-financial);

    font-size:
        clamp(
            1.25rem,
            4vw,
            1.75rem
        );

    font-weight: var(--bsm-weight-bold);

    font-variant-numeric: tabular-nums;

    letter-spacing: 0.3em;

    line-height: 1.2;

    text-align: center;

    direction: ltr;

    font-variant-ligatures: none;
}

#admin-authenticator-code::placeholder {
    color: var(--bsm-text-placeholder);

    letter-spacing: 0.3em;
}

#admin-authenticator-code:focus-visible {
    border-color: var(--bsm-border-focus);

    outline:
        2px solid
        var(--bsm-focus-color);

    outline-offset: 2px;

    box-shadow: var(--bsm-focus-shadow);
}


/* ==========================================================================
   36. MFA STEP INDICATORS
   ==========================================================================

   Optional visual enhancement for already-rendered MFA stages.

   State must reflect verified private session progress.
   ========================================================================== */

.auth-steps,
.mfa-steps {
    display: flex;
    align-items: center;

    gap: var(--bsm-space-2);

    width: 100%;
}

.auth-step,
.mfa-step {
    flex: 1 1 0;

    height: 4px;

    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-border-default);
}

.auth-step.is-complete,
.mfa-step.is-complete {
    background-color: var(--bsm-color-success);
}

.auth-step.is-current,
.mfa-step.is-current {
    background-color: var(--bsm-color-primary);
}


/* ==========================================================================
   37. MFA CANCEL / RETURN TO PASSWORD
   ==========================================================================

   Existing admin/login.php provides a separate POST form
   for cancelling the pending MFA challenge.

   The button must remain a real button, not a GET logout link.
   ========================================================================== */

#admin-mfa-form + form {
    display: block;

    width: 100%;
}

#admin-mfa-form + form > .btn,
#admin-mfa-form + form > button {
    width: 100%;

    min-height: var(--bsm-button-height);

    margin-top: var(--bsm-space-3);
}


/* ==========================================================================
   38. ADMINISTRATOR LOGOUT CONFIRMATION
   ==========================================================================

   Existing:
   public_html/admin/logout.php

   GET shows confirmation.
   POST with CSRF revokes the privileged session.

   This CSS never performs logout operations.
   ========================================================================== */

.admin-auth-page .auth-card form
    .btn-ghost.full-width {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: var(--bsm-button-height-lg);
}

.admin-auth-page .auth-card form
    .btn-primary.full-width {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: var(--bsm-button-height-lg);
}

.admin-auth-page .auth-card strong {
    color: var(--bsm-text-primary);

    font-weight: var(--bsm-weight-bold);
}


/* ==========================================================================
   39. ADMIN SECURITY NOTICE
   ========================================================================== */

.admin-auth-page .auth-disclaimer {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    line-height: var(--bsm-leading-relaxed);
}


/* ==========================================================================
   40. AUTHENTICATION FOOTER
   ========================================================================== */

.auth-page .footer-minimal {
    justify-content: center;

    gap: var(--bsm-space-3);

    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    text-align: center;
}

.auth-page .footer-minimal a {
    color: var(--bsm-text-link);
}

.auth-page .footer-minimal p {
    overflow-wrap: break-word;
}


/* ==========================================================================
   41. AUTHENTICATION STATUS INDICATORS
   ==========================================================================

   Status must reflect actual server state.

   A decorative visual cannot imply account approval or
   successful MFA when authorization has not occurred.
   ========================================================================== */

.auth-status {
    display: inline-flex;
    align-items: center;

    gap: var(--bsm-space-2);

    padding:
        var(--bsm-space-2)
        var(--bsm-space-3);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-bg-surface-alt);

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);
}

.auth-status[data-status="pending"] {
    border-color: var(--bsm-color-warning-border);

    color: var(--bsm-color-warning);
}

.auth-status[data-status="approved"] {
    border-color: var(--bsm-color-success-border);

    color: var(--bsm-color-success);
}

.auth-status[data-status="rejected"],
.auth-status[data-status="suspended"] {
    border-color: var(--bsm-color-danger-border);

    color: var(--bsm-color-danger);
}


/* ==========================================================================
   42. MEMBER REGISTRATION SUCCESS MESSAGING
   ==========================================================================

   Registration creates a pending member account.

   An account being created does not grant premium trading access.

   The private backend must enforce the subscription gate.
   ========================================================================== */

.auth-card .registration-status,
.auth-card .signup-status {
    padding: var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-color-warning-border);

    border-radius: var(--bsm-radius-lg);

    background-color: var(--bsm-color-warning-soft);

    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-sm);

    line-height: var(--bsm-leading-relaxed);
}


/* ==========================================================================
   43. UNAVAILABLE AUTHENTICATION SERVICE
   ==========================================================================

   Existing PHP pages fail closed if private bootstrap
   or identity services are not operational.

   The fallback page stays readable without any JavaScript.
   ========================================================================== */

.auth-card .auth-note[role="status"] {
    border-color: var(--bsm-border-default);

    color: var(--bsm-text-secondary);
}

.auth-card .auth-note[role="alert"] {
    color: var(--bsm-text-primary);
}


/* ==========================================================================
   44. DISABLED INPUTS AND BUTTONS
   ========================================================================== */

.auth-form input:disabled,
.auth-form select:disabled,
.auth-form textarea:disabled,
.auth-form button:disabled,
.auth-card button:disabled {
    opacity: var(--bsm-opacity-disabled);

    cursor: not-allowed;
}


/* ==========================================================================
   45. READONLY FORM FIELDS
   ========================================================================== */

.auth-form input[readonly] {
    background-color: var(--bsm-bg-surface-inset);

    color: var(--bsm-text-secondary);

    cursor: default;
}


/* ==========================================================================
   46. AUTHENTICATION DIVIDER
   ==========================================================================

   Optional element for distinct form sections.

   Avoid introducing fake social-login options that do not exist.
   ========================================================================== */

.auth-divider {
    display: flex;
    align-items: center;

    gap: var(--bsm-space-3);

    width: 100%;

    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    text-align: center;
}

.auth-divider::before,
.auth-divider::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background-color: var(--bsm-border-subtle);
}


/* ==========================================================================
   47. AUTHENTICATION TOAST / MESSAGE AREA
   ========================================================================== */

.auth-message,
.auth-feedback {
    width: 100%;

    min-width: 0;

    padding: var(--bsm-space-3);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

    background-color: var(--bsm-bg-surface-alt);

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);

    line-height: var(--bsm-leading-relaxed);
}

.auth-feedback[data-type="error"] {
    border-color: var(--bsm-color-danger-border);

    background-color: var(--bsm-color-danger-soft);
}

.auth-feedback[data-type="success"] {
    border-color: var(--bsm-color-success-border);

    background-color: var(--bsm-color-success-soft);
}


/* ==========================================================================
   48. PASSWORD MANAGER AND NATIVE FORM SUPPORT
   ==========================================================================

   Do not:
   - Disable autofill
   - Disable clipboard operations
   - Disable password managers
   - Disable user text selection
   - Alter submitted credential values via CSS
   ========================================================================== */

.auth-form input {
    caret-color: var(--bsm-color-primary);
}

.auth-form input[type="password"] {
    caret-color: var(--bsm-text-primary);
}


/* ==========================================================================
   49. AUTHENTICATION GRID RESPONSIVENESS
   ========================================================================== */

@media (max-width: 1024px) {

    .auth-card {
        padding: var(--bsm-space-6);
    }

    .auth-hero > img,
    .auth-hero > svg {
        max-width: min(100%, 360px);
    }

    .auth-hero > p {
        max-width: 52ch;
    }

}


/* ==========================================================================
   50. TABLET AUTHENTICATION
   ========================================================================== */

@media (max-width: 820px) {

    .auth-page .auth-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: var(--bsm-space-8);
    }

    .auth-page .auth-hero {
        max-width: 680px;

        margin-inline: auto;
    }

    .auth-page .auth-card {
        justify-self: center;

        width: min(
            100%,
            var(--bsm-form-max-width)
        );
    }

    .auth-hero h1 {
        max-width: 22ch;
    }

    .auth-hero > img,
    .auth-hero > svg {
        max-width: 280px;
    }

}


/* ==========================================================================
   51. MOBILE AUTHENTICATION
   ========================================================================== */

@media (max-width: 767px) {

    .auth-page .app-main {
        align-items: flex-start;

        padding-block:
            var(--bsm-space-6);
    }

    .auth-page .auth-layout {
        gap: var(--bsm-space-5);
    }

    .auth-hero {
        gap: var(--bsm-space-3);
    }

    .auth-hero h1 {
        font-size: var(--bsm-heading-page);

        line-height: var(--bsm-leading-tight);
    }

    .auth-hero > p {
        font-size: var(--bsm-text-base-sm);
    }

    .auth-page .auth-card {
        max-width: 100%;

        padding: var(--bsm-space-5);

        border-radius: var(--bsm-radius-xl);
    }

    .auth-form input:where(
        [type="text"],
        [type="password"],
        [type="email"],
        [type="tel"],
        [type="number"]
    ) {
        min-height: 52px;

        font-size: 16px;
    }

    .auth-card h2 {
        font-size: var(--bsm-text-2xl);
    }

    #admin-authenticator-code {
        font-size: 1.5rem;
    }

}


/* ==========================================================================
   52. SMALL MOBILE SCREENS
   ========================================================================== */

@media (max-width: 480px) {

    .auth-page .auth-layout {
        gap: var(--bsm-space-4);
    }

    .auth-page .auth-card {
        padding: var(--bsm-space-4);
    }

    .auth-hero h1 {
        font-size:
            clamp(
                1.65rem,
                7vw,
                2.1rem
            );
    }

    .auth-card h2 {
        font-size: var(--bsm-text-xl);
    }

    .auth-card .brand {
        font-size: var(--bsm-text-base-sm);
    }

    .auth-card .brand-mark {
        width: 36px;
        height: 36px;
    }

    .auth-hero > img,
    .auth-hero > svg {
        max-width: 180px;
    }

    .auth-form {
        gap: var(--bsm-space-4);
    }

    .auth-card .btn-primary {
        width: 100%;
    }

    #admin-authenticator-code {
        min-height: 62px;

        padding-inline: var(--bsm-space-2);

        font-size: 1.35rem;

        letter-spacing: 0.2em;
    }

}


/* ==========================================================================
   53. VERY NARROW PHONE SCREENS
   ========================================================================== */

@media (max-width: 360px) {

    .auth-card {
        padding: var(--bsm-space-3);
    }

    .auth-page .app-topbar nav {
        gap: var(--bsm-space-1);
    }

    .auth-page .app-topbar nav .btn {
        padding-inline: var(--bsm-space-2);
    }

    .auth-hero h1 {
        font-size: var(--bsm-text-2xl);
    }

    #admin-authenticator-code {
        letter-spacing: 0.12em;
    }

}


/* ==========================================================================
   54. SMALL LANDSCAPE DISPLAYS
   ==========================================================================

   Prevent short-height mobile screens from being dominated
   by decorative authentication illustrations.
   ========================================================================== */

@media (
    max-height: 540px
) and (
    orientation: landscape
) {

    .auth-page .app-main {
        padding-block: var(--bsm-space-4);
    }

    .auth-hero > img,
    .auth-hero > svg {
        max-height: 120px;

        width: auto;
    }

    .auth-page .auth-layout {
        align-items: start;
    }

}


/* ==========================================================================
   55. MOBILE TOUCH TARGETS
   ==========================================================================

   Touch controls must remain usable on Android/iOS devices.
   ========================================================================== */

@media (pointer: coarse) {

    .auth-form button,
    .auth-card .btn,
    .password-toggle,
    .auth-links a {
        min-height: var(--bsm-touch-target-min);
    }

}


/* ==========================================================================
   56. REDUCED MOTION ACCESSIBILITY
   ==========================================================================

   Reduced motion does NOT disable:

   - Server authentication
   - MFA verification
   - CSRF handling
   - Form submission
   - Password validation
   - Administrator session revocation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

    .auth-hero > img,
    .auth-hero > svg {
        filter: none;
    }

}


/* ==========================================================================
   57. HIGH-CONTRAST PREFERENCE
   ========================================================================== */

@media (prefers-contrast: more) {

    .auth-card {
        border-width: 2px;

        border-color: var(--bsm-border-strong);
    }

    .auth-form input,
    .auth-form select,
    .auth-form textarea {
        border-width: 2px;
    }

    .auth-form label {
        color: var(--bsm-text-primary);
    }

    .auth-disclaimer,
    .field-help {
        color: var(--bsm-text-secondary);
    }

    #admin-authenticator-code {
        border-width: 3px;
    }

}


/* ==========================================================================
   58. OPERATING-SYSTEM FORCED COLORS
   ==========================================================================

   Preserve Windows high-contrast accessibility.

   Native system colors take precedence over decorative gradients.
   ========================================================================== */

@media (forced-colors: active) {

    .auth-card {
        border-color: CanvasText;

        background-color: Canvas;

        color: CanvasText;

        box-shadow: none;
    }

    .auth-form input,
    .auth-form select,
    .auth-form textarea {
        border-color: CanvasText;

        background-color: Field;

        color: FieldText;
    }

    .auth-form input:focus-visible,
    #admin-authenticator-code:focus-visible {
        outline-color: Highlight;
    }

    .auth-hero h1 .accent {
        color: Highlight;
    }

    .auth-note,
    .auth-card .alert-error {
        border-color: CanvasText;
    }

}


/* ==========================================================================
   59. PRINT HANDLING
   ==========================================================================

   Authentication forms are interactive, not printable credentials.

   Do not reveal password values, MFA data or hidden state.
   ========================================================================== */

@media print {

    .auth-page {
        background: #ffffff !important;

        color: #111827 !important;
    }

    .auth-card {
        box-shadow: none;

        border: 1px solid #a0a0a0;
    }

    .auth-hero > img,
    .auth-hero > svg {
        display: none;
    }

    .auth-form,
    #admin-password-form,
    #admin-mfa-form {
        display: none !important;
    }

    .password-toggle,
    .show-password-toggle {
        display: none !important;
    }

}


/* ==========================================================================
   60. COMPLETE AUTHENTICATION INTEGRATION CONTRACT
   ==========================================================================

   EXISTING MEMBER AUTHENTICATION
   ------------------------------
   Login form structure                Integrated
   Signup form structure               Integrated
   Username styling                    Integrated
   Phone number styling                Integrated
   Single password field               Integrated
   Password toggle presentation        Integrated
   Native autofill                     Integrated
   Browser password managers           Integrated
   Form errors                         Integrated
   Button states                       Integrated
   Mobile responsiveness               Integrated

   ADMINISTRATOR AUTHENTICATION
   ----------------------------
   Separate admin visual identity      Integrated
   Password authentication form        Integrated
   Six-digit MFA field                 Integrated
   MFA step presentation               Integrated
   MFA cancel form                     Integrated
   Admin logout confirmation           Integrated
   Security disclaimers                Integrated
   Service-unavailable page            Integrated

   ACCESSIBILITY
   -------------
   Keyboard focus                      Integrated
   Large touch targets                 Integrated
   Readable mobile inputs              Integrated
   Reduced motion                      Integrated
   High contrast                       Integrated
   Forced-colors support               Integrated
   Responsive display                  Integrated

   IMPORTANT RUNTIME RESPONSIBILITIES
   ----------------------------------
   Session creation, password checks, CSRF validation,
   phone normalization, MFA verification, rate limiting,
   account approval, session revocation and authorization
   must be implemented in the corresponding private
   authentication and billing services.

   Password toggle interactions must be implemented by
   the frontend authentication JavaScript where that
   control exists.

   CSS cannot implement or replace these operations.

   ==========================================================================

   END OF BALOCH SM AUTHENTICATION STYLESHEET

   ========================================================================== */