/* --- Palet Warna Dasar yang Didefinisikan --- */
:root {
  --color-primary: #007bff;     /* Biru Cerah */
  --color-secondary: #6c757d;   /* Abu-abu */
  --color-success: #28a745;     /* Hijau */
  --color-info: #17a2b8;        /* Cyan */
  --color-warning: #ffc107;     /* Kuning */
  --color-danger: #dc3545;      /* Merah */
  --color-light: #f8f9fa;       /* Abu-abu Sangat Terang */
  --color-dark: #343a40;        /* Abu-abu Gelap */
  --color-text-body: #3a4b60;   /* Warna teks utama yang Anda gunakan */
  --color-selection-bg: #ef6f6f; /* Warna latar belakang pilihan teks */
  --color-link: #007bff;        /* Warna Tautan */
  --color-brand-logo: #ef6f6f;  /* Warna untuk logo/header (dipertahankan) */
  --color-form-border: #b7bdd0; /* Warna border form yang Anda gunakan */
  --color-selection-text: #fff;
}

/* --- Pengaturan Global dan Pilihan Teks --- */
::selection {
  color: var(--color-selection-text);
  background: var(--color-selection-bg);
}
a,
.btn-link {
  color: var(--color-link);
}
body {
  color: var(--color-text-body);
}

/* --- Warna Teks (.text-*) --- */
.text-green,
.text-success {
  color: var(--color-success) !important;
}
.text-info {
  color: var(--color-info) !important;
}
.text-danger {
  color: var(--color-danger) !important;
}
.text-primary,
.page-title,
.mail-star.active {
  color: var(--color-primary) !important;
}
.text-warning {
  color: var(--color-warning) !important;
}
.loader {
  color: var(--color-primary);
}
.table th {
  color: var(--color-text-body);
}

/* --- Warna Latar Belakang (.bg-*) dan Badge (.badge-*) --- */
.bg-primary {
  background-color: var(--color-primary) !important;
}
.bg-info {
  background-color: var(--color-info) !important;
}
.bg-warning {
  background-color: var(--color-warning) !important;
}
.bg-success {
  background-color: var(--color-success) !important;
}
.bg-danger {
  background-color: var(--color-danger) !important;
}
.badge-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.badge-success {
  background-color: var(--color-success);
  color: #fff;
}
.badge-danger {
  background-color: var(--color-danger);
  color: #fff;
}
.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-dark);
}
.badge-info {
  background-color: var(--color-info);
  color: #fff;
}
.badge-default {
  background: var(--color-secondary);
  color: #eff2f7;
}

/* --- Warna Latar Belakang Khusus (dipertahankan atau disesuaikan) --- */
.bg-blue, .bg-azure, .bg-indigo, .bg-purple, .bg-red, .bg-orange {
  background-color: var(--color-brand-logo) !important; /* Dipertahankan dari original */
}
.bg-pink, .bg-yellow, .bg-lime, .bg-green, .bg-teal, .bg-cyan {
  background-color: var(--color-warning) !important; /* Disetarakan dengan Warning */
}
.top_dark,
.sidebar_dark #left-sidebar {
  background-color: var(--color-dark) !important;
}
.header_top.dark {
  background-color: var(--color-dark) !important;
}

/* --- Latar Belakang Cerah (.bg-light-*) --- */
.bg-light-blue,
.bg-light-azure,
.bg-light-indigo,
.bg-light-lime,
.bg-light-green,
.bg-light-teal {
  background-color: rgba(0, 123, 255, 0.3); /* Primary dengan opasitas */
  color: var(--color-text-body);
}
.bg-light-pink,
.bg-light-red,
.bg-light-orange,
.bg-light-yellow,
.bg-light-cyan {
  background-color: rgba(255, 193, 7, 0.3); /* Warning dengan opasitas */
  color: var(--color-text-body);
}
.bg-light-purple {
  background-color: rgba(108, 123, 255, 0.3); /* Menggunakan warna ungu baru (contoh) */
  color: #6c75ff;
}
.bg-light-gray {
  background-color: rgba(108, 117, 125, 0.3); /* Secondary dengan opasitas */
  color: var(--color-secondary);
}

/* --- Tombol (Button) --- */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  border: 0;
  font-weight: 800;
}
.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  font-weight: 800;
}
.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success);
  border: transparent;
  font-weight: 800;
}
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  border: transparent;
  font-weight: 800;
}
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  border: transparent;
  font-weight: 800;
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 800;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 800;
}

/* --- Navigasi & Tab --- */
.nav-tabs .nav-link.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.header .nav-tabs .nav-link {
  color: #fff;
}
.header .nav-tabs .nav-link.active {
  border-color: var(--color-form-border);
}
.header .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu .dropdown-item.active {
  color: var(--color-primary);
}

