/* ============================================================
   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 MODERN ===== */
/* Override AdminLTE default with high specificity */
.main-sidebar .sidebar .nav-sidebar .nav-item .nav-link {
  position: relative !important;
  color: rgba(255,255,255,0.6) !important;
  padding: 10px 20px 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 2px 12px 2px 0 !important;
  border-left: 3px solid transparent !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  border-left-color: var(--primary) !important;
  padding-left: 20px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, #059669, #047857) !important;
  border-left-color: #fff !important;
  box-shadow: 0 2px 8px rgba(5,150,105,0.25) !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item .nav-link i {
  width: 24px !important;
  text-align: center !important;
  margin-right: 8px !important;
  font-size: 14px !important;
}
/* Nav Header */
.main-sidebar .sidebar .nav-sidebar .nav-header {
  color: rgba(255,255,255,0.25) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 20px 20px 4px !important;
}
/* Treeview submenu */
.main-sidebar .sidebar .nav-sidebar .nav-treeview .nav-item .nav-link {
  padding-left: 44px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-left: none !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-treeview .nav-item .nav-link i {
  width: 18px !important;
  font-size: 10px !important;
  margin-right: 6px !important;
}
/* Treeview arrow */
.main-sidebar .sidebar .nav-sidebar .nav-item .nav-link .right {
  transition: transform 0.3s ease !important;
  font-size: 12px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item.menu-open > .nav-link .right {
  transform: rotate(-90deg) !important;
}
/* Brand link */
.main-sidebar .brand-link {
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(5,150,105,0.1), transparent) !important;
}
.main-sidebar .brand-link .brand-text {
  font-weight: 900 !important;
  font-size: 15px !important;
}
/* Custom scrollbar for sidebar */
.main-sidebar::-webkit-scrollbar { width: 4px !important; }
.main-sidebar::-webkit-scrollbar-track { background: transparent !important; }
.main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08) !important; border-radius: 2px !important; }
.main-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15) !important; }

/* ===== 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; }
}

/* Activity Feed */
.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}
.activity-content {
  flex: 1;
}
.activity-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}
.activity-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.activity-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

/* Quick Actions */
.quick-action-btn {
  background: #fff;
  border: 2px solid #f1f5f9;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
  height: 100%;
}
.quick-action-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5,150,105,0.15);
}
.quick-action-btn i {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}
.quick-action-btn span {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

/* Top Performers */
.performer-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.performer-item:last-child {
  border-bottom: none;
}
.performer-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  margin-right: 12px;
  flex-shrink: 0;
}
.performer-info {
  flex: 1;
}
.performer-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}
.performer-class {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}
.performer-score {
  font-weight: 800;
  font-size: 14px;
  color: var(--primary);
}
.progress {
  height: 6px;
  border-radius: 3px;
  margin-top: 5px;
  background: #e2e8f0;
}
.progress-bar {
  border-radius: 3px;
  transition: width 0.5s ease;
}