/* T2 Falcon Admin — Wallet & Balance styles */

/* === Page layout: 3 columns ===================================== */
.wb-page {
  display: grid;
  grid-template-columns: 240px 320px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 24px 24px;
  flex: 1;
  min-height: 0;
  align-items: start;
  position: relative;
}
/* The shared Drawer is fixed-position so it overlays the page — no column
   reservation needed in the wb-page grid when the transfer drawer is open. */
.wb-page.with-drawer {
  grid-template-columns: 240px 320px minmax(0, 1fr);
}
.wb-drawer-body-shared { padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wb-drawer-body-shared .wb-fld { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1280px) {
  .wb-page, .wb-page.with-drawer {
    grid-template-columns: 220px 300px minmax(0, 1fr);
  }
}
/* Falcon-view wallet page using the Hierarchy `.page` + `.clients-panel` +
   `.content-panel` 2-column layout. The clients tree is full-height (from
   `.clients-panel`), and settings + allocation table live inside a single
   `.content-panel` with `.content-body` padding. */
.wb-page-2col .clients-panel { min-height: 0; }
/* Vertical stack: full-width top bar (client + viewing-as + actions), then
   the two-column body (table left, settings right). The body row stretches
   to fill the remaining viewport height so the table card inside can scroll
   INTERNALLY, the same way Falcon Clients scrolls inside the sidebar. */
.wb-content-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.wb-body-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
/* Settings column allows its own internal scroll only if it ever outgrows
   the viewport (rare — Master Wallet + 3 sub-balances + settings card is
   usually short). */
.wb-body-row .wb-settings-col {
  max-height: 100%;
  overflow-y: auto;
}
/* Table column is a flex column so the card inside can flex-grow to fill
   the available height. */
.wb-body-row .wb-table-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Layout swap (per spec): allocation table sits on the LEFT, settings panel
   (Master Wallet + Currency/Balance/Wallet Type) sits on the RIGHT. Source
   order is kept (settings first, table second) — visual order is flipped via
   `order` so screen readers still see settings → table semantically. */
.wb-body-row .wb-settings-col { flex: 0 0 272px; order: 2; }   /* narrower settings column; gives the table more room */
.wb-body-row .wb-table-col    { flex: 1; min-width: 0; order: 1; }

/* === Top bar (full-width header above the two columns) === */
.wb-top-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 4px 0;
}
/* Left: client brand + name */
.wb-tb-client {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.wb-tb-client-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Middle: VIEWING AS label + role chip */
.wb-tb-viewing {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: white;
  /* border removed per spec — chip reads as a clean inline group */
  border-radius: 12px;
  padding: 0 14px;
}
.wb-tb-viewing-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.wb-tb-viewing-chip { background: transparent; padding: 0; border: 0; }
.wb-tb-viewing-chip .wb-role-chip-select {
  background-color: transparent;
  border: 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--text);
}
/* Right: Switch perspective + Save buttons */
.wb-tb-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wb-tb-actions .btn { height: 38px; padding: 0 22px; border-radius: 12px; font-size: 13px; font-weight: 600; }

/* === View / Edit amount cells (Falcon view) — match Contracts addons === */
.wb-amount-view {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text);
  font-weight: 400;
}
.wb-amount-view strong { font-weight: 400; font-variant-numeric: tabular-nums; }
/* Allocation cell input — bordered box that fills the column width.
   Same look in editable AND read-only mode (readonly attribute toggled in
   JSX) so the layout doesn't shift on Save. */
.wb-amount-edit {
  display: flex; align-items: center;
  background: white;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 0 14px;
  min-height: 44px;
  /* width: 100%; removed — the box now sizes to its content +
     min-width: 130px floor instead of stretching to fill the cell. */
  min-width: 130px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.wb-amount-edit .wb-amount-currency {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--text);
  flex-shrink: 0;
}
.wb-amount-edit .wb-input {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--text);
  font-weight: 500;
  padding: 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Readonly state inside .wb-amount-edit stays VISUALLY identical to the
   editable state — only the cursor changes. The generic .wb-input[readonly]
   rule lower down adds a grey background + muted text color which would
   make the value look "boxed-in" again on save; suppress those here so the
   field reads as a single clean white pill in both modes. */
.wb-amount-edit .wb-input[readonly],
.wb-amount-edit .wb-input[readonly]:hover,
.wb-amount-edit .wb-input[readonly]:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  cursor: default;
  caret-color: transparent;
}
.wb-amount-edit:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 217, 0.15);
}

/* Hierarchy-style row borders inside the wallet allocation table */
.wb-table-card .wb-tr + .wb-tr { border-top: 1px solid var(--border-2); }
.wb-table-card .wb-tr:last-child { border-bottom: 0; }

