/*
 * Reusable DGA Tabs component (design.dga.gov.sa/guidelines/components/navigational/tabs),
 * built on the project's own dga-tokens.css variables (all the names below
 * already exist there -- verified, not invented). Class names match the
 * guideline's official DgaTabs React component (platformscode-new-react)
 * one-for-one: .dga-tabs-list, .dga-tabs-list__item, etc. -- NOT the same
 * as the older, unrelated .dga-tab-control / .dga-tab-control-underline
 * classes used by dynamic-tabs-content.blade.php / horizontal-tabs.blade.php
 * (ACF flexible-content blocks) -- those are a separate, pre-existing
 * component this one doesn't touch or replace.
 *
 * The guideline's own baseline indicator is a static per-tab underline
 * (show/hide, no animation). This adds hrsd.gov.sa's sliding-indicator
 * animation on top (same lineage/tokens, see [[nd96-hero-coverflow-rebuild]]-
 * style comparison work) as a deliberate enhancement, driven by
 * --dga-tabs-indicator-offset/--dga-tabs-indicator-size set by dga-tabs.js.
 */

.dga-tabs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* ---- horizontal ---- */
.dga-tabs-list--horizontal {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dga-tabs-list--horizontal::-webkit-scrollbar { display: none; }
/* Divider: the full-width baseline track behind the tabs (part of the
   guideline's own anatomy, not just decoration). */
.dga-tabs-list--horizontal.dga-tabs-list--divider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 2px;
  width: 100%;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--border-neutral-primary, #d2d6db);
}
/* Sliding active-tab indicator (hrsd-style animation). One shared bar,
   repositioned via CSS custom properties instead of each tab drawing its
   own -- set by dga-tabs.js on activate/resize/load. */
.dga-tabs-list--horizontal .dga-tabs-list__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--border-primary, #1b8354);
  z-index: 1;
  transform: translateX(var(--dga-tabs-indicator-offset, 0px));
  width: var(--dga-tabs-indicator-size, 0px);
  transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] .dga-tabs-list--horizontal .dga-tabs-list__indicator {
  left: auto;
  right: 0;
  transform: translateX(calc(-1 * var(--dga-tabs-indicator-offset, 0px)));
}

/* ---- vertical ---- */
.dga-tabs-list--vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  position: relative;
  width: 100%;
}
.dga-tabs-list--vertical.dga-tabs-list--divider {
  border-inline-start: 2px solid var(--border-neutral-primary, #d2d6db);
}
.dga-tabs-list--vertical .dga-tabs-list__indicator {
  position: absolute;
  inset-inline-start: 0;
  width: 2px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--border-primary, #1b8354);
  z-index: 1;
  transform: translateY(var(--dga-tabs-indicator-offset, 0px));
  height: var(--dga-tabs-indicator-size, 0px);
  transition: transform .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .dga-tabs-list__indicator { transition: none; }
}

/* ---- tab item (shared by both orientations) ---- */
.dga-tabs-list__item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  border: 0;
  background: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary-paragraph, #384250);
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.dga-tabs-list--vertical .dga-tabs-list__item {
  justify-content: flex-start;
  width: 100%;
  text-align: start;
}
.dga-tabs-list__item--sm { padding: var(--spacing-md, 8px) var(--spacing-lg, 12px); }
.dga-tabs-list__item--md { padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px); }
.dga-tabs-list__item--lg { padding: var(--spacing-xl, 16px) var(--spacing-2xl, 20px); }

.dga-tabs-list__item:hover {
  background-color: var(--button-background-neutral-hovered, #f3f4f6);
  color: var(--colors-text-primary, #161616);
}
.dga-tabs-list__item:active {
  background-color: var(--button-background-neutral-pressed, #e5e7eb);
}
/* Per-item hover/pressed underline -- part of the official guideline
   itself (design.dga.gov.sa/guidelines/components/navigational/tabs),
   not just decoration: a black bar previews "you're pointing at this
   tab", distinct from the green .dga-tabs-list__indicator which means
   "this is the selected one". Suppressed on the already-active tab so it
   doesn't fight with that sliding indicator sitting in the same spot.
   Sized/positioned edge-to-edge (not the guideline's own inset/centered
   convention) so it exactly matches the active indicator's own size and
   position -- same bar, just black-vs-green and static-vs-sliding. */
.dga-tabs-list--horizontal .dga-tabs-list__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--border-black, #000);
  opacity: 0;
  transition: opacity .2s ease;
}
.dga-tabs-list--vertical .dga-tabs-list__item::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--border-black, #000);
  opacity: 0;
  transition: opacity .2s ease;
}
.dga-tabs-list__item:hover::after,
.dga-tabs-list__item:active::after {
  opacity: 1;
}
.dga-tabs-list__item--active::after {
  opacity: 0;
}
.dga-tabs-list__item:focus { outline: none; }
.dga-tabs-list__item:focus-visible {
  outline: 2px solid var(--colors-base-black, #000);
  outline-offset: -2px;
}
.dga-tabs-list__item.disabled,
.dga-tabs-list__item[aria-disabled="true"] {
  color: var(--text-default-disabled, #9da4ae);
  cursor: not-allowed;
  pointer-events: none;
}
.dga-tabs-list__item[aria-disabled="true"] .dga-tabs-list__icon {
  color: var(--text-default-disabled, #9da4ae);
}

.dga-tabs-list__item--active {
  color: var(--text-default, #161616);
  font-weight: 700;
}
.dga-tabs-list__item--active:hover,
.dga-tabs-list__item--active:active {
  background-color: transparent;
}

.dga-tabs-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--icon-default-500, #6c737f);
}
.dga-tabs-list__item--active .dga-tabs-list__icon,
.dga-tabs-list__item:hover .dga-tabs-list__icon,
.dga-tabs-list__item:active .dga-tabs-list__icon {
  color: var(--icon-default, #000);
}

.dga-tabs-list__label { line-height: 1.25; }

/* ---- panels ---- */
.dga-tabs-panel { display: none; }
.dga-tabs-panel.is-active { display: block; }