/* Custom CSS Madrasah Cup 2026 */
[x-cloak] { display: none !important; }

body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* Fokus keyboard yang jelas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; height: auto !important; overflow: visible !important; display: block !important; }
    main { overflow: visible !important; }
    table { font-size: 11px; }
    @page { size: A4 landscape; margin: 12mm; }
}

/* Field yang gagal validasi tidak tertutup header sticky */
input, textarea, select { scroll-margin-top: 7rem; }
section[id] { scroll-margin-top: 6rem; }

/* ============================================================
 * ADMIN — tema berwarna
 * ============================================================ */
body.admin-ui {
    background:
        radial-gradient(1200px 600px at 100% -10%, #ede9fe 0%, transparent 60%),
        radial-gradient(900px 500px at -10% 110%, #d1fae5 0%, transparent 60%),
        #f6f7fb;
}
.admin-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.admin-blobs span { position: absolute; width: 360px; height: 360px; border-radius: 9999px; filter: blur(90px); opacity: .35; }
.admin-blobs span:nth-child(1) { top: -120px; left: 30%; }
.admin-blobs span:nth-child(2) { top: 20%; right: -140px; }
.admin-blobs span:nth-child(3) { bottom: -140px; left: 45%; }
.admin-blobs span:nth-child(4) { bottom: 15%; left: 12%; opacity: .2; }

.admin-sidebar {
    background:
        radial-gradient(400px 300px at 0% 0%, rgba(52, 211, 153, .35), transparent 70%),
        radial-gradient(400px 400px at 100% 100%, rgba(139, 92, 246, .45), transparent 70%),
        linear-gradient(180deg, #064e3b 0%, #134e4a 45%, #1e1b4b 100%);
}
.admin-sidebar ::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

/* Kartu putih di halaman admin: aksen warna di bagian atas */
.admin-ui main .bg-white.rounded-2xl { position: relative; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12); }
.admin-ui main .bg-white.rounded-2xl::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg, #10b981, #06b6d4); pointer-events: none;
}
.admin-ui main .bg-white.rounded-2xl:nth-child(4n+2)::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.admin-ui main .bg-white.rounded-2xl:nth-child(4n+3)::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.admin-ui main .bg-white.rounded-2xl:nth-child(4n+4)::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.admin-ui main .no-accent::before { display: none; }

/* Kepala tabel berwarna */
.admin-ui main thead { background: linear-gradient(90deg, #ecfdf5, #eff6ff 50%, #fdf4ff) !important; color: #475569; }
.admin-ui main tbody tr:hover { background: linear-gradient(90deg, rgba(236,253,245,.7), rgba(245,243,255,.7)) !important; }

/* Tombol utama bergradasi */
.admin-ui main .bg-emerald-600 { background-image: linear-gradient(135deg, #10b981, #0d9488); box-shadow: 0 6px 16px -6px rgba(16,185,129,.55); }
.admin-ui main .bg-emerald-600:hover { background-image: linear-gradient(135deg, #059669, #0f766e); }
.admin-ui main .bg-slate-900 { background-image: linear-gradient(135deg, #1e293b, #4338ca); }

@media print {
    .admin-ui main .bg-white.rounded-2xl::before { display: none; }
    body.admin-ui { background: #fff !important; }
}