/* =====================================================================
   SI Penilaian Kinerja Guru — Tema "Tinta & Stempel"
   Dipakai di atas Bootstrap 5.3. Semua warna diatur lewat token di :root,
   jadi ganti di satu tempat untuk mengubah seluruh aplikasi.
   ===================================================================== */

:root {
  /* Palet inti */
  --pg-ink:        #16384A;  /* Biru tinta — warna utama (tombol, judul, link) */
  --pg-ink-deep:   #0F2A38;  /* Sidebar & panel login */
  --pg-ink-soft:   #E4EDF1;  /* Latar sorotan lembut */
  --pg-stamp:      #6D4A9C;  /* Ungu stempel — aksen (fokus, pilihan aktif, predikat) */
  --pg-stamp-soft: #EFE9F7;
  --pg-stamp-light:#C3AEE3;  /* Aksen di atas latar gelap */
  --pg-paper:      #F3F5F6;  /* Latar halaman */
  --pg-surface:    #FFFFFF;
  --pg-line:       #DAE2E6;
  --pg-text:       #1B2A33;
  --pg-muted:      #5C6E79;

  /* Status */
  --pg-ok:   #2E7D5B;  --pg-ok-soft:   #E3F2EA;
  --pg-warn: #9A6212;  --pg-warn-soft: #FBF0DC;
  --pg-bad:  #B0402E;  --pg-bad-soft:  #F8E5E1;

  /* Tipografi & bentuk */
  --pg-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --pg-radius-sm: 6px;   /* input, tombol */
  --pg-radius:    10px;  /* panel */
  --pg-sidebar-w: 256px;

  /* Override variabel Bootstrap */
  --bs-body-font-family: var(--pg-font);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--pg-text);
  --bs-body-bg: var(--pg-paper);
  --bs-border-color: var(--pg-line);
  --bs-primary: #16384A;
  --bs-primary-rgb: 22, 56, 74;
  --bs-link-color: #16384A;
  --bs-link-color-rgb: 22, 56, 74;
  --bs-link-hover-color: #6D4A9C;
  --bs-link-hover-color-rgb: 109, 74, 156;
  --bs-secondary-color: var(--pg-muted);
  --bs-border-radius: var(--pg-radius-sm);
  --bs-focus-ring-color: rgba(109, 74, 156, .25);
}

body { font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; }
.num, table td.num { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 { color: var(--pg-ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; }  h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; } h4 { font-size: 1rem; }
.text-muted, .form-text { color: var(--pg-muted) !important; }

:focus-visible { outline: 2px solid var(--pg-stamp); outline-offset: 2px; }

/* ---------- Tombol ---------- */
.btn { font-weight: 600; border-radius: var(--pg-radius-sm); padding: .5rem 1rem; }
.btn-primary {
  --bs-btn-bg: var(--pg-ink); --bs-btn-border-color: var(--pg-ink);
  --bs-btn-hover-bg: var(--pg-ink-deep); --bs-btn-hover-border-color: var(--pg-ink-deep);
  --bs-btn-active-bg: var(--pg-ink-deep); --bs-btn-active-border-color: var(--pg-ink-deep);
  --bs-btn-disabled-bg: var(--pg-ink); --bs-btn-disabled-border-color: var(--pg-ink);
}
.btn-accent {
  --bs-btn-color: #fff; --bs-btn-bg: var(--pg-stamp); --bs-btn-border-color: var(--pg-stamp);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5A3C84; --bs-btn-hover-border-color: #5A3C84;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #5A3C84;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--pg-stamp); --bs-btn-disabled-border-color: var(--pg-stamp);
}
.btn-outline-primary {
  --bs-btn-color: var(--pg-ink); --bs-btn-border-color: var(--pg-line);
  --bs-btn-hover-color: var(--pg-ink); --bs-btn-hover-bg: var(--pg-ink-soft);
  --bs-btn-hover-border-color: var(--pg-ink); --bs-btn-active-bg: var(--pg-ink-soft);
  --bs-btn-active-color: var(--pg-ink); --bs-btn-active-border-color: var(--pg-ink);
}
.btn-icon { padding: .375rem .5rem; line-height: 1; }

/* ---------- Form ---------- */
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-control, .form-select {
  border-color: var(--pg-line); border-radius: var(--pg-radius-sm);
  padding: .55rem .8rem; background-color: var(--pg-surface);
}
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pg-stamp); box-shadow: 0 0 0 .2rem rgba(109, 74, 156, .18);
}
.form-check-input:checked { background-color: var(--pg-stamp); border-color: var(--pg-stamp); }
.form-section { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--pg-line); }
.form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section > h3 { margin-bottom: .25rem; }
.form-section > p { color: var(--pg-muted); font-size: .875rem; margin-bottom: 1rem; }

