/* FlowDesk Financial Workspace — modern information-dense terminal UI */
:root {
  --fd-fin-bg: #08101c;
  --fd-fin-rail: #0c1625;
  --fd-fin-surface: #101d2d;
  --fd-fin-surface-2: #142338;
  --fd-fin-line: rgba(148, 163, 184, .16);
  --fd-fin-line-strong: rgba(148, 163, 184, .28);
  --fd-fin-text: #e7eef8;
  --fd-fin-muted: #90a4bd;
  --fd-fin-blue: #5b8def;
  --fd-fin-blue-soft: rgba(91, 141, 239, .14);
  --fd-fin-cyan: #43d2d7;
  --fd-fin-green: #37d39b;
  --fd-fin-red: #f07889;
  --fd-fin-radius: 12px;
}
:root[data-theme="light"] {
  --fd-fin-bg: #f4f7fb;
  --fd-fin-rail: #ffffff;
  --fd-fin-surface: #ffffff;
  --fd-fin-surface-2: #f7faff;
  --fd-fin-line: rgba(51, 65, 85, .14);
  --fd-fin-line-strong: rgba(51, 65, 85, .24);
  --fd-fin-text: #122033;
  --fd-fin-muted: #607089;
  --fd-fin-blue: #376fd0;
  --fd-fin-blue-soft: rgba(55, 111, 208, .10);
  --fd-fin-cyan: #0f9ca3;
}

/* Rebase shared tokens onto one restrained financial palette. */
:root,
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --fd-bg: var(--fd-fin-bg);
  --fd-rail: var(--fd-fin-rail);
  --fd-surface: var(--fd-fin-surface);
  --fd-bg-subtle: var(--fd-fin-surface-2);
  --fd-bg-soft: color-mix(in srgb, var(--fd-fin-surface) 88%, black 12%);
  --fd-bg-hover: color-mix(in srgb, var(--fd-fin-blue) 9%, var(--fd-fin-surface));
  --fd-border: var(--fd-fin-line);
  --fd-border-soft: color-mix(in srgb, var(--fd-fin-line) 60%, transparent);
  --fd-border-strong: var(--fd-fin-line-strong);
  --fd-glass-bg: color-mix(in srgb, var(--fd-fin-surface) 90%, transparent);
  --fd-glass-border: var(--fd-fin-line-strong);
  --fd-text: var(--fd-fin-text);
  --fd-text-soft: var(--fd-fin-muted);
  --fd-text-dim: color-mix(in srgb, var(--fd-fin-muted) 75%, transparent);
  --fd-accent: var(--fd-fin-blue);
  --fd-accent-hover: #79a5ff;
  --fd-accent-bright: #87adff;
  --fd-accent-dim: #385fa9;
  --fd-accent-soft: var(--fd-fin-blue-soft);
  --fd-accent-glow: rgba(91, 141, 239, .28);
  --fd-on-accent: #fff;
  --fd-bull: var(--fd-fin-green);
  --fd-bull-bright: #83ebc1;
  --fd-bull-soft: rgba(55, 211, 155, .12);
  --fd-bear: var(--fd-fin-red);
  --fd-bear-bright: #ffacb8;
  --fd-bear-soft: rgba(240, 120, 137, .12);
  /* Drives .fd-sidebar's own width via the shared token rather than an
     !important width override, so the shell's responsive rules (the
     off-canvas drawer at <=880px, which needs min(280px, 84vw)) still win. */
  --fd-sidebar-w: 228px;
}

