/* MMH Fintech Theme — QuetraTech palette */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette */
  --c-garnet:      #792E29;
  --c-raisin:      #24201D;
  --c-olive:       #565538;
  --c-grullo:      #ABA38F;
  --c-timberwolf:  #D9D4C8;

  /* Semantic tokens */
  --bg-base:       #24201D;
  --bg-elev-1:     rgba(86, 85, 56, 0.14);
  --bg-elev-2:     rgba(171, 163, 143, 0.10);
  --bg-glass:      rgba(36, 32, 29, 0.65);
  --bg-glass-strong: rgba(86, 85, 56, 0.22);
  --bg-inset:      rgba(0, 0, 0, 0.28);
  --bg-panel:      rgba(36, 32, 29, 0.92);

  --text-primary:  #D9D4C8;
  --text-secondary:#ABA38F;
  --text-dim:      rgba(171, 163, 143, 0.58);

  --accent:        #ABA38F;
  --accent-bright: #D9D4C8;
  --accent-olive:  #565538;
  --accent-garnet: #792E29;
  --accent-green:  #7a8560;
  --accent-red:    #9a4038;

  --border:        rgba(171, 163, 143, 0.14);
  --border-subtle: rgba(171, 163, 143, 0.09);
  --border-focus:  rgba(217, 212, 200, 0.32);
  --border-bright: rgba(217, 212, 200, 0.22);

  --glass-blur:    14px;
  --shadow-soft:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow:   0 0 24px rgba(86, 85, 56, 0.15);

  --font-mono:     'JetBrains Mono', monospace;
  --font-sans:     'Manrope', system-ui, sans-serif;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --transition:    0.18s ease;
}

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Glass panel utility ──────────────────────────────── */
.glass-panel,
.term-card,
.card, .card-sm, .macro-card, .ev-card, .policy-card,
.widget-card, .tile, .kpi-card, .cpane, .stat, .chart-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.chart-wrap, .chart-panel, .signals-panel, .carry-widget {
  background: var(--bg-inset);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tile:hover {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow);
}
.tile.sel {
  border-color: var(--border-bright);
  background: var(--bg-glass-strong);
}
.cpane.act { border-color: var(--border-bright); background: var(--bg-glass-strong); }

/* ── Toolbars ─────────────────────────────────────────── */
.eco-toolbar, .term-toolbar, .top-bar, .tb {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
}

.eco-tb-item, .term-btn, .refresh-btn, .rb, .btn {
  background: rgba(86, 85, 56, 0.18);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.eco-tb-item:hover, .term-btn:hover, .refresh-btn:hover, .rb:hover, .btn:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
  background: rgba(171, 163, 143, 0.12);
}

.eco-toggle-group, .term-toggle-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.eco-toggle, .term-toggle {
  background: rgba(36, 32, 29, 0.5);
  color: var(--text-secondary);
  border-right: 1px solid var(--border-subtle);
}
.eco-toggle.active, .term-toggle.active {
  background: var(--bg-glass-strong);
  color: var(--text-primary);
  font-weight: 600;
}

