:root {
  /* Core Bootstrap Colors (Dark-Friendly) */
  --primary: #4a90e2; /* Deep Blue (primary) */
  --secondary: #e8ecef; /* Muted Gray */
  --success: #3d8b40; /* Forest Green */
  --info: #2a9d8f; /* Teal-Blue */
  --warning: #d4a017; /* Golden Amber */
  --danger: #c0392b; /* Deep Red */
  --light: #ffffff; /* Dark Gray for backgrounds */
  --dark: #1e1e2e; /* Charcoal Black */

  /* Extended Colors */
  --blue: #4a90e2;
  --indigo: #3f51b5;
  --purple: #7e57c2;
  --pink: #ad1457;
  --red: #c0392b;
  --orange: #e67e22;
  --yellow: #d4a017;
  --green: #3d8b40;
  --teal: #2a9d8f;
  --cyan: #26c6da;

  /* Neutral */
  --white: #ffffff;
  --gray: #9ca3af;
  --gray-dark: #374151;

  --body-color: #374151; /* Text color */
  --font-family-sans-serif: "Inter", "Source Sans Pro", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* === Base Colors for Buttons & Backgrounds === */
/* Primary */
.btn-primary,
.bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #357abd !important;
  border-color: #357abd !important;
}

/* Secondary */
.btn-secondary,
.bg-secondary {
  background-color: var(--secondary) !important; /* #e8ecef */
  border-color: var(--secondary) !important;
  color: #495057 !important;
}
.btn-secondary:hover {
  background-color: #d1d5da !important;
  border-color: #d1d5da !important;
}

/* Success */
.btn-success,
.bg-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #2e6b30 !important;
  border-color: #2e6b30 !important;
}

/* Info */
.btn-info,
.bg-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: #227066 !important;
  border-color: #227066 !important;
}

/* Warning */
.btn-warning,
.bg-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background-color: #b68a0f !important;
  border-color: #b68a0f !important;
}

/* Danger */
.btn-danger,
.bg-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #a93226 !important;
  border-color: #a93226 !important;
}

/* Dark */
.btn-dark,
.bg-dark {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: #fff !important;
}
.btn-dark:hover {
  background-color: #151521 !important;
  border-color: #151521 !important;
}

/* Light */
.btn-light,
.bg-light {
  background-color: var(--light) !important;
  border-color: var(--light) !important;
  color: #495057 !important;
}
.btn-light:hover {
  background-color: #d1d5da !important;
  border-color: #d1d5da !important;
}

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem; /* Rounded, lebih modern */
  transition: all 0.2s ease;
}

/* Primary */
.badge-primary {
  background-color: var(--primary);
  color: #fff;
}

/* Secondary */
.badge-secondary {
  background-color: var(--secondary);
  color: #495057;
}

/* Success */
.badge-success {
  background-color: var(--success);
  color: #fff;
}

/* Info */
.badge-info {
  background-color: var(--info);
  color: #fff;
}

/* Warning */
.badge-warning {
  background-color: var(--warning);
  color: #fff; /* teks gelap untuk kontras di warna terang */
}

/* Danger */
.badge-danger {
  background-color: var(--danger);
  color: #fff;
}

/* Dark */
.badge-dark {
  background-color: var(--dark);
  color: #fff;
}

/* Light */
.badge-light {
  background-color: var(--light);
  color: #495057 !important;
}

/* === Extended Named Colors (for class like bg-purple, text-purple, etc) === */
.bg-blue {
  background-color: var(--blue) !important;
}
.bg-indigo {
  background-color: var(--indigo) !important;
}
.bg-purple {
  background-color: var(--purple) !important;
}
.bg-maroon {
  background-color: var(--red) !important;
}
.bg-red {
  background-color: var(--red) !important;
}
.bg-orange {
  background-color: var(--orange) !important;
  color: #fff !important;
}
.bg-yellow {
  background-color: var(--yellow) !important;
}
.bg-green {
  background-color: var(--green) !important;
}
.bg-teal {
  background-color: var(--teal) !important;
}
.bg-cyan {
  background-color: var(--cyan) !important;
}
.bg-gray {
  background-color: var(--gray) !important;
}
.bg-gray-dark {
  background-color: var(--gray-dark) !important;
}

/* Text colors */
.text-blue {
  color: var(--blue) !important;
}
.text-indigo {
  color: var(--indigo) !important;
}
.text-purple {
  color: var(--purple) !important;
}
.text-maroon {
  color: var(--red) !important;
}
.text-red {
  color: var(--red) !important;
}
.text-orange {
  color: var(--orange) !important;
}
.text-yellow {
  color: var(--yellow) !important;
}
.text-green {
  color: var(--green) !important;
}
.text-teal {
  color: var(--teal) !important;
}
.text-cyan {
  color: var(--cyan) !important;
}
.text-gray {
  color: var(--gray) !important;
}
.text-gray-dark {
  color: var(--gray-dark) !important;
}

/* Extended button variants */
.btn-purple {
  background-color: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}

.btn-indigo {
  background-color: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
}

.btn-orange {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

.btn-teal {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

.btn-cyan {
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: #fff !important;
}

/* === Layout elements === */
body {
  color: var(--body-color) !important;
  background-color: var(--light) !important;
  font-family: var(--font-family-sans-serif) !important;
}

.nav-item.active > .nav-link {
  background-color: var(--primary);
  color: #fff;
}

/* .navbar {
  color: #fff !important;
}



.nav-item.active > .nav-link .nav-icon {
  color: #fff;
}

.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
} */

.skin-blue {
  background-color: var(--primary) !important;
}

.skin-red {
  background-color: var(--danger) !important;
}

.skin-green {
  background-color: var(--green) !important;
}

/* .table thead th {
  background-color: var(--light) !important;
  color: var(--dark) !important;
} */

/* Pagination link */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--primary) !important;
  border: 1px solid #ddd !important;
  background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
}

/* Kotak input select2 */
.select2-container--default .select2-selection--single {
  border: 1px solid #ccc;
  background-color: var(--light);
  color: var(--body-color);
  height: 38px; /* biar sama tinggi dengan .form-control bootstrap */
}

/* Highlighted option */
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Selected option di list */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--secondary) !important;
  color: #495057 !important;
}