/* ── CSS custom properties (light theme defaults) ── */
:root {
  --color-win:            #16a34a;
  --color-loss:           #dc2626;
  --color-amber:          #d97706;
  --color-accent:         #4f46e5;
  --color-accent-hover:   #6366f1;
  --color-card-bg:        #ffffff;
  --color-page-bg:        #f0f4f8;
  --color-border:         rgba(0,0,0,.15);
  --color-text-1:         #0f172a;
  --color-text-2:         #475569;
  --color-text-3:         #94a3b8;
  --color-topbar-bg:      #ffffff;
  --color-topbar-border:  rgba(0,0,0,.08);
  --color-surface:        rgba(0,0,0,.035);
  --color-surface-border: rgba(0,0,0,.12);
  --color-input-bg:       #ffffff;
  --color-disabled-bg:    rgba(0,0,0,.1);
  --color-disabled-fg:    rgba(0,0,0,.3);
  --glow-accent:          none;
}

[data-theme="dark"] {
  --color-win:            #22c55e;
  --color-loss:           #ef4444;
  --color-amber:          #f59e0b;
  --color-accent:         #6b7aff;
  --color-accent-hover:   #8b96ff;
  --color-card-bg:        #131820;
  --color-page-bg:        #0b0f14;
  --color-border:         rgba(255,255,255,.07);
  --color-text-1:         #e8eeff;
  --color-text-2:         #7a87aa;
  --color-text-3:         #3d4660;
  --color-topbar-bg:      #0d1117;
  --color-topbar-border:  rgba(255,255,255,.06);
  --color-surface:        rgba(255,255,255,.03);
  --color-surface-border: rgba(255,255,255,.06);
  --color-input-bg:       #0d1117;
  --color-disabled-bg:    rgba(255,255,255,.08);
  --color-disabled-fg:    rgba(255,255,255,.25);
  --glow-accent:          0 0 16px rgba(107,122,255,.3);
}

body {
  padding: 0;
  background: var(--color-page-bg);
}

#page-content {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Top bar ── */
header.top-bar {
  max-width: none;
  margin: 0;
  flex-wrap: nowrap;
  gap: 0;
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem .75rem;
  background: var(--color-topbar-bg);
  border-bottom: 1px solid var(--color-topbar-border);
}

.top-bar-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.top-bar-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-1);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.top-bar-subtitle {
  font-size: .78rem;
  color: var(--color-text-3);
  font-weight: 500;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: .75rem;
  flex-shrink: 0;
}

/* ── Bots link ── */
.btn-bots-link {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  padding: .25rem .55rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.btn-bots-link:hover { color: var(--color-text-1); background: var(--color-surface); }

/* ── Theme toggle ── */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  color: var(--color-text-1);
  opacity: .5;
  transition: opacity .15s;
  line-height: 0;
  margin-right: .1rem;
}
#theme-toggle svg       { width: 1.25rem; height: 1.25rem; display: block; pointer-events: none; }
#theme-toggle:hover     { opacity: 1; }
#theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; opacity: 1; }
#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: block; }
[data-theme="dark"] #theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

/* ── Wallet lock button ── */
#wallet-lock-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  color: var(--color-text-1);
  opacity: .35;
  transition: opacity .15s;
  line-height: 0;
}
#wallet-lock-btn svg            { width: 1.5rem; height: 1.5rem; display: block; pointer-events: none; }
#wallet-lock-btn:hover          { opacity: 1; }
#wallet-lock-btn:focus-visible  { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; opacity: 1; }
#wallet-lock-btn:disabled       { opacity: .2; cursor: not-allowed; }

/* ── Banners ── */
#error-banner,
#wallet-status {
  margin: .75rem 1.25rem;
}

/* ── Auth wall ── */
#auth-wall {
  padding: 3rem 1.25rem;
  text-align: center;
}

.auth-wall-msg {
  font-size: 1rem;
  color: var(--color-text-2);
}

/* ── Icon button ── */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  color: var(--color-text-3);
  line-height: 0;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.btn-icon svg           { width: 1rem; height: 1rem; display: block; pointer-events: none; }
