/* Quantom Schematics — auth page styles
   Split-screen layout: brand panel (left) + form panel (right). */

:root {
    /* New violet palette (May 2026) — anchored on the user-supplied
       eight-shade ramp #7b5dff (deepest) → #f0edff (lightest). */
    --qs-primary:      #7b5dff;
    --qs-primary-dark: #5a3fd6;
    --qs-primary-soft: #f0edff;
    --qs-bg: #faf9ff;
    --qs-text: #4d4866;
    --qs-muted: #8e889e;
    --qs-success: #1aae6f;
    --qs-danger: #e63b3b;
    --qs-warning: #f59e0b;
    --qs-card-shadow: 0 8px 32px rgba(123, 93, 255, 0.16);
}

html, body {
    height: 100%;
}

body.auth-body {
    background: var(--qs-bg);
    font-family: 'Segoe UI', 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--qs-text);
    margin: 0;
    overflow-x: hidden;
}

/* ── Simple single-column auth shell (May 2026) ─────────────────
   Centered popup-style card. Background gets a subtle violet wash
   so the card visually pops as a focused element on a coloured page.
   `place-items: center` centres the column horizontally AND
   vertically without losing scroll on tall forms. */
.auth-simple-shell {
    /* Subtract the sticky navbar's height so the shell still
       feels "full screen" under the nav without forcing a phantom
       scroll on short forms (login). Tall forms (signup) will
       naturally push past this and become scrollable. */
    min-height: calc(100vh - 72px);
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(60vw 80vh at 50% 0%, #e7e0ff 0%, transparent 65%),
        radial-gradient(40vw 60vh at 50% 100%, #f0edff 0%, transparent 70%),
        var(--qs-bg);
}
/* Inner column: back link → card → footer, all locked to the same
   max-width so they line up. */
.auth-simple-shell > * {
    width: 100%;
    max-width: 420px;
}
.auth-simple-back {
    margin-bottom: 0.5rem;
    color: var(--qs-muted);
    text-decoration: none;
    font-size: 0.86rem;
}
.auth-simple-back:hover { color: var(--qs-primary); }
.auth-simple-card {
    background: #ffffff;
    border: 1px solid var(--qs-primary-100);
    border-radius: 16px;
    padding: 1.4rem 1.6rem 1.2rem;
    /* Stronger shadow so the card clearly reads as a popup floating
       over the background — fixes the "page looks full screen"
       feedback by giving the card visual weight. */
    box-shadow:
        0 12px 36px rgba(123, 93, 255, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.05);
}
.auth-simple-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0edff;
}
.auth-simple-logo {
    width: 44px; height: 44px;
    object-fit: contain;
    /* Shift bundled vibrant-violet PNG onto the new theme violet. */
    filter: hue-rotate(-12deg) saturate(0.9);
}
.auth-simple-name {
    font-weight: 800;
    font-size: 1.35rem;            /* much larger — was 1rem */
    color: var(--qs-primary-dark, #5a3fd6);
    line-height: 1.15;
    letter-spacing: 0.2px;
}
.auth-simple-version {
    font-size: 0.78rem;
    color: var(--qs-muted);
    margin-top: 2px;
}
.auth-simple-footer {
    width: 100%;
    max-width: 440px;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--qs-muted);
    text-align: center;
}

/* Auth pages use the standard site navbar exactly as the home page
   renders it — no width overrides here. The "Register" button has
   been slimmed down via .btn-qs-register-sm (declared further below)
   instead of cropping the whole navbar. */

/* ── Live green/red border validation feedback ─────────────────
   Browsers expose :valid / :invalid on every <input> with HTML5
   constraints (required, minlength, maxlength, pattern, type=email).
   We use them to colour the input's border + glow as the user
   types — soft red while the value is wrong, soft green once it
   passes. The :placeholder-shown guard prevents an empty input
   from immediately turning red the moment the page loads.

   Scoped to auth forms (.auth-pill-form + .qs-field inputs) so
   the same selectors don't accidentally style search boxes etc. */
.auth-pill-form .form-control:placeholder-shown,
.qs-field .form-control:placeholder-shown {
    /* Untouched / empty input — keep the default themed border, no
       red/green hint until the user has typed something. */
}
.auth-pill-form .form-control:not(:placeholder-shown):invalid,
.qs-field .form-control:not(:placeholder-shown):invalid {
    border-color: #f7a3a3 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 0.18rem rgba(230, 59, 59, 0.12) !important;
}
.auth-pill-form .form-control:not(:placeholder-shown):valid,
.qs-field .form-control:not(:placeholder-shown):valid {
    border-color: #8ed5ae !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 0.18rem rgba(26, 174, 111, 0.12) !important;
}
/* Floating labels follow the same colour so the whole field reads
   together as "correct" / "needs fixing". */
.auth-pill-form .form-floating > .form-control:not(:placeholder-shown):invalid ~ label,
.qs-field .form-floating > .form-control:not(:placeholder-shown):invalid ~ label {
    color: #b8242a;
}
.auth-pill-form .form-floating > .form-control:not(:placeholder-shown):valid ~ label,
.qs-field .form-floating > .form-control:not(:placeholder-shown):valid ~ label {
    color: #117a4a;
}
/* Focus state still wins over valid/invalid so the user gets a
   clear active-field indicator. */
.auth-pill-form .form-control:not(:placeholder-shown):focus,
.qs-field .form-control:not(:placeholder-shown):focus {
    border-color: var(--qs-primary) !important;
    box-shadow: 0 0 0 0.22rem rgba(123, 93, 255, 0.18) !important;
}

/* ── Pill-styled form fields (login form) ───────────────────────
   The login form is wrapped in `.auth-pill-form` so its inputs +
   Remember-me checkbox + submit button all read as a coherent stack
   of violet themed pills — visually matching the .btn-qs-register
   pill in the navbar above. Fields get a soft violet fill, violet
   border, rounded corners and a strong violet focus halo. */
.auth-pill-form .form-floating > .form-control {
    background-color: var(--qs-primary-soft);
    border: 1.5px solid var(--qs-primary-100, #d3c9ff);
    border-radius: 12px;
    color: var(--qs-primary-dark, #5a3fd6);
    font-weight: 600;
}
.auth-pill-form .form-floating > .form-control::placeholder {
    color: transparent;
}
.auth-pill-form .form-floating > label {
    color: var(--qs-primary-dark, #5a3fd6);
    font-weight: 600;
}
.auth-pill-form .form-floating > .form-control:focus {
    background-color: #ffffff;
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 0.22rem rgba(123, 93, 255, 0.22);
    color: var(--qs-text);
}
.auth-pill-form .form-floating > .form-control:not(:placeholder-shown) {
    background-color: #ffffff;
    color: var(--qs-text);
}

/* Remember-me + Forgot-password row — sits between password and
   submit. Remember-me is a pill chip with a custom violet check. */
.auth-pill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qs-primary-soft);
    border: 1.5px solid var(--qs-primary-100, #d3c9ff);
    color: var(--qs-primary-dark, #5a3fd6);
    font-weight: 600;
    font-size: 0.86rem;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.auth-remember:hover {
    background: #e7e0ff;
    border-color: var(--qs-primary);
}
.auth-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.6px solid var(--qs-primary);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.12s, border-color 0.12s;
}
.auth-remember input[type="checkbox"]:checked {
    background: linear-gradient(120deg, var(--qs-primary), var(--qs-primary-dark));
    border-color: var(--qs-primary-dark);
}
.auth-remember input[type="checkbox"]:checked::after {
    content: "";
    width: 4px; height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.auth-remember input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--qs-primary);
    outline-offset: 1px;
}

/* The submit button in the pill form picks up a slightly tighter
   look so it visually rhymes with the Register pill in the navbar. */
.auth-pill-form .btn-qs-primary {
    border-radius: 12px;
    letter-spacing: 0.3px;
}

/* ── Side-panel mode (login + signup) ───────────────────────────
   When the page sets body.with-side-panel, the centred card grows
   into a 2-column layout: a violet brand panel on the left with a
   welcome heading + circuit illustration, and the form on the right.
   The shell, back link and footer all widen together so the column
   stays vertically aligned. */
body.with-side-panel .auth-simple-shell > * {
    max-width: 920px;
}
body.with-side-panel .auth-simple-card {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 360px 1fr;
}
.auth-card-side {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: 2.4rem 2rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.14), transparent 45%),
        radial-gradient(circle at 82% 82%, rgba(255,255,255,0.10), transparent 50%),
        linear-gradient(135deg, #9881ff 0%, #7b5dff 55%, #5a3fd6 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 540px;
}
.auth-card-side::before {
    /* Subtle circuit-grid texture so the panel feels schematic-y. */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    opacity: 0.7;
}
.auth-card-side > * { position: relative; z-index: 1; }
.auth-card-side .side-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 1rem;
    width: max-content;
}
.auth-card-side h2 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 0.6rem;
    color: #ffffff;
}
.auth-card-side p.side-sub {
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0 0 1.6rem;
    color: rgba(255,255,255,0.92);
}
.auth-card-side .side-illustration {
    margin: 0.4rem 0 1.4rem;
    display: grid; place-items: center;
}
.auth-card-side .side-illustration svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}
.auth-card-side ul.side-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.auth-card-side ul.side-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.94);
    line-height: 1.4;
}
.auth-card-side ul.side-bullets i {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 7px;
    font-size: 0.78rem;
    flex-shrink: 0;
    margin-top: 1px;
}

