/**
 * DigiknackTabs — underline tab strip (CRM / Meetings / Tax / Analytics / Inbox / PDP).
 * Cream idle ink, accent underline on active. Wraps — never sideways-scrolls.
 * Pair with public/js/dk-tabs.js (window.DigiknackTabs).
 *
 *   <nav class="dk-tabs" role="tablist" aria-label="Sections">
 *     <button type="button" class="dk-tabs__btn is-active" role="tab" aria-selected="true">Details</button>
 *     <button type="button" class="dk-tabs__btn" role="tab" aria-selected="false">Notes</button>
 *   </nav>
 *
 * Legacy alias: .crm-lead-tabs / .crm-lead-tabs__btn (same styles).
 */

.dk-tabs,
.crm-lead-tabs {
  --dk-tabs-ink: var(--admin-nav-idle, #e3dbcc);
  --dk-tabs-muted: rgba(227, 219, 204, 0.5);
  --dk-tabs-accent: var(--cal-accent, #f2133c);
  --dk-tabs-line: rgba(227, 219, 204, 0.12);
  --dk-tabs-size: 12px;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 16px;
  margin: 12px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--dk-tabs-line);
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.dk-tabs__btn,
.crm-lead-tabs__btn {
  flex: 0 1 auto;
  margin: 0 0 -1px;
  padding: 8px 2px 11px;
  border: none;
  border-radius: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  color: var(--dk-tabs-muted);
  font-family: inherit;
  font-size: var(--dk-tabs-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dk-tabs__btn:hover,
.crm-lead-tabs__btn:hover {
  color: var(--dk-tabs-ink);
}

.dk-tabs__btn.is-active,
.crm-lead-tabs__btn.is-active {
  color: var(--dk-tabs-ink);
  border-bottom-color: var(--dk-tabs-accent);
}

.dk-tabs__btn[hidden],
.crm-lead-tabs__btn[hidden] {
  display: none;
}

.dk-tabs__panels,
.crm-lead-tabpanels {
  min-height: 0;
  padding-top: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

.dk-tabs__panel,
.crm-lead-tabpanel {
  display: none;
  max-width: 100%;
  box-sizing: border-box;
}

.dk-tabs__panel.is-active,
.crm-lead-tabpanel.is-active {
  display: block;
}