:root {
  --sidebar-bg: #1a4d8f;
  --sidebar-text: #ffffff;
  --sidebar-hover: #2563c2;
  --sidebar-active: #1e5bb8;
}

.app-sidebar {
  background-color: var(--sidebar-bg) !important;
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: var(--sidebar-text) !important;
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.2s;
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.app-sidebar .nav-sidebar > .nav-item > .nav-link:focus {
  background-color: var(--sidebar-hover) !important;
  color: #fff !important;
}

.app-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--sidebar-active) !important;
  color: #fff !important;
  font-weight: 600;
}

.app-sidebar .brand-link {
  background-color: rgba(0,0,0,0.1) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 767px) {
  .content-wrapper { padding: 0.75rem !important; }
  .card { margin-bottom: 1rem; }
  .card-body { padding: 0.75rem; }
  #map { height: 350px !important; }
  .btn { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
  .small-box .inner h3 { font-size: 1.8rem; }
  .table { font-size: 0.8rem; }
  .table td, .table th { padding: 0.5rem 0.3rem; }
  .btn-sm { padding: 0.4rem 0.6rem; }
}

@media (max-width: 575px) {
  .content-wrapper { padding: 0.5rem !important; }
  h4 { font-size: 1.3rem; }
}

@media (min-width: 992px) {
  .sidebar-collapse .app-sidebar { width: 4.5rem !important; }
  .sidebar-collapse .brand-text,
  .sidebar-collapse .nav-link p { display: none !important; }
}

.loading { opacity: 0.7; pointer-events: none; }
.auth-required { display: none; }
.auth-required.show { display: block; }

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast-container { z-index: 1100; }
#appContent {
  transition: opacity 0.2s;
}
.divider hr {
  opacity: 0.5;
}
#dashChart, #statusChart, #dailyChart, #waterfallChart {
  height: 70px !important;  /* menyamakan tinggi */
}

/* kartu dashboard lebih ringkas */
.section-card .card-body {
  padding: 0.75rem;
}

/* jarak antar elemen dalam dashboard */
#dashboardSection .row.g-3 {
  --bs-gutter-y: 0.5rem;
}