/* shared.css — Foundation for the role-based view portfolio
 *
 * Extracted from static/index.html so the eight new SPAs (kds, pos, branch, hq,
 * callcenter, complaints, accounting, inventory+bi) share design tokens and base
 * primitives. Touching this file is orchestrator-only — planners must escalate.
 *
 * The existing static/index.html, static/admin.html, and static/driver.html
 * intentionally do NOT import this stylesheet; their inlined styles remain
 * authoritative for legacy views to avoid regressions.
 */

:root {
  --bg: #0f1117;
  --surface: #1a1d2e;
  --surface2: #252840;
  --border: #2e3254;
  --accent: #f97316;
  --accent2: #fb923c;
  --text: #e2e8f0;
  --text2: #94a3b8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --purple: #a855f7;
  --teal: #14b8a6;
  --radius: 12px;
  --sidebar: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background .15s;
}
button:hover:not(:disabled) { background: var(--accent2); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--danger); }
button.success { background: var(--success); }
button.ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }

input, textarea, select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

table { border-collapse: collapse; width: 100%; }
thead tr { background: var(--surface2); }
/* Logical `text-align: start` so cells align left in LTR and right in RTL with
 * no [dir=rtl] override needed (Theme 8 — inward-xcut-ux §6a RTL mirroring). */
th, td { padding: 10px 12px; border: 1px solid var(--border); text-align: start; vertical-align: top; }
th { font-weight: 600; color: var(--text2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--surface2);
  color: var(--text);
}
.badge.success { background: rgba(34,197,94,.15); color: var(--success); }
.badge.warning { background: rgba(245,158,11,.15); color: var(--warning); }
.badge.danger  { background: rgba(239,68,68,.15);  color: var(--danger); }
.badge.info    { background: rgba(59,130,246,.15); color: var(--info); }

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
}

#toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s;
  z-index: 9500;
  max-width: 360px;
  font-size: 13px;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { border-color: var(--success); }
#toast.warning { border-color: var(--warning); }
#toast.error   { border-color: var(--danger); }

.sse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text2); }
.sse-dot.connected { background: var(--success); box-shadow: 0 0 8px var(--success); }

/* ── Reusable entity drawer (F-03 RV.openEntity) ────────────────────────────
 * F-03 shipped the drawer DOM + behaviour in shared.js (#rv-entity-drawer)
 * unstyled; F-04 (Wave 2) owns the styling. A slide-in panel anchored to the
 * inline-end edge so it enters from the right in LTR and from the left in RTL
 * with zero [dir=rtl] override (logical `inset-inline-end` + transform mirror). */
.rv-drawer {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: none;
}
.rv-drawer.open { display: block; }
.rv-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.rv-drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .22s ease;
}
/* In RTL the panel sits on the left, so it must slide in from the left. */
[dir="rtl"] .rv-drawer-panel {
  box-shadow: 8px 0 32px rgba(0, 0, 0, .45);
  transform: translateX(-100%);
}
.rv-drawer.open .rv-drawer-panel { transform: translateX(0); }
.rv-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-block-end: 1px solid var(--border);
}
.rv-drawer-title { margin: 0; font-size: 16px; font-weight: 600; }
.rv-drawer-close {
  background: transparent;
  color: var(--text2);
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
}
.rv-drawer-close:hover:not(:disabled) { background: transparent; color: var(--text); }
.rv-drawer-body { padding: 20px; overflow: auto; flex: 1; }
.rv-drawer-section {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text2);
}
.rv-drawer-section:first-child { margin-block-start: 0; }
.rv-drawer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-block-end: 1px solid var(--border);
}
.rv-drawer-label { color: var(--text2); }
.rv-drawer-value { text-align: end; }
.rv-drawer-list { margin: 4px 0 0; padding-inline-start: 18px; }
.rv-drawer-list li { margin-block: 3px; }
.rv-drawer-loading { color: var(--text2); padding: 8px 0; }
.rv-drawer-error { color: var(--danger); padding: 8px 0; }

