/* ══════════════════════════════════════════════════════════════════════════
   Shared components on design tokens (css/tokens.css). Loaded LAST among the
   app stylesheets so it wins over legacy component rules of equal
   specificity. Inline style="" attributes still win — those are migrated
   page by page (Step 4).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Theme pill (js/theme.js) — modelled on truliumwealth.com's theme button:
   a rounded outline pill with the CURRENT mode's icon and a small uppercase
   label. The 44px button is the tap target; the visible pill sits inside. ── */
.theme-pill {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  min-height: var(--ds-tap); min-width: var(--ds-tap);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ds-muted); font: inherit; flex-shrink: 0;
}
.theme-pill-face {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-pill);
  font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500;
  letter-spacing: var(--ds-label-tracking); text-transform: uppercase; line-height: 1;
  transition: border-color .15s, background-color .15s, color .15s;
}
.theme-pill:hover .theme-pill-face { border-color: var(--ds-text); background: var(--ds-surface); color: var(--ds-text); }
.theme-pill:focus-visible { outline: none; }
.theme-pill:focus-visible .theme-pill-face { box-shadow: var(--ds-focus-ring); }
.theme-pill-ico { width: 16px; height: 16px; flex-shrink: 0; }
:root[data-theme="light"] .theme-pill .when-dark,
:root:not([data-theme="light"]) .theme-pill .when-light { display: none; }
/* Phones: icon-only pill in the crowded top bar (Settings keeps the label). */
@media (max-width: 430px) {
  .tb-right .theme-pill-label { display: none; }
  .tb-right .theme-pill-face { padding: 0 9px; }
}

/* ══ Step 3 — shared components on tokens (2026-10-11) ════════════════════════
   Monotone UI: primary buttons are text-coloured, the blue accent is for links
   and focus only, green/red are for P&L numbers (status dots excepted). Every
   control is at least 44px tall or gets a transparent 44px hit area; nothing in
   these components is smaller than 12px. */

/* ── Focus + links ── */
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
a:not([class]) { color: var(--ds-accent); }

/* ── Buttons ── */
.btn-primary, .af-btn-primary, .btn-apply, .btn-save-settings, .deploy-btn.primary,
.btn-modal-confirm, .btn-card-primary {
  min-height: var(--ds-tap); padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ds-text); color: var(--ds-on-primary);
  border: 1px solid var(--ds-text); border-radius: var(--ds-r-md);
  font-family: var(--ds-font-sans); font-size: var(--ds-fs-14); font-weight: 500;
  box-shadow: none; transition: opacity .15s, background-color .15s;
}
.btn-primary:hover, .af-btn-primary:hover, .btn-apply:hover, .btn-save-settings:hover,
.deploy-btn.primary:hover, .btn-modal-confirm:hover, .btn-card-primary:hover {
  background: var(--ds-text); color: var(--ds-on-primary); opacity: .86; transform: none; box-shadow: none;
}
.btn-primary:disabled, .af-btn-primary:disabled, .btn-apply:disabled, .btn-save-settings:disabled,
.deploy-btn.primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { display: flex; }   /* keeps its full-width auth-form layout */

.af-btn-outline, .btn-manage-saved, .deploy-btn.secondary, .btn-modal-cancel,
.si-action-btn, .btn-card:not(.btn-card-primary) {
  min-height: var(--ds-tap); padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ds-text);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md);
  font-family: var(--ds-font-sans); font-size: var(--ds-fs-14); font-weight: 500;
  box-shadow: none; transition: background-color .15s, border-color .15s;
}
.af-btn-outline:hover, .btn-manage-saved:hover, .deploy-btn.secondary:hover, .btn-modal-cancel:hover,
.si-action-btn:hover, .btn-card:not(.btn-card-primary):hover {
  background: var(--ds-hover); border-color: var(--ds-text); color: var(--ds-text);
}

