html, body {
    height: 100%;
}

.b2b-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f7fb;
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1;
}

.app-footer {
    margin-top: auto;
}
.top-user-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .top-user-bar .welcome-block {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .top-user-bar .credit-limit {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.credit-limit .value {
    font-weight: 600;
    font-size: 14px;
}

body.b2b-portal {
    background: #f4f7fb;
    color: #243b53;
    font-family: var(--brand-font) !important
}

    body.b2b-portal .home-img, body.b2b-portal .home-line {
        background: none !important;
        height: auto !important;
        min-height: 0 !important
    }

.b2b-shell-wrap {
    width: min(1540px,calc(100% - 40px));
    margin: 0 auto
}

.b2b-delegation-banner {
    background: #fff3cd;
    color: #6a4e00;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 600
}

.b2b-shell-header {
    background: #fff;
    border-bottom: 1px solid #e7edf3;
    position: sticky;
    top: 0;
    z-index: 30
}

.b2b-top-nav {
    border-bottom: 1px solid #eef3f7;
    background: #fff
}

.b2b-top-nav-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    min-height: 44px
}

.b2b-top-nav a {
    font-size: 14px;
    font-weight: 600;
    color: #5d7083;
    line-height: 44px;
    position: relative;
    text-decoration: none
}

    .b2b-top-nav a.active, .b2b-top-nav a:hover {
        color: var(--brand-primary)
    }

        .b2b-top-nav a.active:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 3px;
            border-radius: 999px;
            background: var(--brand-primary)
        }

.b2b-brand-bar {
    background: #fff
}

.b2b-brand-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0
}

.b2b-brand-logo {
    max-height: 58px;
    max-width: 220px;
    object-fit: contain
}

.b2b-context-blocks {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.b2b-context-card, .b2b-icon-card {
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    min-height: 58px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 24px rgba(31,57,88,.04)
}

.b2b-context-card {
    padding: 10px 16px;
    min-width: 160px
}

.b2b-context-primary {
    min-width: 240px
}

.b2b-credit-card {
    min-width: 135px
}

.b2b-context-label {
    font-size: 12px;
    color: #7b8a9a;
    font-weight: 600;
    line-height: 1.2
}

.b2b-context-value {
    font-size: 16px;
    color: #22384c;
    font-weight: 700;
    line-height: 1.3
}

.b2b-context-meta {
    font-size: 13px;
    color: #55697d;
    line-height: 1.3
}

.b2b-credit-card .b2b-context-value {
    color: var(--brand-primary)
}

.b2b-icon-card {
    width: 58px;
    justify-content: center;
    padding: 0
}

.b2b-account-card {
    padding: 0
}

.b2b-account-toggle {
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #22384c
}

    .b2b-account-toggle:focus {
        outline: none
    }

.b2b-page-hero {
    padding: 26px 0 18px;
    background: linear-gradient(180deg,#f8fbfe 0%,#f2f7fb 100%);
    border-top: 1px solid #edf3f7;
    border-bottom: 1px solid #e7edf3;
    margin-bottom: 18px
}

.b2b-page-hero-inner {
    text-align: center
}

.b2b-page-title {
    margin: 0;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #16324f
}

.b2b-page-subtitle {
    margin: 8px 0 0;
    font-size: 20px;
    color: #6b7f92;
    font-weight: 500
}

.b2b-main-content {
    padding-bottom: 24px
}

.b2b-footer {
    margin-top: 24px;
    background: #2d3138;
    color: #fff;
    border-top: 3px solid var(--brand-primary)
}

    .b2b-footer .copy {
        padding: 16px 0;
        text-align: center;
        font-size: 14px
    }

body.b2b-portal .container, body.b2b-portal .container-fluid {
    width: min(1540px,calc(100% - 40px));
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

body.b2b-portal .filter-container, body.b2b-portal .data-table-list, body.b2b-portal .select-hotel {
    width: 100% !important;
    max-width: none !important
}

body.b2b-portal .filter-container {
    background: #fff;
    border: 1px solid #dde7f0;
    border-radius: 18px;
    padding: 22px 24px 26px !important;
    margin: 0 0 20px !important;
    box-shadow: 0 10px 32px rgba(22,50,79,.05)
}

body.b2b-portal .data-table-list {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0
}

body.b2b-portal .table-responsive {
    background: #fff;
  /*  border: 1px solid #dde7f0;
    border-radius: 18px;
    padding: 18px 18px 8px;
    box-shadow: 0 10px 32px rgba(22,50,79,.05)*/
}

    body.b2b-portal .table-responsive table {
        margin-bottom: 0
    }

body.b2b-portal .basic-tb-hd {
    padding: 0;
    background: transparent
}

    body.b2b-portal .basic-tb-hd > h3 {
        margin: 0 0 18px;
        font-size: 34px;
        color: #16324f;
        font-weight: 700
    }

body.b2b-portal .search-control, body.b2b-portal .form-control, body.b2b-portal .bootstrap-select > .dropdown-toggle {
    height: 46px;
    border: 1px solid #d6e0ea;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    color: #243b53;
    background: #fff
}

body.b2b-portal .bootstrap-select.form-control:not([class*=col-]) {
    width: 100%
}

body.b2b-portal label.control-label, body.b2b-portal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #42586d;
    font-weight: 700
}

body.b2b-portal .btn-orange, body.b2b-portal .btn-primary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 11px 24px;
    font-weight: 700;
    box-shadow: none
}

body.b2b-portal .btn-red {
    border-radius: 12px
}

body.b2b-portal .row {
    margin-left: 0;
    margin-right: 0
}

.b2b-search-hero {
    padding-top: 30px;
    padding-bottom: 26px
}

/* Dashboard booking grid: use the same horizontal shell as the logo/navigation,
   reserve practical space for hotel names, and keep long names readable without
   allowing a single row to become excessively tall. */
body.controller-home.action-index .agency-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.controller-home.action-index #data-table-basic {
    width: 100% !important;
    min-width: 1400px;
    table-layout: auto;
}

body.controller-home.action-index #data-table-basic th,
body.controller-home.action-index #data-table-basic td {
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
}

body.controller-home.action-index #data-table-basic th:nth-child(4),
body.controller-home.action-index #data-table-basic td:nth-child(4) {
    width: 220px !important;
    min-width: 220px;
}

body.controller-home.action-index #data-table-basic .agency-hotel-cell {
    display: -webkit-box !important;
    width: 100%;
    max-width: none !important;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: break-word !important;
    word-break: normal;
    text-align: left;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 1399px) {
    body.controller-home.action-index #data-table-basic {
        min-width: 1320px;
    }

    body.controller-home.action-index #data-table-basic th:nth-child(4),
    body.controller-home.action-index #data-table-basic td:nth-child(4) {
        width: 190px !important;
        min-width: 190px;
    }
}