/* ===========================================================================
   BizPro Auth — sign-in surface
   Split layout: form panel on the left, product stage on the right.
   Design tokens mirror the "BizPro Auth" Claude Design project.

   TWIN FILE: Bpm.AuthServer/wwwroot/css/auth.css holds the same design for the
   standalone auth host. The two apps deploy separately (core.bizpro.mn vs
   auth.bizpro.mn) and share no static pipeline, so the file is duplicated —
   change both together or the two sign-in screens will drift apart.

   This copy also carries the Metronic/ABP overrides at the bottom, which the
   AuthServer does not need because it loads no Metronic bundles.
   ======================================================================== */

:root {
    --bp-accent: #ff1a1a;
    --bp-accent-hover: #e00000;
    --bp-accent-ring: rgba(255, 26, 26, .12);
    --bp-accent-tint: rgba(255, 26, 26, .10);

    --bp-page: #f7f6f4;
    --bp-panel: #fbfaf9;
    --bp-line: #e8e5e1;
    --bp-line-strong: #ddd9d4;
    --bp-line-hover: #b9b4ad;

    --bp-ink: #17161a;
    --bp-ink-soft: #4c4842;
    --bp-muted: #6b6762;
    --bp-faint: #8d8881;

    --bp-stage: #0b0b0d;
    --bp-stage-ink: #f4f2f0;
    --bp-stage-muted: #a5a0a0;
    --bp-stage-faint: #6f6b6b;
    --bp-stage-line: rgba(255, 255, 255, .08);

    --bp-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --bp-display: Archivo, 'IBM Plex Sans', system-ui, sans-serif;
    --bp-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bp-page);
    color: var(--bp-ink);
    font-family: var(--bp-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--bp-accent);
    text-decoration: none;
}

a:hover { color: var(--bp-accent-hover); }

/* --- shell ------------------------------------------------------------- */

.bp-shell {
    display: grid;
    /* --bp-split is the form pane's width. Set by the resizer and restored from
       localStorage on load; the design's own proportion is the fallback. */
    grid-template-columns: minmax(360px, var(--bp-split, var(--bp-default-split, 44%))) 10px minmax(0, 1fr);
    min-height: 100vh;
}

/* --- hide / resize the marketing panel --------------------------------- */

.bp-shell.is-stage-hidden {
    grid-template-columns: 1fr;
}

.bp-shell.is-stage-hidden .bp-stage,
.bp-shell.is-stage-hidden .bp-resizer {
    display: none;
}

.bp-shell.is-stage-hidden .bp-panel {
    border-right: 0;
}

/* Centre the form once it has the whole width to itself. */
.bp-shell.is-stage-hidden .bp-panel__top,
.bp-shell.is-stage-hidden .bp-panel__body,
.bp-shell.is-stage-hidden .bp-panel__foot {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.bp-resizer {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    z-index: 5;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
}

.bp-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 46px;
    margin: -23px 0 0 -1.5px;
    border-radius: 999px;
    background: var(--bp-line-strong);
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.bp-resizer:hover::after,
.bp-resizer:focus-visible::after,
.bp-resizing .bp-resizer::after {
    opacity: 1;
    background: var(--bp-accent);
}

.bp-resizer:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: -2px;
}

/* While dragging, stop the pointer selecting text across the page. */
body.bp-resizing {
    user-select: none;
    cursor: col-resize;
}

body.bp-resizing iframe { pointer-events: none; }

.bp-stage__close {
    position: absolute;
    z-index: 6;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #8b8787;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bp-stage__close:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .24);
    color: var(--bp-stage-ink);
}

.bp-stage__close:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: 2px;
}

.bp-stage-reopen {
    display: none;
    position: fixed;
    z-index: 6;
    top: 50%;
    right: 0;
    width: 26px;
    height: 56px;
    margin-top: -28px;
    padding: 0;
    border: 1px solid var(--bp-line);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #fff;
    color: var(--bp-faint);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.bp-shell.is-stage-hidden .bp-stage-reopen { display: block; }

.bp-stage-reopen:hover {
    color: var(--bp-accent);
    border-color: var(--bp-line-hover);
}

.bp-stage-reopen:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: 2px;
}

