/* -------------------------------------------------------------------------- */
:root{
  --header-h: 64px;        /* tinggi navbar */
  --sidebar-w: 240px;      /* lebar sidebar normal */
  --sidebar-w-mini: 72px;  /* lebar sidebar collapsed (ikon-only) */
}

/* tinggi area kerja (di bawah header) */
.pane-height{ height: calc(100vh - var(--header-h)); }

/* kerangka app */
.app{
  display:flex;
  gap:0;
  min-width: 0; /* biar child bisa menyusut dan overflow dengan benar */
}

/* ---- SIDEBAR: KUNCI LEBAR, NON-SHRINK ---- */
.app-sidebar{
  /* kunci ukuran sidebar agar tidak mengecil */
  flex: 0 0 var(--sidebar-w);  /* grow:0, shrink:0, basis: --sidebar-w */
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  transition: width .2s ease;
  background:#f8f9fa; color:#0d0f12;
  border-right: 1px solid rgba(255,193,7,.35);
  white-space: nowrap; /* cegah label panjang bikin melar */
}

/* konten kanan boleh menyusut; min-width:0 penting untuk overflow */
.app-content{
  flex: 1 1 auto;
  min-width: 0;
}

/* collapsed: ikon-only (tetap kunci lebar mini) */
.app.sidebar-collapsed .app-sidebar{
  flex: 0 0 var(--sidebar-w-mini);
  width: var(--sidebar-w-mini);
  min-width: var(--sidebar-w-mini);
}
.app.sidebar-collapsed .menu-label{ display:none; }
.app.sidebar-collapsed .list-group-item{
  text-align:center; padding-left:.75rem; padding-right:.75rem;
}

/* (opsional) elipsis jika label panjang saat expanded */
.menu-label{
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--sidebar-w) - 56px); /* kira2: ikon + gap */
}

/* mobile: sidebar statis disembunyikan (pakai offcanvas) */
@media (max-width: 767.98px){
  .app-sidebar{ display:none; }
}
/* -------------------------------------------------------------------------- */
.form-control.bg-dark::placeholder{
  color: rgba(255, 255, 255, 0.7) !important; /* Warna putih transparan */
  opacity: 1; /* Pastikan opacity tidak berubah di Firefox */
}
/* -------------------------------------------------------------------------- */
.btn-small{
  --bs-btn-padding-y: .25rem !important;
  --bs-btn-padding-x: .5rem !important;
  --bs-btn-font-size: .70rem !important;
}
/* -------------------------------------------------------------------------- */
.border-secondary{
  --bs-border-opacity: 0.5 !important;
}
/* -------------------------------------------------------------------------- */
.height-fit{
    height: fit-content;
}
.width-fit{
    width: fit-content;
}
/* -------------------------------------------------------------------------- */
.max-h-15{
    max-height: 15vh;
}
.max-h-25{
    max-height: 25vh;
}
.max-h-50{
    max-height: 50vh;
}
.max-h-75{
    max-height: 75vh;
}
.max-h-100{
    max-height: 100vh;
}
.min-h-25{
    min-height: 25vh;
}
.min-h-50{
    min-height: 50vh;
}
.min-h-60{
    min-height: 60vh;
}
.min-h-70{
    min-height: 70vh;
}
/* -------------------------------------------------------------------------- */
.opacity-50{
  --bs-bg-opacity: .5;
}
/* -------------------------------------------------------------------------- */
.fs-7{
  font-size: 0.7rem!important;
}
.fs-8{
  font-size: 0.8rem!important;
}
.fs-9{
  font-size: 0.9rem!important;
}
/* -------------------------------------------------------------------------- */
.bi-1x {
  font-size: 1rem;
}
.bi-2x {
  font-size: 2rem;
}
.bi-3x {
  font-size: 3rem;
}
.bi-4x {
  font-size: 4rem;
}
.bi-5x {
  font-size: 5rem;
}
/* -------------------------------------------------------------------------- */
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin:0;
}
input[type="datetime-local"]::-webkit-datetime-edit {
    display:none;
}
/* -------------------------------------------------------------------------- */
.bg-o-1{
  --bs-bg-opacity: .1;
}
.bg-o-2{
  --bs-bg-opacity: .2;
}
.bg-o-3{
  --bs-bg-opacity: .3;
}
.bg-o-4{
  --bs-bg-opacity: .4;
}
.bg-o-5{
  --bs-bg-opacity: .5;
}
/* -------------------------------------------------------------------------- */
.toast_top{
    padding-top: 8rem;
}
.toast_bottom{
    padding-bottom: 3rem;
}
.img-icon{
    max-width: 1.5rem;
    height:auto;
}
.custom_padding_up{
  padding-bottom: 4rem!important;
}
.custom_margin_up{
  margin-bottom: 4.4rem!important;
}
.custom_margin_cs{
  margin-bottom: 7.6rem!important;
}
/* -------------------------------------------------------------------------- */
.sort_button { cursor: grab; }
.sortable-ghost { opacity: .5; }
.sortable-chosen { box-shadow: 0 0 0 2px rgba(13,110,253,.35) inset; }