/* CONSOLIDATED 2026-07-07: bb-ui + bb-tables + bb-dashboard + bb-settings merged in
   below; those four <link>s were removed from layouts/app.blade.php and the files
   deleted. This is the single component sheet, loaded right after bb-tokens.css.
   Each merged section keeps its original header. No page markup was changed. */

/* ============================================================================
   BizBaby components — Phase 2 of the design system (DESIGN-SYSTEM-PLAN.md).
   Reads ONLY tokens from bb-tokens.css. No !important. Owner-approved via the
   three mockups (dashboard / customers / settings) 2026-07-06.
   Blade components live in resources/views/components/bb/.
   ============================================================================ */

/* ------------------------------- buttons ------------------------------- */
.bb-btn {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-m);
    font-weight: 600;
    border-radius: var(--bb-radius-s);
    height: 40px;
    box-sizing: border-box;
    padding: 0 18px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bb-btn--primary { background: var(--bb-primary); color: var(--bb-on-primary); }
.bb-btn--primary:hover { background: var(--bb-primary-hover); }
.bb-btn--secondary { background: var(--bb-surface); color: var(--bb-primary); border-color: var(--bb-primary); }
.bb-btn--secondary:hover { background: var(--bb-primary-soft); }
.bb-btn--ghost { background: transparent; color: var(--bb-text-2); }
.bb-btn--ghost:hover { background: var(--bb-primary-soft); color: var(--bb-primary); }
.bb-btn--danger { background: var(--bb-surface); color: var(--bb-danger); border-color: var(--bb-danger); }
.bb-btn--danger:hover { background: var(--bb-danger-bg); }
.bb-btn--s { height: 32px; padding: 0 13px; font-size: var(--bb-fs-s); }
/* Converted org-side buttons KEEP their legacy JS hook (.action/.custom-action), and the legacy
   .action{padding:10px} (stafter-table.css / modal-actions.css) was squeezing the text against the
   edges. Make the .bb-btn component's roomier padding win (matches the header "New" button). */
.bb-btn.action:not(.bb-btn--s), .bb-btn.custom-action:not(.bb-btn--s) { padding: 0 18px; }
.bb-btn--s.action, .bb-btn--s.custom-action { padding: 0 13px; }
.bb-btn--block { width: 100%; }
/* icon SLOT — locks any svg/img to 16px so a button's height never depends on its icon (killed the 42/36 drift) */
.bb-btn__icon { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.bb-btn__icon > svg, .bb-btn__icon > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bb-btn--s .bb-btn__icon { width: 14px; height: 14px; }
/* on-click / pressed feedback — a small press + a darker shade per intent */
.bb-btn:active { transform: translateY(1px); }
.bb-btn--primary:active { background: color-mix(in srgb, var(--bb-primary) 80%, #000); }
.bb-btn--secondary:active { background: var(--bb-primary-soft); }
.bb-btn--ghost:active { background: var(--bb-primary-soft); }
.bb-btn--danger:active { background: var(--bb-danger-bg); }
/* link — a text action styled as a link (CSV download, "see example", section links).
   Two tones: red (default) and muted (goes red on hover). Underline on hover, darkens on click.
   Renders <a> (real link) or <button> (JS action) — never a <div>. */
.bb-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: 500; line-height: inherit; color: var(--bb-primary); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bb-primary) 40%, transparent); text-underline-offset: 2px; transition: color .12s; }
.bb-link:hover { text-decoration-color: currentColor; }
.bb-link:active { color: color-mix(in srgb, var(--bb-primary) 78%, #000); }
.bb-link--muted { color: var(--bb-text-2); text-decoration-color: color-mix(in srgb, var(--bb-text-2) 35%, transparent); }
.bb-link--muted:hover { color: var(--bb-primary); text-decoration-color: currentColor; }
.bb-link--muted:active { color: color-mix(in srgb, var(--bb-primary) 78%, #000); }
/* title — the page-title component (26/700), replaces legacy .title / .bb-standard-title paint */
.bb-title { font-family: var(--bb-font-display); font-size: var(--bb-fs-2xl); font-weight: var(--bb-fw-bold); letter-spacing: -.4px; line-height: var(--bb-lh-tight); color: var(--bb-text); margin: 0 0 10px; }
/* Type-1 page-head — title left, actions right, one clean row at the top of the frame.
   Replaces the legacy "title alone + buttons crammed in the table toolbar" layout. */
.bb-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.bb-page-head .bb-title { margin: 0; }
.bb-page-head__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bb-page-head__desc { font-size: var(--bb-fs-m); color: var(--bb-text-2); line-height: var(--bb-lh-body); max-width: 760px; margin: 0; }
.bb-page-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .bb-page-head { gap: 12px; } .bb-page-head__actions { width: 100%; } }
.bb-btn[disabled], .bb-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bb-btn.is-loading { pointer-events: none; opacity: .85; }
.bb-btn.is-success { background: var(--bb-success-bright); color: #fff; border-color: transparent; }
.bb-spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: bb-spin .7s linear infinite;
}
.bb-btn--secondary .bb-spin, .bb-btn--ghost .bb-spin, .bb-btn--danger .bb-spin {
    border-color: var(--bb-primary-soft);
    border-top-color: var(--bb-primary);
}
@keyframes bb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-spin { animation-duration: 1.5s; } }

/* ---------------------------- form fields ------------------------------ */
.bb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-field > label { font-size: var(--bb-fs-s); font-weight: 600; color: var(--bb-text-2); margin: 0; }
.bb-field__help { margin: 0; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.bb-input, .bb-select, .bb-textarea {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-m);
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    padding: 10px 12px;
    width: 100%;
}
.bb-input:focus, .bb-select:focus, .bb-textarea:focus {
    outline: none;
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}
.bb-input[readonly] { background: var(--bb-inset); color: var(--bb-text-2); }
.bb-input::placeholder, .bb-textarea::placeholder { color: var(--bb-text-3); }
body[data-bb-skin="espresso"] .bb-textarea { color-scheme: dark; }
.bb-select {
    appearance: none;
    background-color: var(--bb-select-bg);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

/* ------------------------------- chips --------------------------------- */
.bb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--bb-font);
    font-size: var(--bb-fs-xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 4px 8px;
    line-height: 1;
}
.bb-chip--amber { background: var(--bb-amber-bg); color: var(--bb-amber); }
.bb-chip--success { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-chip--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-chip--info { background: var(--bb-info-bg); color: var(--bb-text-2); }

/* ------------------------------ banners -------------------------------- */
.bb-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--bb-radius-m);
    padding: 12px 14px;
    font-size: var(--bb-fs-m);
    line-height: 1.45;
}
.bb-banner--success { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-banner--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-banner--amber { background: var(--bb-amber-bg); color: var(--bb-amber); }
.bb-banner--info { background: var(--bb-info-bg); color: var(--bb-text-2); }
.bb-banner__ic {
    flex: none; width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; margin-top: 1px;
}

/* -------------------------------- tabs --------------------------------- */
.bb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-tab {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-m);
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--bb-radius-s);
    border: 1px solid var(--bb-border-strong);
    background: var(--bb-surface);
    color: var(--bb-text-2);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.bb-tab:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
.bb-tab.on { background: var(--bb-primary); border-color: var(--bb-primary); color: var(--bb-on-primary); }
.bb-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bb-border); flex-wrap: wrap; }
.bb-subtab {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-m);
    font-weight: 500;
    padding: 10px 14px;
    color: var(--bb-text-2);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.bb-subtab:hover { color: var(--bb-primary); }
.bb-subtab.on { color: var(--bb-primary); border-bottom-color: var(--bb-primary); font-weight: 600; }

/* -------------------------------- card --------------------------------- */
.bb-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
}
.bb-card--pad { padding: var(--bb-sp-5); }
.bb-card__title {
    margin: 0;
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text);
}
.bb-card__description {
    margin: var(--bb-sp-1) 0 0;
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-2);
}
.bb-text-secondary { color: var(--bb-text-2) !important; }
.bb-choice-stack { display: grid; gap: var(--bb-sp-2); }
.bb-choice-row { display: flex; align-items: center; gap: var(--bb-sp-4); flex-wrap: wrap; }
.bb-consent {
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: var(--bb-sp-3) var(--bb-sp-4);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.bb-consent .bb-check__box { margin-top: 1px; }

/* ---------------------- page scaffolding ------------------------------- */
/* Fluid: fills the app content area, so it follows the sidebar collapse.
   Never a fixed width (owner rule). Narrow focused flows cap the CARD, not the page. */
.bb-page { width: 100%; padding: 16px 30px 60px; display: grid; gap: var(--bb-sp-4);
    align-content: start; background: var(--bb-bg); min-height: calc(100vh - 60px); }
/* Type-2 page frame: one centered, capped shell for the heading and its content. */
.bb-page--centered { max-width: 1130px; margin-right: auto; margin-left: auto; }
.bb-card--narrow { max-width: 860px; margin: 0 auto; width: 100%; }

/* ===================== SETTINGS HUB (ds-settings-hub) =====================
   A Type-1 page whose "card" is a LIST of setting-section links instead of a table
   (Service Settings, Jobs settings). Same frame as every list page: a breadcrumb head
   (Back + title) → a plain-language description → 20px → ONE .bb-card (radius-l, tokenized
   border, shadow) holding the rows. Rows are tokenized dividers with a full-width hover so
   the list reads as navigable. Replaces the divergent legacy containers (jobs used Bootstrap
   `border rounded` = 4px; service-list had no border at all). */
/* the head is a normal <x-bb.page-head>__main (Back link → title → description, all left-aligned,
   5px column gap) — NOT the old inline breadcrumb (which indented the title after Back and left
   the description misaligned under Back with a 30px dead gap). */
.ds-hub-back { display: inline-flex; align-items: center; gap: 6px; color: var(--bb-primary); font-weight: 500; font-size: 14px; text-decoration: none; margin-bottom: 2px; }
.ds-hub-back:hover { color: var(--bb-primary-hover); }
.ds-hub-back svg { width: 15px; height: 15px; }
/* the shared svg-icon-sidebar wrapper ships an .icon.mr-3 (16px) — on top of the flex
   gap:6px that stacked to a ~23px arrow→"Back" gap (owner: "arrow feels detached from the
   word"). Neutralise the wrapper margin so the flex gap alone (6px) controls the spacing. */
.ds-hub-back .icon { margin: 0 !important; }
.ds-hub-back svg path, .ds-hub-back svg line, .ds-hub-back svg polyline, .ds-hub-back svg rect { stroke: currentColor !important; }
.ds-settings-hub { overflow: hidden; }
.ds-settings-hub .setting-rows { background: transparent !important; padding: 0 !important; }
.ds-settings-hub .setting-row { padding: 16px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--bb-border) !important; transition: background .12s; }
.ds-settings-hub .setting-row:last-child { border-bottom: none !important; }
.ds-settings-hub .setting-row:hover { background: var(--bb-primary-soft); }
.ds-settings-hub .setting-row-link { color: var(--bb-text); font-size: 15px; font-weight: 600; margin-bottom: 6px; display: block; }
.ds-settings-hub .setting-row:hover .setting-row-link { color: var(--bb-primary); }
.ds-settings-hub .setting-row-desc { color: var(--bb-text-2); font-size: 13px; }
.bb-page-title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-2xl);
    font-weight: var(--bb-fw-bold);
    letter-spacing: -.4px;
    line-height: var(--bb-lh-tight);
    color: var(--bb-text);
}
.bb-section-title {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text);
}
.bb-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    flex-wrap: wrap;
    padding-top: var(--bb-sp-4);
    border-top: 1px solid var(--bb-border);
    margin-top: var(--bb-sp-5);
}
.bb-actions__right { display: flex; gap: var(--bb-sp-3); margin-left: auto; }

/* ------------------------------ stepper -------------------------------- */
.bb-stepper { display: flex; gap: var(--bb-sp-6); flex-wrap: wrap; }
.bb-step { display: flex; align-items: center; gap: 9px; color: var(--bb-text-3); font-size: var(--bb-fs-m); font-weight: var(--bb-fw-medium); }
.bb-step__dot {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    border: 2px solid var(--bb-border-strong); background: var(--bb-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--bb-fw-bold); color: var(--bb-text-3);
}
.bb-step.active { color: var(--bb-text); font-weight: var(--bb-fw-semibold); }
.bb-step.active .bb-step__dot { border-color: var(--bb-primary); color: var(--bb-primary); }
.bb-step.complete { color: var(--bb-text-2); }
.bb-step.complete .bb-step__dot { background: var(--bb-success-bright); border-color: var(--bb-success-bright); color: #fff; }

/* The application modal contract is .modal.standard-modal.
   Its universal, tokenized anatomy is defined in the STANDARD-MODAL section below. */

/* ------------------------------ table ---------------------------------- */
/* the stafter table, tokenized: structure/behaviour preserved 1:1
   (owner rule). Links = brand red (owner decision 2026-07-06). */
.bb-tbl-shell { border: 1px solid var(--bb-border); border-radius: var(--bb-radius-l); overflow: hidden; background: var(--bb-surface); box-shadow: var(--bb-shadow-1); }
/* the PLAIN page card (owner 2026-07-09): the official wrapper for non-table content — settings/form
   cards, page content cards. Tables keep .bb-tbl-shell; everything else that draws a rounded surface
   card is .bb-card. UNSCOPED on purpose (legacy .wrapper-view/.content-box keep their classes as hooks). */
.bb-card { background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-l); box-shadow: var(--bb-shadow-1); }
/* Type-1 list frame: page-head actions, tabs, then the existing table without a second outer card. */
.bb-list-frame {
    padding: 0 !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.bb-list-frame > .subtabs { flex-wrap: nowrap; overflow-x: auto; }
.bb-list-frame .data-tables { margin-top: 0 !important; }
.bb-tbl-top { background: var(--bb-inset); border-bottom: 1px solid var(--bb-border); padding: var(--bb-sp-3) var(--bb-sp-4); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-tbl { width: 100%; border-collapse: collapse; font-size: var(--bb-fs-m); font-family: var(--bb-font); }
.bb-tbl thead th { background: var(--bb-inset); font-weight: var(--bb-fw-medium); text-align: left; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--bb-border); border-right: 1px solid var(--bb-border); white-space: nowrap; cursor: pointer; position: relative; }
.bb-tbl thead th:last-child { border-right: none; }
.bb-tbl td { padding: 0; border-bottom: 1px solid var(--bb-border); border-right: 1px solid var(--bb-border); vertical-align: top; white-space: nowrap; }
.bb-tbl td:last-child { border-right: none; }
.bb-tbl td > .bb-cell { min-height: 67px; padding: 14px 12px; line-height: var(--bb-lh-body); display: flex; flex-direction: column; justify-content: center; } /* calibrated to the OWNER-APPROVED list-row geometry (68px rows, jobs-flow reference) — the spec follows the approved design, not the other way round */
.bb-tbl td:has(> input[type=checkbox]), .bb-tbl th:has(> input[type=checkbox]) { vertical-align: middle; }
.bb-tbl tbody tr:nth-child(odd) { background: var(--bb-zebra); }
.bb-tbl tbody tr { transition: background .15s; }
.bb-tbl tbody tr:hover { background: var(--bb-row-hover); }
.bb-tbl .bb-postfix { color: var(--bb-text-3); font-size: var(--bb-fs-s); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.bb-tbl a { color: var(--bb-primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bb-primary) 35%, transparent); }
.bb-tbl a:hover { text-decoration-color: currentColor; }
.bb-tbl-bottom { background: var(--bb-inset); border-top: 1px solid var(--bb-border); padding: 10px var(--bb-sp-4); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--bb-text-2); font-size: 13px; }
.bb-pager { display: flex; gap: 6px; }
.bb-pg { border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius-s); padding: 8px 13px; font-size: 13px; background: var(--bb-surface); color: var(--bb-text-2); cursor: pointer; }
.bb-pg:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
.bb-pg.active { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; font-weight: var(--bb-fw-bold); }
.bb-pg.is-gap { border: 0; background: transparent; color: var(--bb-text-3); cursor: default; padding-left: 4px; padding-right: 4px; }
.bb-pg.is-disabled { opacity: .4; pointer-events: none; } /* boundary arrows / single-page pager stay visible like the legacy pagers did */
/* stafter-table.css hard-codes odd customer rows to #fff and a #f5e9ec hover — a WHITE <tr> that
   flashes on hover in espresso. Tokenise both (extra .ds-table ancestor beats stafter's specificity). */
/* UNIVERSAL zebra + hover for EVERY ds-table table. Was scoped to .customers-manage — other pages
   (Price Book, etc.) kept a hard-coded WHITE odd <tr> (rgb(255,255,255) even in espresso) + the legacy
   .stafter-table-body>tr:hover{#f5e9ec !important}, so the white flashed on hover. Force the ROW *and*
   its cells to tokens (odd=zebra, even=surface, hover=primary-soft) on both table structures
   (.stafter-table-body and .data-view table). main:has(.ds-table) out-specifies the legacy !important. */
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):nth-child(odd),
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):nth-child(odd) > td,
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):nth-child(odd),
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):nth-child(odd) > td { background: var(--bb-zebra) !important; }
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):nth-child(even),
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):nth-child(even) > td,
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):nth-child(even),
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):nth-child(even) > td { background: var(--bb-surface) !important; }
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):hover,
main:has(.ds-table) .stafter-table-body > tr:not(.head):not(.more-info-container):not(.expandable-content-row):hover > td,
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):hover,
main:has(.ds-table) .data-view table tr:not(.head):not(.more-info-container):hover > td { background: var(--bb-row-hover) !important; }
/* the download link wrapper still carries a white-ish .action-row bg on some pages */
.ds-table .action-row.action-row-white, main:has(.ds-table) .action-row-white { background: transparent !important; }

/* ------------------------- tooltip / popover --------------------------- */
/* hover tip: <span class="bb-tip" data-tip="text">?</span> */
.bb-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bb-text-3); color: #fff; font-size: 11px; font-weight: var(--bb-fw-bold); cursor: help; }
.bb-tip:hover { background: var(--bb-primary); }
.bb-tip::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    background: var(--bb-surface); color: var(--bb-text-2);
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m);
    box-shadow: var(--bb-shadow-2);
    padding: 9px 12px; width: max-content; max-width: 240px; white-space: normal;
    font-size: var(--bb-fs-s); font-weight: var(--bb-fw-regular); line-height: var(--bb-lh-body); text-transform: none;
    opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 1600;
}
.bb-tip:hover::after { opacity: 1; }
/* noticeable NOTE chip: a labelled amber pill that reveals a longer caveat on hover — for
   warnings too long to sit inline around a table (owner: Website Analytics "Important!" band).
   <span class="bb-note-tip" tabindex="0" data-tip="…"><svg/>Important</span> */
.bb-note-tip { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 3px 10px 3px 8px; border-radius: 20px; background: var(--bb-amber-bg); color: var(--bb-amber); font-size: var(--bb-fs-xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1; cursor: help; border: 1px solid transparent; white-space: nowrap; }
.bb-note-tip:hover, .bb-note-tip:focus { border-color: var(--bb-amber); outline: none; }
.bb-note-tip svg { width: 13px; height: 13px; flex: none; }
.bb-note-tip::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: calc(100% + 8px);
    background: var(--bb-surface); color: var(--bb-text-2);
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); box-shadow: var(--bb-shadow-2);
    padding: 10px 13px; width: max-content; max-width: 320px; white-space: normal;
    font-size: var(--bb-fs-s); font-weight: var(--bb-fw-regular); letter-spacing: normal; text-transform: none; line-height: var(--bb-lh-body);
    opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 1600;
}
.bb-note-tip:hover::after, .bb-note-tip:focus::after { opacity: 1; }
/* click popover: rich explainer opened by [data-bb-popover-toggle] (bb-components.js) */
.bb-popover-wrap { position: relative; display: inline-flex; }
.bb-popover {
    position: absolute; top: calc(100% + 10px); left: 0; width: 270px;
    background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l); box-shadow: var(--bb-shadow-2);
    padding: var(--bb-sp-4); z-index: 1600; display: none;
}
.bb-popover.open { display: block; }
.bb-popover__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: var(--bb-fw-semibold); font-size: var(--bb-fs-m); }
.bb-popover__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bb-surface-2); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.bb-popover__body { font-size: var(--bb-fs-s); color: var(--bb-text-2); line-height: var(--bb-lh-body); }

/* ------------------------- responsive rules ---------------------------- */
/* Architecture breakpoints (align with the app's existing 520/770/900):
     <=520  phone      — single column, full-width modals, stacked actions
     <=900  small/tab  — reduced page padding, wrapping toolbars
   Components are fluid by default; never fixed pixel widths in pages. */
@media (max-width: 900px) {
    .bb-page { padding: 16px 14px 48px; }
    .bb-actions { flex-direction: column; align-items: stretch; }
    .bb-actions__right { margin-left: 0; flex-wrap: wrap; }
    .bb-actions .bb-btn { width: 100%; }
    .bb-tbl-shell { overflow-x: auto; }
}
@media (max-width: 520px) {
    .bb-stepper { gap: var(--bb-sp-3); }
    .bb-tabs .bb-tab, .bb-subtabs .bb-subtab { padding-left: 10px; padding-right: 10px; }
}

/* ============================= org-side LEFT NAV =============================
   Mapped 1:1 to the approved mockup .side / .s-item (doc a3d99941). The app keeps
   its collapse transform + off-canvas mobile behaviour; we only repaint to tokens.
   Structure: .navbar-vertical-left(.opened) > .side-nav-container
              > ul.navbar-nav > li(.current = active) > a > .icon(svg) + .section-name
   Doc values: side 212px / white / 1px --bb-border right rule / pad 14px 10px;
   s-item pad 9/12, radius 8, gap 11, text-2, mb 2; icon 17px currentColor;
   hover/active = primary-soft + primary; active label 600. */

/* container. NOTE on width: the doc .side is 212px, but the app's opened width is
   182px and that value is load-bearing — the page content clears the fixed sidebar
   via a translate hack (main.compressed translateX(120px) + ~85px internal slack,
   tuned to 182) and the logo header is pinned to 181px. Widening to 212 clips the
   page title (7px overlap) and misaligns the logo column; matching it exactly needs
   a global content-offset shift (risks h-scroll via width:calc(100% - 110px)). So we
   keep 182 and take every other doc value; revisit the width as a global-layout task. */
.navbar-vertical-left { border-top: none !important; border-right: 1px solid var(--bb-border) !important; }
.side-nav-container { padding: 14px 10px !important; }

/* items */
.side-nav-container ul.navbar-nav { width: 100%; }
.side-nav-container ul.navbar-nav > li {
    padding: 11px 12px !important; /* owner: taller/airier rows — a small step beyond the doc's 9px */
    margin: 0 0 3px 0 !important;
    border-radius: var(--bb-radius-m);
    color: var(--bb-text-2);
    font-weight: 400;
    transition: background .15s, color .15s;
}
.side-nav-container ul.navbar-nav > li > a { color: inherit !important; font-weight: inherit !important; display: flex; align-items: center; gap: 11px; width: 100%; }
/* dropdown items (item-with-dropdown, e.g. Communications) use a .dropdown-section
   wrapper instead of a plain <a>; drop its extra pl-md-3 and give the inner
   icon+label row the same 11px gap so its icon column lines up with simple items. */
.side-nav-container ul.navbar-nav > li > .dropdown-section { padding-left: 0 !important; width: 100%; color: inherit; }
.side-nav-container ul.navbar-nav > li > .dropdown-section > .d-flex { gap: 11px; width: 100%; }
.side-nav-container ul.navbar-nav > li .section-name { font-size: 13.5px !important; font-weight: inherit; }

/* icon — main nav glyph is 17px and follows the row colour (grey default, red on
   hover/active); replaces the legacy 40px-tall #1A1A1A stroked wrapper. Overlay
   badges (.attention-circle vehicle warning, .lock-icon-new plan lock) keep their
   own art + semantic colour and are excluded from the recolour. */
.side-nav-container ul.navbar-nav > li .icon { margin: 0 !important; height: auto !important; color: currentColor; }
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg { width: 17px !important; height: 17px !important; }
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg path,
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg rect,
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg line,
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg circle,
.side-nav-container ul.navbar-nav > li .icon:not(.attention-circle):not(.lock-icon-new) svg polyline { stroke: currentColor !important; }
/* fill-based glyphs (vehicle-car, website-builder) follow the colour via fill */
.side-nav-container ul.navbar-nav > li .icon.vehicle-car svg path,
.side-nav-container ul.navbar-nav > li .icon.website-builder svg path { fill: currentColor !important; stroke: none !important; }
/* vehicle-warning badge keeps the doc's red alert colour */
.side-nav-container ul.navbar-nav > li .warning-icon .icon svg path { stroke: var(--bb-primary) !important; }

/* hover + active */
.side-nav-container ul.navbar-nav > li:hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
.side-nav-container ul.navbar-nav > li.current { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
.side-nav-container ul.navbar-nav > li.current .section-name { font-weight: 600 !important; }

/* Plan-gated navigation — one calm, informative treatment in both rail states.
   Expanded: the required plan sits under the feature name and a single lock badge
   anchors the row. Collapsed: the badge attaches to the icon and a compact flyout
   names the feature + plan on hover/focus. This replaces the two hardcoded gray SVG
   locks and the 11px absolutely-positioned sentence from navbar-left.scss. */
.side-nav-container ul.navbar-nav > li.locked {
    min-height: 50px;
    color: var(--bb-text-2) !important;
}
.side-nav-container ul.navbar-nav > li.locked,
.side-nav-container ul.navbar-nav > li.locked * {
    color: var(--bb-text-2) !important;
}
.side-nav-container ul.navbar-nav > li.locked:hover,
.side-nav-container ul.navbar-nav > li.locked:focus-within {
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
}
.side-nav-container ul.navbar-nav > li.locked:hover > a,
.side-nav-container ul.navbar-nav > li.locked:focus-within > a,
.side-nav-container ul.navbar-nav > li.locked:hover > .dropdown-section,
.side-nav-container ul.navbar-nav > li.locked:focus-within > .dropdown-section,
.side-nav-container ul.navbar-nav > li.locked:hover .sidebar-plan-label,
.side-nav-container ul.navbar-nav > li.locked:focus-within .sidebar-plan-label {
    color: var(--bb-primary) !important;
}
.side-nav-container ul.navbar-nav > li.locked .sidebar-plan-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center !important;
    gap: 1px;
    line-height: 1.2;
}
.side-nav-container ul.navbar-nav > li.locked .sidebar-plan-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bb-text-2) !important;
}
.side-nav-container ul.navbar-nav > li.locked .sidebar-plan-meta {
    display: block;
    color: var(--bb-text-3) !important;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-medium);
    white-space: nowrap;
}
.side-nav-container ul.navbar-nav > li.locked .sidebar-plan-lock {
    position: absolute;
    left: 10px;
    right: auto;
    top: -4px;
    transform: none;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--bb-border);
    border-radius: 50%;
    background: var(--bb-inset);
    color: var(--bb-text-3) !important;
    box-shadow: var(--bb-shadow-1);
}
.side-nav-container ul.navbar-nav > li.locked > a,
.side-nav-container ul.navbar-nav > li.locked > .dropdown-section {
    padding-right: 0;
}
.sidebar-plan-tooltip { display: none; }