.btn-icon:hover         { color: var(--color-text-1); background: var(--color-surface); }
.btn-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Triggers section ── */
#triggers-section {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Triggers header ── */
.triggers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.triggers-summary {
  font-size: .85rem;
  color: var(--color-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}

.summary-stat { display: inline-flex; align-items: center; gap: .3rem; }
.summary-dot  { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.summary-dot-active  { background: var(--color-win); }
.summary-dot-staged  { background: #a16207; }
.summary-dot-failed  { background: var(--color-loss); }
.summary-dot-cleared { background: var(--color-text-3); }
[data-theme="dark"] .summary-dot-staged { background: #facc15; }

/* ── Trigger list ── */
#triggers-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.empty {
  font-size: .9rem;
  color: var(--color-text-3);
  padding: 1.5rem 0;
}

/* ── Trigger card (accordion) ── */
.trigger-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
[data-theme="dark"] .trigger-card { box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.trigger-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.trigger-card-header:hover { background: var(--color-surface); }
.trigger-card-header:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.trigger-header-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  min-width: 0;
}

.trigger-header-aside {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.trigger-chevron {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-3);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.trigger-card-header[aria-expanded="true"] .trigger-chevron { transform: rotate(180deg); }

.trigger-card-body {
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Detail bar (bot · size · webhook status) ── */
.trigger-detail-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  padding: .55rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-surface-border);
}

/* ── Body sections (entry payload / exit payload / event log) ── */
.trigger-body-section {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--color-surface-border);
}
.trigger-body-section:last-of-type { border-bottom: none; }

.trigger-section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: .4rem;
}

/* Row holding section label + edit button side by side */
.trigger-section-label-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}
.trigger-section-label-row .trigger-section-label { margin-bottom: 0; }

/* Collapsible entry payload for active triggers */
.trigger-entry-details > summary.trigger-section-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  user-select: none;
  -webkit-user-select: none;
}
.trigger-entry-details > summary.trigger-section-summary::after {
  content: '▶';
  font-size: .55rem;
  color: var(--color-text-3);
  transition: transform .15s;
}
.trigger-entry-details[open] > summary.trigger-section-summary::after { transform: rotate(90deg); }
.trigger-entry-details > summary.trigger-section-summary::-webkit-details-marker { display: none; }
.trigger-entry-details[open] > .trigger-payload { margin-top: .4rem; }

/* ── Provider identity ── */
.trigger-provider {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text-1);
}

/* Size the shared provider dot for this context; colors from shared/styles.css */
.trigger-provider .conv-block-label-dot { width: .55rem; height: .55rem; }

/* ── Action badge ── */
.action-badge {
  font-size: .72rem;
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: 99px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.action-buy  { background: rgba(22,163,74,.12);  color: var(--color-win); }
.action-sell { background: rgba(220,38,38,.12);  color: var(--color-loss); }
[data-theme="dark"] .action-buy  { background: rgba(34,197,94,.15); }
[data-theme="dark"] .action-sell { background: rgba(239,68,68,.15); }

/* ── Trigger meta fields ── */
.trigger-symbol {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text-1);
}

.trigger-price,
.trigger-size,
.trigger-date {
  font-size: .8rem;
  color: var(--color-text-2);
}

.trigger-sep {
  color: var(--color-text-3);
  font-size: .75rem;
}

