/*
 * OxChief — logged-OUT auth pages (login / signup / password-reset flow).
 *
 * Light, clean, and consistent with the new light Console
 * (base_console.html + ox-console.css). These pages are pre-login so they
 * DON'T extend base_console — this sheet re-declares the same light palette
 * the console uses (mirrors `.ox-shell` in ox-console.css, scoped to
 * `.ox-auth`) and adds the form-control styles the console doesn't ship.
 *
 * Do NOT edit ox-console.css / base_console.html — keep them the source of
 * truth for the in-app console; this is the standalone auth sibling.
 *
 * Author: OxChief
 */

/* ------------------------------------------------------------------ *
 * Light palette — mirrors `.ox-shell` (light) in ox-console.css.
 * --radius-* / fonts come from ox_tokens.css :root (loaded first).
 * ------------------------------------------------------------------ */
.ox-auth {
    /* ink ladder — light surface steps */
    --ink-0: #F4F6F8;   /* page background */
    --ink-1: #FFFFFF;   /* card / panel */
    --ink-2: #EDF1F4;   /* secondary surface (inputs, ghost buttons) */
    --ink-3: #E0E6EC;   /* tertiary / hover */
    --hairline: rgba(18, 24, 30, .10);
    --hairline-strong: rgba(18, 24, 30, .18);

    /* text — dark ink on light */
    --text-hi: #13181D;
    --text-mid: #3A434B;
    --text-low: #6A757E;

    /* interaction */
    --accent: #1565C0;
    --accent-bright: #1565C0;

    /* semantics — AA on light surface */
    --go: #12883A;
    --warn: #9C6300;
    --stop: #C62828;
    --danger-text: #C62828;

    /* brand */
    --brand-green: #2E7D32;

    --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent-bright);

    --ox-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --ox-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Page shell + the NASA "nod to the past" hero
 * ------------------------------------------------------------------ */
.ox-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ink-0);
    /* faint grid texture, same idea as the console's .ox-shell */
    background-image:
        linear-gradient(var(--ink-0), var(--ink-0)),
        linear-gradient(rgba(18, 24, 30, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 24, 30, .025) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    color: var(--text-mid);
    font-family: var(--ox-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ox-auth ::selection { background: rgba(21, 101, 192, .22); }

.ox-auth-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Brand logo above the card (outside the box), enlarged */
.ox-auth-brand {
    display: block;
    margin-bottom: 22px;
}
.ox-auth-brand img {
    height: 46px;
    width: auto;
    display: block;
}

/* The card: a split hero — NASA blueprint on the left, the form on the
 * right. On narrow screens the hero collapses to a slim banner. */
.ox-auth-card {
    width: 100%;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--ink-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(18, 24, 30, .04), 0 12px 40px rgba(18, 24, 30, .06);
}

/* ----- hero (NASA nod) ----- */
.ox-auth-hero {
    position: relative;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    /* a soft light panel so the blueprint reads but never fights the form */
    background:
        radial-gradient(120% 90% at 0% 0%, #FCFDFE 0%, #EEF2F6 60%, #E7ECF1 100%);
    border-right: 1px solid var(--hairline);
    overflow: hidden;
}

/* the rover + Apollo-spacesuit blueprint, set very low-opacity so it's a
 * texture, not a picture — a subtle nod to the past */
.ox-auth-hero::before {
    content: "";
    position: absolute;
    /* the source art is a wide panorama (rover far-left, orbit arc center,
       Apollo spacesuit far-right). Anchor it bottom-left so the Mars-rover
       line drawing reads as the clear nod, with the orbit arc sweeping up. */
    left: -8%;
    right: -55%;
    bottom: -4%;
    height: 78%;
    background-image: var(--ox-hero-image);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 100%;
    opacity: .55;
    /* lift the line-art off the panel just a touch */
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* hero copy sits above the blueprint */
.ox-auth-hero-top,
.ox-auth-hero-bottom { position: relative; z-index: 1; }

.ox-auth-hero-logo { height: 30px; width: auto; display: block; }

.ox-auth-hero-tag {
    margin-top: 22px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-hi);
    letter-spacing: -0.01em;
    max-width: 14ch;
}

.ox-auth-hero-sub {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-mid);
    max-width: 32ch;
}

.ox-auth-hero-bottom {
    margin-top: 28px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(2px);
    font-family: var(--ox-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-low);
}
.ox-auth-hero-bottom .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--go); flex: none;
}