body.with-side-panel .auth-card-main {
    padding: 1.4rem 1.6rem 1.2rem;
}

/* On narrow screens the side panel collapses on top of the form
   instead of beside it, and the welcome copy gets a slightly
   shorter padding so the form is reachable without scrolling far. */
@media (max-width: 820px) {
    body.with-side-panel .auth-simple-card {
        grid-template-columns: 1fr;
    }
    .auth-card-side {
        padding: 1.6rem 1.4rem;
        min-height: auto;
    }
    .auth-card-side h2 {
        font-size: 1.55rem;
    }
    .auth-card-side .side-illustration {
        display: none; /* keep mobile compact */
    }
    .auth-card-side ul.side-bullets {
        display: none;
    }
}

/* ── Floating social-action stack (also on auth pages) ──────── */
.qs-fab-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1019;
}
.qs-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff !important;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.qs-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.10);
    filter: brightness(1.06);
}
.qs-fab:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}
.qs-fab-youtube  { background: #ff0033; }
.qs-fab-facebook { background: #1877f2; }
.qs-fab-whatsapp { background: #25d366; }

/* Old split-screen — kept for any legacy template that still uses
   .auth-shell, but the new simple layout above is what login.html
   and signup pages render through. */
.auth-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Brand panel (left) ---------- */
.auth-brand {
    flex: 1;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 50%),
        linear-gradient(135deg, #9881ff 0%, #7b5dff 55%, #5a3fd6 100%);
    color: #fff;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-brand::before {
    /* Subtle circuit-board decoration */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.auth-brand-content {
    position: relative;
    z-index: 1;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.4px;
    text-decoration: none;
    color: #fff;
}

.auth-logo .auth-logo-mark {
    height: 48px;
    width: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 8px;
    display: block;
}

.auth-logo .auth-logo-mark img,
.auth-mobile-logo .badge-mark img {
    height: 100%;
    width: auto;
    display: block;
}

.auth-mobile-logo .badge-mark {
    background: #fff !important;
    padding: 8px 12px !important;
    width: auto !important;
    height: 56px !important;
    box-shadow: var(--qs-shadow-sm);
}

.auth-hero {
    margin-top: 64px;
}

.auth-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}

.auth-hero p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 460px;
}

.auth-features {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
}

.auth-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.96rem;
    color: rgba(255, 255, 255, 0.92);
}

.auth-features i {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.auth-footer {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Decorative SVG blobs */
.auth-blob {
    position: absolute;
    pointer-events: none;
    opacity: 0.18;
    z-index: 0;
}

/* ---------- Form panel (right) ---------- */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
}

.auth-card .auth-mobile-logo {
    display: none;
    text-align: center;
    margin-bottom: 24px;
}

.auth-card h2 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #2f3349;
    margin-bottom: 6px;
}

.auth-card .lead {
    color: var(--qs-muted);
    font-size: 0.96rem;
    margin-bottom: 28px;
}

/* Floating-label inputs — tightened so multi-field forms (signup)
   don't push the card past the viewport height. */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 9px;
    border: 1px solid #d8d6de;
    height: 50px;                 /* was 56 */
    padding: 0.9rem 0.85rem;       /* was 1 / 0.95 */
    color: var(--qs-text);
}

