/* ═══════════════════════════════════════════
   TAUQUANTX SMART TRADE ALERT SYSTEM — styles
   Reuses swing-trading.html's existing :root tokens
   (--green, --red, --neon, --amber, --text-muted,
   --bg-deep, --font-display, --font-mono). No new
   color system introduced — additive only.
═══════════════════════════════════════════ */

#tqx-smart-alerts-panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(10, 18, 32, 0.55);
  border: 1px solid rgba(62, 90, 117, 0.35);
}

.tqx-alert-panel-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, inherit); font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text-muted, #8291A3);
}

.tqx-alert-panel-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

.tqx-alert-status-badge {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 20px; border: 1px solid;
}
.tqx-alert-status-badge.tqx-alert-status-on {
  color: var(--green, #19FF8C); border-color: rgba(25,255,140,0.30); background: rgba(25,255,140,0.10);
}
.tqx-alert-status-badge.tqx-alert-status-off {
  color: var(--text-muted, #8291A3); border-color: rgba(62,90,117,0.35); background: transparent;
}

.tqx-alert-chip {
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-display, inherit); font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px; border: 1px solid; transition: all .2s;
  background: transparent; color: var(--text-muted, #8291A3); border-color: rgba(62,90,117,0.40);
}
.tqx-alert-chip:hover { border-color: var(--neon, #00E5C4); color: var(--neon, #00E5C4); }
.tqx-alert-chip.on {
  background: rgba(0,229,196,0.10); color: var(--neon, #00E5C4); border-color: rgba(0,229,196,0.40);
}

.tqx-alert-btn {
  padding: 6px 14px; border-radius: 7px; cursor: pointer; border: 1px solid;
  font-family: var(--font-display, inherit); font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  transition: all .2s;
}
.tqx-alert-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tqx-alert-btn-enable  { background: var(--green-dim, rgba(25,255,140,0.12)); color: var(--green, #19FF8C); border-color: rgba(25,255,140,0.30); }
.tqx-alert-btn-disable { background: var(--red-dim, rgba(255,77,103,0.12));   color: var(--red, #FF4D67);   border-color: rgba(255,77,103,0.30); }
.tqx-alert-btn-test    { background: transparent; color: var(--gold, #FFC83D); border-color: rgba(255,200,61,0.35); }
.tqx-alert-btn-enable:hover:not(:disabled)  { box-shadow: 0 0 12px rgba(25,255,140,0.20); }
.tqx-alert-btn-disable:hover:not(:disabled) { box-shadow: 0 0 12px rgba(255,77,103,0.20); }
.tqx-alert-btn-test:hover  { box-shadow: 0 0 12px rgba(255,200,61,0.20); }

/* ─── Toasts (Phase 27) ─────────────────────────────────────── */
#tqx-alert-toast-host {
  position: fixed; top: 84px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 340px; pointer-events: none;
}
.tqx-alert-toast {
  pointer-events: auto;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(10,18,32,0.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(62,90,117,0.4);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  opacity: 0; transform: translateX(24px);
  transition: opacity .25s ease, transform .25s ease;
}
.tqx-alert-toast.tqx-toast-in  { opacity: 1; transform: translateX(0); }
.tqx-alert-toast.tqx-toast-out { opacity: 0; transform: translateX(24px); }
.tqx-alert-toast-high     { border-color: rgba(25,255,140,0.45); box-shadow: 0 0 18px rgba(25,255,140,0.15); }
.tqx-alert-toast-medium   { border-color: rgba(0,229,196,0.40); }
.tqx-alert-toast-info     { border-color: rgba(148,163,184,0.35); }
.tqx-toast-title { font-family: var(--font-display, inherit); font-size: 13px; font-weight: 700; color: #F1F5FB; margin-bottom: 4px; }
.tqx-toast-body  { font-family: var(--font-mono, monospace); font-size: 11.5px; color: rgba(255,255,255,0.75); white-space: pre-line; }

@media (max-width: 480px) {
  #tqx-alert-toast-host { left: 12px; right: 12px; max-width: none; top: 72px; }
}