/* --- left panel -------------------------------------------------------- */

.bp-panel {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 64px;
    background: var(--bp-panel);
    border-right: 1px solid var(--bp-line);
}

.bp-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Height-constrained rather than sized: the mark here can be a tenant's own
   logo, which comes in whatever proportions they uploaded. */
.bp-logo img {
    display: block;
    height: 30px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.bp-panel__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: var(--bp-form-max, 420px);
    margin: auto;
}

.bp-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12.5px;
    color: var(--bp-muted);
}

.bp-panel__foot-links {
    display: flex;
    gap: 16px;
}

.bp-panel__register {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.bp-panel__register a {
    font-weight: 600;
}

.bp-panel__foot-links a {
    color: var(--bp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--bp-line-strong);
}

.bp-panel__foot-links a:hover { color: var(--bp-ink); }

/* --- language picker --------------------------------------------------- */

.bp-lang {
    position: relative;
}

.bp-lang > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid #e2ded9;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    list-style: none;
    transition: border-color .15s ease;
}

.bp-lang > summary::-webkit-details-marker { display: none; }
.bp-lang > summary:hover { border-color: var(--bp-line-hover); }
.bp-lang > summary:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

.bp-lang__code {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-ink);
}

.bp-lang__caret {
    font-size: 9px;
    line-height: 1;
    color: #a19d97;
}

/* Real flag artwork, one SVG per country under Common/Images/flags. These used
   to be CSS gradients, which cannot express a Soyombo, a taegeuk or a canton of
   stars — Mongolia, Korea and the US all came out wrong. */
.bp-lang__flag {
    flex: none;
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #f4f2ef;
    object-fit: cover;
}

.bp-lang__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    width: 216px;
    padding: 6px;
    border: 1px solid #e0dcd7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bp-lang__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bp-ink);
}

.bp-lang__item:hover { background: #f4f2ef; color: var(--bp-ink); }
.bp-lang__item.is-current { background: #f4f2ef; }

.bp-lang__name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

.bp-lang__mark {
    flex: none;
    font-family: var(--bp-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: #a19d97;
}

.bp-lang__item.is-current .bp-lang__mark { color: var(--bp-accent); }

/* --- headings ---------------------------------------------------------- */

.bp-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-head h1 {
    margin: 0;
    font-family: var(--bp-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.bp-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--bp-muted);
}

/* --- tabs -------------------------------------------------------------- */

.bp-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f0eeeb;
    border-radius: 10px;
}

.bp-tabs a {
    flex: 1;
    padding: 9px 0;
    border-radius: 7px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-faint);
}

.bp-tabs a:hover { color: var(--bp-ink); }

.bp-tabs a.is-active {
    background: #fff;
    color: var(--bp-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* --- form -------------------------------------------------------------- */

.bp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bp-field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bp-ink-soft);
}

.bp-field input[type="text"],
.bp-field input[type="email"],
.bp-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bp-line-strong);
    border-radius: 9px;
    background: #fff;
    font-family: var(--bp-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--bp-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bp-field input::placeholder { color: #a8a5a2; }

.bp-field input:focus {
    outline: none;
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-ring);
}

.bp-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--bp-faint);
}

.bp-error {
    font-size: 12px;
    color: #b91c1c;
}

.bp-alert {
    padding: 11px 13px;
    border: 1px solid #f3c3c3;
    border-radius: 9px;
    background: #fdf1f1;
    font-size: 13px;
    line-height: 1.5;
    color: #a51616;
}

/* --- organization lookup ----------------------------------------------- */

.bp-org {
    position: relative;
}

.bp-org input { padding-right: 40px !important; }

