/*
 * v2IrChannel.css — Team Channels → Investor Relations (IR) Channel.
 *
 * Self-contained styling for the IR channel tool pane: scope bar (search +
 * dashboard selector + Portfolio Visualizer), tab strip, per-tab toolbars,
 * AG Grid containers and the 13F ownership chart panel. Uses app-shell CSS
 * variables with sensible fallbacks so it works on light and dark themes.
 * Ported from the legacy Twirl inline styles (investorRelationsChannel).
 */

/* Pane override — the base `.v2-tool-pane.active` rule forces a clipped grid
   layout; this page owns its own scrolling document layout. Mirror the
   Launches & Closures pattern. */
#v2-ir-channel.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto;
  height: 100%;
  background: var(--v2-bg-page, #f8f9fa);
}

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

/* ── Scope bar ───────────────────────────────────────────────────────── */
.v2-ir-ch__scope {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.v2-ir-ch__scope-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
}
.v2-ir-ch__scope-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2-ir-ch__lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-text-muted, #6c757d);
  margin: 0;
}
.v2-ir-ch__select,
.v2-ir-ch__search {
  border: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-elevated, #fff);
  color: var(--v2-text-primary, #212529);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  max-width: 320px;
}
.v2-ir-ch__search { width: 200px; }
.v2-ir-ch__select:focus,
.v2-ir-ch__search:focus {
  outline: none;
  border-color: var(--accent, #f18f01);
}

/* Search autocomplete dropdown */
.v2-ir-ch__search-dd {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 2px;
  background: var(--v2-bg-elevated, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.v2-ir-ch__search-opt {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--v2-text-primary, #212529);
}
.v2-ir-ch__search-opt:hover {
  background: var(--accent, #f18f01);
  color: #fff;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.v2-ir-ch__tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-elevated, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.v2-ir-ch__tab {
  border: none;
  background: transparent;
  color: var(--v2-text-muted, #6c757d);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.v2-ir-ch__tab:hover { color: var(--v2-text-primary, #212529); }
.v2-ir-ch__tab.active {
  color: var(--accent, #f18f01);
  border-bottom-color: var(--accent, #f18f01);
}
.v2-ir-ch__tab i { margin-right: 6px; }

/* ── Frames / toolbars ───────────────────────────────────────────────── */
.v2-ir-ch__frame { padding: 12px; }
.v2-ir-ch__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-elevated, #f5f7f7);
  border-radius: 4px;
}
.v2-ir-ch__chart-toggle { margin-left: auto; }
.v2-ir-ch__chart-toggle.active {
  background: var(--accent, #f18f01);
  color: #fff;
  border-color: var(--accent, #f18f01);
}

.v2-ir-ch__grid {
  width: 100%;
  height: 650px;
  max-height: 800px;
}

/* ── Charts panel (13F tab) ──────────────────────────────────────────── */
.v2-ir-ch__charts { margin-bottom: 12px; }
.v2-ir-ch__chart-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}
.v2-ir-ch__chart-card {
  padding: 10px;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  background: var(--v2-bg-elevated, #fff);
}
.v2-ir-ch__chart-card--wide { grid-column: span 1; }
.v2-ir-ch__chart-title {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  color: var(--v2-text-primary, #212529);
}
.v2-ir-ch__chart { width: 100%; }

@media (max-width: 1100px) {
  .v2-ir-ch__chart-grid { grid-template-columns: 1fr; }
}

/* Fallback button styling if the shared v2-btn primitives are unavailable. */
.v2-ir-ch .v2-btn {
  border: 1px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-elevated, #fff);
  color: var(--v2-text-primary, #212529);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.v2-ir-ch .v2-btn--sm { padding: 5px 8px; font-size: 11px; }
.v2-ir-ch .v2-btn--accent {
  background: var(--accent, #f18f01);
  border-color: var(--accent, #f18f01);
  color: #fff;
}
.v2-ir-ch .v2-btn i { margin-right: 5px; }