/* NoteSmart V48 — Android Professional Polish
   -----------------------------------------------------
   • Ripple effect pada tombol & kartu (material-style)
   • Toast notifikasi cantik utk sukses & gagal
   • Smooth page transition antar rute
   • Sidebar admin & footer menu: perpindahan halus
   • Header laporan responsif (teks tidak patah vertikal)
   • Pengaturan: grup kategori lebih rapi
   • Tombol tanggal jurnal: debounce + fix lompat tanggal
*/

/* ============ 1. GLOBAL SMOOTH / ANDROID FEEL ============ */
:root{
  --ns48-ripple: rgba(36, 82, 61, .22);
  --ns48-ripple-light: rgba(255,255,255,.32);
  --ns48-ease: cubic-bezier(.4, 0, .2, 1);
  --ns48-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ns48-green: #24523d;
  --ns48-green2: #1e4735;
  --ns48-red: #dc2626;
  --ns48-amber: #d97706;
}
html, body { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Smooth scrolling with momentum on mobile */
html, body, #root, main, [class*="scroll"], [class*="Scroll"] {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ============ 2. RIPPLE EFFECT ============ */
.ns48-ripple-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ns48-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: .45;
  background: var(--ns48-ripple);
  animation: ns48-ripple-anim .55s var(--ns48-ease-out) forwards;
  z-index: 0;
}
.ns48-ripple.is-light { background: var(--ns48-ripple-light); opacity: .55; }
@keyframes ns48-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}
/* Press feedback (subtle sink) on interactive surfaces */
button:not([disabled]),
[role="button"]:not([aria-disabled="true"]),
a.btn, .ns-dp-btn, .ns-v37-date-primary, .ns-v37-date-secondary,
.ns-v38-date-nav, .ns-v38-date-main,
[data-testid$="-btn"], [data-testid^="btn-"], [class*="Button"], [class*="btn-"] {
  transition: transform .12s var(--ns48-ease), box-shadow .2s var(--ns48-ease), background-color .15s var(--ns48-ease), color .15s var(--ns48-ease);
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button:not([disabled]):active,
[role="button"]:not([aria-disabled="true"]):active,
a.btn:active, .ns-dp-btn:active,
[data-testid$="-btn"]:active, [class*="Button"]:active {
  transform: scale(.97);
}

/* Cards pressable nuance */
[class*="card"], [class*="Card"], .ns-card, .ns-dp-activity-card, .ns-dp-picket-card {
  transition: box-shadow .2s var(--ns48-ease), transform .15s var(--ns48-ease), border-color .15s var(--ns48-ease);
}

/* ============ 3. TOAST NOTIFICATIONS (REDESIGNED) ============ */
#ns-v31-toast-stack, #ns48-toast-stack {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  max-width: min(92vw, 380px) !important;
}
#ns-v31-toast-stack .ns-v31-toast,
#ns48-toast-stack .ns48-toast {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7fdf9 100%) !important;
  color: #0f172a !important;
  border: 1px solid #d1fae5 !important;
  border-left: 4px solid var(--ns48-green) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  min-width: 0 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
  animation: ns48-toast-in .4s var(--ns48-ease-out) !important;
  will-change: transform, opacity !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#ns-v31-toast-stack .ns-v31-toast b,
#ns48-toast-stack .ns48-toast b {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--ns48-green) !important;
  color: #fff !important;
  font-size: 13px !important;
  flex: 0 0 22px !important;
  font-weight: 900 !important;
}
#ns48-toast-stack .ns48-toast.is-error {
  border-color: #fecaca !important;
  border-left-color: var(--ns48-red) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
#ns48-toast-stack .ns48-toast.is-error b {
  background: var(--ns48-red) !important;
}
#ns48-toast-stack .ns48-toast.is-warn {
  border-color: #fde68a !important;
  border-left-color: var(--ns48-amber) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}
