/* app.css — Semua styling aplikasi (murid, admin, guru). Ditulis lokal tanpa CDN agar PWA tetap jalan offline. */

:root{
  --color-header: #1d4ed8;
  --color-footer: #1e293b;
  --color-sidebar: #0f172a;
  --color-accent: #2563eb;
  --color-accent2: #f59e0b;
  --color-bg: #f1f5f9;
  --color-card: #ffffff;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #16a34a;
  --color-error: #dc2626;
  --radius: 10px;
  --footer-height: 52px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
img{max-width:100%;}
a{color: var(--color-accent);}
h1,h2,h3{margin-top:0;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;border-radius:8px;border:none;
  font-size:1rem;cursor:pointer;text-decoration:none;font-weight:600;
  transition: opacity .15s;
}
.btn:active{opacity:.85;}
.btn-primary{background:var(--color-accent);color:#fff;}
.btn-secondary{background:#e2e8f0;color:var(--color-text);}
.btn-danger{background:var(--color-error);color:#fff;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.btn-sm{min-height:36px;padding:6px 12px;font-size:.875rem;}

/* ===== Halaman Murid ===== */
.site-header{
  background: var(--color-header); color:#fff; padding:14px 16px;
}
.site-header-inner{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;}
.site-logo{height:36px;width:36px;object-fit:contain;border-radius:6px;background:#fff;}
.site-title{font-size:1.1rem;font-weight:700;}

.site-main{
  max-width:640px;margin:0 auto;padding:20px 16px calc(var(--footer-height) + 32px);
}

.site-footer{
  position: sticky; bottom:0; left:0; right:0;
  background: var(--color-footer); color:#fff; text-align:center;
  padding:14px 16px; font-size:1rem;
}
.site-footer p{margin:0;}

.card{
  background:var(--color-card); border-radius:var(--radius); padding:24px 20px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.subtitle{color:var(--color-muted);margin:4px 0;}

.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:6px;font-weight:600;}
.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=number],
.form-group input[type=email],
.form-group input[type=tel],
.form-group select,
.form-group textarea{
  width:100%;padding:12px;border:1px solid var(--color-border);border-radius:8px;
  font-size:1rem;min-height:44px;background:#fff;color:var(--color-text);
}
.form-group textarea{min-height:80px;}

.password-wrap{position:relative;}
.password-wrap input{width:100%;padding-right:44px;}
.toggle-password{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;color:var(--color-muted);padding:0;
}
.toggle-password:hover{color:var(--color-text);}

.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:.9rem;}
.alert ul{margin:0;padding-left:18px;}
.alert-error{background:#fee2e2;color:#991b1b;}
.alert-success{background:#dcfce7;color:#166534;}

.progress-wrap{margin-bottom:20px;}
.progress-bar{background:#e2e8f0;border-radius:99px;height:10px;overflow:hidden;}
.progress-fill{background:var(--color-accent);height:100%;transition:width .2s;}
.progress-text{margin:8px 0 0;font-size:.85rem;color:var(--color-muted);}

.soal-text{font-size:1.2rem;margin-bottom:18px;}
.opsi-list{display:flex;flex-direction:column;gap:12px;}
.opsi-item{
  display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--color-border);
  border-radius:10px;cursor:pointer;min-height:44px;
}
.opsi-item:has(input:checked){border-color:var(--color-accent);background:#eff6ff;}
.opsi-item input{width:20px;height:20px;flex-shrink:0;}

.hasil-bar-group{margin:20px 0;}
.hasil-bar-item{margin-bottom:14px;}
.hasil-bar-label{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-weight:600;font-size:.9rem;}
.hasil-bar-track{background:#e2e8f0;border-radius:99px;height:18px;overflow:hidden;}
.hasil-bar-fill{height:100%;border-radius:99px;transition:width .3s;}
.hasil-bar-v{background:#2563eb;}
.hasil-bar-a{background:#16a34a;}
.hasil-bar-k{background:#f59e0b;}

.hasil-dominan{
  text-align:center;font-size:1.15rem;padding:14px;background:#eff6ff;
  border-radius:8px;margin:16px 0;
}
.hasil-tips ul{padding-left:20px;}
.hasil-tips li{margin-bottom:8px;}

/* ===== Layout Admin / Guru ===== */
.dash-body{display:flex;min-height:100vh;background:var(--color-bg);}

/* Sidebar bersifat overlay (mengambang di atas konten, tidak mendorong konten) supaya
   konten selalu tampil penuh. Tersembunyi secara default, muncul saat kursor menyentuh
   tepi kiri layar (desktop) atau lewat tombol menu (khusus layar sentuh/mobile). */
.dash-sidebar{
  width:230px;background:var(--color-sidebar);color:#fff;flex-shrink:0;
  padding:20px 0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;
  transform:translateX(-100%);transition:transform .2s ease;z-index:40;
  box-shadow:4px 0 16px rgba(0,0,0,.25);
}
.dash-sidebar:not(.tersembunyi){transform:translateX(0);}
.dash-sidebar-brand{padding:0 20px 20px;font-weight:700;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px;}
.dash-sidebar nav a{
  display:block;padding:12px 20px;color:#cbd5e1;text-decoration:none;font-size:.95rem;min-height:44px;line-height:20px;
}
.dash-sidebar nav a:hover, .dash-sidebar nav a.aktif{background:rgba(255,255,255,.08);color:#fff;}

.dash-edge-trigger{position:fixed;top:0;left:0;width:14px;height:100%;z-index:39;}

.dash-content{flex:1;padding:24px;padding-bottom:calc(var(--footer-height) + 24px);min-width:0;width:100%;}

.dash-topbar{
  display:flex;align-items:center;justify-content:space-between;background:var(--color-header);
  color:#fff;padding:14px 20px;border-radius:var(--radius);margin-bottom:20px;flex-wrap:wrap;gap:10px;
}
.dash-topbar h1{font-size:1.1rem;margin:0;}
.dash-toggle-btn{
  display:none; /* disembunyikan di desktop: sidebar dikendalikan lewat hover di tepi kiri layar */
  background:rgba(255,255,255,.15);border:none;color:#fff;min-height:44px;min-width:44px;
  border-radius:8px;cursor:pointer;font-size:1.1rem;
  align-items:center;justify-content:center;
}

.dash-footer{
  position:sticky;bottom:0;background:var(--color-footer);color:#fff;text-align:center;
  padding:14px 16px;font-size:1rem;
}
.dash-footer p{margin:0;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--color-card);border-radius:var(--radius);padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.stat-card .angka{font-size:1.8rem;font-weight:700;color:var(--color-accent);}
.stat-card .label{color:var(--color-muted);font-size:.85rem;}

.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
@media (max-width:768px){.chart-row{grid-template-columns:1fr;}}

.bar-chart{display:flex;align-items:flex-end;gap:14px;height:180px;padding-top:20px;}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.bar-chart .bar{width:100%;max-width:44px;border-radius:6px 6px 0 0;background:var(--color-accent);position:relative;}
.bar-chart .bar-value{font-size:.75rem;margin-bottom:4px;font-weight:700;}
.bar-chart .bar-label{margin-top:8px;font-size:.8rem;color:var(--color-muted);text-align:center;}

.table-wrap{overflow-x:auto;background:var(--color-card);border-radius:var(--radius);box-shadow:0 1px 4px rgba(0,0,0,.06);}
table{width:100%;border-collapse:collapse;min-width:600px;}
table th, table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--color-border);font-size:.9rem;}
table th{background:#f8fafc;font-weight:700;white-space:nowrap;}
table tr:hover td{background:#f8fafc;}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:end;}
.filter-bar .form-group{margin-bottom:0;min-width:140px;}

.aksi-group{display:flex;gap:6px;flex-wrap:nowrap;}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;background:#e2e8f0;color:var(--color-text);
  text-decoration:none;flex-shrink:0;border:none;cursor:pointer;padding:0;font:inherit;
}
.btn-icon:hover{background:#cbd5e1;}
.btn-icon-danger{background:#fee2e2;color:#991b1b;}
.btn-icon-danger:hover{background:#fecaca;}

.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:700;}
.badge-v{background:#dbeafe;color:#1e40af;}
.badge-a{background:#dcfce7;color:#166534;}
.badge-k{background:#fef3c7;color:#92400e;}
.badge-kombinasi{background:#ede9fe;color:#5b21b6;}
.badge-aktif{background:#dcfce7;color:#166534;}
.badge-nonaktif{background:#fee2e2;color:#991b1b;}
.badge-rendah{background:#fee2e2;color:#991b1b;}
.badge-sedang{background:#fef3c7;color:#92400e;}
.badge-tinggi{background:#dcfce7;color:#166534;}

.profil-block{
  background:#eff6ff;border-radius:8px;padding:14px 16px;margin:16px 0;
}
.profil-block .profil-judul{font-size:1.05rem;font-weight:700;margin-bottom:4px;}
.profil-block .profil-deskripsi{color:var(--color-muted);font-size:.88rem;margin:0;}

.pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
.pagination a, .pagination span{
  min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:#fff;border:1px solid var(--color-border);text-decoration:none;color:var(--color-text);
  font-size:.85rem;
}
.pagination .aktif{background:var(--color-accent);color:#fff;border-color:var(--color-accent);}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--color-bg);}
.login-card{max-width:360px;width:100%;background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.login-card h1{text-align:center;font-size:1.3rem;margin-bottom:20px;}

.repeatable-row{display:flex;gap:10px;margin-bottom:10px;align-items:center;flex-wrap:wrap;}
.repeatable-row .form-group{margin-bottom:0;}

.color-field{display:flex;align-items:center;gap:10px;}
.color-field input[type=color]{width:52px;height:44px;padding:2px;border:1px solid var(--color-border);border-radius:8px;background:#fff;}

.tips-block{border:1px solid var(--color-border);border-radius:8px;padding:14px;margin-bottom:16px;}
.tips-block h3{margin-bottom:10px;font-size:1rem;}

.checkbox-inline{display:flex;align-items:center;gap:8px;font-weight:400;}
.checkbox-inline input{width:20px;height:20px;}

/* ===== Cetak ===== */
@media print{
  .site-header, .site-footer, .dash-sidebar, .dash-topbar, .dash-footer, .dash-edge-trigger,
  .btn-row-print-hide, .no-print{display:none !important;}
  .dash-content{padding:0 !important;}
  body{background:#fff;}
  .card, .table-wrap{box-shadow:none;}
}

/* ===== Responsif ===== */
@media (max-width:768px){
  .dash-sidebar{width:230px;}
  .dash-content{padding:16px;padding-bottom:calc(var(--footer-height) + 16px);}
  /* Di layar sentuh tidak ada hover, jadi tombol menu ditampilkan sebagai gantinya */
  .dash-toggle-btn{display:flex;}
}
@media (max-width:360px){
  .site-main{padding-left:12px;padding-right:12px;}
  .card{padding:18px 14px;}
}