/* ==========================================================================
   CompliHub — Login / authentication styles
   Split-screen layout: animated brand hero (left) + sign-in card (right).
   ========================================================================== */

:root {
    /* Brand palette — trust-navy primary + compliance-green accent */
    --ch-navy-900: #081533;
    --ch-navy-800: #0f244f;
    --ch-navy-700: #163a7a;
    --ch-primary:  #2f6bff;
    --ch-primary-600: #245ae0;
    --ch-primary-700: #1b46b8;
    --ch-accent:   #17c3a2;   /* teal-green: "compliant / done" */
    --ch-accent-2: #35e0c0;
    --ch-accent-200: #b6f4e8;
    --ch-amber:    #f6b545;

    --ch-ink:      #0f172a;
    --ch-body:     #4a5875;
    --ch-muted:    #94a3b8;
    --ch-line:     #e5eaf2;
    --ch-surface:  #ffffff;
    --ch-bg:       #eef2fb;

    --ch-radius:   18px;
    --ch-radius-sm: 12px;
    --ch-shadow:   0 30px 70px -30px rgba(11, 27, 58, .45);

    --ch-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
    font-family: var(--ch-font);
    overflow: hidden;   /* fixed full-viewport auth pages — no page scroll */
    color: var(--ch-ink);
    background:
        radial-gradient(900px 500px at 100% 0%, #e3ebff, transparent 60%),
        radial-gradient(800px 500px at 0% 100%, #e2f7f1, transparent 55%),
        var(--ch-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.auth {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* ── Brand / hero panel ──────────────────────────────────────────────────── */
.auth__brand {
    position: relative;
    overflow: hidden;
    color: #eaf1ff;
    background:
        radial-gradient(1100px 620px at 12% -12%, rgba(47, 107, 255, .55), transparent 60%),
        radial-gradient(900px 520px at 115% 118%, rgba(23, 195, 162, .40), transparent 55%),
        linear-gradient(155deg, var(--ch-navy-900), var(--ch-navy-800) 55%, var(--ch-navy-700));
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 4.5vw, 4.5rem);
}

/* fine grid texture */
.auth__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 95% at 28% 18%, #000 38%, transparent 85%);
            mask-image: radial-gradient(120% 95% at 28% 18%, #000 38%, transparent 85%);
    pointer-events: none;
}

/* floating gradient blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .5;
    pointer-events: none;
    animation: float 14s ease-in-out infinite;
}
.blob--1 {
    width: 320px; height: 320px;
    top: -80px; right: -60px;
    background: radial-gradient(circle at 30% 30%, rgba(53, 224, 192, .7), transparent 70%);
}
.blob--2 {
    width: 260px; height: 260px;
    bottom: -70px; left: -40px;
    background: radial-gradient(circle at 30% 30%, rgba(47, 107, 255, .8), transparent 70%);
    animation-delay: -7s;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-18px, 26px) scale(1.08); }
}

.auth__brand-inner {
    position: relative;
    max-width: 33rem;
    width: 100%;
    animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 2.6rem;
}
.brand-logo__mark {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(140deg, var(--ch-primary), var(--ch-accent));
    box-shadow: 0 10px 24px -8px rgba(23, 195, 162, .7);
}
.brand-logo__name {
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
.brand-logo__name span { color: var(--ch-accent-200); }

/* product logo image (replaces the icon mark) */
.brand-logo__img {
    width: 96px; height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(23, 130, 255, .45));
}

/* ── Feature highlights (replaces the app preview) ───────────────────────── */
.brand-features {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}
.brand-features li {
    display: flex;
    align-items: flex-start;
    gap: .95rem;
}
.bf-ic {
    flex: none;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    font-size: 1.15rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.bf-ic--blue  { background: linear-gradient(140deg, #2f6bff, #1e4fd6); }
.bf-ic--teal  { background: linear-gradient(140deg, #17c3a2, #0f9b83); }
.bf-ic--amber { background: linear-gradient(140deg, #f6a935, #e0871a); }
.bf-txt { display: grid; gap: .12rem; padding-top: .1rem; }
.bf-txt strong { font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.bf-txt span { font-size: .88rem; line-height: 1.5; color: #b9c6e8; }

.brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ch-accent-200);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: .38rem .8rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.brand-copy h1 {
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 .85rem;
}
.brand-copy p {
    color: #b9c6e8;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 30rem;
}

/* ── Glass "app preview" ─────────────────────────────────────────────────── */
.preview-wrap {
    position: relative;
    margin-bottom: 2.4rem;
}
.preview {
    position: relative;
    border-radius: var(--ch-radius);
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}
.preview__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1rem;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.preview__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}
.preview__tab {
    margin-left: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: #dbe6ff;
}
.preview__body { padding: 1.1rem 1.15rem 1.25rem; }

.preview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-bottom: 1.1rem;
}
.pstat {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: .75rem .7rem;
}
.pstat__icon {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.pstat__icon--due  { color: #cfe0ff; background: rgba(47, 107, 255, .28); }
.pstat__icon--over { color: #ffd9c2; background: rgba(246, 122, 69, .30); }
.pstat__icon--done { color: var(--ch-accent-200); background: rgba(23, 195, 162, .28); }
.pstat__num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.pstat__label {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    color: #a9bbdf;
}

.preview__rows { display: grid; gap: .6rem; }
.prow {
    display: grid;
    grid-template-columns: 6.5rem 1fr 2.4rem;
    align-items: center;
    gap: .7rem;
}
.prow__name { font-size: .8rem; color: #d4def7; }
.prow__track {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.prow__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ch-accent), var(--ch-accent-2));
    animation: grow 1.1s cubic-bezier(.2, .7, .2, 1) both;
    transform-origin: left;
}
.prow__fill--warn { background: linear-gradient(90deg, #f59e42, #f6c045); }
.prow__pct { font-size: .78rem; font-weight: 600; color: #eaf1ff; text-align: right; }

.preview__chip {
    position: absolute;
    right: -10px; bottom: -14px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: #08324a;
    background: linear-gradient(140deg, #fff, #eafff9);
    padding: .5rem .8rem;
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
    animation: float 8s ease-in-out infinite;
}
.preview__chip i { color: var(--ch-amber); }

@keyframes grow { from { transform: scaleX(0); } }

/* feature pills */
.brand-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1.6rem;
    padding: 0;
}
.brand-pills li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: #dbe6ff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    padding: .4rem .75rem;
    border-radius: 999px;
}
.brand-pills i { color: var(--ch-accent-200); }

.brand-footnote {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #93a6cf;
    margin: 0;
}
.brand-footnote i { color: var(--ch-accent-200); }

/* ── Form panel ──────────────────────────────────────────────────────────── */
.auth__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    overflow-y: auto;   /* only scrolls the card if the viewport is very short */
}

.auth-card {
    width: 100%;
    max-width: min(100%, 25rem);
    margin-inline: auto;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: .08s;
}

/* Logo shown only on the form side for small screens */
.auth-card__logo {
    display: none;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.6rem;
}
.auth-card__logo .brand-logo__mark { width: 40px; height: 40px; font-size: 1.2rem; }
.auth-card__logo .brand-logo__img { width: 40px; height: 40px; filter: none; }
.auth-card__logo .brand-logo__name { color: var(--ch-ink); font-size: 1.25rem; }
.auth-card__logo .brand-logo__name span { color: var(--ch-primary); }

.auth-card__head { margin-bottom: 1.6rem; }
.auth-card__head h2 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
}
.auth-card__head p {
    color: var(--ch-body);
    margin: 0;
    font-size: .95rem;
}

/* Inputs with leading icon */
.form-label {
    font-weight: 600;
    font-size: .84rem;
    color: var(--ch-ink);
    margin-bottom: .4rem;
}

.input-icon { position: relative; }
.input-icon > i {
    position: absolute;
    top: 50%; left: 1rem;
    transform: translateY(-50%);
    color: var(--ch-muted);
    font-size: 1.05rem;
    pointer-events: none;
    transition: color .15s;
}
.input-icon .form-control {
    height: 50px;
    padding-left: 2.85rem;
    border-radius: var(--ch-radius-sm);
    border: 1.5px solid var(--ch-line);
    background: #fff;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.input-icon .form-control:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 4px rgba(47, 107, 255, .15);
}
.input-icon .form-control:focus + i,
.input-icon:focus-within > i { color: var(--ch-primary); }
.input-icon .form-control::placeholder { color: #aab4c6; }

.input-icon__toggle {
    position: absolute;
    top: 50%; right: .55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ch-muted);
    width: 36px; height: 36px;
    border-radius: 9px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color .15s, background .15s;
}
.input-icon__toggle:hover { color: var(--ch-primary); background: #eef3ff; }

.link-subtle {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ch-primary);
    text-decoration: none;
}
.link-subtle:hover { text-decoration: underline; }

.form-check-label { font-size: .9rem; color: var(--ch-body); }
.form-check-input:checked {
    background-color: var(--ch-primary);
    border-color: var(--ch-primary);
}
.form-check-input:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 4px rgba(47, 107, 255, .15);
}

/* Primary button */
.btn-primary {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 47, 107, 255;
    height: 50px;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--ch-radius-sm);
    background: linear-gradient(135deg, var(--ch-primary), #4b86ff);
    box-shadow: 0 16px 30px -14px rgba(47, 107, 255, .85);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--ch-primary-600), #3f7bff);
    transform: translateY(-1px);
    box-shadow: 0 20px 36px -14px rgba(47, 107, 255, .9);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .75; }

.alert-danger {
    --bs-alert-color: #8f1d1d;
    --bs-alert-bg: #fdeaea;
    --bs-alert-border-color: #f6cccc;
    border-radius: var(--ch-radius-sm);
    font-size: .9rem;
    padding: .75rem .9rem;
}

.auth-card__foot {
    margin: 1.6rem 0 0;
    text-align: center;
    font-size: .88rem;
    color: var(--ch-body);
}
.auth-card__foot a { color: var(--ch-primary); font-weight: 600; text-decoration: none; }
.auth-card__foot a:hover { text-decoration: underline; }

.auth__copyright {
    margin-top: 1.75rem;
    font-size: .78rem;
    color: var(--ch-muted);
    text-align: center;
}
.auth__copyright a { color: var(--ch-muted); text-decoration: none; }
.auth__copyright a:hover { color: var(--ch-body); }

/* Cloudflare Turnstile: keep it from overflowing the card */
.cf-turnstile { min-height: 65px; }

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* On phones the brand panel is hidden and the form stacks — allow normal
       vertical scrolling so nothing is ever clipped on small screens. */
    html, body { height: auto; overflow: auto; }
    .auth { display: block; height: auto; grid-template-rows: none; overflow: visible; }
    .auth__brand { display: none; }
    .auth__form { min-height: 100vh; width: 100%; overflow: visible; }
    .auth-card__logo { display: flex; }
    .auth-card {
        background: #fff;
        border-color: var(--ch-line);
    }
}

@media (max-width: 520px) {
    .auth__form { padding: 1.75rem 1.15rem; }
    .auth-card  { padding: 1.5rem 1.25rem; }
}

/* ── Focused-field highlight (light yellow, sbherbo style) ───────────────── */
.auth-card input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-card select:focus,
.auth-card textarea:focus {
    background-color: #ffffcc !important;
}
.auth-card input,
.auth-card select,
.auth-card textarea { transition: background-color .25s ease, border-color .15s, box-shadow .15s; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}