/* Admin dashboard tabs — responsive & professional enhancement */

[role="tablist"][aria-label="Admin sections"] {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 0.375rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #e5d9c8;
  box-shadow: 0 1px 3px rgba(43, 33, 24, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 74, 56, 0.25) transparent;
}

[role="tablist"][aria-label="Admin sections"]::-webkit-scrollbar {
  height: 5px;
}

[role="tablist"][aria-label="Admin sections"]::-webkit-scrollbar-track {
  background: transparent;
}

[role="tablist"][aria-label="Admin sections"]::-webkit-scrollbar-thumb {
  background: rgba(92, 74, 56, 0.25);
  border-radius: 3px;
}

[role="tablist"][aria-label="Admin sections"] [role="tab"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 40px;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border-radius: 0.75rem;
  scroll-snap-align: start;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

[role="tablist"][aria-label="Admin sections"] [role="tab"]:active {
  transform: scale(0.97);
}

[role="tablist"][aria-label="Admin sections"] [role="tab"][aria-selected="true"] {
  background-color: #e8590c;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(232, 89, 12, 0.28);
}

[role="tablist"][aria-label="Admin sections"] [role="tab"]:not([aria-selected="true"]):hover {
  background-color: #f1e8da;
  color: #2b2118;
}

/* Mobile: show a subtle fade on the right edge when tabs overflow */
@media (max-width: 640px) {
  [role="tablist"][aria-label="Admin sections"] {
    position: relative;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.875rem;
  }

  [role="tablist"][aria-label="Admin sections"] [role="tab"] {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    min-height: 38px;
  }
}