@layer components {
.app-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing);
}

/* No-JS fallback: show only first tab panel. */
html.no-js [data-tabs] [data-tab-panel] {
  display: none;
}

html.no-js [data-tabs] [data-tab-panel]:first-of-type {
  display: block;
}

/* JS mode: keep panels hidden until tab init completed (prevents flash). */
html.js [data-tabs]:not([data-tabs-ready="1"]) [data-tab-panel] {
  display: none !important;
}

.app-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--tabs-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-start: 2px;
    padding-left: 2px;
    white-space: nowrap;
}

.app-tabs-nav button,
.app-tabs-nav a {
  background: transparent;
  border: 0;
  padding: 5px 10px 5px 10px;
  color: var(--tabs-muted) !important;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  border-radius: 0;
  margin-bottom: 0;
}

.app-tabs-nav button:hover,
.app-tabs-nav button:focus-visible,
.app-tabs-nav a:hover,
.app-tabs-nav a:focus-visible {
  --app-color: inherit;
  color: var(--app-color) !important;
}

.app-tabs-nav button.is-active,
.app-tabs-nav a.is-active {
  --app-color: inherit;
  color: var(--app-color) !important;
  border-color: var(--tabs-active);
}

.app-tabs-nav button.has-invalid,
.app-tabs-nav a.has-invalid {
  color: var(--app-danger, #dc3545) !important;
}

[data-tab-panel][hidden] {
  display: none;
}

html.js [data-tabs][data-tabs-ready="1"] [data-tab-panel]:not([hidden]) {
  display: block;
}

/* Safety fallback when JS is available but the ready marker is missing. */
html:not(.no-js) [data-tabs] [data-tab-panel]:not([hidden]) {
  display: block;
}
}