/* 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 {
    background: var(--gradient-brand);
    color: var(--color-text);
    position: relative;
    overflow-x: hidden;
}

/* Decoration: diagonal purple lines in the top corners + lime bars rising at the bottom
   edges (tall at the sides, short in the middle). Behind the card, never clickable. */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(115deg, rgba(173,92,164,0.55) 0 1.5px, transparent 1.5px 18px) left top / 50% 100% no-repeat,
        repeating-linear-gradient(65deg, rgba(173,92,164,0.55) 0 1.5px, transparent 1.5px 18px) right top / 50% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 70%);
    mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 70%);
}
body.auth-page::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62vh;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(186,213,50,0.32) 0 6px, transparent 6px 20px);
    clip-path: polygon(0 0, 50% 90%, 100% 0, 100% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,0.35) 100%);
    mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,0.35) 100%);
}

.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-tertiary);
    font-weight: 400;
}

.auth-page label {
    font-weight: 500;
    color: var(--color-text-tertiary);
}
.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) {
    body.auth-page::after { height: 40vh; opacity: 0.7; }
    .auth-page .card,
    .auth-page .sc-card { padding: 32px 24px; }
}
@media print {
    body.auth-page::before,
    body.auth-page::after { display: none; }
}