/* ==========================================================================
   BOTSOL dashboard — Surface B layout.
   Loads AFTER botsol.css and uses its tokens. The dark ground comes from
   data-theme="dark" on <html>; nothing here redefines a colour literal.
   ========================================================================== */

.dash { padding-bottom: var(--s-16); }

/* ── Header strip ───────────────────────────────────────────────────────── */

.dash-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
}
.dash-head-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.dash-ident { display: flex; align-items: baseline; gap: var(--s-2); }
.dash-version { font-size: var(--fs-xs); color: var(--text-muted); }

/* FE-S1: the bot state is the largest signal on the page. */
.dash-state {
  font-size: var(--fs-sm);
  padding: 6px 14px 6px 11px;
}
.dash-state::before { width: 9px; height: 9px; }

.dash-licence {
  cursor: pointer; font-family: inherit;
}
.dash-licence[data-actionable="false"] { cursor: default; }

.dash-fresh {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted);
}
.dash-stale { margin: 0 var(--s-4) var(--s-3); }

/* Whole-page degradation when updates stop (FE-S3). Stale data on a trading
   screen is worse than no data, so it must look visibly wrong. */
body[data-stale="true"] .dash-grid,
body[data-stale="true"] .log-card {
  opacity: 0.45;
  filter: saturate(0.4);
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin: var(--s-6) 0 var(--s-6);
}
.tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  color: var(--text-muted);
  font: inherit; font-weight: 650; font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

.panel { padding-bottom: var(--s-8); }

/* ── Cards grid ─────────────────────────────────────────────────────────── */

.dash-grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.plain-list li:last-child { border-bottom: 0; }

/* ── Log ────────────────────────────────────────────────────────────────── */

.log-card { margin-top: var(--s-4); position: relative; }
.log-controls { display: flex; gap: var(--s-2); align-items: center; }
.log-controls select {
  min-height: 32px; padding: 2px var(--s-2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-xs);
}
.log {
  height: 320px; overflow-y: auto;
  background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6;
}
.log-line { display: flex; gap: var(--s-2); padding: 1px 0; }
.log-time { color: var(--text-muted); flex: none; }
.log-level {
  flex: none; width: 46px; font-weight: 700;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em;
  padding-top: 1px;
}
.log-msg { word-break: break-word; }
.log-line[data-level="error"] .log-level { color: var(--danger); }
.log-line[data-level="trade"] .log-level { color: var(--success); }
/* A skip is normal operation — neutral, never styled as an error (FE-S10). */
.log-line[data-level="skip"]  .log-level { color: var(--text-muted); }
.log-line[data-level="info"]  .log-level { color: var(--text-muted); }

.log-jump {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
}
.log-empty { color: var(--text-muted); padding: var(--s-4); text-align: center; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.dash-foot {
  border-top: 1px solid var(--border);
  padding: var(--s-6) 0;
  margin-top: var(--s-8);
}

@media (max-width: 560px) {
  .dash-fresh { margin-left: 0; width: 100%; }
}
