/* MACD Monitor additions on top of the old bot's shared.css (same tokens, radii, shapes). */

:root { --amber: #f7b731; --bg-light: #3a3a3a; color-scheme: dark; }  /* dark native scrollbars and form controls */

.nav-title { margin: 0; }
.nav-buttons a.nav-btn { color: var(--text-secondary); }
.nav-buttons a.nav-btn.active { color: #fff; }
.market-badge { background: #000; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.mode-badge, .dir-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.mode-badge.paper { background: linear-gradient(135deg, #f7b731, #e09b10); color: #1d1300; }
.mode-badge.live { background: var(--gradient-success); }
.mode-badge.off { background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border-color); }
.dir-badge.long { background: var(--gradient-success); }
.dir-badge.short { background: var(--gradient-danger); }

.header-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.strategy-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kpi { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); height: 36px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .lbl { color: var(--text-secondary); }
.meter { width: 64px; height: 6px; border-radius: 3px; background: #161616; border: 1px solid var(--border-color); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent-success); transition: width .4s ease; }
.meter i.warn { background: var(--amber); }
.status-dot.loading { background: var(--amber); }

.card-body { padding: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; align-items: start; }

/* ---------- overview table ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search { height: 32px; width: 180px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); padding: 0 10px; font-size: .85rem; font-family: inherit; }
.search:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(79,179,217,.2); }
.seg { display: inline-flex; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; color: var(--text-secondary); padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: .8rem; cursor: pointer; font-family: inherit; }
.seg button:hover { color: var(--text-primary); }
.seg button.on { background: var(--accent-primary); color: #fff; }
.seg.dir button.on[data-v="LONG"] { background: var(--gradient-success); }
.seg.dir button.on[data-v="SHORT"] { background: var(--gradient-danger); }
select.sel { height: 32px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); padding: 0 8px; font-family: inherit; font-size: .85rem; }
select.sel:focus { outline: none; border-color: var(--accent-primary); }

#ovTable { min-width: 1180px; }
#ovTable th, #ovTable td { padding: .42rem .5rem; }
.data-table th.group { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); padding: .35rem; }
.data-table .gsep { border-left: 1px solid var(--border-color); }
.data-table th small { display: block; font-weight: 500; color: var(--text-muted); font-size: .7rem; line-height: 1.2; }
.data-table th.off { color: var(--text-muted); }
.data-table td.coin { text-align: left; font-weight: 600; }
.data-table th.coin { text-align: left; }
.coin .q { color: var(--text-muted); font-weight: 500; }
.coin .tag { display: block; font-size: .68rem; font-weight: 500; color: var(--text-muted); }
.coin .tag.warn { color: var(--amber); }
.coin .tag.err { color: var(--accent-danger); }
.data-table td.num, .data-table th.num { text-align: right; }
.chg { display: block; font-size: .7rem; }
tr.allgreen td:first-child { box-shadow: inset 3px 0 0 var(--accent-success); }
tr.inpos td:first-child { box-shadow: inset 3px 0 0 var(--accent-primary); }
/* Lights: flat 8px dots like the old bot's .status-dot. Crossed = dot, not crossed = empty. */
.lamp-cell { position: relative; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
.lamp { position: absolute; inset: 0; border-radius: 50%; }
.lamp.g { background: var(--accent-success); }
.lamp.ring { border: 1.5px solid var(--accent-success); }                 /* crossing into your direction on the open candle */
.lamp.warn { background: var(--amber); }                                  /* aligned, but the open candle is crossing back */
.lamp.l { background: var(--text-muted); opacity: .5; animation: pulse 2s infinite; }
.lamp-text { color: var(--text-muted); font-size: .75rem; }
.lamp-text.err { color: var(--accent-danger); font-weight: 700; }
.lamp-cell .age { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.score { display: inline-block; min-width: 40px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .75rem; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); }
.score.full { background: rgba(0,212,170,.15); border-color: rgba(0,212,170,.45); color: #35e0bd; }
.score.high { border-color: rgba(0,212,170,.3); color: #8fe9d4; }
.score.low { border-color: rgba(255,71,87,.3); color: #ff8c96; }

.entry { display: inline-flex; gap: 6px; align-items: center; }
input.amt { width: 66px; height: 30px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); padding: 0 8px; text-align: right; font-family: inherit; font-size: .8rem; font-variant-numeric: tabular-nums; }
input.amt:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(79,179,217,.2); }
.icon-btn { width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.icon-btn:hover, .icon-btn.set { border-color: var(--accent-primary); color: var(--accent-primary); }
.btn-small { min-height: 30px; }
.roe { display: block; font-size: .7rem; color: var(--text-muted); }
.chips { display: inline-flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.chip { font-size: .7rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); background: var(--bg-secondary); white-space: nowrap; }
.chip.sl { border-color: rgba(255,71,87,.45); color: #ff7a86; }
.chip.tp { border-color: rgba(0,212,170,.45); color: #35e0bd; }
.chip.ts { border-color: rgba(79,179,217,.5); color: #7fcbe6; }
.chip.missing { border-style: dashed; border-color: var(--accent-danger); color: var(--accent-danger); background: rgba(255,71,87,.08); }
.chips.planned { opacity: .45; }
.chips.planned.custom { opacity: .95; }
.warn-icon { color: var(--accent-danger); cursor: help; font-weight: 700; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 2px 2px; color: var(--text-secondary); font-size: .78rem; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .lamp-cell { margin-right: 2px; }
.legend .lamp { animation: none; }
.legend .blank { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px dashed var(--border-hover); }

/* popover (custom protection per trade) */
.pop { position: absolute; z-index: 50; width: 280px; background: var(--bg-secondary); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 12px; font-size: .82rem; }
.pop-title { font-weight: 600; margin-bottom: 8px; }
.pop .pr { display: grid; grid-template-columns: 22px 1fr 74px 16px; align-items: center; gap: 6px; margin-bottom: 6px; }
.pop .pr input[type=number] { height: 28px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); padding: 0 6px; font-family: inherit; width: 100%; }
.pop .pr input[type=checkbox] { accent-color: #4fb3d9; width: 15px; height: 15px; }
.pop .unit { color: var(--text-muted); }
.pop-note { color: var(--text-muted); font-size: .74rem; margin: 4px 0 8px; }
.pop-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- settings (old bot layout: light boxes, dark inputs, label above input) ---------- */
.config-container { padding: .5rem; }
.form-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.form-grid.three-col { grid-template-columns: repeat(3, 1fr); }
.form-grid.two-col { grid-template-columns: repeat(2, 1fr); gap: .75rem; align-items: start; }
.setting-group.off { opacity: .55; }
.setting-group .setting-title[title], .card-header h3[title], .form-group label[title] { cursor: help; }
.setting-title-row .toggle-container { height: auto; }
.pair-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pair-grid .span2 { grid-column: span 2; }
.pair-grid .span3 { grid-column: span 3; }
.pair-grid .form-group { gap: .3rem; }
.form-group input.bad { border-color: var(--accent-danger); }
.coin-list { padding: 10px; min-height: 60px; max-height: 330px; overflow-y: auto; margin-bottom: 0; }
.coin-item { cursor: grab; user-select: none; }
.coin-item.dragging { opacity: .45; }
.coin-item.drop-before { box-shadow: -3px 0 0 var(--accent-primary); }
.coin-item.held { border-color: var(--accent-primary); }
.budget-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.budget-tiles .status-item { cursor: help; }
.budget-tiles .status-value { font-size: 1.35rem; }
.warn-line { font-size: .8rem; color: #f7c65a; margin-top: 6px; }

/* ---------- history ---------- */
.status-grid { grid-template-columns: repeat(6, 1fr); }
.hist-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pagination { margin-top: .75rem; }
.logs-display .t { color: #777; }
.logs-display .WARN { color: #f7c65a; }
.logs-display .ERROR { color: #ff7a86; }
.logs-display .src { color: #7fcbe6; }
.table-wrapper { margin-bottom: 0; }

/* ---------- modal / toasts ---------- */
.modal[hidden] { display: none; }
.modal-content.small { max-width: 440px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.3); font-size: 13px; font-weight: 500; border-left: 3px solid var(--accent-primary); }
.toast.success { border-left-color: var(--accent-success); }
.toast.error { border-left-color: var(--accent-danger); color: #ffb3ba; }
.toast.warn { border-left-color: var(--amber); }

@media (prefers-reduced-motion: reduce) { .lamp.l, .status-dot { animation: none; } }
@media (max-width: 1100px) { .form-grid.four-col { grid-template-columns: repeat(2, 1fr); } .form-grid.three-col, .form-grid.two-col, .grid2 { grid-template-columns: 1fr; } .budget-tiles { grid-template-columns: repeat(2, 1fr); } .status-grid { grid-template-columns: repeat(3, 1fr); } }