/* Entity link (F-03 RV.entityLink / RV.linkify) — clickable, themed. */
.rv-entity-link { color: var(--accent2); cursor: pointer; text-decoration: none; border-block-end: 1px dotted var(--accent2); }
.rv-entity-link:hover { text-decoration: none; color: var(--accent); border-block-end-color: var(--accent); }

/* ── RV component layer (F-04 — zero-build seed; rendered by RV.components) ───
 * These classes back RV.components.renderLogin / renderShell / renderTable /
 * renderSkeleton. All spacing uses CSS logical properties (margin-inline,
 * padding-inline, inset-inline, text-align:start) and flex mirroring so
 * [dir=rtl] mirrors multi-column layouts with no per-rule RTL override
 * (Theme 8 — inward-xcut-ux §6a). Per-SPA inline copies are migrated onto
 * these in P1.12; nothing is removed here (rule #0). */

/* Login panel (shared by all 10 SPAs after P1.12). */
.rv-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.rv-login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.rv-login-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.rv-login-sub { margin: 0 0 18px; color: var(--text2); font-size: 13px; }
.rv-field { margin-block-end: 12px; }
.rv-field label { display: block; font-size: 12px; color: var(--text2); margin-block-end: 4px; text-align: start; }
.rv-login button[type="submit"] { width: 100%; margin-block-start: 4px; }
.rv-login-error { color: var(--danger); font-size: 12px; margin-block-start: 8px; min-height: 16px; text-align: start; }

/* Shell: topbar + sidebar + content. flex-direction handles the column order so
 * the sidebar sits inline-start in LTR and inline-end in RTL automatically. */
.rv-shell { display: flex; flex-direction: column; min-height: 100vh; }
.rv-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  padding-inline: 20px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.rv-topbar-title { font-size: 16px; font-weight: 700; margin: 0; }
.rv-topbar-brand { display: flex; align-items: center; gap: 10px; }
.rv-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.rv-shell-body { display: flex; flex: 1; min-height: 0; }
.rv-sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding-block: 16px;
  padding-inline: 12px;
  overflow-y: auto;
}
.rv-sidebar a, .rv-nav-item {
  display: block;
  padding-block: 9px;
  padding-inline: 12px;
  margin-block-end: 2px;
  border-radius: 8px;
  color: var(--text2);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-align: start;
  text-decoration: none;
}
.rv-sidebar a:hover, .rv-nav-item:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.rv-nav-item.active, .rv-sidebar a.active { background: var(--surface2); color: var(--accent2); }
.rv-content { flex: 1; min-width: 0; padding: 20px; overflow: auto; }

/* Tabs. */
.rv-tabs {
  display: flex;
  gap: 4px;
  border-block-end: 1px solid var(--border);
  margin-block-end: 16px;
}
.rv-tab {
  padding-block: 8px;
  padding-inline: 14px;
  background: transparent;
  color: var(--text2);
  border: none;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
}
.rv-tab:hover:not(:disabled) { background: transparent; color: var(--text); }
.rv-tab.active { color: var(--accent2); border-block-end-color: var(--accent); }

/* Empty state. */
.rv-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text2);
  font-size: 13px;
}
.rv-empty-icon { font-size: 28px; margin-block-end: 8px; opacity: .7; }
.rv-empty-msg { line-height: 1.5; }
/* Optional empty-state CTA (renderEmpty action). Spacing via logical props for RTL. */
.rv-empty-action {
  margin-block-start: 12px;
  padding-block: 6px;
  padding-inline: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.rv-empty-action:hover { filter: brightness(1.05); }

/* Loading skeleton (shimmer). */
.rv-skeleton { display: block; }
.rv-skeleton-row {
  height: 14px;
  border-radius: 6px;
  margin-block-end: 10px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 37%, var(--surface2) 63%);
  background-size: 400% 100%;
  animation: rv-shimmer 1.4s ease infinite;
}
@keyframes rv-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-skeleton-row { animation: none; }
  .rv-drawer-panel { transition: none; }
}

/* ── RV.dateRange (U-FE — the unified date-range picker, D-7 T5) ──────────────
 * Presets row + two date inputs. All spacing via logical properties so [dir=rtl]
 * mirrors with no per-rule override (Theme 8 — inward-xcut-ux §6a). */
