/* =============================================================================
   StockBrain — Stock Analysis Broker UI theme
   BEM-inspired, domain-scoped classes. Bootstrap 5 utilities handle layout;
   this file owns theming (CSS custom properties), domain components, and the
   semantic recommendation/staleness color system.
   ============================================================================= */

/* ----- Design tokens (light is default; [data-theme="dark"] overrides) ----- */
:root {
  /* Brand */
  --sb-navy: #0f172a;
  --sb-navy-700: #1e293b;
  --sb-navy-600: #334155;
  --sb-accent: #3b82f6;          /* electric blue */
  --sb-accent-600: #2563eb;
  --sb-accent-soft: rgba(59, 130, 246, 0.12);

  /* Semantic recommendation colors (icon + color, never color alone) */
  --sb-buy:    #10b981;          /* emerald */
  --sb-buy-bg: rgba(16, 185, 129, 0.14);
  --sb-sell:    #ef4444;         /* red */
  --sb-sell-bg: rgba(239, 68, 68, 0.14);
  --sb-hold:    #f59e0b;         /* amber */
  --sb-hold-bg: rgba(245, 158, 11, 0.16);
  --sb-avoid:    #64748b;        /* slate */
  --sb-avoid-bg: rgba(100, 116, 139, 0.16);

  /* Confidence thresholds */
  --sb-conf-high: #10b981;       /* >70% */
  --sb-conf-mid:  #f59e0b;       /* 40-70% */
  --sb-conf-low:  #ef4444;       /* <40% */

  /* Staleness */
  --sb-fresh: #10b981;
  --sb-aging: #f59e0b;
  --sb-stale: #ef4444;

  /* Surfaces (light theme) */
  --sb-bg:        #f1f5f9;
  --sb-surface:   #ffffff;
  --sb-surface-2: #f8fafc;
  --sb-border:    #e2e8f0;
  --sb-text:      #0f172a;
  --sb-text-muted:#64748b;
  --sb-sidebar-bg:   #0f172a;
  --sb-sidebar-text: #cbd5e1;
  --sb-sidebar-active-bg: rgba(59,130,246,0.18);

  --sb-radius: 0.75rem;
  --sb-radius-sm: 0.5rem;
  --sb-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --sb-shadow-lg: 0 10px 25px -5px rgba(15,23,42,0.15);
}

[data-theme="dark"] {
  --sb-bg:        #0b1120;
  --sb-surface:   #111c33;
  --sb-surface-2: #0f1830;
  --sb-border:    #233152;
  --sb-text:      #e2e8f0;
  --sb-text-muted:#94a3b8;
  --sb-sidebar-bg:   #0a0f1d;
  --sb-sidebar-text: #cbd5e1;
  --sb-sidebar-active-bg: rgba(59,130,246,0.24);
  --sb-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --sb-shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.6);
}

/* ----- Base ----- */
body {
  background: var(--sb-bg);
  color: var(--sb-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sb-accent); }
.text-muted-2 { color: var(--sb-text-muted) !important; }

/* ----- App shell layout ----- */
.sb-app { min-height: 100vh; }

.sb-navbar {
  background: var(--sb-navy);
  color: #fff;
  height: 60px;
  box-shadow: var(--sb-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.sb-navbar__brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.sb-navbar__brand .bi { color: var(--sb-accent); }

.sb-layout { display: flex; align-items: stretch; }

.sb-sidebar {
  background: var(--sb-sidebar-bg);
  color: var(--sb-sidebar-text);
  width: 240px;
  flex: 0 0 240px;
  min-height: calc(100vh - 60px);
  padding: 1rem 0.75rem;
  transition: width 0.2s ease, flex-basis 0.2s ease;
  position: sticky;
  top: 60px;
  align-self: flex-start;
}
.sb-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--sb-radius-sm);
  color: var(--sb-sidebar-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 0.15rem;
}
.sb-sidebar__link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-sidebar__link.active { background: var(--sb-sidebar-active-bg); color: #fff; }
.sb-sidebar__link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.sb-sidebar__label { transition: opacity 0.15s ease; }

/* Collapsed state (toggled by JS, persisted in localStorage) */
.sb-app.is-collapsed .sb-sidebar { width: 64px; flex-basis: 64px; }
.sb-app.is-collapsed .sb-sidebar__label { opacity: 0; display: none; }
.sb-app.is-collapsed .sb-sidebar__link { justify-content: center; }

.sb-main { flex: 1 1 auto; min-width: 0; padding: 1.5rem; }

@media (max-width: 768px) {
  .sb-sidebar { position: fixed; left: 0; z-index: 1040; transform: translateX(-100%); transition: transform 0.2s ease; }
  .sb-app.is-mobile-open .sb-sidebar { transform: translateX(0); }
  .sb-main { padding: 1rem; }
}

/* ----- Cards / surfaces ----- */
.sb-card {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
}
.sb-card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sb-border);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-card__body { padding: 1.25rem; }

/* Summary stat cards */
.sb-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.sb-stat__label { font-size: 0.8rem; color: var(--sb-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sb-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sb-stat__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sb-accent-soft); color: var(--sb-accent); font-size: 1.4rem;
}

/* P&L coloring */
.sb-pnl--up   { color: var(--sb-buy); }
.sb-pnl--down { color: var(--sb-sell); }

/* ----- Recommendation badge (icon + color, WCAG: not color alone) ----- */
.sb-rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.sb-rec-badge--buy   { color: var(--sb-buy);   background: var(--sb-buy-bg); }
.sb-rec-badge--sell  { color: var(--sb-sell);  background: var(--sb-sell-bg); }
.sb-rec-badge--hold  { color: var(--sb-hold);  background: var(--sb-hold-bg); }
.sb-rec-badge--avoid { color: var(--sb-avoid); background: var(--sb-avoid-bg); }

/* ----- Confidence bar ----- */
.sb-conf { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.sb-conf__track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--sb-border); overflow: hidden;
}
.sb-conf__fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.sb-conf__fill--high { background: var(--sb-conf-high); }
.sb-conf__fill--mid  { background: var(--sb-conf-mid); }
.sb-conf__fill--low  { background: var(--sb-conf-low); }
.sb-conf__value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; min-width: 38px; text-align: right; }

