.app-main .app-content-header {
  padding: 0.5rem 0.5rem;
}
.app-footer {
  min-height: 2rem;
  padding: 0.25rem 1rem;
}
.sidebar-brand {
  background-color: #261535;
  color: white;
  text-align: left !important;
  justify-content: flex-start !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.sidebar-brand .brand-text {
  color: white !important;
  text-align: left !important;
}
.sidebar-brand .brand-link {
  color: white;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}
.sidebar-brand .brand-link .brand-image {
  margin-right: 0.5rem;
  margin-left: 0 !important;
}
/* Sidebar Background */
.app-sidebar {
  background-color: #261535 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-wrapper {
  background-color: #261535;
}

/* Sidebar User Info */
.sidebar-user-info {
  border-radius: 0.375rem;
}
.sidebar-user-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sidebar-user-details {
  flex: 1;
  min-width: 0;
}
.sidebar-user-name {
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
}
.sidebar-user-email {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Divider */
.sidebar-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0.75rem 0.5rem;
}

/* Sidebar Menu Links */
.sidebar-menu .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 0.375rem;
}
.sidebar-menu .nav-link p {
  color: rgba(255, 255, 255, 0.8) !important;
}
.sidebar-menu .nav-link .nav-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}
.sidebar-menu .nav-link .nav-arrow {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Sidebar Menu Hover & Focus */
.sidebar-menu .nav-item:hover > .nav-link,
.sidebar-menu .nav-item > .nav-link:hover,
.sidebar-menu .nav-item > .nav-link:focus {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.sidebar-menu .nav-item:hover > .nav-link p,
.sidebar-menu .nav-item > .nav-link:hover p,
.sidebar-menu .nav-item > .nav-link:focus p {
  color: white !important;
}
.sidebar-menu .nav-item:hover > .nav-link .nav-icon,
.sidebar-menu .nav-item > .nav-link:hover .nav-icon,
.sidebar-menu .nav-item > .nav-link:focus .nav-icon {
  color: white !important;
}
.sidebar-menu .nav-item:hover > .nav-link .nav-arrow,
.sidebar-menu .nav-item > .nav-link:hover .nav-arrow,
.sidebar-menu .nav-item > .nav-link:focus .nav-arrow {
  color: white !important;
}

/* Sidebar Menu Active State */
.sidebar-menu .nav-item > .nav-link.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-weight: 500;
}
.sidebar-menu .nav-item > .nav-link.active p {
  color: white !important;
}
.sidebar-menu .nav-item > .nav-link.active .nav-icon {
  color: white !important;
}
.sidebar-menu .nav-item.menu-open > .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Sidebar Menu Open State */
.sidebar-menu .nav-item.menu-open > .nav-link {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.sidebar-menu .nav-item.menu-open > .nav-link p,
.sidebar-menu .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-menu .nav-item.menu-open > .nav-link .nav-arrow {
  color: white !important;
}

/* Submenu (Treeview) */
.nav-treeview {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  margin-left: 1rem;
  padding-left: 0.5rem;
}
.nav-treeview .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  padding-left: 2rem;
}
.nav-treeview .nav-link p {
  color: rgba(255, 255, 255, 0.7) !important;
}
.nav-treeview .nav-link .nav-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Submenu Hover & Focus */
.nav-treeview .nav-item > .nav-link:hover,
.nav-treeview .nav-item > .nav-link:focus {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.nav-treeview .nav-item > .nav-link:hover p,
.nav-treeview .nav-item > .nav-link:focus p,
.nav-treeview .nav-item > .nav-link:hover .nav-icon,
.nav-treeview .nav-item > .nav-link:focus .nav-icon {
  color: white !important;
}

/* Submenu Active State */
.nav-treeview .nav-item > .nav-link.active,
.nav-treeview .nav-item > .nav-link.active:hover,
.nav-treeview .nav-item > .nav-link.active:focus {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-weight: 500;
}
.nav-treeview .nav-item > .nav-link.active p,
.nav-treeview .nav-item > .nav-link.active .nav-icon {
  color: white !important;
}

/* Scrollbar Styling */
.sidebar-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
}
.sidebar-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.sidebar-wrapper::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Nav Header (jika ada) */
.sidebar-wrapper .nav-header {
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
}

/* Nav Badge (jika ada) */
.sidebar-menu .nav-link .nav-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Success Modal - Posisi Tengah Atas */
#successModal .modal-dialog-top-center {
  margin-top: 2rem;
  margin-bottom: auto;
}

@media (min-width: 576px) {
  #successModal .modal-dialog-top-center {
    max-width: 500px;
    margin: 2rem auto;
  }
}

/* Success Modal - Warna Hijau Custom */
#successModal .modal-header.bg-success {
  background-color: #28a745 !important;
}

#successModal .modal-footer .btn-success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

#successModal .modal-footer .btn-success:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

#successModal .modal-footer .btn-success:focus {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) !important;
}

/* Error Modal - Posisi Tengah Atas */
#errorModal .modal-dialog-top-center {
  margin-top: 2rem;
  margin-bottom: auto;
}

@media (min-width: 576px) {
  #errorModal .modal-dialog-top-center {
    max-width: 500px;
    margin: 2rem auto;
  }
}

/* Error Modal - Warna Danger */
#errorModal .modal-header.bg-danger {
  background-color: #dc3545 !important;
}

#errorModal .modal-footer .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

#errorModal .modal-footer .btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
}

#errorModal .modal-footer .btn-danger:focus {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
}

