/* ═══ PLAIN TABS: one look for every tab and view switch on the platform ═══
   Owner 2026-10-16: "I hate these pills. Remove them all from the platform and use tabs with a 1px hr faded bottom border and a 2px border
   on the active tab." So: words on a faded 1px line, a 2px line under the active one, no fills, no rounded boxes, wrapping onto a second
   line instead of scrolling or being cut off (the app does the same).
   Loaded LAST on every page (includes/head.php and admin/includes/head.php), after the page-level <style> blocks' families it replaces,
   hence the !important: the old pill rules still sit in their own files and simply lose. To add a tab bar, give it one of these classes
   (or add its container below); do NOT write new pill CSS.
   NOT touched on purpose: radio-style FORM choices (pe-seg, sl-seg, tm-seg, t-seg, sk-seg: they are inputs, not tabs), status badges / small
   pills inside tables, and tab bars that were already plain underlines (ux-tabs, st-tabs, mc-tabs, cp-tabs, og2-tabs, msh-tabs, sh-tabs, dgx-tabs). */
:root { --pt-line: var(--line, #e5e7eb); --pt-ink: var(--ink-3, #6b7280); --pt-muted: var(--ink-4, #9ca3af); --pt-on: var(--bf-navy, #1e3a5f); }

/* ── The bar: a faded 1px line under the words ── */
:is(.adm-pagetabs, .fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds,
    .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs, .pp-tabs, .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg,
    .cgp-tabs, .cmw-tabs, .hd-tabs, .pr-qtabs, #regionTabs) {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 0 2px !important;
  padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--pt-line) !important; border-radius: 0 !important;
  box-shadow: none !important; overflow: visible !important; white-space: normal !important; max-width: 100%;
}
/* the bars that sit on the page background lose their grey box; sticky ones keep their opaque background so content never shows through */
:is(.fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds, .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs,
    .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg, .cmw-tabs, .hd-tabs, .pr-qtabs) { background: transparent !important; }
:is(.pp-tabs, .cgp-tabs) { padding: 6px 0 0 !important; }
.adm-pagetabs { padding: 0 20px !important; gap: 0 4px !important; }
@media (max-width: 700px) { .adm-pagetabs { padding: 0 12px !important; } }
/* the older admin underline bars used to scroll sideways on a phone: they wrap now (nothing is cut off) */
:is(.ux-tabs, .ld-tabs, .sa-tabs, .om-tabs, .nav-tabs) { flex-wrap: wrap !important; overflow: visible !important; }

/* ── The words ── */
:is(.adm-pagetabs, .fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds,
    .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs, .pp-tabs, .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg,
    .cgp-tabs, .cmw-tabs, .hd-tabs, .pr-qtabs) :is(a, button, .wb-chip),
#regionTabs .bf-region-tab {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 7px 12px !important; margin: 0 0 -1px !important; color: var(--pt-ink) !important;
  font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: color .15s;
}
:is(.adm-pagetabs, .fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds,
    .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs, .pp-tabs, .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg,
    .cgp-tabs, .cmw-tabs, .hd-tabs, .pr-qtabs) :is(a, button, .wb-chip):hover,
#regionTabs .bf-region-tab:hover { background: transparent !important; color: var(--pt-on) !important; }
/* the open one: navy words and a 2px navy line */
:is(.adm-pagetabs, .fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds,
    .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs, .pp-tabs, .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg,
    .cgp-tabs, .cmw-tabs, .hd-tabs, .pr-qtabs) :is(a, button, .wb-chip):is(.on, .active, .is-active, .sel, [aria-selected="true"], [aria-current="page"]) {
  background: transparent !important; color: var(--pt-on) !important; border-bottom: 2px solid var(--pt-on) !important; box-shadow: none !important;
}
/* counts and small labels inside a tab are plain words, not little pills */
:is(.adm-pagetabs, .fh-tabs, .fh-chips, .mp-tabs, .t-tabs, .rc-tabs, .po-tabs, .pi-seg, .ml-tabs, .of-tabs, .lo-t, .ac-t, .de-nav, .pf-kinds,
    .wb-viewtabs, .jb-viewtabs, .mt-seg, .nt-seg, .rq-tabs, .md-tabs, .dl-tabs, .pp-tabs, .pr-seg, .sh-seg, .pv-tabs, .pv-seg, .ch-seg,
    .cgp-tabs, .cmw-tabs, .hd-tabs, .pr-qtabs) :is(.cnt, em, b, a > span:not(.dot), button > span:not(.dot)) {
  background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin-left: 4px; color: var(--pt-muted) !important; font-weight: 600 !important;
}
/* the homepage's big service tabs keep their size and icons */
.hd-tabs button { padding: 10px 18px !important; gap: 8px; }
.hd-tabs button i { color: inherit !important; }
/* equal-width bars (messages filter, calculator switches) keep sharing the line */
:is(.ch-seg, .pv-tabs) :is(a, button) { flex: 1 1 0; text-align: center; }

/* ── The Learn page's region tabs sit on a dark band: same shape, light words ── */
#regionTabs { border-bottom-color: rgba(255, 255, 255, .22) !important; justify-content: center; }
#regionTabs .bf-region-tab { color: rgba(255, 255, 255, .78) !important; }
#regionTabs .bf-region-tab:hover { color: #fff !important; }
#regionTabs .bf-region-tab.active { color: #fff !important; border-bottom: 2px solid #fff !important; background: transparent !important; }

