/* Portal Pendidikan v86 — viewport stabil, layer terdepan, dan jadwal kompak. */
:root {
  --portal-viewport-height: 100dvh;
  --portal-mobile-dock-height: 76px;
}

/* Pusat notifikasi selalu berada di atas shell, header, kartu, dan menu portal. */
body > .portal-student-notification-panel,
.portal-student-notification-layer,
.psn-panel,
.owner-notification-panel,
.foundation-notification-panel,
.school-notification-panel {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
}

.psn-panel {
  top: calc(72px + env(safe-area-inset-top)) !important;
  right: 16px !important;
  left: auto;
}

body > .portal-student-notification-panel[hidden],
.psn-panel[hidden] {
  display: none !important;
}

#root header:has(.portal-student-header-actions) {
  overflow: visible !important;
  contain: none !important;
}

/* Jadwal Guru: kartu kecil dalam grid, bukan daftar panjang satu kolom. */
.portal-teacher-today-schedule,
.portal-teacher-schedule-day {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.portal-teacher-today-schedule-grid,
.portal-teacher-schedule-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
}

.portal-teacher-schedule-card {
  min-width: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  background: #fff !important;
  padding: 12px !important;
  box-shadow: 0 7px 20px rgba(15, 23, 42, .045) !important;
}

.portal-teacher-schedule-card > * {
  min-width: 0;
}

.portal-teacher-schedule-card h4,
.portal-teacher-schedule-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-teacher-schedule-day > :first-child {
  margin-bottom: 9px;
  border: 1px solid #e5e7eb !important;
  border-radius: 15px !important;
  background: #f8fafc !important;
}

@media (min-width: 1100px) {
  .portal-teacher-today-schedule-grid,
  .portal-teacher-schedule-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body:has(#root > .flex.h-screen),
  body:has(.app:not(.hidden)),
  body:has(.foundation-app:not(.hidden)),
  body:has(.owner-app:not(.hidden)) {
    width: 100%;
    height: var(--portal-viewport-height);
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  #root,
  #root > .flex.h-screen {
    width: 100%;
    height: var(--portal-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--portal-viewport-height) !important;
    overflow: hidden !important;
  }

  #root > .flex.h-screen > .flex-1.flex.flex-col,
  #root > .flex.h-screen > .flex-1.flex.flex-col.overflow-hidden {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #root > .flex.h-screen > .flex-1.flex.flex-col.overflow-hidden:has(.portal-student-header-actions) {
    overflow: hidden !important;
    contain: none !important;
  }

  #root > .flex.h-screen > .flex-1.flex.flex-col > header {
    flex: 0 0 auto !important;
  }

  #root > .flex.h-screen > .flex-1.flex.flex-col > main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--portal-mobile-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--portal-mobile-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
  }

  .student-mobile-nav,
  #root nav.fixed.bottom-0 {
    bottom: 0 !important;
    min-height: calc(var(--portal-mobile-dock-height) + env(safe-area-inset-bottom)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 500 !important;
    transform: translateZ(0);
  }

  .app:not(.hidden),
  .foundation-app:not(.hidden),
  .owner-app:not(.hidden) {
    height: var(--portal-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--portal-viewport-height) !important;
    overflow: hidden !important;
  }

  .app:not(.hidden) > main,
  .foundation-app:not(.hidden) > main,
  .owner-app:not(.hidden) > main {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app:not(.hidden) > main > header,
  .app:not(.hidden) > main > .subnav,
  .foundation-app:not(.hidden) > main > header,
  .owner-app:not(.hidden) > main > header {
    flex: 0 0 auto !important;
  }

  .app:not(.hidden) > main > section,
  .foundation-app:not(.hidden) > main > .content,
  .owner-app:not(.hidden) > main > .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--portal-mobile-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--portal-mobile-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.hidden) > aside,
  .foundation-app:not(.hidden) > aside,
  .owner-app:not(.hidden) > aside {
    bottom: 0 !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    z-index: 500 !important;
  }

  .portal-student-notification-layer,
  body > .portal-student-notification-panel,
  .psn-panel,
  .owner-notification-panel {
    top: calc(env(safe-area-inset-top) + 66px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: calc(var(--portal-viewport-height) - 150px - env(safe-area-inset-top)) !important;
    overflow: auto !important;
  }

  .portal-teacher-today-schedule-grid,
  .portal-teacher-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .portal-teacher-schedule-card {
    padding: 10px !important;
    border-radius: 15px !important;
    gap: 7px !important;
  }

  .portal-teacher-today-schedule-grid > .portal-teacher-schedule-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .portal-teacher-today-schedule-grid > .portal-teacher-schedule-card > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }

  .portal-teacher-schedule-grid > .portal-teacher-schedule-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  .portal-teacher-schedule-grid > .portal-teacher-schedule-card > :first-child {
    gap: 7px !important;
    min-width: 0 !important;
  }

  .portal-teacher-schedule-grid > .portal-teacher-schedule-card > :first-child > :first-child {
    padding: 5px 7px !important;
    flex: 0 0 auto !important;
  }

  .portal-teacher-schedule-grid > .portal-teacher-schedule-card > :last-child {
    flex-direction: column;
    gap: 4px !important;
  }
}

@media (max-width: 359px) {
  .portal-teacher-today-schedule-grid,
  .portal-teacher-schedule-grid {
    grid-template-columns: 1fr !important;
  }
}