#ns48-toast-stack .ns48-toast.is-warn b { background: var(--ns48-amber) !important; }
#ns48-toast-stack .ns48-toast.is-leaving {
  animation: ns48-toast-out .35s var(--ns48-ease) forwards !important;
}
@keyframes ns48-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ns48-toast-out {
  to { opacity: 0; transform: translateX(40px) scale(.94); }
}

/* ============ 4. PAGE & SIDEBAR TRANSITIONS ============ */
#root main,
[data-testid="admin-main"], [data-testid="admin-content"], main[role="main"] {
  animation: ns48-page-in .28s var(--ns48-ease-out);
  will-change: opacity, transform;
}
@keyframes ns48-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Exception: no animation on repeat re-renders in the same route */
html.ns-page-jurnal #root main,
html.ns-v43-journal-stable #root main {
  animation: ns48-page-in-soft .2s var(--ns48-ease-out);
}
@keyframes ns48-page-in-soft {
  from { opacity: .0; }
  to   { opacity: 1; }
}

/* Admin sidebar smooth slide/hover */
[data-testid="admin-sidebar"], aside[class*="sidebar"], nav[class*="sidebar"], .ns-admin-sidebar {
  transition: transform .32s var(--ns48-ease), box-shadow .3s var(--ns48-ease) !important;
  will-change: transform;
}
[data-testid="admin-sidebar"] a,
[data-testid="admin-sidebar"] button,
aside[class*="sidebar"] a,
aside[class*="sidebar"] button,
nav[class*="sidebar"] a,
nav[class*="sidebar"] button,
.ns-admin-sidebar a,
.ns-admin-sidebar button {
  transition: background-color .18s var(--ns48-ease), color .18s var(--ns48-ease),
              padding-left .2s var(--ns48-ease), transform .18s var(--ns48-ease) !important;
  position: relative;
}
[data-testid="admin-sidebar"] a:hover,
aside[class*="sidebar"] a:hover,
.ns-admin-sidebar a:hover {
  padding-left: 18px !important;
}

/* Footer nav items: soft indicator */
nav[data-testid="footer-nav"] a, nav[data-testid="footer-nav"] button,
nav.ns-footer-nav a, nav.ns-footer-nav button,
[class*="bottom-nav"] a, [class*="bottom-nav"] button,
[class*="BottomNav"] a, [class*="BottomNav"] button {
  transition: color .18s var(--ns48-ease), transform .15s var(--ns48-ease) !important;
  position: relative;
}
nav[data-testid="footer-nav"] a:active, nav[data-testid="footer-nav"] button:active,
nav.ns-footer-nav a:active, nav.ns-footer-nav button:active,
[class*="bottom-nav"] a:active, [class*="bottom-nav"] button:active {
  transform: scale(.92);
}

/* Tab-list smooth */
[role="tablist"] button, [role="tab"] {
  transition: color .18s var(--ns48-ease), background-color .18s var(--ns48-ease), border-color .18s var(--ns48-ease) !important;
}

