/* 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 ------------------------------- */
:root {
    --bb-button-height: 40px;
    --bb-button-padding-x: 18px;
    --bb-button-gap: var(--bb-sp-2);
    --bb-button-radius: var(--bb-radius-s);
    --bb-button-font-size: var(--bb-fs-m);
    --bb-button-font-weight: var(--bb-fw-semibold);
}
.bb-btn {
    font-family: var(--bb-font);
    font-size: var(--bb-button-font-size);
    font-weight: var(--bb-button-font-weight);
    border-radius: var(--bb-button-radius);
    height: var(--bb-button-height);
    box-sizing: border-box;
    padding: 0 var(--bb-button-padding-x);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-button-gap);
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.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 { --bb-button-height: 32px; --bb-button-padding-x: 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 var(--bb-button-padding-x); }
.bb-btn--s.action, .bb-btn--s.custom-action { padding: 0 var(--bb-button-padding-x); }
.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); }

/* Legacy modal primary actions must render through the same visual contract
   as <x-bb.button>. Keep legacy classes for JS hooks, but do not let
   Bootstrap/page CSS create a second Save/Add/Submit style. */
body[data-bb-skin] .btn.bb-standard-btn.btn-primary,
body[data-bb-skin] a.btn.bb-standard-btn.btn-primary,
body[data-bb-skin] input[type="submit"].bb-standard-btn.btn-primary,
.modal.standard-modal .btn.btn-primary,
.modal.standard-modal .btn.bb-btn.bb-btn--primary,
.modal.standard-modal .btn.bb-btn--primary,
.modal.standard-modal .btn.bb-standard-btn.btn-primary,
.modal.standard-modal .modal-form-btn.btn-primary,
.modal.standard-modal .modal-form-btn.bb-btn--primary,
.modal.standard-modal input[type="submit"].btn-primary,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) .btn-primary,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) input[type="submit"].btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-button-gap) !important;
    height: var(--bb-button-height) !important;
    min-height: var(--bb-button-height) !important;
    padding: 0 var(--bb-button-padding-x) !important;
    border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-button-radius) !important;
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    font-family: var(--bb-font) !important;
    font-size: var(--bb-button-font-size) !important;
    font-weight: var(--bb-button-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .08s !important;
}
body[data-bb-skin] .btn.bb-standard-btn.btn-primary:hover,
body[data-bb-skin] a.btn.bb-standard-btn.btn-primary:hover,
body[data-bb-skin] input[type="submit"].bb-standard-btn.btn-primary:hover,
.modal.standard-modal .btn.btn-primary:hover,
.modal.standard-modal .btn.bb-btn.bb-btn--primary:hover,
.modal.standard-modal .btn.bb-btn--primary:hover,
.modal.standard-modal .btn.bb-standard-btn.btn-primary:hover,
.modal.standard-modal .modal-form-btn.btn-primary:hover,
.modal.standard-modal .modal-form-btn.bb-btn--primary:hover,
.modal.standard-modal input[type="submit"].btn-primary:hover,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) .btn-primary:hover,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) input[type="submit"].btn-primary:hover {
    background: var(--bb-primary-hover) !important;
    border-color: var(--bb-primary-hover) !important;
    color: var(--bb-on-primary) !important;
}
body[data-bb-skin] .btn.bb-standard-btn.btn-primary:disabled,
body[data-bb-skin] .btn.bb-standard-btn.btn-primary.disabled,
body[data-bb-skin] a.btn.bb-standard-btn.btn-primary.disabled,
body[data-bb-skin] input[type="submit"].bb-standard-btn.btn-primary:disabled,
.modal.standard-modal .btn.btn-primary:disabled,
.modal.standard-modal .btn.btn-primary.disabled,
.modal.standard-modal .btn.bb-btn.bb-btn--primary:disabled,
.modal.standard-modal .btn.bb-btn.bb-btn--primary.disabled,
.modal.standard-modal .btn.bb-btn--primary:disabled,
.modal.standard-modal .btn.bb-btn--primary.disabled,
.modal.standard-modal .modal-form-btn.btn-primary:disabled,
.modal.standard-modal .modal-form-btn.btn-primary.disabled,
.modal.standard-modal .modal-form-btn.bb-btn--primary:disabled,
.modal.standard-modal .modal-form-btn.bb-btn--primary.disabled,
.modal.standard-modal input[type="submit"].btn-primary:disabled,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) .btn-primary:disabled,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) .btn-primary.disabled,
body[data-bb-skin] .modal.modal-form:not(.snippet-form) input[type="submit"].btn-primary:disabled {
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    opacity: .45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* 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--direct-table { margin-bottom: var(--bb-sp-4); }
.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; }
.bb-page-head__actions.bb-page-head__actions--stack { align-items: flex-end; flex-direction: column; gap: var(--bb-sp-4); }
.bb-page-head__action-row,
.bb-page-head__link-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bb-page-head__action-row { gap: var(--bb-sp-2); }
.bb-page-head__link-row { gap: var(--bb-sp-2) var(--bb-sp-4); }
.bb-page-head__action-row > *,
.bb-page-head__link-row > * { margin: 0 !important; }
.bb-page-head__link-row .bb-link { font-size: var(--bb-fs-m); font-weight: 500; line-height: 16px; padding: 0; white-space: nowrap; }
@media (max-width: 575.98px) {
    .bb-page-head { gap: 12px; }
    .bb-page-head__actions { width: 100%; }
    .bb-page-head__actions.bb-page-head__actions--stack { align-items: flex-start; }
    .bb-page-head__action-row,
    .bb-page-head__link-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}
/* Type-2 settings frame — owns the contained column for a setting's head,
   form card, and any explicitly labelled supporting preview.  A Type-2 head must
   never remain at the full-page inset while its card is centered. */
.bb-settings-frame {
    width: min(100%, 1130px);
    margin: 0 auto;
    align-self: center;
    display: grid;
    gap: var(--bb-sp-5);
}
.bb-settings-frame > .bb-page-head { margin: 0; }
@media (max-width: 767.98px) {
    .bb-settings-frame { gap: var(--bb-sp-4); }
}

/* Type-2 settings intro — icon tile + title + description, the header every settings page
   opens with. Business and Call & Message Center each hand-rolled this
   (.business-settings-intro / .call-settings-intro) before it existed; values below are
   copied from those so the three pages are pixel-identical. Migrate them when convenient. */
.bb-settings-intro { display: flex; align-items: center; gap: var(--bb-sp-4); margin-bottom: var(--bb-sp-3); }
.bb-settings-intro__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; font-size: 20px; background: var(--bb-primary-soft); color: var(--bb-primary); border-radius: var(--bb-radius-m); }
.bb-settings-intro__title { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-xl); font-weight: var(--bb-fw-bold); line-height: var(--bb-lh-tight); color: var(--bb-text); }
.bb-settings-intro__description { margin: var(--bb-sp-1) 0 0; max-width: 72ch; font-size: var(--bb-fs-m); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
@media (max-width: 575.98px) { .bb-settings-intro { gap: var(--bb-sp-3); } .bb-settings-intro__icon { width: 38px; height: 38px; font-size: 17px; } }
/* Snippet-integration pages (<x-bb.snippet-page>) — the six "here is your embed code"
   screens: job request, quick request, appointment, contact, login, waitlist. They are
   Type-2 (centred 1130px) like the settings pages they are reached from, not full-bleed. */
/* the .ds-settings frame only caps max-width; on this page the content is narrow so the
   div shrink-wraps to ~879px instead of filling to 1130px like every other settings page */
#settings.snip-frame { width: 100%; max-width: 1130px; margin-left: auto; margin-right: auto; }
.snip { margin-bottom: var(--bb-sp-4); }
.snip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bb-sp-3); margin-bottom: var(--bb-sp-3); }
.snip__code { margin: 0 0 var(--bb-sp-3); }
.snip__area {
    display: block; width: 100%; height: auto; min-height: 132px; resize: vertical;
    padding: 13px 15px; margin: 0;
    background: var(--bb-inset); color: var(--bb-text-2);
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--bb-fs-s); line-height: 1.65;
    /* wrap rather than scroll: the snippet is meant to be read and copied whole, and a
       hidden overflow makes people think they copied a truncated tag */
    white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
}
.snip__area:focus { outline: none; border-color: var(--bb-border-strong); }
.snip__note { margin: 0 0 var(--bb-sp-4); font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.snip__row { margin: 0 0 var(--bb-sp-4); }
.snip__label { margin: 0 0 4px; font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.snip__text { margin: 0; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.snip__field { display: block; width: 100%; padding: 9px 13px; background: var(--bb-inset); color: var(--bb-text); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); font-size: var(--bb-fs-s); }
.snip__gtm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.snip__gtm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 var(--bb-sp-4); }
.snip__list { margin: 0 0 var(--bb-sp-4); padding-left: 18px; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.snip__list li + li { margin-top: 5px; }
/* instruction callout — replaces the ad-hoc .instruction-block + pin-icon.svg */
.snip-note { display: flex; gap: 10px; padding: 12px 14px; margin: 0 0 var(--bb-sp-4); background: var(--bb-inset); border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-primary); border-radius: var(--bb-radius-m); }
.snip-note__body { min-width: 0; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.snip-note__title { margin: 0 0 3px; font-size: var(--bb-fs-s); font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.snip-note__body p { margin: 0 0 6px; }
.snip-note__body p:last-child, .snip-note__body ul:last-child { margin-bottom: 0; }
.snip-note__body ul { margin: 0; padding-left: 18px; }
.snip-note__body li + li { margin-top: 4px; }
@media (max-width: 575.98px) { .snip__head { flex-direction: column; align-items: flex-start; gap: var(--bb-sp-2); } }
.bb-btn[disabled], .bb-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bb-btn.is-loading,
.bb-btn.is-success,
.bb-btn.is-error {
    position: relative;
    overflow: hidden;
}
.bb-btn.is-loading {
    pointer-events: none;
    opacity: .95;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-primary) 16%, transparent);
}
.bb-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        color-mix(in srgb, var(--bb-on-primary) 18%, transparent) 42%,
        transparent 76%
    );
    transform: translateX(-100%);
    animation: bb-btn-shimmer 1.05s ease-in-out infinite;
    pointer-events: none;
}
.bb-btn.is-success {
    background: var(--bb-success-bright);
    color: var(--bb-on-primary);
    border-color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-success-bright) 18%, transparent);
    animation: bb-btn-settle .28s ease-out both;
}
.bb-btn.is-error {
    background: var(--bb-danger-bright);
    color: var(--bb-on-primary);
    border-color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-danger-bright) 18%, transparent);
    animation: bb-btn-error .34s ease-out both;
}
.bb-btn__state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: var(--bb-fs-xs);
    line-height: 1;
}
.bb-action-feedback {
    display: none;
    align-items: flex-start;
    gap: var(--bb-sp-2);
    margin-top: var(--bb-sp-3);
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface-2);
    color: var(--bb-text);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.bb-action-feedback.is-visible {
    display: flex;
    opacity: 0;
    transform: translateY(4px);
    animation: bb-feedback-in .22s ease-out forwards;
}
.bb-action-feedback.is-success {
    border-color: color-mix(in srgb, var(--bb-success-bright) 36%, var(--bb-border));
    background: color-mix(in srgb, var(--bb-success-bright) 14%, var(--bb-surface-2));
    color: var(--bb-success-bright);
}
.bb-action-feedback.is-error {
    border-color: color-mix(in srgb, var(--bb-danger-bright) 36%, var(--bb-border));
    background: color-mix(in srgb, var(--bb-danger-bright) 14%, var(--bb-surface-2));
    color: var(--bb-danger-bright);
}
.bb-action-feedback__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    margin-top: .05rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: var(--bb-fs-xs);
    line-height: 1;
}
.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); } }
@keyframes bb-btn-shimmer { to { transform: translateX(100%); } }
@keyframes bb-btn-settle {
    0% { transform: translateY(1px) scale(.985); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes bb-btn-error {
    0%, 100% { transform: translateX(0); }
    32% { transform: translateX(-2px); }
    64% { transform: translateX(2px); }
}
@keyframes bb-feedback-in {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bb-spin { animation-duration: 1.5s; }
    .bb-btn.is-loading::after,
    .bb-btn.is-success,
    .bb-btn.is-error,
    .bb-action-feedback.is-visible {
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}

/* ============================================================================
   Universal workflow interaction cleanup (Visit + transition loader)
   ============================================================================ */

/* The Visit worker picker now renders the real library checkbox. Its legacy
   click handler belongs to the whole row, so children do not become competing
   click targets that collapse the picker while a worker is being selected. */
#u-customer-modal .visit-editor .worker-row.bb-check {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    color: var(--bb-text);
    cursor: pointer;
}
#u-customer-modal .visit-editor .worker-row.bb-check > * {
    pointer-events: none;
}
#u-customer-modal .visit-editor .worker-row.bb-check .bb-check__label {
    min-width: 0;
    color: inherit;
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
}

/* Status meaning owns the glyph and its tone. Explicit hover selectors keep
   the masked icon painted even where a legacy option rule changes text color. */
#u-customer-modal .visit-status-icon--brand,
#u-customer-modal .status-select-option:hover .visit-status-icon--brand {
    color: var(--bb-primary) !important;
}
#u-customer-modal .visit-status-icon--warning,
#u-customer-modal .status-select-option:hover .visit-status-icon--warning {
    color: var(--bb-amber) !important;
}
#u-customer-modal .visit-status-icon--success,
#u-customer-modal .status-select-option:hover .visit-status-icon--success {
    color: var(--bb-success) !important;
}
#u-customer-modal .visit-status-icon--danger,
#u-customer-modal .status-select-option:hover .visit-status-icon--danger {
    color: var(--bb-danger) !important;
}

/* The loader script only owns geometry. Surface, ink and mascot presentation
   are design-system concerns and therefore follow the active skin here. */
#u-customer-modal .u-modal-loader {
    z-index: 10000;
    overflow: hidden;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-l);
    background: var(--bb-bg) !important;
    color: var(--bb-text-2);
    opacity: 1 !important;
}
#u-customer-modal .u-modal-loader__content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: var(--bb-sp-2);
    width: 132px;
    transform: translate(-50%, -50%);
}
#u-customer-modal .u-modal-loader__image {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
}
#u-customer-modal .u-modal-loader__label {
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-body);
}
.bb-action-feedback {
    display: none;
    align-items: center;
    gap: var(--bb-sp-2);
    min-height: 18px;
    margin-top: var(--bb-sp-2);
    font-size: var(--bb-fs-xs);
    line-height: var(--bb-lh-tight);
    font-weight: var(--bb-fw-medium);
}
.bb-action-feedback.is-visible { display: flex; }
.bb-action-feedback.is-success { color: var(--bb-success); }
.bb-action-feedback.is-error { color: var(--bb-danger); }
/* When the message sits ABOVE its button — the shared upload dialog stacks them in one
   flex column — nothing separated them: this element only ever carried a margin-TOP, so the
   card and the button shared an edge. Bottom gap only where something follows it. */
.bb-action-feedback:not(:last-child) { margin-bottom: var(--bb-sp-2); }

/* QuickBooks failure dialog (#qb_something_wrong). The character sits beside the message so a
   small modal stays small; the actions are a plain two-up row in the body, which is what the
   catalog asks of a small single-action dialog. Replaces `m-2 / p-3 pt-4 text-primary rounded`
   utilities and a bootstrap col-md-6 grid. */
.bb-qb-error { display: flex; align-items: center; gap: var(--bb-sp-3); }
.bb-qb-error img { width: 92px; height: auto; flex: 0 0 92px; }
.bb-qb-error__message { color: var(--bb-danger); font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); }
.bb-qb-error__detail { margin-top: var(--bb-sp-3); color: var(--bb-text-2); font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); overflow-wrap: anywhere; }
.bb-qb-error__detail:empty { display: none; }
.bb-qb-error__actions { display: flex; gap: var(--bb-sp-2); margin-top: var(--bb-sp-4); }
.bb-qb-error__actions > .bb-btn { flex: 1; }
.bb-action-feedback__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-weight: var(--bb-fw-bold);
}

/* Estimate / Price Book item dialogs -------------------------------------------------
   Both the reusable-item and quick-select entry points use this shared modal contract.
   Legacy IDs remain for their existing JavaScript handlers. */
.price-book-modal .modal-body { padding: var(--bb-sp-5); }
.price-book-modal .modal-header { padding: var(--bb-sp-4) var(--bb-sp-5); }
.price-book-modal .modal-custom-title { color: var(--bb-text); }
.price-book-modal .price-book-modal__switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bb-sp-3);
}
.price-book-modal .switch-block {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-2);
    column-gap: var(--bb-sp-2);
    min-height: 42px;
    padding: 0 var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-s);
    background: var(--bb-inset);
}
.price-book-modal .switch-block .input-label {
    margin: 0 !important;
    color: var(--bb-text);
    font-weight: 600;
    line-height: 1.2;
}
.price-book-modal .switch-block .bb-switch {
    flex: 0 0 auto;
    margin: 0 !important;
}
.price-book-modal .switch-block .bb-switch + .input-label,
.price-book-modal .switch-block .input-label + .bb-switch {
    margin-left: var(--bb-sp-1) !important;
}
.price-book-modal .switch-block label {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-sp-2);
    margin: 0 !important;
}
.price-book-modal .price-book-modal__upload {
    padding-top: var(--bb-sp-3);
    border-top: 1px solid var(--bb-border);
}
.price-book-modal .price-book-modal__upload-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bb-sp-2);
}
.price-book-modal .price-book-modal__upload-help { color: var(--bb-text-2); font-size: var(--bb-fs-s); }
.price-book-modal #item-image-upload-btn-wrap { width: 100%; }
.price-book-modal #item-image-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-sp-2);
    width: 100%;
    min-height: 48px;
    border: 1px dashed var(--bb-primary) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
    font-weight: var(--bb-fw-semibold);
    box-shadow: none !important;
}
.price-book-modal #item-image-upload-btn::before {
    content: "+";
    font-size: var(--bb-fs-l);
    line-height: 1;
}
.price-book-modal #item-image-upload-btn:hover {
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}
.price-book-modal .attachment-row { gap: var(--bb-sp-2); color: var(--bb-text); }
.price-book-modal .attachment-row .filename,
.price-book-modal .attachment-row .preview-file-btn,
.price-book-modal .attachment-row .delete-item-image-file { color: var(--bb-text-2) !important; }
.price-book-modal .attachment-row .preview-file-btn:hover,
.price-book-modal .attachment-row .delete-item-image-file:hover { color: var(--bb-primary) !important; }
.price-book-select-modal .modal-dialog { width: min(100% - 32px, 480px); }
.price-book-select-modal .input-selector { min-height: 42px; }
.price-book-select-modal .modal-form-btn { margin-top: var(--bb-sp-5); }
.price-book-modal .modal-form-btn[disabled],
.price-book-modal .modal-form-btn.disabled {
    border-color: var(--bb-border) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text-3) !important;
    opacity: 1 !important;
}
.price-book-modal .price-book-modal__upload .bb-btn { min-width: 0; }
@media (max-width: 575.98px) {
    .price-book-modal .modal-body { padding: var(--bb-sp-4); }
    .price-book-modal .modal-header { padding: var(--bb-sp-3) var(--bb-sp-4); }
    .price-book-modal .price-book-modal__switches { grid-template-columns: 1fr; }
}

/* Universal workflow metadata and change requests ----------------------------- */
#u-customer-modal .workflow-info-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
}
#u-customer-modal .quote-change-note {
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-amber);
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface);
}
#u-customer-modal .quote-change-note__text {
    margin-left: 30px;
    white-space: pre-wrap;
    line-height: var(--bb-lh-body);
    color: var(--bb-text);
}
#u-customer-modal .quote-change-note__attachment-label { margin-left: 30px; color: var(--bb-text-2); }
#u-customer-modal .quote-change-note__attachment { width: fit-content; color: var(--bb-primary); text-decoration: underline; cursor: pointer; }
#u-customer-modal .quote-change-note__item-title { font-weight: 600; color: var(--bb-text); }
#u-customer-modal .quote-change-note__section { border-top: 1px solid var(--bb-amber); }
#u-customer-modal .quote-change-note__section-title { font-size: var(--bb-fs-s); font-weight: 600; color: var(--bb-text-2); }
#u-customer-modal .changes-requested-alert {
    background: var(--bb-amber-bg) !important;
    color: var(--bb-amber) !important;
    border: 1px solid var(--bb-amber) !important;
    border-radius: var(--bb-radius-m) !important;
}
/* The detail band used to fill with --bb-inset, which is a THIRD colour inside an
   amber block (grey on porcelain, grey-brown on espresso). It is a band of the
   same banner now, marked off by a hairline in the banner's own tone. The rule
   lives here rather than in a competing block further down the file, because this
   selector is the more specific of the two and would have won anyway. */
#u-customer-modal .changes-requested-alert .changes-requested-details {
    background: transparent !important;
    margin-top: var(--bb-sp-3);
    padding-top: var(--bb-sp-3);
    border-top: 1px solid color-mix(in srgb, var(--bb-amber) 35%, transparent);
}
#u-customer-modal .changes-requested-alert .changes-requested-header p { color: var(--bb-amber) !important; }
#u-customer-modal .changes-requested-title { font-size: var(--bb-fs-l); font-weight: 600; color: var(--bb-amber); }
#u-customer-modal .u-workflow-panel .alert {
    border-radius: var(--bb-radius-m) !important;
    padding: var(--bb-sp-3) var(--bb-sp-4) !important;
}
#u-customer-modal .u-workflow-panel .alert-success {
    background: var(--bb-success-bg) !important;
    border-color: var(--bb-success) !important;
    color: var(--bb-success) !important;
}
#u-customer-modal .u-workflow-panel .alert-warning {
    background: var(--bb-amber-bg) !important;
    border-color: var(--bb-amber) !important;
    color: var(--bb-amber) !important;
}
#u-customer-modal .u-workflow-panel .alert-danger {
    background: var(--bb-danger-bg) !important;
    border-color: var(--bb-danger) !important;
    color: var(--bb-danger) !important;
}
#u-customer-modal .u-workflow-panel .alert-info {
    background: var(--bb-info-bg) !important;
    border-color: var(--bb-info) !important;
    color: var(--bb-text-2) !important;
}
#u-customer-modal .u-workflow-panel .bb-text-success { color: var(--bb-success) !important; }

/* ---------------------------- 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); }
/* Field-level error text — the danger twin of .bb-field__help. Add .is-invalid to the
   field (or the control) to turn the label + border danger; both skins via --bb-danger. */
.bb-field__error { margin: 0; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-danger); font-weight: 500; }
.bb-field__error:empty { display: none; }
.bb-field.is-invalid > label { color: var(--bb-danger); }
.bb-field.is-invalid .bb-input, .bb-field.is-invalid .bb-select, .bb-field.is-invalid .bb-textarea,
.bb-input.is-invalid, .bb-select.is-invalid, .bb-textarea.is-invalid { border-color: var(--bb-danger); }
.bb-field.is-invalid .bb-input:focus, .bb-field.is-invalid .bb-select:focus, .bb-field.is-invalid .bb-textarea:focus,
.bb-input.is-invalid:focus, .bb-select.is-invalid:focus, .bb-textarea.is-invalid:focus { border-color: var(--bb-danger); box-shadow: 0 0 0 3px var(--bb-danger-bg); }
.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;
}
/* A chip is a label, not a paragraph or a panel:
   - never break mid-word ("NEEDS / VERIFICATION", "BUILT- / IN" at 375px)
   - never stretch. Dropped in a flex row whose other child wraps to two lines, a chip
     inherits align-items:stretch and becomes a tall block — 43px for an 11px label on
     the Information tab, where "Business phone number" wraps on a phone. */
.bb-chip { white-space: nowrap; align-self: center; }
/* Settings tables on a phone: Billing ran to 447px and Usage to 456px inside a 375px
   viewport, so the right-hand columns were simply cut off — no scrollbar, no hint they
   existed. Making the table its own scroll box lets it shrink to fit, and scroll when it
   genuinely cannot. */
@media (max-width: 767.98px) {
    .ds-settings .bb-card table,
    .ds-settings .content-box table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===================== scrollbars follow the skin, everywhere =====================
   One declaration instead of the per-element rules we were adding one scroll box at a
   time (cockpit contact list, message thread, …). `scrollbar-color` INHERITS, so setting
   it once covers every scroll container on the page.

   Anchored at BODY on purpose: the espresso palette is defined on
   [data-bb-skin="espresso"], which is the <body> — porcelain is on :root. A rule written
   against <html> would resolve --bb-border-strong to the PORCELAIN value in both skins,
   i.e. a pale thumb on a dark page. `color-scheme` follows the skin too so the browser
   renders the native scrollbar furniture (and the viewport bar) on the right side. */
body { scrollbar-width: thin; scrollbar-color: var(--bb-border-strong) transparent; color-scheme: light; }
body[data-bb-skin="espresso"] { color-scheme: dark; }

/* WebKit fallback for browsers without scrollbar-color (Chrome < 121, Safari).
   Same values as the standard property above, so the two can never disagree. */
body::-webkit-scrollbar,
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body::-webkit-scrollbar-track,
body ::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb,
body ::-webkit-scrollbar-thumb { background: var(--bb-border-strong); border-radius: 8px; }
body::-webkit-scrollbar-thumb:hover,
body ::-webkit-scrollbar-thumb:hover { background: var(--bb-text-3); }
body::-webkit-scrollbar-corner,
body ::-webkit-scrollbar-corner { background: transparent; }
.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;
}
/* The banner is a one-row icon+text note, so its children are flex items sized
   to their content. A few places use it as a BLOCK panel instead — a full header
   row plus an expandable detail section — and inside a flex parent those stack
   side by side and refuse to fill the width. This modifier keeps the banner's
   tone and padding while letting the content own its own layout. */
.bb-banner--block { display: block; }
.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; }

/* ------------------------------ choice row ------------------------------
   One actionable option in a "pick how this happens" list — a channel, a
   payment method, an export format. A button, not a checkbox: clicking it IS
   the decision, so there is no separate confirm step.

   It carries the DESTINATION, not just the name ("Text message" / "(206)
   555-0134"), because the question these lists answer is usually "where is
   this actually going?". When an option cannot be used, it stays VISIBLE and
   says why — a channel that silently disappears reads as a bug.

   <div class="bb-choice-stack">
     <button class="bb-choice">
       <span class="bb-choice__ic">icon</span>
       <span class="bb-choice__body">
         <span class="bb-choice__name">Text message</span>
         <span class="bb-choice__dest">(206) 555-0134</span>
       </span>
     </button>
     <div class="bb-choice is-off"> …same… <span class="bb-choice__why">reason</span></div>
   </div>                                                                  */
.bb-choice {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-3);
    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-surface);
    color: var(--bb-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease;
}
.bb-choice:hover,
.bb-choice:focus-visible {
    border-color: var(--bb-primary);
    color: var(--bb-text);
    outline: none;
}
.bb-choice__ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--bb-radius-s);
    background: var(--bb-inset);
    color: var(--bb-text-2);
}
.bb-choice:hover .bb-choice__ic { color: var(--bb-primary); }
.bb-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-choice__name {
    font-size: var(--bb-fs-m);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-tight);
}
.bb-choice__dest,
.bb-choice__why {
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-2);
    overflow-wrap: anywhere;
}
/* Unavailable: readable, not decorative-grey-on-grey, and never hidden. */
.bb-choice.is-off {
    background: var(--bb-inset);
    cursor: default;
}
.bb-choice.is-off:hover { border-color: var(--bb-border); }
.bb-choice.is-off .bb-choice__ic { background: var(--bb-surface); color: var(--bb-text-3); }
.bb-choice.is-off .bb-choice__name { color: var(--bb-text-2); }
.bb-choice.is-off .bb-choice__why { color: var(--bb-amber); }
.bb-choice.is-off .bb-choice__why a { color: inherit; text-decoration: underline; }
/* Mid-send: the row that was clicked owns the wait, the others step back. */
.bb-choice.is-busy { border-color: var(--bb-primary); cursor: progress; }
.bb-choice-stack.is-busy .bb-choice:not(.is-busy) { opacity: .5; pointer-events: none; }
/* The library spinner sits in the icon well while the row is working. */
.bb-choice__ic .bb-spin { width: 15px; height: 15px; border-width: 2px; margin: 0; }
/* Outcome, in the same language as a save button: green Sent, red Try again. */
.bb-choice.is-success { border-color: var(--bb-success); }
.bb-choice.is-success .bb-choice__ic { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-choice.is-success .bb-choice__name { color: var(--bb-success); }
.bb-choice.is-error { border-color: var(--bb-danger); }
.bb-choice.is-error .bb-choice__ic { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-choice.is-error .bb-choice__name { color: var(--bb-danger); }
.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%; }

/* ------------------------- onboarding layout ----------------------------
   A "set this up before you can start" page: one short piece of orientation
   beside one card of fields. Used by Create organisation.

   It exists because those pages were a small form floating alone in a very
   large empty page — nothing said what the form was FOR or what happens after
   it. The aside carries that, and on a phone it stacks above the card so the
   reading order is still explain-then-do.

   <div class="bb-onboard">
     <div class="bb-onboard__aside"> h1 + lead + .bb-onboard__points </div>
     <div class="bb-onboard__main"> .bb-card … </div>
   </div>                                                                  */
.bb-onboard {
    display: grid;
    gap: var(--bb-sp-6);
    align-items: start;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--bb-sp-6) var(--bb-sp-4);
}
/* Centred in the space under the header — but only from 992px, which is where
   the two-column layout starts and where there is room to centre into. Measured
   before choosing: the block is ~641px tall and sat with 24px above it and 210px
   below, an imbalance that reads as an accident rather than a placement. Nothing
   on this page scrolls and there is no navigation within it, so centring is safe
   here in a way it would not be on a working screen.

   84px is `.bb-main`'s own padding-top (the app shell's header offset), NOT the
   60px header — measured, after a first attempt using 60 overflowed by exactly
   the 24px difference and put a scrollbar on a page that fits.

   `safe center` is the important half: on a short window centring would push the
   top of the card out of reach, so the browser falls back to start alignment and
   the page simply scrolls. */
@media (min-width: 992px) {
    .bb-onboard {
        min-height: calc(100vh - 84px);
        align-content: safe center;
    }
    /* Sticky was for a long form scrolling past a short aside. Centred content
       that fits the window never scrolls, so it would only fight the alignment. */
    .bb-onboard__aside { position: static; }
}
@media (min-width: 992px) {
    .bb-onboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--bb-sp-6); }
    .bb-onboard__aside { position: sticky; top: 96px; }
}
.bb-onboard__lead {
    margin: var(--bb-sp-2) 0 0;
    font-size: var(--bb-fs-l);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-2);
}
.bb-onboard__points { list-style: none; margin: var(--bb-sp-5) 0 0; padding: 0; display: grid; gap: var(--bb-sp-3); }
.bb-onboard__points li {
    display: flex;
    gap: var(--bb-sp-3);
    align-items: flex-start;
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-2);
}
.bb-onboard__points li::before {
    content: "";
    flex: none;
    width: 6px; height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--bb-primary);
}
/* The legal line under the fields. Quiet, but it must stay READABLE — it was
   inheriting a literal `color: black` from a legacy .c-black wrapper, which is
   invisible on espresso. */
