/* ==========================================
   PASKAL+ Custom Styles
   Hanya yang tidak bisa dicapai dengan utility Tailwind:
   animasi, scrollbar, modal, view/tab toggle,
   gradien hero-banner & btn-gradient, sync status,
   drag-and-drop indicator.
   ========================================== */

body { background-color: #f1f2f6; overflow: hidden; }

/* Scrollbar */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dfe4ea; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #ced6e0; }
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }

/* Number input spinner */
input[type="number"].hide-spin::-webkit-inner-spin-button,
input[type="number"].hide-spin::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type="number"].spin-show::-webkit-inner-spin-button,
input[type="number"].spin-show::-webkit-outer-spin-button {
  opacity: 1;
}

/* View toggling */
.view-section { display: none !important; animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.view-section.active { display: block !important; }

/* Tab toggling (dipakai di dalam view yang berisi sub-tab) */
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.98) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Gradien PASKAL — tidak bisa dicapai Tailwind config default */
.hero-banner { background: linear-gradient(135deg, #005fb8 0%, #004b93 100%); }
.btn-gradient { background: linear-gradient(135deg, #005fb8 0%, #004b93 100%); }

/* Modal */
.modal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
  backdrop-filter: blur(0px);
  z-index: 9999;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(5px);
  background-color: rgba(47, 53, 66, 0.6);
}
.modal-box {
  transform: scale(0.9) translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-height: 90vh;
  /* PERBAIKAN: jangan biarkan kotak modal yang scroll — bagian konten
     di dalamnya (flex-1 min-h-0 overflow-y-auto) yang scroll, sehingga
     footer tombol (Batal/Simpan) selalu terlihat menempel di bawah. */
  overflow: hidden;
}
.modal-overlay.show .modal-box { transform: scale(1) translateY(0); }

/* Drag & drop */
.draggable-item { cursor: grab; transition: background 0.2s, transform 0.2s; }
.draggable-item:active { cursor: grabbing; transform: scale(0.98); }
.drag-over { border: 2px dashed #ea3323; background-color: #fdeae9; opacity: 0.8; }

/* File upload */
input[type="file"] { display: none; }
.file-upload-label { cursor: pointer; transition: all 0.2s; }
.file-upload-label:hover {
  border-color: #ea3323;
  background-color: #fdeae9;
  transform: translateY(-2px);
}

/* Sync status indicator */
@keyframes pulse-sync {
  0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
}
.syncing { animation: pulse-sync 1s infinite; background-color: #ffce00; }
.synced { background-color: #2ed573; }
.sync-error { background-color: #ea3323; }

/* Membatasi tinggi tabel asesmen supaya scroll internal
   (dipakai di view Penilaian pada BAGIAN 3) */
.asesmen-scroll .overflow-auto,
.asesmen-scroll .overflow-x-auto {
  max-height: 65vh;
}

/* Sidebar cluster chevron */
.chev-open { transform: rotate(0deg); }
.chev-closed { transform: rotate(-90deg); }
.chev-open, .chev-closed { transition: transform 0.2s ease; }

/* Sidebar sub-menu active state */
.nav-btn-active {
  background-color: rgba(234, 51, 35, 0.1);
  color: #ea3323;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Utility: no-scrollbar (dipakai PASKAL) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }