/* ============================================================================
   B2B (DirectB2B) panel — "Horizon B2B" design system.
   A self-contained shell that replaces the white-label MudBlazor chrome for
   B2B-only tenants. Everything is scoped under .b2b-root so it never leaks
   into the white-label layout. Uses logical properties so it mirrors under RTL.

   BREAKPOINTS — the panel's scale. Use these four and nothing else; new rules
   that invent a width make the panel reflow in visible stages as a tablet
   rotates. Existing pages still carry older ad-hoc widths; migrate them to
   these as each page is touched rather than in one sweep.

       sm    640px   phone landscape / small tablet portrait
       md    768px   tables stop being tables and become cards
       lg   1024px   the shell switches between drawer and fixed sidebar
       xl   1280px   widest content grids

   The shell below 1024px is an off-canvas drawer (see the SHELL — MOBILE
   section at the end of this file), so --b2b-sidebar-w drops to 0 and every
   layout that offsets against it follows automatically.
   ============================================================================ */

:root,
.b2b-root {
    /* Palette (from the Horizon B2B design tokens) */
    --b2b-primary: #003d9b;
    --b2b-primary-container: #0052cc;
    --b2b-on-primary: #ffffff;
    --b2b-primary-fixed: #dae2ff;
    --b2b-on-primary-fixed: #001848;

    /* Action / CTA orange (matches the rendered design) */
    --b2b-action: #fd8b00;
    --b2b-action-hover: #e67e00;
    --b2b-on-action: #ffffff;
    --b2b-secondary-fixed: #ffdcc3;
    --b2b-on-secondary-fixed: #6e3900;

    --b2b-tertiary-fixed: #d9e2ff;
    --b2b-on-tertiary-fixed: #00419d;

    /* Surfaces */
    --b2b-surface: #f8f9fb;
    --b2b-card: #ffffff;
    --b2b-container-low: #f3f4f6;
    --b2b-container: #edeef0;
    --b2b-container-high: #e7e8ea;
    --b2b-container-highest: #e1e2e4;

    /* Text */
    --b2b-on-surface: #191c1e;
    --b2b-on-surface-variant: #56607a;
    --b2b-outline: #8a8fa3;
    --b2b-border: #e3e5ee;

    /* Status */
    --b2b-ok-bg: #dcfce7;        --b2b-ok-fg: #15803d;
    --b2b-warn-bg: #fef9c3;      --b2b-warn-fg: #a16207;
    --b2b-err-bg: #fee2e2;       --b2b-err-fg: #b91c1c;
    --b2b-info-bg: #dbeafe;      --b2b-info-fg: #1d4ed8;

    /* Shape & elevation */
    --b2b-r: 8px;
    --b2b-r-md: 12px;
    --b2b-r-lg: 16px;
    --b2b-r-xl: 24px;
    --b2b-shadow: 0 4px 12px rgba(0, 82, 204, 0.08);
    --b2b-shadow-hi: 0 8px 24px rgba(0, 82, 204, 0.12);

    --b2b-sidebar-w: 256px;

    /* Shell stacking band. Page content uses z-index up to 60 (the search
       boxes' cards and popovers) and full-screen page modals start at 1300,
       so the chrome sits between the two: a search card can never paint over
       the drawer or the topbar, and a modal still covers the whole shell.
       Keep the order: overlay < topbar < scrim < sidebar. */
    --b2b-z-overlay: 1035;
    --b2b-z-topbar: 1040;
    --b2b-z-scrim: 1045;
    --b2b-z-sidebar: 1050;
    --b2b-topbar-h: 64px;
}

/* The tokens above are also declared on :root because some pages built on the
   b2b classes (users & access, tickets, help, invoices) are also reachable from
   the white-label layout, which has no .b2b-root: without the tokens there,
   their buttons rendered with no background (white text on white). */
.b2b-root {
    font-family: 'Vazirmatn', sans-serif;
    color: var(--b2b-on-surface);
    background: var(--b2b-surface);
}

/* Border-box for the whole panel. The default content-box makes `width: 100%`
   plus any padding overflow its own parent, which is not a subtle bug: it is
   what put the topbar search input 54px over the wallet balance. Scoped to .b2b-root so it cannot reach the
   white-label layout. Rules that genuinely want content-box (the notification
   badge's ring) say so explicitly and still win. */
.b2b-root,
.b2b-root *,
.b2b-root *::before,
.b2b-root *::after {
    box-sizing: border-box;
}

.b2b-root .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 22px;
    vertical-align: middle;
}

/* Hide the global MudBlazor "Loading..." boot text inheritance, etc. */
.b2b-boot {
    display: flex; align-items: center; justify-content: center;
    height: 100vh; color: #2a3439; font-family: 'Vazirmatn', sans-serif; font-weight: 600;
}

/* ============================== SIDEBAR ================================== */
.b2b-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--b2b-sidebar-w);
    background: #ffffff;
    border-inline-end: 1px solid var(--b2b-border);
    box-shadow: var(--b2b-shadow);
    display: flex;
    flex-direction: column;
    padding-block: 20px;
    z-index: var(--b2b-z-sidebar);
}

.b2b-brand { padding-inline: 20px; margin-bottom: 28px; }
/* FocusOnNavigate (App.razor) focuses the page heading after each navigation
   for screen readers; it is not keyboard focus, so it should not draw a ring. */
.b2b-root h1[tabindex="-1"]:focus { outline: none; }

.b2b-brand .b2b-brand-title {
    font-size: 20px; line-height: 26px; font-weight: 800; color: var(--b2b-primary);
    margin: 0; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px;
}
.b2b-brand .b2b-brand-mark {
    width: 30px; height: 30px; border-radius: 8px; background: var(--b2b-primary);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.b2b-brand p { font-size: 12px; color: var(--b2b-on-surface-variant); margin: 4px 0 0; }

.b2b-nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding-inline: 12px; overflow-y: auto; }
.b2b-nav-section { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--b2b-outline); padding: 14px 12px 4px; }

