/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* Palet Warna Merah "Ruby" */
[data-theme=default][data-theme-colors=red] {
    --vz-primary: #E53935;
    --vz-primary-rgb: 229, 57, 53;
    --vz-primary-bg-subtle: rgba(229, 57, 53, 0.15);
    --vz-primary-border-subtle: rgba(229, 57, 53, 0.3);
    --vz-primary-text-emphasis: #B71C1C; /* Versi lebih gelap untuk teks */
}
[data-theme=default] .card-radio .form-check-label[for=themeColor-05] {
    background-color: #E53935;
}

/*
 * ===================================================================
 * === KUSTOMISASI KARTIK GRIDVIEW AGAR SESUAI DENGAN TEMA VELZON ====
 * ===================================================================
 */

/* 
 * 1. Mengganti gaya panel Kartik agar mirip dengan Card Velzon.
 *    Ini akan membuat panel heading menggunakan warna merah (--vz-primary) kita.
 */
.panel.panel-primary {
    border-color: var(--vz-primary-border-subtle) !important;
    border-radius: var(--vz-card-border-radius, 0.3rem) !important;
}

.panel.panel-primary > .panel-heading {
    color: #fff !important;
    background-color: var(--vz-primary) !important;
    border-color: var(--vz-primary) !important;
}

/* 
 * 2. Mengubah tampilan tombol "outline-secondary" HANYA di dalam toolbar Kartik.
 *    Ini tidak akan merusak tombol "outline-secondary" di tempat lain.
 */
.kv-grid-toolbar .btn.btn-outline-secondary {
    color: var(--vz-primary) !important; /* Warna teks & ikon menjadi merah */
    border-color: var(--vz-primary-border-subtle) !important; /* Border menjadi merah soft */
    background-color: transparent;
}

/* Efek saat tombol di-hover atau aktif */
.kv-grid-toolbar .btn.btn-outline-secondary:hover,
.kv-grid-toolbar .btn.btn-outline-secondary:focus,
.kv-grid-toolbar .btn-group.show > .btn.btn-outline-secondary {
    color: #fff !important;
    background-color: var(--vz-primary) !important; /* Background menjadi merah solid */
    border-color: var(--vz-primary) !important;
}

/* 
 * 3. (Opsional) Menyesuaikan warna ikon di dalam dropdown menu ekspor.
 */
.dropdown-menu .export-xls i,
.dropdown-menu .export-pdf i,
.dropdown-menu .export-csv i {
    color: var(--vz-success) !important; /* Ikon Excel tetap hijau */
}

@keyframes fadeInDown {


            0% {
                transform: translate3d(0, -100%, 0);
                opacity: 0;
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        @keyframes fadeOutUp {


            0% {
                opacity: 1
            }

            100% {
                transform: translate3d(0, -100%, 0);
                opacity: 0
            }
        }

        /* Kelas untuk SweetAlert2 */
        .fadeInDown {
            animation: fadeInDown 0.5s ease-out;
            /* Durasi dipercepat menjadi 0.5 detik */
        }

        .fadeOutUp {
            animation: fadeOutUp 0.5s ease-in;
            /* Durasi dipercepat menjadi 0.5 detik */
        }

        .grid-view .summary,
        .grid-view .m-0 {
            color: white !important;
        }

.select2-container--krajee-bs5 .select2-selection--single {
    display: flex;
    align-items: center;
    height: calc(1.8em + 0.75rem + 2px); /* Tinggi standar input Bootstrap 5 */
    padding: 0.375rem 0.75rem;
}

/* 
 * FIX #2: Atur agar area teks bisa memanjang tapi tidak mendorong elemen lain.
 * Beri sedikit jarak di sebelah kanan agar tidak menempel ke tombol (x).
*/
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    flex-grow: 1; /* Biarkan elemen ini mengisi ruang yang tersedia */
    overflow: hidden; /* Sembunyikan teks jika terlalu panjang */
    text-overflow: ellipsis; /* Tampilkan '...' untuk teks panjang */
    white-space: nowrap;
    padding-right: 10px; /* Jarak antara teks dan tombol (x) */
    line-height: inherit; /* Reset line-height agar flexbox bekerja */
}

/* 
 * FIX #3: Posisikan tombol clear (x) dengan benar MENGGUNAKAN POSITION, BUKAN FLOAT.
 * Ini adalah kunci perbaikannya.
*/
.select2-container--krajee-bs5 .select2-selection__clear {
    /* HAPUS 'float: right;' DARI KODE ANDA */

    position: absolute; /* Pastikan posisinya absolut relatif terhadap container */
    top: 50%;
    /* transform: translateY(-50%);  */
    right: 0.5rem; /* Beri ruang agar tidak menabrak panah dropdown di kanan */
    margin: 0; /* Reset semua margin */
}