/* crm-tabs.css — one look for every row of tabs on the platform (owner,
 * 2026-10-01: "any tabs, two or three or four side by side, look like this,
 * on every page and screen" - and the longer rows too).
 *
 * THE LOOK is the campaign builder's ABO / CBO choice: a grey track with a
 * hairline edge, the chosen tab the white one sitting in it, the others muted
 * until the pointer is on them. No underline, no lime fill, no pill per tab,
 * no shadow - and only the colour moves.
 *
 * WHY ONE FILE. Twenty-odd screens each drew their tabs their own way:
 * underlines, lime blocks, outlined pills, Chatwoot's blue rule. A look kept in
 * twenty places is a look nobody can change. It lives here once, loaded last,
 * and each screen only lends it selectors. `!important` because the screens'
 * own sheets arrive AFTER this one when crm-lazy.js loads them on demand, and
 * several of them out-rank a plain class.
 *
 * ADDING A SCREEN. Give the row the class `crm-tabs` (and its tabs `is-on` when
 * chosen), or put the row and its tab in the lists below. Multi-pick filters
 * (labels, columns, teams) are NOT tabs and stay as they are.
 */

:root {
  --ct-track: #f6f7f3;
  --ct-edge: #e8ebe4;
  --ct-on: #ffffff;
  --ct-ink: #282e34;
  --ct-muted: #626f7f;
}

:root.dark,
.dark,
[data-theme="dark"] {
  --ct-track: #15181c;
  --ct-edge: #2c3138;
  --ct-on: #2a2f36;
  --ct-ink: #e8eaed;
  --ct-muted: #9aa3af;
}

/* ---------- the track: hugs its tabs, on a line of its own ---------- */

.crm-tabs,
.crm-ads__seg,
.crm-adc .crm-adc__seg,
.crm-adc .crm-adc__chips.is-seg,
.crm-adc .crm-adc__viewtoggle,
.crm-ac__tabs,
.crm-adm-seg,
.crm-camp-tabs,
body.crm-convo .crm-cb-tabs,
body.crm-convo .crm-cb-chips,
.crm-cf__tabs,
.crm-iv__tabs,
.crm-iv__chips,
.crm-ms-screen__tabs,
.crm-opp__tabs,
.crm-opp__chips,
.crm-rep__tabs,
.crm-rp__tabs,
.cfq-tabs,
.crm-pb__modes,
.crm-tc-segs,
.crm-clockp__chips,
.crm-ac__joinpick,
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul),
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  align-self: flex-start;
  gap: 2px !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 3px !important;
  border: 1px solid var(--ct-edge) !important;
  border-radius: 8px !important;
  background: var(--ct-track) !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

/* ---------- the track: fills its row, tabs share it equally ---------- */

.crm-cd-tabs,
.cpk-seg,
.crm-cl__pick {
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--ct-edge) !important;
  border-radius: 8px !important;
  background: var(--ct-track) !important;
  box-shadow: none !important;
}

.crm-tabs::-webkit-scrollbar,
.crm-opp__tabs::-webkit-scrollbar,
body.crm-convo .crm-cb-tabs::-webkit-scrollbar,
body.crm-convo .crm-cb-chips::-webkit-scrollbar { display: none; }

/* ---------- a tab ---------- */