/* ── Community topics (owner 2026-10-16): the side list on a desktop is the same idea turned sideways: a faded 1px line down its edge and a
      2px line beside the open topic, no filled box. Under 860px it becomes a row of tabs like every other bar. ── */
.cmw-topics { border-left: 1px solid var(--pt-line); }
.cmw-topics a { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; border-left: 2px solid transparent !important; margin-left: -1px; padding: 7px 12px !important; color: var(--pt-ink) !important; font-weight: 700 !important; }
.cmw-topics a:hover { background: transparent !important; color: var(--pt-on) !important; }
.cmw-topics a.on { background: transparent !important; color: var(--pt-on) !important; border-left-color: var(--pt-on) !important; font-weight: 800 !important; }
.cmw-topics h2 { padding-left: 12px; }
@media (max-width: 860px) {
  .cmw-topics { border-left: 0; border-bottom: 1px solid var(--pt-line); gap: 0 2px !important; }
  .cmw-topics h2 { padding-left: 0; }
  .cmw-topics a { border-left: 0 !important; border-bottom: 2px solid transparent !important; margin: 0 0 -1px !important; padding: 7px 12px !important; white-space: nowrap; }
  .cmw-topics a.on { border-left: 0 !important; border-bottom-color: var(--pt-on) !important; }
}

/* ── Tab bars written with inline pill styles (admin: Marketplace, Disputes, Support, KYC, Reports, Jobs, Community, Contact reviews,
      Marketing, Content blocks …): found by their shape (a row of links to ?tab= / ?status= / ?slot=) and given the one plain look,
      so no page has to be rewritten and a new page written the old way still comes out plain. Owner 2026-10-16: "tabs like we instructed". ── */
:is(div, nav):has(> a:is([href^="?tab="], [href^="?status="], [href^="?slot="]):is([style*="border-radius"], .bf-btn-s)) {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 0 2px !important; width: auto !important; max-width: 100%;
  padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--pt-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
:is(div, nav):has(> a:is([href^="?tab="], [href^="?status="], [href^="?slot="]):is([style*="border-radius"], .bf-btn-s)) > a:is([href^="?tab="], [href^="?status="], [href^="?slot="]) {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 7px 12px !important; margin: 0 0 -1px !important; color: var(--pt-ink) !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap;
  height: auto !important; line-height: 1.4;
}
:is(div, nav):has(> a:is([href^="?tab="], [href^="?status="], [href^="?slot="]):is([style*="border-radius"], .bf-btn-s)) > a:hover { color: var(--pt-on) !important; background: transparent !important; }
:is(div, nav):has(> a:is([href^="?tab="], [href^="?status="], [href^="?slot="]):is([style*="border-radius"], .bf-btn-s)) > a:is(.solid, .on, .active, [style*="background:var(--bf-navy"]) {
  color: var(--pt-on) !important; border-bottom: 2px solid var(--pt-on) !important; font-weight: 800 !important;
}
:is(div, nav):has(> a:is([href^="?tab="], [href^="?status="], [href^="?slot="]):is([style*="border-radius"], .bf-btn-s)) > a :is(.cnt, em, b, span:not(.dot)) {
  background: transparent !important; border-radius: 0 !important; padding: 0 !important; color: var(--pt-muted) !important; font-weight: 600 !important;
}

/* ── Filter "chips" and "pills" (…-chips / …-pills bars of links or switch buttons: M-Pesa records, jobs, properties, courses …): plain tabs too.
      Found by shape so every page is covered at once. Pickers that hold removable tags (…pick…, bf-co-chips) keep their look. Owner 2026-10-16:
      "these kind of pills kill me. remove them and use the default tabs I have always emphasized". ── */
:is(div, nav, ul):is([class*="chips"], [class*="pills"], .pb-trend, .hd-more-f):not([class*="pick"]):not(.bf-co-chips):is(:has(> a[href]), :has(> button:is(.on, .active, .is-active))) {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 0 2px !important; padding: 0 !important; margin-bottom: 8px;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--pt-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
:is(div, nav, ul):is([class*="chips"], [class*="pills"], .pb-trend, .hd-more-f):not([class*="pick"]):not(.bf-co-chips):is(:has(> a[href]), :has(> button:is(.on, .active, .is-active))) > :is(a, button) {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 7px 12px !important; margin: 0 0 -1px !important; color: var(--pt-ink) !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; height: auto !important;
}
:is(div, nav, ul):is([class*="chips"], [class*="pills"], .pb-trend, .hd-more-f):not([class*="pick"]):not(.bf-co-chips):is(:has(> a[href]), :has(> button:is(.on, .active, .is-active))) > :is(a, button):hover { color: var(--pt-on) !important; background: transparent !important; }
:is(div, nav, ul):is([class*="chips"], [class*="pills"], .pb-trend, .hd-more-f):not([class*="pick"]):not(.bf-co-chips):is(:has(> a[href]), :has(> button:is(.on, .active, .is-active))) > :is(a, button):is(.on, .active, .is-active, .sel, [aria-selected="true"], [aria-current="page"]) {
  color: var(--pt-on) !important; border-bottom: 2px solid var(--pt-on) !important; font-weight: 800 !important; background: transparent !important;
}