/*
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;
        }