/* house-account-hub.css: house style for the Account Hub page (ledger + activity tabs),
   the weekly-note editor, score popover, week picker, the Problem Clients (Manage) page
   and every modal those screens open. Every rule is prefixed with
   html:root[data-design-mode][data-theme][data-palette] body#opt-house  (see house.css)
   and uses !important because the legacy sheets fight with ID selectors + !important.
   Tokens come from house.css (--hs-*). Yellow is the only accent; green, amber, red and
   blue appear only as status (score tone, sentiment dot, delta pill). */

/* ---------------------------------------------------------------------------
   0. Page chrome (account_hub.html): segmented toggle + problem-clients bar
   ------------------------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tabs {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 5px !important; background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important;
  box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tab {
  border-radius: var(--hs-radius-pill) !important; padding: 9px 18px !important;
  font-family: var(--hs-font-body) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--hs-ink-soft) !important; background: transparent !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tab:hover { background: #f6f4ea !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tab.acc-tab--active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tab.acc-tab--active:hover {
  background: var(--hs-yellow) !important; color: #1a1700 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-tab .bi { color: inherit !important; font-size: 14px !important; }

html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important;
  padding: 12px 18px !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important;
  color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip .bi { color: var(--hs-warn) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip strong { color: var(--hs-ink) !important; font-weight: 700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip__link {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 8px 16px !important; border-radius: var(--hs-radius-pill) !important;
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line-strong) !important;
  color: var(--hs-ink) !important; font-size: 13px !important; font-weight: 600 !important;
  line-height: 1 !important; text-decoration: none !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip__link:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; }
/* the filter toggle (first link) is the primary action: yellow */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip__link:first-of-type,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .acc-stats-strip__link:first-of-type:hover {
  background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important;
}

