/* =============================================================================
   A4 - tabs, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 3 colour literal(s) -> on-accent, 8 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   1 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Tabs
   Underline indicator, pills, filled, vertical, scrollable, closeable, badges
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Container
   --------------------------------------------------------------------------- */

.s-tabs-container {
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Base Tab Bar
   --------------------------------------------------------------------------- */

.s-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  border-block-end: 2px solid var(--s-border-color);
  flex-wrap: wrap;
}

.s-tab-item {
  margin-block-end: -2px;
}

.s-tab-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-gap-2);
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  font-size: var(--s-font-size-base);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-muted-color);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  transition: var(--s-transition-color), var(--s-transition-border);
  white-space: nowrap;
  background: transparent;
  border-block-start: none;
  border-inline: none;
  position: relative;
}

.s-tab-link:hover {
  color: var(--s-primary);
  border-block-end-color: var(--s-primary-tint);
}

.s-tab-link.active {
  color: var(--s-primary);
  border-block-end-color: var(--s-primary);
}

.s-tab-link:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: -2px;
  border-radius: var(--s-border-radius-sm);
}

.s-tab-link.disabled,
.s-tab-link:disabled {
  color: var(--s-light-color);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Tab Icon
   --------------------------------------------------------------------------- */

.s-tab-link-icon {
  font-size: 1.125rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Tab Badge
   --------------------------------------------------------------------------- */

.s-tab-link-badge {
  font-size: var(--s-font-size-xs);
  padding-block: 0.1rem;
  padding-inline: 0.45rem;
  border-radius: var(--s-border-radius-pill);
  background-color: var(--s-primary-light);
  color: var(--s-primary);
  line-height: 1.3;
  font-weight: var(--s-font-weight-semibold);
}

.s-tab-link-badge-primary   { background-color: var(--s-primary-light);   color: var(--s-primary); }
.s-tab-link-badge-secondary { background-color: var(--s-secondary-light); color: var(--s-secondary); }
.s-tab-link-badge-success   { background-color: var(--s-success-light);   color: var(--s-success); }
.s-tab-link-badge-danger    { background-color: var(--s-danger-light);    color: var(--s-danger); }
.s-tab-link-badge-warning   { background-color: var(--s-warning-light);   color: var(--s-warning); }
.s-tab-link-badge-info      { background-color: var(--s-info-light);      color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Close Button
   --------------------------------------------------------------------------- */

.s-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--s-border-radius-sm);
  font-size: 1rem;
  color: var(--s-muted-color);
  margin-inline-start: 0.25rem;
  transition: var(--s-transition-color), background-color 0.15s ease;
  cursor: pointer;
  line-height: 1;
}

.s-tab-close:hover {
  color: var(--s-danger);
  background-color: var(--s-danger-tint);
}

/* ---------------------------------------------------------------------------
   Pills Variant
   --------------------------------------------------------------------------- */

.s-tabs-pills {
  border-block-end: none;
  gap: var(--s-gap-2);
}

.s-tabs-pills .s-tab-item {
  margin-block-end: 0;
}

.s-tabs-pills .s-tab-link {
  border: none;
  border-radius: var(--s-border-radius);
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

.s-tabs-pills .s-tab-link:hover {
  background-color: var(--s-body-color-tint);
  border-block-end-color: transparent;
}

.s-tabs-pills .s-tab-link.active {
  background-color: var(--s-primary);
  color: var(--on-accent);
  box-shadow: none;
  border-block-end-color: transparent;
}

.s-tabs-pills .s-tab-link.active .s-tab-link-badge {
  background-color: color-mix(in srgb, var(--on-accent) 20%, transparent);
  color: var(--on-accent);
}

.s-tabs-pills .s-tab-link.active .s-tab-close:hover {
  background-color: color-mix(in srgb, var(--on-accent) 20%, transparent);
  color: var(--on-accent);
}

/* ---------------------------------------------------------------------------
   Filled / Boxed Variant
   --------------------------------------------------------------------------- */

.s-tabs-filled {
  border-block-end: none;
  background-color: var(--s-body-bg);
  border-radius: var(--s-border-radius);
  padding: 0.25rem;
  gap: 0.25rem;
}

.s-tabs-filled .s-tab-item {
  margin-block-end: 0;
}

.s-tabs-filled .s-tab-link {
  border: none;
  border-radius: var(--s-border-radius-sm);
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

.s-tabs-filled .s-tab-link:hover {
  border-block-end-color: transparent;
}

.s-tabs-filled .s-tab-link.active {
  background-color: var(--s-card-bg);
  color: var(--s-heading-color);
  border-block-end-color: transparent;
}

/* ---------------------------------------------------------------------------
   Fill (Equal Width) Modifier
   --------------------------------------------------------------------------- */

.s-tabs-fill {
  flex-wrap: nowrap;
}

.s-tabs-fill .s-tab-item-fill {
  flex: 1 1 0;
  text-align: center;
}

.s-tabs-fill .s-tab-link {
  inline-size: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Vertical Tabs (Left & Right)
   --------------------------------------------------------------------------- */

.s-tabs-container-vertical {
  flex-direction: row;
}

.s-tabs-layout-vertical {
  display: flex;
  gap: 0;
}

.s-tabs-container-right .s-tabs-layout-vertical {
  flex-direction: row-reverse;
}

.s-tabs-layout-vertical > .s-tab-content {
  flex: 1;
  padding-block-start: 0;
  padding-inline-start: 1.5rem;
  min-inline-size: 0;
}

.s-tabs-container-right .s-tabs-layout-vertical > .s-tab-content {
  padding-inline-start: 0;
  padding-inline-end: 1.5rem;
}

.s-tabs-vertical {
  flex-direction: column;
  border-block-end: none;
  border-inline-end: 2px solid var(--s-border-color);
  gap: 0;
  flex-shrink: 0;
  min-inline-size: 10rem;
  flex-wrap: nowrap;
}

.s-tabs-vertical .s-tab-item {
  margin-block-end: 0;
  margin-inline-end: -2px;
}

.s-tabs-vertical .s-tab-link {
  inline-size: 100%;
  border-block-end: none;
  border-inline-end: 2px solid transparent;
  text-align: start;
  justify-content: flex-start;
}

.s-tabs-vertical .s-tab-link:hover {
  border-block-end-color: transparent;
  border-inline-end-color: var(--s-primary-tint);
}

.s-tabs-vertical .s-tab-link.active {
  border-block-end-color: transparent;
  border-inline-end-color: var(--s-primary);
}

/* Right position - flip border to inline-start */
.s-tabs-container-right .s-tabs-vertical {
  border-inline-end: none;
  border-inline-start: 2px solid var(--s-border-color);
}

.s-tabs-container-right .s-tabs-vertical .s-tab-item {
  margin-inline-end: 0;
  margin-inline-start: -2px;
}

.s-tabs-container-right .s-tabs-vertical .s-tab-link {
  border-inline-end: none;
  border-inline-start: 2px solid transparent;
}

.s-tabs-container-right .s-tabs-vertical .s-tab-link:hover {
  border-inline-start-color: var(--s-primary-tint);
}

.s-tabs-container-right .s-tabs-vertical .s-tab-link.active {
  border-inline-start-color: var(--s-primary);
}

/* Vertical pills */
.s-tabs-vertical.s-tabs-pills {
  border-inline-end: none;
  border-inline-start: none;
}

.s-tabs-vertical.s-tabs-pills .s-tab-link {
  border-inline-end: none;
  border-inline-start: none;
}

/* ---------------------------------------------------------------------------
   Bottom Position
   --------------------------------------------------------------------------- */

.s-tabs-container > .s-tabs:last-child {
  border-block-end: none;
  border-block-start: 2px solid var(--s-border-color);
}

.s-tabs-container > .s-tabs:last-child .s-tab-item {
  margin-block-end: 0;
  margin-block-start: -2px;
}

.s-tabs-container > .s-tabs:last-child .s-tab-link {
  border-block-end: none;
  border-block-start: 2px solid transparent;
}

.s-tabs-container > .s-tabs:last-child .s-tab-link:hover {
  border-block-end-color: transparent;
  border-block-start-color: var(--s-primary-tint);
}

.s-tabs-container > .s-tabs:last-child .s-tab-link.active {
  border-block-end-color: transparent;
  border-block-start-color: var(--s-primary);
}

.s-tabs-container > .s-tab-content:first-child {
  padding-block-start: 0;
  padding-block-end: 1rem;
}

/* ---------------------------------------------------------------------------
   Scrollable Tabs
   --------------------------------------------------------------------------- */

.s-tabs-scroll-container {
  display: flex;
  align-items: stretch;
  position: relative;
}

.s-tabs-scroll-viewport {
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}

.s-tabs-scroll-viewport::-webkit-scrollbar {
  display: none;
}

.s-tabs-scroll-viewport > .s-tabs {
  flex-wrap: nowrap;
}

.s-tabs-scrollable {
  flex-wrap: nowrap;
}

.s-tabs-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  flex-shrink: 0;
  background: var(--s-card-bg);
  border: none;
  color: var(--s-muted-color);
  cursor: pointer;
  font-size: 1.25rem;
  transition: var(--s-transition-color), background-color 0.15s ease;
  z-index: 1;
}

.s-tabs-scroll-btn:hover {
  color: var(--s-primary);
  background-color: var(--s-primary-tint);
}

.s-tabs-scroll-prev {
  border-inline-end: 1px solid var(--s-border-color);
}

.s-tabs-scroll-next {
  border-inline-start: 1px solid var(--s-border-color);
}

/* ---------------------------------------------------------------------------
   Tab Content & Panels
   --------------------------------------------------------------------------- */

.s-tab-content {
  padding-block-start: 1rem;
}

.s-tab-pane {
  animation: s-tab-fade-in 0.2s ease-in-out;
}

@keyframes s-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}