.eco-refresh, .term-refresh {
  background: rgba(86, 85, 56, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

/* ── Tables ───────────────────────────────────────────── */
.eco-table-wrap { background: transparent; }

.eco-table thead th, table thead th {
  background: rgba(36, 32, 29, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.eco-table tbody tr:hover, table tbody tr.clickable:hover td {
  background: rgba(171, 163, 143, 0.06);
}

.section-header td, .day-header td {
  background: var(--bg-glass-strong);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  border-color: var(--border);
}

.cal-row-high td:first-child,
.news-row-high td:first-child { box-shadow: inset 3px 0 0 var(--accent-garnet); }
.cal-row-med td:first-child,
.news-row-med td:first-child { box-shadow: inset 3px 0 0 var(--c-grullo); }

.imp-bars span.on.high { background: var(--accent-garnet); }
.imp-bars span.on.med { background: var(--c-grullo); }
.imp-bars span.on.low { background: var(--text-dim); }

.eco-overview {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.eco-ov-cell { border-right: 1px solid var(--border-subtle); }
.eco-ov-value.released { color: var(--accent-green); font-weight: 600; }

/* ── Typography & labels ──────────────────────────────── */
.hd, .chart-title, .page-title, .carry-ccy-hd, .kpi-label,
.grouplabel, .stat-label, .section-label {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

/* ── Value colors ─────────────────────────────────────── */
.up, .green, .pos, .z-long { color: var(--accent-green); }
.dn, .red, .neg, .z-short { color: var(--accent-red); }
.fl, .z-neutral { color: var(--text-secondary); }
.val { color: var(--text-primary); font-weight: 600; }
.lbl { color: var(--text-secondary); }

.badge-long { color: var(--accent-green); border-color: rgba(122, 133, 96, 0.45); }
.badge-short { color: var(--accent-red); border-color: rgba(154, 64, 56, 0.45); }

/* ── Sidebar / fintech nav panels ─────────────────────── */
.sidebar {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--border);
}
.pair-btn:hover { background: rgba(171, 163, 143, 0.08); }
.pair-btn.active {
  background: var(--bg-glass-strong);
  border-left: 2px solid var(--c-grullo);
}
tr.active-row td { background: rgba(171, 163, 143, 0.08); }

/* ── G10 / events ─────────────────────────────────────── */
.ev-row.ev-high { border-left-color: var(--accent-garnet); }
.ev-row.ev-med { border-left-color: var(--c-grullo); }
.ev-tag.hi { color: var(--accent-red); }

.grid .card:hover { border-color: var(--border-focus); }

.seg button.active {
  background: var(--bg-glass-strong);
  border-color: var(--border-bright);
  color: var(--text-primary);
}

/* ── Notes / editors ──────────────────────────────────── */
.notes-editor, textarea, input[type="text"], select {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.eco-loading, .eco-empty, .loading { color: var(--text-dim); }
.eco-error, .eco-status.error { color: var(--accent-red); }

/* ── Unified dash layout (EQ/Rates/FX/News/Calendar/G10) ─ */
.dash-root, #root { display: block; }
.dash-root header, #root + header, body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-bright);
  margin-bottom: 10px;
  gap: 14px;
  flex-wrap: wrap;
}
.hl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 0; }
.seg button {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 11px;
  cursor: pointer;
}
.bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.hint { font-size: 8px; color: var(--text-dim); letter-spacing: 0.06em; }
.hint.error { color: var(--accent-red); }
.chart-wrap.dash-table {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.eco-table-wrap::-webkit-scrollbar { width: 5px; }
.eco-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(171, 163, 143, 0.25);
  border-radius: 4px;
}

/* ── Prototype pill tabs (main + G10 subnav) ──────────── */
.mmh-pill-tab,
#topnav .ftab,
.mmh-subnav .mmh-ftab {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 11px;
  background: transparent;
  border-bottom: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.mmh-pill-tab:hover,
#topnav .ftab:hover,
.mmh-subnav .mmh-ftab:hover {
  color: var(--text-secondary);
  border-color: var(--border);
  background: rgba(171, 163, 143, 0.06);
}
.mmh-pill-tab.active,
#topnav .ftab.active,
.mmh-subnav .mmh-ftab.active {
  color: var(--accent-bright);
  border-color: var(--border-bright);
  background: var(--bg-inset);
  font-weight: 600;
}
#topnav {
  gap: 6px;
  padding: 8px 14px;
  align-items: center;
}
.mmh-subnav {
  gap: 5px;
  padding: 8px 14px;
  background: rgba(86, 85, 56, 0.08);
}

/* ── Prototype MMH pane styling (news/calendar/notes/thesis iframes) ── */
html.mmh-pane, body.mmh-pane,
iframe body, body:has(#root), body:has(.app) {
  background-image:
    radial-gradient(900px 420px at 8% -10%, rgba(122, 133, 96, 0.10), transparent 60%),
    radial-gradient(700px 360px at 92% 0%, rgba(154, 64, 56, 0.06), transparent 55%);
}

.seg {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
}
.seg button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.seg button:hover {
  color: var(--text-secondary);
  border-color: var(--border);
}
.seg button.active {
  color: var(--accent-bright);
  border-color: var(--border-bright);
  background: var(--bg-inset);
}

.chart-wrap,
.chart-wrap.dash-table {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elev-1), rgba(0, 0, 0, 0.22));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(217, 212, 200, 0.05);
  border: 1px solid var(--border);
}

.bar .btn, header .btn, .refresh-btn, .tb-btn, button.primary {
  border-radius: 999px;
}

.composer, .note, .modal, .view-modal, .card {
  border-radius: var(--radius-lg);
}

.chip, .chip.active, .auto-tag .pill, .note-tag {
  border-radius: 999px;
}

.eco-tb-item, .eco-date-input, select, textarea, input[type="text"] {
  border-radius: var(--radius-sm);
}

/* Yield spread / sidebar prototype palette */
.sidebar, .logo, .pair-btn, .stat, .chart-panel, .signals-panel {
  background: linear-gradient(180deg, var(--bg-elev-1), rgba(0, 0, 0, 0.22));
  border-color: var(--border);
}
.pair-btn.active {
  background: var(--bg-inset);
  border-left: 2px solid var(--border-bright);
}
.stat, .chart-panel, .signals-panel {
  border-radius: var(--radius-lg);
}
.z-long, .green, .badge-long { color: var(--accent-green); }
.z-short, .red, .badge-short { color: var(--accent-red); }
.z-neutral, .badge-none { color: var(--text-dim); }