/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-pills.css — ONE pill spec, every page (admin, factory, customer
   portal, every public token page).

   The owner: "all the pills globally — styled exactly the same and the same
   size", and no fully-rounded (999px) capsules: a soft rectangle, like the
   redesign .rd .chip.

   THE SPEC (tokens on :root, so a page can read them):
     height 22px · padding 0 9px · radius 6px · 11.5px / 700 · line-height 1
     inline-flex, centred, nowrap, gap 6px.
   Colour, border colour, text, text-case and the status dot (.rd .pill::before)
   are NOT touched — status colours still come from lib/status-registry.js.

   NUMERIC COUNTERS are the one exception (nav badges, unread counts, tab
   counts): they stay round-ended, at one shared size (18px tall, min 18px wide),
   because a one- or two-digit number in a soft rectangle reads as a pill
   label, not a count. Anything that carries WORDS uses the pill spec.

   How it wins the cascade:
     • class pills: `:not(#rdpA):not(#rdpB)` lifts the rule to two-id
       specificity without !important, so it beats `.rd .x .pill` and
       `#page .pill` rules alike. Display is set only on the pill list; the
       counter rule never sets display (several counters are shown/hidden by
       class or inline style).
     • INLINE-STYLED pills (spans built in JS with style="…border-radius:…"):
       an inline style can only be beaten by !important, so the attribute
       sweep at the bottom uses it, and only on geometry + font.
   Status pills from /js/oms-status.js (omsStatusBadge) and
   /js/oms-visual-status.js now emit class="oms-pill" with colours only.

   Link LAST among a page's redesign stylesheets, ?v=N bumped on every edit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --pill-h: 22px;
  --pill-px: 9px;
  --pill-r: 6px;
  --pill-fs: 11.5px;
  --pill-fw: 700;
  --count-h: 18px;
}

