/**
 * B2B Top Navigation — professional header
 */

.b2b-topnav {
    --ht-bg: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.92);
    --ht-border: rgba(var(--hs-text-muted-rgb, 15, 23, 42), 0.08);
    --ht-text: var(--hs-text, #0f172a);
    --ht-muted: var(--hs-text-muted, #64748b);
    --ht-accent: var(--primary-color, #313f51);
    --ht-accent-soft: rgba(var(--hs-brand-rgb, 49, 63, 81), 0.08);
    --ht-h: 68px;
    --ht-radius: 10px;
    --ht-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    position: sticky;
    top: 0;
    z-index: 1001;
    background: var(--ht-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ht-border);
    box-shadow: 0 1px 0 rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1)));
    font-family: var(--ht-font);
}

.b2b-topnav.is-scrolled {
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.98);
    box-shadow: 0 4px 24px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1)));
}

.b2b-topnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    min-height: var(--ht-h);
    max-width: 100%;
}

.b2b-topnav__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.b2b-topnav__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--ht-radius);
    background: transparent;
    color: var(--ht-text);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    flex-shrink: 0;
}

.b2b-topnav__menu-btn:hover {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
}

.b2b-topnav__divider {
    width: 1px;
    height: 28px;
    background: var(--ht-border);
    flex-shrink: 0;
}

.b2b-topnav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: var(--ht-text);
    flex-shrink: 0;
}

.b2b-topnav__brand:hover {
    color: var(--ht-text);
    text-decoration: none;
}

.b2b-topnav__logo {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    object-fit: contain;
    background: var(--hs-surface, #f8fafc);
    border: 1px solid var(--ht-border);
    padding: 4px;
}

.b2b-topnav__logo-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--ht-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hs-text-inverse, #fff);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.b2b-topnav__brand-text {
    min-width: 0;
    line-height: 1.25;
}

.b2b-topnav__brand-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.b2b-topnav__brand-sub {
    display: block;
    font-size: 10px;
    color: var(--ht-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1px;
}

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

.b2b-topnav__icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--ht-radius);
    background: transparent;
    color: var(--ht-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.b2b-topnav__icon-btn:hover,
.b2b-topnav__icon-btn.show {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
}

.b2b-topnav__icon-btn.dropdown-toggle::after {
    display: none;
}

.b2b-topnav__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hs-danger, #ef4444);
    color: var(--hs-text-inverse, #fff);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--hs-surface-raised, #fff);
    line-height: 1;
}

.b2b-topnav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--ht-border);
    border-radius: 999px;
    background: var(--hs-surface-raised, #fff);
    text-decoration: none;
    color: var(--ht-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-left: 4px;
}

.b2b-topnav__user:hover {
    border-color: var(--hs-border, #cbd5e1);
    box-shadow: 0 2px 8px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1)));
    color: var(--ht-text);
    text-decoration: none;
}

.b2b-topnav__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ht-accent);
    color: var(--hs-text-inverse, #fff);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b2b-topnav__user-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#notification-count:empty,
#notification-count[data-count="0"] {
    display: none !important;
}

/* Notification dropdown */
.b2b-notif-dropdown {
    width: min(380px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--ht-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.14 * var(--hs-shadow-boost, 1)));
    overflow: hidden;
    margin-top: 8px !important;
}

.b2b-notif-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--hs-surface, #f8fafc);
    border-bottom: 1px solid var(--ht-border);
}

.b2b-notif-dropdown__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ht-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.b2b-notif-dropdown__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--ht-accent);
    text-decoration: none;
}

.b2b-notif-dropdown__link:hover {
    text-decoration: underline;
}

.b2b-notif-dropdown__scroll {
    display: block;
    max-height: 360px;
    overflow-y: auto;
}

.b2b-notif-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b2b-notif-dropdown__list > li {
    border-bottom: 1px solid var(--ht-border);
}

.b2b-notif-dropdown__list > li:last-child {
    border-bottom: none;
}

.b2b-notif-dropdown__item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px !important;
    white-space: normal !important;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ht-text) !important;
    transition: background 0.12s;
}

