/* =========================================================
   SIMDA v2 — REDESIGN LAYER "MIHRAB"
   Sentuhan visual di atas sistem lama: lengkung mihrab (motif
   masjid dari logo DKM Albaihaqi) dipakai berulang sebagai
   elemen tanda tangan, dipadukan tipografi & palet baru.
   File ini dimuat PALING TERAKHIR agar bisa menimpa aturan lama
   tanpa mengubah HTML/JS struktural apa pun.
   ========================================================= */

/* ── Radius global sedikit lebih besar & hangat ── */
.card, .metric, .mach-card, .stat-card, .modal-box, .form-input,
.login-box, .absen-row, .chat-panel, .lap-classic, .chart-wrap,
.jurnal-card, .wp-child-card { border-radius: var(--rad2); }
.btn, .fg input, .fg select, .fg textarea, .login-inp,
.form-input, .search-inp, .tab-sub, .role-btn { border-radius: var(--rad); }

/* ── Kartu & panel: border lebih hangat + shadow lembut ── */
.stat-card, .card, .metric, .chart-wrap, .absen-row, .jurnal-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
[data-theme="light"] .stat-card,
[data-theme="light"] .card,
[data-theme="light"] .chart-wrap,
[data-theme="light"] .absen-row,
[data-theme="light"] .jurnal-card {
  box-shadow: 0 1px 3px rgba(90,62,17,.08);
}