.bb-onboard__terms {
    margin: 0;
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-2);
}
.bb-onboard__terms a { color: var(--bb-primary); text-decoration: underline; }
.bb-onboard__note {
    margin: var(--bb-sp-4) 0 0;
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
    color: var(--bb-text-3);
    text-align: center;
}
/* On a phone the shared form's half-width pairs are too narrow for their own
   content — "Eastern (UTC-05:00)" truncated mid-word inside the Timezone select.
   Scoped to this layout so the settings copy of the same partial is untouched. */
@media (max-width: 575px) {
    .bb-onboard .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .bb-onboard .row > [class*="col-"] + [class*="col-"] { margin-top: var(--bb-sp-3); }
}

/* ===================== 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-table-empty-cell {
    padding: 0 !important;
    border-right: 0 !important;
    background: var(--bb-surface) !important;
    white-space: normal !important;
}
.stafter-table-bottom.is-empty {
    display: none !important;
}
.bb-table-empty {
    box-sizing: border-box;
    min-height: 210px;
    padding: var(--bb-sp-6) var(--bb-sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bb-sp-2);
    text-align: center;
    color: var(--bb-text);
    background: var(--bb-surface);
}
.bb-table-empty__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--bb-sp-1);
    border-radius: var(--bb-radius-round);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
}
.bb-table-empty__title {
    color: var(--bb-text);
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-heading);
}
.bb-table-empty__message {
    max-width: 360px;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
}
@media (max-width: 600px) {
    .bb-table-empty {
        position: sticky;
        left: 0;
        width: calc(100vw - var(--bb-sp-5) - var(--bb-sp-4));
        min-height: 176px;
        padding: var(--bb-sp-5) var(--bb-sp-4);
    }
    .bb-table-empty__icon {
        width: 44px;
        height: 44px;
    }
}
.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 */

/* -------------------- universal workflow panels -----------------------
   Request → Visit → Estimate → Job → Invoice lives inside the full-screen
   universal customer modal. It is an approved full-page-modal exception, but
   every inner surface still uses the ordinary shared card/table tokens below.
   These rules deliberately override only legacy hooks inside .u-workflow-panel
   so customer lists and older job pages are not affected. */
#u-customer-modal .u-workflow-panel {
    color: var(--bb-text);
    gap: 0;
}
#u-customer-modal .u-workflow-panel .left-large-container,
#u-customer-modal .u-workflow-panel .right-small-container {
    min-height: 360px;
}
#u-customer-modal .u-workflow-panel .entity-info-container,
#u-customer-modal .u-workflow-panel .job-details-container,
#u-customer-modal .u-workflow-panel .images-container {
    color: var(--bb-text);
}
#u-customer-modal .u-workflow-panel .u-workflow-main {
    background: var(--bb-surface);
    border-color: var(--bb-border) !important;
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
}
#u-customer-modal .u-workflow-panel .u-workflow-main--empty {
    min-height: 360px;
    height: auto !important;
}
/* ---------------------------------------------------------------------------
   Character gifs — strip the baked-in white halo.

   These assets are GIFs, so transparency is 1-bit: there is no such thing as a
   half-transparent pixel (measured — 0 partial-alpha pixels in every one of
   them). Every anti-aliased edge pixel therefore got frozen against a white
   background at export time, leaving a 1px white ring welded to the artwork.
   It is invisible on a white page and reads as a glow on espresso.

   No CSS glow or shadow can cancel it, because it follows the character's
   contour, not its bounding box. So instead we shrink the alpha channel a
   sliver and repaint the ORIGINAL colours inside the shrunk shape — the white
   ring falls outside it and is simply not drawn.

   feComposite matters: eroding SourceGraphic directly would erode the colour
   channels too and muddy the character. Eroding SourceAlpha and compositing
   "in" keeps the pixels untouched and only trims the silhouette.

   The radius is a FRACTION OF THE IMAGE (primitiveUnits="objectBoundingBox"),
   not a pixel count. That matters: the white ring is one SOURCE pixel, so it is
   drawn bigger wherever the gif is displayed bigger. A fixed 0.5px shave cleaned
   the small ones and left a visible halo at 200px. 0.011 of the box tracks the
   render size and removes the same ring everywhere. Compared side by side at
   90px and 200px in drafts/modal-verify/fm-gif-scale.cjs.

   The filter is a data URI on purpose: url(#id) pointing at an <svg> in the
   layout would make Chrome drop the image entirely on any page that layout
   does not cover. Verified to resolve: drafts/modal-verify/fm-gif-fix-real.cjs

   WHICH images: matched by path, not by class, because plenty of these are
   dropped in as bare <img> tags with no class at all — matching the class alone
   left most of the set untreated. Every gif in the project was measured
   (drafts/modal-verify/fm-gif-audit.cjs): all 16 CH_* characters plus
   loading.gif and nopicture.gif carry the matte, 19-63% of their outer edge.
   The five create-org-loader gifs measured 0% and are deliberately excluded —
   they have nothing to strip, so eroding them would only thin the artwork.

   ESPRESSO ONLY: on a white page the ring is invisible, so there is nothing to
   fix and no reason to shave a pixel off the art.
   --------------------------------------------------------------------------- */
[data-bb-skin="espresso"] img[src*="/images/CH_"],
[data-bb-skin="espresso"] img[src*="/images/loading.gif"],
[data-bb-skin="espresso"] img[src*="/images/nopicture.gif"] {
    filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22d%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%22-5%25%22%20y%3D%22-5%25%22%20width%3D%22110%25%22%20height%3D%22110%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22erode%22%20radius%3D%220.011%22%20result%3D%22s%22%2F%3E%3CfeComposite%20in%3D%22SourceGraphic%22%20in2%3D%22s%22%20operator%3D%22in%22%2F%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#d");
}

#u-customer-modal .u-workflow-panel .u-workflow-empty-state {
    min-height: 290px;
    padding: var(--bb-sp-6);
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-l) !important;
    text-align: center;
}
#u-customer-modal .u-workflow-panel .u-workflow-empty-state .bb-standard-gif-image {
    width: 94px;
    height: 94px;
    object-fit: contain;
    margin-bottom: var(--bb-sp-3);
}
#u-customer-modal .u-workflow-panel .schedule-container {
    background: var(--bb-surface);
    border-color: var(--bb-border);
    box-shadow: none;
    color: var(--bb-text);
}
#u-customer-modal .u-workflow-panel .create-quote-btn,
#u-customer-modal .u-workflow-panel .create-invoice-btn { color: var(--bb-text) !important; }
#u-customer-modal .u-workflow-panel .create-quote-btn img,
#u-customer-modal .u-workflow-panel .create-invoice-btn img { opacity: .78; }
#u-customer-modal .u-workflow-panel .new-entity-header { background: var(--bb-primary-soft); color: var(--bb-primary); }
#u-customer-modal .u-workflow-panel .u-workflow-list-label {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 0 0 var(--bb-sp-2) !important;
    padding: 0 var(--bb-sp-1);
    background: transparent !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
}

/* Job detail rows: legacy CSS paints white cells. This is the compact, readable
   two-column detail treatment shared by Job view and the draft Job form. */
#u-customer-modal .u-workflow-detail-card {
    padding: var(--bb-sp-4);
    overflow: hidden;
}
/* The Job list element also carries the legacy class .job-description, whose rule
   `#u-customer-modal .internal-data-container .job-description` (1 id + 2 classes)
   outranks this hook (1 id + 1 class) and paints a light #D2D5DA border + #f5f5f5
   fill + shadow — a glaring white rectangle on Espresso. !important makes the
   tokenized list authoritative so Job matches the Request list on both skins. */
#u-customer-modal .u-workflow-detail-list {
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    /* NOT overflow:hidden. That was here to clip the zebra rows to the rounded
       frame, and it also clipped every picker that opens inside a row — the
       worker list, the time list and the date picker were all cut off at the
       row edge. The corners are rounded on the first and last rows instead,
       which gets the same frame without trapping the dropdowns. */
    overflow: visible;
    background: var(--bb-surface) !important;
    box-shadow: none !important;
}
/* Inline Request/Job pickers open over fields that sit AFTER the detail list.
   Reverse row z-indexing handles rows inside the list; this state elevates the
   whole list above later siblings and lets the menu escape the card's normal
   clipping boundary. universal-modal.js owns the state so it is removed as
   soon as the picker closes. */
#u-customer-modal .u-workflow-detail-card.has-open-picker {
    overflow: visible !important;
}
/* The Request step still matches the old overflow:hidden rule on
   `.section.job-request .request-description`, whose extra class outranks the
   base component selector. The open state is authoritative: the menu must be
   allowed to leave the list. */
#u-customer-modal .u-workflow-detail-list.has-open-picker {
    position: relative;
    z-index: 50;
    overflow: visible !important;
}
#u-customer-modal .u-workflow-detail-list > *:first-child {
    border-top-left-radius: calc(var(--bb-radius-m) - 1px);
    border-top-right-radius: calc(var(--bb-radius-m) - 1px);
}
#u-customer-modal .u-workflow-detail-list > *:last-child {
    border-bottom-left-radius: calc(var(--bb-radius-m) - 1px);
    border-bottom-right-radius: calc(var(--bb-radius-m) - 1px);
}
/* -- open pickers must never be sliced by the rows beneath them --------------
   A picker opens DOWNWARD out of its row. Rows paint in document order, so
   giving every picker row the SAME z-index — which the first version of this
   rule did — means the row below wins and cuts the open list in half. Detail
   rows therefore stack in REVERSE document order: row 1 above row 2, and so on.
   Applied to the div-based lists (jobs-flow steps, appointment) and to the
   table-based ones (employee, vehicle, customer) alike, since they all put
   inline pickers inside a row. */
.u-modal .u-workflow-detail-list > *,
.u-modal .u-tbl tbody tr,
.u-modal .data-container-description > * { position: relative; }
.u-modal .u-workflow-detail-list > *:nth-child(-n+24),
.u-modal .u-tbl tbody tr:nth-child(-n+24),
.u-modal .data-container-description > *:nth-child(-n+24) { z-index: 24; }
.u-modal .u-workflow-detail-list > *:nth-child(n+2),
.u-modal .u-tbl tbody tr:nth-child(n+2),
.u-modal .data-container-description > *:nth-child(n+2) { z-index: 23; }
.u-modal .u-workflow-detail-list > *:nth-child(n+3),
.u-modal .u-tbl tbody tr:nth-child(n+3),
.u-modal .data-container-description > *:nth-child(n+3) { z-index: 22; }
.u-modal .u-workflow-detail-list > *:nth-child(n+4),
.u-modal .u-tbl tbody tr:nth-child(n+4),
.u-modal .data-container-description > *:nth-child(n+4) { z-index: 21; }
.u-modal .u-workflow-detail-list > *:nth-child(n+5),
.u-modal .u-tbl tbody tr:nth-child(n+5),
.u-modal .data-container-description > *:nth-child(n+5) { z-index: 20; }
.u-modal .u-workflow-detail-list > *:nth-child(n+6),
.u-modal .u-tbl tbody tr:nth-child(n+6),
.u-modal .data-container-description > *:nth-child(n+6) { z-index: 19; }
.u-modal .u-workflow-detail-list > *:nth-child(n+7),
.u-modal .u-tbl tbody tr:nth-child(n+7),
.u-modal .data-container-description > *:nth-child(n+7) { z-index: 18; }
.u-modal .u-workflow-detail-list > *:nth-child(n+8),
.u-modal .u-tbl tbody tr:nth-child(n+8),
.u-modal .data-container-description > *:nth-child(n+8) { z-index: 17; }
.u-modal .u-workflow-detail-list > *:nth-child(n+9),
.u-modal .u-tbl tbody tr:nth-child(n+9),
.u-modal .data-container-description > *:nth-child(n+9) { z-index: 16; }
.u-modal .u-workflow-detail-list > *:nth-child(n+10),
.u-modal .u-tbl tbody tr:nth-child(n+10),
.u-modal .data-container-description > *:nth-child(n+10) { z-index: 15; }
.u-modal .u-workflow-detail-list > *:nth-child(n+11),
.u-modal .u-tbl tbody tr:nth-child(n+11),
.u-modal .data-container-description > *:nth-child(n+11) { z-index: 14; }
.u-modal .u-workflow-detail-list > *:nth-child(n+12),
.u-modal .u-tbl tbody tr:nth-child(n+12),
.u-modal .data-container-description > *:nth-child(n+12) { z-index: 13; }
.u-modal .u-workflow-detail-list > *:nth-child(n+13),
.u-modal .u-tbl tbody tr:nth-child(n+13),
.u-modal .data-container-description > *:nth-child(n+13) { z-index: 12; }
.u-modal .u-workflow-detail-list > *:nth-child(n+14),
.u-modal .u-tbl tbody tr:nth-child(n+14),
.u-modal .data-container-description > *:nth-child(n+14) { z-index: 11; }
.u-modal .u-workflow-detail-list > *:nth-child(n+15),
.u-modal .u-tbl tbody tr:nth-child(n+15),
.u-modal .data-container-description > *:nth-child(n+15) { z-index: 10; }
/* the panel itself above its own row's siblings */
.u-modal .hided-select-options,
.u-modal .workers-list,
.u-modal .status-select-options-container { z-index: 40 !important; }

/* -- the changes-requested banner --------------------------------------------
   One banner, one colour. The detail section used a grey --bb-inset fill, which
   put a third colour inside an amber block; it is a band of the same banner now,
   marked off by a hairline in the banner's own tone so it works on both skins.
   Button pairs get their spacing from the row rather than an mr-3 on one child. */
#u-customer-modal .changes-requested-header-buttons { gap: var(--bb-sp-2); flex: 0 0 auto; }
#u-customer-modal .changes-requested-details .quote-change-note__text,
#u-customer-modal .changes-requested-details .quote-change-note__item-title,
#u-customer-modal .changes-requested-details .quote-change-note__section-title { color: var(--bb-text) !important; }
#u-customer-modal .changes-requested-details .quote-change-note__section {
    border-top: 1px solid color-mix(in srgb, var(--bb-amber) 35%, transparent);
}

/* -- action-row order: status first, Logs last (owner picked option B) --------
   Done with flex `order`, not by moving markup, so no JS hook and no DOM-order
   assumption is disturbed. Everything unlisted keeps the middle band, so views
   that gain or lose a button still land in the right place.
   The status gets a hairline after it, separating "what this record is" from
   "what you can do to it". */
#u-customer-modal .u-workflow-panel .u-workflow-actions,
#u-customer-modal .u-workflow-panel .u-workflow-heading > .d-flex,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex,
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex { align-items: center; }
#u-customer-modal .u-workflow-panel .u-workflow-actions > *,
#u-customer-modal .u-workflow-panel .u-workflow-heading > .d-flex > *,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex > *,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex > *,
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex > * { order: 2; }
#u-customer-modal .u-workflow-panel .u-workflow-actions > .status-select,
#u-customer-modal .u-workflow-panel .u-workflow-heading > .d-flex > .status-select,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex > .status-select,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex > .status-select,
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex > .status-select {
    order: 1;
    position: relative;
    /* !important: a legacy rule zeroes the margin on these toolbar children, and
       without the extra room the hairline below lands under the next button */
    margin-right: var(--bb-sp-4) !important;
}
/* the hairline lives in the gap AFTER the status, so it separates "what this
   record is" from "what you can do to it" without touching the pill's own box */
#u-customer-modal .u-workflow-panel .u-workflow-actions > .status-select::after,
#u-customer-modal .u-workflow-panel .u-workflow-heading > .d-flex > .status-select::after,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex > .status-select::after,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex > .status-select::after,
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex > .status-select::after {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    right: calc(-1 * var(--bb-sp-4) / 2);
    width: 1px;
    background: var(--bb-border);
}
#u-customer-modal .u-workflow-panel .u-workflow-actions > .entity-logs-btn,
#u-customer-modal .u-workflow-panel .u-workflow-heading > .d-flex > .entity-logs-btn,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex > .entity-logs-btn,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex > .entity-logs-btn,
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex > .entity-logs-btn { order: 3; margin-left: 0 !important; }

/* -- no legacy paint left on these buttons -----------------------------------
   `.static` is a marketing-page class that hard-sets color:#1a1a1a, and
   Bootstrap's `.btn:hover { color:#212529 }` repaints any label on hover. Both
   were riding along on these toolbars, which is why some labels shifted colour
   on hover for no reason. The classes are stripped from the markup; these rules
   are the belt-and-braces so a stray one can never repaint a library button.
   (.static is left alone on detail-row VALUES — universal-modal.js selects it.) */
#u-customer-modal .bb-btn.static,
#u-customer-modal .bb-btn.btn,
#u-customer-modal .bb-btn.static:hover,
#u-customer-modal .bb-btn.btn:hover { text-decoration: none; }

/* A .bb-btn rendered as an <a> — Create task is one — also inherits Bootstrap's
   `a:hover { color:#0056b3 }` and `a:hover:not(.btn) { color:#000 }`. Those have
   nothing to do with the button contract, so each variant restates its own ink
   for the link case. Without this a link-button changes colour on hover purely
   because of the tag it happens to use. */
#u-customer-modal a.bb-btn:hover { text-decoration: none !important; }
#u-customer-modal a.bb-btn--secondary,
#u-customer-modal a.bb-btn--secondary:hover,
#u-customer-modal a.bb-btn--secondary:hover * { color: var(--bb-primary) !important; }
#u-customer-modal a.bb-btn--ghost,
#u-customer-modal a.bb-btn--ghost:hover,
#u-customer-modal a.bb-btn--ghost:hover * { color: var(--bb-primary) !important; }
#u-customer-modal a.bb-btn--primary,
#u-customer-modal a.bb-btn--primary:hover,
#u-customer-modal a.bb-btn--primary:hover * { color: var(--bb-on-primary) !important; }
#u-customer-modal a.bb-btn--danger,
#u-customer-modal a.bb-btn--danger:hover,
#u-customer-modal a.bb-btn--danger:hover * { color: var(--bb-danger) !important; }

/* The workflow action row deliberately paints its outlined buttons with --bb-text
   rather than the variant's red. That override only covered the REST state, so
   hover fell back to whatever else matched — which is how one button could shift
   ink on hover while the button beside it did not. Rest and hover now say the
   same thing, and the <a> case is included so Create task behaves exactly like
   the <div> buttons either side of it. */
#u-customer-modal .u-workflow-actions .bb-btn--secondary,
#u-customer-modal .u-workflow-actions .bb-btn--secondary:hover,
#u-customer-modal .u-workflow-actions .bb-btn--secondary:hover *,
#u-customer-modal .u-workflow-actions a.bb-btn--secondary,
#u-customer-modal .u-workflow-actions a.bb-btn--secondary:hover,
#u-customer-modal .u-workflow-actions a.bb-btn--secondary:hover * { color: var(--bb-text) !important; }
#u-customer-modal .u-workflow-actions .bb-btn--ghost,
#u-customer-modal .u-workflow-actions .bb-btn--ghost:hover,
#u-customer-modal .u-workflow-actions .bb-btn--ghost:hover * { color: var(--bb-text-2) !important; }

/* Logs is pinned on the BUTTON, not on the row, because only Estimate and
   Invoice wear .u-workflow-actions — Request, Visit, Job, Appointment,
   Appointment-subscription and Payment put the very same button in a plain
   d-flex. Measured: on those six the library's `.bb-btn--ghost:hover` won and
   Logs turned --bb-primary, while the identical button stayed --bb-text-2 two
   steps away. Governing the row would have dragged the status-first / Logs-last
   ordering onto two CARD HEADERS that have no status pill, so the button is
   governed instead. Rest and hover state the same value; the descendant
   selector covers the icon span. */
#u-customer-modal .entity-logs-btn,
#u-customer-modal .entity-logs-btn:hover,
#u-customer-modal .entity-logs-btn:hover * { color: var(--bb-text-2) !important; }

/* -- the status pill in a workflow action row --------------------------------
   It only becomes an interactive dropdown when the view adds `.select` (quotes
   do that for two statuses only). Read-only, it was still drawn as a bordered
   pill — a control that does nothing — and 30px tall against 36px buttons.
   Now: stretch to the row so it always matches its neighbours, and when it is
   NOT a control it reads as a chip rather than a button. */
#u-customer-modal .u-workflow-panel .status-select { align-self: stretch; min-height: 32px; }
#u-customer-modal .u-workflow-panel .status-select.select { cursor: pointer; }
#u-customer-modal .u-workflow-panel .status-select:not(.select),
/* read-only means read-only: it inherited .btn-nd:hover and lit up like a control */
#u-customer-modal .u-workflow-panel .status-select:not(.select):hover,
#u-customer-modal .u-workflow-panel .status-select:not(.select):hover * {
    background: var(--bb-inset) !important;
    border-color: transparent !important;
    color: var(--bb-text-2) !important;
    cursor: default;
}

/* -- the record rail's status must not truncate ------------------------------
   Legacy .schedule-status is nowrap + overflow:hidden + text-overflow:ellipsis
   with a 90px min-width, so inside the narrow rail card a longer status came out
   as "Chang…". It wraps instead — the card is the right place to grow. */
#u-customer-modal .u-workflow-panel .schedule-container .schedule-status {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-align: left;
    /* take the room the card has spare instead of sitting at a fixed 97px while
       80px of the card went unused */
    flex: 1 1 auto;
    height: auto;
}
/* the inner label carried its own overflow:hidden + ellipsis, so it clipped at
   47px even once the pill was free to grow */
#u-customer-modal .u-workflow-panel .schedule-container .schedule-status .name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    min-width: 0;
}
#u-customer-modal .u-workflow-detail-list .job-description-row {
    min-height: 48px;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bb-border) !important;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    align-items: stretch;
}
#u-customer-modal .u-workflow-detail-list .job-description-row:nth-child(odd) { background: var(--bb-zebra) !important; }
#u-customer-modal .u-workflow-detail-list .job-description-row:last-child { border-bottom: 0 !important; }
#u-customer-modal .u-workflow-detail-list .job-description-row-name {
    flex: 0 0 clamp(118px, 23%, 168px);
    display: flex;
    align-items: center;
    padding: 11px 14px;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    border-right: 1px solid var(--bb-border);
}
#u-customer-modal .u-workflow-detail-list .job-description-row-value {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 11px 14px;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m);
}
/* the side panel's labels ("Workers Comments", "Images / Files") were outside
   this rule, so they kept a hardcoded ink and went near-invisible on espresso */
#u-customer-modal .u-workflow-detail-card .base-label,
#u-customer-modal .u-workflow-side .base-label,
#u-customer-modal .u-workflow-files .base-label { color: var(--bb-text-2) !important; }
#u-customer-modal .u-workflow-detail-card .base-input {
    background: var(--bb-inset) !important;
    border-color: var(--bb-border-input) !important;
    color: var(--bb-text) !important;
}

/* The right-hand panel of a single-record view (Job today; Request next) is ONE wrapper
   holding worker comments and the attachments, exactly like the appointment side panel —
   rather than loose blocks floating beside the card. (owner 2026-07-25) */
#u-customer-modal .u-workflow-side.bb-card {
    padding: var(--bb-sp-4);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
}
#u-customer-modal .u-workflow-side .documet-block {
    border: 0;
    border-top: 1px solid var(--bb-border);
}
/* A drop zone that is not usable yet reads as muted, not as a broken pink fill. */
#u-customer-modal .u-upload.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Estimate / Invoice tables retain their server-side rendering and JS hooks,
   but their shell is the same .bb-tbl-shell used by all app tables. */
#u-customer-modal .u-workflow-table-shell { margin: 0; border-color: var(--bb-border); }
#u-customer-modal .u-workflow-table { color: var(--bb-text); background: var(--bb-surface); }
#u-customer-modal .u-workflow-table thead th {
    height: 46px;
    padding: 0 var(--bb-sp-3);
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    border-color: var(--bb-border) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
}
#u-customer-modal .u-workflow-table tbody tr { background: var(--bb-surface) !important; }
#u-customer-modal .u-workflow-table tbody tr:nth-child(odd) { background: var(--bb-zebra) !important; }
#u-customer-modal .u-workflow-table td {
    padding: 13px 12px;
    color: var(--bb-text) !important;
    border-color: var(--bb-border) !important;
    vertical-align: top;
}
#u-customer-modal .u-workflow-heading { gap: var(--bb-sp-3); flex-wrap: wrap; }
#u-customer-modal .u-workflow-actions { align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
#u-customer-modal .u-workflow-actions > * { margin: 0 !important; }
#u-customer-modal .u-workflow-actions .bb-btn--secondary,
#u-customer-modal .u-workflow-actions .bb-btn--secondary > * { color: var(--bb-text) !important; }
#u-customer-modal .u-workflow-actions .status-select { flex: 0 0 auto; }
#u-customer-modal .u-workflow-panel .info-tile .header,
#u-customer-modal .u-workflow-panel .entity-description-header { color: var(--bb-text-3) !important; }
#u-customer-modal .u-workflow-panel .info-tile .value,
#u-customer-modal .u-workflow-panel .entity-description-text { color: var(--bb-text) !important; }

@media (max-width: 768px) {
    #u-customer-modal .u-workflow-panel .left-large-container,
    #u-customer-modal .u-workflow-panel .right-small-container { min-height: auto; }
    #u-customer-modal .u-workflow-panel .u-workflow-main { margin-top: var(--bb-sp-3); }
    #u-customer-modal .u-workflow-detail-card { padding: var(--bb-sp-3); }
    #u-customer-modal .u-workflow-detail-list .job-description-row { flex-direction: column; }
    #u-customer-modal .u-workflow-detail-list .job-description-row-name { flex-basis: auto; padding-bottom: 3px; border-right: 0; }
    #u-customer-modal .u-workflow-detail-list .job-description-row-value { padding-top: 3px; }
    #u-customer-modal .u-workflow-empty-state { min-height: 230px; }
}
/* 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; }
/* Sidebar warning badge — attach it to the main icon's upper-right corner, using
   the same anchor as the plan-lock badge. The small surface backing keeps the
   alert ring legible over every line icon in both Porcelain and Espresso. */
.side-nav-container ul.navbar-nav > li .warning-icon {
    left: 10px !important;
    right: auto !important;
    top: -4px !important;
    z-index: 2;
    width: 14px;
    height: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: 50%;
    background: var(--bb-surface);
    box-shadow: 0 0 0 1px var(--bb-surface);
}
.side-nav-container ul.navbar-nav > li .warning-icon .icon {
    width: 12px;
    height: 12px !important;
}
.side-nav-container ul.navbar-nav > li .warning-icon .icon svg {
    width: 12px !important;
    height: 12px !important;
}
.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; }
.sidebar-rail-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 {
        pointer-events: none;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li {
        position: relative;
        pointer-events: auto;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) {
        width: 41px;
        max-width: 41px;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > a,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > .dropdown-section {
        width: 100% !important;
        max-width: 100%;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > .sidebar-rail-tooltip {
        display: block;
        position: absolute;
        z-index: 20;
        top: 50%;
        left: calc(100% + var(--bb-sp-3));
        width: max-content;
        max-width: 215px;
        overflow: hidden;
        color: var(--bb-text-2) !important;
        font-size: var(--bb-fs-s);
        font-weight: var(--bb-fw-medium);
        line-height: 1.3;
        opacity: 0;
        text-overflow: ellipsis;
        transform: translate(6px, -50%);
        transition:
            opacity 140ms ease,
            transform 220ms cubic-bezier(.2, .8, .2, 1),
            visibility 0s linear 180ms;
        visibility: hidden;
        white-space: nowrap;
        pointer-events: none;
    }
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > a:hover ~ .sidebar-rail-tooltip,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > a:focus-visible ~ .sidebar-rail-tooltip,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > .dropdown-section:hover ~ .sidebar-rail-tooltip,
    .navbar-vertical-left:not(.opened) .side-nav-container ul.navbar-nav > li:not(.locked):not(.visible) > .dropdown-section:focus-within ~ .sidebar-rail-tooltip {
        opacity: .72;
        transform: translate(0, -50%);
        transition-delay: 90ms, 90ms, 0s;
        visibility: visible;
    }
    .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);
        /* The flyout is a descendant of the upgrade anchor. It must own its visible
           hitbox so hovering beyond the collapsed row keeps li:hover active instead
           of falling through to the page and dismissing the flyout. */
        pointer-events: auto;
    }
    .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 {
    /* the Jobs pipeline shares the dashboard Jobs-card briefcase (owner 2026-07-23:
       "reuse suitcase from the jobs card") — was the legacy hammer /images/jobs-flow.svg,
       which read as a solid mallet silhouette next to the outline nav set. */
    -webkit-mask-image: url("/images/jobs-briefcase.svg") !important;
    mask-image: url("/images/jobs-briefcase.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). ---- */
/* font-size/color declared for the same reason .bb-check declares them: the switch is a <label>,
   and legacy `label { color:#212529 }` otherwise wins over inheritance — the caption next to a
   switch rendered near-black on the espresso surface (found on the service editor 2026-07-25). */
.bb-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; vertical-align: middle; font-size: var(--bb-fs-m); color: var(--bb-text); line-height: 1.3; }
.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); }
/* The legacy dashboard draws this separator from an ID selector
   (#dashboard .get-start-steps .steps-container .step-row), which outranks every
   class rule here. So "no line on the last row", "no line under the highlighted
   next step" and the divider all lost silently, and the list rendered a second
   line hard against the card edge and above "Try it out". Stated loudly enough
   to win, in one place. */
.bb .gs-list .gs-row:last-child,
.bb .gs-list .gs-row.is-pre-divider { border-bottom: 0 !important; }
.bb .gs-list .gs-row.is-next { border-bottom-color: transparent !important; }
.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; }
/* --- Getting Started: the states the list gained when it moved onto
   App\Services\Dashboard\SetupChecklist ------------------------------------ */
/* what is actually stopping them right now — required_settings closes pages on
   missing working hours and only ever said "please fill out settings" */
.bb .gs-blocker { display: flex; align-items: flex-start; gap: 10px; margin: 14px 24px 0; padding: 11px 14px;
  background: var(--bb-amber-bg); border-radius: var(--bb-radius-m); font-size: var(--bb-fs-s); color: var(--bb-text); }
