/* File: app.css
   Gaya bersama tampilan "aplikasi native" untuk pengguna HP
   (index.html, dashboard.html, profil.html). Desktop tidak terpengaruh. */

:root {
    --app-navy: #0b1d3a;
    --app-biru: #1769b3;
    --app-biru-muda: #e8f1fb;
    --app-aksen: #e11d48;
}

/* Area aman untuk layar ber-notch / home indicator (butuh viewport-fit=cover) */
.app-safe-top { padding-top: env(safe-area-inset-top); }
.app-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

@media (max-width: 767px) {
    html, body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
    body.app-mobile { background: var(--app-navy); }
}

/* Efek tekan seperti tombol aplikasi */
.app-tap { transition: transform .12s ease, background-color .15s ease; }
.app-tap:active { transform: scale(.94); }

/* Ubin ikon layanan (grid 4 kolom seperti referensi) */
.app-tile-ikon {
    width: 4rem; height: 4rem; border-radius: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--app-biru-muda); color: var(--app-biru);
    font-size: 1.5rem; box-shadow: inset 0 0 0 1px rgba(23,105,179,.08);
}

/* Bottom navigation dengan tombol tengah melayang */
.app-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 24px rgba(11,29,58,.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bottom-nav .nav-item { color: #94a3b8; }
.app-bottom-nav .nav-item.aktif { color: var(--app-biru); }
.app-fab {
    width: 4.5rem; height: 4.5rem; border-radius: 9999px;
    background: var(--app-biru); color: #fff;
    border: 5px solid #fff; box-shadow: 0 8px 22px rgba(23,105,179,.45);
    display: flex; align-items: center; justify-content: center;
    margin-top: -2.25rem;
}
/* Ruang kosong di bawah konten agar tidak tertutup bottom nav */
.app-nav-spacer { height: calc(5.5rem + env(safe-area-inset-bottom)); }

/* Scroll horizontal tanpa scrollbar */
.app-scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-scroll-x::-webkit-scrollbar { display: none; }

/* Bottom sheet (modal dari bawah) */
@keyframes app-sheet-naik { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 767px) { .app-sheet { animation: app-sheet-naik .32s cubic-bezier(.16,1,.3,1) both !important; } }

/* ---------- Desktop: dasbor web dengan tab di atas — dipakai dashboard.html & profil.html ---------- */
.d-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #e8eef5; }
.d-tabs { display: flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: #eef3f9; }
.d-tab { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: .92rem; color: #64748b; transition: background .15s, color .15s, box-shadow .15s; }
.d-tab:hover { color: #0b1d3a; }
.d-tab.aktif { background: #1769b3; color: #fff; box-shadow: 0 6px 16px -6px rgba(23,105,179,.7); }
.d-font { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
.d-kartu { background: #fff; border: 1px solid #e8eef5; border-radius: 1.5rem; box-shadow: 0 10px 30px -14px rgba(11,29,58,.14); }

@media (min-width: 768px) { .d-font-md { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; } }

/* ======================= MODE GELAP (html.gelap, diatur tema.js) =======================
   Memetakan kelas warna Tailwind yang dipakai halaman siswa ke palet gelap. */
html.gelap {
    --g-bg: #0b1422; --g-kartu: #121e31; --g-kartu2: #19283f; --g-kartu3: #22344f; --g-garis: #26384f;
    --g-teks: #e6eef8; --g-teks2: #b6c3d4; --g-teks3: #8697ae; --g-biru: #6cb4f5;
    --app-biru-muda: rgba(56,140,220,.16);
    color-scheme: dark;
}
html.gelap body, html.gelap .bg-\[\#f4f7fb\], html.gelap .bg-\[\#f8fafc\] { background-color: var(--g-bg) !important; }
html.gelap .bg-white { background-color: var(--g-kartu) !important; }
html.gelap .bg-white\/95, html.gelap .bg-white\/90 { background-color: rgba(18,30,49,.94) !important; }
html.gelap .bg-slate-50, html.gelap .bg-slate-100, html.gelap .bg-\[\#f4f8fd\] { background-color: var(--g-kartu2) !important; }
html.gelap .bg-slate-200 { background-color: var(--g-kartu3) !important; }
html.gelap .bg-slate-300 { background-color: #2e4260 !important; }
html.gelap .bg-\[\#e8f1fb\] { background-color: rgba(56,140,220,.16) !important; }
html.gelap .bg-emerald-50, html.gelap .bg-teal-50 { background-color: rgba(16,185,129,.14) !important; }
html.gelap .bg-emerald-100 { background-color: rgba(16,185,129,.22) !important; }
html.gelap .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; }
html.gelap .bg-amber-100 { background-color: rgba(245,158,11,.22) !important; }
html.gelap .bg-rose-50, html.gelap .bg-rose-100 { background-color: rgba(244,63,94,.14) !important; }
html.gelap .bg-violet-50, html.gelap .bg-purple-50, html.gelap .bg-indigo-50, html.gelap .bg-blue-50, html.gelap .bg-sky-50 { background-color: rgba(129,140,248,.14) !important; }

html.gelap .text-slate-900, html.gelap .text-slate-800, html.gelap .text-slate-700, html.gelap .text-\[\#0b1d3a\] { color: var(--g-teks) !important; }
html.gelap .text-slate-600, html.gelap .text-slate-500 { color: var(--g-teks2) !important; }
html.gelap .text-slate-400, html.gelap .text-slate-300 { color: var(--g-teks3) !important; }
html.gelap .text-\[\#1769b3\] { color: var(--g-biru) !important; }
html.gelap .border-slate-100, html.gelap .border-slate-200, html.gelap .border-slate-300, html.gelap .border-\[\#e8eef5\],
html.gelap .border-white, html.gelap .border-rose-100, html.gelap .border-amber-200 { border-color: var(--g-garis) !important; }
html.gelap .divide-y > * + * { border-color: var(--g-garis) !important; }

html.gelap input:not([type=radio]):not([type=checkbox]), html.gelap select, html.gelap textarea {
    background-color: var(--g-kartu2) !important; color: var(--g-teks) !important; border-color: var(--g-garis) !important;
}
html.gelap input::placeholder, html.gelap textarea::placeholder { color: var(--g-teks3) !important; }

/* Komponen bersama */
html.gelap .app-bottom-nav { background: var(--g-kartu); border-color: var(--g-garis); box-shadow: 0 -6px 24px rgba(0,0,0,.35); }
html.gelap .app-fab { border-color: var(--g-kartu); }
html.gelap .app-tile-ikon { color: var(--g-biru); box-shadow: inset 0 0 0 1px rgba(108,180,245,.12); }
html.gelap .d-header { background: rgba(11,20,34,.86); border-color: var(--g-garis); }
html.gelap .d-kartu, html.gelap .d-misi { background: var(--g-kartu); border-color: var(--g-garis); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
html.gelap .d-misi.terkunci { background: #0f1928; }
html.gelap .d-misi .d-misi-ikon { background: rgba(56,140,220,.16); color: var(--g-biru); }
html.gelap .d-misi.selesai .d-misi-ikon { background: rgba(16,185,129,.16); color: #34d399; }
html.gelap .d-misi.terkunci .d-misi-ikon { background: var(--g-kartu2); color: var(--g-teks3); }
html.gelap .glass-nav { background: rgba(11,20,34,.86) !important; border-color: var(--g-garis) !important; }
html.gelap .sd-kartu { background: var(--g-kartu); }
html.gelap .sd-judul { color: var(--g-teks); } html.gelap .sd-pesan { color: var(--g-teks2); }
html.gelap .sd-batal { background: var(--g-kartu2); color: var(--g-teks); }
html.gelap img[src*="macaya-wordmark-gelap"] { content: url("assets/macaya-wordmark-putih.png"); }
html.gelap ::-webkit-scrollbar-track { background: var(--g-bg); }
html.gelap ::-webkit-scrollbar-thumb { background: var(--g-kartu3); }

/* Gradasi terang di halaman depan (hero desktop) */
html.gelap .from-\[\#f4f8fd\] { background-image: linear-gradient(to bottom, #0f1b2e, var(--g-bg)) !important; }
html.gelap .from-\[\#dbeafb\] {
    background-image: linear-gradient(to bottom right, rgba(56,140,220,.24), #121e31 55%, rgba(244,63,94,.16)) !important;
    border-color: var(--g-garis) !important;
}
html.gelap [style*="radial-gradient(#0b1d3a"] { background-image: radial-gradient(#9fb6d4 1px, transparent 1px) !important; opacity: .08 !important; }
/* Tombol utama gelap di modal Masuk/Daftar -> biru agar tetap menonjol */
html.gelap #modalAuth .bg-slate-800, html.gelap #modalAuth .bg-slate-900 { background-color: #1769b3 !important; }