/* File: /assets/css/sidebar.css */

/* ===== TOKENS SIDEBAR (aman diubah) ===== */
:root{
  --sidebar-w: 264px;
  --sidebar-collapsed-w: 76px;
  --sidebar-blur: 14px;
  --sidebar-offset-x: 12px;             /* jarak dari tepi layar */
  --sidebar-offset-top: 84px;           /* sesuaikan tinggi header (64px) + jarak */
  --sidebar-bg: rgb(var(--primary-rgb) / 0.20);
  --sidebar-border: rgb(var(--primary-rgb) / 0.30);
  --sidebar-highlight: rgb(255 255 255 / 0.60);
}

/* ===== SHELL: dorong konten saat ada sidebar (desktop) ===== */
.app.with-sidebar{ padding-left: calc(var(--sidebar-w) + var(--sidebar-offset-x)); }
@media (max-width: 1024px){
  .app.with-sidebar{ padding-left: 0; } /* mobile pakai overlay */
}

/* ===== SIDEBAR KACA ===== */
.sidebar{
  position: fixed;
  left: var(--sidebar-offset-x);
  top: var(--sidebar-offset-top);
  bottom: var(--sidebar-offset-x);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* kaca biru susu */
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.14)),
    var(--sidebar-bg);
  -webkit-backdrop-filter: blur(var(--sidebar-blur)) saturate(160%);
  backdrop-filter: blur(var(--sidebar-blur)) saturate(160%);

  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 14px 36px rgb(11 19 42 / 0.10),
    inset 0 1px 0 var(--sidebar-highlight);

  padding: 10px;
  z-index: 9; /* header Anda z-index:10 → sidebar di bawahnya */
}

/* Fallback jika backdrop-filter tidak ada */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sidebar{ background: rgb(var(--primary-rgb) / 0.28); }
}

/* ===== BAGIAN DALAM SIDEBAR ===== */
.sidebar-header{
  display:flex;align-items:center;gap:8px;
  padding:8px;border-radius:12px;
}
.sidebar-search input{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:12px;background:#fff;
}

.sidebar-nav{display:flex;flex-direction:column;gap:6px;padding:4px}

/* Item nav konsisten dgn header nav */
.sidebar-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;text-decoration:none;
  color:var(--text); border:1px solid transparent;
  transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-item .icon{width:22px;display:grid;place-items:center;flex:0 0 22px}
.sidebar-item .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item .badge{margin-left:auto;font-size:12px;padding:2px 8px;border-radius:999px;background:rgb(var(--primary-rgb) / 0.12);border:1px solid rgb(var(--primary-rgb) / 0.30)}

@media (hover:hover){
  .sidebar-item:hover{
    background:rgb(var(--primary-rgb) / 0.18);
    border-color:rgb(var(--primary-rgb) / 0.35);
  }
}
.sidebar-item.active{
  background:rgb(var(--primary-rgb) / 0.50);
  border-color:rgb(var(--primary-rgb) / 0.60);
  color:#fff;
}

/* ===== FOOTER SIDEBAR (mis. avatar, logout) ===== */
.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:6px}

/* ===== MODE COLLAPSED (ikon saja) =====
   Why: hemat ruang, tidak mengubah struktur konten. */
.sidebar.collapsed{ width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .label,
.sidebar.collapsed .badge,
.sidebar.collapsed .sidebar-search{ display:none; }
.app.with-sidebar.sidebar-collapsed{
  padding-left: calc(var(--sidebar-collapsed-w) + var(--sidebar-offset-x));
}

/* ===== MOBILE: overlay + backdrop ===== */
@media (max-width: 1024px){
  .sidebar{
    left:0;top:0;bottom:0; width:min(88vw,360px);
    margin:0;border-radius:0 16px 16px 0;
    transform: translateX(-100%);
    transition: transform var(--transition-fast) ease;
  }
  .app.sidebar-open .sidebar{ transform: translateX(0); }
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgb(0 0 0 / 0.15);
    opacity:0;pointer-events:none;transition:opacity var(--transition-fast) ease;z-index:8;
  }
  .app.sidebar-open .sidebar-backdrop{ opacity:1;pointer-events:auto; }
}

/* ===== DARK THEME PENYESUAIAN (opsional) ===== */
[data-theme="dark"] .sidebar{
  --sidebar-bg: rgb(34 52 90 / 0.35);
  --sidebar-border: rgb(140 170 255 / 0.22);
  --sidebar-highlight: rgb(255 255 255 / 0.16);
  box-shadow:
    0 16px 38px rgb(0 0 0 / 0.35),
    inset 0 1px 0 var(--sidebar-highlight);
}
/* Sidebar title */
.sidebar-header{
  font-size:14px;
  font-weight:800;
  letter-spacing:.5px;
}

/* Divider visual */
.sidebar-header::after{
  content:"";
  display:block;
  height:1px;
  background:rgb(255 255 255 / .35);
  margin-top:8px;
}