.bb .gs-blocker svg { flex: none; margin-top: 2px; color: var(--bb-amber); }
.bb .gs-blocker b { font-weight: var(--bb-fw-semibold); }
.bb .gs-blocker a { color: var(--bb-amber); font-weight: var(--bb-fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
/* practice ("make your first call") is something you DO, not something you
   configure — it sits below its own divider and never counts toward the meter */
.bb .gs-divider { display: flex; align-items: center; gap: 12px; padding: 18px 0 6px; color: var(--bb-text-3);
  font-size: var(--bb-fs-s); font-weight: var(--bb-fw-semibold); text-transform: uppercase; letter-spacing: .5px; }
.bb .gs-divider:after { content: ""; flex: 1; height: 1px; background: var(--bb-border); }
.bb .gs-row.is-practice .tx b { font-weight: var(--bb-fw-medium); }
/* exactly one row is the next thing to do, so the list never asks "where do I start" */
.bb .gs-row.is-next { background: var(--bb-primary-soft); border-radius: var(--bb-radius-m);
  padding-left: 12px; padding-right: 12px; border-bottom-color: transparent; }
/* a step the plan does not include is said out loud, not silently dropped */
.bb .gs-row.is-locked .tx b, .bb .gs-row.is-locked .tx p { color: var(--bb-text-3); }
.bb .gs-row .gs-tag { margin-left: 6px; vertical-align: middle; }
/* finished work gets a quiet link back to it; unfinished work gets a button */
.bb .gs-row .bb-btn.gs-quiet { min-width: 0; border-color: transparent; background: transparent; color: var(--bb-primary); }
.bb .gs-row .bb-btn.gs-quiet:hover { text-decoration: underline; background: transparent; }
.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-head-icon { flex: 0 0 18px; color: var(--bb-text-2); }
.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; }
/* the divider lives on the inner <a> ONLY (rules above, :last-child aware). The
   legacy .bar-links-row DIV also carried a full-width border-bottom sitting ~13px
   lower — so under each row two separators stacked (inset 272px <a> line + full
   284px div line, ~13px apart with empty space between), plus an orphan div line
   below the last row whose <a> border is intentionally none. Kill the div border;
   the <a> is the single source of the separator. (owner 2026-07-23)
   The div ALSO carries legacy `padding: 12px 6px`, which stacked on top of the <a>'s
   own 11px — 46px of padding around 20px of text, so each row was 67px tall and read
   as a big empty band under "Last 7 days". The <a> owns the row rhythm, so drop the
   div's VERTICAL padding only (keep the 6px sides): rows 67px -> 43px. (owner 2026-07-24) */
.bb .bar-links-row {
    border-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bb .bar-links-row a:hover, .bb .bar-links-row a:hover .link-text { color: var(--bb-primary); }
.bb .bar-links-row .link-icon { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--bb-text-3); }
#dashboard.bb .dashboard-bar-container .bar-links-row .link-icon { height: 20px; }
.bb .bar-links-row .link-icon--danger { color: var(--bb-danger-bright); }
.bb .bar-links-row .link-icon--success { color: var(--bb-success-bright); }
.bb .bar-links-row .link-icon--muted { color: var(--bb-text-3); }
.bb .bar-links-row .link-arrow { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: var(--bb-text-3); }
.bb .bar-links-row a:hover .link-arrow { color: var(--bb-primary); }
/* 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; }
/* Stafter headers already own an inner wrapper with the canonical 12px gutter.
   Remove the legacy outer TH padding so headers and body cells share one gutter. */
.ds-table .stafter-table-head-column,
.ds-table .stafter-table-head-column-checkbox { padding: 0 !important; }
.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: var(--bb-on-primary) !important; font-weight: var(--bb-button-font-weight) !important;
    box-shadow: none !important; min-height: var(--bb-button-height) !important; padding: 0 var(--bb-button-padding-x) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bb-button-gap) !important; line-height: 1 !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) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-button-gap) !important;
    min-height: var(--bb-button-height) !important;
    padding: 0 var(--bb-button-padding-x) !important;
    border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-button-radius) !important;
    background-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    font-family: var(--bb-font) !important;
    font-size: var(--bb-button-font-size) !important;
    font-weight: var(--bb-button-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
body:has(.ds-dashboard, .ds-table, .ds-settings, .ds-cockpit, .ds-modals) .main-content .btn.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--bb-primary-hover) !important;
    border-color: var(--bb-primary-hover) !important;
    color: var(--bb-on-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 { border-color: var(--bb-border) !important; }
/* (.bar-links-row's legacy div border-bottom is now removed entirely near the KPI
   separators, so it no longer needs recolouring here.) */
.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 !important; }
.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) !important; }
    .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-button-radius) !important; color: var(--bb-on-primary) !important; font-weight: var(--bb-button-font-weight) !important; box-shadow: none !important; min-height: var(--bb-button-height) !important; padding: 0 var(--bb-button-padding-x) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bb-button-gap) !important; line-height: 1 !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: var(--bb-on-primary) !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 -- */
/* 48px right: a folded oversize title must stop before the absolutely-positioned close X. */
.u-modal .u-modal-head { padding: 22px 48px 14px 26px !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; overflow-wrap: anywhere; }
/* The customer modal titles with the raw name; an unbroken 100+ char name must
   fold before the close X instead of running under it (computed-style verified). */
.u-modal .customer-name-container { overflow-wrap: anywhere; padding-right: 40px; }
.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; }
.u-modal .u-modal-detail-head { align-items: center; gap: 12px; min-height: 40px; }
.u-modal .u-modal-actions { align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.u-modal .u-modal-actions > .bb-btn { margin: 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%; }
.u-modal .u-permission-action { flex: 0 0 auto; margin-left: 12px; white-space: nowrap; }

/* -- 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; }

/* -- attachments: each uploaded file stays a compact row. Preview is a separate,
      contained standard modal — an image must never expand the entity modal. -- */
.u-modal .u-file-list { display: grid; gap: 8px; }
.u-modal .u-file-row { border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-m) !important; background: var(--bb-surface) !important; box-shadow: none !important; column-gap: 12px; padding: 10px 12px !important; min-width: 0; }
.u-modal .u-file-row .u-file-thumb, .u-modal .u-file-row .doc { display: block; flex: 0 0 48px; width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-s) !important; object-fit: cover !important; overflow: hidden; }
.u-modal .u-file-row .file-text { min-width: 0; }
.u-modal .u-file-row .file-name { margin-bottom: 3px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-modal .u-file-row .file-description { color: var(--bb-text-3) !important; gap: 8px; }
.u-modal .u-file-actions { align-items: center; flex: 0 0 auto; gap: 6px; }
.u-modal .u-file-row .delete-file-btn { align-self: center; padding: 8px; }

.u-preview-modal .modal-dialog { width: min(960px, calc(100vw - 32px)) !important; max-width: 960px !important; margin: 32px auto !important; }
.u-preview-modal .modal-content { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; border-radius: var(--bb-radius-l) !important; color: var(--bb-text) !important; overflow: hidden; }
.u-preview-modal .modal-header { align-items: center; background: var(--bb-surface) !important; border-bottom: 1px solid var(--bb-border) !important; color: var(--bb-text) !important; padding: 16px 20px !important; }
.u-preview-modal .modal-body { align-items: center; background: var(--bb-inset) !important; display: flex; justify-content: center; max-height: calc(100vh - 170px); min-height: 180px; overflow: auto; padding: 20px !important; }
.u-preview-modal #preview-image { display: block; width: auto !important; max-width: 100% !important; height: auto !important; max-height: calc(100vh - 220px) !important; margin: auto; 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; }

@media (max-width: 767px) {
  .u-modal .u-modal-head { padding: 18px 58px 12px 18px !important; }
  .u-modal .u-modal-detail-head { align-items: flex-start; flex-direction: column; }
  .u-modal .u-modal-actions { justify-content: flex-start; }
  .u-modal .u-permission-action { margin-left: 8px; }
  .u-modal .u-file-row { align-items: flex-start !important; }
  .u-modal .u-file-actions { margin-top: 8px; }
  .u-preview-modal .modal-dialog { width: calc(100vw - 20px) !important; margin: 10px auto !important; }
  .u-preview-modal .modal-body { max-height: calc(100vh - 126px); padding: 12px !important; }
  .u-preview-modal #preview-image { max-height: calc(100vh - 160px) !important; }
}


/* ============================================================================
   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: var(--bb-sp-3); margin-top: var(--bb-sp-3); 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; }
#u-customer-modal .customer-info-container .bb-contact-pill__icon {
    display: inline-grid;
    flex: 0 0 24px;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bb-surface);
    color: var(--bb-primary);
}
/* ---- 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; }

/* Refined dashboard comparison modal: shared button tabs, stronger hierarchy,
   and an intentionally high-contrast table in both Porcelain and Espresso. */
#difference_modal .modal-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-width: 1180px;
}
#difference_modal .modal-content {
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
#difference_modal .modal-header { min-height: 44px; padding: 10px 14px 0 !important; }
#difference_modal .modal-body { padding: 0 28px 28px !important; overflow-y: auto; }
#difference_modal #add-title { margin-top: 4px; color: var(--bb-text-2) !important; }
#difference_modal .difference-tabs {
    width: max-content;
    max-width: 100%;
    margin: 20px 0 18px;
    padding: 4px !important;
    gap: 4px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
}
#difference_modal .difference-tabs .bb-tab {
    min-height: 36px;
    padding: 8px 14px;
    border-color: transparent;
    background: transparent;
    color: var(--bb-text-2) !important;
}
#difference_modal .difference-tabs .bb-tab:hover {
    border-color: var(--bb-border-strong);
    background: var(--bb-surface);
    color: var(--bb-text) !important;
}
#difference_modal .difference-tabs .bb-tab.active-switcher-button {
    border-color: var(--bb-primary);
    background: var(--bb-primary);
    color: var(--bb-on-primary) !important;
    box-shadow: var(--bb-shadow-1);
}
#difference_modal .difference-table-wrap {
    overflow: auto;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
}
#difference_modal .difference-compare-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    table-layout: fixed;
    font-size: var(--bb-fs-m);
    line-height: 1.42;
}
#difference_modal .difference-compare-table th,
#difference_modal .difference-compare-table td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-right: 1px solid var(--bb-border) !important;
    border-bottom: 1px solid var(--bb-border) !important;
}
#difference_modal .difference-compare-table tr > :last-child { border-right: 0 !important; }
#difference_modal .difference-compare-table tbody tr:last-child > td { border-bottom: 0 !important; }
#difference_modal .difference-compare-table thead th {
    height: 64px;
    vertical-align: middle;
    background: var(--bb-inset) !important;
    color: var(--bb-text) !important;
}
#difference_modal .difference-compare-table thead th:first-child {
    width: 30%;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    letter-spacing: .04em;

    text-transform: uppercase;
}
#difference_modal .difference-compare-table thead th:not(:first-child) { width: 35%; }
#difference_modal .difference-compare-table tbody td { background: var(--bb-surface) !important; color: var(--bb-text) !important; }
#difference_modal .difference-compare-table tbody td:first-child {
    background: var(--bb-inset) !important;
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
}
#difference_modal .difference-compare-table tbody tr:nth-child(4n) > td:not(:first-child) { background: var(--bb-zebra) !important; }
#difference_modal .difference-compare-table tbody tr:hover > td:not(:first-child) { background: var(--bb-row-hover) !important; }
#difference_modal .difference-compare-table td span,
#difference_modal .difference-compare-table td p,
#difference_modal .difference-compare-table td li { color: var(--bb-text) !important; }
#difference_modal .difference-compare-table td p { line-height: 1.45; }
#difference_modal .difference-compare-table td img { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    #difference_modal .modal-dialog { width: 100%; margin: 0; }
    #difference_modal .modal-content { min-height: 100vh; max-height: 100vh; border-radius: 0 !important; }
    #difference_modal .modal-body { padding: 0 16px 24px !important; }
    #difference_modal .difference-tabs { width: 100%; }
    #difference_modal .difference-tabs .bb-tab { flex: 1 1 0; justify-content: center; }
    #difference_modal .difference-compare-table { min-width: 0; }
    #difference_modal .difference-compare-table thead th { width: 50% !important; }
    #difference_modal .difference-compare-table tbody tr > td.d-sm-none {
        background: var(--bb-inset) !important;
        color: var(--bb-text) !important;
        font-weight: var(--bb-fw-semibold);
    }
}

/* ---- 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; }
#u-customer-modal .stafter-table-head-column {
    padding: 10px 12px !important;
}
#u-customer-modal .stafter-table .stafter-table-body-column {
    padding: 0 !important;
    vertical-align: middle !important;
}
#u-customer-modal .stafter-table-body-column > div {
    min-height: 0 !important;
    padding: 10px 12px !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: var(--bb-primary-soft) !important; filter: brightness(.96); }
/* ---- 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; }

/* --------------------------------------------------------------------------
   UNIVERSAL WORKFLOW COMPLETION PASS

   Every record stage must use the same component surface.  The legacy workflow
   has several semantically identical detail/table/file implementations.  These
   rules deliberately bridge their stable JS hooks to the documented universal
   detail list, table and attachment shapes.  No selector here relies on a skin
   colour: Porcelain and Espresso both resolve through the shared tokens.
   -------------------------------------------------------------------------- */
#u-customer-modal .request-info,
#u-customer-modal .job-info,
#u-customer-modal .visit-workflow-panel,
#u-customer-modal .u-workflow-panel,
#u-customer-modal .customer-details {
    color: var(--bb-text) !important;
}

/* Request was the one detail family outside .data-container-description, so
   legacy customer-individual-jobs.scss painted every row white in Espresso. */
#u-customer-modal .request-description {
    overflow: hidden;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    background: var(--bb-surface) !important;
}
#u-customer-modal .request-description-row {
    min-height: 48px;
    align-items: stretch !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bb-border) !important;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .request-description-row:nth-child(odd) { background: var(--bb-zebra) !important; }
#u-customer-modal .request-description-row:last-child { border-bottom: 0 !important; }
#u-customer-modal .request-description-row-name {
    flex: 0 0 clamp(118px, 23%, 168px);
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-right: 1px solid var(--bb-border) !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
}
#u-customer-modal .request-description-row-value {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 11px 14px;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m) !important;
}

/* Appointment, payment and subscription details share either a div detail list
   or a genuine legacy table.  Both now wear the same detail-table contract. */
#u-customer-modal .data-container-description.customer-details-table,
#u-customer-modal table.customer-details-table,
#u-customer-modal .request-description,
#u-customer-modal .quote-table,
#u-customer-modal .invoice-table,
#u-customer-modal .projects-table,
#u-customer-modal .appointments-universal-modal-table table,
#u-customer-modal .subscriptions-universal-modal-table table,
#u-customer-modal .overview-universal-modal-table table {
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    background: var(--bb-surface) !important;
    box-shadow: none !important;
    color: var(--bb-text) !important;
}
#u-customer-modal table.customer-details-table,
#u-customer-modal .quote-table,
#u-customer-modal .invoice-table,
#u-customer-modal .projects-table,
#u-customer-modal .appointments-universal-modal-table table,
#u-customer-modal .subscriptions-universal-modal-table table,
#u-customer-modal .overview-universal-modal-table table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
}
#u-customer-modal table.customer-details-table tr,
#u-customer-modal .quote-table tr,
#u-customer-modal .invoice-table tr,
#u-customer-modal .projects-table tr,
#u-customer-modal .appointments-universal-modal-table table tr,
#u-customer-modal .subscriptions-universal-modal-table table tr,
#u-customer-modal .overview-universal-modal-table table tr {
    background: var(--bb-surface) !important;
}
#u-customer-modal table.customer-details-table tr:nth-child(odd),
#u-customer-modal .quote-table tbody tr:nth-child(odd),
#u-customer-modal .invoice-table tbody tr:nth-child(odd),
#u-customer-modal .projects-table tbody tr:nth-child(odd),
#u-customer-modal .appointments-universal-modal-table tbody tr:nth-child(odd),
#u-customer-modal .subscriptions-universal-modal-table tbody tr:nth-child(odd),
#u-customer-modal .overview-universal-modal-table tbody tr:nth-child(odd) {
    background: var(--bb-zebra) !important;
}
#u-customer-modal table.customer-details-table th,
#u-customer-modal table.customer-details-table td,
#u-customer-modal .quote-table th,
#u-customer-modal .quote-table td,
#u-customer-modal .invoice-table th,
#u-customer-modal .invoice-table td,
#u-customer-modal .projects-table th,
#u-customer-modal .projects-table td,
#u-customer-modal .appointments-universal-modal-table th,
#u-customer-modal .appointments-universal-modal-table td,
#u-customer-modal .subscriptions-universal-modal-table th,
#u-customer-modal .subscriptions-universal-modal-table td,
#u-customer-modal .overview-universal-modal-table th,
#u-customer-modal .overview-universal-modal-table td {
    background: transparent !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal table.customer-details-table th,
#u-customer-modal .quote-table thead th,
#u-customer-modal .invoice-table thead th,
#u-customer-modal .projects-table thead th,
#u-customer-modal .appointments-universal-modal-table thead th,
#u-customer-modal .subscriptions-universal-modal-table thead th,
#u-customer-modal .overview-universal-modal-table thead th {
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
}
#u-customer-modal table.customer-details-table td,
#u-customer-modal .quote-table td,
#u-customer-modal .invoice-table td,
#u-customer-modal .projects-table td,
#u-customer-modal .appointments-universal-modal-table td,
#u-customer-modal .subscriptions-universal-modal-table td,
#u-customer-modal .overview-universal-modal-table td { padding: 12px 14px !important; }
#u-customer-modal .projects-table tr:hover > td,
#u-customer-modal .appointments-universal-modal-table tr:hover > td,
#u-customer-modal .subscriptions-universal-modal-table tr:hover > td,
#u-customer-modal .overview-universal-modal-table tr:hover > td { background: var(--bb-row-hover) !important; }

/* Native/select-like workflow controls cannot fall back to Bootstrap's white
   input treatment.  This includes payment/subscription status selectors. */
#u-customer-modal select.status-select,
#u-customer-modal .hided-select,
#u-customer-modal .hided-select .selected-value,
#u-customer-modal .workers-select,
#u-customer-modal .customer-input,
#u-customer-modal input.base-input,
#u-customer-modal textarea.base-input,
#u-customer-modal textarea.bb-standard-textarea {
    background: var(--bb-select-bg) !important;
    color: var(--bb-text) !important;
    -webkit-text-fill-color: var(--bb-text) !important;
    border-color: var(--bb-border-strong) !important;
    box-shadow: none !important;
}
#u-customer-modal select.status-select option { background: var(--bb-surface); color: var(--bb-text); }
#u-customer-modal .hided-select-options,
#u-customer-modal .workers-list { background: var(--bb-surface) !important; border: 1px solid var(--bb-border) !important; color: var(--bb-text) !important; box-shadow: var(--bb-shadow-2) !important; }
#u-customer-modal .hided-select-option,
#u-customer-modal .worker-row { color: var(--bb-text) !important; }
#u-customer-modal .hided-select-option:hover,
#u-customer-modal .worker-row:hover { background: var(--bb-row-hover) !important; }

/* Quote change-request markup still had inline white buttons and dark comments.
   Tokenise only that record surface, preserving its current interactions. */
#u-customer-modal .u-workflow-panel [style*="background-color: white"],
#u-customer-modal .u-workflow-panel [style*="background: white"] { background: var(--bb-surface) !important; }
#u-customer-modal .u-workflow-panel [style*="color: #333"],
#u-customer-modal .u-workflow-panel [style*="color: #555"],
#u-customer-modal .u-workflow-panel [style*="color:#50535B"] { color: var(--bb-text-2) !important; }
#u-customer-modal .alert,
#u-customer-modal .alert * { border-color: var(--bb-border) !important; }
#u-customer-modal .alert-danger { background: var(--bb-danger-bg) !important; color: var(--bb-danger) !important; }
#u-customer-modal .alert-success { background: var(--bb-success-bg) !important; color: var(--bb-success) !important; }
#u-customer-modal .alert-warning { background: var(--bb-amber-bg) !important; color: var(--bb-amber) !important; }
#u-customer-modal .alert-info { background: var(--bb-info-bg) !important; color: var(--bb-text) !important; }
#u-customer-modal .alert [style*="color"] { color: inherit !important; }
#u-customer-modal .bb-btn[style*="background-color: #E8F5E9"] { background: var(--bb-success-bg) !important; color: var(--bb-success) !important; border-color: var(--bb-success) !important; }

/* Failure is a state of the workflow, never a white page. */
#u-customer-modal .u-workflow-error {
    min-height: 360px;
    background: var(--bb-inset);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    color: var(--bb-text);
}
#u-customer-modal .u-workflow-error .text-danger { color: var(--bb-danger) !important; }
#u-customer-modal .u-workflow-error .text-muted { color: var(--bb-text-3) !important; }

/* One attachment row treatment across Request, Visit, Estimate, Job, Invoice,
   Appointment, Payment and subscriptions.  The preview is always contained. */
#u-customer-modal .files-container .file-row {
    gap: 12px;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .files-container .file-row:hover { background: var(--bb-row-hover) !important; }
#u-customer-modal .files-container .file-name { color: var(--bb-text) !important; font-weight: var(--bb-fw-medium) !important; }
#u-customer-modal .files-container .file-description,
#u-customer-modal .files-container .file-description > * { color: var(--bb-text-3) !important; }
#u-customer-modal .files-container .image-preview { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; object-fit: cover !important; border-radius: var(--bb-radius-s) !important; }
#u-customer-modal .files-container .file-row:not(.u-file-row) .doc { width: 34px !important; height: 34px !important; object-fit: contain !important; }
#u-customer-modal .files-container .delete-file-btn { color: var(--bb-danger) !important; }
#u-customer-modal .files-container .file-row .d-none.d-lg-flex,
#u-customer-modal .files-container .file-row .d-flex.d-lg-none {
    align-items: center;
    gap: var(--bb-sp-2);
    flex-wrap: wrap;
}
#u-customer-modal .files-container .file-row:not(.u-file-row) .change-file-visibility {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding-inline: 0 !important;
}
#u-customer-modal .files-container .file-row .download-btn,
#u-customer-modal .files-container .file-row .preview-file-btn {
    min-width: 86px;
}

/* Universal attachment action group polish: the legacy row renders adjacent
   div-buttons, so force the library spacing/radius at the action-group level. */
#u-customer-modal .files-container .file-row .d-none.d-lg-flex,
#u-customer-modal .files-container .file-row .d-flex.d-lg-none {
    gap: var(--bb-sp-2) !important;
}
#u-customer-modal .files-container .file-row .change-file-visibility,
#u-customer-modal .files-container .file-row .download-btn,
#u-customer-modal .files-container .file-row .preview-file-btn {
    margin: 0 !important;
    border-radius: var(--bb-radius-s) !important;
    line-height: 1 !important;
}

/* -- attachment row, library shape (.u-file-row) --------------------------
   The workflow steps used to hand-roll this row and render the action group
   TWICE (a mobile copy + a desktop copy), all of them filled primaries, with
   the delete as a bare 8px <img> floating outside the row. One group now, one
   quiet primary, and the two icon-only controls are proper square buttons.

   Deliberately NOT scoped to #u-customer-modal: the same partial renders in
   the legacy #customer-projects-modal (via the files_rows "show more" AJAX
   response), which has neither .u-modal nor that id. The two legacy rules
   above that would otherwise win carry :not(.u-file-row) so converted rows
   fall through to this block instead. */
.u-file-row {
    gap: var(--bb-sp-3);
    margin: 0 0 var(--bb-sp-2) !important;
    padding: 10px 12px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    background: var(--bb-surface) !important;
    box-shadow: none !important;
    color: var(--bb-text) !important;
    min-width: 0;
}
.u-file-row:hover { background: var(--bb-row-hover) !important; }
.u-file-row .image-preview,
.u-file-row .u-file-doc {
    flex: 0 0 48px;
    width: 48px !important; height: 48px !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s) !important;
    object-fit: cover !important;
    overflow: hidden;
}
.u-file-row .u-file-doc {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bb-inset) !important;
}
.u-file-row .u-file-doc .doc { width: 26px !important; height: 26px !important; object-fit: contain !important; border: 0 !important; }
.u-file-row .u-file-doc .extension {
    position: absolute; bottom: 2px; left: 0; right: 0;
    text-align: center; font-size: 9px; font-weight: var(--bb-fw-semibold);
    color: var(--bb-text-3);
}
.u-file-row .file-text { flex: 1 1 auto; min-width: 0; }
.u-file-row .file-name {
    margin: 0 0 3px !important;
    color: var(--bb-text) !important; font-weight: var(--bb-fw-medium) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.u-file-row .file-description,
.u-file-row .file-description > * { color: var(--bb-text-3) !important; }
.u-file-row .file-description { gap: 6px; margin: 0 !important; font-size: var(--bb-fs-s); }
.u-file-row .u-file-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--bb-sp-2) !important; }
.u-file-row .download-btn,
.u-file-row .preview-file-btn { min-width: 0 !important; margin: 0 !important; white-space: nowrap; }
.u-file-row .u-file-icon-btn {
    flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important;
    padding: 0 !important; justify-content: center;
}
.u-file-row .u-file-icon-btn--danger { color: var(--bb-text-3) !important; }
.u-file-row .u-file-icon-btn--danger:hover {
    color: var(--bb-danger) !important;
    background: var(--bb-danger-bg) !important;
    border-color: transparent !important;
}
@media (max-width: 991px) {
    .u-file-row { flex-wrap: wrap; }
    .u-file-row .file-text { flex: 1 1 60%; }
    .u-file-row .u-file-actions { flex: 1 1 100%; justify-content: flex-end; margin-top: var(--bb-sp-2); }
}

/* -- status pill: the icon was colliding with its own label ---------------
   .selected-value was a plain block, so the status icon and the word sat on
   top of each other and the icon clipped against the pill's left border. */
#u-customer-modal .status-select .selected-value {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; line-height: 1;
}
#u-customer-modal .status-select .selected-value > img,
#u-customer-modal .status-select .selected-value > .bb-icon { flex: 0 0 auto; }

/* -- action row: give the controls beside a title room to breathe ---------
   Visit and Request welded the status pill to the button next to it. Spacing
   belongs to the row, not to a margin class every view has to remember. */
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex,
#u-customer-modal .u-workflow-panel .stafter-modal-title > .d-flex { gap: var(--bb-sp-2); }
#u-customer-modal .u-workflow-panel .entity-info-container > .d-flex > .d-flex > *,
#u-customer-modal .u-workflow-panel .u-workflow-detail-card > .d-flex > .d-flex > * { margin-left: 0 !important; }

/* -- worker picker rows use the library checkbox --------------------------
   universal-modal.js drives selection by toggling .selected on the row, so the
   checked look hangs off that class rather than input:checked (the input is
   display:none and only ever updated through jQuery .attr). */
#u-customer-modal .worker-row.bb-check { padding: 8px 10px; border-radius: var(--bb-radius-s); gap: 9px; }
#u-customer-modal .worker-row.bb-check.selected .bb-check__box { background: var(--bb-primary); border-color: var(--bb-primary); }
#u-customer-modal .worker-row.bb-check.selected .bb-check__box::after { transform: rotate(45deg) scale(1); }

/* an empty comments panel says so instead of drawing a tall blank slab */
#u-customer-modal .u-workflow-empty-note {
    color: var(--bb-text-3); font-size: var(--bb-fs-s); padding: var(--bb-sp-2) 0;
}
/* The attachments column is a flex child, so by default it STRETCHED to match
   the details card beside it — on Request, where the card holds only a drop
   zone, that produced a half-page of empty white. The card hugs its content
   now, on every step. */
#u-customer-modal .u-workflow-panel .u-workflow-side.bb-card { align-self: flex-start; }

/* -- the same two panels, for entity modals outside #u-customer-modal --------
   Employee and Vehicle render the identical shape (details on the left,
   attachments on the right) but live in their own modals, so the workflow
   rules above never reached them and both columns sat loose on the page.
   These are the unscoped equivalents; any .u-modal can use them. */
.u-modal .u-panel-card,
.u-modal .u-panel-side {
    padding: var(--bb-sp-4);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
    min-width: 0;
}
.u-modal .u-panel-side { align-self: flex-start; }
.u-modal .u-panel-card .u-tbl,
.u-modal .u-panel-card .customer-details-table { margin-bottom: 0; }
/* .u-tbl has declared `border + border-radius + overflow:hidden` all along, and
   it never painted: legacy sets border-collapse:collapse on these tables, and a
   COLLAPSED table does not render border-radius at all. So Employee and Vehicle
   showed bare rows while Appointment — whose rows are divs, not a table — showed
   the frame. Separate borders plus rounded corner cells make it appear, giving
   the same bordered, rounded shape the workflow detail lists have. */
.u-modal .u-tbl { border-collapse: separate !important; border-spacing: 0 !important; }
.u-modal .u-tbl tr:first-child td:first-child { border-top-left-radius: calc(var(--bb-radius-m) - 1px); }
.u-modal .u-tbl tr:first-child td:last-child { border-top-right-radius: calc(var(--bb-radius-m) - 1px); }
.u-modal .u-tbl tr:last-child td:first-child { border-bottom-left-radius: calc(var(--bb-radius-m) - 1px); }
.u-modal .u-tbl tr:last-child td:last-child { border-bottom-right-radius: calc(var(--bb-radius-m) - 1px); }
/* the panel heading matches the workflow steps' "Job Details" row */
.u-modal .u-panel-card > .stafter-modal-title,
.u-modal .u-panel-side > .u-panel-title { margin-bottom: var(--bb-sp-3); }
.u-modal .u-panel-card > .stafter-modal-title > .d-flex { gap: var(--bb-sp-2); }
.u-modal .u-panel-card > .stafter-modal-title > .d-flex > * { margin-left: 0 !important; }
.u-modal .u-panel-title { color: var(--bb-text-2); font-size: var(--bb-fs-m); }
.u-modal .u-panel-empty { color: var(--bb-text-3); font-size: var(--bb-fs-s); }

/* the worker-comments well carried a hardcoded #f9fafb, so it stayed a bright
   white slab on espresso. Tokenized, it darkens with the skin. */
#u-customer-modal .u-workflow-side .content-container,
#u-customer-modal .u-workflow-files .content-container {
    background: var(--bb-inset) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s);
    color: var(--bb-text) !important;
    padding: var(--bb-sp-3);
}

@media (max-width: 768px) {
    #u-customer-modal .request-description-row { flex-direction: column; }
    #u-customer-modal .request-description-row-name { flex-basis: auto; padding-bottom: 3px; border-right: 0 !important; }
    #u-customer-modal .request-description-row-value { padding-top: 3px; }
    #u-customer-modal table.customer-details-table,
    #u-customer-modal .quote-table,
    #u-customer-modal .invoice-table { min-width: 620px; }
    #u-customer-modal .files-container .file-row { align-items: flex-start !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.
   ============================================================================ */
@media (max-width: 520px) {
    .modal.standard-modal .modal-dialog.medium-m {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: 31.25rem !important;
    }
}
.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;
}
/* Legacy appointment/estimate fields often carry a positioned .arrow.select label in
   addition to the component select chevron above. Keep one disclosure indicator. */
.modal.standard-modal .modal-body label.arrow.select {
    display: none !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: var(--bb-on-primary) !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; }
/* Small modals do not use the mid/large footer strip. If a legacy small modal
   still renders a footer for one action, make that action behave like the
   small-modal body action: no tinted band, full-width primary button. */
.modal.standard-modal .modal-dialog.small-m .modal-footer {
    background: transparent !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--bb-radius-l) var(--bb-radius-l) !important;
    padding: 0 var(--bb-sp-5) var(--bb-sp-5) !important;
    justify-content: stretch;
}
.modal.standard-modal .modal-dialog.small-m .modal-footer > .bb-btn,
.modal.standard-modal .modal-dialog.small-m .modal-footer > .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}
.modal.standard-modal .modal-dialog.small-m .modal-footer > .btn-primary {
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}
.modal.standard-modal .standard-modal__footer--split > .btn,
.modal.standard-modal .standard-modal__footer--split > .bb-btn {
    flex: 1 1 0;
    min-width: 0;
}
/* A lifecycle save/submit action in a split footer can report its result inline:
   the .bb-action-feedback card drops onto its own full-width row beneath the
   buttons, so the actions never shift when a success/error message appears. */
.modal.standard-modal .standard-modal__footer--split > .bb-action-feedback {
    flex: 1 1 100%;
    margin-top: 0;
}

