/*
 * v2LaunchesClosures.css — ETF Launches & Closures dashboard.
 *
 * Self-contained styling for the launches/closures tool pane: page pills,
 * filter rows, stat cards, chart sections, and lightweight data tables.
 * Uses app-shell CSS variables where available with sensible fallbacks so it
 * works on both light and dark themes.
 */

/* Pane override — the base `.v2-tool-pane.active` rule in v2-overlay.css forces
   `display: grid; overflow: hidden`, which clips this long scrolling dashboard
   and prevents vertical scroll. This page owns its own internal layout and just
   needs to scroll as a document, so flip it to a block, scrollable pane (same
   pattern as #v2-model-gate-pane). */
#v2-dashboards-launches-closures.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto;
  height: 100%;
  background: var(--v2-bg-page, #f8f9fa);
}

.lc-wrap {
  padding: 0 0 24px;
  color: var(--v2-text-primary, #212529);
  font-size: 13px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.lc-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
  margin-bottom: 0;
}
.lc-header h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--v2-text-primary, #212529);
}
.lc-subtitle {
  font-size: 11px;
  color: var(--v2-text-muted, #6c757d);
}

.lc-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.lc-header-row .lc-spacer { flex: 1 1 auto; }

/* ── Page tabs + filter pills ────────────────────────────────────────── */
.lc-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lc-pill {
  border: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-elevated, #fff);
  color: var(--v2-text-muted, #6c757d);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.lc-pill:hover { color: var(--v2-text-primary, #212529); border-color: var(--v2-accent, #0964A0); }
.lc-pill.active {
  background: var(--v2-accent, #0964A0);
  border-color: var(--v2-accent, #0964A0);
  color: #fff;
}
.lc-pill-sm {
  padding: 3px 10px;
  font-size: 11px;
  background: var(--v2-accent-bg, rgba(9,100,160,.1));
  border-color: transparent;
  color: var(--v2-accent, #0964A0);
  cursor: default;
}

.lc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-text-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lc-select {
  border: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-input, #fff);
  color: var(--v2-text-primary, #212529);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  min-width: 140px;
}

.lc-divider {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--v2-border, #dee2e6);
  margin: 0 4px;
}

/* Header already carries a bottom border; the explicit rule is redundant. */
hr.lc-hr { display: none; }

#lc-body { padding: 16px; }

/* ── Stat cards (League Tables .lt-kpi: flat, label-on-top) ──────────── */
.lc-stats {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.lc-stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lc-stats.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .lc-stats.cols-4, .lc-stats.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lc-stats.cols-4, .lc-stats.cols-5 { grid-template-columns: 1fr; } }

.lc-stat {
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  background: var(--v2-bg-elevated, #fff);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lc-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--v2-text-muted, #6c757d);
}
.lc-stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--v2-text-primary, #212529);
  font-variant-numeric: tabular-nums;
}
.lc-stat.tone-success .lc-stat-value { color: #10B981; }
.lc-stat.tone-danger  .lc-stat-value { color: #FB7185; }
.lc-stat.tone-info    .lc-stat-value { color: var(--v2-accent, #0964A0); }
.lc-stat.tone-warning .lc-stat-value { color: #F59E0B; }

/* ── Sections / charts (flat bordered cards, uppercase titles) ──────── */
.lc-section {
  margin-bottom: 12px;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  background: var(--v2-bg-elevated, #fff);
  padding: 12px 14px;
}
.lc-section > h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--v2-text-muted, #6c757d);
}
.lc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 900px) { .lc-grid-2 { grid-template-columns: 1fr; } }

.lc-card {
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  background: var(--v2-bg-elevated, #fff);
  overflow: hidden;
}
.lc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-muted, #6c757d);
}
.lc-card-head .trailing { font-size: 11px; color: var(--v2-text-muted, #6c757d); font-weight: 600; }
.lc-card-body { padding: 10px 12px; }

.lc-chart { width: 100%; }

/* In-body filter toolbar (period / group-by / selects on each tab) */
#lc-body > .lc-header-row {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  background: var(--v2-bg-elevated, #fff);
}

.lc-note {
  font-size: 11px;
  color: var(--v2-text-muted, #9aa0a6);
  margin-top: 8px;
  line-height: 1.4;
}
.lc-note.italic { font-style: italic; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.lc-table-wrap { overflow-x: auto; }
.lc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lc-table th, .lc-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--v2-border-light, #eceff3);
  text-align: left;
  white-space: nowrap;
  color: var(--v2-text-primary, #212529);
}
.lc-table td { font-variant-numeric: tabular-nums; }
.lc-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-muted, #6c757d);
  position: sticky;
  top: 0;
  background: var(--v2-bg-elevated, #fff);
  z-index: 1;
}
.lc-table td.num, .lc-table th.num { text-align: right; }
.lc-table tbody tr:hover { background: var(--v2-bg-hover, rgba(9,100,160,.05)); }
.lc-table tr.lc-row-hl { background: var(--v2-accent-bg, rgba(9,100,160,.1)); }
.lc-strong { font-weight: 600; }
.lc-pos { color: #10B981; font-weight: 600; }
.lc-neg { color: #FB7185; font-weight: 600; }

/* ── Loading / empty ─────────────────────────────────────────────────── */
.lc-loading, .lc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--v2-text-muted, #6c757d);
  gap: 12px;
}
.lc-loading i { font-size: 40px; color: var(--v2-accent, #0964A0); }

/* Pane-level loading/error fills the whole pane so the spinner sits in the
   vertical center of the page rather than near the top. */
.lc-loading.lc-fill, .lc-empty.lc-fill { min-height: 100%; height: 100%; }