/**
 * B2B Login — premium corporate auth
 */

/* Every colour in this file already funnels through these six locals, so pointing them at the
   global theme tokens themes the whole page in one edit. The previous literal is kept as each
   var() fallback: if partials/theme_tokens is ever not rendered, this file paints exactly what
   it painted before. See resources/views/partials/theme_tokens.blade.php. */
:root {
    --login-bg: var(--hs-page, #eef1f6);
    --login-surface: var(--hs-surface-raised, #ffffff);
    --login-text: var(--hs-text, #0f172a);
    --login-muted: var(--hs-text-muted, #64748b);
    --login-border: var(--hs-border, #e2e8f0);
    --login-border-focus: var(--hs-brand, var(--primary-color, #313f51));
    --login-radius: 12px;
    --login-radius-lg: 16px;
    --login-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), 0.04), 0 16px 48px rgba(var(--hs-shadow-rgb, 15, 23, 42), 0.08);
    --login-font: "Inter", "Segoe UI", system-ui, sans-serif;
}

html body.bg-full-screen-image.b2b-login-page {
    background: var(--login-bg) !important;
    background-image: none !important;
}

.b2b-login {
    min-height: 100vh;
    display: flex;
    font-family: var(--login-font);
    -webkit-font-smoothing: antialiased;
}

.b2b-login__brand {
    display: none;
    flex: 0 0 44%;
    max-width: 44%;
    position: relative;
    overflow: hidden;
    background: var(--hs-text, #111827);
}

@media (min-width: 992px) {
    .b2b-login__brand {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 40px 48px 48px;
    }
}

.b2b-login__brand-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(var(--hs-text-rgb, 15, 23, 42), 0.92) 0%, rgba(var(--hs-text-rgb, 15, 23, 42), 0.75) 40%, rgba(var(--hs-brand-rgb, 49, 63, 81), 0.85) 100%),
        linear-gradient(to top, rgba(var(--hs-text-rgb, 15, 23, 42), 0.95) 0%, transparent 50%);
    z-index: 1;
}

.b2b-login__brand-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.b2b-login__brand-top,
.b2b-login__brand-content {
    position: relative;
    z-index: 2;
}

.b2b-login__brand-logo {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.b2b-login__brand-badge {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hs-text-inverse, #fff);
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.12);
    border: 1px solid rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.2);
    border-radius: 999px;
}

.b2b-login__brand-content h2 {
    font-size: clamp(1.75rem, 2.5vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -0.025em;
    color: var(--hs-text-inverse, #fff);
}

.b2b-login__brand-content > p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 32px;
    color: rgba(var(--hs-text-inverse-rgb, 255, 255, 255), 0.82);
    max-width: 380px;
}

.b2b-login__brand-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.b2b-login__brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--hs-text-inverse-rgb, 255, 255, 255), 0.9);
}

.b2b-login__brand-features li i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: var(--hs-accent-ink, #6ee7b7);
}

.b2b-login__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 32px;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .b2b-login__main {
        padding: 32px 40px;
    }
}

.b2b-login__panel {
    width: 100%;
    max-width: 440px;
    background: var(--login-surface);
    border-radius: var(--login-radius-lg);
    box-shadow: var(--login-shadow);
    border: 1px solid var(--login-border);
    overflow: hidden;
}

.b2b-login__panel-top {
    padding: 28px 28px 0;
}

@media (min-width: 768px) {
    .b2b-login__panel-top {
        padding: 32px 36px 0;
    }
}

.b2b-login__logo img {
    height: 38px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.b2b-login__title-block {
    padding: 20px 28px 0;
}

@media (min-width: 768px) {
    .b2b-login__title-block {
        padding: 24px 36px 0;
    }
}

.b2b-login__title-block h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.b2b-login__title-block p {
    font-size: 13px;
    color: var(--login-muted);
    margin: 0;
    line-height: 1.5;
}

.b2b-login__body {
    padding: 24px 28px 0;
}

@media (min-width: 768px) {
    .b2b-login__body {
        padding: 28px 36px 0;
    }
}

.b2b-login__panel fieldset.form-group {
    margin-bottom: 18px;
    padding: 0;
    border: none;
}

.b2b-login__panel fieldset.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-text);
    margin-bottom: 6px;
}

.b2b-login__panel .form-control {
    height: 46px;
    font-size: 14px;
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
    padding: 10px 14px;
    color: var(--login-text);
    background: var(--hs-surface-raised, #fff);
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.02 * var(--hs-shadow-boost, 1)));
    transition: border-color 0.15s, box-shadow 0.15s;
}