@media (max-width: 520px) {
    .modal.standard-modal .standard-modal__footer--split {
        flex-direction: column;
        align-items: stretch;
    }
    .modal.standard-modal .standard-modal__footer--split > .btn,
    .modal.standard-modal .standard-modal__footer--split > .bb-btn {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    .modal.standard-modal .standard-modal__footer--split > .bb-action-feedback {
        width: 100%;
    }
}

/* Warning table badges remain compact visually while exposing a real pointer/touch target. */
button.bb-warning-indicator {
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    padding: 6px !important;
    border: 0;
    background: transparent;
    cursor: pointer !important;
    line-height: 1;
}
button.bb-warning-indicator .bb-warning-indicator__icon {
    display: block;
    pointer-events: none;
}
button.bb-warning-indicator.bb-warning-indicator--overlap {
    /* Includes the Stafter cell's 4px flex gap: 32 - 26 + 4 = 10px advance. */
    margin-left: -26px !important;
}

/* Warning detail modal — a standard medium modal composition. */
.modal.warning-modal { z-index: 300000; }
.modal.warning-modal .warning-modal__summary {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-3);
}
.modal.warning-modal .warning-modal__animation {
    flex: 0 0 auto;
    width: 88px;
    max-width: 28%;
    height: auto;
    display: block;
}
.modal.warning-modal .warning-modal__tone-icon { flex: 0 0 24px; margin-top: 2px; }
.modal.warning-modal .warning-modal__tone-icon--danger { color: var(--bb-danger); }
.modal.warning-modal .warning-modal__tone-icon--info { color: var(--bb-info); }
.modal.warning-modal .warning-modal__tone-icon--amber { color: var(--bb-amber); }
.modal.warning-modal .warning-modal__copy { min-width: 0; }
@media (max-width: 520px) {
    .modal.warning-modal .warning-modal__summary {
        flex-direction: column;
        align-items: stretch;
    }
    .modal.warning-modal .warning-modal__animation {
        width: 80px;
        max-width: 100%;
        margin-inline: auto;
    }
    .modal.warning-modal .warning-modal__copy {
        width: 100%;
    }
}
.modal.warning-modal .warning-modal__alert-title {
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
}
.modal.warning-modal .warning-description {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-body);
}
.modal.warning-modal .warning-modal__context {
    margin-top: var(--bb-sp-4);
    padding: var(--bb-sp-3) var(--bb-sp-4);
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-danger);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface-2);
}
.modal.warning-modal .warning-modal__context-heading {
    color: var(--bb-text);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
}
.modal.warning-modal .warning-modal__context-meta,
.modal.warning-modal .warning-modal__context-reason {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
    overflow-wrap: anywhere;
}
.modal.warning-modal .warning-modal__context-reason {
    color: var(--bb-text);
}
.modal.warning-modal .warning-solution {
    margin-top: var(--bb-sp-4);
    padding: var(--bb-sp-3) var(--bb-sp-4);
    border-left: 3px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
}
.modal.warning-modal .warning-block[data-warning_tone="danger"] .warning-solution { border-left-color: var(--bb-danger); }
.modal.warning-modal .warning-block[data-warning_tone="info"] .warning-solution { border-left-color: var(--bb-info); }
.modal.warning-modal .warning-block[data-warning_tone="amber"] .warning-solution { border-left-color: var(--bb-amber); }
.modal.warning-modal .warning-solution p { margin: 0; color: var(--bb-text-2); font-size: var(--bb-fs-m); line-height: var(--bb-lh-body); }
.modal.warning-modal .warning-paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-sp-2);
    margin-top: var(--bb-sp-4);
}
.modal.warning-modal .warning-paginator__button { min-width: 32px; padding: 0; }
.modal.warning-modal .warning-paginator__status {
    min-width: 42px;
    margin: 0;
    text-align: center;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
}
.modal.warning-modal .modal-footer > .bb-btn { padding-inline: var(--bb-sp-2); white-space: nowrap; }

/* ------------------------------------------------------------------------
   ACCESS & PERMISSIONS — standard-modal composition.
   The employee page still loads an old minified sheet with a fixed 870px
   content width and 50px form gap. These id-scoped rules intentionally retire
   those legacy values without changing the modal's established JS hooks.
   ------------------------------------------------------------------------ */
#modal_permissions.standard-modal .modal-dialog.large-m {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: 840px !important;
}
#modal_permissions.standard-modal .modal-content {
    width: 100% !important;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
#modal_permissions.standard-modal .modal-body {
    padding: 0 !important;
    max-height: min(70vh, 720px);
    overflow-y: auto;
}
#modal_permissions .bb-permissions { color: var(--bb-text); }
#modal_permissions .bb-permissions__intro {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: end;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-inset);
}
#modal_permissions .bb-permissions__position label {
    display: block;
    margin: 0 0 7px;
    color: var(--bb-text-2) !important;
}
#modal_permissions .bb-permissions__position select {
    width: 100%;
    height: 42px;
    margin: 0;
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-medium) !important;
}
#modal_permissions .bb-permissions__intro-copy {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}
#modal_permissions .bb-permissions__intro-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bb-radius-s);
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
}
#modal_permissions .bb-permissions__intro-copy strong,
#modal_permissions .bb-permissions__note strong {
    display: block;
    color: var(--bb-text);
    font-size: var(--bb-fs-m);
    font-weight: var(--bb-fw-semibold);
    line-height: 1.35;
}
#modal_permissions .bb-permissions__intro-copy p,
#modal_permissions .bb-permissions__note p {
    margin: 3px 0 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: 400;
    line-height: 1.5;
}
#modal_permissions #permissions {
    display: block !important;
    margin: 0 !important;
    padding: 4px 24px 0;
}
#modal_permissions .bb-permissions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}
#modal_permissions .bb-permissions__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#modal_permissions .bb-permission {
    width: 100% !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 16px 0;
    border-bottom: 1px solid var(--bb-border);
}
#modal_permissions .bb-permission__copy { min-width: 0; }
#modal_permissions .bb-permission__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 5px;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: 1.35;
    cursor: pointer;
}
#modal_permissions .bb-permission__title .chip {
    font-size: 10px;
    padding: 3px 6px;
}
#modal_permissions .bb-permission__description {
    width: auto !important;
    display: block;
    margin: 0 !important;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: 400;
    line-height: 1.45;
}
#modal_permissions .bb-permission__switch {
    flex: 0 0 auto;
    margin: 1px 0 0;
}
#modal_permissions .bb-permissions__note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 24px 22px;
    padding: 12px 14px;
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-amber);
    border-radius: var(--bb-radius-s);
    background: var(--bb-amber-bg);
    color: var(--bb-amber);
}
#modal_permissions .bb-permissions__note svg { flex: 0 0 auto; margin-top: 1px; }
#modal_permissions .bb-permissions__note p b { color: var(--bb-text); font-weight: var(--bb-fw-semibold); }
#modal_permissions.standard-modal .modal-footer { justify-content: flex-end; }

/* Reports keep the legacy pagination hooks for AJAX behavior, but render the
   canonical table footer/pager. Dynamic JS page buttons receive the same shape. */
.ds-table .stafter-table-bottom.bb-tbl-bottom {
    min-height: 48px;
    margin: 0;
}
.ds-table .stafter-table-bottom .pagination-info-cont { margin: 0 !important; }
.ds-table .pagination-container { align-items: center; justify-content: flex-end; }
.ds-table .pagination-container .stafter-table-paginator-page {
    min-width: 32px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-s);
    padding: 6px 10px;
    background: var(--bb-surface);
    color: var(--bb-text-2);
    cursor: pointer;
    font-size: var(--bb-fs-s);
    line-height: 1;
}
.ds-table .pagination-container .stafter-table-paginator-page:hover {
    border-color: var(--bb-primary);
    color: var(--bb-primary);
}
.ds-table .pagination-container .stafter-table-paginator-page.active {
    border-color: var(--bb-primary);
    background: var(--bb-primary);
    color: #fff;
    font-weight: var(--bb-fw-semibold);
}
.ds-table .pagination-container .pagination-arrow svg { display: block; }

@media (max-width: 767.98px) {
    .bb-note-tip::after {
        left: auto;
        right: 0;
        width: min(320px, calc(100vw - 32px));
    }
    #modal_permissions.standard-modal .modal-dialog.large-m {
        width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }
    #modal_permissions.standard-modal .modal-body { max-height: calc(100vh - 150px); }
    #modal_permissions .bb-permissions__intro,
    #modal_permissions .bb-permissions__grid { grid-template-columns: 1fr; }
    #modal_permissions .bb-permissions__intro { gap: 16px; padding: 16px 18px; }
    #modal_permissions #permissions { padding: 4px 18px 0; }
    #modal_permissions .bb-permissions__note { margin: 16px 18px 18px; }
    #modal_permissions .bb-permissions__column:first-child .bb-permission:last-child { border-bottom: 1px solid var(--bb-border); }
}

/* ------------------------------------------------------------------------
   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 ------------------------ */
/* The instruction line used to sit loose between the header and the body with
   an inline font-size; inside the body it is ordinary supporting text. Only
   shown when there ARE templates to click (owner 2026-08-08). */
.cockpit-main-wrapper:not(.cockpit-admin) #template-messages-modal .template-picker-hint {
    color: var(--bb-text-3);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
    text-align: center;
}
.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: auto !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); }

/* SEMANTIC TONES (owner 2026-07-22: "all becoming grey is not good — I like some
   green and some red, especially when it is an icon saying something negative or
   positive"). Converting an icon is about WHO decides its colour, not about
   removing colour: today the hex is baked into the file and can't follow the
   skin; these paint the same meaning from a token, so green stays green and red
   stays red while both lift correctly on espresso. Only neutral chrome
   affordances (sort, search, chevrons, eye, file) should use the default/muted
   tone — anything that reports a state gets one of these. */
.bb-icon--success { color: var(--bb-success); }   /* done · paid · connected · approved */
.bb-icon--danger  { color: var(--bb-danger);  }   /* delete · error · failed · rejected */
.bb-icon--warning { color: var(--bb-amber);   }   /* pending · waiting · needs attention */
.bb-icon--brand   { color: var(--bb-primary); }   /* the #DB3A57 accent family, tokenized */

/* + 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%; }
}

/* Livewire confirmation dialog: same standard modal contract without relying on
   Bootstrap's imperative show/backdrop lifecycle. */
.modal.livewire-confirmation-modal {
    overflow-y: auto;
    padding: 16px;
    background: rgba(18, 14, 12, .56);
}
.modal.livewire-confirmation-modal .modal-dialog {
    width: min(420px, 100%);
    max-width: 420px !important;
    margin: 1.75rem auto;
}
.modal.livewire-confirmation-modal .modal-body { padding: 20px 24px !important; }
.livewire-confirmation-modal__message {
    margin: 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
}

/* Estimate creation: term dialogs, template selection, and tax selection share
   the same compact control language in both Porcelain and Espresso. */
.estimate-term-modal .modal-body { padding: var(--bb-sp-5) !important; }
.estimate-term-modal .bb-field > label,
.estimate-term-modal .form-field > label {
    display: block;
    margin: 0 0 var(--bb-sp-2);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: 700;
}
.estimate-term-modal .bb-input,
.estimate-term-modal .bb-select { min-height: 42px; }
.estimate-term-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bb-sp-3);
}
.estimate-term-grid .ml-3 { margin-left: 0 !important; }
.estimate-deposit-entry {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--bb-sp-3);
    align-items: end;
}
.estimate-term-modal .deposit-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 42px;
    overflow: hidden;
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    background: var(--bb-inset);
}
.estimate-term-modal .deposit-type-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-sp-1);
    min-width: 0 !important;
    padding: 0 var(--bb-sp-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--bb-text-2);
    font: inherit;
    font-weight: 700;
}
.estimate-term-modal .deposit-type-btn.active {
    background: var(--bb-primary);
    color: var(--bb-on-primary);
}
.estimate-term-modal .deposit-type-btn span { font-size: var(--bb-fs-s); }
.estimate-term-error {
    display: none;
    gap: var(--bb-sp-2);
    align-items: center;
    margin-top: var(--bb-sp-3);
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-danger);
    border-radius: var(--bb-radius-s);
    background: var(--bb-danger-bg);
    color: var(--bb-danger);
    font-size: var(--bb-fs-s);
}
.estimate-term-error:not(.d-none) { display: flex; }
.estimate-term-error > :first-child {
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 800;
}
.estimate-term-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-4);
    padding: var(--bb-sp-3) 0;
    border-bottom: 1px solid var(--bb-border);
}
.estimate-term-switch-row label:not(.bb-switch) {
    display: block;
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-m);
    font-weight: 700;
}
.estimate-term-switch-row p {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.estimate-term-switch-row .bb-switch { flex: 0 0 auto; margin: 0; }
.standard-modal .bb-btn:disabled,
.standard-modal .bb-btn.disabled {
    border-color: var(--bb-border);
    background: var(--bb-inset);
    color: var(--bb-text-3);
    opacity: 1;
}
.standard-modal .bb-btn.bb-btn--primary:disabled,
.standard-modal .bb-btn.bb-btn--primary.disabled,
.standard-modal .btn.bb-btn--primary:disabled,
.standard-modal .btn.bb-btn--primary.disabled {
    border-color: var(--bb-primary) !important;
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    opacity: .45 !important;
}

.standard-modal .bb-btn.is-loading:disabled,
.standard-modal .bb-btn.is-loading.disabled {
    border-color: var(--bb-primary) !important;
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    opacity: .95 !important;
}
.standard-modal .bb-btn.is-success,
.standard-modal .bb-btn.is-success:disabled,
.standard-modal .bb-btn.is-success.disabled {
    border-color: transparent !important;
    background: var(--bb-success-bright) !important;
    color: var(--bb-on-primary) !important;
    opacity: 1 !important;
}
.standard-modal .bb-btn.is-error,
.standard-modal .bb-btn.is-error:disabled,
.standard-modal .bb-btn.is-error.disabled {
    border-color: transparent !important;
    background: var(--bb-danger-bright) !important;
    color: var(--bb-on-primary) !important;
    opacity: 1 !important;
}

/* An unavailable action still needs to read as an intentional control. The
   quick picker and detailed item form both retain their disabled behaviour,
   while keeping the label legible in either skin. */
.price-book-modal .modal-form-btn:disabled,
.price-book-modal .modal-form-btn.disabled {
    border-color: var(--bb-border) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    opacity: 1 !important;
}

.estimate-item-action-rail {
    gap: var(--bb-sp-2);
    min-height: 60px;
    padding: var(--bb-sp-3);
    border-top: 1px solid var(--bb-border);
    background: var(--bb-inset);
}
.estimate-item-action-rail .form-action {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 1px !important;
    text-transform: none !important;
}
.estimate-item-action-rail .form-action .button-text { font-size: inherit; }

.bb-template-picker .quote-design-template-menu {
    width: min(380px, calc(100vw - (var(--bb-sp-4) * 2)));
    max-width: calc(100vw - (var(--bb-sp-4) * 2));
    margin-top: var(--bb-sp-2);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-2);
}
.bb-template-picker .template-search-container { padding: var(--bb-sp-3); }
.bb-template-picker #templateSearchInput {
    min-height: 40px;
    padding: 0 var(--bb-sp-3);
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    background: var(--bb-inset);
    color: var(--bb-text);
}
.bb-template-picker .bb-template-picker__create {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-2);
    margin: 0 var(--bb-sp-3) var(--bb-sp-3);
    padding: var(--bb-sp-2) var(--bb-sp-3);
    border: 1px solid var(--bb-primary);
    border-radius: var(--bb-radius-s);
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    font-size: var(--bb-fs-s);
    font-weight: 800;
    line-height: 1.2;
}
.bb-template-picker .bb-template-picker__create:hover {
    background: var(--bb-primary);
    color: var(--bb-on-primary);
}
.bb-template-picker .add-template-icon { margin: 0; font-size: var(--bb-fs-l); line-height: 1; }
.bb-template-picker .template-list-header {
    margin: 0;
    padding: var(--bb-sp-2) var(--bb-sp-3);
    border-top: 1px solid var(--bb-border);
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-inset);
}
.bb-template-picker .template-list-header-label { gap: var(--bb-sp-2); color: var(--bb-text-2); font-size: var(--bb-fs-s); font-weight: 700; }
.bb-template-picker #selectAllTemplates,
.bb-template-picker .template-item-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bb-primary);
}
.bb-template-picker .delete-selected-link { font-size: var(--bb-fs-s); font-weight: 700; text-decoration: none; }
.bb-template-picker #templateList { max-height: min(344px, calc(100vh - 280px)); }
.bb-template-picker .quote-design-template-menu .template-item {
    padding: var(--bb-sp-3);
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-surface);
}
.bb-template-picker .quote-design-template-menu .template-item:hover,
.bb-template-picker .quote-design-template-menu .template-item.selected { background: var(--bb-primary-soft); }
.bb-template-picker .quote-design-template-menu .template-item-row { gap: var(--bb-sp-3); min-height: 24px; }
.bb-template-picker .template-item-name { color: var(--bb-text); font-size: var(--bb-fs-m); font-weight: 700; }
.bb-template-picker .template-primary-badge { color: var(--bb-amber); font-size: var(--bb-fs-s); }
.bb-template-picker .template-primary-label { color: var(--bb-text-2); font-size: var(--bb-fs-s); font-weight: 700; }
.bb-template-picker .template-edit-icon { color: var(--bb-primary); font-size: var(--bb-fs-l); }
.bb-template-picker .template-empty-state { padding: var(--bb-sp-5); color: var(--bb-text-3); }

.estimate-tax-modal .modal-body { max-height: min(520px, calc(100vh - 176px)); overflow-y: auto; padding: var(--bb-sp-3) !important; }
.estimate-tax-modal .tax-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bb-sp-3);
    align-items: center;
    padding: var(--bb-sp-3);
    border-bottom: 1px solid var(--bb-border);
}
.estimate-tax-modal .tax-item-title { color: var(--bb-text); font-size: var(--bb-fs-m); font-weight: 700; }
.estimate-tax-modal .tax-item-body { display: flex; align-items: center; gap: var(--bb-sp-2); }
.estimate-tax-modal .tax-item-percent { min-width: 56px; color: var(--bb-text-2); font-variant-numeric: tabular-nums; text-align: right; }
.estimate-tax-modal .tax-item-apply { min-width: 88px; }
.estimate-tax-modal #tax-item-tmpl { display: none !important; }
/* backend.css carries legacy fixed ink after this asset; Tax List deliberately
   wins only inside the converted modal so both skins receive token contrast. */
.estimate-tax-modal .tax-item,
.estimate-tax-modal .tax-item p { color: var(--bb-text) !important; border-color: var(--bb-border) !important; }

@media (max-width: 575.98px) {
    .estimate-term-grid,
    .estimate-deposit-entry { grid-template-columns: 1fr; }
    .estimate-term-modal .modal-body { padding: var(--bb-sp-4) !important; }
    .estimate-term-modal .deposit-type-btn span { display: none; }
    .estimate-tax-modal .tax-item { grid-template-columns: 1fr; }
    .estimate-tax-modal .tax-item-body { justify-content: space-between; }
}
@media (max-width: 575.98px) {
    .modal.livewire-confirmation-modal { padding: 8px; }
    .modal.livewire-confirmation-modal .modal-dialog { margin: 8px auto; }
    .modal.livewire-confirmation-modal .modal-footer .bb-btn { flex: 1 1 0; }
}


/* Workflow conversion completion: checklist creation, date terms, template picker, and appointment record panels use the shared component vocabulary. */
.standard-modal.bb-checklist-create-modal .modal-dialog { width: min(calc(100% - 32px), 760px) !important; max-width: 760px !important; margin: 1.75rem auto; }
.standard-modal.bb-checklist-create-modal .modal-content { width: 100% !important; }
.standard-modal.bb-checklist-create-modal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--bb-sp-4) var(--bb-sp-5); }
.standard-modal.bb-checklist-create-modal .modal-title { margin:0; color:var(--bb-text); font-size:var(--bb-fs-xl); font-weight:var(--bb-fw-bold); }
.standard-modal.bb-checklist-create-modal .modal-body { padding:var(--bb-sp-4) var(--bb-sp-5); }
.standard-modal.bb-checklist-create-modal .modal-footer { gap:var(--bb-sp-2); justify-content:flex-end; padding:var(--bb-sp-4) var(--bb-sp-5); }
.standard-modal.bb-checklist-create-modal .modal-footer > * { margin:0 !important; }
.bb-checklist-create-modal__name { width:min(100%, 260px) !important; }
.bb-checklist-create-modal__form { overflow:hidden; border:1px solid var(--bb-border); border-radius:var(--bb-radius-m); background:var(--bb-surface); }
.bb-checklist-create-modal__form .bb-tbl { margin:0; color:var(--bb-text); }
.bb-checklist-create-modal__form .bb-tbl th { background:var(--bb-inset) !important; color:var(--bb-text-2) !important; border-color:var(--bb-border) !important; font-size:var(--bb-fs-s); font-weight:var(--bb-fw-medium); }
.bb-checklist-create-modal__form .bb-tbl td { border-color:var(--bb-border) !important; }
.bb-checklist-create-modal__form .bb-input { min-width:0; }
.bb-checklist-create-modal__form .remove-row { min-width:32px; padding-inline:0; color:var(--bb-danger); }
.bb-checklist-create-modal #add-checklist-line-create { display:inline-flex; align-items:center; min-height:36px; color:var(--bb-primary); font-size:var(--bb-fs-s); font-weight:var(--bb-fw-semibold); text-decoration:none !important; }
.bb-checklist-create-modal #add-checklist-line-create:hover { text-decoration:underline !important; }
.standard-modal.estimate-expiration-modal .modal-header { align-items:center; }
.standard-modal.estimate-expiration-modal .modal-title { color:var(--bb-text); font-size:var(--bb-fs-l); font-weight:var(--bb-fw-bold); }
.standard-modal.estimate-expiration-modal .modal-body { padding:var(--bb-sp-5); }
.standard-modal.estimate-expiration-modal label { display:block; margin-bottom:var(--bb-sp-2); color:var(--bb-text-2); font-size:var(--bb-fs-s); font-weight:var(--bb-fw-semibold); }
.quote-design-template-dropdown-wrapper .bb-template-picker__trigger { min-height:42px; border-radius:var(--bb-radius-s); color:var(--bb-text); font-weight:var(--bb-fw-medium); }
.quote-design-template-dropdown-wrapper .quote-design-template-menu { padding:var(--bb-sp-2) 0; background:var(--bb-surface); }
.quote-design-template-dropdown-wrapper .template-search-container { padding:var(--bb-sp-2) var(--bb-sp-3); }
.quote-design-template-dropdown-wrapper .add-template-btn { display:flex; align-items:center; gap:var(--bb-sp-2); margin:0; padding:var(--bb-sp-3); border-block:1px solid var(--bb-border); font-size:var(--bb-fs-s); font-weight:var(--bb-fw-semibold); }
.quote-design-template-dropdown-wrapper .template-list-header { margin:0; padding:var(--bb-sp-3); background:var(--bb-inset); border-bottom:1px solid var(--bb-border); color:var(--bb-text-2); font-size:var(--bb-fs-s); }
.quote-design-template-dropdown-wrapper .quote-design-template-menu .template-item { padding:var(--bb-sp-3); color:var(--bb-text); }
#u-customer-modal .u-workflow-panel--appointment { display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(320px, .96fr); align-items:start; gap:var(--bb-sp-4); }
#u-customer-modal .u-workflow-panel--appointment .u-workflow-appointment-column { width:auto !important; padding:0 !important; }
#u-customer-modal .u-workflow-panel--appointment .u-workflow-appointment-side { padding:var(--bb-sp-4); border:1px solid var(--bb-border); border-radius:var(--bb-radius-l); background:var(--bb-surface); box-shadow:var(--bb-shadow-1); }
#u-customer-modal .u-workflow-panel--appointment .u-workflow-appointment-side .base-input { min-height:70px; border:1px solid var(--bb-border-input); border-radius:var(--bb-radius-s); }
#u-customer-modal .u-workflow-panel--appointment .documet-block { margin-top:var(--bb-sp-4); padding-top:var(--bb-sp-4) !important; border-top:1px solid var(--bb-border); }
#u-customer-modal .u-workflow-panel--appointment .files-container { color:var(--bb-text-2); font-size:var(--bb-fs-s); }
@media (max-width:900px) { #u-customer-modal .u-workflow-panel--appointment { grid-template-columns:1fr; } }
@media (max-width:575.98px) { .standard-modal.bb-checklist-create-modal .modal-dialog { width:calc(100% - 20px) !important; } .standard-modal.bb-checklist-create-modal .modal-header, .standard-modal.bb-checklist-create-modal .modal-body, .standard-modal.bb-checklist-create-modal .modal-footer { padding-inline:var(--bb-sp-3); } .bb-checklist-create-modal__name { width:100% !important; } }
/* Disabled primary actions remain clearly intentional in the espresso skin. */
.price-book-modal .modal-form-btn:disabled, .price-book-modal .modal-form-btn.disabled { border-color:var(--bb-primary) !important; background:var(--bb-primary-soft) !important; color:var(--bb-primary) !important; opacity:.72 !important; cursor:not-allowed; }


/* Shared outcome modal: result artwork is the deliberate brand exception; the
   shell, hierarchy, close control, and actions remain the standard modal. */
.standard-modal.bb-result-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bb-sp-4) var(--bb-sp-5);
}
.standard-modal.bb-result-modal .modal-title {
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-bold);
}
.standard-modal.bb-result-modal .modal-body { padding: var(--bb-sp-5); }
.standard-modal.bb-result-modal .modal-footer { padding: var(--bb-sp-4) var(--bb-sp-5); }
.standard-modal.bb-result-modal .bb-result-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bb-sp-3);
    text-align: center;
}
.standard-modal.bb-result-modal .bb-result-modal__image {
    width: 96px;
    height: 96px;
    margin: 0;
    object-fit: contain;
}
.standard-modal.bb-result-modal .bb-result-modal__message {
    max-width: 34ch;
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-m);
    line-height: var(--bb-lh-body);
}
.standard-modal.bb-result-modal .bb-result-modal__hint {
    margin: 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
}
.standard-modal.bb-result-modal .modal-footer .bb-btn { min-height: 42px; }

/* Appointment record repair: preserve the approved right-hand card, but reset
   legacy white cell lines and fixed ink within this one workflow. The source
   row styles used text colours as borders, which breaks Espresso contrast. */
#u-customer-modal .u-workflow-panel--appointment .u-workflow-appointment-side {
    padding: var(--bb-sp-4) !important;
    border-color: var(--bb-border) !important;
    background: var(--bb-surface) !important;
}
#u-customer-modal .u-workflow-panel--appointment .description-row-name,
#u-customer-modal .u-workflow-panel--appointment .description-row-value {
    border: 0 !important;
}
#u-customer-modal .u-workflow-panel--appointment .description-row-name {
    border-right: 1px solid var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--appointment .description-row > .description-row-name:nth-child(3) {
    border-left: 1px solid var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--appointment .entity-service-schedule {
    color: var(--bb-text-2) !important;
}
#u-customer-modal .u-workflow-panel--appointment textarea.base-input,
#u-customer-modal .u-workflow-panel--appointment div[name='comments'].base-input {
    border-color: var(--bb-border-strong) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--appointment .documet-block {
    border: 0 !important;
    border-top: 1px solid var(--bb-border) !important;
}


#u-customer-modal .entity-service-info .entity-service-schedule {
    color: var(--bb-text-2) !important;
    font-weight: var(--bb-fw-medium) !important;
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-notes {
    margin-top: var(--bb-sp-4);
    padding-top: var(--bb-sp-4);
    border-top: 1px solid var(--bb-border);
}
#u-customer-modal .u-appointment-notes .base-label {
    margin: 0 0 var(--bb-sp-2) !important;
    color: var(--bb-text-2) !important;
}


#u-customer-modal .status-select .u-appointment-status__icon {
    color: var(--bb-primary) !important;
}


/* Result artwork retains its established centred composition; only the text is
   tokenized so the legacy light-ink rules cannot disappear on Espresso. */
.standard-modal.bb-result-modal .bb-result-modal__legacy-title { color: var(--bb-text) !important; }
.standard-modal.bb-result-modal .bb-result-modal__legacy-message { color: var(--bb-text-2) !important; }
.standard-modal.bb-result-modal .bb-result-modal__legacy-hint { color: var(--bb-text-3) !important; }


/* Universal workflow repair: these controls arrive from legacy partials, so the
   conversion is deliberately scoped to their existing hooks. */
#u-customer-modal .customer-info-phone div,
#u-customer-modal .customer-info-address div,
#u-customer-modal .customer-info-email div {
    color: var(--bb-primary) !important;
    font-weight: var(--bb-fw-medium);
}
#u-customer-modal .customer-info-container .bb-contact-pill__icon-well {
    display: inline-grid;
    flex: 0 0 24px;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bb-surface);
    color: var(--bb-primary);
}
#u-customer-modal .customer-info-container .bb-contact-pill__icon-well .bb-icon {
    color: inherit !important;
}
#u-customer-modal .u-workflow-panel--appointment .status-select .selected-value,
#u-customer-modal .u-workflow-panel--estimate .status-select .selected-value {
    display: inline-flex !important;
    align-items: center;
    gap: var(--bb-sp-2);
}
#u-customer-modal .u-workflow-panel--appointment .status-select .selected-value img,
#u-customer-modal .u-workflow-panel--estimate .status-select .selected-value img {
    width: 14px;
    height: 14px;
    margin: 0 !important;
    object-fit: contain;
    filter: none;
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-status__icon {
    flex: 0 0 auto;
    margin: 0 !important;
    color: var(--bb-primary) !important;
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-empty-value {
    color: var(--bb-text-3) !important;
    font-size: var(--bb-fs-s);
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-section-heading {
    align-items: center;
    gap: var(--bb-sp-3);
    margin: 0 0 var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-section-title {
    margin: 0 !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
    line-height: 1.4;
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-comments-field {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text) !important;
    font: inherit;
    line-height: var(--bb-lh-body);
}
#u-customer-modal .u-workflow-panel--appointment .u-appointment-notes .u-appointment-section-title {
    margin-bottom: var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--estimate .quote-table,
#u-customer-modal .u-workflow-panel--estimate .quote-table th,
#u-customer-modal .u-workflow-panel--estimate .quote-table td {
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--estimate .quote-table {
    outline: 0 !important;
    box-shadow: none !important;
}
#u-customer-modal .u-workflow-panel--estimate .table-wrapper {
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-surface) !important;
    box-shadow: none !important;
}
#u-customer-modal .u-workflow-panel--estimate .schedule-container {
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--estimate .schedule-status {
    display: inline-flex !important;
    align-items: center;
    gap: var(--bb-sp-2);
    color: var(--bb-text-2) !important;
}
#u-customer-modal .u-workflow-panel--estimate .schedule-status img {
    width: 14px;
    height: 14px;
    margin: 0 !important;
    object-fit: contain;
}
/* Estimate detail — bring the panel up to the polished invoice treatment (owner
   2026-07-23): its cards fell back to legacy grey borders/shadow, the action row
   was never aligned, the empty new-entity slot left a gap, and the
   .quote-description-* metadata was entirely unstyled (all-white). Mirrors the
   .u-workflow-panel--invoice block above so estimate + invoice read identically. */
