/* ============================================================
   MiseOps360 — the auth shell
   ------------------------------------------------------------
   One composition, used by all nine auth screens: a teal-to-navy
   page with a single white panel floating on it, split into a
   photograph on the left and the form on the right.

   Replaces the previous full-bleed two-column shell, whose brand
   panel put the navy wordmark on a navy gradient (invisible) and
   capped the logo at 36px tall.

   Every brand colour comes from brand-tokens.css. Loaded BEFORE
   the page stylesheet on every auth view.
   ============================================================ */

@import url("brand-tokens.css");

/* ── Page ────────────────────────────────────────────────── */

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 18px;
    background: var(--brand-page);
    background-attachment: fixed;
}

/* ── The panel ───────────────────────────────────────────── */

.auth-shell {
    width: 100%;
    max-width: 1090px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: var(--brand-panel-shadow);
}

@media (min-width: 992px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* The register form is taller than the sign-in form, so its panel is
   allowed to grow rather than forcing the photograph to stretch. */
.auth-shell--tall { max-width: 1120px; }

/* ── Brand / photograph column ───────────────────────────── */
/* Not hidden on small screens the way the vendor heroes were — it
   collapses to a banner, so a phone still gets a branded page. */

.auth-brand {
    position: relative;
    overflow: hidden;
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    min-height: 190px;
}

@media (min-width: 992px) {
    .auth-brand { min-height: 600px; padding: 38px 36px; }
    .auth-shell--tall .auth-brand { min-height: 690px; }
}

.auth-brand__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;   /* keeps the subject in frame on a portrait crop */
}

.auth-brand__scrim {
    position: absolute;
    inset: 0;
    background: var(--brand-photo-scrim);
    pointer-events: none;
}

.auth-brand__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* The wordmark is white letters inside a navy outline, so it cannot be
   flattened into a knockout — the letters merge with their own outline.
   It keeps its own light ground instead, which also means it stays
   legible whatever the exposure of the photograph behind it. */
.auth-brand__logo {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 10px 14px;
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(3, 10, 26, .28);
    text-decoration: none;
}

.auth-brand__logo img {
    display: block;
    width: 214px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .auth-brand__logo img { width: 168px; }
}

.auth-brand__name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand-navy);
}

.auth-brand__body { margin-top: auto; padding-top: 32px; }

.auth-brand__title {
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.03em;
    margin: 0 0 12px;
    color: #fff;
    text-wrap: balance;
}

.auth-brand__desc {
    font-size: .98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
    margin: 0;
    max-width: 38ch;
}

.auth-brand__points {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.auth-brand__points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .93rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .94);
}

.auth-brand__tick {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-brand__tick svg {
    width: 11px;
    height: 11px;
    stroke: #06281f;
    stroke-width: 3.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* On phones the panel is a banner: logo and headline only. */
@media (max-width: 991px) {
    .auth-brand__body  { padding-top: 22px; }
    .auth-brand__title { font-size: 1.15rem; margin-bottom: 0; }
    .auth-brand__desc,
    .auth-brand__points { display: none; }
}

/* ── Form column ─────────────────────────────────────────── */

.auth-main {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* short forms sit centred, long ones fill */
    background: #fff;
    padding: 30px 24px 26px;
}

@media (min-width: 992px) {
    .auth-main { padding: 38px 52px 34px; }
}

.auth-card {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    animation: auth-rise .45s ease-out;
}

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

.auth-card__heading h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--brand-navy);
    margin: 0 0 .4rem;
}

.auth-card__heading p {
    color: var(--brand-muted);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 1.7rem;
}

/* ── Language picker ─────────────────────────────────────── */
/* Central auth only: POST /locale/{locale} (route central.locale) is the
   switcher the landing pages already use. The tenant side has no
   equivalent route, so the picker is not rendered there. */

.auth-locale { position: relative; align-self: flex-end; margin-bottom: 18px; }

.auth-locale__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--brand-line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: .79rem;
    font-weight: 600;
    color: var(--brand-muted);
    cursor: pointer;
}

.auth-locale__btn:hover { border-color: var(--brand-teal); color: var(--brand-ink); }
.auth-locale__btn:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }

.auth-locale__btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}

.auth-locale__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.auth-locale__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 168px;
    max-height: 264px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(10, 26, 63, .16);
    padding: 5px;
    margin: 0;
    list-style: none;
}

