/* vAutoNest login look for the vAutoTrack panel (DEV-813). Copied from vAutoNest CRM static/css/vautostock.css
 * (tokens, base, auth card, tinted-glass background, form, button, flash, 2FA code boxes). Keep in sync by hand. */
:root {
    /* Brand Colors - matching vautostock.co.uk */
    --vas-primary: #175cff;
    --vas-primary-light: #4a7fff;
    --vas-primary-dark: #0d47cc;
    --vas-secondary: #32373c;
    --vas-secondary-light: #4a5058;
    --vas-accent: #f2295b;
    --vas-accent-light: #ff4d7a;

    /* Status Colors */
    --vas-success: #28a745;
    --vas-warning: #ffc107;
    --vas-error: #dc3545;
    --vas-info: #17a2b8;

    /* Gray Scale */
    --vas-gray-50: #f8f9fa;
    --vas-gray-100: #f1f3f5;
    --vas-gray-200: #e9ecef;
    --vas-gray-300: #dee2e6;
    --vas-gray-400: #ced4da;
    --vas-gray-500: #adb5bd;
    --vas-gray-600: #6c757d;
    --vas-gray-700: #495057;
    --vas-gray-800: #343a40;
    --vas-gray-900: #212529;

    /* UI Elements - rounded like vautostock.co.uk */
    --vas-border-radius: 8px;
    --vas-border-radius-lg: 12px;
    --vas-border-radius-full: 9999px;
    --vas-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --vas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --vas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --vas-transition: all 0.2s ease-in-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vas-gray-800);
    background-color: var(--vas-gray-50);
}

a { color: var(--vas-primary); text-decoration: none; transition: var(--vas-transition); }
a:hover { color: var(--vas-primary-dark); }

.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-weight: 500; color: var(--vas-gray-700); margin-bottom: 0.5rem; font-size: 0.9375rem; }
.form-label.required::after { content: " *"; color: var(--vas-error); }
.form-input, .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--vas-gray-300);
    border-radius: var(--vas-border-radius);
    font-size: 1rem;
    transition: var(--vas-transition);
    background: white;
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--vas-primary);
    box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.15);
}
.form-help { font-size: 0.8125rem; color: var(--vas-gray-600); margin-top: 0.375rem; }
.form-error { font-size: 0.8125rem; color: var(--vas-error); margin-top: 0.5rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border: none;
    border-radius: var(--vas-border-radius-full);
    cursor: pointer;
    transition: var(--vas-transition);
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--vas-shadow-md); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--vas-secondary); color: white; }
.btn-primary:hover { background: var(--vas-secondary-light); color: white; }
.btn-ghost { background: transparent; color: var(--vas-gray-700); }
.btn-ghost:hover { background: var(--vas-gray-100); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }
/* Auth Pages - dark theme like vautostock.co.uk */
.auth-card {
    background: white;
    border-radius: var(--vas-border-radius-lg);
    box-shadow: var(--vas-shadow-lg);
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo-text {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vas-secondary);
    letter-spacing: -0.5px;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--vas-gray-900);
    margin-bottom: 0.5rem;
}
.auth-subtitle {
    text-align: center;
    color: var(--vas-gray-600);
    margin-bottom: 2rem;
    font-size: 0.9375rem;
}

