/* =====================================================================
   BIRU APP (3.84.0) — claymorphism biru untuk dashboard admin & portal
   guru / murid / orang tua.

   Dimuat SETELAH identitas-app.css. Mengembalikan permukaan clay yang lembut
   (bayangan timbul dan lekuk), tetapi bertint biru lambang (#1e4d7b), bukan ungu-abu
   dan bukan garis hitam keras. Tombol, ikon, lencana, dan item aktif memakai biru.
   Ringkasan dashboard di bagian bawah diberi jarak dan ritme yang lebih rapi.
   Tidak menyentuh JS/API. Untuk kembali: hapus <link> biru-app.css.
   ===================================================================== */

:root, html {
  --biru: #1e4d7b;
  --biru-tua: #143554;
  --biru-muda: #3a7ab5;
  --biru-soft: #e8f1f8;
  --biru-pucat: #f4f8fc;

  --cl-canvas: #e6eef6;
  --cl-surface: #f4f8fc;
  --cl-surface-hi: #ffffff;
  --cl-well: #d9e5f0;
  --cl-ink: 20, 53, 84;
  --cl-ink-shadow: 20, 53, 84;
  --cl-kartu: linear-gradient(150deg, #ffffff 0%, #f0f6fb 100%);
  --cl-kartu-hi: linear-gradient(150deg, #ffffff 0%, #f6fafd 100%);
  --kertas: #e6eef6;
  --r-s: 14px;
  --r-m: 22px;

  --clay-timbul:
    inset 3px 3px 6px rgba(255, 255, 255, 0.95),
    inset -4px -5px 10px rgba(20, 53, 84, 0.1),
    10px 14px 26px -12px rgba(20, 53, 84, 0.36),
    -6px -6px 14px rgba(255, 255, 255, 0.85);
  --clay-kecil:
    inset 2px 2px 4px rgba(255, 255, 255, 0.95),
    inset -3px -4px 8px rgba(20, 53, 84, 0.1),
    6px 8px 14px -8px rgba(20, 53, 84, 0.34),
    -3px -3px 8px rgba(255, 255, 255, 0.8);
  --clay-lekuk: inset 5px 5px 10px rgba(20, 53, 84, 0.16), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
  --clay-tekan: inset 4px 4px 9px rgba(20, 53, 84, 0.28), inset -2px -2px 5px rgba(255, 255, 255, 0.5);
  --clay-gelap:
    inset 2px 2px 4px rgba(255, 255, 255, 0.28),
    inset -4px -5px 10px rgba(7, 20, 31, 0.45),
    8px 12px 20px -10px rgba(20, 53, 84, 0.6);
  --clay-putih:
    inset 2px 2px 4px #fff, inset -4px -5px 10px rgba(20, 53, 84, 0.14),
    8px 12px 20px -10px rgba(7, 20, 31, 0.6);
}

html[data-tema="gelap"] {
  --cl-canvas: #0f2233;
  --cl-surface: #17314a;
  --cl-surface-hi: #1b3a58;
  --cl-well: #0a1a28;
  --cl-kartu: linear-gradient(150deg, #1b3a58 0%, #152d45 100%);
  --cl-kartu-hi: linear-gradient(150deg, #20425f 0%, #1a3652 100%);
  --kertas: #0f2233;
  --clay-timbul: inset 2px 2px 4px rgba(140, 196, 236, 0.14), inset -4px -5px 10px rgba(0, 0, 0, 0.35), 10px 14px 24px -12px rgba(0, 0, 0, 0.7);
  --clay-kecil: inset 2px 2px 3px rgba(140, 196, 236, 0.12), inset -3px -4px 8px rgba(0, 0, 0, 0.32), 6px 8px 14px -8px rgba(0, 0, 0, 0.7);
  --clay-lekuk: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -3px -3px 7px rgba(140, 196, 236, 0.1);
  --clay-tekan: inset 4px 4px 9px rgba(0, 0, 0, 0.55);
  --clay-gelap: inset 2px 2px 4px rgba(140, 196, 236, 0.2), inset -4px -5px 10px rgba(0, 0, 0, 0.5), 8px 12px 20px -10px rgba(0, 0, 0, 0.7);
  --clay-putih: var(--clay-gelap);
}

body { background: var(--cl-canvas); }

/* ---------- Bilah atas / sisi: biru tua, ujung membulat lembut ---------- */
.topbar, .side { background: linear-gradient(180deg, var(--biru) 0%, var(--biru-tua) 100%); border: 0; box-shadow: 0 10px 24px -14px rgba(20, 53, 84, 0.7); }
.side nav a[aria-current="page"], .side nav a.is-active { background: #fff; color: var(--biru-tua); box-shadow: var(--clay-kecil); }
.side nav a:hover { background: rgba(255, 255, 255, 0.12); }
.tabbar { background: #fff; border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 24px -14px rgba(20, 53, 84, 0.45); }
.tabbar [aria-current="page"], .tabbar .is-active { color: var(--biru); }
.tabbar [aria-current="page"] .icon, .tabbar .is-active .icon, .tabbar [aria-current="page"] svg { color: var(--biru); stroke: var(--biru); }

/* ---------- Kartu: clay biru ---------- */
.card, .akad-card, .item, .ringkas-item, .tabel-wrap, .peng-kartu {
  background: var(--cl-kartu); border: 0; border-radius: var(--r-m); box-shadow: var(--clay-timbul);
}
.card .item, .card .akad-card, .card .ringkas-item, .card .peng-kartu { box-shadow: var(--clay-kecil); border-radius: 18px; }
html[data-tema="gelap"] .card, html[data-tema="gelap"] .akad-card { background: var(--cl-kartu); border: 0; box-shadow: var(--clay-timbul); }
.card-judul, .card h2 { color: var(--biru-tua); }
html[data-tema="gelap"] .card-judul, html[data-tema="gelap"] .card h2 { color: #fff; }
.kosong { background: var(--cl-well); border: 0; box-shadow: var(--clay-lekuk); color: #2b4257; }
html[data-tema="gelap"] .kosong { color: #c9dcea; }

/* ---------- Tombol: biru solid, timbul ---------- */
.btn { border: 0; border-radius: 16px; box-shadow: var(--clay-kecil); transform: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--clay-kecil); }
.btn:active { transform: none; box-shadow: var(--clay-tekan); }
.btn, .btn-emas { background: linear-gradient(180deg, var(--biru-muda) 0%, var(--biru) 100%); color: #fff; box-shadow: var(--clay-gelap); }
.btn:hover, .btn-emas:hover { background: linear-gradient(180deg, var(--biru) 0%, var(--biru-tua) 100%); color: #fff; }
.btn-garis { background: var(--cl-kartu); color: var(--biru-tua); border: 0; box-shadow: var(--clay-kecil); }
.btn-garis:hover { background: var(--cl-kartu-hi); }
.btn-bahaya { background: var(--cl-kartu); color: var(--bahaya, #a63232); border: 0; box-shadow: var(--clay-kecil); }
.btn-solid-bahaya { background: var(--bahaya, #a63232); color: #fff; border: 0; box-shadow: var(--clay-gelap); }
.topbar .btn, .topbar-aksi .btn, .side .btn, .btn-terang, .btn-keluar { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.4); }

/* ---------- Isian: melesak ---------- */
.input, .textarea, .select { background: var(--cl-well); border: 0; border-radius: 16px; box-shadow: var(--clay-lekuk); }
.input:focus, .textarea:focus, .select:focus { background: #fff; outline: 3px solid rgba(58, 122, 181, 0.45); box-shadow: var(--clay-lekuk); }
html[data-tema="gelap"] .input, html[data-tema="gelap"] .textarea, html[data-tema="gelap"] .select { background: #0a1a28; }
.login .login-card .input, .login .login-card .input:hover { box-shadow: none; border-radius: 14px; }
.login .login-card { background: linear-gradient(180deg, var(--biru) 0%, var(--biru-tua) 100%); border: 0; border-radius: 28px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7); }
.login .login-card .btn { border: 0; box-shadow: var(--clay-putih); border-radius: 16px; }
.login { background: var(--biru-tua) var(--pola); }

/* ---------- Ringkasan dashboard (kartu angka + bagian bawah) ---------- */
.ringkas { gap: 14px; margin-bottom: 28px; }
.ringkas-item { padding: 18px 18px 16px; gap: 4px; }
.ringkas-label { color: #2b4257; font-weight: 600; }
.ringkas-nilai { color: var(--biru-tua); font-size: clamp(1.5rem, 5vw, 1.9rem); }
.ringkas-item.sorot { background: linear-gradient(160deg, var(--biru-muda) 0%, var(--biru-tua) 100%); box-shadow: var(--clay-gelap); }
.ringkas-item.sorot .ringkas-label, .ringkas-item.sorot .ringkas-ket { color: #e3eef8; }
.ringkas-item.sorot .ringkas-nilai { color: #fff; }
html[data-tema="gelap"] .ringkas-label { color: #c9dcea; }
html[data-tema="gelap"] .ringkas-nilai { color: #fff; }
.ringkas-bawah { gap: 20px; margin-top: 4px; margin-bottom: 28px; }
.ringkas-bawah .card { padding: 22px 22px 20px; }
.ringkas-bawah .card + .card { margin-top: 0; }
.ringkas-kaki { margin-top: 22px; color: #2b4257; }
.card + .card, .card + .ringkas-bawah, .ringkas-bawah:not(:empty) + .bagian-website { margin-top: 20px; }
.status { border: 0; border-radius: 999px; box-shadow: var(--clay-kecil); padding-inline: 12px; }
dialog.sheet { border: 0; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(20, 53, 84, 0.6); }
.toast { background: var(--biru-tua); border: 0; border-radius: 18px; box-shadow: var(--clay-gelap); }
.login .login-tabs { border: 0; box-shadow: var(--clay-lekuk); }

@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }