/* ==============================================================
 * Structural theme utility classes — all colors via CSS vars
 * ============================================================== */
body {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--body-font);
  transition: background 0.2s, color 0.15s;
}

/* Per-theme body font — targets body * (not just body) because Tailwind
   utility classes (e.g. .font-mono) on children have explicit declarations
   that inheritance cannot override; !important on body * beats them. */
[data-theme="dark"] body,    [data-theme="dark"] body *,
[data-theme="midnight"] body,[data-theme="midnight"] body *,
[data-theme="amoled"] body,  [data-theme="amoled"] body *,
[data-theme="aurora"] body,  [data-theme="aurora"] body * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Cascadia Code", monospace !important;
}
[data-theme="soft"] body,  [data-theme="soft"] body *,
[data-theme="light"] body, [data-theme="light"] body * {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important;
}
[data-theme="glass"] body, [data-theme="glass"] body * {
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
[data-theme="valence"] body, [data-theme="valence"] body * {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Glass: vivid wallpaper + dot grid so SVG refraction is clearly visible */
[data-theme="glass"] body {
  background:
    /* Dot grid — reference grid so SVG lens warping is visible */
    radial-gradient(circle at 1px 1px, rgba(59,100,200,0.20) 1.5px, transparent 0),
    /* Soft color zones */
    radial-gradient(ellipse 85% 60% at 10% 6%,  rgba(56,110,220,0.30) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 90% 90%, rgba(120,80,220,0.26) 0%, transparent 50%),
    linear-gradient(150deg, #dbeafe 0%, #ede9fe 52%, #fce7f3 100%);
  background-size: 32px 32px, 100%, 100%, 100%;
  background-attachment: fixed;
}

/* Aurora: northern lights — three soft nebula gradients on deep void */
[data-theme="aurora"] body {
  background:
    radial-gradient(ellipse 130% 60% at 18% 25%, rgba(167,139,250,0.13) 0%, transparent 52%),
    radial-gradient(ellipse 85% 55% at 82% 80%, rgba(56,189,248,0.08) 0%, transparent 48%),
    radial-gradient(ellipse 65% 40% at 58% 2%,  rgba(244,114,182,0.07) 0%, transparent 42%),
    #0c0d1a;
  background-attachment: fixed;
}
.t-card, .ticker-wrap  { background: var(--bg-card);  border: 1px solid var(--border); border-radius: var(--radius-card, 14px); box-shadow: var(--card-shadow, none); transition: box-shadow 0.2s ease, border-color 0.15s; }
.t-deep  { background: var(--bg-deep); }
.t-border   { border-color: var(--border); }
.t-border-b { border-bottom: 1px solid var(--border); }
.t-text       { color: var(--text-primary); }
.t-text-sub   { color: var(--text-sub); }
.t-text-muted { color: var(--text-muted); }
.t-text-dim   { color: var(--text-dim); }
.t-accent     { color: var(--accent); }
.t-row-hover:hover td { background: var(--bg-hover); }

/* ==============================================================
 * Component classes
 * ============================================================== */
.gain    { color: var(--gain); }
.loss    { color: var(--loss); }
.neutral { color: var(--text-sub); }
/* Softer hint of gain/loss — used where the value carries directional meaning
 * but no objective good/bad threshold (e.g. P/E extremes). Blends with the
 * muted text colour so it sits visually closer to the neutral metrics column. */
.gain-mild { color: color-mix(in srgb, var(--gain) 55%, var(--text-muted)); }
.loss-mild { color: color-mix(in srgb, var(--loss) 55%, var(--text-muted)); }

.tab-active            { background: var(--accent); color: #fff; border: 1px solid transparent; }
.tab-inactive          { background: var(--bg-card); color: var(--text-sub); border: 1px solid var(--border); }
.tab-inactive:hover    { background: var(--bg-hover); }

/* ==============================================================
 * Keyboard focus — visible only when navigating with keyboard.
 * :focus-visible is ignored by mouse/touch so no change for
 * pointer users. Outline uses --accent so it adapts to all themes.
 * ============================================================== */
/* div-based interactive cards need explicit focus-visible; native
   button/input/select/a are covered by the generic selectors below */
.mini-chart-card:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==============================================================
 * Skip-to-content link — visually hidden until focused by keyboard
 * ============================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: var(--z-skiplink);
  text-decoration: none;
  transition: top 0.1s ease-out;
}
.skip-link:focus {
  top: 0.5rem;
}

/* Transactions tab — always uses theme accent, overrides per-theme tab overrides */
button.tab-tx,
button.tab-tx.tab-inactive { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; opacity: 0.8; }
button.tab-tx:hover        { opacity: 1; }
button.tab-tx.tab-active   { opacity: 1; }

/* Accent button — theme-aware, used for primary actions */
.btn-accent       { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-accent:hover { opacity: 0.85; }

/* Warning/destructive accent — uses --loss token so it respects themes */
.btn-accent-warn       { background: var(--loss); color: #fff; border: 1px solid var(--loss); }
.btn-accent-warn:hover { opacity: 0.85; }

th                   { cursor: pointer; user-select: none; }
th:hover             { color: var(--accent-soft); }
.sort-asc::after     { content: ' ↑'; }
.sort-desc::after    { content: ' ↓'; }

.spinner {
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%; width: 18px; height: 18px;
  animation: spin 0.8s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-lg {
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%; width: 32px; height: 32px;
  animation: spin 0.8s linear infinite;
  display: inline-block; vertical-align: middle;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* pulse keyframes — reused by .refresh-core (the freshness light in the refresh
   ring); see static/css/03-components.css. */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.lot-row               { background: var(--bg-deep); }
tr.expandable          { cursor: pointer; }
tr.expandable:hover td { background: var(--bg-hover) !important; }
.lot-row tr:hover td   { background: var(--bg-card) !important; }

.period-btn              { padding: 3px 10px; border-radius: var(--radius-sm, 6px); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.12s ease-out; }
.period-active           { background: var(--accent); color: #fff; }

/* ── Perf-bar info tooltip ── */
.perf-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.perf-info-icon {
  font-size: 0.95rem;
  line-height: 0;
  cursor: default;
  opacity: 0.4;
  transition: opacity 0.15s;
  user-select: none;
}
.info-svg {
  display: inline-block;
  vertical-align: middle;
}
.perf-info-wrap:hover .perf-info-icon { opacity: 0.85; }
.perf-info-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--text-sub);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: var(--z-tooltip);
  pointer-events: none;
  white-space: normal;
}
.perf-info-wrap:hover .perf-info-tip { display: block; }
/* .period-inactive visual treatment is shared via the universal .btn-soft
   group in 03-components.css; size/typography come from .period-btn above.
   Per-theme overrides ([data-theme=...] .period-inactive) still cascade. */

.mini-chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card, 10px); cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.2s ease;
  overflow: hidden;
}
.mini-chart-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--card-shadow-hover, 0 4px 20px rgba(0,0,0,0.3)); }
/* Keep mini-chart canvas bounded by its 170px wrapper — Preflight's canvas{display:block} allows the absolute-positioned canvas to bleed past if parent height were ever unset */
.mini-chart-card canvas { max-width: 100%; max-height: 100%; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-deep) 25%, var(--border) 50%, var(--bg-deep) 75%);
  background-size: 200% 100%; animation: mc-shimmer 1.4s infinite; border-radius: 4px;
}
.skeleton.mc-sk {
  background: linear-gradient(90deg, transparent 25%, var(--border) 50%, transparent 75%);
  background-size: 200% 100%;
}
@keyframes mc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.chart-sk {
  position: absolute; inset: 0; border-radius: var(--radius-card, 8px);
  background: linear-gradient(90deg, transparent 25%, var(--border) 50%, transparent 75%);
  background-size: 200% 100%; animation: mc-shimmer 1.6s ease-in-out infinite;
  z-index: 10; pointer-events: none; opacity: 0.85;
}
.card-loading { opacity: 0.4; pointer-events: none; }

/* ── Summary card enhancements ── */

/* A: Icon next to label — SVG variant */
.card-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.45;
  color: var(--text-sub);
}

/* E: Divider rule between headline and sub-metrics */
.card-divider {
  height: 1px;
  background: var(--border);
  margin-top: 8px;
  opacity: 0.7;
}

/* D: Trend arrow — colour is set via gain/loss class in JS */
.trend-arrow {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

/* C: Allocation bar in Positions card */
.alloc-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-deep);
}
.alloc-seg {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.alloc-stocks { background: var(--chart-stock); }
.alloc-etfs   { background: var(--accent-soft); opacity: 0.75; }
.alloc-crypto { background: var(--chart-crypto); }

/* Skeleton shimmer for text-sized placeholders */
.sk-line {
  display: inline-block; border-radius: 4px; height: 0.9em; vertical-align: middle;
  background: linear-gradient(90deg, var(--bg-deep) 25%, var(--border) 50%, var(--bg-deep) 75%);
  background-size: 200% 100%; animation: mc-shimmer 1.4s infinite;
}