@media (min-width: 768px) {
    .navbar-vertical-left:not(.opened) { overflow: visible !important; }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked .sidebar-plan-copy {
        display: none !important;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked {
        min-height: 42px;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked > a,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked > .dropdown-section {
        padding-right: 0;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked .sidebar-plan-lock {
        left: 10px;
        right: auto;
        top: -4px;
        width: 17px;
        height: 17px;
        transform: none;
        border-width: 1px;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked:hover .sidebar-plan-tooltip,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked:focus-within .sidebar-plan-tooltip {
        position: absolute;
        left: 42px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 120;
        width: max-content;
        min-width: 190px;
        max-width: 230px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 10px 12px;
        border: 1px solid var(--bb-border);
        border-radius: var(--bb-radius-m);
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-2);
        pointer-events: none;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked .sidebar-plan-tooltip__title { color: var(--bb-text) !important; font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked .sidebar-plan-tooltip__meta { color: var(--bb-text-2) !important; font-size: var(--bb-fs-s); font-weight: var(--bb-fw-regular); }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li.locked .sidebar-plan-tooltip__action { margin-left: 5px; color: var(--bb-primary) !important; font-weight: var(--bb-fw-semibold); }
}

/* ADOPT the design-doc line-icon set for the sidebar (owner: "I like new icons").
   Scoped to the org sidebar only — hide the app sprite and paint the doc glyph as a
   currentColor mask so it follows the row colour (grey default, red on hover/active),
   exactly like the doc .s-item svg. No shared /images/*.svg files touched (revertible). */
.side-nav-container ul.navbar-nav > li .icon.dashboard,
.side-nav-container ul.navbar-nav > li .icon.website-builder,
.side-nav-container ul.navbar-nav > li .icon.jobs-flow,
.side-nav-container ul.navbar-nav > li .icon.service-orders,
.side-nav-container ul.navbar-nav > li .icon.call-center,
.side-nav-container ul.navbar-nav > li .icon.customers,
.side-nav-container ul.navbar-nav > li .icon.employees,
.side-nav-container ul.navbar-nav > li .icon.mail,
.side-nav-container ul.navbar-nav > li .icon.tasker,
.side-nav-container ul.navbar-nav > li .icon.notepad,
.side-nav-container ul.navbar-nav > li .icon.reports,
.side-nav-container ul.navbar-nav > li .icon.vehicle-car,
.side-nav-container ul.navbar-nav > li .icon.price-book {
    width: 17px !important; height: 17px !important;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 17px 17px; mask-size: 17px 17px;
    -webkit-mask-image: none; mask-image: none;
}
.side-nav-container ul.navbar-nav > li .icon.dashboard svg,
.side-nav-container ul.navbar-nav > li .icon.website-builder svg,
.side-nav-container ul.navbar-nav > li .icon.jobs-flow svg,
.side-nav-container ul.navbar-nav > li .icon.service-orders svg,
.side-nav-container ul.navbar-nav > li .icon.call-center svg,
.side-nav-container ul.navbar-nav > li .icon.customers svg,
.side-nav-container ul.navbar-nav > li .icon.employees svg,
.side-nav-container ul.navbar-nav > li .icon.mail svg,
.side-nav-container ul.navbar-nav > li .icon.tasker svg,
.side-nav-container ul.navbar-nav > li .icon.notepad svg,
.side-nav-container ul.navbar-nav > li .icon.reports svg,
.side-nav-container ul.navbar-nav > li .icon.vehicle-car svg,
.side-nav-container ul.navbar-nav > li .icon.price-book svg { display: none !important; }
.side-nav-container ul.navbar-nav > li .icon.dashboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.website-builder { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M3%2012h18M12%203c3%203.5%203%2014%200%2018M12%203c-3%203.5-3%2014%200%2018'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M3%2012h18M12%203c3%203.5%203%2014%200%2018M12%203c-3%203.5-3%2014%200%2018'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.jobs-flow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%205l5%205-9%209H5v-5z'%2F%3E%3Cpath%20d%3D'M13%206l3-3%205%205-3%203'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%205l5%205-9%209H5v-5z'%2F%3E%3Cpath%20d%3D'M13%206l3-3%205%205-3%203'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.service-orders { -webkit-mask-image: url("../images/appointment-calendar.svg"); mask-image: url("../images/appointment-calendar.svg"); }
.side-nav-container ul.navbar-nav > li .icon.call-center { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2012a8%208%200%200%201%2016%200v5a2%202%200%200%201-2%202h-2v-6h4M4%2012v5a2%202%200%200%200%202%202h2v-6H4'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2012a8%208%200%200%201%2016%200v5a2%202%200%200%201-2%202h-2v-6h4M4%2012v5a2%202%200%200%200%202%202h2v-6H4'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.customers { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M2.5%2020c.8-3.2%203.4-5%206.5-5s5.7%201.8%206.5%205'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'9'%20r%3D'2.5'%2F%3E%3Cpath%20d%3D'M16.5%2015.5c2.4.3%204.3%201.8%205%204.5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M2.5%2020c.8-3.2%203.4-5%206.5-5s5.7%201.8%206.5%205'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'9'%20r%3D'2.5'%2F%3E%3Cpath%20d%3D'M16.5%2015.5c2.4.3%204.3%201.8%205%204.5'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.employees { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'7.5'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M5%2020c.9-3.5%203.7-5.5%207-5.5s6.1%202%207%205.5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'7.5'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M5%2020c.9-3.5%203.7-5.5%207-5.5s6.1%202%207%205.5'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpolyline%20points%3D'3%207%2012%2013%2021%207'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpolyline%20points%3D'3%207%2012%2013%2021%207'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.tasker { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'3'%2F%3E%3Cpolyline%20points%3D'8%2012.5%2011%2015.5%2016%209.5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'3'%2F%3E%3Cpolyline%20points%3D'8%2012.5%2011%2015.5%2016%209.5'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.notepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'3'%20width%3D'14'%20height%3D'18'%20rx%3D'2'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'8'%20x2%3D'15'%20y2%3D'8'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'12'%20x2%3D'15'%20y2%3D'12'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'16'%20x2%3D'13'%20y2%3D'16'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'3'%20width%3D'14'%20height%3D'18'%20rx%3D'2'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'8'%20x2%3D'15'%20y2%3D'8'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'12'%20x2%3D'15'%20y2%3D'12'%2F%3E%3Cline%20x1%3D'9'%20y1%3D'16'%20x2%3D'13'%20y2%3D'16'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.reports { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'5'%20y1%3D'20'%20x2%3D'5'%20y2%3D'12'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'20'%20x2%3D'12'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'19'%20y1%3D'20'%20x2%3D'19'%20y2%3D'10'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'5'%20y1%3D'20'%20x2%3D'5'%20y2%3D'12'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'20'%20x2%3D'12'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'19'%20y1%3D'20'%20x2%3D'19'%20y2%3D'10'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.vehicle-car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2016v-4l2-5h10l4%205h2v4h-2'%2F%3E%3Ccircle%20cx%3D'7.5'%20cy%3D'17'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2'%2F%3E%3Cline%20x1%3D'9.5'%20y1%3D'17'%20x2%3D'15'%20y2%3D'17'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2016v-4l2-5h10l4%205h2v4h-2'%2F%3E%3Ccircle%20cx%3D'7.5'%20cy%3D'17'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2'%2F%3E%3Cline%20x1%3D'9.5'%20y1%3D'17'%20x2%3D'15'%20y2%3D'17'%2F%3E%3C%2Fsvg%3E"); }
.side-nav-container ul.navbar-nav > li .icon.price-book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5v14z'%2F%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'7'%20x2%3D'12'%20y2%3D'13'%2F%3E%3Cpath%20d%3D'M14.5%208.5c-.6-.8-1.7-1.2-2.9-.8-1.4.5-1.5%202.2-.1%202.8l1.4.5c1.4.6%201.3%202.3-.1%202.8-1.2.4-2.3%200-2.9-.8'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5v14z'%2F%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'7'%20x2%3D'12'%20y2%3D'13'%2F%3E%3Cpath%20d%3D'M14.5%208.5c-.6-.8-1.7-1.2-2.9-.8-1.4.5-1.5%202.2-.1%202.8l1.4.5c1.4.6%201.3%202.3-.1%202.8-1.2.4-2.3%200-2.9-.8'%2F%3E%3C%2Fsvg%3E"); }

/* Semantic corrections for ambiguous sidebar metaphors. These stay as masks so
   every glyph shares the exact same inactive, hover and active colour. */
.side-nav-container ul.navbar-nav > li .icon.jobs-flow {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h8l4%204v14H7z'%2F%3E%3Cpath%20d%3D'M15%203v5h4M10%2012h6M10%2016h6M3%207v14h4'%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h8l4%204v14H7z'%2F%3E%3Cpath%20d%3D'M15%203v5h4M10%2012h6M10%2016h6M3%207v14h4'%2F%3E%3C%2Fsvg%3E") !important;
}
.side-nav-container ul.navbar-nav > li .icon.employees {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'2.7'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'10'%20r%3D'2.1'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'10'%20r%3D'2.1'%2F%3E%3Cpath%20d%3D'M7.5%2021c.6-3.4%202.2-5.1%204.5-5.1s3.9%201.7%204.5%205.1M1.5%2020c.4-2.8%201.6-4.2%203.5-4.2%201%200%201.9.4%202.6%201.2M22.5%2020c-.4-2.8-1.6-4.2-3.5-4.2-1%200-1.9.4-2.6%201.2'%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'2.7'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'10'%20r%3D'2.1'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'10'%20r%3D'2.1'%2F%3E%3Cpath%20d%3D'M7.5%2021c.6-3.4%202.2-5.1%204.5-5.1s3.9%201.7%204.5%205.1M1.5%2020c.4-2.8%201.6-4.2%203.5-4.2%201%200%201.9.4%202.6%201.2M22.5%2020c-.4-2.8-1.6-4.2-3.5-4.2-1%200-1.9.4-2.6%201.2'%2F%3E%3C%2Fsvg%3E") !important;
}
.side-nav-container ul.navbar-nav > li .icon.automation {
    width: 17px !important; height: 17px !important; flex: none !important;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 17px 17px; mask-size: 17px 17px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%208a8%208%200%200%200-14-3L4%207M4%2016a8%208%200%200%200%2014%203l2-2M4%203v4h4M20%2021v-4h-4'%2F%3E%3Cpath%20d%3D'M13%207l-4%206h4l-2%205%205-7h-4z'%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%208a8%208%200%200%200-14-3L4%207M4%2016a8%208%200%200%200%2014%203l2-2M4%203v4h4M20%2021v-4h-4'%2F%3E%3Cpath%20d%3D'M13%207l-4%206h4l-2%205%205-7h-4z'%2F%3E%3C%2Fsvg%3E");
}
.side-nav-container ul.navbar-nav > li .icon.automation svg { display: none !important; }

/* Final semantic mapping: the jobs pipeline uses the briefcase; the document
   glyph it replaces is now the Estimate icon in the New menu. Keep every
   sidebar glyph at its full box and inherit the row colour so Tasker and
   Notepad cannot fall back to their legacy near-black icon colour. */
.side-nav-container ul.navbar-nav > li .icon.jobs-flow {
    -webkit-mask-image: url("/images/jobs-flow.svg") !important;
    mask-image: url("/images/jobs-flow.svg") !important;
}
.side-nav-container ul.navbar-nav > li .icon { flex: none !important; color: inherit !important; }

/* mobile header: truncate the org name harder so the burger menu can never fall
   off-screen (the skin sets max-width:280px, too wide for a phone). */
@media (max-width: 575.98px) {
    #organisation-info .organisation-name { max-width: 34vw !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
}


/* ===================== merged from bb-ui.css ===================== */

/* ============================================================================
   BizBaby Porcelain — THE component library. Ported VERBATIM from the design
   artifacts (design-set 0671b733 + page mockups: Dashboard 9c49c616, Settings
   2735be06, Customers a3d99941). This file is the SINGLE SOURCE OF TRUTH for
   components. Blades COMPOSE these classes; nobody hand-writes component CSS.

   Everything is scoped under a `.bb` root class (added to a converted page's
   content wrapper) so these mockup class names (.card/.chip/.field/.input/.tab…)
   never collide with Bootstrap/legacy app CSS. Add a component here ONLY when it
   exists in a design doc and isn't here yet — never invent one.
   Tokens live in bb-tokens.css. Static, no build.
   ============================================================================ */

/* ---- content frame ---- */
.bb .card { background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-l); box-shadow: var(--bb-shadow-1); }
.bb .card-pad { padding: 24px; }
.bb .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bb .page-head h1 { font-size: var(--bb-fs-2xl); letter-spacing: -.4px; }

/* ---- buttons: four intents, two sizes ---- */
.bb .bb-btn { font-size: var(--bb-fs-m); font-weight: 600; border-radius: var(--bb-radius-s); height: 40px; box-sizing: border-box; padding: 0 18px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; transition: .15s; cursor: pointer; text-decoration: none; }
.bb .bb-btn--primary { background: var(--bb-primary); color: #fff; }
.bb .bb-btn--primary:hover { background: var(--bb-primary-hover); }
.bb .bb-btn--secondary { background: var(--bb-surface); color: var(--bb-primary); border-color: var(--bb-primary); }
.bb .bb-btn--secondary:hover { background: var(--bb-primary-soft); }
.bb .bb-btn--ghost { color: var(--bb-text-2); background: transparent; }
.bb .bb-btn--ghost:hover { background: var(--bb-primary-soft); color: var(--bb-primary); }
.bb .bb-btn--danger { background: var(--bb-surface); color: var(--bb-danger); border-color: var(--bb-danger); }
.bb .bb-btn--danger:hover { background: var(--bb-danger-bg); }
.bb .bb-btn--s { height: 32px; padding: 0 13px; font-size: var(--bb-fs-s); border-radius: var(--bb-radius-s); }
.bb .bb-btn--block { width: 100%; }
.bb .bb-btn[disabled], .bb .bb-btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* ---- fields ---- */
.bb .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb .field label { font-size: var(--bb-fs-s); font-weight: 600; color: var(--bb-text-2); }
/* bootstrap's .border utility hardcodes #dee2e6 — on the dark skin every
   "border rounded" wrapper leaked a light hairline; it follows the token now
   (porcelain #EAE4DC is the same warm hairline the rest of the system uses) */
.border.border { border-color: var(--bb-border, #dee2e6) !important; } /* doubled class outweighs the bootstrap shorthand that loads after this sheet */

/* field labels inside the .bb scope match the modal-contract label treatment
   (they inherited random legacy inks before — dim on the dark skin) */
.bb label { color: var(--bb-text-2); font-weight: 600; font-size: var(--bb-fs-s); }
.bb .input, .bb .selectc { font: inherit; font-size: var(--bb-fs-m); color: var(--bb-text); background: var(--bb-surface); border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius-s); padding: 10px 12px; width: 100%; }
.bb .input:focus, .bb .selectc:focus { outline: none; border-color: var(--bb-primary); box-shadow: 0 0 0 3px var(--bb-primary-soft); }
.bb .input[readonly], .bb .input:disabled { background: var(--bb-inset); color: var(--bb-text-2); -webkit-text-fill-color: var(--bb-text-2); }
.bb .selectc:disabled { background-color: var(--bb-inset); color: var(--bb-text-2); opacity: 1; } /* selects lacked a disabled state — Bootstrap's .form-select:disabled won the tie and painted them white */
.bb .selectc { appearance: none; background-color: var(--bb-select-bg); box-shadow: 0 2px 2px rgba(0,0,0,.05); padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 13px center; }
.bb .input::placeholder { color: var(--bb-text-3); }

/* ---- chips + banners ---- */
/* Neutral default (inset bg + secondary text) so a bare .chip is legible on
   BOTH skins — same default the .u-modal contract always had; the status
   modifiers below override it. */
.bb .chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bb-fs-xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 4px; padding: 4px 8px; line-height: 1; background: var(--bb-inset); color: var(--bb-text-2); }
.bb .chip--amber { background: var(--bb-amber-bg); color: var(--bb-amber); }
.bb .chip--success { background: var(--bb-success-bg); color: var(--bb-success); }
.bb .chip--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb .chip--info { background: var(--bb-info-bg); color: var(--bb-text-2); }
.bb .banner { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--bb-radius-m); padding: 12px 14px; font-size: var(--bb-fs-m); line-height: 1.45; }
.bb .banner--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb .banner .ic { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; margin-top: 1px; }

/* ---- tabs (page-level) + subtabs (in-card) ---- */
.bb .tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bb .tab { font-size: var(--bb-fs-m); font-weight: 600; padding: 9px 16px; border-radius: var(--bb-radius-s); border: 1px solid var(--bb-border-strong); background: var(--bb-surface); color: var(--bb-text-2); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; }
.bb .tab:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
.bb .tab.on { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }
/* ---- checkbox / radio component (.bb-check) — tokenized, aligned (was ad-hoc + crooked) ---- */
.bb-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--bb-fs-m); color: var(--bb-text); user-select: none; line-height: 1.3; }
.bb-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.bb-check .bb-check__box { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--bb-border-strong); border-radius: 5px; background: var(--bb-surface); display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.bb-check input:checked + .bb-check__box { background: var(--bb-primary); border-color: var(--bb-primary); }
.bb-check .bb-check__box::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; margin-top: -1px; }
.bb-check input:checked + .bb-check__box::after { transform: rotate(45deg) scale(1); }
.bb-check input:focus-visible + .bb-check__box { box-shadow: 0 0 0 3px var(--bb-primary-soft); }
.bb-check input:disabled + .bb-check__box { opacity: .5; }
.bb-check--radio .bb-check__box { border-radius: 50%; }
.bb-check--radio .bb-check__box::after { width: 8px; height: 8px; border: none; border-radius: 50%; background: #fff; margin: 0; transform: scale(0); }
.bb-check--radio input:checked + .bb-check__box::after { transform: scale(1); }

/* ---- on/off switch component (.bb-switch) — owner-approved 2026-07-09; retires the switch exception.
   Two state drivers: a real <input type=checkbox> (input:checked), or the .is-on class for legacy
   click-toggled switches (website-builder keeps .included as its JS hook and toggles .is-on with it). ---- */
.bb-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; vertical-align: middle; }
.bb-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.bb-switch .bb-switch__track { width: 40px; height: 22px; flex: none; border-radius: 34px; background: var(--bb-border-strong); position: relative; transition: background .2s; }
.bb-switch .bb-switch__track::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bb-switch input:checked + .bb-switch__track, .bb-switch.is-on .bb-switch__track { background: var(--bb-primary); }
.bb-switch input:checked + .bb-switch__track::before, .bb-switch.is-on .bb-switch__track::before { transform: translateX(18px); }
.bb-switch input:disabled + .bb-switch__track { opacity: .5; cursor: default; }
.bb-switch input:focus-visible + .bb-switch__track { box-shadow: 0 0 0 3px var(--bb-primary-soft); }
/* ---- Help modal (#help-modal) — system layout for the support rows (owner: "give it some love").
   Renders OUTSIDE <main> → id-scoped. ---- */
#help-modal .help-bounty-title { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 8px; color: var(--bb-text); }
#help-modal .help-bounty-desc { color: var(--bb-text-2); max-width: 90%; line-height: 1.5; font-size: 13px; }
#help-modal .help-rows { display: flex; flex-direction: column; gap: 18px; }
#help-modal .help-row { display: flex; gap: 14px; align-items: flex-start; }
#help-modal .help-row__icon { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
#help-modal .help-row__icon svg { width: 22px; height: 22px; }
#help-modal .help-row p { margin: 4px 0 0; color: var(--bb-text-2); font-size: 13px; line-height: 1.5; }
#help-modal .help-row .bb-link { font-size: 15px; }

/* ============================================================================
   UNIVERSAL MENU — `.bb-menu` (panel) + `.bb-menu-item` (row). ONE styling and
   ONE hover for every dropdown / fly-out list in the app: the header "+ New"
   dropdown, the sidebar fly-out submenus (Communications → …), the account menu.
   Fully tokenized, so it follows the skin — replaces BOTH the old per-menu block
   (#dropdown-add-entity-menu) and the per-skin hardcoded-hex fly-out rules that
   were duplicated in header-skins.css. Rows may include a shared masked icon.
   `!important` so it wins over the legacy .dropdown paint in app.css.
   ============================================================================ */
.bb-menu { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; box-shadow: var(--bb-shadow-2) !important; padding: 6px !important; min-width: 220px; list-style: none !important; margin: 0; overflow: hidden; }
/* legacy `.dropdown-menu:not(.p-3,.p-2,.p-1){padding:0!important}` (stafter-table.css) out-specifies
   .bb-menu — pin the panel padding for dropdown-flavoured menus like the "+ New" one. */
div.bb-menu.dropdown-menu { padding: 6px !important; }
/* Rows are FLAT and full-width (owner): no per-row radius — a radius bends the
   border-bottom separator ends into "curly" lines; the panel's own radius +
   overflow:hidden round the outer corners instead. width:100% so an anchor row
   inside a fly-out <li> spans the panel and its separator runs edge to edge. */
.bb-menu-item { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 12px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; color: var(--bb-text) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: background .2s, color .2s; }
.bb-menu-item:not(:last-child) { border-bottom: 1px solid var(--bb-border) !important; }
.bb-menu-item:hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
/* children inherit the row's 14px type — legacy p/span rules were inflating the
   "+ New" rows to 15.5px while the fly-out sat at 14px (owner: make them the same) */
.bb-menu-item p, .bb-menu-item span { margin: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; transition: color .2s; }
#dropdown-add-entity-menu .bb-menu-item { min-height: 46px; }
.bb-menu-item__icon { flex: 0 0 18px; color: var(--bb-text-2); transition: color .2s; }
/* the fly-out wraps each link in an <li>: neutralise legacy li margins/bullets;
   the separator lives on the <li> (full row width, always straight) */
.bb-menu > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bb-menu > li::before { display: none !important; content: none !important; }
.bb-menu > li:not(:last-child) { border-bottom: 1px solid var(--bb-border) !important; }
.bb-menu > li .bb-menu-item { border-bottom: 0 !important; }
/* destructive row (Log out) */
.bb-menu-item--danger { color: var(--bb-danger) !important; }
.bb-menu-item--danger:hover { background: var(--bb-danger-bg) !important; color: var(--bb-danger) !important; }
.bb-menu-item--danger svg { stroke: currentColor; }

/* Organisation switcher uses the same menu shell, with enough room and vertical rhythm
   for real company names. This replaces the legacy fixed 260 x 36px geometry. */
.switch-company-menu.bb-menu {
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: min(320px, calc(100vw - 24px));
    padding: 6px !important;
}
.switch-company-menu.bb-menu .switch-company-menu-row {
    min-height: 48px !important;
    height: auto !important;
    padding: 11px 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
}
.switch-company-menu.bb-menu .text-restriction { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 460px) {
    .switch-company-menu.bb-menu .switch-company-menu-row { white-space: normal; }
    .switch-company-menu.bb-menu .text-restriction { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- theme switcher (account menu): segmented pill, one option always on ---- */
.bb-skin-switch { margin: 12px 0 8px; }
.bb-skin-switch__label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--bb-text-3); margin-bottom: 6px; }
.bb-skin-switch__seg { display: flex; gap: 3px; padding: 3px; background: var(--bb-inset); border: 1px solid var(--bb-border); border-radius: 999px; }
.bb-skin-opt { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 0; background: transparent; border-radius: 999px; color: var(--bb-text-2); font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.bb-skin-opt:hover { color: var(--bb-primary); }
.bb-skin-opt.on { background: var(--bb-surface); color: var(--bb-primary); box-shadow: var(--bb-shadow-1); }
.bb-skin-opt svg { width: 14px; height: 14px; flex: none; }

/* The legacy sidebar repaints `.dropdown` (white / transparent) with !important in
   several states (collapsed .only-dropdown, li.visible, .opened). Pin the universal
   panel at matching specificity — but ONE tokenized rule set for BOTH skins, replacing
   the duplicated .skin-porcelain / .skin-espresso hex blocks in header-skins.css. */
.navbar-vertical-left .dropdown.bb-menu,
.navbar-vertical-right .dropdown.bb-menu,
.navbar-vertical-left.only-dropdown li .dropdown.bb-menu,
.navbar-vertical-left li.visible .dropdown.bb-menu,
.navbar-vertical-left .dropdown.bb-menu.opened,
.navbar-vertical-right.only-dropdown li .dropdown.bb-menu,
.navbar-vertical-right li.visible .dropdown.bb-menu,
.navbar-vertical-right .dropdown.bb-menu.opened {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important;
    box-shadow: var(--bb-shadow-2) !important; opacity: 1 !important;
}
.navbar-vertical-left .dropdown.bb-menu li::before,
.navbar-vertical-right .dropdown.bb-menu li::before { display: none !important; content: none !important; }
.navbar-vertical-left .dropdown.bb-menu .bb-menu-item,
.navbar-vertical-right .dropdown.bb-menu .bb-menu-item { color: var(--bb-text) !important; }
.navbar-vertical-left .dropdown.bb-menu .bb-menu-item:hover,
.navbar-vertical-right .dropdown.bb-menu .bb-menu-item:hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }

/* ---- close (x) + help (?) components (were ad-hoc per modal/card - see Exceptions) ---- */
/* !important on color/opacity/text-shadow/float so .bb-close overrides legacy Bootstrap `.close`
   (color:#000, opacity:.5, text-shadow) when retrofitted onto an existing close button. */
.bb-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; border-radius: var(--bb-radius-s); color: var(--bb-text-2) !important; opacity: 1 !important; text-shadow: none !important; float: none !important; font-size: 22px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; }
.bb-close:hover { background: var(--bb-primary-soft); color: var(--bb-primary) !important; }
/* ONE close component, three sizes (owner 2026-07-09): --s for small/medium (standard) modals so the
   header doesn't grow; the bare 32px base is the medium default; --l = the big inset circle, ONLY for
   the full-page universal modal. No other close-X variants may exist. */
.bb-close--s { width: 24px; height: 24px; font-size: 17px; }
.bb-close--l { width: 36px; height: 36px; border-radius: 50%; background: var(--bb-inset); color: var(--bb-text) !important; box-shadow: var(--bb-shadow-1); }
.bb-close--l:hover { background: var(--bb-primary); color: #fff !important; }
.bb-help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--bb-border-strong); border-radius: 50%; color: var(--bb-text-2); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; background: transparent; text-decoration: none; }
.bb-help:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
/* empty-table state (.no-data) was ink -> muted, in espresso it was dark-on-dark */
main:has(.ds-table) .no-data:not(.text-danger):not(.text-primary), main:has(.ds-table) .data-not-found { color: var(--bb-text-2) !important; }
/* ── Type-2 page frame (centered form / settings) — PAGE-LAYOUT-SCHEMAS.md Type 2 ──
   The reusable frame for Type-2 pages: a ~1130px column, centered, that owns the
   vertical rhythm title -> tabs -> content card. Adopted via .ds-settings on the
   wrapper; the gaps live here so blades carry no ad-hoc mt-3 / mb-25 utilities. */
body:has(.ds-settings) #settings { max-width: 1130px; margin-left: auto; margin-right: auto; }
.ds-settings .title-lg.title-organisation { margin-bottom: 16px !important; }
.ds-settings .navigation-settings-tabs { margin: 0 0 25px !important; }
/* the sticky Save footer (.content-box.sticky-elem) stayed white in espresso -> surface + top border */
body:has(.ds-settings) .sticky-elem, body:has(.ds-settings) .content-box.sticky-elem { background: var(--bb-surface) !important; border-top: 1px solid var(--bb-border) !important; }
/* the same sticky bar on non-settings pages (email-template designer etc.): email_templates.js
   forces background:white + a light border inline when the bar sticks (.sticky-elem-active).
   Skin-gate a token override (beats the inline style via !important) so it follows the skin;
   classic (no data-bb-skin) keeps the original white. */
[data-bb-skin] .sticky-elem-active { background-color: var(--bb-surface) !important; border-top-color: var(--bb-border) !important; }
/* subtabs (in-card): UNSCOPED component. Pages carry the real .subtab directly —
   no .bb wrapper, no ds-subtabs adapter. Active state = .on (or .selected). */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bb-border); flex-wrap: wrap; }
.ds-table.ds-subtabs .subtabs,
.ds-table.ds-subtabs #filters.subtabs {
    margin-bottom: 0 !important;
}
@media (min-width: 768px) {
    .ds-table.ds-subtabs .subtabs,
    .ds-table.ds-subtabs #filters.subtabs {
        margin-left: var(--bb-sp-3) !important;
        margin-right: var(--bb-sp-3) !important;
    }
}
/* The tabs and the rounded data panel are one visual object. Several legacy
   order pages put Bootstrap mb-3 on the tabs wrapper and its utility sibling,
   while Jobs uses an ID-level margin reset; both silently defeated the shared
   docking contract. The frame now owns that seam and any legacy wrapper rhythm. */
.ds-table.ds-subtabs .d-flex:has(> .subtabs) {
    margin-bottom: 0 !important;
}
.ds-table.ds-subtabs .d-flex:has(> .subtabs) ~ .right-actions-bar {
    margin-bottom: 0 !important;
}
.ds-table.ds-subtabs > .d-flex.flex-column:has(.subtabs) {
    margin-top: 0 !important;
}
.subtab { font-size: var(--bb-fs-m); font-weight: 500; padding: 10px 14px; color: var(--bb-text-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; }
.subtab:hover { color: var(--bb-primary); text-decoration: none; }
.subtab.on, .subtab.selected, .subtab.active-switcher-button { color: var(--bb-primary); border-bottom-color: var(--bb-primary); font-weight: 600; }
.subtabs:has(> .subtab > .subtab-attention) { padding-top: 17px; }
.subtab:has(> .subtab-attention), .ac-ai-subtab:has(> .subtab-attention) { position: relative; }
.subtab-attention { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; width: max-content; height: 21px; box-sizing: border-box; flex-shrink: 0; margin: 0; padding: 0 7px; border: 1px solid var(--bb-border-strong); border-radius: 999px; color: var(--bb-text-2); background: var(--bb-surface); font-size: var(--bb-fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; }
.subtab-attention__mark { display: block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--bb-text-3); }
.subtab-attention__count { font-weight: 700; }
.subtab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; margin-left: -2px; padding: 0 6px; border: 1px solid var(--bb-border-strong); border-radius: 999px; background: var(--bb-inset); color: var(--bb-text-2); font-size: var(--bb-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
.subtab.on .subtab-count, .subtab.selected .subtab-count, .subtab.active-switcher-button .subtab-count { border-color: color-mix(in srgb, var(--bb-primary) 25%, var(--bb-border)); background: var(--bb-primary-soft); color: var(--bb-primary); }
.subtab-attention--mobile { position: static; transform: none; display: flex; width: max-content; margin: 0 auto 6px; pointer-events: auto; }
/* Deprecated wrapper support: warning pills now belong inside .subtab so their
   visual gap is measured from the visible label, not an invisible container. */
.subtab-stack { display: contents; }

/* divider — one tokenized separator line, reusable anywhere (menus, sections, modals) */
.bb-divider { height: 0; border: 0; border-top: 1px solid var(--bb-border); margin: var(--bb-sp-2) 0; }
.bb-divider--tight { margin: 0; }

/* ==================== DASHBOARD ==================== */
.bb .welcome .wb { color: var(--bb-text-2); font-size: var(--bb-fs-s); }
.bb .welcome h1 { font-size: var(--bb-fs-2xl); letter-spacing: -.4px; margin: 2px 0 4px; }
.bb .welcome a { font-size: var(--bb-fs-s); text-decoration: underline; text-decoration-color: rgba(219,58,87,.4); }
.bb .gs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px 14px; }
.bb .gs-head .t { font-size: var(--bb-fs-l); font-weight: 600; }
.bb .gs-head .pct { color: var(--bb-text-2); font-size: var(--bb-fs-m); display: flex; align-items: center; gap: 10px; }
.bb .gs-head .pct b { color: var(--bb-text); }
.bb .gs-head .fold { color: var(--bb-text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.bb .gs-bar { height: 4px; background: var(--bb-border); position: relative; }
.bb .gs-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bb-success-bright); border-radius: 0 2px 2px 0; }
.bb .gs-groups { display: flex; gap: 6px; background: var(--bb-surface-2); padding: 6px; margin: 16px 24px 4px; border-radius: var(--bb-radius-m); }
.bb .gs-group { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border-radius: var(--bb-radius-s); font-size: var(--bb-fs-m); color: var(--bb-text-2); cursor: pointer; }
.bb .gs-group.on, .bb .gs-group.active { background: var(--bb-surface); box-shadow: var(--bb-shadow-1); color: var(--bb-text); font-weight: 600; }
.bb .gs-list { padding: 6px 24px 14px; }
.bb .gs-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--bb-border); }
.bb .gs-row:last-child { border-bottom: none; }
.bb .gs-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bb-success-bright); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.bb .gs-dot.is-todo { background: var(--bb-border); }
.bb .gs-row .tx { flex: 1; min-width: 0; }
.bb .gs-row .tx b { font-size: var(--bb-fs-m); }
.bb .gs-row .tx p { color: var(--bb-text-2); font-size: var(--bb-fs-s); margin-top: 2px; line-height: 1.45; }
.bb .gs-row .bb-btn { flex: none; min-width: 140px; }
.bb .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 1100px) { .bb .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .bb .kpis { grid-template-columns: 1fr; } }
.bb .kpi { display: flex; flex-direction: column; padding: 18px 18px 16px; }
.bb .kpi-h { display: flex; align-items: center; gap: 8px; color: var(--bb-text-2); font-size: var(--bb-fs-m); margin-bottom: 12px; }
.bb .kpi-h svg { color: var(--bb-text-3); }
.bb .kpi-q { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--bb-text-3); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bb .kpi-q:hover { background: var(--bb-primary); }
.bb .kpi-stat { font-size: 21px; font-weight: 700; letter-spacing: -.3px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.bb .kpi-stat small { font-size: var(--bb-fs-m); font-weight: 500; color: var(--bb-text-2); }
.bb .kpi-sub { color: var(--bb-text-3); font-size: var(--bb-fs-s); margin-top: 3px; }
.bb .kpi-links { border-top: 1px solid var(--bb-border); margin-top: 14px; }
.bb .kpi-link { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--bb-border); color: var(--bb-text); font-size: var(--bb-fs-m); }
.bb .kpi-link:last-child { border-bottom: none; }
.bb .kpi-link:hover { color: var(--bb-primary); }
.bb .kpi-link .arr { margin-left: auto; color: var(--bb-text-3); }
.bb .kpi-link:hover .arr { color: var(--bb-primary); }
.bb .kpi-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bb-danger-bg); color: var(--bb-danger); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.bb .kpi-fill { flex: 1; }
.bb .kpi-train { text-align: center; margin: 12px 0; }
.bb .kpi-train a { font-size: var(--bb-fs-m); font-weight: 500; }
.bb .trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--bb-fs-xs); font-weight: 700; background: var(--bb-success-bg); color: var(--bb-success); border-radius: var(--bb-radius-s); padding: 4px 7px; }
.bb .trend--down { background: var(--bb-danger-bg); color: var(--bb-danger); }
/* KPI status-link rows: app renders dynamic .bar-links-row (overdue invoices, missed
   calls…) with its own status-icon images — present them as the mockup's .kpi-link. */
.bb .bar-links:has(.bar-links-row) { border-top: 1px solid var(--bb-border); margin-top: 14px; }
.bb .bar-links-row a { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--bb-border); color: var(--bb-text); font-size: var(--bb-fs-m); }
.bb .bar-links-row:last-child a { border-bottom: none; }
.bb .bar-links-row a:hover, .bb .bar-links-row a:hover .link-text { color: var(--bb-primary); }
.bb .bar-links-row .link-icon img { width: 18px; height: 18px; }
.bb .bar-links-row .link-arrow { margin-left: auto; display: flex; }
.bb .bar-links-row .link-arrow img { width: 16px; height: 16px; }
/* blur/plan-lock overlay kept from the app */
.bb .kpi .blur-block { border-radius: var(--bb-radius-l); }

/* neutralize legacy .bar/.card centering so the mockup layout wins:
   old dashboard css centers flex children and shrinks buttons to content */
.bb .dashboard-bar-container .bar.kpi,
.bb .kpis .kpi {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    width: auto;
    max-width: none;
    margin: 0;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
    padding: 18px 18px 16px;
}
.bb .kpi .kpi-h { justify-content: flex-start; text-align: left; }
.bb .kpi .kpi-stat { justify-content: flex-start; }
.bb .kpi .kpi-sub { text-align: left; }
.bb .kpi .kpi-links, .bb .kpi .bar-links { width: 100%; }
/* app.css pads empty cards out with min-heights (.bar-links 190px / .bar-control 80px)
   -> kill them so .kpi-fill (not dead space) pins the button to the card bottom */
.bb .kpi .bar-links { min-height: 0 !important; }
.bb .kpi .bar-control { position: static; width: 100%; margin: 0; padding: 0; min-height: 0 !important; }
.bb .kpi .bar-control .bb-btn--block,
.bb .kpi .bar-control .bb-standard-btn {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 10px 18px;
    border-radius: var(--bb-radius-s);
}
.bb .kpi .kpi-train { text-align: center; }
/* Locked KPI cards: explain the requirement separately from the one-line action. */
.bb .kpi-upgrade { display: flex; flex-direction: column; gap: 10px; }
.bb .kpi-upgrade__notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: var(--bb-radius-m); background: var(--bb-inset); }
.bb .kpi-upgrade__icon { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bb-primary-soft); color: var(--bb-primary); }
.bb .kpi-upgrade__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.bb .kpi-upgrade__title { color: var(--bb-text); font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); }
.bb .kpi-upgrade__detail { color: var(--bb-text-2); font-size: var(--bb-fs-s); }
.bb .kpi-upgrade .bb-btn { white-space: nowrap; }
/* NOTE: do not display:none .get-start-steps.hided — the expand JS
   slide-toggles it and a css rule permanently locks the checklist shut
   (learned the hard way). The collapsed band is legacy JS territory. */
/* pin buttons to the card bottom regardless of legacy flex rules */
.bb .kpi .kpi-fill { flex: 1 1 auto; min-height: 0; }
.bb .kpi { height: 100%; }


/* ===================== merged from bb-tables.css ===================== */

/* ============================================================================
   BizBaby design system — SHARED table + page chrome for org-side LIST pages.
   Graduated from the jobs-flow restyle so it can be reused on every business-user
   page that renders the shared stafter-table: Customers, Vehicles, Appointments,
   Reports, Price Book, Team, Leads, Payments, Subscriptions, ...

   CLASS-GATED (.ds-table / .ds-subtabs) so it is INERT until a page opts in. This
   is deliberate: admin, worker-cabinet and the customer cabinet all share
   layouts.app / the stafter-table component, so an ungated restyle would leak into
   them. Opt a page in by adding `ds-table` to its .wrapper-view / table container
   (and `ds-subtabs` if it has #filters .section switching).

   A single `ds-table` on the page drives the whole look via :has() — warm page bg,
   the doc page-title, a transparent wrapper, and the table system. Static, no build.
   Loaded globally in layouts.app after bb-components.css. Bump ?v to bust cache.
   ============================================================================ */

/* ---- page chrome (triggered by any .ds-table on the page) ---- */
main:has(.ds-table) { background: var(--bb-bg) !important; }
/* NO white wrapper container — only the table (and cards/modals) are white on the warm
   page. Some pages' CSS (e.g. customer-cab.css) paints the .main-content / .col-12 content
   wrapper white; strip it so the warm page shows through. This is the container we removed
   on Jobs; keeping it dead everywhere. */