/* =====================================================================
   LAYOUT APLIKASI
   ===================================================================== */
.app-shell { display: grid; grid-template-columns: var(--pg-sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--pg-ink-deep); color: #C9D6DD;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 1.25rem .875rem;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 0 .5rem 1.25rem; color: #fff; text-decoration: none; }
.sidebar-brand:hover { color: #fff; }
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 2px solid var(--pg-stamp-light); display: grid; place-items: center;
  color: var(--pg-stamp-light); font-size: 1.1rem;
}
.brand-name { font-weight: 700; line-height: 1.2; font-size: .95rem; }
.brand-sub  { font-size: .75rem; color: #8FA6B2; }

.nav-group { margin-top: 1rem; }
.nav-group-title { font-size: .75rem; color: #7F97A4; padding: 0 .75rem .35rem; font-weight: 600; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: #C9D6DD; padding: .55rem .75rem; border-radius: var(--pg-radius-sm);
  font-weight: 500; font-size: .9rem; position: relative;
}
.sidebar .nav-link i { font-size: 1.05rem; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .nav-link.active { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar .nav-link.active::before {
  content: ""; position: absolute; left: -.875rem; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--pg-stamp-light);
}
.sidebar-foot { margin-top: auto; padding: 1rem .75rem 0; font-size: .75rem; color: #7F97A4; border-top: 1px solid rgba(255,255,255,.08); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--pg-line);
  display: flex; align-items: center; gap: 1rem; padding: .75rem 1.75rem; min-height: 64px;
}
.topbar-title { font-size: 1.05rem; font-weight: 700; color: var(--pg-ink); margin: 0; }
.topbar-crumb { font-size: .8rem; color: var(--pg-muted); }
.user-chip { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--pg-ink-soft); color: var(--pg-ink);
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.user-chip .who { line-height: 1.15; font-size: .85rem; }
.user-chip .who small { color: var(--pg-muted); font-size: .75rem; }

.content { padding: 1.75rem; max-width: 1280px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.page-head p { margin: .25rem 0 0; color: var(--pg-muted); max-width: 62ch; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.sidebar-toggle, .sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--pg-sidebar-w); z-index: 1040;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.show { transform: none; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,42,56,.45); z-index: 1030; }
  .sidebar-backdrop.show { display: block; }
  .sidebar-toggle { display: inline-flex; }
  .topbar, .content { padding-left: 1rem; padding-right: 1rem; }
  .user-chip .who { display: none; }
}

/* =====================================================================
   PANEL, TABEL, BADGE
   ===================================================================== */
.panel { background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: var(--pg-radius); }
.panel-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pg-line); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1rem; }
.panel-head .actions { margin-left: auto; }
.panel-body { padding: 1.25rem; }
.panel-foot { padding: .85rem 1.25rem; border-top: 1px solid var(--pg-line); display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }

.table-pg { margin: 0; --bs-table-bg: transparent; --bs-table-hover-bg: #F6F8F9; }
.table-pg thead th {
  font-size: .8rem; font-weight: 600; color: var(--pg-muted); background: #F7F9FA;
  border-bottom: 1px solid var(--pg-line); padding: .7rem 1rem; white-space: nowrap;
}
.table-pg td { padding: .8rem 1rem; vertical-align: middle; border-color: #EDF1F3; }
.table-pg tbody tr:last-child td { border-bottom: 0; }
.table-pg th:first-child, .table-pg td:first-child { padding-left: 1.25rem; }
.table-pg th:last-child,  .table-pg td:last-child  { padding-right: 1.25rem; }
.cell-person { display: flex; align-items: center; gap: .75rem; }
.cell-person strong { display: block; font-weight: 600; }
.cell-person small { color: var(--pg-muted); font-variant-numeric: tabular-nums; }

.badge-pg { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; }
.badge-ok    { background: var(--pg-ok-soft);    color: var(--pg-ok); }
.badge-warn  { background: var(--pg-warn-soft);  color: var(--pg-warn); }
.badge-bad   { background: var(--pg-bad-soft);   color: var(--pg-bad); }
.badge-ink   { background: var(--pg-ink-soft);   color: var(--pg-ink); }
.badge-stamp { background: var(--pg-stamp-soft); color: var(--pg-stamp); }

.pagination { --bs-pagination-color: var(--pg-ink); --bs-pagination-active-bg: var(--pg-ink);
  --bs-pagination-active-border-color: var(--pg-ink); --bs-pagination-border-color: var(--pg-line);
  --bs-pagination-hover-bg: var(--pg-ink-soft); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(109,74,156,.2);
  margin: 0; }

.search-box { position: relative; }
.search-box i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--pg-muted); }
.search-box .form-control { padding-left: 2.3rem; min-width: 280px; }

