/*
 * Shared furniture for the signed-out screens (login, OTP, magic link, forgot
 * password, driver login).
 *
 * Colours come from the tokens emitted by layouts/partials/auth-theme.blade.php,
 * which resolve the configured skin / custom UI palette. Nothing here hard-codes
 * a brand colour, and the dark-mode block only reassigns surfaces so the tenant's
 * primary colour survives the switch.
 */

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

.pg-auth {
    background: var(--auth-body-bg);
    color: var(--auth-text);
}

/*
 * The shell centres the card with `margin: auto` inside a 100vh flex column.
 * Once the card is taller than the viewport — a short laptop, a phone in
 * landscape — that pushes the top of the page above the scroll origin, so the
 * logo and heading become unreachable.
 *
 * Instead the card block grows to fill whatever is left above the footer and
 * centres its own contents with `safe center`, which falls back to flex-start
 * rather than overflowing. The footer stays last in the column, so it sits at
 * the bottom of the viewport on short pages and after the content on tall ones.
 */
.pg-auth .nk-wrap-nosidebar .nk-content {
    justify-content: flex-start;
}

.pg-auth .nk-block-middle {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    /* Horizontal auto margins still centre the card; only the vertical ones
       (which caused the clipping) are dropped. The breathing room lives here
       because the shell pins .nk-content to `padding: 0 !important`. */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.pg-auth .nk-auth-footer-full {
    flex: 0 0 auto;
    margin-top: auto;
}

.pg-auth .nk-auth-body {
    color: var(--auth-text);
    width: 100%;
    max-width: 26rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-left: auto;
    margin-right: auto;
}

.pg-auth .brand-logo img,
.pg-auth .logo-link img {
    /* The tenant logo is supplied artwork — never let a theme filter tint it. */
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------- card --- */

.pg-auth .card,
.pg-auth .card-bordered {
    border-color: var(--auth-border);
    background-color: var(--auth-surface);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(31, 45, 61, 0.06), 0 8px 24px rgba(31, 45, 61, 0.06);
}

.pg-auth .card-inner-lg {
    padding: 2rem;
}

/* --------------------------------------------------------------- typo ----- */

.pg-auth .nk-block-title,
.pg-auth .form-label,
.pg-auth h1,
.pg-auth h2,
.pg-auth h5 {
    color: var(--auth-heading);
}

.pg-auth .auth-subtitle {
    color: var(--auth-text);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.pg-auth .auth-hint {
    color: var(--auth-text-soft);
    font-size: 0.8125rem;
}

.pg-auth a.text-soft,
.pg-auth .text-soft,
.pg-auth .text-muted {
    color: var(--auth-text-soft) !important;
}

.pg-auth a:not(.btn):not(.dropdown-toggle):not(.nav-link),
.pg-auth .link-primary {
    color: var(--auth-link) !important;
    text-decoration: none;
}

.pg-auth a:not(.btn):not(.dropdown-toggle):not(.nav-link):hover,
.pg-auth a:not(.btn):not(.dropdown-toggle):not(.nav-link):focus,
.pg-auth .link-primary:hover,
.pg-auth .link-primary:focus {
    color: var(--auth-primary-hover) !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------------- forms --- */

.pg-auth .form-control {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-border);
    color: var(--auth-heading);
}

.pg-auth .form-control::placeholder {
    color: var(--auth-text-soft);
}

.pg-auth .form-control:focus {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-primary);
    color: var(--auth-heading);
    box-shadow: 0 0 0 3px var(--auth-focus-ring);
}

.pg-auth .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(225, 73, 84, 0.18);
}

.pg-auth .form-icon {
    color: var(--auth-text-soft);
}

.pg-auth .form-icon:hover {
    color: var(--auth-primary);
}

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

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

.pg-auth .btn-primary:hover,
.pg-auth .btn-primary:focus,
.pg-auth .btn-primary:active {
    background-color: var(--auth-primary-hover);
    border-color: var(--auth-primary-hover);
}

.pg-auth .btn-outline-primary {
    color: var(--auth-primary);
    border-color: var(--auth-border-strong);
    background-color: transparent;
}

.pg-auth .btn-outline-primary:hover,
.pg-auth .btn-outline-primary:focus {
    color: var(--auth-primary);
    background-color: var(--auth-primary-soft);
    border-color: var(--auth-primary);
}

.pg-auth .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--auth-focus-ring);
}

.pg-auth .btn[disabled],
.pg-auth .btn:disabled {
    opacity: 0.55;
}

/* ------------------------------------------------------------- messages --- */

.pg-auth .alert {
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem;
}

.pg-auth .alert-success {
    background-color: var(--auth-success-bg);
    border-color: var(--auth-success-border);
    color: var(--auth-success-text);
}

.pg-auth .alert-warning {
    background-color: var(--auth-warning-bg);
    border-color: var(--auth-warning-border);
    color: var(--auth-warning-text);
}

