/* ====== SIDEBAR ONLY ====== */
/* Menggunakan var dari :root di styles.css:

/* ===== SIDEBAR ===== */
.sidebar{
  position: fixed;
  top: var(--navbar-h); 
  height: calc(100dvh - var(--navbar-h));
  z-index: 1030;
  width: var(--sidebar-width);
  padding-top: 0;  
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,.06);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform .25s ease, left .25s ease, width .25s ease;
}

/* Warna link */
.sidebar .nav-link{ color:#334; }
.sidebar .nav-link:hover{ background: rgba(0,0,0,.04); }

/* Active state (router) */
.sidebar .nav-link.active{
  background: var(--bs-success-bg-subtle, rgba(25,135,84,.12));
  color: var(--bs-success-text-emphasis, #0a3a23);
  font-weight: 600;
}

/* ===== BACKDROP (mobile) ===== */
#sidebarBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1025;
}
#sidebarBackdrop.show{ opacity:1; visibility:visible; }

/* ===== HEADER BLOK PERTAMA (KURANGI KOSONG ATAS) ===== */
.sidebar > .border-bottom:first-child{
  padding-top: .25rem;     /* rapikan: sempitkan atas */
  padding-bottom: .5rem;   /* beri sedikit ruang bawah */
}

/* ===== HERO / BRAND di sidebar ===== */
/* Kontainer brand: SELALU center & ringkas */
.brand-hero{
  display: flex;
  justify-content: center;
  align-items: center;      /* center vertikal */
  text-align: center;
  padding: .25rem 1rem 0;   /* kecilkan padding atas */
  min-height: 64px;         /* cukup untuk logo kecil */
}

/* “Nempel atas” tapi tetap center (tanpa ruang kosong) */
.hero-top{
  align-items: center;      /* dari flex-start -> center */
  min-height: 64px;
  padding-top: 0;
}

/* Logo/gambar: kecil & responsif */
.brand-hero__img{
  display: block;
  margin: 0 auto;                       /* center horizontal */
  height: clamp(40px, 7.5vw, 56px);     /* skala proporsional */
  width: auto;
  max-width: min(200px, calc(var(--sidebar-width) - 72px));
  object-fit: contain;
  border-radius: 6px;
  box-shadow: none;
}
.hero-top .brand-hero__img{ margin-bottom: .5rem; } /* jarak kecil ke greeting */

/* Greeting di bawah logo: rapikan jarak */
.sidebar > .border-bottom:first-child .px-3.pb-2{
  padding-top: .25rem !important;
  padding-bottom: .5rem !important;
}
.sidebar > .border-bottom:first-child .px-3.pb-2 .small{
  margin-top: .125rem;
}

/* ===== RESPONSIVE (Mobile < 992px) ===== */
@media (max-width: 991.98px){
  .sidebar{
    left: 0;
    transform: translateX(-100%);
    width: min(88vw, 320px);
  }
  .sidebar.show{ transform: translateX(0); }

  /* Kunci body saat sidebar terbuka */
  body.sidebar-open{ overflow: hidden; touch-action: none; }

  /* Logo sedikit dibesarkan agar tetap terbaca di HP kecil */
  .brand-hero__img{
    height: clamp(42px, 10vw, 60px);
    max-width: min(220px, calc(100% - 64px));
  }
}

/* === Collapse di desktop (≥992px) === */
@media (min-width: 992px){
  body.sidebar-collapsed .sidebar{ transform: translateX(-100%); }
  body.sidebar-open{ overflow: auto; } /* desktop normal */
}

/* Transisi halus */
.sidebar{ transition: transform .25s ease, width .25s ease; }