.b2b-nav-link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; border-radius: var(--b2b-r);
    color: var(--b2b-on-surface-variant); text-decoration: none;
    font-size: 14px; font-weight: 500; cursor: pointer;
    border-inline-start: 3px solid transparent;
    transition: background .15s, color .15s;
}
.b2b-nav-link:hover { background: var(--b2b-container-high); color: var(--b2b-primary); }
.b2b-nav-link.active {
    background: var(--b2b-container-highest);
    color: var(--b2b-primary);
    font-weight: 700;
    border-inline-start-color: var(--b2b-primary);
}
.b2b-nav-link .material-symbols-outlined { font-size: 22px; }

.b2b-sidebar-footer { padding-inline: 12px; padding-top: 10px; border-top: 1px solid var(--b2b-border);
    display: flex; flex-direction: column; gap: 2px; }

/* ============================== TOPBAR ================================== */
.b2b-topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: var(--b2b-sidebar-w);
    height: var(--b2b-topbar-h);
    background: rgba(248, 249, 251, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--b2b-border);
    display: flex; align-items: center; justify-content: space-between;
    padding-inline: 32px; gap: 16px;
    z-index: var(--b2b-z-topbar);
}
.b2b-topsearch-spacer { flex: 1 1 auto; min-width: 0; }

.b2b-topbar-right { display: flex; align-items: center; gap: 18px; }
.b2b-wallet { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.b2b-wallet .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--b2b-on-surface-variant); text-transform: uppercase; }
.b2b-wallet .val {
    font-size: 14px; font-weight: 700; color: var(--b2b-primary);
    /* An isolated RTL run: "12,450,000 ریال" reads amount first, so the
       figure sits on the right and its label to its left, matching the
       wallet chip in the regular layout. */
    direction: rtl;
    unicode-bidi: isolate;
}

/* Wallet has fallen under the minimum the agency configured — the figure itself
   carries the warning, so the state reads without opening the bell. */
.b2b-wallet .val.is-low { color: #B45309; }

.b2b-iconbtn {
    background: transparent; border: none; cursor: pointer; color: var(--b2b-on-surface-variant);
    display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px;
    position: relative;
}
.b2b-iconbtn:hover { color: var(--b2b-primary); background: var(--b2b-container-high); }
.b2b-badge-dot { position: absolute; top: 4px; inset-inline-end: 4px; width: 8px; height: 8px;
    border-radius: 999px; background: var(--b2b-action); border: 2px solid var(--b2b-surface); }
.b2b-badge-count {
    position: absolute; top: -2px; inset-inline-end: -4px; min-width: 18px; height: 18px;
    padding-inline: 4px; border-radius: 999px; background: var(--b2b-action); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
    border: 2px solid var(--b2b-surface); box-sizing: content-box;
}

/* ---- topbar notifications dropdown ---- */
.b2b-notif { position: relative; }
.b2b-notif-panel { width: 360px; max-width: 90vw; padding: 0; overflow: hidden; }
.b2b-notif-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--b2b-border);
    font-size: 14px; font-weight: 700; color: var(--b2b-on-surface);
}
/* Every rule below is scoped under .b2b-notif-panel on purpose. The generic
   `.b2b-dropdown a, .b2b-dropdown button` rule further down sets display:flex,
   width:100% and align-items:center on any control inside a dropdown — which
   stretched "Mark all read" across the header and squeezed the count badge into
   a circle. Scoping puts these rules above it on specificity. */
.b2b-notif-panel .b2b-notif-head { padding: 12px 14px; }
.b2b-notif-panel .b2b-notif-head-title { display: inline-flex; align-items: center; gap: 8px; }
.b2b-notif-panel .b2b-notif-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--b2b-action); color: #fff; font-size: 11px; font-weight: 700;
}
.b2b-notif-panel .b2b-notif-markall {
    display: inline-flex; align-items: center; gap: 4px; width: auto;
    padding: 4px 8px; border: none; border-radius: 6px; background: none; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--b2b-primary); white-space: nowrap;
}
.b2b-notif-panel .b2b-notif-markall:hover { background: var(--b2b-container-low); }
.b2b-notif-panel .b2b-notif-markall .material-symbols-outlined { font-size: 16px !important; }

