/* ─────────────────────────────────────────────────────────────────────
   components.css — reusable named components (UI atoms & molecules).
   Each block here is a piece you can drop into a page: pill, button,
   section-card, hero, avatar, etc.
   ───────────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════
   PILLS — universal style
   One look everywhere: hero, toolbars, table cells.

   ─── PILL CONVENTION ─────────────────────────────────────────
   Three semantic categories. Pick the right one and the visual
   read becomes consistent across the whole product:

   1. STATUS pill — WITH .pill-dot.
      Use when the value is a *live state of an object* that can
      change over time and the user cares about transitions.
      Examples: ACTIVE / INACTIVE, OK / FAILED, PENDING / CONNECTED,
      ISSUED / VOIDED / REFUNDED, BLOCKED.
      Always include <span class="pill-dot"></span>.
      Cue: "is this a current condition that could flip?"

   2. INFO pill — NO dot.
      Use for *static metadata attributes* — labels you read but
      that don't represent a changing state. Examples: BSP, PCC,
      role name, ticket type, currency code.
      Cue: "this is just a tag/label, not a state."
      Prefer .pill-neutral for these unless a color genuinely
      communicates a category (e.g. .pill-primary for "admin"
      role to make it stand out from regular roles).

   3. QUANTITY pill — NO dot.
      Use for *counts or count-derived classifications*.
      Examples: "3 rules", "unused", "+23 more".
      Cue: "this is a number or its absence."

   Placement: status pills typically live inline next to the
   object name (e.g. in a hero card next to the title). Don't
   put them in the top-right corner of a widget — that's the
   slot for action buttons, and competing for it makes the
   layout noisy. Status indicators should be close to the thing
   they describe, not floating at the edge.

   When in doubt: text-only is fine. Not every attribute needs
   a pill. A pill is visual emphasis; if there's nothing to
   emphasise (e.g. a label inside a form), use plain mono text.
   ───────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Defense against grid/flex blockification: keep pill compact even when
     it becomes a direct grid/flex item with align-items:stretch. */
  justify-self: start;
  align-self: center;
  width: fit-content;
  line-height: 18px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill-dot { width: 4.5px; height: 4.5px; border-radius: 50%; flex-shrink: 0; display: inline-block }

.pill-success { background: var(--success-soft);  color: var(--success);      border-color: var(--success-border) }
.pill-success .pill-dot { background: var(--success) }
.pill-danger  { background: var(--danger-soft);   color: var(--danger);       border-color: var(--danger-border) }
.pill-danger  .pill-dot { background: var(--danger) }
.pill-warning { background: var(--warning-soft);  color: var(--warning);      border-color: var(--warning-border) }
.pill-warning .pill-dot { background: var(--warning) }
.pill-neutral { background: var(--neutral-soft);  color: var(--neutral);      border-color: var(--neutral-border) }
.pill-neutral .pill-dot { background: var(--neutral) }
.pill-violet  { background: var(--violet-soft);   color: var(--violet);       border-color: var(--violet-border) }
.pill-violet  .pill-dot { background: var(--violet) }
.pill-primary { background: var(--primary-soft);  color: var(--primary-text); border-color: var(--primary-soft-2) }
.pill-primary .pill-dot { background: var(--primary) }

/* Equal-width variants — use sparingly when comparing yes/no or active/inactive */
.pill-w-sm { min-width: 54px }
.pill-w-md { min-width: 72px }
.pill-w-lg { min-width: 90px }

/* ═════════════════════════════════════════
   HERO — prominent first-block on any page
   ═════════════════════════════════════════ */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 0 0 1px rgba(15,17,21,0.04), 0 1px 2px rgba(15,17,21,0.04);
}
.hero-eyebrow    { font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.05em; font-weight: 500; display: flex; align-items: center; gap: 8px }
.hero-title      { font-size: 24px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.1; margin: 6px 0 0 }
.hero-feature    { font-size: 32px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; margin: 6px 0 0 }
.hero-stat       { display: flex; flex-direction: column; gap: 2px }
.hero-stat-value { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; font-feature-settings: 'tnum' }
.hero-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 500 }
.hero-divider    { width: 1px; background: var(--border); align-self: stretch }

