/*
 * Akreditasi merupakan menu mandiri. Tombol Data & Administrasi tidak pernah
 * dipakai sebagai indikator Akreditasi.
 */
.portal-nav-desktop
  > button[data-portal-accreditation-nav="1"] {
  background: transparent !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}

body.portal-accreditation-open
  .portal-accreditation-menu-desktop-v133
  > button:not([data-portal-accreditation-nav="1"]) {
  background: transparent !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}

body.portal-accreditation-open
  .portal-accreditation-menu-desktop-v133
  > button[data-portal-accreditation-nav="1"],
.portal-accreditation-menu-desktop-v133
  > button[data-portal-accreditation-nav="1"].portal-accreditation-nav-active {
  background: #10b981 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25) !important;
}

.portal-guru-category-tabs-v133 {
  align-items: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.portal-guru-category-tabs-v133::-webkit-scrollbar {
  display: none;
}

.portal-guru-category-tabs-v133 > button,
.portal-guru-category-tabs-v133
  > button[data-portal-accreditation-nav="1"] {
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.portal-guru-category-tabs-v133 > button.bg-emerald-500,
.portal-guru-category-tabs-v133
  > button[data-portal-accreditation-nav="1"].portal-accreditation-nav-active {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
  box-shadow: 0 7px 17px rgba(14, 165, 233, 0.16) !important;
}

body.portal-accreditation-open
  .portal-guru-category-tabs-v133
  > button:not([data-portal-accreditation-nav="1"]) {
  background: #f1f5f9 !important;
  border-color: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.portal-guru-category-tabs-v133 > button::before,
.portal-guru-category-tabs-v133 > button::after {
  content: none !important;
  display: none !important;
}

/*
 * Selector ini sengaja sama kuat dengan school-account-tabs-v117.css dan
 * dimuat sesudahnya. Empat tab akun sekolah selalu satu baris dan dapat
 * digeser mendatar pada layar APK/mobile.
 */
@media (max-width: 767px) {
  #root header + div.portal-guru-category-tabs-v133[class~="md:hidden"] {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 54px !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 12px !important;
    scroll-behavior: smooth;
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
  }

  #root
    header
    + div.portal-guru-category-tabs-v133[class~="md:hidden"]
    > button {
    flex: 0 0 auto !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 132px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 14px !important;
    scroll-snap-align: start;
  }
}

/* Wadah tab mobile tetap tersembunyi ketika navigasi desktop digunakan. */
@media (min-width: 768px) {
  #root header + div.portal-guru-category-tabs-v133[class~="md:hidden"] {
    display: none !important;
  }
}