/* ═══════════════════════════════════════════════
   Tyreman24 auth theme — Bootstrap 5.3 overrides
   Values taken from the "Login Page" Figma frame.
═══════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    --bs-body-bg:            #0A1018;
    --bs-body-color:         #FFFFFF;
    --bs-secondary-color:    #6B7280;
    --bs-emphasis-color:     #FFFFFF;

    --bs-primary:            #00BCD4;
    --bs-primary-rgb:        0, 188, 212;
    --bs-link-color:         #00BCD4;
    --bs-link-hover-color:   #00A5BA;
    --bs-link-color-rgb:     0, 188, 212;

    --bs-border-color:       rgba(255, 255, 255, .12);
    --bs-font-sans-serif:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* project tokens */
    --tyre-primary:          #00BCD4;
    --tyre-primary-hover:    #00A5BA;
    --tyre-primary-active:   #0097A7;
    --tyre-muted:            #6B7280;
    --tyre-danger:           #F87171;

    /* 1px gradient hairlines used by the card, fields and ghost button */
    --tyre-hairline-card:    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
    --tyre-hairline-field:   linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.10));
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 20px;
    overflow-x: hidden;
    position: relative;
}

/* ── Starfield backdrop (50% opacity, per design) ── */
.auth-backdrop {
    position: fixed;
    inset: 0;
    background: url('/images/auth-starfield.svg') center / cover no-repeat;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.auth-shell { position: relative; z-index: 1; }

/* ═══════════════════════════════════
   Brand lockup
═══════════════════════════════════ */
.brand-lockup svg { width: 32px; height: 32px; }
.brand-wordmark {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
}
.brand-wordmark span { color: var(--tyre-primary); }

/* ═══════════════════════════════════
   Card — 500 × 600, radius 20, padding 60
═══════════════════════════════════ */
.auth-card {
    position: relative;
    width: 500px;
    max-width: 100%;
    min-height: 600px;
    padding: 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .012);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
/* Forgot-password card is 500 × 400 in the design */
.auth-card--compact { min-height: 400px; }

/* 1px gradient border, drawn with a masked pseudo-element */
.hairline { position: relative; }
.hairline::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--tyre-hairline-card);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.hairline--field::before { background: var(--tyre-hairline-field); }

/* ── Vertical rhythm: the design stacks everything on a 12px gap ── */
.auth-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Fields block carries 20px of its own top/bottom padding */
.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
}
.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ═══════════════════════════════════
   Typography
═══════════════════════════════════ */
.auth-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: -1px;
}
.auth-subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--tyre-muted);
}
/* Figma lays this copy out on one line at exactly 380px; Chrome measures
   the same string 0.3px wider, so pin it above the mobile breakpoint. */
@media (min-width: 576px) {
    .auth-subtitle--single-line { white-space: nowrap; }
}

/* ═══════════════════════════════════
   Fields — pill input groups
═══════════════════════════════════ */
.auth-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #FFFFFF;
}

.auth-input-group {
    height: 52px;
    padding: 14px 16px;
    border-radius: 36px;
    gap: 10px;
    flex-wrap: nowrap;
    transition: background .15s ease;
}
.auth-input-group:focus-within { background: rgba(255, 255, 255, .03); }

/* Neutralise Bootstrap's own input-group chrome — the pill is the border */
.auth-input-group > .input-group-text,
.auth-input-group > .form-control,
.auth-input-group > .btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: #FFFFFF;
}
.auth-input-group > .input-group-text,
.auth-input-group > .btn { color: rgba(255, 255, 255, .72); }
.auth-input-group > .btn:hover { color: #FFFFFF; }
.auth-input-group .bi { font-size: 20px; line-height: 1; }

.auth-input-group > .form-control {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    min-width: 0;
}
.auth-input-group > .form-control::placeholder { color: rgba(255, 255, 255, .32); }
.auth-input-group > .form-control:focus { background: transparent; color: #FFFFFF; }

/* Kill the browser's autofill wash — it destroys the dark glass look */
.auth-input-group > .form-control:-webkit-autofill,
.auth-input-group > .form-control:-webkit-autofill:hover,
.auth-input-group > .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF;
    -webkit-box-shadow: 0 0 0 1000px #0D131C inset;
    caret-color: #FFFFFF;
}

/* Shared inline link treatment: "Forgot password?", "Back to login" */
.auth-link {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
}
.auth-link:hover { opacity: .8; }
.auth-link .bi { font-size: 14px; line-height: 1; }

.auth-error {
    font-size: 12px;
    line-height: 16px;
    color: var(--tyre-danger);
    padding-left: 16px;
    margin-top: 6px;
}

/* Flash confirmation — not in the design, kept to the same visual language */
.auth-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(0, 188, 212, .08);
    border: 1px solid rgba(0, 188, 212, .28);
    font-size: 13px;
    line-height: 18px;
    color: var(--tyre-primary);
}
.auth-status .bi { font-size: 16px; line-height: 18px; }

/* ═══════════════════════════════════
   Buttons
═══════════════════════════════════ */
.btn-tyre {
    --bs-btn-color:            #FFFFFF;
    --bs-btn-bg:               var(--tyre-primary);
    --bs-btn-border-color:     var(--tyre-primary);
    --bs-btn-hover-color:      #FFFFFF;
    --bs-btn-hover-bg:         var(--tyre-primary-hover);
    --bs-btn-hover-border-color: var(--tyre-primary-hover);
    --bs-btn-active-color:     #FFFFFF;
    --bs-btn-active-bg:        var(--tyre-primary-active);
    --bs-btn-active-border-color: var(--tyre-primary-active);
    --bs-btn-disabled-color:   rgba(255, 255, 255, .65);
    --bs-btn-disabled-bg:      var(--tyre-primary);
    --bs-btn-disabled-border-color: var(--tyre-primary);
    --bs-btn-focus-shadow-rgb: 0, 188, 212;

    height: 64px;
    padding: 18px 24px;
    border-radius: 32px;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}
.btn-tyre .bi { font-size: 20px; }

.btn-tyre-ghost {
    --bs-btn-color:        #FFFFFF;
    --bs-btn-bg:           transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color:  #FFFFFF;
    --bs-btn-hover-bg:     rgba(255, 255, 255, .04);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg:    rgba(255, 255, 255, .07);
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;

    height: 56px;
    padding: 16px 22px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.1px;
}

/* ═══════════════════════════════════
   "OR CONTINUE WITH" divider
═══════════════════════════════════ */
/* 36px gutters leave the two rules at 95px each, as in the design */
.auth-divider {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--tyre-muted);
    gap: 36px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

/* ═══════════════════════════════════
   Responsive
═══════════════════════════════════ */
@media (max-width: 575.98px) {
    body { padding: 32px 16px; }
    .auth-card { padding: 36px 24px; min-height: 0; border-radius: 24px; }
    .auth-title { font-size: 26px; line-height: 32px; letter-spacing: -.6px; }
    .auth-subtitle { font-size: 15px; }
    .btn-tyre { height: 58px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}