/* ============================================================
   CITAM Safari — auth pages (login / forgot / reset / change pw).
   Built on the CITAM tokens in citam-theme.css (loaded before this).
   Navy carries the brand panel, sky highlights, red only on the
   card's brand bar + the primary CTA (dark mode).
   ============================================================ */

* { box-sizing: border-box; }

body.safari-auth {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    background: var(--bg-canvas);
    color: var(--text-primary);
}

.auth-split {
    display: flex;
    min-height: 100vh;
}

/* Left brand panel — CITAM navy with a soft sky glow. */
.auth-brand {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    background:
        url('/images/auth-bg.svg') center / cover no-repeat,
        radial-gradient(circle at 20% 15%, rgba(75, 181, 216, .18), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(224, 16, 32, .10), transparent 40%),
        var(--citam-navy);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 3rem 4rem;
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 1, 25, .35) 0%, rgba(0, 1, 25, .10) 40%, rgba(0, 1, 25, .60) 100%);
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 440px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    animation: auth-slide-in .5s cubic-bezier(.25, .6, .3, 1) both;
}

@keyframes auth-slide-in {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

.auth-brand .logo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.auth-brand .logo-row img { height: 64px; }
.auth-brand .logo-line { height: 2px; width: 60px; background: var(--citam-sky); }
.auth-brand h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; color: #fff; margin: 0 0 1rem; }
.auth-brand p.lead { color: #B9C2D8; font-size: 1.05rem; line-height: 1.6; margin-bottom: 2.5rem; }

.auth-features { list-style: none; padding: 0; margin: 0; }
.auth-features li {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; color: #DCE2EF;
    animation: auth-slide-in .5s cubic-bezier(.25, .6, .3, 1) both;
}
.auth-features li:nth-child(1) { animation-delay: .10s; }
.auth-features li:nth-child(2) { animation-delay: .18s; }
.auth-features li:nth-child(3) { animation-delay: .26s; }
.auth-features li:nth-child(4) { animation-delay: .34s; }

.auth-features .feat-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    background: rgba(75, 181, 216, .16); color: var(--citam-sky);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    transition: transform var(--motion), background-color var(--motion);
}
.auth-features li:hover .feat-ico { transform: scale(1.08); background: rgba(75, 181, 216, .28); }

/* Right form panel */
.auth-form-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-canvas);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent); /* the page's single red brand moment */
    box-shadow: 0 20px 50px rgba(0, 1, 25, .12);
    padding: 2.5rem 2.25rem;
    animation: auth-card-in .4s cubic-bezier(.25, .6, .3, 1) both;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-badge {
    width: 60px; height: 60px; border-radius: 14px; margin: 0 auto 1rem;
    background: var(--citam-navy); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
html[data-bs-theme="dark"] .auth-badge { background: var(--bg-raised); color: var(--citam-sky); }

.auth-card h3 { font-family: var(--font-heading); text-align: center; font-weight: 700; color: var(--text-primary); margin: 0 0 .25rem; }
.auth-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.75rem; }

.auth-field { margin-bottom: 1.25rem; }
.auth-field label { font-weight: 600; font-size: .85rem; color: var(--text-secondary); margin-bottom: .35rem; display: block; }
.auth-input-wrap { position: relative; }
.auth-card .form-control {
    background-color: var(--bg-sunken);
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: .8rem 1rem;
    border-radius: var(--radius);
    transition: border-color var(--motion), box-shadow var(--motion);
}
.auth-card .form-control:focus {
    background-color: var(--bg-sunken);
    border-color: var(--info);
    box-shadow: 0 0 0 .2rem var(--info-bg);
    color: var(--text-primary);
}

.pw-toggle {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); padding: .5rem .75rem; cursor: pointer;
    transition: color var(--motion);
}
.pw-toggle:hover { color: var(--info); }

.forgot-link { font-size: .85rem; color: var(--info); text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }

.btn-safari {
    background: var(--primary); color: var(--on-primary); border: none; width: 100%;
    padding: .8rem; border-radius: var(--radius); font-weight: 600; font-family: var(--font-heading);
    transition: background-color var(--motion), transform .12s ease, box-shadow var(--motion);
}
.btn-safari:hover { background: var(--primary-hover); color: var(--on-primary); box-shadow: 0 6px 18px rgba(var(--primary-rgb), .28); }
.btn-safari:active { transform: translateY(1px); }

.ssl-note { text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: 1.25rem; }
.auth-foot { text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: 1rem; }

/* Dark-mode toggle */
.theme-toggle {
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer; font-size: 1.1rem;
    transition: transform var(--motion), color var(--motion);
}
.theme-toggle:hover { transform: rotate(15deg) scale(1.06); color: var(--info); }

@media (max-width: 991.98px) {
    .auth-split { flex-direction: column; }
    .auth-brand { display: none; }
    .auth-form-side { min-height: 100vh; padding: 1.25rem; }
    .auth-card { padding: 2rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand-inner, .auth-features li, .auth-card { animation: none; }
}