/* ==========================================================================
   TravelCorpo — dark theme layer for the pre-login flow
   Loaded last from views/layouts/auth-layout.php, after auth-travelcorpo.css.

   Same archive tokens as the internal dark layer (travelcorpo-mvp-design,
   data-theme="dark"): bg #08111F, surface #0F1C31, ink #E8EEF7,
   line #213450, primary #4F8FE6, gold #FBBB00, head #061A38.
   Also carries the archive typography (Sora + Plus Jakarta Sans) so the
   login reads in the same voice as the portal it opens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap');

body:has(.auth-shell) {
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;

    /* archive dark tokens */
    --tc-bg: #08111F;
    --tc-surface: #0F1C31;
    --tc-surface-2: #13233B;
    --tc-ink: #E8EEF7;
    --tc-mute: #9DB0C9;
    --tc-mute-soft: #93A6BF;
    --tc-line: #213450;
    --tc-line-soft: #1B2B44;
    --tc-line-strong: #2C4260;

    --tc-navy: #4F8FE6;
    --tc-navy-deep: #032E62;
    --tc-navy-soft: #14294A;
    --tc-gold: #FBBB00;
    --tc-gold-2: #FBD35C;
    --tc-gold-soft: #3A3010;
    --tc-gold-ink: #FBD35C;
    --tc-good: #5BCB87;
    --tc-good-ink: #5BCB87;
    --tc-good-soft: #12301F;
    --tc-bad: #FF8A7D;
    --tc-bad-soft: #3C1814;

    /* legacy gold tokens inside the auth scope */
    --gold: #FBBB00;
    --gold-2: #FBD35C;
    --gold-soft: #3A3010;
    --gold-line: rgba(251, 187, 0, .38);
    --ink: #E8EEF7;
    --paper: #0F1C31;
    --line: #213450;

    background: var(--tc-bg);
    color: var(--tc-ink);
}

/* ---------------------------------------------------------------- canvas */

.auth-page {
    background:
        radial-gradient(940px 640px at 6% -14%, rgba(79, 143, 230, .18), transparent 60%),
        radial-gradient(780px 540px at 98% 112%, rgba(251, 187, 0, .10), transparent 62%),
        var(--tc-bg);
    color: var(--tc-ink);
}

.auth-orb-1 { background: radial-gradient(circle, rgba(79, 143, 230, .32), transparent 66%); }
.auth-orb-2 { background: radial-gradient(circle, rgba(251, 187, 0, .26), transparent 66%); }
.auth-orb-3 { background: radial-gradient(circle, rgba(61, 123, 209, .26), transparent 70%); }

.auth-grain {
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    mix-blend-mode: screen;
    opacity: .45;
}

.auth-shell {
    background: var(--tc-surface);
    border: 1px solid #213450;
    box-shadow:
        0 50px 120px -60px rgba(0, 0, 0, .95),
        0 0 0 1px rgba(255, 255, 255, .03);
}

/* ------------------------------------------------------------- brand side */

