/* Brand skin for the auth pages (login, register, password reset, company registration,
   company picker). Loaded AFTER each page's inline <style>, so these rules win at equal
   specificity. Scoped under body.auth-page. Mock: redesign/site_.pdf page 1. */

body.auth-page {
    /* The designer's login gradient (page 1 of the mock): 55deg, eased from the brand blue to deep navy. */
    background: linear-gradient(55deg, #485caa 0%, #3d4f97 12.5%, #2c3979 31%, #1a235a 50%, #0b1140 65%, #00032c 75.7%, #00032c 100%);
    background-attachment: fixed;
    color: var(--color-text);
    position: relative;
    overflow-x: hidden;
}

/* Decoration: the designer's own vector artwork (redesign/site_.pdf page 1, extracted to an SVG): purple lines fanning
   in from both sides, lime bars forming a valley, the centre (logo + card) left clear. Behind the card, never clickable. */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/images/brand/deco-login.svg') center / cover no-repeat;
}
@media (max-width: 768px) {
    body.auth-page::before { opacity: 0.7; }
}
@media print {
    body.auth-page::before { display: none; }
}

.auth-page .auth-logo {
    position: relative;
    z-index: 1;
    display: block;
    height: 42px;
    width: auto;
    margin: 0 auto 10px;
}
.auth-page .subtitle {
    position: relative;
    z-index: 1;
    color: #fff;
    opacity: 0.92;
    font-weight: 400;
    text-align: center;
}

.auth-page .card,
.auth-page .sc-card {
    position: relative;
    z-index: 1;
    background: var(--color-surface, #fff);
    color: var(--color-text);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,18,0.45);
    padding: 44px;
    max-width: 468px;
}
.auth-page .card h2,
.auth-page .sc-title {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: var(--color-text-secondary);
}
.auth-page .card .desc,
.auth-page .sc-subtitle {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.auth-page label {
    font-weight: 500;
    color: var(--color-text-secondary);
}
.auth-page input[type="text"],
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="tel"],
.auth-page input[type="url"],
.auth-page input[type="number"],
.auth-page select,
.auth-page textarea {
    background: #f9f9fb;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
}
.auth-page input:focus,
.auth-page select:focus,
.auth-page textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.auth-page .btn,
.auth-page .sc-btn {
    font-weight: 600;
}
.auth-page .btn-primary {
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: 700;
}
.auth-page .btn-primary:hover {
    background: var(--color-action-hover);
    color: var(--color-on-action);
}
.auth-page .sc-btn-primary {
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: 700;
}
.auth-page .sc-btn-primary:hover {
    background: var(--color-action-hover);
    opacity: 1;
}
.auth-page .btn-oauth {
    background: var(--color-surface, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
.auth-page .btn-oauth:hover {
    background: var(--color-input-bg, #f5f5f7);
}

.auth-page .links a {
    color: var(--color-accent);
}
.auth-page .divider::before,
.auth-page .divider::after {
    background: var(--color-border);
}

/* Company picker uses its own sc-* classes and a row layout: stack logo above the card. */
body.auth-page.sc-page {
    flex-direction: column;
    gap: 16px;
}
.auth-page .sc-company-row {
    background: #f9f9fb;
}
.auth-page .sc-btn-secondary {
    background: var(--color-accent);
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    /* The card stays light on the dark gradient even if the OS is in dark mode. */
    .auth-page .sc-card { background: #fff; color: var(--color-text); }
    .auth-page .sc-company-row { background: #f9f9fb; }
    .auth-page .sc-section-title,
    .auth-page .sc-subtitle,
    .auth-page .sc-nif,
    .auth-page .sc-divider { color: var(--color-text-tertiary); }
    .auth-page input,
    .auth-page select { background: #f9f9fb; color: var(--color-text); border-color: var(--color-border); }
}

@media (max-width: 600px) {
    .auth-page .card,
    .auth-page .sc-card { padding: 32px 24px; }
}