/* =======================
   1. Global Primary Color
   ======================= */
:root {
    --bs-primary: #34d399; /* Emerald light */
}

.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}

#scroll-horizontal-datatable thead th {
    vertical-align: middle !important;
    background-color: var(--bs-primary) !important;
    color: white !important;
}

table.dataTable thead th {
    vertical-align: middle !important;
    background-color: var(--bs-primary) !important;
    color: white !important;
}
/* =======================
   2. Buttons
   ======================= */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* =======================
   3. Links
   ======================= */
a {
    color: var(--bs-primary);
}

a:hover {
    color: #27ae60; /* sedikit lebih gelap untuk hover */
}

/* =======================
   4. Badges
   ======================= */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.badge.bg-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* =======================
   5. DataTables Pagination
   ======================= */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #fff !important;
}

/* =======================
   6. Widget Icon
   ======================= */
.widget-icon {
    background-color: rgba(46, 204, 113, 0.15) !important; /* emerald transparan */
    color: var(--bs-primary) !important;
}

/* Ganti warna pagination aktif di DataTables */
.page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Hover pagination */
.page-link:hover {
    background-color: #2bbf88 !important; /* versi lebih gelap dari emerald light */
    border-color: #2bbf88 !important;
    color: #fff !important;
}

/* Ubah semua bg-primary & text-primary */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

/* Checkbox bootstrap yang dicentang */
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Card login atas */
.card-header.bg-primary {
    background-color: var(--bs-primary) !important;
}

.nav-pills.bg-nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.nav-pills.bg-nav-pills .nav-link:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* //// */

/* ---------- Hero: ganti background gradient default jadi primary ---------- */
/* tambahkan var primary dark untuk gradien */
:root {
    --bs-primary-dark: #2cb07f; /* versi sedikit lebih gelap dari --bs-primary */
}

/* Pastikan pseudo-element ikut berubah */
section.hero-section::before,
section.hero-section::after {
    background: var(--bs-primary) !important;
    content: "" !important;
}

/* kalau ada class khusus lighten (avatar/ikon di hero) */
.bg-primary-lighten,
.avatar-title.bg-primary-lighten {
    background-color: rgba(52, 211, 153, 0.12) !important; /* emerald light transparan */
}

/* ikon/teks di dalam avatar-title */
.avatar-title.bg-primary-lighten i,
.avatar-title.bg-primary-lighten .uil,
.avatar-title.bg-primary-lighten svg {
    color: var(--bs-primary) !important;
}

/* pastikan teks putih di hero agar kontras */
section.hero-section .text-white,
section.hero-section .hero-title,
section.hero-section .text-white-50 {
    color: #fff !important;
}

.img-fixed2 {
    width: 600px;
    height: 400px;
    object-fit: cover; /* jaga proporsi, crop jika perlu */
    object-position: center; /* fokus di tengah gambar */
    border-radius: 8px; /* opsional untuk sudut tumpul */
}