/**
 * SAR-OS Drift — Authentication Page Styles
 * Uses design tokens for dark theme
 * WCAG 2.2 Level AA compliant
 */

/* Authentication Page Background */
body.auth-page {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    background: var(--deep-ocean);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Maritime Grid Texture Background */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(52, 75, 96, 0.15) 79px, rgba(52, 75, 96, 0.15) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(52, 75, 96, 0.15) 79px, rgba(52, 75, 96, 0.15) 80px);
}

/* Compass Rose Effect */
body.auth-page::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 30%,
        rgba(46, 134, 222, 0.04) 30%,
        rgba(46, 134, 222, 0.04) 31%,
        transparent 31%,
        transparent 45%,
        rgba(46, 134, 222, 0.03) 45%,
        rgba(46, 134, 222, 0.03) 46%,
        transparent 46%
    );
    pointer-events: none;
    z-index: 0;
}

/* Skip Navigation Link (WCAG 2.4.1) */
.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--signal-blue);
    color: white;
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border-radius: 0 0 var(--radius-md) 0;
    z-index: var(--z-modal);
    transition: top var(--transition-fast);
}

.skip-nav:focus {
    top: 0;
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Auth Container */
.auth-container {
    position: relative;
    z-index: 1;
    max-width: 380px;
    width: 100%;
    margin: var(--space-8) var(--space-4);
    padding: 40px; /* LG-01: Exact 40px padding per spec */
    background: var(--card-panel);
    border: 1px solid var(--card-border);
    border-radius: 12px; /* LG-01: Exact 12px radius per spec */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); /* LG-01: Deep shadow per spec */
}

/* Auth Header */
.auth-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

/* Logo Container - SVG */
.auth-logo {
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo .logo-svg {
    width: 280px; /* Increased to show full "SAR OPERATING SYSTEM" text */
    height: auto;
    display: block;
}

.auth-header h1 {
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.auth-header .subtitle {
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--text-secondary);
    margin: 0;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin: var(--space-2) 0 0 0;
    line-height: var(--line-height-normal);
}

/* Form Styles */
.auth-form {
    margin-top: var(--space-5);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary); /* Spec: Muted label color */
    font-size: 11px; /* Spec: Small uppercase labels */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group label .required {
    color: var(--danger);
    margin-left: 2px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    background: var(--input-bg, #1E293B);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--input-text);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input::placeholder {
    color: var(--input-placeholder);
}

/* Focus state (WCAG 2.4.7 - Focus Visible) */
.form-group input:focus {
    outline: none;
    border-color: #2563EB; /* LG-01: Exact focus border color per spec */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); /* LG-01: 3px outer glow per spec */
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* LG-02: Custom checkbox - hide default browser checkbox */
.checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* LG-02: Custom checkbox visual element */
.checkbox-group input[type="checkbox"] + label {
    position: relative;
    padding-left: 24px; /* Space for custom checkbox */
    margin: 0;
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    text-transform: none;
    letter-spacing: normal;
}

/* LG-02: Custom checkbox box */
.checkbox-group input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--deep-ocean);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    transition: all var(--transition-fast);
}

/* LG-02: Custom checkbox checkmark */
.checkbox-group input[type="checkbox"] + label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg) scale(0);
    transition: transform var(--transition-fast);
}

/* LG-02: Checked state - blue fill with white checkmark */
.checkbox-group input[type="checkbox"]:checked + label::before {
    background: #2563EB; /* Accent blue fill */
    border-color: #2563EB;
}

.checkbox-group input[type="checkbox"]:checked + label::after {
    transform: translateY(-60%) rotate(45deg) scale(1); /* Show checkmark */
}

/* LG-02: Focus state for accessibility */
.checkbox-group input[type="checkbox"]:focus + label::before {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: #2563EB; /* LG-03: Accent blue per spec */
    color: white;
    border: none;
    border-radius: 5px; /* LG-03: 5px radius per spec */
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: 600; /* LG-03: 600 weight per spec */
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
    min-height: var(--button-height-md);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.4); /* LG-03: Shadow per spec */
}

.btn-primary:hover {
    background: #60A5FA; /* LG-03: Lighter blue on hover per spec */
}

.btn-primary:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.btn-primary:active {
    background: #2574c7;
}

/* LG-05: Rate limiting disabled state */
.btn-primary:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.btn-secondary {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--graphite);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-2xl);
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-base);
    margin-top: var(--space-3);
    min-height: var(--button-height-md);
}

.btn-secondary:hover {
    background: #243444;
}

.btn-secondary:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Form intro text */
.auth-form-intro {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--space-5);
}

/* Auth Links */
.auth-links {
    text-align: center;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--card-border);
}

.auth-links a {
    color: var(--signal-blue);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.auth-links a:hover {
    text-decoration: underline;
    color: #3a93e6;
}

.auth-links a:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Flash Messages (WCAG 2.2 - Status Messages) */
.flash-messages {
    margin-bottom: var(--space-5);
}

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-base);
    border: 1px solid;
    line-height: var(--line-height-normal);
}

.alert-success {
    background: var(--badge-success-bg);
    color: var(--success);
    border-color: var(--badge-success-border);
}

.alert-error {
    background: var(--badge-danger-bg);
    color: var(--danger);
    border-color: var(--badge-danger-border);
}

.alert-warning {
    background: var(--badge-warning-bg);
    color: var(--warning);
    border-color: var(--badge-warning-border);
}

.alert-info {
    background: var(--badge-info-bg);
    color: var(--signal-blue);
    border-color: var(--badge-info-border);
}

/* Help Text */
.help-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    line-height: var(--line-height-normal);
}

/* LG-05: Rate limit warning message */
.rate-limit-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    text-align: center;
}

/* MFA/QR Code Container */
.qr-code-container {
    text-align: center;
    margin: var(--space-5) 0;
    padding: var(--space-5);
    background: var(--deep-ocean);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.qr-code-container img {
    max-width: 250px;
    margin: var(--space-3) auto;
    display: block;
    /* QR codes need alt text describing what they do, not "QR code" */
}

/* Secret Key Display */
.secret-key {
    font-family: var(--font-data);
    background: var(--deep-ocean);
    color: var(--text-primary);
    padding: var(--space-3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    word-break: break-all;
    font-size: var(--font-size-sm);
    margin: var(--space-3) 0;
    line-height: var(--line-height-relaxed);
}

/* Responsive Design */
@media (max-width: 480px) {
    .auth-container {
        margin: var(--space-4);
        padding: var(--space-6);
    }
}

/* High Contrast Mode (WCAG 2.2) */
@media (prefers-contrast: high) {
    .auth-container {
        border-width: 2px;
    }

    .btn-primary,
    .btn-secondary {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    body.auth-page::before,
    body.auth-page::after {
        display: none;
    }

    .auth-container {
        box-shadow: none;
        border: 1px solid #000;
    }
}