/* Only MobilJuragan-specific behaviour. Visual tokens remain from AppStack. */
body.appstack-mj {
  font-family: "Poppins", sans-serif;
}

/* DataTables Responsive: pada tablet kolom sekunder menjadi child row (+). */
.dataTables_wrapper table.dataTable {
  width: 100% !important;
  min-width: 0 !important;
}

.dataTables_wrapper table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}

.dataTables_wrapper table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 120px;
}

/* Kontrol + / - untuk detail baris DataTables pada layar sempit. */
.dataTables_wrapper table.dataTable.dtr-column > tbody > tr > td.control::before,
.dataTables_wrapper table.dataTable.dtr-column > tbody > tr > th.control::before {
  background-color: #3b82f6;
  border-color: #fff;
  left: 12px;
  margin-left: 0;
}

.dataTables_wrapper table.dataTable.dtr-column > tbody > tr > td.control,
.dataTables_wrapper table.dataTable.dtr-column > tbody > tr > th.control {
  padding-left: 44px;
}

/* Keep the custom logo within AppStack's native sidebar header dimensions. */
.appstack-mj .sidebar-brand {
  align-items: center;
  display: flex;
  justify-content: center;
}

.appstack-mj .sidebar-brand .sidebar-logo {
  height: auto;
  max-height: 50px;
  max-width: 200px;
  object-fit: contain;
}

/* One compact Light/Dark toggle in the native AppStack navbar. */
.theme-navbar-control {
  margin-right: .35rem;
}

.theme-navbar-control .nav-icon {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 40px;
}

.theme-navbar-control .nav-icon:hover,
.theme-navbar-control .nav-icon.active {
  background: transparent;
  color: #3f80ea;
}

.theme-navbar-control .nav-icon i {
  font-size: 1.2rem;
  line-height: 1;
}

/* Page-specific wrappers only prevent horizontal table overflow on tablets. */
.table-responsive > .table {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .appstack-mj .content {
    padding: 1rem;
  }
}