/* =========================================================
   GELAJIANEST — THEME CONFIG (1 file untuk semua halaman)
   Ubah warna di :root ini saja, otomatis berlaku ke semua.
   ========================================================= */
:root{
  --primary:      #C8102E;   /* merah Imlek (utama)        */
  --primary-dark: #8B0000;   /* maroon (gradient/aktif)    */
  --primary-700:  #a50d24;
  --gold:         #D4AF37;   /* emas aksen                 */
  --gold-soft:    #e9cf86;
  --cream:        #FDF0D5;
  --bg:           #FAF7F2;   /* latar konten (cream lembut)*/
  --sidebar-from: #3a1413;   /* sidebar gradient atas      */
  --sidebar-to:   #220a0a;   /* sidebar gradient bawah     */
}

/* ---------- Latar aplikasi ---------- */
.app-body{ background:var(--bg); }

/* ---------- SIDEBAR ---------- */
.app-sidebar{
  background:linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
  border-right:1px solid rgba(212,175,55,.16);
}
.sidebar-brand{
  background:rgba(0,0,0,.22);
  border-bottom:1px solid rgba(212,175,55,.20);
}
.sidebar-star{ color:var(--gold); }

.nav-link{
  display:flex; align-items:center; gap:.85rem;
  padding:.72rem .8rem; border-radius:.8rem;
  color:#e9cccc; font-weight:700; font-size:.875rem; letter-spacing:.01em;
  position:relative; transition:all .18s ease;
}
.nav-link svg{ width:1.4rem; height:1.4rem; flex-shrink:0; color:#c9a3a3; transition:color .18s ease; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link:hover svg{ color:var(--gold-soft); }
.nav-link.active{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; box-shadow:0 8px 22px -8px rgba(200,16,46,.75);
}
.nav-link.active svg{ color:#fff; }
.nav-link.active::before{
  content:""; position:absolute; left:-.75rem; top:50%; transform:translateY(-50%);
  width:4px; height:62%; border-radius:0 4px 4px 0; background:var(--gold);
}
.nav-logout{
  display:flex; align-items:center; gap:.85rem;
  padding:.72rem .8rem; border-radius:.8rem;
  color:#f0a8a8; font-weight:700; font-size:.875rem; transition:all .18s ease;
}
.nav-logout svg{ width:1.4rem; height:1.4rem; flex-shrink:0; }
.nav-logout:hover{ background:var(--primary); color:#fff; }
.nav-logout:hover svg{ color:#fff; }

.sidebar-scroll::-webkit-scrollbar{ width:5px; }
.sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.35); border-radius:10px; }

/* ---------- Tombol reusable (opsional) ---------- */
.btn-primary{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; font-weight:800; border-radius:.85rem;
  box-shadow:0 10px 22px -10px rgba(200,16,46,.6); transition:filter .15s ease, transform .1s ease;
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:active{ transform:scale(.98); }

/* ---------- SweetAlert2 ---------- */
.swal2-styled.swal2-confirm{ background-color:var(--primary)!important; border-radius:.75rem!important; font-weight:bold!important; }
.swal2-styled.swal2-cancel{ border-radius:.75rem!important; font-weight:bold!important; color:#334155!important; }
.swal2-popup{ border-radius:1.5rem!important; padding:2rem!important; }

/* ---------- Lonceng goyang ---------- */
@keyframes apniShake{0%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-15deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-10deg)}75%{transform:rotate(4deg)}100%{transform:rotate(0)}}
.lonceng-goyang{ animation:apniShake .6s ease-in-out infinite; transform-origin:top center; }