/*
 * Kwalee BI — Dashboard Tab Navigation (KWBI-102)
 *
 * Provides the dashboard-level tab bar and tab panel show/hide behaviour.
 * Tabs always scroll horizontally — no stacking on mobile.
 *
 * Structure:
 *   .dashboard-tab-nav         — the tab button row (role="tablist")
 *     .dashboard-tab-btn       — individual tab button (role="tab")
 *     .dashboard-tab-btn--active
 *   .dashboard-tab-panel       — content panel for one tab (role="tabpanel")
 *     .dashboard-tab-panel--active — the visible panel
 */

/* ── Tab nav bar ──────────────────────────────────────────────────────────── */

.dashboard-tab-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  border-bottom: 1px solid var(--border-color, #404040);
  margin-bottom: var(--spacing-dm, 1rem);
  padding: 0 var(--spacing-sm, 0.5rem);
}

.dashboard-tab-nav::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* ── Tab buttons ─────────────────────────────────────────────────────────── */

.dashboard-tab-btn {
  flex: 0 0 auto;
  position: relative;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-secondary, #a3a3a3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  outline-offset: 2px;
  margin-bottom: -1px; /* overlap the nav border-bottom */
}

.dashboard-tab-btn:hover {
  color: var(--text-primary, #fafafa);
}

.dashboard-tab-btn:focus-visible {
  outline: 2px solid var(--accent, #facc15);
  border-radius: 2px;
}

.dashboard-tab-btn--active {
  color: var(--text-primary, #fafafa);
  border-bottom-color: var(--accent, #facc15);
}

/* ── Tab panels ──────────────────────────────────────────────────────────── */

/*
 * All panels are rendered in the DOM (eager loading — all tiles load on page
 * open).  Only the active panel is visible; inactive panels are hidden with
 * display:none so they occupy no layout space but their Dash components
 * (charts, stores) are still mounted and their queries run in the background.
 */

.dashboard-tab-panel {
  /*
   * All panels are rendered in the DOM (eager loading — all tiles load on page
   * open).  Only the active panel is visible; inactive panels are hidden with
   * display:none so they occupy no layout space but their Dash components
   * (charts, stores) are still mounted and their queries run in the background.
   */
  display: none;
  grid-column: 1 / -1;
}

.dashboard-tab-panel--active {
  display: contents;
}

/* ── Multi-column section grid ───────────────────────────────────────────── */

/*
 * When tab_sections_columns > 1, sections are placed in a CSS grid so they
 * sit side by side. Each column is a flex column containing its own tab nav
 * and panels. Panels inside a column render as a 12-col sub-grid for charts.
 *
 * Collapses to a single column below 900 px.
 */

.dashboard-tab-sections-grid {
  grid-column: 1 / -1; /* span the outer dashboard grid */
  display: grid;
  gap: var(--spacing-lg, 1.5rem);
  align-items: start;
}

.dashboard-tab-sections-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.dashboard-tab-sections-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.dashboard-tab-sections-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .dashboard-tab-sections-grid.cols-2,
  .dashboard-tab-sections-grid.cols-3,
  .dashboard-tab-sections-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

.dashboard-tab-section-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevent grid blowout from wide chart tiles */
}

/* Panels inside a column use their own 12-col sub-grid */
.dashboard-tab-section-col .dashboard-tab-panel--active {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, 1rem);
}

/* Nav inside a column doesn't participate in the outer grid */
.dashboard-tab-section-col .dashboard-tab-nav {
  grid-column: unset;
}