:root {
    --hijau-tua: #1F4C3D;
    --hijau: #2E6B54;
    --hijau-muda: #E7F0EA;
    --emas: #C9A227;
    --emas-muda: #F4E9C9;
    --kertas: #FBF8F1;
    --kertas-gelap: #F0EAD9;
    --tinta: #2A2622;
    --tinta-pudar: #6B655A;
    --garis: #D9D1BC;
    --merah: #A23B2E;
    --radius: 6px;
    --font-judul: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-teks: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--kertas); color:var(--tinta); font-family:var(--font-teks); font-size:14px; line-height:1.5; }
h1,h2,h3,h4 { font-family:var(--font-judul); color:var(--hijau-tua); margin:0 0 8px; }
a { color:var(--hijau); text-decoration:none; cursor:pointer; }
.flex { display:flex; }
.flex-antara { display:flex; justify-content:space-between; align-items:center; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; } .mt-16 { margin-top:16px; } .mb-16 { margin-bottom:16px; } .mb-0 { margin-bottom:0; }

.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.kop-surat { background:linear-gradient(180deg,var(--hijau-tua) 0%,var(--hijau) 100%); color:#fff; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:4px solid var(--emas); position:sticky; top:0; z-index:20; }
.kop-surat .lambang { display:flex; align-items:center; gap:12px; }
.kop-surat .lingkaran { width:42px; height:42px; border-radius:50%; background:var(--emas); color:var(--hijau-tua); display:flex; align-items:center; justify-content:center; font-family:var(--font-judul); font-weight:700; font-size:18px; border:2px solid var(--emas-muda); }
.kop-surat .nama-madrasah { font-family:var(--font-judul); font-weight:700; font-size:17px; }
.kop-surat .sub { font-size:12px; opacity:.85; }
.info-user { display:flex; align-items:center; gap:14px; font-size:13px; }
.badge-role { background:rgba(255,255,255,.15); padding:3px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.btn-logout { color:#fff; background:rgba(0,0,0,.18); padding:6px 14px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.25); cursor:pointer; font-family:var(--font-teks); text-decoration:none; display:inline-block; }

.nav-tabs { background:var(--kertas-gelap); border-bottom:1px solid var(--garis); padding:0 28px; display:flex; gap:4px; overflow-x:auto; }
.nav-tabs a { padding:12px 16px; color:var(--tinta-pudar); font-size:13.5px; font-weight:600; border:none; border-bottom:3px solid transparent; background:none; cursor:pointer; white-space:nowrap; display:inline-block; }
.nav-tabs a.active { color:var(--hijau-tua); border-bottom-color:var(--emas); background:var(--kertas); }
.konten { flex:1; padding:26px 28px 60px; max-width:1280px; width:100%; margin:0 auto; }

.kartu { background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.header-halaman { margin-bottom:20px; border-bottom:2px solid var(--garis); padding-bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.eyebrow { font-size:11.5px; text-transform:uppercase; color:var(--emas); font-weight:700; letter-spacing:1px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--radius); font-size:13px; font-weight:600; border:1px solid transparent; cursor:pointer; font-family:var(--font-teks); transition:0.2s; text-decoration:none; }
.btn-primer { background:var(--hijau-tua); color:#fff; }
.btn-primer:hover { background:var(--hijau); }
.btn-emas { background:var(--emas); color:var(--hijau-tua); }
.btn-luar { background:#fff; border-color:var(--garis); color:var(--tinta); }
.btn-luar:hover { border-color:var(--hijau); color:var(--hijau-tua); }
.btn-bahaya { background:var(--merah); color:#fff; }

label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--tinta); }
input, select, textarea { width:100%; padding:9px 12px; border:1px solid var(--garis); border-radius:var(--radius); font-size:14px; font-family:var(--font-teks); background:#fff; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--hijau); box-shadow:0 0 0 3px var(--hijau-muda); }
.field { margin-bottom:16px; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }

.tabel-wrap { overflow-x:auto; border:1px solid var(--garis); border-radius:var(--radius); }
table.tabel-data { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
table.tabel-data th { background:var(--hijau-muda); color:var(--hijau-tua); font-weight:700; text-align:left; padding:10px 12px; border-bottom:2px solid var(--garis); white-space:nowrap; }
table.tabel-data td { padding:9px 12px; border-bottom:1px solid var(--garis); vertical-align:middle; }
table.tabel-data tbody tr:hover { background:#FCFBF5; }
.tengah { text-align:center !important; }

/* Absensi 10 Jam (Harian) */
.tabel-absensi th, .tabel-absensi td { padding:5px; border:1px solid var(--garis); }
.tabel-absensi .nama-siswa { font-weight:600; min-width:180px; text-align:left; }
.sel-jam { cursor:pointer; user-select:none; font-weight:700; text-align:center; transition:0.2s; height:34px; padding:0 !important; width:34px; border:none; background:transparent; }
.sel-jam:hover { opacity:0.8; }
.sel-jam.h { background:#fff; color:#E7F0EA; }
.sel-jam.h::after { content: "•"; color:#A4BDB0; font-size:18px; }
.sel-jam.s { background:#FFF4D6 !important; color:#7A5E0C; }
.sel-jam.s::after { content: "S"; }
.sel-jam.i { background:#DCEBFF !important; color:#1D4E89; }
.sel-jam.i::after { content: "I"; }
.sel-jam.a { background:#FBDCD8 !important; color:#8C2E20; }
.sel-jam.a::after { content: "A"; }

.kolom-sorot { background-color:#FEF9E7 !important; border-left:2px solid #F4D03F !important; border-right:2px solid #F4D03F !important; }

.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-weight:500; font-size:13.5px; }
.alert-success { background:#E9F4EC; border:1px solid #BEDFC7; color:#245A34; }
.alert-error { background:#FBE9E7; border:1px solid #F1B6AC; color:#8C2E20; }

.halaman-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 15% 15%, rgba(201,162,39,.10), transparent 40%),radial-gradient(circle at 85% 85%, rgba(46,107,84,.12), transparent 45%), var(--kertas); padding:20px; }
.kartu-login { width:100%; max-width:380px; background:#fff; border:1px solid var(--garis); border-radius:10px; padding:34px 30px; box-shadow:0 10px 30px rgba(31,76,61,.09); position:relative; overflow:hidden; }
.kartu-login::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--hijau-tua),var(--emas)); }
.lingkaran-login { width:60px;height:60px;border-radius:50%;background:var(--hijau-tua);color:var(--emas-muda);display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;border:3px solid var(--emas);margin-bottom:10px;font-family:var(--font-judul); }

.admin-only { display: inline-flex; }
button.sel-jam { font-family: var(--font-teks); }

@media print {
    body { background:#fff; }
    .kop-surat, .nav-tabs, .btn, .header-halaman .flex, .kartu-login { display:none !important; }
    .konten, .kartu, .tabel-wrap { border:none; padding:0; margin:0; box-shadow:none; max-width:100%; }
}