.b2b-notif-dropdown__item:hover {
    background: var(--hs-surface, #f8fafc) !important;
}

.b2b-notif-dropdown__item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.b2b-notif-ic--chat    { background: rgba(var(--hs-brand-rgb, 54, 153, 255), 0.12);  color: var(--hs-brand-ink, #3699ff); }
.b2b-notif-ic--request { background: rgba(var(--hs-warning-rgb, 255, 168, 0), 0.12);   color: var(--hs-warning-ink, #ffa800); }
.b2b-notif-ic--success { background: rgba(var(--hs-brand-rgb, 27, 197, 189), 0.12);  color: var(--hs-brand-ink, #1bc5bd); }
.b2b-notif-ic--error   { background: rgba(var(--hs-danger-rgb, 246, 78, 96), 0.12);   color: var(--hs-danger-ink, #f64e60); }
.b2b-notif-ic--info    { background: rgba(var(--hs-brand-rgb, 102, 110, 232), 0.12); color: var(--hs-brand-ink, #666ee8); }

.b2b-notif-dropdown__item-body {
    flex: 1;
    min-width: 0;
}

.b2b-notif-dropdown__item-text,
.b2b-notif-dropdown__item .message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}

.b2b-notif-dropdown__item-time {
    font-size: 11px;
    color: var(--ht-muted);
    margin-top: 3px;
    display: block;
}

.b2b-notif-dropdown__list > li.nav-item .dropdown-item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px !important;
    white-space: normal !important;
}

.b2b-notif-dropdown__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ht-muted);
    font-size: 13px;
}

.b2b-notif-dropdown__foot {
    padding: 12px 16px;
    background: var(--hs-surface, #f8fafc);
    border-top: 1px solid var(--ht-border);
    text-align: center;
}

.b2b-notif-dropdown__foot a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ht-accent);
    text-decoration: none;
}

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

/* Legacy top_nav reset */
.top_nav.b2b-topnav-wrap {
    float: none;
    background: transparent;
    border: none;
    margin-bottom: 0;
}

.top_nav.b2b-topnav-wrap .navbar-right {
    display: none;
}

@media (max-width: 991px) {
    .b2b-topnav__divider,
    .b2b-topnav__brand-text,
    .b2b-topnav__user-name,
    .b2b-topnav__welcome {
        display: none;
    }

    .b2b-topnav__inner {
        padding: 0 12px;
    }

    .b2b-topnav__user {
        padding: 4px;
        border: none;
        background: transparent;
    }
}

/* RTL */
[dir="rtl"] .b2b-topnav__badge {
    right: auto;
    left: 2px;
}

[dir="rtl"] .b2b-topnav__user {
    margin-left: 0;
    margin-right: 4px;
    padding: 4px 4px 4px 12px;
}

.b2b-topnav__quick {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 8px;
}

.b2b-topnav__quick-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ht-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.b2b-topnav__quick-link i {
    font-size: 14px;
    opacity: 0.85;
}

.b2b-topnav__quick-link:hover {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    text-decoration: none;
}

.b2b-topnav__quick-link.is-active {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
}

.b2b-topnav__quick-pill {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hs-warning, #f59e0b);
    color: var(--hs-text-inverse, #fff);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.b2b-topnav__welcome {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--ht-muted);
    margin-right: 8px;
}

.b2b-topnav__welcome strong {
    color: var(--ht-text);
    font-weight: 600;
}

@media (min-width: 1200px) {
    .b2b-topnav__welcome {
        display: block;
    }
}

@media (max-width: 991px) {
    .b2b-topnav__quick {
        display: none;
    }
}

[dir="rtl"] .b2b-topnav__welcome {
    margin-right: 0;
    margin-left: 8px;
}

/* ── Public (guest) top navigation ── */
.b2b-pubnav {
    --ht-bg: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.92);
    --ht-border: rgba(var(--hs-text-muted-rgb, 15, 23, 42), 0.08);
    --ht-text: var(--hs-text, #0f172a);
    --ht-muted: var(--hs-text-muted, #64748b);
    --ht-accent: var(--primary-color, #313f51);
    --ht-accent-soft: rgba(var(--hs-brand-rgb, 49, 63, 81), 0.08);
    --ht-h: 68px;
    --ht-radius: 10px;
    --ht-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    position: sticky;
    top: 0;
    z-index: 1001;
    background: var(--ht-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ht-border);
    box-shadow: 0 1px 0 rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1)));
    font-family: var(--ht-font);
}

.b2b-pubnav.is-scrolled {
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.98);
    box-shadow: 0 4px 24px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1)));
}

.b2b-pubnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    min-height: var(--ht-h);
    max-width: 1280px;
    margin: 0 auto;
}

.b2b-pubnav__left,
.b2b-pubnav__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.b2b-pubnav__left {
    min-width: 0;
    flex: 1;
}

.b2b-pubnav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.b2b-pubnav__logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.b2b-pubnav__links {
    align-items: center;
    gap: 4px;
    margin-left: 20px;
}

.b2b-pubnav__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ht-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}

.b2b-pubnav__link:hover,
.b2b-pubnav__link.is-active {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    text-decoration: none;
}

.b2b-pubnav__lang {
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ht-muted);
    text-decoration: none;
    border-radius: var(--ht-radius);
}

.b2b-pubnav__lang:hover {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    text-decoration: none;
}

