:root { color-scheme: light; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f4f6fb; color: #222; }
.topbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; background: #1f6feb; color: #fff; position: sticky; top: 0; z-index: 10; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.brand { font-size: 17px; margin: 0 !important; }
.topbar nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { flex-shrink: 0; margin: 0; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.18); white-space: nowrap; }
.topbar nav a:active { background: rgba(255,255,255,.35); }
@media (min-width: 600px) {
  .topbar { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 16px; }
  .topbar nav a { margin-left: 4px; }
}
.wrap { max-width: 860px; margin: 0 auto; padding: 16px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input, select, textarea { padding: 10px; border: 1px solid #ccd; border-radius: 8px; font-size: 15px; }
input, select { min-height: 42px; }
textarea { width: 100%; resize: vertical; }
button, .btn { background: #1f6feb; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-block; }
button.ghost, .btn.ghost { background: #e8eefc; color: #1f6feb; }
button.danger { background: #e5484d; }
button.small { padding: 4px 8px; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { padding: 10px 8px; border-bottom: 1px solid #eee; text-align: left; }
th { background: #f0f4ff; }
.muted { color: #666; font-size: 14px; }
.msg { min-height: 20px; font-size: 14px; }
.msg.ok { color: #0a7d2c; } .msg.err { color: #c00; }
.pilihan { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { border-radius: 999px; padding: 6px 10px; font-size: 14px; cursor: pointer; border: 1px solid #ddd; user-select: none; }
.pill input { accent-color: #1f6feb; }
.pill.hadir { background: #e6f6ea; } .pill.izin { background: #fff6d6; } .pill.alpa { background: #ffe9e9; }
/* ── daftar absen ringkas: 1 kolom penuh, nama tampil utuh ── */
.member-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.member { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid #e3e6ee; border-radius: 8px; background: #fafbfe; min-width: 0; }
.m-nama { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.m-st { border: 0; border-radius: 999px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; white-space: nowrap; background: #eee; color: #333; }
.member.st-hadir { background: #eef8f0; border-color: #bfe6c8; }
.member.st-hadir .m-st { background: #1f9d44; color: #fff; }
.member.st-izin { background: #fffbe8; border-color: #f0df9a; }
.member.st-izin .m-st { background: #d9a400; color: #fff; }
.member.st-alpa .m-st { background: #e5e7ef; color: #555; }
.member.st-belum { background: #fff; border-style: dashed; }
.member.st-belum .m-st { background: #eef0f5; color: #777; border: 1px dashed #bbb; }
.badge.belum { background: #eef0f5; color: #666; }
.m-del { flex-shrink: 0; }
/* ── pilih banyak ── */
#daftarAbsen .pick-box { display: none; width: 20px; height: 20px; accent-color: #e5484d; flex-shrink: 0; }
#daftarAbsen.mode-pilih .pick-box { display: inline-block; }
.pickbar { background: #fff1f1; border: 1px solid #f3c1c1; border-radius: 8px; padding: 8px; }
.m-edit { flex-shrink: 0; padding: 5px 7px; font-size: 13px; }
/* ── pemisah L / P ── */
.jk-judul { margin: 12px 0 6px; font-size: 15px; }
.jk-tampil { font-size: 16px; cursor: pointer; flex-shrink: 0; user-select: none; }
.m-nama.bisa-sentuh { cursor: pointer; user-select: none; }
/* ── menu Kelola L/P ── */
.jkp { border: 1px solid #ddd; background: #f1f3f8; border-radius: 999px; padding: 6px 9px; font-size: 15px; cursor: pointer; flex-shrink: 0; opacity: .55; }
.jkp.on { opacity: 1; border-color: #1f6feb; background: #e8eefc; box-shadow: 0 0 0 1px #1f6feb; }
button:disabled { opacity: .45; cursor: not-allowed; }
small.muted { font-size: 12px; }
#hitung { font-weight: 600; }
/* ── tombol simpan di bawah daftar, menempel saat scroll ── */
.savebar { position: sticky; bottom: 0; background: #fff; border-top: 2px solid #1f6feb; padding: 10px 4px 4px; margin-top: 12px; }
.savebtn { width: 100%; padding: 14px; font-size: 17px; font-weight: 700; }
/* ── popup ubah nama ── */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; align-items: flex-start; justify-content: center; padding: 20vh 16px 16px; }
.modal { background: #fff; border-radius: 12px; padding: 18px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.modal h3 { margin-top: 0; }
.badge { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; display: inline-block; }
.badge.hadir { background: #c6efce; color: #0a5c22; }
.badge.izin { background: #ffeb9c; color: #7a5b00; }
.badge.alpa { background: #ffc7ce; color: #9c0006; }
/* ── ringkasan rekap: kartu 3 kolom, rapi di HP ── */
.rekap-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stat { border-radius: 12px; padding: 10px 6px; text-align: center; line-height: 1.3; }
.stat-angka { display: block; font-size: 24px; font-weight: 800; }
.stat-nama { display: block; font-weight: 700; font-size: 13px; margin-top: 2px; }
.stat-rinci { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
.stat.hadir { background: #e6f6ea; border: 1px solid #bfe6c8; color: #0a5c22; }
.stat.izin { background: #fff8dc; border: 1px solid #f0df9a; color: #7a5b00; }
.stat.alpa { background: #ffeef0; border: 1px solid #f5c2c7; color: #9c0006; }
.stat.belum { background: #eef0f5; border: 1px dashed #bbb; color: #666; grid-column: span 3; }
.stat.belum .stat-angka { font-size: 18px; }
.foot { text-align: center; color: #888; font-size: 13px; padding: 20px; }
/* ── filter atas rekap: rapi di HP ── */
.filter-card { padding: 14px; }
.filter-grid { display: grid; gap: 8px; }
.filter-grid select { width: 100%; }
.filter-row { display: flex; gap: 8px; }
.filter-row input { flex: 1; min-width: 0; }
.filter-row button { flex-shrink: 0; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lg { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.lg-h { background: #e6f6ea; color: #0a5c22; border: 1px solid #bfe6c8; }
.lg-i { background: #fff8dc; color: #7a5b00; border: 1px solid #f0df9a; }
.lg-a { background: #ffeef0; color: #9c0006; border: 1px solid #f5c2c7; }
.lg-x { background: #eef0f5; color: #666; border: 1px solid #ddd; }
.hint { margin: 8px 0 0; font-size: 13px; }
/* ── matriks rekap bulanan ── */
.matriks-wrap { overflow-x: auto; border: 1px solid #e3e6ee; border-radius: 8px; }
table.matriks { border-collapse: separate; border-spacing: 0; margin: 0; min-width: 100%; }
table.matriks th, table.matriks td { border-bottom: 1px solid #eee; border-right: 1px solid #f0f0f0; padding: 6px 4px; font-size: 12.5px; text-align: center; min-width: 26px; background: #fff; }
table.matriks thead th { background: #1f6feb; color: #fff; position: sticky; top: 0; z-index: 2; }
table.matriks .col-nama { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 130px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; }
table.matriks thead .col-nama { background: #1f6feb; z-index: 3; }
table.matriks .col-tot { font-weight: 700; min-width: 32px; font-size: 12px; border-left: 2px solid #1f6feb; }
table.matriks thead .col-tot { background: #0d47a1; color: #fff; z-index: 3; font-size: 12px; }
table.matriks tbody .col-h { background: #e6f6ea; color: #0a5c22; }
table.matriks tbody .col-i { background: #fff8dc; color: #7a5b00; }
table.matriks tbody .col-a { background: #ffeef0; color: #9c0006; }
table.matriks tbody .col-p { background: #e8eefc; color: #1f6feb; min-width: 44px; }
/* ── kunci kolom H/I/A/% di kanan agar selalu terlihat saat geser ── */
table.matriks th:nth-last-child(1), table.matriks td:nth-last-child(1) { position: sticky; right: 0; z-index: 2; }
table.matriks th:nth-last-child(2), table.matriks td:nth-last-child(2) { position: sticky; right: 44px; z-index: 2; }
table.matriks th:nth-last-child(3), table.matriks td:nth-last-child(3) { position: sticky; right: 76px; z-index: 2; }
table.matriks th:nth-last-child(4), table.matriks td:nth-last-child(4) { position: sticky; right: 108px; z-index: 2; }
table.matriks thead th:nth-last-child(1), table.matriks thead th:nth-last-child(2), table.matriks thead th:nth-last-child(3), table.matriks thead th:nth-last-child(4) { z-index: 4; }
.c-hadir { background: #c6efce !important; color: #0a5c22; font-weight: 700; }
.c-izin { background: #ffeb9c !important; color: #7a5b00; font-weight: 700; }
.c-alpa { background: #ffc7ce !important; color: #9c0006; font-weight: 700; }
.c-kosong { color: #ccc; }
@media (max-width: 600px) { .wrap { padding: 10px; } th, td { padding: 8px 4px; font-size: 14px; } .rekap-summary { gap: 6px; } .stat { padding: 8px 4px; } .stat-angka { font-size: 20px; } .stat-nama { font-size: 12px; } .stat-rinci { font-size: 11px; } }