.rv-daterange { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.rv-daterange-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.rv-daterange-preset {
  padding-block: 6px;
  padding-inline: 10px;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rv-daterange-preset:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.rv-daterange-preset[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.rv-daterange-inputs { display: flex; gap: 10px; }
.rv-daterange-field { display: flex; flex-direction: column; gap: 4px; }
.rv-daterange-field span { font-size: 11px; color: var(--text2); text-align: start; }
.rv-daterange-field input { width: auto; min-width: 140px; }

/* ── RV.typeahead (U-FE — debounced autocomplete, D-7 T6) ────────────────────
 * Relative wrapper so the suggestion list anchors to the input; list uses
 * inset-inline-start so it aligns to the leading edge in both directions. */
.rv-typeahead { position: relative; display: block; }
.rv-typeahead-input { width: 100%; }
.rv-typeahead-list {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  max-height: 280px;
  overflow-y: auto;
  z-index: 9600;
}
.rv-typeahead-list[hidden] { display: none; }
.rv-typeahead-item {
  padding-block: 8px;
  padding-inline: 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
  font-size: 13px;
}
.rv-typeahead-item:hover,
.rv-typeahead-item.active { background: var(--surface2); color: var(--text); }
.rv-typeahead-empty { padding-block: 8px; padding-inline: 10px; color: var(--text2); font-size: 13px; text-align: start; }

/* ── RV.tooltip + RV.helpIcon (U-FE — jargon help, D-7 T7) ────────────────────
 * One floating bubble (#rv-tooltip-bubble) repositioned per target; placement is
 * set inline via inset-block-start / inset-inline-start (logical) in JS. */
.rv-tooltip {
  position: fixed;
  z-index: 9800;
  max-width: 280px;
  padding-block: 8px;
  padding-inline: 12px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font-size: 12px;
  line-height: 1.45;
  text-align: start;
  pointer-events: none;
}
.rv-tooltip[hidden] { display: none; }
.rv-tooltip-host { cursor: help; border-block-end: 1px dotted var(--text2); }
.rv-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  margin-inline-start: 4px;
  padding: 0;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.rv-help:hover:not(:disabled),
.rv-help:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── RTL — logical properties above mirror automatically. These few rules cover
 * the remaining physical/viewport-anchored cases that cannot be expressed as a
 * logical property. (inward-xcut-ux §6a). */
[dir="rtl"] #toast { right: auto; left: 28px; }

/* ── RV.nav — view launcher/switcher (P1.7.5) ─────────────────────────────────
 * RTL-safe by construction: spacing uses logical properties (margin-inline /
 * padding-inline / inset-inline) so [dir=rtl] mirrors with no JS branching. */
.rv-nav { box-sizing: border-box; }

/* Switcher: a horizontal bar embedded in (or pinned above) each view. */
.rv-nav-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
#rv-nav-bar { position: sticky; inset-block-start: 0; z-index: 50; width: 100%; }
.rv-nav-items { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rv-nav-home,
.rv-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--text2);
  background: transparent;
  border: 1px solid transparent;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.rv-nav-home { margin-inline-end: 6px; color: var(--text); }
.rv-nav-home:hover,
.rv-nav-item:hover { background: var(--surface2); color: var(--text); }
.rv-nav-item.active,
.rv-nav-item[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.rv-nav-home:focus-visible,
.rv-nav-item:focus-visible,
.rv-launcher-tile:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
.rv-nav-icon { font-size: 15px; line-height: 1; }

/* Launcher: a large tile grid for the home hub. */
.rv-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.rv-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.rv-launcher-tile:hover {
  background: var(--surface2);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.rv-launcher-icon { font-size: 40px; line-height: 1; }
.rv-launcher-label { font-size: 15px; font-weight: 600; }
.rv-launcher-empty,
.rv-nav-loading[aria-busy="true"] { color: var(--text2); padding: 12px; font-size: 13px; }

/* ── RV language switcher (D-8 / TUX7) — the ONE EN/AR toggle ─────────────────
   Lives in the switcher row, pushed to the inline-end via margin-inline-start:auto
   so it sits beside the bell and mirrors under RTL with no JS. When the bell is
   also present the bell takes the auto-margin (it is the LAST child) and the
   switch simply precedes it; on bell-less views the switch itself takes the auto
   margin. A two-segment pill: the active language segment is filled. */
.rv-lang-switch {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* When the lang switch precedes the bell, the SWITCH carries the auto-margin and
   the bell drops its own so the two sit together (with a 6px gap) at the inline-
   end instead of straddling the free space. */
.rv-lang-switch + .rv-notif { margin-inline-start: 6px; }
.rv-lang-seg {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 34px;
  text-align: center;
}
.rv-lang-seg + .rv-lang-seg { border-inline-start: 1px solid var(--border); }
.rv-lang-seg:hover { background: var(--surface2); color: var(--text); }
.rv-lang-seg.active,
.rv-lang-seg[aria-pressed="true"] { background: var(--accent); color: #fff; }
.rv-lang-seg:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* ── RV.notifications — bell + feed (P1.11) ──────────────────────────────────
   Lives inside the #rv-nav-bar switcher row, pushed to the inline-end via
   margin-inline-start:auto so it mirrors correctly under RTL with no JS. */
.rv-notif {
  position: relative;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
}
.rv-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.rv-notif-bell:hover { background: var(--surface2); }
.rv-notif-badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger, #e5484d);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}
.rv-notif-panel {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  width: 320px;
  max-width: 90vw;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 60;
}
.rv-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-block-end: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}
.rv-notif-readall {
  border: none;
  background: transparent;
  color: var(--accent2, var(--accent));
  font-size: 12px;
  cursor: pointer;
}
.rv-notif-readall:hover { text-decoration: underline; }
.rv-notif-list { list-style: none; margin: 0; padding: 0; }
.rv-notif-empty { padding: 16px 12px; color: var(--text2); font-size: 13px; text-align: center; }
.rv-notif-row {
  padding: 10px 12px;
  border-block-end: 1px solid var(--border);
  border-inline-start: 3px solid transparent;
  cursor: pointer;
}
.rv-notif-row:hover { background: var(--surface2); }
.rv-notif-row.rv-notif-unread { background: var(--surface2); }
.rv-notif-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rv-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text2);
}
.rv-notif-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1 1 auto; }
.rv-notif-when { font-size: 11px; color: var(--text2); flex: 0 0 auto; }
.rv-notif-body { margin-block-start: 4px; font-size: 12px; color: var(--text2); }
/* Severity accents — left border (logical) + dot colour. */
.rv-notif-critical { border-inline-start-color: var(--danger, #e5484d); }
.rv-notif-critical .rv-notif-dot { background: var(--danger, #e5484d); }
.rv-notif-warning { border-inline-start-color: var(--warning, #f5a623); }
.rv-notif-warning .rv-notif-dot { background: var(--warning, #f5a623); }
.rv-notif-info { border-inline-start-color: var(--accent, #3b82f6); }
.rv-notif-info .rv-notif-dot { background: var(--accent, #3b82f6); }

/* ── Channel badge (D-9 omnichannel) — RV.channelBadge() ─────────────────────
   Text + glyph (never colour-only). RTL-safe via logical properties + inline
   flow (the glyph leads, the label follows; mirrors automatically under dir=rtl
   with no JS branch). Per-channel tint is decorative ONLY — the LABEL carries the
   meaning, so colour-blind users and screen readers always get the channel name. */
.rv-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--surface2, rgba(127,127,127,.12));
  color: var(--text, inherit);
  border: 1px solid transparent;
}
.rv-channel-glyph { font-size: 11px; line-height: 1; }
.rv-channel-whatsapp  { background: rgba(37,211,102,.15);  border-color: rgba(37,211,102,.35); }
.rv-channel-messenger { background: rgba(0,132,255,.15);   border-color: rgba(0,132,255,.35); }
.rv-channel-instagram { background: rgba(225,48,108,.15);  border-color: rgba(225,48,108,.35); }