/* ===========================
   Admin Sidebar + Buttons Polished
   Paste after Bootstrap and your current CSS
   =========================== */

/* ---------- Vars (pakai punyamu, tambah yg perlu) ---------- */
:root{
  --bg:#f6f7fb;--card:#fff;--text:#111;--muted:#65708a;--border:#e5e7ef;
  --pri:#2c7cf0;            /* ganti sesuai brandmu */
  --pri-ink:#0e2b66;
  --danger:#e23;
  --sidebar-bg:#ffffff;     /* bisa #0f172a untuk dark sidebar */
  --sidebar-ink:#1f2937;
  --sidebar-muted:#6b7280;
  --sidebar-border:#e5e7ef;
  --sidebar-active:#ecf2ff; /* background item aktif/hover */
  --ring:#b9d1ff;
}

/* ---------- Layout Sidebar ---------- */
#admin-sidebar{
  background:var(--sidebar-bg)!important;
  color:var(--sidebar-ink);
  border-right:1px solid var(--sidebar-border);
  position:sticky; top:56px; /* tinggi navbar kamu */
  height:calc(100vh - 56px);
  overflow:auto;
}

/* smooth scrollbar untuk sidebar */
#admin-sidebar::-webkit-scrollbar{width:10px}
#admin-sidebar::-webkit-scrollbar-thumb{background:#d7dcef;border-radius:8px;border:2px solid transparent;background-clip:content-box}
#admin-sidebar::-webkit-scrollbar-track{background:transparent}

/* container list */
#admin-sidebar .sidebar-sticky{padding:12px 10px}

/* section separator yang halus */
#admin-sidebar hr{
  border:0;border-top:1px dashed var(--sidebar-border);
  margin:10px 12px;
}

/* ---------- Item Nav ---------- */
#admin-sidebar .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem;
  margin:4px 6px;
  border-radius:10px;
  color:var(--sidebar-muted);
  font-weight:600;
  letter-spacing:.1px;
  transition:background .18s ease, color .18s ease, transform .12s ease;
  position:relative;
  text-decoration:none;
}

/* indikator bar kiri saat hover/active */
#admin-sidebar .nav-link::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:4px; background:transparent;
}

/* hover state */
#admin-sidebar .nav-link:hover{
  background:var(--sidebar-active);
  color:var(--sidebar-ink);
  transform:translateX(2px);
}
#admin-sidebar .nav-link:hover::before{ background:var(--pri); }

/* active state (tambahkan class 'active' di link yg sedang dibuka) */
#admin-sidebar .nav-link.active{
  background:var(--sidebar-active);
  color:var(--sidebar-ink);
  box-shadow:inset 0 0 0 1px rgba(44,124,240,.15);
}
#admin-sidebar .nav-link.active::before{ background:var(--pri); }

/* state fokus keyboard yang jelas */
#admin-sidebar .nav-link:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;
}

/* ukuran font agar padat elegan */
#admin-sidebar .nav-link{ font-size:.935rem; }
#admin-sidebar .nav-item + .nav-item{ margin-top:2px; }

/* ---------- Responsif ---------- */
@media (max-width: 767.98px){
  #admin-sidebar{
    position:static; top:auto; height:auto; max-height:60vh;
    border-right:none; border-bottom:1px solid var(--sidebar-border);
  }
  #admin-sidebar .nav-link{ margin:4px; }
}

/* ---------- Header Buttons (biar rapi tapi tetap Bootstrap-compatible) ---------- */
header.navbar .btn{
  border-radius:10px;
  padding:.425rem .7rem;
  font-weight:600;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
header.navbar .btn:active{ transform:translateY(1px); }

header.navbar .btn-outline-light{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.25);
}
header.navbar .btn-outline-light:hover{
  background:#fff;color:#111;border-color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
}

header.navbar .btn-danger{
  background:var(--danger); border-color:var(--danger);
}
header.navbar .btn-danger:hover{
  filter:brightness(1.08);
  box-shadow:0 6px 20px rgba(226, 51, 51, .25);
}

/* ---------- Global Button Polish (tanpa ganggu utilitas Bootstrap) ---------- */
.btn{
  border-radius:10px;
  font-weight:600;
  letter-spacing:.15px;
}
.btn:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* warna utama yang konsisten */
.btn-primary{
  background:var(--pri); border-color:var(--pri);
}
.btn-primary:hover{ filter:brightness(1.05); }

/* versi outline generik */
.btn-outline{
  background:#fff; color:var(--text);
  border:1px solid var(--border);
}
.btn-outline:hover{
  background:#f9fbff; border-color:#d6e3ff;
}

/* versi danger konsisten */
.btn-danger{
  background:var(--danger); border-color:var(--danger);
}
.btn-danger:hover{ filter:brightness(1.06); }

/* ukuran kecil enak buat header/toolbar */
.btn.btn-sm{ padding:.35rem .6rem; border-radius:9px; font-size:.85rem; }

/* ---------- Main area spacing ---------- */
main{
  background:var(--bg);
}
main .container-fluid, main .px-md-4{
  /* biar konten bernafas */
  padding-top:18px; padding-bottom:24px;
}

/* ---------- Kartu/section umum (opsional, kalau kamu pakai .card custom) ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}


div#adminOffcanvas {
    max-width: 80%;
    /*margin-bottom: 50px;*/
}

.shadow-sm {
    /* box-shadow: var(--bs-box-shadow-sm) !important; */
    padding: 0;
}

/* Matikan semua bayangan di admin */
.shadow, .shadow-sm, .shadow-lg,
.navbar, .alert, .card, .offcanvas, .dropdown-menu,
.sp-quickbar {
  box-shadow: none !important;
}


/* ====== Hilangkan background box pada banner ====== */
.alert {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ====== Warna badge sesuai plan ====== */
.badge.text-bg-secondary { 
  background: transparent !important;
  color: #64748b !important; /* abu untuk FREE */
  border: 1px solid #64748b !important;
}

.badge.text-bg-secondary::before {
  /*content: "● ";*/
  color: #64748b;
}

.alert .badge.text-bg-secondary:contains("PRO") {
  color: #2563eb !important; /* biru */
  border-color: #2563eb !important;
}

.alert .badge.text-bg-secondary:contains("ENTERPRISE") {
  color: #facc15 !important; /* emas */
  border-color: #facc15 !important;
}


.alert{background:transparent!important;border:none!important;box-shadow:none!important}
.alert-detail{padding:10px;border:1px solid var(--bs-alert-border-color);background:var(--bs-alert-bg);color:var(--bs-alert-color);border-radius:10px}
.alert-detail .progress{margin-top:6px;height:8px}


a.badge.text-bg-light.ms-2.text-decoration-none {background: transparent !important;color: #64748b !important;border: 1px solid #64748b !important;}

div#renewDetail {
    border-bottom: 1px solid #64748b !important;
    border-left: 1px solid #64748b !important;
    border-radius: 12px;
    background: transparent !important;
    /* color: #64748b !important; */
    /* border: 1px solid #64748b !important; */
    padding: 10px;
}

.alert_free{background: var(--bs-alert-bg) !important;border:none!important;box-shadow:none!important;padding: 6px;border-radius: 10px;margin-bottom: 10px;}
.alert-detail{padding:10px;border:1px solid var(--bs-alert-border-color);background:var(--bs-alert-bg);color:var(--bs-alert-color);border-radius:10px;}
.alert-detail .progress{margin-top:6px;height:8px}