/* ============================================================================
   tabs.css — Real tab component (replaces legacy `<div class="tab-content">`)
   ============================================================================ */

.tab-group {
  margin: var(--sp-4) 0;
}

/* Tab list: horizontal row of buttons. On narrow viewports, horizontal scroll. */
.tab-list {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar by default but keep functionality */
  scrollbar-width: thin;
}

.tab-list::-webkit-scrollbar { height: 4px; }
.tab-list::-webkit-scrollbar-track { background: transparent; }
.tab-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.tab-button {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: 0.9375rem;  /* 15px — matches sidebar */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--gray-700);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px; /* sit on the tab-list bottom border */
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tab-button:hover {
  color: var(--gray-900);
  background: var(--gray-100);
}

.tab-button.is-active,
.tab-button[aria-selected='true'] {
  color: var(--conviva-green-accent);
  border-bottom-color: var(--conviva-green-accent);
  font-weight: 600;
}

[data-theme='dark'] .tab-button {
  color: var(--color-fg-muted);
}

[data-theme='dark'] .tab-button:hover {
  color: var(--color-fg);
  background: var(--color-bg-subtle);
}

[data-theme='dark'] .tab-button.is-active,
[data-theme='dark'] .tab-button[aria-selected='true'] {
  color: var(--conviva-green-primary);
  border-bottom-color: var(--conviva-green-primary);
}

/* Tab panels */
.tab-panel {
  padding: var(--sp-4) 0 0 0;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel:focus-visible {
  outline: 2px solid var(--conviva-green-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Single-tab groups (degraded mode) — should be rare; transform skips them */
.tab-group--single .tab-list { display: none; }
.tab-group--single .tab-panel { padding: 0; }

/* ── Legacy Flare tablinks (.tab / .tablinks / .tabcontent) ─────────────── */

.main__content .tab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--color-border);
  margin: var(--sp-4) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.main__content .tablinks {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-fg-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.main__content .tablinks:hover {
  color: var(--color-fg);
  background: var(--color-accent-soft);
}

.main__content .tablinks.active {
  color: var(--conviva-green-accent);
  border-bottom-color: var(--conviva-green-accent);
  font-weight: 600;
}

[data-theme='dark'] .main__content .tablinks.active {
  color: var(--conviva-green-primary);
  border-bottom-color: var(--conviva-green-primary);
}

.main__content .tabcontent {
  padding: var(--sp-4) 0 0;
}

/* ── Print stylesheet: show all tabs, each with its label as a heading ──── */

@media print {
  .tab-list { display: none; }
  .tab-panel { display: block !important; padding: var(--sp-2) 0; }
  .tab-panel::before {
    content: attr(aria-labelledby);
    /* The aria-labelledby is "btn-tab-N" which isn't great for print, but the
       JS sets a data-label attribute we can use instead. Fallback to the id. */
  }
  .tab-panel[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: var(--fs-base);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: var(--sp-1);
  }
}