.b2b-notif-list { max-height: 400px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
/* The row wraps the item together with its hover popup, so hovering either one
   keeps the popup open. */
.b2b-notif-row { display: flex; flex-direction: column; }
.b2b-notif-main { display: flex; align-items: stretch; border-radius: 8px; }
.b2b-notif-row.is-unread .b2b-notif-main { background: #FFF7ED; }
.b2b-notif-row.is-warning .b2b-notif-main { background: #FEF3C7; }
.b2b-notif-main:hover { background: var(--b2b-container-low); }
.b2b-notif-row.is-warning .b2b-notif-main:hover { background: #FDE68A; }

/* The row's own open button — not a generic dropdown button. */
.b2b-notif-panel .b2b-notif-open {
    display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0;
    text-align: start; padding: 10px 4px 10px 12px;
    border: none; background: none; cursor: pointer; border-radius: 8px 0 0 8px;
}
.b2b-notif-panel .b2b-notif-ico {
    width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto; margin-top: 1px;
    background: var(--b2b-primary-fixed); color: var(--b2b-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px !important;
}
.b2b-notif-row.is-warning .b2b-notif-ico { background: #FDE68A; color: #B45309; }
.b2b-notif-row.is-read .b2b-notif-ico { background: var(--b2b-container-low); color: var(--b2b-outline); }
.b2b-notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.b2b-notif-title {
    font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--b2b-on-surface);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-notif-row.is-read .b2b-notif-title { font-weight: 600; color: var(--b2b-on-surface-variant); }
.b2b-notif-sub {
    font-size: 12px; color: var(--b2b-on-surface-variant); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-notif-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 1px; }
.b2b-notif-time { font-size: 11px; color: var(--b2b-outline); }
.b2b-notif-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; color: #B45309;
    background: #FEF3C7; border-radius: 4px; padding: 1px 5px;
}
.b2b-notif-tag .material-symbols-outlined { font-size: 12px !important; }

/* Seen/unseen toggle, deliberately separate from the open action. */
.b2b-notif-panel .b2b-notif-seen {
    /* Top-aligned with the title rather than centred on the row: rows differ in
       height as titles wrap, and a centred control drifts against its own row. */
    display: flex; align-items: flex-start; justify-content: center;
    width: 38px; flex: 0 0 auto; padding: 12px 0 0;
    border: none; background: none; cursor: pointer; border-radius: 0 8px 8px 0;
    color: var(--b2b-action);
}
.b2b-notif-panel .b2b-notif-seen:hover:not(:disabled) { background: rgba(0, 0, 0, .05); }
.b2b-notif-panel .b2b-notif-seen:disabled { opacity: .25; cursor: default; }
/* One size for both states — the glyph swaps, the box must not, or the control
   twitches as it is clicked. */
.b2b-notif-panel .b2b-notif-seen .material-symbols-outlined { font-size: 16px !important; }
.b2b-notif-row.is-read .b2b-notif-seen { color: var(--b2b-outline); }

/* ---- hover popup: the full message, read in place ----
   Kept in the row's normal flow rather than floated beside the list: the list is
   a scroll container, so an absolutely positioned card would be clipped by its
   overflow on every row. Expanding in place is styled as a raised card, is never
   cut off wherever the row sits, and can't flicker — the card is a child of the
   row it belongs to, so entering it keeps the row hovered. */
.b2b-notif-pop {
    margin: 2px 6px 4px; padding: 12px 14px;
    background: var(--b2b-surface); color: var(--b2b-on-surface);
    border: 1px solid var(--b2b-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}
.b2b-notif-row:not(:hover):not(:focus-within) .b2b-notif-pop { display: none; }
.b2b-notif-pop-head { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.b2b-notif-pop-meta { font-size: 11px; color: var(--b2b-outline); margin-bottom: 8px; }
.b2b-notif-pop-body {
    font-size: 12px; line-height: 1.5; color: var(--b2b-on-surface-variant);
    white-space: pre-wrap; word-break: break-word;
    max-height: 240px; overflow-y: auto;
}
.b2b-notif-pop-hint {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--b2b-border);
    font-size: 11px; color: var(--b2b-outline);
}
.b2b-notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 28px 16px; color: var(--b2b-on-surface-variant); font-size: 13px; text-align: center;
}
.b2b-notif-empty .material-symbols-outlined { font-size: 32px; color: var(--b2b-outline); }
.b2b-notif-foot {
    display: block; padding: 12px 16px; border-top: 1px solid var(--b2b-border); text-align: center;
    font-size: 13px; font-weight: 700; color: var(--b2b-primary); text-decoration: none;
}
.b2b-notif-foot:hover { background: var(--b2b-container-low); }

/* ============================== NOTIFICATIONS PAGE ======================= */
.b2b-nt-page { max-width: 860px; margin: 0 auto; padding: 24px 20px 48px; }
.b2b-nt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.b2b-nt-titles h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--b2b-on-surface); }
.b2b-nt-titles p { margin: 4px 0 0; font-size: 13px; color: var(--b2b-on-surface-variant); }
.b2b-nt-actions { display: flex; align-items: center; gap: 8px; }
.b2b-nt-actions .material-symbols-outlined { font-size: 16px !important; margin-inline-end: 4px; }

.b2b-nt-filters { display: flex; gap: 6px; margin: 20px 0 12px; border-bottom: 1px solid var(--b2b-border); }
.b2b-nt-tab {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: none; cursor: pointer; padding: 8px 12px;
    font-size: 13px; font-weight: 700; color: var(--b2b-on-surface-variant);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.b2b-nt-tab.is-active { color: var(--b2b-primary); border-bottom-color: var(--b2b-primary); }
.b2b-nt-tabcount {
    background: var(--b2b-action); color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 999px; padding: 1px 6px;
}

.b2b-nt-list { display: flex; flex-direction: column; gap: 8px; }
.b2b-nt-card {
    display: flex; gap: 14px; padding: 16px;
    background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: 12px;
}
/* An unseen card carries the accent rail as well as the dot — colour alone is
   not a reliable signal, and the rail survives a monochrome/high-contrast view. */
.b2b-nt-card.is-unread { border-inline-start: 3px solid var(--b2b-action); background: #FFFCF7; }
.b2b-nt-ico {
    width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
    background: var(--b2b-primary-fixed); color: var(--b2b-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px !important;
}
.b2b-nt-card.is-read .b2b-nt-ico { background: var(--b2b-container-low); color: var(--b2b-outline); }
.b2b-nt-body { flex: 1; min-width: 0; }
.b2b-nt-titlerow { display: flex; align-items: center; gap: 8px; }
.b2b-nt-titlerow h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); }
.b2b-nt-card.is-read .b2b-nt-titlerow h2 { font-weight: 600; color: var(--b2b-on-surface-variant); }
.b2b-nt-newdot { width: 8px; height: 8px; border-radius: 999px; background: var(--b2b-action); flex: 0 0 auto; }
.b2b-nt-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 4px; font-size: 11px; color: var(--b2b-outline);
}
.b2b-nt-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; color: #B45309;
    background: #FEF3C7; border-radius: 4px; padding: 1px 5px;
}
.b2b-nt-tag .material-symbols-outlined { font-size: 12px !important; }
.b2b-nt-text {
    margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--b2b-on-surface-variant);
    white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-nt-text.is-expanded { display: block; overflow: visible; }
.b2b-nt-cardactions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.b2b-nt-link {
    display: inline-flex; align-items: center; gap: 4px;
    border: none; background: none; padding: 0; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant);
}
.b2b-nt-link.is-primary { color: var(--b2b-primary); }
.b2b-nt-link:hover { text-decoration: underline; }
.b2b-nt-link .material-symbols-outlined { font-size: 15px !important; }

.b2b-nt-state, .b2b-nt-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 56px 16px; color: var(--b2b-on-surface-variant); font-size: 14px; text-align: center;
}
.b2b-nt-empty .material-symbols-outlined { font-size: 40px; color: var(--b2b-outline); }

