/**
 * FlowDesk Components — SINGLE visual control plane for ui.php / ui_viz.php
 * ==========================================================================
 * Every class emitted by ui_* helpers is defined here.
 * Update appearance HERE only — pages should not invent ad-hoc styles.
 *
 * HTML control plane: pages/php/components/ui.php + ui_viz.php
 * Visual control plane: this file (loaded before system.css shell polish)
 */

/* ── Page header ───────────────────────────────────────────────────────── */
.fd-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--fd-border);
}
.fd-page-header-text { min-width: 0; flex: 1; }
.fd-eyebrow {
  display: inline-block;
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fd-accent);
}
.fd-page-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.12;
  color: var(--fd-text);
}
.fd-page-sub {
  margin: 6px 0 0;
  max-width: 52ch;
  color: var(--fd-text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}
.fd-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--fd-radius-pill, 999px);
  border: 1px solid var(--fd-border-strong);
  background: var(--fd-bg-subtle);
  color: var(--fd-text);
  font-weight: 650;
  font-size: 0.84rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.1s ease;
}
.fd-btn:hover { filter: brightness(1.06); text-decoration: none; color: var(--fd-text); }
.fd-btn:active { transform: translateY(1px); }
.fd-btn--primary {
  background: var(--fd-accent);
  color: var(--fd-on-accent);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(46,230,166,0.2), 0 6px 18px -6px rgba(46,230,166,0.35);
}
.fd-btn--primary:hover { color: var(--fd-on-accent); }
.fd-btn--ghost {
  background: transparent;
  border-color: var(--fd-border-strong);
  box-shadow: none;
}
.fd-btn--danger {
  background: var(--fd-bear-soft);
  color: var(--fd-bear-bright);
  border-color: rgba(var(--fd-bear-rgb), 0.3);
  box-shadow: none;
}
.fd-btn-sm { padding: 5px 11px; font-size: 0.78rem; }
.fd-btn-lg { padding: 11px 20px; font-size: 0.92rem; }
.fd-btn-block { width: 100%; }

/* ── Badges / chips ────────────────────────────────────────────────────── */
.fd-badge, .ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  background: var(--fd-bg-subtle);
  color: var(--fd-text-soft);
}
.fd-badge--bull, .fd-badge--ok, .ui-chip--bull, .ui-chip--ok {
  background: var(--fd-bull-soft); color: var(--fd-bull-bright);
}
.fd-badge--bear, .fd-badge--error, .ui-chip--bear, .ui-chip--error {
  background: var(--fd-bear-soft); color: var(--fd-bear-bright);
}
.fd-badge--accent, .fd-badge--info, .ui-chip--warn {
  background: var(--fd-accent-soft); color: var(--fd-accent-bright);
}
.fd-badge--warn { background: rgba(245,158,11,0.12); color: var(--fd-warn); }
.fd-badge--neutral, .ui-chip--neutral, .ui-chip--empty {
  background: var(--fd-bg-subtle); color: var(--fd-text-dim);
  border-color: var(--fd-border-soft);
}

/* ── Metrics / stats ───────────────────────────────────────────────────── */
.fd-metric, .fd-stat, .fd-stat-card {
  padding: 12px 14px;
  border-radius: var(--fd-radius, 10px);
  background: var(--fd-bg-subtle);
  border: 1px solid var(--fd-border-soft);
}
.fd-metric-label, .fd-stat-label, .fd-stat-k {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
  margin: 0 0 4px;
}
.fd-metric-value, .fd-stat-num, .fd-stat-v {
  font-family: var(--fd-font-mono);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
  color: var(--fd-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin: 0;
}
.fd-metric-hint, .fd-stat-sub {
  font-size: 0.78rem;
  color: var(--fd-text-soft);
  margin: 4px 0 0;
}
.fd-metric--bull .fd-metric-value, .fd-stat-card--bull .fd-stat-num { color: var(--fd-bull-bright); }
.fd-metric--bear .fd-metric-value, .fd-stat-card--bear .fd-stat-num { color: var(--fd-bear-bright); }

/* ── Panels / cards ────────────────────────────────────────────────────── */
.fd-panel, .fd-card, .fd-data-panel {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg, 12px);
  box-shadow: var(--fd-shadow);
  margin: 0 0 14px;
  overflow: hidden;
}
.fd-panel { padding: 0; }
.fd-card { padding: 16px 18px; }
.fd-panel-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--fd-border);
  background: var(--fd-bg-subtle);
}
.fd-panel-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fd-text-soft);
}
.fd-panel-body { padding: 14px 16px; }
.fd-panel-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--fd-border);
  background: var(--fd-bg-subtle);
}
.fd-card-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fd-text);
}
.fd-card-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--fd-border-soft);
}