/* ── Inputs ── */
.bt-input, .s-input, .inline-input, .auth-input, .csr-input, .time-input, .ticker-input,
.pin-input, .acct-card-nick, select.s-input, textarea.inline-input {
  min-height: var(--ds-tap);
  background: var(--ds-bg); color: var(--ds-text);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-sm);
  font-size: max(var(--ds-fs-14), 1em);
}
textarea.inline-input { min-height: 88px; }
.bt-input:focus, .s-input:focus, .inline-input:focus, .auth-input:focus, .csr-input:focus,
.time-input:focus, .ticker-input:focus, .pin-input:focus, .acct-card-nick:focus {
  border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); outline: none;
}
.bt-input.bt-input-invalid { border-color: var(--ds-danger); background: var(--ds-danger-soft); }
.bt-input::placeholder, .s-input::placeholder, .inline-input::placeholder, .auth-input::placeholder { color: var(--ds-label); }

/* ── Cards ── */
.card, .af-card, .dash-metric-card, .metric-card, .stat-card, .modal-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-shadow-sm);
}

/* ── Tables: uppercase Inter tabular headers, 13px cells, numbers in Inter tabular ── */
th, .bt-table th, .tbl-scroll th, .card th {
  font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ds-label-tracking); color: var(--ds-label);
  background: var(--ds-surface); border-bottom: 1px solid var(--ds-border);   /* opaque: sticky headers */
}
.bt-table td, .tbl-scroll td, .card td { font-size: max(var(--ds-fs-12), 1em); border-bottom-color: var(--ds-border); }
.bt-table td { font-size: var(--ds-fs-13); }
.bt-table tr:hover td, .tbl-scroll tr:hover td { background: var(--ds-hover); }

/* ── Badges + small pills: neutral outline, Inter tabular caps, 12px ── */
.badge, .paper-badge, .fleet-badge, .dash-bot-type-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ds-label-tracking); line-height: 1;
  color: var(--ds-muted); background: transparent;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-pill);
}
/* Order side / type / status are labels, not P&L: neutral (Alex: green/red = P&L only). */
.badge.call, .badge.BUY, .badge.put, .badge.SELL, .badge.FILLED, .badge.new,
.badge.buy, .badge.sell, .badge.filled { color: var(--ds-muted); background: transparent; border-color: var(--ds-border-strong); }

/* ── Segmented controls, range chips, tabs: monotone, 12px+, 44px hit area ── */
.dash-range-btn, .chart-range-btn, .log-range-btn, .log-filter, .tb-mode-btn, .bt-toggle-opt,
.bt-date-pill, .bt-seg-tab, .filter-btn, .tb-pill {
  position: relative; font-size: max(var(--ds-fs-12), 1em);
}
.dash-range-btn::before, .chart-range-btn::before, .log-range-btn::before, .log-filter::before,
.tb-mode-btn::before, .bt-toggle-opt::before, .bt-date-pill::before, .bt-seg-tab::before,
.filter-btn::before, .tb-pill::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 100%; height: max(100%, var(--ds-tap)); transform: translateY(-50%);
}
.dash-range-btn, .chart-range-btn, .log-range-btn { font-family: var(--ds-font-num); }
.dash-range-btn.active, .chart-range-btn.active, .log-range-btn.active, .log-filter.active,
.tb-mode-btn.active, .bt-toggle-opt.active, .bt-date-pill.active, .bt-seg-tab.active, .filter-btn.active {
  background: var(--ds-text); color: var(--ds-on-primary); border-color: var(--ds-text);
}
.bt-date-pill.active + .bt-date-pill { border-left-color: var(--ds-text); }
.settings-tab, .strat-tab {
  min-height: var(--ds-tap); display: inline-flex; align-items: center;
  font-size: var(--ds-fs-14); color: var(--ds-muted);
}
.settings-tab.active, .strat-tab.active { color: var(--ds-text); border-bottom-color: var(--ds-text); font-weight: 500; }

/* ── Switches: monotone track, 44px hit area ── */
.toggle { position: relative; background: var(--ds-muted); }   /* off track: visible on any surface */
.toggle.on { background: var(--ds-text); }
.toggle::after { background: var(--ds-surface); }
.toggle.on::after { background: var(--ds-bg); }
.toggle::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--ds-tap)); height: max(100%, var(--ds-tap)); transform: translate(-50%, -50%);
}

/* ── Status dots: green = running/on, grey = off, amber = warn, red = error ── */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green  { background: var(--ds-status-on); }
.dot-red    { background: var(--ds-danger); }
.dot-gold   { background: var(--ds-warn); }
.dot-muted  { background: var(--ds-status-off); }
.dot-blue   { background: var(--ds-accent); }