@media (max-width: 599.98px) {
    .b2b-nt-page { padding: 16px 12px 40px; }
    .b2b-nt-card { padding: 12px; gap: 10px; }
}

/* ---- sidebar unread badge ---- */
.b2b-nav-badge {
    margin-inline-start: auto; min-width: 20px; height: 20px; padding-inline: 6px;
    border-radius: 999px; background: var(--b2b-action); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; flex: 0 0 auto;
}
.b2b-nav-group-header .b2b-nav-badge { margin-inline-start: auto; }
.b2b-nav-group-header:has(.b2b-nav-badge) .b2b-chevron { margin-inline-start: 6px; }

.b2b-avatar {
    width: 36px; height: 36px; border-radius: 999px; background: var(--b2b-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    cursor: pointer; flex: 0 0 auto;
}
.b2b-usermenu { position: relative; }
.b2b-usermenu-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px; border-radius: 999px; }
.b2b-usermenu-trigger:hover { background: var(--b2b-container-high); }
.b2b-usermenu-meta { display: flex; flex-direction: column; line-height: 1.15; }
.b2b-usermenu-meta .nm { font-size: 13px; font-weight: 700; }
.b2b-usermenu-meta .rl { font-size: 11px; color: var(--b2b-on-surface-variant); }
/* Outside-click catcher for the topbar dropdowns (notifications, user menu).
   Its z-index MUST stay below .b2b-topbar's: the topbar sets backdrop-filter,
   which creates a stacking context, so .b2b-dropdown's z-index:60 is confined
   inside the topbar and the whole subtree paints at the topbar's own level.
   An overlay above that swallowed every click inside the open dropdown — the
   panel just closed instead of the row, "Mark all read" or "Sign out" firing. */
.b2b-overlay { position: fixed; inset: 0; z-index: var(--b2b-z-overlay); }

.b2b-dropdown {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 200px;
    background: #fff; border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md);
    box-shadow: var(--b2b-shadow-hi); padding: 6px; z-index: 60;
}
.b2b-dropdown a, .b2b-dropdown button {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
    padding: 10px 12px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
    color: var(--b2b-on-surface); font-size: 14px; text-decoration: none;
}
.b2b-dropdown a:hover, .b2b-dropdown button:hover { background: var(--b2b-container-low); color: var(--b2b-primary); }

/* ============================== MAIN ================================== */
.b2b-main {
    margin-inline-start: var(--b2b-sidebar-w);
    margin-block-start: var(--b2b-topbar-h);
    padding: 32px 40px;
    min-height: calc(100vh - var(--b2b-topbar-h));
}

/* ============================== BUTTONS ================================== */
.b2b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 14px; border-radius: var(--b2b-r); cursor: pointer;
    padding: 10px 18px; border: 1px solid transparent; transition: filter .15s, background .15s, transform .05s; text-decoration: none; }
