/*
 * ProfitPenguin terminal theme (2026-07-08 overhaul).
 * The ONE styling system for all admin screens: dense, dark, monospace
 * numerics, flat color-coded P&L. Replaces both the old TRON theme that
 * lived here and the inline navy palette that lived in the layout.
 * Bootstrap 5.3 (dark) stays underneath; these are the overrides.
 */

:root {
  --bg: #0a0e14;
  --panel: #11161f;
  --panel-2: #161d29;
  --border: #232b38;
  --text: #c9d4e3;
  --dim: #6b7a90;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --accent: #38bdf8;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

.num,
td.num,
.stat-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Panels (layered onto existing .card.bg-dark markup) ---- */

.card.bg-dark,
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
}

.card .card-header {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  font-weight: 600;
}

.panel-2 {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ---- Stat tiles ---- */

.stat-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 2px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.stat-sub {
  font-size: 11px;
  color: var(--dim);
  font-family: var(--mono);
}

/* ---- P&L colors (flat, no glow) ---- */

.pnl-pos, .text-success { color: var(--green) !important; }
.pnl-neg, .text-danger { color: var(--red) !important; }
.text-warning { color: var(--amber) !important; }
.text-info, code.text-info { color: var(--accent) !important; }
.text-muted { color: var(--dim) !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

/* ---- Status dots ---- */

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.dot-green { background: var(--green); }
.dot-red { background: var(--red); }
.dot-amber { background: var(--amber); }

/* ---- Strategy badges ---- */

.strat-badge {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--dim);
  white-space: nowrap;
}

.strat-scalp_orb { color: #38bdf8; border-color: #38bdf833; }
.strat-scalp_vwap_reversion { color: #a78bfa; border-color: #a78bfa33; }
.strat-scalp_vwap_cross { color: #34d399; border-color: #34d39933; }
.strat-scalp_volume_surge { color: #fbbf24; border-color: #fbbf2433; }
.strat-manual { color: var(--dim); }

/* ---- Generic badges (flat) ---- */

.badge { font-weight: 500; }
.badge.bg-success { background: rgba(34, 197, 94, 0.12) !important; color: var(--green) !important; }
.badge.bg-danger { background: rgba(239, 68, 68, 0.12) !important; color: var(--red) !important; }
.badge.bg-warning { background: rgba(245, 158, 11, 0.12) !important; color: var(--amber) !important; }
.badge.bg-secondary { background: var(--panel-2) !important; color: var(--dim) !important; }
.badge.bg-info { background: rgba(56, 189, 248, 0.12) !important; color: var(--accent) !important; }

/* ---- Risk bars & cap meters ---- */

.risk-bar {
  height: 6px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}

.risk-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.risk-bar-fill.warn { background: var(--amber); }
.risk-bar-fill.danger { background: var(--red); }

.cap-meter {
  display: inline-flex;
  gap: 3px;
}

.cap-meter span {
  width: 14px;
  height: 6px;
  border-radius: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.cap-meter span.filled { background: var(--accent); border-color: var(--accent); }
.cap-meter span.filled.maxed { background: var(--amber); border-color: var(--amber); }

/* ---- Tables ---- */

.table-dark {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  font-size: 12.5px;
}

.table-dark th {
  color: var(--dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-bottom: 1px solid var(--border) !important;
}

.table-dark td {
  vertical-align: middle;
  border-color: var(--border);
}

.table-dark td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.table-hover > tbody > tr:hover > * {
  background: var(--panel-2);
  color: var(--text);
}

/* ---- Timeline ---- */

.timeline {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
}

.timeline-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid rgba(35, 43, 56, 0.5);
  padding: 2px 0;
}

.timeline-time { color: var(--dim); flex: 0 0 62px; }
.timeline-kind { flex: 0 0 58px; font-weight: 600; }
.timeline-kind.entry { color: var(--accent); }
.timeline-kind.exit { color: var(--text); }
.timeline-kind.rejected { color: var(--dim); }
.timeline-detail { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-row.rejected { opacity: 0.65; }

/* ---- Buttons ---- */

.btn-outline-light {
  border-color: var(--border);
  color: var(--text);
}

.btn-outline-light:hover {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--accent);
}

.btn { font-size: 13px; }

/* ---- Alerts / flash ---- */

.alert-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); color: var(--green); }
.alert-danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: var(--red); }
.alert-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); color: var(--amber); }

.progress { background: var(--panel-2); }

/* ---- Admin nav (moved from layout inline styles) ---- */

.admin-nav {
  background: #0d1219f2;
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.admin-nav-brand:hover { color: #fff; }

.admin-nav-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.admin-nav-link:hover { background: var(--panel-2); color: var(--text); }
.admin-nav-link.active { background: var(--panel-2); color: var(--accent); }
.admin-nav-link i { font-size: 14px; }

/* ---- Charts ---- */

.chart-svg { color: var(--accent); width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
.chart-baseline { stroke: var(--dim); stroke-dasharray: 4 4; stroke-width: 1; opacity: 0.5; }
.spark-svg { color: var(--accent); vertical-align: middle; }

/* ---- Scrollbars ---- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .stat-value { font-size: 17px; }
  .admin-nav { padding: 8px 12px; gap: 12px; }
  .timeline-detail { white-space: normal; }
}

/* Hoverable term definitions. The bubble itself (#tip-bubble) is a single
   fixed-position element driven by delegated JS in application.js: native
   title= tooltips need ~1s of steady hover (which the 5s dashboard
   re-render keeps resetting), and CSS ::after tooltips get clipped by
   .table-responsive overflow containers. Fixed positioning dodges both. */
.hint { cursor: help; border-bottom: 1px dotted rgba(255,255,255,.35); }
[data-tip] { cursor: help; }
#tip-bubble {
  position: fixed;
  z-index: 2000;
  max-width: 320px;
  padding: .5rem .65rem;
  background: #1c2333;
  color: #dbe2f0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  font-size: .74rem;
  font-weight: 400;
  font-family: var(--bs-body-font-family, sans-serif);
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
  display: none;
}