/* ============================================================================
   Booking lists — one design for every "My bookings" grid in the agency panel
   (flight, hotel, tour, visa). Extracted from the flight bookings page so the
   four verticals share the same header, status tabs, toolbar, filter drawer,
   applied-filter chips, grid, state chip + row rail, skeleton and pager.

   Layers on top of the shared b2b.css tokens. Per-page files only add the
   column widths (and which columns drop on narrow screens) and any cell that
   is unique to that vertical.

   Rule for every grid: table-layout fixed + explicit header widths that sum to
   100%, so the table always fits its card — the booking state is never behind
   a horizontal scroll.
   ============================================================================ */

/* ── Header ─────────────────────────────────────────────────────────────── */
.bkl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bkl-head .b2b-page-title { font-size: 24px; }
.bkl-head .b2b-page-sub { font-size: 13.5px; }

.bkl-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bkl-head-actions .material-symbols-outlined {
    font-size: 20px;
}

.bkl-head-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-inline-start: 2px;
    border-radius: 999px;
    background: var(--b2b-warn-bg);
    color: var(--b2b-warn-fg);
    font-size: 11.5px;
    font-weight: 800;
}

/* ── Expiring-soon alert ────────────────────────────────────────────────── */
.bkl-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: var(--b2b-r-lg);
    background: var(--b2b-warn-bg);
    border: 1px solid #fde68a;
    color: var(--b2b-warn-fg);
}

.bkl-alert > .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }
.bkl-alert-text { flex: 1 1 auto; font-size: 13.5px; }
.bkl-alert-text strong { color: #854d0e; }
.bkl-alert-btn { padding: 6px 12px; font-size: 13px; }
.bkl-alert-btn .material-symbols-outlined { font-size: 17px; }

/* ── Panel + toolbar ────────────────────────────────────────────────────── */
.bkl-panel { overflow: hidden; }

.bkl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--b2b-border);
}

/* Status segmentation — a pill row, not full-width KPI cards. */
.bkl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bkl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--b2b-border);
    background: var(--b2b-card);
    color: var(--b2b-on-surface-variant);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px;
    padding: 5px 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.bkl-tab__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.bkl-tab:hover {
    border-color: var(--b2b-outline);
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface);
}

.bkl-tab--active {
    color: #fff;
    background: var(--bkl-accent, var(--b2b-primary));
    border-color: var(--bkl-accent, var(--b2b-primary));
    box-shadow: 0 8px 20px -12px var(--bkl-accent, var(--b2b-primary));
}

.bkl-tab--active .bkl-tab__dot { background: rgba(255, 255, 255, 0.85) !important; }

.bkl-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
}

.bkl-tab--active .bkl-tab__count { background: rgba(255, 255, 255, 0.25); }

/* ── Toolbar tools: quick search, range preset, filters, density ─────────── */
.bkl-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* Wide enough that the tools wrap below the tabs as a unit rather than
       splintering across two lines beside them. */
    flex: 1 1 600px;
    min-width: 0;
    justify-content: flex-end;
}

.bkl-tool-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.bkl-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 190px;
}

.bkl-search-icon {
    position: absolute;
    inset-inline-start: 10px;
    font-size: 19px;
    color: var(--b2b-outline);
    pointer-events: none;
}

.bkl-search-input {
    width: 100%;
    padding: 8px 34px;
    border: 1px solid var(--b2b-border);
    border-radius: 999px;
    background: var(--b2b-container-low);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--b2b-on-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.bkl-search-input::placeholder { color: var(--b2b-outline); }
.bkl-search-input::-webkit-search-cancel-button { display: none; }

.bkl-search-input:focus {
    background: #fff;
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.bkl-search-clear {
    position: absolute;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: var(--b2b-container-high);
    color: var(--b2b-on-surface-variant);
    cursor: pointer;
}

.bkl-search-clear:hover { background: var(--b2b-outline); color: #fff; }
.bkl-search-clear .material-symbols-outlined { font-size: 15px; }

.bkl-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: #fff;
    color: var(--b2b-on-surface-variant);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.bkl-tool:hover { border-color: var(--b2b-primary); color: var(--b2b-primary); background: var(--b2b-container-low); }
.bkl-tool.on { border-color: var(--b2b-primary); color: var(--b2b-primary); background: var(--b2b-primary-fixed); }
.bkl-tool .material-symbols-outlined { font-size: 18px; }
.bkl-tool--icon { padding: 7px; }

.bkl-tool-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--b2b-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

.bkl-range { max-width: 178px; }

/* ── Applied-filter chips ───────────────────────────────────────────────── */
.bkl-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--b2b-border);
    background: var(--b2b-container-low);
}

.bkl-chips-lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
    margin-inline-end: 2px;
}

