/* =====================================================================
   SP Murid — SMPN 167 Jakarta · tampilan aplikasi
   Satu berkas untuk halaman masuk, kerangka (sidebar/topbar), dan
   penyelarasan komponen Bootstrap 5 yang dipakai semua halaman.
   ===================================================================== */

:root {
  --navy-900: #0b1736;
  --navy-800: #11234f;
  --navy-700: #183172;
  --biru-600: #2247b8;
  --biru-500: #2f5bdc;
  --biru-100: #e3eaff;
  --biru-50:  #f1f4ff;

  --teks:      #0f172a;
  --teks-2:    #475569;
  --teks-3:    #94a3b8;
  --garis:     #e6eaf2;
  --latar:     #f4f6fb;
  --putih:     #ffffff;

  --hijau:  #0f9d6b;  --hijau-bg:  #e6f6ef;
  --kuning: #c27a06;  --kuning-bg: #fdf3e1;
  --merah:  #d92d4b;  --merah-bg:  #fdecef;
  --ungu:   #6d4fd6;  --ungu-bg:   #efeafd;

  --radius:    14px;
  --radius-sm: 10px;
  --bayang:    0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
  --bayang-lg: 0 12px 40px rgba(11, 23, 54, .14);

  --sb-lebar: 264px;

  /* Bootstrap */
  --bs-primary: var(--biru-500);
  --bs-primary-rgb: 47, 91, 220;
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--teks);
  --bs-body-bg: var(--latar);
  --bs-border-color: var(--garis);
  --bs-border-radius: var(--radius-sm);
  --bs-link-color: var(--biru-500);
  --bs-link-color-rgb: 47, 91, 220;
  --bs-link-hover-color: var(--biru-600);
}

body { font-family: var(--bs-body-font-family); background: var(--latar); color: var(--teks); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }
.text-primary { color: var(--biru-500) !important; }
.bg-primary   { background-color: var(--biru-500) !important; }