.pg-auth .invalid-feedback {
    font-size: 0.8125rem;
}

/* ------------------------------------------------- split panel (admin) ----- */

/* Wider shell for the two-column sign-in; .nk-auth-body caps at 420px. */
.pg-auth .nk-auth-body.auth-shell--wide {
    max-width: 54rem;
}

.pg-auth .auth-split {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}

@media (min-width: 768px) {
    .pg-auth .auth-split {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
}

.pg-auth .auth-split__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.25rem 2rem;
    color: #fff;
    background-image: linear-gradient(155deg, var(--auth-primary), var(--auth-primary-hover));
}

/* The logo is supplied artwork in unknown colours — sit it on a light chip so
   it stays legible against whatever primary the tenant has configured. */
.pg-auth .auth-split__logo {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    background: #fff;
}

.pg-auth .auth-split__logo img {
    max-height: 40px;
    width: auto;
}

.pg-auth .auth-split__title {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.pg-auth .auth-split__lede {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.pg-auth .auth-split__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pg-auth .auth-split__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.pg-auth .auth-split__points .icon {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0.9;
}

.pg-auth .auth-split__form {
    padding: 2rem;
}

@media (max-width: 767.98px) {
    .pg-auth .auth-split__brand {
        padding: 1.5rem 1.375rem;
        gap: 1rem;
    }

    /* On a phone the panel is a header, not a pitch — keep it to the brand. */
    .pg-auth .auth-split__points {
        display: none;
    }

    .pg-auth .auth-split__title {
        font-size: 1.125rem;
    }

    .pg-auth .auth-split__form {
        padding: 1.375rem;
    }
}

/* ------------------------------------------------- audience switch (login) - */

.pg-auth .login-audience .btn {
    font-weight: 600;
}

.pg-auth .login-audience-btn {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    column-gap: 0.5rem;
}

.pg-auth .login-audience-btn__icon,
.pg-auth .login-audience-btn__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
}

.pg-auth .login-audience-btn__label {
    text-align: center;
    line-height: 1.3;
    /* .btn forces nowrap, which ran the longer labels under the state icon. */
    white-space: normal;
}

/* -------------------------------------------------------------- OTP page -- */

.pg-auth .otp-destination {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--auth-primary-soft);
    color: var(--auth-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    word-break: break-all;
}

.pg-auth .otp-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.6em;
    /* The letter-spacing trails the last glyph, which visually shifts the value
       left; pull it back so the digits sit centred in the field. */
    text-indent: 0.6em;
    font-variant-numeric: tabular-nums;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.pg-auth .otp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.pg-auth .otp-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--auth-text-soft);
    font-variant-numeric: tabular-nums;
}

.pg-auth .otp-countdown--expired {
    color: var(--auth-danger-text);
    font-weight: 600;
}

.pg-auth .otp-resend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* -------------------------------------------------------------- footer ---- */

.pg-auth .nk-auth-footer-full {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pg-auth .nk-auth-footer-full .nav-link {
    color: var(--auth-text-soft);
}

/* ---------------------------------------------------------- small screens - */

@media (max-width: 575.98px) {
    .pg-auth .nk-block-middle {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .pg-auth .nk-auth-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pg-auth .card-inner-lg {
        padding: 1.375rem;
    }

    .pg-auth .brand-logo img {
        max-height: 56px;
    }

    .pg-auth .form-control-lg {
        font-size: 1rem;
    }

    .pg-auth .otp-input {
        font-size: 1.25rem;
        letter-spacing: 0.4em;
        text-indent: 0.4em;
    }

    .pg-auth .otp-meta {
        justify-content: center;
    }
}

/* ------------------------------------------------------------ dark mode --- */

/*
 * Only surfaces flip: the tenant's primary colour is inherited from the tokens
 * so a green install stays green in dark mode.
 */
.pg-auth.dark-mode {
    --auth-body-bg: #101924;
    --auth-surface: #1a2431;
    --auth-input-bg: #141c26;
    --auth-border: #2e3f54;
    --auth-border-strong: #3d5169;
    --auth-text: #b6c6e3;
    --auth-text-soft: #8094ae;
    --auth-heading: #ffffff;
    --auth-success-bg: rgba(28, 187, 140, 0.14);
    --auth-success-border: rgba(28, 187, 140, 0.32);
    --auth-success-text: #6fe0bd;
    --auth-warning-bg: rgba(249, 176, 64, 0.14);
    --auth-warning-border: rgba(249, 176, 64, 0.32);
    --auth-warning-text: #f9c97f;
    --auth-danger-text: #ff8b93;
}

.pg-auth.dark-mode .card,
.pg-auth.dark-mode .card-bordered {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/*
 * Tenant logos are usually dark artwork on transparency, which vanishes against
 * a dark page. Recolouring supplied branding is not ours to do, so sit it on the
 * same light chip the split panel uses.
 */
.pg-auth.dark-mode .brand-logo .logo-link {
    display: inline-block;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    background: #fff;
}