.auth-locale__menu[hidden] { display: none; }

.auth-locale__menu button {
    display: block;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    color: var(--brand-ink);
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
}

.auth-locale__menu button:hover { background: var(--brand-navy-tint); }
.auth-locale__menu button[aria-current="true"] { color: var(--brand-teal-dark); font-weight: 700; }

/* ── Card furniture ──────────────────────────────────────── */

.auth-alt {
    margin-top: 1.4rem;
    text-align: center;
    font-size: .88rem;
    color: var(--brand-muted);
}

.auth-alt a {
    color: var(--brand-teal-dark);
    font-weight: 700;
    text-decoration: none;
}

.auth-alt a:hover { text-decoration: underline; }

.auth-legal {
    margin-top: 1rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--brand-muted);
}

.auth-legal a { color: var(--brand-muted); text-decoration: underline; }
.auth-legal a:hover { color: var(--brand-teal-dark); }

/* The copyright sits on the gradient below the panel, not inside the
   card — see partials/auth/foot.blade.php. */
.auth-page-foot {
    margin: 0;
    text-align: center;
    font-size: .79rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .66);
}

.auth-page-foot a {
    color: rgba(255, 255, 255, .88);
    font-weight: 600;
    text-decoration: none;
}

.auth-page-foot a:hover { text-decoration: underline; }

/* Controls that only make sense when the wizard is running.
   ------------------------------------------------------------
   These are gated on .wizard-ready, which register.js sets only once it
   has actually wired the steps up — NOT on .js, which the inline head
   script sets unconditionally.

   That distinction matters. Gated on .js, a page where the inline script
   ran but register.js did not (a stale cache, a blocked request) showed
   the step buttons while both fieldsets stayed visible: a "Continue"
   button in the middle of the form with "Back" and "Create workspace"
   below it. Gated on .wizard-ready there are only two states, and both
   are coherent: the stepped wizard, or the single long form it has
   always been underneath. */
.auth-jsonly { display: none; }
.wizard-ready .auth-jsonly { display: flex; }
.wizard-ready .auth-steps.auth-jsonly { display: block; }

/* ── Two-step wizard (central register) ──────────────────── */

/* Progress label. The bar itself reuses .steps-bar/.step-dot, which
   register.css already defines — the vendor markup rendered three dots
   that were all permanently .active, so the component was there but was
   not indicating anything. */
.auth-steps { margin-bottom: 1.6rem; }

.auth-steps__label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin-bottom: .55rem;
}

.auth-steps .steps-bar { margin-bottom: 0; }

/* No JavaScript: every fieldset stays visible and the form is the
   single long page it has always been. The stepped view is opt-in
   via the .js class set by the inline script in the <head>. */
.auth-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.wizard-ready .auth-fieldset[hidden] { display: none; }

/* The `display` here is deliberately scoped to .wizard-ready.
   Unscoped, this rule sat 30 lines below `.auth-jsonly { display: none }`
   at the same specificity and beat it, so <div class="auth-step-nav
   auth-jsonly"> - the Continue row - was visible whether or not the wizard
   had initialised. Combined with register.js not running, that produced a
   Continue button in the middle of a form whose second step was also still
   on screen. Everything except `display` stays unscoped, so the final
   submit row (which is .auth-step-nav without .auth-jsonly) keeps its
   spacing in the no-JS long form. */
.auth-step-nav {
    gap: .75rem;
    margin-top: 1.5rem;
}

.wizard-ready .auth-step-nav,
.auth-step-nav:not(.auth-jsonly) {
    display: flex;
}

.auth-step-nav .btn-back {
    flex: 0 0 auto;
    padding: .8rem 1.1rem;
    border-radius: var(--brand-radius);
    border: 1.5px solid var(--brand-line);
    background: #fff;
    color: var(--brand-navy);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.auth-step-nav .btn-back:hover {
    border-color: var(--brand-teal);
    background: var(--brand-teal-soft);
}

/* The wizard's own submit/continue buttons reuse .btn-login from
   the page stylesheet, so they inherit its size, spinner and
   loading state rather than defining a second button. */
.auth-step-nav .btn-login,
.auth-step-nav .btn-register { margin: 0; flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
    .auth-brand__orb,
    .auth-card { animation: none !important; }
}