.b2b-login__panel .form-control:hover:not(:focus) {
    border-color: var(--hs-border, #cbd5e1);
}

.b2b-login__panel .form-control::placeholder {
    color: var(--hs-text-subtle, #94a3b8);
}

.b2b-login__panel .form-control:focus {
    border-color: var(--login-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.14 * var(--hs-shadow-boost, 1)));
    outline: none;
}

.b2b-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.b2b-login__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.b2b-login__remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color, #313f51);
    cursor: pointer;
}

.b2b-login__remember label {
    font-size: 13px;
    font-weight: 500;
    color: var(--login-muted);
    margin: 0;
    cursor: pointer;
}

.b2b-login__forgot {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #313f51);
    text-decoration: none;
}

.b2b-login__forgot:hover {
    text-decoration: underline;
    color: var(--primary-color, #313f51);
}

.b2b-login__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 8px;
}

.b2b-login__panel .btn_login,
.b2b-login__panel .btn_register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--login-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, box-shadow 0.15s, background 0.15s;
}

.b2b-login__panel .btn_login {
    background: var(--primary-color, #313f51);
    color: var(--hs-text-inverse, #fff) !important;
    box-shadow: 0 2px 8px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.25 * var(--hs-shadow-boost, 1)));
}

.b2b-login__panel .btn_login:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.3 * var(--hs-shadow-boost, 1)));
}

.b2b-login__panel .btn_register {
    background: var(--hs-surface-raised, #fff);
    color: var(--login-text) !important;
    border: 1px solid var(--login-border);
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1)));
}

.b2b-login__panel .btn_register:hover {
    background: var(--hs-surface, #f8fafc);
    border-color: var(--hs-border-strong, #94a3b8);
    color: var(--login-text) !important;
    text-decoration: none;
}

.b2b-login__footer {
    padding: 16px 28px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--login-muted);
    background: var(--hs-surface, #f8fafc);
    border-top: 1px solid var(--login-border);
}

@media (min-width: 768px) {
    .b2b-login__footer {
        padding: 18px 36px 28px;
    }
}

.b2b-login__footer a {
    color: var(--primary-color, #313f51);
    font-weight: 600;
    margin-left: 4px;
    text-decoration: none;
}

.b2b-login__footer a:hover {
    text-decoration: underline;
}

.b2b-login-page .app-content .content-overlay,
.b2b-login-page .app-content .header-navbar-shadow {
    display: none;
}

.b2b-login-page .content-wrapper,
.b2b-login-page .content-body {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

html[data-textdirection="rtl"] .b2b-login__footer a {
    margin-left: 0;
    margin-right: 4px;
}

html[data-textdirection="rtl"] .b2b-login__options {
    flex-direction: row-reverse;
}

/* ==========================================================================
   Dual-product strip on the auth brand panel — flights and hotels, equal weight.
   Visual language matches the public landing page (public/b2b/intro/css/landing.css).
   ========================================================================== */

.b2b-auth-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}

.b2b-auth-product {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--hs-text-inverse, #fff);
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.13);
    border: 1px solid rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.24);
    backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease;
}

.b2b-auth-product:hover {
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.2);
    transform: translateY(-1px);
}

.b2b-auth-product i {
    font-size: 13px;
    opacity: 0.95;
}

/* A soft accent per product so the pair reads as two things, not one repeated chip. */
.b2b-auth-product--hotels {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #14b8a6);
}

.b2b-auth-product--flights {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #38bdf8);
}

[dir="rtl"] .b2b-auth-product--hotels,
[dir="rtl"] .b2b-auth-product--flights {
    box-shadow: inset -3px 0 0 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .b2b-auth-product { transition: none; }
    .b2b-auth-product:hover { transform: none; }
}

/* ==========================================================================
   Brand panel artwork — product-neutral.

   The project ships aviation photography only (every image under public/ is an
   aircraft, terminal or runway), so leaning on a photo made the sign-in journey
   read as flights-only. The panel is composed here instead: a deep brand ground
   with one warm glow per product — teal for hotels, sky for flights — plus a fine
   dot grid for texture. No stock photography required, and nothing to 404.
   ========================================================================== */

.b2b-login__brand {
    background:
        radial-gradient(560px 340px at 84% 16%, rgba(var(--hs-accent-rgb, 20, 184, 166), 0.30), transparent 62%),
        radial-gradient(600px 360px at 10% 86%, rgba(var(--hs-accent-rgb, 56, 189, 248), 0.26), transparent 62%),
        linear-gradient(155deg, var(--hs-brand, #0b1220) 0%, var(--hs-brand, #12233c) 54%, var(--hs-text, #0e2b36) 100%);
}

/* Fine dot grid + a soft diagonal sheen, layered under the content. */
.b2b-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.16) 1px, transparent 1px),
        linear-gradient(115deg, rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.05) 0%, transparent 42%);
    background-size: 22px 22px, 100% 100%;
    opacity: 0.55;
    pointer-events: none;
}