/* Confirm Modal - Posisi Tengah Atas */
#confirmModal .modal-dialog-top-center {
  margin-top: 2rem;
  margin-bottom: auto;
}

@media (min-width: 576px) {
  #confirmModal .modal-dialog-top-center {
    max-width: 500px;
    margin: 2rem auto;
  }
}

/* Confirm Modal - Warna Primary */
#confirmModal .modal-header.bg-primary {
  background-color: #007bff !important;
}

#confirmModal .modal-footer .btn-primary {
  background-color: #007bff !important;
  border-color: #007bff !important;
}

#confirmModal .modal-footer .btn-primary:hover {
  background-color: #0056b3 !important;
  border-color: #004085 !important;
}

#confirmModal .modal-footer .btn-primary:focus {
  background-color: #0056b3 !important;
  border-color: #004085 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}

/* Select2 Height Styling - Match with form-control */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px) !important;
  line-height: 1.5 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.75rem + 2px) !important;
  padding-left: 0.75rem !important;
  padding-right: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + 2px) !important;
  right: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Select2 Clear Button (X icon) */
.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  right: 26px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 1.2em !important;
  line-height: 1 !important;
  color: #999 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #333 !important;
}

/* Select2 Focus State */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Select2 Invalid State */
.select2-container--default.select2-container--invalid .select2-selection--single {
  border-color: #dc3545 !important;
}

/* Select2 Invalid State - for is-invalid class */
.select2-container.is-invalid .select2-selection--single {
  border-color: #dc3545 !important;
}

/* Select2 Dropdown Styling */
.select2-container--default .select2-results__option {
  padding: 0.375rem 0.75rem !important;
  line-height: 1.5 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0d6efd !important;
  color: white !important;
}

/* Select2 Search Input Field */
.select2-search__field {
  background-color: white !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  width: 100% !important;
}

.select2-search__field:focus {
  background-color: white !important;
  color: #212529 !important;
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.select2-search__field::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Badge Active - Green Yellow Background */
.badge.bg-active {
  background-color: #ADFF2F !important;
  color: #000000 !important;
}

/* Select2 Dropdown Positioning in Modal */
#modalAddEdit .select2-container {
  z-index: 1055 !important;
}

#modalAddEdit .select2-dropdown {
  z-index: 1057 !important;
  pointer-events: auto !important;
  position: absolute !important;
}

/* Ensure dropdown options are clickable */
#modalAddEdit .select2-dropdown .select2-results__option {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#modalAddEdit .select2-dropdown .select2-results__option--selectable {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure dropdown results container is clickable */
#modalAddEdit .select2-dropdown .select2-results {
  pointer-events: auto !important;
}

/* Ensure modal body doesn't clip Select2 dropdown */
#modalAddEdit .modal-body {
  overflow: visible !important;
}

/* Ensure modal backdrop doesn't interfere with dropdown */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Modal Form Detail - z-index harus di atas modal view detail */
#modalAddEditDetail {
  z-index: 2060 !important;
}

#modalAddEditDetail.show {
  z-index: 2060 !important;
}

#modalAddEditDetail .modal-dialog {
  z-index: 2061 !important;
  position: relative;
}

#modalAddEditDetail .modal-content {
  z-index: 2062 !important;
  position: relative;
}

/* Select2 dropdown di dalam modal form detail */
#modalAddEditDetail .select2-container {
  z-index: 2063 !important;
}

#modalAddEditDetail .select2-dropdown {
  z-index: 2064 !important;
}

/* Backdrop untuk nested modal */
.modal-backdrop.show:nth-of-type(even) {
  z-index: 2059 !important;
}

/* Confirm Modal - z-index harus di atas semua modal lain */
#confirmModal {
  z-index: 3060 !important;
}

#confirmModal.show {
  z-index: 3060 !important;
}

#confirmModal .modal-dialog {
  z-index: 3061 !important;
  position: relative;
}

#confirmModal .modal-content {
  z-index: 3062 !important;
  position: relative;
}

/* Error Modal - z-index harus di atas semua modal lain */
#errorModal {
  z-index: 3060 !important;
}

#errorModal.show {
  z-index: 3060 !important;
}

#errorModal .modal-dialog {
  z-index: 3061 !important;
  position: relative;
}

#errorModal .modal-content {
  z-index: 3062 !important;
  position: relative;
}

/* Success Modal - z-index harus di atas semua modal lain */
#successModal {
  z-index: 3060 !important;
}

#successModal.show {
  z-index: 3060 !important;
}

#successModal .modal-dialog {
  z-index: 3061 !important;
  position: relative;
}

#successModal .modal-content {
  z-index: 3062 !important;
  position: relative;
}

/* Backdrop untuk confirm/error/success modal */
#confirmModal + .modal-backdrop,
#errorModal + .modal-backdrop,
#successModal + .modal-backdrop {
  z-index: 3059 !important;
}

/* Checkbox Styling - Match with Select2/Form Control */
#tableTransactions input[type="checkbox"],
#tableTransactions #checkAllTransactions,
#tableTransactions .transaction-checkbox {
  width: 1.25em !important;
  height: 1.25em !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

#tableTransactions input[type="checkbox"]:focus,
#tableTransactions #checkAllTransactions:focus,
#tableTransactions .transaction-checkbox:focus {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#tableTransactions input[type="checkbox"]:checked,
#tableTransactions #checkAllTransactions:checked,
#tableTransactions .transaction-checkbox:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

#tableTransactions input[type="checkbox"]:hover,
#tableTransactions #checkAllTransactions:hover,
#tableTransactions .transaction-checkbox:hover {
  border-color: #86b7fe !important;
}