/*
 * FirstValue | Corporate Trust v1
 * Visual-only layer: keeps FastAPI, existing DOM IDs, and vanilla-JS interactions.
 * Preview branch only; do not merge without desktop/mobile QA.
 */

/* Design tokens ------------------------------------------------------------ */
:root {
  --bg:#0d1223; --sidebar:#11182b; --surface:#18213a; --surface2:#202d49;
  --surface3:#283755; --edge:#354360; --text:#edf2ff; --muted:#b1bdd5;
  --soft:#8f9bb9; --primary:#a5b4fc; --primary-dark:#4f46e5;
  --primary-surface:#282d60; --green:#6ee7b7; --red:#fda4af;
  --blue:#93c5fd; --shadow:0 8px 28px -8px rgba(6,10,26,.35);
  --radius:16px; --ct-brand:#818cf8; --ct-second:#a78bfa;
  --ct-glow:rgba(99,102,241,.20); --ct-hover:rgba(99,102,241,.10);
  --ct-card-shadow:0 8px 24px -8px rgba(6,10,26,.25);
  --ct-depth-shadow:0 16px 42px -16px rgba(6,10,26,.40);
}
html[data-theme="light"] {
  --bg:#f8fafc; --sidebar:#fff; --surface:#fff; --surface2:#f1f5f9;
  --surface3:#e9eef8; --edge:#e2e8f0; --text:#0f172a; --muted:#64748b;
  --soft:#64748b; --primary:#4f46e5; --primary-dark:#4338ca;
  --primary-surface:#eef2ff; --green:#047857; --red:#be123c;
  --blue:#1d4ed8; --shadow:0 5px 20px -2px rgba(79,70,229,.09);
  --ct-brand:#4f46e5; --ct-second:#7c3aed;
  --ct-glow:rgba(79,70,229,.12); --ct-hover:rgba(79,70,229,.05);
  --ct-card-shadow:0 4px 20px -2px rgba(79,70,229,.09);
  --ct-depth-shadow:0 16px 36px -12px rgba(79,70,229,.17);
}
html {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body {font-family:inherit; background:var(--bg); color:var(--text)}
button,input,select,textarea {font-family:inherit}
::selection {background:color-mix(in srgb,var(--primary) 25%,transparent);color:var(--text)}
:where(button,input,select,textarea,a):focus-visible {
  outline:2px solid var(--primary);outline-offset:3px;
}
:where(.button,.side-link,.metric-tile,.surface-card,.ratio-card,.suggestion,.tab,.news-article) {
  transition:background-color .2s ease,border-color .2s ease,box-shadow .22s ease,
             color .2s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}

/* Shell / navigation ------------------------------------------------------- */
.workspace {min-height:100dvh; background:var(--bg)}
.sidebar {
  background:var(--sidebar);
  box-shadow:4px 0 24px rgba(30,41,59,.025);
  border-right:1px solid var(--edge);
  width:248px;
}
.sidebar-brand {padding:29px 23px 39px}
.brand-symbol {
  background:linear-gradient(135deg,#4f46e5 8%,#7c3aed 93%);
  color:#fff;border-radius:14px; box-shadow:0 5px 15px rgba(79,70,229,.25);
  font-weight:700;
}
.brand-wordmark {font-size:14px;font-weight:800;letter-spacing:-.025em}
.brand-wordmark span {font-weight:800;color:var(--ct-second)}
.brand-wordmark small {font-weight:700;letter-spacing:.115em;color:var(--soft)}
.menu-title {color:var(--soft);font-size:9px;letter-spacing:.12em}
.side-nav {gap:5px;padding:0 12px}
.side-link {border-radius:11px;padding:12px 13px;font-weight:600}
.side-link:hover {background:var(--ct-hover);color:var(--primary)}
.side-link.active {
  background:var(--primary-surface);color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary);border-radius:11px;
}
.side-count {color:var(--primary);background:var(--surface3)}
.source-pulse {border:1px solid var(--edge);background:var(--surface2);font-weight:600}
.profile-row {background:var(--sidebar)}
.avatar,.top-user {border-radius:12px;background:var(--primary-surface);color:var(--primary)}
.topbar {
  height:75px;gap:20px;
  border-bottom:1px solid var(--edge);
  background:color-mix(in srgb,var(--bg) 91%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.crumb strong {font-weight:700;color:var(--text)}
.top-search {width:min(520px,100%)}
.top-search input {
  height:46px; border:1px solid var(--edge);border-radius:12px;
  background:var(--surface);color:var(--text);font-size:12px;font-weight:500;
  box-shadow:0 2px 9px rgba(30,41,59,.025);
}
.top-search input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent),
             0 8px 24px -11px var(--ct-glow);
}
.shortcut {background:var(--surface2);border-radius:6px}
.autocomplete {
  background:var(--surface);border:1px solid var(--edge);border-radius:14px;
  box-shadow:var(--ct-depth-shadow);
}
.suggestion {border-radius:10px}
.suggestion:hover,.suggestion.active {background:var(--primary-surface)}
.suggestion:focus-visible {outline:2px solid var(--primary);outline-offset:-2px}
.mini-logo {border-radius:10px}
.main {position:relative}
.main-scroll {position:relative}
.main-scroll::before {
  content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:420px;
  pointer-events:none;
  background:
    radial-gradient(ellipse 360px 220px at 12% 0%,rgba(99,102,241,.085),transparent 72%),
    radial-gradient(ellipse 440px 220px at 95% 2%,rgba(124,58,237,.07),transparent 78%);
}
.page-content {position:relative;z-index:1;max-width:1580px;padding:35px 36px 48px}
.section-overline {color:var(--primary);font-size:10px;letter-spacing:.13em;font-weight:800}
.page-heading {align-items:center;margin-bottom:22px;gap:20px}
.identity-row {gap:16px}
.company-monogram {
  border-radius:16px;
  background:linear-gradient(140deg,#4f46e5,#7c3aed);
  color:#fff;box-shadow:0 8px 19px -6px var(--ct-glow);font-weight:800;
}
.company-text h1 {font-size:clamp(24px,2.45vw,35px);font-weight:800;letter-spacing:-.04em}
.identity-chips {font-size:10px;gap:7px}
.identity-chips>* {
  background:var(--surface);border:1px solid var(--edge);
  padding:5px 10px;border-radius:8px;font-weight:600;
}
.identity-chips strong {background:var(--primary-surface);border-color:transparent;color:var(--primary)}
.company-caption {margin-top:12px;font-size:12px}

/* CT buttons and research controls ---------------------------------------- */
.button {min-height:43px;border-radius:11px;font-size:11px;font-weight:800;letter-spacing:.002em}
.button.primary {
  color:#fff;
  background:linear-gradient(110deg,#4f46e5,#7c3aed);
  box-shadow:0 4px 14px rgba(79,70,229,.20);
}
.button.primary:hover {box-shadow:0 8px 18px rgba(79,70,229,.27);transform:translateY(-1px)}
.button.secondary {background:var(--primary-surface);color:var(--primary)}
.button.secondary:hover {background:color-mix(in srgb,var(--primary) 13%,var(--surface))}
.button.outline {border:1px solid var(--edge);background:var(--surface)}
.button.outline:hover {border-color:var(--primary);color:var(--primary)}
.button:active {transform:translateY(0)}
.button.small {border-radius:9px;min-height:35px}
.data-bar {
  border-radius:12px;background:var(--surface);border:1px solid var(--edge);
  padding:11px 16px;color:var(--muted);box-shadow:0 2px 9px rgba(30,41,59,.02);
}
.data-bar-main strong {font-weight:800;color:var(--text);letter-spacing:.08em}
.tiny-circle,.pulse-dot {background:var(--green)}

/* Metrics / financial cards ------------------------------------------------ */
.quick-metrics {gap:14px;margin-bottom:27px}
.metric-tile {
  position:relative;overflow:hidden;min-height:135px;
  background:var(--surface);border:1px solid var(--edge);
  border-radius:15px;padding:21px 18px;box-shadow:var(--ct-card-shadow);
}
.metric-tile::before {
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  opacity:.56;
}
.metric-tile:hover {
  transform:translateY(-2px);box-shadow:var(--ct-depth-shadow);
  border-color:color-mix(in srgb,var(--primary) 25%,var(--edge));
}
.metric-title {font-size:11px;font-weight:600;color:var(--muted)}
.metric-value {font-size:clamp(19px,1.8vw,27px);font-weight:800;letter-spacing:-.045em}
.metric-foot {font-size:10px}
.source-link {color:var(--primary);font-weight:700}
.content-layout {min-width:0}
.tabs {gap:21px;border-bottom-color:var(--edge)}
.tab {font-weight:600;font-size:11px;padding-bottom:14px}
.tab.active {font-weight:800}
.panel {padding-top:20px}
.surface-card,.ratio-card {
  border:1px solid var(--edge);background:var(--surface);
  border-radius:16px;box-shadow:var(--ct-card-shadow);
}
.surface-card {padding:23px}
.surface-card:hover,.ratio-card:hover {
  border-color:color-mix(in srgb,var(--primary) 17%,var(--edge));
  box-shadow:0 9px 30px -10px var(--ct-glow);
}
.card-title {font-size:14px;font-weight:800;letter-spacing:-.015em}
.card-sub {font-size:11px;line-height:1.55}
.card-meta {font-weight:700;color:var(--soft)}
.empty-chart {border-radius:13px;background:var(--surface2);border-color:var(--edge)}
.empty-chart h3 {font-weight:800}
.ratio-card {padding:20px}
.ratio-card .value {font-weight:800}
.overview-grid,.split-grid,.valuation-layout,.journal-layout {gap:16px}
.news-overview {padding:22px 23px}
.news-headline {font-weight:700}
.news-article:hover {background:var(--ct-hover)}
.news-publisher,.news-more {color:var(--primary)}
.news-filters {border-radius:11px}
.news-filter {border-radius:8px;font-weight:600}
.news-filter.is-selected {box-shadow:var(--shadow)}
.source-grid {gap:16px}
.source-top {font-weight:800}
.status-pill {font-weight:700}

/* Tables remain dense and scannable: not decorative/isometric ------------ */
.research-table {background:var(--surface);font-variant-numeric:tabular-nums}
.research-table th {
  color:var(--muted);font-size:10px;letter-spacing:.035em;
  background:var(--surface2);font-weight:800;
}
.research-table td {font-size:11px}
.research-table tr:hover td {background:var(--ct-hover)}
.research-table .emph td {background:var(--primary-surface)}
.financial-row span {font-size:11px}
.financial-row strong {font-weight:800;font-variant-numeric:tabular-nums}
.input-field,.select-field,.note-editor,.login-form input {
  background:var(--surface);color:var(--text);
  border:1px solid var(--edge);border-radius:10px;font-size:12px;
}
.input-field:focus,.select-field:focus,.note-editor:focus,.login-form input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
.input-label {color:var(--text);font-weight:700}
.note-editor {line-height:1.75}
.soft-alert,.empty-info,.loading-banner,.error-box {border-radius:13px}
.soft-alert {background:var(--primary-surface);border-color:var(--edge)}
.footer {font-size:10px}

/* Authentication ----------------------------------------------------------- */
.sign-in-wrap {
  min-height:100dvh;
  background:
    radial-gradient(circle 440px at 20% 8%,rgba(79,70,229,.12),transparent 72%),
    radial-gradient(circle 460px at 85% 88%,rgba(124,58,237,.10),transparent 74%),
    var(--bg);
}
.sign-in-card {
  background:var(--surface);border-color:var(--edge);border-radius:22px;
  padding:42px;box-shadow:var(--ct-depth-shadow);
}
.sign-in-card h1 {font-weight:800;letter-spacing:-.045em}
.lockup {margin-bottom:37px}
.login-form input {margin-top:9px;min-height:51px}
.auth-small {font-size:10px}

/* Free TradingView chart and 3rd-party iframes: do not transform charts --- */
.tv-chart {border:1px solid var(--edge);border-radius:12px}
.tv-caption {font-weight:500}
.tv-chart, .tradingview-widget-container, .chart-svg, .mini-bars, .research-table {
  transform:none!important;filter:none!important;
}

/* Responsive: preserve navigation, horizontal financial-table scrolling -- */
@media(max-width:1250px) {
  .sidebar {width:220px}
  .page-content {padding:29px 26px 38px}
  .quick-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:950px) {
  .sidebar {width:66px}
  .page-content {padding:27px 22px 40px}
  .sidebar-brand {padding:23px 11px 33px}
  .sidebar-brand .brand-wordmark {display:none}
  .overview-grid,.valuation-layout,.journal-layout,.split-grid,.source-grid {grid-template-columns:1fr}
}
@media(max-width:660px) {
  .sidebar {width:53px}
  .page-content {padding:21px 13px 32px}
  .topbar {height:62px;padding:0 11px;gap:8px}
  .top-search {width:100%}
  .top-search input {height:43px;min-width:0;font-size:11px}
  .page-heading {align-items:flex-start;flex-direction:column;gap:12px}
  .company-text h1 {font-size:25px}
  .company-monogram {width:51px;height:51px}
  .company-caption {margin-left:0}
  .heading-actions {width:100%}
  .quick-metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric-tile {padding:14px 12px;min-height:115px}
  .metric-value {font-size:21px}
  .surface-card,.ratio-card {padding:16px}
  .news-overview {padding:17px}
  .research-table {font-size:10px}
  .tabs {gap:16px}
  .sign-in-card {padding:28px 22px}
}
@media(prefers-reduced-motion:reduce) {
  .metric-tile:hover,.surface-card:hover,.ratio-card:hover,.button:hover {
    transform:none!important;
  }
}