/* ═════════════════════════════════════════
   COLLAPSIBLE SECTION (<details class="collapse">)
   ═════════════════════════════════════════ */
details.collapse {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,17,21,0.02);
}
details.collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 500; color: var(--text);
  user-select: none;
}
details.collapse > summary::-webkit-details-marker { display: none }
details.collapse > summary:hover                   { background: var(--surface-2) }
details.collapse > summary .chev                   { transition: transform .15s; color: var(--text-3) }
details.collapse[open] > summary .chev             { transform: rotate(90deg) }
details.collapse[open] > summary                   { border-bottom: 1px solid var(--border) }

/* ═════════════════════════════════════════
   BIG-NUMBER + TREND
   ═════════════════════════════════════════ */
.actions { display: inline-flex; align-items: center; gap: 6px }

.big-num {
  font-family: 'Geist', sans-serif;
  font-feature-settings: 'tnum';
  letter-spacing: -0.022em;
  font-weight: 600;
}

.trend       { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; font-feature-settings: 'tnum' }
.trend-up    { color: var(--success) }
.trend-down  { color: var(--danger) }
.trend-flat  { color: var(--text-3) }

/* ═════════════════════════════════════════
   AVATARS — semantic but distinct from pills
   ═════════════════════════════════════════ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.avatar-44 { width: 44px; height: 44px; font-size: 16px; border-radius: 12px }
.avatar-56 { width: 56px; height: 56px; font-size: 20px; border-radius: 14px }

.avatar-cobalt  { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e3a8a; border: 1px solid #bfdbfe }
.avatar-violet  { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: #5b21b6; border: 1px solid #ddd6fe }
.avatar-amber   { background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); color: #78350f; border: 1px solid #fcd34d }
.avatar-stone   { background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%); color: #44403c; border: 1px solid #d6d3d1 }
.avatar-emerald { background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); color: #065f46; border: 1px solid #6ee7b7 }

/* ═════════════════════════════════════════
   LIVE DOT (pulsing)
   ═════════════════════════════════════════ */
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
  display: inline-block;
}
.live-dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--success);
  opacity: 0.3;
  animation: livepulse 1.6s ease-out infinite;
}
@keyframes livepulse {
  0%   { transform: scale(0.6); opacity: 0.5 }
  100% { transform: scale(1.6); opacity: 0 }
}

/* ═════════════════════════════════════════
   TAB BUTTONS (saved views — chip style)
   ═════════════════════════════════════════ */
.tab-btn {
  height: 26px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.tab-btn:hover  { color: var(--text); background: rgba(0,0,0,0.02) }
.tab-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(15,17,21,0.04) }
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-2); color: var(--text-3);
  font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500;
}
.tab-btn.active .tab-count { background: var(--primary-soft); color: var(--primary-text) }

/* ═════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  color: var(--text);
  transition: all .12s ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover            { background: var(--surface-2) }
.btn-ghost            { color: var(--text-2); background: transparent }
.btn-ghost:hover      { color: var(--text); background: var(--surface-2) }
.btn-outline          { background: var(--surface); border-color: var(--border); color: var(--text) }
.btn-outline:hover    { background: var(--surface-2); border-color: var(--border-2) }
.btn-primary          { background: var(--text); color: var(--surface); border-color: var(--text) }
.btn-primary:hover    { background: #000; color: var(--surface) }
.btn-icon             { padding: 0; width: 30px; justify-content: center }
.btn-sm               { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 6px }
.btn-sm.btn-icon      { width: 26px; padding: 0 }

/* Keyboard key chip */
kbd {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 500;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  box-shadow: inset 0 -1px 0 var(--border);
  line-height: 14px;
  display: inline-block;
}

/* ═════════════════════════════════════════
   PLAIN TABLE (<table class="tbl">)
   Use Tabulator for big data; .tbl is for small static lists.
   ═════════════════════════════════════════ */
