/* StoxCredit dashboard, premium pass (#dashboardView).
   Presentation only: no balance, valuation, Morpho, Perps, or health-factor logic lives here.
   Colors are the existing tokens (white surfaces, brand blue, dark text, neutral borders). */

/* ---------- Wallet row: wallet value and allocation side by side ---------- */
#dashboardView .tidy-wallet-row { align-items: stretch; }
#dashboardView #dashboardWalletTotal { align-self: stretch; }
#dashboardView .sc-risk-link { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--sc-brand, #2456e0); text-decoration: none; }
#dashboardView .sc-risk-link:hover { text-decoration: underline; }
/* The footer follows the content: a smaller bottom gap than the older dashboard padding. */
html[data-site-route="dashboard"] body.app-mode #dashboardView.dashboard-shell { padding-bottom: 40px; }
@media (max-width: 720px) {
  html[data-site-route="dashboard"] body.app-mode #dashboardView.dashboard-shell { padding-bottom: 28px; }
}
#dashboardView #dashboardWalletTotal {
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  background: var(--sc-raised, #fff);
}
#dashboardView #dashboardWalletValue {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  transition: opacity .25s ease;
}

/* Allocation panel: donut and legend */
#dashboardView .tidy-wallet-row > #scAlloc { flex: 1 1 400px; max-width: 540px; }
#dashboardView .sc-alloc {
  margin: 0;
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  background: var(--sc-raised, #fff);
  min-width: 0;
}
#dashboardView .sc-alloc-empty { margin: 0; grid-column: 1 / -1; color: var(--sc-muted, #5f6b73); font-size: 13px; }
#dashboardView .sc-donut-wrap { position: relative; width: 118px; height: 118px; }
#dashboardView .sc-donut { width: 118px; height: 118px; transform: rotate(-90deg); overflow: visible; }
#dashboardView .sc-seg {
  transition: opacity .2s ease, stroke-width .2s ease;
  animation: sc-seg-in .6s cubic-bezier(.22, 1, .36, 1) both;
  cursor: default;
}
#dashboardView .sc-seg:hover, #dashboardView .sc-seg.is-active { stroke-width: 19; }
#dashboardView .sc-alloc.has-active .sc-seg:not(.is-active) { opacity: .35; }
#dashboardView .sc-donut-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
#dashboardView .sc-donut-center span { font-size: 11px; color: var(--sc-muted, #5f6b73); }
#dashboardView .sc-donut-center strong { font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.2; }
#dashboardView .sc-donut-center small { font-size: 11px; color: var(--sc-muted, #5f6b73); }
#dashboardView .sc-legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  max-height: 128px; overflow-y: auto; min-width: 0;
}
#dashboardView .sc-legend li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 4px 6px; border-radius: 8px; font-size: 13px;
  transition: background-color .2s ease;
}
#dashboardView .sc-legend li.is-active { background: color-mix(in srgb, var(--sc-brand, #2456e0) 7%, transparent); }
#dashboardView .sc-swatch { width: 10px; height: 10px; border-radius: 3px; }
#dashboardView .sc-leg-ticker { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboardView .sc-leg-pct { font-variant-numeric: tabular-nums; color: var(--sc-muted, #5f6b73); }
#dashboardView .sc-leg-val { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

@keyframes sc-seg-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Asset table: compact rows, aligned numbers ---------- */
#dashboardView .dashboard-balance-table th,
#dashboardView .dashboard-balance-table td { padding: 10px 12px; }
#dashboardView .dashboard-balance-table .dashboard-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dashboardView .dashboard-balance-row { transition: background-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  #dashboardView .dashboard-balance-row:hover td { background: color-mix(in srgb, var(--sc-brand, #2456e0) 3%, transparent); }
}
#dashboardView .dashboard-balance-actions a {
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  #dashboardView .dashboard-balance-actions a:hover { transform: translateY(-1px); }
}
#dashboardView .dashboard-balance-actions a:focus-visible { outline: 2px solid var(--sc-brand, #2456e0); outline-offset: 2px; }

/* Empty and message rows: compact, not tall */
#dashboardView .dashboard-message-cell { padding: 16px 12px; text-align: center; }
#dashboardView .dashboard-message-cell strong { display: block; font-size: 14px; }
#dashboardView .dashboard-message-cell span { display: block; margin-top: 4px; font-size: 13px; color: var(--sc-muted, #5f6b73); }

/* ---------- Section entrance (once, subtle) ---------- */
@media (prefers-reduced-motion: no-preference) {
  #dashboardView #dashboardContent > section,
  #dashboardView #dashboardContent .dashboard-pair > section,
  #dashboardView #dashboardContent > .sc-overview {
    animation: sc-dash-in .45s cubic-bezier(.22, 1, .36, 1) both;
  }
  #dashboardView #dashboardContent > .sc-overview { animation-delay: 0ms; }
  #dashboardView #dashboardContent > section.dashboard-balances { animation-delay: 60ms; }
  #dashboardView #dashboardContent .dashboard-pair > section { animation-delay: 120ms; }
}
@keyframes sc-dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  #dashboardView .tidy-wallet-row > #scAlloc { flex-basis: 100%; max-width: none; }
}
@media (max-width: 520px) {
  #dashboardView .sc-alloc { grid-template-columns: 1fr; justify-items: center; }
  #dashboardView .sc-legend { width: 100%; max-height: none; overflow: visible; }
  #dashboardView .dashboard-balance-table th,
  #dashboardView .dashboard-balance-table td { padding: 9px 8px; }
}

/* ---------- Reduced motion: keep the data, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  #dashboardView *, #dashboardView *::before, #dashboardView *::after {
    animation: none !important;
    transition: none !important;
  }
}