.alert { border-radius: var(--pg-radius-sm); border: 0; border-left: 3px solid; }
.alert-success { background: var(--pg-ok-soft);   color: #1F5A40; border-color: var(--pg-ok); }
.alert-danger  { background: var(--pg-bad-soft);  color: #822E21; border-color: var(--pg-bad); }
.alert-warning { background: var(--pg-warn-soft); color: #6F460C; border-color: var(--pg-warn); }
.alert-info    { background: var(--pg-ink-soft);  color: var(--pg-ink); border-color: var(--pg-ink); }

/* Progres per komponen penilai (dashboard) */
.progress-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 1rem; padding: .6rem 0; }
.progress-row + .progress-row { border-top: 1px dashed var(--pg-line); }
.progress-row .label { font-weight: 600; font-size: .9rem; }
.progress-row .label small { display: block; font-weight: 400; color: var(--pg-muted); font-size: .75rem; }
.progress { height: 8px; background: var(--pg-ink-soft); border-radius: 99px; }
.progress-bar { background: var(--pg-ink); border-radius: 99px; }
.progress-row .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pg-ink); }

/* Daftar tugas penilaian */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list li { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; border-top: 1px solid #EDF1F3; }
.task-list li:first-child { border-top: 0; }
.task-list .meta { flex: 1; min-width: 0; }
.task-list .meta strong { display: block; font-weight: 600; }
.task-list .meta small { color: var(--pg-muted); }

/* =====================================================================
   SKALA LIKERT — "stempel" pilihan nilai
   ===================================================================== */
.item-soal { padding: 1.25rem 0; border-top: 1px solid #EDF1F3; display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem 1rem; }
.item-soal:first-of-type { border-top: 0; padding-top: .5rem; }
.item-soal .no { color: var(--pg-muted); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.item-soal .tanya { font-weight: 500; max-width: 70ch; margin-bottom: .75rem; }

.likert { grid-column: 2; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.likert input { position: absolute; opacity: 0; pointer-events: none; }
.likert label {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-weight: 700; color: var(--pg-muted);
  border: 1.5px solid var(--pg-line); background: var(--pg-surface);
  transition: border-color .15s, color .15s;
}
.likert label:hover { border-color: var(--pg-stamp); color: var(--pg-stamp); }
.likert input:focus-visible + label { outline: 2px solid var(--pg-stamp); outline-offset: 2px; }
.likert input:checked + label {
  background: var(--pg-stamp); border-color: var(--pg-stamp); color: #fff;
  box-shadow: inset 0 0 0 3px var(--pg-stamp), inset 0 0 0 4.5px rgba(255,255,255,.55);
  animation: stamp-press .22s ease-out;
}
.likert .ends { font-size: .75rem; color: var(--pg-muted); }
@keyframes stamp-press {
  0%   { transform: scale(1.18) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}

.likert-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8rem; color: var(--pg-muted); }
.likert-legend b { color: var(--pg-ink); }

/* Pita progres pengisian form (menempel di bawah topbar) */
.fill-bar { position: sticky; top: 64px; z-index: 15; background: var(--pg-paper); padding: .75rem 0; display: flex; align-items: center; gap: 1rem; }
.fill-bar .progress { flex: 1; }

/* =====================================================================
   LAPORAN / RAPOR KINERJA
   ===================================================================== */
.kop { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; text-align: center;
  padding-bottom: 1rem; border-bottom: 3px solid var(--pg-ink); position: relative; margin-bottom: 1.5rem; }
.kop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; border-bottom: 1px solid var(--pg-ink); }
.kop .logo { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--pg-ink); display: grid; place-items: center; color: var(--pg-ink); font-size: 1.6rem; }
.kop h1 { font-size: 1.2rem; margin: 0; }
.kop p { margin: 0; font-size: .82rem; color: var(--pg-muted); }

.identitas { display: grid; grid-template-columns: 150px 1fr; gap: .3rem 1rem; font-size: .9rem; }
.identitas dt { color: var(--pg-muted); font-weight: 500; }
.identitas dd { margin: 0; font-weight: 600; }

.nilai-akhir { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.nilai-akhir .angka { font-size: 3.25rem; font-weight: 800; color: var(--pg-ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.nilai-akhir .ket { color: var(--pg-muted); font-size: .85rem; }

/* Stempel predikat — elemen khas aplikasi */
.stamp {
  --c: var(--pg-stamp);
  width: 128px; height: 128px; border-radius: 50%; flex: none;
  border: 3px solid var(--c); color: var(--c);
  display: grid; place-items: center; text-align: center;
  transform: rotate(-9deg); position: relative; opacity: .92;
}
.stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--c); }
.stamp .t1 { font-size: .68rem; font-weight: 600; line-height: 1.1; }
.stamp .t2 { font-size: 1.15rem; font-weight: 800; line-height: 1.1; margin: .15rem 0; }
.stamp .t3 { font-size: .68rem; font-variant-numeric: tabular-nums; }
.stamp.is-ok   { --c: var(--pg-ok); }
.stamp.is-warn { --c: var(--pg-warn); }
.stamp.is-bad  { --c: var(--pg-bad); }

.rekom { list-style: none; padding: 0; margin: 0; }
.rekom li { padding: .9rem 1rem; border: 1px solid var(--pg-line); border-left: 3px solid var(--pg-stamp); border-radius: var(--pg-radius-sm); }
.rekom li + li { margin-top: .6rem; }
.rekom li.high { border-left-color: var(--pg-bad); }
.rekom strong { display: block; }
.rekom small { color: var(--pg-muted); }

.ttd { display: flex; justify-content: flex-end; margin-top: 2.5rem; }
.ttd > div { text-align: center; min-width: 280px; font-size: .9rem; }
.ttd .space { height: 72px; }
.ttd .nama { font-weight: 700; text-decoration: underline; }

/* =====================================================================
   HALAMAN LOGIN
   ===================================================================== */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-side {
  background: var(--pg-ink-deep); color: #C9D6DD; padding: 3rem;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
/* Motif stempel samar sebagai latar */
.login-side::after {
  content: ""; position: absolute; width: 440px; height: 440px; right: -120px; bottom: -120px;
  border-radius: 50%; border: 2px solid rgba(195,174,227,.18);
  box-shadow: inset 0 0 0 18px rgba(15,42,56,1), inset 0 0 0 19px rgba(195,174,227,.14);
}
.login-side h1 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.2; max-width: 16ch; margin: 0 0 1rem; }
.login-side p { max-width: 44ch; margin: 0; }
.login-form-area { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--pg-surface); }
.login-card { width: 100%; max-width: 380px; }
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.role-pick input { position: absolute; opacity: 0; }
.role-pick label {
  border: 1.5px solid var(--pg-line); border-radius: var(--pg-radius-sm); padding: .6rem .75rem;
  cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .85rem; color: var(--pg-muted);
}
.role-pick label:hover { border-color: var(--pg-ink); color: var(--pg-ink); }
.role-pick input:checked + label { border-color: var(--pg-stamp); color: var(--pg-stamp); background: var(--pg-stamp-soft); }
.role-pick input:focus-visible + label { outline: 2px solid var(--pg-stamp); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-side { padding: 2rem 1.5rem; }
  .login-side::after { display: none; }
  .progress-row { grid-template-columns: 1fr 60px; }
  .progress-row .progress { grid-column: 1 / -1; grid-row: 2; }
  .identitas { grid-template-columns: 1fr; }
  .identitas dd { margin-bottom: .4rem; }
  .panel-body { padding: 1rem; }
  .item-soal { grid-template-columns: 1.6rem 1fr; gap: .25rem .5rem; }
  .likert { gap: .45rem; }
  .content { padding-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   CETAK (dipakai juga saat export PDF lewat browser)
   ===================================================================== */
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .page-head .actions, .no-print, .sidebar-backdrop { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
  .panel { border: 0; }
  .stamp { opacity: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}