/* ----- form side ----- */
.ox-auth-form-wrap {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* logo shown ONLY on the form side when the hero is hidden (mobile) */
.ox-auth-form-logo { display: none; }
.ox-auth-form-logo img { height: 30px; width: auto; }

/* ------------------------------------------------------------------ *
 * Headings (replaces Metronic text-dark / text-gray-400)
 * ------------------------------------------------------------------ */
.ox-auth h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-hi);
    margin: 0 0 8px;
    line-height: 1.2;
}
.ox-auth-lead {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-mid);
    margin: 0 0 26px;
}
.ox-auth-lead a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ox-auth-lead a:hover { text-decoration: underline; }

/* a small icon badge for the "done"/"complete" status screens */
.ox-auth-badge {
    width: 52px; height: 52px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: rgba(18, 136, 58, .10);
    color: var(--go);
}
.ox-auth-badge svg { width: 26px; height: 26px; }
.ox-auth-badge.warn { background: rgba(156, 99, 0, .10); color: var(--warn); }
.ox-auth-center { text-align: center; }

/* ------------------------------------------------------------------ *
 * Form controls — the part the console doesn't ship yet
 * ------------------------------------------------------------------ */
.ox-field { margin-bottom: 18px; }
.ox-field-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 7px;
}
.ox-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-hi);
    margin-bottom: 7px;
}
.ox-field-row .ox-label { margin-bottom: 0; }

.ox-link {
    font-size: 12.5px; font-weight: 600;
    color: var(--accent); text-decoration: none; white-space: nowrap;
}
.ox-link:hover { text-decoration: underline; }

.ox-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-family: var(--ox-sans);
    color: var(--text-hi);
    background: var(--ink-2);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-control);
    transition: border-color .12s, background .12s, box-shadow .12s;
    appearance: none;
}
.ox-input::placeholder { color: var(--text-low); }
.ox-input:hover { border-color: rgba(18, 24, 30, .26); }
.ox-input:focus {
    outline: none;
    background: var(--ink-1);
    border-color: var(--accent-bright);
    box-shadow: var(--focus-ring);
}
/* validation: error state */
.ox-input.is-invalid,
.ox-field.is-invalid .ox-input {
    border-color: var(--stop);
    background: rgba(198, 40, 40, .04);
}
.ox-input.is-invalid:focus,
.ox-field.is-invalid .ox-input:focus {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--stop);
}

.ox-hint { margin-top: 8px; font-size: 12px; color: var(--text-low); line-height: 1.45; }
.ox-error { margin-top: 7px; font-size: 12.5px; color: var(--danger-text); font-weight: 500; }

/* password input wrapper (visibility toggle lives inside) */
.ox-input-wrap { position: relative; }
.ox-input-wrap .ox-input { padding-right: 44px; }
.ox-eye {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-low); cursor: pointer;
    border-radius: var(--radius-control);
}
.ox-eye:hover { color: var(--text-hi); background: var(--ink-3); }
.ox-eye i { font-size: 16px; line-height: 1; }

/* password strength meter (driven by Metronic's data-kt-password-meter JS) */
.ox-meter { display: flex; gap: 6px; margin: 12px 0 4px; }
.ox-meter > div {
    flex: 1 1 0;
    height: 5px;
    border-radius: 3px;
    background: var(--ink-3);
    transition: background .15s;
}
/* Metronic toggles `.active` on each bar via the password meter plugin */
.ox-meter > div.active { background: var(--go); }

/* ------------------------------------------------------------------ *
 * Buttons — mirror .ox-btn family from ox-console.css
 * ------------------------------------------------------------------ */
