:root {
  --bg: #141414;
  --bg-panel: #1e1e1e;
  --bg-card: #242424;
  --border: #2e2e2e;
  --text: #e7ebf3;
  --text-dim: #8a93a8;
  --accent: #708bca;
  --green: #3ecf8e;
  --red: #f0556b;
  --amber: #e8b34a;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.app {
  max-width: 98vw;
  margin: 0 auto;
  padding: 14px 16px 12px;
}

/* ---------- Header / top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
}

.topbar-left {
  position: relative;
}

/* Analysis -> Metrics KPI strip - the first place this app shows
   summary numbers as cards rather than table rows, since a handful of
   headline figures (net profit, win rate...) read better at a glance
   than as a one-row table would. */
/* Analysis -> Metrics: EA and Symbol performance side by side, equal
   width - stacks to one column on narrow screens since two half-width
   tables would get too cramped otherwise. */
.analysis-perf-columns {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.analysis-perf-column {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 900px) {
  .analysis-perf-columns {
    flex-direction: column;
  }
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.metric-card-label {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 6px;
}

.metric-card-value {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

/* The Accounts tab's first KPI card ("Strategy") - spans 2 grid
   columns (roughly twice the other cards' width) since it holds a
   list of Name: Strategy pairs, one per selected account, rather than
   a single number. */
.metric-card-wide {
  grid-column: span 2;
}

.metric-card-strategy-list {
  max-height: 78px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-card-strategy-row {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  display: flex;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-card-strategy-name {
  color: var(--accent);
  flex-shrink: 0;
}

/* Accounts tab: KPI grid + symbol pie chart side by side. The KPI grid
   gets more room (11 cards need it) than the pie, which is capped to a
   sensible max width rather than stretching - a pie chart doesn't get
   more useful the wider it is. Stacks on narrow screens. */
.accounts-kpi-columns {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}

.accounts-kpi-grid {
  flex: 2 1 0;
  margin-bottom: 0;
  align-content: flex-start;
}

.accounts-kpi-pie-cell {
  flex: 1 1 260px;
  max-width: 320px;
}

@media (max-width: 900px) {
  .accounts-kpi-columns {
    flex-direction: column;
  }
  .accounts-kpi-pie-cell {
    max-width: 100%;
  }
}

.count-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

/* Used when a count-badge sits inline next to text within a table
   cell (e.g. the trade-cluster count next to an Expert Advisor name) -
   the topbar's own placement already gets its spacing from
   .topbar-center's flex gap, so this only applies here. */
.count-badge-inline {
  margin-left: 6px;
}

.cluster-row {
  cursor: pointer;
}

.cluster-row:hover td {
  filter: brightness(1.12);
}

/* A cluster's individual underlying trades, shown when expanded - kept
   visually subordinate to the summary row above them (smaller text,
   indented Account cell) without touching the row's own win/loss
   background tint, since seeing which specific leg won or lost is
   exactly the point of expanding a cluster. */
tr.cluster-detail td {
  font-size: 0.93em;
}

tr.cluster-detail td.col-gap-r {
  padding-left: 22px;
  opacity: 0.85;
}

.menu-wrap {
  position: relative;
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.menu-btn:hover {
  border-color: var(--accent);
}

.menu-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--accent);
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.menu-item.active {
  background: rgba(112, 139, 202, 0.14);
  color: var(--accent);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
  white-space: nowrap;
}

.user-menu-wrap {
  position: relative;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.user-chip:hover {
  border-color: var(--accent);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.user-dropdown-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.user-dropdown-item:hover {
  background: rgba(240, 85, 107, 0.12);
  color: var(--red);
}

/* ---------- Login page ---------- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card h1 {
  font-size: 18px;
  margin: 0 0 6px;
  text-align: center;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.login-card input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  font-size: 14px;
}

.login-card input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-card button {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 4px;
}

.login-card button:hover {
  filter: brightness(1.08);
}

.login-error {
  color: var(--red);
  font-size: 12px;
  text-align: center;
  margin: 0;
}

.hover-info {
  cursor: help;
  border-bottom: 1px dotted var(--text-dim);
}

/* Custom tooltip (replaces the native `title` attribute, which some
   browsers only show while the window itself is focused - this one is
   pure CSS :hover, so it only depends on the cursor actually being over
   the element and works regardless of window focus). Also lets us
   control its size directly, rather than being stuck with however
   small/cramped the browser's own native tooltip renders it. */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-box {
  display: none;
  position: fixed;
  background: #f4f6fb;
  border: 1px solid var(--accent);
  color: #1a2036;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  min-width: 220px;
  max-width: 360px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 50;
}

.tooltip-wrap:hover .tooltip-box {
  display: block;
}

/* Sync tooltip: much shorter text than the account-name one - fits
   its content instead of forcing a wide minimum. Positioning itself
   (which edge it grows from) is now computed in JS alongside every
   other tooltip, not fixed via CSS side-anchoring - see
   positionTooltip() in dashboard.js. */
.tooltip-box.tooltip-narrow {
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
}

/* ---------- Panels / tables ---------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 8px;
  margin-bottom: 12px;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.panel-toolbar .link-btn {
  margin-left: 0;
}

/* Closed Transactions' timeframe dropdown (+ Custom's From/To inputs),
   sat inline in the panel-toolbar right before .toolbar-search so both
   stay on one line, right-aligned together - .toolbar-search no longer
   needs its own margin-left:auto once this precedes it (the first
   auto-margin in a flex row absorbs all the free space; both here for
   robustness in case the order ever changes). Compact by design - this
   is a toolbar control, not a full history-controls label+input pair. */
.toolbar-timeframe {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.toolbar-timeframe select,
.toolbar-timeframe input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* On Closed Transactions, .toolbar-timeframe precedes .toolbar-search
   in the same toolbar and already carries its own margin-left:auto to
   push the pair to the right - without this override, flexbox would
   split the toolbar's free space between BOTH elements' auto margins,
   opening an unwanted gap between the dropdown and the search icon
   instead of keeping them flush next to each other. Every other page
   has no .toolbar-timeframe, so .toolbar-search's own auto margin
   above is untouched there. */
.toolbar-timeframe ~ .toolbar-search {
  margin-left: 0;
}

.toolbar-search input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 160px;
}

.toolbar-search input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Wraps a search input so its clear ("x") button can sit inside the
   input's own right edge, rather than as a separate element next to
   it - matches how this kind of inline-clear affordance usually looks. */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap input {
  padding-right: 26px;
}

.search-clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.search-clear-btn:hover {
  color: var(--text);
}

.search-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.search-toggle-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.link-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.alert-matrix-table {
  max-width: 480px;
}

/* Fixed column widths (via <colgroup> in the markup) only apply to the
   Accounts/Open/Closed desktop+mobile table pairs - Configuration's
   admin tables stay on auto layout since they have no matching
   totals-table to keep aligned with. */
.desktop-table,
.mobile-table {
  table-layout: fixed;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 600;
  padding: 5px 5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.sortable-th {
  cursor: pointer;
  user-select: none;
}

.sortable-th:hover {
  color: var(--text);
}

.data-table td {
  padding: 3px 5px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.empty-state {
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 0 18px;
}

/* ---------- Value coloring ---------- */
.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }
.pnl-flat { color: var(--accent); }
.pnl-warn { color: var(--amber); }

.result-chip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}

.result-win { background: rgba(62, 207, 142, 0.15); color: var(--green); }
.result-loss { background: rgba(240, 85, 107, 0.15); color: var(--red); }

/* Row-level Win/Loss tint for Open/Closed Transactions - a subtle
   background so the whole row reads as profitable/losing at a glance,
   without making the text hard to read (kept in the same ~10-15%
   opacity range as the other tinted badges/highlights on this page). */
.row-win { background: rgba(62, 207, 142, 0.18); }
.row-loss { background: rgba(240, 85, 107, 0.18); }

.row-win:hover,
.data-table tbody tr.row-win:hover { background: rgba(62, 207, 142, 0.26); }
.row-loss:hover,
.data-table tbody tr.row-loss:hover { background: rgba(240, 85, 107, 0.26); }

/* Text color follows the same win/loss tint, moderately (blended
   toward the base text color rather than full-saturation green/red)
   so it reads as "this row is colored" without looking like a wall of
   neon text. The Result chip keeps its own color regardless - its
   selector (.result-chip.result-win/.result-loss) is more specific
   than this one, so it isn't affected. */
.row-win td { color: #a9e8c9; }
.row-loss td { color: #f0aab3; }

/* ---------- Accounts table (scrollable, sticky header - built for ~50 rows) ---------- */
.table-scroll {
  max-height: 70vh;
  overflow: auto;
}

.table-scroll .data-table thead th,
.weekly-table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
  /* Forces its own compositing layer - without this, a sticky header
     can fail to repaint/composite correctly (letting scrolled content
     show through) when the table's rows are populated dynamically
     after the initial paint, e.g. right after an async load fills in
     a table that started empty. */
  transform: translateZ(0);
}

/* Weekly Stats can stack several broker tables on one page, unlike
   Accounts/Open/Closed which each have exactly one scrollable table -
   so it doesn't use the dynamic resizeTableScrolls() fill-to-bottom
   logic (that assumes a single table owns the rest of the viewport).
   A plain fixed max-height is enough here: this data only grows by one
   row per broker per week, so needing to scroll within a single
   broker's table any time soon is unlikely. */
.weekly-table-scroll {
  max-height: 45vh;
  overflow: auto;
}

/* The totals row lives in its own small table directly below
   .table-scroll (not inside it - sticky footers inside scrollable
   tables are exactly the kind of thing that's inconsistent across
   browsers/mobile, which was cutting the totals row off). Both tables
   use identical fixed-pixel column widths (matching <colgroup>s), so
   they stay aligned regardless of container width or scroll state -
   unlike percentage-based widths, this needs no scrollbar-width
   compensation. Wrapped in its own horizontally-scrollable container
   (kept in sync with the main table's horizontal scroll position via
   JS - see syncTotalsScroll() in dashboard.js), since a table sized to
   fit its content rather than the viewport can end up wider than the
   screen on narrow devices. */
.totals-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.totals-table td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.sync-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: help;
}

.sync-green { background: var(--green); }
.sync-yellow { background: var(--amber); }
.sync-red { background: var(--red); }

/* Outdated-data indicator next to Last refresh - visibility is handled
   entirely by x-show now (hidden while fresh, shown once stale), on
   every screen size. Overrides .sync-dot's own size (18px, sized for
   a table cell) down to something that fits the compact topbar text
   it sits next to. */
/* Outdated-data indicator next to Last refresh - visibility is handled
   entirely by x-show (hidden while fresh, shown once stale), on every
   screen size. A rotating spinner ring rather than a solid dot - color
   matches the "Last refresh" text itself (--text-dim) rather than a
   status color, since this isn't reporting good/bad, just "working on
   it". No longer uses .sync-dot at all (that's a filled-circle style
   for a different kind of indicator) - fully self-contained here. */
.refresh-freshness-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  border-top-color: transparent;
  animation: refresh-spin 0.8s linear infinite;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

.fxblue-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fxblue-link:hover {
  color: #fff;
}

.data-table th.col-center,
.data-table td.col-center {
  text-align: center;
}

.data-table th.col-right,
.data-table td.col-right {
  text-align: right;
}

.data-table th.col-tight,
.data-table td.col-tight {
  padding-left: 3px;
  padding-right: 3px;
}

/* Extra breathing room after a column, beyond the usual cell padding -
   used between Account and Expert Advisor on Open/Closed Transactions,
   which otherwise sat right next to each other with barely any gap. */
.data-table th.col-gap-r,
.data-table td.col-gap-r {
  padding-right: 12px;
}

/* ---------- Small status badges ---------- */
.badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}

.badge-active { background: rgba(62, 207, 142, 0.15); color: var(--green); }
.badge-inactive { background: rgba(138, 147, 168, 0.15); color: var(--text-dim); }

/* ---------- Configuration: sub-tab bar ---------- */
.subtab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.subtab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px 10px;
  cursor: pointer;
}

.subtab-btn:hover {
  color: var(--text);
}

.subtab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Configuration: forms + buttons ---------- */
.config-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.history-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  min-width: 180px;
}

/* Account History's multi-account picker - a plain select can't do
   checkboxes, so this is a trigger button that opens a small dropdown
   panel with a Select all shortcut above the checkbox list. */
.multiselect-wrap {
  position: relative;
}

.multiselect-trigger {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 180px;
  text-align: left;
}

.multiselect-trigger:hover {
  border-color: var(--accent);
}

.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 220px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.multiselect-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.multiselect-search:focus {
  outline: none;
  border-color: var(--accent);
}

.multiselect-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  max-height: 240px;
  overflow-y: auto;
}

.multiselect-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* .history-controls label sets flex-direction:column with higher
   specificity (class+type, 0-1-1) than plain .checkbox-label
   (0-1-0) - and matches here too, since this label is nested inside
   .history-controls several levels down. Explicit override, matched
   at equal-or-higher specificity so it actually wins. */
.multiselect-option-row .checkbox-label {
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

/* The account name itself is the "select only this one" control (see
   soloAccountHistoryAccount()) - the checkbox next to it still does
   normal multi-select. Styled distinctly so that's discoverable. */
.multiselect-option-row .checkbox-label span {
  cursor: pointer;
}

.multiselect-option-row .checkbox-label span:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.form-grid label.full-width {
  grid-column: 1 / -1;
}

.form-grid label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: var(--red);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.toggle-switch.on {
  background: var(--green);
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.toggle-switch.on .toggle-knob {
  left: 22px;
}

.form-grid input,
.form-grid textarea,
.form-grid select,
.history-controls input,
.history-controls select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.history-controls input:focus,
.history-controls select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-grid input:disabled,
.form-grid select:disabled {
  opacity: 0.5;
}

.search-box {
  display: block;
  margin-bottom: 10px;
}

.search-box input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.hint-text {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 640px;
}

/* General Settings: each functional group (Data Retention, Customize
   Account Overview Page, Alerting via Telegram) gets its own bordered
   box with a heading - previously everything sat in one flat list
   with only spacing between groups, which made it unclear which
   input belonged to which setting. */
.settings-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.settings-box-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

/* First .settings-section inside a box shouldn't add its own top
   margin on top of the box's own padding - only ones AFTER the first
   need the gap. */
.settings-box .settings-section:first-of-type {
  margin-top: 0;
}

.settings-section {
  margin-top: 18px;
}

.retention-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  width: fit-content;
}

.retention-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 90px;
}

.retention-input:focus {
  outline: none;
  border-color: var(--accent);
}

.checkbox-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.reorder-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}

.reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}

.reorder-controls {
  display: flex;
  gap: 4px;
}

.reorder-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.reorder-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.reorder-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-saved-flash {
  color: var(--green);
  font-size: 13px;
  margin-left: 10px;
}

.data-table td input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
}

