/* ==========================================================================
   TravelCorpo palette — pre-login surfaces only (login, forgot, reset)
   Loaded after premium.css from views/layouts/auth-layout.php.

   Source of truth: travelcorpo-mvp-design (navy 30 % / gold 10 % / neutrals 60 %).
   This file changes COLOUR ONLY: composition, spacing, radii, motion and the
   markup contract stay exactly as they were, so the rest of the app (still on
   the ink/ivory/brass layer) is untouched until the redesign is approved.
   ========================================================================== */

body:has(.auth-shell) {
    /* archive tokens */
    --tc-bg: #F3F6FA;
    --tc-surface: #FFFFFF;
    --tc-surface-2: #F8FAFD;
    --tc-ink: #0B1B33;
    --tc-mute: #586983;
    --tc-mute-soft: #66788F;
    --tc-line: #DCE4EE;
    --tc-navy: #032E62;
    --tc-navy-deep: #061A38;
    --tc-navy-soft: #E5ECF6;
    --tc-gold: #FBBB00;
    --tc-gold-2: #FBD35C;
    --tc-gold-soft: #FFF1C4;
    --tc-gold-ink: #3A2A00;
    --tc-good: #17803D;
    --tc-good-ink: #157A38;
    --tc-good-soft: #E3F4E9;
    --tc-bad: #B42318;
    --tc-bad-soft: #FCE6E3;

    /* re-point the legacy gold tokens inside the auth scope so nothing
       inherited from premium.css still paints brass */
    --gold: #FBBB00;
    --gold-2: #FBD35C;
    --gold-soft: #FFF1C4;
    --gold-line: rgba(251, 187, 0, .45);

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

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

.auth-page {
    background:
        radial-gradient(900px 620px at 8% -12%, rgba(3, 46, 98, .10), transparent 58%),
        radial-gradient(760px 520px at 96% 110%, rgba(251, 187, 0, .16), transparent 62%),
        var(--tc-bg);
}

.auth-orb-1 {
    background: radial-gradient(circle, rgba(3, 46, 98, .38), transparent 66%);
}

.auth-orb-2 {
    background: radial-gradient(circle, rgba(251, 187, 0, .40), transparent 66%);
}

.auth-orb-3 {
    background: radial-gradient(circle, rgba(79, 143, 230, .22), transparent 70%);
}

.auth-grain {
    background-image: radial-gradient(rgba(3, 46, 98, .10) 1px, transparent 1px);
    mix-blend-mode: multiply;
    opacity: .5;
}

.auth-shell {
    background: var(--tc-surface);
    border-color: rgba(3, 46, 98, .14);
    box-shadow:
        0 48px 120px -60px rgba(3, 46, 98, .55),
        0 0 0 1px rgba(3, 46, 98, .05);
}

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

.auth-brand-panel {
    color: #E8EEF7;
    background:
        radial-gradient(620px 440px at 100% 0%, rgba(251, 187, 0, .26), transparent 62%),
        linear-gradient(158deg, #032E62 0%, #02254D 50%, #061A38 100%);
}

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

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

.auth-logo {
    background: var(--tc-gold);
    border-color: rgba(255, 255, 255, .30);
    box-shadow: 0 14px 30px -14px rgba(251, 187, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
    color: var(--tc-navy);
}

.auth-logo span { color: var(--tc-navy); }

.auth-logo-image { background: var(--tc-surface); }

.auth-brand-word { color: rgba(255, 255, 255, .74); }

/* Brand lockup — the client logo replaces the letter mark + word */
.auth-brand-top { display: block; }

.auth-brand-logo { display: block; line-height: 0; }

.auth-brand-logo img {
    display: block;
    width: clamp(240px, min(26vw, 36vh), 352px);
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 18px 34px rgba(3, 10, 24, .45));
}

/* The brand panel is hidden on phones, so the form carries a compact logo */
.auth-mobile-brand { display: none; }

.auth-kicker { color: var(--tc-gold); margin-bottom: 20px; }

.auth-brand-panel h1 { color: #FFFFFF; }

.auth-brand-panel h1 em { color: var(--tc-gold-2); }

.auth-brand-panel h1,
.auth-description { text-wrap: pretty; }

.auth-description { color: rgba(255, 255, 255, .74); }

.auth-features { border-top-color: rgba(255, 255, 255, .16); }

.auth-features div {
    border-bottom-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .80);
}

.auth-features span { color: var(--tc-gold); }

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

.auth-form-panel {
    background:
        radial-gradient(520px 360px at 110% -10%, rgba(251, 187, 0, .10), transparent 62%),
        var(--tc-surface);
    border-left-color: var(--tc-line);
}

.auth-form-panel::after {
    background: linear-gradient(90deg, var(--tc-gold) 0%, rgba(251, 187, 0, .35) 34%, transparent 72%);
}

.login-heading p { color: var(--tc-navy); }

.login-heading h2 { color: var(--tc-ink); }

.login-heading span { color: var(--tc-mute); }

.login-form .form-group label,
.login-form .form-group .lbl { color: var(--tc-mute); }

.login-form .form-group input {
    background: var(--tc-surface);
    border-color: var(--tc-line);
    color: var(--tc-ink);
}

.login-form .form-group input::placeholder { color: var(--tc-mute-soft); }

.login-form .form-group input:hover { border-color: #C6D2E2; }

.login-form .form-group input:focus {
    background: var(--tc-surface);
    border-color: var(--tc-navy);
    box-shadow: inset 2px 0 0 var(--tc-gold), 0 0 0 3px rgba(3, 46, 98, .07);
}

.password-field button {
    border-left-color: var(--tc-line);
    color: var(--tc-navy);
}

.password-field button:hover { color: var(--tc-ink); }

.login-options { color: var(--tc-mute); }

.login-options input { accent-color: var(--tc-navy); }

.login-options a {
    color: var(--tc-navy);
    text-decoration-color: rgba(3, 46, 98, .30);
}

/* Primary action = archive gold CTA (navy on gold, 7.8:1) */
.login-form .btn-primary,
.login-submit {
    background: var(--tc-gold);
    border-color: var(--tc-gold);
    color: var(--tc-navy);
    box-shadow: 0 18px 38px -22px rgba(251, 187, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.login-form .btn-primary::after,
.login-submit::after {
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 48%, transparent 74%);
}

.login-form .btn-primary:hover,
.login-submit:hover {
    background: #FFCB33;
    border-color: #FFCB33;
    color: var(--tc-navy);
}

.login-footer-note {
    border-top-color: var(--tc-line);
    color: var(--tc-mute);
}

.login-footer-note strong { color: var(--tc-ink); }

.auth-trust { color: var(--tc-mute); }

.auth-trust-dot {
    background: var(--tc-good);
    box-shadow: 0 0 0 3px rgba(23, 128, 61, .16);
}

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

.auth-locale {
    background: var(--tc-surface-2);
    border-color: var(--tc-line);
}

.auth-locale-option { color: var(--tc-mute); }

.auth-locale-option + .auth-locale-option { border-left-color: rgba(3, 46, 98, .12); }

.auth-locale-option:hover {
    color: var(--tc-navy);
    background: var(--tc-navy-soft);
}

.auth-locale-option.is-active,
.auth-locale-option[aria-current="true"] {
    background: var(--tc-navy);
    color: #FFFFFF;
    box-shadow: none;
}

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

.auth-back-link { color: var(--tc-navy); }

.auth-page a:focus-visible,
.auth-page button:focus-visible,
.auth-page input:focus-visible,
.auth-page [tabindex]:focus-visible {
    outline: 2px solid var(--tc-navy);
    outline-offset: 2px;
}

.auth-page .alert-error {
    background: var(--tc-bad-soft);
    color: var(--tc-bad);
    border-color: rgba(180, 35, 24, .18);
}

.auth-page .alert-success {
    background: var(--tc-good-soft);
    color: var(--tc-good-ink);
    border-color: rgba(23, 128, 61, .18);
}

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

.auth-page .field-error { color: var(--tc-bad); }

.auth-page .field-error::before { background: var(--tc-bad); }

/* ------------------------------------------------------------------
   Brand lockup — responsive sizing
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
    .auth-brand-logo img { width: 236px; }
}

/* Short viewports: the panel keeps its whole story on screen */
@media (max-height: 880px) and (min-width: 1001px) {
    .auth-brand-logo img { width: 222px; }
    .auth-features { margin-top: 26px; }
}

@media (max-height: 790px) and (min-width: 1001px) {
    .auth-brand-logo img { width: 200px; }
    .auth-brand-panel h1 { font-size: 40px; }
    .auth-features { margin-top: 18px; }
}

@media (max-width: 560px) {
    .auth-mobile-brand {
        display: block;
        margin: 0 auto 26px;
    }

    .auth-mobile-brand img {
        display: block;
        width: 190px;
        height: auto;
        margin: 0 auto;
    }
}