main:has(.ds-table) .main-content,
main:has(.ds-table) > .row > .col-12,
main:has(.ds-table) .content-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; }
/* the doc page-title (26px / 700 / -.4px / ink) — beats each page's legacy .title */
main:has(.ds-table) .title,
main:has(.ds-table) .bb-standard-title {
    font-family: var(--bb-font-display) !important;
    font-size: var(--bb-fs-2xl) !important;
    font-weight: var(--bb-fw-bold) !important;
    letter-spacing: -.4px !important;
    line-height: var(--bb-lh-tight) !important;
    color: var(--bb-text) !important;
}
/* only the table is a card on the warm page — the wrapper is a transparent shell */
.wrapper-view.ds-table, main:has(.ds-table) .wrapper-view.ds-table {
    background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
/* unified rhythm (owner 2026-07-11): no dead band inside the shell — the table docks flush
   (kills the legacy data-tables.css margin-top:10px on every converted list page) */
.ds-table .data-tables { margin-top: 0 !important; }

/* ---- the shared stafter-table -> the doc table system (mirrors jobs-flow) ---- */
.ds-table .stafter-table-wrapper { border:1px solid var(--bb-border); border-radius:var(--bb-radius-l); overflow:hidden; box-shadow:var(--bb-shadow-1); background:var(--bb-surface); }
.ds-table .stafter-table-top { background:var(--bb-inset); border-bottom:1px solid var(--bb-border); }
.ds-table .stafter-table { font-family:var(--bb-font); font-size:var(--bb-fs-m); }
/* ===== ONE table component — identical for stafter-table-*-column cells AND plain
   <th>/<td> (report/analytics tables). Same inset header, same column grid, same
   zebra/hover, same checkbox column. Per the unified-component rule: do NOT add a
   second table treatment; every table on a ds-table page renders through THIS. ===== */
/* header cells */
.ds-table .stafter-table-head-column, .ds-table .stafter-table-head-column-checkbox,
.ds-table .data-view thead th, .ds-table .data-tables thead th {
    background:var(--bb-inset) !important; font-weight:500; color:var(--bb-text); text-align:left;
    border-bottom:1px solid var(--bb-border); border-right:1px solid var(--bb-border); }
/* body cells */
.ds-table .stafter-table-body-column, .ds-table .stafter-table-body-column-checkbox,
.ds-table .data-view tbody td, .ds-table .data-tables tbody td {
    color:var(--bb-text); vertical-align:middle;
    border-bottom:1px solid var(--bb-border); border-right:1px solid var(--bb-border); }
/* padding: stafter wraps content in `> div`; plain cells pad directly (exclude
   stafter cells so they don't double-pad) */
.ds-table .stafter-table-body-column > div, .ds-table .stafter-table-head-column > div { padding:13px 12px; }
.ds-table .data-view th:not([class*="stafter-table"]), .ds-table .data-tables th:not([class*="stafter-table"]),
.ds-table .data-view td:not([class*="stafter-table"]), .ds-table .data-tables td:not([class*="stafter-table"]) { padding:13px 12px; }
/* no trailing column border on the last cell of a row */
.ds-table .stafter-table-head-column:last-child, .ds-table .stafter-table-body-column:last-child,
.ds-table .data-view thead th:last-child, .ds-table .data-view tbody td:last-child,
.ds-table .data-tables thead th:last-child, .ds-table .data-tables tbody td:last-child { border-right:none; }
/* zebra + hover (both structures) */
.ds-table .stafter-table-body tr:nth-child(odd) .stafter-table-body-column,
.ds-table .data-view tbody tr:nth-child(odd) td, .ds-table .data-tables tbody tr:nth-child(odd) td { background:var(--bb-zebra); }
/* EVEN rows must be painted too. The legacy stafter/data-view base CSS leaves a WHITE <tr>
   behind transparent even-row cells — invisible on the white porcelain card, but a glaring
   white stripe in espresso (see Price Book). Give even cells the surface so BOTH parities are
   opaque + tokenized (porcelain: #FFF / #F8F8F8 zebra · espresso: #241D17 / #28211A). */
.ds-table .stafter-table-body tr:nth-child(even) .stafter-table-body-column,
.ds-table .data-view tbody tr:nth-child(even) td, .ds-table .data-tables tbody tr:nth-child(even) td { background:var(--bb-surface); }
.ds-table .stafter-table-body tr:hover .stafter-table-body-column,
.ds-table .data-view tbody tr:hover td, .ds-table .data-tables tbody tr:hover td { background:var(--bb-row-hover); }
/* status highlight: legacy stafter-table.css paints .is_warning cells bootstrap danger
   #DC3545 — a fixed red that never themes. Map to --bb-danger so a warning row stays a red
   alert on both skins (cell + its .bb-cell/span children inherit). */
.ds-table .stafter-table-body-column.is_warning,
.ds-table .stafter-table-body-column.is_warning .bb-cell,
.ds-table .stafter-table-body-column.is_warning span,
.bb .stafter-table-body-column.is_warning,
.bb .stafter-table-body-column.is_warning .bb-cell,
.bb .stafter-table-body-column.is_warning span { color: var(--bb-danger) !important; }
/* ID cell with a warning: the "!" badge (an <img>) and the org-local-id <span> stacked
   VERTICALLY because .bb-cell is flex-direction:column -> the badge sat ABOVE the number
   (owner: should be on the same level as the ID; affects every table with warnings). Lay
   the ID cell out as a centred row so the badge sits inline, left of the number. */
.ds-table td.id-column .bb-cell, .bb-tbl td.id-column .bb-cell,
.stafter-table-body-column.id-column > .bb-cell { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 4px; }
td.id-column .model-warning-icon { flex: none; }
/* the server adds an inline padding-left:10px to the warning id span (it indented the number
   under the old stacked badge); with the inline row it just doubles the gap — pull it back. */
td.id-column .row-org-local-id { padding-left: 0 !important; }
/* the "Actionable Items" filter carries a help "?" (.tooltip-wrapper-filter) absolutely
   positioned at its left. The JS only pads the control clear of the icon on CHANGE, so the
   PRE-SELECTED value rendered the text UNDER the "?" (owner: icon hiding in the select).
   Reserve the space in CSS for any filter that actually contains the icon — the JS still
   sets its own padding on change (12px once the icon hides), which wins over this. */
.filter-select:has(> .tooltip-wrapper-filter) .stafter-filter { padding-left: 46px !important; }
.filter-select > .tooltip-wrapper-filter { margin-left: 12px; }
/* checkbox column = ONE canonical cell: fixed width, header + body identical, centered */
.ds-table .stafter-table-head-column-checkbox, .ds-table .stafter-table-body-column-checkbox { width:44px !important; min-width:44px; padding:0 !important; text-align:center; }
.ds-table [class*="column-checkbox"] .custom-checkbox { display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0; }
.ds-table .stafter-table-postfix { color:var(--bb-text-3); font-size:var(--bb-fs-s); }
.ds-table .stafter-table-link, .ds-table .stafter-action, .ds-table .text-underline, .ds-table .data-view a, .ds-table td a { color: var(--bb-primary) !important; }
/* an "action" column (e.g. Checklist) carries .stafter-action for its red action LINKS in the body,
   but the column HEADER must stay the normal header ink — not red (owner: the Checklist header was
   red while every other header was dark). Applies app-wide to any action-column header. */
.ds-table .stafter-table-head-column.stafter-action,
.ds-table thead .stafter-action,
.ds-table .stafter-table-head .stafter-action { color: var(--bb-text) !important; }
.ds-table .stafter-table-bottom { background:var(--bb-inset); border-top:1px solid var(--bb-border); color:var(--bb-text-2); }
/* the "Showing 1 to N of M entities" count (#pagination-info) inherited Bootstrap ink (#212529) => dark-on-dark in espresso; token it (Lens B: hardcoded dark text) */
.ds-table .stafter-table-bottom .pagination-info-cont, .ds-table #pagination-info { color:var(--bb-text-2) !important; }
/* toolbar controls -> the doc's .tbl-search / .tbl-select / .tbl-export */
.ds-table .stafter-table-top-search { background:var(--bb-surface) !important; border:1px solid var(--bb-border-strong) !important; border-radius:var(--bb-radius-s) !important; height:36px; padding:0 10px; font-size:var(--bb-fs-m); color:var(--bb-text); }
.ds-table .stafter-filter, .ds-table .limitSelect, .ds-table .stafter-form-select, .ds-table select.selectc { appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:var(--bb-select-bg) !important; border:1px solid var(--bb-border-strong) !important; border-radius:var(--bb-radius-s) !important; height:36px; min-width:64px !important; padding-left:12px !important; padding-right:30px !important; box-shadow:0 2px 2px rgba(0,0,0,.05); color:var(--bb-text) !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; }
/* ---- ddslick mobile section-select (jobs-flow + vehicles) -> match the .selectc standard,
   so every mobile tab-select looks IDENTICAL app-wide (owner: the selects were inconsistent —
   ddslick had an icon + h40 + radius-m; .selectc is no-icon + h36 + radius-s). ddslick is a
   client-side jQuery widget we don't cheaply retire, so style its closed box to the .selectc
   spec and drop the icon + its own arrow (the .selectc chevron replaces it). Single source —
   applies to any .ds-subtabs .select-section-change (jobs AND vehicles). ---- */
.ds-subtabs .select-section-change .dd-select {
    background-color: var(--bb-select-bg) !important; border: 1px solid var(--bb-border-strong) !important;
    border-radius: var(--bb-radius-s) !important; height: 36px !important; box-shadow: 0 2px 2px rgba(0,0,0,.05) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important;
}
.ds-subtabs .select-section-change .dd-selected { display: flex !important; align-items: center !important; height: 34px !important; padding: 0 32px 0 12px !important; }
.ds-subtabs .select-section-change .dd-selected-image, .ds-subtabs .select-section-change .dd-option-image, .ds-subtabs .select-section-change .dd-pointer { display: none !important; }
.ds-subtabs .select-section-change label.dd-selected-text { font-family: var(--bb-font); font-size: var(--bb-fs-m) !important; font-weight: 500 !important; color: var(--bb-text) !important; margin: 0 !important; }
.ds-subtabs .select-section-change .dd-options { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-s) !important; box-shadow: var(--bb-shadow-2) !important; overflow: hidden; margin-top: 4px; }
.ds-subtabs .select-section-change a.dd-option { border-bottom: 1px solid var(--bb-border) !important; color: var(--bb-text) !important; padding-left: 12px !important; }
.ds-subtabs .select-section-change a.dd-option:last-child { border-bottom: none !important; }
.ds-subtabs .select-section-change label.dd-option-text { font-family: var(--bb-font); font-size: var(--bb-fs-m) !important; color: inherit !important; }
.ds-subtabs .select-section-change a.dd-option:hover,
.ds-subtabs .select-section-change a.dd-option.dd-option-selected { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }

/* header select-all checkbox: vertically centered in the head row (it was pinned to the top —
   the checkbox column never inherited the head cell's vertical-align) */
.ds-table .stafter-table-head-column-checkbox { vertical-align: middle !important; }
.ds-table .stafter-table-head-column-checkbox .custom-checkbox-all { align-items: center; min-height: 42px; }

.ds-table .stafter-export-button { background:var(--bb-surface) !important; border:1px solid var(--bb-border-strong) !important; border-radius:var(--bb-radius-s) !important; height:36px; color:var(--bb-text-2) !important; box-shadow:0 2px 2px rgba(0,0,0,.04); }
.ds-table .stafter-export-button:hover { color:var(--bb-primary) !important; border-color:var(--bb-primary) !important; }
/* export button is now a real <button class="bb-btn"> (keeps the .stafter-export-button JS hook — 5 refs).
   The adapter above already gives it the secondary look; fix the legacy full-width + wire the JS-toggled .disabled. */
.stafter-export-button.bb-btn { width: auto; }
.bb-btn.disabled { opacity: .5; pointer-events: none; }
/* table sort arrows: sort.svg is a hard-coded #404040 triangle -> invisible on the dark espresso
   thead. Recolour to light grey in espresso (porcelain keeps the dark arrow on the light head).
   Same for the pager prev/next arrow images. */
[data-bb-skin="espresso"] .ds-table .sort-icon,
[data-bb-skin="espresso"] .ds-table .stafter-table-paginator-page img { filter: brightness(0) invert(72%); }
/* report date-range picker -> the system input (was oversized legacy text) */
main:has(.ds-table) .report_date_picker { height: 36px !important; font-size: var(--bb-fs-m) !important; font-family: var(--bb-font) !important; color: var(--bb-text) !important; background: var(--bb-surface) !important; border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; padding: 0 10px !important; box-shadow: none !important; }
/* Reset filters -> ghost button */
.ds-table .reset-filter-btn { background:transparent !important; color:var(--bb-text-2) !important; border:1px solid var(--bb-border-strong) !important; border-radius:var(--bb-radius-s) !important; height:36px !important; padding:0 14px !important; font-size:var(--bb-fs-s) !important; font-weight:600 !important; box-shadow:none !important; }
.ds-table .reset-filter-btn:hover { color:var(--bb-primary) !important; border-color:var(--bb-primary) !important; background:var(--bb-primary-soft) !important; }
/* worker/entity tags -> tokenized neutral tag */
.ds-table .worker-tags { background:var(--bb-inset) !important; color:var(--bb-text-2) !important; border:1px solid var(--bb-border) !important; border-radius:4px !important; font-weight:600; }
/* in-cell status selects -> doc .cell-select: transparent, border reveals on row hover */
.ds-table .stafter-select, .ds-table .stafter-table-body-column select, .ds-table td select { background-color:transparent !important; border:1px solid transparent !important; border-radius:var(--bb-radius-s) !important; color:var(--bb-text) !important; box-shadow:none !important; font-family:var(--bb-font); }
.ds-table .stafter-table-body tr:hover select { border-color:var(--bb-border-strong) !important; background-color:var(--bb-surface) !important; }
/* pagination -> doc .pg (tokenized; red active page) */
.ds-table .stafter-table-paginator button, .ds-table .paginator-number, .ds-table #pagination-container button, .ds-table #pagination-container a { border:1px solid var(--bb-border-strong) !important; border-radius:var(--bb-radius-s) !important; background:var(--bb-surface) !important; color:var(--bb-text-2) !important; }
.ds-table .stafter-table-paginator .active, .ds-table #pagination-container .active { background:var(--bb-primary) !important; border-color:var(--bb-primary) !important; color:#fff !important; }

/* legacy solid action buttons on ds-table pages (e.g. Customers "Add Customer",
   "Upload from CSV") -> the doc bb-btn primary: token red + radius-s + 600, not the
   legacy #D84560 / 4px. The button text/action stays page-specific. */
main:has(.ds-table) .btn.bb-standard-btn.btn-primary,
main:has(.ds-table) .filter .btn.btn-primary.action {
    background: var(--bb-primary) !important; border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-radius-s) !important; color: #fff !important; font-weight: 600 !important;
    box-shadow: none !important;
}
main:has(.ds-table) .btn.bb-standard-btn.btn-primary:hover { background: var(--bb-primary-hover) !important; }
/* secondary siblings (one primary per view — e.g. Download CSV next to Download PDF) */
main:has(.ds-table) .btn.bb-standard-btn.btn-outline-primary {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-primary) !important;
    color: var(--bb-primary) !important; border-radius: var(--bb-radius-s) !important;
    font-weight: 600 !important; box-shadow: none !important;
}
main:has(.ds-table) .btn.bb-standard-btn.btn-outline-primary:hover { background: var(--bb-primary-soft) !important; }

/* the title-hugs-header bug is fixed AT SOURCE now (jobs-flow + service-list
   general.scss: .breadcrumbs is a flow element, no absolute -35px) — the old
   +21px compensations here would double the offset, so they are gone. */
/* back-button header inset: the legacy jobs-flow breadcrumb row (general.css:
   `main .breadcrumbs { padding: 0 35px }`) still carries its OWN 35px side padding,
   but every converted page now sits inside .main-content which already provides the
   35px content inset. The two stack -> the "← Back" link sat 35px right of the page
   title/cards below it, leaving an empty gap to its left (owner-flagged). Zero the
   redundant breadcrumb inset so the whole Back row is flush with the content. App-wide:
   fixes every back-button page (services-management, jobs-flow, worker-cabinet, form
   designers, etc.). See the design library Layouts tab (back-button head note). */
.main-content .breadcrumbs { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- subtabs (opt in with ds-subtabs): text tabs, red active underline, urgent chip
   above. Covers .sections .section.section-name pages (Vehicles). Price Book is
   converted to the real .subtab component. jobs-flow keeps its own #filters rules. ---- */
.ds-subtabs .sections:not(.select-section-change) { display:flex; gap:2px; border-bottom:1px solid var(--bb-border); align-items:flex-end; flex-wrap:wrap; }
.ds-subtabs .sections:not(.select-section-change) .section { display:inline-flex; flex-direction:column; align-items:center; gap:3px; height:auto; margin:0 0 -1px 0 !important; padding:6px 14px 10px !important; border:none !important; border-bottom:2px solid transparent !important; color:var(--bb-text-2) !important; font-weight:500; background:transparent !important; cursor:pointer; }
.ds-subtabs .sections:not(.select-section-change) .section > div:not(.need-attention), .ds-subtabs .sections .section .section-name { color:inherit !important; font-weight:inherit; margin:0; background:transparent !important; }
.ds-subtabs .sections:not(.select-section-change) .section:hover, .ds-subtabs .sections .section:hover > div { color:var(--bb-primary) !important; }
.ds-subtabs .sections:not(.select-section-change) .section.selected, .ds-subtabs .sections .section.selected > div, .ds-subtabs .sections .section.selected .section-name { color:var(--bb-primary) !important; font-weight:600; }
.ds-subtabs .sections:not(.select-section-change) .section.selected { border-bottom-color:var(--bb-primary) !important; }
.ds-subtabs .sections .section > svg, .ds-subtabs .sections .section .section-name svg, .ds-subtabs .sections .section .section-name img { display:none !important; }
.ds-subtabs .sections .section::after, .ds-subtabs .sections .section .section-name::after { display:none !important; content:none !important; border:0 !important; }
/* A real shared .subtab always keeps its label and neutral total on one row.
   This wins over the older .sections/.section adapter above, which stacks its
   legacy warning content vertically. */
.ds-subtabs .sections:not(.select-section-change) .section.subtab { flex-direction:row; gap:7px; }

/* ---- Plain/analytics tables (Reports, tickets) render a real <table> instead of the
   shared .stafter-table-wrapper. Their CELL styling comes from the ONE table component
   above (identical to stafter tables) — this block ONLY adds the missing CARD around
   them. :has(> table) matches a div that DIRECTLY wraps a <table>; the shared list
   pages nest their table inside .stafter-table-wrapper so they never match (no
   double-card). NOT applied to calendar/FullCalendar (not opted into ds-table). ---- */
.ds-table .data-view:has(> table),
.ds-table .data-tables:has(> table),
.ds-table .data-view > div:has(> table),
.ds-table .data-tables > div:has(> table) {
    background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l); overflow: hidden; box-shadow: var(--bb-shadow-1);
}
.ds-table .data-view:has(> table) > table,
.ds-table .data-tables:has(> table) > table { width: 100%; border-collapse: collapse; margin: 0; font-family: var(--bb-font); font-size: var(--bb-fs-m); }

/* MOBILE: every ds-table list table scrolls INSIDE the .bb-card (Layouts rule 7) — it never bleeds
   past the card to the viewport edges. Unifies the shared stafter pages (Team, Customers,
   Appointments, Leads…) with Reports, which already did this. The legacy stafter wrappers carried
   row-style negative side margins (~-15px, pushing the table to left:1 / right:389 on a 390 phone)
   plus overflow:hidden that CLIPPED the wide table instead of letting it scroll. Owner flagged the
   inconsistency twice. Zero the bleed, and scroll the wide table inside the card. */
@media (max-width: 767.98px) {
    .ds-table .data-view,
    .ds-table .data-tables,
    .ds-table .stafter-table-wrapper { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; min-width: 0 !important; }
    .ds-table .data-view,
    .ds-table .stafter-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .ds-table .data-view > table,
    .ds-table .stafter-table-wrapper > table,
    .ds-table table.stafter-table { min-width: 560px; }
}


/* ===================== merged from bb-dashboard.css ===================== */

/* ============================================================================
   ORG DASHBOARD — CHROME ONLY. The dashboard's COMPONENTS are now the ported
   Porcelain library (bb-ui.css), applied via the `.bb` root on #dashboard +
   the mockup HTML in dashboard-new-version2.blade.php + components/training-row
   + components/statistic-bar. This file only provides the page chrome (warm bg,
   no white wrapper) and zeroes the app's legacy dashboard paddings so the
   library components render as designed. Class-gated by ds-dashboard.
   ============================================================================ */
main:has(.ds-dashboard) { background: var(--bb-bg) !important; }
main:has(.ds-dashboard) .main-content,
main:has(.ds-dashboard) > .row > .col-12,
main:has(.ds-dashboard) .content-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; }
.ds-dashboard.container-fluid, .ds-dashboard { background: transparent !important; }
/* legacy negative margin-top (app.css: #dashboard -25px ≥1025 / -15px 768–1024 / -5px ≤767)
   predates the durable bb-main frame — it pulled the welcome header ABOVE the standard 84px
   offset so the dashboard hugged the header while every other page breathed (owner: inconsistent
   gap). Zero it so the dashboard head sits on the same y=84 rhythm as every Type-1 page. The
   rule isn't !important in app.css, so this class-gated override wins across all breakpoints. */
#dashboard.ds-dashboard, .ds-dashboard.container-fluid { margin-top: 0 !important; }
/* breadcrumbs +21px compensation removed — flow base fixed at source */
/* ===================== DURABLE PAGE FRAME =====================
   The authenticated <main class="bb-main"> OWNS the page background AND the top offset that clears the
   fixed 60px header (--bb-header-h) — by the page's DECLARED type (data-page-type on <main>), never
   inferred from content. Kills three hacks at once: the inline `background:#f9f7f7` on <main>, the
   per-page `pt-100`/`pt-80`/`$custom_pt_class` classes (Price Book overrode pt-100->70px), and the
   `:has(.ds-table)` conditionals (a Type-1 page may not have a table, or it may not be loaded yet).
   One place tunes the whole app's frame; a page can't drift. */
main.bb-main { background: var(--bb-bg); padding-top: calc(var(--bb-header-h) + 24px); }         /* type 1 (list/table): 60 + 24 = 84 (owner 2026-07-11: the 40px gap read as a dead band; the page head's description slot carries the breathing room now) */
main.bb-main[data-page-type="2"] { padding-top: calc(var(--bb-header-h) + 20px); }               /* type 2 (settings/form): 60 + 20 = 80 */
@media (max-width: 575.98px) { main.bb-main { padding-top: calc(var(--bb-header-h) + 20px); } }  /* mobile: 60 + 20 = 80 */
/* Sidebar-clearance overflow fix: the fixed sidebar is cleared by a translateX(120px) on
   main.compressed (main.scss:445 → app.css), but the width only shrinks by 110px — 10px SHORT of
   the 120px push, so EVERY desktop page overran the viewport by exactly 10px (clipped by
   body{overflow-x:hidden}, so no visible scrollbar, but a real phantom h-overflow — measured
   scrollWidth 1410 vs 1400). Shrink by the FULL translate distance so the translated right edge
   lands on the viewport edge. (The proper fix is to replace the translate hack with a margin-left
   sidebar offset — a load-bearing global-layout task, see the .navbar-vertical-left width note.) */
@media (min-width: 769px) { main.bb-main.compressed { width: calc(100% - 120px) !important; } }
/* ds-table (Type-1) page CHROME outside the table card (report headings/dates/descriptions, the
   subtab nav .text-black links, appointment .today-tag / .count / .collapse-button) kept Bootstrap
   ink (#212529 / rgba(15,19,36,.6)) → dark-on-dark in espresso (Lens B: hardcoded, identical in both
   skins). Mirror the ds-settings root-flip: default the content text to the token (porcelain dark /
   espresso light — NO porcelain change), then override the explicit ink. Red cell links + tokenized
   cells set their own colour, so they still win. */
main:has(.ds-table) .main-content { color: var(--bb-text); }
main:has(.ds-table) .text-black, main:has(.ds-table) .today-tag, main:has(.ds-table) .collapse-button,
main:has(.ds-table) .main-content h5, main:has(.ds-table) .main-content h6 { color: var(--bb-text) !important; }
main:has(.ds-table) .page-description, main:has(.ds-table) .section-description, main:has(.ds-table) .subtitle { color: var(--bb-text-2) !important; }
/* small hardcoded badges/tags that never wired to the skin (Lens B): red lead-count tag -> danger chip tokens (both skins). */
main:has(.ds-table) .red-lead-tag { background: var(--bb-danger-bg) !important; color: var(--bb-danger) !important; }
/* welcome header (OUTSIDE the cards) used Bootstrap ink (#212529 name / #32383E helper link)
   → dark-on-dark in espresso. Tokenise: name -> --bb-text, helper link -> --bb-text-2. */
main:has(.ds-dashboard) .welcome h1 { color: var(--bb-text) !important; }
main:has(.ds-dashboard) .welcome a { color: var(--bb-text-2) !important; }
/* Dashboard "Types of Work" explainer modal (#difference_modal / .dashboard-modal) — a bespoke
   comparison modal that was never on the design system (white shell, #FDF5F6 pink cards, ink
   text) → white in espresso. Tokenise so it flips in BOTH skins (porcelain unchanged: #FFF
   shell / pink cards / ink; espresso: dark surface / soft-red cards / light text). The bespoke
   compare layout is logged as an exception on /admin/design-system. */
#difference_modal .modal-content { background: var(--bb-surface) !important; color: var(--bb-text) !important; }
#difference_modal .types-card { background: var(--bb-primary-soft) !important; }
#difference_modal .title-modal, #difference_modal .title-modal2, #difference_modal h3, #difference_modal h4 { color: var(--bb-text) !important; }
#difference_modal .text-normal, #difference_modal p, #difference_modal td, #difference_modal li, #difference_modal .example { color: var(--bb-text-2) !important; }
#difference_modal .example b, #difference_modal td b, #difference_modal strong { color: var(--bb-text) !important; }
#difference_modal .close-modal-btn { color: var(--bb-text) !important; }
#difference_modal .switcher-hr { border-color: var(--bb-border) !important; }
#difference_modal table th, #difference_modal table td { border-color: var(--bb-border) !important; }
/* Settings Billing/Usage sub-tabs — the plan + payment-history + usage content kept legacy ink
   text and WHITE table body rows (they are NOT on the Information-page field treatment), so
   they render dark-on-dark / white in espresso. Tokenise the settings tables + labels. The
   blue-grey credit-card graphic (.card) is a genuine EXCEPTION → logged on the design page. */
body:has(.ds-settings) table tbody tr, body:has(.ds-settings) .payment-row { background: transparent !important; }
body:has(.ds-settings) table tbody td, body:has(.ds-settings) table tbody td span, body:has(.ds-settings) .payment-row td { color: var(--bb-text) !important; }
body:has(.ds-settings) table th, body:has(.ds-settings) table td { border-color: var(--bb-border) !important; }
body:has(.ds-settings) label, body:has(.ds-settings) .text.align-self-start,
body:has(.ds-settings) .subtitle,
body:has(.ds-settings) div:has(> .change-page), body:has(.ds-settings) div:has(> .change-page) > div { color: var(--bb-text-2) !important; }
body:has(.ds-settings) .change-page { border-color: var(--bb-border-strong) !important; }
/* Settings Business / Integrations / Cockpit — their unique content was never mapped, so it's
   heavy legacy ink text (inherited #212529) + explicit .text-black + white section surfaces.
   Root-flip the inherited text to the token (porcelain dark / espresso light), override the
   explicit ink, mute descriptions, and tokenise the white section surfaces. */
body:has(.ds-settings) .main-content { color: var(--bb-text); }
body:has(.ds-settings) .text-black, body:has(.ds-settings) .cockpit-title-includes,
body:has(.ds-settings) .main-content h5, body:has(.ds-settings) .main-content h6 { color: var(--bb-text) !important; }
body:has(.ds-settings) .setting-description, body:has(.ds-settings) .section-description,
body:has(.ds-settings) .subtitle, body:has(.ds-settings) .section-description.static { color: var(--bb-text-2) !important; }
body:has(.ds-settings) .tax_rates_list, body:has(.ds-settings) .wrapper.mt-1,
body:has(.ds-settings) .sections { background: var(--bb-surface) !important; }
body:has(.ds-settings) .integration-title-section { background: var(--bb-inset) !important; }
/* Website Builder (business-pages) content under the settings frame — tokenise the unique
   surfaces for espresso. The on/off switch (.switch-button) has no design-system equivalent
   and is logged as an EXCEPTION on /admin/design-system. */
body:has(.ds-settings) .text-dark { color: var(--bb-text) !important; }
body:has(.ds-settings) .status.live { background: var(--bb-success-bg) !important; color: var(--bb-success) !important; }
body:has(.ds-settings) .status.draft { background: var(--bb-inset) !important; color: var(--bb-text-2) !important; }
body:has(.ds-settings) .circle { background-color: var(--bb-surface) !important; }
/* Billing & Plan: the bank-card widget (components/bank_card) + subscription greys ship as raw
   bootstrap .card #ADBBC8 / .bg-dark #343A40 / .text-grey-dark #5C6268 / #212529 table skeleton. */
body:has(.ds-settings) .card-outer .card { background: var(--bb-inset) !important; border: 1px solid var(--bb-border) !important; color: var(--bb-text) !important; box-shadow: var(--bb-shadow-1) !important; }
body:has(.ds-settings) .card-outer .card .bg-dark { background-color: var(--bb-bg) !important; }
body:has(.ds-settings) .text.text-left, body:has(.ds-settings) .subscribe-text { color: var(--bb-text) !important; }
body:has(.ds-settings) .text-grey-dark, body:has(.ds-settings) .text-grey-dark div { color: var(--bb-text-2) !important; }
body:has(.ds-settings) table.table, body:has(.ds-settings) table.table thead, body:has(.ds-settings) table.table tbody, body:has(.ds-settings) table.table tr { color: var(--bb-text); }
/* Usage page month picker (the storage session's .select-usage-month) shipped as a raw white
   bootstrap .custom-select on the dark page — tokenise it like the standard-modal select. */
body:has(.ds-settings) .select-usage-month {
    appearance: none; -webkit-appearance: none;
    background-color: var(--bb-surface) !important;
    border: 1px solid var(--bb-border-input) !important;
    color: var(--bb-text) !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.05) !important; padding-right: 34px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 11px center !important;
}
/* Settings › Business — List of Services + Tax Rate shipped as two different
   styles (service = form-control input rows + a full-width outline "+ Add"
   button; tax = table rows + a tiny underlined "+ add" text link) with mismatched
   heights, and the service remove-X inherited its colour (invisible where the
   ds-settings text rule didn't reach). Unify: one 46px box height for both
   lists, one add-button style (the tax add is now the same outline button in
   the blade), and an explicit tokenised remove-X. (Owner, 2026-07-13) */
body:has(.ds-settings) .businessServices .service-row .form-control { min-height: 46px; }
body:has(.ds-settings) .tax_rates_list .tax-row { padding: 0 14px !important; }
body:has(.ds-settings) .tax_rates_list .tax-row td { height: 46px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.4 !important; vertical-align: middle !important; }
body:has(.ds-settings) #add-service-input, body:has(.ds-settings) #add-tax { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
/* the tax "+ Add" now uses the outline-button classes, so kill the old link look */
body:has(.ds-settings) #add-tax.btn { text-decoration: none !important; }
/* remove-X: explicit token (can't inherit to black), danger on hover */
body:has(.ds-settings) .remove-service, body:has(.ds-settings) .remove-service i { color: var(--bb-text-2) !important; }
body:has(.ds-settings) .remove-service:hover, body:has(.ds-settings) .remove-service:hover i { color: var(--bb-danger) !important; }

/* ============================================================================
   Business-user audit (2026-07-12): white popovers/selects + KPI money-cards.
   Gated to converted org pages so admin / customer-cabinet are untouched.
   ============================================================================ */