table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px }
table.tbl thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  padding: 7px 10px; text-align: left;
  font-size: 11px; font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
  height: 32px;
  user-select: none;
}
table.tbl tbody td       { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; height: 38px }
table.tbl tbody tr       { transition: background .08s ease }
table.tbl tbody tr:hover { background: var(--surface-3) }
table.tbl tbody tr.selected   td { background: var(--primary-soft); border-bottom-color: var(--primary-soft-2) }
table.tbl tbody tr.row-active    { background: #fcfcfb; box-shadow: inset 2px 0 0 var(--primary) }
table.tbl tbody tr.row-active td { background: #fcfcfb }

/* ═════════════════════════════════════════
   DIVIDERS — hairline & dotted segment line
   ═════════════════════════════════════════ */
.hairline { height: 1px; background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent) }
.seg-line { height: 1px; background-image: linear-gradient(to right, var(--text-3) 50%, transparent 0); background-size: 6px 1px; background-repeat: repeat-x; flex: 1 }

/* ═════════════════════════════════════════
   TABS (content tabs in cards)
   ═════════════════════════════════════════ */
.tabs       { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 16px; background: var(--surface) }
.tab        { padding: 10px 12px; font-size: 13px; color: var(--text-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .12s; text-decoration: none }
.tab:hover  { color: var(--text) }
.tab.active { color: var(--text); border-bottom-color: var(--text) }
.tab .count { margin-left: 6px; padding: 0 5px; font-size: 11px; background: var(--surface-2); border-radius: 4px; color: var(--text-2) }

/* ═════════════════════════════════════════
   TIMELINE
   ═════════════════════════════════════════ */
.timeline { position: relative }
.timeline::before {
  content: "";
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--border) 0%, var(--border) 100%);
}
.timeline-item     { position: relative; padding-left: 26px; padding-bottom: 16px }
.timeline-dot      { position: absolute; left: 3px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); z-index: 2 }
.timeline-item.active  .timeline-dot { border-color: var(--primary); background: var(--primary) }
.timeline-item.success .timeline-dot { border-color: var(--success); background: var(--success) }
.timeline-item.danger  .timeline-dot { border-color: var(--danger);  background: var(--danger) }

/* ═════════════════════════════════════════
   SEGMENT ROW (flight segments display)
   ═════════════════════════════════════════ */
.seg-row     { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 12px 0 }
.seg-side    { display: flex; flex-direction: column; gap: 1px }
.seg-airport { font-size: 16px; font-weight: 600; letter-spacing: -0.015em }
.seg-time    { font-size: 13px; color: var(--text); font-feature-settings: 'tnum' }
.seg-meta    { font-size: 12px; color: var(--text-2) }
.seg-side.right { align-items: flex-end; text-align: right }
.seg-middle  { display: flex; flex-direction: column; align-items: center; min-width: 90px }

/* ═════════════════════════════════════════
   FORM FIELDS
   ═════════════════════════════════════════ */
.field          { display: flex; flex-direction: column; gap: 4px }
.field-label    { font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.05em; font-weight: 500 }
.field-value    { font-size: 13px; color: var(--text) }
.field-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 0 }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: inherit; font-size: 13px;
  color: var(--text);
  background: var(--surface);
  transition: all .12s;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type=text][disabled] { background: var(--surface-2); color: var(--text-3) }
textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; min-height: 80px }

.form-help     { font-size: 11px; color: var(--text-3); margin-top: 4px }
.form-label    { font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; display: block }
.form-label .req { color: var(--danger) }

/* ═════════════════════════════════════════
   COMMAND PALETTE HINT (⌘K input)
   ═════════════════════════════════════════ */
.cmd-input {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 280px;
  cursor: pointer;
  transition: all .12s;
}
.cmd-input:hover { border-color: var(--border-2); background: var(--surface) }

/* ═════════════════════════════════════════
   SECTION CARD + SECTION HEAD
   The canonical "block with header + body" pattern. The card supplies
   the border + radius + overflow:hidden so any child (incl. Tabulator
   footer) gets clean corners. We don't try to give children their own
   radii — that fights other libs and creates specificity wars.
   ═════════════════════════════════════════ */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Cards clip their children's bg-fills (section-head grey, tabulator
     footer white) so the card's rounded corners stay clean. The opt-out
     below (:has(.pick-popover|.dr-popover)) lets cards that contain a
     popover (date-range, PCC picker, bridge picker) escape the clip so
     the popover isn't cut off. For those, section-head + tabulator-footer
     get explicit rounded corners via the belt-and-braces rules further
     down so corners stay visually clean even with overflow:visible. */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,17,21,0.04);
}

