:root {
    --bg: #eef7f1;
    --card: #ffffff;
    --text: #1f2a3d;
    --muted: #5f6b7a;
    --line: #d9eee2;
    --primary: #17914f;
    --primary-dark: #0f6b3d;
    --hijau-tua: #0d5434;
    --hijau-muda: #34c46b;
    --orange: #ff8a1f;
    --orange-dark: #f06d00;
    --danger: #e53935;
    --H: #22a55a;
    --T: #f59e0b;
    --S: #ef5350;
    --I: #2f80ed;
    --A: #c026d3;
    --radius: 18px;
    --font-judul: "Nunito", "Segoe UI", system-ui, sans-serif;
    --font: "Nunito", "Segoe UI", system-ui, Arial, sans-serif;
    --shadow: 0 6px 18px rgba(15, 107, 61, .10);
}

* { box-sizing: border-box; }

/* Ukuran dasar ikut membesar di layar lebar agar tampilan tetap proporsional */
html { font-size: 15px; }
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (min-width: 1880px) { html { font-size: 17.5px; } }

body {
    margin: 0;
    font-family: var(--font);
    background:
        radial-gradient(circle at 0% 0%, rgba(52,196,107,.12), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(52,196,107,.12), transparent 35%),
        linear-gradient(180deg, #f4fbf6 0%, var(--bg) 100%) fixed;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--primary); }
h1, h2, h3 { font-family: var(--font-judul); }
h1 { font-size: 1.6rem; margin: 0 0 4px; font-weight: 800; }
h2 { font-size: 1.2rem; margin: 0 0 12px; font-weight: 800; }
.muted { color: var(--muted); }
small.muted, .small { font-size: .85rem; }

/* ---------- Topbar ---------- */
.topbar {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px 10px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hijau-tua); flex-shrink: 0; }
.brand img { width: 4.6rem; height: auto; mix-blend-mode: multiply; }
.brand div { display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { font-size: 1.2rem; font-weight: 900; letter-spacing: .2px; }
.brand small { color: var(--text); font-weight: 600; font-size: .85rem; }
.brand .brand-jenis { color: var(--hijau-tua); font-weight: 800; font-size: 1.02rem; }

.topnav {
    display: flex; gap: 4px; padding: 6px;
    background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.topnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 6.4rem; padding: 10px 12px; border-radius: 14px;
    color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
    transition: background .15s;
}
.topnav a .ik { font-size: 1.4rem; color: var(--hijau-tua); }
.topnav a:hover { background: #eaf7ef; }
.topnav a.active {
    background: linear-gradient(180deg, #23955a, var(--primary-dark)); color: #fff;
    box-shadow: 0 6px 14px rgba(15,107,61,.35);
}
.topnav a.active .ik { color: #fff; }
.ik { line-height: 1; display: inline-grid; place-items: center; }
/* Ikon "Daftar Wajah": wajah di dalam bingkai pindai */
.ik-tumpuk { position: relative; }
.ik-tumpuk > i + i { position: absolute; font-size: .52em; }

.jam-card {
    margin-left: auto; display: flex; align-items: center; gap: 14px;
    background: #fff; padding: 10px 18px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line);
    font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.jam-card > .ik { font-size: 1.5rem; color: var(--hijau-tua); }
.jam-card div { display: flex; flex-direction: column; }
.jam-card strong { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; }

.user-chip {
    display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
    background: #fff; padding: 10px 14px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.user-chip .user-nama { display: flex; flex-direction: column; line-height: 1.2; max-width: 11rem; }
.user-chip b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip small { color: var(--muted); font-size: .78rem; }
.user-chip .fa-chevron-down { font-size: .8rem; }
.keluar { margin: 0; }
.btn-keluar {
    padding: 14px 18px; border-radius: 18px; border: 1px solid #fbd5d5; color: var(--danger);
    box-shadow: var(--shadow); font-weight: 800; gap: 10px;
}
.btn-keluar span { color: var(--text); }
.btn-keluar i { font-size: 1.3rem; transform: scaleX(-1); }
.btn-keluar:hover { background: #fff5f5; }

.avatar {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, #ffa24a, var(--orange-dark)); color: #fff; font-weight: 800;
    object-fit: cover; box-shadow: 0 3px 8px rgba(240,109,0,.3);
}
.avatar-xl { width: 6.5rem; height: 6.5rem; font-size: 2.6rem; border: 3px solid #ffd27a; }
.profil-foto { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.profil-foto label.btn { margin: 0; }

/* ---------- Halaman login ---------- */
/* Layar lebar: gambar login-panggung (1672×941) dibentang seperti "cover",
   lalu kartu diletakkan tepat di atas kartu pada gambar (x 880–1398, y 137–868).
   --u = 1 piksel gambar dalam satuan layar. */
body.halaman-login { background: #d9f1e4 url(../img/login-bg.webp) center / cover no-repeat fixed; overflow-x: hidden; }
.login-panggung {
    --u: calc(max(100vw, 100vh * 1.77684) / 1672);
    position: absolute; left: calc(50vw - var(--u) * 836); top: calc(50vh - var(--u) * 470.5);
    width: calc(var(--u) * 1672); height: calc(var(--u) * 941);
    background: url(../img/login-panggung.webp) 0 0 / 100% 100% no-repeat;
}
.login-card {
    position: absolute; left: calc(var(--u) * 878); top: calc(var(--u) * 135);
    width: calc(var(--u) * 522); min-height: calc(var(--u) * 735);
    font-size: calc(var(--u) * 17);
    padding: 0 2.45em 0; border-radius: 1.55em; text-align: center;
    background: #fbfdfb; border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 1.2em 3em rgba(10,80,50,.18);
    display: flex; flex-direction: column;
}
.kartu-logo { display: block; width: 7.35em; margin: 0 auto -.2em; mix-blend-mode: multiply; }
.login-card h1 { font-size: 1.95em; font-weight: 900; margin: 0; line-height: 1.15; color: #10233a; }
.login-card h1 em { font-style: normal; color: var(--primary); }
.kartu-sekolah { font-size: 1.12em; color: #334155; margin-top: .1em; }
.kartu-garis { position: relative; margin: 1.1em 3em .9em; color: #7a5a2a; font-size: 1.15em; }
.kartu-garis::before, .kartu-garis::after { content: ""; position: absolute; top: 50%; width: calc(50% - 1.5em); height: 1.5px; background: #b9d9c6; }
.kartu-garis::before { left: 0; } .kartu-garis::after { right: 0; }
.kartu-garis i { background: #fbfdfb; padding: 0 .3em; color: #8a6420; }
.login-card h2 { font-size: 1.25em; font-weight: 800; margin: 0 0 .7em; }
.login-card .alert { font-size: .9em; text-align: left; margin-bottom: 1em; }
.login-card form { text-align: left; }
.login-card .field { margin-bottom: 1.4em; }
.login-card label { font-size: 1em; font-weight: 700; margin-bottom: .45em; color: #10233a; }
.login-card label i { color: var(--primary-dark); width: 1.2em; margin-right: .3em; }
.isian { position: relative; }
.isian > i { position: absolute; left: 1.1em; top: 50%; transform: translateY(-50%); color: #475569; }
.login-card .isian input {
    height: 3.05em; padding: 0 3em 0 3.2em; font-size: 1em; border-radius: .8em;
    border: 1.5px solid #d6e7dd; background: #fff;
}
.login-card .isian input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23,145,79,.15); }
.pw-lihat {
    position: absolute; right: .7em; top: 50%; transform: translateY(-50%);
    border: 0; background: none; font-size: 1.1em; cursor: pointer; padding: .4em; color: #10233a;
}
.ingat { display: flex; align-items: center; gap: .6em; font-weight: 600; font-size: .9em; margin: -.3em 0 1.6em; color: #334155; }
.ingat input { width: 1.15em; height: 1.15em; accent-color: var(--primary); margin: 0; }
.login-card .login-btn {
    width: 100%; height: 3.5em; border: 0; border-radius: 1.75em; gap: .6em; font-size: 1.05em; font-weight: 800; color: #fff;
    background: linear-gradient(180deg, #24a061, #0f7a45); box-shadow: 0 .5em 1.2em rgba(15,107,61,.3);
}
.login-card .login-btn:hover { background: linear-gradient(180deg, #1f9157, #0c6a3b); }
.kartu-skyline { display: block; width: calc(100% + 4.9em); margin: auto -2.45em 0; border-radius: 0 0 1.55em 1.55em; mix-blend-mode: multiply; }
.login-card.pertama .kartu-garis { margin: .6em 3em .6em; }
.login-card.pertama .field { margin-bottom: .9em; }
.login-card.pertama .login-btn { margin-top: .4em; }

/* Layar tegak (HP/tablet): latar polos, kartu di tengah */
@media (max-aspect-ratio: 11/10) {
    body.halaman-login { background-position: 32% center; }
    .login-panggung {
        position: static; width: auto; height: auto; min-height: 100vh; background: none;
        display: flex; align-items: center; justify-content: center; padding: 24px 16px;
    }
    .login-card { position: static; width: 100%; max-width: 440px; min-height: 0; font-size: 15px; padding: 0 1.6em; }
    .kartu-skyline { width: calc(100% + 3.2em); margin: 1em -1.6em 0; }
}

/* ---------- Layout ---------- */
.layout { position: relative; z-index: 1; display: flex; align-items: flex-start; }
.sidebar {
    position: sticky; top: 0; width: 15rem; flex-shrink: 0; margin: 4px 0 16px 14px;
    min-height: calc(100vh - 130px); border-radius: 22px; overflow: hidden;
    display: flex; flex-direction: column;
    background:
        radial-gradient(circle at 80% 10%, rgba(52,196,107,.25), transparent 40%),
        linear-gradient(180deg, #0f5e3b 0%, #0b4a2e 100%);
    box-shadow: 0 10px 24px rgba(11,74,46,.3);
}
.sidebar nav { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
    color: #fff; text-decoration: none; font-weight: 600; font-size: 1.02rem; white-space: nowrap;
    border: 1.5px solid transparent; transition: background .15s;
}
.sidebar nav a .ik { width: 1.6rem; font-size: 1.3rem; }
.sidebar nav a:hover { background: rgba(255,255,255,.1); }
.sidebar nav a.active {
    background: linear-gradient(180deg, #3fd179, #23a95a); border-color: rgba(255,255,255,.55);
    box-shadow: 0 6px 16px rgba(0,0,0,.25); font-weight: 800;
}
.sidebar-masjid {
    display: block; width: 100%; margin-top: auto;
    -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%);
}

.container { flex: 1; min-width: 0; padding: 4px 18px 40px 18px; }
.container.narrow { max-width: 520px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card {
    background: var(--card); border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow); margin-bottom: 16px; border: 1px solid var(--line);
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-stats { grid-template-columns: repeat(6, 1fr); margin-bottom: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer { text-align: center; padding: 14px 0 0; }
.footer span { background: rgba(255,255,255,.85); padding: 6px 18px; border-radius: 99px; font-size: .8rem; color: var(--muted); font-weight: 600; }

/* ---------- Beranda ---------- */
.beranda-atas { display: grid; grid-template-columns: 1fr minmax(290px, 27%); gap: 16px; margin-bottom: 16px; }
.beranda-kiri { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sapaan {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 16px 24px; min-height: 7.5rem;
    background: #fff; border-radius: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.sapaan-foto { width: 4.6rem; height: 4.6rem; font-size: 2rem; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(240,109,0,.35); }
.sapaan-teks { min-width: 0; position: relative; z-index: 1; }
.sapaan-salam { font-weight: 700; color: var(--primary-dark); font-size: 1rem; }
.sapaan-salam i { color: #f5b301; }
.sapaan h1 { font-size: 1.6rem; margin: 0; line-height: 1.25; font-weight: 900; }
.sapaan h1 em { font-style: normal; color: var(--primary); }
.sapaan .muted { font-size: .95rem; }
.sapaan-gedung { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 42%; object-fit: cover; object-position: left center; }
.hero {
    display: block; width: 100%; height: auto; aspect-ratio: 1087 / 298; object-fit: cover;
    border-radius: 20px; box-shadow: var(--shadow); border: 2px solid #fff;
}

.cta-box { display: flex; flex-direction: column; gap: 14px; }
.btn-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px; text-decoration: none;
    color: #fff; font-size: 1.45rem; font-weight: 800; line-height: 1.15;
    background:
        radial-gradient(circle at 85% 20%, rgba(52,196,107,.35), transparent 45%),
        linear-gradient(135deg, #136b43, #0b4a2e);
    box-shadow: 0 10px 22px rgba(11,74,46,.35); transition: transform .15s;
}
.btn-cta:hover { transform: translateY(-2px); }
.cta-ikon {
    width: 4.4rem; height: 4.4rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem;
    border: 3px solid rgba(255,255,255,.85); outline: 2px dashed rgba(255,255,255,.35); outline-offset: 5px;
}
.btn-cta .panah { margin-left: auto; font-size: 1.4rem; }

.cta-box .alert { margin: 0; display: flex; gap: 12px; align-items: flex-start; }
.ik-info {
    flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 4px; display: grid; place-items: center;
    background: #2f6fed; color: #fff; font-size: .8rem; margin-top: 2px;
}
.kehadiran {
    flex: 1; background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 8px;
}
.kehadiran .atas { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.05rem; }
.kehadiran .atas i { color: var(--primary); font-size: 1.3rem; margin-right: 6px; }
.kehadiran .persen { font-size: 2rem; font-weight: 900; color: var(--primary); line-height: 1; }
.kehadiran .bar { height: 12px; background: #e8efeb; border-radius: 99px; overflow: hidden; }
.kehadiran .bar div { height: 100%; background: linear-gradient(90deg, #4ade80, var(--H)); border-radius: 99px; }
.kehadiran .jam-info i { margin-right: 4px; }
.pintasan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.pintasan .btn { padding: 11px 8px; border-color: var(--line); }
.pintasan .btn i { color: var(--primary); }

/* ---------- Statistik ---------- */
.stat {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
    border-radius: 18px; padding: 16px; box-shadow: var(--shadow); border: 1.5px solid;
}
.stat .ikon {
    width: 3.4rem; height: 3.4rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0;
    color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.stat .angka { font-size: 2rem; font-weight: 900; line-height: 1; }
.stat .label { color: var(--muted); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.stat > div { position: relative; z-index: 1; }
.stat .bayang { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(-10deg); font-size: 3rem; opacity: .1; }
.stat.H { background: #effaf2; border-color: #b9e8c8; } .stat.H .ikon { background: linear-gradient(180deg, #34b866, #1e8f4c); }
.stat.T { background: #fff8e8; border-color: #fbdf9c; } .stat.T .ikon { background: linear-gradient(180deg, #ffd166, #f4a91c); color: #4a2a00; }
.stat.S { background: #fff1f1; border-color: #f8c2c2; } .stat.S .ikon { background: linear-gradient(180deg, #ff6b6b, #e53935); }
.stat.I { background: #eef5ff; border-color: #bcd6fb; } .stat.I .ikon { background: linear-gradient(180deg, #4b93ff, #1f6fe5); }
.stat.A { background: #fbefff; border-color: #e6b6f5; } .stat.A .ikon { background: linear-gradient(180deg, #d946ef, #a21caf); color: #ffd84d; }
.stat.B { background: #f4f6f8; border-color: #d7dde3; } .stat.B .ikon { background: linear-gradient(180deg, #e5e9ee, #c9d0d8); color: #1f2a3d; }

/* ---------- Panel bawah ---------- */
.panel-bawah > .card { min-height: 15rem; margin-bottom: 0; padding: 20px 24px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 1.3rem; }
.panel-head .ik { font-size: 1.4rem; }
.ik-kotak { width: 1.9rem; height: 1.9rem; border-radius: 6px; display: grid; place-items: center; background: var(--H); color: #fff; }
.ik-jam { font-size: 1.5rem; color: #e53935; }
.card.merah h2 { color: #d32f2f; }
.kosong {
    position: relative; overflow: hidden; border: 1.5px solid #e6eee9; border-radius: 16px;
    padding: 26px 18px; text-align: center; color: var(--muted); background: #fbfdfc;
}
.kosong p { margin: 10px 0 0; font-size: 1.02rem; position: relative; }
.kosong-ikon { display: flex; justify-content: center; align-items: flex-end; gap: 10px; color: #c7d3cc; font-size: 2.2rem; position: relative; }
.kosong-ikon i:nth-child(2) { font-size: 3.4rem; color: #aab8b0; }
.kosong-ikon i:only-child { font-size: 3rem; color: #9fb0a7; }
.kosong-masjid::before, .kosong-ornamen::before, .kosong-ornamen::after {
    content: ""; position: absolute; opacity: .08; background: url(../img/madrasah.svg) no-repeat center / contain;
}
.kosong-masjid::before { left: 0; right: 0; bottom: -10px; height: 85%; background-repeat: repeat-x; background-size: auto 100%; }
.kosong-ornamen::before { left: 10px; top: 10px; width: 120px; height: 120px; }
.kosong-ornamen::after { right: 10px; top: 10px; width: 120px; height: 120px; }

/* ---------- Tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 12px; border: 1.5px solid #cfe5d8;
    background: #fff; color: var(--text); font: inherit; font-weight: 700;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #eef8f2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #2aa865, var(--primary-dark)); border-color: var(--primary-dark); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--H); border-color: var(--H); color: #fff; }
.btn-success:hover { background: #1b8a4a; }
.btn-danger { background: #fff; border-color: #fecaca; color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-kuning { background: #fff6cf; border-color: #f5d667; color: #6b4e00; }
.btn-kuning:hover { background: #ffef9f; }
.btn-lg { padding: 13px 24px; font-size: 1.08rem; border-radius: 14px; }
.btn-sm { padding: 4px 11px; font-size: .85rem; border-radius: 10px; }

/* ---------- Form ---------- */
label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=time], select, textarea {
    width: 100%; padding: 9px 12px; border: 1.5px solid #cfe5d8; border-radius: 12px;
    font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #8fd9ad; border-color: var(--orange); }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { margin-bottom: 12px; }
.hint { color: var(--muted); font-size: .82rem; font-weight: 400; }
.inline { width: auto; display: inline-block; }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; border-bottom: 1px solid #e6efe9; text-align: left; vertical-align: middle; }
th { background: #eef7f2; font-size: .85rem; color: var(--muted); font-weight: 700; }
th:first-child { border-radius: 10px 0 0 10px; } th:last-child { border-radius: 0 10px 10px 0; }
.card.merah th { background: #fff0f0; }
tr:hover td { background: #f7fcf9; }
td.c, th.c { text-align: center; }
tr:target td { background: #fff3c4; }

/* ---------- Badge status ---------- */
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; background: #9ca3af; }
.badge.H { background: var(--H); } .badge.T { background: var(--T); }
.badge.S { background: var(--S); } .badge.I { background: var(--I); }
.badge.A { background: #f87171; }
.badge.soft { background: #eef2ff; color: var(--primary-dark); }
.badge.warn { background: #fef3c7; color: #92400e; }

/* Pilihan status (absen manual) */
.status-pick { display: inline-flex; gap: 4px; }
.status-pick input { display: none; }
.status-pick label {
    margin: 0; width: 34px; height: 34px; display: grid; place-items: center;
    border: 1.5px solid #cfe5d8; border-radius: 10px; cursor: pointer; font-weight: 800; color: var(--muted); background: #fff;
}
.status-pick input:checked + label.H { background: var(--H); color: #fff; border-color: var(--H); }
.status-pick input:checked + label.T { background: var(--T); color: #fff; border-color: var(--T); }
.status-pick input:checked + label.S { background: var(--S); color: #fff; border-color: var(--S); }
.status-pick input:checked + label.I { background: var(--I); color: #fff; border-color: var(--I); }
.status-pick input:checked + label.A { background: var(--A); color: #fff; border-color: var(--A); }

/* ---------- Alert ---------- */
.alert { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 600; }
.alert-ok { background: #e3f7dc; color: #22652f; border: 1px solid #b9e6ad; }
.alert-err { background: #ffe5e5; color: #991b1b; border: 1px solid #fbc4c4; }
.alert-info { background: #eaf8e4; color: #2d5a22; border: 1px solid #c4e8b6; }

/* ---------- Kamera ---------- */
.cam-box { position: relative; background: #111; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.cam-box video, .cam-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-status {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    background: rgba(0,0,0,.6); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: .85rem;
}
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumbs canvas { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 2px solid var(--H); }

.siswa-list { max-height: 520px; overflow-y: auto; }
.siswa-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-radius: 12px; cursor: pointer; border: 1.5px solid transparent;
}
.siswa-item:hover { background: #eef8f2; }
.siswa-item.selected { background: #e3f6ea; border-color: #5cc98a; }

/* ---------- Mode Absen (layar penuh) ---------- */
body.mode-absen { background: #0f172a; color: #e2e8f0; }
.absen-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; padding: 16px; min-height: 100vh; }
.absen-layout .cam-box { aspect-ratio: auto; min-height: 60vh; }
.absen-side { display: flex; flex-direction: column; gap: 12px; }
.absen-head { display: flex; justify-content: space-between; align-items: center; }
.absen-head .jam { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel { background: #1e293b; border-radius: var(--radius); padding: 16px; }
.hasil {
    text-align: center; padding: 22px 16px; border-radius: var(--radius); background: #1e293b;
    min-height: 170px; display: flex; flex-direction: column; justify-content: center; transition: background .2s;
}
.hasil .nama { font-size: 2rem; font-weight: 700; color: #fff; }
.hasil .ket { font-size: 1.15rem; }
.hasil.ok { background: #14532d; }
.hasil.telat { background: #78350f; }
.hasil.sudah { background: #1e3a8a; }
.hasil.gagal { background: #7f1d1d; }
.log-list { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.log-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #334155; }
.mode-absen .muted { color: #94a3b8; }
.mode-absen a { color: #93c5fd; }
.mode-absen .btn { background: #334155; border-color: #475569; color: #fff; }
.progress { height: 8px; background: #334155; border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: var(--H); width: 0; transition: width .3s; }

/* ---------- Rekap ---------- */
.rekap-table th, .rekap-table td { padding: 4px 5px; text-align: center; font-size: .82rem; border: 1px solid #dce9e1; border-radius: 0; }
.rekap-table td.nama, .rekap-table th.nama { text-align: left; white-space: nowrap; }
.rekap-table td.libur { background: #f3f0e6; }
.rekap-table .H { color: var(--H); font-weight: 800; } .rekap-table .T { color: #b45309; font-weight: 800; }
.rekap-table .S { color: var(--S); font-weight: 800; } .rekap-table .I { color: var(--I); font-weight: 800; }
.rekap-table .A { color: var(--A); font-weight: 800; }
.print-only { display: none; }
.btn-pdf { background: #fff1f0; border-color: #fbb4ae; color: #b42318; }
.btn-pdf:hover { background: #ffe1de; }
table.ttd td { border: 0; padding: 4px; line-height: 1.6; background: transparent !important; }
table.ttd { page-break-inside: avoid; }

/* ---------- Daftar Nilai ---------- */
.tab-nilai { display: inline-flex; gap: 4px; padding: 5px; margin-top: 10px; background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tab-nilai a { padding: 8px 16px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 700; white-space: nowrap; }
.tab-nilai a:hover { background: #eaf7ef; }
.tab-nilai a.active { background: linear-gradient(180deg, #23955a, var(--primary-dark)); color: #fff; }
.tabel-nilai th, .tabel-nilai td { border: 1px solid #e1ece5; padding: 6px 8px; border-radius: 0 !important; }
.tabel-nilai th { background: #eef7f2; color: var(--text); line-height: 1.2; }
.tabel-nilai th small { display: block; font-weight: 600; color: var(--muted); font-size: .72rem; }
.tabel-nilai .nama { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 11rem; white-space: nowrap; font-weight: 700; }
.tabel-nilai th.nama { background: #eef7f2; z-index: 2; }
.tabel-nilai td.isi { padding: 3px; min-width: 4.4rem; }
.tabel-nilai input {
    width: 100%; min-width: 3.8rem; padding: 7px 4px; text-align: center; font-weight: 700;
    border: 1.5px solid #dce9e1; border-radius: 8px;
}
.tabel-nilai td.diubah input { background: #fffbe6; border-color: #f5d667; }
.tabel-nilai input.kurang, .tabel-nilai td.kurang { color: #d32f2f; background: #fff1f1; }
.tabel-nilai input.salah { border-color: var(--danger); outline: 2px solid #fecaca; }
.tabel-nilai .tebal { font-weight: 800; }
.tabel-nilai td.rank { color: var(--primary-dark); }
.tabel-nilai tfoot td { background: #f6faf8; font-weight: 700; }
.tabel-nilai tr:hover td.nama { background: #f7fcf9; }
.tabel-nilai.rekap td { font-size: .9rem; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
.tabel-mapel td { vertical-align: middle; }
.tabel-mapel form { margin: 0; }
@media print {
    .tabel-nilai input { border: 0; padding: 0; background: none !important; }
    .tabel-nilai .nama { position: static; }
    .tabel-nilai th, .tabel-nilai td { padding: 3px 4px; font-size: 10px; }
}

/* ---------- Responsif ---------- */
@media (max-width: 1700px) {
    .topnav a { min-width: 0; padding: 8px 10px; font-size: .8rem; }
    .topnav a .ik { font-size: 1.2rem; }
    .topbar { gap: 10px; }
    .user-chip .user-nama { max-width: 8rem; }
}
@media (max-width: 1600px) {
    .topnav { display: none; }       /* cukup sidebar di layar laptop (menu atas 8 item tidak muat) */
}
@media (max-width: 1480px) {
    .grid-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .beranda-atas { grid-template-columns: 1fr; }
    .sidebar { width: 12.5rem; }
}
@media (max-width: 860px) {
    .topbar { flex-wrap: wrap; padding: 10px 12px; }
    .topnav { display: flex; order: 3; width: 100%; overflow-x: auto; }
    .topnav a { flex: 0 0 auto; }
    .sidebar { display: none; }
    .jam-card { padding: 8px 12px; }
    .jam-card .tgl, .jam-card > .ik { display: none; }
    .user-chip { padding: 6px; }
    .user-chip .user-nama, .btn-keluar span { display: none; }
    .btn-keluar { padding: 12px 14px; }
    .brand { flex: 1; min-width: 0; }
    .brand img { width: 3.4rem; }
    .brand .brand-jenis { font-size: .8rem; }
    .brand strong { font-size: 1rem; }
    .container { padding: 8px 12px 30px; }
    .absen-layout { grid-template-columns: 1fr; }
    .absen-layout .cam-box { min-height: 45vh; }
    .sapaan-gedung { opacity: .25; }
}
@media (max-width: 560px) {
    .brand small { display: none; }
    .brand strong { font-size: .95rem; }
    .sapaan { padding: 12px 14px; gap: 12px; }
    .sapaan h1 { font-size: 1.2rem; }
    .sapaan-foto { width: 3.4rem; height: 3.4rem; font-size: 1.5rem; }
    .sapaan-gedung { display: none; }
    .grid-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat { padding: 12px; gap: 10px; }
    .stat .ikon { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .btn-cta { font-size: 1.25rem; padding: 18px; }
    .hero { border-radius: 14px; }
}

@media print {
    body { background: #fff; font-size: 11px; }
    .no-print { display: none !important; }
    .print-only { display: block; }
    .card { box-shadow: none; padding: 0; border: 0; }
    .container { max-width: none; padding: 0; }
    @page { size: landscape; margin: 10mm; }
}


.stat.S .ikon i, .stat.S .bayang { rotate: -45deg; }
.sapaan-gedung { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
@media (max-width: 1500px) {
    .sapaan-gedung { display: none; }
    .btn-cta { font-size: 1.2rem; padding: 18px; gap: 14px; }
    .cta-ikon { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; }
}
@media (max-width: 560px) {
    .tab-nilai { display: flex; width: 100%; }
    .tab-nilai a { flex: 1; text-align: center; padding: 8px 6px; font-size: .82rem; white-space: normal; line-height: 1.2; }
    .brand { min-width: 0; overflow: hidden; }
    .brand img { width: 2.8rem; }
    .brand strong { font-size: .8rem; }
}
.tabel-mapel .isi-kkm { width: 5.5rem; text-align: center; }
.tabel-mapel th.c, .tabel-mapel td.c { text-align: center; width: 7rem; }

/* Formulir di kiri, daftar di kanan; di HP/tablet ditumpuk satu kolom */
.grid-sisi { grid-template-columns: minmax(280px, 1fr) 2fr; }
.grid-sisi > * { min-width: 0; }
@media (max-width: 900px) { .grid-sisi { grid-template-columns: 1fr; } }
/* Isi grid boleh menyusut; tabel lebar digeser di dalam kotaknya, bukan melebarkan halaman (penting di HP) */
.grid > * { min-width: 0; }

/* ---------- Profil siswa ---------- */
.avatar-l { background: linear-gradient(180deg, #4b93ff, #1f6fe5); box-shadow: 0 3px 8px rgba(31,111,229,.3); }
.avatar-p { background: linear-gradient(180deg, #f472b6, #db2777); box-shadow: 0 3px 8px rgba(219,39,119,.3); }
.siswa-nama { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.siswa-nama .avatar { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.siswa-nama:hover span { color: var(--primary); text-decoration: underline; }
.kembali { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; font-size: .9rem; margin-bottom: 4px; }
.profil-kartu { display: flex; gap: 24px; align-items: flex-start; }
.avatar-profil { width: 9rem; height: 9rem; font-size: 3.6rem; border-radius: 22px; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(15,107,61,.2); }
.profil-isi { flex: 1; min-width: 0; }
.profil-isi h2 { font-size: 1.6rem; margin: 0 0 8px; }
.profil-lencana { gap: 6px; margin-bottom: 12px; }
.profil-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; margin: 0; }
.profil-data div { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.profil-data dt { font-size: .82rem; color: var(--muted); font-weight: 700; }
.profil-data dt i { width: 1.1em; color: var(--primary); }
.profil-data dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.btn-wa { background: #e8f8ee; border-color: #b7e4c7; color: #128c4b; margin-left: 6px; }
.btn-wa:hover { background: #d3f2df; }
.tab-kecil { box-shadow: none; padding: 3px; }
.tab-kecil a { padding: 5px 10px; font-size: .82rem; }
.profil-grid > .card { margin-bottom: 0; }
.profil-grid { margin-bottom: 16px; align-items: start; }
.profil-hadir { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.profil-persen .angka { font-size: 2.6rem; font-weight: 900; color: var(--primary-dark); line-height: 1; }
.profil-jml { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px 14px; flex: 1; }
.profil-jml div { display: flex; align-items: center; gap: 6px; }
.titik { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.profil-ringkas-nilai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.profil-ringkas-nilai div { background: #f6faf8; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.profil-ringkas-nilai b { font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.judul-grafik { font-size: 1rem; margin: 14px 0 8px; }
.tabel-grafik { margin-top: 8px; }
.tabel-grafik summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: .88rem; }
@media (max-width: 700px) {
    .profil-kartu { flex-direction: column; align-items: center; text-align: center; }
    .profil-lencana { justify-content: center; }
    .profil-data { text-align: left; width: 100%; }
    .profil-ringkas-nilai { grid-template-columns: 1fr 1fr; }
}

/* ---------- Grafik (assets/js/grafik.js) ---------- */
.grafik { width: 100%; }
.gk-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.gk-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.gk-leg-kunci { width: 12px; height: 12px; border-radius: 3px; }
.gk-leg-kunci.garis { width: 2px; height: 14px; border-radius: 0; background: #1f2a3d; }
.gk-plot { position: relative; }
/* kolom bertumpuk */
.gk-kolom { height: 190px; margin-left: 26px; }
.gk-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #e6ece8; }
.gk-grid.dasar { border-top-color: #c9d3cd; }
.gk-tick { position: absolute; right: 100%; margin-right: 6px; transform: translateY(-50%); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gk-kolom-baris { position: absolute; inset: 0; display: flex; }
.gk-kol { flex: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; outline: none; cursor: default; }
.gk-kol:hover, .gk-kol:focus-visible { background: rgba(15,107,61,.06); }
.gk-batang { width: min(24px, 62%); display: flex; flex-direction: column-reverse; gap: 2px; }
.gk-seg { min-height: 2px; }
.gk-seg:last-child { border-radius: 4px 4px 0 0; }
.gk-kolom-label { display: flex; margin-left: 26px; margin-top: 4px; }
.gk-kolom-label span { flex: 1; text-align: center; font-size: .72rem; color: var(--muted); }
/* batang mendatar berkelompok */
.gk-bg-baris, .gk-bg-sumbu { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; gap: 10px; align-items: center; }
.gk-bg-baris { padding: 4px 4px; border-radius: 8px; outline: none; }
.gk-bg-baris:hover, .gk-bg-baris:focus-visible { background: rgba(15,107,61,.06); }
.gk-bg-label { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-bg-jalur { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 3px 0;
    background: linear-gradient(90deg, #c9d3cd 1px, transparent 1px) 0 0 / 25% 100%; }
.gk-bg-bar { height: 10px; border-radius: 0 4px 4px 0; }
.gk-bg-bar.kosong { background: transparent; }
.gk-bg-penanda { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #1f2a3d; border-radius: 1px; }
.gk-bg-tick { position: relative; height: 16px; }
.gk-bg-tick span { position: absolute; transform: translateX(-50%); font-size: .7rem; color: var(--muted); }
.gk-bg-tick span:first-child { transform: none; }
.gk-bg-tick span:last-child { transform: translateX(-100%); }
/* tooltip */
.gk-tooltip { position: absolute; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .1s;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(15,40,30,.18);
    padding: 8px 10px; font-size: .82rem; min-width: 140px; }
.gk-tooltip.tampil { opacity: 1; }
.gk-tip-judul { font-weight: 800; margin-bottom: 4px; }
.gk-tip-baris { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.gk-tip-baris b { font-variant-numeric: tabular-nums; }
.gk-tip-nama { color: var(--muted); }
.gk-tip-kunci { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.gk-tip-kunci.garis { width: 2px; height: 12px; background: #1f2a3d; }
.tgl-riwayat { white-space: nowrap; }
@media (max-width: 560px) { .tgl-riwayat .hari { display: none; } }