/* ── Grids ─────────────────────────────────────────────────────────────── */
.fd-grid, .fd-grid--2, .fd-grid--3, .fd-grid--4, .fd-grid--5,
.fd-grid-2, .fd-grid-3, .fd-grid-4, .fd-grid-5 {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
}
.fd-grid--2, .fd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-grid--3, .fd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-grid--4, .fd-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-grid--5, .fd-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .fd-grid--4, .fd-grid-4, .fd-grid--5, .fd-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .fd-grid--2, .fd-grid-2,
  .fd-grid--3, .fd-grid-3,
  .fd-grid--4, .fd-grid-4,
  .fd-grid--5, .fd-grid-5 {
    grid-template-columns: 1fr;
  }
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.fd-table, table.earn, table.fd-tbl {
  width: 100%;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg, 12px);
  overflow: hidden;
  margin: 0 0 14px;
  border-collapse: separate;
  border-spacing: 0;
}
.fd-table-head {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--fd-bg-subtle);
  border-bottom: 1px solid var(--fd-border);
}
.fd-th, .fd-table th, table.earn th, table.fd-tbl th {
  padding: 10px 12px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
  text-align: left;
}
.fd-table-body .fd-row,
.fd-table-body a.fd-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--fd-border-soft);
  color: var(--fd-text);
  text-decoration: none;
}
.fd-table-body .fd-row:hover { background: var(--fd-bg-hover); }
.fd-row-cell, .fd-table td, table.earn td, table.fd-tbl td {
  padding: 10px 12px;
  font-family: var(--fd-font-mono);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--fd-text);
  border-bottom: 1px solid var(--fd-border-soft);
}
.table-wrap { overflow-x: auto; margin: 0 0 14px; }
.fd-sym, a.symbol {
  font-family: var(--fd-font-mono);
  font-weight: 700;
  color: var(--fd-text);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.fd-sym:hover, a.symbol:hover { color: var(--fd-accent-bright); }

/* ── Tabs (data-on contract — do not use .on/.active alone) ─────────────── */
.fd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  margin: 0 0 16px;
  background: var(--fd-bg-subtle);
  border: 1px solid var(--fd-border);
  border-radius: 11px;
}
.fd-tab {
  appearance: none;
  padding: 7px 12px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--fd-text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fd-tab[aria-selected="true"],
.fd-tab.on {
  background: var(--fd-accent-soft);
  color: var(--fd-accent-bright);
}
.fd-tab-pane { display: none !important; }
.fd-tab-pane[data-on="true"] { display: block !important; }

/* ── Empty / engage ────────────────────────────────────────────────────── */
.fd-empty, .empty-state {
  text-align: center;
  padding: 36px 20px;
  margin: 0 0 14px;
  border-radius: var(--fd-radius-lg, 12px);
  border: 1px dashed var(--fd-border);
  background: var(--fd-bg-subtle);
  color: var(--fd-text-soft);
}
.fd-empty-title { color: var(--fd-text); font-weight: 650; margin: 0 0 6px; }
.fd-empty-msg { margin: 0 0 12px; }
.fd-empty-actions { margin-top: 8px; }
.fd-engage-tip {
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--fd-accent-soft);
  border: 1px solid rgba(46,230,166,0.2);
  color: var(--fd-text);
  font-size: 0.88rem;
}

/* ── Progress / bars ───────────────────────────────────────────────────── */
.fd-progress, .ui-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--fd-border);
  overflow: hidden;
  margin: 6px 0;
}
.fd-progress-fill, .ui-progress > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--fd-accent);
}
.fd-progress--bull .fd-progress-fill, .ui-progress.bull > i { background: var(--fd-bull); }
.fd-progress--bear .fd-progress-fill, .ui-progress.bear > i { background: var(--fd-bear); }

/* ── Score pill ────────────────────────────────────────────────────────── */
.fd-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--fd-font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.fd-score-pill--bull { background: var(--fd-bull-soft); color: var(--fd-bull-bright); }
.fd-score-pill--bear { background: var(--fd-bear-soft); color: var(--fd-bear-bright); }
.fd-score-pill--neutral { background: var(--fd-bg-subtle); color: var(--fd-text-dim); }

/* ── Info popover ──────────────────────────────────────────────────────── */
.fd-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--fd-border);
  background: transparent;
  color: var(--fd-text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
}
.fd-info-btn:hover { background: var(--fd-bg-hover); color: var(--fd-text); }
.fd-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--fd-radius, 10px);
  background: var(--fd-bg-subtle);
  border: 1px solid var(--fd-border);
  font-size: 0.86rem;
  color: var(--fd-text-soft);
}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.fd-alert {
  padding: 11px 14px;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1px solid var(--fd-border);
  background: var(--fd-surface);
  color: var(--fd-text);
  font-size: 0.88rem;
}
.fd-alert--error { background: var(--fd-bear-soft); border-color: rgba(var(--fd-bear-rgb), 0.32); color: var(--fd-bear-bright); }
.fd-alert--ok { background: var(--fd-bull-soft); color: var(--fd-bull-bright); }
.fd-alert--warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.32); }