/* === Falcon Clients panel ======================================= */
.wb-clients-panel {
  background: #F2F7F4;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 480px;
}
.wb-clients-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  padding: 6px 8px 10px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.wb-switch-view-mini {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.wb-switch-view-mini:hover { color: var(--teal); border-color: var(--teal); }

/* ============== Client (Show as Client) view ============== */
/* Same Hierarchy chrome (`.page` + `.content-panel`), single column since
   there's no clients tree on the client perspective. */
.wbc-page-1col { grid-template-columns: minmax(0, 1fr); }
.wbc-content-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.wbc-page {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.wbc-page.with-drawer {
  grid-template-columns: minmax(0, 1fr);
}
.wbc-scroll {
  padding: 18px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  min-width: 0;
}
.wbc-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 4px 0;
}
.wbc-master-controls {
  /* Removed absolute positioning — sits inside the flex flow now so it
     doesn't overlap the channel sub-cards. `order: 99` keeps it at the end. */
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-inline-start: auto;
  order: 99;
}
.wbc-header-controls {
  margin-inline-start: auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.wbc-hc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wbc-hc-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.wbc-switch-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.wbc-switch-view:hover { color: var(--teal); border-color: var(--teal); }

/* Master Wallet card (client view).
   Two layout modes:
     • Single wallet → flex row (Master Wallet label + total on the left,
       Type dropdown pushed to the end).
     • Multiple wallets → CSS GRID that mirrors the allocation table's
       grid-template-columns exactly. Each active channel pill sits in its
       own grid track so it aligns pixel-perfect with the matching column
       header in the .wbc-tr row below. Inactive pills are grouped into the
       first (org) cell alongside the Master Wallet info — they don't claim
       a grid track because there is no table column for them. */
.wbc-master {
  background: #F3F8F5;
  border: 0;
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: visible;
}

/* Grid variant — column tracks match .wbc-tr (lines 314-329 above). */
.wbc-master-grid {
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 200px 80px;
}
/* multi-1 mirrors the table template (1fr 200px 80px) so the lone pill
   sits in the same 200px track as the channel header below it. */
.wbc-master-grid[data-cols="multi-1"] { grid-template-columns: minmax(0, 1fr) 200px 80px; }
.wbc-master-grid[data-cols="multi-2"] { grid-template-columns: minmax(0, 1fr) 162px 162px 80px; }
.wbc-master-grid[data-cols="multi-3"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 80px; }
.wbc-master-grid[data-cols="multi-4"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 162px 80px; }
.wbc-master-grid[data-cols="multi-5"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 162px 162px 80px; }

/* First grid cell — Master Wallet info + any inactive (unchecked) pills.
   Inactive pills are inline so they sit beside the info without breaking
   the row. */
.wbc-master-grid .wbc-master-info-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

/* Active pill placed in its own grid track — stretch to fill the column so
   the pill width matches the table column width below. */
.wbc-master-grid .wbc-master-ch--col {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  padding: 10px 14px;
}

/* Type dropdown cell — sits in the last (Transfer-column) track. */
.wbc-master-grid .wbc-master-controls {
  margin-inline-start: 0;
  order: 0;
  justify-self: end;
}
.wbc-master::before { content: none; }
.wbc-master-left { display: flex; flex-direction: column; gap: 4px; }
.wbc-master-label {
  font-size: 12px;
  color: var(--teal);
  opacity: 0.75;
  font-weight: 500;
}
.wbc-master-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.wbc-master-channels {
  display: flex;
  gap: 14px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
/* Master Wallet channel pill — plain non-interactive card now that the
   checkbox lives in the table column header. No hover effect (the pill
   doesn't do anything on click), no pointer cursor. */
.wbc-master-ch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid transparent;
  min-width: 110px;
  cursor: default;
  user-select: none;
}
.wbc-master-ch:hover { border-color: transparent; background: #ffffff; }
/* Legacy modifiers (kept harmless in case any external code still adds
   them) — neutralise the hover-state styling so nothing reacts to mouse. */
.wbc-master-ch.is-inactive { background: rgba(255,255,255,0.45); opacity: 0.55; }
.wbc-master-ch.is-inactive:hover { opacity: 0.55; }
.wbc-master-ch.is-locked { cursor: default; }
.wbc-master-ch.is-locked:hover { border-color: transparent; }
/* Hidden but focusable real checkbox */
.wbc-master-ch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.wbc-master-ch-input:focus-visible ~ .wbc-master-ch-head .wbc-master-ch-box {
  box-shadow: 0 0 0 3px rgba(13,63,68,0.18);
}
/* Top row inside the pill: checkbox + channel name */
.wbc-master-ch-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Custom checkbox glyph */
.wbc-master-ch-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #cbd5cf;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.wbc-master-ch.is-active .wbc-master-ch-box {
  background: var(--teal);
  border-color: var(--teal);
}
.wbc-master-ch-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.wbc-master-ch-amt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.wbc-master-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-inline-start: 12px;
  position: relative;
  z-index: 1;
}
.wbc-master-type-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.wbc-master-type-select {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  padding: 6px 26px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 80px;
}
body[dir="rtl"] .wbc-master-type-select {
  padding: 6px 12px 6px 26px;
  background-position: left 8px center;
}

/* Allocation table (client view) — single-scroll model: the body grows with
   content and the PAGE handles vertical scroll. The body only scrolls
   horizontally (for deep-nested trees that exceed the column width).
   No more nested vertical scrollbars. */
.wbc-table-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wbc-table-card .wbc-tr { min-width: max-content; }
.wbc-table-card .wbc-td-org { min-width: max-content; padding-inline-end: 18px; }
/* Horizontal-only scroll. No max-height → no vertical scrollbar appears. */
.wbc-table-card .wbc-table-body {
  overflow: auto;
}
.wbc-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 80px;
  align-items: center;
  gap: 12px;
  /* Vertical padding moved to min-height so the org cell can stretch full-height
     and the tree rails connect between rows (height is unchanged: 16+16+~28). */
  padding: 0 14px;
  min-height: 48px;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  color: var(--text);
}
/* multi-1: mirror the single-mode template (1fr 200px 80px) so the single
   active channel header lands in the EXACT same column position as the
   "Wallet" header in single mode. The header and its values share one fixed
   200px track, both centered via .wbc-th-amt / .wbc-td-amt rules below. */
.wbc-tr[data-cols="multi-1"] { grid-template-columns: minmax(0, 1fr) 200px 80px; }
.wbc-tr[data-cols="multi-2"] { grid-template-columns: minmax(0, 1fr) 162px 162px 80px; }
.wbc-tr[data-cols="multi-3"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 80px; }
.wbc-tr[data-cols="multi-4"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 162px 80px; }
.wbc-tr[data-cols="multi-5"] { grid-template-columns: minmax(0, 1fr) 162px 162px 162px 162px 162px 80px; }
.wbc-tr:last-child { border-bottom: 0; }

