/* burble-core.css / core-tabs.css: Tabs.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Tabs (framework-agnostic) ────────────────────────────────
   Usage:
     <div class="bc-card">
       <div class="bc-card-header">
         <nav class="bc-tabs-nav" role="tablist">
           <button class="bc-tab-btn active" data-tab="pane-id">Label</button>
         </nav>
         <div class="bc-tabs-actions">
           <button class="bc-btn bc-btn--save ba-tab-save" data-tab="pane-id">Save Changes</button>
         </div>
       </div>
       <div class="bc-tab-pane active" id="pane-id">…</div>
     </div>
   Switching is the page's job: put .active on the button and on its pane.

   A page whose tabs save one at a time puts one .ba-tab-save per tab in
   .bc-tabs-actions and hides all but the active tab's with the hidden
   attribute — the class is the hook its script switches on. Pages doing this:
   Company Settings, Manage Products (show) and CSS Config.

   One definition for every tabbed page. It replaced the two copies that had
   grown in company_settings.css and manage_users.css, and the .cs-tab* names
   those pages used were renamed to these. */

.bc-tabs-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}
/* Whatever sits on the right of the header — Save, a toggle, a count. */
.bc-tabs-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.bc-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 22px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sl-500);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.bc-tab-btn svg {
  flex-shrink: 0;
}
.bc-tab-btn:hover {
  color: var(--teal-strong);
}
/* Keyboard focus gets a teal ring in the shape of .bc-btn's; a click leaves
   none, where the browser's default ring used to box the tab. */
.bc-tab-btn:focus:not(:focus-visible) {
  outline: none;
}
.bc-tab-btn:focus-visible {
  outline: 1px solid var(--teal);
  outline-offset: 2px;
}
/* Active = blue: tabs switch the content the user sees (content-switching
   controls get the brand blue; filters keep the neutral white pill). */
.bc-tab-btn.active {
  color: var(--teal);
  font-weight: 500;
}