.b2b-pubnav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.b2b-pubnav__btn--ghost {
    color: var(--ht-text);
    border: 1px solid var(--ht-border);
    background: var(--hs-surface-raised, #fff);
}

.b2b-pubnav__btn--ghost:hover {
    border-color: var(--hs-border, #cbd5e1);
    color: var(--ht-accent);
    text-decoration: none;
}

.b2b-pubnav__btn--primary {
    color: var(--hs-text-inverse, #fff) !important;
    background: var(--ht-accent);
    border: 1px solid var(--ht-accent);
}

.b2b-pubnav__btn--primary:hover {
    filter: brightness(1.06);
    color: var(--hs-text-inverse, #fff);
    text-decoration: none;
}

.b2b-pubnav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--ht-border);
    border-radius: 999px;
    background: var(--hs-surface-raised, #fff);
    text-decoration: none;
    color: var(--ht-text);
}

.b2b-pubnav__user.dropdown-toggle::after {
    margin-left: 6px;
}

.b2b-pubnav__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ht-accent);
    color: var(--hs-text-inverse, #fff);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b2b-pubnav__user-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-pubnav__toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--ht-radius);
    background: transparent;
    color: var(--ht-text);
    font-size: 17px;
    cursor: pointer;
}

.b2b-pubnav__toggle:hover {
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
}

.b2b-pubnav__mobile {
    border-top: 1px solid var(--ht-border);
    background: var(--hs-surface-raised, #fff);
}

.b2b-pubnav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 16px;
}

.b2b-pubnav__mobile-links .b2b-pubnav__link {
    border-radius: var(--ht-radius);
}

@media (max-width: 575px) {
    .b2b-pubnav__inner {
        padding: 0 12px;
    }

    .b2b-pubnav__btn--ghost {
        display: none !important;
    }
}

[dir="rtl"] .b2b-pubnav__links {
    margin-left: 0;
    margin-right: 20px;
}

/* ═══ Tenant brand band ═══════════════════════════════════
   Rendered by resources/views/partials/brand_bar.blade.php from the bottom of b2b/header.blade.php,
   so it sits between the nav and the page content on every B2B route.

   It carries `.top_nav` as a second class (passed in by the include), which is where every bit of
   its layout comes from: b2b_side_menu.css already offsets `.container.body .top_nav` by the
   sidebar width in LTR, RTL, collapsed-rail and mobile. Nothing about the sidebar is repeated here.

   Deliberately NOT sticky — .b2b-topnav is, and stacking two would eat 130px of every screen.

   The horizontal padding matches .b2b-topnav__inner so the logo starts on the same line as the
   nav's own brand directly above it. */
.hs-brandbar {
    /* No background and no border: the band belongs to the PAGE, so it simply shows the page.

       This works because both B2B heads (resources/views/b2b/head.blade.php and the views_hotels
       copy) carry an unconditional inline rule painting BOTH surfaces with the same token:
           html body, body .container.body .right_col { background: var(--hs-page, #fff) }
       So `body` behind the band and `.right_col` below it are the same colour by construction, on
       every route, in every tenant theme. Naming a colour here cannot beat that -- an earlier pass
       hard-coded --hs-surface-alt, a DIFFERENT token from the one the page actually paints with,
       which is why it matched on some routes and drifted on others.

       (custom.min.css does say `body{background:var(--hs-text, #2A3F54)}` -- dark navy. That rule
       is dead on every B2B page; the head's inline style overrides it. Read it without the head and
       you will conclude a transparent band sits on navy, which is wrong.)

       One known exception: b2b/booking.blade.php repaints its own .right_col with --hs-surface. The
       band still follows `body`, like the nav above it does. */
    background: transparent;
}

.hs-brandbar__inner {
    display: flex;
    align-items: center;
    /* Logical padding: the leading edge is the right-hand one in Arabic, and the nav above uses the
       same 20px, so the two marks stay on one line in both directions. */
    padding-block: 8px;
    padding-inline: 20px;
}

.hs-brandbar__link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.hs-brandbar__logo {
    /* Height-driven so any aspect ratio a tenant uploads lands at the same optical size -- which is
       also why uploading a bigger file does NOT make the logo bigger. This one number does, and it
       is a theme knob: Admin > Tenants > Theme, "Logo size" (config/theme.php >
       effects.brand_logo_height -> --hs-brand-logo-h, emitted WITH its px unit).

       The fallback is the shipped default rather than some earlier value: this component is new, so
       there is no "before the theme" look to preserve, and matching the two means the band is the
       same size whether or not the theme layer is switched on.

       max-width scales with the height instead of being a fixed cap, so a wide wordmark keeps
       growing with the dial rather than hitting 260px and quietly ignoring it. */
    --bb-h: var(--hs-brand-logo-h, 52px);

    height: var(--bb-h);
    width: auto;
    max-width: calc(var(--bb-h) * 6);
    object-fit: contain;
}

@media (max-width: 991px) {
    .hs-brandbar__inner {
        padding-block: 6px;
        padding-inline: 14px;
    }

    /* Three quarters of whatever the dial is set to, rather than a second fixed number: a tenant who
       turns the logo up should see it grow on a phone too, just less. Re-declaring the local var is
       enough -- height and max-width above are both written in terms of it. */
    .hs-brandbar__logo {
        --bb-h: calc(var(--hs-brand-logo-h, 52px) * 0.75);
    }
}