/* ==========================================================================
   ORGANISMS / sidebar / sidebar.css
   --------------------------------------------------------------------------
   DEPENDS ON: avatar.css, badge.css, tooltip.css

   HTML PATTERN:
     <aside class="sidebar" id="sidebar" aria-label="Navigasi samping">
       <div class="sidebar-header">
         <a class="navbar-brand" href="/">
           <img class="navbar-logo" src="/assets/logo.svg" alt="Brand">
           <span class="navbar-brand-name sidebar-brand-name">AppName</span>
         </a>
         <button class="sidebar-collapse-btn" aria-label="Tutup sidebar"
                 aria-controls="sidebar" aria-expanded="true">
           <!-- svg chevron-left -->
         </button>
       </div>

       <nav class="sidebar-nav">
         <p class="sidebar-section-label">Menu Utama</p>

         <a class="sidebar-item sidebar-item-active" href="/dashboard">
           <span class="sidebar-item-icon"><!-- svg --></span>
           <span class="sidebar-item-label">Dashboard</span>
         </a>

         <!-- Item dengan children (accordion) -->
         <div class="sidebar-group">
           <button class="sidebar-item sidebar-group-trigger"
                   aria-expanded="false" aria-controls="sg-laporan">
             <span class="sidebar-item-icon"><!-- svg --></span>
             <span class="sidebar-item-label">Laporan</span>
             <span class="sidebar-group-caret" aria-hidden="true"></span>
           </button>
           <ul class="sidebar-group-items" id="sg-laporan" hidden>
             <li><a class="sidebar-sub-item" href="/laporan/penjualan">Penjualan</a></li>
             <li><a class="sidebar-sub-item" href="/laporan/stok">Stok</a></li>
           </ul>
         </div>

         <a class="sidebar-item" href="/pengaturan">
           <span class="sidebar-item-icon"><!-- svg --></span>
           <span class="sidebar-item-label">Pengaturan</span>
           <span class="badge badge-error badge-dot sidebar-item-badge"></span>
         </a>
       </nav>

       <div class="sidebar-footer">
         <div class="sidebar-user">
           <div class="avatar avatar-sm">
             <img src="user.jpg" alt="Budi">
           </div>
           <div class="sidebar-user-info">
             <p class="sidebar-user-name">Budi Santoso</p>
             <p class="sidebar-user-role">Administrator</p>
           </div>
         </div>
       </div>
     </aside>

     <!-- Backdrop mobile -->
     <div class="sidebar-backdrop" id="sidebar-backdrop" hidden></div>
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
.sidebar {
  display:        flex;
  flex-direction: column;
  width:          var(--sidebar-md);           /* 240px */
  height:         100dvh;
  position:       sticky;
  top:            0;
  background-color: var(--color-bg-surface);
  border-right:   1px solid var(--color-border-default);
  overflow:       hidden;
  transition:     width var(--duration-moderate) var(--ease-in-out);
  flex-shrink:    0;
  z-index:        var(--z-sticky);
}

/* Collapsed state */
.sidebar.is-collapsed {
  width: var(--sidebar-collapsed);   /* 60px */
}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.sidebar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--size-200);
  height:          var(--navbar-height-md);    /* align dengan navbar */
  padding-inline:  var(--size-400);
  border-bottom:   1px solid var(--color-border-default);
  flex-shrink:     0;
  overflow:        hidden;
}

.sidebar-brand-name {
  transition: opacity var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}
.sidebar.is-collapsed .sidebar-brand-name { opacity: 0; pointer-events: none; }

.sidebar-collapse-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  background:      none;
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  color:           var(--color-text-secondary);
  transition:      var(--transition-base);
  padding:         0;
}
.sidebar-collapse-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }
.sidebar-collapse-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.sidebar-collapse-btn svg {
  transition: transform var(--duration-moderate) var(--ease-in-out);
}
.sidebar.is-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }


/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.sidebar-nav {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    var(--size-300) var(--size-300);
  display:    flex;
  flex-direction: column;
  gap:        var(--size-50);
}

.sidebar-nav::-webkit-scrollbar       { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-full); }

/* Section label */
.sidebar-section-label {
  font-size:      var(--text-label-sm-size);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding:        var(--size-300) var(--size-300) var(--size-100);
  white-space:    nowrap;
  overflow:       hidden;
  transition:     opacity var(--duration-fast) var(--ease-default);
  margin:         0;
}
.sidebar.is-collapsed .sidebar-section-label { opacity: 0; }