/* Confidence ring (SVG) on recommendation header */
.sb-conf-ring { position: relative; width: 120px; height: 120px; }
.sb-conf-ring__text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sb-conf-ring__pct { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.sb-conf-ring__caption { font-size: 0.7rem; color: var(--sb-text-muted); text-transform: uppercase; }

/* ----- Staleness badge ----- */
.sb-stale-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  border: 1px solid transparent;
}
.sb-stale-badge--fresh { color: var(--sb-fresh); background: rgba(16,185,129,0.12); }
.sb-stale-badge--aging { color: var(--sb-aging); background: rgba(245,158,11,0.14); }
.sb-stale-badge--stale { color: var(--sb-stale); background: rgba(239,68,68,0.14); border-color: var(--sb-stale); }
.sb-stale-badge .bi { font-size: 0.75rem; }

/* ----- Agent signal cards ----- */
.sb-agent-card {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.9rem;
  background: var(--sb-surface-2);
  height: 100%;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sb-agent-card__head { display: flex; align-items: center; justify-content: space-between; }
.sb-agent-card__name { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.sb-agent-card__status .bi { font-size: 0.9rem; }
.sb-agent-card__reason { font-size: 0.85rem; color: var(--sb-text-muted); }

/* Agent run states (analysis progress) */
.sb-agent-run { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.sb-agent-run__icon { width: 28px; text-align: center; }
.sb-agent-run--pending .sb-agent-run__icon { color: var(--sb-text-muted); }
.sb-agent-run--running .sb-agent-run__icon { color: var(--sb-accent); }
.sb-agent-run--done    .sb-agent-run__icon { color: var(--sb-buy); }
.sb-agent-run--failed  .sb-agent-run__icon { color: var(--sb-sell); }

.sb-spinner-sm {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: sb-spin 0.7s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ----- Conflict alert ----- */
.sb-conflict {
  border-left: 4px solid var(--sb-hold);
  background: var(--sb-hold-bg);
}

/* ----- Radio cards (risk profile / horizon selectors) ----- */
.sb-radio-card { position: relative; height: 100%; }
.sb-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.sb-radio-card__body {
  display: block;
  border: 2px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 1rem;
  cursor: pointer;
  height: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--sb-surface);
}
.sb-radio-card input:checked + .sb-radio-card__body {
  border-color: var(--sb-accent);
  background: var(--sb-accent-soft);
}
.sb-radio-card input:focus-visible + .sb-radio-card__body {
  outline: 2px solid var(--sb-accent); outline-offset: 2px;
}
.sb-radio-card__title { font-weight: 600; }
.sb-radio-card__desc { font-size: 0.8rem; color: var(--sb-text-muted); }

/* ----- Tables ----- */
.sb-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sb-table th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sb-text-muted); font-weight: 600;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sb-border); text-align: left;
}
.sb-table td { padding: 0.75rem; border-bottom: 1px solid var(--sb-border); vertical-align: middle; }
.sb-table tbody tr:hover { background: var(--sb-surface-2); }
.sb-table .sb-symbol { font-weight: 700; }

/* ----- Trade approval friction styling ----- */
/* Distinct (not default green) so it cannot be clicked casually */
.sb-btn-approve {
  background: #7c3aed;          /* violet — intentionally not green */
  border-color: #7c3aed;
  color: #fff;
  font-weight: 600;
}
.sb-btn-approve:hover:not(:disabled) { background: #6d28d9; border-color: #6d28d9; color:#fff; }
.sb-btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }
.sb-approve-warning {
  border: 1px solid var(--sb-sell);
  background: var(--sb-sell-bg);
  color: var(--sb-text);
  border-radius: var(--sb-radius);
}
.sb-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ----- Empty / loading states ----- */
.sb-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sb-text-muted); }
.sb-empty .bi { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; opacity: 0.6; }

/* ----- Toasts container ----- */
.sb-toast-area { position: fixed; top: 76px; right: 1rem; z-index: 1080; max-width: 360px; }

/* ----- Signal list ----- */
.sb-signal { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; }
.sb-signal--pos .bi { color: var(--sb-buy); }
.sb-signal--neg .bi { color: var(--sb-sell); }
.sb-signal--neu .bi { color: var(--sb-text-muted); }

/* Bootstrap surface harmonization in dark mode */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .list-group-item {
  background-color: var(--sb-surface);
  color: var(--sb-text);
  border-color: var(--sb-border);
}
[data-theme="dark"] .form-control::placeholder { color: var(--sb-text-muted); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--sb-border); }
[data-theme="dark"] .table { color: var(--sb-text); }