/*
 * public/assets/css/auth.css
 *
 * Stage 36D — Authentication & Public UI Modernization.
 *
 * Dedicated stylesheet for the guest-facing shell (app/views/layouts/auth.php)
 * and its pages: Login, Registration, Forgot Password, Reset Password,
 * OTP / Email Verification, Registration Closed.
 *
 * Local custom properties below are aliases of the Theme Foundation's
 * Design Tokens (--mcq-color-*, --mcq-radius, --mcq-shadow-*), injected into
 * <head> by ThemeService::renderCssVariables() — same alias pattern already
 * used by public/assets/css/dashboard.css (Stage 36B) and main.css (Stage
 * 36C), kept local to this file so the auth layout does not depend on
 * dashboard.css/main.css being loaded. Falls back to the same defaults as
 * ThemeService::HARDCODED_FALLBACK when a token is missing — presentation
 * only, no business logic.
 */

:root {
    --mcq-auth-bg:      var(--mcq-color-background, #f8f9fa);
    --mcq-auth-surface: var(--mcq-color-surface, #ffffff);
    --mcq-auth-border:  var(--mcq-color-border, #dee2e6);
    --mcq-auth-text:    var(--mcq-color-text, #212529);
    --mcq-auth-primary: var(--mcq-color-primary, #0F3D5C);
    --mcq-auth-radius:  var(--mcq-radius, 0.75rem);
    --mcq-auth-shadow:  var(--mcq-shadow-card, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .03));
}

/* --- Page shell ----------------------------------------------------------- */
body.mcq-auth-page {
    background-color: var(--mcq-auth-bg);
    color: var(--mcq-auth-text);
    min-height: 100vh;
}

.mcq-auth-shell {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

/* --- Stage 53A: brand hero panel (desktop only) ----------------------------
   A professional, "examination portal" split layout: a fixed-width Theme-
   coloured panel on the left carrying the brand + value proposition, and
   the existing auth content (topbar/main/footer, unchanged markup) filling
   the remaining space. Colours are Theme tokens only — switching Themes
   re-colours this panel automatically. */
.mcq-auth-hero {
    flex: 0 0 42%;
    max-width: 560px;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--mcq-auth-primary) 0%, color-mix(in srgb, var(--mcq-auth-primary) 78%, black) 100%);
    color: #fff;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
.mcq-auth-hero__inner {
    max-width: 380px;
}
.mcq-auth-hero__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
}
.mcq-auth-hero__brand i {
    font-size: 1.6rem;
    color: color-mix(in srgb, #fff 80%, var(--mcq-color-info, #1B6FA8));
}
.mcq-auth-hero__title {
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.mcq-auth-hero__subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}
.mcq-auth-hero__points li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    color: rgba(255, 255, 255, 0.92);
}
.mcq-auth-hero__points i {
    color: var(--mcq-color-info, #1B6FA8);
}

.mcq-auth-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* --- Minimal brand strip (no nav links — none exist to show) ------------- */
.mcq-auth-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.5rem;
}
.mcq-auth-topbar .mcq-auth-brand-icon {
    color: var(--mcq-auth-primary);
    font-size: 1.5rem;
    line-height: 1;
}
.mcq-auth-topbar .mcq-auth-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mcq-auth-text);
    text-decoration: none;
}
.mcq-auth-topbar .mcq-auth-brand-name:hover {
    color: var(--mcq-auth-primary);
}

/* --- Main content area ----------------------------------------------------- */
.mcq-auth-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 2rem;
    width: 100%;
}

/* Stage 53A follow-up — the auth card sits in the remaining ~58% of the
   viewport once the hero panel claims its 42%/560px share. Bootstrap's
   `.container` only knows about *viewport* width breakpoints, not the
   width actually left over here, so at wider viewports it was requesting
   more room than this column had (960px/1140px/1320px) and got clipped by
   the browser edge — the card rendered squeezed against the right side
   with its inputs cut off. Capping it to the real available width fixes
   the clipping. */
.mcq-auth-main > .container {
    max-width: 100%;
    width: 100%;
}

/* The clipping fix above still left the card visually undersized: Bootstrap's
   col-md-5/col-lg-4 (and col-md-6/col-lg-5 on the wider auth pages) are
   percentages *of the content pane*, not of the viewport, so a "33%-wide"
   column in a pane that's only ~58% of the screen renders as a small
   floating card with large empty gaps on both sides. Overriding those
   columns to a fixed, generous max-width (instead of a percentage) makes
   the card properly fill the right-hand panel at any viewport size. */
.mcq-auth-main .col-md-5,
.mcq-auth-main .col-lg-4 {
    flex: 1 1 100%;
    max-width: 460px;
}
.mcq-auth-main .col-md-6,
.mcq-auth-main .col-lg-5 {
    flex: 1 1 100%;
    max-width: 520px;
}

/* --- Auth card -------------------------------------------------------------
   Applied on top of Bootstrap's .card so existing markup keeps working;
   this only refines border, radius, and shadow to the active Theme. */
.mcq-auth-card {
    width: 100%;
    background-color: var(--mcq-auth-surface);
    border: 1px solid var(--mcq-auth-border);
    border-radius: var(--mcq-auth-radius);
    box-shadow: var(--mcq-auth-shadow);
}

.mcq-auth-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--mcq-auth-primary) 10%, transparent);
    color: var(--mcq-auth-primary);
}

/* --- Form spacing / helper text (Stage 41G) ---------------------------------
   Small, additive refinements to the existing form-group rhythm — no new
   tokens, just consistent spacing between labels/inputs/helper text across
   Login, Register, Forgot, Reset and OTP Verification. */
.mcq-auth-shell .form-label {
    margin-bottom: 0.35rem;
}
.mcq-auth-shell .form-text {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
}

/* --- Footer ----------------------------------------------------------------- */
.mcq-auth-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 1rem 1rem 1.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}
.mcq-auth-footer a {
    color: inherit;
    text-decoration: underline;
}

/* --- Accessibility: focus states & contrast --------------------------------
   Same convention as public/assets/css/app.css's platform-wide focus rule,
   scoped to the auth shell so keyboard users get a clearly visible ring. */
.mcq-auth-shell a:focus-visible,
.mcq-auth-shell button:focus-visible,
.mcq-auth-shell input:focus-visible,
.mcq-auth-shell select:focus-visible,
.mcq-auth-shell textarea:focus-visible,
.mcq-auth-shell [tabindex]:focus-visible {
    outline: 2px solid var(--mcq-auth-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.mcq-auth-shell .form-control:focus {
    border-color: var(--mcq-auth-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mcq-auth-primary) 25%, transparent);
}

.mcq-auth-shell .btn-primary {
    background-color: var(--mcq-auth-primary);
    border-color: var(--mcq-auth-primary);
}

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .mcq-auth-topbar { padding: 0.85rem 1rem; }
    .mcq-auth-main   { padding: 0.5rem 0.75rem 1.5rem; }
    .mcq-auth-card .card-body,
    .mcq-auth-card { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mcq-auth-shell * {
        transition: none !important;
    }
}