/* Email-Manager row kebab (⋮) popover — shipped white with #1A1A1A items */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .modal-window-actions {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important; box-shadow: var(--bb-shadow-2) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .modal-window-actions a,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .modal-window-actions span,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .modal-window-actions div { color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .modal-window-actions > *:hover { background: var(--bb-inset) !important; }
/* Assign-Workers pseudo-select — shipped white; it's a div.standard-input, so app.css
   `.standard-modal .modal-body .standard-input { color:#000 !important }` (0,3,0) wins over the
   gate's input-only rule. Beat it at (0,4,0) and cover any other div pseudo-inputs too. */
.modal.standard-modal .modal-body .workers-psyudo-input,
.modal.standard-modal .modal-body div.standard-input,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .workers-psyudo-input {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-border-input) !important; color: var(--bb-text) !important;
}
/* universal detail modal (.full-screen-fixed) buttons: app.css colours .btn-outline-primary with
   the old #D84560 and this modal isn't .standard-modal, so the modal gate misses it. */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .full-screen-fixed .btn.btn-outline-primary {
    color: var(--bb-primary) !important; border-color: var(--bb-primary) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .full-screen-fixed .btn.btn-outline-primary:hover {
    background: var(--bb-primary) !important; color: #fff !important;
}
/* Jobs/Invoices KPI money-cards: dark-navy subtitle + #B9B9BA divider */
.money-block-item-content-postfix { color: var(--bb-text-2) !important; }
.money-block-item-line { background-color: var(--bb-border) !important; border-color: var(--bb-border) !important; }
/* "Add Items" modal (price-book/modals/select-item-modal = a modal-form, NOT .standard-modal, so
   the modal gate misses it): the shell is dark but the .input-selector combobox wrapper + its
   dropdown ship WHITE and the title/label are #212529/#32383E (invisible on espresso). Scoped to
   .price-book-modal — bulk-select (the card picker) has no .input-selector and is a standard-modal. */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .modal-header,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .modal-header * { color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-label { color: var(--bb-text-2) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-selector { background: var(--bb-surface) !important; border-color: var(--bb-border-input) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-selector-field { color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-selector-field::placeholder { color: var(--bb-text-3) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-selector-data-list { background: var(--bb-surface) !important; border-color: var(--bb-border) !important; color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .input-selector-item:hover { background: var(--bb-inset) !important; }
/* the modal-form shell base-ink (#212529 on .modal-content/.modal-body) is not gated -> token */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .modal-content,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .modal-body,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal .request-modal-wrapper { color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .price-book-modal.modal-form .modal-content { border-color: var(--bb-border) !important; }
/* Deposit modal ($/% toggle inactive = #E5E5E5 light-grey) + legacy .custom-checkbox (white
   #A1A1A1 checkmark) — neither is covered by the modal gate. Fixes .custom-checkbox app-wide. */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .deposit-type-btn:not(.active) {
    background-color: var(--bb-inset) !important; color: var(--bb-text-2) !important; border-color: var(--bb-border) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .custom-checkbox .checkmark {
    background-color: var(--bb-surface) !important; border-color: var(--bb-border-input) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .custom-checkbox input:checked ~ .checkmark {
    background-color: var(--bb-primary) !important; border-color: var(--bb-primary) !important;
}
/* Due Date & Late Fees modal description (#1A1A1A near-black, invisible on espresso) */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .popup-description-invoice { color: var(--bb-text-2) !important; }
/* .input-selector combobox (Select-Customer modal, price-book Add-Items, etc.): the wrapper has
   white corners + the dropdown list ships WHITE. Global so every instance on converted pages is dark. */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .input-selector { background: var(--bb-surface) !important; border-color: var(--bb-border-input) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .input-selector-field { background: transparent !important; color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .input-selector-data-list { background: var(--bb-surface) !important; border-color: var(--bb-border) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .input-selector-item { color: var(--bb-text) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .input-selector-item:hover { background: var(--bb-inset) !important; }

/* ============================================================================
   SYSTEMIC SWEEPS (business-user audit 2026-07-12). Gated to converted org pages.
   ============================================================================ */
/* #12 NOTE: .arrow.select renders #6E6660 — that is the SAME colour the DS <select> chevron SVG
   uses (see the select rule's background-image data-URI stroke='%236E6660'). It's a design-system
   arrow value, internally consistent, so it's an accepted audit false-positive (not re-tokenised). */
/* #10 app.css colours .btn-outline-primary / .btn-primary with the OLD #D84560, not the token.
   Map PAGE buttons (.main-content) to --bb-primary — the modal gate already covers .standard-modal,
   #4 covers the .full-screen-fixed universal modal. Exclude disabled (tokenized disabled survives)
   and scope to .main-content so the header New button / sidebar keep their skin styling. */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .main-content .btn.btn-outline-primary:not(:disabled):not(.disabled) {
    color: var(--bb-primary) !important; border-color: var(--bb-primary) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .main-content .btn.btn-outline-primary:not(:disabled):hover {
    background: var(--bb-primary) !important; color: #fff !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .main-content .btn.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--bb-primary) !important; border-color: var(--bb-primary) !important;
}
/* #11 required-field asterisks / danger text #DC3545 inside converted modals -> token danger
   (leave .is-invalid so form validation styling still reads) */
.modal.standard-modal .text-danger:not(.is-invalid) { color: var(--bb-danger) !important; }
/* #13 #212529 base-ink ghosts on the stafter-table skeleton (invisible today; inoculate) */
.ds-table table, .ds-table thead, .ds-table tbody, .ds-table tr, .ds-table td, .ds-table th { color: var(--bb-text); }
/* #9 Email-Manager list: washed grey icons #B5B5B5 (colour + border) + grey rows + #D84560 link */
body:has(.ds-table) .main-content a.text-primary { color: var(--bb-primary) !important; }
body:has(.ds-table) .additional-icon { color: var(--bb-text-2) !important; border-color: var(--bb-border) !important; }
body:has(.ds-table) tr.data-row { color: var(--bb-text) !important; }
/* #14 Vehicles driver status chip grey-blue #61747D */
body:has(.ds-table) .status-tag { background-color: var(--bb-inset) !important; color: var(--bb-text-2) !important; }
/* #8 Settings > Website Builder page: step circles / labels / +add-page / links all on the old
   #D84560 (via .text-primary + specific classes), and the "Important:" .text-danger #DC3545. */
body:has(.ds-settings) .text-primary,
body:has(.ds-settings) .circle.r45,
body:has(.ds-settings) .circle.r45 span,
body:has(.ds-settings) .circle.position-relative,
body:has(.ds-settings) .circle.position-relative span,
body:has(.ds-settings) .add-page-btn { color: var(--bb-primary) !important; }
body:has(.ds-settings) .text-danger:not(.is-invalid) { color: var(--bb-danger) !important; }
/* #16 Access & Permissions (Team) modal divider #343A40 */
.modal.standard-modal .d-flex.pb-4 { border-bottom-color: var(--bb-border) !important; }

/* neutralise the app's legacy dashboard container paddings/decoration so the
   ported .card + gs-* internal spacing is exactly the mockup's */
.bb .get-start-list-container { padding: 0 !important; border: 1px solid var(--bb-border) !important; margin-top: 18px; overflow: hidden; display: block !important; height: auto !important; min-height: 0 !important; }
.bb .get-start-list-container .head { padding: 0 !important; border: none !important; }
.bb .get-start-steps-navigation { border: none !important; }
.bb .steps-nav-button { min-width: 0 !important; }
/* the +/- collapse glyph in the getting-started header */
.bb .fold.open-started-list { display: inline-flex; align-items: center; }
.bb .open-started-list .vertical-line, .bb .open-started-list .horizontal-line { background: var(--bb-text-3) !important; }

/* ---- neutralise app.css LEGACY dashboard layout so the ported bb-ui components
   render at their designed size (app.css can't be edited — it's compiled). The old
   .bar had a fixed flex width; .dashboard-bar-container was flex; .part-progress had
   its own bright green; the container had a constrained width. Force the mockup. ---- */
.bb .get-start-list-container.card { width: 100% !important; max-width: none !important; }
.bb .dashboard-bar-container.kpis { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; gap: 16px !important; align-items: stretch !important; }
@media (max-width: 1100px) { .bb .dashboard-bar-container.kpis { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 620px)  { .bb .dashboard-bar-container.kpis { grid-template-columns: 1fr !important; } }
.bb .kpi.bar { width: auto !important; min-width: 0 !important; max-width: none !important; flex: initial !important; margin: 0 !important; }
/* card SHELLS: the legacy Bootstrap .card keeps a #fff background (never tokenised), so the
   getting-started card + KPI cards render WHITE in espresso. Give them the surface token so
   they flip with the skin (porcelain #FFF, espresso #241D17). Card text is already tokenised
   above/below (gs-row/gs-head/kpi rules), so no dark-on-dark results. */
.bb .get-start-list-container.card, .bb .kpi.bar { background: var(--bb-surface) !important; }
/* legacy dashboard borders/separators are hardcoded light greys (#DEE0E3 active tab, #E9EAEC
   checklist-row separators / KPI card outline / KPI internal divider) that never flip → light
   lines on the dark cards in espresso. Tokenise every one to --bb-border. */
.bb .steps-nav-button.gs-group,
.bb .step-row.gs-row,
.bb .card.kpi.bar,
.bb .bar-links-row { border-color: var(--bb-border) !important; }
.bb .get-start-steps-navigation.gs-groups { background: var(--bb-surface-2) !important; padding: 6px !important; height: auto !important; min-height: 0 !important; }
/* legacy dashboard css paints checklist row titles white -> ink */
.bb .gs-row .tx b { color: var(--bb-text) !important; }
.bb .gs-row .tx p { color: var(--bb-text-2) !important; }
/* phones: group tabs stack, checklist rows wrap (no mobile mockup — responsive ad-hoc) */
@media (max-width: 520px) {
    .bb .gs-groups { flex-direction: column; align-items: stretch; }
    .bb .gs-group { justify-content: space-between; }
    .bb .gs-row { flex-wrap: wrap; }
    .bb .gs-row .tx { flex: 1 1 calc(100% - 36px); min-width: 0; }
    .bb .gs-row .step-control { flex: 1 1 100%; }
    .bb .gs-row .step-control .bb-btn { width: 100%; }
}
.bb .steps-nav-button.gs-group { background: transparent !important; min-height: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; overflow: visible !important; }
.bb .gs-group .button-name { width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap; }
/* tab labels used hardcoded ink (#000 active / rgba(15,19,36,.6) inactive) → the active label
   was black-on-dark in espresso. Tokenise so they flip: inactive -> --bb-text-2, active -> --bb-text. */
.bb .gs-group .button-name { color: var(--bb-text-2) !important; }
.bb .steps-nav-button.gs-group.active .button-name { color: var(--bb-text) !important; }
/* Checklist completion is carried by the status dot. Incomplete steps keep the shared
   secondary action; completed steps recede to a ghost action so the next work stays clear. */
.bb .step-row:not(:has(.gs-dot.is-todo)) .bb-btn { background: transparent !important; border-color: transparent !important; color: var(--bb-primary) !important; }
.bb .steps-nav-button.gs-group.active { background: var(--bb-surface) !important; }
.bb .gs-group .part-progress.chip { padding: 4px 8px !important; height: auto !important; }
.bb .gs-group .part-progress.chip--success { background: var(--bb-success-bg) !important; color: var(--bb-success) !important; }
.bb .gs-group .part-progress.chip--amber   { background: var(--bb-amber-bg) !important;   color: var(--bb-amber) !important; }
.bb .gs-head .t { color: var(--bb-text) !important; font-size: var(--bb-fs-l) !important; font-weight: 600 !important; }
.bb .gs-dot { flex: none !important; }
/* app.css paints .bar text white (for its blur overlay) -> the big KPI stat number
   was white-on-white. Force ink; small + trend keep their own colours. */
.bb .kpi, .bb .kpi-stat, .bb .kpi-stat > span:not(.trend) { color: var(--bb-text) !important; }
.bb .kpi-stat small { color: var(--bb-text-2) !important; }
.bb .kpi-stat .trend { color: var(--bb-success) !important; background: var(--bb-success-bg) !important; }
.bb .kpi-stat .trend--down { color: var(--bb-danger) !important; background: var(--bb-danger-bg) !important; }
.bb .kpi-sub { color: var(--bb-text-3) !important; }
/* the app pins .bar to a fixed height -> content (links, training, button) overflowed
   BELOW the card. Force height:auto so the card grows to fit its content; the grid row
   (align-items:stretch) equalizes card heights and .kpi-fill absorbs the slack so every
   card's button sits at the bottom. */
.bb .kpi.bar { height: auto !important; min-height: 0 !important; overflow: visible; }
.bb .kpi .kpi-fill { flex: 1 1 auto !important; min-height: 6px; }
.bb .kpi .blur-block { display: none; }
/* token-audit sweep: leftover hardcoded ink on the dashboard containers (app.css base
   colour #212529) inherited dark-on-dark in espresso, and the "Show Training" links kept
   the OLD red #D84560 instead of the primary token. */
.bb.ds-dashboard, .bb .welcome, .bb .dashboard-bar-container { color: var(--bb-text); }
.bb .get-start-steps { border-color: var(--bb-border) !important; }
.bb .steps-nav-button.gs-group { color: var(--bb-text-2) !important; }
.bb .btn-link.show-training { color: var(--bb-primary) !important; border-color: var(--bb-primary) !important; }


/* Dashboard page frame and website-client composition. The website-client version
   deliberately reuses the shared card/checklist atoms without stacking cards inside cards. */
.bb.ds-dashboard {
    width: min(100%, 1488px) !important;
    margin: 0 auto 40px !important;
    padding: 28px 32px 48px !important;
}
.bb .get-start-list-container.card {
    border-radius: var(--bb-radius-l) !important;
    box-shadow: var(--bb-shadow-1) !important;
}
.bb .gs-head { padding: 20px 24px 16px; }
.bb .gs-head .pct {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bb-surface-2);
    white-space: nowrap;
}
.bb .gs-bar {
    height: 6px;
    margin: 0 24px;
    border-radius: 999px;
    overflow: hidden;
}
.bb .gs-bar i { border-radius: 999px; }
.bb .dashboard-bar-container.kpis {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
/* General-customer dashboard: same design-system composition quality as the website-client
   dashboard, while keeping its distinct onboarding groups and business KPIs. */
.standard-client-dashboard .standard-dashboard-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 !important;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--bb-surface) 0%, var(--bb-surface-2) 100%);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
}
.standard-dashboard-intro__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--bb-primary); background: var(--bb-primary-soft); border-radius: var(--bb-radius-m); }
.standard-dashboard-intro__copy { min-width: 0; }
.standard-dashboard-intro__eyebrow { margin-bottom: 3px; color: var(--bb-text-2); font-size: var(--bb-fs-s); font-weight: 600; }
.standard-client-dashboard .standard-dashboard-intro h1 { margin: 0; color: var(--bb-text); font-size: var(--bb-fs-2xl); line-height: 1.15; }
.standard-dashboard-intro__summary { margin: 6px 0 0; color: var(--bb-text-2); line-height: 1.45; }
.standard-dashboard-intro__action { position: relative; z-index: 10; white-space: nowrap; }
.standard-client-dashboard .get-start-list-container { margin-top: 20px; }
.standard-client-dashboard .get-start-steps { padding: 18px 24px 8px !important; }
.standard-client-dashboard .gs-row { min-height: 76px; padding: 16px 12px !important; transition: background .2s; }
.standard-client-dashboard .gs-row:hover { background: var(--bb-row-hover); }
.bb.ds-dashboard .gs-row { align-items: center; }
.bb.ds-dashboard .gs-row .tx { min-width: 0; padding-right: 20px; }
.bb.ds-dashboard .gs-row .step-control { display: flex; align-items: center; justify-content: flex-end; min-width: 150px; }
.bb.ds-dashboard .gs-row .bb-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 36px; }
.website-client-dashboard .website-dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
}
.website-client-dashboard .website-dashboard-intro {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 28px 30px;
    background: linear-gradient(135deg, var(--bb-surface) 0%, var(--bb-surface-2) 100%);
}
.website-client-dashboard .website-dashboard-intro .title {
    margin-bottom: 14px !important;
    color: var(--bb-text);
    font-size: var(--bb-fs-2xl);
    line-height: 1.2;
}
.website-client-dashboard .website-dashboard-intro img {
    width: 112px;
    height: auto;
}
.website-client-dashboard .website-dashboard-details {
    margin: 0 !important;
    padding: 28px 30px !important;
    border: 0 !important;
    border-left: 1px solid var(--bb-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.website-client-dashboard .get-start-list-container { margin-top: 0; }
.website-client-dashboard .get-start-steps-navigation { display: none !important; }
.website-client-dashboard .steps-container.gs-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    padding: 10px 24px 18px;
}
.website-client-dashboard .gs-row {
    min-width: 0;
    padding: 16px 0;
}
.website-client-dashboard .gs-row:nth-last-child(-n + 2) { border-bottom: 0; }
.website-client-dashboard .gs-dot.is-todo {
    background: transparent;
    border: 2px solid var(--bb-border-strong);
}
.website-client-dashboard .gs-row .bb-btn { min-width: 150px; }
@media (max-width: 980px) {
    .website-client-dashboard .website-dashboard-overview { grid-template-columns: 1fr; }
    .website-client-dashboard .website-dashboard-details { border-left: 0 !important; border-top: 1px solid var(--bb-border) !important; }
}
@media (max-width: 760px) {
    .bb.ds-dashboard { padding: 20px 16px 36px !important; }
    .bb .gs-head { align-items: flex-start; padding: 18px 18px 14px; }
    .bb .gs-bar { margin: 0 18px; }
    .website-client-dashboard .website-dashboard-intro,
    .website-client-dashboard .website-dashboard-details { padding: 22px 20px !important; }
    .website-client-dashboard .website-dashboard-intro img { width: 84px; }
    .website-client-dashboard .steps-container.gs-list { grid-template-columns: 1fr; padding: 8px 18px 16px; }
    .website-client-dashboard .gs-row:nth-last-child(2) { border-bottom: 1px solid var(--bb-border); }
    .standard-client-dashboard .standard-dashboard-intro { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
    .standard-dashboard-intro__action { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
    .bb .gs-head { flex-direction: column; }
    .bb .gs-head .pct { align-self: stretch; justify-content: space-between; }
    .website-client-dashboard .website-dashboard-intro > .d-flex { align-items: flex-start !important; }
    .website-client-dashboard .website-dashboard-intro .ml-4 { display: none; }
    .standard-client-dashboard .standard-dashboard-intro { grid-template-columns: 1fr; }
    .standard-dashboard-intro__icon { width: 42px; height: 42px; }
    .standard-dashboard-intro__action { grid-column: 1; width: 100%; }
    .standard-client-dashboard .get-start-steps { padding: 14px 16px 6px !important; }
}

/* ============== merged from bb-settings.css ==============
   .bb-chip / .bb-chip--danger / .bb-chip--success / .bb-chip--amber / .bb-banner /
   .bb-banner--danger were duplicates of the canonical blocks above and are dropped
   here (canonical wins). Unique .bb-chip a and .bb-banner .ic are kept. */

/* ============================================================================
   BizBaby design system — ORG SETTINGS pages (Porcelain).
   Target: artifact 2735be06 "Settings · Information (Porcelain)".
   Maps the app's real settings markup (settings/index + settings/navigation +
   settings/blocks/* + the shared auth/create_organisation_form &
   auth/select_organisation_form) onto the mockup WITHOUT rewriting it — same
   class-gated pattern as bb-tables.css / bb-dashboard.css.

   CLASS-GATED: inert until a settings page adds `ds-settings` to #settings.
   All rules are scoped under `main:has(.ds-settings)` / `.ds-settings`, and every
   FORM rule is further scoped under `.content-box` so it can never touch the nav
   tabs (which reuse .form-control/.btn but live OUTSIDE the card). No leak into
   admin/worker/customer pages that share layouts.app. Static, no build.

   Contract (doc §06): layout stays (2-col grid); every control -> system part;
   the form lives in ONE white rounded card (the form-container decision = card);
   statuses -> chips; explanations -> banners; one primary action per cluster.
   ============================================================================ */

/* ---- page chrome (warm bg, no white wrapper) — mirrors bb-tables.css ---- */
main:has(.ds-settings) { background: var(--bb-bg) !important; }
main:has(.ds-settings) .main-content,
main:has(.ds-settings) > .row > .col-12,
main:has(.ds-settings) .content-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; }
/* breadcrumbs +21px compensation removed — flow base fixed at source */

/* page title (org name) -> 26/700 ink; "Primary" flag -> amber chip */
.ds-settings .title-lg.title-organisation { font-family: var(--bb-font-display) !important; font-size: var(--bb-fs-2xl) !important; font-weight: var(--bb-fw-bold) !important; letter-spacing: -.4px !important; line-height: var(--bb-lh-tight) !important; color: var(--bb-text) !important; }
.ds-settings .primary-team { display: inline-flex; align-items: center; margin-left: 10px; font-size: var(--bb-fs-xs) !important; font-weight: 700 !important; letter-spacing: .4px; text-transform: uppercase; border-radius: 4px !important; padding: 4px 8px !important; background: var(--bb-amber-bg) !important; color: var(--bb-amber) !important; line-height: 1; }

/* ============================ TABS (settings/navigation) ============================ */
/* Underline SUBTABS — the settings section nav now matches the .subtab used on every Type-1 list
   page (Customers / Jobs / Reports…), instead of the heavy bordered pill group that read as a
   "sticky button bar" (owner). Reuses the existing component look, no new object; the markup's
   .tab/.tabs classes are overridden here, .navigation-settings-link stays the durable JS hook. */
.ds-settings .navigation-settings-tabs { border-bottom: 1px solid var(--bb-border) !important; gap: 2px !important; }
.ds-settings .navigation-settings-link { height: auto !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--bb-text-2) !important; font-size: var(--bb-fs-m) !important; font-weight: 500 !important; box-shadow: none !important; line-height: 1 !important; margin-bottom: -1px !important; display: inline-flex; align-items: center; }
.ds-settings .navigation-settings-link:hover { color: var(--bb-primary) !important; border-bottom-color: transparent !important; background: none !important; }
.ds-settings .navigation-settings-link.selected,
.ds-settings .navigation-settings-link.on { color: var(--bb-primary) !important; border-bottom-color: var(--bb-primary) !important; background: none !important; font-weight: 600 !important; }
/* mobile settings switcher -> the doc select */
.ds-settings .mobile-router-settings-selection .custom-select { font-size: var(--bb-fs-m) !important; color: var(--bb-text) !important; height: auto !important; padding: 10px 38px 10px 12px !important; border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; background-color: var(--bb-select-bg) !important; box-shadow: 0 2px 2px rgba(0,0,0,.05) !important; }

/* ============================ THE CARD ============================ */
/* strip the AJAX wrappers, make the inner .content-box the single white card */
.ds-settings #data-tables,
.ds-settings .data-view.information-settings,
.ds-settings .content-box-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.ds-settings .content-box { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-l) !important; box-shadow: var(--bb-shadow-1) !important; padding: 24px !important; }

/* section headers ("Information", "Business phone number", "Organizations", …) */
.ds-settings .content-box .info-block-title,
.ds-settings .content-box .title-sm,
.ds-settings .content-box .title { font-size: var(--bb-fs-l) !important; font-weight: 600 !important; color: var(--bb-text) !important; letter-spacing: 0 !important; font-family: var(--bb-font) !important; }

/* ============================ FORM FIELDS (inside the card only) ============================ */
.ds-settings .content-box .form-label { font-size: var(--bb-fs-s) !important; font-weight: 600 !important; color: var(--bb-text-2) !important; margin: 0 0 6px 0 !important; }
.ds-settings .content-box .form-control,
.ds-settings .content-box .custom-select { font-size: var(--bb-fs-m) !important; color: var(--bb-text) !important; background-color: var(--bb-surface) !important; border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; padding: 10px 12px !important; height: auto !important; box-shadow: none !important; }
.ds-settings .content-box .form-control:focus,
.ds-settings .content-box .custom-select:focus { border-color: var(--bb-primary) !important; box-shadow: 0 0 0 3px var(--bb-primary-soft) !important; outline: none !important; }
/* disabled/readonly fields read as calm inset panels, not greyed-out */
.ds-settings .content-box .form-control:disabled,
.ds-settings .content-box .form-control[readonly],
.ds-settings .content-box .custom-select:disabled { background-color: var(--bb-inset) !important; color: var(--bb-text-2) !important; opacity: 1 !important; -webkit-text-fill-color: var(--bb-text-2) !important; cursor: default; }
/* selects: grey fill + soft shadow + roomy chevron (doc .selectc) */
.ds-settings .content-box select.custom-select,
.ds-settings .content-box select.form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--bb-select-bg) !important; box-shadow: 0 2px 2px rgba(0,0,0,.05) !important; padding-right: 38px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 13px center !important; }

/* ============================ BUTTONS ============================ */
/* whole ds-settings page (Integrations renders its Connect buttons OUTSIDE .content-box);
   the nav pills also carry .btn so they are excluded explicitly */
.ds-settings .btn.btn-primary:not(.navigation-settings-link) { background: var(--bb-primary) !important; border: 1px solid var(--bb-primary) !important; border-radius: var(--bb-radius-s) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; padding: 10px 18px !important; }
.ds-settings .btn.btn-primary:not(.navigation-settings-link):hover { background: var(--bb-primary-hover) !important; }
.ds-settings .btn.btn-primary:disabled { opacity: .45 !important; }
.ds-settings .btn.btn-outline-primary:not(.navigation-settings-link),
.ds-settings .btn.create-organisation { background: var(--bb-surface) !important; border: 1px solid var(--bb-primary) !important; color: var(--bb-primary) !important; border-radius: var(--bb-radius-s) !important; font-weight: 600 !important; box-shadow: none !important; padding: 10px 18px !important; }
.ds-settings .btn.btn-outline-primary:not(.navigation-settings-link):hover,
.ds-settings .btn.create-organisation:hover { background: var(--bb-primary-soft) !important; }
/* bootstrap-gray disabled actions (GMB "Connect" In-Development) -> system disabled primary */
.ds-settings .btn.btn-secondary.disabled,
.ds-settings .btn.btn-secondary:disabled { background: var(--bb-primary) !important; border: 1px solid var(--bb-primary) !important; border-radius: var(--bb-radius-s) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; padding: 10px 18px !important; opacity: .45 !important; cursor: not-allowed; }
/* tables inside settings cards (payment history, usage report, monthly bill) ->
   the ONE table treatment: NEUTRAL inset header (cream never inside containers) */
.ds-settings .content-box table thead th,
.ds-settings .content-box table thead td { background: var(--bb-inset) !important; color: var(--bb-text) !important; font-weight: 500 !important; border-color: var(--bb-border) !important; }
.ds-settings .content-box table td { border-color: var(--bb-border) !important; }
/* upgrade/lock hint -> quiet secondary text */
.ds-settings .content-box .lock-message { color: var(--bb-text-2) !important; font-size: var(--bb-fs-s) !important; }
.ds-settings .content-box .lock-message strong { color: var(--bb-text) !important; }

/* ============================ CHIP + BANNER (reusable, applied in blade) ============================ */
/* NOT gated — new class names not used elsewhere, safe to expose app-wide so the
   settings blades can swap the inline-red "Needs Verification"/TCPA text for these. */
.bb-chip a, .bb-chip a:hover { color: inherit; text-decoration: none; }
.bb-banner .ic { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; margin-top: 1px; }


/* ============================================================================
   UNIVERSAL ENTITY MODAL — THE ONE CONTRACT (2026-07-09)
   Every entity modal (customer, vehicle, job, invoice, appointment…) carries
   `.u-modal` on its root and speaks the primitive classes below. Written ONCE
   and unscoped, so a fix here lands on EVERY modal — instances can't drift out
   of sync the way the hand-copied #u-customer-modal / .vehicle-modal blocks did.
   Reuses existing components where they exist: .bb-close/.u-close (X),
   .subtab (tabs), .bb-btn (buttons), .chip (meta pills).
   Canonical markup: resources/views/components/entity-modal.blade.php
   (rendered live on /admin/design-system). Legacy JS hooks (#u-customer-modal,
   #vehicle-<id>, .customer-input, .upload-files, .main-step…) are untouched —
   these classes are ADDITIVE.
   ============================================================================ */
/* -- shell / surface -- */
.u-modal .modal-content { background: var(--bb-surface) !important; border: none !important; color: var(--bb-text) !important; font-family: var(--bb-font); position: relative !important; }

/* -- head: title + sub + meta chips -- */
.u-modal .u-modal-head { padding: 22px 26px 14px !important; border-bottom: none !important; background: var(--bb-surface) !important; margin: 0 !important; min-height: 0 !important; }
.u-modal .u-modal-title { font-size: var(--bb-fs-2xl) !important; font-weight: 700 !important; letter-spacing: -.4px !important; color: var(--bb-text) !important; padding: 0 !important; margin: 0 !important; }
.u-modal .u-modal-sub { color: var(--bb-text-3) !important; font-weight: 400 !important; font-size: var(--bb-fs-s) !important; letter-spacing: 0 !important; }
/* body section headings (Customer/Vehicles/User Details, Information) — bright on EVERY entity modal,
   not just the customer one (owner caught the vehicle labels sitting dim) */
.u-modal .stafter-modal-title:not(.u-modal-title) { font-size: var(--bb-fs-l) !important; font-weight: 600 !important; color: var(--bb-text) !important; }
/* Delete-style actions inside entity modals are danger-OUTLINE (the customer/vehicle pattern), not a red fill */
.u-modal .bb-btn--danger { background: var(--bb-surface) !important; border: 1px solid var(--bb-danger) !important; color: var(--bb-danger) !important; }
.u-modal .bb-btn--danger:hover { background: var(--bb-danger-bg) !important; }
.u-modal .u-modal-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* chips inside the modal (meta pills + status tags): the .chip component is
   .bb-scoped, but modals render OUTSIDE .bb — bridge it here so modals reuse the
   real chip (neutral by default; .chip--danger/success/amber carry status colour) */
.u-modal .chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bb-fs-xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border: none; border-radius: 4px; padding: 4px 8px; line-height: 1; background: var(--bb-inset); color: var(--bb-text-2); }
.u-modal .chip--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.u-modal .chip--success { background: var(--bb-success-bg); color: var(--bb-success); }
.u-modal .chip--amber { background: var(--bb-amber-bg); color: var(--bb-amber); }

/* -- close: a positioned corner circle (reuses .bb-close visuals; kills the tiny
      hard-to-see fa-close glyph). Keeps Bootstrap dismiss hooks on the button. -- */
.u-modal .u-close { position: absolute !important; top: 18px !important; right: 22px !important; z-index: 30 !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; border: none !important; border-radius: 50% !important; background: var(--bb-inset) !important; color: var(--bb-text) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer; box-shadow: var(--bb-shadow-1); opacity: 1 !important; text-shadow: none !important; }
.u-modal .u-close:hover { background: var(--bb-primary) !important; color: #fff !important; }
.u-modal .u-close i { display: none !important; } /* legacy fa-close glyph hidden — the × comes from the button text */

/* -- tabs: reuse .subtab; this just lays them under the head -- */
.u-modal .u-modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bb-border) !important; padding: 0 26px !important; background: var(--bb-surface) !important; margin: 0 !important; }

/* -- KPI cards -- */
.u-modal .u-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.u-modal .u-kpi { position: relative; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; padding: 14px 16px !important; background: var(--bb-surface) !important; box-shadow: none !important; }

/* -- detail table: VIEW + EDIT share ONE table -- */
.u-modal .u-tbl { width: 100%; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m); overflow: hidden; box-shadow: none !important; }
.u-modal .u-tbl td { border-bottom: 1px solid var(--bb-border) !important; padding: 10px 14px !important; color: var(--bb-text) !important; vertical-align: middle; }
.u-modal .u-tbl tr:last-child td { border-bottom: none !important; }
.u-modal .u-tbl tr { background: transparent !important; } /* legacy paints the <tr> light — the opaque tds hide most of it, but it peeks at radius corners */
.u-modal .u-tbl tr:nth-child(even) td, .u-modal .u-tbl .alt-row td { background: var(--bb-zebra) !important; }
.u-modal .u-tbl-label, .u-modal .u-tbl .customer-info-row-label { color: var(--bb-text-2) !important; font-weight: 500 !important; width: 42%; }

/* -- edit inputs inside the detail table: selector is (0,2,1) so it WINS over the
      legacy .customer-input{background:none!important} (0,1,0) and Bootstrap
      .form-control — the specificity trap that left the vehicle edit fields white -- */
.u-modal .u-tbl input, .u-modal .u-tbl select, .u-modal .u-tbl textarea { background: var(--bb-surface) !important; border: 1px solid var(--bb-border-input) !important; color: var(--bb-text) !important; border-radius: var(--bb-radius-s) !important; padding: 7px 10px !important; height: auto !important; font-size: var(--bb-fs-m) !important; width: 100%; }
.u-modal .u-tbl input:focus, .u-modal .u-tbl select:focus, .u-modal .u-tbl textarea:focus { border-color: var(--bb-primary) !important; box-shadow: 0 0 0 3px var(--bb-primary-soft) !important; outline: none !important; }
/* free-standing modal textareas / .base-input (e.g. the Information field) — tokenized in and out of disabled */
.u-modal textarea, .u-modal .base-input { background: var(--bb-surface) !important; border: 1px solid var(--bb-border-input) !important; color: var(--bb-text) !important; border-radius: var(--bb-radius-s) !important; }
.u-modal textarea:disabled, .u-modal .base-input:disabled { background: var(--bb-inset) !important; color: var(--bb-text-2) !important; -webkit-text-fill-color: var(--bb-text-2); opacity: 1 !important; }

/* -- upload: the dashed drop zone (NOT a solid button) -- */
.u-modal .u-upload { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--bb-primary) !important; background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; border-radius: var(--bb-radius-m) !important; padding: 13px !important; width: 100% !important; font-weight: 600 !important; text-align: center; cursor: pointer; margin: 0 !important; }
.u-modal .u-upload:hover { background: var(--bb-primary-soft) !important; border-color: var(--bb-primary) !important; filter: brightness(1.08); }
.u-modal .u-upload img { height: 14px !important; width: 14px !important; object-fit: contain; }

/* -- footer -- */
.u-modal .u-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px !important; border-top: 1px solid var(--bb-border) !important; background: var(--bb-inset) !important; margin: 0 !important; }
.u-modal .u-modal-foot:empty { display: none; }


/* ============================================================================
   UNIVERSAL CUSTOMER MODAL (Porcelain) — target: artifact 8a4ffd30 + owner
   correction: FULL SCREEN (edge-to-edge viewport), not the doc's centered 1400.
   ID-scoped to #u-customer-modal (inherently gated — no leak). Maps the REAL
   modal markup onto the doc anatomy; all JS hooks (.main-step[data-type],
   .edit-customer-info-btn, .delete-customer-btn, .upload-files, injected
   .modal-actions) keep their classes. Tab bodies arrive via AJAX so this block
   styles their stable classes rather than rewriting markup.
   ============================================================================ */
/* ---- shell: true full screen ---- */
#u-customer-modal .modal-content { border: none !important; border-radius: 0 !important; background: var(--bb-surface) !important; font-family: var(--bb-font); color: var(--bb-text); }
/* ---- header = identity block ---- */
#u-customer-modal .modal-header { padding: 22px 26px 14px !important; border-bottom: none !important; background: var(--bb-surface) !important; }
#u-customer-modal .customer-name-container { font-size: var(--bb-fs-2xl) !important; font-weight: 700 !important; letter-spacing: -.4px !important; color: var(--bb-text) !important; padding: 0 !important; }
#u-customer-modal .customer-info-container { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#u-customer-modal .customer-info-phone,
#u-customer-modal .customer-info-address,
#u-customer-modal .customer-info-email { background: var(--bb-inset) !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: var(--bb-fs-s) !important; color: var(--bb-text-2) !important; gap: 7px; margin: 0 !important; }
#u-customer-modal .customer-info-phone div, #u-customer-modal .customer-info-email div { color: var(--bb-primary) !important; font-weight: 500; }
#u-customer-modal .customer-info-container img { width: 13px; height: 13px; object-fit: contain; }
/* ---- tabs = system subtabs (text only: icons + status-line hidden) ---- */
#u-customer-modal .modal-navigation { background: var(--bb-surface) !important; }
#u-customer-modal .modal-navigation-main { border: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--bb-border) !important; padding: 0 26px !important; gap: 4px; background: var(--bb-surface) !important; }
#u-customer-modal .main-step { display: inline-flex !important; align-items: center; gap: 7px; padding: 12px 14px !important; margin-bottom: -1px !important; border: none !important; border-bottom: 2px solid transparent !important; background: transparent !important; font-size: var(--bb-fs-m) !important; font-weight: 500 !important; color: var(--bb-text-2) !important; min-width: 0 !important; width: auto !important; height: auto !important; cursor: pointer; }
#u-customer-modal .main-step .main-step-logo { display: none !important; }
#u-customer-modal .main-step .status-line { display: none !important; }
#u-customer-modal .main-step .main-step-name { font-size: var(--bb-fs-m) !important; font-weight: inherit !important; color: inherit !important; letter-spacing: 0 !important; margin: 0 !important; }
#u-customer-modal .main-step:hover { color: var(--bb-primary) !important; }
#u-customer-modal .main-step.active { color: var(--bb-primary) !important; font-weight: 600 !important; border-bottom-color: var(--bb-primary) !important; }
/* phones: tab bar scrolls horizontally (legacy arrow-carousel styles made labels overlap) */
@media (max-width: 900px) {
    #u-customer-modal .modal-navigation-main { overflow-x: auto; flex-wrap: nowrap !important; padding: 0 14px !important; }
    #u-customer-modal .main-step { flex: none !important; white-space: nowrap; position: static !important; transform: none !important; }
    #u-customer-modal .main-step .main-step-name { white-space: nowrap; position: static !important; }
}
/* ---- body ---- */
#u-customer-modal .data-container { padding: 20px 26px 26px !important; margin: 0 !important; background: var(--bb-surface) !important; }
/* kill leftover legacy margins/min-heights that read as empty bands */
/* the two dead bands the owner flagged (Screen 1): the .modal-content's 30px top padding (band
   ABOVE the name) and the legacy ~25px margin-bottom on the contact chips (band BETWEEN the
   chips and the tabs). The header's own 22px top / 14px bottom padding is the real breathing room. */
#u-customer-modal .modal-content { padding-top: 0 !important; }
#u-customer-modal .customer-info-container { margin-bottom: 0 !important; }
#u-customer-modal .modal-dialog { margin: 0 !important; }
#u-customer-modal .modal-header { margin: 0 !important; min-height: 0 !important; }
#u-customer-modal .modal-navigation, #u-customer-modal .modal-navigation-main { margin: 0 !important; min-height: 0 !important; }
#u-customer-modal .stafter-table-row { margin: 0 !important; }
#u-customer-modal .customer-details { margin: 0 !important; }
/* ---- money strip -> semantic stripe cards ---- */
#u-customer-modal .money-block-item { position: relative; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; padding: 14px 16px !important; background: var(--bb-surface) !important; box-shadow: none !important; min-height: 0 !important; }
#u-customer-modal .money-block-item-line { position: absolute !important; left: 0 !important; top: 10px !important; bottom: 10px !important; width: 4px !important; height: auto !important; border-radius: 0 3px 3px 0 !important; }
#u-customer-modal .money-block-item-line.yellow { background: var(--bb-amber) !important; }
#u-customer-modal .money-block-item-line.red { background: var(--bb-danger) !important; }
#u-customer-modal .money-block-item-line.black { background: var(--bb-text) !important; }
#u-customer-modal .money-block-item-content { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.3px !important; color: var(--bb-text) !important; line-height: 1.25 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left !important; }
#u-customer-modal .money-block-item-content-postfix { font-size: var(--bb-fs-s) !important; font-weight: 400 !important; color: var(--bb-text-2) !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; }
/* ---- section titles ---- */
#u-customer-modal .stafter-modal-title { font-size: var(--bb-fs-l) !important; font-weight: 600 !important; color: var(--bb-text) !important; }
/* ---- toolbar: More/Logs ghost, Edit secondary, Delete danger outline ---- */
#u-customer-modal .btn-nd { font-size: var(--bb-fs-s) !important; font-weight: 600 !important; border-radius: var(--bb-radius-s) !important; padding: 7px 13px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--bb-text-2) !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 6px; line-height: 1 !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; }
#u-customer-modal .btn-nd img { height: 13px !important; width: 13px !important; object-fit: contain; margin: 0 !important; padding: 0 !important; }
#u-customer-modal .btn-nd:hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
#u-customer-modal .btn-nd.edit-customer-info-btn { background: var(--bb-surface) !important; border-color: var(--bb-primary) !important; color: var(--bb-primary) !important; }
#u-customer-modal .btn-nd.edit-customer-info-btn:hover { background: var(--bb-primary-soft) !important; }
#u-customer-modal .btn-nd.delete-customer-btn { background: var(--bb-surface) !important; border-color: var(--bb-danger) !important; color: var(--bb-danger) !important; }
#u-customer-modal .btn-nd.delete-customer-btn:hover { background: var(--bb-danger-bg) !important; }
#u-customer-modal .btn-nd.disabled { opacity: .45 !important; cursor: not-allowed !important; }
/* toolbar converted to REAL .bb-btn (More/Logs ghost, Edit secondary, Delete danger): keep
   Delete a danger-OUTLINE over the legacy .delete-customer-btn red fill, and pin the close X
   top-right. Edit/Delete icons are inline currentColor svgs now (components/icons/pencil+trash,
   owner: bring the icons back) — the old raster-hiding rules are gone. */
#u-customer-modal .bb-btn.delete-customer-btn { background: var(--bb-surface) !important; border-color: var(--bb-danger) !important; color: var(--bb-danger) !important; }
#u-customer-modal .bb-btn.delete-customer-btn:hover { background: var(--bb-danger-bg) !important; }
#u-customer-modal .modal-content { position: relative !important; }
#u-customer-modal .close-btn { position: absolute !important; top: 20px !important; right: 26px !important; z-index: 20 !important; margin: 0 !important; }
#u-customer-modal .bb-close { width: 36px !important; height: 36px !important; background: var(--bb-inset) !important; color: var(--bb-text) !important; font-size: 22px !important; box-shadow: var(--bb-shadow-1); }
#u-customer-modal .bb-close:hover { background: var(--bb-primary) !important; color: #fff !important; }
/* ---- Loading logo (shared preloader partial, shows app-wide): the compiled app.css paints
   .bb-preloader-container light-grey (hsla(0,3%,76%,.169)) and the ripple #666262 — a LIGHT
   loader on every page. Force a dark tokenized backdrop + a branded red ripple. ---- */
.bb-preloader-container { background: var(--bb-bg) !important; opacity: 1 !important; }
.bb-preloader-body div { border-color: var(--bb-primary) !important; }

/* ---- Dashboard "Types of Work" comparison modal (#difference_modal): tokenize the shell,
   the .switcher tabs (real .subtab, static underline instead of .switcher-hr), the type cards
   and the comparison table. ---- */
#difference_modal .modal-content { background: var(--bb-surface) !important; border: none !important; border-radius: var(--bb-radius-l) !important; color: var(--bb-text) !important; box-shadow: var(--bb-shadow-2) !important; }
#difference_modal .modal-header { border-bottom: none !important; }
#difference_modal .title-modal { font-size: var(--bb-fs-2xl) !important; font-weight: 700 !important; color: var(--bb-text) !important; }
#difference_modal .title-modal2 { color: var(--bb-text) !important; font-weight: 600 !important; margin-bottom: 0; }
#difference_modal p, #difference_modal td, #difference_modal li:not(.subtab), #difference_modal .text-normal:not(.subtab) { color: var(--bb-text-2) !important; }
#difference_modal .example { background: var(--bb-inset) !important; color: var(--bb-text-2) !important; border-radius: var(--bb-radius-m); padding: 10px 12px; }
#difference_modal .types-card { background: var(--bb-inset) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; padding: 16px !important; }
#difference_modal .switcher { list-style: none !important; padding-left: 0 !important; }
#difference_modal .switcher-hr { display: none !important; }
#difference_modal .switcher-button.active-switcher-button { color: var(--bb-primary) !important; }
#difference_modal table { border-collapse: collapse !important; width: 100%; }
#difference_modal table th, #difference_modal table td { border: 1px solid var(--bb-border) !important; padding: 10px 12px !important; vertical-align: top; }
#difference_modal table thead th { color: var(--bb-text) !important; background: var(--bb-inset) !important; }

/* ---- Universal-modal internal tables (Projects/Appointments/Subscriptions/Overview): the ds-table
   treatment can't reach here (the modal renders OUTSIDE <main>), so tokenize the toolbar/table/pager
   id-scoped. ---- */
/* the Projects / Appointments / Subscriptions tab tables sit in .info-container, which shipped a
   hardcoded 1px #D7D7D7 border + 4px radius — the "white frame" on porcelain / an off-tone frame
   on espresso (owner: not per the design doc). Tokenize it into the ds-table card (skin-aware
   border + the container radius) so the filters + table read as one converted card. */
#u-customer-modal .info-container { border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-l) !important; overflow: hidden; background: var(--bb-surface) !important; }
#u-customer-modal .info-container .stafter-table-top { padding: 14px 16px !important; }
#u-customer-modal .stafter-table-top { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 12px !important; }
#u-customer-modal .stafter-filter { background: var(--bb-select-bg) !important; border: 1px solid var(--bb-border-strong) !important; color: var(--bb-text) !important; border-radius: var(--bb-radius-s) !important; }
#u-customer-modal .stafter-table-head { background: var(--bb-inset) !important; }
#u-customer-modal .stafter-table-head-column, #u-customer-modal .stafter-table-head-column div, #u-customer-modal .stafter-table-head .text-black { color: var(--bb-text-2) !important; }
#u-customer-modal .stafter-table-body-column, #u-customer-modal .stafter-table-body-column div { color: var(--bb-text) !important; }
#u-customer-modal .stafter-table-body tr:nth-child(odd) td { background: var(--bb-zebra) !important; }
#u-customer-modal .stafter-table-body tr td { border-bottom: 1px solid var(--bb-border) !important; }
/* modal internal pager now renders the REAL .bb-pg/.bb-pager component (universal-modal.js);
   the .stafter-table-paginator-page facelift block was removed (no more skinning the legacy class). */

/* ---- Vehicle detail modal (.vehicle-modal, dynamic #vehicle-<id>) now wears
   `.u-modal`: shell surface, close-X, head title/sub, detail+edit table, edit
   inputs, dashed upload zone and footer bar all come from the ONE contract
   above. Only genuinely vehicle-specific bits remain here. ---- */
.vehicle-modal .modal-content { border-radius: var(--bb-radius-l) !important; } /* centered dialog, not full-screen → keep rounded corners */
.vehicle-modal .modal-body { padding: 0 24px 20px !important; }
/* in-body action buttons are the real .bb-btn now (Delete/Edit/Download/Preview);
   only vehicle-local layout glue remains: sibling spacing. Icons are inline currentColor
   svgs now (owner: bring the icons back) — the hiding rule is gone. */
.vehicle-modal .bb-btn { margin-left: 8px; }
.vehicle-modal #show_delete_vehicle_modal { border-color: var(--bb-danger) !important; color: var(--bb-danger) !important; }
.vehicle-modal #show_delete_vehicle_modal:hover { background: var(--bb-danger-bg) !important; }
/* status picker (custom colored dropdown .status-select): trigger reads like a select,
   panel tokenized. Per-status option colors (amber/green/red) are left intact. */
#u-customer-modal .status-select { border: 1px solid var(--bb-border-strong) !important; background: var(--bb-select-bg) !important; border-radius: var(--bb-radius-s) !important; padding: 6px 12px !important; gap: 8px; height: auto !important; min-height: 0 !important; }
#u-customer-modal .status-select:hover { border-color: var(--bb-primary) !important; }
#u-customer-modal .status-select-options-container { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; box-shadow: var(--bb-shadow-2) !important; overflow: hidden; padding: 4px !important; }
#u-customer-modal .status-select-option { border-radius: var(--bb-radius-s) !important; padding: 8px 10px !important; }
#u-customer-modal .status-select-option:hover { background: var(--bb-inset) !important; }
/* Shared colored status picker spacing. The legacy app/worker styles pin options to
   28px, collapsing their declared padding. Keep every real `.status-select` menu
   readable and consistent without changing its status colors or JS hooks. */
.status-select-options-container:not(.d-none) { display: grid; gap: 2px; }
.status-select-option {
    align-items: center;
    box-sizing: border-box;
    gap: 8px;
    height: auto !important;
    min-height: 36px !important;
    line-height: 18px !important;
    padding: 8px 10px !important;
}
.status-select-option img { flex: 0 0 auto; margin-right: 0 !important; }
@media (max-width: 475px) {
    .status-select-option { min-height: 44px !important; padding: 12px 13px !important; }
}
/* modal internal tables (Projects/Appointments/Subscriptions/Overview) get the same
   OPAQUE row hover as the list pages — no white/pink flash (they aren't under .ds-table). */
#u-customer-modal .data-view table tr:not(.head):hover, #u-customer-modal .data-view table tr:not(.head):hover > td,
#u-customer-modal .stafter-table-body > tr:not(.head):hover, #u-customer-modal .stafter-table-body > tr:not(.head):hover > td { background: var(--bb-row-hover) !important; }
/* ---- details rows: bordered zebra label/value group ---- */
#u-customer-modal .data-container-description { border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; overflow: hidden; background: var(--bb-surface) !important; }
#u-customer-modal .description-row { border-bottom: 1px solid var(--bb-border) !important; margin: 0 !important; background: transparent !important; }
#u-customer-modal .description-row:last-child { border-bottom: none !important; }
#u-customer-modal .description-row:nth-child(odd) { background: var(--bb-zebra) !important; }
#u-customer-modal .description-row-name { width: 150px !important; flex: none !important; padding: 12px 14px !important; font-size: var(--bb-fs-s) !important; color: var(--bb-text-2) !important; font-weight: 500 !important; background: transparent !important; }
#u-customer-modal .description-row-value { padding: 12px 14px !important; font-size: var(--bb-fs-m) !important; color: var(--bb-text) !important; min-width: 0; background: transparent !important; }
#u-customer-modal .description-row-value .customer-input { border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; padding: 6px 10px !important; font-size: var(--bb-fs-m) !important; color: var(--bb-text) !important; width: 100%; }
#u-customer-modal .description-row-value .customer-input:focus { border-color: var(--bb-primary) !important; box-shadow: 0 0 0 3px var(--bb-primary-soft) !important; outline: none !important; }
/* ---- comment ---- */
#u-customer-modal textarea.base-input { width: 100%; min-height: 88px; border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; padding: 10px 12px !important; font: inherit !important; color: var(--bb-text) !important; background: var(--bb-surface) !important; resize: vertical; }
/* FINISH the universal modal — a prior pass tokenised .base-input but left these: the
   .bb-standard-textarea (grey bg + black text), the white .status-select, the white floating
   labels. Token-based so they flip both skins. */
#u-customer-modal textarea.bb-standard-textarea, #u-customer-modal .bb-standard-textarea { background: var(--bb-surface) !important; color: var(--bb-text) !important; border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important; }
#u-customer-modal .status-select.btn-nd.select, #u-customer-modal .status-select.select, #u-customer-modal div.status-select, #u-customer-modal .status-select-options-container { background: var(--bb-surface) !important; color: var(--bb-text) !important; border-color: var(--bb-border-strong) !important; }
#u-customer-modal .status-select-options-container .option:hover { background: var(--bb-primary-soft) !important; }
#u-customer-modal .base-label.fly { background: var(--bb-surface) !important; color: var(--bb-text-2) !important; }
#u-customer-modal textarea.base-input:disabled { background: var(--bb-inset) !important; color: var(--bb-text-2) !important; -webkit-text-fill-color: var(--bb-text-2); opacity: 1 !important; }
/* ---- upload affordance: dashed system red ---- */
#u-customer-modal .btn-nd.upload-files, #u-customer-modal .btn-nd.medium.w-100 { border: 1.5px dashed var(--bb-primary) !important; color: var(--bb-primary) !important; border-radius: var(--bb-radius-m) !important; padding: 12px !important; width: 100% !important; font-weight: 600 !important; text-align: center; justify-content: center; background: var(--bb-primary-soft) !important; }
#u-customer-modal .btn-nd.upload-files:hover { background: #ffe7ee !important; }
/* ---- footer: injected .modal-actions -> inset strip, right-aligned ---- */
#u-customer-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px !important; border-top: 1px solid var(--bb-border) !important; background: var(--bb-inset) !important; }
#u-customer-modal .modal-actions:empty { display: none; }
#u-customer-modal .modal-actions .btn-nd, #u-customer-modal .modal-actions .btn { font-size: var(--bb-fs-m) !important; padding: 10px 18px !important; }


/* ============================================================================
   STANDARD MODAL — the universal application modal contract.
   The Bootstrap shell, established small/medium/large sizes, shared close
   control, fields, tables, and buttons are tokenized for both app skins.
   Structural behavior remains owned by Bootstrap and each modal's existing JS.
   ============================================================================ */
.modal.standard-modal .modal-content {
    border: none !important;
    border-radius: var(--bb-radius-l) !important;
    box-shadow: var(--bb-shadow-2) !important;
    background: var(--bb-surface) !important;
    font-family: var(--bb-font);
    color: var(--bb-text);
    overflow: hidden;
    isolation: isolate;
}
.modal.standard-modal .modal-header {
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--bb-border) !important;
    background: var(--bb-surface);
    font-size: var(--bb-fs-xl) !important;
    font-weight: var(--bb-fw-semibold) !important;
    color: var(--bb-text) !important;
    border-radius: var(--bb-radius-l) var(--bb-radius-l) 0 0 !important;
}
.modal.standard-modal .modal-header .modal-title,
.modal.standard-modal .modal-header .modal-custom-title {
    font-size: var(--bb-fs-xl) !important;
    font-weight: var(--bb-fw-semibold) !important;
    color: var(--bb-text) !important;
}
.modal.standard-modal .modal-body { position: relative; color: var(--bb-text); }
.modal.standard-modal .standard-modal__body-close {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 1;
}
/* bb-tbl INSIDE a standard-modal (reports channel drill-down etc.): legacy page CSS
   re-inks table text dark, which vanishes on the dark skin — pin th/td to the token. */
.modal.standard-modal .bb-tbl thead th,
.modal.standard-modal .bb-tbl td { color: var(--bb-text) !important; }
/* close X: the shared standard-components/modal-close SVG uses stroke=currentColor now,
   so give it the skin's text colour here (it was a hardcoded #1A1A1A = invisible on the
   dark skin). Unskinned/customer-cab modals keep the Bootstrap black default. */
.modal.standard-modal .standart-close-btn .close { color: var(--bb-text-2) !important; }
.modal.standard-modal .standart-close-btn .close:hover { color: var(--bb-primary) !important; }
.modal.standard-modal label,
.modal.standard-modal .form-label { font-size: var(--bb-fs-s) !important; font-weight: 600 !important; color: var(--bb-text-2) !important; }
.modal.standard-modal .modal-body input.form-control,
.modal.standard-modal .modal-body input.standard-input,
/* also catch bare/typed inputs (e.g. the Add Checklist "Checklist Name" input has NO class →
   was a white UA field under light ink = invisible) */
.modal.standard-modal .modal-body input[type="text"],
.modal.standard-modal .modal-body input[type="number"],
.modal.standard-modal .modal-body input[type="email"],
.modal.standard-modal .modal-body input:not([type]),
.modal.standard-modal .modal-body textarea {
    border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important;
    font-size: var(--bb-fs-m) !important; color: var(--bb-text) !important; box-shadow: none !important;
    /* surface bg, not the UA default: the rule inks fields with --bb-text, and on the
       dark skin a UA-white field under light ink is unreadable (found via the cockpit's
       connect pad; porcelain is unchanged — surface IS white there) */
    background-color: var(--bb-surface) !important;
}
.modal.standard-modal .modal-body input::placeholder,
.modal.standard-modal .modal-body textarea::placeholder {
    color: var(--bb-text-3) !important;
    opacity: 1;
}
.modal.standard-modal .modal-body input:disabled,
.modal.standard-modal .modal-body textarea:disabled,
.modal.standard-modal .modal-body select:disabled {
    background-color: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    opacity: 1;
}
.modal.standard-modal .modal-body input:focus,
.modal.standard-modal .modal-body textarea:focus,
.modal.standard-modal .modal-body select:focus {
    border-color: var(--bb-primary) !important; box-shadow: 0 0 0 3px var(--bb-primary-soft) !important; outline: none !important;
}
.modal.standard-modal .modal-body select {
    appearance: none; -webkit-appearance: none; background-color: var(--bb-select-bg) !important;
    border: 1px solid var(--bb-border-strong) !important; border-radius: var(--bb-radius-s) !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.05) !important; color: var(--bb-text) !important; padding-right: 34px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%236E6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 11px center !important;
}
.modal.standard-modal .btn.btn-primary,
.modal.standard-modal .bb-standard-btn.btn-primary {
    background: var(--bb-primary) !important; border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-radius-s) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important;
}
.modal.standard-modal .btn.btn-primary:hover { background: var(--bb-primary-hover) !important; }
.modal.standard-modal .btn.btn-primary:disabled,
.modal.standard-modal .btn.btn-primary.disabled { opacity: .45 !important; background: var(--bb-primary) !important; }
.modal.standard-modal .btn.btn-outline-primary,
.modal.standard-modal .btn.btn-secondary {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-primary) !important; color: var(--bb-primary) !important;
    border-radius: var(--bb-radius-s) !important; font-weight: 600 !important; box-shadow: none !important;
}
.modal.standard-modal .btn.btn-outline-primary:hover,
.modal.standard-modal .btn.btn-secondary:hover { background: var(--bb-primary-soft) !important; }
/* checklist/template GRID + worker dropdown inside standard-modals: the bootstrap .table
   (New Template Item/Description grid) and the .dd-select options (Assign Workers list) shipped
   white — tokenize both so the whole modal is dark on espresso / clean on porcelain (owner audit) */
