/* ============================================================
   SIAKAD STT Arastamar Wamena
   Palet indigo mengikuti acuan demo AdminLTE.
   ============================================================ */
:root{
  --indigo:#1a237e;        /* biru indigo tua, warna utama */
  --indigo-2:#283593;      /* indigo sedang */
  --indigo-3:#5c6bc0;      /* indigo terang, aksen */
  --indigo-4:#e8eaf6;      /* indigo sangat muda */
  --indigo-5:#c5cae9;      /* indigo muda */
  --emas:#C9A227;
  --bg:#f4f6f9;            /* latar area kerja */
  --putih:#ffffff;
  --ink:#212529;
  --abu:#6c757d;
  --abu-muda:#adb5bd;
  --garis:#dee2e6;
  --hijau:#28a745;
  --merah:#dc3545;
  --kuning:#ffc107;
  --biru:#17a2b8;
  --radius:6px;
  --sidebar-w:250px;
  --font:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--indigo-3);text-decoration:none}
a:hover{color:var(--indigo)}

/* ---------- Tata letak ---------- */
.wrapper{display:flex;min-height:100vh}

/* ---------- Bilah samping ---------- */
.sidebar{width:var(--sidebar-w);background:var(--indigo);color:#fff;position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;z-index:1000;transition:transform .25s ease}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}

.brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand img{width:36px;height:36px;border-radius:50%;background:#fff;object-fit:contain;padding:2px}
.brand-text{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.2}
.brand-text small{display:block;font-size:.68rem;font-weight:400;color:var(--indigo-5);letter-spacing:.02em}

.user-panel{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.user-panel .ava{width:38px;height:38px;border-radius:50%;background:var(--indigo-3);display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:.85rem}
.user-panel img.ava{object-fit:cover}
.user-panel .nm{font-size:.86rem;font-weight:600;color:#fff;line-height:1.25}
.user-panel .rl{font-size:.72rem;color:var(--indigo-5);text-transform:capitalize}

.nav-header{padding:12px 16px 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--indigo-5);font-weight:700}
.nav-menu{list-style:none;padding:0 8px 30px}
.nav-menu li{margin-bottom:1px}
.nav-menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius);
  color:#c9cde8;font-size:.88rem;transition:background .15s ease,color .15s ease}
.nav-menu a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-menu a.aktif{background:var(--indigo-3);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.nav-menu a i{width:18px;text-align:center;font-size:.95rem;flex-shrink:0}
.nav-menu a .badge{margin-left:auto;background:rgba(255,255,255,.18);padding:1px 7px;border-radius:10px;font-size:.7rem}

/* ---------- Area utama ---------- */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}

.topbar{background:var(--putih);border-bottom:1px solid var(--garis);padding:10px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;z-index:900}
.topbar .kiri{display:flex;align-items:center;gap:14px}
.btn-menu{display:none;background:none;border:0;font-size:1.15rem;color:var(--indigo);cursor:pointer;padding:4px 8px}
.ta-badge{background:var(--indigo-4);color:var(--indigo);padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:600}
.topbar .kanan{display:flex;align-items:center;gap:12px}
.topbar .kanan a{color:var(--abu);font-size:.85rem;display:flex;align-items:center;gap:6px}
.topbar .kanan a:hover{color:var(--indigo)}

.konten{padding:20px;flex:1}
.judul-halaman{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.judul-halaman h1{font-size:1.5rem;font-weight:600;color:var(--ink)}
.judul-halaman .sub{color:var(--abu);font-size:.85rem;margin-top:2px}

.footer-app{background:var(--putih);border-top:1px solid var(--garis);padding:12px 20px;font-size:.8rem;color:var(--abu);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Kartu ---------- */
.card{background:var(--putih);border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:18px;overflow:hidden}
.card-header{padding:12px 16px;border-bottom:1px solid var(--garis);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:10px}
.card-header h2{font-size:1rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.card-header h2 i{color:var(--indigo-3)}
.card-body{padding:16px}

/* ---------- Kotak statistik ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-box{background:var(--putih);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;overflow:hidden;transition:transform .15s ease}
.stat-box:hover{transform:translateY(-2px)}
.stat-ikon{width:52px;height:52px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;flex-shrink:0}
.si-indigo{background:var(--indigo)}
.si-biru{background:var(--biru)}
.si-hijau{background:var(--hijau)}
.si-kuning{background:var(--kuning)}
.si-merah{background:var(--merah)}
.si-ungu{background:var(--indigo-3)}
.stat-teks b{display:block;font-size:1.7rem;font-weight:700;line-height:1.1;color:var(--ink)}
.stat-teks span{font-size:.82rem;color:var(--abu)}

/* ---------- Tabel ---------- */
.tabel-bungkus{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.87rem}
table.data th{background:var(--indigo-4);color:var(--indigo);font-weight:600;text-align:left;padding:10px 12px;
  border-bottom:2px solid var(--indigo-5);white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid var(--garis);vertical-align:middle}
table.data tbody tr:hover{background:#f8f9fb}
table.data tr:last-child td{border-bottom:0}
.td-foto{width:44px}
.foto-bulat{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;display:block}
.foto-ini{width:38px;height:38px;border-radius:50%;background:var(--indigo-3);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:.78rem;font-weight:700}

/* ---------- Lencana ---------- */
.lencana{display:inline-block;padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:600;white-space:nowrap}
.l-hijau{background:#d4edda;color:#155724}
.l-merah{background:#f8d7da;color:#721c24}
.l-kuning{background:#fff3cd;color:#856404}
.l-biru{background:var(--indigo-4);color:var(--indigo)}
.l-abu{background:#e9ecef;color:#495057}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius);font-size:.86rem;
  font-weight:600;border:0;cursor:pointer;font-family:inherit;transition:filter .15s ease;text-decoration:none;line-height:1.4}
.btn:hover{filter:brightness(1.1)}
.btn-utama{background:var(--indigo);color:#fff}
.btn-utama:hover{color:#fff}
.btn-biru{background:var(--indigo-3);color:#fff}
.btn-biru:hover{color:#fff}
.btn-hijau{background:var(--hijau);color:#fff}
.btn-hijau:hover{color:#fff}
.btn-merah{background:var(--merah);color:#fff}
.btn-merah:hover{color:#fff}
.btn-garis{background:transparent;border:1.5px solid var(--indigo);color:var(--indigo)}
.btn-garis:hover{background:var(--indigo);color:#fff}
.btn-sm{padding:5px 10px;font-size:.76rem;border-radius:4px}

/* ---------- Formulir ---------- */
.form-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:5px}
label .wajib{color:var(--merah)}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],
input[type=url],input[type=tel],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--garis);border-radius:var(--radius);font-family:inherit;
  font-size:.87rem;background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--indigo-3);box-shadow:0 0 0 3px rgba(92,107,192,.15)}
.grup{margin-bottom:14px}
.bantuan{font-size:.76rem;color:var(--abu);margin-top:4px}

/* ---------- Peringatan ---------- */
.alert{padding:11px 15px;border-radius:var(--radius);margin-bottom:16px;font-size:.87rem;display:flex;align-items:center;gap:9px}
.a-hijau{background:#d4edda;color:#155724;border-left:4px solid var(--hijau)}
.a-merah{background:#f8d7da;color:#721c24;border-left:4px solid var(--merah)}
.a-kuning{background:#fff3cd;color:#856404;border-left:4px solid var(--kuning)}
.a-biru{background:var(--indigo-4);color:var(--indigo);border-left:4px solid var(--indigo-3)}

/* ---------- Pencarian dan saringan ---------- */
.bar-alat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.bar-alat input[type=text],.bar-alat select{width:auto;min-width:170px}
.bar-alat .tumbuh{flex:1;min-width:200px}

/* ---------- Halaman login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-2) 55%,var(--indigo-3) 100%)}
body.ada-slide .login-wrap{background:transparent}
.login-box{background:var(--putih);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);width:100%;max-width:400px;overflow:hidden}
@media (min-width:769px){
  .login-wrap{justify-content:flex-end;padding-right:10%}
}
.login-atas{position:relative;background:url('../img/honai-papua.jpg') center/cover no-repeat;padding:26px 24px;text-align:center;color:#fff}
.login-atas::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(26,35,126,.82) 0%,rgba(40,53,147,.78) 100%)}
.login-atas>*{position:relative;z-index:1}
.login-atas img{width:72px;height:72px;border-radius:50%;background:#fff;padding:4px;object-fit:contain;margin-bottom:10px}
.login-atas h1{font-size:1.3rem;font-weight:700}
.login-atas p{font-size:.8rem;color:var(--indigo-5);margin-top:3px}
.login-isi{padding:24px}
.login-isi h2{font-size:1rem;text-align:center;margin-bottom:16px;color:var(--abu);font-weight:500}
.login-kaki{text-align:center;padding:14px;background:#fafbfc;border-top:1px solid var(--garis);font-size:.78rem;color:var(--abu)}

/* ---------- Kosong ---------- */
.kosong{text-align:center;padding:36px 20px;color:var(--abu)}
.kosong i{font-size:2.6rem;color:var(--indigo-5);margin-bottom:12px;display:block}
.kosong p{font-size:.9rem}

/* ---------- Halaman ---------- */
.paginasi{display:flex;gap:5px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.paginasi a,.paginasi span{padding:6px 12px;border-radius:4px;font-size:.84rem;border:1px solid var(--garis);background:#fff}
.paginasi .kini{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* ---------- Responsif ---------- */
@media (max-width:992px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.buka{transform:translateX(0)}
  .main{margin-left:0}
  .btn-menu{display:block}
  .tirai{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
  .tirai.tampil{display:block}
}
@media (max-width:576px){
  .konten{padding:14px}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-box{padding:12px;gap:10px}
  .stat-ikon{width:42px;height:42px;font-size:1.1rem}
  .stat-teks b{font-size:1.3rem}
}

/* ============================================================
   AKSEN BATIK TORAJA
   Dipakai sebagai pita hias di atas kartu modul Kelas Digital
   (Absensi & Tugas Online), terinspirasi motif geometris ukiran
   Toraja: pa'barre allo (matahari/belah ketupat), pa'tedong,
   dan susunan titik-titik. Dibuat murni dari gradient CSS, jadi
   ringan dan tidak menambah berkas gambar baru.
   ============================================================ */
:root{
  --toraja-hitam:#1c1a17;
  --toraja-krem:#f2ead9;
  --toraja-merah:#a8271f;
  --toraja-jingga:#e07b1a;
}
.batik-bingkai{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.batik-pita{
  height:15px;
  background-color:var(--toraja-krem);
  background-image:
    repeating-linear-gradient(45deg, var(--toraja-hitam) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, var(--toraja-hitam) 0 5px, transparent 5px 10px);
  background-position:0 0, 0 0;
}
.batik-titik{
  height:11px;
  background-color:var(--toraja-hitam);
  background-image:radial-gradient(circle, var(--toraja-krem) 2.1px, transparent 2.4px);
  background-size:15px 11px;
  background-position:center;
}
.batik-pita-utama{
  height:20px;
  background-image:
    repeating-linear-gradient(135deg, var(--toraja-jingga) 0 11px, var(--toraja-merah) 11px 22px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 11px, transparent 11px 22px);
}

/* ---------- Saklar aktif/nonaktif (dipakai di Mode Kelas Digital) ---------- */
.saklar-baris{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--garis)}
.saklar-baris:last-child{border-bottom:0}
.saklar-teks strong{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:.95rem}
.saklar-teks strong i{color:var(--toraja-jingga)}
.saklar-teks p{font-size:.8rem;color:var(--abu);margin-top:3px;max-width:520px}
.saklar{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.saklar input{opacity:0;width:0;height:0}
.saklar-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:.2s}
.saklar-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.saklar input:checked + .saklar-slider{background:var(--hijau)}
.saklar input:checked + .saklar-slider::before{transform:translateX(20px)}

/* ---------- Pilihan status kehadiran (dipakai di absensi.php) ---------- */
.grup-status{display:flex;flex-wrap:wrap;gap:4px}
.opsi-status{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1.5px solid var(--garis);
  border-radius:20px;font-size:.78rem;cursor:pointer;transition:.15s}
.opsi-status input{margin:0}
.opsi-status:has(input:checked){background:var(--indigo-4);border-color:var(--indigo-3);color:var(--indigo);font-weight:600}

/* ============================================================
   DASBOR: kotak berwarna mengikuti pola demo
   ============================================================ */
.kotak-utama{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.ku{position:relative;border-radius:var(--radius);color:#fff;overflow:hidden;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.13);transition:transform .15s ease,box-shadow .15s ease;display:block}
.ku:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.2);color:#fff}
.ku-isi{padding:18px 18px 8px;position:relative;z-index:2}
.ku-isi b{display:block;font-size:2.3rem;font-weight:700;line-height:1}
.ku-isi span{font-size:.92rem;opacity:.95}
.ku-bg{position:absolute;right:12px;top:14px;font-size:4.2rem;opacity:.22;z-index:1}
.ku-kaki{background:rgba(0,0,0,.14);padding:7px 18px;font-size:.8rem;font-weight:600;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:6px}
.ku-biru{background:#17a2b8}
.ku-hijau{background:#28a745}
.ku-kuning{background:#ffc107;color:#5a4500}
.ku-kuning .ku-kaki{color:#5a4500}
.ku-merah{background:#dc3545}

.judul-bagian{font-size:1rem;font-weight:600;color:var(--ink);margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.judul-bagian i{color:var(--indigo-3)}

.kotak-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.ks{position:relative;border-radius:var(--radius);padding:16px 16px 14px;color:#fff;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.12)}
.ks b{display:block;font-size:1.9rem;font-weight:700;line-height:1;position:relative;z-index:2}
.ks span{font-size:.84rem;opacity:.95;position:relative;z-index:2}
.ks i{position:absolute;right:10px;bottom:6px;font-size:3rem;opacity:.2;z-index:1}
.ks-hijau{background:#28a745}
.ks-biru{background:#0d8ce8}
.ks-kuning{background:#ffc107;color:#5a4500}
.ks-merah{background:#dc3545}
.ks-gelap{background:#343a40}
.ks-pink{background:#e83e8c}
.ks-abu{background:#6c757d}

.kotak-kecil{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kk{background:var(--putih);border-radius:var(--radius);padding:12px;display:flex;align-items:center;gap:11px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);text-decoration:none;transition:transform .15s ease}
.kk:hover{transform:translateY(-2px)}
.kk-ik{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.05rem;flex-shrink:0}
.ki-biru{background:#17a2b8}.ki-kuning{background:#ffc107}.ki-hijau{background:#28a745}
.ki-indigo{background:var(--indigo-3)}.ki-tosca{background:#20c9c9}.ki-merah{background:#dc3545}
.kk small{display:block;font-size:.76rem;color:var(--abu)}
.kk b{font-size:1.15rem;color:var(--ink)}

.dua-sisi{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;align-items:start}
@media (max-width:1050px){.dua-sisi{grid-template-columns:1fr}}

.panel-ta{background:var(--putih);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:13px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:18px}
.pt-ik{width:46px;height:46px;border-radius:var(--radius);background:var(--indigo-3);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.panel-ta small{display:block;font-size:.78rem;color:var(--abu)}
.panel-ta b{font-size:1.05rem;color:var(--ink)}

.item-peng{padding:11px 16px;border-bottom:1px solid var(--garis);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.item-peng:last-child{border-bottom:0}
.item-peng a{font-size:.88rem;font-weight:600;flex:1;min-width:150px}
.item-peng small{width:100%;font-size:.74rem;color:var(--abu)}

/* ---------- Login berlatar slide ---------- */
.login-slide{position:fixed;inset:0;z-index:0;overflow:hidden}
.ls-item{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.1s ease;transform:scale(1.04)}
.ls-item.on{opacity:1}
.login-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(26,35,126,.52) 0%,rgba(40,53,147,.42) 55%,rgba(92,107,192,.38) 100%)}
/* Bayangan lembut di belakang kotak masuk agar tulisan tetap tajam di atas foto terang */
.login-wrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(13,19,64,.42) 0%, rgba(13,19,64,.12) 45%, transparent 70%)}
.login-wrap{position:relative;z-index:2}
.login-box{position:relative;z-index:3}
.ls-teks{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;z-index:3;
  font-size:.86rem;text-shadow:0 1px 4px rgba(0,0,0,.5);padding:0 20px}

/* Menu yang modulnya belum dibangun */
.nav-menu a.belum{color:#8f96c4;opacity:.75}
.nav-menu a.belum:hover{background:rgba(255,255,255,.06);color:#b8bede}
.badge-segera{margin-left:auto;background:rgba(255,255,255,.14);color:#c5cae9;padding:1px 7px;
  border-radius:9px;font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}

/* ============================================================
   TABEL DATA: bilah alat, pengurutan, paginasi
   ============================================================ */
.tabel-bilah{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--garis);background:#fbfcfe}
.tb-kiri{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tb-tampil{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--abu);margin:0}
.tb-tampil select{width:auto;padding:4px 8px;font-size:.83rem}
.tb-ekspor{display:flex;gap:4px;flex-wrap:wrap}
.btn-eks{background:#eef0f5;border:1px solid var(--garis);color:#495057;padding:5px 11px;border-radius:4px;
  font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  transition:background .15s ease,color .15s ease}
.btn-eks:hover{background:var(--indigo-3);color:#fff;border-color:var(--indigo-3)}
.tb-cari{display:flex;align-items:center;gap:7px;margin:0}
.tb-cari label{margin:0;font-size:.83rem;color:var(--abu);font-weight:400}
.tb-cari input{width:220px;padding:6px 11px;font-size:.84rem}
.tb-hapus{color:var(--abu);font-size:.9rem;padding:2px 5px}
.tb-hapus:hover{color:var(--merah)}

.th-tautan{color:var(--indigo);display:flex;align-items:center;gap:6px;justify-content:space-between;white-space:nowrap}
.th-tautan i{font-size:.72rem;opacity:.45}
.th-aktif .th-tautan i{opacity:1}
table.data th.th-aktif{background:var(--indigo-5)}

.tabel-kaki{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--garis);background:#fbfcfe}
.tk-info{font-size:.82rem;color:var(--abu)}
.paginasi{margin:0}
.paginasi .mati{color:var(--abu-muda);background:#f8f9fa}

/* Sel bertumpuk seperti NIM/NIK dan NIDN/NUPTK */
.sel-tumpuk{line-height:1.35}
.sel-tumpuk small{display:block;color:var(--abu);font-size:.74rem}
.sel-tumpuk .nilai{font-weight:600;color:var(--indigo);font-size:.84rem}
.sel-tumpuk .kosong{color:var(--abu-muda);font-style:italic;font-size:.76rem}

/* Tab prodi seperti di modul mata kuliah */
.tab-prodi{display:flex;gap:4px;flex-wrap:wrap;padding:12px 16px 0;border-bottom:1px solid var(--garis);background:#fbfcfe}
.tab-prodi a{padding:9px 16px;border-radius:6px 6px 0 0;font-size:.85rem;font-weight:600;color:var(--abu);
  background:#eef0f5;border:1px solid var(--garis);border-bottom:0;display:flex;align-items:center;gap:7px}
.tab-prodi a:hover{background:var(--indigo-4);color:var(--indigo)}
.tab-prodi a.aktif{background:#fff;color:var(--indigo);border-bottom:2px solid #fff;margin-bottom:-1px}

/* Formulir dalam kartu lebar */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.form-grid .lebar{grid-column:1 / -1}
.pemisah-form{grid-column:1/-1;border-top:1px solid var(--garis);margin:6px 0 2px;padding-top:12px;
  font-size:.83rem;font-weight:700;color:var(--indigo);text-transform:uppercase;letter-spacing:.04em}

/* Pratinjau foto pada formulir */
.foto-pratinjau{width:96px;height:120px;border-radius:6px;object-fit:cover;object-position:top center;
  border:1px solid var(--garis);background:#f1f3f7;display:block}
.foto-kotak{width:96px;height:120px;border-radius:6px;background:var(--indigo-4);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700}

@media (max-width:700px){
  .tabel-bilah{flex-direction:column;align-items:stretch}
  .tb-cari input{width:100%}
  .tb-cari{width:100%}
}

/* ---------- Kotak centang kelas (jadwal kuliah gabungan) ---------- */
.kotak-centang{border:1px solid var(--garis);border-radius:8px;max-height:220px;overflow-y:auto;padding:8px 4px;background:#fff}
.kc-judul{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--abu);
  padding:6px 10px 4px;margin-top:4px}
.kc-judul:first-child{margin-top:0}
.kc-opsi{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:.85rem;cursor:pointer;border-radius:5px}
.kc-opsi:hover{background:var(--indigo-4)}
.kc-opsi input{margin:0;width:15px;height:15px;flex-shrink:0}

/* ---------- Tombol Instal Aplikasi (PWA, khusus dosen) ---------- */
.btn-instal-app{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;
  border:1.5px solid var(--indigo);background:var(--indigo-4);color:var(--indigo);font-size:.82rem;
  font-weight:600;font-family:inherit;cursor:pointer}
.btn-instal-app:hover{background:var(--indigo);color:#fff}