@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  --bg:#f3f4fb;
  --surface:rgba(255,255,255,.78);
  --neon-blue:#0891b2; --rgb-blue:8,145,178;
  --neon-purple:#9333ea; --rgb-purple:147,51,234;
  --neon-emerald:#059669; --rgb-emerald:5,150,105;
  --neon-amber:#d97706; --rgb-amber:217,119,6;
  --neon-red:#dc2626; --rgb-red:220,38,38;
  --neon-cyan:#0ea5b7; --rgb-cyan:14,165,183;
  --ink:#181a2b; --muted:#5b5f74;
  --line:rgba(24,26,43,.09);
  --panel-dark:#14152a; --panel-dark-2:#0f1019;
  --radius:14px;
}
*{box-sizing:border-box}
button{font-family:inherit}
body{margin:0;background-color:var(--bg);background-image:radial-gradient(circle at 10% 20%,rgba(var(--rgb-purple),.08),transparent 40%),radial-gradient(circle at 90% 80%,rgba(var(--rgb-blue),.08),transparent 40%);color:var(--ink);font:15px/1.5 'Quicksand',system-ui,-apple-system,"Segoe UI",sans-serif}

/* ===== Sidebar ===== */
aside{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--panel-dark) 0%,var(--panel-dark-2) 100%);border-right:1px solid rgba(var(--rgb-blue),.25);box-shadow:0 0 30px rgba(0,0,0,.25);color:#fff;padding:23px 14px;display:flex;flex-direction:column;z-index:5}
.admin-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:17px;line-height:1.2;font-weight:800;letter-spacing:.01em;padding:0 10px 25px;border-bottom:1px solid rgba(var(--rgb-blue),.2);text-shadow:0 0 12px rgba(var(--rgb-blue),.5)}
nav{padding-top:14px;display:grid;gap:3px}
nav a,.logout{padding:10px 12px;border-radius:9px;color:#cbd5e1;text-decoration:none;font-weight:600;transition:all .2s ease}
nav a:hover,.logout:hover{background:rgba(var(--rgb-blue),.12);color:#fff;text-shadow:0 0 8px rgba(var(--rgb-blue),.6)}
nav a.active{background:rgba(var(--rgb-blue),.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--rgb-blue),.35)}
.logout{margin-top:auto}
.admin-main{margin-left:250px;min-height:100vh}

/* ===== Header atas ===== */
header{height:68px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:flex-end;gap:12px}
header small,header b{display:block;text-align:right}
header small{color:var(--muted)}
header b{color:var(--ink)}

.admin-content{padding:32px;width:min(1200px,100%);margin:auto}
.admin-content h1{color:var(--ink);margin:0 0 24px;letter-spacing:-.02em}

/* ===== Panel (kartu kaca) ===== */
.panel{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-top:4px solid var(--neon-blue);border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(24,26,43,.07),0 0 22px rgba(var(--rgb-blue),.12)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.toolbar h2{margin:0}

/* ===== Tombol ===== */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;background:var(--neon-blue);color:#fff;border:0;border-radius:8px;padding:12px 20px;text-decoration:none;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 0 20px rgba(var(--rgb-blue),.4);transition:box-shadow .25s ease,transform .25s ease}
.button:hover{box-shadow:0 0 28px rgba(var(--rgb-blue),.6);transform:translateY(-1px)}
.button.warn{background:var(--neon-red);box-shadow:0 0 20px rgba(var(--rgb-red),.4)}
.button.warn:hover{box-shadow:0 0 28px rgba(var(--rgb-red),.6)}
.button.gold{background:var(--neon-amber);color:#fff;box-shadow:0 0 20px rgba(var(--rgb-amber),.4)}
.button.gold:hover{box-shadow:0 0 28px rgba(var(--rgb-amber),.6)}
.button.outline{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.button.outline:hover{background:rgba(var(--rgb-blue),.06);filter:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 14px;border-radius:7px;border:1px solid transparent;font-size:13px;line-height:1.2;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;transition:all .2s ease}
.btn-edit{background:rgba(var(--rgb-blue),.1);color:var(--neon-blue);border-color:rgba(var(--rgb-blue),.25)}
.btn-edit:hover{background:rgba(var(--rgb-blue),.18);box-shadow:0 0 14px rgba(var(--rgb-blue),.25)}
.btn-delete{background:rgba(var(--rgb-red),.08);color:var(--neon-red);border-color:rgba(var(--rgb-red),.22)}
.btn-delete:hover{background:rgba(var(--rgb-red),.16);box-shadow:0 0 14px rgba(var(--rgb-red),.25)}
.btn-ghost{background:var(--surface-solid,#fff);color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{background:rgba(var(--rgb-blue),.06);color:var(--ink)}
.actions-group{display:flex;gap:8px;flex-wrap:wrap}

/* ===== Notifikasi ===== */
.notice{background:rgba(var(--rgb-emerald),.08);border:1px solid rgba(var(--rgb-emerald),.3);color:#065f46;padding:11px 14px;border-radius:8px;margin-bottom:16px;box-shadow:0 0 16px rgba(var(--rgb-emerald),.1)}
.notice-error{background:rgba(var(--rgb-red),.08);border-color:rgba(var(--rgb-red),.3);color:#7f1d1d;box-shadow:0 0 16px rgba(var(--rgb-red),.1)}

/* ===== Tabel ===== */
table{border-collapse:collapse;width:100%;background:transparent}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tbody tr:hover td{background:rgba(var(--rgb-blue),.04)}
td.actions{white-space:nowrap}

/* ===== Formulir ===== */
form.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.single-column{grid-template-columns:1fr}
.full{grid-column:1/-1}
.form-help{margin:0 0 18px;padding:12px 14px;border-radius:8px;background:rgba(var(--rgb-blue),.06);color:var(--muted)}
.form-actions{margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.form-actions .button{min-width:210px}
label{font-weight:700;display:block;margin-bottom:6px;color:var(--ink)}
input,select,textarea{width:100%;border:1px solid rgba(24,26,43,.15);border-radius:7px;padding:11px;font:inherit;background:#fff;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 0 3px rgba(var(--rgb-blue),.15)}
textarea{min-height:100px}

/* ===== Statistik dashboard ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:20px;--card-color:var(--neon-blue);--rgb-color:var(--rgb-blue);border-top-color:var(--card-color);box-shadow:0 8px 24px rgba(24,26,43,.07),0 0 22px rgba(var(--rgb-color),.14)}
.stat:nth-child(1){--card-color:var(--neon-blue);--rgb-color:var(--rgb-blue)}
.stat:nth-child(2){--card-color:var(--neon-purple);--rgb-color:var(--rgb-purple)}
.stat:nth-child(3){--card-color:var(--neon-emerald);--rgb-color:var(--rgb-emerald)}
.stat:nth-child(4){--card-color:var(--neon-amber);--rgb-color:var(--rgb-amber)}
.stat b{font-size:28px;display:block;color:var(--ink);text-shadow:0 0 12px rgba(var(--rgb-color),.3)}
.stats-5{grid-template-columns:repeat(5,1fr)}
.stats-5 .stat:nth-child(5){--card-color:var(--neon-cyan);--rgb-color:var(--rgb-cyan)}
@media(max-width:960px){.stats-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stats-5{grid-template-columns:repeat(2,1fr)}}

/* ===== Legenda & baris berwarna pada tabel ===== */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px;color:var(--muted);font-size:13px;font-weight:600}
.legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:2px;vertical-align:-1px}
.legend-boy{background:var(--neon-blue)}
.legend-girl{background:var(--neon-purple)}
.legend-inactive{background:var(--muted)}
.legend-past{background:var(--muted)}
tbody tr.row-boy td{background:rgba(var(--rgb-blue),.07)}
tbody tr.row-boy:hover td{background:rgba(var(--rgb-blue),.13)}
tbody tr.row-girl td{background:rgba(var(--rgb-purple),.07)}
tbody tr.row-girl:hover td{background:rgba(var(--rgb-purple),.13)}
tbody tr.row-inactive td{background:rgba(91,95,116,.09);color:var(--muted)}
tbody tr.row-inactive:hover td{background:rgba(91,95,116,.15)}
tbody tr.row-past td{background:rgba(91,95,116,.07);color:var(--muted)}
tbody tr.row-past:hover td{background:rgba(91,95,116,.13)}
tbody tr.row-paid td{background:rgba(var(--rgb-emerald),.06)}
tbody tr.row-paid:hover td{background:rgba(var(--rgb-emerald),.12)}
tbody tr.row-unpaid td{background:rgba(var(--rgb-red),.06)}
tbody tr.row-unpaid:hover td{background:rgba(var(--rgb-red),.12)}
td.row-paid{background:rgba(var(--rgb-emerald),.15);font-weight:700;color:var(--neon-emerald)}
td.row-unpaid{background:rgba(var(--rgb-red),.08);color:var(--muted)}
.legend-paid{background:var(--neon-emerald)}
.legend-unpaid{background:var(--neon-red)}
.badge-paid{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--neon-emerald);padding:4px 10px;border-radius:50px;white-space:nowrap}
.badge-unpaid{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--neon-red);padding:4px 10px;border-radius:50px;white-space:nowrap}

/* ===== Tampilan Data Santri & Wali Santri: tabel ringkas ===== */
.students-table-panel table.table-compact{font-size:13px}
.students-table-panel table.table-compact th,
.students-table-panel table.table-compact td{padding:7px 10px;font-variant-numeric:tabular-nums;line-height:1.35}
.students-table-panel table.table-compact th{font-size:10.5px}
.nik-toggle{cursor:pointer;border-bottom:1px dashed var(--muted);color:var(--ink)}
.nik-toggle:hover{color:var(--neon-blue)}

/* ===== Lencana sisa waktu agenda ===== */
.badge-past{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--muted);padding:4px 10px;border-radius:50px;white-space:nowrap}
.badge-countdown{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--neon-amber);box-shadow:0 0 12px rgba(var(--rgb-amber),.35);padding:4px 10px;border-radius:50px;white-space:nowrap}
.badge-countdown-today{background:var(--neon-emerald);box-shadow:0 0 12px rgba(var(--rgb-emerald),.35)}

.side-toggle{display:none}
@media(max-width:800px){
aside{transform:translateX(-100%);transition:.2s}
aside.show{transform:translateX(0)}
.admin-main{margin:0}
.side-toggle{display:block;margin-right:auto;border:0;background:transparent;color:var(--ink);font-size:22px}
.admin-content{padding:22px 14px}
.stats,form.grid{grid-template-columns:1fr}
.panel{overflow:auto}
.button{width:100%;min-height:50px;font-size:16px}
.toolbar .button{width:auto}
.form-actions .button{width:100%}
.btn{min-height:38px;padding:8px 14px}
table{min-width:650px}
}

.print-sheet h4{color:var(--ink);margin:0 0 8px}
@media print{
aside,.side-toggle,header,.no-print{display:none!important}
.admin-main{margin:0}
.admin-content{padding:0;width:100%}
.panel{box-shadow:none;border:0;backdrop-filter:none;background:#fff}
}

.admin-brand .brand-logo{height:28px;width:auto;object-fit:contain;border-radius:5px;vertical-align:middle}
.wa-link{display:inline-flex;align-items:center;gap:6px;color:var(--neon-emerald);font-weight:700;text-decoration:none}
.wa-link:hover{color:#047857;text-decoration:underline}
.wa-link svg{flex:none}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--neon-blue);outline-offset:2px}

/* ===== Data Santri & Wali Santri: tampilan rapi ===== */
.admin-content:has(.students-table-panel){width:min(1480px,100%)}
.students-table-panel{overflow-x:auto}
.students-table-panel table.table-compact{min-width:1080px;table-layout:auto}
.students-table-panel table.table-compact thead th{white-space:nowrap;background:rgba(24,26,43,.03);border-bottom:2px solid var(--line);vertical-align:middle}
.students-table-panel table.table-compact td{vertical-align:middle}
.students-table-panel table.table-compact tbody tr td{border-bottom:1px solid rgba(24,26,43,.06)}
.students-table-panel .cell-name{font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.students-table-panel .parents{display:grid;gap:3px;min-width:140px}
.students-table-panel .parents div{display:flex;flex-direction:column;line-height:1.25}
.students-table-panel .parents small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.students-table-panel .parents span{font-weight:600}
.students-table-panel td:nth-child(7),.students-table-panel th:nth-child(7){min-width:220px;max-width:280px}
.addr-cell{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;line-height:1.4;color:var(--ink);word-break:break-word}
.addr-cell.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.addr-cell:hover{color:var(--neon-blue)}
.muted-dash{color:var(--muted)}
.students-table-panel td:last-child .actions-group{flex-wrap:nowrap;gap:6px}
.students-table-panel td.actions .btn{min-height:30px;padding:5px 12px}
.students-table-panel .wa-link{white-space:nowrap}

/* Pil status / jenis kelamin */
.pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 10px;border-radius:50px;white-space:nowrap;border:1px solid transparent}
.pill-boy{background:rgba(var(--rgb-blue),.12);color:var(--neon-blue);border-color:rgba(var(--rgb-blue),.3)}
.pill-girl{background:rgba(var(--rgb-purple),.12);color:var(--neon-purple);border-color:rgba(var(--rgb-purple),.3)}
.pill-active{background:rgba(var(--rgb-emerald),.12);color:var(--neon-emerald);border-color:rgba(var(--rgb-emerald),.3)}
.pill-inactive{background:rgba(91,95,116,.14);color:var(--muted);border-color:rgba(91,95,116,.3)}
@media(max-width:800px){.students-table-panel table.table-compact{min-width:1080px}}