.bp-org__spinner {
    display: none;
    position: absolute;
    right: 13px;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -7px;
    border: 2px solid #e8e5e1;
    border-top-color: var(--bp-accent);
    border-radius: 50%;
    animation: bp-spin .7s linear infinite;
}

.bp-org__spinner.is-visible { display: block; }

@keyframes bp-spin { to { transform: rotate(360deg); } }

.bp-org__found,
.bp-org__missing {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12.5px;
}

.bp-org__found.is-visible,
.bp-org__missing.is-visible { display: flex; }

.bp-org__found {
    border: 1px solid #cfe9d8;
    background: #f2fbf5;
    color: #1c6b3d;
}

.bp-org__missing {
    border: 1px solid #f3c3c3;
    background: #fdf1f1;
    color: #a51616;
}

.bp-org__badge {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c6b3d;
    color: #fff;
    font-family: var(--bp-display);
    font-size: 10.5px;
    font-weight: 700;
}

.bp-org__name {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-org__clear {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #6d8f7c;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.bp-org__clear:hover { color: #1c6b3d; }

/* --- checkbox / meta row ----------------------------------------------- */

.bp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
    color: var(--bp-muted);
}

.bp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.bp-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--bp-accent);
}

.bp-meta a {
    font-size: 13px;
    font-weight: 500;
}

/* --- buttons ----------------------------------------------------------- */

.bp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--bp-accent);
    color: #fff;
    font-family: var(--bp-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.bp-btn:hover {
    background: var(--bp-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.bp-btn:active { transform: translateY(0); }
.bp-btn:focus-visible { outline: 2px solid var(--bp-ink); outline-offset: 2px; }

.bp-btn--ghost {
    background: #fff;
    border: 1px solid var(--bp-line-strong);
    color: #2c2a27;
    font-family: var(--bp-sans);
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 16px;
}

.bp-btn--ghost:hover {
    background: #faf9f8;
    border-color: var(--bp-line-hover);
    color: #2c2a27;
}

/* --- divider ----------------------------------------------------------- */

.bp-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
    font-family: var(--bp-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a19d97;
}

.bp-divider::before,
.bp-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e1dc;
}

/* --- social providers -------------------------------------------------- */

.bp-social {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.bp-social svg { flex: none; }

/* --- organization picker (multi-tenant sign-in) ------------------------ */

.bp-orglist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.bp-orglist__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--bp-line-strong);
    border-radius: 11px;
    background: #fff;
    text-align: left;
    font-family: var(--bp-sans);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.bp-orglist__item:hover {
    border-color: var(--bp-line-hover);
    background: #faf9f8;
}

.bp-orglist__item:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

.bp-orglist__badge {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-ink);
    color: #fff;
    font-family: var(--bp-display);
    font-size: 12px;
    font-weight: 700;
}

.bp-orglist__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-orglist__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-orglist__meta {
    font-size: 11.5px;
    color: var(--bp-faint);
}

.bp-orglist__go {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bp-accent);
}

.bp-count {
    font-family: var(--bp-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a19d97;
}

/* --- right stage ------------------------------------------------------- */

.bp-stage {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    padding: 56px 60px;
    background: var(--bp-stage);
    color: var(--bp-stage-ink);
}

.bp-stage__grid,
.bp-stage__glow {
    position: absolute;
    pointer-events: none;
}

.bp-stage__grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
}

.bp-stage__glow {
    top: -160px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 26, 26, .24), transparent 65%);
}

.bp-stage__head,
.bp-stage__mid { position: relative; }

.bp-stage__head {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bp-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bp-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bp-accent);
}

.bp-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-accent);
    animation: bp-pulse 2s ease-in-out infinite;
}

@keyframes bp-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

.bp-stage__title {
    margin: 0;
    max-width: 640px;
    font-family: var(--bp-display);
    font-weight: 800;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

.bp-stage__word {
    display: block;
    margin-top: 8px;
    color: var(--bp-accent);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

.bp-stage__word.is-out {
    opacity: 0;
    transform: translateY(14px);
}

.bp-stage__tagline {
    margin: 0;
    max-width: 540px;
    font-family: var(--bp-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--bp-stage-ink);
}

.bp-stage__mid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 660px;
}

/* --- flow strip -------------------------------------------------------- */

.bp-flow__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--bp-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bp-stage-faint);
}