.bkl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--b2b-border);
    border-radius: 999px;
    background: #fff;
    color: var(--b2b-on-surface);
    font: inherit;
    font-size: 12px;
    padding: 3px 8px 3px 10px;
    cursor: pointer;
    max-width: 260px;
    transition: border-color .15s, color .15s;
}

.bkl-chip:hover { border-color: var(--b2b-err-fg); color: var(--b2b-err-fg); }
.bkl-chip-k { color: var(--b2b-on-surface-variant); font-weight: 600; }
.bkl-chip-v { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkl-chip .material-symbols-outlined { font-size: 15px; opacity: 0.6; }
.bkl-chips-reset { padding: 3px 8px; font-size: 12px; }

/* ── Advanced filter drawer ─────────────────────────────────────────────── */
.bkl-adv {
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--b2b-border);
    background: var(--b2b-container-low);
}

.bkl-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
}

.bkl-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bkl-field-lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
}

.bkl-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--b2b-on-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.bkl-input::placeholder { color: var(--b2b-outline); }

.bkl-input:focus {
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.bkl-adv-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.bkl-adv-hint { font-size: 12px; color: var(--b2b-on-surface-variant); }
.bkl-adv-actions-right { display: flex; align-items: center; gap: 8px; }
.bkl-apply { padding: 7px 14px; font-size: 13px; }
.bkl-apply .material-symbols-outlined { font-size: 18px; }

.bkl-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--b2b-on-surface-variant);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--b2b-r);
    transition: background .15s, color .15s;
}

.bkl-linkbtn:hover { background: var(--b2b-container-high); color: var(--b2b-primary); }
.bkl-linkbtn .material-symbols-outlined { font-size: 17px; }

@media (max-width: 1100px) {
    .bkl-adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .bkl-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bkl-tools { justify-content: flex-start; }
    .bkl-tool-lbl { display: none; }
}
@media (max-width: 520px) {
    .bkl-adv-grid { grid-template-columns: 1fr; }
}

/* ── Table ──────────────────────────────────────────────────────────────── */
/* Fixed layout + explicit header widths: the grid always fits its card, so the
   state column can never be pushed behind a horizontal scrollbar. The widths
   sit on the header cells rather than a <colgroup> because a dropped column
   (below) is display:none, which would slide the <col>-to-column mapping. */
/* Every booking grid has the same seven slots, in the same order:
     1 reference · 2 state · 3 product · 4 key date · 5 person · 6 payable · 7 booked
   Fixed layout + header widths summing to 100% keep the grid inside its card. */
.bkl-table { table-layout: fixed; }
.bkl-table thead th:nth-child(1) { width: 16%; }   /* Reference */
.bkl-table thead th:nth-child(2) { width: 15%; }   /* State */
.bkl-table thead th:nth-child(3) { width: 17%; }   /* Product */
.bkl-table thead th:nth-child(4) { width: 12%; }   /* Key date */
.bkl-table thead th:nth-child(5) { width: 16%; }   /* Person */
.bkl-table thead th:nth-child(6) { width: 14%; }   /* Payable */
.bkl-table thead th:nth-child(7) { width: 10%; }   /* Booked */
.bkl-table thead th { user-select: none; padding: 9px 14px; font-size: 10.5px; }
.bkl-th-center { text-align: center !important; }
.bkl-th-end { text-align: end !important; }

.bkl-th-sortable { cursor: pointer; }
.bkl-th-sortable:hover { color: var(--b2b-primary); }
.bkl-th-in { display: inline-flex; align-items: center; gap: 3px; }
.bkl-th-end .bkl-th-in { justify-content: flex-end; }

/* Reservation/PNR share a column, so its header carries two sort links. */
.bkl-th-dual { display: inline-flex; align-items: center; gap: 4px; }
.bkl-th-sep { color: var(--b2b-outline); }
.bkl-sortlink {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.bkl-sortlink:hover, .bkl-sortlink.on { color: var(--b2b-primary); }

.bkl-sort {
    font-size: 14px;
    opacity: 0.35;
    transition: opacity .15s, color .15s;
}
.bkl-th-sortable:hover .bkl-sort, .bkl-sortlink:hover .bkl-sort { opacity: 0.7; }
.bkl-sort.on { opacity: 1; color: var(--b2b-primary); }

/* Row rhythm: compact by default, "comfortable" via the density toggle. */
.bkl-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    vertical-align: middle;
    /* Safety net: a fixed-layout cell that can't fit its content must clip it,
       not spill past the card and bring back the horizontal scrollbar. */
    overflow: hidden;
}

.bkl-table--dense tbody td { padding: 7px 14px; font-size: 12.5px; }

.bkl-row { cursor: pointer; }
.bkl-row:focus-visible { outline: 2px solid var(--b2b-primary); outline-offset: -2px; }