/* ── Toolbar / filters ─────────────────────────────────────────────────── */
.fd-filters, .fd-toolbar, .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 10px;
  margin: 0 0 14px;
  border-radius: 11px;
  background: var(--fd-bg-subtle);
  border: 1px solid var(--fd-border);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.fd-stack { display: flex; flex-direction: column; gap: 10px; }
.fd-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fd-items-center { align-items: center; }
.fd-justify-between { justify-content: space-between; }
.fd-gap-1 { gap: 4px; }
.fd-gap-2 { gap: 8px; }
.fd-gap-3 { gap: 12px; }
.fd-gap-4 { gap: 16px; }
.fd-text-bull, .bull { color: var(--fd-bull-bright); }
.fd-text-bear, .bear { color: var(--fd-bear-bright); }
.fd-text-dim, .muted { color: var(--fd-text-dim); }
.fd-text-soft { color: var(--fd-text-soft); }
.fd-text-mono, .mono, .fd-num {
  font-family: var(--fd-font-mono);
  font-variant-numeric: tabular-nums;
}
.small { font-size: 0.84em; color: var(--fd-text-dim); }

/* =============================================================================
   LEGACY BRIDGE — ad-hoc page HTML maps to the same design system
   So pages that never called ui_* still look uniform.
   ============================================================================= */

/* Flex utilities used across pages */
.flex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

/* Old panel title variants */
.panel-title,
.ui-panel-title,
.section-title-h {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fd-text-soft);
}
.ui-panel-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--fd-border);
  background: var(--fd-bg-subtle);
}
.ui-panel-body { padding: 14px 16px; }

/* Score cards (scor-*) — markets / desk */
.scor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.scor-card {
  padding: 12px 14px;
  border-radius: var(--fd-radius, 10px);
  background: var(--fd-bg-subtle);
  border: 1px solid var(--fd-border-soft);
  text-align: left;
}
.scor-num {
  font-family: var(--fd-font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--fd-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.scor-lbl {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
  margin-top: 4px;
}

/* Text sizes / bare */
.fd-text-sm { font-size: 0.84rem; }
.fd-text-bare { color: var(--fd-text); }
.fd-lead {
  font-size: 1rem;
  color: var(--fd-text-soft);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 0 14px;
}
.dim { color: var(--fd-text-dim); }
.text-inherit { color: inherit; }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--fd-bg-subtle);
  color: var(--fd-text-soft);
  border: 1px solid var(--fd-border-soft);
}

/* Table cell helpers */
.td { padding: 10px 12px; }
.td-comp { font-family: var(--fd-font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Alternate tab panel name (some pages) */
.fd-tab-panel { display: none !important; }
.fd-tab-panel[data-on="true"],
.fd-tab-panel.on,
.fd-tab-panel.active { display: block !important; }
.fd-tab-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--fd-accent-soft);
  color: var(--fd-accent-bright);
}

/* Banner strip items */
.banner-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--fd-text-soft);
}

/* Stock meta / grids used outside stock_v2 */
.stock-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.84rem;
  color: var(--fd-text-soft);
  margin: 0 0 12px;
}
.stock-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  .stock-grid-2 { grid-template-columns: 1fr; }
}

/* Breakdown expand label */
.fd-brk-lbl {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 4px;
  font-size: 0.9rem;
}
.fd-brk-lbl:hover { color: var(--fd-accent-bright); }

/* Generic inputs when class="input" is used */
input.input, .input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--fd-border);
  background: var(--fd-bg-subtle);
  color: var(--fd-text);
  font-size: 0.9rem;
}

/* Main content areas without fd-main */
main.main, .main {
  max-width: 1380px;
  margin: 0 auto;
  padding: 18px 22px 56px;
  color: var(--fd-text);
}

/* Dash / panel aliases still in the wild */
.dash-card, .module, .card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg, 12px);
  padding: 16px 18px;
  margin: 0 0 14px;
  box-shadow: var(--fd-shadow);
  color: var(--fd-text);
}
.dash-card h3, .module h3, .card h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--fd-text);
}

/* Gold leftovers → accent */
.gold-btn, .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--fd-accent);
  color: var(--fd-on-accent);
  border: none;
  font-weight: 650;
  font-size: 0.84rem;
  text-decoration: none;
  cursor: pointer;
}
.gold-btn:hover, .btn-gold:hover { filter: brightness(1.06); color: var(--fd-on-accent); }

/* Section spacing rhythm — uniform vertical cadence */
.fd-page-header + .fd-grid,
.fd-page-header + .fd-panel,
.fd-page-header + .fd-tabs,
.fd-page-header + .scor-grid {
  margin-top: 0;
}
section + section,
.fd-panel + .fd-panel,
.fd-card + .fd-card {
  margin-top: 0;
}