.bp-flow__caption img {
    height: 13px;
    width: auto;
}

.bp-flow__track {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bp-flow__arrow {
    font-size: 11px;
    line-height: 1;
    color: #55555f;
}

.bp-flow__node {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: #1e1e24;
    font-size: 10.5px;
    font-weight: 600;
    color: #cfcbcb;
    white-space: nowrap;
}

.bp-flow__node.is-final {
    border-color: rgba(255, 26, 26, .34);
    border-radius: 999px;
    background: var(--bp-accent-tint);
    color: var(--bp-accent);
}

.bp-flow__pulse {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--bp-accent);
    box-shadow: 0 0 12px 3px rgba(255, 26, 26, .55);
    animation: bp-travel 4.5s linear infinite;
}

@keyframes bp-travel {
    0% { left: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* --- pillars ----------------------------------------------------------- */

.bp-pillars {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--bp-stage-line);
}

.bp-pillars__row {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--bp-stage-line);
}

.bp-pillars__no {
    flex: none;
    width: 22px;
    font-family: var(--bp-mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: #5c5858;
}

.bp-pillars__name {
    flex: none;
    font-family: var(--bp-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0;
}

.bp-pillars__note {
    flex: 1;
    text-align: right;
    font-size: 12.5px;
    color: #7e7a7a;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
    .bp-panel { padding: 40px 44px; }
    .bp-stage { padding: 44px 40px; }
    .bp-stage__title { font-size: 38px; }
    .bp-pillars__name { font-size: 18px; }
}

@media (max-width: 900px) {
    /* Below this width there is only one column, so the stored split and the
       resize/hide controls are all meaningless — the !important is aimed at the
       inline --bp-split the script sets on .bp-shell. */
    .bp-shell,
    .bp-shell.is-stage-hidden { grid-template-columns: 1fr !important; }

    /* The stage is decoration; on a phone it would push the form below the
       fold, so it goes away entirely rather than stacking. */
    .bp-stage,
    .bp-resizer,
    .bp-stage-reopen,
    .bp-shell.is-stage-hidden .bp-stage-reopen { display: none; }

    .bp-panel {
        min-height: 100vh;
        padding: 28px 22px 32px;
        border-right: 0;
    }

    .bp-panel__body,
    .bp-shell.is-stage-hidden .bp-panel__body {
        max-width: 460px;
        align-self: center;
    }

    .bp-head h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .bp-eyebrow__dot,
    .bp-flow__pulse,
    .bp-org__spinner,
    .bp-orgpick__spinner {
        animation: none;
    }

    .bp-stage__word,
    .bp-btn { transition: none; }
}

/* ===========================================================================
   Metronic / ABP overrides — MVC copy only

   This page still loads the Metronic bundles so ABP's own JavaScript UI
   (blockUI busy state, SweetAlert errors, jQuery-validate messages) keeps
   working. Those bundles bring global element styles, so the sign-in surface
   has to reassert its own.
   ======================================================================== */

body.bizpro-auth-page {
    font-family: var(--bp-sans);
    font-size: 14px;
    color: var(--bp-ink);
    background: var(--bp-page);
}

body.bizpro-auth-page a {
    color: var(--bp-accent);
    text-decoration: none;
}

body.bizpro-auth-page a:hover { color: var(--bp-accent-hover); }

body.bizpro-auth-page .bp-panel__foot-links a,
body.bizpro-auth-page .bp-tabs a {
    color: var(--bp-muted);
}

body.bizpro-auth-page .bp-tabs a.is-active { color: var(--bp-ink); }
body.bizpro-auth-page .bp-panel__foot-links a:hover { color: var(--bp-ink); }
body.bizpro-auth-page .bp-btn { color: #fff; }
body.bizpro-auth-page .bp-btn--ghost { color: #2c2a27; }

/* ABP configures jQuery-validate Bootstrap-style — errorElement "div",
   errorClass "invalid-feedback" — so the message is a sibling div, not the
   library's default <label class="error">. Both are covered in case the
   defaults are ever changed back. */
.bp-form .invalid-feedback,
.bp-form label.error,
.bp-form .field-validation-error {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #b91c1c;
}

.bp-form input.error,
.bp-form input.is-invalid {
    border-color: #e08585;
}

.bp-alert--ok {
    border-color: #cfe9d8;
    background: #f2fbf5;
    color: #1c6b3d;
}

/* --- organization picker (tenant-change component) ----------------------
   The design's organization row: always states which organization is selected
   and opens a searchable dropdown in place. Only this app has it — the
   AuthServer sign-in resolves the organization from a typed field instead — so
   this block is deliberately absent from the twin stylesheet. */

.bp-orgpick {
    position: relative;
    /* Above the form beneath it, so the open list is never clipped by a field. */
    z-index: 15;
}

.bp-orgpick__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--bp-line-strong);
    border-radius: 11px;
    background: #fff;
    text-align: left;
    font-family: var(--bp-sans);
    cursor: pointer;
    transition: border-color .15s ease;
}

.bp-orgpick__trigger:hover { border-color: var(--bp-line-hover); }

.bp-orgpick.is-open .bp-orgpick__trigger {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-ring);
}

.bp-orgpick.is-busy { opacity: .6; pointer-events: none; }

.bp-orgpick__badge {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bp-ink);
    color: #fff;
    font-family: var(--bp-display);
    font-size: 12px;
    font-weight: 700;
}