.crm-tabs > button,
.crm-tabs > a,
.crm-ads .crm-ads__seg .crm-ads__segbtn,
.crm-adc .crm-adc__seg .crm-adc__segbtn,
.crm-adc .crm-adc__chips.is-seg .crm-adc__chip,
.crm-adc .crm-adc__viewtoggle .crm-adc__viewbtn,
.crm-ac .crm-ac__tab,
.crm-ac__tabs .crm-ac__tab,
.crm-adm-seg .crm-adm-seg-btn,
.crm-camp-tabs .crm-camp-tab,
body.crm-convo .crm-cb-tabs .crm-cb-tab,
body.crm-convo .crm-cb-chips .crm-cb-chip,
.crm-co .crm-cd-tab,
.crm-cd-tabs .crm-cd-tab,
.crm-cf__tabs .crm-cf__tab,
.crm-cl__pick .crm-cl__tab,
.crm-iv .crm-iv__tab,
.crm-iv__tabs .crm-iv__tab,
.crm-iv__chips .crm-iv__chip,
.crm-ms-screen__tabs .crm-ms-screen__pair,
.crm-opp__tabs .crm-opp__tab,
.crm-opp__chips .crm-opp__chip,
.crm-rep__tabs .crm-rep__tab,
.crm-rp__tabs .crm-rp__tab,
.crm-tabs .crm-rp__pill,
.cpo .cfq-tab,
.cfq-tabs .cfq-tab,
.cpk-dialog .cpk-seg-b,
.cpk-seg .cpk-seg-b,
.crm-pb .crm-pb__bar .crm-pb__mode,
.crm-pb__modes .crm-pb__mode,
.crm-tc-segs .crm-tc-seg,
.crm-clockp__chips .crm-clockp__chip,
.crm-tabs .crm-traffic__chip,
.crm-tabs .crm-out__chip,
.crm-ac__joinpick .crm-ac__chip,
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul) > li > a,
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto;
  height: 30px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline-color: transparent;
  color: var(--ct-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  top: 0 !important;
  transform: none !important;
  cursor: pointer;
  transition: color 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* The conversation list's channel row: the track sits in the bar, not on its edges. */
body.crm-convo .crm-cb-tabs { align-self: center !important; margin: 6px 0 !important; }
body.crm-convo .crm-cb-chips { margin: 6px 12px !important; }

/* The tabs in a filling track share it. */
.crm-cd-tabs .crm-cd-tab,
.cpk-seg .cpk-seg-b,
.crm-cl__pick .crm-cl__tab { flex: 1 1 0 !important; min-width: 0 !important; }

/* Icon-only view switch (grid / list) stays square. */
.crm-adc .crm-adc__viewtoggle .crm-adc__viewbtn { width: 30px !important; padding: 0 !important; }

/* Chatwoot's tab row: the item is the <li>, the tab is its <a>. */
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul) { margin-bottom: 10px !important; }
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul) > li { margin: 0 !important; flex: 0 0 auto !important; min-width: auto !important; }
/* A tab never shrinks under its own words and count (the conversation list's
   Mine / Unassigned / All drew "0Unassigned2527" on top of each other). Where
   the row is too narrow for the tabs and the buttons beside them, the buttons
   move under the tabs instead. */
div:not(.conversations-list-wrap > div):has(> ul.list-none > li > a.select-none.border-b) { flex-wrap: wrap !important; row-gap: 6px; align-items: center; }
div:not(.conversations-list-wrap > div):has(> ul.list-none > li > a.select-none.border-b) > ul { flex: 0 0 auto !important; }
/* Chatwoot's TabBar slides a box under the chosen tab and draws a hairline
   between tabs; the white tab is the box now, so the hairlines go. */
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > div.absolute.pointer-events-none {
  top: 3px !important; bottom: 3px !important; height: auto !important;
  border-radius: 6px !important; background: var(--ct-on) !important;
  box-shadow: none !important; outline: 0 !important;
}
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > div.w-px { display: none !important; }
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > button { position: relative; z-index: 1; }

/* Missed: the tab is a pair - the word and its ⓘ - so the pair is what lights. */
.crm-ms-screen__tabs .crm-ms-screen__pair { padding: 0 6px 0 0 !important; }
.crm-ms-screen__tabs .crm-ms-screen__tab {
  height: 30px; padding: 0 4px 0 12px !important; border: 0 !important; background: transparent !important;
  color: inherit !important; font-weight: inherit !important;
}

/* ---------- pointer on it ---------- */