/* Popover-bearing cards opt out of clip so the popover can escape
   the card boundary. :has() handles this automatically — no opt-in
   class needed in the markup. Supported by all modern browsers. */
.section-card:has(.pick-popover),
.section-card:has(.dr-popover) {
  overflow: visible;
}
.section-head {
  padding: 11px var(--table-edge-x);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  /* Match parent .section-card's border-radius on the top corners so
     section-head's grey bg-surface-3 fill doesn't square off the card's
     rounded corners when the parent has overflow:visible. Harmless when
     parent clips (rule produces identical visual result). */
  border-top-left-radius:  12px;
  border-top-right-radius: 12px;
}
.section-head h3 {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.section-head h3 .count {
  font-weight: 500;
  color: var(--text-3);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}

/* Belt-and-braces for popover-bearing cards: when section-card has
   overflow:visible, the Tabulator footer's white bg-surface fill leaks
   past the parent's rounded bottom corners. Give it explicit bottom
   corners. Direct-child only (`>`) so we don't accidentally style
   nested tables. */
.section-card:has(.pick-popover) > .tabulator > .tabulator-footer,
.section-card:has(.dr-popover)   > .tabulator > .tabulator-footer,
.section-card:has(.pick-popover) > div.tabulator > .tabulator-footer,
.section-card:has(.dr-popover)   > div.tabulator > .tabulator-footer {
  border-bottom-left-radius:  12px;
  border-bottom-right-radius: 12px;
}

.tag-text { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 500 }

/* KPI card (top-stat tiles) */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(15,17,21,0.03);
}

/* ═════════════════════════════════════════
   TAB STRIP — mutually-exclusive segmented control
   Lives inside section-head for status filters (Active/Inactive/All).
   NOT for saved views — those are .tab-btn chips above the card.
   ═════════════════════════════════════════ */
.tab-strip {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
  height: 30px;
}
.tab-strip button {
  padding: 0 14px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s;
  font-family: inherit;
}
.tab-strip button:last-child           { border-right: none }
.tab-strip button:hover:not(.active)   { background: var(--surface-3) }
.tab-strip button.active               { background: var(--primary-soft); color: var(--primary-text); font-weight: 600 }
.tab-strip button .count {
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 99px;
  color: var(--text-3);
  font-weight: 500;
}
.tab-strip button.active .count { background: #fff; color: var(--primary) }

/* Mobile: many tabs (Active/Inactive/Blocked/All) won't fit in one row —
   allow horizontal scroll instead of clipping. Individual buttons keep
   their natural width via flex-shrink:0. */
@media (max-width: 700px) {
  .tab-strip        { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .tab-strip button { flex-shrink: 0 }
}

/* ═════════════════════════════════════════
   FILTER CHIP (active filter pill)
   ═════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px;
  padding: 0 4px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; color: var(--text);
  transition: all .12s;
  cursor: pointer;
}
.chip:hover { border-color: var(--border-2); background: var(--surface-3) }
.chip-key   { color: var(--text-3); font-weight: 500 }
.chip-op    { color: var(--text-3); font-weight: 400 }
.chip-val   { color: var(--text);   font-weight: 500 }
.chip-x     { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; color: var(--text-3); margin-left: 2px }
.chip-x:hover { background: var(--surface-2); color: var(--text) }

/* ════════════════════════════════════════
   PICK CHIP (compact dropdown trigger in section-head)
   Used by the bridge picker in the Balances-by-currency widget.
   ════════════════════════════════════════ */
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.pick-chip:hover { border-color: var(--border-2); background: var(--surface-3) }
.pick-chip .chev { color: var(--text-3); margin-left: 2px }
.pick-chip .label { color: var(--text-3); font-weight: 500 }
.pick-chip.active { background: var(--primary-soft); border-color: var(--primary-soft-2); color: var(--primary-text) }
.pick-chip.active .label { color: var(--primary) }

/* Container for chip + popover. Position-relative so the popover
   anchors to the chip's left edge. */
.pick-anchor { display: inline-block }

/* Dropdown popover for pick-chip. Hidden by default; .open shows it.
   Positioned absolute under the chip; max-height + scroll so long
   bridge lists don't blow the page. */
.pick-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 280px;
  max-width: 420px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(15,17,21,0.04), 0 12px 32px -6px rgba(15,17,21,0.12);
  padding: 4px;
}
.pick-popover.open { display: block }

/* Individual option button inside the popover. Full-width row,
   left-aligned, hover highlight. .selected = current scope. */
.pick-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.pick-option:hover    { background: var(--surface-2) }
.pick-option.selected { background: var(--primary-soft); color: var(--primary-text) }
.pick-option.selected .label { color: var(--primary); font-weight: 500 }
.pick-option .label   { font-weight: 500 }

/* Hairline between "All bridges" and the bridge list. */
.pick-divider { height: 1px; background: var(--border); margin: 4px 0 }

/* ═════════════════════════════════════════
   ACTION TILE (dashboard quick-action cards)
   Row of 4 entry-point links on Pulse. Each is a small card with a
   coloured icon on the left and title + meta on the right.
   ═════════════════════════════════════════ */
.action-tile {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: all .15s;
  box-shadow: 0 0 0 1px rgba(15,17,21,0.02);
}
.action-tile:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(15,17,21,0.06);
}
.action-tile-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  flex-shrink: 0;
}
.action-tile-title { font-size: 13px; font-weight: 500; letter-spacing: -0.005em }
.action-tile-meta  { font-size: 11px; color: var(--text-3); margin-top: 1px }