.bp-orgpick__badge.is-empty {
    background: #c9c5c0;
}

/* A tenant logo is any shape and usually not square, so it is contained inside
   the badge on white rather than cropped to fill it. */
.bp-orgpick__badge img,
.bp-orgpick__itembadge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.bp-orgpick__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-orgpick__label {
    font-family: var(--bp-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a19d97;
}

.bp-orgpick__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-orgpick__name.is-empty { color: var(--bp-faint); }

.bp-orgpick__action {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bp-accent);
}

.bp-orgpick__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid #e0dcd7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .28);
}

.bp-orgpick__menu[hidden] { display: none; }

.bp-orgpick__search {
    position: relative;
    margin-bottom: 8px;
}

.bp-orgpick__search input {
    width: 100%;
    padding: 10px 34px 10px 12px;
    border: 1px solid #e5e1dc;
    border-radius: 8px;
    background: #faf9f8;
    font-family: var(--bp-sans);
    font-size: 13px;
    color: var(--bp-ink);
}

.bp-orgpick__search input:focus {
    outline: none;
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-ring);
}

.bp-orgpick__spinner {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid #e8e5e1;
    border-top-color: var(--bp-accent);
    border-radius: 50%;
    animation: bp-spin .7s linear infinite;
}

.bp-orgpick__spinner.is-visible { display: block; }

.bp-orgpick__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 264px;
    overflow-y: auto;
}

.bp-orgpick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-family: var(--bp-sans);
    cursor: pointer;
}

.bp-orgpick__item:hover,
.bp-orgpick__item.is-active,
.bp-orgpick__item.is-current { background: #f4f2ef; }

.bp-orgpick__item.is-active { box-shadow: inset 0 0 0 1px var(--bp-line-strong); }

.bp-orgpick__itembadge {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bp-ink);
    color: #fff;
    font-family: var(--bp-display);
    font-size: 10.5px;
    font-weight: 700;
}