/* ── 1. Class-based pills / chips / badges / tags ───────────────────────── */
:is(
  .pill, .oms-pill, .chip, .badge, .omsc-chip, .cpill, .ftag, .ptype, .pst, .gwx,
  .urgent, .vis-late, .shp-novol, .cal-cust, .todo-tag, .rr-tag, .rdp-chip,
  .cpm-chip, .cpm-vp-tag, .tag, .tag-item, .tag-chip, .vw-tag, .vw-chip,
  .vw-colour-chip, .vw-due-chip, .approval-badge, .ro-badge, .cart-type-badge,
  .msg-user-chip, .shopify-audit-chip, .shopify-audit-diff-chip, .omsll-tag,
  .oitem-nn-chip, .cp1-ep-tag, .rd-tb-chip, .po-fcode, .rpt-code, .qty-total-badge, .vis-badge, .rdu-man,
  .rdf1-req-n, .product-cat, .cp2-notset, .cpm-gal-count
):not(.rr-nav-badge):not(.msg-badge):not([id^="nav-"][id$="-badge"]):not([hidden]):not(.hidden):not(.hide):not(:empty):not(.cal-comingup .pill):not(#rdpA):not(#rdpB) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--pill-h);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--pill-px);
  padding-right: var(--pill-px);
  border-radius: var(--pill-r);
  font-size: var(--pill-fs);
  font-weight: var(--pill-fw);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
/* …and the same pills when JS gave them an inline font-size / padding /
   radius / height: only !important beats an inline style. */
:is(
  .pill, .oms-pill, .chip, .badge, .omsc-chip, .cpill, .ftag, .ptype, .pst, .gwx,
  .urgent, .vis-late, .shp-novol, .cal-cust, .todo-tag, .rr-tag, .rdp-chip,
  .cpm-chip, .cpm-vp-tag, .tag, .tag-item, .tag-chip, .vw-tag, .vw-chip,
  .vw-colour-chip, .vw-due-chip, .approval-badge, .ro-badge, .cart-type-badge,
  .msg-user-chip, .shopify-audit-chip, .shopify-audit-diff-chip, .omsll-tag,
  .oitem-nn-chip, .cp1-ep-tag, .rd-tb-chip, .po-fcode, .rpt-code, .qty-total-badge, .vis-badge, .rdu-man,
  .rdf1-req-n, .product-cat, .cp2-notset, .cpm-gal-count
):is([style*="font-size"], [style*="padding"], [style*="radius"], [style*="height"], [style*="line-height"]):not(.rr-nav-badge):not(.msg-badge):not([id^="nav-"][id$="-badge"]):not([hidden]):not(.hidden):not(.hide):not(#rdpA):not(#rdpB) {
  height: var(--pill-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--pill-px) !important;
  padding-right: var(--pill-px) !important;
  border-radius: var(--pill-r) !important;
  font-size: var(--pill-fs) !important;
  font-weight: var(--pill-fw) !important;
  line-height: 1 !important;
}
/* A chip that carries a remove (×) button keeps a tighter right edge. */
:is(.vw-chip.tagx, .tag-chip, .tag-item, .omsc-chip):has(> :is(button, .remove, .tag-remove, .omsc-x)):not(#rdpA):not(#rdpB) { padding-right: 4px; }
:is(.vw-chip.tagx, .tag-chip, .tag-item) :is(button, .remove, .tag-remove, .x):not(#rdpA) {
  width: 16px; height: 16px; line-height: 16px; padding: 0; border-radius: 4px; font-size: 13px;
}
.omsc-chip .omsc-x:not(#rdpA) { border-radius: 4px; }

/* ── 2. Numeric counters — round-ended, one size ────────────────────────────
   !important only because several counters carry an inline font-size / padding
   (e.g. #nav-todo-badge). Display is never set here — counters are shown and
   hidden by inline style / class. */
:is(
  .nav-badge, .rd-nav-badge, .rr-nav-badge, .msg-badge, .msg-tab-badge,
  .msg-unread-badge, .tab-count, .rd-atb-count, .rr-atb-pill b, .ful-od, .ord-cpo-count,
  [id^="nav-"][id$="-badge"], #notif-badge, #fnotif-badge, #support-unread-pill
):not(#rdpA):not(#rdpB) {
  box-sizing: border-box !important;
  height: var(--count-h) !important;
  min-width: var(--count-h) !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: var(--count-h) !important;
  text-align: center;
  white-space: nowrap;
}
/* the topbar / drawer badges sit on a 2px white ring — keep the ring inside the size */
#notif-badge:not(#rdpA):not(#rdpB):not(#rdpC) { line-height: 14px !important; }

/* Filter chips that are BUTTONS (message-centre "All / Customers / Factories")
   keep their button height but lose the capsule. */
.mc-chip:not(#rdpA):not(#rdpB) { border-radius: 7px; }

/* ── 3. Inline-styled pills built in JS ─────────────────────────────────────
   A <span> whose own style gives it padding, a font size AND a rounded corner
   is a pill in every case in this codebase. Excluded: anything absolutely
   positioned (corner counters), anything with an explicit width (avatars,
   swatches, tiles), block/flex/grid spans, and counters by id. */
span[style*="padding"][style*="font-size"]:is(
  [style*="border-radius:999px"], [style*="border-radius: 999px"],
  [style*="border-radius:99px"], [style*="border-radius: 99px"],
  [style*="border-radius:20px"], [style*="border-radius: 20px"],
  [style*="border-radius:16px"], [style*="border-radius: 16px"],
  [style*="border-radius:14px"], [style*="border-radius: 14px"],
  [style*="border-radius:12px"], [style*="border-radius: 12px"],
  [style*="border-radius:11px"], [style*="border-radius: 11px"],
  [style*="border-radius:10px"], [style*="border-radius: 10px"],
  [style*="border-radius:9px"], [style*="border-radius: 9px"],
  [style*="border-radius:8px"], [style*="border-radius: 8px"]
):not([hidden]):not(:empty):not([style*="position"]):not([style*="width:"]):not([style*="width: "]):not([style*="display:block"]):not([style*="display: block"]):not([style*="display:flex"]):not([style*="display:grid"]):not([style*="display:none"]):not([style*="display: none"]):not([id*="badge"]):not([id*="unread"]):not([id*="count"]):not([class*="nav-badge"]):not([class*="unread"]):not([class*="count"]) {
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: var(--pill-h) !important;
  padding: 0 var(--pill-px) !important;
  border-radius: var(--pill-r) !important;
  font-size: var(--pill-fs) !important;
  font-weight: var(--pill-fw) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle;
}

/* Calendar entry chips (customer dashboard widget, admin calendar) — they are
   layout boxes, so only the capsule corner is changed. */
.oc-chip:not(#rdpA):not(#rdpB) { border-radius: var(--pill-r); }