body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--fd-fin-bg) !important;
  color: var(--fd-fin-text) !important;
}
.fd-shell-v2, .fd-shell-body { background: var(--fd-fin-bg); }
.fd-sidebar {
  background: var(--fd-fin-rail) !important;
  border-right: 1px solid var(--fd-fin-line) !important;
}
.fd-globalbar {
  height: 64px;
  min-height: 64px;
  padding-inline: clamp(18px, 2.5vw, 34px);
  background: color-mix(in srgb, var(--fd-fin-rail) 88%, transparent) !important;
  border-bottom: 1px solid var(--fd-fin-line) !important;
  box-shadow: 0 8px 28px rgba(2, 8, 23, .12);
  backdrop-filter: blur(20px);
}
.fd-brand { padding: 22px 18px 18px !important; }
.fd-brand-name { letter-spacing: -.03em; font-size: 1rem !important; }
.fd-brand-sub { color: var(--fd-fin-muted) !important; }
.fd-sidebar-scroll { padding: 12px 12px 18px !important; }
.fd-sidebar-group-label {
  margin: 20px 10px 7px !important;
  color: var(--fd-fin-muted) !important;
  font: 750 .64rem/1.1 var(--fd-font-mono) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fd-sidebar-nav--primary { padding-bottom: 13px; border-bottom: 1px solid var(--fd-fin-line); }
.fd-globalnav-link, .fd-sidebar-link {
  min-height: 40px;
  margin: 2px 0;
  padding: 0 11px !important;
  border: 1px solid transparent;
  color: var(--fd-fin-muted) !important;
}
.fd-globalnav-link:hover, .fd-sidebar-link:hover { background: var(--fd-fin-blue-soft) !important; border-color: var(--fd-fin-line); color: var(--fd-fin-text) !important; }
.fd-globalnav-link--on, .fd-sidebar-link--on {
  background: var(--fd-fin-blue-soft) !important;
  border-color: color-mix(in srgb, var(--fd-fin-blue) 35%, transparent) !important;
  box-shadow: inset 3px 0 var(--fd-fin-blue), 0 4px 14px rgba(2, 8, 23, .1);
  color: var(--fd-fin-text) !important;
}
.fd-sidebar-link--on .fd-sidebar-link-icon, .fd-globalnav-link--on .fd-globalnav-link-icon { color: var(--fd-fin-blue); }
.fd-globalnav-link-icon, .fd-sidebar-link-icon { width: 18px !important; height: 18px !important; }
.fd-market-state { color: var(--fd-fin-muted) !important; font: 650 .72rem var(--fd-font-mono); }
.fd-market-state i { background: var(--fd-fin-green) !important; box-shadow: 0 0 0 4px rgba(55, 211, 155, .10); }

/* Width is measured against the containing column, never the viewport:
   this content sits INSIDE .fd-workspace, which is already inset by the
   in-flow sidebar. A 100vw-based width here overflowed the page by the
   full sidebar width at every desktop size. */
/* :not(body) — layout.php emits <body class="desk fd-page fd-page--list">, so a
   bare .fd-page in this list also matched the BODY element and applied the
   content column's own top padding (and max-width) to the whole document,
   pushing the entire shell — sidebar and sticky top bar included — down by
   34px and leaving a dead band above the nav. */
main.main, .main, .fd-main, .workspace-main, main.fd-content, .fd-page:not(body) {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-top: 34px;
}
.fd-page-header, .ui-page-header { margin-bottom: 26px; border-bottom-color: var(--fd-fin-line); }
.fd-page-header h1, .ui-page-header h1 { font-size: clamp(1.65rem, 2.3vw, 2.25rem); font-weight: 760; }
.fd-page-header p, .ui-page-header p, .fd-page-header .sub, .ui-page-header .sub { color: var(--fd-fin-muted); }

.fd-card, .ui-panel, .panel, .news-card, .stat-card, .card, .box {
  background: var(--fd-fin-surface) !important;
  border-color: var(--fd-fin-line) !important;
  border-radius: var(--fd-fin-radius) !important;
  box-shadow: 0 10px 30px rgba(2, 8, 23, .10) !important;
}
.fd-card:hover, .panel:hover, .news-card:hover, .stat-card:hover, .card:hover, .box:hover { border-color: var(--fd-fin-line-strong) !important; transform: translateY(-1px); }
.ui-panel-head { background: var(--fd-fin-surface-2); border-bottom-color: var(--fd-fin-line); }
.ui-panel-meta { color: var(--fd-fin-muted); border-top-color: var(--fd-fin-line); }
.fd-btn, button.primary, a.primary, .btn-primary, input[type="submit"] {
  background: var(--fd-fin-blue) !important;
  box-shadow: 0 6px 16px rgba(55, 111, 208, .22) !important;
}
.fd-btn:hover, button.primary:hover, a.primary:hover, .btn-primary:hover, input[type="submit"]:hover { background: var(--fd-fin-blue) !important; filter: brightness(1.12); }
.fd-btn:not(.primary), .fd-btn.secondary, button.secondary, .btn-secondary { background: var(--fd-fin-surface-2) !important; border-color: var(--fd-fin-line-strong) !important; }

/* Financial tables prioritize the instrument, signal, price, and freshness. */
.table-wrap { border-color: var(--fd-fin-line); background: var(--fd-fin-surface); }
table.fd-table th, table.earn th, table.fd-tbl th { background: var(--fd-fin-surface-2); color: var(--fd-fin-muted); border-bottom-color: var(--fd-fin-line-strong); }
table.fd-table td, table.earn td, table.fd-tbl td { border-bottom-color: var(--fd-fin-line); }
table.fd-table tbody tr:hover, table.earn tbody tr:hover, table.fd-tbl tbody tr:hover { background: var(--fd-fin-blue-soft); }
.mono, .num, [data-numeric="true"] { color: var(--fd-fin-text); }

/* A compact KPI language for dashboard-like pages. */
.metric, .stat, .stat-card, .kpi, .metric-card { position: relative; overflow: hidden; }
.metric::after, .stat-card::after, .kpi::after, .metric-card::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--fd-fin-blue), var(--fd-fin-cyan)); opacity: .7; }
.metric-value, .stat-value, .kpi-value, .metric-card strong { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.fd-legend-row { color: var(--fd-fin-muted); }

/* Breakpoint matches the shell's own (styles.css turns .fd-sidebar into a
   fixed off-canvas drawer at <=880px). The previous 900px/700px pair left a
   701-880px band where the shell had already removed the sidebar from the
   flow while this file still reserved space for it. */
@media (max-width: 880px) {
  .fd-globalbar { padding-inline: 12px; }
  main.main, .main, .fd-main, .workspace-main, main.fd-content, .fd-page:not(body) { padding-top: 22px; }
}
@media (max-width: 600px) {
  .fd-globalnav { display: none !important; }
}