*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;background:#ecf0f1;color:#2c3e50;min-height:100vh}

/* ===== LOGIN PAGE ===== */
.login-wrap{min-height:100vh;background:linear-gradient(135deg,#1a252f 0%,#2c3e50 50%,#1a6b4a 100%);display:flex;align-items:center;justify-content:center;padding:20px}
.login-container{width:100%;max-width:420px}
.login-brand{text-align:center;margin-bottom:28px}
.login-brand .brand-logo{width:72px;height:72px;background:linear-gradient(135deg,#27ae60,#1abc9c);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;box-shadow:0 8px 24px rgba(0,0,0,.3);color:#fff}
.login-brand h1{color:#fff;font-size:22px;font-weight:700;letter-spacing:.5px}
.login-brand p{color:#95a5a6;font-size:12px;margin-top:4px}
.login-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card h2{font-size:17px;font-weight:600;margin-bottom:20px;color:#2c3e50;text-align:center}
.login-form .form-group{margin-bottom:16px}
.login-form label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.login-form input,.login-form select{width:100%;padding:10px 14px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;color:#2c3e50;background:#fff}
.login-form input:focus,.login-form select:focus{border-color:#27ae60;box-shadow:0 0 0 3px rgba(39,174,96,.12)}
.btn-login{width:100%;padding:12px;background:linear-gradient(135deg,#27ae60,#1abc9c);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(39,174,96,.4)}
.login-footer{text-align:center;margin-top:20px;font-size:12px;color:#95a5a6}
.demo-accounts{background:#f8f9fa;border-radius:8px;padding:12px 16px;margin-top:16px;font-size:12px}
.demo-accounts h4{font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.demo-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #eee;color:#555;gap:6px}
.demo-row:last-child{border-bottom:none}
.demo-row span:first-child{font-weight:600;color:#27ae60}
.login-error{background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:12px}

/* ===== SUPER ADMIN PAGE ===== */
.sa-topbar{background:#1a252f;color:#fff;padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:100}
.sa-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.sa-brand .logo{width:32px;height:32px;background:linear-gradient(135deg,#27ae60,#1abc9c);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.sa-user{display:flex;align-items:center;gap:12px;font-size:13px}
.sa-content{padding:72px 24px 24px;max-width:1280px;margin:0 auto}
.sa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.sa-stat{background:#fff;border-radius:10px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.08);border-left:4px solid}
.sa-stat.green{border-color:#27ae60}.sa-stat.blue{border-color:#3498db}.sa-stat.orange{border-color:#e67e22}.sa-stat.red{border-color:#e74c3c}
.sa-stat .num{font-size:28px;font-weight:700}.sa-stat .lbl{font-size:12px;color:#888;margin-top:2px}
.sa-stat.green .num{color:#27ae60}.sa-stat.blue .num{color:#3498db}.sa-stat.orange .num{color:#e67e22}.sa-stat.red .num{color:#e74c3c}
.ra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ra-card{background:#fff;border-radius:10px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.08);border:1px solid #eee;transition:all .2s}
.ra-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-2px)}
.ra-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ra-avatar{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.ra-card-info h3{font-size:14px;font-weight:600;margin-bottom:2px}
.ra-card-info p{font-size:11px;color:#888}
.ra-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.meta-pill{font-size:11px;padding:3px 8px;border-radius:20px;background:#f1f1f1;color:#555}
.meta-pill.active{background:#d5f5e3;color:#1e8449}
.meta-pill.inactive{background:#fdecea;color:#c0392b}
.ra-card-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== APP LAYOUT ===== */
#sidebar{width:240px;min-height:100vh;background:#1a252f;position:fixed;top:0;left:0;z-index:100;display:flex;flex-direction:column}
.sidebar-brand{padding:14px 16px;display:flex;align-items:center;gap:10px;background:#131d26;border-bottom:1px solid #0d151e}
.sidebar-brand .brand-logo{width:34px;height:34px;background:linear-gradient(135deg,#27ae60,#1abc9c);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff}
.sidebar-brand .brand-text{overflow:hidden}
.sidebar-brand .brand-title{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand .brand-sub{color:#57a464;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-ra-badge{margin:10px 12px;background:#1e8449;color:#fff;border-radius:6px;padding:8px 12px;font-size:11px}
.sidebar-ra-badge .ra-name{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-ra-badge .ra-npsn{opacity:.8;font-size:10px;margin-top:2px}
.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto}
.nav-section{padding:8px 16px 4px;font-size:10px;font-weight:700;color:#57a464;text-transform:uppercase;letter-spacing:.8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#95a5a6;cursor:pointer;transition:all .15s;font-size:13px;text-decoration:none}
.nav-item:hover{background:#243342;color:#ecf0f1}
.nav-item.active{background:#27ae60;color:#fff}
.nav-item .nav-icon{width:18px;text-align:center;font-size:14px;flex-shrink:0}

#topbar{position:fixed;top:0;left:240px;right:0;height:48px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 20px;z-index:50;justify-content:space-between;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.topbar-left{display:flex;align-items:center;gap:10px;font-size:13px;color:#888}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:13px}
.user-pop{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:6px}
.user-pop:hover{background:#f5f5f5}
.user-avatar{width:30px;height:30px;background:#27ae60;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}

#main{margin-left:240px;padding:68px 24px 24px;min-height:100vh}

/* ===== Card / Form ===== */
.page-title{font-size:22px;font-weight:700;color:#1a252f;margin-bottom:18px}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.page-header .page-title{margin:0}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:18px;overflow:hidden}
.card-header{padding:12px 18px;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-weight:600;font-size:14px;color:#2c3e50;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-body{padding:18px}
.section-hdr{padding:8px 14px;color:#fff;font-weight:600;font-size:13px;border-radius:6px;margin-bottom:14px}
.section-hdr.blue{background:linear-gradient(135deg,#3498db,#2980b9)}
.section-hdr.teal{background:linear-gradient(135deg,#1abc9c,#16a085)}
.section-hdr.green{background:linear-gradient(135deg,#27ae60,#229954)}
.section-hdr.orange{background:linear-gradient(135deg,#e67e22,#d35400)}
.section-hdr.purple{background:linear-gradient(135deg,#9b59b6,#8e44ad)}
.section-hdr.red{background:linear-gradient(135deg,#e74c3c,#c0392b)}

.form-row{display:grid;gap:14px;margin-bottom:14px}
.form-row.col2{grid-template-columns:1fr 1fr}
.form-row.col3{grid-template-columns:repeat(3,1fr)}
.form-group{display:flex;flex-direction:column}
.form-label{font-size:12px;font-weight:600;color:#555;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.req{color:#e74c3c}
.form-control{padding:9px 12px;border:1.5px solid #e0e0e0;border-radius:6px;font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s;color:#2c3e50;background:#fff;font-family:inherit}
.form-control:focus{border-color:#27ae60;box-shadow:0 0 0 3px rgba(39,174,96,.1)}
textarea.form-control{resize:vertical;min-height:80px}

/* ===== Stat cards (dashboard admin RA) ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:8px;padding:18px;border-left:4px solid;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.stat-card.green{border-color:#27ae60}.stat-card.blue{border-color:#3498db}.stat-card.orange{border-color:#e67e22}.stat-card.red{border-color:#e74c3c}
.stat-card .stat-num{font-size:30px;font-weight:700;line-height:1}
.stat-card.green .stat-num{color:#27ae60}.stat-card.blue .stat-num{color:#3498db}.stat-card.orange .stat-num{color:#e67e22}.stat-card.red .stat-num{color:#e74c3c}
.stat-card .stat-label{font-size:12px;color:#888;margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
.stat-card .stat-icon{position:absolute;top:14px;right:14px;font-size:24px;opacity:.25}
.stat-card .stat-footer{font-size:11px;color:#888;margin-top:8px;cursor:pointer}
.stat-card .stat-footer:hover{color:#27ae60}

.info-table{width:100%;font-size:13px}
.info-table td{padding:6px 0;border-bottom:1px solid #f0f0f0}
.info-table td:first-child{color:#888;width:35%}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;color:#fff;transition:all .15s;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.btn-primary{background:#27ae60}.btn-primary:hover{background:#229954}
.btn-secondary{background:#95a5a6}.btn-secondary:hover{background:#7f8c8d}
.btn-success{background:#16a085}.btn-success:hover{background:#138d75}
.btn-danger{background:#e74c3c}.btn-danger:hover{background:#c0392b}
.btn-warning{background:#f39c12;color:#fff}.btn-warning:hover{background:#d68910}
.btn-blue{background:#3498db}.btn-blue:hover{background:#2980b9}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ===== DataTable ===== */
.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:12.5px;color:#888;flex-wrap:wrap;gap:10px}
.search-input{padding:5px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;min-width:200px}
.table-wrapper{overflow-x:auto;border:1px solid #e9ecef;border-radius:6px}
table.dt{width:100%;border-collapse:collapse;font-size:13px;min-width:600px;background:#fff}
table.dt th{background:#f8f9fa;padding:10px 12px;text-align:left;font-weight:600;color:#555;border-bottom:2px solid #e9ecef;font-size:12.5px;white-space:nowrap}
table.dt td{padding:9px 12px;border-bottom:1px solid #f0f0f0;color:#444}
table.dt tr:hover td{background:#fcfcfc}
table.dt .actions{display:flex;gap:5px;flex-wrap:nowrap}
.table-info{padding:10px 0;font-size:12.5px;color:#888}
.badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:600}
.badge-success{background:#d5f5e3;color:#1e8449}
.badge-warning{background:#fdebd0;color:#9a6712}
.badge-info{background:#d6eaf8;color:#1f618d}
.badge-danger{background:#fdecea;color:#c0392b}
.badge-grey{background:#eaecee;color:#555}

/* ===== Modal ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:10px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.lg{max-width:760px}
.modal-header{padding:16px 20px;border-bottom:1px solid #e9ecef;font-weight:600;color:#1a252f;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.modal-close{background:none;border:none;font-size:22px;color:#888;cursor:pointer;line-height:1}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid #e9ecef;display:flex;justify-content:flex-end;gap:8px;background:#fafbfc}

/* ===== Alert / Flash ===== */
.alert{padding:12px 16px;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:13.5px}
.alert-info{background:#d6eaf8;color:#1f618d;border-left:4px solid #3498db}
.alert-success{background:#d5f5e3;color:#1e8449;border-left:4px solid #27ae60}
.alert-warning{background:#fdebd0;color:#9a6712;border-left:4px solid #f39c12}
.alert-danger{background:#fdecea;color:#c0392b;border-left:4px solid #e74c3c}
.alert-close{margin-left:auto;background:none;border:none;font-size:18px;cursor:pointer;color:inherit;opacity:.6}

/* ===== Toast ===== */
.toast-wrap{position:fixed;top:60px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:6px;color:#fff;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.18);animation:slideIn .3s ease}
.toast.success{background:#27ae60}.toast.danger{background:#e74c3c}.toast.info{background:#3498db}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== Foto grid (rapor) ===== */
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
.foto-item{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#f0f0f0}
.foto-item img{width:100%;height:100%;object-fit:cover}
.foto-item .x{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(231,76,60,.85);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;line-height:1}
.foto-add{aspect-ratio:4/3;border:2px dashed #bbb;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#888;cursor:pointer;font-size:11px;text-align:center;padding:8px}
.foto-add:hover{border-color:#27ae60;color:#27ae60}

/* ===== Akordeon aspek (rapor) ===== */
.aspek{margin-bottom:12px;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}
.aspek-header{background:#2b7de9;color:#fff;padding:10px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px}
.aspek-body{padding:16px;background:#fff;display:none}
.aspek.open .aspek-body{display:block}
.radio-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.radio-row label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}

@media (max-width:900px){
  .sa-stats{grid-template-columns:repeat(2,1fr)}
  .form-row.col3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  #sidebar{transform:translateX(-100%);transition:transform .3s}
  #sidebar.show{transform:translateX(0)}
  #topbar{left:0}
  #main{margin-left:0;padding:60px 14px 14px}
  .form-row.col2,.form-row.col3{grid-template-columns:1fr}
  .sa-stats{grid-template-columns:1fr 1fr}
}

/* ===== Patch: Section card seperti Rapor PAUD Jateng v2.6.5 ===== */
.card-section { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:18px; overflow:hidden }
.card-section > .sec-head { padding:14px 22px; font-size:15px; color:#2c3e50; font-weight:600; border-bottom:1px solid #f0f0f0; background:#fff }
.card-section > .sec-body { padding:22px }

/* Breadcrumb */
.breadcrumb-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px }
.breadcrumb-bar .crumb { font-size:13px; color:#888 }
.breadcrumb-bar .crumb a { color:#3498db; text-decoration:none }
.breadcrumb-bar .crumb a:hover { text-decoration:underline }
.breadcrumb-bar .crumb .sep { margin:0 6px }

/* Readonly input look (abu-abu lembut) */
.form-control.readonly,
.form-control[readonly] { background:#eef0f2; color:#555; cursor:default }

/* Input + button group (NIPD + CARI) */
.input-with-btn { display:flex; gap:6px }
.input-with-btn .form-control { flex:1 }
.input-with-btn .btn { flex-shrink:0 }

/* Aksen biru kiri pada blok pertanyaan di dalam akordeon */
.aspek-question { border-left:4px solid #2b7de9; background:#fff; padding:14px 18px; border-radius:0 6px 6px 0; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:18px }
.aspek-question p.q-title { font-weight:600; margin-bottom:12px; font-size:13.5px; color:#2c3e50 }
.aspek-question .radio-row { margin-bottom:14px; gap:24px }
.aspek-question textarea.form-control { background:#fff; min-height:90px; margin-bottom:12px }
.aspek-question .narasi-label { display:block; font-weight:600; font-size:13px; color:#2c3e50; margin-bottom:6px }
.btn-teal { background:#1abc9c; color:#fff }
.btn-teal:hover { background:#16a085 }

/* Foto card terpisah (di luar pertanyaan, masih di dalam akordeon) */
.foto-card { background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:16px 18px; border:1px solid #eef0f2 }
.foto-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.foto-card-head .lbl { font-weight:600; font-size:13.5px; color:#2c3e50 }
.foto-card-head .max { font-size:12px; color:#888 }

/* Akordeon biru full (Rapor PAUD Jateng style) */
.aspek-acc { margin-bottom:18px; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05) }
.aspek-acc-head { background:#2b7de9; color:#fff; padding:14px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14.5px; user-select:none }
.aspek-acc-head .chev { transition:transform .2s }
.aspek-acc.collapsed .chev { transform:rotate(-90deg) }
.aspek-acc-body { background:#f8f9fa; padding:18px 18px 18px; display:block }
.aspek-acc.collapsed .aspek-acc-body { display:none }

/* Footer aplikasi */
.app-footer { margin-top:30px; padding:14px 0; border-top:1px solid #e9ecef; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#666 }
.app-footer .badge-merdeka { background:#f1c40f; color:#7a5c00; padding:5px 12px; border-radius:5px; font-weight:600; font-size:12px }
.app-footer .ver { color:#888 }

/* Tabel sort indicator */
table.dt th .sort { display:inline-block; margin-left:4px; color:#bbb; font-size:9px; vertical-align:middle }

/* Form action bar (tombol Simpan + Reset) */
.form-action-bar { background:#fff; padding:14px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:18px; display:flex; gap:10px }