/* NoteSmart V47 — final touch-ups:
   - Pindahkan kartu "Jadwal Piket Hari Ini" ke bawah Slot JP
   - Tombol panah tanggal lebih besar & responsif
   - Hilangkan animasi/getar saat jadwal piket muncul di jurnal
   - Perhalus transisi antar menu footer (terutama Laporan)
   - Hilangkan kotak samar sekilas di bawah header saat masuk jurnal
   - Tidak mengubah fungsi aplikasi.
*/

/* === 1. Posisi kartu Jadwal Piket di bawah Slot JP =========================
   Halaman jurnal guru memakai grid/kolom DOM. Kita pakai flex order utk
   memindahkan #ns-picket-helper ke bawah kartu jadwal/Slot JP, tanpa
   mengubah DOM React (aman terhadap re-render).
*/
html.ns-page-jurnal #root main,
html.ns-v43-journal-stable #root main {
  display: flex !important;
  flex-direction: column !important;
}
html.ns-page-jurnal #root main > *,
html.ns-v43-journal-stable #root main > * {
  order: 2;
}
/* Anything that looks like the schedule / slot JP card stays above */
html.ns-page-jurnal #root main > [data-testid="guru-mode-card"],
html.ns-page-jurnal #root main > [data-testid="guru-class-card"],
html.ns-page-jurnal #root main > [data-testid="guru-schedule-card"],
html.ns-page-jurnal #root main > [data-testid="guru-jp-card"],
html.ns-page-jurnal #root main > [data-testid="guru-top-card"] {
  order: 1 !important;
}
/* Picket helper goes after schedule card */
html.ns-page-jurnal #root main > #ns-picket-helper,
html.ns-v43-journal-stable #root main > #ns-picket-helper {
  order: 3 !important;
  margin-top: 14px !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  contain: layout paint !important;
}
/* The journal form (data entry) stays at the very bottom */
html.ns-page-jurnal #root main > [data-testid="guru-journal-form"],
html.ns-page-jurnal #root main > [data-testid="guru-form-card"],
html.ns-page-jurnal #root main > form {
  order: 4 !important;
}

/* === 2. Tombol panah tanggal: lebih besar & responsif ====================== */
html.ns-page-jurnal #ns-v38-datebar,
html.ns-v43-journal-stable #ns-v38-datebar {
  gap: 6px !important;
}
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav,
html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-nav {
  width: 40px !important;
  min-width: 40px !important;
  height: 42px !important;
  font-size: 32px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.20) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,255,255,.18) !important;
  transition: background-color .12s ease !important;
}
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav:hover,
html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-nav:hover {
  background: rgba(255,255,255,.28) !important;
}
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav:active,
html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-nav:active {
  background: rgba(255,255,255,.32) !important;
  filter: none !important;
  transform: none !important;
}
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-main,
html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-main {
  height: 42px !important;
  line-height: 42px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
@media (max-width: 480px) {
  html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav,
  html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-nav {
    width: 36px !important;
    min-width: 36px !important;
    height: 40px !important;
    font-size: 28px !important;
  }
  html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-main,
  html.ns-v43-journal-stable #ns-v38-datebar .ns-v38-date-main {
    height: 40px !important;
    line-height: 40px !important;
  }
}

/* === 3. Hilangkan getar saat kartu piket muncul di jurnal ================== */
html.ns-page-jurnal #ns-picket-helper,
html.ns-page-jurnal #ns-picket-helper * {
  animation: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
  transform: none !important;
}
html.ns-page-jurnal #ns-picket-helper {
  contain: layout paint !important;
  overflow-anchor: none !important;
}

/* === 4. Perhalus transisi footer (terutama Laporan) ======================== */
nav[data-testid="footer-nav"],
nav.ns-footer-nav,
[class*="bottom-nav"], [class*="BottomNav"], [class*="tabbar"], [class*="TabBar"],
.ns-bottom-nav, footer[class*="bottom"], footer[class*="tab"] {
  contain: layout paint !important;
  will-change: auto !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
nav[data-testid="footer-nav"] *,
nav.ns-footer-nav *,
[class*="bottom-nav"] *, [class*="BottomNav"] *,
[class*="tabbar"] *, [class*="TabBar"] *,
.ns-bottom-nav * {
  animation: none !important;
  transition: color .12s linear, background-color .12s linear, opacity .12s linear !important;
  transform: none !important;
}
/* Pages: stop layout-shifting flash on route change */
#root main {
  overflow-anchor: none !important;
}
html.ns-page-laporan #root main,
html.ns-page-jurnal #root main,
html.ns-page-dashboard #root main {
  animation: none !important;
}
html.ns-page-laporan #root main > *,
html.ns-page-jurnal #root main > *,
html.ns-page-dashboard #root main > * {
  animation: none !important;
  will-change: auto !important;
}

/* === 5. Hilangkan kotak samar sekilas di bawah header saat masuk jurnal === */
html.ns-page-jurnal [data-testid="guru-top-header"],
html.ns-page-jurnal [data-testid="guru-date-banner"],
html.ns-page-jurnal [data-testid="guru-top-banner"],
html.ns-page-jurnal #ns-stage3-panel,
html.ns-page-jurnal .ns-v43-date-duplicate-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
/* The faint thin box that flashes between header and first card */
html.ns-page-jurnal #root main::before,
html.ns-page-jurnal #root main::after {
  display: none !important;
  content: none !important;
}
html.ns-page-jurnal #root main > div:empty,
html.ns-page-jurnal #root main > section:empty {
  display: none !important;
}

/* Picket helper: card style is consistent and calm */
#ns-picket-helper.ns-picket-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
#ns-picket-helper h4 {
  color: #1e4735 !important;
}
#ns-picket-helper .ns-dp-btn.primary {
  background: #24523d !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  font-weight: 700 !important;
}
#ns-picket-helper .ns-dp-btn.primary:hover {
  background: #1e4735 !important;
}