/* ---------------------------------------------------------------------------
   1. Ledger tab
   ------------------------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* filter card */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-toolbar {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important;
  padding: 18px 20px !important; margin: 0 0 16px !important; gap: 14px 18px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-toolbar-cell { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-toolbar-label {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-control {
  height: 40px !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 14px !important;
  box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-input { padding-left: 38px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-input-wrap { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: var(--hs-radius-input) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-input:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-control:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-input-wrap:focus-within .sl-input {
  outline: 0 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-input-wrap .sl-input-icon { color: var(--hs-ink-mute) !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-week-nav .sl-icon-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-drawer-weeknav .sl-wn-btn {
  width: 36px !important; height: 36px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-week-nav .sl-icon-btn:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-drawer-weeknav .sl-wn-btn:hover { background: #fdfcf6 !important; border-color: var(--hs-line-hover) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-week-nav .sl-icon-btn .bi,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-ledger .sl-drawer-weeknav .sl-wn-btn .bi { color: var(--hs-ink) !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-week-nav { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
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 .sl-wn-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-close,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-nav {
  width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important; color: var(--hs-ink) !important;
  box-shadow: var(--hs-shadow-input) !important; font-size: 14px !important; line-height: 1 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-icon-btn:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wn-btn:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-close:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-nav:hover { background: #fdfcf6 !important; border-color: var(--hs-line-hover) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-week-label {
  height: 40px !important; padding: 0 16px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important;
  box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-week-label:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-week-cal { color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-btn-primary {
  height: 40px !important; padding: 0 18px !important; border-radius: var(--hs-radius-pill) !important;
  background: var(--hs-yellow) !important; border: 1px solid var(--hs-yellow) !important; color: #1a1700 !important;
  font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-btn-primary:hover { background: #f0dc3c !important; border-color: #f0dc3c !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-btn-primary .bi { color: inherit !important; }

/* KPI tiles */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 16px !important; margin: 0 0 16px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-tile {
  display: grid !important; grid-template-columns: auto 1fr !important; grid-template-areas: "label label" "value delta" "meta meta" !important;
  column-gap: 12px !important; row-gap: 4px !important; align-items: end !important; min-width: 240px !important;
  padding: 16px 20px 14px !important; background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-tile) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-label {
  grid-area: label; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important; margin: 0 0 4px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-value {
  grid-area: value; font-family: var(--hs-font-display) !important; font-size: 38px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.01em !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-max { font-family: var(--hs-font-body) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--hs-ink-mute) !important; margin-left: 3px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-delta {
  grid-area: delta; justify-self: start; display: inline-flex !important; align-items: center !important; gap: 2px !important;
  padding: 3px 9px !important; border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; margin-bottom: 3px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-up { background: #e3f2e6 !important; color: #1e6b3a !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-down { background: #fbe0d6 !important; color: #9a3412 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-flat,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-empty { background: #f1eee0 !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-meta { grid-area: meta; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; color: var(--hs-ink-mute) !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 4px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-trend-spacer { flex: 1 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-results-meta {
  align-self: center !important; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}

/* client table */
/* Card look WITHOUT killing the scroll: this wrapper carries max-height + overflow-y:auto
   (clients/index.html), and an `overflow: hidden` here stopped the client table scrolling
   at all. Clip the corners with a radius + isolation instead. Ben, 6 Sep 2026. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table-wrapper {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important; isolation: isolate;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table thead th {
  background: #fcfbf6 !important; border-bottom: 1px solid var(--hs-line) !important; font-family: var(--hs-font-body) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
  padding: 8px 16px !important;
}
/* Compact client-list rows. This !important padding was the rule actually
   winning over clients/index.html's own cell padding, so the rows stayed thick
   after that sheet was tightened (Jeff, 10 Sep 2026: "the rows are still quite
   thick"). Keep the two in step if either changes. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table tbody td { border-bottom: 1px solid #f0ede3 !important; padding: 6px 16px !important; vertical-align: middle !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table tbody tr:last-child td { border-bottom: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .status-table tbody tr.sl-row:hover td { background: #fdfcf6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sort-arrow { color: #cfc9b3 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sort-arrow.active { color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .stage-pill {
  display: inline-flex !important; align-items: center !important; padding: 4px 11px !important; border-radius: var(--hs-radius-pill) !important;
  font-family: var(--hs-font-body) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-notes-toggle {
  width: 36px !important; height: 36px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink-mute) !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 .sl-notes-toggle.has-content { color: var(--hs-ink) !important; background: var(--hs-yellow-soft) !important; border-color: #efe3a0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-notes-toggle:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; }

/* weekly note editor (the drawer row renders as a centred dialog) */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-inner {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important; padding: 24px 28px 22px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-head { padding: 0 0 14px !important; margin: 0 0 16px !important; border-bottom: 1px solid var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-label {
  font-family: var(--hs-font-display) !important; font-size: 26px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--hs-ink) !important; gap: 10px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-label .bi { font-size: 16px !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-meta { font-family: var(--hs-font-body) !important; font-size: 12.5px !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-weeknav {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px !important; margin: 0 0 18px !important;
  background: var(--hs-bg) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-pill) !important; width: auto !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wn-label { font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--hs-ink) !important; padding: 0 6px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wn-pick {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 36px !important; padding: 0 12px !important;
  border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important; color: var(--hs-ink-mute) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wn-pick input[type="date"] { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: auto !important; font-family: var(--hs-font-body) !important; font-size: 13px !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wn-loading { font-family: var(--hs-font-body) !important; font-size: 12.5px !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-field-label {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-req { color: #b3ad98 !important; font-weight: 600 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-textarea {
  border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  padding: 12px 14px !important; font-family: var(--hs-font-body) !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--hs-ink) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-textarea:focus { outline: 0 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-hint,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .save-indicator { font-family: var(--hs-font-body) !important; font-size: 12.5px !important; color: var(--hs-ink-mute) !important; }

/* score popover (app/static/js/score-popover.js) */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-popover {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-tile) !important;
  box-shadow: var(--hs-shadow-card) !important; padding: 6px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-popover .sp-opt {
  border-radius: 12px !important; padding: 8px 12px !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-popover .sp-opt:hover { background: #fdfcf6 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-popover .sp-opt.is-current { background: var(--hs-yellow-soft) !important; color: var(--hs-ink) !important; font-weight: 600 !important; }

/* week picker popover */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-pop {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important; padding: 14px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-title { font-family: var(--hs-font-display) !important; font-size: 20px !important; font-weight: 500 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-dow { font-family: var(--hs-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-day { border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; font-size: 13px !important; font-weight: 500 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-day.is-in-selected-week { background: var(--hs-yellow-soft) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-day.is-week-start,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-day.is-week-end { background: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-preset {
  border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  font-family: var(--hs-font-body) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--hs-ink) !important; padding: 8px 14px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-wp-preset:hover { background: #fdfcf6 !important; border-color: var(--hs-line-hover) !important; }

/* ---------------------------------------------------------------------------
   2. Activity tab: master-detail
   ------------------------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-layout {
  display: flex !important; gap: 20px !important; margin: 0 1.5rem 1.5rem !important; background: transparent !important; border: 0 !important;
  font-family: var(--hs-font-body) !important;
}
/* rail */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar {
  width: 264px !important; background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-right: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important; overflow: hidden !important; padding: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-search { position: relative !important; padding: 14px 14px 8px !important; border: 0 !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-search-ico { position: absolute !important; left: 28px !important; top: 26px !important; font-size: 13px !important; color: var(--hs-ink-mute) !important; pointer-events: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-search input {
  width: 100% !important; height: 38px !important; padding: 0 14px 0 36px !important; border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important; color: var(--hs-ink) !important;
  font-family: var(--hs-font-body) !important; font-size: 13.5px !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-search input:focus { outline: 0 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-list { padding: 6px 10px 14px !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-section {
  padding: 14px 8px 6px !important; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--hs-ink-mute) !important; border: 0 !important; background: transparent !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item {
  display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; margin: 2px 0 !important;
  border-radius: 12px !important; border: 0 !important; background: transparent !important; color: var(--hs-ink-soft) !important; cursor: pointer !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item:hover { background: #fdfcf6 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item.selected,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item.selected:hover { background: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item .bi { color: inherit !important; font-size: 14px !important; flex-shrink: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-folder-ico { color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item.selected .ah-folder-ico { color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item .ah-name {
  flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 500 !important; color: inherit !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item.selected .ah-name { font-weight: 600 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sent-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; flex-shrink: 0 !important; order: 2 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item .ah-count {
  order: 3 !important; padding: 2px 9px !important; border-radius: var(--hs-radius-pill) !important; background: #f1eee0 !important; color: var(--hs-ink-mute) !important;
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.5 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar-item.selected .ah-count { background: var(--hs-ink) !important; color: #fff !important; }

/* main column */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-main { display: flex !important; flex-direction: column !important; gap: 12px !important; background: transparent !important; border: 0 !important; padding: 0 4px 24px 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-channels-wrap,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar { padding: 0 !important; }

/* assigned / unassigned segmented */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-asgn-filter {
  display: inline-flex !important; align-self: flex-start !important; gap: 4px !important; padding: 4px !important; margin: 0 !important;
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-asgn-seg {
  padding: 7px 14px !important; border-radius: var(--hs-radius-pill) !important; border: 0 !important; background: transparent !important;
  font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--hs-ink-soft) !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-asgn-seg:hover { background: #f6f4ea !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-asgn-seg.ah-asgn-seg--active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-asgn-seg.ah-asgn-seg--active:hover { background: var(--hs-yellow) !important; color: #1a1700 !important; }

/* channel pill group */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channels {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; padding: 5px !important; margin: 0 !important;
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border-radius: var(--hs-radius-pill) !important;
  border: 0 !important; background: transparent !important; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--hs-ink-soft) !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab:hover { background: #f6f4ea !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab.active:hover { background: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab .bi { color: inherit !important; font-size: 13px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab .count {
  padding: 1px 7px !important; border-radius: var(--hs-radius-pill) !important; background: #f1eee0 !important; color: var(--hs-ink-mute) !important;
  font-size: 11px !important; font-weight: 700 !important; line-height: 1.5 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab.active .count { background: rgba(255,255,255,.85) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab[onclick*="showActionItems"] { border: 1px solid var(--hs-line-strong) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab[onclick*="showActionItems"].active { border-color: var(--hs-yellow) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab[onclick*="showActionItems"] .count { background: #f1eee0 !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab[onclick*="showActionItems"].active .count { background: rgba(255,255,255,.85) !important; color: #1a1700 !important; }

/* search + sentiment toolbar */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #commSearch,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #sentimentFilter {
  height: 40px !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; padding: 0 14px !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #commSearch { max-width: 260px !important; flex: 1 1 200px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #sentimentFilter { width: 170px !important; padding-right: 32px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #commSearch:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #sentimentFilter:focus { outline: 0 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #ahClientLabel {
  align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border-radius: var(--hs-radius-pill) !important;
  background: var(--hs-yellow) !important; color: #1a1700 !important; font-size: 12.5px !important; font-weight: 600 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar #ahClientLabel a { color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar-right { gap: 8px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar-right > span { font-size: 12.5px !important; font-weight: 500 !important; color: var(--hs-ink-mute) !important; margin-right: 4px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar-right .btn {
  width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important; color: var(--hs-ink) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-toolbar-right .btn:hover { background: #fdfcf6 !important; border-color: var(--hs-line-hover) !important; }

/* bulk action bar (display is toggled by .show; do not set display here) */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar {
  align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 10px 14px !important;
  background: #fbf8e6 !important; border: 1px solid #efe6b3 !important; border-radius: var(--hs-radius-tile) !important; box-shadow: none !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar > span { color: var(--hs-ink) !important; font-size: 13px !important; font-weight: 600 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar .form-select {
  height: 38px !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; background-color: var(--hs-paper) !important;
  font-family: var(--hs-font-body) !important; font-size: 13.5px !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar .btn {
  height: 36px !important; padding: 0 16px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar .btn-primary-opt { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bulk-bar .btn-danger-opt { color: var(--hs-bad) !important; }

/* comms list card */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #commsPanel {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important; padding: 4px 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item {
  margin: 0 !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid #f0ede3 !important; border-left: 0 !important;
  box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item::after { display: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item:last-child { border-bottom: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item:hover { background: #fdfcf6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item:has(.comm-detail.open) { background: #fdfcf6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-row-unassigned { border-left: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row { padding: 12px 18px !important; gap: 14px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-who { min-width: 200px !important; max-width: 300px !important; gap: 8px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-who > span { font-size: 13.5px !important; font-weight: 600 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-row-unassigned .ah-row-who > span { color: var(--hs-ink-soft) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-chan {
  width: auto !important; min-width: 92px !important; justify-content: center !important; gap: 6px !important; padding: 4px 10px !important;
  border-radius: var(--hs-radius-pill) !important; background: #f4f1e4 !important; border: 1px solid var(--hs-line-strong) !important;
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-chan .bi,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-chan span { color: var(--hs-ink) !important; font-size: 11.5px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-chan .bi { font-size: 12px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-snip { font-size: 13.5px !important; color: var(--hs-ink-soft) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-when { width: 64px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-when div { font-size: 12px !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-chevron { color: var(--hs-ink-mute) !important; font-size: 12px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-suggestion-chip {
  border-radius: var(--hs-radius-pill) !important; background: var(--hs-yellow-soft) !important; border: 1px solid #efe3a0 !important; color: var(--hs-ink) !important; font-size: 12px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-suggestion-chip button { border-radius: var(--hs-radius-pill) !important; background: var(--hs-yellow) !important; border: 0 !important; color: #1a1700 !important; font-weight: 600 !important; }

/* house checkbox on every comms row */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-row-check { display: flex !important; align-items: center !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-check {
  -webkit-appearance: none !important; appearance: none !important; width: 21px !important; height: 21px !important; margin: 0 !important;
  border-radius: 7px !important; border: 1.5px solid #d6cdaf !important; background-color: #fff !important; cursor: pointer !important;
  transition: background .15s, border-color .15s !important; box-shadow: none !important; display: inline-block !important; vertical-align: middle !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-check:checked {
  background-color: var(--hs-good) !important; border-color: var(--hs-good) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") !important;
  background-size: 12px !important; background-position: center !important; background-repeat: no-repeat !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-check:focus-visible { outline: 0 !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; border-color: var(--hs-yellow) !important; }

/* expanded detail: soft cream panel */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail.open {
  margin: 0 18px 16px !important; padding: 16px 18px !important; background: #faf8ef !important; border: 1px solid #eee9d6 !important;
  border-radius: 16px !important; color: var(--hs-ink-soft) !important; font-family: var(--hs-font-body) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail div[style*="text-transform: uppercase"] {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--hs-ink-mute) !important; margin-bottom: 6px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail .comm-summary-text { font-size: 13.5px !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-bubble { border-radius: 16px !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; padding: 10px 14px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-bubble.outbound { background: #f8efb0 !important; color: var(--hs-ink) !important; border-bottom-right-radius: 6px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-bubble.inbound { background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; color: var(--hs-ink) !important; border-bottom-left-radius: 6px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-bubble-dir,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-bubble-time { font-family: var(--hs-font-body) !important; font-size: 11px !important; font-weight: 600 !important; color: var(--hs-ink-mute) !important; letter-spacing: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-badge { border-radius: var(--hs-radius-pill) !important; font-size: 11.5px !important; font-weight: 700 !important; padding: 2px 9px !important; background: #f1eee0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-action-item { background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: 12px !important; padding: 10px 14px !important; margin-bottom: 6px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail .cc-tag { border-radius: var(--hs-radius-pill) !important; background: #f1eee0 !important; color: var(--hs-ink-soft) !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 3px 10px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail .form-select { height: 38px !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail .btn {
  height: 36px !important; padding: 0 16px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important; color: var(--hs-ink) !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail .btn-primary-opt { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-detail audio { border-radius: var(--hs-radius-pill) !important; }

/* auto-match review panel */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch {
  margin: 0 !important; background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-tile) !important; overflow: hidden !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__summary { padding: 12px 16px !important; font-size: 13.5px !important; color: var(--hs-ink-soft) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__summary .bi-magic { color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__list { border-top: 1px solid var(--hs-line) !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__row { border-bottom: 1px solid #f0ede3 !important; padding: 10px 16px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__row .ah-am-phone { font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__row .ah-am-count { background: #f1eee0 !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__row button.ah-am-apply,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__footer button {
  border-radius: var(--hs-radius-pill) !important; padding: 6px 14px !important; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__footer button { background: var(--hs-ink) !important; border-color: var(--hs-ink) !important; color: #fff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-automatch__footer { border-top: 1px solid var(--hs-line) !important; background: #fcfbf6 !important; font-size: 12.5px !important; color: var(--hs-ink-mute) !important; }

/* action items panel */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel { padding: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .nx-stat-card {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-tile) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .nx-stat-card::after { display: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .nx-stat-card > div:first-child { font-family: var(--hs-font-display) !important; font-size: 28px !important; font-weight: 500 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .nx-stat-card > div:last-child {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .cc-panel {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important; overflow: hidden !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .cc-panel-header h3 { font-family: var(--hs-font-display) !important; font-size: 22px !important; font-weight: 500 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .cc-badge {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; padding: 3px 10px !important;
  border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.4 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .cc-badge .cc-badge-dot { width: 7px !important; height: 7px !important; min-width: 0 !important; border-radius: 50% !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .cc-table th[style*="65px"] { width: 104px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .btn { border-radius: var(--hs-radius-pill) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #actionItemsPanel .form-select { border-radius: 12px !important; border: 1px solid var(--hs-line-strong) !important; font-family: var(--hs-font-body) !important; }

@media (max-width: 1200px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-sidebar { width: 100% !important; }
}

/* ---------------------------------------------------------------------------
   3. Problem Clients (Manage) page + every modal these screens open
   ------------------------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-header h1 { font-family: var(--hs-font-display) !important; font-weight: 500 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-header p { font-family: var(--hs-font-body) !important; color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-stat-card {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-tile) !important; padding: 16px 20px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-stat-label {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-stat-value { font-family: var(--hs-font-display) !important; font-size: 36px !important; font-weight: 500 !important; line-height: 1.1 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-stat-value.danger { color: var(--hs-bad) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-stat-value.success { color: var(--hs-good) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important; padding: 16px 20px !important; gap: 12px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar .form-select {
  height: 40px !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar .form-check-label { font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar .btn {
  height: 40px !important; padding: 0 18px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-toolbar .btn-danger-opt { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-table-wrap .score-select {
  width: 104px !important; min-width: 0 !important; height: 32px !important; padding: 0 24px 0 10px !important; border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-line-strong) !important; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important; text-align: left !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-table-wrap td .btn {
  height: 32px !important; padding: 0 14px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-table-wrap td .btn-danger-opt { color: var(--hs-bad) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pc-empty { font-family: var(--hs-font-body) !important; color: var(--hs-ink-mute) !important; }

/* modals: Add Note, Resolve, Flag Problem Client, Problem History, Prompt Agent */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-content,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-content,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-content,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #logHistoryModal .modal-content,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-content {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important; color: var(--hs-ink) !important; overflow: hidden !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-header,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-header,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-header,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #logHistoryModal .modal-header,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-header { padding: 20px 24px 14px !important; border-bottom: 1px solid var(--hs-line) !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #logHistoryModal .modal-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-title {
  font-family: var(--hs-font-display) !important; font-size: 26px !important; font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-title .bi { color: var(--hs-ink-mute) !important; font-size: 18px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-body,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-body,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-body,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-body { padding: 20px 24px !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .form-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .form-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .form-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .form-label {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important; margin-bottom: 8px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .form-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .form-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .form-select {
  width: 100% !important; border-radius: var(--hs-radius-input) !important; border: 1px solid var(--hs-line-strong) !important; background-color: var(--hs-paper) !important;
  font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important; padding: 10px 14px !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .form-control:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .form-control:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .form-control:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .form-select:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .form-control:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .form-select:focus { outline: 0 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteReasonContainer,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveReasonContainer,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptTitle {
  background: #faf8ef !important; border: 1px solid #eee9d6 !important; border-radius: var(--hs-radius-input) !important; padding: 10px 14px !important; font-size: 13px !important; color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-footer,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-footer,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-footer,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-footer { padding: 14px 24px 20px !important; border-top: 1px solid var(--hs-line) !important; background: transparent !important; gap: 8px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-footer .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-footer .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-footer .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-footer .btn {
  height: 40px !important; padding: 0 18px !important; border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: var(--hs-paper) !important;
  color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .modal-footer .btn-primary-opt,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #resolveModal .modal-footer .btn-primary-opt,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #aiPromptModal .modal-footer .btn-primary-opt,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #flagProblemModal .modal-footer .btn-danger-opt { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #addNoteModal .form-check-input[type="checkbox"] { width: 21px !important; height: 21px !important; border-radius: 7px !important; }

/* ---- Activity tab redesign (Ben, 5 Sep 2026): problems first, one feed, client picker in the toolbar ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 1.5rem 18px !important;
}
@media (max-width: 1100px) { html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn { grid-template-columns: 1fr !important; margin: 0 1rem 14px !important; } }
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.ah-attn__card:not(#hs-bump):not(#hs-bump2) {
  display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important; width: 100% !important; height: auto !important; min-height: 0 !important;
  padding: 16px 18px !important; background: #fff !important; border: 1px solid var(--hs-line) !important; border-radius: 18px !important; box-shadow: var(--hs-shadow-tile) !important;
  font-family: var(--hs-font-body) !important; color: var(--hs-ink) !important; cursor: pointer !important; transition: border-color .15s ease, transform .15s ease !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.ah-attn__card:not(#hs-bump):not(#hs-bump2):hover { border-color: #d8cfac !important; transform: translateY(-1px) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.ah-attn__card:not(#hs-bump):not(#hs-bump2).is-active { border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 3px var(--hs-yellow-ring), var(--hs-shadow-tile) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__num {
  font-family: var(--hs-font-display) !important; font-size: 34px !important; line-height: 1 !important; min-width: 52px !important; text-align: center !important; color: var(--hs-ink) !important;
  background: #f4f2ea !important; border-radius: 14px !important; padding: 10px 8px !important; flex-shrink: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__card.is-hot .ah-attn__num { background: #fdece6 !important; color: var(--hs-bad) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__card.is-warm .ah-attn__num { background: var(--hs-yellow-soft, #fbf6cf) !important; color: #6b5a00 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__body { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__label { font-size: 14px !important; font-weight: 700 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-attn__sub { font-size: 12px !important; color: var(--hs-ink-mute) !important; line-height: 1.35 !important; }
/* The rail is gone: the feed takes the whole width */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-layout { display: block !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-main { max-height: none !important; }
/* Client picker in the toolbar */
html:root[data-design-mode][data-theme][data-palette] body#opt-house select.ah-client-select { width: auto !important; min-width: 220px !important; max-width: 320px !important; height: 40px !important; font-weight: 600 !important; }
/* Negative conversations carry a red edge in the feed so they stand out without opening them */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item[data-sentiment="negative"] > .ah-row { box-shadow: inset 4px 0 0 var(--hs-bad) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comm-item[data-sentiment="negative"] > .ah-row::after {
  content: "Needs attention"; margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-bad); background: #fdece6; border-radius: 999px; padding: 4px 9px; flex-shrink: 0;
}