/* ===== Base ===== */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; }

/* ===== Sidebar ===== */
.sidebar {
  width: 200px;
  min-height: 100vh;
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,.08);
}

/* Desktop */
@media (min-width: 992px) {
  .sidebar { 
      position: sticky; 
      top: 0; }
}

/* Mobile off-canvas */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  body.sidebar-open { overflow: hidden; }
}

/* Backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1030;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
@media (max-width: 991.98px) {
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Nav link */
.nav-link { color: #334155; border-radius: 10px; }
.nav-link:hover { background: #f1f5f9; color: #111827; }
.nav-link.active { background: #eef2ff; color: #4338ca; }

/* Cards */
.card { border-radius: 16px; }

/* Login page */
.login-page { min-height: 100vh; display: flex; align-items: center; }

/* Sidebar slim mode */
body.sidebar-collapse .main-sidebar {
  width: 70px !important;
}
body.sidebar-collapse .main-sidebar .nav-link span {
  display: none;
}


/*/////// CUSTOM /////*/

/* Highlight menu aktif di sidebar */
.sidebar .nav-link.active {
  background-color: #0d6efd; /* Biru Bootstrap */
  color: #fff !important;
  border-radius: 8px;
}
.sidebar .nav-link.active i {
  color: #fff !important;
}


.table-responsive {
    padding: 10px !important;
}