/* ---------------- Komponen Bootstrap ---------------- */
.card { border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); }
.card-header { background: var(--putih) !important; border-bottom: 1px solid var(--garis); padding: .95rem 1.15rem; font-weight: 600; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-header .bi { margin-right: .35rem; }
.card-body { padding: 1.15rem; }

.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .5rem 1rem; }
.btn-sm { padding: .32rem .7rem; border-radius: 8px; }
.btn-primary { background: var(--biru-500); border-color: var(--biru-500); }
.btn-primary:hover, .btn-primary:focus { background: var(--biru-600); border-color: var(--biru-600); }
.btn-outline-primary { color: var(--biru-500); border-color: #c7d4fb; }
.btn-outline-primary:hover { background: var(--biru-50); color: var(--biru-600); border-color: var(--biru-500); }
.btn-light { background: #eef1f7; border-color: #eef1f7; }

.form-control, .form-select { border-radius: var(--radius-sm); border-color: #d8deea; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--biru-500); box-shadow: 0 0 0 .2rem rgba(47, 91, 220, .15); }
.form-label { font-weight: 600; font-size: .88rem; color: var(--teks-2); }

.table { --bs-table-hover-bg: #f6f8fd; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .85rem; border-bottom-color: var(--garis); }
.table thead th, .table-light th { background: #f7f9fc !important; color: var(--teks-2); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--garis); }
.table-bordered > :not(caption) > * > * { border-color: var(--garis); }

.badge { font-weight: 600; padding: .38em .62em; border-radius: 7px; letter-spacing: .01em; }
.badge.bg-success { background: var(--hijau-bg) !important; color: var(--hijau) !important; }
.badge.bg-warning { background: var(--kuning-bg) !important; color: var(--kuning) !important; }
.badge.bg-danger  { background: var(--merah-bg) !important; color: var(--merah) !important; }
.badge.bg-info    { background: var(--biru-100) !important; color: var(--biru-600) !important; }
.badge.bg-secondary { background: #eef1f6 !important; color: var(--teks-2) !important; }
.badge.bg-dark    { background: var(--navy-800) !important; color: #fff !important; }

.alert { border: 0; border-radius: var(--radius-sm); border-left: 4px solid currentColor; }
.alert-success { background: var(--hijau-bg); color: #0b6e4b; }
.alert-danger  { background: var(--merah-bg); color: #a3162f; }
.alert-warning { background: var(--kuning-bg); color: #8a5703; }
.alert-info    { background: var(--biru-50); color: var(--biru-600); }

.list-group-item { border-color: var(--garis); padding: .8rem 1.15rem; }
.nav-pills .nav-link.active { background: var(--biru-500); }
.dropdown-menu { border: 1px solid var(--garis); border-radius: var(--radius-sm); box-shadow: var(--bayang-lg); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .9rem; }

/* ---------------- Kerangka: sidebar ---------------- */
.sb {
  position: fixed; inset: 0 auto 0 0; width: var(--sb-lebar); z-index: 1040;
  background: var(--navy-900);
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(47, 91, 220, .35), transparent 60%);
  color: #c9d3ec; display: flex; flex-direction: column; transition: transform .25s ease;
}
.sb-merek { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.2rem; text-decoration: none; }
.sb-merek img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; object-fit: contain; }
.sb-merek b { display: block; color: #fff; font-size: .98rem; line-height: 1.15; }
.sb-merek span { font-size: .74rem; color: #93a3c9; }

.sb-cta { margin: .3rem 1rem 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--biru-500); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem;
  padding: .7rem; border-radius: 12px; box-shadow: 0 6px 18px rgba(47, 91, 220, .35); transition: background .15s; }
.sb-cta:hover { background: #3d68ea; color: #fff; }

.sb-nav { flex: 1; overflow-y: auto; padding: 0 .75rem .75rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.sb-judul { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6c7ca3; padding: 1rem .65rem .4rem; }
.sb-nav a { display: flex; align-items: center; gap: .75rem; color: #c9d3ec; text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: .58rem .7rem; border-radius: 10px; margin-bottom: 2px; transition: background .15s, color .15s; }
.sb-nav a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.sb-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-nav a.active { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 #7ea0ff; }
.sb-nav a.active .bi { opacity: 1; color: #9db7ff; }
.sb-nav .sb-hitung { margin-left: auto; background: var(--merah); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; }

.sb-kaki { border-top: 1px solid rgba(255, 255, 255, .08); padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; }
.sb-kaki .avatar { background: rgba(255,255,255,.12); color: #fff; }
.sb-kaki b { display: block; color: #fff; font-size: .85rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-kaki small { color: #8d9cc2; font-size: .74rem; }
.sb-kaki .btn-keluar { margin-left: auto; color: #8d9cc2; background: none; border: 0; font-size: 1.15rem; padding: .3rem; border-radius: 8px; }
.sb-kaki .btn-keluar:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.avatar { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; background: var(--biru-100); color: var(--biru-600); flex: none; }

/* ---------------- Kerangka: isi & topbar ---------------- */
.isi { margin-left: var(--sb-lebar); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; background: rgba(244, 246, 251, .85); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--garis); padding: .8rem 1.75rem; display: flex; align-items: center; gap: 1rem; }
.topbar h1 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.topbar .sub { font-size: .8rem; color: var(--teks-2); }
.topbar-kanan { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.btn-ikon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px;
  border: 1px solid var(--garis); background: var(--putih); color: var(--teks-2); font-size: 1.15rem; }
.btn-ikon:hover { color: var(--biru-500); border-color: #c7d4fb; }
.menu-pengguna { display: flex; align-items: center; gap: .55rem; background: var(--putih); border: 1px solid var(--garis);
  border-radius: 12px; padding: .3rem .7rem .3rem .3rem; text-decoration: none; color: var(--teks); }
.menu-pengguna .avatar { width: 32px; height: 32px; border-radius: 9px; font-size: .78rem; }
.menu-pengguna b { font-size: .84rem; display: block; line-height: 1.15; }
.menu-pengguna small { font-size: .72rem; color: var(--teks-2); }

.konten { padding: 1.6rem 1.75rem 2.5rem; flex: 1; }
.kaki-app { padding: 1rem 1.75rem 1.4rem; font-size: .78rem; color: var(--teks-3); }

.tirai { display: none; position: fixed; inset: 0; background: rgba(11, 23, 54, .5); z-index: 1035; }

@media (max-width: 991.98px) {
  .sb { transform: translateX(-100%); }
  .sb.buka { transform: none; box-shadow: var(--bayang-lg); }
  .tirai.buka { display: block; }
  .isi { margin-left: 0; }
  .topbar { padding: .7rem 1rem; }
  .konten { padding: 1.1rem 1rem 2rem; }
  .kaki-app { padding: 1rem; }
}

/* ---------------- Dashboard ---------------- */
.sapa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.sapa h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 .2rem; }
.sapa p { margin: 0; color: var(--teks-2); font-size: .9rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; padding: .3rem .65rem; border-radius: 99px;
  background: var(--biru-50); color: var(--biru-600); }

.kpi { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); padding: 1.1rem 1.15rem;
  height: 100%; display: flex; flex-direction: column; gap: .6rem; }
.kpi-atas { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: .8rem; font-weight: 600; color: var(--teks-2); }
.kpi-ikon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.kpi-nilai { font-size: 1.85rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kpi-ket { font-size: .76rem; color: var(--teks-2); }
.naik { color: var(--merah); font-weight: 700; }
.turun { color: var(--hijau); font-weight: 700; }
.warna-biru   { background: var(--biru-100); color: var(--biru-600); }
.warna-kuning { background: var(--kuning-bg); color: var(--kuning); }
.warna-merah  { background: var(--merah-bg); color: var(--merah); }
.warna-hijau  { background: var(--hijau-bg); color: var(--hijau); }
.warna-ungu   { background: var(--ungu-bg); color: var(--ungu); }

.aksi-cepat { display: flex; flex-wrap: wrap; gap: .5rem; }

.tugas { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.15rem; text-decoration: none; color: var(--teks); border-bottom: 1px solid var(--garis); }
.tugas:last-child { border-bottom: 0; }
.tugas:hover { background: #f8faff; }
.tugas .kpi-ikon { width: 34px; height: 34px; font-size: 1rem; }
.tugas b { display: block; font-size: .88rem; }
.tugas small { color: var(--teks-2); font-size: .76rem; }
.tugas .angka { margin-left: auto; font-weight: 800; font-size: 1.1rem; }

.grafik { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: .5rem; }
.grafik .kol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.grafik .tumpuk { width: 100%; max-width: 28px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 3px 3px; overflow: hidden; background: #eef1f7; min-height: 3px; }
.grafik .tumpuk span { display: block; }
.grafik .lbl { font-size: .66rem; color: var(--teks-3); white-space: nowrap; }
.grafik .kol.hari-ini .lbl { color: var(--biru-500); font-weight: 700; }
.seg-ringan { background: #34c38f; } .seg-sedang { background: #f4b740; } .seg-berat { background: #ef5a73; }
.legenda { display: flex; gap: 1rem; font-size: .76rem; color: var(--teks-2); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }

.batang { margin-bottom: .85rem; }
.batang:last-child { margin-bottom: 0; }
.batang-atas { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; margin-bottom: .35rem; }
.batang-atas span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batang-isi { height: 8px; background: #eef1f7; border-radius: 99px; overflow: hidden; }
.batang-isi i { display: block; height: 100%; border-radius: 99px; background: var(--biru-500); }

.kosong { text-align: center; color: var(--teks-3); padding: 2rem 1rem; font-size: .88rem; }
.kosong .bi { font-size: 1.8rem; display: block; margin-bottom: .35rem; }

/* ---------------- Halaman masuk ---------------- */
body.masuk { background: var(--putih); }
.masuk-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.masuk-merek {
  position: relative; overflow: hidden; color: #dbe4ff; padding: 2.6rem 3rem; display: flex; flex-direction: column;
  background: var(--navy-900);
  background-image:
    radial-gradient(90% 70% at 100% 0%, rgba(47, 91, 220, .55), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(109, 79, 214, .35), transparent 60%);
}
.masuk-merek::after { /* pola titik halus */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 22px 22px;
}
.masuk-merek > * { position: relative; z-index: 1; }
.masuk-logo { display: flex; align-items: center; gap: .85rem; }
.masuk-logo img { width: 52px; height: 52px; border-radius: 14px; background: #fff; padding: 4px; }
.masuk-logo b { display: block; color: #fff; font-size: 1.02rem; }
.masuk-logo span { font-size: .8rem; color: #a5b4dc; }
.masuk-tengah { margin: auto 0; padding: 2.5rem 0; max-width: 520px; }
.masuk-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #a9bdff; background: rgba(126, 160, 255, .12); border: 1px solid rgba(126, 160, 255, .25); padding: .35rem .75rem; border-radius: 99px; }
.masuk-merek h1 { color: #fff; font-size: 2.35rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin: 1.1rem 0 .9rem; }
.masuk-merek h1 em { font-style: normal; background: linear-gradient(90deg, #9db7ff, #c5b4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.masuk-merek .lead { color: #b4c1e3; font-size: 1rem; line-height: 1.6; }
.masuk-fitur { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.masuk-fitur li { display: flex; gap: .9rem; align-items: flex-start; }
.masuk-fitur .ikon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #a9bdff; font-size: 1.1rem; }
.masuk-fitur b { display: block; color: #fff; font-size: .93rem; }
.masuk-fitur span { font-size: .84rem; color: #9aa9cf; }
.masuk-kaki { font-size: .78rem; color: #7f8fb8; }

.masuk-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.masuk-kotak { width: 100%; max-width: 400px; }
.masuk-kotak h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: .35rem; }
.masuk-kotak .sub { color: var(--teks-2); margin-bottom: 1.8rem; font-size: .95rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: .85rem 1rem;
  border: 1px solid #d5dbe7; border-radius: 12px; background: #fff; color: var(--teks); font-weight: 700; font-size: .98rem;
  text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s, transform .05s; }
.btn-google:hover { border-color: var(--biru-500); box-shadow: 0 0 0 4px rgba(47, 91, 220, .1); color: var(--teks); }
.btn-google:active { transform: translateY(1px); }
.btn-google svg { width: 20px; height: 20px; }
.btn-google.mati { pointer-events: none; opacity: .55; }
.masuk-catatan { display: flex; gap: .65rem; margin-top: 1.25rem; padding: .85rem 1rem; background: var(--latar); border-radius: 12px; font-size: .84rem; color: var(--teks-2); }
.masuk-catatan .bi { color: var(--biru-500); font-size: 1.05rem; }
.masuk-pemisah { display: flex; align-items: center; gap: .75rem; color: var(--teks-3); font-size: .78rem; margin: 1.6rem 0 1rem; }
.masuk-pemisah::before, .masuk-pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }
.masuk-bantuan { margin-top: 2rem; font-size: .82rem; color: var(--teks-3); text-align: center; }

@media (max-width: 991.98px) {
  .masuk-wrap { grid-template-columns: 1fr; }
  .masuk-merek { padding: 1.4rem 1.25rem 1.6rem; }
  .masuk-tengah { padding: 1.2rem 0 0; }
  .masuk-merek h1 { font-size: 1.55rem; margin: .8rem 0 .4rem; }
  .masuk-merek .lead { font-size: .9rem; }
  .masuk-fitur, .masuk-kaki { display: none; }
  .masuk-panel { padding: 2rem 1.25rem 2.5rem; align-items: flex-start; }
}

/* ---------------- Foto pembinaan ---------------- */
.foto-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.foto-item, .foto-tambah { width: 96px; height: 96px; border-radius: 12px; position: relative; flex: none; }
.foto-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--garis); }
.foto-item button { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--navy-800); color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--bayang); }
.foto-tambah { border: 1.5px dashed #b9c4dc; background: var(--biru-50); color: var(--biru-500); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem; font-size: .75rem; font-weight: 600; cursor: pointer; }
.foto-tambah .bi { font-size: 1.4rem; }
.foto-tambah:hover { border-color: var(--biru-500); }
.foto-mini { position: relative; display: inline-block; width: 44px; height: 44px; }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; border: 1px solid var(--garis); }
.foto-mini span { position: absolute; right: -6px; bottom: -6px; background: var(--navy-800); color: #fff; font-size: .65rem; font-weight: 700;
  padding: .05rem .35rem; border-radius: 99px; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.galeri figure { margin: 0; }
.galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--garis); transition: transform .15s; }
.galeri a:hover img { transform: scale(1.02); }
.galeri figcaption { display: flex; justify-content: space-between; align-items: center; gap: .3rem; font-size: .7rem; color: var(--teks-2); margin-top: .3rem; }