#u-customer-modal .u-workflow-panel--estimate .left-large-container { padding-right: var(--bb-sp-4); }
#u-customer-modal .u-workflow-panel--estimate .all-entities-header,
#u-customer-modal .u-workflow-panel--estimate .new-entity-header {
    min-height: 30px; margin: 0 0 var(--bb-sp-2) !important; padding: 0 var(--bb-sp-1);
    background: transparent !important; color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s); font-weight: var(--bb-fw-medium);
}
#u-customer-modal .u-workflow-panel--estimate .new-entity-container:empty { display: none; }
#u-customer-modal .u-workflow-panel--estimate .schedule-container {
    display: flex; align-items: center; justify-content: space-between; gap: var(--bb-sp-3);
    min-height: 58px; padding: var(--bb-sp-3); border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s); background: var(--bb-surface) !important; color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--estimate .schedule-info-date { color: var(--bb-text-3) !important; }
#u-customer-modal .u-workflow-panel--estimate .schedule-info-amount { color: var(--bb-text) !important; font-weight: var(--bb-fw-semibold); }
#u-customer-modal .u-workflow-panel--estimate .u-workflow-actions { gap: var(--bb-sp-2) !important; }
#u-customer-modal .u-workflow-panel--estimate .u-workflow-actions .bb-btn,
#u-customer-modal .u-workflow-panel--estimate .u-workflow-actions [data-tasker-create-from-record] {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: var(--bb-sp-2) !important; min-height: 36px; padding: var(--bb-sp-2) var(--bb-sp-3) !important;
    line-height: 1 !important; text-decoration: none !important; white-space: nowrap; vertical-align: middle;
}
#u-customer-modal .u-workflow-panel--estimate .u-workflow-actions img { width: 14px; height: 14px; margin: 0 !important; object-fit: contain; }
#u-customer-modal .u-workflow-panel--estimate .u-workflow-actions .bb-icon,
#u-customer-modal .u-workflow-panel--estimate .schedule-status .bb-icon,
#u-customer-modal .u-workflow-panel--estimate .status-select .bb-icon { flex: 0 0 auto; }
#u-customer-modal .u-workflow-panel--estimate .schedule-status .bb-icon,
#u-customer-modal .u-workflow-panel--estimate .status-select .bb-icon { color: var(--bb-primary); }
/* REMOVED (owner 2026-07-26): two rules here painted Create task's label
   --bb-text at rest and --bb-on-primary (white) on hover. The button is a
   .bb-btn--secondary, whose hover fill is --bb-primary-soft — pale pink — so
   white text on hover made the label vanish. It also made Create task the only
   dark-labelled button in a row of red-labelled ones. The button now simply
   follows the secondary contract, like every other button beside it. */
#u-customer-modal .u-workflow-panel--estimate [data-tasker-create-from-record],
#u-customer-modal .u-workflow-panel--estimate [data-tasker-create-from-record] * { text-decoration: none !important; }
#u-customer-modal .u-workflow-panel--estimate .left-large-container .bb-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bb-sp-2); }
#u-customer-modal .u-workflow-panel--estimate .left-large-container .bb-btn img { width: 18px; height: 18px; margin: 0 !important; opacity: .75; }
#u-customer-modal .u-workflow-panel--estimate .new-entity-container,
#u-customer-modal .u-workflow-panel--estimate .all-entities { display: grid; gap: var(--bb-sp-2); }
#u-customer-modal .u-workflow-panel--estimate .quote-description-header { color: var(--bb-text-3) !important; font-size: var(--bb-fs-s); font-weight: var(--bb-fw-medium); margin-bottom: var(--bb-sp-1); }
#u-customer-modal .u-workflow-panel--estimate .quote-description-text { color: var(--bb-text) !important; }
/* metadata labels tinted by purpose (owner 2026-07-23): brand = the scheduled job,
   amber = the offer's deadline, success = deposit/money in, danger = late fees. The
   compound .header.qd-* selector outranks the muted base above. Tokens flip per skin. */
#u-customer-modal .u-workflow-panel--estimate .quote-description-header.qd-schedule { color: var(--bb-primary) !important; }
#u-customer-modal .u-workflow-panel--estimate .quote-description-header.qd-expire   { color: var(--bb-amber) !important; }
#u-customer-modal .u-workflow-panel--estimate .quote-description-header.qd-payment  { color: var(--bb-success) !important; }
#u-customer-modal .u-workflow-panel--estimate .quote-description-header.qd-due      { color: var(--bb-danger) !important; }

/* Assign Workers is not a native select: make the existing picker a real
   tokenized disclosure and prevent Bootstrap's .form-control checkbox paint. */
.standard-modal .bb-workers-picker { position: relative; }
.standard-modal .bb-workers-picker .workers-psyudo-input {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-select-bg) !important;
    box-shadow: none !important;
    color: var(--bb-text) !important;
    text-align: left;
}
.standard-modal .bb-workers-picker .workers-psyudo-input:hover,
.standard-modal .bb-workers-picker .workers-psyudo-input[aria-expanded='true'] {
    border-color: var(--bb-primary) !important;
}
.standard-modal .bb-workers-picker .workers-psyudo-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bb-primary-soft) !important;
}
.standard-modal .bb-workers-picker .selected-workers { min-width: 0; color: var(--bb-text) !important; }
/* ⛔ THE LIBRARY OWNS THE BUTTON, even when a legacy hook class rides along.
   `jobs-flow/general.css` has `main a.action, main button.action { font-size:14px; font-weight:400 }`
   at specificity (0,1,2), and it loads AFTER bb-components.css on these pages. Any library button
   that keeps `.action` as a JS hook — Customers' "Add Customer" and "Upload from CSV", the two on
   Jobs & Invoices — was silently rendered at weight 400 while every other primary in the product is
   600. That is the "thin text" the owner reported on 2026-07-27.
   Two classes (0,2,0) beat one class + two elements (0,1,2), so this wins without !important, and
   the hook class stays exactly where the JS expects it. */
.bb-btn.action,
.bb-btn.custom-action {
    font-size: var(--bb-button-font-size);
    font-weight: var(--bb-button-font-weight);
}

/* Type-to-find inside the worker dropdown. It is a filter over the checkboxes, so it sits at the
   top of the list and the rows below it keep their state while you type. */
/* The panel scrolls, so an ordinary field would scroll out of reach exactly when the list is long
   enough to need searching. Pinned to the top of the scroll area instead, on the panel's own
   surface so rows do not show through it. */
.bb-workers-picker .bb-workers-picker__search {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    margin-bottom: 6px;
    flex: 0 0 auto;
    background: var(--bb-surface);
}
.bb-workers-picker .bb-workers-picker__none {
    margin: 0;
    padding: 6px 2px;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
}
.bb-workers-picker .bb-workers-picker__count {
    padding: 2px;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-xs);
}
/* ⛔ `!important` is REQUIRED, not laziness: every .worker-row carries Bootstrap's .d-flex
   (`display:flex !important`), so an ordinary rule — or the `hidden` attribute — filters nothing.
   That is exactly how the first version of this search shipped doing absolutely nothing. */
.bb-workers-picker .worker-row.is-hidden,
.bb-workers-picker .bb-workers-picker__none.is-hidden,
.bb-workers-picker .bb-workers-picker__count:empty {
    display: none !important;
}
/* keyboard highlight — the row arrow-keys have landed on */
.bb-workers-picker .worker-row.is-active {
    background: var(--bb-primary-soft);
    border-radius: var(--bb-radius-s);
}

.standard-modal .bb-workers-picker .selected-worker {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 2px 6px;
    border: 1px solid var(--bb-primary) !important;
    border-radius: 999px;
    background: var(--bb-primary-soft) !important;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
}
.standard-modal .bb-workers-picker .selected-worker .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bb-text) !important;
}
.standard-modal .bb-workers-picker .selected-worker .delete {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--bb-primary) !important;
    cursor: pointer;
}
.standard-modal .bb-workers-picker .selected-worker .delete i { display: none !important; }
.standard-modal .bb-workers-picker .selected-worker .delete::before {
    content: "×";
    line-height: 1;
    font-size: 14px;
    font-weight: var(--bb-fw-bold);
}
.standard-modal .bb-workers-picker .arrow { position: static !important; flex: 0 0 auto; margin: 0 !important; pointer-events: none; }
.standard-modal .bb-workers-picker .workers-select {
    position: absolute;
    z-index: 1070;
    /* Flush to the trigger. The 6px gap let the modal's red primary button — which sits directly
       under this control — show through as a bright sliver between the field and the list. */
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    max-height: 216px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface) !important;
    box-shadow: var(--bb-shadow-2);
}
.standard-modal .bb-workers-picker .worker-row {
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 10px;
    border-radius: calc(var(--bb-radius-s) - 2px);
    background: transparent !important;
    color: var(--bb-text) !important;
    cursor: pointer;
    gap: 10px;
}
.standard-modal .bb-workers-picker .worker-row:hover { background: var(--bb-primary-soft) !important; }
.standard-modal .bb-workers-picker .bb-workers-picker__check {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.standard-modal .bb-workers-picker .bb-check__box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--bb-border-strong) !important;
    border-radius: 4px !important;
    background: var(--bb-surface) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}
.standard-modal .bb-workers-picker .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;
}
.standard-modal .bb-workers-picker .bb-workers-picker__check:checked + .bb-check__box {
    border-color: var(--bb-primary) !important;
    background: var(--bb-primary) !important;
}
.standard-modal .bb-workers-picker .bb-workers-picker__check:checked + .bb-check__box::after {
    transform: rotate(45deg) scale(1);
}
.standard-modal .bb-workers-picker .bb-workers-picker__check:focus-visible + .bb-check__box {
    box-shadow: 0 0 0 3px var(--bb-primary-soft) !important;
}
/* Single-owner mode (.bb-check--radio). A job or a visit can be staffed by
   several people, but a Tasker task has exactly ONE owner, so the same picker
   renders radios — round the box and swap the tick for a dot. Without these the
   rules above paint a square checkbox over a radio input. */
.standard-modal .bb-workers-picker .bb-check--radio .bb-check__box {
    border-radius: 50% !important;
}
.standard-modal .bb-workers-picker .bb-check--radio .bb-check__box::after {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: #fff;
    margin: 0;
    transform: scale(0);
}
.standard-modal .bb-workers-picker .bb-check--radio .bb-workers-picker__check:checked + .bb-check__box::after {
    transform: scale(1);
}
.standard-modal .bb-workers-picker .worker-name,
.standard-modal .bb-workers-picker .worker-phone { color: inherit !important; }
.standard-modal .bb-workers-picker .worker-phone { color: var(--bb-text-3) !important; }

/* Modal dropdown-clip fix (general): custom pickers — the worker picker, searchable
   input-selectors (Select Customer, price-book item, etc.), and date/time pickers —
   are position:absolute and were being clipped by the modal body/content overflow, so
   their lists opened below the modal edge, invisible and unclickable. Let the clip
   escape, scoped via :has() to ONLY modals that actually hold such a picker (open, for
   the transient ones), so every other modal keeps its normal scroll/clip. */
.modal:has(.bb-workers-picker) .modal-content,
.modal:has(.bb-workers-picker) .modal-body,
.modal:has(.bb-workers-picker) .modal-body .form-wrapper,
.modal:has(.bb-workers-picker) .modal-body .form-group,
.modal:has(.input-selector-data-list.active) .modal-content,
.modal:has(.input-selector-data-list.active) .modal-body,
.modal:has(.daterangepicker.show-calendar) .modal-content,
.modal:has(.daterangepicker.show-calendar) .modal-body,
.modal:has(.bootstrap-datetimepicker-widget) .modal-content,
.modal:has(.bootstrap-datetimepicker-widget) .modal-body { overflow: visible !important; }


/* Payment detail is the appointment workflow's sibling, not a separate light
   table/theme. Reuse the same detail, notes, action, and table contracts. */
#u-customer-modal .u-workflow-panel--payment .description-row-name,
#u-customer-modal .u-workflow-panel--payment .description-row-value {
    border: 0 !important;
}
#u-customer-modal .u-workflow-panel--payment .description-row-name {
    border-right: 1px solid var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--payment .description-row > .description-row-name:nth-child(3) {
    border-left: 1px solid var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--payment .u-appointment-notes {
    margin-top: var(--bb-sp-4);
    padding-top: var(--bb-sp-4);
    border-top: 1px solid var(--bb-border);
}
#u-customer-modal .u-workflow-panel--payment .u-appointment-section-heading {
    align-items: center;
    gap: var(--bb-sp-3);
    margin: 0 0 var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--payment .u-appointment-section-title {
    margin: 0 !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
    line-height: 1.4;
}
#u-customer-modal .u-workflow-panel--payment .u-appointment-comments-field {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text) !important;
    font: inherit;
    line-height: var(--bb-lh-body);
}
#u-customer-modal .u-workflow-panel--payment .edit-appointment-info-btn:hover,
#u-customer-modal .u-workflow-panel--appointment .edit-appointment-info-btn:hover {
    background: var(--bb-primary-hover) !important;
    color: #fff !important;
}
#u-customer-modal .u-workflow-panel--payment .edit-appointment-info-btn:hover .bb-btn__icon,
#u-customer-modal .u-workflow-panel--payment .edit-appointment-info-btn:hover .edit-text,
#u-customer-modal .u-workflow-panel--appointment .edit-appointment-info-btn:hover .bb-btn__icon,
#u-customer-modal .u-workflow-panel--appointment .edit-appointment-info-btn:hover .edit-text {
    color: #fff !important;
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-heading {
    align-items: center;
    margin: 0 0 var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--payment .modal-table-cont {
    overflow: hidden;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table th {
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bb-border) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
    line-height: 1.35;
    text-align: left;
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table td {
    padding: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bb-border) !important;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-s) !important;
    line-height: 1.45;
    vertical-align: top;
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table tr > * + * {
    border-left: 1px solid var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table tbody tr:last-child td { border-bottom: 0 !important; }
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table tbody tr:hover td { background: var(--bb-primary-soft) !important; }
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table a { color: var(--bb-primary) !important; }
#u-customer-modal .u-workflow-panel--payment .u-workflow-payment-table a:hover { color: var(--bb-primary-hover) !important; }
.bb-template-picker #templateList { overflow-y: auto; overscroll-behavior: contain; }

.standard-modal.bb-order-checklist-modal .ts-wrapper,
.standard-modal.bb-order-checklist-modal .ts-wrapper.single { width: 100% !important; }
.standard-modal.bb-order-checklist-modal .ts-control {
    display: flex !important;
    align-items: center;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-select-bg) !important;
    box-shadow: none !important;
}
.standard-modal.bb-order-checklist-modal .ts-control input {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.standard-modal.bb-order-checklist-modal .ts-wrapper.focus .ts-control {
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 0 2px var(--bb-primary-soft) !important;
}
.standard-modal.bb-order-checklist-modal #add_order_checklist {
    min-height: 42px !important;
    padding: 0 var(--bb-sp-4) !important;
    font-weight: var(--bb-fw-semibold) !important;
}

/* Price-book item form: legacy .btn rules override the library variants in the
   modal. Restore the actual component surfaces without changing the form hooks. */
.price-book-modal #item-image-upload-btn.bb-btn {
    min-height: 42px;
    border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface) !important;
    color: var(--bb-primary) !important;
}
.price-book-modal #item-image-upload-btn.bb-btn:hover {
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
}
.price-book-modal .modal-form-btn.bb-btn--primary:not(:disabled):not(.disabled) {
    min-height: 42px;
    border: 1px solid var(--bb-primary) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}
.price-book-modal .modal-form-btn.bb-btn--primary:not(:disabled):not(.disabled):hover {
    background: var(--bb-primary-strong) !important;
    color: var(--bb-on-primary) !important;
}


/* TomSelect owns the field frame. The native search input must remain an
   unframed transparent child, otherwise standard modal input rules paint a
   second border inside the control. */
.standard-modal .ts-wrapper .ts-control > input {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--bb-text) !important;
}
.standard-modal .ts-wrapper .ts-control > input::placeholder {
    color: var(--bb-text-3) !important;
    opacity: 1;
}


/* The modal's generic input selector is intentionally broad; exceed its
   specificity for TomSelect's internal input so only the wrapper draws a frame. */
.modal.standard-modal .modal-body .ts-wrapper .ts-control > input {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--bb-text) !important;
}


/* Estimate term modal fields share one library field contract. */
.estimate-term-modal .estimate-term-grid .bb-input,
.estimate-term-modal .estimate-term-grid .bb-select {
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-select-bg) !important;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-medium) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.estimate-term-modal .estimate-term-grid .bb-input:focus,
.estimate-term-modal .estimate-term-grid .bb-select:focus {
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 0 2px var(--bb-primary-soft) !important;
}

/* Action rail labels retain identical component metrics regardless of icon. */
.estimate-item-action-rail .form-action.bb-btn {
    min-height: 36px !important;
    padding: 0 var(--bb-sp-3) !important;
    gap: var(--bb-sp-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-medium) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.estimate-item-action-rail .form-action.bb-btn .bb-btn__icon,
.estimate-item-action-rail .form-action.bb-btn > svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
}

/* Standard estimate-template library modal. */
#quote-design-templates-modal .modal-body { padding: var(--bb-sp-4) !important; }
#quote-design-templates-modal .modal-dialog { max-width: min(760px, calc(100vw - 32px)) !important; }
#quote-design-templates-modal .bb-template-library__list { overflow-x: hidden; }
#quote-design-templates-modal .standard-modal__footer { justify-content: flex-end; }
.bb-template-term-action__open {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bb-primary);
    font: inherit;
    cursor: pointer;
}
.bb-template-term-action__result {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
}
.bb-template-library__toolbar {
    display: flex;
    gap: var(--bb-sp-3);
    align-items: center;
    margin-bottom: var(--bb-sp-4);
}
.bb-template-library__toolbar .bb-input { min-height: 40px; flex: 1 1 auto; }
.bb-template-library__new { flex: 0 0 auto; }
.bb-template-library__list { display: grid; gap: var(--bb-sp-2); max-height: min(420px, 55vh); overflow-y: auto; }
.bb-template-library__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    min-height: 56px;
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
}
.bb-template-library__row.is-selected { border-color: var(--bb-primary); background: var(--bb-primary-soft); }
.bb-template-library__identity { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--bb-sp-2); overflow: hidden; }
.bb-template-library__name { overflow: hidden; color: var(--bb-text); font-size: var(--bb-fs-s); font-weight: var(--bb-fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.bb-template-library__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-sp-1);
    min-height: 32px;
    padding: 0 var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface-2);
    color: var(--bb-text);
    font: inherit;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.bb-template-library__primary:hover,
.bb-template-library__primary:focus-visible {
    border-color: var(--bb-primary);
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    outline: 0;
}
.bb-template-library__primary.is-primary {
    border-color: transparent;
    background: var(--bb-amber-soft);
    color: var(--bb-amber);
    cursor: default;
}
.bb-template-library__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--bb-sp-2); }
.bb-template-library__delete { width: 32px; min-width: 32px; padding: 0 !important; color: var(--bb-danger) !important; }
.bb-template-library__delete svg { width: 16px; height: 16px; }
.bb-template-library__delete:hover { border-color: var(--bb-danger) !important; background: var(--bb-danger-soft) !important; color: var(--bb-danger) !important; }
.bb-template-library__empty { padding: var(--bb-sp-6) var(--bb-sp-3); color: var(--bb-text-2); text-align: center; }
#set-primary-template-modal .modal-dialog.small-m { margin-top: 96px !important; }
#set-primary-template-modal.show .modal-dialog.small-m { transform: none !important; }
.bb-confirm-copy {
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: 1.45;
}
.bb-confirm-copy strong { color: var(--bb-text); font-weight: var(--bb-fw-semibold); }
.bb-small-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bb-sp-2);
    margin-top: var(--bb-sp-4);
}
@media (min-width: 480px) {
    .bb-small-modal-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .bb-template-library__toolbar { align-items: stretch; flex-direction: column; }
    .bb-template-library__row { align-items: flex-start; flex-direction: column; }
    .bb-template-library__actions { width: 100%; }
    .bb-template-library__apply { margin-left: auto; }
}


/* The legacy form input selector is more specific than the shared field rule;
   target the actual standard-modal hierarchy so Date and Time retain one surface. */
.modal.standard-modal.estimate-term-modal .modal-body .estimate-term-grid .bb-input,
.modal.standard-modal.estimate-term-modal .modal-body .estimate-term-grid .bb-select {
    background-color: var(--bb-select-bg) !important;
}


/* CUSTOMER CABINET DESIGN SETTINGS — Type 2 editor
   The surrounding page is an organisation setting. Its customer-facing preview
   is deliberately outside this scope and restores its own legacy token baseline. */
.customer-cabinet-design-editor {
    width: 100%;
    margin: 0;
}
.customer-cabinet-design-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-4);
    margin-bottom: var(--bb-sp-5);
}
.customer-cabinet-design-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bb-sp-5) var(--bb-sp-6);
}
.customer-cabinet-design-editor__field {
    min-width: 0;
}
.customer-cabinet-design-editor__label {
    margin: 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-body);
}
.customer-cabinet-design-editor .color-picker-custom {
    display: none;
}
.customer-cabinet-design-editor .color-picker-cont {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    box-shadow: none;
}
.customer-cabinet-design-editor .color-picker-cont:focus-within {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}
.customer-cabinet-design-editor .color-picker-cont .color-picker-cblock {
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    border-color: var(--bb-border-strong);
    border-radius: 3px;
}
.customer-cabinet-design-editor .color-picker-cont .color-picker-text {
    color: var(--bb-text);
    font-family: var(--bb-font-mono);
    font-size: var(--bb-fs-s);
    letter-spacing: 0;
}
.customer-cabinet-design-editor .custom-select-new,
.customer-cabinet-design-editor .custom-select-new > div,
.customer-cabinet-design-editor .custom-select-new .bb-select,
.customer-cabinet-design-editor form {
    width: 100%;
}
.customer-cabinet-design-editor .custom-select-new .arrow.select {
    display: none !important;
}
.customer-cabinet-design-editor .custom-select-new .bb-select {
    min-height: 40px;
    color: var(--bb-text) !important;
    background-color: var(--bb-select-bg) !important;
    border-color: var(--bb-border-input) !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;
}
.customer-cabinet-design-editor__toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    min-height: 40px;
    padding: 0 12px;
    background: var(--bb-inset);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-s);
}
.customer-cabinet-design-editor__toggle .bb-check {
    flex: none;
}
.customer-cabinet-design-editor__upload-trigger {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    cursor: pointer;
}
@media (max-width: 767.98px) {
    .customer-cabinet-design-editor { margin-bottom: var(--bb-sp-4); }
    .customer-cabinet-design-editor__header { flex-direction: column; }
    .customer-cabinet-design-editor__header .bb-btn { width: 100%; }
    .customer-cabinet-design-editor__grid { grid-template-columns: 1fr; gap: var(--bb-sp-4); }
}


/* Customer-cabinet designer: a generic font picker is required because native
   select option rendering cannot show each supplied typeface.  The real select
   remains in the DOM for existing settings persistence and preview listeners. */
.bb-font-picker { position: relative; width: 100%; }
.bb-font-picker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}
.bb-font-picker__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 38px 8px 12px;
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    background-color: var(--bb-select-bg);
    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;
    color: var(--bb-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.bb-font-picker__trigger:focus-visible {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
    outline: 0;
}
.bb-font-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-font-picker__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--bb-sp-1);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-2);
}
.bb-font-picker__option {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--bb-radius-s);
    background: transparent;
    color: var(--bb-text);
    font-size: var(--bb-fs-m);
    text-align: left;
    cursor: pointer;
}
.bb-font-picker__option:hover,
.bb-font-picker__option[aria-selected="true"] {
    background: var(--bb-primary-soft);
    color: var(--bb-text);
}

/* Customer Cabinet is a Type-2 setting with an unskinned customer-facing
   presentation below it. The preview is a bounded, labelled surface—not a
   full-width continuation of the admin page. */
.customer-cabinet-preview-card {
    overflow: hidden;
    padding: 0 !important;
}
.customer-cabinet-preview-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-4);
    padding: var(--bb-sp-5);
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-surface);
}
.customer-cabinet-preview-card__header .bb-card__title { margin-bottom: var(--bb-sp-1); }
.customer-cabinet-preview-card__header .bb-card__description { max-width: 700px; }
.customer-cabinet-preview-card__meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--bb-sp-3);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    white-space: nowrap;
}
.customer-cabinet-preview-card .badge-preview {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--bb-primary);
    border-radius: 999px;
    color: var(--bb-primary);
    font-size: 10px;
    font-weight: var(--bb-fw-semibold);
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}
.customer-cabinet-preview-card .customer-cabinet-preview-container {
    padding: var(--bb-sp-5);
}
@media (max-width: 767.98px) {
    .customer-cabinet-preview-card__header {
        align-items: stretch;
        flex-direction: column;
        padding: var(--bb-sp-4);
    }
    .customer-cabinet-preview-card__meta { justify-content: space-between; }
    .customer-cabinet-preview-card .customer-cabinet-preview-container { padding: var(--bb-sp-3); }
}

/* Universal Visit detail: convert the leftover date/status rail to the same
   compact, tokenized composition used by Estimate and Invoice. */
#u-customer-modal .u-workflow-panel--visit .left-large-container { padding-right: var(--bb-sp-4); }
#u-customer-modal .u-workflow-panel--visit .all-entities-header,
#u-customer-modal .u-workflow-panel--visit .new-entity-header {
    min-height: 30px;
    margin: 0 0 var(--bb-sp-2) !important;
    padding: 0 var(--bb-sp-1);
    background: transparent !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
}
#u-customer-modal .u-workflow-panel--visit .new-entity-container:empty { display: none; }
#u-customer-modal .u-workflow-panel--visit .new-entity-container,
#u-customer-modal .u-workflow-panel--visit .all-entities { display: grid; gap: var(--bb-sp-2); }
#u-customer-modal .u-workflow-panel--visit .schedule-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--bb-sp-3);
    min-height: 58px;
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--visit .schedule-info { min-width: 0; }
#u-customer-modal .u-workflow-panel--visit .schedule-info-date {
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
}
#u-customer-modal .u-workflow-panel--visit .schedule-info-time {
    margin-top: 2px;
    color: var(--bb-text-3) !important;
    font-size: var(--bb-fs-xs);
}
#u-customer-modal .u-workflow-panel--visit .schedule-status {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center;
    gap: var(--bb-sp-2);
    width: auto;
    padding: var(--bb-sp-1) var(--bb-sp-2);
    border: 1px solid var(--bb-border) !important;
    border-radius: 999px;
    color: var(--bb-text-2) !important;
    line-height: 1.2;
}
#u-customer-modal .u-workflow-panel--visit .schedule-status .bb-icon {
    flex: 0 0 auto;
    color: var(--bb-primary);
}
#u-customer-modal .u-workflow-panel--visit .create-visit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2);
}
#u-customer-modal .u-workflow-panel--visit .u-workflow-main {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--visit .info-tiles-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--bb-sp-4) var(--bb-sp-5);
}
#u-customer-modal .u-workflow-panel--visit .info-tile {
    flex: 1 1 180px;
    width: auto !important;
    min-width: 0;
}
@media (max-width: 767.98px) {
    #u-customer-modal .u-workflow-panel--visit .left-large-container { padding-right: 0; }
}

/* Universal invoice detail: same button/list rhythm as estimate, without
   changing invoice-specific actions or JS hook classes. */
#u-customer-modal .u-workflow-panel--invoice .left-large-container { padding-right: var(--bb-sp-4); }
#u-customer-modal .u-workflow-panel--invoice .all-entities-header,
#u-customer-modal .u-workflow-panel--invoice .new-entity-header {
    min-height: 30px;
    margin: 0 0 var(--bb-sp-2) !important;
    padding: 0 var(--bb-sp-1);
    background: transparent !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
}
#u-customer-modal .u-workflow-panel--invoice .schedule-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    min-height: 58px;
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--invoice .schedule-info-date { color: var(--bb-text-3) !important; }
#u-customer-modal .u-workflow-panel--invoice .schedule-info-amount { color: var(--bb-text) !important; font-weight: var(--bb-fw-semibold); }
#u-customer-modal .u-workflow-panel--invoice .schedule-status,
#u-customer-modal .u-workflow-panel--invoice .status-select .selected-value {
    display: inline-flex !important;
    align-items: center;
    gap: var(--bb-sp-2);
    color: var(--bb-text-2) !important;
    line-height: 1;
}
#u-customer-modal .u-workflow-panel--invoice .schedule-status img,
#u-customer-modal .u-workflow-panel--invoice .status-select .selected-value img,
#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions img {
    width: 14px;
    height: 14px;
    margin: 0 !important;
    object-fit: contain;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions .bb-btn,
#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions [data-tasker-create-from-record] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2) !important;
    min-height: 36px;
    padding: var(--bb-sp-2) var(--bb-sp-3) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions [data-tasker-create-from-record]:hover {
    text-decoration: none !important;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table thead th {
    height: 50px;
    padding: 0 var(--bb-sp-4) !important;
    vertical-align: middle;
}

#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions {
    gap: var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--invoice .status-select,
#u-customer-modal .u-workflow-panel--invoice .schedule-status,
#u-customer-modal .u-workflow-panel--invoice .invoice-download-pdf,
#u-customer-modal .u-workflow-panel--invoice .invoice-payment-info-btn,
#u-customer-modal .u-workflow-panel--invoice .refund-invoice-btn,
#u-customer-modal .u-workflow-panel--invoice .refund-deposit-btn,
#u-customer-modal .u-workflow-panel--invoice .paid-cash-invoice-btn,
#u-customer-modal .u-workflow-panel--invoice .edit-invoice-btn,
#u-customer-modal .u-workflow-panel--invoice .entity-logs-btn,
#u-customer-modal .u-workflow-panel--invoice [data-tasker-create-from-record] {
    min-height: 36px !important;
    line-height: 1 !important;
}
#u-customer-modal .u-workflow-panel--invoice .status-select,
#u-customer-modal .u-workflow-panel--invoice .schedule-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--bb-sp-2) !important;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-actions .bb-icon,
#u-customer-modal .u-workflow-panel--invoice .schedule-status .bb-icon,
#u-customer-modal .u-workflow-panel--invoice .status-select .bb-icon,
#u-customer-modal .u-workflow-panel--invoice .left-large-container .bb-icon {
    flex: 0 0 auto;
    color: currentColor;
}
#u-customer-modal .u-workflow-panel--invoice .schedule-status .bb-icon,
#u-customer-modal .u-workflow-panel--invoice .status-select .bb-icon {
    color: var(--bb-primary);
}
/* same removal as the estimate panel above — the white-on-pale-pink hover and the
   odd dark label are gone; the button follows the secondary contract */
