/* ==========================================================================
   TEFA-SCIPRE — Design tokens (from DESIGN.md: "Industrial EdTech Precision")
   ========================================================================== */
:root{
  --c-primary:#031635;
  --c-primary-container:#1a2b4b;
  --c-on-primary:#ffffff;
  --c-secondary:#006a62;
  --c-secondary-container:#57fae9;
  --c-accent:#2addcd;
  --c-tertiary:#5190ff;
  --c-success:#10B981;
  --c-warning:#F59E0B;
  --c-danger:#EF4444;
  --c-bg:#f7f9fb;
  --c-surface:#ffffff;
  --c-surface-container:#eceef0;
  --c-surface-container-low:#f2f4f6;
  --c-outline:#c5c6cf;
  --c-text-main:#1E293B;
  --c-text-muted:#64748B;
  --radius-card:20px;
  --radius-control:8px;
  --radius-input:12px;
  --radius-pill:9999px;
  --shadow-soft:0 4px 20px rgba(26,43,75,0.08);
  --space:8px;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-label:'Inter',system-ui,sans-serif;
  /* Tinggi header (topbar) tetap di Tablet/Mobile — dipakai juga sebagai
     offset "top" menu navigasi supaya keduanya bisa sticky bertumpuk
     tanpa saling tutup. Diperkecil lagi di breakpoint Mobile. */
  --topbar-h:60px;
  /* Tinggi bar menu bawah (Tablet/Mobile) — dipakai sebagai padding-bawah
     .app-content supaya konten paling bawah tidak ketutupan bar yang
     fixed. Diperkecil lagi di breakpoint Mobile. */
  --bottomnav-h:68px;
  /* Gradasi "brand" biru->cyan yang dipakai progress bar — dijadikan
     variabel bersama supaya elemen lain yang tadinya background solid 1
     warna (tombol Primary, baris Skor Akhir kompeten, node tahap yang
     sudah selesai, dst.) bisa ikut memakai gradasi yang sama persis,
     konsisten satu gaya di seluruh dashboard. */
  --brand-gradient:linear-gradient(90deg,var(--c-tertiary),var(--c-accent) 55%,var(--c-secondary-container));
  --success-gradient:linear-gradient(90deg,#059669,var(--c-success));
  --danger-gradient:linear-gradient(90deg,#b91c1c,var(--c-danger));
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* CATATAN: sengaja TIDAK memakai overflow-x:hidden di html/body — itu
   memang mencegah halaman ikut melebar ke kanan, TAPI juga diam-diam
   menjadikan html/body sebagai "scroll container" baru, dan itu merusak
   position:sticky di seluruh halaman (sidebar & topbar jadi tidak sticky
   lagi). Jadi pencegahan overflow-nya cukup di sumbernya saja: min-width:0
   pada .card serta elemen flex/grid yang berpotensi melebar (lihat .card,
   .card-header, .stage-score-field, dst.), plus .table-responsive untuk
   tabel yang memang perlu discroll sendiri. */
body{
  font-family:var(--font-display);
  background:var(--c-bg);
  color:var(--c-text-main);
  line-height:1.5;
}
a{color:var(--c-secondary);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.container{max-width:1280px;margin:0 auto;padding:0 24px;}
@media (max-width:768px){.container{padding:0 16px;}}

/* ---------- App shell ----------
   Dibangun dengan CSS Grid (bukan flex) supaya urutan TAMPIL (topbar di
   atas, menu di bawahnya, lalu konten) bisa diatur bebas lewat
   grid-template-areas per breakpoint, terlepas dari urutan sebenarnya di
   HTML (topbar, aside, main berurutan sebagai children langsung dari
   .app-shell — lihat app-chrome.php). Ini sengaja dipisah dari urutan DOM
   karena di Desktop sidebar perlu jadi kolom penuh di kiri (membentang
   dari atas ke bawah, topbar+konten di kanannya), sedangkan di Tablet/
   Mobile sidebar berubah jadi menu horizontal yang harus tampil DI BAWAH
   topbar (nama aplikasi/pengguna/tombol Edit Profil di paling atas). */
.app-shell{
  display:grid;min-height:100vh;
  grid-template-columns:264px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"sidebar topbar" "sidebar content";
}
/* Gradasi biru-hijau (navy -> cyan glow), diambil dari hero landing page,
   dipakai bersama di sidebar dashboard & panel biru halaman login supaya
   dua tampilan terasa satu identitas visual. Terdiri dari: dasar gradient
   navy gelap (primary -> primary-container), dua "cahaya" radial cyan/biru
   di pojok (meniru hero), dan pola titik-titik halus (bg-pattern) sebagai
   tekstur. */
.brand-gradient-bg{
  background-color:var(--c-primary);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(87,250,233,.22), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(81,144,255,.30), transparent 50%),
    radial-gradient(rgba(87,250,233,.10) 1px, transparent 1px),
    linear-gradient(160deg, var(--c-primary), var(--c-primary-container));
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
  background-size:auto,auto,22px 22px,auto;
}
.app-sidebar{
  grid-area:sidebar;
  color:#fff;
  padding:24px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
.app-sidebar .logo{font-weight:700;font-size:20px;letter-spacing:-0.02em;margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.app-sidebar .logo i{color:var(--c-accent);font-size:22px;}
.app-sidebar .logo span{color:var(--c-accent);}
/* Logo kustom (upload lewat Site Identity) MENGGANTIKAN SELURUHNYA — ikon
   bawaan bi-cpu maupun teks "TEFA-SCIPRE" tidak lagi ditampilkan
   berdampingan, karena logo sendiri sudah dianggap mewakili identitas
   brand secara utuh. Karena itu ukurannya dibuat lebih besar (bukan
   sekadar ukuran ikon kecil) supaya tetap terbaca jelas berdiri sendiri. */
.sidebar-logo-img{height:28px;width:auto;max-width:40px;object-fit:contain;flex-shrink:0;}
.topbar-logo-img{height:22px;width:auto;max-width:32px;object-fit:contain;flex-shrink:0;}
.sidebar-logo-img-solo{height:48px;max-width:200px;}
.topbar-logo-img-solo{height:34px;max-width:160px;}
.app-nav-group{margin-bottom:20px;}
.app-nav-group h4{font-family:var(--font-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8293b8;margin:0 0 8px 4px;}
.app-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-control);
  color:#d8e2ff;font-size:14px;font-weight:500;margin-bottom:2px;
}
.app-nav a i{font-size:16px;width:18px;text-align:center;color:#8293b8;flex-shrink:0;}
.app-nav a:hover,.app-nav a.active{background:var(--c-primary-container);color:#fff;text-decoration:none;}
.app-nav a:hover i,.app-nav a.active i{color:var(--c-accent);}
/* Credit pendanaan — ditaruh paling bawah sidebar (margin-top:auto dorong
   ke dasar .app-sidebar yang sudah flex column, "mentok bawah" persis di
   bawah menu terakhir). Teks sengaja dibuat sesingkat mungkin (2 baris,
   font kecil, disingkat jadi "DPPM" & "Kemdiktisaintek" tanpa kepanjangan)
   supaya tidak memakan banyak ruang sidebar — kalimat lengkapnya tetap ada
   lewat atribut title (muncul saat kursor diarahkan/di-hover) untuk yang
   butuh detail lengkap. Disembunyikan di Tablet/Mobile (lihat media query
   di bawah) karena di situ sidebar berubah jadi bar menu bawah yang sempit,
   tidak ada ruang untuk teks credit.  */
.sidebar-credit{
  margin-top:auto;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:10px;line-height:1.5;color:#8293b8;text-align:center;cursor:default;
}
/* Logo instansi pendukung (UMP, Tut Wuri Handayani, Diktisaintek Berdampak)
   — ketiganya dibuat kecil & sejajar berdampingan di atas teks credit,
   bukan ditumpuk vertikal, supaya tetap ringkas dan tidak memakan banyak
   ruang sidebar. File sumber sudah diproses jadi PNG latar transparan
   (lihat assets/img/credit-*.png). */
.sidebar-credit-logos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;}
.sidebar-credit-logos img{height:26px;width:auto;max-width:26px;object-fit:contain;flex-shrink:0;}
.app-topbar{
  grid-area:topbar;
  background:#fff;border-bottom:1px solid var(--c-outline);
  padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;
  position:sticky;top:0;z-index:5;min-width:0;
}
.app-topbar-user{display:flex;align-items:center;gap:12px;min-width:0;}
.app-topbar-userinfo{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.2;min-width:0;}
/* align-items:flex-end pada kolom ini membuat anak-anaknya (badge & nama)
   otomatis mengambil lebar konten aslinya, bukan lebar yang tersedia —
   jadi min-width:0 di sini saja TIDAK cukup untuk mencegah overflow.
   Pemotongan teks (ellipsis) diatur langsung pada badge & nama di bawah,
   dengan max-width yang mengecil per breakpoint. */
.app-topbar-userinfo .badge-role,
.app-topbar-userinfo span:last-child{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}
.app-content{grid-area:content;padding:24px;max-width:1280px;min-width:0;}
/* Footer dashboard/app — mengisi bagian bawah yang sebelumnya kosong
   polos begitu konten halaman habis, senada gaya (logo + copyright +
   tagline) dengan footer landing page tapi versi ringkas & memakai
   token/CSS tema dashboard yang sudah ada (bukan Tailwind seperti landing
   page, karena Tailwind CDN memang cuma dimuat khusus di front-page.php).
   Ditaruh sebagai elemen TERAKHIR di dalam .app-content (bukan area grid
   sendiri) supaya otomatis ikut alur konten & tetap di kolom konten (di
   samping sidebar), bukan menyeberang di bawah sidebar. */
.app-footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--c-outline-variant,#e2e8f0);}
.app-footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.app-footer-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.app-footer-logo{height:28px;width:auto;max-width:140px;object-fit:contain;}
.app-footer-logo-fallback{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--c-primary);}
.app-footer-copyright{font-size:12px;color:var(--c-text-muted);}
.app-footer-tagline{font-size:12px;color:var(--c-text-muted);max-width:480px;margin:0;}
/* Logo di topbar hanya muncul di Tablet/Mobile, sebagai pengganti logo
   sidebar yang disembunyikan supaya menu horizontal lebih ringkas. */
.topbar-logo{display:none;align-items:center;gap:6px;font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--c-primary);}
.topbar-logo i{color:var(--c-secondary);font-size:18px;}
.topbar-logo span{color:var(--c-secondary);}

/* ==========================================================================
   Responsif — 3 tampilan: Desktop (bawaan, >1024px, sidebar vertikal di
   kiri seperti sekarang), Tablet (641-1024px, header/topbar di paling
   atas — nama aplikasi, nama pengguna, tombol Edit Profil — lalu menu
   navigasi jadi baris horizontal ikon+label DI BAWAHNYA, boleh turun ke
   beberapa baris), dan Mobile (<=640px, susunan sama seperti Tablet tapi
   menu jadi satu baris horizontal yang bisa digeser dengan ikon DI ATAS
   label seperti tab bar aplikasi, dan tombol Edit Profil/Keluar hanya
   ikon saja tanpa teks supaya hemat tempat). Menu horizontal di Tablet &
   Mobile dibuat sticky menempel di bawah topbar saat discroll, supaya
   navigasi selalu terjangkau tanpa perlu scroll balik ke atas.
   ========================================================================== */
@media (max-width:1024px){
  .app-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"topbar" "content";
  }
  .app-topbar{
    position:sticky;top:0;z-index:40;height:var(--topbar-h,60px);
    box-shadow:0 2px 12px rgba(0,0,0,.08);justify-content:space-between;
  }
  /* Logo (kiri) & blok user (kanan) sama-sama jadi flex item yang boleh
     menyusut, dan blok user yang jadi prioritas menyusut duluan (logo
     tetap penuh) supaya badge/nama/tombol tidak mendorong halaman
     melebar ke kanan di layar sempit. */
  .topbar-logo{flex-shrink:0;}
  .app-topbar-user{flex-shrink:1;min-width:0;}
  .app-topbar-userinfo{max-width:140px;}

  /* Menu navigasi dipindah jadi bar bawah yang selalu menempel (fixed)
     di bawah layar — pola umum "bottom tab bar" aplikasi mobile, supaya
     selalu terjangkau ibu jari tanpa perlu scroll balik. Karena fixed,
     elemen ini keluar dari alur grid (bukan lagi bagian "sidebar" di
     grid-template-areas), jadi .app-content diberi padding-bawah lewat
     --bottomnav-h supaya konten paling bawah tidak ketutupan bar ini. */
  .app-sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;
    width:100%;height:auto;display:block;padding:6px 10px;
    box-shadow:0 -2px 12px rgba(0,0,0,.14);
  }
  .app-sidebar .logo{display:none;} /* logo teks penuh cuma perlu di sidebar desktop; hemat ruang di bar bawah */
  .sidebar-credit{display:none;} /* tidak ada ruang untuk teks credit di bar menu bawah yang sempit */
  /* Setiap item menu melebar rata mengisi PENUH lebar bar (lebar bar
     dibagi rata jumlah total item menu — bukan cuma sekelompok item yang
     nempel/centered seperti sebelumnya). Triknya: .app-nav-group dibuat
     "display:contents" (bungkusnya lenyap dari tata letak flex, tapi anak
     -anaknya tetap tampil) supaya SEMUA <a> dari semua grup jadi flex item
     LANGSUNG di .app-nav — jadi baginya rata ke seluruh item, bukan per
     grup (grup dengan 1 item vs grup dengan 5 item tetap dapat lebar per
     -link yang sama). Tiap <a> memakai flex:1 1 0 (lebar dasar 0, sisanya
     dibagi rata) dengan lantai minimum (min-width) — begitu jumlah menunya
     terlalu banyak untuk muat di atas lantai minimum itu, flexbox otomatis
     meluber dan overflow-x:auto di .app-nav yang mengambil alih jadi
     slider (geser), sama seperti menu Admin yang sudah punya banyak item. */
  .app-nav{
    display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
    gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .app-nav::-webkit-scrollbar{display:none;}
  .app-nav-group{display:contents;}
  .app-nav-group h4{display:none;} /* judul grup ("Data Master", dst) tidak relevan lagi di menu horizontal */
  .app-nav a{margin-bottom:0;padding:7px 10px;white-space:nowrap;flex:1 1 0;min-width:92px;justify-content:center;overflow:hidden;text-overflow:ellipsis;}
  .topbar-logo{display:flex;}
  .app-content{padding-bottom:calc(var(--bottomnav-h,68px) + 16px);}
}
@media (max-width:640px){
  :root{--topbar-h:52px;--bottomnav-h:60px;}
  .app-topbar{padding:0 16px;}
  .app-sidebar{padding:6px 8px;}
  .app-nav a{
    flex-direction:column;gap:2px;padding:5px 8px;font-size:10px;font-weight:600;
    text-align:center;flex:1 1 0;min-width:56px;
  }
  .app-nav a i{font-size:16px;width:auto;}
  /* Tombol Edit Profil & Keluar jadi ikon saja (tanpa teks) di HP supaya
     hemat tempat — nama & status pengguna tetap tampil, cuma teks tombol
     yang disembunyikan. */
  .app-topbar-user .btn .btn-label{display:none;}
  .app-topbar-user .btn{padding:0;width:32px;min-height:32px;flex-shrink:0;}
  .app-topbar-userinfo{gap:0;max-width:96px;}
  .app-topbar-userinfo .badge-role{font-size:9px;padding:1px 6px;}
  .app-topbar-userinfo span:last-child{font-size:12px;}
  .app-content{padding:16px;padding-bottom:calc(var(--bottomnav-h,60px) + 16px);}
  .btn-row{margin:16px 0;}
}

/* Baris tombol aksi di dalam konten (mis. "Tambah Kegiatan TEFA" + "Lihat
   Semua Kegiatan TEFA") — dipakai supaya kalau tombolnya turun baris di
   layar sempit, ada jarak (gap) yang jelas antar tombol, tidak lagi
   berdempetan langsung karena sebelumnya cuma dipisah spasi biasa. */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0;}

/* ---------- Typography helpers ---------- */
.h-display{font-size:48px;font-weight:700;line-height:56px;letter-spacing:-0.02em;}
.h-lg{font-size:32px;font-weight:700;line-height:40px;}
.h-md{font-size:24px;font-weight:600;line-height:32px;}
.h-title{font-size:20px;font-weight:600;line-height:28px;}
.text-muted{color:var(--c-text-muted);}
.label{font-family:var(--font-label);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text-muted);}
/* Judul BAGIAN BESAR di form Pengaturan (/admin/pengaturan/) — beda level
   dari .label biasa (yang jadi sub-judul field, mis. "Identitas Institusi"
   di dalam bagian "Pengaturan Sertifikat"). Dipakai untuk memisahkan
   "Pengaturan Sertifikat" dari "Pengaturan Tampilan" dalam satu form yang
   sama, supaya menu sidebar-nya bisa disederhanakan jadi cuma "Pengaturan"
   (bukan "Sertifikat" seperti sebelumnya) tanpa kehilangan pengelompokan
   visual di dalam halamannya. */
