/* public/assets/css/style.css */
:root{
  --sidebar-width: 260px;
}

/* Layout dasar */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* NAVBAR: biarkan sticky-top dari Bootstrap */

/* SIDEBAR (auto hidden di semua ukuran) */
.sidebar{
  position: fixed;
  top: 56px;           /* tinggi navbar bootstrap */
  left: 0;
  height: calc(100vh - 56px);
  width: var(--sidebar-width);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1040;
}
.sidebar.show{
  transform: translateX(0);
}

/* BACKDROP */
.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1030;
}
body.sidebar-open .sidebar-backdrop{
  opacity: 1;
  visibility: visible;
}

/* Saat sidebar dibuka di layar lebar, geser konten */
@media (min-width: 992px){
  body.sidebar-open main{
    margin-left: var(--sidebar-width);
  }
}

/* LINK MENU */
.side-link{
  display: block;
  padding: .6rem .9rem;
  border-radius: .6rem;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.side-link:hover{ background-color: var(--bs-tertiary-bg); transform: translateX(2px); }
.side-link.active{ background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text); font-weight: 600; }

/* KONTEN UTAMA */
main.container-fluid{ padding-top: 1rem; padding-bottom: 1rem; }
main .card{ border-radius: 1rem; box-shadow: var(--bs-box-shadow-sm); }
main .card:hover{ transform: translateY(-1px); transition: transform .15s ease; }

/* Footer */
footer{ margin-top: auto; }

/* Animasi lembut */
.fadein { animation: fadein .25s ease; }
@keyframes fadein { from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ====== Avatar & list UI (BARU) ====== */
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--bs-tertiary-bg); }
.avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bs-tertiary-bg); }
.avatar-xl { width: 80px; height: 80px; object-fit: cover; }

.mini-title { font-size: .8rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }

.hover-row { transition: background-color .15s ease, transform .15s ease; }
.hover-row:hover { background-color: var(--bs-tertiary-bg); transform: translateX(2px); }