.auth-brand-panel {
    color: #E8EEF7;
    background:
        radial-gradient(620px 440px at 100% 0%, rgba(251, 187, 0, .20), transparent 62%),
        linear-gradient(158deg, #0A2A55 0%, #061A38 55%, #04101F 100%);
}

.auth-brand-panel::before {
    border-color: rgba(251, 187, 0, .38);
    box-shadow: 0 0 0 60px rgba(251, 187, 0, .05), 0 0 0 140px rgba(251, 187, 0, .025);
}

.auth-brand-panel::after {
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
}

.auth-logo { color: #032E62; }
.auth-logo span { color: #032E62; }
.auth-logo-image { background: #0F1C31; }

.auth-brand-word { color: rgba(255, 255, 255, .70); }
.auth-kicker { color: #FBBB00; }
.auth-brand-panel h1 { color: #FFFFFF; }
.auth-brand-panel h1 em { color: #FBD35C; }
.auth-description { color: rgba(255, 255, 255, .72); }

.auth-features { border-top-color: rgba(255, 255, 255, .14); }
.auth-features div {
    border-bottom-color: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .78);
}
.auth-features span { color: #FBBB00; }

/* -------------------------------------------------------------- form side */

.auth-form-panel {
    background:
        radial-gradient(560px 380px at 112% -12%, rgba(251, 187, 0, .07), transparent 62%),
        var(--tc-surface);
    border-left-color: #213450;
}

.auth-form-panel::after {
    background: linear-gradient(90deg, #FBBB00 0%, rgba(251, 187, 0, .28) 34%, transparent 72%);
}

.login-heading p { color: #FBCB4A; }
.login-heading h2 { color: #FFFFFF; }
.login-heading span { color: #9DB0C9; }

.login-form .form-group label,
.login-form .form-group .lbl { color: #A9BAD1; }

.login-form .form-group input {
    background: #13233B;
    border-color: #213450;
    color: #E8EEF7;
}

.login-form .form-group input::placeholder { color: #93A6BF; }
.login-form .form-group input:hover { border-color: #2C4260; }

.login-form .form-group input:focus {
    background: #16273F;
    border-color: #4F8FE6;
    box-shadow: inset 2px 0 0 #FBBB00, 0 0 0 3px rgba(79, 143, 230, .18);
}

.password-field button {
    border-left-color: #213450;
    color: #9DB0C9;
}

.password-field button:hover { color: #FFFFFF; background: #16273F; }

.login-options { color: #A9BAD1; }
.login-options input { accent-color: #4F8FE6; }

.login-options a {
    color: #7FB2F0;
    text-decoration-color: rgba(127, 178, 240, .40);
}

/* Primary action stays the archive gold CTA */
.login-form .btn-primary,
.login-submit {
    background: #FBBB00;
    border-color: #FBBB00;
    color: #032E62;
    box-shadow: 0 18px 38px -24px rgba(251, 187, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .30);
}

.login-form .btn-primary:hover,
.login-submit:hover {
    background: #FFCB33;
    border-color: #FFCB33;
    color: #032E62;
}

.login-footer-note {
    border-top-color: #213450;
    color: #9DB0C9;
}

.login-footer-note strong { color: #E8EEF7; }

.auth-trust { color: #9DB0C9; }
.auth-trust-dot { background: #5BCB87; box-shadow: 0 0 0 3px rgba(91, 203, 135, .18); }

/* -------------------------------------------------------- language switch */

.auth-locale {
    background: #13233B;
    border-color: #213450;
}

.auth-locale-option { color: #A9BAD1; }
.auth-locale-option + .auth-locale-option { border-left-color: #213450; }

.auth-locale-option:hover {
    color: #FFFFFF;
    background: #14294A;
}

.auth-locale-option.is-active,
.auth-locale-option[aria-current="true"] {
    background: #FBBB00;
    color: #032E62;
}

/* --------------------------------------------------- links, focus, alerts */

.auth-back-link { color: #7FB2F0; }

.auth-page a:focus-visible,
.auth-page button:focus-visible,
.auth-page input:focus-visible,
.auth-page [tabindex]:focus-visible {
    outline: 2px solid #FBBB00;
    outline-offset: 2px;
}

.auth-page .alert-error {
    background: #3C1814;
    color: #FF8A7D;
    border-color: rgba(255, 138, 125, .28);
}

.auth-page .alert-success {
    background: #12301F;
    color: #5BCB87;
    border-color: rgba(91, 203, 135, .26);
}

.auth-page .is-invalid,
.auth-page input[aria-invalid="true"],
.auth-page select[aria-invalid="true"],
.auth-page textarea[aria-invalid="true"] {
    border-color: #FF8A7D !important;
    box-shadow: inset 2px 0 0 #FF8A7D;
}

.auth-page .field-error { color: #FF8A7D; }
.auth-page .field-error::before { background: #FF8A7D; }

/* ------------------------------------------------ archive typography */

.auth-page,
.auth-page input,
.auth-page select,
.auth-page textarea,
.auth-page button {
    font-family: var(--font-ui);
}

.auth-brand-panel h1,
.login-heading h2,
.auth-shell h1,
.auth-shell h2,
.auth-shell .display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}