#u-customer-modal .u-workflow-panel--invoice [data-tasker-create-from-record],
#u-customer-modal .u-workflow-panel--invoice [data-tasker-create-from-record] * {
    text-decoration: none !important;
}
#u-customer-modal .u-workflow-panel--invoice .status-select .selected-value,
#u-customer-modal .u-workflow-panel--invoice .schedule-status .name {
    gap: var(--bb-sp-2) !important;
    white-space: nowrap;
}
#u-customer-modal .u-workflow-panel--invoice .left-large-container .bb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2);
}
#u-customer-modal .u-workflow-panel--invoice .left-large-container .bb-btn img {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    opacity: .75;
}
#u-customer-modal .u-workflow-panel--invoice .new-entity-container,
#u-customer-modal .u-workflow-panel--invoice .all-entities {
    display: grid;
    gap: var(--bb-sp-2);
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-main {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-heading {
    gap: var(--bb-sp-3);
}
/* Invoice metadata is the SAME icon-row treatment as the estimate step — it used to be
   four cream filled cards (padding + border + --bb-surface-2), which made Invoice the only
   step drawing a record's facts as boxes. The markup now matches internal-quote's
   .info-tile.d-flex + .workflow-info-icon, so the tiles just need to lay out as a wrapping
   row and inherit the shared .info-tile ink. (owner 2026-07-25) */
#u-customer-modal .u-workflow-panel--invoice .info-tiles-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--bb-sp-4) var(--bb-sp-5);
}
#u-customer-modal .u-workflow-panel--invoice .info-tile {
    width: auto !important;
    min-width: 0;
    flex: 1 1 190px;
    padding: 0;
    border: 0;
    background: none;
}
#u-customer-modal .u-workflow-panel--invoice .info-tile .header {
    color: var(--bb-text-3) !important;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
    letter-spacing: .02em;
}
#u-customer-modal .u-workflow-panel--invoice .info-tile .value {
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-medium);
    line-height: 1.3;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table-shell,
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table,
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table th,
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table td {
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table th {
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
}
#u-customer-modal .u-workflow-panel--invoice .u-workflow-table td {
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
#u-customer-modal .u-workflow-panel--invoice .border-bottom-dashed {
    border-color: var(--bb-border) !important;
}
#u-customer-modal .u-workflow-panel--invoice .entity-description-header,
#u-customer-modal .u-workflow-panel--invoice .w-md-20 .w-40 {
    color: var(--bb-text-2) !important;
    font-weight: var(--bb-fw-semibold);
}
#u-customer-modal .u-workflow-panel--invoice .entity-description-text,
#u-customer-modal .u-workflow-panel--invoice .w-md-20 {
    color: var(--bb-text) !important;
}
/* The two grid-template-columns breakpoints that used to sit here are gone with the cream
   cards — the tiles are a wrapping flex row now, so they reflow on their own. */



/* Payment Summary modal opened from universal payment detail. Keep the original
   compact layout, but make the information hierarchy tokenized and espresso-safe. */
#customer-view-appointment-payment-modal .modal-dialog {
    max-width: min(500px, calc(100vw - 24px));
}
#customer-view-appointment-payment-modal .modal-header .d-flex {
    gap: var(--bb-sp-3);
}
#customer-view-appointment-payment-modal .modal-header .d-flex > div:first-child {
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-l) !important;
    font-weight: var(--bb-fw-bold) !important;
}
#customer-view-appointment-payment-modal .serice-invoice-status {
    margin-left: auto;
    white-space: nowrap;
}
#customer-view-appointment-payment-modal .modal-body { padding: var(--bb-sp-4) var(--bb-sp-5); }
#customer-view-appointment-payment-modal .form-wrapper {
    display: grid;
    gap: var(--bb-sp-2);
}
#customer-view-appointment-payment-modal .form-row {
    margin: 0;
    padding: var(--bb-sp-2) 0;
    border-color: var(--bb-border) !important;
}
#customer-view-appointment-payment-modal .form-row.border-bottom {
    border-bottom: 1px solid var(--bb-border) !important;
}
#customer-view-appointment-payment-modal .form-group { margin: 0; }
#customer-view-appointment-payment-modal .fw-600 {
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold) !important;
}
#customer-view-appointment-payment-modal .form-group div:not(.fw-600):not(.serice-invoice-status) {
    color: var(--bb-text-2);
}
#customer-view-appointment-payment-modal .form-group > .d-flex {
    align-items: flex-start;
    gap: var(--bb-sp-3);
}
#customer-view-appointment-payment-modal .form-group > .d-flex > div:last-child {
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
    white-space: nowrap;
}
#customer-view-appointment-payment-modal .modal-footer {
    border-top: 1px solid var(--bb-border) !important;
    background: var(--bb-surface-2) !important;
}
#customer-view-appointment-payment-modal .modal-footer .bb-standard-btn {
    min-height: 40px;
    margin: 0 !important;
}

#customer-view-appointment-payment-modal .form-row:first-child {
    padding-top: 0;
}
#customer-view-appointment-payment-modal .form-row.border-bottom {
    margin-bottom: var(--bb-sp-2) !important;
    padding-bottom: var(--bb-sp-4);
}
#customer-view-appointment-payment-modal .form-group div:not(.fw-600):not(.serice-invoice-status) {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    line-height: 1.45;
}
#customer-view-appointment-payment-modal .form-group > .d-flex > div:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
#customer-view-appointment-payment-modal .modal-footer {
    padding: var(--bb-sp-4) var(--bb-sp-5) !important;
}
#customer-view-appointment-payment-modal .payment-summary__line {
    display: grid;
    gap: var(--bb-sp-2);
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface-2);
}
#customer-view-appointment-payment-modal .payment-summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    min-width: 0;
}
#customer-view-appointment-payment-modal .payment-summary__label {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
}
#customer-view-appointment-payment-modal .payment-summary__value {
    min-width: 0;
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
    overflow-wrap: anywhere;
}
#customer-view-appointment-payment-modal .payment-summary__amount {
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
    white-space: nowrap;
}
#customer-view-appointment-payment-modal .payment-summary__note {
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
}
#customer-view-appointment-payment-modal .payment-summary__note-text {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
    line-height: 1.45;
}
#customer-view-appointment-payment-modal .payment-summary__totals {
    display: grid;
    gap: var(--bb-sp-2);
    padding-top: var(--bb-sp-2);
    border-top: 1px solid var(--bb-border) !important;
}
#customer-view-appointment-payment-modal .payment-summary__totals .form-row {
    padding: 0;
}
#customer-view-appointment-payment-modal .payment-summary__totals .form-group {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    padding: 0;
}
#customer-view-appointment-payment-modal .payment-summary__grand-total {
    margin-top: var(--bb-sp-1) !important;
    padding-top: var(--bb-sp-2) !important;
    border-top: 1px solid var(--bb-border) !important;
}
#customer-view-appointment-payment-modal .payment-summary__total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
}
#customer-view-appointment-payment-modal .payment-summary__total-row--grand {
    padding-top: var(--bb-sp-2);
    border-top: 1px solid var(--bb-border) !important;
}
#customer-view-appointment-payment-modal .payment-summary__total-row--grand .payment-summary__label,
#customer-view-appointment-payment-modal .payment-summary__total-row--grand .payment-summary__amount {
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m);
}

/* Estimate/invoice tax modals use the same small-modal, row-list contract. */
.estimate-tax-modal .tax-list {
    max-height: 62vh;
    padding: var(--bb-sp-4) var(--bb-sp-5) !important;
}
.estimate-tax-modal .tax-list > .d-flex {
    gap: var(--bb-sp-2);
}
.estimate-tax-modal .tax-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    margin: 0 !important;
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
    color: var(--bb-text);
}
.estimate-tax-modal .tax-item-title {
    min-width: 0;
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
}
.estimate-tax-modal .tax-item-body {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-sp-2);
    flex: 0 0 auto;
}
.estimate-tax-modal .tax-item-percent {
    color: var(--bb-text-2) !important;
    font-weight: var(--bb-fw-medium);
}
#tax-form-modal .form-input {
    min-height: 42px;
    padding: 0 var(--bb-sp-3);
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s);
    background: var(--bb-select-bg) !important;
    color: var(--bb-text) !important;
    box-shadow: none !important;
}
#tax-form-modal .form-label { color: var(--bb-text-2) !important; font-weight: var(--bb-fw-semibold); }
#tax-form-modal .form-desc { color: var(--bb-text-2) !important; font-size: var(--bb-fs-s); line-height: 1.45; }
#tax-form-modal .form-button { width: 100%; min-height: 42px; }


/* Workflow visual audit follow-up: remove remaining legacy seams from estimate/invoice shared controls. */
#request-detals,
#request-detals * {
    scrollbar-color: var(--bb-border-strong) var(--bb-inset);
}
#request-detals .modal-body {
    padding: var(--bb-sp-4) !important;
}
#request-detals .form-group {
    margin-bottom: var(--bb-sp-4) !important;
}
#request-detals .form-group[style] {
    color: var(--bb-text) !important;
}
#request-detals svg,
#request-detals svg path {
    color: var(--bb-primary) !important;
    stroke: currentColor !important;
}
#request-detals .button,
#request-detals .file_preview_elem,
#request-detals a[download] {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-sp-1);
    color: var(--bb-primary) !important;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
    text-decoration: none !important;
}
#request-detals .worker-comments-list,
#request-detals .name {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s);
}
#request-detals .modal-content,
#request-detals textarea.form-control,
#request-detals input.form-control,
#request-detals select.form-control {
    outline: none !important;
}

.form-container .customer-data {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--bb-sp-4);
    align-items: end !important;
    padding: var(--bb-sp-4) !important;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-surface);
}
.form-container .customer-data > .d-flex {
    display: contents !important;
}
.form-container .customer-data-field {
    min-width: 0;
    margin: 0 !important;
}
.form-container .customer-data-field .label {
    margin: 0 0 var(--bb-sp-1) !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-xs) !important;
    font-weight: var(--bb-fw-semibold) !important;
    letter-spacing: .01em;
}
.form-container .customer-data-field .data,
.form-container .customer-data-field .data input.form-control {
    min-width: 0 !important;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: var(--bb-lh-tight) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-container .customer-data-field .data input.form-control {
    min-height: 40px;
    border-color: var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-select-bg) !important;
    box-shadow: none !important;
}
.form-container .content .body .form-header .label {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 var(--bb-sp-3) !important;
    border-color: var(--bb-border) !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-semibold) !important;
}
.form-container .content .body form .item .delete-cont {
    border-left: 1px solid var(--bb-border) !important;
    border-right: 0 !important;
}
.form-container .border-line,
.form-container .border-bottom-dashed {
    border-color: var(--bb-border) !important;
}
.form-container .btn-controls .bb-btn,
.form-container .estimate-item-action-rail .bb-btn,
#u-customer-modal .u-workflow-actions .bb-btn,
#u-customer-modal .u-workflow-actions [data-tasker-create-from-record] {
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: 1 !important;
}
.form-container .btn-controls .bb-btn > *,
.form-container .estimate-item-action-rail .bb-btn > *,
#u-customer-modal .u-workflow-actions .bb-btn > *,
#u-customer-modal .u-workflow-actions [data-tasker-create-from-record] > * {
    line-height: 1 !important;
}

.estimate-term-modal .position-relative > label.arrow.select {
    display: none !important;
}
.estimate-term-modal input.form-control,
.estimate-term-modal select.form-control,
.estimate-term-modal .bb-input,
.estimate-term-modal .bb-select {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 var(--bb-sp-4) !important;
    border: 1px solid var(--bb-border-input) !important;
    border-radius: var(--bb-radius-s) !important;
    background-color: var(--bb-select-bg) !important;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-semibold) !important;
    box-shadow: none !important;
}
.estimate-term-modal select.form-control,
.estimate-term-modal .bb-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--bb-text-3) 50%), linear-gradient(135deg, var(--bb-text-3) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px !important;
}
.estimate-term-modal .form-group.pt-4,
.estimate-term-modal .form-group.mb-0.pt-4 {
    padding-top: var(--bb-sp-4) !important;
}
.estimate-term-modal .modal-body .bb-btn.w-100,
.estimate-term-modal .modal-body .bb-standard-btn.w-100,
#tax-form-modal .form-button {
    width: 100% !important;
    min-height: 44px !important;
}
.standard-modal .modal-dialog.small-m .modal-footer {
    display: none !important;
}
.standard-modal .modal-dialog.small-m .modal-body > .bb-btn:last-child,
.standard-modal .modal-dialog.small-m .modal-body .form-button:last-child {
    width: 100% !important;
}

#quote-design-templates-modal .modal-body {
    overflow: hidden !important;
}
#quote-design-templates-modal .template-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bb-sp-3);
    padding: var(--bb-sp-4);
}
#quote-design-templates-modal .add-template-btn,
.bb-template-picker .bb-template-picker__create {
    min-height: 40px !important;
    padding: 0 var(--bb-sp-3) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: 1 !important;
    text-transform: none !important;
}
#quote-design-templates-modal #templateList {
    overflow-x: hidden !important;
    padding: var(--bb-sp-3) var(--bb-sp-4) var(--bb-sp-4) !important;
}
#quote-design-templates-modal .template-item {
    max-width: 100%;
    margin: 0 0 var(--bb-sp-2) !important;
    overflow: hidden !important;
}
#quote-design-templates-modal .template-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: var(--bb-sp-3) !important;
    min-width: 0;
}
#quote-design-templates-modal .template-item-meta {
    min-width: 0;
    overflow: hidden;
}
#quote-design-templates-modal .template-item-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-semibold) !important;
}
#quote-design-templates-modal .template-primary-badge {
    min-height: 28px;
    font-size: var(--bb-fs-xs) !important;
    font-weight: var(--bb-fw-semibold) !important;
}
#quote-design-templates-modal .template-primary-badge.active {
    padding: 2px 6px !important;
}
#quote-design-templates-modal .template-primary-label,
#quote-design-templates-modal .template-primary-star {
    font-size: inherit !important;
}
#quote-design-templates-modal .template-item-actions {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    gap: var(--bb-sp-2) !important;
}
#quote-design-templates-modal .template-apply-btn {
    min-height: 36px !important;
    padding-inline: var(--bb-sp-3) !important;
    line-height: 1 !important;
}
#quote-design-templates-modal .template-edit-icon,
#quote-design-templates-modal .template-delete-btn {
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    color: var(--bb-primary) !important;
}

.estimate-tax-modal .modal-header div,
#tax-form-modal .modal-header div {
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-l) !important;
    font-weight: var(--bb-fw-bold) !important;
}
.estimate-tax-modal .tax-list {
    padding: var(--bb-sp-4) !important;
    background: var(--bb-surface) !important;
}
.estimate-tax-modal .tax-item {
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    background: var(--bb-surface-2) !important;
}
.estimate-tax-modal .tax-item + .tax-item {
    margin-top: var(--bb-sp-2) !important;
}
.estimate-tax-modal .tax-item-title,
.estimate-tax-modal .tax-item-percent {
    font-size: var(--bb-fs-s) !important;
}
.estimate-tax-modal .tax-item-edit,
.estimate-tax-modal .tax-item-apply,
.estimate-tax-modal #add-tax-button {
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
#tax-form-modal .modal-body {
    padding: var(--bb-sp-5) !important;
}
#tax-form-modal .form-input {
    font-size: var(--bb-fs-m) !important;
    font-weight: var(--bb-fw-semibold) !important;
}
#tax-form-modal .form-desc {
    color: var(--bb-text-3) !important;
}

#customer-view-appointment-payment-modal .payment-summary__line,
#customer-view-appointment-payment-modal .payment-summary__note {
    background: var(--bb-surface-2) !important;
}
#customer-view-appointment-payment-modal .payment-summary__note-text,
#customer-view-appointment-payment-modal .payment-summary__label,
#customer-view-appointment-payment-modal .form-group div:not(.fw-600):not(.serice-invoice-status) {
    color: var(--bb-text-2) !important;
}
#customer-view-appointment-payment-modal .payment-summary__totals,
#customer-view-appointment-payment-modal .payment-summary__grand-total,
#customer-view-appointment-payment-modal .payment-summary__total-row--grand {
    border-color: var(--bb-border) !important;
}


/* Tax modal final audit guard: legacy Bootstrap/table rules were still winning in espresso. */
.standard-modal.estimate-tax-modal.show .modal-content,
.standard-modal#tax-form-modal.show .modal-content {
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
.standard-modal.estimate-tax-modal.show .modal-header,
.standard-modal#tax-form-modal.show .modal-header {
    border-color: var(--bb-border) !important;
    background: var(--bb-surface) !important;
}
.standard-modal.estimate-tax-modal.show .modal-body,
.standard-modal#tax-form-modal.show .modal-body {
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
}
.standard-modal.estimate-tax-modal.show .tax-item {
    border: 1px solid var(--bb-border) !important;
    border-color: var(--bb-border) !important;
    background: var(--bb-surface-2) !important;
    color: var(--bb-text) !important;
}
.standard-modal.estimate-tax-modal.show .tax-item *,
.standard-modal.estimate-tax-modal.show .tax-item-title {
    color: var(--bb-text) !important;
}
.standard-modal.estimate-tax-modal.show .tax-item-percent {
    color: var(--bb-text-2) !important;
}
.standard-modal.estimate-tax-modal.show .tax-item-edit,
.standard-modal.estimate-tax-modal.show .tax-item-apply,
.standard-modal.estimate-tax-modal.show #add-tax-button,
.standard-modal#tax-form-modal.show .form-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-primary) !important;
    font-size: var(--bb-fs-s) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
.standard-modal.estimate-tax-modal.show .tax-item-apply,
.standard-modal#tax-form-modal.show .form-button {
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}

.standard-modal.estimate-tax-modal.show .modal-content,
.standard-modal#tax-form-modal.show .modal-content {
    border: 1px solid var(--bb-border) !important;
    box-shadow: var(--bb-shadow-2) !important;
}


/* Workflow summary band flatten: one integrated header band, not cards inside cards. */
.form-container .header .customer-data,
.form-container .customer-data {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: var(--bb-sp-4) var(--bb-sp-4) !important;
    gap: 0 !important;
    align-items: center !important;
}
.form-container .header .customer-data-field,
.form-container .customer-data-field {
    min-height: 52px !important;
    padding: 0 var(--bb-sp-4) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.form-container .header .customer-data-field + .customer-data-field,
.form-container .customer-data-field + .customer-data-field {
    border-left: 1px solid var(--bb-border) !important;
}
.form-container .header .customer-data-field:first-child,
.form-container .customer-data-field:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
}
.form-container .header .customer-data-field .data.date input.form-control,
.form-container .customer-data-field .data.date input.form-control {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--bb-text) !important;
    box-shadow: none !important;
}
@media (max-width: 575.98px) {
    .form-container .header .customer-data-field + .customer-data-field,
    .form-container .customer-data-field + .customer-data-field {
        border-left: 0 !important;
        border-top: 1px solid var(--bb-border) !important;
        padding-top: var(--bb-sp-3) !important;
    }
    .form-container .header .customer-data-field:first-child,
    .form-container .customer-data-field:first-child {
        padding-left: var(--bb-sp-4) !important;
    }
}


/* Workflow item modal hardening: the invoice/estimate create flow injects
   price-book item modals after page CSS, so lock their visible component
   contract here without touching JS hook classes. */
.price-book-modal.standard-modal .modal-content {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}
.price-book-modal.standard-modal .modal-body,
.price-book-modal.standard-modal .form-wrapper,
.price-book-modal.standard-modal .request-modal-wrapper {
    background: transparent !important;
    color: var(--bb-text) !important;
}
.price-book-modal.standard-modal .input-label,
.price-book-modal.standard-modal label {
    color: var(--bb-text-2) !important;
}
.price-book-modal.standard-modal .modal-form-btn.bb-btn--primary:not(:disabled),
.price-book-modal.standard-modal .modal-form-btn.btn-primary:not(:disabled) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
    line-height: 1 !important;
}
.price-book-modal.standard-modal .modal-form-btn.bb-btn--primary:not(:disabled):hover,
.price-book-modal.standard-modal .modal-form-btn.btn-primary:not(:disabled):hover {
    background: var(--bb-primary-hover) !important;
    border-color: var(--bb-primary-hover) !important;
    color: var(--bb-on-primary) !important;
}
.price-book-modal.standard-modal .switch-block {
    gap: var(--bb-sp-3) !important;
}
.price-book-modal.standard-modal .switch-block .input-label {
    margin-left: 0 !important;
}
.price-book-modal.standard-modal #item-image-upload-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2) !important;
    width: 100% !important;
    min-height: 48px !important;
    border: 1px dashed var(--bb-primary) !important;
    border-radius: var(--bb-radius-s) !important;
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
    font-weight: var(--bb-fw-semibold) !important;
    line-height: 1 !important;
}
.price-book-modal.standard-modal #item-image-upload-btn:hover {
    background: var(--bb-primary) !important;
    color: var(--bb-on-primary) !important;
}

/* Small standard modal body actions: small modals do not use a footer bar. */
.standard-modal .bb-confirm-copy {
    color: var(--bb-text-2) !important;
    font-size: var(--bb-fs-m) !important;
    line-height: var(--bb-lh-normal) !important;
}
.standard-modal .bb-small-modal-actions {
    display: grid !important;
    gap: var(--bb-sp-2) !important;
    margin-top: var(--bb-sp-4) !important;
}
.standard-modal .bb-small-modal-actions .bb-btn {
    width: 100% !important;
}

/* ============================================================================
   NOTEPAD (2026 redesign) — three-pane notes surface. v204.
   One responsive markup: rail | list | editor on desktop; on mobile the list
   is the landing screen and the editor pushes over it (.is-doc-open).
   ============================================================================ */
.bb-notepad {
    display: grid;
    grid-template-columns: 250px 330px 1fr;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    box-shadow: var(--bb-shadow-1);
    overflow: hidden;
    min-height: 640px;
    height: calc(100vh - 230px);
}

/* ---- pane 1: rail ---- */
.bb-notepad .bbnp-rail {
    border-right: 1px solid var(--bb-border);
    display: flex;
    flex-direction: column;
    padding: var(--bb-sp-4) var(--bb-sp-3);
    gap: 2px;
    min-height: 0;
}
.bb-notepad .bbnp-rail__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--bb-radius-m);
    cursor: pointer;
    color: var(--bb-text);
    position: relative;
    flex: none;
}
.bb-notepad .bbnp-rail__item:hover { background: var(--bb-inset); }
.bb-notepad .bbnp-rail__item.is-on { background: var(--bb-primary-soft); color: var(--bb-primary); }
.bb-notepad .bbnp-rail__item.is-drop { outline: 2px dashed var(--bb-primary); outline-offset: -2px; }
.bb-notepad .bbnp-rail__ico { color: var(--bb-text-3); display: inline-flex; flex: none; }
.bb-notepad .bbnp-rail__ico svg { width: 18px; height: 18px; }
.bb-notepad .bbnp-rail__item.is-on .bbnp-rail__ico,
.bb-notepad .bbnp-rail__item.is-on .bbnp-rail__count { color: var(--bb-primary); }
.bb-notepad .bbnp-rail__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--bb-fw-medium);
    font-size: var(--bb-fs-m);
}
.bb-notepad .bbnp-rail__count { color: var(--bb-text-3); font-size: var(--bb-fs-s); font-weight: var(--bb-fw-medium); }
.bb-notepad .bbnp-rail__edit {
    position: absolute;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--bb-text-3);
    padding: 2px;
    display: none;
    cursor: pointer;
    line-height: 0;
}
.bb-notepad .bbnp-rail__edit svg { width: 15px; height: 15px; }
.bb-notepad .bbnp-rail__item:hover .bbnp-rail__edit { display: inline-flex; }
.bb-notepad .bbnp-rail__item:hover .bbnp-rail__count { visibility: hidden; }
.bb-notepad .bbnp-rail__group {
    margin: 14px 12px 6px;
    font-size: var(--bb-fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bb-text-3);
    font-weight: var(--bb-fw-semibold);
    flex: none;
}
.bb-notepad .bbnp-rail__folders { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
/* One treatment for both pane footers — they were a borderless button in the
   rail and an outlined bb-btn in the list, which read as two different things. */
.bb-notepad .bbnp-pane-new {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* both panes inset the button by exactly 12px and sit 12px off the bottom;
       the rail supplies its 12px through its own padding, the list through
       these margins, so the two buttons line up on the same baseline. */
    width: 100%;
    margin-bottom: 0;
    color: var(--bb-text-2);
    padding: 10px 12px;
    border: 1px dashed var(--bb-border-strong);
    background: transparent;
    border-radius: var(--bb-radius-m);
    cursor: pointer;
    font: inherit;
    font-weight: var(--bb-fw-medium);
    font-size: var(--bb-fs-m);
    flex: none;
}
.bb-notepad .bbnp-pane-new:hover {
    background: var(--bb-inset);
    color: var(--bb-text);
    border-color: var(--bb-text-3);
}
.bb-notepad .bbnp-pane-new svg { width: 16px; height: 16px; flex: none; }
/* the list pane has no padding of its own — give its footer the same 12px */
.bb-notepad .bbnp-list .bbnp-pane-new { width: calc(100% - 24px); margin: 0 12px 12px; }
/* the rail already pads 12px; keep its bottom padding as the 12px offset */
.bb-notepad .bbnp-rail { padding-bottom: 12px; }

/* ---- pane 2: list ---- */
.bb-notepad .bbnp-list { border-right: 1px solid var(--bb-border); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bb-notepad .bbnp-list__tools { padding: var(--bb-sp-4); display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--bb-border); flex: none; }
.bb-notepad .bbnp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bb-inset);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    padding: 8px 12px;
    color: var(--bb-text-3);
}
.bb-notepad .bbnp-search svg { width: 15px; height: 15px; flex: none; }
.bb-notepad .bbnp-search input {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--bb-fs-m);
    color: var(--bb-text);
    outline: 0;
    width: 100%;
    padding: 0;
}
/* main.scss:2884 puts an !important border + glow on EVERY input:focus. Inside
   an input that already sits in a bordered container that draws a second box.
   Kill it on the inner field and let the container own the focus state. */
.bb-notepad .bbnp-search input:focus,
.bb-notepad .bbnp-linkpick input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.bb-notepad .bbnp-search:focus-within {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}
.bb-notepad .bbnp-linkpick input:focus { border: 1px solid var(--bb-primary) !important; }
.bb-notepad .bbnp-list__meta { display: flex; align-items: center; justify-content: space-between; color: var(--bb-text-2); font-size: var(--bb-fs-s); }
/* Uses the library field contract (.bb-select) — this only sizes it for the
   compact list toolbar instead of a full-width form field. */
.bb-notepad .bbnp-sort {
    width: auto;
    padding: 5px 30px 5px 10px;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-text-2);
    background-position: right 9px center;
}
.bb-notepad .bbnp-sort:hover { color: var(--bb-text); }

.bb-notepad .bbnp-cards { overflow-y: auto; flex: 1; padding: 10px; min-height: 0; }
.bb-notepad .bbnp-card {
    padding: 12px 14px;
    border-radius: var(--bb-radius-m);
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 4px;
}
.bb-notepad .bbnp-card:hover { background: var(--bb-inset); }
.bb-notepad .bbnp-card.is-on { background: var(--bb-primary-soft); }
.bb-notepad .bbnp-card.is-on .bbnp-card__title { color: var(--bb-primary); }
.bb-notepad .bbnp-card__title {
    font-weight: var(--bb-fw-semibold);
    font-size: var(--bb-fs-m);
    color: var(--bb-text);
    display: flex;
    align-items: center;
    gap: 7px;
    word-break: break-word;
}
.bb-notepad .bbnp-card__pin { color: var(--bb-amber); display: inline-flex; flex: none; }
.bb-notepad .bbnp-card__pin svg { width: 13px; height: 13px; }
.bb-notepad .bbnp-card__preview {
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.bb-notepad .bbnp-card__meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--bb-text-3); font-size: var(--bb-fs-xs); flex-wrap: wrap; }
.bb-notepad .bbnp-card__chip {
    background: var(--bb-info-bg);
    color: var(--bb-text-2);
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: var(--bb-fw-medium);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-notepad .bbnp-card__att, .bb-notepad .bbnp-card__lock { display: inline-flex; align-items: center; gap: 3px; }
.bb-notepad .bbnp-cards__empty { text-align: center; padding: 48px 20px; color: var(--bb-text-3); }
.bb-notepad .bbnp-cards__empty-title { font-weight: var(--bb-fw-semibold); color: var(--bb-text-2); margin-bottom: 4px; }
.bb-notepad .bbnp-list__new { margin: 10px; flex: none; }

/* ---- pane 3: editor ---- */
.bb-notepad .bbnp-ed { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.bb-notepad .bbnp-ed__empty {
    margin: auto;
    text-align: center;
    color: var(--bb-text-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: var(--bb-fs-m);
}
.bb-notepad .bbnp-ed__empty-ico { opacity: .5; }
.bb-notepad .bbnp-ed__doc { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bb-notepad .bbnp-ed__doc.d-none { display: none !important; }
.bb-notepad .bbnp-ed__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--bb-sp-5);
    border-bottom: 1px solid var(--bb-border);
    flex: none;
    flex-wrap: wrap;
}
.bb-notepad .bbnp-back {
    display: none;
    border: 0;
    background: transparent;
    color: var(--bb-text-2);
    padding: 4px;
    cursor: pointer;
    line-height: 0;
}
.bb-notepad .bbnp-back svg { width: 20px; height: 20px; }
.bb-notepad .bbnp-crumb {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--bb-inset);
    color: var(--bb-text-2);
    font: inherit;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bb-notepad .bbnp-saved { margin-left: auto; font-size: var(--bb-fs-s); }
.bb-notepad .bbnp-saved.is-saved { color: var(--bb-success); }
.bb-notepad .bbnp-saved.is-saving { color: var(--bb-text-3); }
.bb-notepad .bbnp-saved.is-error { color: var(--bb-danger); }
.bb-notepad .bbnp-ed__icons { display: flex; gap: 2px; }
.bb-notepad .bbnp-iconbtn {
    border: 0;
    background: transparent;
    color: var(--bb-text-2);
    width: 34px;
    height: 32px;
    border-radius: var(--bb-radius-s);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.bb-notepad .bbnp-iconbtn:hover { background: var(--bb-inset); color: var(--bb-text); }
.bb-notepad .bbnp-iconbtn.is-on { color: var(--bb-amber); }
.bb-notepad .bbnp-iconbtn.is-on svg { fill: currentColor; }
.bb-notepad .bbnp-iconbtn svg { width: 18px; height: 18px; }
.bb-notepad .bbnp-ed__scroll { overflow-y: auto; flex: 1; padding: 22px 40px 30px; min-height: 0; }
.bb-notepad .bbnp-title {
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-bold);
    line-height: var(--bb-lh-tight);
    color: var(--bb-text);
    outline: none;
    border: 0;
    margin: 0 0 4px;
    word-break: break-word;
}
.bb-notepad .bbnp-title:empty::before { content: 'Untitled note'; color: var(--bb-text-3); }
.bb-notepad .bbnp-meta { color: var(--bb-text-3); font-size: var(--bb-fs-s); margin-bottom: 6px; }
.bb-notepad .bbnp-toolbar {
    position: sticky;
    top: -22px;
    background: var(--bb-surface);
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bb-border);
    margin-bottom: 16px;
    z-index: 2;
}
.bb-notepad .bbnp-tb {
    border: 0;
    background: transparent;
    color: var(--bb-text-2);
    width: 32px;
    height: 30px;
    border-radius: var(--bb-radius-s);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: var(--bb-fw-semibold);
    font-size: var(--bb-fs-m);
}
.bb-notepad .bbnp-tb:hover { background: var(--bb-inset); color: var(--bb-text); }
.bb-notepad .bbnp-tb-sep { width: 1px; height: 18px; background: var(--bb-border); margin: 0 6px; }
.bb-notepad .bbnp-tb-mark { background: var(--bb-amber-bg); color: var(--bb-amber); border-radius: 3px; padding: 0 4px; font-size: 12px; }
.bb-notepad .bbnp-body {
    font-size: var(--bb-fs-l);
    color: var(--bb-text);
    line-height: var(--bb-lh-body);
    outline: none;
    max-width: 860px;
    word-break: break-word;
}
.bb-notepad .bbnp-body[contenteditable="true"]:empty::before { content: 'Start writing…'; color: var(--bb-text-3); }
.bb-notepad .bbnp-body h3 { font-size: var(--bb-fs-l); font-weight: var(--bb-fw-semibold); margin: 16px 0 6px; }
.bb-notepad .bbnp-body h4 { font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); margin: 14px 0 4px; }
.bb-notepad .bbnp-body p { margin: 8px 0; }
.bb-notepad .bbnp-body a { color: var(--bb-primary); text-decoration: underline; }
.bb-notepad .bbnp-body mark { background: var(--bb-amber-bg); color: var(--bb-amber); border-radius: 3px; padding: 0 3px; }
.bb-notepad .bbnp-body ul, .bb-notepad .bbnp-body ol { padding-left: 24px; margin: 8px 0; }
.bb-notepad .bbnp-body ul[data-checklist] { list-style: none; padding-left: 2px; }
.bb-notepad .bbnp-body ul[data-checklist] li {
    position: relative;
    padding-left: 30px;
    margin: 6px 0;
    cursor: default;
}
.bb-notepad .bbnp-body ul[data-checklist] li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 1.7px solid var(--bb-border-strong);
    border-radius: 5px;
    background: var(--bb-surface);
    cursor: pointer;
    box-sizing: border-box;
}
.bb-notepad .bbnp-body ul[data-checklist] li[data-checked="true"]::before {
    background: var(--bb-success) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat;
    border-color: var(--bb-success);
}
.bb-notepad .bbnp-body ul[data-checklist] li[data-checked="true"] { color: var(--bb-text-3); text-decoration: line-through; }
/* ---- attachment chips (replaced the legacy file-item-card: red underlined
       download/delete/preview links with no confirm) ---- */
