/* ============================================================
   Treasury dashboard (page 1) — layered on style.css.

   Load order matters: style.css first, then this file. Rules here
   win ties at equal specificity.

   COLOUR IS SEMANTIC ON THIS PAGE, not decorative. getColorClass()
   in live_dashboard.py maps margin-buffer % to .red/.yellow/.green
   (<15 / 15-23 / >=23). Those thresholds live in the JS and must
   not change. This file only restates what each state LOOKS like,
   remapped from the old standalone palette onto NDAD's tokens:

     old #ff4444 danger   -> var(--neg)     rose
     old #ffaa00 caution  -> var(--amber)
     old #00ff99 healthy  -> var(--pos)     teal
     old #ffd700 liq/IM   -> var(--amber)   "read this number"
     old #e8b009 total    -> var(--violet)  portfolio total band
     old #0ff    accent   -> var(--accent)
   ============================================================ */

/* ---------- semantic state colours ---------- */
.red    { color: var(--neg);   font-weight: 700; }
.yellow { color: var(--amber); font-weight: 700; }
.green  { color: var(--pos);   font-weight: 700; }

td.numeric.red,    td.liq-buffer-pct-row.red,    td.pim-current-margin.red    { color: var(--neg)   !important; font-weight: 600; }
td.numeric.yellow, td.liq-buffer-pct-row.yellow, td.pim-current-margin.yellow { color: var(--amber) !important; font-weight: 600; }
td.numeric.green,  td.liq-buffer-pct-row.green,  td.pim-current-margin.green  { color: var(--pos)   !important; font-weight: 600; }

/* ---------- page shell ---------- */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h2, h3 {
  color: var(--accent);
  text-align: center;
  margin: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
}

#mainWrapper {
  width: 96%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 10px;
}

/* .section is this page's panel; mirror NDAD's .panel treatment */
.section {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

/* ---------- tables ----------
   style.css already gives: right-aligned, nowrap, tabular-nums mono
   cells, sticky uppercase headers, left-aligned first column. Only
   the things specific to these wide risk tables are restated here. */
table {
  width: 96%;
  max-width: 1600px;
  margin: 10px auto;
}
.section table { width: 100%; margin: 0; }

thead th { background: var(--surface-2); color: var(--accent); }

/* dense grid: NDAD uses bottom-rules only, but these tables are wide
   enough that column separation genuinely aids reading across a row */
th, td { border-right: 1px solid var(--line); }
th:last-child, td:last-child { border-right: 0; }

#positionsTable { font-size: 14px; }
#positionsTable td, #positionsTable th { padding: 8px 10px; }

#spotTable {
  width: 100%;
  font-weight: 600;
  margin-bottom: 12px;
}
#spotTable td { padding: 6px 12px; }

/* ---------- meaning-bearing rows ---------- */

/* liquidation price + IM value: "read this number" */
tr.liq-price-row td,
tr.liq-buffer-pct-row td { font-size: 1.05rem; font-weight: 600; }
tr.liq-price-row td.value-cell { color: var(--amber); }
td.value-cell.liq-price-row {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--amber) !important;
  padding-top: 6px;
  padding-bottom: 6px;
}
td.liq-buffer-pct-row { font-size: 1.05rem; font-weight: 700; }
tr.liq-price-row td:first-child,
tr.liq-buffer-pct-row td:first-child { font-size: 1.08rem; font-weight: 700; }

/* wallet rows */
tr.wallet td { font-size: 14px; color: var(--amber); font-weight: 700; }

/* subtotal band */
tr.subtotal td { background: var(--surface-2); font-weight: 700; color: var(--accent); }

/* portfolio total — the loudest band on the page */
tr.total-portfolio td {
  background: var(--violet);
  color: var(--bg);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

/* summary highlight rows (were light-yellow bands in the old palette) */
.total-summary,
.total-summary td,
.total-summary th {
  background: var(--surface-3) !important;
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  color: var(--ink);
  font-weight: 600;
}
.highlight-summary td {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--bg) !important;
  background: var(--amber) !important;
}

/* ---------- Portfolio IM Monitor ---------- */
.portfolio-im-monitor { margin-top: 1.25rem; }
.pim-title { font-size: 1.05rem; margin: 0 0 0.5rem; font-weight: 600; }
.pim-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  overflow-x: auto;
}
.pim-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.95rem; }
.pim-table thead th {
  text-align: left;
  padding: 8px 10px;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.pim-table tbody td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pim-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
td.pim-current-margin { font-size: 1.10rem; font-weight: 700; }
.pim-missing { color: var(--ink-3); font-style: italic; }

@media (max-width: 680px) {
  .pim-box { overflow-x: auto; }
  .pim-table { min-width: 720px; }
}

/* ---------- controls ---------- */
.controls { text-align: center; margin: 10px; }

button {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 3px;
  font: 600 12.5px var(--font-body);
  cursor: pointer;
}
button:hover { color: var(--ink); border-color: var(--accent); }

#posUsdWrap { display: flex; align-items: center; justify-content: center; gap: 12px; }
#posUsdWrap label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }

/* ---------- gauges ---------- */
#gaugesRow { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.gauge-box {
  flex: 1 1 220px;
  max-width: 250px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gauge-title { color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.gauge-inner { width: 100%; height: 130px; }
#gaugePie { width: 100%; height: 260px; background: transparent; }

/* ---------- misc ---------- */
footer { text-align: center; color: var(--ink-3); margin: 10px; font-size: 13px; }
.prices-footer { margin-top: 6px; text-align: right; font-size: 0.80rem; color: var(--ink-2); padding-right: 6px; }
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}