/* Status rail — the state reads at a glance before the chip is even parsed. */
.bkl-row > td:first-child { box-shadow: inset 3px 0 0 var(--bkl-row, transparent); }

.bkl-muted { color: var(--b2b-outline); }

/* Reservation # + PNR */
.bkl-idcell { line-height: 1.3; }
.bkl-idline { display: flex; align-items: center; gap: 2px; }
.bkl-idcell .b2b-ref { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkl-pnr {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: var(--b2b-on-surface-variant);
}

/* State */
.bkl-statecell { line-height: 1.3; }
.bkl-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bkl-state-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

/* Route */
.bkl-route { display: inline-flex; align-items: center; gap: 5px; }
.bkl-apt {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--b2b-on-surface);
    background: var(--b2b-container-low);
    border: 1px solid var(--b2b-border);
    border-radius: 5px;
    padding: 1px 6px;
    letter-spacing: 0.03em;
}
.bkl-route-arrow { font-size: 16px; color: var(--b2b-primary); }
.bkl-route-type {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--b2b-on-surface-variant);
}

/* Date/time — the time rides alongside the date instead of below it. */
.bkl-when { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.bkl-when-date { font-weight: 600; font-size: 12.5px; color: var(--b2b-on-surface); }
.bkl-when-time { font-size: 11px; color: var(--b2b-on-surface-variant); font-variant-numeric: tabular-nums; }
/* Booked column: the narrowest slot, so the time sits under the date. */
.bkl-when--stack { flex-direction: column; align-items: flex-start; gap: 1px; }

/* Traveller (absorbs the old pax column) */
.bkl-traveller { gap: 8px; min-width: 0; }
.bkl-traveller .ava { width: 26px; height: 26px; font-size: 10.5px; flex: 0 0 auto; }
.bkl-traveller-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bkl-pax {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px 0 4px;
    border-radius: 999px;
    background: var(--b2b-container);
    color: var(--b2b-on-surface-variant);
    font-weight: 700;
    font-size: 10.5px;
    flex: 0 0 auto;
}

.bkl-pax .material-symbols-outlined { font-size: 12px; }

/* Payable: one figure, everything else demoted to a chip */
.bkl-pricecell { line-height: 1.25; }
.bkl-price {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--b2b-on-surface);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bkl-cur {
    margin-inline-start: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--b2b-on-surface-variant);
}
.bkl-price-sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.bkl-comm {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--b2b-ok-fg);
    white-space: nowrap;
}
.bkl-adj {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}
.bkl-adj .material-symbols-outlined { font-size: 13px; }

/* Cancelled/neutral chip (b2b.css only ships ok/warn/err/info) */
.b2b-chip.neutral { background: var(--b2b-container-high); color: var(--b2b-on-surface-variant); }

/* Hold countdown + open post-booking request live under the state chip */
.bkl-hold {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--b2b-warn-fg);
    white-space: nowrap;
}
.bkl-hold .material-symbols-outlined { font-size: 13px; }
.bkl-hold.soon { color: var(--b2b-err-fg); }

.bkl-pb-open {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--b2b-primary, #4f46e5);
    white-space: nowrap;
}
.bkl-pb-open.quoted { color: #b45309; }
.bkl-pb-open .material-symbols-outlined { font-size: 13px; }

/* Loading skeleton — keeps the grid's shape while a page is fetched. */
.bkl-skrow td { padding-block: 12px; }
.bkl-sk {
    display: block;
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--b2b-container-low) 25%, var(--b2b-container-high) 37%, var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: bkl-shimmer 1.3s ease-in-out infinite;
}
@keyframes bkl-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Empty state */
.bkl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--b2b-on-surface-variant);
}
.bkl-empty .material-symbols-outlined { font-size: 36px; color: var(--b2b-outline); }
.bkl-empty .b2b-link { cursor: pointer; }

/* ── Pager ──────────────────────────────────────────────────────────────── */
.bkl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--b2b-border);
    flex-wrap: wrap;
}
.bkl-pager-info { font-size: 12.5px; color: var(--b2b-on-surface-variant); }
.bkl-pager-info strong { color: var(--b2b-on-surface); }
.bkl-pager-ctrls { display: flex; align-items: center; gap: 8px; }
.bkl-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--b2b-on-surface-variant);
}
.bkl-select {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--b2b-on-surface);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    padding: 7px 9px;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.bkl-select:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12); }
.bkl-pager-page { font-size: 12.5px; font-weight: 700; color: var(--b2b-on-surface); font-variant-numeric: tabular-nums; }
.bkl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: #fff;
    color: var(--b2b-on-surface);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bkl-pager-btn:hover:not(:disabled) { border-color: var(--b2b-primary); color: var(--b2b-primary); background: var(--b2b-container-low); }
.bkl-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bkl-pager-btn .material-symbols-outlined { font-size: 19px; }

