/*
 * Portal Pendidikan v143
 * Lapisan visual bersama untuk font, navigasi, dan kelompok tab.
 * Selector sengaja dibatasi agar tombol aksi (hapus, kamera, notifikasi,
 * submit formulir, dan aksi tabel) tidak berubah perilakunya.
 */

:root {
  --portal-v143-green: #10b981;
  --portal-v143-green-dark: #047857;
  --portal-v143-green-text: #087f62;
  --portal-v143-mint: #e9f9f3;
  --portal-v143-mint-hover: #dcf7ed;
  --portal-v143-ink: #1f2937;
  --portal-v143-muted: #64748b;
  --portal-v143-icon: #71839b;
}

html,
body,
button,
input,
select,
textarea,
option,
table {
  font-family:
    Calibri,
    Carlito,
    "Segoe UI",
    Aptos,
    Arial,
    sans-serif !important;
}

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--portal-v143-ink);
  letter-spacing: 0.005em;
}

body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600 !important;
  letter-spacing: -0.012em;
}

body :is(button, label, th, b, strong) {
  font-weight: 600 !important;
}

body :is(.font-black, .font-extrabold) {
  font-weight: 700 !important;
}

body .font-bold {
  font-weight: 600 !important;
}

body :is(p, small, .muted, .text-gray-400, .text-gray-500, .text-slate-500) {
  line-height: 1.55;
}

/* ================================================================
   Navigasi samping desktop — indikator aktif mengikuti Admin Sekolah.
   ================================================================ */

@media (min-width: 768px) {
  .portal-nav-desktop > button {
    position: relative;
    min-height: 52px !important;
    padding: 11px 14px 11px 16px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--portal-v143-muted) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease !important;
  }

  .portal-nav-desktop > button:hover {
    background: #f2faf7 !important;
    color: var(--portal-v143-green-dark) !important;
  }

  .portal-nav-desktop > button > svg {
    flex: 0 0 29px;
    width: 29px !important;
    height: 29px !important;
    padding: 5px;
    border-radius: 9px;
    background: #f1f5f9;
    color: var(--portal-v143-icon);
    stroke-width: 1.8;
    transition:
      background-color 0.18s ease,
      color 0.18s ease;
  }

  .portal-nav-desktop > button::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.18s ease;
  }

  .portal-nav-desktop > button.bg-emerald-500,
  .portal-nav-desktop > button.bg-emerald-50,
  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: var(--portal-v143-mint) !important;
    color: var(--portal-v143-green-text) !important;
    box-shadow: 0 7px 18px rgba(5, 150, 105, 0.08) !important;
  }

  .portal-nav-desktop > button.bg-emerald-500::before,
  .portal-nav-desktop > button.bg-emerald-50::before,
  body.portal-accreditation-open
    .portal-accreditation-menu-desktop-v133
    > button[data-portal-accreditation-nav="1"]::before,
  .portal-accreditation-menu-desktop-v133
    > button[data-portal-accreditation-nav="1"].portal-accreditation-nav-active::before {
    background: var(--portal-v143-green) !important;
  }

  .portal-nav-desktop > button.bg-emerald-500 > svg,
  .portal-nav-desktop > button.bg-emerald-50 > svg,
  body.portal-accreditation-open
    .portal-accreditation-menu-desktop-v133
    > button[data-portal-accreditation-nav="1"]
    > svg,
  .portal-accreditation-menu-desktop-v133
    > button[data-portal-accreditation-nav="1"].portal-accreditation-nav-active
    > svg {
    background: #d7f5ea !important;
    color: var(--portal-v143-green-text) !important;
  }
}

@media (min-width: 851px) {
  .app #groupNav button {
    position: relative;
    min-height: 52px !important;
    padding: 11px 14px 11px 16px !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--portal-v143-muted) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }

  .app #groupNav button:hover {
    background: #f2faf7 !important;
    color: var(--portal-v143-green-dark) !important;
  }

  .app #groupNav button::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: transparent !important;
  }

  .app #groupNav button.active {
    background: var(--portal-v143-mint) !important;
    color: var(--portal-v143-green-text) !important;
    box-shadow: 0 7px 18px rgba(5, 150, 105, 0.08) !important;
  }

  .app #groupNav button.active::before {
    background: var(--portal-v143-green) !important;
  }

  .app #groupNav button .admin-nav-icon {
    background: #f1f5f9 !important;
    color: var(--portal-v143-icon) !important;
  }

  .app #groupNav button.active .admin-nav-icon {
    background: #d7f5ea !important;
    color: var(--portal-v143-green-text) !important;
  }
}