.ox-auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 18px;
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    font-family: var(--ox-sans);
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.ox-auth-btn-primary { background: var(--accent); color: #fff; }
.ox-auth-btn-primary:hover { background: #1a72d4; color: #fff; }
.ox-auth-btn-ghost {
    background: var(--ink-2); color: var(--text-hi);
    border-color: var(--hairline-strong);
}
.ox-auth-btn-ghost:hover { background: var(--ink-3); border-color: var(--accent-bright); color: var(--text-hi); }
.ox-auth-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ox-auth-btn-block { width: 100%; }

.ox-auth-actions { margin-top: 22px; }
.ox-auth-actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ox-auth-actions-row .ox-auth-btn { flex: 1 1 auto; }

/* django-simple-captcha — keep it tidy on the light surface */
.ox-captcha {
    margin: 4px 0 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.ox-captcha img { border-radius: 8px; border: 1px solid var(--hairline); }
.ox-captcha input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--text-hi);
    background: var(--ink-2);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-control);
}
.ox-captcha input[type="text"]:focus {
    outline: none; background: var(--ink-1);
    border-color: var(--accent-bright); box-shadow: var(--focus-ring);
}
.ox-captcha label { font-size: 12px; font-weight: 600; color: var(--text-hi); }
.ox-captcha a { color: var(--accent); font-size: 12px; }

/* ------------------------------------------------------------------ *
 * Alerts / Django messages (light)
 * ------------------------------------------------------------------ */
.ox-auth .alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 18px;
    border-radius: var(--radius-control);
    border: 1px solid var(--hairline-strong);
    font-size: 13px; line-height: 1.45;
    background: var(--ink-2); color: var(--text-mid);
}
.ox-auth .alert .svg-icon { flex: none; }
.ox-auth .alert .svg-icon svg { width: 20px; height: 20px; }
.ox-auth .alert-danger { background: rgba(198, 40, 40, .06); border-color: rgba(198, 40, 40, .28); color: #8e1f1f; }
.ox-auth .alert-danger .svg-icon { color: var(--stop); }
.ox-auth .alert-warning { background: rgba(156, 99, 0, .07); border-color: rgba(156, 99, 0, .26); color: #6f4a00; }
.ox-auth .alert-warning .svg-icon { color: var(--warn); }
.ox-auth .alert-primary { background: rgba(21, 101, 192, .06); border-color: rgba(21, 101, 192, .24); color: #0f4c8f; }
.ox-auth .alert-primary .svg-icon { color: var(--accent); }
.ox-auth .alert .btn-icon {
    margin-left: auto; border: none; background: transparent; cursor: pointer;
    color: inherit; opacity: .55; padding: 0; line-height: 1;
}
.ox-auth .alert .btn-icon:hover { opacity: 1; }
.ox-auth .alert .btn-icon svg { width: 16px; height: 16px; }

/* signup's hand-rolled error block — re-skin to match */
.ox-auth .error-message {
    background: rgba(198, 40, 40, .06);
    border: 1px solid rgba(198, 40, 40, .28);
    color: #8e1f1f;
    border-radius: var(--radius-control);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
}
.ox-auth .error-message strong { display: block; margin-bottom: 6px; color: var(--text-hi); }
.ox-auth .error-message ul { list-style: none; margin: 0; padding: 0; }
.ox-auth .error-message li { margin-bottom: 3px; }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.ox-auth-footer {
    flex: none;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 20px;
    font-size: 12.5px;
    color: var(--text-low);
}
.ox-auth-footer a { color: var(--text-mid); text-decoration: none; }
.ox-auth-footer a:hover { color: var(--accent); }
.ox-auth-footer .ox-mono { font-family: var(--ox-mono); font-size: 11px; }

/* ------------------------------------------------------------------ *
 * Responsive — collapse the hero, show the logo on the form
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
    .ox-auth-card { grid-template-columns: 1fr; max-width: 440px; }
    .ox-auth-hero { display: none; }
    .ox-auth-form-wrap { padding: 36px 26px; }
    .ox-auth-form-logo {
        display: flex; justify-content: center; margin-bottom: 26px;
    }
}

@media (max-width: 420px) {
    .ox-auth-main { padding: 24px 14px; }
    .ox-auth-form-wrap { padding: 30px 20px; }
    .ox-auth h1 { font-size: 21px; }
}