/* ── Modals ── */
.modal-overlay { background: var(--ds-overlay); }
.modal, .deploy-wizard-modal {
  background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-lg);
}
.modal-title { font-size: var(--ds-fs-16); font-weight: 600; color: var(--ds-text); }
.modal-sub, .modal-msg { font-size: max(var(--ds-fs-13), 1em); color: var(--ds-muted); }

/* ── Sidebar ── */
.sidebar, .sidebar-v2 { background: var(--ds-sidebar); border-right: 1px solid var(--ds-border); }
.sb-item {
  min-height: var(--ds-tap); font-size: var(--ds-fs-14); color: var(--ds-muted); border-radius: var(--ds-r-sm);
}
.sb-item:hover { background: var(--ds-hover); color: var(--ds-text); }
.sb-item.active { background: var(--ds-hover); color: var(--ds-text); font-weight: 500; }
.sb-section-label {
  font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500;
  letter-spacing: var(--ds-label-tracking); color: var(--ds-label);
}

/* ── Top bar ── */
.topbar { background: var(--ds-bg); border-bottom: 1px solid var(--ds-border); }
.view-topbar { background: var(--ds-bg); border-bottom: 1px solid var(--ds-border); }
.tb-pill { min-height: 32px; font-size: var(--ds-fs-12); background: transparent; border-color: var(--ds-border); color: var(--ds-text); }
.tb-mode-toggle { border-color: var(--ds-border); }
.tb-mode-btn { font-size: var(--ds-fs-12); min-height: 28px; color: var(--ds-muted); }
.hamburger, .kb-drawer-close, .view-back, .sb-close { min-width: var(--ds-tap); min-height: var(--ds-tap); }

/* Plan badge + Upgrade call-to-action in the top bar (were inline emerald/white). */
.tb-plan-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-right: 6px;
  font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ds-label-tracking);
  color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-pill); cursor: default;
}
.tb-cta {
  position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin-right: 8px;
  font-family: var(--ds-font-sans); font-size: var(--ds-fs-12); font-weight: 600;
  color: var(--ds-on-primary); background: var(--ds-text); border: 1px solid var(--ds-text);
  border-radius: var(--ds-r-pill); cursor: pointer;
}
.tb-cta:hover { opacity: .86; }
.tb-cta::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: max(100%, var(--ds-tap)); transform: translateY(-50%); }

/* Wrapped rows of compact chips (~27px tall) need >= 44 - 27 = 17px between rows,
   or the 44px hit areas of neighbouring rows overlap (Logs toolbar at <=768px). */
.log-toolbar { row-gap: 18px; margin-bottom: 16px; }
.log-range-btns, .log-filters { row-gap: 18px; }
/* Segmented groups clip their children (rounded corners), so a hit-area overlay is
   cut off: the options themselves are 44px tall. */
.bt-toggle-opt { min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }
.strat-tab .lock-icon { font-size: var(--ds-fs-12); }

/* Logo marks: monotone (white glyph on the light accent was unreadable in dark). */
.sb-logo-icon, .tb-logo-icon { background: var(--ds-text); color: var(--ds-on-primary); box-shadow: none; }
.sb-logo-icon svg, .tb-logo-icon svg { stroke: currentColor; }

/* Asset-class tabs (Stocks / Options, Credit Spreads, Crypto, Futures) are wider at
   14px; on narrow screens the row scrolls inside itself instead of the page. */
.strat-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strat-tabs::-webkit-scrollbar { display: none; }
.strat-tab { flex-shrink: 0; white-space: nowrap; }

/* Banners are left alone (Alex, 2026-10-12): the stop-protection banner keeps the
   red it had before the tokens (banners.css reads --red, which is now the brighter
   P&L red; white text on it would drop below 4.5:1). */
#protection-banner { background: #DC2626; }

/* The lockout modal is left alone (Alex, 2026-10-12): it keeps its original light
   look in both themes. lockout.css reads these legacy names (its tier cards and the
   discount input are hard-coded white), so pin them to the values it was built with. */
#lockout-modal-overlay {
  --surface: #FFFFFF; --border: #E5E3DF; --text-primary: #1A1A1A; --text-muted: #64748B;
  --accent: #059669; --green: #16A34A; --red: #DC2626;
  color-scheme: light;
}