.crm-tabs > button:hover,
.crm-tabs > a:hover,
.crm-ads .crm-ads__seg .crm-ads__segbtn:hover,
.crm-adc .crm-adc__seg .crm-adc__segbtn:hover,
.crm-adc .crm-adc__chips.is-seg .crm-adc__chip:hover,
.crm-adc .crm-adc__viewtoggle .crm-adc__viewbtn:hover,
.crm-ac__tabs .crm-ac__tab:hover,
.crm-adm-seg .crm-adm-seg-btn:hover,
.crm-camp-tabs .crm-camp-tab:hover,
body.crm-convo .crm-cb-tabs .crm-cb-tab:hover,
body.crm-convo .crm-cb-chips .crm-cb-chip:hover,
.crm-cd-tabs .crm-cd-tab:hover,
.crm-cf__tabs .crm-cf__tab:hover,
.crm-cl__pick .crm-cl__tab:hover,
.crm-iv__tabs .crm-iv__tab:hover,
.crm-iv__chips .crm-iv__chip:hover,
.crm-ms-screen__tabs .crm-ms-screen__pair:hover,
.crm-opp__tabs .crm-opp__tab:hover,
.crm-opp__chips .crm-opp__chip:hover,
.crm-rep__tabs .crm-rep__tab:hover,
.crm-rp__tabs .crm-rp__tab:hover,
.crm-tabs .crm-rp__pill:hover,
.cfq-tabs .cfq-tab:hover,
.cpk-seg .cpk-seg-b:hover,
.crm-pb__modes .crm-pb__mode:hover,
.crm-tc-segs .crm-tc-seg:hover,
.crm-clockp__chips .crm-clockp__chip:hover,
.crm-tabs .crm-traffic__chip:hover,
.crm-tabs .crm-out__chip:hover,
.crm-ac__joinpick .crm-ac__chip:hover,
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul) > li > a:hover,
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > button:hover {
  color: var(--ct-ink) !important;
  background: transparent !important;
}

/* ---------- the chosen one ---------- */

.crm-tabs > .is-on,
.crm-tabs > .is-active,
.crm-ads .crm-ads__seg .crm-ads__segbtn.is-on,
.crm-adc .crm-adc__seg .crm-adc__segbtn.is-on,
.crm-adc .crm-adc__chips.is-seg .crm-adc__chip.is-on,
.crm-adc .crm-adc__viewtoggle .crm-adc__viewbtn.is-on,
.crm-ac__tabs .crm-ac__tab.is-on,
.crm-adm-seg .crm-adm-seg-btn.is-on,
.crm-camp-tabs .crm-camp-tab.is-on,
body.crm-convo .crm-cb-tabs .crm-cb-tab.is-active,
body.crm-convo .crm-cb-chips .crm-cb-chip.is-active,
.crm-cd-tabs .crm-cd-tab.is-on,
.crm-cf__tabs .crm-cf__tab.is-on,
.crm-cl__pick .crm-cl__tab.is-on,
.crm-iv__tabs .crm-iv__tab.is-on,
.crm-iv__chips .crm-iv__chip.is-on,
.crm-ms-screen__tabs .crm-ms-screen__pair:has(.crm-ms-screen__tab.is-on),
.crm-opp__tabs .crm-opp__tab.is-on,
.crm-opp__chips .crm-opp__chip.is-on,
.crm-rep__tabs .crm-rep__tab.is-on,
.crm-rp__tabs .crm-rp__tab.is-on,
.crm-tabs .crm-rp__pill.is-on,
.cfq-tabs .cfq-tab.is-on,
.cpk-seg .cpk-seg-b.is-on,
.crm-pb__modes .crm-pb__mode.is-on,
.crm-tc-segs .crm-tc-seg.is-on,
.crm-clockp__chips .crm-clockp__chip.is-on,
.crm-tabs .crm-traffic__chip.is-on,
.crm-tabs .crm-out__chip.is-on,
.crm-ac__joinpick .crm-ac__chip.is-on,
ul.list-none:has(> li > a.select-none.border-b):not(.conversations-list-wrap ul) > li > a.border-n-brand {
  background: var(--ct-on) !important;
  color: var(--ct-ink) !important;
}
div.relative.flex.h-8.rounded-lg.bg-n-alpha-1.w-fit > button.text-n-blue-11 { color: var(--ct-ink) !important; }

/* The campaign builder's rows are choices of several (placements, genders,
   languages) as often as of one, and a placement row runs to seven: they wrap
   onto a second line rather than hide what does not fit (2026-10-01). */
.crm-adc .crm-adc__chips.is-seg,
.crm-adc .crm-adc__seg { flex-wrap: wrap !important; overflow: visible; }