body {
  background-color: var(--cui-tertiary-bg);
}

.wrapper {
  width: 100%;
  padding-inline: var(--cui-sidebar-occupy-start, 0)
    var(--cui-sidebar-occupy-end, 0);
  will-change: auto;
  transition: padding 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .wrapper {
    transition: none;
  }
}

.sidebar-toggler {
  margin-inline-start: auto;
}

.header > .container-fluid {
  min-height: calc(4rem + 1px);
}
.header > .container-fluid + .container-fluid {
  min-height: 3rem;
}

.card-footer .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-footer .pagination .page-item button.page-link {
  font-size: 12px;
  padding: 8px 12px;
}

.card-header .btn-group {
  flex-shrink: 0;
}

.card-footer .pagination .page-item .form-select {
  min-width: 100px;
}

.btn-min-100 {
  min-width: 100px;
}

.btn-min-80 {
  min-width: 80px;
}

.btn-danger,
.btn-danger:hover {
  --cui-btn-color: #fff;
  --cui-btn-hover-color: #fff;
  --cui-btn-active-color: #fff;
  --cui-btn-disabled-color: #fff;
}

.card-body:has(+ .card-tabulator) {
  flex: none;
  border-bottom: var(--cui-card-border-width) solid var(--cui-card-border-color);
}

/* =====================================================
   Nested Nav-Group Fix for CoreUI v5
   Ensures sub-groups like "Kas & Bank" stay visually
   contained within their parent "Finance" group.
   ===================================================== */

/* 1. Remove overflow:hidden on nested group's items so they
      are not clipped during the parent's slide animation */
.sidebar-nav .nav-group .nav-group-items .nav-group .nav-group-items {
  overflow: visible;
}

/* 2. Remove the top margin that pushes nested groups out.
      !important tidak diperlukan: selector ini (0,4,0) lebih spesifik
      dari aturan CoreUI (0,3,0) .sidebar-nav .nav-item + .nav-group */
.sidebar-nav .nav-group .nav-group-items .nav-group {
  margin-top: 0;
}

/* 3. Remove adjacent-show margin for nested groups */
.sidebar-nav .nav-group .nav-group-items .nav-group.show + .show {
  margin-top: 0;
}

/* 4. Remove separate background on nested groups so they
      blend into the parent group */
.sidebar-nav .nav-group .nav-group-items .nav-group.show {
  background: transparent;
}

/* 5. Indent the nested group toggle one more level */
.sidebar-nav .nav-group .nav-group-items .nav-group .nav-link.nav-group-toggle {
  padding-inline-start: calc(
    var(--cui-sidebar-nav-link-padding-x, 0.625rem) +
    var(--cui-sidebar-nav-link-icon-width, 1rem) +
    var(--cui-sidebar-nav-link-icon-margin, 0.25rem) +
    0.5rem
  );
}

/* 6. Indent nested group items one more level */
.sidebar-nav .nav-group .nav-group-items .nav-group .nav-group-items .nav-link {
  padding-inline-start: calc(
    var(--cui-sidebar-nav-link-padding-x, 0.625rem) +
    var(--cui-sidebar-nav-link-icon-width, 1rem) +
    var(--cui-sidebar-nav-link-icon-margin, 0.25rem) +
    1.25rem
  );
}

.modal-footer .btn {
  min-width: 100px;
}

/* =====================================================
   Tooltip Indicator
   Global reusable class for info icons that trigger
   CoreUI tooltip on labels.
   ===================================================== */
.tooltip-indicator {
  font-size: 0.75rem;
  cursor: help;
  color: var(--cui-primary);
  opacity: 0.8;
  margin-inline-start: 0.35rem;
  vertical-align: middle;
}

/* =====================================================
   Pagination Loading State
   Applied by PaginationComponent.setLoading() during
   table data load to disable interaction visually.
   ===================================================== */
.pagination-container.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* =====================================================
   Quill Editor (shared across transaction form views)
   ===================================================== */
.quill-wrapper {
  position: relative;
  overflow: hidden;
}

.quill-wrapper .ql-toolbar {
  border-radius: var(--cui-border-radius) var(--cui-border-radius) 0 0;
}

.quill-wrapper .ql-container {
  height: 80px;
  overflow-y: auto;
  font-size: 0.875rem;
  border-radius: 0 0 var(--cui-border-radius) var(--cui-border-radius);
}

.readonly-note {
  min-height: 80px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--cui-border-color);
  border-radius: var(--cui-border-radius);
  background: var(--cui-body-bg);
  color: var(--cui-body-color);
  font-size: 0.875rem;
}

/* Hilangkan jarak antar paragraf pada note read-only (mode view) */
.readonly-note p {
  margin-bottom: 0;
}

/* =====================================================
   PickItemModal single-select (radio) indicator
   Used when PickItemModal.show({ multi: false }) — the
   row header renders a radio circle instead of a checkbox.
   ===================================================== */
.pick-radio-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cui-secondary-color, #8a93a2);
  border-radius: 50%;
  vertical-align: middle;
  box-sizing: border-box;
}

.pick-radio-indicator.checked {
  border-color: var(--cui-primary, #321fdb);
  background: radial-gradient(circle, var(--cui-primary, #321fdb) 0 40%, transparent 50%);
}