/* =====================================================================
   IDENTITAS LAMBANG — dashboard admin + portal guru/murid/orang tua (3.82.4)

   Sama dengan identitas.css di situs publik: biru lambang #1e4d7b yang datar,
   garis tegas, bayangan keras, segi lima. Menggantikan tint ungu-abu clay.
   Dimuat PALING AKHIR. Hanya gaya; fitur/JS/API tidak berubah.
   Untuk kembali: hapus <link> identitas-app.css.
   ===================================================================== */

:root, html, html[data-tema="gelap"] {
  --lg-biru: #1e4d7b;
  --lg-biru-tua: #143554;
  --lg-tinta: #0b1d2e;
}

:root, html {
  --cl-canvas: #eef3f7;
  --cl-surface: #ffffff;
  --cl-surface-hi: #ffffff;
  --cl-well: #e4ecf3;
  --cl-ink: 11, 29, 46;
  --cl-ink-shadow: 11, 29, 46;
  --cl-hi: 255, 255, 255;
  --cl-kartu: linear-gradient(#fff, #fff);
  --cl-kartu-hi: linear-gradient(#fff, #fff);
  --kertas: #eef3f7;
  --emas: #1e4d7b;
  --emas-terang: #3a6a8c;
  --emas-tua: #143554;
  --r-s: 10px;
  --r-m: 14px;

  --clay-timbul: 0 0 0 2px #0b1d2e, 4px 4px 0 #0b1d2e;
  --clay-kecil: 0 0 0 1.5px #0b1d2e, 2px 2px 0 #0b1d2e;
  --clay-lekuk: inset 0 0 0 2px rgba(11, 29, 46, 0.35);
  --clay-tekan: 0 0 0 2px #0b1d2e, 0 0 0 0 #0b1d2e;
  --clay-gelap: 0 0 0 2px #0b1d2e, 3px 3px 0 #0b1d2e;
  --clay-putih: 0 0 0 2px #0b1d2e, 3px 3px 0 #0b1d2e;
}

/* tema gelap: tetap biru lambang, bukan hitam keunguan */
html[data-tema="gelap"] {
  --cl-canvas: #0f2233;
  --cl-surface: #17314a;
  --cl-surface-hi: #143554;
  --cl-well: #0a1a28;
  --cl-ink: 0, 0, 0;
  --cl-kartu: linear-gradient(#17314a, #17314a);
  --cl-kartu-hi: linear-gradient(#143554, #143554);
  --kertas: #0f2233;
  --clay-timbul: 0 0 0 2px #8cc4ec, 4px 4px 0 #000;
  --clay-kecil: 0 0 0 1.5px #8cc4ec, 2px 2px 0 #000;
  --clay-lekuk: inset 0 0 0 2px rgba(140, 196, 236, 0.35);
  --clay-tekan: 0 0 0 2px #8cc4ec, 0 0 0 0 #000;
  --clay-gelap: 0 0 0 2px #8cc4ec, 3px 3px 0 #000;
  --clay-putih: 0 0 0 2px #8cc4ec, 3px 3px 0 #000;
}

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

/* ---------- Bilah atas, sisi, login: biru lambang datar ---------- */
.topbar, .side { background: var(--lg-biru-tua); border-radius: 0; box-shadow: none; border-bottom: 3px solid var(--lg-tinta); }
.side { border-bottom: 0; border-right: 3px solid var(--lg-tinta); }
.login { background: var(--lg-biru-tua) var(--pola); }
.login::before, .login::after { display: none !important; }
.login .login-card {
  background: var(--lg-biru); color: #fff; border: 2px solid #fff;
  border-radius: 14px; box-shadow: 8px 8px 0 #000; animation: none;
}
.login .login-card::before { display: none; }
.login .login-card img { filter: none; animation: none; }
.login .login-card h1 { color: #fff; }
.login .login-card .sub { color: #dbe8f2; }
.login .login-card .field-label { color: #fff; }
.login .login-card .field-help { color: #c9dcea; }
.login .login-card .input, .login .login-card .input:hover {
  background: #fff; color: var(--lg-tinta); caret-color: var(--lg-tinta);
  border: 2px solid var(--lg-tinta); border-radius: 10px; box-shadow: none;
}
.login .login-card .input:focus { background: #fff; border-color: #8cc4ec; box-shadow: 0 0 0 3px rgba(140, 196, 236, 0.55); }
.login .login-card .input::placeholder { color: #52667a; }
.login .login-card .input:-webkit-autofill { -webkit-text-fill-color: var(--lg-tinta); box-shadow: 0 0 0 1000px #fff inset; }
.login .login-card .btn {
  background: #fff; color: var(--lg-tinta); border: 2px solid var(--lg-tinta);
  box-shadow: 3px 3px 0 #000; font-weight: 700;
}
.login .login-card .btn:hover:not(:disabled) { background: #e4ecf3; border-color: var(--lg-tinta); box-shadow: 4px 4px 0 #000; }
.login .login-card .btn:active:not(:disabled) { box-shadow: 0 0 0 #000; }
.login-bantuan, .login-bantuan a { color: #fff; }

.side nav a { border-radius: 8px; }
.side nav a[aria-current="page"], .side nav a.is-active {
  background: #fff; color: var(--lg-biru-tua); box-shadow: 3px 3px 0 var(--lg-tinta);
}

/* ---------- Tabbar bawah (HP) ---------- */
.tabbar { background: #fff; border-top: 3px solid var(--lg-biru); box-shadow: none; }
.tabbar [aria-current="page"], .tabbar .is-active { color: var(--lg-biru); font-weight: 700; }

/* ---------- Kartu & tombol ---------- */
.card, .akad-card {
  background: #fff; border: 2px solid var(--lg-tinta); border-radius: 14px; box-shadow: 4px 4px 0 var(--lg-tinta);
}
html[data-tema="gelap"] .card, html[data-tema="gelap"] .akad-card {
  background: var(--cl-surface); border-color: #8cc4ec; box-shadow: 4px 4px 0 #000;
}
.card-judul, .card h2 { color: var(--lg-biru-tua); }
html[data-tema="gelap"] .card-judul, html[data-tema="gelap"] .card h2 { color: #fff; }

.btn {
  border: 2px solid var(--lg-tinta); border-radius: 10px; font-weight: 700;
  box-shadow: 3px 3px 0 var(--lg-tinta); transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--lg-tinta); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--lg-tinta); }
.btn, .btn-emas { background: var(--lg-biru); color: #fff; border-color: var(--lg-tinta); }
.btn:hover, .btn-emas:hover { background: var(--lg-biru-tua); border-color: var(--lg-tinta); color: #fff; }
.btn-garis { background: #fff; color: var(--lg-tinta); border-color: var(--lg-tinta); }
.btn-garis:hover { background: #e4ecf3; border-color: var(--lg-tinta); }
.btn-bahaya { background: #fff; color: var(--bahaya, #a63232); border-color: var(--bahaya, #a63232); box-shadow: 3px 3px 0 var(--bahaya, #a63232); }
.btn-solid-bahaya { background: var(--bahaya, #a63232); color: #fff; border-color: #5c1a1a; box-shadow: 3px 3px 0 #5c1a1a; }
.topbar .btn, .topbar-aksi .btn, .side .btn, .btn-terang, .btn-keluar {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); box-shadow: none;
}
.topbar .btn:hover, .topbar-aksi .btn:hover, .btn-terang:hover, .btn-keluar:hover { background: rgba(255, 255, 255, 0.14); transform: none; box-shadow: none; }

/* ---------- Isian ---------- */
.input, .textarea, .select {
  background: #fff; border: 2px solid rgba(11, 29, 46, 0.45); border-radius: 10px; box-shadow: none;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--lg-biru); outline: 3px solid rgba(40, 77, 103, 0.3); outline-offset: 0; box-shadow: none;
}
html[data-tema="gelap"] .input, html[data-tema="gelap"] .textarea, html[data-tema="gelap"] .select {
  background: #0a1a28; border-color: rgba(140, 196, 236, 0.5);
}

/* ---------- Dialog, toast, status ---------- */
dialog.sheet { border: 2px solid var(--lg-tinta); border-radius: 16px; box-shadow: 8px 8px 0 var(--lg-tinta); }
.toast { background: var(--lg-tinta); border: 2px solid #fff; border-radius: 10px; box-shadow: 3px 3px 0 #000; }
.status { border-radius: 8px; border: 2px solid currentColor; }

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

/* toggle peran di login admin */
.login .login-tabs { background: rgba(0, 0, 0, 0.25); border: 2px solid #fff; border-radius: 10px; box-shadow: none; }
.login .login-tab { border-radius: 7px; box-shadow: none; color: #fff; }
.login .login-tab.is-active, .login .login-tab[aria-selected="true"] { background: #fff; color: var(--lg-tinta); box-shadow: none; font-weight: 700; }