/*
 * Administrative Tab Styling (Local Tasks)
 *
 * We target the nav element with the 'primary-tabs' aria-labelledby attribute
 * to scope these styles specifically to the local tasks tabs, and not affect
 * other buttons on the site.
*/

/* Container for primary tabs */
nav[aria-labelledby="primary-tabs"] {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-lg);
}

nav[aria-labelledby="primary-tabs"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: stretch;
}

nav[aria-labelledby="primary-tabs"] li {
  margin: 0;
  padding: 0;
  display: flex;
}

/* Base button styles for admin tabs */
nav[aria-labelledby="primary-tabs"] .btn,
nav[aria-labelledby="primary-tabs"] .btn-primary,
nav[aria-labelledby="primary-tabs"] a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Primary button style (Edit, Revisions, Transitions) */
nav[aria-labelledby="primary-tabs"] .btn-primary {
  background-color: #485163;
  color: #ffffff;
  border: 1px solid #485163;
}

nav[aria-labelledby="primary-tabs"] .btn-primary:hover,
nav[aria-labelledby="primary-tabs"] .btn-primary:focus,
nav[aria-labelledby="primary-tabs"] .btn-primary.is-active {
  background-color: #2c3e50;
  border-color: #2c3e50;
  color: #ffffff;
  text-decoration: none;
}

/* Danger button style (Delete) */
nav[aria-labelledby="primary-tabs"] .btn-danger {
  background-color: #c9302c;
  color: #ffffff;
  border: 1px solid #c9302c;
}

nav[aria-labelledby="primary-tabs"] .btn-danger:hover,
nav[aria-labelledby="primary-tabs"] .btn-danger:focus {
  background-color: #a02622;
  border-color: #a02622;
  color: #ffffff;
  text-decoration: none;
}

/* Focus states for accessibility */
nav[aria-labelledby="primary-tabs"] .btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Secondary tabs styling */
nav[aria-labelledby="secondary-tabs"] {
  display: flex;
  justify-content: center;
  padding: var(--space-sm) 0;
}

nav[aria-labelledby="secondary-tabs"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

nav[aria-labelledby="secondary-tabs"] li {
  margin: 0;
  padding: 0;
  display: flex;
}

nav[aria-labelledby="secondary-tabs"] .btn,
nav[aria-labelledby="secondary-tabs"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-decoration: none;
}