.wbc-tr-head {
  background: #F5F5F5;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 14px 14px;
  min-height: 48px;
  border-bottom: 1px solid var(--border-2);
}
.wbc-tr-header {
  background: transparent;
  font-weight: 500;
}
.wbc-tr-header:hover { background: #F2F4F5; }
/* No alternating-row background and no hover — matches Hierarchy users-table */
.wbc-tr-child:nth-child(odd) { background: transparent; }
.wbc-tr-user { background: transparent; }

/* Both header (.wbc-th-amt) and body (.wbc-td-amt) amount cells are flex
   centered — guarantees the header label and the value box land in the
   exact same column position regardless of cell width. */
.wbc-th-amt, .wbc-td-amt {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wbc-th-xfer, .wbc-td-xfer { justify-self: center; }

.wbc-td-org {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  align-self: stretch;   /* fill the row height so tree rails connect between rows */
}
.wbc-td-indent { display: inline-block; flex: 0 0 auto; }
.wbc-td-chev {
  width: 18px; height: 18px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s;
  flex: 0 0 18px;
}
.wbc-td-chev.invisible { visibility: hidden; }
.wbc-td-chev.open { transform: rotate(90deg); }
body[dir="rtl"] .wbc-td-chev { transform: scaleX(-1); }
body[dir="rtl"] .wbc-td-chev.open { transform: scaleX(-1) rotate(90deg); }
.wbc-td-chev-spacer { display: inline-block; }

.wbc-td-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbc-tr-header .wbc-td-name { font-size: 13px; }

.wbc-input {
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  cursor: default;
  pointer-events: none;
}
.wbc-input:focus { outline: 0; }
.wbc-td-amt-empty { width: 100%; height: 1px; }
/* Tight icon+number pairing (matches Falcon-side .wb-amount-view) */
.wbc-amount-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Legacy class — kept harmless in case other markup still uses it */
.wbc-amt-unit {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.wbc-td-amt { display: flex; align-items: center; justify-content: center; }

/* Row hover — light grey across the WHOLE row (org name + amounts + transfer),
   matching the Show-as-Falcon view's shared row hover (#F2F4F5). The header row
   (`wbc-tr wbc-tr-head`) keeps its own #F5F5F5 and must NOT pick up the body
   hover, hence the :not(.wbc-tr-head) guard + the explicit header override. */
.wbc-tr-child:hover, .wbc-tr-user:hover { background: #F2F4F5 !important; }
.wbc-tr:not(.wbc-tr-head):hover { background: #F2F4F5; }
.wbc-tr-head, .wbc-tr-head:hover { background: #F5F5F5; }

.wbc-xfer-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.wbc-xfer-btn:hover {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
  transform: scale(1.05);
}
.wbc-tr-user .wbc-td-amt { /* user rows: same as org */ }

/* User dot reuse */
.wbc-td-org .wb-user-dot { color: var(--text-muted); flex: 0 0 auto; }
.wb-clients-list { display: flex; flex-direction: column; gap: 4px; }
.wb-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
  text-align: start;
  width: 100%;
}
.wb-client-row:hover { background: rgba(255,255,255,0.7); }
.wb-client-row.selected {
  background: white;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(13,63,68,0.06);
  font-weight: 600;
}
.wb-client-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* === Settings column ============================================ */
.wb-settings-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.wb-client-tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  min-height: 38px;     /* match .wb-table-actions row height — columns top-align */
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.wb-client-tag-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Master Wallet card ========================================= */
.wb-master-card {
  background: #F3F8F5;
  border: 0;
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
}
.wb-master-card::before { content: none; }

/* Divider between the master amount and the channel sub-balances below */
.wb-master-divider {
  height: 1px;
  background: rgba(13,63,68,0.12);
  margin: 10px 0;
}
.wb-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wb-master-row-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wb-master-label {
  font-size: 13px;
  color: var(--teal);
  opacity: 0.7;
  font-weight: 500;
}
.wb-master-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.01em;
  white-space: nowrap;             /* keep large amounts on one line */
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.wb-master-amount strong { white-space: nowrap; }
.wb-rotate-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(13,63,68,0.18);
  background: white;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.wb-rotate-btn:hover { background: var(--teal); color: white; transform: scale(1.05); }

/* Falcon System Admin: per-channel sub-balances under Master Wallet.
   Each row: small label, then a FULL-WIDTH bordered input field showing the
   currency glyph + value, then the Transfer button OUTSIDE the input. */
.wb-master-subs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}
.wb-master-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wb-master-sub-row .wb-master-sub-field {
  flex: 1;
  min-width: 0;
}
/* Smaller transfer button next to each sub-balance */
.wb-rotate-btn-sub {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(13,63,68,0.18);
  background: white;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.wb-rotate-btn-sub:hover {
  background: var(--teal); color: white; transform: scale(1.05);
}
.wb-master-sub-label {
  font-size: 13px;
  color: var(--teal);
  opacity: 0.7;
  font-weight: 500;
  margin-bottom: 8px;
}
/* Field is ALWAYS the bordered box — no view/edit visual swap. The .is-editing
   modifier is kept for backwards-compat but no longer triggers a different
   look since the box style is the default. */
.wb-master-sub-field,
.wb-master-sub-field.is-editing {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid rgba(13,63,68,0.14);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  min-height: 40px;
  box-sizing: border-box;
}
.wb-master-sub-field:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 217, 0.15);
}
.wb-master-sub-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--teal);
  padding: 0;
  font-variant-numeric: tabular-nums;
}
/* Readonly text variant inside the same boxed field (used when the page is
   locked after Save). Looks identical to the editable input. */
.wb-master-sub-input--readonly {
  display: inline-flex;
  align-items: center;
  cursor: default;
  font-size: 14px;
}

/* Variant of the channel pill without the leading icon dot */
.wb-ch-toggle-noic { padding: 5px 14px; }

/* === Master Wallet sub-balances strip — pinned ABOVE the table ===
   Lives INSIDE .wb-table-card so it shares the horizontal scroll with the
   rest of the table; uses the SAME grid-template-columns as .wb-table-head,
   so each pill sits directly over its matching channel column. */
.wb-table-card .wb-master-subs-strip {
  display: grid;
  align-items: center;
  background: #F3F8F5;            /* same teal-tint as Master Wallet card */
  border-bottom: 1px solid var(--border-2);
  padding: 12px 0;
  min-width: max-content;          /* widen to match the table grid */
  grid-template-columns: 320px 220px 90px;
}
.wb-table-card .wb-master-subs-strip[data-cols="multi-2"] { grid-template-columns: 320px 160px 160px 90px; }
.wb-table-card .wb-master-subs-strip[data-cols="multi-3"] { grid-template-columns: 320px 160px 160px 160px 90px; }
.wb-table-card .wb-master-subs-strip[data-cols="multi-4"] { grid-template-columns: 320px 160px 160px 160px 160px 90px; }
.wb-table-card .wb-master-subs-strip[data-cols="multi-5"] { grid-template-columns: 320px 160px 160px 160px 160px 160px 90px; }
.wb-table-card .wb-master-subs-strip[data-cols="single"]  { grid-template-columns: 320px 1fr 90px; }

/* Org placeholder cell sits at the frozen-left position so the strip stays
   aligned with the table's first column during horizontal scroll. */
.wb-table-card .wb-master-subs-strip .wb-master-subs-spacer {
  position: sticky;
  inset-inline-start: 0;
  background: #F3F8F5;
  align-self: stretch;
  z-index: 4;
}

.wb-master-sub-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
  min-width: 0;
}
.wb-master-sub-cell .wb-master-sub-label {
  /* Header-like styling so the channel name reads as a column caption */
  font-size: 12px;
  color: var(--text-muted);
  opacity: 1;
  font-weight: 500;
  margin-bottom: 0;
}
.wb-master-sub-cell .wb-master-sub-row { gap: 8px; }
.wb-master-sub-cell .wb-master-sub-field {
  background: white;
  border: 1px solid rgba(13,63,68,0.10);
  border-radius: 10px;
  padding: 6px 12px;
  width: 100%;
  min-width: 0;
}
.wb-master-sub-cell .wb-master-sub-field.is-editing {
  border: 1px solid rgba(13,63,68,0.18);
}
.wb-master-subs-xfer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-inline-end: 8px;
}

/* === Setting groups ============================================ */
.wb-group {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.wb-group-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.wb-radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.wb-radio-stack { display: flex; flex-direction: column; gap: 8px; }

/* Consolidated settings card — Currency, Rate Card, Balance Type, Wallet Type
   stacked inside ONE card with thin horizontal dividers. */
.wb-group-stack { padding: 0; }
.wb-group-stack .wb-group-sec { padding: 10px 18px; }
.wb-group-stack .wb-group-divider {
  height: 1px;
  background: var(--border-2);
  margin: 0;
}

/* Rate-card commchannel dropdown — shown only when Currency = Points */
.wb-rate-channel { margin-top: 14px; }
.wb-rate-channel-help {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.45;
}
.wb-rate-channel-select-wrap {
  position: relative;
  display: block;
}
.wb-rate-channel-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-rate-channel-select:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.08);
}
.wb-rate-channel-caret {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--text-muted);
  pointer-events: none;
  display: inline-flex;
}

.wb-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
}
/* Locked-to-view radios (after Save): not clickable, and the unselected option
   is dimmed so the chosen value reads as a static, read-only setting. */
.wb-radio.wb-radio--view { cursor: default; }
.wb-radio.wb-radio--view:not(.checked) { opacity: 0.4; }
/* After Save: Balance/Wallet Type render as a plain read-only value (no radio) */
.wb-view-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
}
.wb-radio-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cbd5cf;
  flex-shrink: 0;
  position: relative;
  background: white;
  box-sizing: border-box;
  transition: border-color 0.15s;
  margin-top: 1px;
}
.wb-radio-circle.checked { border-color: var(--teal); border-width: 1.5px; }
.wb-radio-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--teal);
  animation: wbDot 0.18s ease-out;
  transform-origin: center;
}
@keyframes wbDot {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.wb-radio-label-wrap { display: flex; flex-direction: column; gap: 2px; }
.wb-radio-label { font-size: 13px; font-weight: 500; color: var(--text); }
.wb-radio.checked .wb-radio-label { font-weight: 500; }
.wb-radio-helper { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* === Channel selector toggles (Wallet Type → Multiple Wallets) === */
.wb-ch-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.wb-ch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s;
}
.wb-ch-toggle:hover { border-color: #9ca3af; color: var(--text); }
.wb-ch-toggle.on {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
  font-weight: 400;
}
.wb-ch-tog-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #F1F2F4;
  color: #1F2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-ch-toggle.on .wb-ch-tog-dot {
  background: rgba(255,255,255,0.22);
  color: white;
}

/* === Allocation table =========================================== */
.wb-table-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.wb-table-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  min-height: 38px;     /* match .wb-client-tag-row — table card top-aligns with master card */
}
.wb-table-actions .btn { height: 38px; padding: 0 22px; font-size: 13px; border-radius: 10px; }
.wb-table-actions .wb-role-chip { height: 38px; align-self: flex-start; }