.settings-section-title{
  font-size:16px;font-weight:700;color:var(--c-text-main);display:flex;align-items:center;gap:8px;
  margin:28px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--c-outline-variant,#e2e8f0);
}
.settings-section-title:first-of-type{margin-top:0;}
.settings-section-title i{color:var(--c-secondary);font-size:18px;}
.settings-section-title .info-btn{margin-left:auto;}

/* Tombol ikon (i) "Informasi" — dipakai di form Pengaturan Admin
   (/admin/pengaturan/) supaya teks keterangan/petunjuk yang panjang
   (mis. penjelasan kategori nilai, format placeholder Nomor Sertifikat,
   petunjuk format upload logo) tidak selalu tampil dan bikin form terasa
   penuh/berantakan — cukup disembunyikan (.info-text) dan baru muncul
   kalau tombol ini diklik (lihat toggle .info-btn di assets/js/app.js).
   Dipakai deklaratif: taruh <button class="info-btn" data-info-target="id">
   di sebelah judul/label, dan <p class="info-text" id="id"> berisi teks
   keterangannya — tidak perlu JS tambahan per halaman. */
.info-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:20px;height:20px;padding:0;margin-left:4px;vertical-align:middle;
  border:none;border-radius:50%;background:transparent;color:var(--c-text-muted);
  cursor:pointer;line-height:1;
}
.info-btn i{font-size:15px;}
.info-btn:hover,.info-btn.is-active{background:var(--c-surface-container-low,#eef2f7);color:var(--c-primary);}
.info-text{display:none;}
.info-text.is-open{display:block;}

/* Baris kategori nilai (Pengaturan > Kategori Nilai) — warna, min, label,
   berhak sertifikat, pratinjau pill, dan tombol hapus. Tiap field dibuat
   dengan struktur yang SAMA PERSIS: judul setinggi 20px di atas (baik teks
   asli seperti "Warna"/"Min. Nilai", ATAU .tier-field-spacer yang tak
   kelihatan untuk field yang tak punya judul, mis. Berhak Sertifikat/
   pratinjau/tombol hapus), lalu .tier-field-controlrow setinggi 44px yang
   isinya selalu di-tengahkan (align-items:center). Karena SEMUA kolom
   punya "tinggi judul" yang sama persis, top kontrol beneran (kotak warna,
   input angka/teks, checkbox, pill, tombol) otomatis sejajar rapi dalam
   satu baris — tidak perlu lagi trik margin manual per elemen yang gampang
   berantakan kalau layoutnya berubah. */
.tier-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--c-outline-variant,#e2e8f0);flex-wrap:wrap;}
.tier-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.tier-field{margin:0;display:flex;flex-direction:column;}
.tier-field > label{font-size:12px;margin-bottom:6px;line-height:1;}
.tier-field-spacer{display:block;height:12px;margin-bottom:6px;visibility:hidden;}
.tier-field-controlrow{height:44px;display:flex;align-items:center;}
.tier-field-color{flex:0 0 52px;}
.tier-field-color .tier-field-controlrow input[type=color]{box-sizing:border-box;padding:2px;height:44px;width:52px;margin:0;cursor:pointer;}
.tier-field-min{flex:0 0 90px;}
.tier-field-min .tier-field-controlrow input,.tier-field-label .tier-field-controlrow input{box-sizing:border-box;height:44px;width:100%;margin:0;}
.tier-field-label{flex:1;min-width:120px;}
.tier-field-cert{flex:0 0 150px;}
.tier-field-cert-inner{display:flex;align-items:center;gap:6px;font-weight:400;font-size:14px;margin:0;}
.tier-field-preview,.tier-field-remove-wrap{flex:0 0 auto;}
.tier-preview{white-space:nowrap;}
.tier-remove{color:var(--c-error,#B91C1C);}
@media (max-width:680px){
	.tier-field-min{flex:1 1 100px;}
	.tier-field-label{flex:1 1 100%;order:-1;}
	.tier-field-cert{flex:1 1 auto;}
}

/* ---------- Cards ----------
   Mengadopsi model card landing page (front-page.php): sudut lebih
   membulat (rounded-2xl/3xl), diberi border tipis senada
   (border-outline-variant) selain shadow lembut, dan transisi halus di
   shadow/border supaya konsisten dengan gaya card di Fitur/Kegiatan
   TEFA/Metodologi/Tentang pada landing page. */
.card{
  background:var(--c-surface);border-radius:var(--radius-card);
  border:1px solid var(--c-outline-variant,#dde1e6);
  box-shadow:var(--shadow-soft);padding:24px;margin-bottom:24px;
  min-width:0;max-width:100%;
  transition:box-shadow .2s ease,border-color .2s ease;
}
/* Kartu di dalam kartu (mis. tiap tahap penilaian di dalam kartu
   Kelompok) makan padding dua kali lipat — dikecilkan di layar sempit
   supaya ruang kontennya lebih lega dan tidak gampang mepet/overflow. */
@media (max-width:640px){.card{padding:16px;}}
.card-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;border-bottom:1px solid #E2E8F0;padding-bottom:12px;margin-bottom:16px;}
.card-header>div:first-child{min-width:0;flex:1 1 200px;}
.card-header .h-title{overflow-wrap:break-word;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:24px;}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
/* .kpi — kartu statistik ukuran besar di Dashboard (Admin/Guru/Siswa).
   position:relative + overflow:hidden supaya ikon raksasa transparan
   (.kpi-bg-icon) bisa "mengintip" di pojok sebagai latar dekoratif tanpa
   keluar dari kartu — lihat markup di route-dashboard.php: tiap kartu
   sekarang punya DUA elemen ikon yang sama persis (class bi-... sama),
   satu untuk badge kecil di kiri-atas (.icon, seperti sebelumnya) dan satu
   lagi untuk watermark besar (.kpi-bg-icon, aria-hidden). Badge kecil &
   watermark besar sama-sama pakai var(--c-primary) supaya terasa satu
   kesatuan warna yang "mewarnai" kartunya, bukan dua elemen lepas. */
.kpi{background:var(--c-surface);border-radius:var(--radius-card);border:1px solid var(--c-outline-variant,#dde1e6);box-shadow:var(--shadow-soft);padding:20px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden;}
.kpi-bg-icon{position:absolute;right:-14px;bottom:-18px;font-size:92px;line-height:1;color:var(--c-primary);opacity:.08;pointer-events:none;transform:rotate(-8deg);}
.kpi .icon{position:relative;z-index:1;width:40px;height:40px;border-radius:var(--radius-control);background:var(--c-surface-container-low);background:color-mix(in srgb, var(--c-primary) 12%, transparent);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;}
.kpi .num{position:relative;z-index:1;font-size:32px;font-weight:700;color:var(--c-primary);}
.kpi .label{position:relative;z-index:1;margin-top:4px;}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,43,75,0.14);border-color:var(--c-accent);}
a.kpi:hover .kpi-bg-icon{opacity:.13;transform:rotate(-4deg) scale(1.05);}

/* Card-tombol aksi cepat di Dashboard (Guru & Siswa) — mis. "Tambah
   Kegiatan"/"Nilai & Sertifikat"/"Edit Profil". Beda dari .kpi (yang
   menampilkan angka statistik) — ini murni navigasi cepat berbentuk card,
   seluruh card-nya bisa diklik (bukan cuma tombol kecil di btn-row) supaya
   lebih gampang disentuh di layar sentuh & lebih menonjol di Dashboard. */
.action-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;}
.action-card{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:var(--c-surface);border-radius:var(--radius-card);border:1px solid var(--c-outline-variant,#dde1e6);
  box-shadow:var(--shadow-soft);padding:18px 20px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.action-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,43,75,0.14);border-color:var(--c-accent);}
.action-card .icon{width:44px;height:44px;border-radius:var(--radius-control);background:var(--c-secondary-container);color:var(--c-secondary);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.action-card.primary .icon{background:var(--c-primary);color:#fff;}
.action-card .text{flex:1;min-width:0;}
.action-card .text .title{font-weight:700;font-size:15px;color:var(--c-text-main);}
.action-card .text .desc{font-size:12.5px;color:var(--c-text-muted);margin-top:2px;}
.action-card .arrow{color:var(--c-text-muted);font-size:16px;flex-shrink:0;}

.card-header .h-title i,.h-title i{color:var(--c-secondary);margin-right:6px;}
.icon-card{width:44px;height:44px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--c-surface-container-low);color:var(--c-secondary);margin-bottom:12px;}

/* ---------- Buttons ----------
   Mengadopsi model tombol landing page (front-page.php): bentuk pil
   penuh (rounded-full), tanpa border tebal kotak, dengan efek glow/shadow
   warna aksen dan hover "naik" (translateY) + transisi halus — supaya
   nuansa tombol dashboard senada dengan tombol di hero/CTA landing page. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:var(--radius-pill);
  font-weight:600;font-size:14px;border:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;
}
.btn-primary{background:var(--brand-gradient);color:var(--c-primary);box-shadow:0 4px 14px rgba(42,221,205,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(42,221,205,.38);text-decoration:none;}
.btn-outline{background:transparent;color:var(--c-primary);border:2px solid var(--c-primary);}
.btn-outline:hover{background:var(--c-surface-container-low);transform:translateY(-2px);text-decoration:none;}
.btn-outline-danger{background:transparent;color:var(--c-danger);border:2px solid var(--c-danger);}
.btn-outline-danger:hover{background:var(--danger-gradient);color:#fff;transform:translateY(-2px);text-decoration:none;}
.btn-success{background:var(--success-gradient);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.28);}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,185,129,.38);text-decoration:none;}
.btn-danger{background:var(--danger-gradient);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.28);}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(239,68,68,.38);text-decoration:none;}
.btn-sm{min-height:36px;padding:0 16px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
.btn i{font-size:15px;line-height:1;}

/* ---------- Forms ----------
   Sudut input dibuat lebih membulat (rounded-xl, senada dengan tombol &
   card landing page) dan border defaultnya memakai warna outline-variant
   yang lebih lembut, dengan transisi halus ke warna aksen saat fokus —
   supaya kesan form senada dengan estetika landing page. */
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=email],input[type=password],select,textarea{
  width:100%;padding:14px 16px;border:1px solid var(--c-outline-variant,#dde1e6);border-radius:var(--radius-input);
  font-family:var(--font-display);font-size:14px;background:#fff;margin-bottom:16px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* input[type=date]/time/datetime-local sebelumnya tidak masuk selector di
   atas, jadi tampil sebagai input bawaan browser (kecil, tanpa padding,
   tanpa margin bawah) — itu sebabnya terasa "kurang rapi & margin mepet"
   di form Praktik/Pengerjaan (Waktu Mulai/Selesai). line-height dikunci
   supaya tinggi kotaknya konsisten dengan input teks lain walau ada ikon
   kalender/jam bawaan browser di sisi kanan. */
input[type=date],input[type=time],input[type=datetime-local]{line-height:1.4;}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.65;padding:2px;}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;}
input:hover,select:hover,textarea:hover{border-color:var(--c-outline);}
input:focus,select:focus,textarea:focus{outline:none;border:2px solid var(--c-accent);box-shadow:0 0 0 3px rgba(42,221,205,.25);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:700px){.form-row{grid-template-columns:1fr;}}
.upload-zone{
  border:2px dashed var(--c-outline);border-radius:var(--radius-card);
  padding:32px;text-align:center;color:var(--c-text-muted);margin-bottom:16px;background:var(--c-surface-container-low);
  transition:border-color .15s ease,background-color .15s ease;
}
.upload-zone:hover{border-color:var(--c-accent);background:rgba(42,221,205,.08);}

/* ---------- Status pills ----------
   white-space:nowrap supaya label pill (mis. kategori nilai custom Admin
   yang bisa lebih panjang dari "Kompeten"/"Belum Kompeten") tidak pecah ke
   baris berikutnya di dalam kapsul bulat, yang bikin tampilannya jadi
   kepotong/aneh — kolom tabel di sekitarnya melebar secukupnya sendiri
   (lihat juga .col-kompetensi di bawah untuk kolom Kompetensi tabel Nilai). */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;white-space:nowrap;}
.pill-pending{background:#E2E8F0;color:#475569;}
.pill-progress{background:#DBEAFE;color:#1D4ED8;}
.pill-submitted{background:#FEF3C7;color:#92400E;}
.pill-approved{background:#D1FAE5;color:#047857;}
.pill-revision{background:#FEE2E2;color:#B91C1C;}
.pill-complete{background:var(--c-secondary-container);color:var(--c-secondary);}

/* ---------- Progress bar ----------
   Diadopsi dari progress bar di kartu "Progress Tahapan" pada hero
   landing page: warna isian gradasi biru ke hijau/cyan (senada dengan
   gradasi sidebar & panel login), ditambah efek kilau (shimmer) yang
   bergerak pelan supaya terasa "hidup" seperti di landing page. */
.progress-track{width:100%;height:8px;border-radius:var(--radius-pill);background:#E2E8F0;overflow:hidden;}
.progress-fill{
  height:100%;border-radius:var(--radius-pill);position:relative;overflow:hidden;
  background:var(--brand-gradient);
  transition:width .3s ease;
}
.progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:scipreProgressShimmer 2.2s infinite;
}
@keyframes scipreProgressShimmer{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
@media (prefers-reduced-motion:reduce){.progress-fill::after{animation:none;}}

/* ---------- Stepper (persistent TEFA progress) ---------- */
.stepper{display:flex;align-items:flex-start;overflow-x:auto;padding:8px 0 16px;gap:0;}
.step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:110px;position:relative;text-align:center;}
.step:not(:last-child)::after{
  content:'';position:absolute;top:16px;left:56%;width:88%;height:2px;background:var(--c-outline);z-index:0;
}
.step.done:not(:last-child)::after{background:var(--c-primary);}
.step .node{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;z-index:1;background:#fff;border:2px solid var(--c-outline);color:var(--c-text-muted);
}
.step.done .node{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-accent);}
.step.active .node{border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(42,221,205,.3);color:var(--c-primary);}
.step .step-label{font-size:12px;margin-top:8px;color:var(--c-text-muted);max-width:100px;}
.step.active .step-label,.step.done .step-label{color:var(--c-text-main);font-weight:600;}

/* ---------- Table ---------- */
table.tefa-table{width:100%;border-collapse:collapse;font-size:14px;}
.tefa-table th{text-align:left;font-family:var(--font-label);text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--c-text-muted);padding:10px 12px;border-bottom:2px solid #E2E8F0;}
.tefa-table td{padding:12px;border-bottom:1px solid #E2E8F0;}
.tefa-table tr:hover td{background:var(--c-surface-container-low);}
/* Kolom Kompetensi di tabel Nilai (Guru) dulu suka kepotong karena kolomnya
   ikut menciut kalau label kategori custom Admin lebih panjang dari
   "Kompeten"/"Belum Kompeten" — diberi lebar minimum supaya pill-nya selalu
   utuh (tabel pembungkusnya sendiri sudah bisa discroll horizontal lewat
   .table-responsive kalau memang tidak muat). */
.tefa-table .col-kompetensi{min-width:150px;}

/* Pembungkus tabel — dipakai di semua halaman yang punya tabel (Monitoring
   Kelompok, Pembagian Manual, Nilai, Data Master, dst.) supaya tabel bisa
   discroll horizontal alih-alih memaksa seluruh halaman melebar ke kanan
   di layar sempit/mobile. Tabelnya sendiri tidak diciutkan/dipotong —
   kontennya tetap penuh, cuma jadi bisa digeser di dalam kotak ini. */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px;}
.table-responsive table{margin-bottom:0;}

/* ---------- Skor / Penilaian Akhir table ---------- */
table.tefa-score-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;}
.tefa-score-table td{padding:10px 12px;border-bottom:1px solid #E2E8F0;vertical-align:middle;}
.tefa-score-table tr.row-stage:nth-child(odd) td{background:var(--c-surface-container-low);}
.tefa-score-table td.col-skor{text-align:right;font-family:var(--font-label);font-weight:600;width:110px;}
/* Baris "Skor Akhir" sengaja dibuat sederhana — cukup garis pemisah tebal
   di atasnya (warnanya beda tipis sesuai kompeten/tidak) tanpa latar
   warna penuh yang berlebihan. Status "Kompeten"/"Belum Kompeten" yang
   justru dipertegas lewat pil berwarna (lihat scipre_tkr_render_final_recap
   di inc/helpers.php), karena itu informasi yang paling penting dibaca. */
.tefa-score-table tr.row-final td{border-bottom:none;border-top:2px solid var(--c-outline-variant,#dde1e6);padding-top:14px;padding-bottom:14px;font-weight:600;color:var(--c-text-main);}
.tefa-score-table tr.row-final td.col-skor{
  font-size:20px;width:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.tefa-score-table tr.row-final td.col-skor .pill{font-size:12px;}
.tefa-score-table tr.row-final-ok td{border-top-color:var(--c-accent);}
.tefa-score-table tr.row-final-warn td{border-top-color:var(--c-danger);}
.tefa-score-feedback{margin-top:12px;padding:12px 14px;background:#fff;border:1px dashed var(--c-outline-variant,#ddd);border-radius:var(--radius-control);font-size:14px;color:var(--c-text-muted);}
.tefa-score-feedback strong{color:var(--c-text-main);}

/* Daftar Anggota Kelompok (scipre_tkr_render_anggota_list()) — nama tebal,
   peran dipisah kata "sebagai" bukan tanda "—", tiap anggota di baris
   sendiri dengan jarak antar-baris yang jelas (bukan cuma <br> rapat). */
.tefa-anggota-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.tefa-anggota-list li{font-size:14px;color:var(--c-text-main);}
.tefa-anggota-role{font-weight:600;color:var(--c-secondary);}

/* Pembatas & jarak setelah daftar Anggota Kelompok sebelum timeline/stepper
   tahap TEFA di bawahnya (route-kegiatan.php & route-kelompok.php) —
   sebelumnya keduanya nempel tanpa jarak/pembatas jelas, jadi terkesan
   satu blok padahal dua bagian yang berbeda. */
.tefa-anggota-wrap{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--c-outline-variant,#e2e8f0);}

/* Catatan Guru per tahap (meta _tefa_stage_notes, diisi lewat form
   Penilaian per Tahap di route-kegiatan.php) — ditampilkan di rekap
   detail kegiatan siswa yang sudah dinilai, supaya siswa tahu masukan
   Guru untuk perbaikan/pembelajaran di tiap tahap, bukan cuma nilai akhir
   keseluruhan. Dibedakan gaya dari .tefa-answer-block biasa (border putus
   -putus warna aksen) supaya jelas ini "suara Guru", bukan jawaban siswa
   sendiri. */
.tefa-guru-note{background:#fff;border:1px dashed var(--c-secondary,#0f766e);margin-top:10px;}
.tefa-guru-note .tefa-answer-label{color:var(--c-secondary);border-bottom-color:var(--c-outline-variant,#e2e8f0);}

/* Form "Edit Nilai & Komentar" (GURU VIEW, route-kegiatan.php) — kelompok
   yang sudah dinilai bisa dikoreksi skor/catatan/komentarnya kalau ada
   kesalahan, tanpa perlu Reset Nilai penuh (yang membuka ulang tahap
   terakhir). Dibungkus <details> (tanpa JS tambahan) supaya default-nya
   TERTUTUP — mencegah tiap kartu kelompok yang sudah dinilai jadi
   sepanjang form penilaian awal padahal biasanya jarang perlu diedit. */
.tefa-edit-nilai{margin-top:16px;border:1px solid var(--c-outline-variant,#dde1e6);border-radius:var(--radius-control);padding:4px 16px;background:var(--c-surface-container-low);}
.tefa-edit-nilai summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:14px;color:var(--c-secondary);list-style:none;display:flex;align-items:center;gap:8px;}
.tefa-edit-nilai summary::-webkit-details-marker{display:none;}
.tefa-edit-nilai summary::after{content:'\25BE';margin-left:auto;font-size:12px;color:var(--c-text-muted);transition:transform .15s ease;}
.tefa-edit-nilai[open] summary::after{transform:rotate(180deg);}
.tefa-edit-nilai form{padding-bottom:16px;}

/* ---------- Auth ---------- */
/* Credit pendanaan di panel kiri halaman Login — versi sama dengan
   .sidebar-credit di dashboard (logo kecil berdampingan + teks ringkas),
   tapi kelas terpisah karena .auth-side memakai flex+justify-content:center
   (bukan pinned ke bawah lewat margin-top:auto seperti sidebar). */
.auth-credit{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;line-height:1.6;color:rgba(255,255,255,.65);cursor:default;}
.auth-credit-logos{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.auth-credit-logos img{height:30px;width:auto;max-width:30px;object-fit:contain;flex-shrink:0;}
.auth-wrap{min-height:100vh;display:flex;}
.auth-side{flex:1;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:48px;position:relative;overflow:hidden;}
.auth-side .tagline{margin-top:16px;color:#b6c6ef;font-size:15px;max-width:340px;}
.auth-side-logo{height:76px;width:auto;max-width:300px;object-fit:contain;margin-bottom:8px;}
.auth-form{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-form .box{width:100%;max-width:400px;}
/* Tombol kembali ke landing page, ditaruh paling atas kotak form. */
.auth-back-home{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--c-text-muted);margin-bottom:20px;text-decoration:none;}
.auth-back-home:hover{color:var(--c-secondary);text-decoration:underline;}

/* Mobile (<800px): panel kiri (.auth-side) TIDAK disembunyikan total lagi
   (dulu display:none) supaya judul/branding tetap muncul sesuai permintaan
   — tapi dibuat jadi header ringkas horizontal di atas form (bukan panel
   penuh setengah layar), tagline/quote/credit disembunyikan biar tetap
   ringkas & tidak makan tempat di layar kecil. */
@media (max-width:800px){
	.auth-wrap{flex-direction:column;}
	.auth-side{flex:0 0 auto;padding:28px 24px 20px;justify-content:center;align-items:center;text-align:center;}
	.auth-side-logo{height:48px;margin-bottom:4px;}
	.auth-side .tagline,
	.auth-side .auth-credit{display:none;}
}

.notice{padding:12px 16px;border-radius:var(--radius-control);margin-bottom:16px;font-size:14px;}
.notice-error{background:#FEE2E2;color:#B91C1C;}
.notice-success{background:#D1FAE5;color:#047857;}
.notice-warning{background:#FEF3C7;color:#92400E;}

/* Notifikasi hasil aksi (simpan/hapus/reset dll) melayang di pojok
   kanan-atas layar, tampil lalu hilang sendiri — supaya guru/siswa tidak
   perlu scroll balik ke atas untuk tahu aksinya berhasil. Lihat
   scipre_tkr_render_notice() di inc/helpers.php dan auto-dismiss di
   assets/js/app.js. Beda dengan banner persisten (mis. KPI "menunggu
   penilaian" di Dashboard Guru) yang sengaja polos ".notice" saja supaya
   tidak ikut ter-auto-hide. */
.toast-fixed{position:fixed;top:20px;right:20px;z-index:10050;display:flex;flex-direction:column;gap:10px;max-width:360px;width:calc(100% - 40px);}
.toast-fixed .notice{margin:0;box-shadow:0 10px 30px rgba(15,23,42,.18);animation:scipreToastIn .25s ease;}
.toast-fixed .notice.is-leaving{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease;}
@keyframes scipreToastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:600px){.toast-fixed{left:16px;right:16px;top:16px;max-width:none;width:auto;}}

/* Modal umum (pengganti confirm()/alert() bawaan browser) — dipakai untuk
   semua konfirmasi (hapus, reset nilai, undi/bagi kelompok, keluar/logout).
   Dibangun & dikontrol lewat ScipreModal di assets/js/app.js. */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10100;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.modal-overlay.is-open{opacity:1;pointer-events:auto;}
.modal-box{background:#fff;border-radius:var(--radius-control,14px);max-width:420px;width:100%;padding:24px;box-shadow:0 24px 64px rgba(15,23,42,.3);transform:translateY(10px) scale(.98);transition:transform .18s ease;}
.modal-overlay.is-open .modal-box{transform:translateY(0) scale(1);}
.modal-box .modal-icon{width:44px;height:44px;border-radius:50%;background:#FEF3C7;color:#92400E;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}
.modal-box.modal-danger .modal-icon{background:#FEE2E2;color:#B91C1C;}
.modal-box h3{margin:0 0 8px;font-size:17px;color:#0f172a;}
.modal-box p{margin:0 0 22px;color:#475569;font-size:14px;line-height:1.55;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}

/* Modal untuk menampilkan file PDF (dipakai Job Sheet Kegiatan TEFA, lihat
   tombol data-pdf-modal di route-kegiatan.php/route-kelompok.php) —
   dibangun & dikontrol lewat ScipreFileModal di assets/js/app.js, memakai
   .modal-overlay yang sama dengan modal konfirmasi di atas supaya perilaku
   buka/tutup/klik-di-luar/Escape konsisten, tapi kotaknya sendiri jauh
   lebih lebar+tinggi (perlu muat halaman PDF) makanya class terpisah
   .file-modal-box, bukan .modal-box. */
.file-modal-box{
  background:#fff;border-radius:var(--radius-control,14px);
  max-width:900px;width:100%;height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 64px rgba(15,23,42,.3);
  transform:translateY(10px) scale(.98);transition:transform .18s ease;
}
.modal-overlay.is-open .file-modal-box{transform:translateY(0) scale(1);}
.file-modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--c-outline-variant,#e2e8f0);flex-shrink:0;
}
.file-modal-header h3{margin:0;font-size:16px;color:#0f172a;display:flex;align-items:center;gap:8px;}
.file-modal-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.file-modal-close{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:none;border-radius:50%;background:var(--c-surface-container-low,#eef2f7);
  color:#475569;cursor:pointer;flex-shrink:0;
}
.file-modal-close:hover{background:#e2e8f0;}
.file-modal-frame{flex-grow:1;width:100%;border:none;background:#525659;}

/* Form penilaian per tahap (Kegiatan TEFA, sisi Guru) — skor & catatan di
   satu baris, tombol Simpan/Perbarui Nilai selalu di barisnya sendiri di
   kanan bawah supaya rapi & sejajar konsisten di semua lebar layar (tidak
   lagi bergantung pada align-items:flex-end yang gampang miring kalau
   label catatan sampai turun baris). */
.stage-score-form{margin-top:10px;}
.stage-score-fields{display:flex;gap:12px;flex-wrap:wrap;}
.stage-score-field{display:flex;flex-direction:column;min-width:0;}
.stage-score-field label{font-size:12px;color:#64748b;margin-bottom:4px;}
.stage-score-field-skor{width:120px;}
.stage-score-field-catatan{flex:1 1 220px;min-width:0;}
.stage-score-actions{display:flex;justify-content:flex-end;margin-top:10px;}
/* Di layar sempit, 220px minimum utk field Catatan bisa lebih lebar dari
   kartu yang membungkusnya (apalagi kartu ini bersarang di dalam kartu
   lain) — itu salah satu sumber halaman "melebar ke kanan" di mobile.
   Di bawah 480px, keduanya dibuat selebar penuh & ditumpuk. */
@media (max-width:480px){
  .stage-score-field-skor,.stage-score-field-catatan{flex-basis:100%;width:100%;}
}

/* Kotak jawaban/isian siswa per tahap (scipre_tkr_render_progress_recap
   di inc/helpers.php) — dipakai baik di sisi Guru (Kegiatan TEFA) maupun
   Siswa (Kelompok). Diberi border + latar putih yang kontras dari card
   pembungkusnya (biasanya abu-abu var(--c-surface-container-low)), dengan
   label field bergaris bawah aksen warna, supaya label & isi jawaban
   jelas terpisah dan lebih mudah dipindai/dibaca guru saat menilai. */
.tefa-answer-list{display:grid;gap:10px;margin:10px 0;}
.tefa-answer-block{background:var(--c-surface);border:1px solid var(--c-outline-variant,#dde1e6);border-radius:var(--radius-control);padding:12px 14px;}
.tefa-answer-label{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-secondary);padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--c-outline-variant,#e2e8f0);display:flex;align-items:center;gap:6px;}
.tefa-answer-text{color:var(--c-text-main);font-size:14px;line-height:1.6;white-space:pre-line;}
/* Daftar bernomor untuk field textarea "satu per baris" (Langkah Kerja,
   Daftar Pekerjaan/Jobsheet, SOP yang Diikuti, Alat & Bahan — lihat
   scipre_tkr_render_line_list() di inc/helpers.php). Sebelumnya baris-baris
   ini cuma dipisah <br> tanpa nomor/jarak, jadi susah dipindai terutama
   kalau isinya panjang. Margin kiri dibuat secukupnya (bukan indent
   default browser yang cenderung terlalu jauh) supaya angkanya tetap
   dekat dengan teks label di atasnya. */
.tefa-answer-ol{margin:0;padding-left:20px;color:var(--c-text-main);font-size:14px;line-height:1.6;}
.tefa-answer-ol li{margin-bottom:4px;padding-left:2px;}
.tefa-answer-ol li:last-child{margin-bottom:0;}
.tefa-answer-files{background:var(--c-surface-container-low);}
.tefa-answer-files a{display:inline-flex;align-items:center;gap:6px;margin:2px 12px 2px 0;font-weight:600;}

/* Kartu Kegiatan TEFA (Dashboard & daftar /kegiatan-tefa/) — dipadatkan
   jadi persis 2 baris: baris 1 = judul+meta & tombol aksi (.card-header
   yang sudah ada), baris 2 = progress bar + info ringkas (persentase,
   nama kelompok, badge status) sejajar dalam satu baris memakai
   .kegiatan-progress-row, menggantikan progress bar + paragraf terpisah
   yang sebelumnya membuat kartu jadi 3-4 baris. */
.kegiatan-progress-row{display:flex;align-items:center;gap:12px;}
.kegiatan-progress-row .progress-track{flex:1;margin:0;}
.kegiatan-progress-meta{white-space:nowrap;font-size:13px;color:var(--c-text-muted);display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Baris kedua kartu Kegiatan (siswa) begitu Guru sudah menilai — dipakai
   sebagai ganti .kegiatan-progress-row (persentase progress sudah tidak
   relevan lagi kalau sudah dinilai), menampilkan skor + status kompetensi
   sekaligus tombol akses langsung ke detail nilai & komentar Guru di
   /nilai/ (lihat route-dashboard.php & anchor id="kegiatan-…" di
   route-nilai.php). */
.kegiatan-nilai-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.kegiatan-nilai-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* Kartu Kegiatan yang dituju lewat anchor (mis. /nilai/#kegiatan-123 dari
   tombol "Lihat Nilai & Komentar" di Dashboard) jangan sampai tersembunyi
   di bawah topbar sticky saat browser scroll otomatis ke anchor itu. */
[id^="kegiatan-"],[id^="kelompok-"],#nilai-akhir{scroll-margin-top:calc(var(--topbar-h,60px) + 16px);}

/* Daftar kartu Kegiatan TEFA (Dashboard & /kegiatan-tefa/) ditata 2 kolom
   supaya di layar lebar tidak jadi satu kolom memanjang ke bawah — tiap
   kartu sudah dipadatkan jadi 2 baris (lihat .kegiatan-progress-row di
   atas) sehingga tetap muat berdampingan tanpa terasa sempit. Turun jadi
   1 kolom otomatis di layar sempit/tablet ke bawah. */
.tefa-kegiatan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;}
.tefa-kegiatan-grid .card{margin-bottom:0;}
@media (max-width:900px){.tefa-kegiatan-grid{grid-template-columns:1fr;}}

.badge-role{font-family:var(--font-label);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:var(--c-primary-container);color:#8293b8;padding:2px 8px;border-radius:var(--radius-pill);}

/* Tombol "Kembali ke Atas" — melayang di pojok kanan-bawah, dibuat/
   ditampilkan lewat JS (lihat assets/js/app.js) setelah halaman discroll
   turun cukup jauh, supaya di halaman panjang (mis. daftar kelompok yang
   dinilai satu-satu) pengguna tidak perlu scroll manual balik ke atas. */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:9000;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--c-primary);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(3,22,53,.35);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .15s ease;
}
.back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{background:var(--c-primary-container);}
/* Di Tablet/Mobile, menu navigasi jadi bar bawah yang fixed (lihat
   .app-sidebar di breakpoint <=1024px) — tombol ini digeser naik supaya
   tidak tertutup/tumpang-tindih dengan bar menu tsb. */
@media (max-width:1024px){.back-to-top{bottom:calc(var(--bottomnav-h,68px) + 16px);}}
@media (max-width:640px){.back-to-top{right:16px;bottom:calc(var(--bottomnav-h,60px) + 12px);width:44px;height:44px;font-size:18px;}}