/* =====================================================================
   Sidebar (RankASN) — modern, elegant, responsive (LIGHT THEME)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --rs-sidebar-w: 264px;
  --rs-collapsed-w: 76px;
  --rs-radius: 18px;

  /* ===== LIGHT THEME (default selalu terang) ===== */
  --rs-bg: #ffffff;          /* background utama sidebar */
  --rs-bg-soft: #f8fafc;     /* variasi background lembut */
  --rs-border: #e2e8f0;      /* garis pembatas halus */
  --rs-text: #0f172a;        /* teks utama (biru tua / hampir hitam) */
  --rs-text-dim: #64748b;    /* teks sekunder (abu kebiruan) */
  --rs-primary: #2563eb;     /* biru utama (brand-ish) */
  --rs-primary-900: #1e3a8a; /* biru tua untuk logo box */
  --rs-hover: rgba(15,23,42,.03);   /* hover sangat lembut */
  --rs-active: rgba(129,140,248,.16); /* latar menu aktif */
  --rs-shadow: 0 10px 30px rgba(15,23,42,.06);

  /* scrollbar (netral) */
  --rs-sb-size: 10px;
  --rs-sb-thumb: rgba(148,163,184,.55);
  --rs-sb-thumb-hover: rgba(100,116,139,.85);
  --rs-sb-track: transparent;

  /* content gutter */
  --rs-content-gap: clamp(12px, 1.2vw, 22px);

  /* tinggi tombol hamburger (untuk sejajar headbar) */
  --rs-hamb-h: 40px;

  /* jembatan ke variabel headbar (punya default jika tak ada) */
  --rs-head-gap: var(--gap, 16px);
  --rs-head-h: var(--header-h, 64px);
}

/* ---------- Global reset penting ---------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }

/* Firefox scrollbar (global) */
body{
  scrollbar-width:thin;
  scrollbar-color:var(--rs-sb-thumb) var(--rs-sb-track);
}
/* WebKit scrollbar (global) */
body::-webkit-scrollbar{
  width:var(--rs-sb-size);
  height:var(--rs-sb-size);
}
body::-webkit-scrollbar-track{
  background:var(--rs-sb-track);
}
body::-webkit-scrollbar-thumb{
  background-color:var(--rs-sb-thumb);
  border-radius:999px;
  background-clip:padding-box;
  border:3px solid transparent;
}
body::-webkit-scrollbar-thumb:hover{
  background-color:var(--rs-sb-thumb-hover);
}
body::-webkit-scrollbar-corner{
  background:transparent;
}

/* ---------- Body padding terhadap sidebar (DESKTOP SAJA) ---------- */
@media (min-width:1025px){
  body.rs-has-sidebar{
    padding-left: calc(var(--rs-sidebar-w) + var(--rs-content-gap)) !important;
  }
  body.rs-sidebar-collapsed{
    padding-left: calc(var(--rs-collapsed-w) + var(--rs-content-gap)) !important;
  }
}
@media (max-width:1024px){
  body.rs-has-sidebar,
  body.rs-sidebar-collapsed{
    padding-left: 0 !important;
  }
}
body.rs-no-sidebar{
  padding-left:0 !important;
}

/* ---------- Sidebar ---------- */
.rs-sidebar{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  width: var(--rs-sidebar-w);
  min-width: var(--rs-sidebar-w);
  background: linear-gradient(180deg, var(--rs-bg) 0%, var(--rs-bg-soft) 100%);
  color: var(--rs-text);
  border-right: 1px solid var(--rs-border);
  box-shadow: var(--rs-shadow);
  z-index: 1000; /* di atas header & overlay */
  display:flex;
  flex-direction:column;
  transition: width .25s ease, transform .30s ease;
  will-change: transform;
}

/* Collapsed width HANYA di desktop */
@media (min-width:1025px){
  /* kunci lebar agar tidak melebar */
  .rs-sidebar{
    width: var(--rs-sidebar-w);
    min-width: var(--rs-sidebar-w);
    max-width: var(--rs-sidebar-w);
  }
  body.rs-sidebar-collapsed .rs-sidebar{
    width: var(--rs-collapsed-w);
    min-width: var(--rs-collapsed-w);
    max-width: var(--rs-collapsed-w);
  }
}

/* ---------- TAHAP B: Mobile Drawer Fix (off-canvas) ---------- */
@media (max-width:1024px){
  .rs-sidebar{
    transform: translate3d(-100%,0,0);
    height: 100dvh;
  }
  /* buka: dukung class di BODY dan HTML + paksa prioritas */
  body.rs-sidebar-open .rs-sidebar,
  html.rs-sidebar-open .rs-sidebar{
    transform: translate3d(0,0,0) !important;
  }

  /* overlay: animasi & klik-untuk-tutup */
  .rs-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.36);
    z-index: 990;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    display: block; /* tampil, tapi nonaktif saat closed */
  }
  body.rs-sidebar-open .rs-overlay,
  html.rs-sidebar-open .rs-overlay{
    opacity: 1;
    pointer-events: auto;
  }
}
/* Di desktop, overlay jangan pernah tampil */
@media (min-width:1025px){
  .rs-overlay{
    display:none !important;
  }
}