.modal.standard-modal .modal-body .table,
.modal.standard-modal .modal-body table { background: var(--bb-surface) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; }
.modal.standard-modal .modal-body .table th,
.modal.standard-modal .modal-body .table td { color: var(--bb-text) !important; border-color: var(--bb-border) !important; background: transparent !important; }
.modal.standard-modal .modal-body .table thead th { background: var(--bb-inset) !important; color: var(--bb-text-2) !important; }
.modal.standard-modal .dd-selected,
.modal.standard-modal .dd-options { background: var(--bb-surface) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; }
.modal.standard-modal .dd-option { background: var(--bb-surface) !important; color: var(--bb-text) !important; }
.modal.standard-modal .dd-option:hover,
.modal.standard-modal .dd-option.dd-option-selected { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
/* Tom Select controls inside standard-modals (e.g. the Add Checklist "Checklist Name" field is a
   .ts-control wrapper div that shipped white; the inner input was already tokenized) */
.modal.standard-modal .ts-control,
.modal.standard-modal .ts-wrapper.single .ts-control { background: var(--bb-surface) !important; border: 1px solid var(--bb-border-strong) !important; color: var(--bb-text) !important; }
.modal.standard-modal .ts-control .item,
.modal.standard-modal .ts-control input { color: var(--bb-text) !important; }
.modal.standard-modal .ts-dropdown { background: var(--bb-surface) !important; border-color: var(--bb-border) !important; color: var(--bb-text) !important; box-shadow: var(--bb-shadow-2) !important; }
.modal.standard-modal .ts-dropdown .option { color: var(--bb-text) !important; }
.modal.standard-modal .ts-dropdown .option.active,
.modal.standard-modal .ts-dropdown .option:hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
/* footer strip only where a .modal-footer exists (no layout change otherwise) */
.modal.standard-modal .modal-footer {
    border-top: 1px solid var(--bb-border) !important; background: var(--bb-inset) !important;
    padding: 12px 24px !important; border-radius: 0 0 var(--bb-radius-l) var(--bb-radius-l) !important;
    margin: 0;
    gap: 10px;
}
.modal.standard-modal .modal-footer > * { margin: 0; }
.modal.standard-modal .standard-modal__footer--split > .btn,
.modal.standard-modal .standard-modal__footer--split > .bb-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* ------------------------------------------------------------------------
   DATERANGEPICKER (vendor popup, appended to <body> so main:has() can't reach
   it) — same converted-page gate as the standard-modal. The vendor sheet is
   hard white (#fff/#eee/#999) and main.scss pins the selected day to `color:
   black !important` — both invisible on espresso.
   ------------------------------------------------------------------------ */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker {
    background: var(--bb-surface, #fff) !important; border: 1px solid var(--bb-border, #ddd) !important;
    color: var(--bb-text, #212529) !important; font-family: var(--bb-font);
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker:before { border-bottom-color: var(--bb-border, #ccc); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker:after { border-bottom-color: var(--bb-surface, #fff); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .calendar-table {
    background: var(--bb-surface, #fff) !important; border-color: var(--bb-surface, #fff) !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .calendar-table th,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .calendar-table td { color: var(--bb-text, #212529); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .calendar-table .next span,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .calendar-table .prev span { border-color: var(--bb-text-2, #000); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.off,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.off.in-range,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.off.start-date,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.off.end-date { background: transparent !important; color: var(--bb-text-3, #999) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.available:hover,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker th.available:hover { background-color: var(--bb-primary-soft, #eee) !important; color: var(--bb-primary, inherit); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker td.in-range { background-color: var(--bb-primary-soft, #ebf4f8) !important; color: var(--bb-text, #000); }
/* the selected day: main.scss draws a primary inset ring but pins color:black !important */
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .active { color: var(--bb-text, black) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .ranges li { color: var(--bb-text-2, #08c); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .ranges li:hover { background-color: var(--bb-primary-soft, #eee); color: var(--bb-primary, #08c); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .drp-buttons { border-top: 1px solid var(--bb-border, #ddd); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .drp-buttons .cancelBtn { color: var(--bb-text-2, #212529) !important; }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker .drp-selected { color: var(--bb-text-2, inherit); }
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.hourselect,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.minuteselect,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.secondselect,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.ampmselect,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.monthselect,
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .daterangepicker select.yearselect {
    background: var(--bb-select-bg, #fff); color: var(--bb-text, #212529); border: 1px solid var(--bb-border-input, #ccc); border-radius: var(--bb-radius-s, 4px);
}

/* ========================================================================
   DS-COCKPIT — cockpit page redesign (shared-inbox treatment, owner GO)
   ------------------------------------------------------------------------
   Scope: `.cockpit-main-wrapper:not(.cockpit-admin)` = the ORG cockpit only
   (admin cockpit shares the layout but keeps legacy paint until converted).
   `.dsg-cockpit` = the same components rendered on /admin/design-system.
   HARD RULE from the JS map (cockpit.js / chat.js / call.js / sms_counter.js):
   every id/class here is a load-bearing hook — this block restyles, it NEVER
   renames, and it never changes display-type of elements whose visibility JS
   reads (.cockpit-subject, .hold-call icons, .cockpit-cutdown .container).
   Bootstrap col classes stay: cockpit.js swaps them for the mobile flow.
   ======================================================================== */

/* ---- shell: page on bg, rails on surface, thread on bg -------- */
.cockpit-main-wrapper:not(.cockpit-admin) main.ds-cockpit { background: var(--bb-bg); }
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .left-sidebar {
    background: var(--bb-surface);
    border-right: 1px solid var(--bb-border) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar {
    background: var(--bb-surface);
    border-left: 1px solid var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar { background: var(--bb-bg); }

/* ---- left rail: search (legacy nests under #chat-messages — match it) -- */
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #user_full_search,
.dsg-cockpit #user_full_search {
    width: 100%;
    background-color: var(--bb-inset);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 34px 9px 34px;
    font-size: var(--bb-fs-m, 13.5px);
    color: var(--bb-text);
    transition: border-color .15s, background-color .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #user_full_search::placeholder { color: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #user_full_search:focus {
    outline: none;
    border-color: var(--bb-primary);
    background-color: var(--bb-surface);
}
/* the contact-list scrollbar thumb was the legacy red — quiet it */
.cockpit-main-wrapper:not(.cockpit-admin) #users::-webkit-scrollbar { width: 8px; }
.cockpit-main-wrapper:not(.cockpit-admin) #users::-webkit-scrollbar-thumb { background: var(--bb-border-strong); border-radius: 8px; }
.cockpit-main-wrapper:not(.cockpit-admin) #users::-webkit-scrollbar-track { background: transparent; }

/* ---- left rail: the four channel tabs (radio labels; JS toggles
        .label_outer.on + text-primary/text-secondary on the labels) ---- */
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer,
.dsg-cockpit .label_outer {
    border-radius: 9px;
    margin: 0 2px 6px;
    padding-top: 6px;
    transition: background .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer:hover { background: var(--bb-inset); }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer.on,
.dsg-cockpit .label_outer.on { background: var(--bb-primary-soft); }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer svg path,
.dsg-cockpit .label_outer svg path { fill: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer label.text-secondary { color: var(--bb-text-2) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer label.text-primary { color: var(--bb-primary) !important; }

/* ---- left rail: conversation rows (server + chat.js-injected share the
        same inline padding, so paint only — no box-model overrides) ------ */
.cockpit-main-wrapper:not(.cockpit-admin) .chat,
.dsg-cockpit .chat {
    border-bottom-color: var(--bb-border) !important;
    color: var(--bb-text);
}
.cockpit-main-wrapper:not(.cockpit-admin) .chat .user-name-block,
.dsg-cockpit .chat .user-name-block { font-weight: 600; font-size: 13.5px; }
.cockpit-main-wrapper:not(.cockpit-admin) .last-chat-message,
.dsg-cockpit .last-chat-message { color: var(--bb-text-3) !important; font-size: 12px; }
.cockpit-main-wrapper:not(.cockpit-admin) .chat:hover { background-color: var(--bb-row-hover); }
.cockpit-main-wrapper:not(.cockpit-admin) .chat.active,
.cockpit-main-wrapper:not(.cockpit-admin) .chat:has(.chat-content.open),
.dsg-cockpit .chat.active {
    background-color: var(--bb-primary-soft);
    box-shadow: inset 3px 0 0 var(--bb-primary);
}
.cockpit-main-wrapper:not(.cockpit-admin) .chat.active .user-name-block,
.cockpit-main-wrapper:not(.cockpit-admin) .chat:has(.chat-content.open) .user-name-block,
.dsg-cockpit .chat.active .user-name-block { color: var(--bb-primary); }

/* ---- thread: messages as cards --------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) #messages { padding: 6px 4px 0; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .date,
.cockpit-main-wrapper:not(.cockpit-admin) .message > .small,
.dsg-cockpit .message > .small { color: var(--bb-text-3) !important; font-size: 11.5px; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-content,
.dsg-cockpit .message .message-content {
    background: var(--bb-surface) !important;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m, 12px);
    box-shadow: var(--bb-shadow-1);
    padding: 12px 14px;
}
/* outgoing = the warm secondary surface (was inline #F9FAFB in the blade) */
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .message-content,
.dsg-cockpit .message.self .message-content { background: var(--bb-surface-2) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-text,
.dsg-cockpit .message .message-text { color: var(--bb-text); font-size: 13.5px; line-height: 1.5; }
/* the service line ("Email"/"SMS"/"Follow-Up" + char count) reads as a tag */
.cockpit-main-wrapper:not(.cockpit-admin) .message .service .msg-kind,
.dsg-cockpit .message .service .msg-kind {
    display: inline-flex;
    align-items: center;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .forwards { color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .new-messages .text,
.dsg-cockpit .new-messages .text {
    background-color: var(--bb-surface) !important; /* backend.css hardcodes #fff — the divider-label cutout must follow the skin (white on porcelain, dark on espresso) */
    color: var(--bb-primary) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.cockpit-main-wrapper:not(.cockpit-admin) .new-messages hr { border-top-color: var(--bb-primary-soft); margin-top: 4px; }
/* older-load spinner rows / audio rows keep their hooks; token the chrome */
.cockpit-main-wrapper:not(.cockpit-admin) .message .timeline { border-color: var(--bb-border-strong) !important; }

/* ---- composer --------------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) #send-form {
    border-top: 1px solid var(--bb-border);
    background: var(--bb-surface);
    padding: 10px 16px 12px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #sms-counter { color: var(--bb-text-2); font-size: 12px; }
.cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input,
.dsg-cockpit #send-form textarea.input {
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-m, 12px);
    background: var(--bb-surface);
    color: var(--bb-text);
    transition: border-color .15s, box-shadow .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 14%, transparent);
    outline: none;
}
/* subject strip: anatomy untouched (cockpit.js reads its display and moves
   the slider/padding inline) — corners + tokens only */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject { border-radius: 10px 10px 0 0; }
/* the subject input itself was UA-white on espresso (found by operating) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject input,
.dsg-cockpit .cockpit-subject input {
    background: transparent;
    color: var(--bb-text);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject input::placeholder { color: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-subject-title { color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-carbon-copies-checkbox a { color: var(--bb-primary); }
/* channel buttons: pill treatment; .sending = active channel (JS-managed) */
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn,
.dsg-cockpit .cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 99px !important;
    border: 1px solid var(--bb-border-strong) !important;
    background: transparent;
    color: var(--bb-text-2);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 16px;
    transition: all .15s;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn:hover:not(:disabled) {
    border-color: var(--bb-primary) !important;
    color: var(--bb-primary);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn.sending,
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn.btn-primary,
.dsg-cockpit .cc-btn.sending {
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn:disabled { opacity: .45; }
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn.send-button,
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn.btn-dark,
.dsg-cockpit .cc-btn.send-button {
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--bb-primary) 40%, transparent) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cc-btn.send-button:hover { background: var(--bb-primary-hover) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-button-send-col #sendButton {
    background: var(--bb-primary);
    border: none;
    border-radius: var(--bb-radius-m, 12px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--bb-primary) 40%, transparent);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-button-send-col #sendButton:hover { background: var(--bb-primary-hover); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links .cockpit-link { color: var(--bb-text-2); font-weight: 500; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links .cockpit-link:hover { color: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) #nonVerificationMessage a { color: var(--bb-amber) !important; }

/* ---- right rail ------------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar-section-split { border-bottom: 1px solid var(--bb-border); }
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar-section-line { border-bottom: 1px solid var(--bb-border); }
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .cockpit-title {
    color: var(--bb-text);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.1px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .cockpit-title { font-size: 16.5px; }
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .address,
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .phone,
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .email { color: var(--bb-text-2); font-size: 13px; }
/* section "+" icons: hardcoded #D84560 strokes follow the primary token */
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-follow-up svg path,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-incident svg path,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-appointment svg path,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-jobs svg path { stroke: var(--bb-primary); }
/* entity cards (server + the #right-*-tmpl clones share these classes) */
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card,
.dsg-cockpit .right-sidebar-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m, 12px);
    transition: border-color .15s, box-shadow .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card-h:hover,
.dsg-cockpit .right-sidebar-card-h:hover {
    background: var(--bb-surface);
    border-color: var(--bb-primary);
    box-shadow: var(--bb-shadow-1);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .card-text,
.dsg-cockpit .right-sidebar-card .card-text { color: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .creator-block,
.dsg-cockpit .right-sidebar-card .creator-block {
    background: var(--bb-amber-bg);
    color: var(--bb-amber);
    border-radius: 6px;
    font-weight: 600;
}

/* ---- agent dock (corner card — Option A, owner-picked) ---------------- */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper {
        display: flex;
        flex-direction: column;
        bottom: 12px;
        right: 12px;
        width: 330px;
        border-radius: var(--bb-radius-l, 16px);
        border: 1px solid var(--bb-border);
        box-shadow: var(--bb-shadow-2);
        padding: 0;
        overflow: hidden !important; /* base scss sets visible; the card clips its children */
    }
    /* flex order rebuilds the dock: status+business first, tools, queue */
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-forwarding-phone { order: 1; padding: 12px 14px 10px !important; margin: 0 !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns {
        position: static;
        order: 2;
        display: flex;
        gap: 8px;
        padding: 2px 14px 12px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button { order: 3; margin: 0 14px 12px; width: auto !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue-call-list,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper #queue-call-list { order: 4; padding: 0 10px 10px; }
}
/* dock paint (all widths) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper,
.dsg-cockpit .cockpit-wrapper { background: var(--bb-surface); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info b,
.dsg-cockpit .cockpit-wrapper .org_info b { font-size: 13px; color: var(--bb-text); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info,
.dsg-cockpit .cockpit-wrapper .org_info { color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org-twilio-phone { color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info a { color: var(--bb-primary) !important; font-weight: 600; }
/* dock-link = the three settings links in the dock (were inline #D84560) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-link,
.dsg-cockpit .cockpit-wrapper .dock-link {
    color: var(--bb-primary) !important;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* availability switch: bootstrap custom-switch reskinned to the bb switch */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .custom-switch .custom-control-label::before,
.dsg-cockpit .custom-switch .custom-control-label::before {
    background-color: var(--bb-border-strong);
    border-color: var(--bb-border-strong);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.dsg-cockpit .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .custom-switch .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--bb-primary-soft); }
/* dock tool buttons */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .btn-mobile-dial {
    flex: 1;
    justify-content: center;
    border-radius: 10px !important;
    background: var(--bb-primary) !important;
    border: none;
    color: var(--bb-on-primary);
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bb-primary) 35%, transparent);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .btn-mobile-dial:hover { background: var(--bb-primary-hover) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .add-view-logs {
    flex: 1;
    justify-content: center;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid var(--bb-border-strong) !important;
    color: var(--bb-text-2) !important;
    font-weight: 600;
    font-size: 13px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .add-view-logs:hover {
    background: var(--bb-primary-soft) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-primary) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .add-view-logs:hover svg path { fill: var(--bb-primary); }
/* queue expander strip */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button,
.dsg-cockpit .open-queue-call-button {
    border-radius: 10px;
    background: var(--bb-amber-bg) !important;
    border: none;
    color: var(--bb-amber) !important;
    font-weight: 700;
    font-size: 12.5px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button #svg-cockpit path { stroke: var(--bb-amber); }
/* flash the queue bar while a caller waits (restores the pre-redesign attention pulse;
   call.js adds .blink, and .has-queue is set on the wrapper whenever callers are present) */
@keyframes bb-queue-flash {
    0%, 100% { background: var(--bb-amber-bg) !important; box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    50%      { background: var(--bb-amber) !important; color: #fff !important; box-shadow: 0 0 0 3px var(--bb-amber-bg); }
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button.blink,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .open-queue-call-button {
    animation: bb-queue-flash 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button.blink,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .open-queue-call-button { animation: none; }
}
/* Hide the dock's duplicate Dial/Message + Logs (the thread-header Call/Dial/Logs replace them).
   Kept in the DOM as the data source the header Logs clones (chat.blade installThreadActions).
   The .cockpit-wrapper .additional-btns display rules are !important at 4-class specificity, so
   Bootstrap's single-class .d-none loses — this rule adds .d-none for 5-class specificity to win. */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns.d-none { display: none !important; }
/* queue caller rows (server queue.blade + #call-user-template clones) */
.cockpit-main-wrapper:not(.cockpit-admin) .queue-user .queue_user_fullname,
.dsg-cockpit .queue-user .queue_user_fullname { font-size: 13.5px; font-weight: 600; color: var(--bb-text); }
.cockpit-main-wrapper:not(.cockpit-admin) .queue-user .queue_phone,
.cockpit-main-wrapper:not(.cockpit-admin) .queue-user .queue_email,
.dsg-cockpit .queue-user .queue_phone, .dsg-cockpit .queue-user .queue_email { font-size: 12px; color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .border-secondary { border-color: var(--bb-border) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .queue-user .view-details a { color: var(--bb-primary); font-size: 12px; font-weight: 600; }
.cockpit-main-wrapper:not(.cockpit-admin) .call-user-card .card-preloader { background-color: color-mix(in srgb, var(--bb-surface) 60%, transparent); }
/* incoming-call blink keeps its hook classes; follow the danger token */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.border-danger { border-color: var(--bb-danger) !important; }

/* ---- live-call chip (minimized call) + call modal accents ------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 99px;
    box-shadow: var(--bb-shadow-2);
    padding: 8px 16px;
    width: auto;
    min-width: 10rem;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown .cutdown-name { font-size: 13px; font-weight: 600; color: var(--bb-text); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown .cutdown-phone { font-size: 12px; color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown .call-timer { color: var(--bb-success); font-variant-numeric: tabular-nums; }
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .call-timer {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .call-type { color: var(--bb-text-3); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }

/* ---- preloaders / misc ------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .loader-bg { background: color-mix(in srgb, var(--bb-surface) 72%, transparent); }

/* ========================================================================
   DS-COCKPIT ROUND 2 — the actual mockup anatomy (owner: round 1 was a
   reskin, not the redesign). Floating panes, avatars, aligned thread cards,
   day dividers, the real composer box. Loaded after round 1 — later rules
   win ties; !important pins values the legacy JS writes inline
   (subject display / #message padding+heights / slider top).
   ======================================================================== */

/* ---- avatars (server-rendered; JS-injected rows degrade without them) --- */
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava,
.dsg-cockpit .cv-ava {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex: none;
    font-weight: 700; font-size: 13px;
    color: #fff;
    letter-spacing: .3px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c1, .dsg-cockpit .cv-ava.c1 { background: #7C6FD9; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c2, .dsg-cockpit .cv-ava.c2 { background: #2E9E8F; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c3, .dsg-cockpit .cv-ava.c3 { background: #D98A2B; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c4, .dsg-cockpit .cv-ava.c4 { background: #4A90D9; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c5, .dsg-cockpit .cv-ava.c5 { background: #C05299; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c6, .dsg-cockpit .cv-ava.c6 { background: #6B8E23; }
.cockpit-main-wrapper:not(.cockpit-admin) .cv-ava.c-out, .dsg-cockpit .cv-ava.c-out { background: var(--bb-text-2); }

/* ---- floating panes (desktop only — cockpit.js owns the mobile col swap) - */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages { height: calc(100vh - 80px); }
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #admin-side-user-info {
        gap: 12px;
        padding: 12px;
        height: 100%;
        background: var(--bb-bg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .left-sidebar {
        flex: 0 0 calc(20.8333% - 16px);
        max-width: calc(20.8333% - 16px);
        border: 1px solid var(--bb-border) !important;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--bb-shadow-1);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar {
        flex: 0 0 calc(54.1667% - 16px);
        max-width: calc(54.1667% - 16px);
        border: 1px solid var(--bb-border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--bb-shadow-1);
        background: var(--bb-surface);
        height: 100%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar {
        flex: 0 0 calc(25% - 16px);
        max-width: calc(25% - 16px);
        border: 1px solid var(--bb-border) !important;
        border-radius: 16px;
        box-shadow: var(--bb-shadow-1);
        height: 100%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #cockpit-content { height: 100% !important; }
}

/* ---- left rail rows: avatar + name/time + preview -------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) #users .chat,
.dsg-cockpit .chat {
    gap: 11px;
    align-items: center !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .chat-time,
.dsg-cockpit .chat-time { font-size: 11px; color: var(--bb-text-3); white-space: nowrap; }
/* the four channel tabs: text-first segmented look (icons retire) */
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer > label:first-child svg { display: none; }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer { position: relative; padding-top: 2px; }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer > label:first-child {
    position: absolute;
    top: -4px; right: 4px;
    margin: 0 !important;
    z-index: 1;
}
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer > label:last-child { padding: 8px 2px !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer .name { font-size: 12.5px !important; }

/* ---- thread: aligned cards with avatars ------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content { padding: 0 6px; }
.cockpit-main-wrapper:not(.cockpit-admin) .day-split,
.dsg-cockpit .day-split {
    display: flex; align-items: center; gap: 12px;
    color: var(--bb-text-3);
    font-size: 11px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    margin: 14px 8px 10px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .day-split::before,
.cockpit-main-wrapper:not(.cockpit-admin) .day-split::after,
.dsg-cockpit .day-split::before, .dsg-cockpit .day-split::after {
    content: ""; flex: 1; height: 1px; background: var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-row,
.dsg-cockpit .message .msg-row { display: flex; gap: 10px; align-items: flex-start; }
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .msg-row,
.dsg-cockpit .message.self .msg-row { flex-direction: row-reverse; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-ava { width: 30px; height: 30px; font-size: 11px; margin-top: 16px; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-main,
.dsg-cockpit .message .msg-main { max-width: 76%; min-width: 260px; }
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .message-content { text-align: left; }
.cockpit-main-wrapper:not(.cockpit-admin) .message { padding: 4px 8px; }

/* ---- thread header ----------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head {
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-surface);
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head[data-empty] { visibility: hidden; }
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head .cv-ava { width: 38px; height: 38px; }
.cockpit-main-wrapper:not(.cockpit-admin) .ds-th-name {
    font-size: 15px; font-weight: 700; color: var(--bb-text);
    letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-th-sub {
    font-size: 12.5px; color: var(--bb-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-th-menu {
    width: 32px; height: 32px;
    border: 1px solid var(--bb-border); border-radius: 9px;
    background: transparent; color: var(--bb-text-2);
    font-weight: 700; line-height: 1;
    transition: all .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-th-menu:hover { border-color: var(--bb-primary); color: var(--bb-primary); }

/* ---- composer box (round 2 anatomy) ------------------------------------ */
.cockpit-main-wrapper:not(.cockpit-admin) .composer-modes .cc-btn + .cc-btn { margin-left: 8px; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-buttons { margin-bottom: 10px; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box,
.dsg-cockpit .cockpit-composer-box {
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-m, 12px);
    background: var(--bb-surface);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box:focus-within {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 14%, transparent);
}
/* subject strip becomes a normal row — pins beat both legacy CSS and the
   inline values cockpit.js/sms_counter.js write (display toggling still works) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject,
.dsg-cockpit .cockpit-subject {
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-bottom: 1px solid var(--bb-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 14px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject > div,
.dsg-cockpit .cockpit-subject > div { display: flex; align-items: center; gap: 10px; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-subject-title {
    width: auto !important; padding: 0 !important; margin: 0 !important;
    border: none !important;
    font-size: 12.5px; font-weight: 600; color: var(--bb-text-2);
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-subject-input {
    width: auto !important; flex: 1; padding: 0 !important; margin: 0 !important;
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-subject-input input { line-height: 20px !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-carbon-copies-checkbox,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-subject-checkbox {
    width: auto !important; padding: 0 !important; margin: 0 !important;
    border: none !important;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject .cockpit-carbon-copies-checkbox a { font-weight: 600; font-size: 12.5px; }
/* the pull-tab retires (subject visibility is channel-driven; JS keeps its hooks) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-slider { display: none !important; }
/* textarea inside the box: borderless; pins beat the JS-written inline values */
.cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input,
.cockpit-main-wrapper:not(.cockpit-admin) #message {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    min-height: 104px !important;
    max-height: 180px !important;
    width: 100%;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    background: transparent !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input:focus { border: none !important; box-shadow: none !important; outline: none; }
/* legacy tall send column retires; the toolbar Send is the one send control */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-button-send-col { display: none !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot,
.dsg-cockpit .composer-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--bb-border);
    background: var(--bb-inset);
}
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot #sms-counter { font-size: 12px; color: var(--bb-text-3); }
/* cockpit.js hides .send-button on desktop (it belonged to the legacy tall
   column era) — the toolbar Send is now the ONE send control, pinned visible */
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .cc-btn.send-button {
    padding: 7px 20px;
    display: inline-flex !important;
}
/* same era: mobile JS absolutely positions the Templates/Attach links above
   the form — they live in the toolbar now, at every width */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links {
    position: static !important;
    top: auto !important;
    right: auto !important;
}
/* thread scrollbar follows the tokens (legacy thumb was brand red) */
.cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content::-webkit-scrollbar { width: 8px; }
.cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content::-webkit-scrollbar-thumb { background: var(--bb-border-strong); border-radius: 8px; }
.cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content::-webkit-scrollbar-track { background: transparent; }
/* round-1 full-width border on #send-form: soften — the box carries the frame now */
.cockpit-main-wrapper:not(.cockpit-admin) #send-form {
    border-top: 1px solid var(--bb-border);
    padding: 12px 16px 14px !important;
}

/* ========================================================================
   DS-COCKPIT ROUND 3 — the P1 cut from the gap audit (owner GO 2026-07-10):
   call surface · message actions · row signals · status chips · round-1/2
   regressions · redundant right-rail identity block. Same contract: hooks
   untouched, !important only where legacy inline/JS styles must lose.
   ======================================================================== */

/* ---- redundant identity block: hidden on desktop (owner). It STAYS in the
        DOM — .user_data[data-*] is chat.js's contact source of truth and the
        mustache render target; the thread header mirrors it (page script). */
@media (min-width: 1025px) {
    /* !important: cockpit.js .show() writes inline display:block on desktop resize */
    .cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .sidebar_user_info { display: none !important; }
}

/* ---- row signals: unread pill + follow-up/ticket chips ------------------ */
.cockpit-main-wrapper:not(.cockpit-admin) .badge-custom,
.dsg-cockpit .badge-custom {
    background-color: var(--bb-primary) !important; /* beats legacy $main_red !important via cascade order */
    color: var(--bb-on-primary);
    border-radius: 99px;
    height: 17px;
    padding: 0 7px;
    font-size: 10px;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .badge-custom.sig-followup,
.dsg-cockpit .badge-custom.sig-followup {
    background-color: var(--bb-amber-bg) !important; /* was inline #3E5C84 (killed in blade) */
    color: var(--bb-amber);
    letter-spacing: .3px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .badge-custom.sig-ticket,
.dsg-cockpit .badge-custom.sig-ticket {
    background-color: var(--bb-danger-bg) !important;
    color: var(--bb-danger);
    letter-spacing: .3px;
}
/* tab combined counters (JS shows/hides; inline sizing removed in blade) */
.cockpit-main-wrapper:not(.cockpit-admin) .chat-count-new,
.dsg-cockpit .chat-count-new {
    background-color: var(--bb-primary) !important;
    color: var(--bb-on-primary);
    border-radius: 99px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px !important;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bb-surface);
}

/* ---- status chips (server blades render st-<slug>; JS clones stay neutral) */
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip,
.dsg-cockpit .st-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.5;
}
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip:empty { display: none; }
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-approved,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-active,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-paid,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-completed,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-done,
.dsg-cockpit .st-chip.st-approved { background: var(--bb-success-bg); color: var(--bb-success); }
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-submited,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-submitted,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-pending,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-waiting,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-in-progress,
.dsg-cockpit .st-chip.st-submitted { background: var(--bb-amber-bg); color: var(--bb-amber); }
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-canceled,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-cancelled,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-rejected,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-declined,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-overdue,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-missed,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-missed-call,
.cockpit-main-wrapper:not(.cockpit-admin) .st-chip.st-no-answer,
.dsg-cockpit .st-chip.st-canceled { background: var(--bb-danger-bg); color: var(--bb-danger); }

/* ---- message ⋯ menu: bootstrap-button stack → anchored dropdown --------- */
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-content { position: relative; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons {
    position: absolute;
    top: 34px;
    right: 8px;
    z-index: 30;
    width: 200px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow-2);
    padding: 6px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons > div { width: 100% !important; margin: 0 !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons > div > div { margin: 0 !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons .btn {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--bb-text) !important;
    text-align: left;
    padding: 8px 10px !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons .btn:hover {
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons .delete-msg { color: var(--bb-danger) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .forward-buttons .delete-msg:hover { background: var(--bb-danger-bg) !important; color: var(--bb-danger) !important; }

/* ---- expander links (Full Text / HTML / Additional) + Done -------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .message .add-message-btn {
    color: var(--bb-primary);
    font-weight: 600;
    font-size: 12px;
    box-shadow: none !important;
    padding: 2px 6px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .add-message-btn img { display: none; } /* raster arrow retires */
.cockpit-main-wrapper:not(.cockpit-admin) .message .add-message-btn::after {
    content: "›";
    display: inline-block;
    margin-left: 4px;
    rotate: 90deg;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .send_done.btn {
    background: var(--bb-primary-soft) !important;
    border: none !important;
    color: var(--bb-primary) !important;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .send_done.btn:hover { background: var(--bb-primary) !important; color: var(--bb-on-primary) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-count { color: var(--bb-text-3); font-size: 11px; }

/* ---- attachments in messages + composer --------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .message .bordered-box {
    border: 1px solid var(--bb-border) !important;
    border-radius: 10px;
    background: var(--bb-inset);
    color: var(--bb-text-2) !important;
    overflow: hidden;
    transition: border-color .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .file-container:hover .bordered-box { border-color: var(--bb-primary) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .more-box { color: var(--bb-primary); font-weight: 600; }
/* composer's picked-files list: was a bootstrap BLUE alert (JS-injected) */
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .alert-primary {
    background: var(--bb-inset) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    border-radius: 12px;
    font-size: 13px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .remove_file { color: var(--bb-danger) !important; box-shadow: none !important; }
/* image carousel controls (attachment preview) */
.cockpit-main-wrapper:not(.cockpit-admin) #image_modal .carousel-control-prev-icon,
.cockpit-main-wrapper:not(.cockpit-admin) #image_modal .carousel-control-next-icon {
    background-color: var(--bb-primary);
    border-radius: 50%;
    background-size: 55%;
    background-position: center;
    width: 38px;
    height: 38px;
}
/* recording player */
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .play { color: var(--bb-primary) !important; box-shadow: none !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .current-time { color: var(--bb-text-3); font-variant-numeric: tabular-nums; }

/* ---- follow-up tint restored (round-1 regression: !important killed
        .bg-purle) — amber accent instead of a second surface ------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-content.bg-purle,
.dsg-cockpit .message .message-content.bg-purle {
    border-left: 3px solid var(--bb-amber);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-content.bg-purle .msg-kind { background: var(--bb-amber-bg); color: var(--bb-amber); }

/* ---- call surface: phone buttons (admin + org variants share classes) --- */
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .wait-call svg circle { fill: var(--bb-success-bright, #2FBF71); }
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .end-call svg circle { fill: #FE414D; } /* call-end red is a cross-skin constant (platform convention) */
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .hold-call-pause-icon circle,
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .hold-call-pause-icon path { stroke: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .hold-call-play-icon circle,
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .hold-call-play-icon path { stroke: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .forward-call svg circle,
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .forward-call svg path { stroke: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .btn,
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .end-call { box-shadow: none !important; transition: scale .1s; }
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .btn:not(.do-call):active { scale: .95; }
/* .do-call is itself a .btn wrapping hold/forward/end — clicking a child made the WHOLE
   row the active .btn and scaled it (all buttons "moved down"). Scale the pressed control only. */
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .do-call > span:active,
.cockpit-main-wrapper:not(.cockpit-admin) .buttons .do-call > button:active { scale: .95; }
/* Call modal (#modal-call) sits on the dark espresso surface; its secondary controls
   (hold / forward icons, the button labels, the decline X) were --bb-text-3 (muted) and
   vanished on dark. Lift to --bb-text-2 for legible contrast on both skins. */
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .buttons span,
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .close-call-modal { color: var(--bb-text-2) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .hold-call-pause-icon circle,
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .hold-call-pause-icon path,
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .forward-call svg circle,
.cockpit-main-wrapper:not(.cockpit-admin) #modal-call .forward-call svg path { stroke: var(--bb-text-2) !important; }

/* queue accept/decline (tokened circles replacing the raster icons) */
.cockpit-main-wrapper:not(.cockpit-admin) .q-take,
.dsg-cockpit .q-take {
    border-radius: 50% !important;
    background: var(--bb-success-bright, #2FBF71) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(47, 191, 113, .4) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .q-drop,
.dsg-cockpit .q-drop {
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid var(--bb-border-strong) !important;
    color: var(--bb-text-3) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .q-drop:hover { border-color: var(--bb-danger) !important; color: var(--bb-danger) !important; }
/* Decline (phone-down) was muted and near-invisible on the dark queue row — make the icon a
   clearly-visible danger red by default (not only on hover). */
.cockpit-main-wrapper:not(.cockpit-admin) .q-drop,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .q-drop { color: var(--bb-danger) !important; }
/* Queue caller row text was jammed ~4px from the card edge; give it proper horizontal padding
   so it lines up with the panel content above instead of hugging the border. */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue-call-list .call-user-card,
.cockpit-main-wrapper:not(.cockpit-admin) .queue-call-list .call-user-card { padding-left: 12px !important; padding-right: 12px !important; }
/* Dock panel is rounded 16px but overflow:visible; its .dock-body child has square corners and
   the same bg, so the bottom corners poked past the rounding. Round the body's bottom to match. */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-body { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; overflow: hidden; }

/* live-call chip blink states (were bootstrap red / uncovered) */
@keyframes bb-call-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bb-danger) 35%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown.border-danger {
    border-color: var(--bb-danger) !important;
    animation: bb-call-pulse 1.4s infinite;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-cutdown.user-cutdown { border-color: var(--bb-amber) !important; }

/* quick-call numpad (tokened; was scss grays + raster call button) */
.cockpit-main-wrapper:not(.cockpit-admin) .numpad-button {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50% !important;
    background: var(--bb-inset) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    font-size: 1.4rem;
    transition: all .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .numpad-button:hover {
    background: var(--bb-primary-soft) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-primary) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #numpad-input {
    background: transparent !important;
    color: var(--bb-text) !important;
    border: none !important;
    border-bottom: 2px solid var(--bb-primary) !important;
    border-radius: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .backspace-button { background: transparent !important; border: none !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .qc-call-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: none;
    background: var(--bb-success-bright, #2FBF71);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(47, 191, 113, .4);
    transition: filter .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .qc-call-btn:hover { filter: brightness(1.08); }

/* right-rail takeover back link (chat.js-injected .back-to-sidebar) */
.cockpit-main-wrapper:not(.cockpit-admin) .back-to-sidebar {
    color: var(--bb-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .back-to-sidebar::before { content: "‹ "; font-weight: 700; }

/* ========================================================================
   DS-COCKPIT ROUND 4 — P2/P3 sweep (owner GO): header, list glyphs, dock
   collapse, hover card, vendor files, modal bodies, players, micro-texts.
   ======================================================================== */

/* ---- cockpit header: Leads link + tip tooltips -------------------------- */
.cockpit-main-wrapper .cockpit-leads {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    margin: 10px;
    color: var(--bb-text-2);
    text-decoration: none;
    transition: color .15s;
}
.cockpit-main-wrapper .cockpit-leads:hover { color: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) .tip-block .tip { background: var(--bb-surface); border: 1px solid var(--bb-border); box-shadow: var(--bb-shadow-2); color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .tip-block .tip-title { color: var(--bb-text); }
.cockpit-main-wrapper:not(.cockpit-admin) .tip-block .tip-text { color: var(--bb-text-2); }

/* ---- list: channel glyph + reset-search ✕ ------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .ch-glyph,
.dsg-cockpit .ch-glyph {
    color: var(--bb-text-3);
    flex: none;
    margin-right: 5px;
    display: inline-flex;
    align-self: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .reset-search img { display: none; }
.cockpit-main-wrapper:not(.cockpit-admin) .reset-search::before {
    content: "×";
    font-size: 18px;
    line-height: 1;
    color: var(--bb-text-3);
    font-weight: 600;
}
.cockpit-main-wrapper:not(.cockpit-admin) .reset-search:hover::before { color: var(--bb-primary); }

/* ---- dock: collapse-to-pill + tool-icon rest state ---------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info b { cursor: pointer; }
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info > b::after,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info .d-flex b::after {
        content: none; /* owner: no down-arrowhead next to the company name */
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .org_info > b::after,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .org_info .d-flex b::after { rotate: 180deg; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .additional-btns,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .open-queue-call-button,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed #queue-call-list,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .queue-call-list,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .org-twilio-phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .org_info > div:not(.d-flex),
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .org_info .dock-link { display: none !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .cockpit-call-phone { padding: 9px 14px !important; }
}
/* logs-button clock icon: resting fill follows the button ink (was #DB3A57) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .add-view-logs svg path { fill: currentColor; }

/* ---- hover info-card (ⓘ on names — was #32ABEF + .bg-light) ------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .svg-user-info svg path { stroke: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) .user_info {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border) !important;
    border-radius: 12px;
    box-shadow: var(--bb-shadow-2);
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) .user_info .bg-light { background: var(--bb-surface) !important; color: var(--bb-text); }

/* ---- modal bodies: template rows + forward input ------------------------ */
.cockpit-main-wrapper:not(.cockpit-admin) #template-messages-modal .template-name { color: var(--bb-text); font-weight: 600; }
.cockpit-main-wrapper:not(.cockpit-admin) #template-messages-modal .edit-template { color: var(--bb-primary); font-weight: 600; text-decoration: none; }
.cockpit-main-wrapper:not(.cockpit-admin) #template-messages-modal .insert-template {
    border: 1px solid var(--bb-border) !important;
    border-radius: 10px !important;
    background: var(--bb-inset);
    color: var(--bb-text);
    transition: border-color .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) #template-messages-modal .insert-template:hover { border-color: var(--bb-primary) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) #forvard_modal .cl-input {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-input);
    border-radius: 10px;
    color: var(--bb-text);
    padding: 8px 12px;
    width: 100%;
}

/* ---- vendor Files & Pictures + file menu -------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) #vendors_attachments .file .vendor-image,
.cockpit-main-wrapper:not(.cockpit-admin) #vendors_attachments .file > div:first-child {
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: var(--bb-inset);
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) #vendors_attachments .file-name { color: var(--bb-text); font-weight: 500; }
.cockpit-main-wrapper:not(.cockpit-admin) #vendors_attachments .file-description { color: var(--bb-text-3); }
.cockpit-main-wrapper:not(.cockpit-admin) .file-menu-modal {
    background: var(--bb-surface) !important;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow-2);
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) .file-menu-modal .file-menu-modal-header { color: var(--bb-text); font-weight: 600; border-bottom: 1px solid var(--bb-border); }
.cockpit-main-wrapper:not(.cockpit-admin) .file-menu-modal .menu-elem { color: var(--bb-text-2); padding: 8px 14px; cursor: pointer; display: block; transition: background .12s, color .12s; }
.cockpit-main-wrapper:not(.cockpit-admin) .file-menu-modal .menu-elem:hover { background: var(--bb-primary-soft); color: var(--bb-primary); }
.cockpit-main-wrapper:not(.cockpit-admin) .file-menu-modal .delete-file-btn { color: var(--bb-danger); }

/* ---- recording player polish -------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container { align-items: center; gap: 8px; flex-wrap: wrap; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .recording-time { white-space: nowrap; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .timeline {
    border: none !important;
    display: block;
    height: 4px;
    min-width: 112px;
    max-width: 190px;
    flex: 1 1 140px;
    position: relative;
    border-radius: 99px;
    background: var(--bb-inset);
    cursor: pointer;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .recording-action { margin: 0; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .timeline-control { border-radius: 99px; }
@media (max-width: 640px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .timeline {
        min-width: 100%;
        max-width: none;
        flex-basis: 100%;
        order: 4;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .recording-action { order: 5; }
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container.is-loading .play { opacity: .62; cursor: progress; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container.is-error .play { color: var(--bb-danger) !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container.is-error .timeline { background: color-mix(in srgb, var(--bb-danger) 18%, var(--bb-inset)); }

/* ---- micro-texts ---------------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) #other-incident { color: var(--bb-text-2); font-size: 13px; }
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .link-bold { color: var(--bb-primary); text-decoration-color: color-mix(in srgb, var(--bb-primary) 40%, transparent); }
.cockpit-main-wrapper:not(.cockpit-admin) .edit-follow-up .text-button,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .text-button { color: var(--bb-primary); font-weight: 600; font-size: 13px; }

/* ========================================================================
   DS-COCKPIT ROUND 5 — left-rail head to the mockup anatomy (owner caught
   the tabs/head divergence — it wasn't even on the audit): title + New row,
   search hint, and the tabs as a real SEGMENTED CONTROL.
   ======================================================================== */
.cockpit-main-wrapper:not(.cockpit-admin) .rail-title-row,
.dsg-cockpit .rail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-top: 6px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .rail-title,
.dsg-cockpit .rail-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--bb-text); }
.cockpit-main-wrapper:not(.cockpit-admin) .new-convo-btn,
.dsg-cockpit .new-convo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 11px;
    cursor: pointer;
    transition: background .15s;
}
.cockpit-main-wrapper:not(.cockpit-admin) .new-convo-btn:hover { background: color-mix(in srgb, var(--bb-primary) 22%, transparent); }
.cockpit-main-wrapper:not(.cockpit-admin) .search-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    translate: 0 -50%;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bb-text-3);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    padding: 2px 6px;
    pointer-events: none;
}
/* hide the kbd hint while the reset ✕ is visible (they share the corner) */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-search-cont:has(.reset-search:not(.d-none)) .search-kbd { display: none !important; }

/* the four channel tabs become one segmented control (mockup) */
.cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar > .d-flex.justify-content-between,
.dsg-cockpit .rail-seg {
    border: 1px solid var(--bb-border) !important;
    border-radius: 11px;
    background: var(--bb-inset);
    padding: 3px;
    gap: 2px;
    margin-left: 1rem;
    margin-right: 1rem;
}
@media (max-width: 767px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar > .d-flex.justify-content-between { margin-left: 0; margin-right: 0; }
}
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer { border-radius: 8px; margin: 0; padding-top: 0; }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer:hover { background: color-mix(in srgb, var(--bb-surface) 60%, transparent); }
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer.on {
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-1);
}
.cockpit-main-wrapper:not(.cockpit-admin) .label_outer > label:last-child { padding: 7px 2px !important; }

/* ---- round 6: the mockup ROW STATES, line by line (owner escalation —
        time on the NAME line, unread = primary DOT on the preview line,
        unread tints the time; the per-row count badge retired to the dot) --- */
.cockpit-main-wrapper:not(.cockpit-admin) .unread-dot,
.dsg-cockpit .unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bb-primary);
    flex: none;
    align-self: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .chat-content.is-unread .chat-time,
.dsg-cockpit .is-unread .chat-time { color: var(--bb-primary); font-weight: 600; }
.cockpit-main-wrapper:not(.cockpit-admin) .chat-content.is-unread .user-name-block { font-weight: 700; }
.cockpit-main-wrapper:not(.cockpit-admin) .chat-content.is-unread .last-chat-message { color: var(--bb-text-2) !important; font-weight: 500; }

/* ---- round 7: the last thread-anatomy deltas from the full mockup diff --- */
/* SMS = chat bubble (emails/follow-ups stay cards) */
.cockpit-main-wrapper:not(.cockpit-admin) .msg-main:has(.sms-bubble) { width: fit-content; max-width: 76%; }
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .msg-main:has(.sms-bubble) { margin-left: auto; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-content.sms-bubble,
.dsg-cockpit .message .message-content.sms-bubble {
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    width: auto;
    min-width: 220px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .message-content.sms-bubble,
.dsg-cockpit .message.self .message-content.sms-bubble {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 5px;
    background: color-mix(in srgb, var(--bb-primary) 11%, var(--bb-surface)) !important;
    border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border));
}
/* inside a bubble the shape says "SMS" — the chip retires, the count stays */
.cockpit-main-wrapper:not(.cockpit-admin) .message .sms-bubble .msg-kind { display: none; }
.cockpit-main-wrapper:not(.cockpit-admin) .message .sms-bubble .msg-count { margin-left: 0 !important; }

/* call events = centered compact event card (no avatar, inset surface) */
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .msg-row { justify-content: center; flex-direction: row !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .msg-ava { display: none; }
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .msg-main { max-width: 440px; min-width: 320px; }
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .message-content {
    background: var(--bb-inset) !important;
    border-radius: 99px;
    box-shadow: none;
    padding: 8px 18px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .message-content:has(.timeline) { border-radius: 16px; }
.cockpit-main-wrapper:not(.cockpit-admin) .message:has(.audio-container) .message-content { font-size: 12.5px; color: var(--bb-text-2); }
.cockpit-main-wrapper:not(.cockpit-admin) .message .audio-container .row > img { width: 16px; height: 16px; align-self: center; }

/* thread-header customer chip (mockup) */
.cockpit-main-wrapper:not(.cockpit-admin) .th-chip,
.dsg-cockpit .th-chip {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 8px;
    background: var(--bb-success-bg);
    color: var(--bb-success);
    border-radius: 99px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* design-system demo scaffolding: render the fixed dock inline on the page */
.dsg-cockpit .cockpit-wrapper {
    position: static;
    width: 100%;
    max-width: 340px;
    border-radius: var(--bb-radius-l, 16px);
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-1);
    overflow: hidden;
}
.dsg-cockpit .cockpit-cutdown {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 99px;
    box-shadow: var(--bb-shadow-1);
    padding: 8px 16px;
    width: auto;
}
.dsg-cockpit .message { max-width: 480px; text-align: left; }
.dsg-cockpit .message.self { margin-left: auto; text-align: right; }
/* ========================================================================
   DS-COCKPIT ROUND 8 - structural mockup transplant.
   Existing ids, event classes, AJAX render targets, and Bootstrap mobile
   classes remain untouched. This layer owns desktop composition only.
   ======================================================================== */

.cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container {
    height: 56px !important;
    min-height: 56px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .text[style*="font-size:1.8em"] {
    font-size: 20px !important;
    letter-spacing: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container #main-menu,
.cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .cockpit-leads {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    border-radius: 9px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container #main-menu {
    padding: 6px 14px;
}

@media (min-width: 1200px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #admin-side-user-info {
        display: grid;
        grid-template-columns: 318px minmax(0, 1fr) 336px;
        grid-template-rows: minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        height: 100%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .left-sidebar,
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar,
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar {
        width: auto;
        max-width: none;
        min-width: 0;
        height: 100%;
        flex: none;
    }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #admin-side-user-info {
        grid-template-columns: 294px minmax(0, 1fr) 320px;
    }
}

.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .left-sidebar,
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar,
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar {
    border-radius: 14px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar {
    display: flex;
    flex-direction: column;
}
.cockpit-main-wrapper:not(.cockpit-admin) #cockpit-content {
    min-width: 0;
}

/* Left conversation rail */
.cockpit-main-wrapper:not(.cockpit-admin) .left-sidebar .search.sidebar {
    padding: 16px 16px 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .left-sidebar .rail-title-row,
.cockpit-main-wrapper:not(.cockpit-admin) .left-sidebar .cockpit-search-cont {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .left-sidebar .rail-title-row {
    padding-top: 0;
    margin-bottom: 12px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .left-sidebar .rail-title,
.cockpit-main-wrapper:not(.cockpit-admin) .ds-th-name {
    letter-spacing: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar > .d-flex.justify-content-between {
    margin: 10px 0 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users {
    padding: 8px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users .chat {
    min-height: 60px !important;
    margin: 0 0 2px;
    padding: 10px !important;
    gap: 11px;
    border: 0 !important;
    border-radius: 10px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users .chat.active,
.cockpit-main-wrapper:not(.cockpit-admin) #users .chat:has(.chat-content.open) {
    background: var(--bb-primary-soft);
    box-shadow: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users .chat-content > .d-flex:first-child {
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users .user-name-block {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) #users .last-chat-message {
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Thread header and fully wired actions */
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head {
    min-height: 64px;
    padding: 12px 16px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-action {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 9px;
    background: transparent;
    color: var(--bb-text-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-action:hover {
    border-color: var(--bb-primary);
    color: var(--bb-primary);
    text-decoration: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-call {
    border-color: var(--bb-primary);
    background: var(--bb-primary);
    color: var(--bb-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bb-primary) 30%, transparent);
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-call:hover {
    background: var(--bb-primary-hover);
    color: var(--bb-on-primary);
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head > .ds-th-menu {
    margin-left: 0 !important;
    flex: none;
}

/* Conversation stream */
.cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content {
    padding: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #messages {
    padding: 8px 18px 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message {
    padding: 4px 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-main {
    max-width: 78%;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message:not(:has(.audio-container)) .msg-main:not(:has(.sms-bubble)) {
    overflow: hidden;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-1);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self:not(:has(.audio-container)) .msg-main:not(:has(.sms-bubble)) {
    background: var(--bb-surface-2);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message:not(:has(.audio-container)) .msg-main:not(:has(.sms-bubble)) > .small {
    padding: 8px 14px 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message:not(:has(.audio-container)) .msg-main:not(:has(.sms-bubble)) .message-content {
    width: 100%;
    max-width: 100%;
    padding: 8px 14px 12px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message:not(:has(.audio-container)) .msg-main:not(:has(.sms-bubble)) .service {
    padding-bottom: 7px;
    border-bottom: 1px solid var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .message-text {
    margin-top: 10px;
    margin-bottom: 4px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .day-split {
    margin: 14px 0 10px;
}

/* Compact composer, with every original form control retained */
.cockpit-main-wrapper:not(.cockpit-admin) #send-form {
    padding: 12px 16px 14px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #send-form .cockpit-buttons {
    width: 100%;
    max-width: none;
    margin-bottom: 8px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input,
.cockpit-main-wrapper:not(.cockpit-admin) #message {
    min-height: 84px !important;
    max-height: 126px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot {
    padding: 7px 10px 8px;
    border-top: 0;
    background: transparent;
}
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .cockpit-link {
    font-size: 12.5px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .cc-btn.send-button {
    padding: 7px 18px;
}

/* Right context rail: the hidden AJAX identity source stays out of the layout. */
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar {
    padding: 0 0 112px !important;
    overflow-y: auto;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar::-webkit-scrollbar {
    width: 8px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: var(--bb-border-strong);
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
    min-height: 0 !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-surface);
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info::before {
    content: attr(data-profile-initial);
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #7c6fd9;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .user_data {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .name {
    position: relative;
    min-width: 0;
    margin: 2px 0 0;
    padding-right: 36px;
    color: var(--bb-text) !important;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.35;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .name > div {
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .name > div > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .fa-usericon {
    position: absolute;
    top: -2px;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid var(--bb-border);
    border-radius: 9px;
    color: var(--bb-text-2);
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .fa-usericon::before {
    content: "...";
    font-family: var(--bb-font);
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-3px);
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .address,
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info > .justify-content-center {
    grid-column: 1 / -1;
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .address {
    margin-top: 4px;
    color: var(--bb-text-2);
    font-size: 12.5px;
    line-height: 1.45;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info > .justify-content-center {
    display: grid;
    gap: 7px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .phone,
.cockpit-main-wrapper:not(.cockpit-admin) .sidebar_user_info .email {
    margin: 0 !important;
    overflow: hidden;
    color: var(--bb-text-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Context sections and cards */
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #follow-ups,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #incidents,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #orders,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #jobs,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #subscriptions {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .sidebar-section-line {
    border-bottom-color: var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .cockpit-title {
    color: var(--bb-text);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-follow-up,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-incident,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-appointment,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-jobs {
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
    border-radius: 8px;
    background: var(--bb-primary-soft);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-follow-up svg,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-incident svg,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-appointment svg,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-jobs svg {
    width: 18px;
    height: 18px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card {
    margin-bottom: 8px;
    padding: 11px 12px;
    border-color: var(--bb-border);
    border-radius: 10px;
    background: var(--bb-surface);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card p {
    margin-bottom: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .card-title,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .card-text-l {
    font-size: 12.5px;
    line-height: 1.35;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .card-text {
    font-size: 11.5px;
}

/* Availability dock aligns with the compact context rail */
@media (min-width: 1200px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper {
        right: 12px;
        bottom: 12px;
        width: 312px;
        border-radius: 14px;
    }
}

@media (max-width: 1439px) and (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-action span {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-action {
        width: 32px;
        padding: 6px;
    }
}
@media (max-width: 1024px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-actions {
        display: none;
    }
}
/* ==========================================================================
   DS-COCKPIT ROUND 9 - reference convergence.
   Visual ownership only: original ids and delegated event classes remain live.
   ========================================================================== */

/* Keep the cockpit on the same real Rubik faces as the reference. backend.css
   loads later and otherwise returns portions of this screen to legacy Roboto. */
#app.cockpit-main-wrapper:not(.cockpit-admin) {
    font-family: var(--bb-font);
    color: var(--bb-text);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
#app.cockpit-main-wrapper:not(.cockpit-admin) button,
#app.cockpit-main-wrapper:not(.cockpit-admin) input,
#app.cockpit-main-wrapper:not(.cockpit-admin) textarea,
#app.cockpit-main-wrapper:not(.cockpit-admin) select {
    font-family: inherit;
}
/* Header */
@media (min-width: 768px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container {
        padding: 0 14px !important;
        border-bottom: 1px solid var(--bb-border);
        background: var(--bb-surface) !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container > .d-flex {
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container > .d-flex > .d-flex:first-child {
        align-items: center;
        gap: 0;
        min-width: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 0 !important;
        padding-right: 12px !important;
        color: var(--bb-text) !important;
        font-size: 19px !important;
        line-height: 1;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-brand svg {
        width: 30px;
        height: 30px;
        padding: 5px;
        border-radius: 9px;
        background: var(--bb-primary);
        color: #fff;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--bb-primary) 38%, transparent);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-brand + span,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-org-select + span {
        display: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-org-name {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        min-height: 32px;
        max-width: 240px;
        margin-left: 0 !important;
        padding: 6px 4px 6px 30px !important;
        border: 1px solid var(--bb-border);
        border-right: 0;
        border-radius: 10px 0 0 10px;
        background: transparent;
        color: var(--bb-text);
        font-size: 12.5px;
        font-weight: 600 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-org-name::before {
        content: "";
        position: absolute;
        left: 12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bb-success);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-org-select {
        display: flex !important;
        align-items: stretch;
        height: 32px;
        margin: 0 12px 0 0 !important;
        border: 1px solid var(--bb-border);
        border-left: 0;
        border-radius: 0 10px 10px 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-org-select #switch-company-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 0 9px 9px 0;
        color: var(--bb-text-3);
        background: transparent;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #main-menu {
        min-height: 34px;
        gap: 7px;
        padding: 7px 13px !important;
        border-radius: 9px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #main-menu .cockpit-inbox-icon {
        position: relative;
        width: 13px;
        height: 10px;
        border: 1.5px solid currentColor;
        border-radius: 3px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #main-menu .cockpit-inbox-icon::after {
        content: "";
        position: absolute;
        left: 2px;
        right: 2px;
        top: 2px;
        height: 4px;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(0deg) skewY(-25deg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #main-menu + .cockpit-new-menu {
        top: 39px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container #main-menu {
        display: inline-flex;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container #main-menu,
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .cockpit-leads {
        font-size: 13px;
        font-weight: 600;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .cockpit-leads {
        min-height: 34px;
        padding: 7px 12px;
        border-radius: 9px;
        color: var(--bb-text-2);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .cockpit-leads:hover,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-calendar-link:hover {
        color: var(--bb-primary);
        background: var(--bb-primary-soft);
        text-decoration: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-calendar-link {
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: 3px;
        border-radius: 9px;
        color: var(--bb-text-2);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-skin-toggle {
        flex: none;
        gap: 2px;
        margin-left: auto;
        padding: 3px;
        border: 1px solid var(--bb-border);
        border-radius: 99px;
        background: var(--bb-inset);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-skin-toggle button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 26px;
        padding: 4px 10px;
        border: 0;
        border-radius: 99px;
        color: var(--bb-text-2);
        background: transparent;
        font-size: 11.5px;
        font-weight: 600;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-skin-toggle button.is-on {
        color: var(--bb-primary);
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-1);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .desktop-navigation {
        flex: none;
        margin-left: 0 !important;
        gap: 1px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .desktop-navigation .nav-item {
        margin-right: 2px !important;
    }
}

/* Conversation stream */
.cockpit-main-wrapper:not(.cockpit-admin) #messages {
    padding: 10px 14px 4px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message {
    padding: 3px 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-legacy-meta {
    display: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-row {
    width: 100%;
    max-width: 78%;
    align-items: flex-start;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .msg-row {
    margin-left: auto;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-ava {
    width: 30px;
    height: 30px;
    margin-top: 2px;
    font-size: 11px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .msg-main,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .msg-main {
    width: 100%;
    min-width: 300px;
    max-width: none !important;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    border-radius: 11px;
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-1);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self.channel-email .msg-main,
.cockpit-main-wrapper:not(.cockpit-admin) .message.self.channel-follow-up .msg-main {
    background: var(--bb-surface-2);
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .message-content,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .message-content {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .service,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .service {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 42px 8px 14px !important;
    border-bottom: 1px solid var(--bb-border) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .service > .d-flex,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .service > .d-flex {
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message .msg-kind {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-subject {
    min-width: 0;
    overflow: hidden;
    color: var(--bb-text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .forwards,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .forwards {
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 7px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .message-text,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .message-text {
    margin: 0 !important;
    padding: 12px 14px;
    color: var(--bb-text);
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .images,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .images {
    padding: 0 14px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-tools {
    padding: 0 14px 8px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-tools:not(:has(.add-message-btn, .send_done, .forward-email)) {
    display: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 7px 14px;
    border-top: 1px solid var(--bb-border);
    color: var(--bb-text-3);
    background: var(--bb-inset);
    font-size: 11.5px;
    text-align: left;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-foot-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-foot-actions button {
    padding: 0;
    border: 0;
    color: var(--bb-text-2);
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-foot-actions button:hover {
    color: var(--bb-primary);
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-when {
    margin-left: auto;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .msg-kind {
    color: var(--bb-amber);
    background: var(--bb-amber-bg);
}

/* SMS */
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .msg-main {
    width: fit-content;
    min-width: 0;
    max-width: 76% !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-content.sms-bubble {
    width: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .service {
    display: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-text {
    margin: 0 !important;
    padding: 9px 14px;
    border: 1px solid var(--bb-border);
    border-radius: 16px 16px 16px 5px;
    color: var(--bb-text);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-1);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self.channel-sms .message-text {
    border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border));
    border-radius: 16px 16px 5px 16px;
    color: var(--bb-text);
    background: color-mix(in srgb, var(--bb-primary) 11%, var(--bb-surface));
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .images {
    margin-top: 6px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-tools {
    padding: 4px 0 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sms-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: var(--bb-text-3);
    font-size: 10.5px;
    line-height: 1.2;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message.self .sms-meta {
    justify-content: flex-end;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sms-kind {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.cockpit-main-wrapper:not(.cockpit-admin) .sms-delivered {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--bb-success);
}

/* Calls */
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .msg-row {
    max-width: 100%;
    justify-content: center;
    flex-direction: row !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .msg-ava {
    display: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .msg-main {
    width: auto;
    min-width: 0 !important;
    max-width: 620px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .message-content {
    width: auto;
    padding: 7px 9px 7px 13px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 99px !important;
    color: var(--bb-text-2);
    background: var(--bb-inset) !important;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .message-content > .d-flex {
    align-items: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container {
    width: auto;
    max-width: none;
    flex: none;
    flex-direction: row !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container > .row:first-child {
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    color: var(--bb-text);
    font-weight: 600;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container > .row:first-child img {
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 50%;
    background: var(--bb-success-bg);
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container > .d-flex.justify-content-end:not(.recording-time) {
    display: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .timeline {
    display: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container > .row:has(.play) {
    margin: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .play {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 26px;
    margin: 0;
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--bb-border);
    border-radius: 99px;
    color: var(--bb-primary) !important;
    background: var(--bb-surface);
    font-size: 10px;
    box-shadow: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .play::after {
    content: "Recording";
    font-family: var(--bb-font);
    font-size: 10.5px;
    font-weight: 600;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .service {
    display: none;
}

/* Right context rail */
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar {
    padding: 0 0 300px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #follow-ups,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #incidents,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #orders,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #jobs,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar > #subscriptions {
    padding: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .sidebar-section-line,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .incidents-outer,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .orders-outer,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .jobs-outer,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .subscriptions-outer {
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-head-row {
    min-height: 52px;
    margin: 0 !important;
    padding: 0 12px;
    border-bottom: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-head-row.cockpit-title {
    display: flex;
    align-items: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-head-row .cockpit-title,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-head-row.cockpit-title {
    margin: 0 !important;
    color: var(--bb-text);
    font-size: 13.5px;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-follow-up,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-incident,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-appointment,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-jobs {
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0 0 0 auto !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-follow-up svg path:first-child,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-incident svg path:first-child,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-appointment svg path:first-child,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .add-jobs svg path:first-child {
    display: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .deploy-btn {
    flex: none;
    width: 26px;
    height: 26px;
    margin-left: 5px !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--bb-text-3);
    background: transparent;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .deploy-btn:hover {
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .deploy-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-body {
    padding: 0 12px 12px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-body.show,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-body.collapsing {
    padding-top: 1px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar #other-incident {
    padding: 0 12px 12px;
    font-size: 12px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: var(--bb-surface);
    box-shadow: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card:first-child {
    margin-top: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card:hover {
    border-color: var(--bb-primary);
    transform: translateY(-1px);
}

/* Call and company dock */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper {
        right: 12px !important;
        bottom: 12px !important;
        width: 312px !important;
        max-width: 312px !important;
        padding: 0 !important;
        border: 1px solid var(--bb-border) !important;
        border-radius: 14px !important;
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-2);
        overflow: hidden !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-status-head {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 10px 13px;
        border-bottom: 1px solid var(--bb-border);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-presence {
        width: 9px;
        height: 9px;
        flex: none;
        border-radius: 50%;
        background: var(--bb-success);
        box-shadow: 0 0 0 3px var(--bb-success-bg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .dock-presence {
        background: var(--bb-amber);
        box-shadow: 0 0 0 3px var(--bb-amber-bg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-status-copy {
        min-width: 0;
        flex: 1;
        color: var(--bb-text);
        font-size: 12.5px;
        font-weight: 700;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-company-status,
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-queue-status {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-queue-status {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .dock-company-status {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .dock-queue-status {
        display: block;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-collapse-btn {
        width: 26px;
        height: 26px;
        flex: none;
        padding: 0;
        border: 0;
        border-radius: 8px;
        color: var(--bb-text-3);
        background: transparent;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .dock-collapse-btn:hover {
        color: var(--bb-primary);
        background: var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .dock-collapse-btn svg {
        transform: rotate(180deg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.is-collapsed .dock-body {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-body {
        display: flex;
        flex-direction: column;
        padding: 11px 13px 13px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone {
        order: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .org_info {
        grid-row: 2;
        width: 100% !important;
        padding: 9px 11px;
        border-radius: 10px;
        background: var(--bb-inset);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .flex-1 {
        grid-row: 1;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .flex-1 > .col-12 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone .org_info b {
        font-size: 12.5px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org-twilio-phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info > div:last-child {
        color: var(--bb-text-2);
        font-size: 11.5px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns {
        order: 2;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns .btn {
        width: 100%;
        min-height: 34px;
        margin: 0 !important;
        justify-content: center;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 600;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button {
        order: 3;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 9px 0 0;
        border: 0;
        border-top: 1px dashed var(--bb-border);
        border-radius: 0;
        color: var(--bb-amber) !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 11.5px;
        font-weight: 700;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue-call-list {
        order: 4;
        padding: 8px 0 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .call-user-card {
        margin-top: 7px;
        padding: 8px !important;
        border: 1px solid var(--bb-border);
        border-radius: 10px;
        background: var(--bb-surface);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue_user_fullname {
        color: var(--bb-text);
        font-size: 12px;
        font-weight: 700;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue_phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .queue_email {
        color: var(--bb-text-3);
        font-size: 10.5px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .q-take,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .q-drop {
        width: 34px !important;
        height: 34px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px !important;
        border-radius: 50%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .q-take {
        color: #fff;
        background: var(--bb-success);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .q-drop {
        color: var(--bb-text-2);
        border: 1px solid var(--bb-border);
        background: var(--bb-surface);
    }
}

@media (max-width: 1439px) and (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-skin-toggle span,
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container .cockpit-calendar-link {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-skin-toggle button {
        width: 28px;
        justify-content: center;
        padding: 4px;
    }
}

@media (max-width: 767px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .msg-main,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .msg-main {
        min-width: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message .msg-row {
        max-width: 94%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message .msg-ava {
        display: none;
    }
}

/* ==========================================================================
   DS-COCKPIT ROUND 10 - measured reference parity (1908 x 900 baseline).
   ========================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages {
        height: calc(100vh - 56px);
        margin-top: 2px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head {
        min-height: 66px;
        gap: 12px;
        padding: 12px 18px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-thread-head .cv-ava {
        width: 40px;
        height: 40px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .ds-th-name {
        font-size: 15.5px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #send-form .cockpit-buttons {
        gap: 6px;
        margin-bottom: 10px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #send-form .cockpit-buttons .cc-btn {
        min-height: 29px;
        height: 29px;
        padding: 6px 14px;
        font-size: 12.5px;
        line-height: 15px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject {
        height: 37px !important;
        min-height: 37px;
        padding: 9px 14px !important;
        box-sizing: border-box;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #message,
    .cockpit-main-wrapper:not(.cockpit-admin) #send-form textarea.input {
        height: 84px !important;
        min-height: 84px !important;
        max-height: 84px !important;
        padding: 12px 14px 6px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-foot {
        min-height: 46px;
        height: 46px;
        padding: 6px 8px 8px;
        gap: 4px;
        box-sizing: border-box;
    }

    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper {
        right: 16px !important;
        bottom: 42px !important;
        width: 296px !important;
        max-width: 296px !important;
        border-radius: 16px !important;
        font-size: 14px;
        font-weight: 400;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-status-head {
        padding: 11px 14px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-body {
        padding: 12px 14px 14px;
    }
}

.cockpit-main-wrapper:not(.cockpit-admin) #messages {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 8px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #messages > .message,
.cockpit-main-wrapper:not(.cockpit-admin) #messages > .day-split {
    margin: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) #messages > .message {
    padding: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-email .message-content,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .message-content {
    max-width: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .msg-main {
    max-width: 100% !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-content {
    max-width: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-text {
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .message-content {
    position: relative;
    width: max-content;
    max-width: none !important;
    padding: 7px 8px 7px 14px !important;
    font-size: 12.5px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-event-shell {
    width: max-content;
    align-items: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container {
    width: max-content !important;
    gap: 10px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .play {
    gap: 6px;
    padding: 4px 11px 4px 7px;
    font-size: 11.5px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .play::after {
    font-size: 11.5px;
}

.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-head-row {
    padding: 13px 16px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar .ctx-body {
    padding: 0 16px 12px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card {
    padding: 11px 13px;
    border-radius: 12px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .d-flex:first-child .card-text-l,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .d-flex:first-child .job-type {
    color: var(--bb-text);
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .d-flex:first-child .card-text-l > b,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .job-type-name,
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .mt-2 > p > b {
    display: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .mt-2 > .text-primary {
    order: -1;
    color: var(--bb-text-2) !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .mt-2 > .text-primary > b {
    font-weight: 400;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .mt-2 > .text-primary .font-weight-normal {
    color: var(--bb-text);
    font-weight: 700 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card .card-text.text-nowrap {
    color: var(--bb-text-3);
    font-size: 11px;
}
/* DS-COCKPIT ROUND 10B - measured corrections after live inheritance. */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages { margin-top: -24px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-status-head { min-height: 47px; height: 47px; box-sizing: border-box; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .flex-1,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .flex-1 > .col-12 { height: 18px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .org_info { padding: 8px 12px !important; border-radius: 10px; background: var(--bb-inset); }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns .btn { min-height: 33px; height: 33px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button { display: flex !important; align-items: center; justify-content: space-between; min-height: 36px; margin-top: 11px !important; padding-top: 11px; color: var(--bb-text-2) !important; font-weight: 500; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button .calls-in-line { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 11px; border-radius: 99px; color: var(--bb-amber); background: var(--bb-amber-bg); font-size: 11.5px; font-weight: 700; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button .calls-in-line:empty::before { content: "None"; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button svg { color: var(--bb-text-3); }
}
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .msg-main { width: max-content; display: flex; justify-content: center; text-align: left !important; }
.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .message-content { display: inline-flex; }
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .msg-main,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-content,
.cockpit-main-wrapper:not(.cockpit-admin) .channel-sms .message-text { width: max-content !important; max-width: none !important; }
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .org_info { padding-top: 7.25px !important; padding-bottom: 7.25px !important; }
}

.cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-event-label { margin-right: -9px; }


/* ======================================================================
   DS-COCKPIT ROUND 11 - internal component parity.
   Legacy ids, form inputs, and delegated event classes remain unchanged.
   ====================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar > .d-flex.justify-content-between {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 34px;
        margin: 10px 0 6px !important;
        padding: 3px;
        gap: 2px;
        box-sizing: border-box;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar .label_outer {
        position: relative;
        width: auto;
        height: 26px;
        min-width: 0;
        display: flex !important;
        justify-content: center;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar .label_outer > label:first-child {
        position: absolute;
        z-index: 2;
        top: -5px;
        right: 4px;
        width: auto;
        height: auto;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar .label_outer > label:first-child > svg { display: none; }
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar .label_outer > label:last-child {
        width: 100%;
        height: 26px !important;
        padding: 6px 2px !important;
        color: var(--bb-text-2) !important;
        line-height: 14px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .search.sidebar .label_outer.on > label:last-child { color: var(--bb-primary) !important; }

    .cockpit-main-wrapper:not(.cockpit-admin) #users .chat-content > .d-flex:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center !important;
        gap: 5px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #users .badge-custom-cont { gap: 3px; margin: 0 !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) #users .badge-custom {
        width: 18px;
        height: 18px;
        min-width: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0;
        border-radius: 6px;
        font-size: 9px;
        line-height: 1;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #users .badge-text-l { display: none !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) #users .badge-text-m { display: inline !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) #users .chat-time { margin: 0 !important; }

    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .msg-row,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .msg-row {
        width: fit-content;
        max-width: 78%;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .msg-main,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .msg-main {
        width: fit-content;
        min-width: 300px;
        max-width: 100% !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .message-content,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .message-content { width: auto; }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .message-text { min-width: 430px; }

    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .forwards,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .forwards,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .forwards {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 1px solid var(--bb-border);
        border-radius: 8px;
        color: var(--bb-text-3);
        background: var(--bb-surface);
        box-shadow: none;
        font-size: 0;
        line-height: 1;
        cursor: pointer;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .forwards::before,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .forwards::before,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .forwards::before {
        content: "\2022\2022\2022";
        font-family: var(--bb-font);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        transform: translateY(-1px);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .forwards:hover,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .forwards:hover,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .forwards:hover {
        border-color: var(--bb-primary);
        color: var(--bb-primary);
        background: var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-email .forwards,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-follow-up .forwards { top: 6px; right: 8px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .forward-buttons:not(.d-none) {
        position: absolute;
        z-index: 20;
        top: 32px;
        right: 0;
        width: 110px !important;
        padding: 6px !important;
        border: 1px solid var(--bb-border);
        border-radius: 9px;
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-2);
    }

    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .message-content { overflow: visible !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-event-shell,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-summary-meta {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-event-shell {
        align-items: center;
        justify-content: center !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-admin-actions {
        position: relative;
        order: 2;
        flex: none;
        margin-left: 7px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .audio-container { order: 1; }
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-summary-meta,
    .cockpit-main-wrapper:not(.cockpit-admin) .channel-call .call-summary-meta span { flex: none; }

    .cockpit-main-wrapper:not(.cockpit-admin) .message.self.channel-sms .message-text {
        border: 0;
        color: #6b2231;
        background: #ffe4ea;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .sms-meta { gap: 6px; line-height: 1.45; }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages { padding-bottom: 24px; }

    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject > div {
        display: flex;
        align-items: center;
        min-width: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-carbon-copies-checkbox {
        float: none !important;
        flex: none;
        margin-left: auto;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 18px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-carbon-copies-checkbox a { color: var(--bb-primary) !important; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-checkbox {
        float: none !important;
        flex: none;
        margin-left: 9px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-checkbox .bb-check {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        color: var(--bb-text-2);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 18px;
        white-space: nowrap;
    }

    .cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card {
        display: block !important;
        min-height: 69px;
        line-height: 1.45;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .right-sidebar-card > .mt-2 { margin-top: 6px !important; }

    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .dock-body { padding: 12px 14px 14px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone { gap: 10px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .flex-1 > .col-12 {
        min-height: 18px;
        font-size: 12px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-phone > .org_info {
        height: 78px;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info b { line-height: 16px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org-twilio-phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info > div:last-child { line-height: 15px; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .additional-btns {
        display: flex !important;
        margin-top: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button {
        min-height: 37px;
        display: flex;
        align-items: center;
        margin-top: 10px !important;
        padding: 9px 0 0;
        color: var(--bb-text-2) !important;
        font-size: 12px;
        text-align: left !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button .calls-in-line {
        min-width: 31px;
        margin-left: auto;
        padding: 3px 8px;
        border-radius: 99px;
        color: var(--bb-amber);
        background: var(--bb-amber-bg);
        text-align: center;
        line-height: 16px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .open-queue-call-button svg {
        display: none;
        margin-left: 7px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper.has-queue .open-queue-call-button svg { display: block; }
}

@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper:not(.has-queue) .open-queue-call-button .calls-in-line {
        font-size: 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper:not(.has-queue) .open-queue-call-button .calls-in-line::after {
        content: "None";
        font-size: 11px;
        font-weight: 700;
    }
}


/* ======================================================================
   DS-COCKPIT ROUND 12 - reference event components.
   Semantic event classes own geometry; legacy classes are behavior only.
   ====================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #messages {
        padding: 20px 22px 8px;
    }

    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event {
        width: 100%;
        margin: 0 0 14px;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event__row {
        width: fit-content !important;
        max-width: 78% !important;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self .timeline-event__row {
        margin-left: auto;
        flex-direction: row-reverse;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event__main {
        width: fit-content !important;
        min-width: 300px;
        max-width: 100% !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Email and follow-up card object */
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-email .timeline-event__main,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-follow-up .timeline-event__main {
        overflow: hidden !important;
        border: 1px solid var(--bb-border) !important;
        border-radius: var(--r-md, 11px) !important;
        background: var(--bb-surface) !important;
        box-shadow: var(--bb-shadow-1) !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self.channel-email .timeline-event__main,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self.channel-follow-up .timeline-event__main {
        background: var(--bb-surface-2) !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: visible;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__head {
        position: relative;
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 8px 8px 14px !important;
        border-bottom: 1px solid var(--bb-border) !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__head > .d-flex {
        order: 1;
        min-width: 0;
        flex: 1;
        align-items: center;
        gap: 8px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__body {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        color: var(--bb-text);
        font-size: 13.5px;
        line-height: 1.5;
        text-align: left;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__foot {
        min-height: 34px;
        padding: 8px 14px;
        gap: 14px;
        border-top: 0;
        color: var(--bb-text-3);
        background: var(--bb-inset);
        font-size: 12px;
    }

    /* Integrated action affordance: quiet in the header/pill, framed only on hover. */
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions {
        position: relative;
        z-index: 4;
        order: 2;
        flex: none;
        margin-left: auto;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-menu-button {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--bb-text-3);
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        transition: color .15s, background .15s, border-color .15s;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-menu-button:hover,
    .cockpit-main-wrapper:not(.cockpit-admin) .event-menu-button[aria-expanded="true"] {
        border-color: var(--bb-border);
        color: var(--bb-primary);
        background: var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions-menu {
        position: absolute;
        z-index: 30;
        top: 30px;
        right: 0;
        width: 150px;
        flex-direction: column;
        gap: 2px;
        padding: 5px;
        border: 1px solid var(--bb-border);
        border-radius: 8px;
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-2);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions-item {
        width: 100%;
        min-height: 30px;
        padding: 6px 9px;
        border: 0;
        border-radius: 5px;
        color: var(--bb-text-2);
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions-item:hover {
        color: var(--bb-primary);
        background: var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions-item--danger { color: var(--bb-danger); }
    .cockpit-main-wrapper:not(.cockpit-admin) .event-actions-item--danger:hover {
        color: var(--bb-danger);
        background: var(--bb-danger-bg);
    }

    /* SMS object */
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .timeline-event__main {
        min-width: 0;
        max-width: 76% !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card {
        width: fit-content !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__body {
        padding: 9px 14px !important;
        border: 1px solid var(--bb-border);
        border-radius: 16px 16px 16px 5px;
        background: var(--bb-surface);
        box-shadow: var(--bb-shadow-1);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self.channel-sms .event-card__body {
        border: 0;
        border-radius: 16px 16px 5px 16px;
        color: var(--bubble-out-ink, #6b2231);
        background: var(--bubble-out, #ffe4ea);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-bubble__meta {
        margin-top: 4px;
        gap: 6px;
        font-size: 10.5px;
        line-height: 1.45;
    }

    /* Call pill object */
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call {
        margin-bottom: 14px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .timeline-event__row {
        width: auto !important;
        max-width: 100% !important;
        justify-content: center;
        margin: 0 auto;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .timeline-event__main {
        width: auto !important;
        min-width: 0;
        max-width: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .timeline-call-pill {
        width: auto;
        display: inline-flex;
        padding: 7px 8px 7px 14px !important;
        overflow: visible !important;
        border: 1px solid var(--bb-border) !important;
        border-radius: 99px !important;
        color: var(--bb-text-2);
        background: var(--bb-inset) !important;
        box-shadow: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .call-event-shell {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .audio-container {
        order: 1;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .event-actions {
        order: 2;
        margin-left: 2px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .event-menu-button {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event--call .event-actions-menu {
        top: 28px;
        right: -4px;
    }

    /* The after-hours state uses the same dock object rather than legacy columns. */
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off:not(.d-none) {
        order: 1;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off > .word-m-wrap {
        grid-row: 2;
        width: 100% !important;
        padding: 10px 12px !important;
        border-radius: 10px;
        background: var(--bb-inset);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off > .flex-1 {
        grid-row: 1;
        width: 100%;
        padding: 0 !important;
        font-size: 12px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off > .flex-1 > .text-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off > .flex-1 br { display: none; }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off .org-twilio-phone,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off .word-m-wrap > div:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal !important;
    }
}

@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner {
        position: relative;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner > .event-actions {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 5;
        opacity: 0;
        transition: opacity .15s;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner:hover > .event-actions,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner:focus-within > .event-actions {
        opacity: 1;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner:has(.event-actions) .event-card__body {
        padding-right: 42px !important;
    }
}


/* ======================================================================
   DS-COCKPIT ROUND 13 - confirmed screenshot deltas only.
   ====================================================================== */
@media (min-width: 1025px) {
    /* Compact, vertically centered email/follow-up headers. */
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__inner,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__inner > .d-flex {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__head {
        width: 100%;
        height: 38px;
        min-height: 38px;
        padding: 6px 8px 6px 14px !important;
        box-sizing: border-box;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__head > .d-flex {
        height: 26px;
        align-items: center !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .msg-kind {
        min-height: 18px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2.5px 8px;
        line-height: 13px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .msg-kind__icon {
        width: 9px;
        height: 9px;
        flex: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .message-subject {
        height: 18px;
        display: flex;
        align-items: center;
        line-height: 18px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__head .event-menu-button {
        width: 24px;
        height: 24px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__body,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event .event-card__foot {
        width: 100%;
        box-sizing: border-box;
    }

    /* SMS remains a compact bubble; character counts belong to the composer. */
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .timeline-event__row,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .timeline-event__main,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__inner {
        width: fit-content !important;
        min-width: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__head,
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .msg-count {
        display: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.channel-sms .event-card__body {
        width: auto;
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Reference CC action and New Thread switch. */
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-carbon-copies-checkbox {
        height: 18px;
        display: flex;
        align-items: center;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-cc-link {
        height: 18px;
        display: inline-flex;
        align-items: center;
        padding: 0;
        border: 0;
        color: var(--bb-primary) !important;
        background: transparent;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 18px;
        text-decoration: none !important;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-cc-link:hover {
        color: var(--bb-primary-hover) !important;
        text-decoration: underline !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-thread-toggle {
        gap: 7px;
        color: var(--bb-text-2);
        font-size: 12.5px;
        font-weight: 500;
        line-height: 18px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-thread-toggle .bb-switch__track {
        width: 32px;
        height: 18px;
        border-radius: 99px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-thread-toggle .bb-switch__track::before {
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-thread-toggle input:checked + .bb-switch__track::before {
        transform: translateX(14px);
    }
}


/* ======================================================================
   DS-COCKPIT ROUND 14 - defeat the exact legacy #chat-messages width rules.
   ====================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content,
    .cockpit-main-wrapper:not(.cockpit-admin) #messages {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #chat-messages #messages .timeline-event.channel-email .event-card,
    #chat-messages #messages .timeline-event.channel-follow-up .event-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #chat-messages #messages .timeline-event.channel-email .event-card__inner,
    #chat-messages #messages .timeline-event.channel-follow-up .event-card__inner {
        width: 100% !important;
        max-width: 100% !important;
    }
    #chat-messages #messages .timeline-event .event-card__head div {
        margin-bottom: 0 !important;
    }

    #chat-messages #messages .timeline-event.channel-sms .timeline-event__row {
        width: fit-content !important;
        max-width: 76% !important;
        box-sizing: border-box;
    }
    #chat-messages #messages .timeline-event.channel-sms .timeline-event__main,
    #chat-messages #messages .timeline-event.channel-sms .event-card,
    #chat-messages #messages .timeline-event.channel-sms .event-card__inner,
    #chat-messages #messages .timeline-event.channel-sms .event-card__body {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}


/* ======================================================================
   DS-COCKPIT ROUND 15 - agreed geometry and clean timeline paint.
   ====================================================================== */
@media (min-width: 1440px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #admin-side-user-info {
        grid-template-columns:
            clamp(332px, 18vw, 352px)
            minmax(760px, 1fr)
            clamp(352px, 19vw, 372px);
    }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages #admin-side-user-info {
        grid-template-columns: 314px minmax(680px, 1fr) 336px;
    }
}
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #users {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages {
        display: flow-root;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages > .day-split {
        margin: 14px 0;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages > .timeline-event {
        margin: 0 0 14px !important;
    }
    #chat-messages #messages .timeline-event.channel-sms .message-content.sms-bubble,
    #chat-messages #messages .timeline-event.self.channel-sms .message-content.sms-bubble {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #chat-messages #messages .timeline-event.channel-sms .event-card__head,
    #chat-messages #messages .timeline-event.channel-sms .msg-count {
        display: none !important;
    }
    #chat-messages #messages .timeline-event.channel-sms .event-card__body {
        margin: 0 !important;
    }
}


/* ======================================================================
   DS-COCKPIT ROUND 16 - wider dock and unclipped body-level help popover.
   ====================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper {
        width: 320px !important;
        max-width: 320px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .org_info > div:last-child,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-wrapper .cockpit-call-off .word-m-wrap > div:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal !important;
    }
}
.cockpit-tip-portal {
    position: fixed !important;
    z-index: 10050 !important;
    max-width: calc(100vw - 24px);
}
.cockpit-tip-portal .tip {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 8px !important;
    color: var(--bb-text);
    background: var(--bb-surface) !important;
    box-shadow: var(--bb-shadow-2) !important;
}


/* ======================================================================
   DS-COCKPIT ROUND 17 - compact Done and multi-reader message metadata.
   ====================================================================== */
@media (min-width: 1025px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .message-card-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-foot-actions:empty {
        display: none;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-foot-status {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
        color: var(--bb-text-3);
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-done {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--bb-success);
        font-size: 11px;
        font-weight: 600;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-readers {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--bb-text-2);
        font-size: 11px;
        cursor: help;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-readers__avatars {
        display: inline-flex;
        align-items: center;
        padding-left: 4px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-reader-avatar {
        width: 19px;
        height: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: -4px;
        border: 2px solid var(--bb-inset);
        border-radius: 50%;
        color: #fff;
        background: #7c6fd9;
        font-size: 7px;
        font-weight: 700;
        line-height: 1;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-reader-avatar:nth-child(2) { background: #2a9d8f; }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-reader-avatar:nth-child(3) { background: #d98b22; }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-readers__label {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-readers__label b {
        color: var(--bb-primary);
        font-weight: 700;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-foot-status .message-when {
        margin-left: 0;
    }
}

/* ======================================================================
   DS-COCKPIT ROUND 18 - composer, attachments, reversible Done, and mobile.
   ====================================================================== */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject {
    min-height: 38px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject > div {
    min-height: 38px;
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-title,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-input,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-carbon-copies-checkbox,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-checkbox {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    display: flex;
    align-items: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-title {
    color: var(--bb-text-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-input-value {
    width: 100% !important;
    height: 36px !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    color: var(--bb-text) !important;
    background: transparent !important;
    font-size: 13px;
    line-height: 36px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-input-value:focus {
    outline: 0;
    box-shadow: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-checkbox {
    justify-content: flex-end;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-foot-status {
    max-width: 72%;
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-readers {
    max-width: min(240px, 44vw);
    overflow: hidden;
    flex: 0 1 auto;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-readers__avatars {
    flex: 0 0 auto;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-readers__label {
    min-width: 0;
    max-width: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-readers__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cockpit-main-wrapper:not(.cockpit-admin) .message-readers__overflow {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}
.cockpit-main-wrapper:not(.cockpit-admin) .undo_done {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--bb-success) 28%, var(--bb-border));
    border-radius: 10px;
    color: var(--bb-success);
    background: color-mix(in srgb, var(--bb-success) 7%, var(--bb-surface));
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.cockpit-main-wrapper:not(.cockpit-admin) .undo_done:hover {
    border-color: var(--bb-success);
    background: color-mix(in srgb, var(--bb-success) 12%, var(--bb-surface));
}
.cockpit-main-wrapper:not(.cockpit-admin) #attacments_hide {
    flex: 0 0 auto;
    padding: 0 14px;
    background: var(--bb-surface);
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments {
    width: 100%;
    justify-content: flex-start !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .alert {
    width: auto !important;
    max-width: 100%;
    margin: 8px 0 !important;
    padding: 9px 10px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 8px !important;
    color: var(--bb-text-2) !important;
    background: var(--bb-inset) !important;
    box-shadow: none !important;
    font-size: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .alert::before {
    content: "Attachments";
    display: block;
    margin: 0 0 7px 2px;
    color: var(--bb-text-3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments li {
    min-width: 0;
    max-width: 260px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 5px 0 9px;
    border: 1px solid var(--bb-border);
    border-radius: 7px;
    color: var(--bb-text);
    background: var(--bb-surface);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(30, 24, 18, .04);
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments li::before {
    content: "FILE";
    flex: 0 0 auto;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
    font-size: 7px;
    font-weight: 800;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .remove_file {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    padding: 0 !important;
    border: 0;
    border-radius: 6px;
    color: var(--bb-text-3) !important;
    background: transparent;
    font-size: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .remove_file::before {
    content: "\00D7";
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
}
.cockpit-main-wrapper:not(.cockpit-admin) #attachments .remove_file:hover {
    color: var(--bb-primary) !important;
    background: var(--bb-primary-soft);
}

@media (max-width: 1024px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar__menu-container {
        height: 56px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid var(--bb-border);
        background: var(--bb-surface) !important;
        box-shadow: 0 1px 5px rgba(31, 25, 20, .06);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-brand {
        margin-left: 0 !important;
        padding-right: 12px !important;
        color: var(--bb-text) !important;
        font-size: 20px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-brand svg {
        width: 27px;
        height: 30px;
        padding: 5px;
        border-radius: 7px;
        color: #fff;
        background: var(--bb-primary);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #main-menu {
        min-width: 68px;
        height: 36px;
        padding: 0 13px;
        border: 0 !important;
        border-radius: 7px;
        font-size: 12px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-menu {
        align-items: center;
        margin-left: auto;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar-toggler {
        width: 38px;
        height: 38px;
        display: grid !important;
        place-items: center;
        padding: 0;
        border: 1px solid var(--bb-border) !important;
        border-radius: 7px;
        color: var(--bb-text);
        background: var(--bb-surface);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .navbar-toggler:focus {
        outline: 0;
        box-shadow: 0 0 0 3px var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) main.ds-cockpit {
        padding-top: 56px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #cockpit-content,
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages {
        height: calc(100vh - 56px) !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button {
        width: 100%;
        margin: 0 !important;
        border-bottom: 1px solid var(--bb-border);
        background: var(--bb-surface);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button > .d-flex {
        min-height: 86px;
        padding: 10px 14px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .back-to-list-button,
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .open-contact-options {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        padding: 0 !important;
        border: 1px solid var(--bb-border) !important;
        border-radius: 7px !important;
        color: var(--bb-primary);
        background: var(--bb-surface) !important;
        box-shadow: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .back-to-list-button {
        position: relative;
        background-image: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .back-to-list-button::before {
        content: "";
        position: absolute;
        top: 11px;
        left: 13px;
        width: 10px;
        height: 10px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .info {
        color: var(--bb-text);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .additional-text {
        max-width: 300px;
        overflow: hidden;
        color: var(--bb-text-3);
        font-size: 11px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .messages-cockpit-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: var(--bb-surface);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 9px 20px;
        overflow-x: hidden !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #messages > .timeline-event {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event__row {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: flex-start;
        gap: 7px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self .timeline-event__row {
        flex-direction: row-reverse;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .msg-ava {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
        margin: 3px 0 0 !important;
        font-size: 8px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event__main {
        width: calc(100% - 35px) !important;
        max-width: calc(100% - 35px) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-event.self .timeline-event__main {
        max-width: min(92%, 680px) !important;
    }
    #chat-messages #messages .timeline-event .event-card,
    #chat-messages #messages .timeline-event .event-card__inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    #chat-messages #messages .timeline-event .event-card {
        padding: 0 !important;
        border: 1px solid var(--bb-border) !important;
        border-radius: 8px !important;
        overflow: hidden;
        background: var(--bb-surface) !important;
        box-shadow: 0 2px 7px rgba(36, 29, 23, .06) !important;
    }
    #chat-messages #messages .timeline-event.self .event-card {
        background: var(--bb-inset) !important;
    }
    #chat-messages #messages .timeline-event .event-card__head {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px;
        padding: 7px 10px !important;
    }
    #chat-messages #messages .timeline-event .event-card__head > .d-flex {
        min-width: 0;
        flex: 1 1 auto;
        align-items: center;
        gap: 7px;
    }
    #chat-messages #messages .timeline-event .event-actions {
        position: relative !important;
        inset: auto !important;
        order: 5;
        flex: 0 0 auto;
        margin-left: auto;
    }
    #chat-messages #messages .timeline-event .event-menu-button {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
    #chat-messages #messages .timeline-event .message-subject {
        min-width: 0;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #chat-messages #messages .timeline-event .event-card__body {
        padding: 12px 14px !important;
        color: var(--bb-text);
        font-size: 13px !important;
        line-height: 1.55 !important;
        text-align: left;
    }
    #chat-messages #messages .timeline-event .message-tools {
        min-height: 0;
        padding: 0 12px 8px;
    }
    #chat-messages #messages .timeline-event .message-card-foot {
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px !important;
        flex-wrap: wrap;
    }
    #chat-messages #messages .timeline-event .message-foot-actions {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 0 0 auto;
    }
    #chat-messages #messages .timeline-event .message-foot-status {
        min-width: 0;
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    #chat-messages #messages .timeline-event .message-readers {
        max-width: min(190px, 48vw);
        font-size: 9px;
    }
    #chat-messages #messages .timeline-event .message-readers__avatars {
        display: none;
    }
    #chat-messages #messages .timeline-event .message-when {
        flex: 0 0 auto;
        font-size: 9px;
    }
    #chat-messages #messages .timeline-event.channel-sms .event-card {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #chat-messages #messages .timeline-event.channel-sms .event-card__head,
    #chat-messages #messages .timeline-event.channel-sms .message-tools {
        display: none !important;
    }
    #chat-messages #messages .timeline-event.channel-sms .event-card__body {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        padding: 9px 12px !important;
        border: 1px solid color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border));
        border-radius: 8px;
        background: var(--bb-primary-soft);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .timeline-call-pill {
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 6px 8px !important;
        border-radius: 18px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .call-event-shell,
    .cockpit-main-wrapper:not(.cockpit-admin) .audio-container {
        min-width: 0;
        max-width: 100%;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .message-legacy-meta {
        display: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject > div {
        min-height: 64px;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 34px 28px;
        gap: 0 8px;
        padding: 2px 10px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-carbon-copies-checkbox {
        grid-column: 1;
        grid-row: 2;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-subject-checkbox {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #attachments li {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    #chat-messages #messages .timeline-event .message-foot-status {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    #chat-messages #messages .timeline-event .message-readers {
        max-width: calc(100% - 55px);
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button > .d-flex {
        min-height: 80px;
    }
}
.cockpit-main-wrapper:not(.cockpit-admin) .call-completion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: 8px;
}
/* ======================================================================
   DS-COCKPIT ROUND 19 - icon filters, context rail, and composer correction.
   ====================================================================== */
.cockpit-main-wrapper:not(.cockpit-admin) .rail-title {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.cockpit-main-wrapper:not(.cockpit-admin) #conversation-unread-total {
    color: var(--bb-text-3);
    font-size: 11px;
    font-weight: 700;
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    overflow: visible;
    background: var(--bb-inset);
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-tabs .label_outer {
    position: relative;
    min-width: 0;
    overflow: visible !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-button {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 0;
    border-radius: 6px;
    color: var(--bb-text-3);
    background: transparent;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-button:hover {
    color: var(--bb-text);
    background: color-mix(in srgb, var(--bb-surface) 72%, transparent);
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-tabs .label_outer.on .conversation-filter-button {
    color: var(--bb-primary);
    background: var(--bb-surface);
    box-shadow: 0 1px 3px rgba(35, 28, 22, .12);
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-button svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-badge {
    position: absolute;
    z-index: 2;
    top: -8px;
    right: 5px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bb-inset);
    border-radius: 10px;
    color: #fff;
    background: var(--bb-primary);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(216, 69, 96, .26);
}
.cockpit-main-wrapper:not(.cockpit-admin) .conversation-filter-tabs .label_outer.on .conversation-filter-badge {
    border-color: var(--bb-surface);
}

/* The retired profile block left a blank band above the first context section. */
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar > .user-info.sidebar_user_info {
    display: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar {
    padding-top: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar > div:not(.loader-bg):not(.cockpit-wrapper) {
    margin: 0 !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    border-bottom: 1px solid var(--bb-border);
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-head-row {
    min-height: 52px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-head-row .cockpit-title,
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-head-row.cockpit-title {
    margin: 0 !important;
    line-height: 1.25;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-head-row .mt-2 {
    margin-top: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .sidebar-section-line {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-body.collapse:not(.show) {
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-body.show,
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .ctx-body:not(.collapse) {
    padding-bottom: 12px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .right-sidebar .right-sidebar-card {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 11px 12px !important;
    border-radius: 8px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .subscription-card .subs-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
}
.cockpit-main-wrapper:not(.cockpit-admin) .subscription-frequency {
    color: var(--bb-text-3);
    font-size: 10px;
    font-weight: 500;
}

/* Force the subject strip to a real centered row, overriding legacy floats/heights. */
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject > div {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-title,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-input,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-carbon-copies-checkbox,
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-checkbox {
    position: static !important;
    inset: auto !important;
    align-self: center !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    transform: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-input {
    min-width: 80px;
    flex: 1 1 auto;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-input-value {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
    transform: none !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-carbon-copies-checkbox {
    margin-left: auto !important;
}
.cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .composer-thread-toggle {
    height: 24px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .cockpit-main-wrapper:not(.cockpit-admin) #chat-messages .center-sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button {
        position: relative !important;
        inset: auto !important;
        z-index: 4;
        flex: 0 0 78px;
        height: 78px !important;
        min-height: 78px !important;
        overflow: visible !important;
        transform: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button > .d-flex {
        width: 100%;
        height: 78px !important;
        min-height: 78px !important;
        align-items: center !important;
        padding: 8px 14px !important;
        transform: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .mobile-back-to-list-button .info {
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    #chat-messages #messages .timeline-event .event-menu-button {
        border: 1px solid var(--bb-border) !important;
        color: var(--bb-text-2) !important;
        background: var(--bb-surface) !important;
        box-shadow: none !important;
    }
    #chat-messages #messages .timeline-event .event-menu-button:hover {
        border-color: var(--bb-primary) !important;
        color: var(--bb-primary) !important;
        background: var(--bb-primary-soft) !important;
    }
    #chat-messages #messages .timeline-event .event-card__head {
        min-height: 38px !important;
        padding: 5px 8px !important;
    }
    #chat-messages #messages .timeline-event .event-card__body {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
    #chat-messages #messages .timeline-event .message-tools {
        padding: 0 10px 6px !important;
    }
    #chat-messages #messages .timeline-event .html-email.btn-mob-call {
        width: auto !important;
        min-width: 46px;
        height: 27px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 8px !important;
        border: 1px solid var(--bb-primary) !important;
        border-radius: 6px;
        color: var(--bb-primary);
        background: var(--bb-surface) !important;
        background-image: none !important;
        font-size: 0;
    }
    #chat-messages #messages .timeline-event .html-email.btn-mob-call::after {
        content: "HTML";
        font-size: 9px;
        font-weight: 800;
    }
    #chat-messages #messages .timeline-event .message-card-foot {
        padding: 6px 9px !important;
    }
    #chat-messages #messages .timeline-event .message-done {
        font-size: 0 !important;
    }
    #chat-messages #messages .timeline-event .message-done::after {
        content: "Done";
        font-size: 9px;
    }
    #chat-messages #messages .timeline-event .message-readers__summary {
        font-size: 0;
    }
    #chat-messages #messages .timeline-event .message-readers__summary::after {
        content: "Read";
        font-size: 9px;
    }
    #chat-messages #messages .timeline-event .message-readers__overflow {
        min-width: 21px;
        padding: 2px 5px;
        font-size: 9px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject > div {
        height: 42px !important;
        min-height: 42px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject > div {
        display: flex !important;
        gap: 7px !important;
        padding: 0 10px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-title {
        font-size: 10px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-input-value,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .composer-cc-link,
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .composer-thread-toggle {
        font-size: 10.5px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .composer-thread-toggle {
        gap: 5px;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-foot {
        min-height: 54px;
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        padding: 8px 10px !important;
        flex-wrap: nowrap !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links {
        min-width: 0;
        flex: 1 1 auto;
        gap: 14px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links #attach label {
        margin-left: 0 !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links .cockpit-link {
        font-size: 11px;
        white-space: nowrap;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) #sms-counter {
        display: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .send-button {
        width: auto !important;
        min-width: 86px !important;
        max-width: 96px !important;
        height: 36px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 18px !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .send-button .svg_1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
}

@media (max-width: 390px) {
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-composer-box .cockpit-subject-title {
        display: none !important;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links {
        gap: 9px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .cockpit-textarea-links .cockpit-link {
        font-size: 10px;
    }
    .cockpit-main-wrapper:not(.cockpit-admin) .composer-foot .send-button {
        min-width: 76px !important;
        padding: 0 11px !important;
    }
}

/* ============================================================================
   TOAST UI CALENDAR (Calendar View /calendar/*) — tokenized so it themes with the
   skin. It shipped a hardcoded WHITE bg + near-black text/grid lines = a white sheet
   on espresso (owner audit: "very far from converted"). Tokens only, so porcelain
   keeps its white surface and espresso goes dark; no skin gate = passes the audit on
   both. These classes are unique to the calendar widget, so targeting them is safe.
   ============================================================================ */
.toastui-calendar-layout { background: var(--bb-surface) !important; color: var(--bb-text) !important; }
/* grid lines: month cells, week rows, the day-name header row + weekday grid */
.toastui-calendar-daygrid-cell,
.toastui-calendar-month-daygrid,
.toastui-calendar-month-week-item,
.toastui-calendar-day-names,
.toastui-calendar-day-name-item,
.toastui-calendar-weekday-grid,
.toastui-calendar-weekday-grid-line { border-color: var(--bb-border) !important; }
/* text: day numbers, day names, weekday titles, headers (were rgb(33,37,41)/black) */
.toastui-calendar-daygrid-cell,
.toastui-calendar-grid-cell-date,
.toastui-calendar-grid-cell-header,
.toastui-calendar-day-name-item,
.toastui-calendar-day-name-container,
.toastui-calendar-template-monthDayName,
.toastui-calendar-template-monthGridHeader,
.toastui-calendar-weekday,
.toastui-calendar-weekday-grid,
.toastui-calendar-weekday-schedule-title { color: var(--bb-text) !important; }
/* weekend dates dimmed instead of near-black */
.toastui-calendar-holiday-sat,
.toastui-calendar-holiday-sun { color: var(--bb-text-3) !important; }
/* event / see-more / creation popups float on a dark surface too */
.toastui-calendar-popup-container,
.toastui-calendar-see-more,
.toastui-calendar-month-more,
.toastui-calendar-detail-container,
.toastui-calendar-popup-section { background: var(--bb-surface) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; }
/* the calendar's date-range input shipped a hardcoded white bg (a specific rule beat the
   generic .form-control token) — tokenize it like every other input */
#calendar_date_range, input.form-control.daterange-input, .calendar-date-range input {
    background: var(--bb-surface) !important; color: var(--bb-text) !important;
    border: 1px solid var(--bb-border-input) !important;
}

/* ============================================================================
   CALENDAR VIEW page CHROME — the grid was tokenized before, but the CHROME was
   NOT (owner audit): the section tabs, status legend, icons and links hardcoded
   bootstrap's #212529 (identical on both skins via the skin-diff audit = dark-on-
   dark on espresso), and the date buttons hardcoded #D84560 instead of --bb-primary.
   Page-gated via :has(.status-legend-text); the .sections/.status-legend classes are
   calendar-only so they're safe to target directly.
   ============================================================================ */
.sections .section, .sections .section .section-name, .sections .section a.text-reset { color: var(--bb-text-2) !important; }
.sections .section.selected, .sections .section.selected .section-name, .sections .section.selected a.text-reset { color: var(--bb-primary) !important; }
.sections .section svg, .sections .section svg path { fill: currentColor !important; }
.sections .bottom-line { background: var(--bb-border) !important; }
.status-legend-text { color: var(--bb-text-2) !important; }
/* date-range / Today / update buttons: hardcoded #D84560 -> the primary token */
body:has(.status-legend-text) .btn.btn-primary,
body:has(.status-legend-text) .bb-standard-btn.btn-primary,
.calendar-range-update { background: var(--bb-primary) !important; border: 1px solid var(--bb-primary) !important; color: #fff !important; }
body:has(.status-legend-text) .btn.btn-primary:hover, .calendar-range-update:hover { background: var(--bb-primary-hover) !important; }
/* legend filter checkboxes (bootstrap custom-control) -> tokenized box */
body:has(.status-legend-text) .custom-control-label::before { background: var(--bb-surface) !important; border: 1px solid var(--bb-border-input) !important; }
body:has(.status-legend-text) .custom-control-input:checked ~ .custom-control-label::before { background: var(--bb-primary) !important; border-color: var(--bb-primary) !important; }
/* the "Regular View" link (now in the header row) */
body:has(.status-legend-text) .action.fw-500 { color: var(--bb-primary) !important; }

/* ============================================================================
   TASKER — paint for both skins (owner 2026-07-12: fine to just paint it, both
   skins nice + same function). The whole .tasker__* component (app.css / the
   1441-line tasker.scss) hardcoded WHITE task cards + #212529 / #1A1A1A ink +
   #FFCC78 avatar circles -> white slabs on espresso and dark-on-dark section
   headers. app.css loads AFTER bb-components so every rule needs !important.
   ============================================================================ */
/* base ink: every tasker text element sets its own #212529/#1A1A1A -> token */
[class*="tasker"] { color: var(--bb-text) !important; }
/* muted meta (dates / repeat / deadline / alerts) -> secondary ink */
[class*="tasker__"][class*="-date"], [class*="tasker__"][class*="-repeat"],
[class*="tasker__"][class*="-deadline"], [class*="tasker__"][class*="-alerts"] { color: var(--bb-text-2) !important; }
/* white task cards (To do / Completed rows) -> dark surface + tokenised border */
.tasker__body-todo-wrapper-desc, .tasker__body-Completed-wrapper-desc {
    background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; }
/* search input + its dropdown find-box */
.tasker__header-wrapper-search-find, .tasker__header-wrapper-search input {
    background: var(--bb-surface) !important; color: var(--bb-text) !important; border-color: var(--bb-border-input) !important; }
/* avatar circles (were fixed #FFCC78) -> the amber chip pair, themes on both skins */
.tasker__header-wrapper-search-circle, .tasker__header-wrapper-search-worker-filter-circle,
.tasker__modal-wrapper-worker-info-add-user-circle {
    background: var(--bb-amber-bg) !important; color: var(--bb-amber) !important; }
/* PRIMARY-FILLED buttons keep a white label (red fill is the same on both skins) */
.tasker__header-wrapper-button-tasks, .mobile-tasker__header-wrapper-button-tasks,
.tasker__modal-complete-footer-wrapper-btn-yes, .tasker__modal-worker-footer-wrapper,
.tasker__modal-worker-footer-wrapper-btn, .tasker__modal-wrapper-worker-info-create-save { color: #fff !important; }
/* red text / outline controls -> primary token */
.tasker__body-button, .tasker__body-button-text, .tasker__modal-wrapper-worker-info-add-new,
.tasker__modal-wrapper-worker-info-add-acc-link, .tasker__modal-complete-footer-wrapper-btn-no { color: var(--bb-primary) !important; }
/* tasker modal shells (only visible on interaction) -> dark surface */
.modal:has(.tasker__modal-body) .modal-content,
.modal:has(.tasker__modal-complete-header) .modal-content,
.modal:has(.tasker__modal-worker-header) .modal-content { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; }

/* ============================================================================
   NOTEPAD — paint for both skins (owner 2026-07-12: fine to just paint it). The
   .notepad folders/notes/preview panel hardcoded a WHITE surface + #212529/#1A1A1A
   ink + a #FFF2DA cream selected-item highlight + #D84560 old-red buttons -> one
   big white slab on espresso. Scoped to .notepad; app.css loads after -> !important.
   ============================================================================ */
/* ink -> token (buttons re-set below) */
.notepad, .notepad div, .notepad span, .notepad p, .notepad li, .notepad td, .notepad a:not(.btn) { color: var(--bb-text) !important; }
.notepad [class*="date"], .notepad small, .notepad .text-muted { color: var(--bb-text-2) !important; }
/* white folder/note/preview panel + the collapse toggle -> dark surface + token border */
.notepad .d-flex.flex-md-column, .notepad .mobile-content__display,
.notepad .d-none.d-lg-inline-block { background: var(--bb-surface) !important; border-color: var(--bb-border) !important; }
/* selected folder / active note (was cream #FFF2DA) -> brand-soft active tint */
.notepad .outer.active, .notepad .note-border { background: var(--bb-primary-soft) !important; }
/* buttons: old red #D84560 -> primary token */
.notepad .btn-primary { background: var(--bb-primary) !important; border-color: var(--bb-primary) !important; color: #fff !important; }
.notepad .btn-outline-primary { background: transparent !important; border-color: var(--bb-primary) !important; color: var(--bb-primary) !important; }

/* ============================================================================
   EMAIL-CAMPAIGN MODALS (email_templating/modals/*) — plain bootstrap .modal
   rendered outside <main>, so the page-local paint on create_campaign can't
   reach them. They shipped a white .modal-content + #212529 ink + #D84560
   primary / #343a40 btn-dark -> a white slab with dark text on espresso.
   Tokenised by id so it holds wherever create_campaign (or its admin twin)
   includes them; id specificity beats bootstrap/app.css, !important covers theirs.
   ============================================================================ */
#schedule_campaign_modal .modal-content,
#send_now_confirmation_modal .modal-content,
#sender-not-verified-modal .modal-content {
    background-color: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-border) !important;
}
#schedule_campaign_modal .modal-content .text-dark,
#send_now_confirmation_modal .modal-content .text-dark,
#sender-not-verified-modal .modal-content .text-dark { color: var(--bb-text) !important; }
/* white date/time selects -> input surface */
#schedule_campaign_modal .custom-select {
    background-color: var(--bb-surface) !important;
    border: 1px solid var(--bb-border-input) !important;
    color: var(--bb-text) !important;
}
/* old-red primary -> brand token */
#schedule_campaign_modal .btn-primary,
#send_now_confirmation_modal .btn-primary,
#sender-not-verified-modal .btn-primary {
    background-color: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: #fff !important;
}
/* the confirm/cancel #343a40 "dark" button -> visible inset secondary */
#send_now_confirmation_modal .btn-dark {
    background-color: var(--bb-inset) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
}
/* AJAX-loaded email popups (getModal) — also plain bootstrap .modal with a
   white .modal-content, #212529 ink and a .text-dark close cross. */
#more-info-modal .modal-content,
#recepients-modal .modal-content,
#system-email-modal .modal-content {
    background-color: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-border) !important;
}
#more-info-modal .text-dark,
#recepients-modal .text-dark,
#system-email-modal .text-dark { color: var(--bb-text) !important; }
/* the action-link lists (View Email / Edit / Test / Track Progress …) */
#more-info-modal .modal-body a,
#system-email-modal .modal-body a { color: var(--bb-primary) !important; }

/* ============================================================================
   THEME-AWARE ICON — `.bb-icon` / <x-bb.icon> (owner 2026-07-13).
   A monochrome SVG painted in currentColor via CSS mask, exactly like the
   sidebar nav icons — so it follows the skin (dark ink on porcelain, light on
   espresso) with zero per-icon work and no invert() hacks. This is the
   canonical fix for black <img src=*.svg> / content:url icons that can't
   recolour. Set the source via --bb-icon and size via --bb-icon-size (or
   width/height). Colour it by setting `color` on the icon or its parent.
   Usage: <x-bb.icon src="images/call-center.svg" size="20px" />
   ============================================================================ */
.bb-icon {
    display: inline-block;
    width: var(--bb-icon-size, 1em);
    height: var(--bb-icon-size, 1em);
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--bb-icon) no-repeat center / contain;
    mask: var(--bb-icon) no-repeat center / contain;
}
/* muted variant for secondary/affordance icons */
.bb-icon--muted { color: var(--bb-text-2); }

/* + New (header add-entity) dropdown: its .bb-menu rows wrap the label in a <p>
   that picked up a grey (.dropdown-call-item p) — force white like every other
   bb-menu row. And the New button shipped an 11px radius (header-skins.css);
   match the standard 5px button radius. (owner 2026-07-13) */
[data-bb-skin] .bb-menu .bb-menu-item p { color: var(--bb-text) !important; }
#add-entity-button { border-radius: var(--bb-radius-s) !important; }

/* WORKING HOURS — reusable row composition for weekday + start/end controls. */
.bb-hours-row {
    display: grid;
    grid-template-columns: minmax(8rem, .75fr) minmax(15rem, 1.25fr);
    gap: var(--bb-sp-3);
    align-items: center;
}
.bb-hours-row__day {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-3);
    min-width: 0;
}
.bb-hours-row__times {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--bb-sp-2);
    align-items: center;
    min-width: 0;
}
.bb-hours-row__times .bb-select { width: auto !important; max-width: none !important; min-width: 0; }
.bb-hours-row__separator { color: var(--bb-text-3); text-align: center; }

@media (max-width: 575.98px) {
    .bb-hours-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bb-sp-2);
        padding-bottom: var(--bb-sp-3);
        border-bottom: 1px solid var(--bb-border);
    }
    .bb-hours-row__times { width: 100%; }
}