.b2b-btn:active { transform: scale(0.985); }
.b2b-btn-action { background: var(--b2b-action); color: var(--b2b-on-action); }
.b2b-btn-action:hover { background: var(--b2b-action-hover); }
.b2b-btn-primary { background: var(--b2b-primary); color: #fff; }
.b2b-btn-primary:hover { filter: brightness(1.1); }
.b2b-btn-outline { background: #fff; color: var(--b2b-primary); border-color: var(--b2b-primary); }
.b2b-btn-outline:hover { background: var(--b2b-primary); color: #fff; }
.b2b-btn-chip { background: var(--b2b-primary-container); color: #fff; font-size: 12px; font-weight: 700;
    padding: 8px 14px; border-radius: var(--b2b-r); }
.b2b-btn-chip:hover { filter: brightness(1.1); }
.b2b-btn-block { width: 100%; }

/* ============================== CARDS / GRID ================================== */
.b2b-card { background: var(--b2b-card); border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow); }
.b2b-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .b2b-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .b2b-cols-12 { grid-template-columns: repeat(12, 1fr); } }
/* Five stat tiles only fit side by side on a genuinely wide screen. Below that
   they go three-up: a four-column fallback leaves the fifth tile alone on its
   own row, which is where most laptops sit. */
@media (min-width: 1024px) { .b2b-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .b2b-cols-5 { grid-template-columns: repeat(5, 1fr); } }
.b2b-col-8 { grid-column: span 8 / span 8; }
.b2b-col-4 { grid-column: span 4 / span 4; }
@media (max-width: 1023px) { .b2b-col-8, .b2b-col-4 { grid-column: 1 / -1; } }

/* Stat cards */
.b2b-stat { background: var(--b2b-card); border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow); padding: 18px; }
.b2b-stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.b2b-stat-ico { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.b2b-stat-ico.p { background: var(--b2b-primary-fixed); color: var(--b2b-primary); }
.b2b-stat-ico.s { background: var(--b2b-secondary-fixed); color: var(--b2b-on-secondary-fixed); }
.b2b-stat-ico.t { background: var(--b2b-tertiary-fixed); color: var(--b2b-on-tertiary-fixed); }
.b2b-stat-ico.u { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.b2b-stat-tag { font-size: 11px; color: var(--b2b-on-surface-variant); }
.b2b-stat h3 { font-size: 12px; font-weight: 600; 
    color: var(--b2b-on-surface-variant); margin: 0; }
.b2b-stat .num { font-size: 30px; line-height: 36px; font-weight: 700; margin-top: 4px; color: var(--b2b-on-surface); }

/* Section title */
.b2b-section-title { font-size: 20px; font-weight: 600; color: var(--b2b-on-surface); margin: 0; }
.b2b-page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.b2b-page-sub { color: var(--b2b-on-surface-variant); margin-top: 4px; font-size: 14px; }

/* ============================== TABLE ================================== */
.b2b-table-wrap { overflow-x: auto; }
.b2b-table { width: 100%; border-collapse: collapse; text-align: start; }
.b2b-table thead th { background: var(--b2b-container-low); border-bottom: 1px solid var(--b2b-border);
    color: var(--b2b-on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 10px 20px; text-align: start; white-space: nowrap; }
.b2b-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--b2b-border); font-size: 14px; }
.b2b-table tbody tr:last-child td { border-bottom: none; }
.b2b-table tbody tr:hover { background: var(--b2b-container-low); }
.b2b-ref {
    font-weight: 700; color: var(--b2b-primary);
    /* References are Latin codes; isolate them so their
       punctuation does not reorder inside RTL text. */
    direction: ltr;
    unicode-bidi: isolate;
}
.b2b-empty { padding: 40px; text-align: center; color: var(--b2b-on-surface-variant); font-size: 14px; }

/* Card header */
.b2b-card-head { padding: 16px 24px; border-bottom: 1px solid var(--b2b-border); display: flex; align-items: center; justify-content: space-between; }
.b2b-link { color: var(--b2b-primary); font-size: 12px; font-weight: 700; background: none; border: none; cursor: pointer; text-decoration: none; }
.b2b-link:hover { text-decoration: underline; }

/* Chips */
.b2b-chip { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.b2b-chip.ok { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.b2b-chip.warn { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.b2b-chip.err { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.b2b-chip.info { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.b2b-chip.neutral { background: var(--b2b-container-high); color: var(--b2b-on-surface-variant); }

/* ============================== DASHBOARD WIDGETS ======================== */
/* Stat card sub-line (per-product trend / call to action) */
.b2b-stat-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: 12px; color: var(--b2b-on-surface-variant); }
.b2b-stat-foot .material-symbols-outlined { font-size: 16px; }
.b2b-stat-foot.ok { color: var(--b2b-ok-fg); }
.b2b-stat-foot.hold { color: var(--b2b-action); font-weight: 600; }
a.b2b-stat-foot.hold:hover { text-decoration: underline; }

/* Time-critical banner (e.g. wallet below its minimum) */
.b2b-alert { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-radius: var(--b2b-r-lg); background: var(--b2b-warn-bg); border: 1px solid #f4dd8f; }
.b2b-alert .b2b-alert-ico { font-size: 26px; color: var(--b2b-warn-fg); flex: 0 0 auto; }
.b2b-alert-text { flex: 1; font-size: 14px; color: var(--b2b-on-surface); }
.b2b-alert-text strong { color: var(--b2b-warn-fg); }
.b2b-alert .b2b-btn { flex: 0 0 auto; }

/* Two-line cell: title + muted sub line */
.b2b-typemeta { display: flex; flex-direction: column; line-height: 1.3; }
.b2b-typemeta .t { font-weight: 600; font-size: 13px; }
.b2b-typemeta .s { font-size: 12px; color: var(--b2b-on-surface-variant); }

.b2b-stack { display: flex; flex-direction: column; gap: 16px; }
.b2b-mt-lg { margin-top: 24px; }
.b2b-mb-lg { margin-bottom: 24px; }
.b2b-mb-xl { margin-bottom: 32px; }

/* ============================== GROUPED NAV (accordion) ================== */
.b2b-nav-group { display: flex; flex-direction: column; }
.b2b-nav-group-header {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; border-radius: var(--b2b-r);
    color: var(--b2b-on-surface-variant); cursor: pointer; user-select: none;
    font-size: 14px; font-weight: 600; background: transparent; border: none; width: 100%; text-align: start;
    transition: background .15s, color .15s;
}
.b2b-nav-group-header:hover { background: var(--b2b-container-high); color: var(--b2b-primary); }
.b2b-nav-group-header .b2b-chevron { margin-inline-start: auto; font-size: 20px; transition: transform .2s; }
.b2b-nav-group.open .b2b-nav-group-header { color: var(--b2b-primary); }
.b2b-nav-group.open .b2b-nav-group-header .b2b-chevron { transform: rotate(180deg); }
.b2b-nav-group.has-active .b2b-nav-group-header { color: var(--b2b-primary); font-weight: 700; }

.b2b-nav-children { display: flex; flex-direction: column; gap: 2px; padding-block: 2px; }
.b2b-nav-sub {
    padding-block: 8px; font-size: 13px; font-weight: 500;
    padding-inline-start: 40px; /* align under the group icon */
    border-inline-start: 3px solid transparent;
}
.b2b-nav-sub .material-symbols-outlined { font-size: 19px; }

/* ============================== OFFICE DASHBOARD ========================= */
.b2b-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b2b-dash { gap: 24px; }
.b2b-dash .b2b-alert { margin: 0; }
.b2b-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.b2b-dash-taglink { text-decoration: none; color: var(--b2b-primary); font-weight: 600; }

.b2b-dash-qa { border: 1px solid var(--b2b-border); background: transparent; width: 100%; font: inherit; text-align: start; justify-content: flex-start; }

/* ============================== SUPPORT TICKETS ========================== */
.b2b-tk {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    height: calc(100vh - var(--b2b-topbar-h) - 64px);
    min-height: 520px;
}
/* The back control belongs to the two-view mobile layout only. */
.b2b-tk-back { display: none; }

@media (max-width: 1023px) {
    /* Two views, not two stacked panes: stacking rendered the whole ticket list
       above the conversation, so tapping a ticket changed something far below
       the fold and read as a dead tap. */
    .b2b-tk { grid-template-columns: 1fr; height: auto; }
    .b2b-tk .b2b-tk-convo { display: none; }
    .b2b-tk.has-selection .b2b-tk-list { display: none; }
    .b2b-tk.has-selection .b2b-tk-convo { display: flex; }

    .b2b-tk-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-inline-end: 4px;
        border: none;
        border-radius: var(--b2b-r);
        background: transparent;
        color: var(--b2b-on-surface-variant);
        cursor: pointer;
    }
    .b2b-tk-back:hover { background: var(--b2b-container-high); color: var(--b2b-primary); }
    /* Mirrors with the layout — this is a directional icon. */
    [dir="rtl"] .b2b-tk-back .material-symbols-outlined { transform: scaleX(-1); }
}

/* ---- list ---- */
.b2b-tk-list { display: flex; flex-direction: column; overflow: hidden; }
.b2b-tk-list-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--b2b-border); }
.b2b-tk-list-title { display: flex; align-items: center; gap: 10px; }
.b2b-tk-list-title .b2b-section-title { font-size: 18px; }
.b2b-tk-newbadge {
    background: var(--b2b-action); color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
}
.b2b-tk-filters { display: inline-flex; background: var(--b2b-container-low); padding: 4px; border-radius: var(--b2b-r); gap: 2px; margin-top: 12px; }
.b2b-tk-filter {
    padding: 6px 14px; border: none; background: transparent; border-radius: 6px;
    font-size: 12px; font-weight: 600; color: var(--b2b-on-surface-variant); cursor: pointer;
}
.b2b-tk-filter.active { background: #fff; color: var(--b2b-primary); box-shadow: var(--b2b-shadow); }

.b2b-tk-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.b2b-tk-card {
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md); padding: 12px 14px;
    cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
    border-inline-start: 4px solid transparent;
}
.b2b-tk-card:hover { box-shadow: var(--b2b-shadow); }
.b2b-tk-card.selected { border-color: var(--b2b-primary); box-shadow: var(--b2b-shadow); }
.b2b-tk-card.unread { background: #fff7ed; border-inline-start-color: var(--b2b-action); }
.b2b-tk-card.awaiting { border-inline-start-color: var(--b2b-warn-fg); }
.b2b-tk-card.replied { border-inline-start-color: var(--b2b-ok-fg); }
.b2b-tk-card.closed { opacity: 0.7; }
.b2b-tk-card-top { display: flex; align-items: center; justify-content: space-between; }
.b2b-tk-num { font-size: 12px; font-weight: 700; color: var(--b2b-primary); }
.b2b-tk-date { font-size: 11px; color: var(--b2b-on-surface-variant); }
.b2b-tk-subject {
    font-size: 14px; font-weight: 600; color: var(--b2b-on-surface); margin: 6px 0 8px;
    line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-tk-card-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.b2b-tk-newpill { background: var(--b2b-action); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }

.b2b-tk-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; color: var(--b2b-on-surface-variant); padding: 40px 16px; flex: 1;
}
.b2b-tk-empty .material-symbols-outlined { font-size: 40px; color: var(--b2b-outline); }

.b2b-tk-list-foot { padding: 12px; border-top: 1px solid var(--b2b-border); }
.b2b-tk-newwrap { position: relative; }
.b2b-tk-topics {
    position: absolute; inset-inline: 0; bottom: calc(100% + 8px); z-index: 30;
    background: #fff; border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md);
    box-shadow: var(--b2b-shadow-hi); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.b2b-tk-topic {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
    padding: 10px 12px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--b2b-on-surface);
}
.b2b-tk-topic:hover { background: var(--b2b-container-low); }
.b2b-tk-topic .material-symbols-outlined { color: var(--b2b-primary); font-size: 22px; }
.b2b-tk-topic span { display: flex; flex-direction: column; }
.b2b-tk-topic strong { font-size: 13px; font-weight: 600; }
.b2b-tk-topic small { font-size: 11px; color: var(--b2b-on-surface-variant); }
.b2b-tk-scrim { position: fixed; inset: 0; z-index: 25; }

/* ---- conversation ---- */
.b2b-tk-convo { display: flex; flex-direction: column; overflow: hidden; }
.b2b-tk-convo-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--b2b-on-surface-variant);
}
.b2b-tk-convo-empty .material-symbols-outlined { font-size: 52px; color: var(--b2b-outline); }

.b2b-tk-convo-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--b2b-border);
}
.b2b-tk-convo-head-left { display: flex; align-items: center; gap: 12px; }
.b2b-tk-avatar {
    width: 40px; height: 40px; border-radius: 999px; background: var(--b2b-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
.b2b-tk-convo-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.b2b-tk-convo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 12px; color: var(--b2b-on-surface-variant); }
.b2b-tk-team { font-size: 12px; color: var(--b2b-on-surface-variant); }
.b2b-tk-convo-actions { display: flex; gap: 8px; }
.b2b-tk-convo-actions .b2b-btn { padding: 8px 12px; font-size: 13px; }
.b2b-tk-convo-actions .material-symbols-outlined { font-size: 18px; }

.b2b-tk-msgs { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--b2b-surface); }
.b2b-tk-datelabel { text-align: center; }
.b2b-tk-datelabel span { font-size: 11px; color: var(--b2b-on-surface-variant); background: var(--b2b-container); padding: 3px 12px; border-radius: 999px; }
.b2b-tk-msg { display: flex; gap: 10px; max-width: 80%; }
.b2b-tk-msg.sent { align-self: flex-end; flex-direction: row-reverse; }
.b2b-tk-msg.received { align-self: flex-start; }
.b2b-tk-msg-avatar {
    width: 32px; height: 32px; border-radius: 999px; background: var(--b2b-primary-fixed); color: var(--b2b-primary);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex: 0 0 auto;
}
.b2b-tk-bubble { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.b2b-tk-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.b2b-tk-bubble.mine { background: var(--b2b-primary); color: #fff; border-bottom-right-radius: 4px; }
.b2b-tk-bubble.theirs { background: #fff; color: var(--b2b-on-surface); border: 1px solid var(--b2b-border); border-bottom-left-radius: 4px; }
.b2b-tk-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 6px; text-align: end; }

.b2b-tk-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.b2b-tk-att {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
    border: none; cursor: pointer; font-size: 12px; text-align: start; width: 100%;
    background: rgba(255,255,255,0.18); color: inherit;
}
.b2b-tk-bubble.theirs .b2b-tk-att { background: var(--b2b-container-low); border: 1px solid var(--b2b-border); }
.b2b-tk-att-name { flex: 1; word-break: break-all; }
.b2b-tk-att .material-symbols-outlined { font-size: 18px; }

/* ---- input ---- */
.b2b-tk-inputzone { border-top: 1px solid var(--b2b-border); background: #fff; }
.b2b-tk-input { padding: 12px 16px; }
.b2b-tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.b2b-tk-filechip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px;
    background: var(--b2b-container-low); font-size: 12px; color: var(--b2b-on-surface);
}
.b2b-tk-filechip .material-symbols-outlined { font-size: 16px; color: var(--b2b-on-surface-variant); }
.b2b-tk-filechip button { border: none; background: transparent; cursor: pointer; display: inline-flex; padding: 0; color: var(--b2b-on-surface-variant); }
.b2b-tk-input textarea {
    width: 100%; resize: none; border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md);
    padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--b2b-on-surface); outline: none; background: #fff;
}
.b2b-tk-input textarea:focus { border-color: var(--b2b-primary); }
.b2b-tk-input-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.b2b-tk-toolbtn {
    border: none; background: transparent; cursor: pointer; color: var(--b2b-on-surface-variant);
    display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px;
}
.b2b-tk-toolbtn:hover { color: var(--b2b-primary); background: var(--b2b-container-high); }
.b2b-tk-send { padding: 9px 18px; }
.b2b-tk-send .material-symbols-outlined { font-size: 18px; }
.b2b-tk-send[disabled] { opacity: 0.5; cursor: not-allowed; }