/* The overlay was there to darken a photograph; with no photo it would only mute
   the artwork, so soften it to a bottom vignette that keeps the copy readable. */
.b2b-login__brand-overlay {
    background: linear-gradient(to top, rgba(var(--hs-text-rgb, 8, 14, 26), 0.72) 0%, transparent 55%) !important;
}

.b2b-login__brand-img { display: none !important; }

.b2b-login__brand-top,
.b2b-login__brand-content {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   THEMED BRAND PANEL
   Tokens come from resources/views/partials/theme_tokens.blade.php, derived from the
   three colours on `tenants` (Admin > Tenants). See app/Helpers/ThemeHelper.php.

   Appended as one override block, matching the pattern the composed-panel block above
   already established: it is additive, it wins on source order rather than specificity,
   and deleting it restores the previous panel exactly. Nothing here changes layout --
   only colour, and the background-image the panel never had.

   WHY THE COPY FLIPS TO DARK. The panel used to be a dark navy composition because the
   project shipped aviation photography only and there was no brand artwork to show. There
   is now: --hs-img-login-bg defaults to the brand's own login backdrop, which is a light
   beige field. White copy on that is unreadable, so every colour here resolves against
   --hs-on-page, which is the ink themePalette() picked for the wash. Set a DARK page
   colour in the admin and the same rules flip back to light copy on their own -- that is
   why they are written against the token and not against a hardcoded #0b1220.

   Every declaration keeps its previous value as the var() fallback, so an unstyled or
   token-less render is the old panel, not a broken one.
   ========================================================================== */

.b2b-login__brand {
    background-color: var(--hs-page, #0b1220);
    background-image: var(--hs-img-login-bg, none);
    background-size: cover;
    /* From the slot's configured anchor, not a hardcoded centre: this artwork keeps its logo in the
       top-left corner, and a centred crop cut it off on shorter or narrower panels. */
    background-position: var(--hs-img-login-bg-position, left top);
    background-repeat: no-repeat;
}

/* Dot grid: ink-coloured now, and lighter, because it sits on a light field. */
.b2b-login__brand::before {
    background-image:
        radial-gradient(rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.10) 1px, transparent 1px),
        linear-gradient(115deg, rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.04) 0%, transparent 42%);
    /* Through a token so it reverts on its own when the theme is switched off, and so a
       dark page colour brings the grid back to full strength. */
    opacity: var(--hs-panel-grid-opacity, 0.55);
}

/* Bottom vignette in the WASH colour rather than near-black: it now exists to lift the
   artwork's darker lower curve away from the copy, not to darken a photograph. */
.b2b-login__brand-overlay {
    background: linear-gradient(to top, rgba(var(--hs-page-rgb, 8, 14, 26), 0.62) 0%, transparent 55%) !important;
}

/* The knock-to-white filter existed to make a coloured logo legible on the dark panel.
   On the brand's own light backdrop it erases the logo entirely. */
.b2b-login__brand-logo {
    /* The knock-to-white filter is wrong on a light backdrop and right on a dark one, so it
       follows the page colour. Written as a token so switching the theme off restores the
       original `brightness(0) invert(1)` rather than leaving a colour logo on a dark panel. */
    filter: var(--hs-logo-filter, brightness(0) invert(1));
}

.b2b-login__brand-badge {
    color: var(--hs-on-page, #ffffff);
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.08);
    border-color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.20);
}

.b2b-login__brand-content h2 {
    color: var(--hs-on-page, #ffffff);
}

.b2b-login__brand-content > p {
    color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.78);
}

.b2b-login__brand-features li {
    color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.88);
}

/* --ink rather than --accent: this is a small glyph on a light field, where the raw
   accent is a mid-tone that fails contrast at 13-16px. */
.b2b-login__brand-features li i {
    color: var(--hs-accent-ink, #6ee7b7);
}

/* Product chips live inside the brand panel, so they follow the same ink. */
.b2b-login__brand .b2b-auth-product {
    color: var(--hs-on-page, #ffffff);
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.10);
    border-color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.22);
}

.b2b-login__brand .b2b-auth-product:hover {
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.17);
}

/* The two product accents stay distinguishable but are drawn from the theme: hotels take
   the brand, flights the accent, so the pair still reads as two things. */
.b2b-login__brand .b2b-auth-product--hotels {
    box-shadow: inset 3px 0 0 0 var(--hs-brand, #14b8a6);
}

.b2b-login__brand .b2b-auth-product--flights {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #38bdf8);
}