/* =======================
   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: #0000008f; /* 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: #0000001a !important;
    border-color: #0000001a !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: #0000008f !important; /* versi lebih gelap dari emerald light */
    border-color: #0000008f !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 */
}

.brand-text {
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    vertical-align: middle;
    margin-left: 6px; /* 🔹 atur jarak di sini */
}

.side-nav-second-level li a {
    white-space: normal; /* boleh turun ke bawah */
    word-wrap: break-word; /* pecah kata panjang */
}

/* Setting TOmbol pada halaman inovasi */
a.disabled {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}

/* ==============================
   Select2 Validation (Bootstrap 5 - Hyper)
   ============================== */

.select2-container--bootstrap-5 .select2-selection.is-invalid {
    border-color: #dc3545 !important; /* merah */
}

.select2-container--bootstrap-5 .select2-selection.is-valid {
    border-color: #45d391 !important; /* hijau */
}

/* Optional: biar tinggi & radius konsisten */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.9rem + 2px);
    border-radius: 0.25rem;
}