.bp-orgpick__itembadge.is-empty { background: #c9c5c0; }

.bp-orgpick__itemtext {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bp-orgpick__itemname {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-orgpick__itemmeta {
    font-family: var(--bp-mono);
    font-size: 10.5px;
    color: var(--bp-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-orgpick__mark {
    flex: none;
    font-family: var(--bp-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    color: var(--bp-accent);
}

.bp-orgpick__caption {
    padding: 10px 10px 4px;
    font-family: var(--bp-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a19d97;
}

.bp-orgpick__empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--bp-faint);
}

.bp-orgpick__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 9px 10px 3px;
    border-top: 1px solid #f0eeeb;
    font-size: 12px;
    color: var(--bp-faint);
}

/* Social provider buttons keep their Metronic <a> markup for Login.js, so the
   icon is sized here rather than in the bundle. */
.bp-social .social-login-icon i {
    font-size: 15px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Additional page components
   ------------------------------------------------------------------------ */

/* Paired fields (given/family name, etc.) that collapse on a phone. */
.bp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .bp-grid-2 { grid-template-columns: 1fr; }
}

.bp-hint--center { text-align: center; }

.bp-meta--center {
    justify-content: center;
    gap: 6px;
}

/* Bootstrap-driven tab strip wearing the design's segmented-control look.
   The nav-link / active classes belong to Bootstrap's tab JS. */
.bp-tabs--nav {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.bp-tabs--nav .nav-item { flex: 1; display: flex; }

.bp-tabs--nav .nav-link {
    flex: 1;
    padding: 9px 0;
    border: 0;
    border-radius: 7px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-faint);
    background: transparent;
}

.bp-tabs--nav .nav-link:hover { color: var(--bp-ink); }

.bp-tabs--nav .nav-link.active {
    background: #fff;
    color: var(--bp-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Read-only key/value summary — registration result, confirmations. */
.bp-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0;
    margin: 0;
    border: 1px solid var(--bp-line-strong);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    font-size: 13.5px;
}

.bp-summary dt,
.bp-summary dd {
    margin: 0;
    padding: 11px 13px;
    border-bottom: 1px solid var(--bp-line);
}

.bp-summary dt {
    font-weight: 500;
    color: var(--bp-muted);
    background: #fbfaf9;
}

.bp-summary dd {
    font-weight: 600;
    color: var(--bp-ink);
    overflow-wrap: anywhere;
}

.bp-summary dt:nth-last-of-type(1),
.bp-summary dd:nth-last-of-type(1) { border-bottom: 0; }

.bp-countdown {
    font-family: var(--bp-mono);
    font-size: 12px;
    color: #b91c1c;
}

/* Locked-session identity block. */
.bp-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--bp-line-strong);
    border-radius: 11px;
    background: #fff;
}

.bp-locked__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0eeeb;
}

.bp-locked__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-locked__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-ink);
}

.bp-locked__tenant {
    font-size: 12px;
    color: var(--bp-faint);
}

/* ---------------------------------------------------------------------------
   Wide mode — single document column, no marketing stage.

   Used by the legal pages, tenant registration and the payment/plan screens:
   content that is read or compared rather than a short credential form, and
   that a 420px column would strangle.
   ------------------------------------------------------------------------ */

.bp-shell--wide {
    grid-template-columns: 1fr;
}

.bp-shell--wide .bp-panel {
    border-right: 0;
    padding: 40px clamp(22px, 5vw, 64px);
}