@media (min-width: 761px) {
  :is(
      .owner-app #ownerNav .nav-button,
      .foundation-app #foundationNav button
    ) {
    position: relative;
    min-height: 52px !important;
    padding: 11px 14px 11px 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--portal-v143-muted) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }

  :is(
      .owner-app #ownerNav .nav-button,
      .foundation-app #foundationNav button
    ):hover {
    background: #f2faf7 !important;
    color: var(--portal-v143-green-dark) !important;
  }

  :is(
      .owner-app #ownerNav .nav-button,
      .foundation-app #foundationNav button
    )::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    display: block !important;
    width: 4px;
    border-radius: 999px;
    background: transparent !important;
  }

  :is(
      .owner-app #ownerNav .nav-button.active,
      .foundation-app #foundationNav button.active
    ) {
    background: var(--portal-v143-mint) !important;
    color: var(--portal-v143-green-text) !important;
    box-shadow: 0 7px 18px rgba(5, 150, 105, 0.08) !important;
  }

  :is(
      .owner-app #ownerNav .nav-button.active,
      .foundation-app #foundationNav button.active
    )::before {
    background: var(--portal-v143-green) !important;
  }

  .owner-app #ownerNav .nav-button > svg,
  .foundation-app #foundationNav button .nav-icon {
    flex: 0 0 29px;
    width: 29px !important;
    height: 29px !important;
    padding: 5px !important;
    border-radius: 9px !important;
    background: #f1f5f9 !important;
    color: var(--portal-v143-icon) !important;
  }

  .owner-app #ownerNav .nav-button.active > svg,
  .foundation-app #foundationNav button.active .nav-icon {
    background: #d7f5ea !important;
    color: var(--portal-v143-green-text) !important;
  }
}

/* ================================================================
   Kelompok tab — gaya seperti Data Sekolah / Guru & Karyawan.
   ================================================================ */

:is(
    .app #subNav.subnav,
    .foundation-section-tabs,
    .school-tabs,
    #root .bg-gray-100.p-1\.5.rounded-xl.inline-flex.gap-1,
    #root
      .grid.grid-cols-2.gap-1\.5.bg-white.border.border-gray-100.rounded-2xl.p-1\.5.shadow-sm,
    #root .mb-4.bg-gray-100.rounded-2xl.p-1\.5.flex.gap-1
  ) {
  gap: 10px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(
    .app #subNav.subnav,
    .foundation-section-tabs,
    .school-tabs,
    #root .bg-gray-100.p-1\.5.rounded-xl.inline-flex.gap-1,
    #root
      .grid.grid-cols-2.gap-1\.5.bg-white.border.border-gray-100.rounded-2xl.p-1\.5.shadow-sm,
    #root .mb-4.bg-gray-100.rounded-2xl.p-1\.5.flex.gap-1
  )
  > button,
.portal-guru-category-tabs-v133 > button {
  position: relative;
  min-height: 48px !important;
  min-width: 128px;
  padding: 10px 16px !important;
  border: 2px solid #16a97f !important;
  border-left-width: 8px !important;
  border-radius: 17px !important;
  background: #f0fbf7 !important;
  color: #0f766e !important;
  box-shadow: 0 5px 15px rgba(5, 150, 105, 0.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

:is(
    .app #subNav.subnav,
    .foundation-section-tabs,
    .school-tabs,
    #root .bg-gray-100.p-1\.5.rounded-xl.inline-flex.gap-1,
    #root
      .grid.grid-cols-2.gap-1\.5.bg-white.border.border-gray-100.rounded-2xl.p-1\.5.shadow-sm,
    #root .mb-4.bg-gray-100.rounded-2xl.p-1\.5.flex.gap-1
  )
  > button:hover,
.portal-guru-category-tabs-v133 > button:hover {
  border-color: #059669 !important;
  background: var(--portal-v143-mint-hover) !important;
  color: var(--portal-v143-green-dark) !important;
  transform: translateY(-1px);
}

:is(
    .app #subNav.subnav,
    .foundation-section-tabs,
    .school-tabs,
    #root .bg-gray-100.p-1\.5.rounded-xl.inline-flex.gap-1,
    #root
      .grid.grid-cols-2.gap-1\.5.bg-white.border.border-gray-100.rounded-2xl.p-1\.5.shadow-sm,
    #root .mb-4.bg-gray-100.rounded-2xl.p-1\.5.flex.gap-1
  )
  > button:is(.active, .bg-emerald-500, [aria-selected="true"]),
.portal-guru-category-tabs-v133
  > button:is(
    .active,
    .bg-emerald-500,
    .portal-accreditation-nav-active,
    [aria-selected="true"]
  ) {
  border-color: #059669 !important;
  border-left-color: #047857 !important;
  background: var(--portal-v143-green) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.2) !important;
  transform: none;
}

/* Posisi tombol penyimpanan absensi desktop dibuat lebih rendah dan presisi. */
@media (min-width: 768px) {
  .attendance-daily-scroll {
    padding-bottom: 4rem !important;
  }

  .attendance-daily-scroll > .attendance-mobile-actions {
    bottom: 0 !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.82fr) !important;
    gap: 10px !important;
    margin-top: 22px !important;
    padding: 9px !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .attendance-daily-scroll > .attendance-mobile-actions > button {
    min-height: 54px;
    border-radius: 13px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 767px) {
  :is(
      .foundation-section-tabs,
      .school-tabs,
      #root .bg-gray-100.p-1\.5.rounded-xl.inline-flex.gap-1,
      #root
        .grid.grid-cols-2.gap-1\.5.bg-white.border.border-gray-100.rounded-2xl.p-1\.5.shadow-sm,
      #root .mb-4.bg-gray-100.rounded-2xl.p-1\.5.flex.gap-1
    )
    > button,
  .portal-guru-category-tabs-v133 > button {
    min-height: 45px !important;
    min-width: 118px;
    padding: 9px 13px !important;
    border-left-width: 7px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
  }
}