/* Nav item */
.sidebar-item {
  display:         flex;
  align-items:     center;
  gap:             var(--size-300);
  padding:         var(--size-250) var(--size-300);
  border-radius:   var(--radius-md);
  font-size:       var(--text-label-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  cursor:          pointer;
  background:      none;
  border:          none;
  font-family:     inherit;
  width:           100%;
  text-align:      left;
  white-space:     nowrap;
  overflow:        hidden;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color            var(--duration-fast) var(--ease-default);
}

.sidebar-item:hover {
  background-color: var(--color-bg-sunken);
  color:            var(--color-text-primary);
}

.sidebar-item-active {
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand);
}
.sidebar-item-active:hover {
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand-hover);
}

.sidebar-item:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Icon */
.sidebar-item-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           var(--size-icon-md);
  height:          var(--size-icon-md);
  color:           inherit;
}

/* Label — hidden saat collapsed */
.sidebar-item-label {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.sidebar.is-collapsed .sidebar-item-label { opacity: 0; pointer-events: none; }

/* Badge di item */
.sidebar-item-badge {
  flex-shrink: 0;
  margin-left: auto;
  transition:  opacity var(--duration-fast) var(--ease-default);
}
.sidebar.is-collapsed .sidebar-item-badge { opacity: 0; }


/* --------------------------------------------------------------------------
   NESTED GROUP (accordion)
   -------------------------------------------------------------------------- */
.sidebar-group { display: flex; flex-direction: column; }

.sidebar-group-caret {
  width:      0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top:  4px solid currentColor;
  margin-left: auto;
  flex-shrink: 0;
  transition:  transform var(--duration-fast) var(--ease-default);
}
.sidebar-group-trigger[aria-expanded="true"] .sidebar-group-caret { transform: rotate(180deg); }
.sidebar.is-collapsed .sidebar-group-caret { opacity: 0; }

.sidebar-group-items {
  list-style:     none;
  margin:         var(--size-50) 0 0;
  padding:        0 0 0 calc(var(--size-icon-md) + var(--size-300) + var(--size-300));
  display:        flex;
  flex-direction: column;
  gap:            var(--size-50);
  animation:      ds-slide-down var(--duration-moderate) var(--ease-out) both;
}

.sidebar-sub-item {
  display:         block;
  padding:         var(--size-200) var(--size-300);
  border-radius:   var(--radius-md);
  font-size:       var(--text-body-sm-size);
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color            var(--duration-fast) var(--ease-default);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}
.sidebar-sub-item:hover        { background: var(--color-bg-sunken); color: var(--color-text-primary); }
.sidebar-sub-item.is-active    { color: var(--color-brand); font-weight: var(--font-weight-medium); }
.sidebar-sub-item:focus-visible{ outline: 2px solid var(--color-border-focus); outline-offset: -2px; }


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.sidebar-footer {
  flex-shrink:  0;
  padding:      var(--size-300);
  border-top:   1px solid var(--color-border-default);
  overflow:     hidden;
}

.sidebar-user {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
  padding:     var(--size-200) var(--size-200);
  border-radius: var(--radius-md);
  overflow:    hidden;
}

.sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity var(--duration-fast) var(--ease-default); }
.sidebar.is-collapsed .sidebar-user-info { opacity: 0; pointer-events: none; }

.sidebar-user-name {
  font-size:     var(--text-label-size);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-primary);
  margin:        0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.sidebar-user-role {
  font-size: var(--text-caption-size);
  color:     var(--color-text-disabled);
  margin:    0;
}


/* --------------------------------------------------------------------------
   MOBILE — full-screen overlay
   -------------------------------------------------------------------------- */
.sidebar-backdrop {
  position:         fixed;
  inset:            0;
  z-index:          calc(var(--z-sticky) - 1);
  background-color: var(--color-bg-overlay);
  animation:        ds-fade-in var(--duration-normal) var(--ease-default) both;
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left:     0;
    top:      0;
    height:   100dvh;
    transform: translateX(-100%);
    transition:
      transform var(--duration-moderate) var(--ease-in-out),
      width     var(--duration-moderate) var(--ease-in-out);
    z-index: var(--z-modal);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
}