.bb-notepad .bbnp-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bb-notepad .bbnp-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
    padding: 8px 10px 8px 12px;
    max-width: 320px;
}
.bb-notepad .bbnp-file__ico { color: var(--bb-primary); display: inline-flex; flex: none; }
.bb-notepad .bbnp-file__ico svg { width: 18px; height: 18px; }
.bb-notepad .bbnp-file__info { display: flex; flex-direction: column; min-width: 0; }
.bb-notepad .bbnp-file__name {
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-notepad .bbnp-file__size { font-size: var(--bb-fs-xs); color: var(--bb-text-3); }
.bb-notepad .bbnp-file__actions { display: inline-flex; gap: 2px; margin-left: auto; }
.bb-notepad .bbnp-file__act {
    border: 0;
    background: transparent;
    color: var(--bb-text-3);
    width: 26px;
    height: 26px;
    border-radius: var(--bb-radius-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex: none;
}
.bb-notepad .bbnp-file__act svg { width: 15px; height: 15px; }
.bb-notepad .bbnp-file__act:hover { background: var(--bb-surface); color: var(--bb-text); }
.bb-notepad .bbnp-file__act--danger:hover { color: var(--bb-danger); }

/* ---- who a note is shared with (visible without opening the dialog) ---- */
.bb-notepad .bbnp-shared-with { display: inline-flex; align-items: center; }
.bb-notepad .bbnp-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bb-info-bg);
    color: var(--bb-text-2);
    border: 2px solid var(--bb-surface);
    margin-left: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--bb-fw-semibold);
    flex: none;
}
.bb-notepad .bbnp-avatar:first-child { margin-left: 0; }
.bb-notepad .bbnp-avatar.is-editor { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-notepad .bbnp-avatar--more { background: var(--bb-primary-soft); color: var(--bb-primary); }

/* ---- overflow menu (destructive action out of the icon row) ---- */
.bb-notepad .bbnp-more { position: relative; display: inline-flex; }
.bb-notepad .bbnp-more__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    box-shadow: var(--bb-shadow-2);
    padding: 6px;
    z-index: 20;
}
.bb-notepad .bbnp-more__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--bb-text);
    font: inherit;
    font-size: var(--bb-fs-m);
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--bb-radius-s);
    cursor: pointer;
}
.bb-notepad .bbnp-more__item:hover { background: var(--bb-inset); }
.bb-notepad .bbnp-more__item--danger { color: var(--bb-danger); }
.bb-notepad .bbnp-more__item--danger:hover { background: var(--bb-danger-bg); }
.bb-notepad .bbnp-links {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--bb-border);
    flex-wrap: wrap;
    position: relative;
}
.bb-notepad .bbnp-links__label { color: var(--bb-text-3); font-size: var(--bb-fs-s); }
.bb-notepad .bbnp-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bb-info-bg);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-text-2);
}
.bb-notepad .bbnp-link-chip__x {
    border: 0;
    background: transparent;
    color: var(--bb-text-3);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.bb-notepad .bbnp-link-chip__x:hover { color: var(--bb-danger); }
.bb-notepad .bbnp-links__add {
    color: var(--bb-text-3);
    font-size: var(--bb-fs-s);
    border: 1.5px dashed var(--bb-border-strong);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
}
.bb-notepad .bbnp-links__add:hover { color: var(--bb-text-2); border-color: var(--bb-text-3); }
.bb-notepad .bbnp-linkpick {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: 320px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    box-shadow: var(--bb-shadow-2);
    padding: 10px;
    z-index: 5;
}
.bb-notepad .bbnp-linkpick input {
    width: 100%;
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
    padding: 7px 10px;
    font: inherit;
    font-size: var(--bb-fs-s);
    background: var(--bb-surface);
    color: var(--bb-text);
    outline: none;
}
.bb-notepad .bbnp-linkpick__row { padding: 8px 10px; border-radius: var(--bb-radius-s); cursor: pointer; font-size: var(--bb-fs-s); color: var(--bb-text); }
.bb-notepad .bbnp-linkpick__row:hover { background: var(--bb-inset); }
.bb-notepad .bbnp-linkpick__row.is-muted { color: var(--bb-text-3); cursor: default; }

/* ---- notepad modals ---- */
.bbnp-label { font-size: var(--bb-fs-m); font-weight: var(--bb-fw-medium); color: var(--bb-text-2); }
.bbnp-confirm-text { color: var(--bb-text-2); font-size: var(--bb-fs-m); margin-bottom: var(--bb-sp-4); }
.bbnp-share-everyone {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bb-inset);
    border-radius: var(--bb-radius-m);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.bbnp-share-everyone__text { flex: 1; display: flex; flex-direction: column; }
.bbnp-share-everyone__text b { font-size: var(--bb-fs-m); font-weight: var(--bb-fw-medium); color: var(--bb-text); }
.bbnp-share-everyone__text span { font-size: var(--bb-fs-s); color: var(--bb-text-2); }
.bbnp-share-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.bbnp-share-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bb-amber-bg);
    color: var(--bb-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
    flex: none;
}
.bbnp-share-name { flex: 1; font-size: var(--bb-fs-m); color: var(--bb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbnp-role-select { width: auto !important; min-width: 120px; font-size: var(--bb-fs-s) !important; }
.bbnp-share-footnote { color: var(--bb-text-3); font-size: var(--bb-fs-xs); margin: 10px 0 14px; }
.bbnp-share-empty { color: var(--bb-text-3); font-size: var(--bb-fs-s); padding: 12px 0; }

/* ---- mobile: list is the landing screen, editor pushes over ---- */
@media (max-width: 991.98px) {
    .bb-notepad { grid-template-columns: 220px 1fr; }
    .bb-notepad .bbnp-ed { display: none; }
    .bb-notepad.is-doc-open .bbnp-ed { display: flex; position: absolute; inset: 0; background: var(--bb-surface); z-index: 4; }
    .bb-notepad.is-doc-open { position: relative; }
    .bb-notepad .bbnp-back { display: inline-flex; }
    .bb-notepad .bbnp-list { border-right: 0; }
}
@media (max-width: 767.98px) {
    .bb-notepad { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 170px); min-height: 480px; }
    .bb-notepad .bbnp-rail { flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bb-border); padding: 8px 10px; gap: 6px; }
    .bb-notepad .bbnp-rail__item { flex: none; padding: 7px 12px; }
    .bb-notepad .bbnp-rail__group { display: none; }
    .bb-notepad .bbnp-rail__folders { display: flex; flex-direction: row; overflow: visible; gap: 6px; }
    .bb-notepad .bbnp-rail__new { margin-top: 0; flex: none; white-space: nowrap; }
    .bb-notepad .bbnp-rail__edit { display: none !important; }
    .bb-notepad .bbnp-rail__item:hover .bbnp-rail__count { visibility: visible; }
    .bb-notepad .bbnp-ed__scroll { padding: 16px 16px 24px; }
    .bb-notepad .bbnp-ed__bar { padding: 10px 12px; }
    .bb-notepad .bbnp-linkpick { width: min(320px, calc(100vw - 60px)); }
}

/* ============================================================================
   CHECKLIST RUNNER — the one component every checklist surface renders.
   Replaces the two duplicate view modals (worker_cabinet/job_checklist_modal +
   jobs-flow/modal-forms/checklist-view-modal), each of which carried its own
   inline <style> with hardcoded #1A1A1A / #D7D7D7 / #F6F6F6 / #B5B5B5 — the
   reason espresso showed a white header slab and an invisible "Admin Comments".
   Everything below is tokenized, so both skins come for free.
   PLAN-CHECKLISTS-REBUILD Phase 3.
   ============================================================================ */
.bb-cl { display: grid; gap: var(--bb-sp-4); }

/* --- work header: the facts a worker needs before they start --- */
.bb-cl__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--bb-sp-3); }
.bb-cl__meta dt { font-size: var(--bb-fs-xs); font-weight: var(--bb-fw-regular); color: var(--bb-text-2); margin: 0; }
.bb-cl__meta dd { font-size: var(--bb-fs-m); color: var(--bb-text); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; }

/* --- progress --- */
.bb-cl__bar { height: 6px; border-radius: 999px; background: var(--bb-inset); border: 1px solid var(--bb-border); overflow: hidden; }
.bb-cl__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bb-amber); transition: width .25s, background .25s; }
.bb-cl__bar.is-complete > i { background: var(--bb-success-bright); }
.bb-cl__count { font-size: var(--bb-fs-s); font-weight: var(--bb-fw-semibold); color: var(--bb-text-2); white-space: nowrap; }

/* --- the rows --- */
.bb-cl__list { display: grid; gap: var(--bb-sp-2); }
.bb-cl__item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--bb-sp-3);
    align-items: start; padding: var(--bb-sp-3) var(--bb-sp-4); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m); background: var(--bb-surface); transition: border-color .15s, background .15s; }
.bb-cl__item.is-closed { background: var(--bb-inset); }
.bb-cl__item.is-closed .bb-cl__t { color: var(--bb-text-2); text-decoration: line-through; text-decoration-color: var(--bb-text-3); }
.bb-cl__t { font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.bb-cl__d { font-size: var(--bb-fs-s); color: var(--bb-text-2); margin-top: 2px; }
.bb-cl__flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bb-cl__stamp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--bb-fs-xs); color: var(--bb-text-3); margin-top: 6px; }

/* The tick target. Was an <input type=button> styled as an underlined red link —
   roughly 11px tall on a phone, in gloves. */
.bb-cl__tick { width: 26px; height: 26px; flex: none; margin-top: -1px; border-radius: 8px;
    border: 1.5px solid var(--bb-border-strong); background: var(--bb-surface); color: transparent;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s, color .12s; padding: 0; }
.bb-cl__tick:hover { border-color: var(--bb-primary); }
.bb-cl__tick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bb-primary-soft); }
.bb-cl__tick.is-done { background: var(--bb-success); border-color: var(--bb-success); color: #fff; }
.bb-cl__tick.is-na { background: var(--bb-inset); border-color: var(--bb-border-strong); color: var(--bb-text-3); }
.bb-cl__tick[disabled] { cursor: default; }
.bb-cl__tick .bb-icon { width: 16px; height: 16px; }

/* Requirement / state chips on a row. */
.bb-cl__flag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold); color: var(--bb-text-2); background: var(--bb-inset);
    border: 1px solid var(--bb-border); border-radius: 999px; padding: 3px 9px; line-height: 1.2; }
.bb-cl__flag--req { color: var(--bb-amber); background: var(--bb-amber-bg); border-color: transparent; }
.bb-cl__flag--ok { color: var(--bb-success); background: var(--bb-success-bg); border-color: transparent; }
/* An action chip on a runner row ("Add photo", "Mark N/A") — a real action, so it reads as a
   control rather than a placeholder. It was dashed (which everywhere else in this platform
   means "drop something here"), and its hover state was identical to the pressed state the
   editor used. The editor no longer uses this class at all: item rules are checkboxes. */
.bb-cl__flag--btn { min-height: 30px; padding: 5px 11px; background: var(--bb-surface);
    border-color: var(--bb-border-strong); cursor: pointer; }
.bb-cl__flag--btn:hover { border-color: var(--bb-primary); background: var(--bb-primary-soft); color: var(--bb-primary); }

/* Per-row result line: every tap saves on its own, so every row can fail on its own. */
.bb-cl__msg { grid-column: 2 / -1; margin-top: 8px; font-size: var(--bb-fs-s); border-radius: var(--bb-radius-s);
    padding: 8px 12px; background: var(--bb-inset); color: var(--bb-text-2); }
.bb-cl__msg--error { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-cl__msg--ok { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-cl__item.is-busy { opacity: .6; pointer-events: none; }

.bb-cl__thumb { width: 44px; height: 44px; border-radius: var(--bb-radius-s); border: 1px solid var(--bb-border);
    background: var(--bb-inset); display: inline-flex; align-items: center; justify-content: center;
    color: var(--bb-text-3); flex: none; overflow: hidden; }
.bb-cl__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bb-cl__thumb:hover { border-color: var(--bb-primary); }

/* Photos taken against a step. Always in the markup so the runner has somewhere to append;
   :empty keeps it from opening a gap on the rows that have none. */
.bb-cl__shots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bb-cl__shots:empty { display: none; }

/* "Add photo" — the chip that opens the platform's shared upload dialog. */
.bb-cl__shoot { cursor: pointer; }
.bb-cl__shoot:focus-visible { outline: none; border-style: solid; border-color: var(--bb-primary);
    color: var(--bb-primary); box-shadow: 0 0 0 3px var(--bb-primary-soft); }

.bb-cl__note { border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m);
    background: var(--bb-inset); padding: var(--bb-sp-3) var(--bb-sp-4); font-size: var(--bb-fs-s); color: var(--bb-text-2); }
.bb-cl__note b { color: var(--bb-text); }

.bb-cl__empty { text-align: center; padding: var(--bb-sp-6) var(--bb-sp-4); border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-m); background: var(--bb-inset); color: var(--bb-text-2); font-size: var(--bb-fs-s); }

/* Narrow: the trailing cell drops under the text rather than crushing the title. */
@media (max-width: 560px) {
    .bb-cl__item { grid-template-columns: auto 1fr; }
    .bb-cl__item > *:nth-child(3) { grid-column: 2; justify-self: start; margin-top: var(--bb-sp-2); }
    .bb-cl__msg { grid-column: 1 / -1; }
}

/* ---- checklist editor (.bb-cle) --------------------------------------------
   Shared checklist/template editor. Reordering works with pointer, touch and keyboard. */
.bb-cle { display: grid; gap: var(--bb-sp-5); }
.bb-cle__applies { margin: 0; padding: 0; border: 0; }
.bb-cle__applies legend { margin-bottom: var(--bb-sp-2); font-size: var(--bb-fs-s); font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.bb-cle__section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--bb-sp-3); margin-bottom: var(--bb-sp-3); }
.bb-cle__section-title { font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.bb-cle__section-help, .bb-cle__field-help { margin-top: 3px; color: var(--bb-text-2); font-size: var(--bb-fs-s); line-height: 1.45; }
.bb-cle__count { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--bb-inset); color: var(--bb-text-2); font-size: var(--bb-fs-xs); font-weight: var(--bb-fw-semibold); }
.bb-cle__list { display: grid; gap: var(--bb-sp-3); }
.bb-cle__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--bb-sp-3); align-items: start; padding: var(--bb-sp-4); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); background: var(--bb-surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.bb-cle__row:hover { border-color: var(--bb-border-strong); }
.bb-cle__row.is-locked { background: var(--bb-inset); }
.bb-cle__row.is-dragging { z-index: 3; opacity: .82; border-color: var(--bb-primary); box-shadow: var(--bb-shadow-m); transform: scale(1.01); }
.bb-cle__number { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-primary-soft); color: var(--bb-primary); font-size: var(--bb-fs-s); font-weight: var(--bb-fw-bold); }
.bb-cle__fields { display: grid; gap: 7px; min-width: 0; }
.bb-cle__title, .bb-cle__desc { width: 100%; }
.bb-cle__title { font-weight: var(--bb-fw-semibold); }
.bb-cle__desc { font-size: var(--bb-fs-s); color: var(--bb-text-2); }
/* Item rules — the catalog checkbox, not pill buttons. A requirement and an allowance are
   different things, so they are not one undifferentiated row of three. */
.bb-cle__rules { display: grid; gap: 6px; padding-top: 4px; }
.bb-cle__requirements { display: flex; align-items: center; gap: var(--bb-sp-4); flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.bb-cle__requirements legend { float: left; width: auto; margin: 0 var(--bb-sp-2) 0 0; padding: 0; font-size: var(--bb-fs-s); color: var(--bb-text-2); }
.bb-cle__rules .bb-check { font-size: var(--bb-fs-s); }
.bb-cle__allow-na { color: var(--bb-text-2); }

/* Reorder controls group together; Remove is deliberately set apart from them. */
.bb-cle__actions { display: flex; align-items: center; gap: var(--bb-sp-3); }
.bb-cle__order { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); background: var(--bb-inset); }
.bb-cle__action { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--bb-radius-s); background: transparent; color: var(--bb-text-2); font-family: var(--bb-font); line-height: 1; cursor: pointer; }
.bb-cle__action:hover { border-color: var(--bb-border); background: var(--bb-surface); color: var(--bb-text); }
.bb-cle__action:focus-visible { outline: none; border-color: var(--bb-primary); box-shadow: 0 0 0 3px var(--bb-primary-soft); }
.bb-cle__drag { cursor: grab; touch-action: none; }
.bb-cle__drag:active { cursor: grabbing; }
.bb-cle__remove:hover { border-color: var(--bb-danger); background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-cle__locked-title { font-weight: var(--bb-fw-semibold); color: var(--bb-text-2); text-decoration: line-through; text-decoration-color: var(--bb-text-3); }
.bb-cle__locked-desc { margin-top: 2px; color: var(--bb-text-2); font-size: var(--bb-fs-s); }
/* No height override. `bb-btn--s` is 32px and the footer buttons are 32px; this used to force
   40px, so one modal shipped the same button token at two different sizes. */
.bb-cle__add { margin-top: var(--bb-sp-3); border-style: solid; }
.bb-cle__optional { margin-left: 5px; color: var(--bb-text-3); font-weight: var(--bb-fw-regular); }

/* ---- checklist template picker (.bb-clp) ---------------------------------- */
.bb-clp { display: grid; }
.bb-clp__row { display: grid; grid-template-columns: auto 1fr; gap: var(--bb-sp-3); align-items: start; padding: var(--bb-sp-3) 0; border-bottom: 1px solid var(--bb-border); cursor: pointer; margin: 0; }
.bb-clp__row:first-child { border-top: 1px solid var(--bb-border); }
.bb-clp__row:hover { background: var(--bb-primary-soft); }
/* The control is the catalog radio (.bb-check--radio on the row). .bb-clp__row is declared
   after .bb-check, so the row keeps its own grid `display`; only the box needs nudging to sit
   on the first text line. There used to be a private .bb-clp__dot that reimplemented it. */
.bb-clp__row .bb-check__box { margin-top: 2px; }
.bb-clp__main { display: block; min-width: 0; }
.bb-clp__n { display: block; font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.bb-clp__m { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: var(--bb-fs-s); color: var(--bb-text-2); }
/* The item preview is information, not a set of controls. It used to be a row of pills that
   looked exactly like the status chips beside them and read as tappable — nothing here is. */
.bb-clp__preview { display: block; margin-top: 4px; color: var(--bb-text-3); font-size: var(--bb-fs-s); line-height: 1.45; }

/* ---- checklist template library (.bb-cllib) ------------------------------- */
/* Filters are the catalog `.subtabs`; the toolbar only has to align them with the search box. */
.bb-cllib__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bb-sp-4); margin-bottom: var(--bb-sp-4); }
.bb-cllib__toolbar .subtabs { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.bb-cllib__search { flex: 0 0 auto; width: 250px; max-width: 100%; margin: 0 0 6px; }
.bb-cllib__menu-btn { width: 32px; padding: 0; }
.bb-cllib__list { display: grid; }
.bb-cllib__row { display: grid; gap: var(--bb-sp-2); padding: var(--bb-sp-4) var(--bb-sp-3); margin: 0 calc(var(--bb-sp-3) * -1); border-radius: var(--bb-radius-m); border-bottom: 1px solid var(--bb-border); transition: background .12s; }
.bb-cllib__row:hover { background: var(--bb-inset); }
.bb-cllib__row:focus-within { background: var(--bb-inset); }
.bb-cllib__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bb-sp-4); }
.bb-cllib__identity { min-width: 0; }
.bb-cllib__name { display: flex; align-items: center; gap: var(--bb-sp-2); flex-wrap: wrap; color: var(--bb-text); font-size: var(--bb-fs-l); font-weight: var(--bb-fw-semibold); }
.bb-cllib__meta { display: flex; align-items: center; gap: var(--bb-sp-2); flex-wrap: wrap; margin-top: 4px; color: var(--bb-text-2); font-size: var(--bb-fs-s); }
.bb-cllib__acts { display: flex; align-items: center; gap: var(--bb-sp-2); flex: none; }
.bb-cllib__menu-wrap { position: relative; }
.bb-cllib__menu { position: absolute; z-index: 12; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 6px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); background: var(--bb-surface); box-shadow: var(--bb-shadow-m); }
.bb-cllib__menu button { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--bb-radius-s); background: transparent; color: var(--bb-text); font-family: var(--bb-font); font-size: var(--bb-fs-s); text-align: left; cursor: pointer; }
.bb-cllib__menu button:hover, .bb-cllib__menu button:focus { outline: none; background: var(--bb-inset); }
.bb-cllib__menu button.is-danger { color: var(--bb-danger); }
.bb-cllib__row[data-archived="1"] { opacity: .76; }
.bb-cllib__zero { display: grid; justify-items: center; gap: 6px; padding: var(--bb-sp-7) var(--bb-sp-4); border: 1px dashed var(--bb-border-strong); border-radius: var(--bb-radius-m); background: var(--bb-inset); color: var(--bb-text-2); text-align: center; }
.bb-cllib__zero strong { color: var(--bb-text); font-size: var(--bb-fs-m); }
.bb-cllib__zero-icon { width: 44px; height: 44px; margin-bottom: var(--bb-sp-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-success-bg); color: var(--bb-success); font-weight: var(--bb-fw-bold); }
.bb-clconfirm { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--bb-sp-4); align-items: start; max-width: 620px; margin: var(--bb-sp-5) auto; }
.bb-clconfirm__icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-danger-bg); color: var(--bb-danger); font-size: 22px; font-weight: var(--bb-fw-bold); }
.bb-clconfirm__eyebrow { margin-bottom: 5px; color: var(--bb-primary); font-size: var(--bb-fs-xs); font-weight: var(--bb-fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.bb-clconfirm h3 { margin: 0 0 var(--bb-sp-2); color: var(--bb-text); font-size: var(--bb-fs-xl); }
.bb-clconfirm p { margin: 0; color: var(--bb-text-2); line-height: 1.5; }
.bb-clconfirm__note { margin-top: var(--bb-sp-4); padding: var(--bb-sp-3); 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: 1.5; }

@media (max-width: 720px) {
    .bb-cllib__toolbar { flex-direction: column; align-items: stretch; }
    .bb-cllib__search { width: 100%; margin-bottom: 0; }
    .bb-cllib__toolbar .subtabs { overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 560px) {
    .bb-cle { gap: var(--bb-sp-4); }
    .bb-cle__section-head { align-items: center; }
    .bb-cle__section-help { max-width: 250px; }
    .bb-cle__row { grid-template-columns: 32px minmax(0, 1fr); padding: var(--bb-sp-3); }
    .bb-cle__actions { grid-column: 2; justify-content: flex-end; }
    /* 44px targets on a phone — the crew's manager is often on one too. */
    .bb-cle__action { width: 44px; height: 44px; }
    .bb-cl__flag--btn { min-height: 40px; }
    .bb-cle__add { width: 100%; justify-content: center; }
    .bb-cllib__head { align-items: center; }
    .bb-cllib__name { font-size: var(--bb-fs-m); }
    .bb-cllib__acts .template-edit-btn { min-height: 44px; }
    .bb-cllib__menu { position: fixed; left: var(--bb-sp-3); right: var(--bb-sp-3); top: auto; bottom: var(--bb-sp-4); min-width: 0; }
    .bb-cllib__menu button { min-height: 48px; }
    .bb-clconfirm { grid-template-columns: 1fr; margin: var(--bb-sp-3) 0; }
}
/* ---- checklist cell in a list (.bb-clpill) — Phase 6, owner ruling R5 -------
   The column carries PROGRESS, not just a name. Amber while work is open, green
   once every item is answered for. Replaces three copies of inline-styled markup. */
.bb-clpill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    padding: 5px 10px 5px 6px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--bb-border-strong); background: var(--bb-surface);
    font-family: var(--bb-font); font-size: 12px; font-weight: var(--bb-fw-semibold);
    color: var(--bb-text); text-align: left; transition: border-color .15s, background .15s; }
.bb-clpill:hover { border-color: var(--bb-primary); background: var(--bb-primary-soft); }
.bb-clpill__count { flex: none; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bb-amber-bg); color: var(--bb-amber);
    font-size: 10px; font-weight: var(--bb-fw-bold); line-height: 1; }
.bb-clpill--done .bb-clpill__count { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-clpill__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15ch; }
.bb-clpill--empty { border-style: dashed; color: var(--bb-text-2); font-weight: var(--bb-fw-medium);
    padding-left: 10px; }
.bb-clpill__plus { font-size: 14px; line-height: 1; }

/* ---- worker cell in a list (.bb-worker-pill) -----------------------------
   A compact edit/assign button aligned with the checklist control without
   presenting worker assignments as a fully rounded status pill. */
.bb-worker-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    min-height: 28px; padding: 4px 9px; border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-s); background: var(--bb-surface); color: var(--bb-text);
    font-family: var(--bb-font); font-size: var(--bb-fs-xs); font-weight: var(--bb-fw-semibold);
    line-height: 1.2; text-align: left; cursor: pointer; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, background .15s; }
.bb-worker-pill:hover { border-color: var(--bb-primary); background: var(--bb-primary-soft); }
.bb-worker-pill--empty { border-style: dashed; color: var(--bb-primary); }
.bb-worker-pill__plus { flex: none; font-size: 14px; line-height: 1; }


/* ---------------------------------------------------------------------------
   v256 — mobile page background follows the skin.

   resources/sass/mobile.scss carries, under @media (max-width: 768px):

       .container-fluid { background: #FFFFFF !important; }

   A hardcoded white with !important on the element that wraps every page, so at
   phone width EVERY screen painted white under an espresso header. The org picker
   and the no-access page made it obvious, but it was platform-wide.

   Same breakpoint, same specificity, tokenized. #FAF7F2 porcelain / #1B1511
   espresso — identical to what the desktop already paints.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container-fluid { background: var(--bb-bg) !important; }
}

/* ---------------------------------------------------------------------------
   Our own template mail (confirmations / receipts / automations) collapses to
   its title + the HTML button — no body between them. .message-tools carries
   `padding: 0 14px 8px`, so with the body gone the button welded itself to the
   card head. Give it back the 8px it has underneath, so the button sits evenly
   in the card (owner 2026-08-08).

   The ID-scoped selector is deliberate: the breakpoint rules below use
   `#chat-messages #messages .timeline-event .message-tools`, and only a more
   specific selector wins inside them at every width.
   --------------------------------------------------------------------------- */
.cockpit-main-wrapper:not(.cockpit-admin) .event-card--template .message-tools,
#chat-messages #messages .timeline-event .event-card--template .message-tools {
    padding-top: 8px;
}

/* ============================================================================
   .bb-cpick — searchable customer picker (v261)
   Replaces a control that printed every customer of the org into the page.
   The popup is positioned, never clipped: any ancestor with overflow other than
   visible would cut it off, which is why nothing here sets overflow on a parent.
   ============================================================================ */
/* The legacy .form-field wrappers are flex ROWS. The control this replaces wrapped
   itself in d-flex flex-column; without that the label and the field become sibling
   flex items and sit side by side, squeezing the input. Own the axis here. */
.bb-cpick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
.bb-cpick__label {
    display: block;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text-2);
    margin-bottom: 6px;
}
.bb-cpick__anchor { position: relative; }
.bb-cpick__field { width: 100%; padding-right: 34px; }
/* The legacy list element must exist for InputSelector, but is never shown. */
.bb-cpick__legacy { display: none !important; }

.bb-cpick__spin {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--bb-border-strong);
    border-top-color: var(--bb-primary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.bb-cpick__spin.is-on { opacity: 1; animation: bb-cpick-spin .6s linear infinite; }
@keyframes bb-cpick-spin { to { transform: rotate(360deg); } }

/* ⛔ position:FIXED, not absolute. An absolutely-positioned popup is clipped by ANY
   ancestor whose overflow is not visible, and the legacy modal bodies set overflow.
   Fixed takes it out of that chain entirely, so the same component works inside a
   modal, a form or a table row. The script sets left/top/width from the field's
   getBoundingClientRect() and flips it above the field when there is no room below. */
.bb-cpick__pop {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;                       /* placeholder; the script measures the field */
    z-index: 1080;                      /* above .modal-content */
    display: none;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);  /* equal on all four corners */
    box-shadow: var(--bb-shadow-2);
    overflow: hidden;
}
.bb-cpick__pop.is-open { display: block; }

.bb-cpick__hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    padding: var(--bb-sp-3) var(--bb-sp-3) 4px;
    font-size: var(--bb-fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text-3);
}
.bb-cpick__cnt { text-transform: none; letter-spacing: 0; font-weight: var(--bb-fw-regular); }