/* ====== Two-card split layout ====== */
/* The .wb-table-split container holds two independently-scrolling cards
   (Organizations / Wallet+Transfer). Each card fills the available height
   and scrolls internally — the JS handler in wallet.jsx mirrors scrollTop
   between them so rows stay visually aligned. */
.wb-table-split {
  display: flex;
  gap: 0;                /* the .wb-split-resizer below occupies the former 16px gap */
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* ===== Draggable Organizations ⟷ Wallet resizer (Falcon view) ===== */
/* Sits in place of the old 16px gap. A grip pill fades in on hover/focus/drag;
   the whole 16px strip is the drag hit-area with a col-resize cursor. The two
   cards keep their own scrollbars at any width. */
.wb-split-resizer {
  flex: 0 0 16px;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
  z-index: 6;
}
/* Grip fixed at the vertical CENTRE of the viewport (its `left` is set in JS to
   track the divider) so it's always visible/reachable while the rows scroll.
   A gentle horizontal "nudge" animation indicates it's a draggable handle. */
.wb-split-grip {
  position: fixed;
  top: 50%;
  left: 50%;                 /* JS overrides this to the divider's x */
  transform: translate(-50%, -50%);
  z-index: 30;
  width: 8px;
  height: 54px;
  border-radius: 6px;
  background: var(--teal);
  opacity: 0.5;
  pointer-events: none;      /* the full-height resizer strip handles the drag */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s ease, height 0.15s ease, width 0.15s ease;
  animation: wb-grip-nudge 1.7s ease-in-out 3;   /* nudge only for the first ~5s, then rests */
}
.wb-split-grip-arrows { display: none; }
.wb-split-resizer:hover .wb-split-grip,
.wb-split-resizer:focus-visible .wb-split-grip,
.wb-split-resizer.dragging .wb-split-grip {
  opacity: 1;
  width: 10px;
  height: 66px;
  animation: none;
}
@keyframes wb-grip-nudge {
  0%, 100% { transform: translate(-50%, -50%) scaleX(1); }
  50%      { transform: translate(-50%, -50%) scaleX(1.85); }
}
.wb-split-resizer:focus { outline: none; }
/* While dragging, suppress pointer events inside the cards so the drag stays
   smooth (document-level listeners still receive the move/up events). */
.wb-table-split.is-resizing .wb-table-card { pointer-events: none; }
/* Org card — fixed-width left pane (like the Falcon Clients sidebar).
   Deep-nested names extend the rows past the 272px width; a HORIZONTAL
   scrollbar at the bottom of the card lets the user reveal the full names.
   Vertical scroll is sync'd with the values card via the JS handler. */
.wb-table-card-org {
  flex: 0 0 272px;
}
/* NOTE: the compound `.wb-table-card.wb-table-card-org` (both classes on the
   same element) + !important are REQUIRED: the generic rule
   `.wb-table-card .wb-table-scroll { overflow: auto }` loads LATER with equal
   specificity, so a plain `.wb-table-card-org .wb-table-scroll` lost the cascade
   and the org pane ended up overflow-y:auto — i.e. it scrolled NATIVELY on top
   of the transform mirror (double offset), which is what made the rows drift /
   the org column come up short when scrolled. */
.wb-table-card.wb-table-card-org .wb-table-scroll {
  overflow-x: auto;                 /* horizontal only — long names */
  overflow-y: hidden !important;    /* NO independent vertical scroll: the body is
                                       translated to mirror the Wallet pane exactly,
                                       so the two sides can never drift out of sync. */
}
/* The org body is moved vertically via transform (JS mirror of the Wallet
   scroll). will-change keeps that transform cheap during fast scrolling. */
.wb-table-card-org .wb-table-scroll .wb-table-stack { will-change: transform; }
/* One vertical scrollbar for the whole table: the Organizations pane scrolls in
   lock-step with the Wallet pane (sync) and BOTH keep their sticky headers, so
   hide the Organizations pane's VERTICAL scrollbar — the table reads as a single
   scroll on the far-right Wallet pane, like Show as Client. Keeps its sticky
   header AND its horizontal scrollbar (deep names). */
/* Single scrollbar: the Organizations pane scrolls in lock-step with the Wallet
   pane (JS sync), so hide ITS scrollbars entirely — the whole table reads as one
   scroll on the right. Content still scrolls via wheel/trackpad. */
.wb-table-card-org .wb-table-scroll { scrollbar-width: none; }            /* Firefox / Chromium */
.wb-table-card-org .wb-table-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== Shared row hover — light grey on BOTH cards for the same row ===== */
.wb-tr-org-card.wb-row-hover,
.wb-tr-values-card.wb-row-hover {
  background: #F2F4F5 !important;
}
/* Org cell — full name on a single line, no truncation. The row's
   min-width: max-content (inherited from .wb-table-card .wb-tr) keeps the
   content from collapsing so the scrollbar triggers properly. */
.wb-tr-org-card,
.wb-table-card-org .wb-table-body { min-width: max-content; }
.wb-tr-org-card .wb-td-org {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  align-self: stretch;   /* fill the 60px row so tree rails connect between rows */
}

/* ===== Hover-path rail highlight (both wallet views) =====
   Same teal trace as the Organization Hierarchy tree (.client-row.on-path):
   hovering a row lights up the connector rails along its ancestor chain.
   The :not(.rail-empty):not(.rail-last) guard keeps blank/closing columns dark
   — styles.css relies on source order for this, but wallet.css loads AFTER it,
   so we exclude them explicitly instead. */
.wb-tr-org-card.on-path .tree-rail:not(.rail-empty):not(.rail-last),
.wbc-tr.on-path .tree-rail:not(.rail-empty):not(.rail-last) {
  background-image: linear-gradient(to right, transparent calc(50% - 0.5px), var(--teal) calc(50% - 0.5px), var(--teal) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.wb-tr-org-card.on-path .tree-rail.elbow::before,
.wb-tr-org-card.on-path .tree-rail.elbow::after,
.wbc-tr.on-path .tree-rail.elbow::before,
.wbc-tr.on-path .tree-rail.elbow::after {
  background: var(--teal);
}
/* ===== Connecting-line trace (hover) =====
   The continuous VERTICAL spine linking the hovered child up to its parent,
   drawn THROUGH the intermediate sibling rows the spine passes over (which
   .on-path skips, leaving gaps). Only the vertical segment lights up — each
   passed-over sibling keeps its neutral horizontal elbow; the hovered row's own
   elbow gets the full teal (vertical + horizontal) from .on-path. rail-last is
   excluded so a closing └ stays open below its mid-point. */
.wb-tr-org-card .tree-rail.wb-trace:not(.rail-empty):not(.rail-last) {
  background-image: linear-gradient(to right, transparent calc(50% - 0.5px), var(--teal) calc(50% - 0.5px), var(--teal) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.wb-tr-org-card .tree-rail.wb-trace.elbow::before {
  background: var(--teal);
}
/* ===== Node → children connector ("head" rail) =====
   On an expanded node, a short vertical drops from the node's own centre (by
   the chevron) down to the bottom of its row, landing in the children's lane so
   the spine visibly STARTS at the node — making clear the sub-nodes / users
   below belong to it. It's appended after the real rails (so it auto-aligns to
   the chevron lane) and pulled back by one rail width so it overlays the chevron
   instead of shifting the row; pointer-events:none keeps the chevron clickable. */
.wb-tr-org-card .tree-rail.rail-head {
  background-image: none;
  margin-inline-end: -18px;
  pointer-events: none;
}
.wb-tr-org-card .tree-rail.rail-head::after {
  content: '';
  position: absolute;
  left: calc(50% - 0.5px);
  top: 50%;
  bottom: 0;
  width: 1px;
  background: rgba(13, 63, 68, 0.18);
}
.wb-tr-org-card .wb-td-indent,
.wb-tr-org-card .wb-td-chev,
.wb-tr-org-card .wb-td-chev-spacer { flex-shrink: 0; }
.wb-tr-org-card .wb-td-name {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Values card — fills remaining width */
.wb-table-card-values {
  flex: 1;
  min-width: 0;
}

/* Self-scrolling table card — matches the Falcon Clients sidebar pattern.
   The card itself fills the available height of its column (flex: 1) and
   never scrolls; the inner .wb-table-scroll is the single scroll container,
   so the header stays sticky at the top and the body rows scroll BELOW it. */
.wb-table-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* The single scroll container — both axes. Grows to fill the card; rows that
   exceed the viewport vertically trigger the body scroll. */
.wb-table-card .wb-table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Each row guaranteed min width so all cells render their values fully */
.wb-table-card .wb-table-head,
.wb-table-card .wb-tr { min-width: max-content; }
/* (Sticky header rule removed — the header now sits OUTSIDE the scroll
   wrap so it stays pinned naturally, and the scrollbar only spans the
   body. See `.wb-table-head-org` / `.wb-table-head-values` below.) */

/* Headers sit INSIDE the scroll wrap with position:sticky so they stay
   pinned at the top during VERTICAL scroll AND scroll horizontally in
   lock-step with the body cells below. This keeps each column header
   aligned with its values even when the table is wide enough to scroll. */
/* Org header stays OUTSIDE the scroll (the org pane is transform-mirrored, not
   natively scrolled, so position:sticky wouldn't work there). */
.wb-table-card-org .wb-table-head-org {
  position: static;
  flex: 0 0 auto;
}
/* Values header is INSIDE the stack: position:sticky pins it at the top during
   VERTICAL scroll, while it scrolls HORIZONTALLY in lock-step with the value
   rows below (same stack → same max-content width → same 1fr column widths).
   This is what keeps each channel header aligned with its value column. */
.wb-table-card-values .wb-table-head-values {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
}
/* Kill any hover effects on the header — the row itself is non-interactive
   (only the inline checkbox labels are clickable, and they get their own
   pointer cursor below). */
.wb-table-head-org,
.wb-table-head-org:hover,
.wb-table-head-values,
.wb-table-head-values:hover { background: #F5F5F5; }
.wb-table-head-org .wb-th,
.wb-table-head-values .wb-th,
.wb-table-head-org .wb-th:hover,
.wb-table-head-values .wb-th:hover { background: transparent; cursor: default; }
/* Allow the checkbox label inside the header to keep its pointer cursor */
.wb-table-head-values .wb-th-check,
.wb-table-head-values .wb-th-check:hover { cursor: pointer; background: transparent; }
.wb-table-head-values .wb-th-check.is-locked,
.wb-table-head-values .wb-th-check.is-locked:hover { cursor: not-allowed; background: transparent; }
/* .wb-table-stack — shared sizing context for header + body. The wrapper
   has `min-width: max-content` so it expands to fit the widest descendant
   (be it a deep-nested org name or a long currency value), and both the
   header and body inside take `width: 100%` of the wrapper. Result: header
   and body ALWAYS have the same effective width, so the sticky header's
   grey background extends flush to the card's right edge no matter what. */
.wb-table-card .wb-table-stack {
  display: flex;
  flex-direction: column;
  min-width: 100%;          /* at least the scroll wrap's clip width */
  width: max-content;       /* OR the widest child if larger */
}
.wb-table-card .wb-table-stack > .wb-table-head-org,
.wb-table-card .wb-table-stack > .wb-table-head-values,
.wb-table-card .wb-table-stack > .wb-table-body { width: 100%; }

/* ====== Org card row layout ====== */
/* Fixed-height rows — height (not min-height) so they can NEVER grow taller
   than the matching values-card row. Same applies to the header (60px). */
.wb-tr-org-card {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-2);
  height: 48px;
  box-sizing: border-box;
  background: white;
}
.wb-tr-org-card:last-child { border-bottom: 0; }
.wb-table-head-org {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #F5F5F5;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  height: 48px;
  box-sizing: border-box;
  /* Extend horizontally to match the body rows so when the body horizontally
     scrolls, the header scrolls in sync (sticky-top keeps it pinned
     vertically while still allowing horizontal movement). */
  min-width: max-content;
}

/* ====== Values card row layout ====== */
/* Grid based on data-cols, same templates as before but without the org
   column (since that's in its own card now). The transfer column stays 90px. */
.wb-table-head-values,
.wb-tr-values-card {
  display: grid;
  align-items: center;
}
/* Single mode: one Wallet column + Transfer */
.wb-table-head-values,
.wb-tr-values-card { grid-template-columns: 1fr 90px; }
.wb-table-head-values[data-cols="single"],
.wb-tr-values-card[data-cols="single"]   { grid-template-columns: 1fr 90px; }
.wb-table-head-values[data-cols="multi-1"],
.wb-tr-values-card[data-cols="multi-1"]  { grid-template-columns: 1fr 90px; }
.wb-table-head-values[data-cols="multi-2"],
.wb-tr-values-card[data-cols="multi-2"]  { grid-template-columns: 1fr 1fr 90px; }
.wb-table-head-values[data-cols="multi-3"],
.wb-tr-values-card[data-cols="multi-3"]  { grid-template-columns: 1fr 1fr 1fr 90px; }
.wb-table-head-values[data-cols="multi-4"],
.wb-tr-values-card[data-cols="multi-4"]  { grid-template-columns: 1fr 1fr 1fr 1fr 90px; }
.wb-table-head-values[data-cols="multi-5"],
.wb-tr-values-card[data-cols="multi-5"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 90px; }
.wb-tr-values-card {
  padding: 0 18px;
  border-bottom: 1px solid var(--border-2);
  height: 48px;                  /* MUST match .wb-tr-org-card height exactly */
  box-sizing: border-box;
  background: white;
  gap: 12px;
}
.wb-tr-values-card:last-child { border-bottom: 0; }
.wb-table-head-values {
  padding: 0 18px;
  background: #F5F5F5;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  height: 48px;                  /* MUST match .wb-table-head-org height */
  box-sizing: border-box;
  gap: 12px;
  /* Same as the body rows — extend horizontally so the header tracks the
     body's horizontal scroll position via sticky-top positioning. */
  min-width: max-content;
}
/* When the transfer column is hidden, drop the trailing 90px track */
.wb-table-split.wb-no-xfer .wb-table-head-values,
.wb-table-split.wb-no-xfer .wb-tr-values-card { grid-template-columns: 1fr; }
.wb-table-split.wb-no-xfer .wb-table-head-values[data-cols="multi-2"],
.wb-table-split.wb-no-xfer .wb-tr-values-card[data-cols="multi-2"]  { grid-template-columns: 1fr 1fr; }
.wb-table-split.wb-no-xfer .wb-table-head-values[data-cols="multi-3"],
.wb-table-split.wb-no-xfer .wb-tr-values-card[data-cols="multi-3"]  { grid-template-columns: 1fr 1fr 1fr; }
.wb-table-split.wb-no-xfer .wb-table-head-values[data-cols="multi-4"],
.wb-table-split.wb-no-xfer .wb-tr-values-card[data-cols="multi-4"]  { grid-template-columns: 1fr 1fr 1fr 1fr; }
.wb-table-split.wb-no-xfer .wb-table-head-values[data-cols="multi-5"],
.wb-table-split.wb-no-xfer .wb-tr-values-card[data-cols="multi-5"]  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.wb-table-head {
  display: grid;
  grid-template-columns: 1fr 160px 90px;
  background: #F5F5F5;
  border-bottom: 1px solid var(--border-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-height: 48px;
}
/* multi-1: mirrors the single-mode template (320px Org + 1fr Wallet + 90px
   Transfer) so the lone channel column sits in the EXACT same horizontal
   position as the Wallet column does in single mode. Without this rule
   multi-1 falls back to `320px 220px 90px` and the channel column collapses
   to a narrow 220px sliver on the right edge — header and inputs end up in
   different x-positions, which is the bug the user reported. */
.wb-table-head[data-cols="multi-1"], .wb-tr[data-cols="multi-1"] { grid-template-columns: 320px 1fr 90px; }
.wb-table-head[data-cols="multi-2"], .wb-tr[data-cols="multi-2"] { grid-template-columns: 320px 160px 160px 90px; }
.wb-table-head[data-cols="multi-3"], .wb-tr[data-cols="multi-3"] { grid-template-columns: 320px 160px 160px 160px 90px; }
.wb-table-head[data-cols="multi-4"], .wb-tr[data-cols="multi-4"] { grid-template-columns: 320px 160px 160px 160px 160px 90px; }
.wb-table-head[data-cols="multi-5"], .wb-tr[data-cols="multi-5"] { grid-template-columns: 320px 160px 160px 160px 160px 160px 90px; }
.wb-table-head, .wb-tr { grid-template-columns: 320px 220px 90px; }
/* Single-mode default — narrower Wallet column so centered content reads as truly centered */
.wb-table-head[data-cols="single"], .wb-tr[data-cols="single"] { grid-template-columns: 320px 1fr 90px; }
.wb-table-head[data-cols="single"] .wb-th-amt,
.wb-tr[data-cols="single"] .wb-td-amt,
.wb-table-head[data-cols="multi-1"] .wb-th-amt,
.wb-tr[data-cols="multi-1"] .wb-td-amt {
  justify-self: center;
  width: 220px;
  min-width: 220px;
}
/* (Legacy frozen-pane sticky positioning on .wb-th-org / .wb-td-org dropped
   — it made each row appear to scroll independently because every cell
   stuck to left:0 of its scroll wrap, while different-width rows landed at
   different visual positions. With the new split-card layout there's no
   need for sticky behaviour: the bottom scrollbar of .wb-table-card-org
   now moves the whole body in one piece.) */
.wb-table-card .wb-th-org,
.wb-table-card .wb-td-org {
  /* background: white; */   /* removed so the row background (incl. the row-hover grey) shows through on the org side */
}
.wb-table-card .wb-th-org { background: #F5F5F5; }

/* (Old "master scrollbar on the last row" rules deleted — the bottom
   scrollbar of .wb-table-card-org .wb-table-scroll now moves every row
   in one piece, so per-cell scrollbars are no longer needed.) */
/* (Right-divider pseudo-elements on .wb-td-org / .wb-th-org removed — the
   org column now lives in its own card, so the inter-column divider is
   redundant.) */
.wb-table-card .wb-td-org::after,
.wb-table-card .wb-th-org::after { content: none; }
.wb-th {
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-th-org { padding-inline-start: 22px; }
/* ====== Client-view channel header checkbox + Show All link ======
   Mirrors the Falcon view's .wb-th-check pattern but with .wbc- prefix. */
.wbc-th-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.wbc-th-check.is-locked { cursor: not-allowed; opacity: 0.7; }
.wbc-th-check .wbc-th-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.wbc-th-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.wbc-th-check-box {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid #cbd5cf;
  background: var(--teal);     /* checked by default since channel is active */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  border-color: var(--teal);
}
.wbc-th-check-input:focus-visible ~ .wbc-th-check-box {
  box-shadow: 0 0 0 3px rgba(13,63,68,0.18);
}
/* Show All link inside the wbc-master strip — small underlined teal link */
.wbc-show-all-link {
  background: transparent;
  border: 0;
  padding: 0;
  /* Push to the END of the master info cell so the link sits NEXT to the
     first channel pill instead of hugging the Master Wallet label. */
  margin-inline-start: auto;
  margin-inline-end: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  flex-shrink: 0;
  align-self: center;
}
.wbc-show-all-link:hover { color: var(--teal); }

/* "Multiple Wallets" row — radio + Show All link on the same line */
.wb-mw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.wb-show-all-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}
.wb-show-all-link:hover { filter: brightness(1.15); }

/* Header content anchors to the START so it aligns with the value box
   below it (.wb-td-amt also uses justify-content: start). */
.wb-th-amt { justify-content: start; }

/* Channel header with inline checkbox — name on the left, checkbox at the
   END (after the text) with auto-margin pushing it to the far right of the
   cell. DOM order is already name → input → box, but the auto-margin makes
   the visual placement explicit. */
.wb-th-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.wb-th-check.is-locked { cursor: not-allowed; opacity: 0.7; }
.wb-th-check .wb-th-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  order: 2;
}
.wb-th-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.wb-th-check-box {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid #cbd5cf;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  order: 1;                       /* checkbox comes BEFORE the name */
}
/* Default to checked since channels in the header ARE active */
.wb-th-check .wb-th-check-box {
  background: var(--teal);
  border-color: var(--teal);
}
.wb-th-check-input:focus-visible ~ .wb-th-check-box {
  box-shadow: 0 0 0 3px rgba(13,63,68,0.18);
}
.wb-th-channel { color: var(--text); font-weight: 400; }
.wb-th-channel-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #F1F2F4;
  color: #1F2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-th-xfer { justify-content: center; padding-inline-end: 18px; }

.wb-table-body { display: flex; flex-direction: column; }
.wb-tr {
  display: grid;
  grid-template-columns: 1fr 160px 90px;
  align-items: center;
  background: white;
  transition: background 0.15s;
}
/* (Old hover-suppression rule removed — replaced by the more precise
   .wbc-tr:not(.wbc-tr-head):hover rule earlier, which protects the table
   header's grey background from being clobbered on hover.) */
.wb-tr-header {
  background: white;
}
.wb-tr-header:hover { background: transparent; }
.wb-tr-header .wb-td-name {
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}
.wb-tr-child:hover { background: transparent; }
.wb-tr-user .wb-td-name { color: var(--text-2); font-weight: 400; }

.wb-td {
  padding: 0px 14px 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  min-height: 56px;
}
.wb-td-org { padding-inline-start: 22px; gap: 8px; }
.wb-td-indent { display: inline-block; flex-shrink: 0; }
.wb-td-chev {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s, background 0.15s;
}
.wb-td-chev:hover { background: rgba(0,0,0,0.04); color: var(--teal); }
.wb-td-chev.invisible { visibility: hidden; }
.wb-td-chev.open { transform: rotate(90deg); color: var(--teal); }
/* User-row branch tick: the SECOND dash of a user's connector. Lengthened so
   the branch visibly extends from the node's spine all the way next to the
   username (was a short 10px stub floating mid-gap), and recoloured to match
   the tree rails so both dashes read as one branch. */
.wb-td-chev-spacer { width: 24px; height: 1px; background: rgba(13, 63, 68, 0.18); flex-shrink: 0; }
body[dir="rtl"] .wb-td-chev { transform: rotate(180deg); }
body[dir="rtl"] .wb-td-chev.open { transform: rotate(90deg); }

.wb-user-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wb-td-name { font-size: 13px; white-space: nowrap; }
.wb-td-amt {
  /* The cell fills its grid track; flex centers the inner content. */
  justify-content: center;
  text-align: center;
}
.wb-td-amt-empty { /* spacer cell on root rows */ }
.wb-td-xfer { justify-content: center; padding-inline-end: 18px; }
/* Header cells: centered (high-specificity to beat any earlier rules) */
.wb-table-card .wb-table-head .wb-th-amt,
.wb-table-card .wb-table-head .wb-th-channel {
  justify-content: center !important;
  text-align: center !important;
  padding-inline-start: 14px;
  padding-inline-end: 14px;
}
.wb-th-xfer { padding-inline-start: 14px; padding-inline-end: 14px; }
/* Body amount cells: centered too — the inner .wb-amount-view span gets
   `margin: 0 auto` so it sits at the true horizontal centre of the cell. */
.wb-table-card .wb-table-body .wb-td-amt {
  justify-content: start !important;
  text-align: start !important;
  /* Zero the cell's inline padding so the .wb-amount-edit box sits flush
     against the column edge. The box has its own 14px internal padding, so
     the value content lands at exactly the same x-position as the header
     text (cell padding 14px → header text at x=14; box at x=0 with internal
     padding 14px → value text at x=14). */
  padding-inline-start: 0;
  padding-inline-end: 0;
}
.wb-table-card .wb-table-body .wb-td-amt .wb-amount-view {
  /* Left-align so the ﷼ icons line up row-to-row AND with the (start-aligned)
     column header — instead of centering each value independently. */
  margin-inline-end: auto;
}
/* Single / single-channel (multi-1) mode keeps the lone wide column centered. */
.wb-table-card .wb-table-body .wb-tr-values-card[data-cols="single"] .wb-td-amt .wb-amount-view,
.wb-table-card .wb-table-body .wb-tr-values-card[data-cols="multi-1"] .wb-td-amt .wb-amount-view {
  margin-inline: auto;
}

/* Single-wallet (and single-channel multi-1) mode: the lone amount column is a
   wide 1fr, so the start-aligned input box floats to the left with a large empty
   gap on the right (looks off-centre — see user feedback). Center the "Wallet"
   header AND the input box within the column for these single-column layouts.
   Multi-column modes keep start alignment (narrow columns; value lines up under
   its own header). Specificity here intentionally beats the !important start
   rules above. */
.wb-table-card .wb-table-head-values[data-cols="single"] .wb-th-amt,
.wb-table-card .wb-table-head-values[data-cols="multi-1"] .wb-th-amt,
.wb-table-card .wb-table-body .wb-tr-values-card[data-cols="single"] .wb-td-amt,
.wb-table-card .wb-table-body .wb-tr-values-card[data-cols="multi-1"] .wb-td-amt {
  justify-content: center !important;
  text-align: center !important;
}
/* Center the single Wallet value AND its "Wallet" header in the VISUAL middle of
   the card: reserve a left track equal to the 90px Transfer column on the right,
   then place the amount in the CENTRE track. The empty left track balances the
   transfer column so the amount cell (header + every row) sits at true centre
   instead of ~51px to the left. CSS-only — the amt cell itself moves, so header
   and values stay aligned. (No-transfer role keeps the full-width 1fr layout.) */
.wb-table-split:not(.wb-no-xfer) .wb-table-head-values[data-cols="single"],
.wb-table-split:not(.wb-no-xfer) .wb-tr-values-card[data-cols="single"] {
  grid-template-columns: 90px 1fr 90px;
}
.wb-table-split:not(.wb-no-xfer) .wb-table-head-values[data-cols="single"] .wb-th-amt,
.wb-table-split:not(.wb-no-xfer) .wb-tr-values-card[data-cols="single"] .wb-td-amt {
  grid-column: 2;
}
.wb-table-split:not(.wb-no-xfer) .wb-table-head-values[data-cols="single"] .wb-th-xfer,
.wb-table-split:not(.wb-no-xfer) .wb-tr-values-card[data-cols="single"] .wb-td-xfer {
  grid-column: 3;
}
.wb-input {
  width: 100%;
  max-width: 90px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: white;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.08);
}
.wb-input:hover { border-color: #d1d5db; }
.wb-input[readonly],
.wb-input[readonly]:hover,
.wb-input[readonly]:focus {
  background: #F6F7F8;
  border-color: var(--border);
  box-shadow: none;
  color: var(--text-2);
  cursor: default;
  caret-color: transparent;
}

.wb-xfer-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.wb-xfer-btn:hover {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
  transform: scale(1.05);
}

/* === Drawer: Balance Transfer =================================== */
.wb-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 240;
  animation: wbScrimIn 0.22s ease;
}
@keyframes wbScrimIn { from { opacity: 0; } to { opacity: 1; } }
.wb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: white;
  z-index: 241;
  box-shadow: -10px 0 30px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  animation: wbDrawerIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes wbDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
body[dir="rtl"] .wb-drawer { right: auto; left: 0; }
body[dir="rtl"] .wb-drawer { animation: wbDrawerInRtl 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes wbDrawerInRtl { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.wb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.wb-drawer-title { font-size: 18px; font-weight: 700; color: var(--text); }
.wb-drawer-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.wb-drawer-close:hover { border-color: var(--text); color: var(--text); }

.wb-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wb-fld { display: flex; flex-direction: column; gap: 8px; }
.wb-fld-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.wb-fld-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wb-fld-hint strong { color: var(--text); font-weight: 600; }
/* Inline validation error (e.g. amount exceeds available balance) */
.wb-fld-error { margin-top: 5px; font-size: 11.5px; color: #dc2626; line-height: 1.35; }
.wb-amount-input.is-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.wb-fld-quick { display: inline-flex; gap: 4px; }
.wb-fld-quick button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.wb-fld-quick button:hover { background: rgba(13,63,68,0.08); }

/* === Drawer select control ===================================== */
.wb-select-wrap { position: relative; }
.wb-select-btn {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-select-wrap.open .wb-select-btn,
.wb-select-btn:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.08);
  outline: none;
}
.wb-select-search-icon { color: var(--text-muted); display: inline-flex; }
.wb-select-value {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-select-value.placeholder { color: var(--text-faint); }
.wb-select-chev { color: var(--text-muted); transition: transform 0.18s; }
.wb-select-wrap.open .wb-select-chev { transform: rotate(180deg); color: var(--teal); }

.wb-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  z-index: 10;
  padding: 4px;
  animation: wbMenuIn 0.16s ease;
}
@keyframes wbMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }
.wb-select-opt {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  display: block;
}
.wb-select-opt:hover { background: var(--bg-hover); }
.wb-select-opt.active { background: rgba(13,63,68,0.08); color: var(--teal); font-weight: 600; }

/* === Channel segment (Source/Destination Wallet) ================ */
.wb-ch-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wb-ch-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 5px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.wb-ch-seg:hover { border-color: var(--ch); color: var(--text); }
.wb-ch-seg.on {
  border-color: var(--ch);
  background: color-mix(in oklch, var(--ch) 10%, white);
  color: color-mix(in oklch, var(--ch) 65%, var(--text));
  font-weight: 600;
}

/* === Drawer amount input ======================================= */
.wb-amount-input {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 42px;
  padding: 0 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-amount-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.08);
}
.wb-amount-input input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.wb-amount-input input::placeholder { color: var(--text-faint); font-weight: 400; }
.wb-amount-suffix {
  color: var(--text-muted);
  display: inline-flex;
  margin-inline-start: 8px;
}
/* Prefix variant: ريال glyph sits BEFORE the number, always visible. */
.wb-amount-prefix {
  color: var(--text-muted);
  display: inline-flex;
  margin-inline-end: 8px;
}
.wb-amount-input--prefix input { text-align: start; }

/* === Drawer description ======================================== */
.wb-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: white;
  resize: vertical;
  min-height: 78px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.08);
}

/* === Drawer footer ============================================= */
.wb-drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-2);
  flex-shrink: 0;
}
.wb-drawer-foot .btn { height: 38px; padding: 0 22px; font-size: 13px; border-radius: 10px; }
.wb-drawer-foot .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Hide Transfer column for read-only roles ================== */
.wb-table-card.wb-no-xfer .wb-table-head,
.wb-table-card.wb-no-xfer .wb-tr { grid-template-columns: 1fr 160px; }
.wb-table-card.wb-no-xfer .wb-table-head[data-cols="multi-2"],
.wb-table-card.wb-no-xfer .wb-tr[data-cols="multi-2"] { grid-template-columns: 1fr 130px 130px; }
.wb-table-card.wb-no-xfer .wb-table-head[data-cols="multi-3"],
.wb-table-card.wb-no-xfer .wb-tr[data-cols="multi-3"] { grid-template-columns: 1fr 110px 110px 110px; }
.wb-table-card.wb-no-xfer .wb-th-xfer,
.wb-table-card.wb-no-xfer .wb-td-xfer { display: none; }

/* === Channel dropdown (Source/Destination Wallet — black & white) === */
.wb-ch-dd .wb-select-btn { gap: 12px; }
.wb-ch-dd-glyph {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #F1F2F4;
  color: #1F2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wb-ch-dd-glyph-empty { background: transparent; }
.wb-ch-dd .wb-select-search-icon { display: none; }
.wb-ch-dd-opt {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.wb-ch-dd-opt .wb-ch-dd-glyph {
  width: 24px; height: 24px;
}
.wb-ch-dd.disabled .wb-select-btn {
  background: #F6F7F8;
  cursor: not-allowed;
  color: var(--text-2);
}
.wb-ch-dd.disabled .wb-select-btn:focus,
.wb-ch-dd.disabled .wb-select-btn:hover {
  border-color: var(--border);
  box-shadow: none;
}
.wb-ch-dd.disabled .wb-ch-dd-glyph {
  background: #E5E7EB;
  color: var(--text-faint);
}

/* === Role chip (RBAC demo switcher) ============================= */
.wb-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0 4px 0 14px;
  height: 38px;
  margin-inline-end: auto; /* push Cancel/Save to opposite end */
  font-size: 12.5px;
  position: relative;
}
.wb-role-chip-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wb-role-chip-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  padding: 0 28px 0 8px;
  height: 30px;
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--teal) 50%),
    linear-gradient(-45deg, transparent 50%, var(--teal) 50%);
  background-position:
    calc(100% - 14px) 13px,
    calc(100% - 9px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
body[dir="rtl"] .wb-role-chip-select {
  padding: 0 8px 0 28px;
  background-position:
    14px 13px,
    9px 13px;
}
.wb-role-chip-select:hover { background-color: rgba(13,63,68,0.04); }
.wb-role-chip-select:focus { background-color: rgba(13,63,68,0.06); }

/* ====== Confirm-save modal (Show as Falcon) ======
   Reuses .ac-modal-overlay for the backdrop, but the card is sized + styled
   here. Uses double-class selectors (.ac-modal.wb-confirm-modal) so it always
   wins over the base .ac-modal padding/width regardless of stylesheet load
   order. Modeled after the reference "Maximum user limit" warning dialog:
   compact centered card, prominent red warning triangle, centered title and
   body, primary CTA at the bottom. */
.wb-confirm-overlay { z-index: 9100; }
.ac-modal.wb-confirm-modal {
  width: 460px;
  max-width: 92vw;
  padding: 40px 44px 32px;
  text-align: center;
  border-radius: 20px;
}
/* Red warning triangle wrapper — sized to read at a glance */
.wb-confirm-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gentle pop-in (slight overshoot) when the dialog opens */
  animation: wb-confirm-pop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wb-confirm-icon svg { display: block; overflow: visible; }
@keyframes wb-confirm-pop {
  0%   { transform: scale(0.55); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
/* the checkmark draws itself in just after the badge settles */
.wb-confirm-icon .wb-lock-check {
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  animation: wb-lock-check-draw 0.4s ease-out 0.3s forwards;
}
@keyframes wb-lock-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wb-confirm-icon { animation: none; }
  .wb-confirm-icon .wb-lock-check { animation: none; stroke-dashoffset: 0; }
}
.wb-confirm-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  text-align: center;
}
.wb-confirm-sub {
  margin: 0 auto 28px;
  max-width: 360px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
}
.wb-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.wb-confirm-actions .btn {
  min-width: 130px;
  height: 44px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}
/* Cancel reads as a ghost/secondary; Save reads as the destructive-affirm CTA */
.wb-confirm-actions .btn.btn-secondary {
  background: white;
  border: 1px solid var(--border);
  color: var(--text);
}
.wb-confirm-actions .btn.btn-secondary:hover {
  border-color: var(--text-muted);
}
.wb-confirm-actions .btn.btn-primary {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: white;
}
.wb-confirm-actions .btn.btn-primary:hover {
  filter: brightness(1.08);
}

/* ====== Channels multi-select dropdown (Multiple Wallets) ======
   Triggered when Wallet Type = Multiple Wallets. The trigger shows the
   selected channels as small chips; the menu drops UPWARD (bottom-anchored)
   so it doesn't push the page content downward when opened. Each row is a
   proper checkbox; the last remaining channel is locked. */
.wb-chsel {
  position: relative;
  margin-top: 12px;
}
.wb-chsel-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.wb-chsel-trigger:hover { border-color: var(--text-muted); }
.wb-chsel.is-open .wb-chsel-trigger {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 217, 0.15);
}
.wb-chsel-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.wb-chsel-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  background: #F3F8F5;
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.wb-chsel-placeholder {
  font-size: 13px;
  color: var(--text-muted);
}
.wb-chsel-caret {
  display: inline-flex;
  color: var(--text-muted);
  transform: rotate(-90deg);   /* points up when closed */
  transition: transform .15s;
}
.wb-chsel.is-open .wb-chsel-caret { transform: rotate(90deg); /* points down when open (menu is above) */ }

/* Drop-up menu: bottom-anchored so it opens upward */
.wb-chsel-menu {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 6px);    /* sit ABOVE the trigger */
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(13,63,68,0.10);
  padding: 6px;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
}
.wb-chsel-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.wb-chsel-opt:hover { background: #F5F7F6; }
.wb-chsel-opt.is-locked { cursor: not-allowed; opacity: 0.6; }
.wb-chsel-opt.is-locked:hover { background: transparent; }
.wb-chsel-opt input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.wb-chsel-opt-box {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid #cbd5cf;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.wb-chsel-opt.is-checked .wb-chsel-opt-box {
  background: var(--teal);
  border-color: var(--teal);
}
.wb-chsel-opt-label { font-weight: 500; }