/* ---------- Brand ---------- */
.rs-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--rs-border);
}
.rs-brand img{
  height:30px;
  width:auto;
  display:block;
}
.rs-brand .rs-logo-fallback{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--rs-primary-900);
  border:1px solid rgba(37, 99, 235, 0.25);
  font-weight:700;
  color:var(--rs-primary);
}
.rs-brand .rs-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}
@media (min-width:1025px){
  body.rs-sidebar-collapsed .rs-brand .rs-title{
    display:none;
  }
}

/* ---------- Scroll area (sidebar menu) ---------- */
.rs-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:scroll;
  padding:12px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--rs-sb-thumb) transparent;
}
.rs-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.rs-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.rs-scroll::-webkit-scrollbar-thumb{
  background-color:var(--rs-sb-thumb);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
.rs-scroll::-webkit-scrollbar-thumb:hover{
  background-color:var(--rs-sb-thumb-hover);
}

/* ---------- Nav ---------- */
.rs-group{
  margin:12px 8px 6px;
  font-size:11px;
  letter-spacing:.6px;
  color:var(--rs-text-dim);
  text-transform:uppercase;
}
.rs-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rs-item > a,
.rs-item > button.rs-collapse{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--rs-text);
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  transition: background .15s ease, border-color .2s ease;
}
.rs-item > a:hover,
.rs-item > button.rs-collapse:hover{
  background:var(--rs-hover);
}

.rs-item.active > a{
  background:var(--rs-active);
  border-color:rgba(37, 99, 235, .45);
}
.rs-ic{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
  opacity:.9;
}

/* Submenu (opsional) */
.rs-sub{
  display:none;
  margin-left:16px;
  padding-left:8px;
  border-left:1px dashed var(--rs-border);
}
.rs-item.open .rs-sub{
  display:block;
}
.rs-sub a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--rs-text);
  text-decoration:none;
}
.rs-sub a:hover{
  background:var(--rs-hover);
}
.rs-bullet{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--rs-primary);
  opacity:.65;
  transform:scale(.8);
}
.rs-sub a.active{
  background:var(--rs-active);
  border:1px solid rgba(37, 99, 235, 0.35);
}

/* Collapsed: ikon saja (DESKTOP SAJA) */
@media (min-width:1025px){
  body.rs-sidebar-collapsed .rs-text{
    display:none;
  }
  body.rs-sidebar-collapsed .rs-group{
    display:none;
  }
  body.rs-sidebar-collapsed .rs-item .rs-chevron{
    display:none;
  }
  body.rs-sidebar-collapsed .rs-sub{
    display:none !important;
  }
  body.rs-sidebar-collapsed .rs-scroll{
    padding:12px 8px;
  }
  body.rs-sidebar-collapsed .rs-item > a,
  body.rs-sidebar-collapsed .rs-item > button.rs-collapse{
    justify-content:center;
  }
}

/* ---------- Footer ---------- */
.rs-foot{
  margin-top:auto;
  padding:12px;
  border-top:1px solid var(--rs-border);
  display:flex;
  gap:8px;
}
.rs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--rs-border);
  background:transparent;
  color:var(--rs-text);
  cursor:pointer;
}
.rs-btn:hover{
  background:var(--rs-hover);
}

/* ---------- Hamburger & overlay ---------- */
.rs-hamburger{
  position:fixed;
  left:12px;
  top: calc(var(--rs-head-gap) + (var(--rs-head-h) - var(--rs-hamb-h)) / 2);
  width:var(--rs-hamb-h);
  height:var(--rs-hamb-h);
  border-radius:12px;
  background:var(--rs-bg);
  color:var(--rs-text);
  border:1px solid var(--rs-border);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1001; /* di atas sidebar & overlay agar bisa menutup */
  transition:top .2s ease;
}
/* Tampilkan hanya ≤1024px (mobile/tablet) */
@media (max-width:1024px){
  .rs-hamburger{
    display:flex;
  }
}

/* ---------- Kompatibilitas layout lama ---------- */
body.rs-has-sidebar aside.sidebar:not(.rs-sidebar),
body.rs-has-sidebar .left-sidebar,
body.rs-has-sidebar .sidenav{
  display:none !important;
}

body.rs-has-sidebar .app,
body.rs-has-sidebar .layout,
body.rs-has-sidebar .page,
body.rs-has-sidebar .content,
body.rs-has-sidebar .container,
body.rs-has-sidebar main{
  margin-left:0 !important;
  padding-left:0 !important;
  border-left:0 !important;
}

/* Kelas util */
.rs-fix-grid{
  display:block !important;
  grid-template-columns:1fr !important;
}
.rs-fix-ml{
  margin-left:0 !important;
}
.rs-fix-pl{
  padding-left:0 !important;
}

/* ---------- Header toggle di topbar ---------- */
.sb-head-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.5rem .75rem;
  border-radius:12px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  border:1px solid rgba(148,163,184,.35);
}
.sb-head-toggle:hover{
  background:rgba(148,163,184,.10);
}
.sb-head-toggle svg{
  width:18px;
  height:18px;
}

/* ---------- OPTIONAL: Matikan animasi (debug) ---------- */
body.rs-no-anim .rs-sidebar,
body.rs-no-anim .rs-item > a,
body.rs-no-anim .rs-btn,
body.rs-no-anim .rs-collapse{
  transition:none !important;
}
body.rs-no-anim .rs-sidebar *{
  animation:none !important;
  transition:none !important;
}

/* Hindari tombol scrollbar tambahan */
body::-webkit-scrollbar-button,
.rs-scroll::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}