/* ── Tombol utama: gradasi emas hangat, bukan warna solid ── */
.btn-primary, .btn-amber {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 100%);
  color:#1a1206;
  font-weight:700;
  box-shadow: 0 3px 10px rgba(224,169,64,.25);
}
.btn-primary:hover, .btn-amber:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(224,169,64,.32);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-amber { color:#fffaf0; }

.btn-teal { background:var(--teal-dim); color:var(--teal); border:1px solid rgba(207,157,79,.3); }
.btn-teal:hover { background:var(--teal); color:#1a1206; }
[data-theme="light"] .btn-teal:hover { color:#fffaf0; }

/* ── Login: logo tetap bulat (lingkaran) ── */
.login-logo-frame{
  width:88px;height:88px;
  border-radius:50%;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--bg3),var(--bg2));
  border:1px solid var(--bdr2);
  overflow:hidden;
  position:relative; z-index:1;
}
.login-logo-frame img{width:100%;height:100%;object-fit:cover}
.login-box{ position:relative; overflow:visible; padding-top:44px; }
.login-box::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:3px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  border-radius:2px;
}
/* Glow lembut di belakang logo — hanya terasa di layar penuh mobile */
.login-box::after{
  content:'';position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,var(--teal-dim) 0%,transparent 70%);
  pointer-events:none; z-index:0;
}
.login-logo{ text-align:center; font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:0; color:var(--txt); }
.login-sub{ text-align:center; }
.login-btn{
  background:linear-gradient(135deg,var(--amber),var(--amber2));
  color:#1a1206;font-weight:800;letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(224,169,64,.3);
}
.login-btn:hover{ filter:brightness(1.05); }
[data-theme="light"] .login-btn{ color:#fffaf0; }

/* ── Sidebar: logo tetap bulat (lingkaran), avatar pakai bingkai arch ── */
.sb-logo-frame{
  width:44px;height:44px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(160deg,var(--bg3),var(--bg2));
  border:1px solid var(--bdr2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sb-logo-frame img{ width:100%;height:100%;object-fit:cover; }
.sb-logo::after{
  content:'';position:absolute;bottom:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,var(--teal),transparent);
}

.avatar{
  clip-path:url(#simdaArch); -webkit-clip-path:url(#simdaArch);
  border-radius:0; border:none;
  background:linear-gradient(160deg,var(--teal2),var(--teal));
  color:#1a1206; font-weight:800;
}
[data-theme="light"] .avatar{ color:#2a1c06; }

/* ── Dashboard: header sapaan personal ala mockup mobile ── */
.dash-greet{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  background:linear-gradient(150deg,var(--bg2) 0%,var(--bg3) 100%);
  border:1px solid var(--bdr2); border-radius:var(--rad2);
  padding:18px 20px; margin-bottom:0;
}
.dash-greet-hello{ font-family:var(--mono); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--teal); font-weight:700; }
.dash-greet-name{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--txt); margin-top:3px; }
.dash-greet-role{ font-size:12px; color:var(--txt3); margin-top:2px; }
.dash-greet-date{ font-size:11px; color:var(--txt4); font-family:var(--mono); margin-top:8px; }
.dash-greet-avatar{
  flex-shrink:0; width:52px;height:60px;
  clip-path:url(#simdaArch); -webkit-clip-path:url(#simdaArch);
  background:linear-gradient(160deg,var(--teal2),var(--teal));
  color:#1a1206; font-weight:800; font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
[data-theme="light"] .dash-greet-avatar{ color:#2a1c06; }

/* ── Arch-strip: motif jendela masjid berulang, dipakai sebagai pemisah section ── */
.arch-strip{
  height:8px;width:100%;
  background-image:radial-gradient(circle at 8px -3px, transparent 6.5px, var(--bg0) 7px);
  background-size:16px 16px; background-repeat:repeat-x; background-position:0 0;
  background-color:var(--teal);
  border-radius:0 0 3px 3px;
  margin-bottom:18px; opacity:.85;
}

/* ── Dashboard: grid akses cepat "Menu Utama" dengan ikon lengkung mihrab ── */
.dash-menu-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px 8px;
  margin-bottom:22px;
}
.dash-menu-item{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer; text-align:center;
}
.dmi-icon{
  width:52px;height:58px;
  clip-path:url(#simdaArch); -webkit-clip-path:url(#simdaArch);
  background:var(--bg2); border:1px solid var(--bdr2);
  display:flex;align-items:center;justify-content:center;
  font-size:17px; color:var(--teal);
  transition:transform .15s, background .15s;
}
.dash-menu-item:hover .dmi-icon{ background:var(--teal-dim); transform:translateY(-2px); }
.dash-menu-item span{ font-size:11px; color:var(--txt2); font-weight:600; }
@media (max-width:480px){
  .dash-menu-grid{ grid-template-columns:repeat(4,1fr); gap:12px 4px; }
  .dmi-icon{ width:100%; max-width:56px; height:56px; font-size:16px; }
}

/* ── Absensi: progress bar & badge status sesi (mirip preview mobile) ── */
.sesi-progress{
  width:100%; max-width:220px; height:6px; border-radius:4px;
  background:var(--bdr); margin-top:7px; overflow:hidden;
}
.sesi-progress span{
  display:block; height:100%; width:var(--pct,0%); border-radius:4px;
  background:linear-gradient(90deg,var(--gold2,var(--teal2)),var(--teal));
}
.sesi-progress-label{ font-size:10.5px; color:var(--txt4); font-family:var(--mono); margin-top:4px; }
.badge-sesi{
  display:inline-block; padding:3px 10px; border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  font-family:var(--mono); white-space:nowrap;
}
.badge-sesi-selesai{ background:var(--green-dim); color:var(--green); }
.badge-sesi-jalan{ background:var(--teal-dim); color:var(--teal); }
.badge-sesi-kosong{ background:var(--bg3); color:var(--txt4); }

/* ── Nav item aktif: sedikit lebih tegas ── */
.nav-item.active{ font-weight:700; }

/* ── Topbar: garis motif lengkung tipis di bawahnya ── */
.topbar{
  position:sticky;top:0;
  background-image:
    radial-gradient(circle at 6px 100%, transparent 5px, var(--bg1) 5.5px);
  background-size:12px 6px;
  background-repeat:repeat-x;
  background-position:0 100%;
  padding-bottom:6px;
  height:calc(var(--th) + 6px);
}

/* ── Dashboard stat cards: aksen ikon bulat kecil ── */
.stat-card{ position:relative; padding-left:18px; }
.stat-card::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--teal);
}
.stat-card.stat-hadir::before{ background:var(--green); }
.stat-card.stat-sakit::before{ background:var(--yellow); }
.stat-card.stat-izin::before{  background:var(--blue); }
.stat-card.stat-alpa::before{  background:var(--red); }

/* ── Filter bar & tab-sub: jadi chip berbentuk pil hangat ── */
.tabs-sub{ gap:6px; }
.tab-sub{
  border:1px solid var(--bdr); background:var(--bg2);
  border-radius:100px !important; border-bottom:1px solid var(--bdr) !important;
}
.tab-sub.active{
  background:var(--teal-dim); border-color:var(--teal) !important;
}
.tab-sub:hover{ border-color:var(--bdr3) !important; }
.tab-sub.disabled{ opacity:.35; pointer-events:none; cursor:not-allowed; }

/* ── Bottom nav (mobile): indikator lengkung mihrab naik ── */
#bottom-nav{ background:var(--bg1); }
.bn-item{ position:relative; }
.bn-item.active{
  color:var(--teal) !important;
}
.bn-item.active::before{
  content:'';
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:44px; height:44px;
  clip-path:url(#simdaArch); -webkit-clip-path:url(#simdaArch);
  background:linear-gradient(160deg,var(--teal2),var(--teal));
  box-shadow:0 6px 16px rgba(207,157,79,.4);
  z-index:0;
}
.bn-item.active i{
  position:relative; z-index:1;
  margin-top:-16px;
  color:#1a1206 !important;
}
[data-theme="light"] .bn-item.active i{ color:#2a1c06 !important; }
.bn-item.active span{ position:relative; z-index:1; margin-top:9px; font-weight:700; }

/* ── FAB tambah (tombol melayang tambah data) jika ada kelas .fab ── */
.fab{
  background:linear-gradient(160deg,var(--amber),var(--amber2)) !important;
  box-shadow:0 8px 20px rgba(224,169,64,.35) !important;
}

/* ── Chat FAB & elemen ber-background var(--accent): teks gelap agar tetap kontras ── */
.chat-fab{ background:linear-gradient(160deg,var(--teal2),var(--teal)); color:#1a1206; }
[data-theme="light"] .chat-fab{ color:#2a1c06; }
.chat-msg.me,
.chat-send-btn,
.chat-mode-tab.active,
.chat-unread-dot,
.wp-jenis-btn.active,
.wp-anak-chip.active,
.wp-child-avatar{
  background:linear-gradient(160deg,var(--teal2),var(--teal)) !important;
  color:#1a1206 !important;
}
[data-theme="light"] .chat-msg.me,
[data-theme="light"] .chat-send-btn,
[data-theme="light"] .chat-mode-tab.active,
[data-theme="light"] .chat-unread-dot,
[data-theme="light"] .wp-jenis-btn.active,
[data-theme="light"] .wp-anak-chip.active,
[data-theme="light"] .wp-child-avatar{ color:#2a1c06 !important; }

/* ── Modal bottom-sheet (mobile): grip handle dekoratif ── */
@media (max-width:880px){
  .modal-box{ position:relative; }
  .modal-box::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:3px;background:var(--bdr3);
  }
}

/* ── Empty state ikon warna emas lembut ── */
.empty-state i{ color:var(--teal); opacity:.55; }

/* ── Scrollbar sidebar tema emas tipis (melengkapi update navbar-scroll) ── */
.sb-nav-scroll::-webkit-scrollbar-thumb{ background:var(--bg5); }
.sb-nav-scroll{ scrollbar-color:var(--bg5) transparent; }