/*
 * Copyright (C) 2026 Yzapre
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

/* ── Trade Balancer ───────────────────────────────────── */
.tb-wrap {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* .panel and .section-box are the shared styles.css versions. */

/* ── Summary cards ────────────────────────────────────── */
.tb-summary {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.tb-side-card {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#tb-side-p1 { border-top-color: #c4281c; }
#tb-side-p2 { border-top-color: #0d69ac; }

.tb-side-card h3 {
  font-size: 1rem;
  font-weight: 700;
}

.tb-side-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  color: var(--muted);
}
.tb-side-stat strong {
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tb-vs {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 24px;
}
.tb-vs::before,
.tb-vs::after {
  content: "";
  flex: 1;
  width: 1px;
  background: var(--border);
}
.tb-vs span {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Verdict / scale panel ────────────────────────────── */
.tb-verdict-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tb-scale {
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.tb-scale-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.2s ease, background 0.15s;
}
#tb-scale-p1 { background: var(--bg); color: var(--muted); }
#tb-scale-p2 { background: var(--bg); color: var(--muted); }
#tb-scale-p1.filled { background: #c4281c; color: #fff; }
#tb-scale-p2.filled { background: #0d69ac; color: #fff; }

.tb-verdict {
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}
.tb-verdict strong { color: var(--text); }
.tb-verdict-even { color: #8eff8e; font-weight: 600; }

/* ── Toolbar ───────────────────────────────────────────── */
.tb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.tb-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
}
.tb-toggle input[type="checkbox"] { cursor: pointer; }

/* Amount input */
.tb-amount-inp {
  width: 100px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.28rem 0.45rem;
  font-size: 0.85rem;
  font-family: inherit;
}

/* The shared .ore-table stretches to 100% width, fine when columns have
   real content but wasteful here (5 narrow columns). Auto layout keeps
   each column only as wide as its content needs, and still shrinks
   correctly in Compact View. */
#tb-table-panel .ore-table {
  width: auto;
  min-width: 0;
}

/* Tighten the numeric columns so each input sits close to its diff
   value instead of the default padding leaving a wide gap. */
#tb-table-panel .ore-table th:not(:first-child),
#tb-table-panel .ore-table td:not(:first-child) {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.tb-diff-cell { color: var(--border); }
.tb-diff-cell.tb-diff-active { color: #ff9999; font-weight: 700; }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 680px) {
  .tb-summary { flex-direction: column; }
  .tb-vs { flex-direction: row; width: auto; height: 24px; }
  .tb-vs::before, .tb-vs::after { width: auto; height: 1px; }
  .tb-toolbar { flex-direction: column; align-items: stretch; }
}