/* ============================================================
   Rapor PAUD - Kurikulum Merdeka
   Stylesheet utama (dipindahkan dari <style> pada versi HTML asli)
   ============================================================ */
:root {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #d1fae5;
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --accent: #f59e0b;
  --danger: #dc2626;
  --info: #0891b2;
}
* { font-family: 'Nunito', sans-serif; }

/* ===== LOGIN ===== */
#login-page {
  min-height:100vh;
  background: linear-gradient(135deg, #0f172a 0%, #064e3b 50%, #059669 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
#login-page::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(5,150,105,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(245,158,11,0.1) 0%, transparent 50%);
  animation: bgFloat 20s ease-in-out infinite;
}
@keyframes bgFloat {
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(2%,-1%) rotate(1deg)}
  66%{transform:translate(-1%,2%) rotate(-1deg)}
}
.login-box { width:420px; max-width:95%; position:relative; z-index:2; }
.login-card {
  background: rgba(255,255,255,0.97); border-radius:16px;
  padding:40px 35px; box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.login-card .logo-text {
  font-size:22px; font-weight:900; color:#0f172a;
  text-align:center; margin-bottom:4px;
}
.login-card .logo-sub {
  text-align:center; color:#64748b; font-size:13px; margin-bottom:28px;
}
.login-card .form-group { margin-bottom:18px; }
.login-card label { font-weight:700; color:#334155; font-size:13px; }
.login-card .form-control {
  border-radius:10px; border:2px solid #e2e8f0; padding:10px 14px;
  font-size:14px; transition:all .2s;
}
.login-card .form-control:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(5,150,105,0.15);
}
.btn-login {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; border:none; border-radius:10px; padding:11px; font-weight:800;
  font-size:15px; width:100%; cursor:pointer; transition:all .2s;
}
.btn-login:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(5,150,105,0.4); }

/* ===== SIDEBAR ===== */
.nav-sidebar .nav-link { color:rgba(255,255,255,0.65); padding:10px 20px; font-size:13.5px; transition:all .2s; }
.nav-sidebar .nav-link:hover { color:#fff; background:var(--sidebar-hover); }
.nav-sidebar .nav-link.active { color:#fff; background:var(--primary); border-radius:0 25px 25px 0; margin-right:10px; }
.nav-sidebar .nav-header { color:rgba(255,255,255,0.35); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; padding:12px 20px 6px; }
.nav-sidebar .nav-link i { width:22px; text-align:center; margin-right:8px; font-size:14px; }
.brand-link { border-bottom:1px solid rgba(255,255,255,0.08); }
.brand-text { font-weight:900; font-size:16px; letter-spacing:-0.3px; }

/* ===== CONTENT ===== */
.content-wrapper { min-height:calc(100vh - 57px - 56px); background:#f1f5f9; }
.breadcrumb-item { font-size:12px; }
.card { border:none; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.card-header { background:#fff; border-bottom:1px solid #f1f5f9; border-radius:12px 12px 0 0 !important; padding:16px 20px; }
.card-header h3 { font-size:16px; font-weight:800; color:#0f172a; margin:0; }
.card-body { padding:20px; }

/* Small box override */
.small-box .icon > i { font-size:65px; }
.small-box { border-radius:12px; overflow:hidden; transition:transform .2s; }
.small-box:hover { transform:translateY(-3px); }

/* DataTable */
.table { font-size:13px; }
.table thead th { background:#f8fafc; color:#475569; font-weight:700; border-bottom:2px solid #e2e8f0; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.table td { vertical-align:middle; padding:10px 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding:4px 10px; font-size:12px; }

/* Badge */
.badge-status { padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }

/* Radio penilaian */
.penilaian-radio .form-check { margin-bottom:0; }
.penilaian-radio .form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.penilaian-radio .form-check-label { font-size:13px; cursor:pointer; }

/* Deskripsi card */
.desc-card { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border-left:4px solid var(--primary); border-radius:0 12px 12px 0; }
.desc-card.jatidiri { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-left-color:var(--accent); }
.desc-card.literasi { background:linear-gradient(135deg,#ecfeff,#cffafe); border-left-color:var(--info); }

/* Btn action */
.btn-action { padding:5px 10px; font-size:12px; border-radius:8px; font-weight:700; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:6px; }

/* Modal */
.modal-content { border-radius:14px; border:none; }
.modal-header { border-bottom:1px solid #f1f5f9; padding:16px 20px; }
.modal-title { font-weight:800; font-size:15px; }
.modal-body { padding:20px; }
.modal-footer { border-top:1px solid #f1f5f9; padding:14px 20px; }
.form-group label { font-weight:700; font-size:13px; color:#334155; }
.form-control, .select2-container .select2-selection--single { border-radius:8px !important; border:2px solid #e2e8f0 !important; font-size:13px; }
.form-control:focus, .select2-container--focus .select2-selection--single { border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(5,150,105,0.12) !important; }

/* Rapor Print */
.rapor-container { width:210mm; min-height:297mm; background:#fff; padding:20mm 25mm; margin:0 auto; font-family:'Times New Roman',serif; color:#000; font-size:12pt; line-height:1.6; }
.rapor-container .logo-sekolah { width:70px; height:70px; border-radius:50%; object-fit:cover; border:2px solid #333; }
.rapor-container h2 { text-align:center; font-size:16pt; font-weight:bold; margin:4px 0; text-transform:uppercase; letter-spacing:1px; }
.rapor-container h3 { text-align:center; font-size:11pt; font-weight:normal; margin:0 0 12px; color:#444; }
.rapor-container .identitas-table { width:100%; border-collapse:collapse; margin:12px 0; }
.rapor-container .identitas-table td { padding:3px 8px; font-size:11pt; vertical-align:top; }
.rapor-container .identitas-table td:first-child { width:160px; font-weight:bold; }
.rapor-container .aspek-title { font-size:12pt; font-weight:bold; margin:16px 0 6px; color:#065f46; border-bottom:2px solid #059669; padding-bottom:3px; display:inline-block; }
.rapor-container .aspek-title.jati { color:#92400e; border-color:#f59e0b; }
.rapor-container .aspek-title.lit { color:#155e75; border-color:#0891b2; }
.rapor-container .deskripsi-rapor { text-align:justify; font-size:11pt; margin:6px 0 4px 20px; text-indent:40px; }
.rapor-container .ttd-table { width:100%; margin-top:40px; border-collapse:collapse; }
.rapor-container .ttd-table td { text-align:center; font-size:11pt; width:33%; vertical-align:top; }
.rapor-container .ttd-table .ttd-space { height:70px; }
.rapor-container .garis-bawah { border-bottom:1px solid #000; display:inline-block; min-width:180px; }

/* Loading */
#loading-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(15,23,42,0.5); z-index:99999;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
#loading-overlay.d-none { display:none !important; }

/* Filter bar */
.filter-bar { background:#fff; border-radius:12px; padding:16px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.filter-bar .form-group { margin-bottom:0; }
.filter-bar label { font-size:12px; font-weight:700; color:#64748b; margin-bottom:4px; }

/* Select2 in filter */
.filter-bar .select2-container { width:100% !important; }

/* Print media */
@media print {
  body * { visibility:hidden; }
  #print-area, #print-area * { visibility:visible; }
  #print-area { position:absolute; left:0; top:0; width:100%; }
  .rapor-container { box-shadow:none; padding:15mm 20mm; }
  @page { size:A4 portrait; margin:0; }
}

/* Responsive */
@media (max-width:768px) {
  .rapor-container { width:100%; padding:10mm 12mm; font-size:10pt; }
  .filter-bar .row > div { margin-bottom:8px; }
}