/* --- Form Kontrol --- */
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Menggunakan Primary */
}
.form-control,
.dataTables_wrapper .dataTables_filter,
.input-group-text {
  border-color: var(--color-form-border);
  background: transparent;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--color-primary);
}
.selectgroup-input:checked + .selectgroup-button {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 123, 255, 0.2);
}
.imagecheck-figure:before {
  color: var(--color-warning) !important;
}
.custom-select,
.multiselect_div > .btn-group .btn {
  background-color: transparent;
  border-color: var(--color-form-border);
}

/* --- Wizard --- */
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active,
.wizard > .actions a,
.wizard > .actions a:hover {
  background: var(--color-primary);
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover {
  background: rgba(0, 123, 255, 0.2);
  color: var(--color-primary);
}

/* --- Tabel --- */
.table.table-custom td,
.table.table-custom th,
.table.table_custom tr {
  background: rgba(255, 255, 255, 0.5);
}

/* --- Komponen Lain --- */
.card,
.dropify-wrapper,
.btn-primary {
  border: 0;
}
.card {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 1px 2px #888888;
}
.card.card-fullscreen {
  background-color: #fff !important;
}
.card .card-options a.btn {
  color: #fff;
}
.page .section-white,
.page .section-body {
  background: transparent;
}
.page .section-light {
  background: rgba(255, 255, 255, 0.5);
}
.inline-datepicker.fill_bg {
  color: var(--color-primary);
}
.right_chat li.online .status {
  background: var(--color-primary);
}
.gender_overview {
  background: #eff2f7;
}
.table-calendar-link {
  background: var(--color-primary);
}
.table-calendar-link:hover {
  background: var(--color-text-body);
}
.table-calendar-link::before {
  background: var(--color-text-body);
}
.theme_div {
  background: #fff;
}
hr {
  border-color: var(--color-form-border);
}

/* --- Header & Sidebar --- */
#header_top .brand-logo,
.header {
  background: var(--color-brand-logo); /* Dipertahankan dari original */
}
#header_top .nav-link {
  color: var(--color-text-body);
}
.header_top.dark .nav-link,
.sidebar_dark #header_top .nav-link {
  color: #eff2f7 !important;
}
#left-sidebar {
  background: rgba(255, 255, 255, 0.1);
}
.metismenu a {
  color: var(--color-text-body);
}
.metismenu a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.metismenu .active > a,
.sidebar_dark .metismenu .active > a {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.metismenu .active ul .active a {
  color: var(--color-primary);
  background: transparent;
}
.metismenu.grid > li.active > a,
.metismenu.grid > li > a:hover {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
}
.iconcolor #header_top .nav-link {
  color: var(--color-primary) !important;
}

/* --- Avatar (.avatar-*) --- */
.avatar.avatar-blue,
.avatar.avatar-azure,
.avatar.avatar-indigo,
.avatar.avatar-purple,
.avatar.avatar-red,
.avatar.avatar-orange {
  background-color: rgba(0, 123, 255, 0.3); /* Primary dengan opasitas */
  color: var(--color-primary);
}
.avatar.avatar-yellow,
.avatar.avatar-lime,
.avatar.avatar-green,
.avatar.avatar-teal,
.avatar.avatar-cyan,
.avatar.avatar-pink {
  background-color: rgba(255, 193, 7, 0.3); /* Warning dengan opasitas */
  color: var(--color-warning);
}

/* --- Gradien (Disarankan Disesuaikan dengan Palet Baru) --- */
.gradient .fa {
  background: -webkit-linear-gradient(45deg, var(--color-primary), var(--color-warning));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient .custom-switch-input:checked ~ .custom-switch-indicator {
  background: linear-gradient(45deg, var(--color-primary), var(--color-warning)) !important;
}
.gradient .metismenu.grid > li.active > a,
.gradient .metismenu.grid > li > a:hover {
  background: linear-gradient(45deg, var(--color-primary), var(--color-primary)) !important;
  color: var(--color-form-border);
  border: 0;
}
.gradient .btn-primary {
  background: linear-gradient(45deg, var(--color-primary), var(--color-warning)) !important;
  border: 0;
}
.gradient .bg-success,
.gradient .bg-danger,
.gradient .badge-success,
.gradient .progress-bar,
.gradient .btn-danger {
  background: linear-gradient(45deg, var(--color-success), var(--color-danger)) !important;
}
/* Mempertahankan Gradien Dark */
.gradient .btn-dark {
  background: linear-gradient(45deg, #808488, #333537) !important;
}

/* --- Lainnya (Dipertahankan) --- */
.inbox .detail {
  background: #fff;
}
.file_folder a {
  background: #fff;
  border-color: #eff2f7;
}
.auth .auth_left {
  background: transparent;
  width: 50%;
}
@media screen and (max-width: 992px) {
  .auth .auth_left {
    width: 100%;
  }
}
.auth .auth_left > .card {
  max-width: 340px;
  margin-left: auto;
}
body.offcanvas-active #left-sidebar {
  background: #fff;
}
body.dark-mode::after {
  display: none;
}
.page-header .right .nav-pills .nav-link {
  color: var(--color-text-body);
}