@layer components {

/* ── Aegis Tabs (ported from navigation-tabs--guidelines) ──
 * Horizontal text tabs with active-state underline. Two colors
 * (primary brand-blue / secondary magenta). Optional leading icon
 * (left or up/stacked). Vertical orientation with right-side
 * indicator bar. */

/* Container — horizontal row with bottom divider line */
.ds-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: var(--border-width-1) solid var(--color-divider);
  position: relative;
}
.ds-tabs--vertical {
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  border-right: var(--border-width-1) solid var(--color-divider);
}
.ds-tabs--fullwidth .ds-tab { flex: 1; }

/* Individual tab */
/* Chained .ds-tabs .ds-tab (specificity 0,2,0) overrides the global `button
 * { border-radius: var(--radius-md); box-shadow: 0 1px 2px ...; }` rule
 * later in styles.css — otherwise every tab renders with rounded corners
 * + a subtle drop shadow like a raised button. Reset those too. */
.ds-tabs .ds-tab,
.ds-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 20px;
  margin: 0 0 calc(-1 * var(--border-width-1)) 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: var(--border-width-2) solid transparent;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  user-select: none;
}
.ds-tab:hover { background: rgba(63, 91, 255, 0.04); color: var(--color-text-primary); }
.ds-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(63, 91, 255, 0.4);
}
.ds-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}
.ds-tab.is-active:hover { background: rgba(63, 91, 255, 0.06); }
.ds-tab.is-disabled,
.ds-tab:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Optional count chip child — small pill inside a tab showing a number
 * (e.g. "Project control approvals (179)"). Neutral grey when inactive,
 * brand-blue tint when the tab is active. Markup:
 *   <button class="ds-tab">Label <span class="ds-tab__count">179</span></button>
 */
.ds-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: var(--radius-full);
  background: var(--c-neutral-200);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-tab.is-active .ds-tab__count {
  background: rgba(63, 91, 255, 0.14);
  color: var(--color-accent);
}
.ds-tabs--secondary .ds-tab.is-active .ds-tab__count {
  background: rgba(222, 50, 110, 0.14);
  color: var(--c-secondary-500);
}

/* Secondary color modifier — applies to the .ds-tabs container, cascades to active tab */
.ds-tabs--secondary .ds-tab.is-active {
  color: var(--c-secondary-500);
  border-bottom-color: var(--c-secondary-500);
}
.ds-tabs--secondary .ds-tab:hover { background: rgba(222, 50, 110, 0.04); }
.ds-tabs--secondary .ds-tab.is-active:hover { background: rgba(222, 50, 110, 0.06); }

/* Vertical orientation — right-edge indicator bar instead of bottom underline */
.ds-tabs--vertical .ds-tab {
  justify-content: flex-start;
  border-bottom: none;
  border-right: var(--border-width-2) solid transparent;
  margin-bottom: 0;
  margin-right: calc(-1 * var(--border-width-1));
}
.ds-tabs--vertical .ds-tab.is-active {
  border-right-color: var(--color-accent);
}
.ds-tabs--vertical.ds-tabs--secondary .ds-tab.is-active {
  border-right-color: var(--c-secondary-500);
}

/* Icon positioning modifiers — Aegis supports Left (default), Up (stacked), Right */
.ds-tab__icon { display: inline-flex; align-items: center; justify-content: center; }
.ds-tab__icon svg { width: 18px; height: 18px; }
.ds-tab--icon-up { flex-direction: column; padding: 10px 12px; gap: 4px; }
.ds-tab--icon-right { flex-direction: row-reverse; }

/* Sizes */
.ds-tab--sm { padding: 8px 12px; font-size: var(--font-size-xs); }
.ds-tab--lg { padding: 16px 20px; font-size: var(--font-size-base); }

} /* end @layer components */