/* ─── FEED ROW: lighter timeline for the pulse "Recent activity" block.
   Simple list of rows with a colored dot + content + relative time.
   Different from .timeline (vertical line + larger dots) — this is
   purely tabular, optimised for short feed cards. ─── */
.feed-row     { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border) }
.feed-row:last-child  { border-bottom: 0 }
.feed-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  margin-top: 6px;
  flex-shrink: 0;
}
.feed-dot.success { background: var(--success) }
.feed-dot.danger  { background: var(--danger) }
.feed-dot.warning { background: var(--warning) }
.feed-dot.primary { background: var(--primary) }
.feed-dot.violet  { background: var(--violet) }

/* ─── ACTION LINK: small card-style related links used on ticket detail
   and similar pages — row with icon/avatar on the left, label + meta in
   the middle, chevron on the right. ─── */
.action-link {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  transition: all .12s;
  background: var(--surface);
}
.action-link:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* ═════════════════════════════════════════
   SUBTOTAL CARD (sales-report PCC × CCY breakdown)
   Static grid table that sits under the records list. Tabulator would
   be overkill here — it's a fixed 5-column ledger that never needs to
   be filtered or sorted, just rendered.
   ════════════════════════════════════════ */
.subtotal-card { background: var(--surface-3); border-top: 1px solid var(--border) }
.subtotal-row {
  display: grid;
  grid-template-columns: 90px 70px 80px 1fr 1fr;
  gap: 8px;
  padding: 8px var(--table-edge-x);
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.subtotal-row:last-child  { border-bottom: none }
.subtotal-row .text-right { text-align: right }
.subtotal-row.col-head    {
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ════════════════════════════════════════
   SYNC BAR (sabre-report — "last synced" status line above table)
   Lives between section-head and the table. Greyer background than
   the table to make it read as metadata, not data.
   ════════════════════════════════════════ */
.sync-bar {
  padding: 10px var(--table-edge-x);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-2);
}

/* ════════════════════════════════════════
   SCOPE BANNER (shown when widget is filtered to one bridge)
   ════════════════════════════════════════ */
.scope-banner {
  padding: 10px var(--table-edge-x);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--primary-soft-2);
  font-size: 12px;
  color: var(--primary-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile section-head: let toolbar contents wrap to a second row when they
   don't fit. Without flex-wrap they overflow horizontally and clip. */
@media (max-width: 700px) {
  .section-head    { padding: 9px 12px; flex-wrap: wrap; row-gap: 8px }
  .section-head h3 { font-size: 12px }
  .section-head > .row,
  .section-head > .row-between { flex-wrap: wrap; row-gap: 6px }
}