/* ============ 5. LAPORAN / REPORT RESPONSIVE FIX ============
   Header banner sekolah: jangan buat teks patah vertikal di antara 2 logo.
   Kita flex-wrap: logo di baris pertama, teks di bawah pada layar sempit.
*/
html.ns-page-laporan .ns-card,
html.ns-page-laporan [class*="card"] {
  border-radius: 14px !important;
  overflow: hidden;
}
html.ns-page-laporan main,
html.ns-page-laporan [data-testid="laporan"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* The three-column header (logo left | text | logo right) */
html.ns-page-laporan [class*="header"][class*="school"],
html.ns-page-laporan [class*="School"][class*="Header"],
html.ns-page-laporan [data-testid="report-header"],
html.ns-page-laporan [data-testid="laporan-header"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: center !important;
}
/* Generic: any 3-column grid inside report that squeezes text column */
html.ns-page-laporan .ns48-report-banner,
html.ns-page-laporan [style*="grid-template-columns"][style*="fr"],
html.ns-page-laporan [class*="grid-cols-3"] {
  display: grid !important;
  grid-template-columns: 90px 1fr 90px !important;
  align-items: center !important;
  gap: 12px !important;
}
@media (max-width: 640px) {
  html.ns-page-laporan .ns48-report-banner,
  html.ns-page-laporan [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }
  html.ns-page-laporan .ns48-report-banner > *:first-child,
  html.ns-page-laporan .ns48-report-banner > *:last-child {
    display: inline-block !important;
  }
  html.ns-page-laporan .ns48-report-banner > *:nth-child(2) {
    order: 2 !important;
  }
}
/* Force vertical-written KEMENTERIAN AGAMA title to flow normally */
html.ns-page-laporan h1,
html.ns-page-laporan h2,
html.ns-page-laporan h3,
html.ns-page-laporan [class*="title"],
html.ns-page-laporan [class*="Title"] {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
html.ns-page-laporan [data-ns48-banner-title="1"] {
  text-align: center !important;
  font-size: clamp(13px, 3.6vw, 18px) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  word-spacing: .02em !important;
  max-width: 100% !important;
  padding: 0 4px !important;
}
html.ns-page-laporan table {
  width: 100% !important;
  font-size: 12px !important;
}
html.ns-page-laporan .table-responsive,
html.ns-page-laporan [class*="table-wrap"] {
  margin: 0 -4px !important;
  padding: 0 4px !important;
  border-radius: 12px !important;
}

/* ============ 6. PENGATURAN: GROUP KATEGORI LEBIH RAPI ============ */
html.ns-page-pengaturan main,
html.ns-page-pengaturan [data-testid="pengaturan"],
html.ns-page-pengaturan #ns-settings-clean-panel {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 12px !important;
}
/* Tab list on top becomes sticky card */
#ns-settings-clean-panel [class*="tab"],
#ns-settings-clean-panel [role="tablist"] {
  position: sticky !important;
  top: calc(var(--ns-v33-header-h,80px) + 4px) !important;
  z-index: 20 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
  padding: 6px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
#ns-settings-clean-panel [class*="tab"] button,
#ns-settings-clean-panel [role="tab"],
[id^="ns-settings-top-"] {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  transition: all .18s var(--ns48-ease) !important;
}
[id^="ns-settings-top-"].active,
[id^="ns-settings-top-"][aria-selected="true"],
[id^="ns-settings-top-"][data-active="true"] {
  background: var(--ns48-green) !important;
  color: #fff !important;
}
/* Group sections with card-look */
.ns48-settings-group {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
.ns48-settings-group > h3.ns48-group-title {
  margin: 0 0 10px 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ns48-green) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ns48-settings-group > h3.ns48-group-title::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--ns48-green);
  border-radius: 3px;
}
.ns48-settings-group > .ns48-group-desc {
  color: #64748b !important;
  font-size: 12.5px !important;
  margin: 0 0 12px 0 !important;
}

/* ============ 7. JURNAL DATE ARROW — STABILIZATION ============ */
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav {
  transition: background-color .15s var(--ns48-ease) !important;
}
html.ns-page-jurnal #ns-v38-datebar .ns-v38-date-nav[data-v48-locked="1"] {
  opacity: .6;
  pointer-events: none;
}

/* ============ 8. LOADING / SKELETON / GENERIC POLISH ============ */
input, select, textarea {
  transition: border-color .18s var(--ns48-ease), box-shadow .18s var(--ns48-ease), background-color .18s var(--ns48-ease) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--ns48-green) !important;
  box-shadow: 0 0 0 3px rgba(36,82,61,.14) !important;
}

/* Modal / dialog smooth entrance */
[role="dialog"], .modal, [class*="Modal"] {
  animation: ns48-modal-in .26s var(--ns48-ease-out);
}
@keyframes ns48-modal-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}