.b2b-tk-closed {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px; border-top: 1px solid var(--b2b-border); background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant); font-size: 14px;
}
.b2b-tk-closed .b2b-btn { padding: 8px 14px; font-size: 13px; }

/* ============================== DASHBOARD TICKETS ======================== */
/* "Support tickets" attention card on the B2B dashboard: tickets carrying an
   unseen platform reply (highlighted) plus still-open requests. */
.b2b-dashtk-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.b2b-dashtk {
    display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start;
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md); padding: 10px 12px;
    background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    border-inline-start: 4px solid transparent;
}
.b2b-dashtk:hover { border-color: var(--b2b-primary); box-shadow: var(--b2b-shadow); }
.b2b-dashtk.unread { background: #fff7ed; border-inline-start-color: var(--b2b-action); }
.b2b-dashtk-top { display: flex; align-items: center; gap: 8px; }
.b2b-dashtk-top .b2b-tk-num { flex: 1; }
.b2b-dashtk-subj {
    font-size: 13px; color: var(--b2b-on-surface); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-dashtk-time { font-size: 11px; color: var(--b2b-outline); }
.b2b-dashtk-empty { padding: 22px 16px; text-align: center; color: var(--b2b-on-surface-variant); font-size: 13px; }

/* ========================== TABLES — MOBILE (< md) ======================== */
/* Below md a .b2b-table stops being a table: each row becomes a card and each
   cell a label/value line. Without this the money and status columns sit past
   the right edge of .b2b-table-wrap's horizontal scroll, which on an agent
   surface is the same as not rendering them.

   Cells need `data-label` for the label to appear; a cell without one still
   lays out correctly, it just shows the value alone (right for a cell whose
   meaning is obvious, like a row-action link). */
@media (max-width: 767px) {
    .b2b-table thead {
        position: absolute;
        /* Pinned rather than left at its static position: an absolutely
           positioned nowrap row keeps its full content width, and under RTL
           that width runs off the inline-start edge of the page. */
        inset-inline-start: 0;
        top: 0;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .b2b-table, .b2b-table tbody, .b2b-table tr, .b2b-table tbody td { display: block; }

    .b2b-table tr {
        border: 1px solid var(--b2b-border);
        border-radius: var(--b2b-r);
        background: var(--b2b-card);
        padding: 10px 14px;
        margin-bottom: 10px;
    }
    .b2b-table tbody tr:last-child { margin-bottom: 0; }
    .b2b-table tbody tr:hover { background: var(--b2b-card); }

    .b2b-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 6px 0;
        border-bottom: none;
        text-align: end;
        min-width: 0;
    }
    .b2b-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: start;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--b2b-on-surface-variant);
    }
    /* A cell with no data-label and no content is a spacer column on desktop —
       as a card line it would just be an empty row. */
    .b2b-table tbody td:not([data-label]):empty { display: none; }

    /* The wrap no longer needs to scroll, and leaving it scrollable makes the
       cards look clipped at the edges. */
    .b2b-table-wrap { overflow-x: visible; }
}