.data-table td input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.token-row {
  display: flex;
  gap: 8px;
}

.token-row input {
  flex: 1;
  min-width: 0;
  font-family: "Consolas", monospace;
}

.token-row button {
  flex-shrink: 0;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.primary-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.primary-btn:hover {
  filter: brightness(1.08);
}

.small-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.small-btn:hover {
  border-color: var(--accent);
}

.small-btn.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

.row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.token-cell {
  font-family: "Consolas", monospace;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.icon-btn.copied {
  color: var(--green);
  border-color: var(--green);
}

.icon-btn.copy-failed {
  color: var(--red);
  border-color: var(--red);
}

.form-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 10px;
}

/* ---------- Live Statistics: pie grid + line chart ---------- */
.pie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pie-cell {
  position: relative;
  height: 340px;
}

.line-chart-cell {
  position: relative;
  height: 657px;
}

.history-chart-cell {
  position: relative;
  height: 730px;
}

@media (max-width: 900px) {
  .pie-grid {
    grid-template-columns: 1fr;
  }
  .pie-cell {
    height: 310px;
  }
}

@media (max-width: 640px) {
  .desktop-table { display: none; }

  .topbar-center {
    display: none;
  }
}

.mobile-table {
  display: none;
}

@media (max-width: 640px) {
  .mobile-table {
    display: table;
  }

  /* Tighter than the general 5px horizontal cell padding - fitting 6
     columns (Account/Balance/Floating/Last24h/Open/Sync) on a narrow
     portrait phone without horizontal scrolling means every pixel
     between columns counts. */
  .mobile-table td,
  .mobile-table th {
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* Wider than the 640px breakpoint above on purpose: a phone in
   LANDSCAPE is typically 700-950px wide - above 640px, so it's the
   desktop table showing (not .mobile-table), but still narrow enough
   that the outer edge padding meaningfully eats into the (now much
   tighter) desktop column widths fitting without horizontal scroll. */
@media (max-width: 1000px) {
  .app {
    padding-left: 8px;
    padding-right: 8px;
  }

  .panel {
    padding-left: 8px;
    padding-right: 8px;
  }
}