/* ─── Options Alerts page + modal ─────────────────────────────── */
/* Admin-only stylesheet. Pushes to this file do NOT bump the public
   /api/version timestamp (see version.go adminOnlyWebFiles) so the
   "new version available" banner stays quiet for non-admin users. */

.oa-list-wrap, .oa-fires-wrap { padding: 8px 16px; }

/* ── Chip palette — fixed colors matching the cash-alerts page ──
   Hardcoded (not theme-aware) so the chip semantics stay consistent
   between Dark / Blue / Light themes and across the trade + options
   alerts surfaces. Tailwind-style hues with rgba backgrounds that
   read well on both light and dark card backgrounds. */
:root {
  --oa-blue:   #2563eb;
  --oa-blue-bg: rgba(37, 99, 235, 0.12);
  --oa-gray:   #6b7280;
  --oa-gray-bg: rgba(107, 114, 128, 0.14);
  --oa-orange: #d97706;
  --oa-orange-bg: rgba(217, 119, 6, 0.14);
  --oa-purple: #9333ea;
  --oa-purple-bg: rgba(147, 51, 234, 0.14);
  --oa-red:    #dc2626;
  --oa-red-bg:    rgba(220, 38, 38, 0.12);
  --oa-red-border: rgba(220, 38, 38, 0.45);
  --oa-green:  #059669;
  --oa-green-bg: rgba(5, 150, 105, 0.14);
}