.form-floating > textarea.form-control {
    height: 86px;                  /* was 96 */
    padding-top: 1.3rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--qs-primary);
    /* Focus halo in the new violet — was the old vibrant #9540ed shade. */
    box-shadow: 0 0 0 0.18rem rgba(123, 93, 255, 0.18);
}

.form-floating > label {
    color: var(--qs-muted);
    padding: 0.9rem 0.85rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--qs-primary);
    transform: scale(0.82) translateY(-0.55rem) translateX(0.16rem);
}

/* Gradient primary button */
.btn-qs-primary {
    background: linear-gradient(120deg, var(--qs-primary), var(--qs-primary-dark));
    border: 0;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.3px;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(149, 64, 237, 0.34);
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}

.btn-qs-primary:hover,
.btn-qs-primary:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(149, 64, 237, 0.46);
    filter: brightness(1.05);
}

.btn-qs-primary:disabled {
    background: linear-gradient(120deg, #d8bdf9, #c599f5);
    box-shadow: none;
    cursor: not-allowed;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--qs-muted);
    font-size: 0.85rem;
    margin: 24px 0 18px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #ebe9f1;
}

.auth-helper-link {
    color: var(--qs-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-helper-link:hover {
    color: var(--qs-primary-dark);
    text-decoration: underline;
}

.auth-alert {
    background: rgba(230, 59, 59, 0.08);
    border: 1px solid rgba(230, 59, 59, 0.22);
    border-radius: 10px;
    padding: 12px 14px;
    color: #b8242a;
    font-size: 0.92rem;
    margin-bottom: 18px;
}

.auth-alert.success {
    background: rgba(26, 174, 111, 0.08);
    border-color: rgba(26, 174, 111, 0.22);
    color: #117a4a;
}

.auth-alert.info {
    background: rgba(149, 64, 237, 0.07);
    border-color: rgba(149, 64, 237, 0.20);
    color: var(--qs-primary-dark);
}

/* Two-column form pairs */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .auth-brand {
        display: none;
    }
    .auth-form-panel {
        padding: 28px 22px 60px;
    }
    .auth-card .auth-mobile-logo {
        display: block;
    }
    .auth-card .auth-mobile-logo .badge-mark {
        display: inline-grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--qs-primary), var(--qs-primary-dark));
        color: #fff;
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    .auth-card h2 {
        font-size: 1.45rem;
        text-align: center;
    }
    .auth-card .lead {
        text-align: center;
    }
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}