/* Ninja Neumorph - Tabs (Drupal local tasks) */

.tabs,
.tabs--primary {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nm-space-lg) 0;
  gap: var(--nm-space-xs);
  background: var(--nm-surface);
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-raised-sm);
  padding: var(--nm-space-xs);
}

.tabs__tab {
  margin: 0;
}

.tabs__link,
.tabs a {
  display: inline-flex;
  align-items: center;
  padding: var(--nm-space-xs) var(--nm-space-md);
  color: var(--nm-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--nm-radius-xs);
  transition: all var(--nm-transition-fast);
  white-space: nowrap;
}

.tabs__link:hover,
.tabs a:hover {
  color: var(--nm-accent);
  background: var(--nm-accent-muted);
  text-decoration: none;
}

.tabs__link.is-active,
.tabs__link--active,
.tabs a.is-active {
  color: var(--nm-text-inverse);
  background: var(--nm-accent);
  box-shadow: var(--nm-shadow-raised-sm);
}

/* Secondary tabs */
.tabs--secondary {
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid var(--nm-border);
  border-radius: 0;
  padding: 0;
  gap: 0;
}

.tabs--secondary .tabs__link {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tabs--secondary .tabs__link.is-active {
  background: transparent;
  color: var(--nm-accent);
  border-bottom-color: var(--nm-accent);
}

/* Nav tabs (Bootstrap compat) */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nm-space-md) 0;
  border-bottom: 2px solid var(--nm-border);
  gap: var(--nm-space-xs);
}

.nav-tabs .nav-link {
  padding: var(--nm-space-sm) var(--nm-space-md);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--nm-text-secondary);
  border-radius: var(--nm-radius-xs) var(--nm-radius-xs) 0 0;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--nm-text-muted);
  color: var(--nm-text);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--nm-accent);
  color: var(--nm-accent);
  background: var(--nm-accent-muted);
}

/* Nav pills (neumorphic) */
.nav-pills {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: var(--nm-space-xs);
  margin: 0 0 var(--nm-space-md) 0;
  background: var(--nm-surface);
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-raised-sm);
  gap: var(--nm-space-xxs);
}

.nav-pills .nav-link {
  border-radius: var(--nm-radius-xs);
  padding: var(--nm-space-xs) var(--nm-space-md);
}

.nav-pills .nav-link.active {
  background: var(--nm-accent);
  color: var(--nm-text-inverse);
  box-shadow: var(--nm-shadow-raised-sm);
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

/* Local tasks rendered as plain UL: style as neumorphic menu pills. */
[id*="local-tasks"] > ul,
#block-ninja-neumorph-local-tasks > ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none !important;
  margin: 0 0 var(--nm-space-lg) 0;
  padding: var(--nm-space-xs);
  gap: 0.4rem;
  background: var(--nm-surface);
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-inset-sm);
}

[id*="local-tasks"] > ul > li,
#block-ninja-neumorph-local-tasks > ul > li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

[id*="local-tasks"] > ul > li > a,
#block-ninja-neumorph-local-tasks > ul > li > a {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.8rem;
  border-radius: 0.7rem;
  text-decoration: none;
  font-family: var(--nm-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nm-text);
  background: var(--nm-surface-raised);
  box-shadow: var(--nm-shadow-raised-sm);
}

[id*="local-tasks"] > ul > li > a:hover,
#block-ninja-neumorph-local-tasks > ul > li > a:hover {
  color: var(--nm-accent);
  box-shadow: var(--nm-shadow-inset-sm);
}

[id*="local-tasks"] > ul > li > a.is-active,
[id*="local-tasks"] > ul > li > a[aria-current="page"],
#block-ninja-neumorph-local-tasks > ul > li > a.is-active,
#block-ninja-neumorph-local-tasks > ul > li > a[aria-current="page"] {
  color: var(--nm-text-inverse);
  background: var(--nm-accent);
}