.bp-shell--wide .bp-panel__top,
.bp-shell--wide .bp-panel__body,
.bp-shell--wide .bp-panel__foot {
    width: 100%;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.bp-shell--wide .bp-panel__body {
    margin-top: 28px;
    margin-bottom: 40px;
}

/* ---------------------------------------------------------------------------
   Metronic compatibility layer

   Pages sharing this shell whose markup has not been rewritten to bp-* classes
   — payment and plan screens, consent, invites, tenant registration, session
   lock — still emit Metronic components. Rather than leave them looking like a
   different product, their classes are mapped onto the design tokens here.
   Scoped to .bizpro-auth-page so nothing inside the main app is affected.

   Hand-written bp-* markup is excluded via :not(), so a page that has been
   converted is never styled twice.
   ------------------------------------------------------------------------ */

.bizpro-auth-page h1,
.bizpro-auth-page h2,
.bizpro-auth-page h3,
.bizpro-auth-page h4 {
    font-family: var(--bp-display);
    letter-spacing: -.02em;
    color: var(--bp-ink);
}

.bizpro-auth-page h3 { font-size: 26px; font-weight: 700; }
.bizpro-auth-page h4 { font-size: 19px; font-weight: 700; }

.bizpro-auth-page .form-control,
.bizpro-auth-page .form-select,
.bizpro-auth-page select.form-control {
    padding: 12px 14px;
    height: auto;
    min-height: 0;
    border: 1px solid var(--bp-line-strong);
    border-radius: 9px;
    background-color: #fff;
    font-family: var(--bp-sans);
    font-size: 14px;
    color: var(--bp-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bizpro-auth-page .form-control:focus,
.bizpro-auth-page .form-select:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-ring);
    background-color: #fff;
}

.bizpro-auth-page .form-control::placeholder { color: #a8a5a2; }

.bizpro-auth-page .form-label,
.bizpro-auth-page label:not(.bp-check):not(.form-check) {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bp-ink-soft);
}

.bizpro-auth-page .btn:not(.bp-btn) {
    padding: 12px 18px;
    border-radius: 10px;
    font-family: var(--bp-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bizpro-auth-page .btn:not(.bp-btn):hover { transform: translateY(-1px); }
.bizpro-auth-page .btn:not(.bp-btn):active { transform: translateY(0); }

.bizpro-auth-page .btn-primary:not(.bp-btn) {
    border: 0;
    background: var(--bp-accent);
    color: #fff;
}

.bizpro-auth-page .btn-primary:not(.bp-btn):hover,
.bizpro-auth-page .btn-primary:not(.bp-btn):focus,
.bizpro-auth-page .btn-primary:not(.bp-btn):active {
    background: var(--bp-accent-hover);
    color: #fff;
}

.bizpro-auth-page .btn-secondary:not(.bp-btn),
.bizpro-auth-page .btn-light:not(.bp-btn),
.bizpro-auth-page .btn-light-primary:not(.bp-btn),
.bizpro-auth-page .btn-outline-primary:not(.bp-btn) {
    border: 1px solid var(--bp-line-strong);
    background: #fff;
    color: #2c2a27;
    font-family: var(--bp-sans);
    font-size: 13.5px;
    font-weight: 600;
}

.bizpro-auth-page .btn-light-primary:not(.bp-btn):hover,
.bizpro-auth-page .btn-light:not(.bp-btn):hover,
.bizpro-auth-page .btn-secondary:not(.bp-btn):hover,
.bizpro-auth-page .btn-outline-primary:not(.bp-btn):hover {
    border-color: var(--bp-line-hover);
    background: #faf9f8;
    color: #2c2a27;
}

.bizpro-auth-page .form-check-input:checked {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
}

.bizpro-auth-page .form-check-input:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-ring);
}

.bizpro-auth-page .form-check-label,
.bizpro-auth-page .text-muted {
    color: var(--bp-muted) !important;
}

.bizpro-auth-page .alert {
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.bizpro-auth-page .alert-danger,
.bizpro-auth-page .alert-warning {
    border: 1px solid #f3c3c3;
    background: #fdf1f1;
    color: #a51616;
}

.bizpro-auth-page .alert-success {
    border: 1px solid #cfe9d8;
    background: #f2fbf5;
    color: #1c6b3d;
}

.bizpro-auth-page .card {
    border: 1px solid var(--bp-line-strong);
    border-radius: 12px;
    box-shadow: none;
}

.bizpro-auth-page .text-primary,
.bizpro-auth-page .link-primary,
.bizpro-auth-page .text-hover-primary:hover {
    color: var(--bp-accent) !important;
}

/* Legacy per-page wrappers assumed a centred card with its own width; inside
   this shell the panel already provides both. */
.bizpro-auth-page .login-form {
    width: 100%;
    max-width: none;
}