/* ── Unread support-reply flag ──────────────────────────────────────────── */
/* Shown next to the reservation number when a support ticket referencing
   this booking carries a reply the agency hasn't read yet. */
.bkl-ticket-flag {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; padding: 2px; margin-inline-start: 4px;
    border-radius: 999px; background: #fff7ed; color: var(--b2b-action);
    vertical-align: middle; animation: bkl-flag-pulse 2s ease-in-out infinite;
    flex: 0 0 auto;
}
.bkl-ticket-flag:hover { background: var(--b2b-action); color: #fff; animation: none; }
.bkl-ticket-flag .material-symbols-outlined { font-size: 16px; }
@keyframes bkl-flag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(253, 139, 0, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(253, 139, 0, 0); }
}

/* ── Product cell (hotel / tour / visa title + a muted second line) ─────── */
.bkl-prod { line-height: 1.3; min-width: 0; }
.bkl-prod-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--b2b-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bkl-prod-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--b2b-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary line under a date (check-out, return, days left). */
.bkl-when-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--b2b-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bkl-when-sub.warn { color: var(--b2b-warn-fg); font-weight: 700; }
.bkl-when-sub.bad { color: var(--b2b-err-fg); font-weight: 700; }

/* Extra state flags under the state chip (dispute, needs-you, refund…). */
.bkl-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    margin-inline-end: 6px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--b2b-on-surface-variant);
}
.bkl-flag .material-symbols-outlined { font-size: 13px; }
.bkl-flag.err { color: var(--b2b-err-fg); }
.bkl-flag.warn { color: var(--b2b-warn-fg); }
.bkl-flag.info { color: var(--b2b-primary); }
.bkl-flag.ok { color: var(--b2b-ok-fg); }

/* Payment chip under the payable (visa: paid / unpaid). */
.bkl-paid { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.bkl-paid.ok { color: var(--b2b-ok-fg); }
.bkl-paid.due { color: var(--b2b-err-fg); }

/* Inline error banner (load failed) with retry. */
.bkl-error {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--b2b-border);
    background: var(--b2b-err-bg);
    color: var(--b2b-err-fg);
    font-size: 13px;
}
.bkl-error .material-symbols-outlined { font-size: 19px; }

/* Alert tone for problems that are already late (visa at-risk). */
.bkl-alert--err {
    background: var(--b2b-err-bg);
    border-color: #fecaca;
    color: var(--b2b-err-fg);
}
.bkl-alert--err .bkl-alert-text strong { color: #991b1b; }

/* ── Narrow viewports ───────────────────────────────────────────────────── */
/* The grid never needs a horizontal scroll for the state column; on smaller
   screens the two lowest-value columns (booked date, then the key date) give
   way. Dropping a column re-deals the full 100% across the survivors — leave
   a shortfall and the table stops short of its card. */
@media (max-width: 1240px) {
    .bkl-table thead th:nth-child(7), .bkl-table tbody td:nth-child(7) { display: none; }
    .bkl-table thead th:nth-child(1) { width: 18%; }
    .bkl-table thead th:nth-child(2) { width: 17%; }
    .bkl-table thead th:nth-child(3) { width: 19%; }
    .bkl-table thead th:nth-child(4) { width: 13%; }
    .bkl-table thead th:nth-child(5) { width: 18%; }
    .bkl-table thead th:nth-child(6) { width: 15%; }
}
@media (max-width: 980px) {
    .bkl-table thead th:nth-child(4), .bkl-table tbody td:nth-child(4) { display: none; }
    .bkl-table thead th:nth-child(1) { width: 22%; }
    .bkl-table thead th:nth-child(2) { width: 19%; }
    .bkl-table thead th:nth-child(3) { width: 21%; }
    .bkl-table thead th:nth-child(5) { width: 21%; }
    .bkl-table thead th:nth-child(6) { width: 17%; }
    .bkl-table thead th, .bkl-table tbody td { padding-inline: 10px; }
}
/* Below md b2b.css turns every row into a card, so hidden columns come back. */
@media (max-width: 767px) {
    /* Label on the left, every line of the value stacked on the right — a
       two-line cell (reference + PNR, hotel + city) must not sit side by side. */
    .bkl-table tbody td,
    .bkl-table tbody td:nth-child(4),
    .bkl-table tbody td:nth-child(7) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 2px;
        align-items: center;
    }
    .bkl-table tbody td > * { grid-column: 2; justify-self: end; max-width: 100%; min-width: 0; }
    .bkl-table tbody td::before { grid-column: 1; grid-row: 1 / span 3; }
    .bkl-table tbody td.b2b-empty { display: block; }
    .bkl-prod-title, .bkl-prod-sub, .bkl-traveller-name { white-space: normal; text-align: end; }
    .bkl-price-sub { justify-content: flex-end; }
}