/* ── CONFIG / LOG tab strip — pill-style active tab ────────── */
.oa-tabs {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.oa-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.oa-tab:hover { color: var(--text); }
.oa-tab-active {
  background: var(--oa-blue);
  color: #fff;
  border-color: var(--oa-blue);
}
.oa-tab-active .oa-tab-count { background: rgba(255,255,255,.92); color: var(--oa-blue); }
.oa-tab-count {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  background: var(--border); color: var(--muted);
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
  text-align: center; line-height: 1.3;
}
.oa-tabs-spacer { flex: 1 1 auto; }

/* Quota-full state — the X/20 badge turns red-tinted when the user
   has hit the active-alerts ceiling, so it visually echoes the
   greyed-out "+ New alert" button next to it. */
.oa-tab-count.oa-quota-full {
  background: color-mix(in srgb, var(--oa-red, #dc2626) 18%, transparent);
  color: var(--oa-red, #dc2626);
}
.oa-tab-active .oa-tab-count.oa-quota-full {
  background: rgba(255,255,255,.92);
  color: var(--oa-red, #dc2626);
}

/* Disabled primary button (used by "+ New alert" when at quota
   ceiling). Native disabled attr is also set so click handlers
   no-op; this is the visual half. */
.oa-btn-primary.oa-btn-disabled,
.oa-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.oa-btn-primary.oa-btn-disabled:hover,
.oa-btn-primary:disabled:hover {
  filter: grayscale(0.4); /* defeat the brightness(.92) hover */
}

/* ── Split layout — wide screens show both Alerts + Logs panes
 *    side-by-side; narrow screens fall back to the tab-toggled view. */
.oa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 16px;
}
/* When one pane is collapsed, the other expands to take more width.
 * The collapsed pane shrinks to fit its header (auto width). */
.oa-split.oa-config-collapsed { grid-template-columns: auto 1fr; }
.oa-split.oa-log-collapsed    { grid-template-columns: 1fr auto; }
.oa-split.oa-both-collapsed   { grid-template-columns: auto auto; }

.oa-split-pane {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.oa-split-pane-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.oa-split-pane-title {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.oa-split-pane-spacer { flex: 1 1 auto; }
.oa-pane-collapse {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px; line-height: 1.4;
  cursor: pointer;
  min-width: 24px;
}
.oa-pane-collapse:hover { color: var(--text); border-color: var(--accent); }
/* Collapsed state — body hidden, header still visible. Collapse button
 * flips to + so user knows to click again to expand. */
.oa-split-pane.oa-collapsed > .oa-list-wrap,
.oa-split-pane.oa-collapsed > .oa-fires-wrap {
  display: none;
}
.oa-split-pane.oa-collapsed .oa-pane-collapse { color: var(--accent); }

/* WIDE viewports — hide the tab buttons (CONFIG / LOG) since both
 * panes are visible. The .hidden class is also overridden so the
 * LOG pane shows even if tab JS toggled it off before the resize.
 *
 * Each pane gets its OWN vertical scrollbar so the user can browse
 * a long alerts list without losing sight of recent fires (and vice
 * versa). Math: 100vh − topbar(57) − page-tab-row(42) − alerts
 * tab strip(~50) − a 10px safety margin = ~159px. The favbar may
 * add more at the bottom (set per-page via --favbar-h). */
@media (min-width: 1101px) {
  [data-page="alerts"] .oa-tabs .oa-tab { display: none; }
  [data-page="alerts"] .oa-list-wrap.hidden,
  [data-page="alerts"] .oa-fires-wrap.hidden { display: block !important; }

  .oa-split {
    height: calc(100vh - 160px - var(--favbar-h, 0px));
    min-height: 320px; /* don't collapse so far that scroll handles vanish */
  }
  /* Each pane stretches to the split height; its body is the scroll
     surface. min-height:0 is the standard flex/grid trick that lets
     an overflowing child shrink below its intrinsic content height. */
  .oa-split-pane {
    height: 100%;
    min-height: 0;
  }
  .oa-split-pane > .oa-list-wrap,
  .oa-split-pane > .oa-fires-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Subtler scrollbars so they don't visually compete with the cards. */
  .oa-split-pane > .oa-list-wrap::-webkit-scrollbar,
  .oa-split-pane > .oa-fires-wrap::-webkit-scrollbar { width: 8px; }
  .oa-split-pane > .oa-list-wrap::-webkit-scrollbar-thumb,
  .oa-split-pane > .oa-fires-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 4px;
  }
  .oa-split-pane > .oa-list-wrap::-webkit-scrollbar-thumb:hover,
  .oa-split-pane > .oa-fires-wrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

/* NARROW viewports — hide the per-pane headers (the tab strip
 * controls visibility instead) and let the existing tab toggle JS
 * use .hidden on the wraps as before. */
@media (max-width: 1100px) {
  .oa-split-pane-hd { display: none; }
  .oa-split {
    display: block;
    padding: 0;
    grid-template-columns: none !important;
  }
  .oa-split-pane {
    background: transparent;
    border: 0;
    border-radius: 0;
  }
}

/* ── Alert cards ──────────────────────────────────────────── */
#oa-list-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0;
}
.oa-empty {
  padding: 24px; text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
}
.oa-alert-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.oa-alert-card:hover {
  border-color: color-mix(in srgb, var(--oa-blue) 50%, var(--border));
}
.oa-alert-card-off { opacity: 0.65; }
.oa-alert-card-fired {
  /* very subtle left accent for "this fired recently" cues */
  box-shadow: inset 3px 0 0 var(--oa-blue);
}
.oa-alert-card-expired {
  border-color: var(--oa-red-border);
  box-shadow: inset 3px 0 0 var(--oa-red);
}

.oa-alert-cb { display: flex; align-items: center; padding: 0; }
.oa-alert-cb input[type=checkbox] {
  accent-color: var(--oa-blue);
  width: 15px; height: 15px;
  cursor: pointer;
}

.oa-alert-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oa-alert-line1 {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
/* Alert NAME leads line 1 — bold uppercase so it reads as the
   card's title at a glance. */
.oa-alert-name {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  font-size: 13.5px;
  letter-spacing: .04em;
}
/* Instrument identifier on line 2 — normal weight so it sits as
   context info, not as a competing title. */
.oa-alert-sym {
  font-weight: 400;
  color: var(--text);
  font-size: 13px;
  letter-spacing: .01em;
}
.oa-alert-op-icon {
  display: inline-flex; align-items: center;
  color: var(--oa-blue);
}
.oa-alert-thresh {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
}
.oa-alert-line2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: 12px;
}
.oa-alert-summary { flex: 0 1 auto; font-style: italic; }
.oa-alert-notifs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* "expires …" / "expired …" suffix on line 2. Muted by default; the
   .past variant goes red so the expired state stands out. */
.oa-alert-expires {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oa-alert-expires-past {
  color: var(--oa-red);
  font-weight: 600;
}

/* ── Chips on line 1 — fixed semantic colours ────────────── */
.oa-alert-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--oa-gray-bg);
  color: var(--oa-gray);
}
.oa-chip-scope   { background: var(--oa-blue-bg);   color: var(--oa-blue); }
.oa-chip-trigger {
  background: var(--oa-gray-bg); color: var(--oa-gray);
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px;
}
.oa-chip-order   { background: var(--oa-orange-bg); color: var(--oa-orange); }
.oa-chip-expired { background: var(--oa-red-bg);    color: var(--oa-red); }

/* ── Notification mini-chips on line 2 ────────────────────── */
.oa-alert-notif {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  border-radius: 4px;
  background: var(--oa-gray-bg);
  color: var(--oa-gray);
  text-transform: none;
}
.oa-chip-inapp { background: var(--oa-blue-bg);   color: var(--oa-blue); }
.oa-chip-toast { background: var(--oa-gray-bg);   color: var(--oa-gray); }
.oa-chip-sound { background: var(--oa-purple-bg); color: var(--oa-purple); }
.oa-chip-tg    { background: var(--oa-green-bg);  color: var(--oa-green); }
.oa-chip-web   { background: var(--oa-gray-bg);   color: var(--oa-gray); }

/* ── Right meta column ────────────────────────────────────── */
.oa-alert-meta {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.oa-alert-stats {
  font-size: 11.5px; color: var(--muted);
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.oa-stats-expired { color: var(--oa-red); }
.oa-alert-iconbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 5px;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.oa-alert-iconbtn:hover { color: var(--oa-blue); border-color: var(--oa-blue); }
.oa-alert-iconbtn-del:hover { color: var(--oa-red); border-color: var(--oa-red); }

/* ── LOG tab: legacy table (hidden by JS, kept for index.html parity) ─ */
.oa-fires { display: none; }

/* ── LOG tab: filter bar ─────────────────────────────────────────── */
/* Sticky to the top of the LOG scroll surface so the filter input
   stays visible while the user scrolls down through fires. */
.oa-fires-filterbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  padding: 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oa-fires-filter {
  flex: 1 1 auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.oa-fires-filter:focus { border-color: var(--accent, #2563eb); }
.oa-fires-filter::placeholder { color: var(--muted, #94a3b8); }

/* ── LOG tab: card-based fires (cash-alerts parity) ─────────────────
   Each fire is a horizontally laid-out card with an accent left
   border. Row 1 is the status bar (time + chips + ↗ + instrument +
   @ ₹ltp + notif chips). Row 2 is a muted italic summary. */
.oa-fires-cards {
  display: flex; flex-direction: column;
  gap: 8px; padding: 4px 0;
}
.oa-fire-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, var(--oa-blue, #2563eb));
  border-radius: 6px;
  padding: 10px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.oa-fire-card:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--panel));
}
.oa-fire-row1 {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--text);
}
.oa-fire-time {
  font-size: 12px; font-weight: 600;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.oa-fire-arrow {
  color: var(--accent, var(--oa-blue, #2563eb));
  font-size: 15px; font-weight: 700;
  line-height: 1;
  margin: 0 -2px;
}
.oa-fire-instr {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.oa-fire-at {
  color: var(--muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.oa-fire-at-prefix { margin-right: 1px; }
.oa-fire-at b {
  color: var(--text);
  font-weight: 700;
  margin-left: 2px;
}
/* Row 1 — TIME · MESSAGE (bold, sentence case) · notif chips (pushed right)
 *
 * font-weight: 700 makes it the unmistakable headline of the row.
 * ::first-letter forces the leading character uppercase even when the
 * user typed the message in lowercase ("straddle low" → "Straddle low"),
 * without disturbing mid-string acronyms (SENSEX / CE / LTP stay as-is). */
.oa-fire-message {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  text-transform: none;
}
.oa-fire-message::first-letter {
  text-transform: uppercase;
}
.oa-fire-notifs {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Row 2 — alert NAME (slightly bold) followed by the muted instrument
   + LTP + condition tail. Reads as the "what alert + what data"
   detail line under the headline message. */
.oa-fire-row2 {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  font-size: 12.5px;
  color: var(--muted, #94a3b8);
  line-height: 1.4;
}
/* Match the ALERT tab's .oa-alert-name styling — bold uppercase with a
   slight tracking so the user-given label reads as the row's title. */
.oa-fire-name {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.oa-fire-summary {
  font-style: italic;
}

/* ── Admin-only capacity warning popup ─────────────────────────────
   Pushed via SSE when active-alert count crosses 500/1000/2000/5000.
   Pinned top-center, amber colour scheme, persistent (no auto-fade).
   Higher z-index than fire toasts + modals so it always wins. */
.oa-capacity-popup {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  max-width: 520px;
  width: calc(100vw - 40px);
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  border: 2px solid #d97706;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(217, 119, 6, 0.4),
              0 0 0 4px rgba(251, 191, 36, 0.18);
  font-size: 13.5px;
  animation: oa-capacity-pulse 2.2s ease-in-out infinite,
             oa-capacity-slide 0.3s ease-out;
}
@keyframes oa-capacity-pulse {
  0%, 100% { box-shadow: 0 12px 40px rgba(217, 119, 6, 0.4),
                          0 0 0 4px rgba(251, 191, 36, 0.18); }
  50%      { box-shadow: 0 12px 40px rgba(217, 119, 6, 0.55),
                          0 0 0 10px rgba(251, 191, 36, 0.06); }
}
@keyframes oa-capacity-slide {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.oa-capacity-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(217, 119, 6, 0.35);
  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px 8px 0 0;
}
.oa-capacity-icon { font-size: 18px; }
.oa-capacity-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #78350f;
  flex: 1 1 auto;
}
.oa-capacity-x {
  background: transparent; border: 0;
  color: #78350f;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-weight: 700;
}
.oa-capacity-x:hover { color: #451a03; }
.oa-capacity-body { padding: 12px 16px 14px; }
.oa-capacity-msg {
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}
.oa-capacity-phase {
  font-size: 12px;
  font-style: italic;
  color: #92400e;
  background: rgba(255, 255, 255, 0.4);
  padding: 6px 10px;
  border-radius: 5px;
  border-left: 3px solid #d97706;
}
.oa-capacity-foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.oa-capacity-ack {
  background: #d97706;
  color: #ffffff;
  border: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(120, 53, 15, 0.3);
  transition: background 0.12s, transform 0.06s, box-shadow 0.12s;
}
.oa-capacity-ack:hover {
  background: #b45309;
  box-shadow: 0 3px 8px rgba(120, 53, 15, 0.4);
}
.oa-capacity-ack:active { transform: translateY(1px); }
.oa-capacity-ack:focus {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* ── Modal v2: non-blocking + draggable (TradingView-style) ─── */
/* The alerts modal is a FLOATING panel — no dim backdrop, no
   click-blocker. The chart behind stays fully interactive; the
   user can drag the modal out of the way by the header. */
#oa-modal.instr-modal { pointer-events: none; }
#oa-modal .instr-modal-bg {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
.oa-modal-card {
  width: min(780px, calc(100vw - 40px));
  height: auto !important;        /* override .instr-modal-card fixed height */
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  pointer-events: auto;            /* card itself catches clicks/inputs */
  /* Stronger shadow + outline since there's no backdrop to separate
     the modal from the page behind it. */
  box-shadow:
    0 24px 56px rgba(0,0,0,0.55),
    0 0 0 1px var(--border);
}
/* Header doubles as the drag handle. Standard "grab" cursor; the
   close button (×) keeps its own pointer cursor. */
#oa-modal .instr-modal-head {
  cursor: move;
  user-select: none;
  /* Stop iOS/iPad touch from triggering selection on long-press. */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#oa-modal .instr-modal-head .oa-modal-x { cursor: pointer; }
/* While actively dragging — visual feedback + faster cursor. */
.oa-modal-card.oa-dragging { cursor: grabbing; }
.oa-modal-card.oa-dragging .instr-modal-head { cursor: grabbing; }
.oa-modal-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.oa-modal-x:hover { color: var(--text); }

/* overflow-y: auto is a fallback for very short windows — on a 900px+
   tall window the whole form fits without scroll. The body fills the
   card so the footer stays pinned. */
.oa-form {
  padding: 10px 18px 4px; overflow-y: auto; overflow-x: hidden;
  flex: 1 1 auto; min-height: 0;
}

/* Each labelled row: 110px label column + flexible control column.
   min-width: 0 on the control lets selects/inputs shrink under their
   intrinsic size when wrapped — kills the horizontal scrollbar. */
.oa-frow {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  align-items: center; gap: 12px;
  padding: 6px 0;
}
.oa-flbl {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}
.oa-fctl { width: 100%; min-width: 0; }
.oa-fctl-row { display: flex; gap: 8px; min-width: 0; }
.oa-fctl-row > * { min-width: 0; }
.oa-grow { flex: 1 1 auto; min-width: 0; }
.oa-side-sel { width: 130px; flex: 0 0 auto; }

.oa-input {
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
/* Default to 100% width ONLY when the input sits directly inside the
   row control container — flex rows (.oa-fctl-row) set explicit widths
   on their children, so a global width:100% breaks them. */
.oa-fctl > .oa-input { width: 100%; }
.oa-fctl-row > .oa-input { width: auto; }
/* Conditions / legs builders nest .oa-input inside .oa-cond / .oa-leg
   flex containers — they manage sizing via their own flex-basis. */
.oa-cond > .oa-input, .oa-leg > .oa-input { width: auto; }
.oa-input:focus { outline: none; border-color: var(--accent); }
.oa-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* SYMBOL + EXPIRY share one row — search input takes ~60% width,
   expiry select takes ~40%. The search-wrap needs explicit flex
   sizing because it carries the absolute-positioned results
   dropdown; without the flex hint it'd collapse to placeholder width. */
.oa-sym-exp-row { gap: 8px; }
.oa-sym-search-wrap { flex: 3 1 0; min-width: 0; position: relative; }
.oa-sym-search-wrap .oa-input { width: 100%; }
.oa-expiry-sel { flex: 2 1 0; min-width: 0; }

/* EXPIRATION row — kind dropdown ~30%, datetime input fills the
   rest. Disabled state on the datetime field for the "Never" kind. */
.oa-expiration-kind { flex: 0 0 140px; min-width: 0; }
.oa-expiration-at   { flex: 1 1 0; min-width: 0; font-family: inherit; }
.oa-expiration-at:disabled {
  opacity: 0.55; cursor: not-allowed;
}

/* Read-only INSTRUMENT badge — shows the symbol+expiry the modal
   inherits from the top instrument bar. No picker here; the user
   changes the symbol/expiry via the chain page's top bar instead. */
.oa-instrument-badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oa-inst-pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--panel-2, #0b1220);
  border: 1px solid var(--border, #334155);
  border-radius: 5px;
  font-weight: 600; font-size: 13px;
  color: var(--text, #f1f5f9);
  letter-spacing: .02em;
}
.oa-inst-sep { color: var(--muted, #94a3b8); font-weight: 700; }
.oa-inst-hint { margin-left: 4px; font-style: italic; }

/* Symbol search-dropdown */
.oa-search-wrap { position: relative; }
.oa-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 10;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
}
.oa-search-item {
  padding: 6px 10px; cursor: pointer; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.oa-search-item:last-child { border-bottom: 0; }
.oa-search-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.oa-search-empty { padding: 10px; text-align: center; color: var(--muted); }

/* Conditions builder — each condition has TWO visual rows + an
   italic help line:
     Row 1  (.oa-cond-line1) — index · param · op · delete
     Row 2  (.oa-cond-line2) — shape-specific value inputs
     Row 3  (.oa-cond-help)  — italic op description
   Two-row layout keeps the value inputs predictable instead of
   wrapping awkwardly under the dropdowns. */
.oa-cond-wrap {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.oa-cond-line1, .oa-cond-line2 {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.oa-cond-line1 .oa-cond-sel {
  flex: 1 1 0; min-width: 0;
  padding: 6px 8px; font-size: 12px;
}

/* ── Custom op dropdown (replaces native <select>) ────────────── */
/* Button trigger looks like .oa-input but holds an SVG icon + label
   + ▾ chevron. The popup menu floats absolutely below it with the
   same SVG glyph alongside each option row. */
.oa-op-dd { position: relative; flex: 1 1 0; min-width: 0; }
.oa-op-dd-trigger {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.oa-op-dd-trigger:hover { border-color: var(--accent); }
.oa-op-dd-open .oa-op-dd-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.oa-op-dd-icon {
  flex: 0 0 18px;
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.oa-op-dd-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-op-dd-chev {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px; line-height: 1;
  transition: transform .12s ease;
}
.oa-op-dd-open .oa-op-dd-chev { transform: rotate(180deg); }

.oa-op-dd-menu {
  position: absolute; z-index: 10005;
  top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 320px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  padding: 4px 0;
}
.oa-op-dd-menu.hidden { display: none; }
.oa-op-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  font-size: 13px; color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.oa-op-dd-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.oa-op-dd-item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-weight: 600;
}
.oa-op-dd-item .oa-op-dd-icon { color: var(--accent); }
.oa-cond-del { margin-left: auto; flex: 0 0 auto; }
.oa-cond-line2 { margin-top: 8px; flex-wrap: wrap; padding-left: 30px; }
.oa-cond-help {
  color: var(--muted);
}
.oa-cond-line2 .oa-cond-val { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 12px; }

.oa-leg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px; border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 6px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.oa-cond-idx, .oa-leg-idx {
  flex: 0 0 24px; font-variant-numeric: tabular-nums;
}
.oa-cond-val-narrow  { flex: 0 0 64px !important; padding: 6px 8px; font-size: 12px; text-align: center; }
.oa-cond-val-xnarrow { flex: 0 0 48px !important; padding: 6px 8px; font-size: 12px; text-align: center; }
.oa-cond-inline { flex: 0 0 auto; }
.oa-cond-help {
  margin: 6px 0 0 30px;
  font-style: italic;
  line-height: 1.4;
}

/* ₹ / % unit toggle for moving conditions — segmented two-button
   pill, exact behaviour of trade's ami-unit-toggle. */
.oa-unit-seg {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; flex: 0 0 auto;
}
.oa-unit-btn {
  padding: 5px 9px; font-size: 12px; line-height: 1;
  background: transparent; color: var(--text);
  border: 0; cursor: pointer;
}
.oa-unit-btn + .oa-unit-btn { border-left: 1px solid var(--border); }
.oa-unit-btn.active {
  background: var(--accent); color: var(--panel);
}
.oa-leg-sel    { flex: 0 0 90px;  padding: 6px 8px; font-size: 12px; }
.oa-leg-ratio  { flex: 0 0 56px;  padding: 6px 8px; font-size: 12px; text-align: center; }
.oa-leg-exp    { flex: 1 1 120px; padding: 6px 8px; font-size: 12px; min-width: 0; }
.oa-leg-strike { flex: 0 0 90px;  padding: 6px 8px; font-size: 12px; }
.oa-leg-side   { flex: 0 0 70px;  padding: 6px 8px; font-size: 12px; }
.oa-leg-sym    { flex: 1 1 110px; padding: 6px 8px; font-size: 12px; min-width: 0; }

.oa-cond-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.oa-mini-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 4px 10px; font-size: 11.5px;
  cursor: pointer;
}
.oa-mini-btn:hover { background: var(--border); }
.oa-mini-seg .seg-btn { padding: 4px 10px; font-size: 11px; }

/* Notifications section */
.oa-section-head {
  margin: 10px 0 4px; padding: 8px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--border);
}
.oa-notif { display: flex; flex-direction: column; gap: 6px; }
.oa-cb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.oa-cb input[type=checkbox] { accent-color: var(--accent); }
.oa-cb-bold { font-weight: 600; }
/* Disabled checkbox row (e.g. Place an Order — coming soon). */
.oa-cb-disabled {
  cursor: not-allowed !important;
  opacity: 0.55;
}
.oa-cb-disabled input[type=checkbox] { cursor: not-allowed; }
.oa-place-order-row {
  display: flex; align-items: center; gap: 8px;
}
.oa-coming-soon {
  font-size: 11px; font-weight: 500;
  color: var(--muted, #94a3b8);
  font-style: italic;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px dashed var(--border);
  border-radius: 999px;
}
/* Sound row — checkbox + inline tone/repeat selectors on the same line. */
.oa-cb-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.oa-mini-input {
  width: auto !important; padding: 4px 8px; font-size: 12px;
}
/* Nested detail rows revealed when a checkbox toggles ON. */
.oa-notif-detail {
  margin: 4px 0 4px 24px; padding: 8px 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.oa-notif-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.oa-notif-row .oa-input, .oa-notif-row .oa-textarea {
  flex: 1 1 0; min-width: 0;
}
/* For a multi-line control (textarea) in a notif-row, anchor the
   label to the TOP of the row instead of vertically centring it —
   otherwise the "Body" text floats halfway down a 3-row textarea
   and looks disconnected from its field. The textarea itself still
   flexes to fill the input column, matching the URL input above. */
.oa-notif-row-top {
  align-items: flex-start;
}
.oa-notif-row-top .oa-detail-lbl {
  padding-top: 8px;
}
.oa-notif-row .oa-textarea {
  /* Allow vertical resize for power-users with big payloads. */
  resize: vertical;
  min-height: 70px;
}
.oa-detail-lbl {
  flex: 0 0 90px; font-size: 12px;
  color: var(--text);
}
.oa-input-narrow { max-width: 220px; }

/* Bot-token input — rendered as text (not type=password) so Chrome's
   password manager doesn't offer saved email/password suggestions on
   focus, but visually masked with bullets so it still LOOKS like a
   secret. text-security is non-standard CSS; -webkit-text-security
   is supported by Chromium-based browsers (Chrome / Edge / Brave /
   Opera) — that's the entire user base of this app. Firefox would
   show the raw token; we accept that trade-off because the modal is
   admin-only on a single-user session. */
.oa-mask-token {
  -webkit-text-security: disc;
  text-security: disc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

/* Bot-token input wrapper — relative container so the eye-toggle
   button can float over the input's right padding. The eye icon
   toggles .oa-mask-token on/off so the user can verify what they
   pasted is correct. */
.oa-tok-wrap {
  flex: 1 1 0; min-width: 0;
  position: relative;
  display: flex; align-items: center;
}
.oa-tok-wrap .oa-input {
  flex: 1 1 0;
  width: 100%;
  padding-right: 36px;  /* room for the eye button */
}
.oa-tok-eye {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.oa-tok-eye:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.oa-help-link {
  font-size: 12.5px; color: var(--accent); cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
.oa-help-link:hover { border-bottom-style: solid; }

/* ── Telegram bot setup popup (nested above the alert modal) ──
   Uses the app's theme CSS variables (--panel, --text, --accent, …)
   so the popup re-skins automatically when the user switches between
   dark / blue / light themes from the topbar. Sized larger + brighter
   than the v1 — generous padding, full --text contrast for body, and
   a brand-blue --accent for links + step numbers. */
.oa-tg-help-popup {
  position: fixed; inset: 0; z-index: 10010;
  /* Higher than .instr-modal (9999) so we float above the alert modal. */
}
.oa-tg-help-popup.hidden { display: none; }
.oa-tg-help-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
.oa-tg-help-card {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.oa-tg-help-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.oa-tg-help-head h3 {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
}
.oa-tg-help-head .oa-modal-x {
  font-size: 24px; color: var(--text); opacity: .7;
}
.oa-tg-help-head .oa-modal-x:hover { opacity: 1; }
/* Body is the scrollable middle section */
.oa-tg-help-card { overflow-y: auto; }
.oa-tg-help-card > .oa-tg-section-title,
.oa-tg-help-card > .oa-tg-steps,
.oa-tg-help-card > p { padding-left: 22px; padding-right: 22px; }

.oa-tg-section-title {
  margin: 18px 0 4px;
  font-weight: 800; font-size: 13.5px;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: .08em;
}
.oa-tg-steps {
  margin: 8px 0 4px 0; padding-left: 30px;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--text);
}
.oa-tg-steps li {
  padding-left: 4px;
}
.oa-tg-steps li::marker {
  font-weight: 800; color: var(--accent);
  font-size: 14.5px;
}
.oa-tg-steps b { color: var(--text); font-weight: 700; }
.oa-tg-kbd {
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
  padding: 2px 7px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}

/* Inline "copy this exact text" pill — the user's clicking from the
   help popup into a Telegram conversation, so we want the relevant
   text to live next to a one-click Copy button instead of asking
   them to triple-click + Ctrl+C. */
.oa-tg-copyrow {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
}
.oa-tg-copy-btn {
  background: var(--accent);
  color: var(--panel);
  border: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-transform: uppercase;
}
.oa-tg-copy-btn:hover { filter: brightness(1.1); }
.oa-tg-copy-btn.oa-tg-copy-done {
  background: var(--green, #16a34a);
}
.oa-tg-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
.oa-tg-link:hover {
  border-bottom-style: solid;
}
.oa-tg-cta { margin: 8px 0 4px; }
.oa-tg-cta-btn {
  display: inline-block; padding: 9px 16px;
  background: var(--accent); color: var(--panel) !important;
  border-radius: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.oa-tg-cta-btn:hover {
  filter: brightness(1.1);
  text-decoration: none;
}
.oa-tg-cta-btn.oa-disabled {
  background: var(--border);
  color: var(--muted) !important;
  cursor: not-allowed; pointer-events: none;
  box-shadow: none;
}
.oa-tg-tip {
  margin: 10px 0 18px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  font-size: 14px; line-height: 1.55;
  color: var(--text);
}
/* Compact variant used at the top of the popup as a "reuse existing
   bot" hint — less padding so it doesn't dominate the layout, but
   the same accent-left bar so it still reads as a callout. */
.oa-tg-tip-inline {
  margin: 4px 0 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.oa-tg-help-foot {
  display: flex; justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.oa-tg-help-foot .oa-btn-primary {
  padding: 9px 22px; font-size: 14px;
}
.oa-hint {
  font-size: 11.5px; color: var(--muted, #94a3b8); font-style: italic;
  line-height: 1.5;
}
.oa-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
  padding: 0 5px; border-radius: 3px;
  font-size: 11px;
  white-space: nowrap;
  margin: 0 1px;
}
/* Inline hint variant — sits directly beneath a form control as
   a small explanatory note (e.g. "evaluated at every 1m bar close"
   below the TRIGGER select). Slightly less prominent than the
   block-style hints used in the webhook section. */
.oa-hint-inline {
  margin-top: 4px;
  font-size: 11.5px;
}
/* Bold Place-an-Order section header (matches AlertModal.jsx amg-section-hdr with am-check-bold). */
.oa-section-head-bold {
  border-top: 1px solid var(--border-soft, #1f2937);
  padding-top: 12px; margin-top: 10px;
  text-transform: none; letter-spacing: 0;
  font-size: 13px;
}

/* Dry-run panel */
.oa-test-panel {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border, #333);
  position: relative;
}
.oa-test-panel h4 { margin: 0 0 6px; font-size: 13px; }

/* Stale state — set when the user changes any form field after a
   Test Now run. Dims the panel and shows a "rerun" banner so the
   user doesn't mistake an outdated result for the current state.
   Cleared on the next successful dryRun(). */
.oa-test-panel.oa-test-stale > h4 { color: var(--muted); }
.oa-test-panel.oa-test-stale > #oa-f-test-body { opacity: 0.45; }
.oa-test-panel.oa-test-stale::before {
  content: '⚠ Stale — form has changed since this run. Click Test Now to refresh.';
  display: block;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--amber, #d97706) 16%, transparent);
  color: var(--amber, #d97706);
  border-left: 3px solid var(--amber, #d97706);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}
.oa-test-side {
  padding: 8px; border: 1px solid var(--border-soft, #1f2937);
  border-radius: 6px; margin-bottom: 6px;
}
.oa-test-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.oa-test-matched.good { color: var(--green, #15803d); font-weight: 700; }
.oa-test-matched.bad  { color: var(--red,   #b91c1c); font-weight: 700; }
.oa-test-conds { list-style: none; padding: 0; margin: 4px 0; }
.oa-test-conds li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; padding: 2px 0;
}
.oa-test-conds li.good { color: var(--green, #15803d); font-weight: 600; }
.oa-test-conds li.bad  { color: var(--red,   #b91c1c); font-weight: 600; }
.oa-test-values {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; word-break: break-all;
}
.oa-err-inline { color: var(--red, #b91c1c); font-size: 12px; padding: 6px 0; }

/* Footer */
.oa-modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.oa-err { color: var(--red); font-size: 12px; }
.oa-spacer { flex: 1 1 auto; }
.oa-btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px; font-size: 13px; border-radius: 6px; cursor: pointer;
}
.oa-btn-ghost:hover { background: var(--border); }
.oa-btn-primary {
  background: var(--green); border: 1px solid var(--green);
  color: #fff;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
}
.oa-btn-primary:hover { filter: brightness(.92); }

/* "?" help button in the alerts tab strip — circular ghost button. */
.oa-help-btn {
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.oa-help-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Help overlay ─────────────────────────────────────────────────
   Full-page scrollable doc opened from the "?" button. Uses the
   same theme tokens as the rest of the modal system so it adapts
   to dark / blue / light. Body has its own scroll surface; the
   page behind doesn't scroll while reading. */
.oa-help-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
  z-index: 100000;
  animation: oa-help-fade-in 0.15s ease-out;
}
@keyframes oa-help-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.oa-help-card {
  background: var(--panel, #1e293b);
  color: var(--text, #e2e8f0);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  width: min(880px, 100%);
  display: flex; flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
.oa-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #334155);
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent);
}
.oa-help-title {
  margin: 0;
  font-size: 17px; font-weight: 700;
  color: var(--text);
}
.oa-help-x {
  background: transparent; border: 0;
  color: var(--muted, #94a3b8);
  font-size: 22px; font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.oa-help-x:hover { color: var(--text); background: var(--border); }
.oa-help-body {
  padding: 18px 24px 28px;
  overflow-y: auto;
  font-size: 13.5px; line-height: 1.6;
}
.oa-help-body .oa-help-h {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.oa-help-body .oa-help-h:first-child { margin-top: 0; }
.oa-help-body .oa-help-h4 {
  font-size: 13.5px; font-weight: 700;
  color: var(--accent, #3b82f6);
  margin: 14px 0 6px;
}
.oa-help-body p { margin: 6px 0 10px; }
.oa-help-body ul, .oa-help-body ol {
  margin: 6px 0 12px; padding-left: 22px;
}
.oa-help-body li { margin: 3px 0; }
.oa-help-body code {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
}
.oa-help-body .oa-help-lede {
  font-size: 13.5px;
  color: var(--muted, #94a3b8);
  border-left: 3px solid var(--accent, #3b82f6);
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 5%, transparent);
  border-radius: 0 4px 4px 0;
  margin: 4px 0 18px;
}
.oa-help-body .oa-help-callout {
  border: 1px solid color-mix(in srgb, var(--amber, #d4a857) 50%, transparent);
  background: color-mix(in srgb, var(--amber, #d4a857) 8%, transparent);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0 12px;
  font-size: 13px;
}
.oa-help-body .oa-help-note {
  font-size: 12.5px;
  color: var(--muted, #94a3b8);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0 12px;
}
.oa-help-tbl {
  width: 100%; border-collapse: collapse;
  margin: 8px 0 14px;
  font-size: 12.5px;
}
.oa-help-tbl th, .oa-help-tbl td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.oa-help-tbl th {
  background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent);
  color: var(--text);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oa-help-tbl tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* ── Strike picker (ITM / ATM / OTM tagged, searchable) ──────────
   Ported from dashboard-new.css's .dn-sp-* rules so the create-alert
   modal matches the chain/charts pages' strike dropdown. Theme-aware
   via var(--panel), var(--accent), var(--green), var(--amber, fallback).
   The native <select> is kept in the DOM as the form-value carrier
   (.oa-hidden-native hides it visually but it still submits). */
.oa-hidden-native { display: none !important; }
.oa-strike-picker-host { flex: 1 1 auto; min-width: 0; }
.oa-sp { position: relative; display: block; width: 100%; }
.oa-sp-btn {
  background: var(--panel-2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; outline: none; width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.oa-sp-btn:hover { border-color: var(--accent); }
.oa-sp-val { color: var(--text); }
.oa-sp-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 3px;
  color: var(--muted, #94a3b8);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.oa-sp-tag.itm { color: var(--green, #15803d); background: color-mix(in srgb, var(--green, #15803d) 14%, transparent); }
.oa-sp-tag.atm { color: var(--amber, #d4a857); background: color-mix(in srgb, var(--amber, #d4a857) 18%, transparent); }
.oa-sp-tag.otm { color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }
.oa-sp-arrow { font-size: 10px; color: var(--muted, #94a3b8); margin-left: auto; }

.oa-sp-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 80;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 240px; max-height: 320px;
  display: flex; flex-direction: column;
}
/* Guard against display:flex overriding [hidden]. */
.oa-sp-pop[hidden],
.oa-sp-pop.oa-sp-closed { display: none !important; }
.oa-sp-input {
  background: var(--panel-2, var(--panel)); color: var(--text);
  border: 0; border-bottom: 1px solid var(--border);
  padding: 8px 12px; font: inherit; font-size: 12px;
  outline: none;
}
.oa-sp-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}
.oa-sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.oa-sp-row .oa-sp-row-v { color: var(--text); }
.oa-sp-row .oa-sp-row-tag {
  font-size: 10px; font-weight: 700;
  color: var(--muted, #94a3b8);
  padding: 1px 6px; border-radius: 3px;
}
.oa-sp-row.itm { background: color-mix(in srgb, var(--green, #15803d) 6%, transparent); }
.oa-sp-row.itm .oa-sp-row-tag { color: var(--green, #15803d); background: color-mix(in srgb, var(--green, #15803d) 16%, transparent); }
.oa-sp-row.atm { background: color-mix(in srgb, var(--amber, #d4a857) 12%, transparent); }
.oa-sp-row.atm .oa-sp-row-v { color: var(--amber, #d4a857); }
.oa-sp-row.atm .oa-sp-row-tag { color: var(--amber, #d4a857); background: color-mix(in srgb, var(--amber, #d4a857) 22%, transparent); }
.oa-sp-row.otm { background: color-mix(in srgb, var(--accent, #3b82f6) 5%, transparent); }
.oa-sp-row.otm .oa-sp-row-tag { color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 16%, transparent); }
.oa-sp-row:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.oa-sp-row.sel { outline: 1px solid var(--amber, #d4a857); outline-offset: -1px; font-weight: 700; }
.oa-sp-empty { padding: 10px; font-size: 12px; color: var(--muted, #94a3b8); font-style: italic; }

.oa-btn-danger {
  background: var(--red); border: 1px solid var(--red);
  color: #fff;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
}
.oa-btn-danger:hover { filter: brightness(.92); }

/* ── Theme-aware confirm dialog ─────────────────────────────────────
   Used by deleteAlert() (and any future destructive-action prompt).
   Backdrop fades in, box pops up with a subtle scale — feels native
   without using the OS chrome (which window.confirm uses, ignores
   theme tokens, and can be permanently suppressed by Chrome's
   "Prevent this page from creating additional dialogs"). */
.oa-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000;
  animation: oa-confirm-fade-in 0.12s ease-out;
}
@keyframes oa-confirm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.oa-confirm-box {
  background: var(--panel, #1e293b);
  color: var(--text, #e2e8f0);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  width: min(440px, calc(100vw - 32px));
  padding: 18px 20px 14px;
  animation: oa-confirm-pop-in 0.14s ease-out;
}
@keyframes oa-confirm-pop-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.oa-confirm-destructive {
  border-top: 3px solid var(--red, #b91c1c);
}
.oa-confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e2e8f0);
}
.oa-confirm-destructive .oa-confirm-title { color: var(--red, #b91c1c); }
.oa-confirm-msg {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 16px;
  word-break: break-word;
}
.oa-confirm-foot {
  display: flex; gap: 8px; justify-content: flex-end;
}
.oa-confirm-cancel:focus,
.oa-btn-danger:focus,
.oa-btn-primary:focus {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 1px;
}

/* SSE toast host — TOP-right stack (per user feedback May 2026). New
   fires append BELOW existing ones so the most recent is always at the
   top of the cluster, matching how Mac-style notifications behave. */
.oa-toast-host {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none; max-width: 380px;
}
.oa-toast {
  background: rgba(30, 41, 59, .96); color: #f1f5f9;
  border: 1px solid #475569; border-left: 3px solid #4ade80;
  border-radius: 6px; padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: opacity .4s, transform .4s;
  pointer-events: auto;
}
.oa-toast.oa-toast-out { opacity: 0; transform: translateX(20px); }
.oa-toast-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 700; color: #f1f5f9;
}
.oa-toast-head b { font-weight: 700; }
.oa-toast-msg {
  margin-top: 6px;
  font-size: 12.5px;
  color: #e2e8f0;
  word-break: break-word;
  line-height: 1.4;
}
.oa-toast-msg-label {
  font-weight: 600; color: #94a3b8; margin-right: 4px;
}
.oa-toast-x {
  margin-left: auto; background: transparent; border: 0;
  color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer;
  padding: 0 4px;
}
.oa-toast-x:hover { color: #f1f5f9; }