/* assets/css/style.css */

:root {
  --siskul-green-dark: #145A32;
  --siskul-green-mid:  #1E8449;
  --siskul-green-light:#27AE60;

  --sidebar-width: 250px;
  --sidebar-mini: 78px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* ========== LAYOUT WRAPPER ========== */
#wrapper{
  display: flex;
  min-height: 100vh;
}

/* Sidebar wrapper: SATU sumber ukuran sidebar */
#sidebar-wrapper{
  width: var(--sidebar-width);
  min-height: 100vh;
  flex: 0 0 var(--sidebar-width);
  transition: width .2s ease, margin-left .25s ease;
}

/* Background sidebar ditempel ke wrapper, bukan ngatur width lagi */
.bg-sidebar{
  background: linear-gradient(180deg, var(--siskul-green-dark), var(--siskul-green-mid));
  min-height: 100vh;
}

/* Content */
#page-content-wrapper{
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* ========== SIDEBAR ITEM ========== */
.bg-sidebar-item{
  background-color: transparent;
  border: none;
}

.bg-sidebar-item:hover{
  background-color: rgba(255,255,255,0.10);
}

/* Biar teks menu tidak turun baris */
#sidebar-wrapper .list-group-item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== MODE 1: HIDE SIDEBAR (DESKTOP) ========== */
/* wrapper.toggled = sidebar geser keluar layar */
#wrapper.toggled #sidebar-wrapper{
  margin-left: calc(-1 * var(--sidebar-width));
}

/* ========== MODE 2: MINI SIDEBAR (IKON SAJA) ========== */
/* Aktifkan kalau kamu mau sidebar kecil tapi tidak hilang */
#wrapper.mini #sidebar-wrapper{
  width: var(--sidebar-mini);
  flex: 0 0 var(--sidebar-mini);
  margin-left: 0; /* pastikan tidak ikut hide */
}

/* Sembunyikan teks menu saat mini, ikon tetap tampil */
#wrapper.mini #sidebar-wrapper .list-group-item{
  text-align: center;
  padding-left: .75rem;
  padding-right: .75rem;
  font-size: 0; /* sembunyikan teks */
}

#wrapper.mini #sidebar-wrapper .list-group-item i{
  margin-right: 0 !important;
  font-size: 1.15rem;
}

/* Sembunyikan nama app di heading saat mini */
#wrapper.mini #sidebar-wrapper .sidebar-heading span{
  display: none;
}

/* ========== LANDING (kalau masih dipakai) ========== */
.landing-hero{
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at top left, var(--siskul-green-light), var(--siskul-green-dark));
  color: #fff;
}

/* ========== OVERLAY MOBILE ========== */
#sidebar-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1020;
}

/* ===== MOBILE: OFF-CANVAS ===== */
@media (max-width: 768px){

  /* Mobile pakai off-canvas: default hidden = wrapper.toggled */
  #sidebar-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    flex: 0 0 auto; /* tidak relevan saat fixed, tapi aman */
    z-index: 1030;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }

  /* Overlay tampil saat sidebar terbuka (wrapper tidak toggled) */
  #wrapper:not(.toggled) #sidebar-overlay{
    display: block;
  }

  /* Hidden */
  #wrapper.toggled #sidebar-wrapper{
    margin-left: calc(-1 * var(--sidebar-width));
  }

  /* Shown */
  #wrapper:not(.toggled) #sidebar-wrapper{
    margin-left: 0;
  }

  /* Di mobile, mini sidebar sebaiknya dimatikan */
  #wrapper.mini #sidebar-wrapper{
    width: var(--sidebar-width);
  }

  /* Navbar di atas overlay */
  #page-content-wrapper .navbar{
    position: sticky;
    top: 0;
    z-index: 1032;
  }

  #sidebarToggle{
    position: relative;
    z-index: 1033;
  }

  body.sidebar-open{
    overflow: hidden;
  }

  .navbar .navbar-text{
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}