/* =====================================================================
   CALMS — Stylesheet bersama (Fase 1)
   Diekstrak dari index.html agar tampilan konsisten di semua halaman
   dan tidak perlu di-copy inline lagi. Impor sekali per halaman:
     <link rel="stylesheet" href="calms.css">
   ===================================================================== */

/* ---------- Tipografi ---------- */
.brand { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }

/* ---------- Glass card (dipakai lintas modul) ---------- */
.calms-card,
.card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.06);
}
.dark .calms-card,
.dark .card {
  background: rgba(17,24,39,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.4);
}

/* ============= SIDEBAR BERSAMA ============= */
#calms-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 16rem; z-index: 40;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(15,23,42,0.06);
  transform: translateX(-100%);
  transition: transform .2s ease;
}
#calms-sidebar.open { transform: none; }
.dark #calms-sidebar {
  background: rgba(8,11,21,0.92);
  border-right: 1px solid rgba(255,255,255,0.06);
}

/* Konten digeser ke kanan sidebar pada layar besar; sidebar selalu tampil */
@media (min-width: 1024px) {
  #calms-sidebar { transform: none; }
  body.calms-has-sidebar { padding-left: 16rem; }
}

/* Backdrop untuk mobile */
#calms-sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 39; display: none;
}
#calms-sidebar-backdrop.open { display: block; }
@media (min-width: 1024px) { #calms-sidebar-backdrop { display: none !important; } }

/* Tombol hamburger (mobile) */
#calms-sidebar-toggle {
  position: fixed; top: 12px; left: 12px; z-index: 41;
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 2px 8px rgba(15,23,42,0.08); cursor: pointer;
}
.dark #calms-sidebar-toggle { background: rgba(17,24,39,0.9); border-color: rgba(255,255,255,0.08); color:#e2e8f0; }
@media (min-width: 1024px) { #calms-sidebar-toggle { display: none; } }

/* ---------- Nav item ---------- */
.nav-item { transition: all .2s ease; border-radius: 10px; }
.nav-item:hover { background: rgba(99,102,241,0.08); color: #4f46e5; }
.dark .nav-item:hover { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.12));
  color: #4f46e5; font-weight: 600; box-shadow: inset 3px 0 0 #6366f1;
}
.dark .nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(168,85,247,0.25));
  color: #c7d2fe; box-shadow: inset 3px 0 0 #818cf8;
}

/* ---------- Toast bersama ---------- */
#calms-toast-wrap {
  position: fixed; top: 16px; right: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
}
.calms-toast {
  padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.3); animation: calms-toast-in .18s ease;
  max-width: 340px;
}
.calms-toast.success { background: #059669; }
.calms-toast.error   { background: #e11d48; }
.calms-toast.info    { background: #4f46e5; }
@keyframes calms-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }