/* ═══════════════════════════════════════════════════════════════
   n-tabs.css — Tab bar used to merge the three time-series
   sections (Summary / Chemistry / Per-Instrument) into one
   unified section, reducing vertical scroll and overlap.
═══════════════════════════════════════════════════════════════ */

.n-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  background: var(--n-surface-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--n-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.n-tabs::-webkit-scrollbar { display: none; }

.n-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--n-text-muted, rgba(255, 255, 255, 0.65));
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
  font-family: inherit;
}

.n-tab-btn:hover {
  background: var(--n-surface-2, rgba(255, 255, 255, 0.05));
  color: var(--n-text-strong, #fff);
}

.n-tab-btn--active {
  background: var(--n-accent-primary-soft, rgba(79, 195, 247, 0.16));
  color: var(--n-accent-primary, #4fc3f7);
  box-shadow: 0 0 0 1px var(--n-accent-primary, rgba(79, 195, 247, 0.4)) inset;
}

.n-tab-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

.n-tab-btn-sub {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 0.25rem;
}

/* Panels */
.n-tab-panel {
  /* Hidden inactive panels — still in layout during init so charts size
     correctly, then switched off via JS after first render. */
}

.n-tab-panel--hidden {
  display: none;
}

/* Light theme */
body.theme-light .n-tabs {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .n-tab-btn {
  color: rgba(15, 23, 42, 0.7);
}

body.theme-light .n-tab-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.95);
}

body.theme-light .n-tab-btn--active {
  background: rgba(14, 116, 144, 0.12);
  color: #0e7490;
  box-shadow: 0 0 0 1px rgba(14, 116, 144, 0.35) inset;
}

/* Responsive */
@media (max-width: 640px) {
  .n-tabs {
    width: 100%;
  }
  .n-tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
  }
  .n-tab-btn-sub { display: none; }
}