/* 2FA Code Input */
.code-input-container { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.code-input {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--vas-gray-300);
    border-radius: var(--vas-border-radius);
    background: white;
    transition: var(--vas-transition);
}
.code-input:focus {
    outline: none;
    border-color: var(--vas-primary);
    box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.15);
}
.code-timer { text-align: center; font-size: 0.875rem; color: var(--vas-gray-600); margin-bottom: 1rem; }
.code-timer.expiring { color: var(--vas-warning); font-weight: 600; }
.flash-message {
    padding: 1rem 1.5rem;
    border-radius: var(--vas-border-radius);
    box-shadow: var(--vas-shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
.flash-message.success { background: var(--vas-success); color: white; }
.flash-message.error { background: var(--vas-error); color: white; }
@media (max-width: 768px) { .auth-card { padding: 1.5rem; margin: 0 1rem; } }
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--vas-secondary) 0%, #000000 100%);
    padding: 2rem;
}
.auth-container {
    position: relative;
    overflow: hidden;
    /* Original brand gradient restored — this IS the tinted glass colour */
    background: linear-gradient(135deg, var(--vas-secondary) 0%, #000000 100%);
}

.auth-container::before {
    content: '';
    position: absolute;
    inset: -5%;
    background-image: linear-gradient(
        92deg,
        transparent 0%, transparent 14%,
        rgba(255,255,255,0.05) 15%, rgba(255,255,255,0.09) 16%, rgba(255,255,255,0.05) 17%, transparent 18%,
        transparent 39%,
        rgba(255,255,255,0.04) 40%, transparent 42%,
        transparent 63%,
        rgba(255,255,255,0.06) 64%, rgba(255,255,255,0.10) 65%, rgba(255,255,255,0.06) 66%, transparent 67%,
        transparent 86%,
        rgba(255,255,255,0.03) 87%, transparent 89%, transparent 100%
    );
    background-size: 900px 100%;
    background-repeat: repeat-x;
    filter: blur(8px);
    animation: vasGlassPassFar 42s linear infinite;
    z-index: 0;
    pointer-events: none;
    will-change: background-position;
}

/* Near layer — closer streetlamps streaming past, brighter & faster */
.auth-container > .vas-glass-pass {
    position: absolute;
    inset: -3%;
    background-image: linear-gradient(
        94deg,
        transparent 0%, transparent 7%,
        rgba(255,255,255,0.10) 8%, rgba(255,255,255,0.22) 10%, rgba(255,255,255,0.10) 12%, transparent 13%,
        transparent 26%,
        rgba(255,255,255,0.06) 27%, transparent 29%,
        transparent 46%,
        rgba(255,255,255,0.14) 47%, rgba(255,255,255,0.28) 49%, rgba(255,255,255,0.14) 51%, transparent 52%,
        transparent 71%,
        rgba(255,255,255,0.08) 72%, transparent 74%,
        transparent 88%,
        rgba(255,255,255,0.11) 89%, rgba(255,255,255,0.20) 91%, rgba(255,255,255,0.11) 93%, transparent 94%
    );
    background-size: 640px 100%;
    background-repeat: repeat-x;
    filter: blur(4px);
    animation: vasGlassPass 20s linear infinite;
    z-index: 0;
    pointer-events: none;
    will-change: background-position;
}

/* Glass surface reflection — soft halo along the upper curve */
.auth-container > .vas-glass-shine {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: radial-gradient(ellipse 70% 100% at 50% 0%,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.04) 35%,
        transparent 75%);
    z-index: 0;
    pointer-events: none;
}

.auth-card,
.auth-container > *:not(.vas-glass-pass):not(.vas-glass-shine) {
    position: relative;
    z-index: 1;
}

@keyframes vasGlassPass {
    0%   { background-position: 0 0; }
    100% { background-position: -640px 0; }
}
@keyframes vasGlassPassFar {
    /* Counter-direction: far lights drift the other way for richer parallax */
    0%   { background-position: 0 0; }
    100% { background-position: 900px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-container::before,
    .auth-container > .vas-glass-pass { animation: none; }
}

/* vAutoTrack additions */
.auth-logo img { width: 180px; height: auto; }
.auth-help { text-align: center; font-size: 0.875rem; color: var(--vas-gray-600); margin-top: 1rem; }
.auth-help a { color: var(--vas-gray-600); }
.flash-message { margin-bottom: 1rem; animation: none; }
.code-input-container .code-input { flex: 0 0 auto; }
@media (max-width: 400px) { .code-input { width: 2.5rem; height: 3rem; } .code-input-container { gap: 0.4rem; } }
/* Review fixes (design system v2.5): message colours that pass AA, visible focus, 44px targets */
.flash-message.error { background: #c4271d; color: #ffffff; }
.flash-message.info { background: #0066d6; color: #ffffff; }
.flash-message.warning { background: #ffc107; color: #212529; }
.auth-logo img { width: 170px; }
.form-input:focus-visible, .code-input:focus-visible, .btn:focus-visible, .auth-help a:focus-visible {
    outline: 3px solid var(--vas-primary); outline-offset: 2px;
}
.auth-resend { text-align: center; margin-top: 1rem; }
.auth-resend .btn { min-height: 44px; }
.auth-help a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; }
.code-timer { text-align: center; font-size: 0.875rem; color: var(--vas-gray-600); margin: -0.5rem 0 1rem; }
.code-timer.expired { color: #c4271d; font-weight: 600; }
@media (max-width: 400px) {
    .auth-container { padding: 0.75rem; }
    .auth-card { padding: 1.25rem 1rem; margin: 0; }
    .code-input { width: 2.75rem; height: 3rem; }
    .code-input-container { gap: 0.3rem; }
}
@media (max-width: 340px) {
    .code-input { width: 2.5rem; }
    .code-input-container { gap: 0.25rem; }
}