/* ── Bot name ── */
.trigger-bot {
  font-size: .8rem;
  color: var(--color-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 6rem;
}

/* ── Status pills ── */
.trigger-state {
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.state-active  { background: #dcfce7; color: #15803d; }
.state-failed  { background: #fee2e2; color: #dc2626; }
.state-cleared { background: #f1f5f9; color: #64748b; }
.state-staged  { background: #fef9c3; color: #a16207; }
[data-theme="dark"] .state-active  { background: rgba(34,197,94,.15);  color: #4ade80; }
[data-theme="dark"] .state-failed  { background: rgba(239,68,68,.15);  color: #f87171; }
[data-theme="dark"] .state-cleared { background: rgba(255,255,255,.06); color: #94a3b8; }
[data-theme="dark"] .state-staged  { background: rgba(234,179,8,.12);   color: #facc15; }

.trigger-webhook {
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 5px;
  white-space: nowrap;
  font-family: ui-monospace, monospace;
}
.webhook-ok   { background: rgba(22,163,74,.1);  color: var(--color-win); }
.webhook-err  { background: rgba(220,38,38,.1);  color: var(--color-loss); }
.webhook-none { background: var(--color-surface); color: var(--color-text-3); }
[data-theme="dark"] .webhook-ok  { background: rgba(34,197,94,.12); }
[data-theme="dark"] .webhook-err { background: rgba(239,68,68,.12); }

/* ── Card actions (state-scoped buttons inside expanded body) ── */
.trigger-actions {
  display: flex;
  gap: .4rem;
  padding: .65rem 1rem;
  border-top: 1px solid var(--color-surface-border);
}

/* Clear button is intentionally hidden — /clear endpoint kept as backend escape hatch.
   Remove display:none here to re-enable the button. */
.clear-btn { display: none; }

.del-btn {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 6px;
  padding: .25rem .65rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: none;
  border: 1px solid var(--color-loss);
  color: var(--color-loss);
}
.del-btn:hover:not(:disabled) { background: var(--color-loss); color: #fff; }
.del-btn:disabled { border-color: var(--color-border); color: var(--color-text-3); cursor: not-allowed; }

/* ── Payload pre blocks (entry + exit) ── */
.trigger-payload,
.trigger-exit-payload {
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--color-text-2);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: 6px;
  padding: .65rem .85rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}

/* ── Exit action badge (amber) ── */
.action-exit { background: rgba(217,119,6,.12); color: var(--color-amber); }
[data-theme="dark"] .action-exit { background: rgba(245,158,11,.15); }

/* ── Edit button (staged entry + active exit) ── */
.edit-btn,
.edit-exit-btn {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 6px;
  padding: .25rem .65rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-2);
  white-space: nowrap;
}
.edit-btn:hover,
.edit-exit-btn:hover { background: var(--color-surface); color: var(--color-text-1); }

/* ── Fire button (staged triggers) ── */
.fire-btn {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 6px;
  padding: .2rem .6rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: none;
  border: 1px solid #a16207;
  color: #a16207;
  white-space: nowrap;
}
.fire-btn:hover:not(:disabled) { background: #a16207; color: #fff; }
.fire-btn:disabled { border-color: var(--color-border); color: var(--color-text-3); cursor: not-allowed; }
[data-theme="dark"] .fire-btn { border-color: #facc15; color: #facc15; }
[data-theme="dark"] .fire-btn:hover:not(:disabled) { background: #facc15; color: #000; }

/* ── Close button ── */
.close-btn {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 6px;
  padding: .25rem .65rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  background: none;
  border: 1px solid var(--color-amber);
  color: var(--color-amber);
  white-space: nowrap;
}
.close-btn:hover:not(:disabled) { background: var(--color-amber); color: #fff; }
.close-btn:disabled { border-color: var(--color-border); color: var(--color-text-3); cursor: not-allowed; }


/* ── Trigger logs panel ── */
.trigger-logs {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.log-entry {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  font-size: .78rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--color-surface-border);
}
.log-entry:last-child { border-bottom: none; }

.log-event {
  font-weight: 700;
  color: var(--color-text-1);
  white-space: nowrap;
}
.log-entry-error .log-event { color: var(--color-loss); }

.log-price {
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  color: var(--color-text-2);
}

.log-date {
  font-size: .74rem;
  color: var(--color-text-3);
  margin-left: auto;
  white-space: nowrap;
}

.log-message {
  width: 100%;
  font-size: .74rem;
  color: var(--color-loss);
  word-break: break-word;
}

.logs-empty {
  font-size: .8rem;
  color: var(--color-text-3);
  padding: .4rem 0;
}
.logs-error { color: var(--color-loss); }

/* ── Close modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
}
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65); }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
  width: min(420px, calc(100vw - 2rem));
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
[data-theme="dark"] .modal { box-shadow: 0 8px 32px rgba(0,0,0,.5); }

.modal-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-1);
  letter-spacing: -.01em;
  flex: 1;
  margin: 0;
}

.modal-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text-3);
  padding: .2rem .4rem;
  border-radius: 5px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.modal-dismiss:hover { color: var(--color-text-1); background: var(--color-surface); }

.modal-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-2);
  margin-bottom: .3rem;
}

.modal-label-hint {
  font-weight: 400;
  color: var(--color-text-3);
}

.modal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: .9rem;
  padding: .5rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-input-bg);
  color: var(--color-text-1);
  margin-bottom: .75rem;
  transition: border-color .15s;
}
.modal-input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }

.modal-error {
  font-size: .8rem;
  color: var(--color-loss);
  min-height: 1.1em;
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

.modal-btn {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-btn:disabled { opacity: .5; cursor: not-allowed; }

.modal-btn-cancel {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-2);
}
.modal-btn-cancel:hover:not(:disabled) { background: var(--color-surface); color: var(--color-text-1); }

.modal-btn-submit {
  background: var(--color-amber);
  border: 1px solid var(--color-amber);
  color: #fff;
}
.modal-btn-submit:hover:not(:disabled) { filter: brightness(1.1); }

.modal-btn-save {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #fff;
}
.modal-btn-save:hover:not(:disabled) { filter: brightness(1.1); }

body.modal-open { overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .trigger-header-main { gap: .3rem .5rem; }
  .trigger-actions { flex-wrap: wrap; }
}