/* ========================== SHELL — MOBILE (< lg) ========================= */
/* Below 1024px the fixed sidebar becomes an off-canvas drawer and the topbar
   and main claim the full width. Everything here is driven by dropping
   --b2b-sidebar-w to 0, so any layout that offsets against the sidebar follows
   without needing its own rule. B2bShell owns the open/closed state and puts
   `is-open` on the drawer. */
@media (max-width: 1023px) {
    .b2b-root {
        --b2b-sidebar-w: 0px;
        --b2b-drawer-w: 280px;
    }

    /* The drawer keeps its own width while the layout offset goes to zero.
       Translating by width + shadow spread keeps the box-shadow off-screen
       too, so no grey seam bleeds down the closed edge. */
    .b2b-sidebar {
        width: var(--b2b-drawer-w);
        max-width: 86vw;
        transform: translateX(calc(-1 * (var(--b2b-drawer-w) + 24px)));
        transition: transform .22s ease;
        will-change: transform;
    }
    [dir="rtl"] .b2b-sidebar {
        transform: translateX(calc(var(--b2b-drawer-w) + 24px));
    }
    .b2b-sidebar.is-open,
    [dir="rtl"] .b2b-sidebar.is-open { transform: none; }

    .b2b-scrim {
        position: fixed;
        inset: 0;
        z-index: var(--b2b-z-scrim);
        background: rgba(16, 19, 26, .45);
        border: none;
        padding: 0;
    }

    .b2b-navtoggle { display: inline-flex; flex: 0 0 auto; }

    /* Topbar: let the search absorb the slack instead of holding a fixed
       width the right-hand group then overlaps. */
    .b2b-topbar { padding-inline: 12px; gap: 8px; }
    /* The search is the only thing allowed to give way. `flex: 1 1 0` makes it
       take leftover space rather than reserve a base width, so it shrinks
       before anything else does. */
    /* The right group must NOT shrink: its own children are fixed-size, so a
       shrinkable group just overflows its box and lands on the search field
       instead of getting narrower. */
    .b2b-topbar-right { gap: 8px; flex: 0 0 auto; }
    .b2b-wallet .lbl { display: none; }
    /* The balance answers "can I pay for a service right now" — it never truncates. */
    .b2b-wallet { flex: 0 0 auto; }
    .b2b-wallet .val { white-space: nowrap; }

    .b2b-main { padding: 20px 16px; }

    /* Card headers hold a title, filter chips and a "view all" link on one
       desktop row; at this width they have to become rows of their own or the
       title gets squeezed to a couple of characters. */
    .b2b-card-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .b2b-card-head > * { min-width: 0; }

    /* The alert is icon + message + action in a row. Below lg the message
       collapses to a few words per line and the action crowds it, so stack the
       action under the text and keep the icon beside the message. */
    .b2b-alert {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    /* Icon and message keep line one; the action takes line two full-width. */
    .b2b-alert-text { flex: 1 1 180px; min-width: 0; }
    .b2b-alert .b2b-btn { flex: 1 1 100%; }

    /* Display type is sized for a 1169px content column; at 390px it wraps
       the page title onto three lines and clips stat numbers. */
    .b2b-page-title { font-size: 23px; line-height: 1.25; }
    .b2b-page-sub { font-size: 13.5px; }
    .b2b-stat p.num { font-size: 24px; }

    /* Anything the user taps has to clear 44px. Scoped to the breakpoint so
       the desktop office desk keeps its density. */
    .b2b-root :is(.b2b-link, .b2b-iconbtn, .b2b-btn-chip,
                  .b2b-nav-link, .b2b-nav-group-header) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .b2b-root .b2b-iconbtn {
        min-width: 44px;
        justify-content: center;
    }
    .b2b-root :is(.b2b-nav-link, .b2b-nav-group-header) { display: flex; }
}

@media (max-width: 899px) {
    /* The avatar still opens the menu; the name and role are the first thing
       that can go when the topbar runs out of room. */
    .b2b-usermenu-meta { display: none; }
}

@media (max-width: 767px) {
    .b2b-topbar { justify-content: space-between; }
}

@media (max-width: 639px) {
    /* At phone width the balance and the top-up shortcut cannot both fit
       beside the menu, bell and avatar. The balance wins — it answers "can I
       pay for a service right now", and topping up is one tap away via the drawer's
       Finance > Wallet and the dashboard's own Add funds link. */
    .b2b-topbar-right > .b2b-btn-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-sidebar { transition: none; }
}

/* The toggle is a drawer affordance only — the desktop sidebar is always up. */
.b2b-navtoggle { display: none; }

/* ====================== SHELL — COLLAPSIBLE RAIL (>= lg) ================== */
/* At >= lg the sidebar can be collapsed to an icon rail. B2bShell puts
   `is-collapsed` on .b2b-root; narrowing --b2b-sidebar-w is enough to move the
   topbar and main, the rest only hides labels and recentres the icons.
   Below lg the class is ignored: the drawer always opens at full width. */
.b2b-brand .b2b-brand-title, .b2b-nav-link, .b2b-nav-group-header { min-width: 0; }
.b2b-brand-name, .b2b-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-railtoggle-ico { transition: transform .2s ease; }
[dir="rtl"] .b2b-railtoggle-ico { transform: scaleX(-1); }

@media (min-width: 1024px) {
    .b2b-root.is-collapsed { --b2b-sidebar-w: 72px; }

    /* Scoped here so it never replaces the drawer's transform transition. */
    .b2b-sidebar, .b2b-topbar, .b2b-main {
        transition: width .2s ease, inset-inline-start .2s ease, margin-inline-start .2s ease;
    }

    .b2b-root.is-collapsed .b2b-sidebar { overflow-x: hidden; }
    .b2b-root.is-collapsed .b2b-brand { padding-inline: 0; display: flex; justify-content: center; }
    .b2b-root.is-collapsed .b2b-brand .b2b-brand-title { justify-content: center; }
    .b2b-root.is-collapsed :is(.b2b-brand-name, .b2b-brand p, .b2b-nav-label,
                               .b2b-chevron, .b2b-nav-group-header .b2b-nav-badge,
                               .b2b-nav-children) { display: none; }

    .b2b-root.is-collapsed .b2b-nav { padding-inline: 10px; overflow-x: hidden; }
    .b2b-root.is-collapsed :is(.b2b-nav-link, .b2b-nav-group-header) {
        justify-content: center; gap: 0; padding-inline: 0;
        position: relative;
    }
    /* The open-group state has no visible children in the rail; only the
       group holding the current page stays highlighted. */
    .b2b-root.is-collapsed .b2b-nav-group.open:not(.has-active) .b2b-nav-group-header {
        color: var(--b2b-on-surface-variant);
    }
    .b2b-root.is-collapsed .b2b-nav-group.has-active .b2b-nav-group-header {
        background: var(--b2b-container-highest);
    }
    /* Unread support replies: a dot on the icon instead of the count pill. */
    .b2b-root.is-collapsed .b2b-nav-group-header:has(.b2b-nav-badge)::after {
        content: ""; position: absolute; top: 8px; inset-inline-end: 14px;
        width: 8px; height: 8px; border-radius: 999px; background: var(--b2b-action);
    }

}

/* The rail toggle is a desktop affordance; below lg the drawer toggle takes
   its place. Specificity matches the touch-target `:is(.b2b-iconbtn …)` rule
   above and comes later, so it wins there. */
.b2b-railtoggle { flex: 0 0 auto; }
@media (max-width: 1023px) {
    .b2b-root .b2b-railtoggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-sidebar, .b2b-topbar, .b2b-main, .b2b-railtoggle-ico { transition: none; }
}

/* Platform logo (white round badge, readable on light and dark surfaces) */
.platform-logo {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}