body { background-color: #f4f7fe; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Custom Scrollbar for Modals */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

@keyframes float {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  33% { transform: translateY(-30px) translateX(10px) rotate(2deg); }
  66% { transform: translateY(10px) translateX(-20px) rotate(-2deg); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
}
.animate-float { animation: float 12s ease-in-out infinite; }
.animate-float-delayed { animation: float 15s ease-in-out 3s infinite; }
.animate-float-slow { animation: float 18s ease-in-out 1s infinite; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-box { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* Custom Flatpickr Aesthetic */
.flatpickr-calendar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
  border-radius: 1.5rem !important;
  padding: 10px !important;
  box-sizing: content-box !important;
  width: auto !important;
  font-family: 'Inter', sans-serif !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #3b82f6 !important; border-color: #3b82f6 !important; }
.flatpickr-day:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
.flatpickr-months .flatpickr-month { height: 40px !important; }

/* ============================== */
/* PRINT STYLES (FITUR CETAK)     */
/* ============================== */
@media print {
  @page { margin: 0.5cm; }
  * { 
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
  }
  body, html { background: white !important; color: black !important; font-size: 12px !important; padding: 0.5cm !important; margin: 0 !important; }
  
  /* Jika Sedang Cetak Massal, sembunyikan aplikasi utama */
  body.printing-massal #mainApp { display: none !important; }
  body.printing-massal #printMassalContainer { display: block !important; width: 100% !important; }
  body:not(.printing-massal) #printMassalContainer { display: none !important; }
  
  /* Menyembunyikan elemen UI saat cetak detail satuan */
  #sidebar, #sidebarOverlay, header.z-40, .hide-on-print, 
  #passwordModal, #sekolahModal, #posyanduModal, #siswaModal, 
  #tendikModal, #importSiswaModal, #importTendikModal, 
  #balitaModal, #ibuHamilModal, #ibuMenyusuiModal,
  #importBalitaModal, #importIbuHamilModal, #importIbuMenyusuiModal, #fullPageLoader {
    display: none !important;
  }

  /* Lebarkan Area Utama */
  #mainApp, .flex-1, main { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; max-width: 100% !important; }

  /* Membersihkan Latar Belakang & Shadow */
  .bg-white\/80, .backdrop-blur-md, .shadow-\[0_4px_20px_rgb\(0\,0\,0\,0\.03\)\] { background: white !important; backdrop-filter: none !important; box-shadow: none !important; border: none !important; }
  
  /* Merampingkan Header Print */
  #printHeader { border-bottom: 2px solid #111 !important; padding-top: 0 !important; padding-bottom: 12px !important; margin-bottom: 16px !important; }
  #printSchoolName { font-size: 24px !important; margin-bottom: 2px !important; }
  #printSchoolAddress { font-size: 13px !important; margin-top: 6px !important; }
  #printDateStamp { font-size: 11px !important; margin-top: 4px !important; }

  /* === MEMAKSA KARTU SUMMARY AGAR SEJAJAR MENYAMPING === */
  #schoolGlobalSummary > div, #kelasGroupSummary > div, #posyanduGlobalSummary > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  #schoolGlobalSummary > div > div, #kelasGroupSummary > div > div, #posyanduGlobalSummary > div > div {
    flex: 1 !important;
    width: 100% !important;
    padding: 12px !important;
  }
  
  #siswaSummaryContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  #siswaSummaryContainer > div {
    width: calc(25% - 12px) !important; /* 4 Kolom di kertas */
    flex: none !important;
    padding: 10px !important;
  }

  /* Penyesuaian Visual Kartu */
  .rounded-\[2rem\] { border-radius: 8px !important; padding: 0 !important; }
  .rounded-xl, .rounded-2xl { border-radius: 8px !important; border: 1px solid #cbd5e1 !important; }
  
  /* Membesarkan Teks Kartu Summary */
  .text-3xl { font-size: 28px !important; line-height: 1 !important; }
  .text-sm { font-size: 13px !important; }
  .text-xs { font-size: 11px !important; }

  /* Warna Indikator L/P */
  .bg-white { background-color: #ffffff !important; }
  .border-blue-200 { border-color: #bfdbfe !important; }
  .border-pink-200 { border-color: #fbcfe8 !important; }
  .text-blue-600 { color: #2563eb !important; }
  .text-pink-600 { color: #db2777 !important; }

  /* Menyembunyikan Kolom Aksi */
  .print-hide-col { display: none !important; }

  /* Perbaikan Tabel Kertas */
  table { border-collapse: collapse !important; width: 100% !important; page-break-inside: auto; font-size: 12px !important; margin-top: 15px !important; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  th, td { border: 1px solid #94a3b8 !important; padding: 8px 10px !important; }
  thead { display: table-header-group !important; }
  th { background-color: #f8fafc !important; font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; }
  
  .print-only { display: block !important; }
}