.bb-cpick__row {
    display: flex;
    align-items: center;
    gap: var(--bb-sp-3);
    padding: var(--bb-sp-2) var(--bb-sp-3);
    margin: 0 var(--bb-sp-2);
    border-radius: var(--bb-radius-s);
    cursor: pointer;
}
.bb-cpick__row:last-child { margin-bottom: var(--bb-sp-2); }
.bb-cpick__row.is-active { background: var(--bb-row-hover); }
.bb-cpick__av {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-semibold);
}
.bb-cpick__meta { min-width: 0; flex: 1; }
.bb-cpick__nm,
.bb-cpick__sub {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bb-cpick__nm { font-size: var(--bb-fs-m); font-weight: var(--bb-fw-medium); color: var(--bb-text); }
.bb-cpick__sub { font-size: var(--bb-fs-s); color: var(--bb-text-2); }
/* Coloured TEXT, not a tint: --bb-row-hover equals --bb-primary-soft in porcelain,
   so a highlight tint disappears on the active row. */
.bb-cpick__row mark {
    background: transparent;
    color: var(--bb-primary);
    font-weight: var(--bb-fw-bold);
}
.bb-cpick__empty {
    padding: var(--bb-sp-5) var(--bb-sp-3);
    text-align: center;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
}
.bb-cpick__empty b {
    display: block;
    color: var(--bb-text);
    font-weight: var(--bb-fw-semibold);
    margin-bottom: 4px;
}

/* --- assign-workers trigger: chips instead of a comma run-on string (v265) --- */
.bb-workers-picker .selected-workers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    text-align: left;
    min-width: 0;
}
.bb-wchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 190px;
    padding: 1px 5px 1px 8px;
    border: 1px solid var(--bb-border);
    border-radius: 999px;
    background: var(--bb-inset);
    color: var(--bb-text);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    line-height: 1.7;
}
.bb-wchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-wchip__x {
    cursor: pointer;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-m);
    line-height: 1;
}
.bb-wchip__x:hover { color: var(--bb-danger); }

/* --- v266: the chip trigger has to be allowed to grow ---------------------
   Bootstrap's .form-control pins a FIXED height on this button, so once two
   chips wrapped onto a second line they spilled out below its border and
   collided with the label above. min-height alone could not win. --- */
.bb-workers-picker .workers-psyudo-input {
    height: auto !important;
    min-height: 42px;
    align-items: center;
    flex-wrap: nowrap;          /* the arrow stays on the right, chips wrap inside */
}
.bb-workers-picker .selected-workers {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 3px 0;
    flex: 1 1 auto;
}
.bb-workers-picker .workers-psyudo-input .arrow {
    flex: 0 0 auto;
    align-self: center;
}

/* --- v267: the chip tray is capped, and a chosen customer becomes a chip -----
   Letting the trigger grow without limit meant 50 assigned workers would push the
   modal past the bottom of the window. The tray now stops at roughly four rows and
   scrolls inside itself; the modal keeps its height. --- */
.bb-workers-picker .selected-workers {
    max-height: 108px;
    overflow-y: auto;
}

/* A chosen customer is a CHIP, not editable text. Typing over a selection left it
   ambiguous whether the customer was still selected - now the only way to change it
   is to remove the chip, which visibly clears the choice. */
.bb-cpick__chosen {
    display: none;
    align-items: center;
    gap: var(--bb-sp-2);
    width: 100%;
    min-height: 42px;
    padding: 6px 10px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-input);
    border-radius: var(--bb-radius-s);
}
.bb-cpick.is-chosen .bb-cpick__chosen { display: flex; }
.bb-cpick.is-chosen .bb-cpick__field,
.bb-cpick.is-chosen .bb-cpick__spin { display: none; }
.bb-cpick__chosenchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 6px 2px 10px;
    border: 1px solid var(--bb-border);
    border-radius: 999px;
    background: var(--bb-inset);
    font-size: var(--bb-fs-s);
    font-weight: var(--bb-fw-medium);
    line-height: 1.8;
}
.bb-cpick__chosenname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-cpick__chosenx {
    border: 0;
    background: transparent;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-l);
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.bb-cpick__chosenx:hover { color: var(--bb-danger); }

/* --- v268: the pinned search has to out-rank the rows it pins above ---------
   The panel is display:flex, and z-index applies to FLEX ITEMS even when they are
   position:static. The worker rows carry z-index:1000 from a legacy rule, so with a
   list long enough to scroll they painted straight over the sticky search box.
   Measured: rows z-index 1000 vs search 1. --- */
.bb-workers-picker .bb-workers-picker__search {
    z-index: 1001;
    padding-bottom: 2px;
}

/* --- v269: the customer results list needs its own cap -----------------------
   The worker fix (v268) was about paint order inside an ALREADY-scrolling panel.
   This popup had a different fault: max-height:none and overflow:hidden, so a full
   page of 20 results rendered as one tall block that ran off the bottom of the
   screen with no way to scroll it. Measured, not assumed. --- */
.bb-cpick__pop {
    max-height: 320px;
    overflow-y: auto;
}

/* --- v271 — Settings → Information, brought onto the shared settings shell ------------
   This tab was the last one still rendering as one flat card holding four unrelated jobs
   (address, phone, email, org switcher) with the right-hand half floating on the card
   background. It now uses the same shape as Business / Call & Message Center /
   Integrations: .bb-settings-intro header, then one .bb-card per concern in two columns.
   Layout primitives only — every colour is already a token, so both skins come free. --- */
.bb-setinfo__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--bb-sp-4); align-items: start; }
.bb-setinfo__col { display: flex; flex-direction: column; gap: var(--bb-sp-4); }
@media (max-width: 991.98px) { .bb-setinfo__grid { grid-template-columns: 1fr; } }

/* card head: icon + title/description + an optional status chip pushed to the right */
.bb-setcard__hd { display: flex; align-items: flex-start; gap: var(--bb-sp-3); margin-bottom: var(--bb-sp-4); }
.bb-setcard__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--bb-radius-m); background: var(--bb-primary-soft); color: var(--bb-primary); display: inline-flex; align-items: center; justify-content: center; }
.bb-setcard__txt { flex: 1; min-width: 0; }
/* The status chip belongs on the TITLE line, not floating against the middle of a
   two-line description — .bb-chip carries align-self:center globally, which put it
   half a line low whenever the description wrapped. */
.bb-setcard__hd > .bb-chip { align-self: flex-start; margin-top: 2px; }

/* the business-details form, on the .field spec instead of bootstrap .row/.col-* */
.bb-setform { display: grid; gap: var(--bb-sp-4); }
.bb-setform__row { display: grid; gap: var(--bb-sp-4); }
.bb-setform__row--8-4 { grid-template-columns: 2fr 1fr; }
.bb-setform__row--6-6 { grid-template-columns: 1fr 1fr; }
@media (max-width: 575.98px) { .bb-setform__row { grid-template-columns: 1fr; } }

/* the small lock/help line under a locked field */
.bb-setnote { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
.bb-setnote__ic { flex: none; margin-top: 1px; opacity: .75; }
.bb-setnote a { color: var(--bb-primary); }

/* The locked hint belongs to the READ-ONLY state. settings.js unlocks the form by removing the
   disabled attribute from the inputs and never touches this line, so hang the hint off the input's own
   state rather than adding a JS branch (and a bundle rebuild) for one paragraph. */
.bb-setform:has(input#name:not([disabled])) .locked-hint { display: none; }

/* Edit is a MODE TOGGLE, not a commit — it opens the form, it does not change anything. So it
   wears the secondary treatment while it says "Edit"; settings.js drops the .edit class when it
   becomes "Save", and the button falls back to the primary it was already carrying. That keeps
   one primary per view without adding a JS branch. */
.bb .bb-btn.btn-info-save.edit,
.bb-btn.btn-info-save.edit { background: var(--bb-surface); color: var(--bb-primary); border-color: var(--bb-primary); }
.bb .bb-btn.btn-info-save.edit:hover,
.bb-btn.btn-info-save.edit:hover { background: var(--bb-primary-soft); }


/* --- v272 — the Sync QuickBooks dialog, split by the two engines the page already names -------
   It was seven radio rows stacked in a 484px column: 1039px of content in a 935px viewport, with
   .modal-body at overflow-y:visible, so Cancel and Queue sync sat off the bottom of the screen.
   Now two columns at lg (800px), ~755px tall. Layout only; every colour is already a token, so
   both skins come free. Lives here rather than in quickbooks-sync-admin.scss because this sheet
   loads AFTER the legacy bundle and needs no build. --- */
.qb-sync-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bb-sp-4); align-items: start; }
.qb-sync-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qb-sync-col--historical { border-left: 1px solid var(--bb-border); padding-left: var(--bb-sp-4); }
.qb-sync-col__hd { display: flex; align-items: center; gap: var(--bb-sp-2); flex-wrap: wrap; }
.qb-sync-col__hd h4 { margin: 0; font-size: var(--bb-fs-m); font-weight: var(--bb-fw-semibold); color: var(--bb-text); }
.qb-sync-col__note { margin: 0 0 2px; font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); color: var(--bb-text-2); }
@media (max-width: 820px) {
    .qb-sync-split { grid-template-columns: 1fr; }
    .qb-sync-col--historical { border-left: 0; padding-left: 0; border-top: 1px solid var(--bb-border); padding-top: var(--bb-sp-4); }
}

/* "Pick exact dates" is a selectable option that CARRIES the two fields. The row is a div, not a
   label (see the blade note), so the title element owns the for= and the fields keep their own
   labels without re-toggling the radio. */
.qb-sync-exact { cursor: default; }
.qb-sync-exact > input { cursor: pointer; }
.qb-sync-exact .qb-sync-exact__title { margin: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.qb-sync-exact .qb-sync-exact__title strong { font-weight: 600; font-size: var(--bb-fs-m); color: var(--bb-text); }
.qb-sync-exact .qb-sync-exact__title em { font-style: normal; font-size: 13px; color: var(--bb-text-2); }
/* two selectors deep on purpose: `.qb-v2-catchup__option span` is 0,1,1 and beats a bare
   `.qb-v2-sync-range` (0,1,0) — that is what stacked these fields vertically at first. */
.qb-sync-exact .qb-v2-sync-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.qb-sync-exact .qb-v2-sync-range label { display: flex; flex-direction: column; gap: 4px; font-size: var(--bb-fs-xs);
    font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--bb-text-2); cursor: default; }
.qb-sync-exact .qb-v2-sync-range input { padding: 8px 10px; font-size: var(--bb-fs-s); cursor: text; }

/* ONE outcome card: the resolved range + which engine on the left, what the run will do on the
   right, the qualifiers underneath. The coverage call still owns #qb-v2-sync-preflight, which is
   display:contents so its two spans lay out as siblings of the range. */
.qb-outcome { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 14px 12px;
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius-m); background: var(--bb-surface-2); }
.qb-outcome__range { font-size: var(--bb-fs-m); font-weight: 600; color: var(--bb-text); }
.qb-outcome__result { display: contents; }
.qb-outcome__head { margin-left: auto; font-size: var(--bb-fs-m); font-weight: 600; color: var(--bb-text); }
.qb-outcome__notes { flex: 0 0 100%; font-size: var(--bb-fs-s); color: var(--bb-text-2); line-height: var(--bb-lh-body); }
.qb-outcome__result--settled .qb-outcome__head { color: var(--bb-success); }
.qb-outcome__result--muted .qb-outcome__head,
.qb-outcome__head--quiet { font-weight: 400; color: var(--bb-text-2); }

/* The export-only boundary, said ONCE, next to the thing that acts on it. It used to be said
   three times: the banner, the seventh radio, and a closing paragraph. */
.qb-sync-export { display: flex; align-items: center; gap: var(--bb-sp-3); flex-wrap: wrap;
    margin-top: var(--bb-sp-4); padding-top: var(--bb-sp-4); border-top: 1px solid var(--bb-border); }
.qb-sync-export p { margin: 0; flex: 1; min-width: 220px; font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body); color: var(--bb-text-2); }

/* --- v279 — appointment-series management ---------------------------------------
   The lifecycle audit used to render as four detached cards followed by three more
   unrelated card styles. This is one standard-modal composition: identity, one facts
   surface, semantic health/state banners, actions on the field spec, and two readable
   histories. The class names remain workflow hooks; all visual values come from the
   catalog tokens/components so Porcelain and Espresso share the same structure. */
#appointment-subscription-management-modal .appointment-subscription-management-dialog {
    max-height: calc(100vh - var(--bb-sp-5));
}
#appointment-subscription-management-modal .modal-body { overflow-x: hidden; }
.appointment-subscription-management { display: grid; gap: var(--bb-sp-4); }
.appointment-subscription-identity {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-4);
}
.appointment-subscription-eyebrow {
    display: block;
    margin-bottom: var(--bb-sp-1);
    color: var(--bb-primary);
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.appointment-subscription-identity h3 {
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-xl);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-tight);
}
.appointment-subscription-identity p {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-m);
}
.appointment-subscription-overview { box-shadow: none; overflow: hidden; }
.appointment-subscription-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}
.appointment-subscription-facts > div {
    min-width: 0;
    padding: var(--bb-sp-4);
    border-right: 1px solid var(--bb-border);
}
.appointment-subscription-facts > div:last-child { border-right: 0; }
.appointment-subscription-facts dt {
    margin: 0 0 var(--bb-sp-1);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
}
.appointment-subscription-facts dd {
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-m);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-tight);
    overflow-wrap: anywhere;
}
.appointment-subscription-facts > div > span {
    display: block;
    margin-top: var(--bb-sp-1);
    color: var(--bb-text-3);
    font-size: var(--bb-fs-xs);
    line-height: var(--bb-lh-body);
}
.appointment-subscription-health,
.appointment-subscription-ended-note { align-items: center; }
.appointment-subscription-health > div,
.appointment-subscription-ended-note > div { display: grid; gap: 2px; min-width: 0; }
.appointment-subscription-health > div > span,
.appointment-subscription-ended-note > div > span { font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); }
.appointment-subscription-health > .bb-chip { margin-left: auto; }
.appointment-subscription-health__heading {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-3);
}
.appointment-subscription-health__heading > div { display: grid; gap: 2px; min-width: 0; }
.appointment-subscription-health__heading > .bb-chip { align-self: flex-start; }
.appointment-subscription-findings {
    display: grid;
    gap: var(--bb-sp-2);
    margin-top: var(--bb-sp-3);
    padding-top: var(--bb-sp-3);
    border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.appointment-subscription-finding { display: grid; gap: 2px; }
.appointment-subscription-finding strong { text-transform: capitalize; }
.appointment-subscription-finding span { font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); }
.appointment-subscription-management-panel { box-shadow: none; }
.appointment-subscription-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    margin-bottom: var(--bb-sp-3);
}
.appointment-subscription-section-head h3 {
    margin: 0;
    color: var(--bb-text);
    font-size: var(--bb-fs-l);
    font-weight: var(--bb-fw-semibold);
    line-height: var(--bb-lh-tight);
}
.appointment-subscription-section-head p {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.appointment-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-sp-2);
    margin-top: var(--bb-sp-3);
}
.appointment-subscription-repair { border-color: var(--bb-amber); }
.appointment-subscription-repair-result {
    margin-top: var(--bb-sp-3);
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-m);
    background: var(--bb-inset);
}
.appointment-subscription-repair-result p {
    margin: var(--bb-sp-1) 0 0;
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.appointment-subscription-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--bb-sp-4);
    align-items: start;
}
.appointment-subscription-timeline { display: grid; }
.appointment-subscription-occurrence {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--bb-sp-2);
    padding: 0 0 var(--bb-sp-4);
}
.appointment-subscription-occurrence:last-child { padding-bottom: 0; }
.appointment-subscription-occurrence::before {
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 5px;
    width: 1px;
    background: var(--bb-border-strong);
    content: "";
}
.appointment-subscription-occurrence:last-child::before { display: none; }
.appointment-subscription-timeline-marker {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 4px;
    border: 2px solid var(--bb-primary);
    border-radius: 50%;
    background: var(--bb-surface);
}
.appointment-subscription-occurrence-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bb-sp-2);
}
.appointment-subscription-occurrence-title > div { display: grid; gap: 2px; min-width: 0; }
.appointment-subscription-occurrence-title strong { color: var(--bb-text); font-size: var(--bb-fs-m); }
.appointment-subscription-occurrence-title span:not(.bb-chip) { color: var(--bb-text-2); font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); }
.appointment-subscription-occurrence-meta {
    display: grid;
    gap: 2px;
    margin-top: var(--bb-sp-2);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-s);
    line-height: var(--bb-lh-body);
}
.appointment-subscription-error { color: var(--bb-danger); }
.appointment-subscription-events { box-shadow: none; overflow: hidden; }
.appointment-subscription-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--bb-sp-3);
    padding: var(--bb-sp-3);
    border-bottom: 1px solid var(--bb-border);
}
.appointment-subscription-event:last-child { border-bottom: 0; }
.appointment-subscription-event > div { display: grid; gap: 2px; min-width: 0; }
.appointment-subscription-event strong { color: var(--bb-text); overflow-wrap: anywhere; }
.appointment-subscription-event > div > span { color: var(--bb-text-2); font-size: var(--bb-fs-s); line-height: var(--bb-lh-body); }
.appointment-subscription-empty {
    padding: var(--bb-sp-4);
    border: 1px dashed var(--bb-border-strong);
    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);
}
.appointment-subscription-events > .appointment-subscription-empty { border: 0; border-radius: 0; }

@media (max-width: 767.98px) {
    #appointment-subscription-management-modal .appointment-subscription-management-dialog {
        width: calc(100% - var(--bb-sp-3)) !important;
        margin: calc(var(--bb-sp-3) / 2) auto;
        max-height: calc(100vh - var(--bb-sp-3));
    }
    .appointment-subscription-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .appointment-subscription-facts > div { border-bottom: 1px solid var(--bb-border); }
    .appointment-subscription-facts > div:nth-child(2n) { border-right: 0; }
    .appointment-subscription-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .appointment-subscription-health { align-items: flex-start; }
    .appointment-subscription-health > .bb-chip { margin-left: 0; }
    .appointment-subscription-history-grid { grid-template-columns: 1fr; }
    .appointment-subscription-actions { display: grid; }
    .appointment-subscription-actions > .bb-btn { width: 100%; }
}

@media (max-width: 420px) {
    .appointment-subscription-identity,
    .appointment-subscription-health,
    .appointment-subscription-health__heading,
    .appointment-subscription-occurrence-title { flex-direction: column; }
}

/* Universal workflow record rail — one shared selector composition for Visit,
   Estimate, and Invoice. The legacy hook classes remain in the Blade views for
   selection/creation behavior; these component classes own presentation. */
#u-customer-modal .u-workflow-panel .u-record-rail {
    flex: 0 0 290px;
    width: 290px;
    min-width: 290px;
    padding-right: var(--bb-sp-4);
}
#u-customer-modal .u-workflow-panel .u-record-rail__action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bb-sp-2);
    width: 100%;
    min-height: 44px;
    margin: 0 0 var(--bb-sp-3) !important;
    line-height: 1 !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__panel {
    padding: var(--bb-sp-3);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-l);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-1);
}
#u-customer-modal .u-workflow-panel .u-record-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    margin-bottom: var(--bb-sp-3);
    color: var(--bb-text);
}
#u-customer-modal .u-workflow-panel .u-record-rail__head strong {
    font-size: var(--bb-fs-m);
    font-weight: var(--bb-fw-semibold);
}
#u-customer-modal .u-workflow-panel .u-record-rail__count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    min-height: 22px;
    padding: 0 var(--bb-sp-2);
    border-radius: 999px;
    background: var(--bb-inset);
    color: var(--bb-text-2);
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
}
#u-customer-modal .u-workflow-panel .u-record-rail__list {
    display: grid;
    gap: var(--bb-sp-3);
    max-height: 505px;
    overflow-y: auto;
    padding-right: 2px;
}
#u-customer-modal .u-workflow-panel .u-record-rail__list > .new-entity-container,
#u-customer-modal .u-workflow-panel .u-record-rail__list > .all-entities,
#u-customer-modal .u-workflow-panel .u-record-rail__list > .all-entities > div:not(.schedule-container) {
    display: contents !important;
    margin: 0 !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.schedule-container {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--bb-sp-2) !important;
    width: 100%;
    min-height: 88px;
    margin: 0 !important;
    padding: var(--bb-sp-3) var(--bb-sp-3) var(--bb-sp-3) var(--bb-sp-4) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-m) !important;
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    cursor: pointer;
    text-align: left;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    content: "";
}
#u-customer-modal .u-workflow-panel .u-record-rail__record:hover {
    border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border)) !important;
    background: var(--bb-surface-2) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.is-active {
    border-color: color-mix(in srgb, var(--bb-primary) 35%, var(--bb-border)) !important;
    background: var(--bb-primary-soft) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.is-active::before {
    background: var(--bb-primary);
}
#u-customer-modal .u-workflow-panel .u-record-rail__top,
#u-customer-modal .u-workflow-panel .u-record-rail__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-sp-3);
    min-width: 0;
}
#u-customer-modal .u-workflow-panel .u-record-rail__title {
    min-width: 0;
    overflow: hidden;
    color: var(--bb-text) !important;
    font-weight: var(--bb-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
#u-customer-modal .u-workflow-panel .u-record-rail__value {
    flex: 0 0 auto;
    color: var(--bb-text) !important;
    font-size: var(--bb-fs-m);
    font-weight: var(--bb-fw-bold);
    white-space: nowrap;
}
#u-customer-modal .u-workflow-panel .u-record-rail__meta {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: var(--bb-text-3) !important;
    font-size: var(--bb-fs-xs) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#u-customer-modal .u-workflow-panel .u-record-rail__chip.schedule-status {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 24px !important;
    padding: 5px 9px !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
    border-radius: 999px !important;
    background: var(--bb-inset) !important;
    color: var(--bb-text-2) !important;
    font-size: 10px !important;
    font-weight: var(--bb-fw-bold) !important;
    line-height: 1 !important;
    text-align: center !important;
    text-overflow: clip !important;
    text-transform: uppercase;
    white-space: nowrap !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__chip .name {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    overflow: visible !important;
    line-height: 1 !important;
    text-align: center;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.paid .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.completed .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.approved .u-record-rail__chip {
    background: var(--bb-success-bg) !important;
    color: var(--bb-success) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.unpaid .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.waiting .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.waiting-approval .u-record-rail__chip {
    background: var(--bb-amber-bg) !important;
    color: var(--bb-amber) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.partially-refunded .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.scheduled .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.in-process .u-record-rail__chip {
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__record.overdue .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.rejected .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.declined .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.canceled .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.expired .u-record-rail__chip,
#u-customer-modal .u-workflow-panel .u-record-rail__record.voided .u-record-rail__chip {
    background: var(--bb-danger-bg) !important;
    color: var(--bb-danger) !important;
}
#u-customer-modal .u-workflow-panel .u-record-rail__note {
    margin: var(--bb-sp-3) 2px 0;
    color: var(--bb-text-3);
    font-size: var(--bb-fs-xs);
    line-height: var(--bb-lh-body);
}

@media (max-width: 767.98px) {
    #u-customer-modal .u-workflow-panel .u-record-rail {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding-right: 0;
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__list {
        display: grid;
        max-height: min(248px, 34vh);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__record.schedule-container {
        flex: none;
        width: 100%;
        min-height: 74px;
        padding: var(--bb-sp-3) var(--bb-sp-3) var(--bb-sp-3) var(--bb-sp-4) !important;
    }
}

/* Universal workflow mobile composition.
   Request -> Visit -> Estimate -> Job -> Invoice is one five-stage task, so the
   narrow layout must keep the whole journey visible and must not introduce a
   second horizontal carousel inside the full-screen modal. Desktop remains
   governed by the existing workflow rules above. */
@media (max-width: 767.98px) {
    #u-customer-modal .modal-header {
        padding: var(--bb-sp-4) 48px var(--bb-sp-3) var(--bb-sp-4) !important;
    }
    #u-customer-modal .close-btn {
        top: var(--bb-sp-3) !important;
        right: var(--bb-sp-3) !important;
    }
    #u-customer-modal .customer-name-container {
        font-size: var(--bb-fs-xl) !important;
        line-height: var(--bb-lh-heading) !important;
    }
    #u-customer-modal .customer-info-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bb-sp-2) !important;
        width: 100%;
    }
    #u-customer-modal .customer-info-container > * {
        width: auto !important;
        min-width: 0;
        overflow: hidden;
    }
    #u-customer-modal .customer-info-email {
        grid-column: 1 / -1;
    }
    #u-customer-modal .customer-info-phone > div,
    #u-customer-modal .customer-info-address > div,
    #u-customer-modal .customer-info-email > div {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #u-customer-modal .modal-navigation-main {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        padding: 0 var(--bb-sp-2) !important;
    }
    #u-customer-modal .modal-navigation-main > .change-step {
        display: none !important;
    }
    #u-customer-modal .modal-navigation-main .main-step {
        flex: initial !important;
        justify-content: center;
        width: 100% !important;
        min-height: 48px;
        padding: var(--bb-sp-2) 2px !important;
        white-space: normal;
    }
    #u-customer-modal .modal-navigation-main .main-step .main-step-name {
        overflow-wrap: anywhere;
        font-size: 10px !important;
        line-height: 1.15 !important;
        text-align: center;
        white-space: normal;
    }

    #u-customer-modal .modal-navigation-internal-mobile {
        min-height: 64px;
        margin: 0 !important;
        padding: var(--bb-sp-3) var(--bb-sp-4) !important;
        border-bottom: 1px solid var(--bb-border);
        background: var(--bb-surface) !important;
    }
    #u-customer-modal .modal-navigation-internal-mobile > .change-step,
    #u-customer-modal .modal-navigation-internal-mobile .steps-container > .nowrap.cursor-pointer {
        display: none !important;
    }
    #u-customer-modal .modal-navigation-internal-mobile .steps-container,
    #u-customer-modal .modal-navigation-internal-mobile .internal-steps {
        width: 100% !important;
        min-width: 0;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-steps {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        align-items: start;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step-container,
    #u-customer-modal .modal-navigation-internal-mobile .internal-step-container:not(.focused) {
        position: relative;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step {
        position: relative;
        z-index: 1;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        gap: 4px;
        width: 100%;
        min-width: 0;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step-logo {
        margin: 0 !important;
        padding: 0 !important;
        background: var(--bb-surface);
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step-logo .image,
    #u-customer-modal .modal-navigation-internal-mobile .internal-step.focused .internal-step-logo .image {
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step.focused .internal-step-logo .image {
        width: 32px !important;
        height: 32px !important;
        margin-top: -2px !important;
    }
    #u-customer-modal .modal-navigation-internal-mobile .internal-step-name {
        width: 100%;
        margin: 0 !important;
        overflow: hidden;
        font-size: 9px !important;
        font-weight: var(--bb-fw-semibold);
        letter-spacing: .035em !important;
        line-height: 1.15 !important;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #u-customer-modal .modal-navigation-internal-mobile .progress-line {
        position: absolute;
        z-index: 0;
        top: 14px;
        left: calc(50% + 17px);
        right: calc(-50% + 17px);
        width: auto !important;
        height: 1px;
    }

    #u-customer-modal .internal-data-container {
        padding-bottom: 92px !important;
    }
    #u-customer-modal .u-workflow-panel {
        gap: var(--bb-sp-4) !important;
        min-width: 0;
    }
    #u-customer-modal .u-workflow-panel > *,
    #u-customer-modal .u-workflow-panel .left-large-container,
    #u-customer-modal .u-workflow-panel .right-small-container,
    #u-customer-modal .u-workflow-panel .entity-info-container,
    #u-customer-modal .u-workflow-panel .images-container {
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    #u-customer-modal .u-workflow-panel .u-workflow-main {
        margin-top: 0 !important;
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__action {
        min-height: 44px;
        margin-bottom: var(--bb-sp-3) !important;
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__panel {
        padding: var(--bb-sp-3);
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__list {
        gap: var(--bb-sp-2);
        padding-right: var(--bb-sp-1);
    }
    #u-customer-modal .u-workflow-panel .u-record-rail__note {
        margin-top: var(--bb-sp-2);
    }

    #u-customer-modal .u-workflow-heading {
        align-items: flex-start !important;
        flex-direction: column;
        gap: var(--bb-sp-3) !important;
    }
    #u-customer-modal .u-workflow-heading > :first-child {
        width: 100%;
        min-width: 0;
    }
    #u-customer-modal .changes-requested-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: var(--bb-sp-3);
    }
    #u-customer-modal .changes-requested-header > :first-child,
    #u-customer-modal .changes-requested-header-buttons {
        width: 100%;
        min-width: 0;
    }
    #u-customer-modal .changes-requested-title {
        font-size: var(--bb-fs-m);
        line-height: var(--bb-lh-body);
    }
    #u-customer-modal .changes-requested-header-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #u-customer-modal .changes-requested-header-buttons > .bb-btn {
        justify-content: center;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        white-space: normal;
    }
    #u-customer-modal .u-workflow-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: var(--bb-sp-2) !important;
        width: 100%;
        min-width: 0;
    }
    #u-customer-modal .u-workflow-actions > *,
    #u-customer-modal .u-workflow-actions > .status-select,
    #u-customer-modal .u-workflow-actions .bb-btn {
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        white-space: normal;
    }
    #u-customer-modal .u-workflow-actions > .status-select::after {
        display: none !important;
    }
    #u-customer-modal .u-workflow-actions .selected-value {
        min-width: 0;
    }

    #u-customer-modal .u-workflow-panel .info-tiles-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bb-sp-4) var(--bb-sp-3) !important;
        width: 100%;
    }
    #u-customer-modal .u-workflow-panel .info-tile {
        flex: none !important;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
    #u-customer-modal .u-workflow-panel .info-tile .value {
        overflow-wrap: anywhere;
    }
    #u-customer-modal .u-workflow-detail-card,
    #u-customer-modal .u-workflow-side.bb-card,
    #u-customer-modal .u-workflow-media.bb-card {
        padding: var(--bb-sp-3) !important;
    }

    #u-customer-modal .modal-actions {
        right: 0 !important;
        left: 0;
        align-items: center;
        justify-content: flex-end;
        width: 100% !important;
        min-height: 68px;
        padding: var(--bb-sp-3) var(--bb-sp-4) !important;
        gap: var(--bb-sp-2);
    }
    #u-customer-modal .modal-actions > * {
        min-height: 42px;
        margin: 0 !important;
    }
}

@media (max-width: 359.98px) {
    #u-customer-modal .customer-info-container,
    #u-customer-modal .u-workflow-panel .info-tiles-container,
    #u-customer-modal .u-workflow-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Empty Visit, Estimate, and Invoice stages use the modal body's real remaining
   height. The old fixed 360px card left a large dead area below it and its
   percentage-height child collapsed around the GIF instead of centering it. */
@media (min-width: 768px) {
    #u-customer-modal .internal-data-container:has(> .u-workflow-panel--empty) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }
    #u-customer-modal .u-workflow-panel--empty {
        flex: 1 1 auto;
        align-items: stretch;
        min-height: 0;
    }
    #u-customer-modal .u-workflow-panel--empty .right-small-container {
        display: flex;
        align-self: stretch;
        min-height: 0;
    }
    #u-customer-modal .u-workflow-panel--empty .u-workflow-main--empty {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 0;
        height: auto !important;
    }
    #u-customer-modal .u-workflow-panel--empty .u-workflow-main--empty > .u-workflow-empty-state,
    #u-customer-modal .u-workflow-panel--empty .u-workflow-main--empty > .h-100 {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 0;
        height: auto !important;
    }
}

/* v295: .bb-check indeterminate ("some selected") — filled box with a dash, used by
   select-all headers when only part of the page is ticked (QB sync page audit S5). */
.bb-check input:indeterminate + .bb-check__box { background: var(--bb-primary); border-color: var(--bb-primary); }
.bb-check input:indeterminate + .bb-check__box::after { content: ""; width: 8px; height: 2px; border: none; border-radius: 1px; background: #fff; transform: none; margin-top: 0; }