/* house-mobile.css: phone and tablet fixes for the house style (max-width 767.98px unless stated). Prefix every rule with
   html:root[data-design-mode][data-theme][data-palette] body#opt-house  (see house.css).

   Loaded LAST in base.html, so it wins every source-order tie against the older mobile layers
   (mobile-overhaul.css, mobile-v2.css) and the editorial overlays (sales-cards.css, editorial-final.css).
   Nothing in here changes behaviour; it only makes the desktop app usable on a 390px phone:

     1. date range picker  -> house tokens for the bottom sheet defined in date-range-picker.css
                              (yellow tiles, pill presets, pill Apply/Cancel, 40px day tiles)
     2. dashboard filters  -> full-width trigger, selects in two columns
     3. topbar             -> the search close button is actually visible when the search is open
     4. tab / filter strips-> one horizontally scrollable pill row (or wrap where there are few items)
     5. tables             -> scroll inside their card instead of pushing the page wide
     6. page-specific      -> lifecycle, bot registry, inbox, admin, link orders, website requests
     7. modals             -> full width with a 16px margin, body scrolls, never taller than the viewport
     8. tap targets        -> 40px minimum on the small action buttons that fell through
   ========================================================================================================== */

@media (max-width: 767.98px) {

  /* ---- 1. date range picker: house look for the bottom sheet ---------------------------------------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-wrapper {
    --drp-bg: var(--hs-paper);
    --drp-text: var(--hs-ink);
    --drp-text-muted: var(--hs-ink-mute);
    --drp-border: var(--hs-line);
    --drp-hover: var(--hs-bg);
    --drp-primary: var(--hs-yellow);
    --drp-primary-text: var(--hs-ink);
    --drp-accent: var(--hs-yellow);
    --drp-accent-text: var(--hs-ink);
    --drp-range-bg: rgba(244, 225, 74, .28);
  }
  /* sales-cards.css forces a 16px radius on the panel; the sheet only rounds its top corners */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-dropdown {
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 100vmax rgba(21, 22, 26, .38), 0 -12px 40px rgba(20, 22, 30, .18) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-calendars {
    overflow-y: auto !important;
  }
  /* house-pages.css sets .drp-day to a 10px radius + aspect-ratio at every width; the sheet needs
     40x40 tiles, square in-range tiles (so the band is continuous) and rounded outer ends */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day {
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: auto !important;
    font-size: 15px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-in-range {
    border-radius: 0 !important;
    background: var(--drp-range-bg) !important;
    color: var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-start:not(.drp-day-end) {
    border-radius: 10px 4px 4px 10px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-end:not(.drp-day-start) {
    border-radius: 4px 10px 10px 4px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-start,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-end {
    background: var(--hs-yellow) !important;
    color: var(--hs-ink) !important;
    font-weight: 600 !important;
  }
  /* today reads as a ring, not a second yellow tile */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day-today:not(.drp-day-start):not(.drp-day-end):not(.drp-day-in-range) {
    background: transparent !important;
    color: var(--hs-ink) !important;
    box-shadow: inset 0 0 0 1.5px var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-nav {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--hs-line) !important;
    background: var(--hs-paper) !important;
    color: var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-month-label {
    font-family: var(--hs-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-preset {
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: 999px !important;
    background: var(--hs-paper) !important;
    color: var(--hs-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: var(--hs-shadow-input);
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-preset-active {
    background: var(--hs-yellow) !important;
    border-color: var(--hs-yellow) !important;
    color: var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-compare-label {
    font-size: 11.5px !important;
    letter-spacing: .06em !important;
    color: var(--hs-ink-mute) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-radio {
    font-size: 13px !important;
    min-height: 32px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-footer {
    background: var(--hs-paper) !important;
    border-top: 1px solid var(--hs-line) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-selection {
    font-size: 13px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-actions .drp-btn {
    min-height: 44px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-btn-cancel {
    background: var(--hs-paper) !important;
    border: 1px solid var(--hs-line-strong) !important;
    color: var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-btn-apply {
    background: var(--hs-yellow) !important;
    border: 1px solid var(--hs-yellow) !important;
    color: var(--hs-ink) !important;
  }

  /* ---- 2. dashboard header: filter row wraps, trigger on its own full-width line ------------------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .date-range-picker-container,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .drp-wrapper,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .drp-trigger {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .drp-trigger {
    justify-content: space-between !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .drp-trigger-text {
    flex: 1 1 auto;
    text-align: left;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .form-select {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-filters .date-error-msg {
    flex: 1 1 100%;
  }

  /* ---- 3. topbar search: the close button was display:none on phones (the desktop reset came after
          the media block in topbar-search.css), so there was no way to dismiss the search ------------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search.is-open .topbar-search-close {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--hs-line) !important;
    background: var(--hs-paper) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search.is-open .topbar-search-field {
    border-radius: 999px !important;
    height: 40px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-results {
    left: 12px !important;
    right: 12px !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-logo-mobile {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* ---- 4. tab and filter strips ------------------------------------------------------------------------- */
  /* Many items: one horizontally scrollable pill row (scrollbar hidden, edges fade). */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 6px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    scroll-padding: 0 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tabs::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tabs::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tabs::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tabs::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar::-webkit-scrollbar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters::-webkit-scrollbar {
    display: none;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tabs > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tabs > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tabs > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tabs .lo-tab-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tabs > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar > *,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs .cm-tab {
    padding: 0 14px !important;
    display: inline-flex;
    align-items: center;
  }
  /* .adm-filter-bar doubles as the admin Users toolbar (two selects + a search box): that one wraps
     to two columns instead of scrolling, so the search box is never half off-screen */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar:has(select, input) {
    flex-wrap: wrap !important;
    overflow: visible !important;
    -webkit-mask-image: none;
            mask-image: none;
    gap: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar:has(select, input) > * {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100%;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar:has(select, input) > input,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar:has(select, input) > .adm-field__search,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-bar:has(select, input) > [class*="search"] {
    flex: 1 1 100% !important;
  }
  /* Few items: wrap. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .wr-filter-bar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-actions,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-header,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-actions {
    flex-wrap: wrap !important;
    max-width: 100%;
    min-width: 0;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs > span[style*="margin-left"] {
    margin-left: 0 !important;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs .br-status-tab,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs .br-sort-toggle,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs select {
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .wr-filter-bar .wr-search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .wr-filter-bar .wr-filter-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar > select {
    flex: 1 1 calc(50% - 5px);
    min-width: 0 !important;
    max-width: 100%;
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar .inbox-view-mode,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar .hs-filter-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar .inbox-view-mode-btn {
    flex: 1 1 0;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar .nx-select,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-filter-bar .nx-select-trigger {
    max-width: 100%;
    min-width: 0 !important;
  }

  /* ---- 5. tables scroll inside their card ---------------------------------------------------------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table-wrapper,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-responsive,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-table-scroll,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-table-wrap,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-cal,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-panel:has(> table),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-body:has(> table),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-block:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table-wrapper > table,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-responsive > table,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-panel > table {
    min-width: max-content;
  }
  /* the account hub ledger card wraps the scroller in padding that was 24px too narrow for the table */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-table .col-client {
    min-width: 160px !important;
  }

  /* ---- 6. page specifics --------------------------------------------------------------------------------- */
  /* lifecycle: 5-stage pipeline was one 600px flex row; header actions did not wrap */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 12px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-header {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-header .lc-action-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    min-height: 40px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-pipeline {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-pipe-stage {
    border-radius: 14px !important;
    border-right: 1px solid var(--hs-line) !important;
    min-width: 0;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-pipe-stage .pipe-label {
    font-size: 11px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .lc-table .lc-action-btn {
    min-height: 40px;
  }
  /* bot registry: the header row with the view toggles + live indicator did not wrap */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-main-header,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters + .br-refresh-indicator {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters {
    flex: 1 1 100%;
  }
  /* payments: the bucket sub-line was nowrap */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-bucket-sub {
    white-space: normal !important;
    max-width: 100%;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-action {
    min-height: 40px;
  }
  /* account hub stats strip links */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip__link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* client brain: the tab strip is a scroll row (rule 4); keep the header actions wrapping */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-header-actions,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-header {
    flex-wrap: wrap;
    max-width: 100%;
  }
  /* gmb schedule calendar: stays 640px wide and scrolls inside .gs-cal (rule 5); pad the cells down */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-cal-cell {
    min-height: 64px !important;
  }
  /* every page wrapper: never let the canvas itself scroll sideways */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-main {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* ---- 7. modals: full width with a 16px margin, body scrolls, never taller than the phone ------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-dialog {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 16px auto !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-dialog-centered {
    min-height: calc(100% - 32px) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house div.modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: var(--hs-radius-card) !important;
    overflow: hidden;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-footer > .btn {
    flex: 1 1 calc(50% - 4px);
    margin: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .opt-modal,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-lg,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-xl {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    border-radius: var(--hs-radius-card) !important;
  }

  /* ---- 8. tap targets that fell through the house 40px rule --------------------------------------------- */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-opt-secondary,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-opt-primary,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-filters-toggle,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .view-toggle,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tab,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tab,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tab,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-filter-chip,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .action-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-provider-link-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-date-edit-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-notes-toggle,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-icon-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .notification-bell-btn,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-trigger,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-toggle {
    min-height: 40px;
    min-width: 40px;
  }
  /* row links in tables: give the row text a taller hit area without changing the row layout */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house td a.client-name,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house td a.client-link {
    display: inline-block;
    padding: 8px 0;
    margin: -8px 0;
  }
}

/* ---- One nav for every narrow width -----------------------------------------
   Ben, 6 Sep 2026: "the mobile nav as well needs to be redesigned... it's still
   really really janky, as it has all those clippings."

   It was: mobile-overhaul.css squeezes the sidebar to a 60px rail between 769
   and 992px and hides the labels with `.nav-link-text` / `.nav-section-title` —
   class names this markup has not used for a long time. So the box shrank and
   the labels did not, and every one of the 30-odd `.sidebar-link` rows hung out
   past the edge. Measured at 820px: six links overflowing, 346px of hidden
   vertical scroll, and NO hamburger, because the topbar toggle only shows below
   768. You could not read the nav and you could not open it either.

   It is now: below 993px there is no rail at all. The sidebar is an off-canvas
   drawer with its labels intact, opened from the topbar hamburger, closed by
   the X, the overlay, Escape, or picking a link. Full width on a phone, 320px
   on a tablet. Nothing has to fit in 60px, so nothing clips.
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(320px, 88vw) !important; min-width: 0 !important; max-width: none !important;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1045 !important;
    border-right: 1px solid var(--hs-line) !important;
    background: var(--hs-bg) !important;
    box-shadow: none !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 70px -10px rgba(20, 22, 30, 0.28) !important;
  }
  /* The content no longer sits in the sidebar's shadow. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-main { margin-left: 0 !important; width: 100% !important; }
  /* The way in. It was hidden above 767, which is what stranded the 768-992 band. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-toggle:not([style*="display"]) {
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-overlay {
    position: fixed !important; inset: 0 !important; z-index: 1040 !important;
    background: rgba(24, 22, 18, 0.34) !important;
    opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-overlay.active { opacity: 1; pointer-events: auto; }
  /* Labels, sections and counts all read normally in a drawer — the rail rules
     that hid them are gone, not overridden, so nothing here forces `display`. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link {
    justify-content: flex-start !important;
    width: auto !important; height: 44px !important; min-height: 44px !important;
    padding: 0 14px !important; margin: 2px 10px !important;
    border-radius: var(--hs-radius-pill) !important; overflow: hidden !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link i { font-size: 16px !important; margin-right: 10px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-nav { overflow-y: auto !important; overscroll-behavior: contain; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-header { min-height: 60px !important; }
  /* The bottom chevron is a desktop control: on a drawer the X is the way out,
     so the X has to actually be there. editorial-final.css only reveals it
     below 768 and hides it everywhere else, which left the 768-992 drawer with
     no visible close control at all. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-close-mobile:not([style*="display"]) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important; flex: none !important;
    border-radius: 999px !important; border: 1px solid var(--hs-line-strong) !important;
    background: #fff !important; color: var(--hs-ink) !important; margin-right: 12px !important; padding: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
  }
  /* An open drawer owns the screen. The topbar was rendering over the drawer's
     own logo — mobile-v2.css has hidden it since the last go at this, but with
     no !important, so editorial-final's .topbar rule won and it never applied. */
  body.sidebar-open .topbar { display: none !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-collapse-btn { display: none !important; }
}
/* A phone gets the whole screen, per Ben: "It could be full screen." */
@media (max-width: 600px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar { width: 100vw !important; border-right: 0 !important; }
}

/* ---- Tablet: All Clients drops the Results column so MRR stays in view ---- */
@media (min-width: 769px) and (max-width: 992px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table { table-layout: auto !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table th:nth-child(2),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table td:nth-child(2) { min-width: 150px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table thead th:not(#hs-bump):not(#hs-bump2) { white-space: normal !important; font-size: 10.5px !important; letter-spacing: .04em !important; padding: 10px 6px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table th:nth-child(5),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table td:nth-child(5) { display: none !important; }
}

/* ---- Tablet and small laptop: wide tables ---- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  /* Wide tables: hide the two lowest-value columns on All Clients (Tenure, Payment) and let every other table scroll inside its card */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table th:nth-child(6),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table td:nth-child(6),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table th:nth-child(8),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table td:nth-child(8) { display: none !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table-wrapper,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-responsive,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-table-wrap,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-panel:has(> table),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-body:has(> table),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-block:has(> table) { overflow-x: auto !important; max-width: 100% !important; min-width: 0 !important; -webkit-overflow-scrolling: touch; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table tbody td:not(#hs-bump):not(#hs-bump2) { padding-left: 8px !important; padding-right: 8px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table td:nth-child(7) { white-space: normal !important; font-size: 13px !important; }
}

/* ---- Phone drawer: round close button like the hamburger, tighter rows, clearer open/closed sections ---- */
@media (max-width: 767.98px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-close-mobile {
    width: 40px !important; height: 40px !important; border-radius: 999px !important; border: 1px solid var(--hs-line-strong) !important; background: #fff !important; color: var(--hs-ink) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link { margin: 2px 12px !important; min-height: 44px !important; height: 44px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section-toggle { padding: 12px 16px 8px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section-chevron { color: var(--hs-ink) !important; opacity: 1 !important; font-size: 14px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section.is-open .sidebar-section-label,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section.open .sidebar-section-label,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section:not(.collapsed) .sidebar-section-items:not([hidden]) ~ * .sidebar-section-label { color: var(--hs-ink) !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section.open > .sidebar-section-items { background: #f6f4ec !important; border-radius: 16px !important; margin: 0 8px 6px !important; padding: 4px 0 !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section-toggle .sidebar-section-chevron,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section-toggle .sidebar-section-chevron i,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section-toggle i { color: var(--hs-ink-mute) !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section.open > .sidebar-section-toggle,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-section.open > .sidebar-section-toggle i { color: var(--hs-ink) !important; }
}

/* ---- Phone QA sweep (Ben, 5 Sep 2026): the two real overflows plus tap targets ---- */
@media (max-width: 767.98px) {
  /* Account Hub Activity: comm rows are a one-line flex on desktop, so on a phone they ran past the right edge */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row {
    flex-wrap: wrap !important; row-gap: 6px !important; column-gap: 10px !important; padding: 12px 14px !important; align-items: flex-start !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row > .ah-row-main,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row > [class*="summary"],
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row > .ah-row-sum { flex: 1 1 100% !important; min-width: 0 !important; order: 5 !important; white-space: normal !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row > .ah-row-when { margin-left: auto !important; flex: 0 0 auto !important; text-align: right !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row > * { max-width: 100% !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item > .ah-row .comm-chevron { margin-left: 4px !important; }
  /* Maps: the container must not be wider than the screen, and tiles must not paint outside it */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-shell,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-map,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .leaflet-container { max-width: 100% !important; width: 100% !important; overflow: hidden !important; }
  /* Tap targets: the topbar logo, section collapse headers, clickable panel titles and checkboxes */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-logo-mobile { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house button.nx-collapse-toggle:not(#hs-bump):not(#hs-bump2) { padding: 10px 0 12px !important; min-height: 44px !important; height: auto !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-panel__head [onclick], html:root[data-design-mode][data-theme][data-palette] body#opt-house h3.dv2-panel__title[onclick] { padding: 8px 0 !important; display: inline-block !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="checkbox"],
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input[type="checkbox"]:not([role="switch"]) { width: 24px !important; height: 24px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="checkbox"] + label, html:root[data-design-mode][data-theme][data-palette] body#opt-house label > input[type="checkbox"] { line-height: 24px !important; }
}

/* ---- Account Managers cards on phones: the Total MRR figure ("USD 70,966") was set at the desktop serif size and
        centred in a third of a 340px card, so it clipped on both sides. Size it to the box and let it wrap. Ben, 6 Sep 2026. ---- */
@media (max-width: 767.98px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card .manager-stats {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card .manager-stats .stat-box {
    min-width: 0 !important; overflow: visible !important; padding: 10px 6px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card .manager-stats .stat-value {
    font-size: clamp(15px, 5vw, 22px) !important; line-height: 1.1 !important; white-space: normal !important;
    overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; min-width: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card .badge,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card .stat-label {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  }
}

/* ---- Desktop: the collapse control and the collapsed rail -------------------
   Ben, 6 Sep 2026: "the collapsible menu on here to collapse the nav is really
   janky too. This needs to be reviewed on desktop."

   Measured before touching it: the collapse control was a 239x35 full-width
   strip with an 8px radius that hung past the sidebar's own edge, and the
   collapsed rail left its icons off-centre in the 64px, showed a broken
   1px-wide logo at the top, and hid 291px of nav behind a scrollbar with no
   affordance. It read as a bug, not a control.

   It is now one 36px round icon button, centred, on the house palette, and the
   rail centres everything in it.
   ------------------------------------------------------------------------- */
@media (min-width: 993px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-collapse-btn {
    width: 36px !important; height: 36px !important; min-height: 36px !important;
    padding: 0 !important; margin: 6px auto 10px !important;
    border-radius: 50% !important;
    border: 1px solid var(--hs-line) !important;
    background: var(--hs-paper) !important;
    color: var(--hs-ink-soft) !important;
    align-items: center !important; justify-content: center !important;
    box-shadow: none !important; flex: none !important;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-collapse-btn:hover {
    background: #f1efe3 !important; color: var(--hs-ink) !important; border-color: var(--hs-line-strong) !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-collapse-btn i { font-size: 14px !important; line-height: 1 !important; }
  /* Collapsed rail: everything on the centre line. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed { width: 68px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-link {
    width: 40px !important; height: 40px !important; min-height: 40px !important;
    padding: 0 !important; margin: 3px auto !important;
    justify-content: center !important; border-radius: 999px !important; overflow: hidden !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-link i { margin: 0 !important; font-size: 16px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-header { justify-content: center !important; padding: 0 !important; min-height: 60px !important; }
  /* The dot at the top of the rail: favicon.svg is a viewBox-only SVG, so the
     browser sizes it from its own default ratio and it came out 4px wide by
     24 tall — a sliver, not a logo. Pin the box on both axes. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-logo-collapsed img {
    width: 26px !important; min-width: 26px !important; max-width: none !important;
    height: 26px !important; object-fit: contain !important; border-radius: 7px !important;
  }
  /* The wordmark link stays in the flow at 66px wide with both of its images
     already hidden — an empty box shoving the rail's header off centre. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-logo { display: none !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-section-toggle { justify-content: center !important; padding: 10px 0 6px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar.collapsed .sidebar-user { justify-content: center !important; padding: 10px 0 !important; }
  /* 290-odd pixels of nav sit below the fold on a laptop. Keep it scrollable,
     but a chunky scrollbar down a 68px rail is most of what made it look broken. */
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-nav { scrollbar-width: thin !important; scrollbar-color: var(--hs-line-strong) transparent !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-nav::-webkit-scrollbar { width: 6px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: var(--hs-line-strong) !important; border-radius: 999px !important; }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent !important; }
}