/* NoteSmart V33: header tetap terlihat, filter data stabil, dan cetak laporan tidak terpotong. */
:root{
  --ns-v33-header-h: 70px;
  --ns-v33-header-z: 2147482500;
}

/* Header universal cadangan. JS akan mengisi dan menampilkan di mobile/app. */
#ns-v33-universal-header{
  display:none;
  box-sizing:border-box;
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:var(--ns-v33-header-z);
  min-height:var(--ns-v33-header-h);
  padding:10px 14px;
  padding-top:max(10px, env(safe-area-inset-top));
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(226,232,240,.96);
  box-shadow:0 6px 20px rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transform:none!important;
  animation:none!important;
}
#ns-v33-universal-header *{box-sizing:border-box; transform:none!important; animation:none!important;}
.ns-v33-head-left{display:flex;align-items:center;gap:10px;min-width:0;}
.ns-v33-logo{width:42px;height:42px;border-radius:16px;background:#24523d;display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 4px 12px rgba(36,82,61,.18);}
.ns-v33-logo svg{width:24px;height:24px;display:block;}
.ns-v33-title-wrap{min-width:0;display:block;}
.ns-v33-title{font-size:19px;line-height:1.05;font-weight:900;color:#172033;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ns-v33-subtitle{margin-top:2px;font-size:12px;line-height:1.15;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw;}
.ns-v33-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.ns-v33-head-btn{width:40px;height:40px;border:0;border-radius:14px;background:#fff;color:#1f2937;display:grid;place-items:center;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ns-v33-head-btn:active{transform:none!important;background:#f4f7f6;}
.ns-v33-head-btn svg{width:22px;height:22px;display:block;}

@media (max-width: 768px){
  body:not(.ns-v33-login) #ns-v33-universal-header{display:flex!important;}
  /* Pakai satu header konsisten agar tidak hilang/double saat scroll. */
  body:not(.ns-v33-login) #root > div.min-h-screen > header.md\:hidden,
  body:not(.ns-v33-login) #root header.md\:hidden{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  body:not(.ns-v33-login) #root > div.min-h-screen > main,
  body:not(.ns-v33-login) #root main{
    padding-top:calc(var(--ns-v33-header-h) + 14px)!important;
    scroll-padding-top:calc(var(--ns-v33-header-h) + 14px)!important;
  }
  body.ns-page-jurnal [data-testid="guru-top-header"]{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.ns-page-jurnal [data-testid="guru-jurnal-modal"] [data-testid="guru-top-header"]{
    display:none!important;
  }
}

/* Login tidak perlu header aplikasi. */
body.ns-v33-login #ns-v33-universal-header{display:none!important;}
body.ns-v33-login #root main{padding-top:0!important;}

/* Filter data yang stabil dan eksplisit. */
.ns-v33-data-filter{
  display:grid!important;
  grid-template-columns:1fr 1fr auto auto!important;
  gap:10px!important;
  align-items:end!important;
  margin:0 0 14px!important;
  padding:12px!important;
  border:1px solid rgba(36,82,61,.13)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.045)!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  contain:layout style!important;
}
.ns-v33-data-filter *{
  box-sizing:border-box!important;
  transform:none!important;
  animation:none!important;
  transition-property:background-color,border-color,color,box-shadow!important;
  backface-visibility:hidden!important;
  will-change:auto!important;
}
.ns-v33-data-filter label{
  display:block!important;
  margin:0 0 5px!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  color:#64748b!important;
}
.ns-v33-data-filter input,
.ns-v33-data-filter select{
  width:100%!important;
  min-height:44px!important;
  border:1px solid #e1e7ef!important;
  border-radius:15px!important;
  padding:0 12px!important;
  background:#fff!important;
  color:#111827!important;
  font-size:14px!important;
  outline:none!important;
  box-shadow:none!important;
  appearance:auto!important;
  -webkit-appearance:auto!important;
  touch-action:manipulation!important;
}
.ns-v33-data-filter input:focus,
.ns-v33-data-filter select:focus{
  border-color:#24523d!important;
  box-shadow:0 0 0 3px rgba(36,82,61,.10)!important;
}
.ns-v33-data-filter button{
  min-height:44px!important;
  border-radius:15px!important;
  padding:0 16px!important;
  font-size:14px!important;
  font-weight:900!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  touch-action:manipulation!important;
}
.ns-v33-filter-apply{border:0!important;background:#24523d!important;color:#fff!important;}
.ns-v33-filter-reset{border:1px solid #dbe7e1!important;background:#fff!important;color:#24523d!important;}
.ns-v33-filter-count{grid-column:1 / -1!important;font-size:12px!important;font-weight:800!important;color:#64748b!important;margin-top:-2px!important;}
.ns-v33-filter-empty{display:none!important;margin:8px 0 12px!important;padding:12px 14px!important;border-radius:16px!important;background:#fff7ed!important;color:#9a3412!important;font-weight:800!important;font-size:13px!important;}
.ns-v33-filter-empty.is-visible{display:block!important;}
@media (max-width: 640px){
  .ns-v33-data-filter{grid-template-columns:1fr!important;}
  .ns-v33-data-filter button{width:100%!important;}
}

/* Cegah teks WhatsApp/filter bergoyang di kartu mobile. */
html.ns-page-guru td[data-ns-key="wa_number"],
html.ns-page-guru td[data-ns-label="WhatsApp"],
html.ns-page-guru td[data-ns-label="WA"],
html.ns-page-siswa td[data-ns-key="class_code"],
html.ns-page-siswa td[data-ns-label="Kelas"]{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  will-change:auto!important;
  backface-visibility:hidden!important;
  contain:paint!important;
}
html.ns-page-guru td[data-ns-key="wa_number"]::before,
html.ns-page-guru td[data-ns-label="WhatsApp"]::before{content:"WhatsApp"!important;}

/* Tampilan laporan di layar: seperti kertas, tapi tidak melebar keluar HP. */
html.ns-page-laporan .ns-report-paper-v33{
  width:min(100%, 210mm)!important;
  max-width:100%!important;
  margin:0 auto 96px!important;
  border-radius:14px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html.ns-page-laporan .ns-report-paper-v33 .overflow-x-auto{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  max-width:100%!important;
}
html.ns-page-laporan .ns-report-paper-v33 table.report-table{
  max-width:100%!important;
}

/* Saat cetak/PDF: hilangkan UI aplikasi dan pastikan kertas tidak terpotong kiri. */
@media print{
  @page{size:A4 portrait;margin:8mm;}
  html,body,#root{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    overflow:visible!important;
  }
  body *{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;}
  #ns-v33-universal-header,
  #ns-pwa-install-card,
  #root aside,
  #root nav,
  #root > div.min-h-screen > header,
  #root header,
  [data-testid="guru-bottom-nav"],
  .sonner-toast,
  [data-sonner-toaster],
  .print\:hidden,
  .ns-report-control-v30,
  html.ns-page-laporan [data-testid="laporan-header"],
  html.ns-page-laporan [data-testid="laporan-header"] + .ns-card,
  html.ns-page-laporan button:not([data-ns-print-keep]){
    display:none!important;
  }
  #root > div.min-h-screen,
  #root > div,
  #root main,
  main{
    position:static!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  html.ns-page-laporan .ns-animate-in,
  html.ns-page-laporan .ns-card,
  html.ns-page-laporan .ns-report-paper-v30,
  html.ns-page-laporan .ns-report-paper-v33{
    position:static!important;
    width:194mm!important;
    max-width:194mm!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }
  html.ns-page-laporan .ns-report-paper-v33 > *,
  html.ns-page-laporan .ns-report-paper-v30 > *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  html.ns-page-laporan .overflow-x-auto{
    overflow:visible!important;
    max-width:100%!important;
    width:100%!important;
  }
  html.ns-page-laporan table.report-table{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    font-size:8.5px!important;
    line-height:1.15!important;
    page-break-inside:auto!important;
  }
  html.ns-page-laporan table.report-table th,
  html.ns-page-laporan table.report-table td{
    padding:1.5px 2.5px!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    min-width:0!important;
  }
  html.ns-page-laporan table.report-table tr{page-break-inside:avoid!important;}
  html.ns-page-laporan input,
  html.ns-page-laporan select,
  html.ns-page-laporan textarea{
    border:0!important;
    background:transparent!important;
    padding:0!important;
  }
}