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


        /* Mengatur container Select2 secara keseluruhan */
        .select2-container .select2-selection--single {
            height: auto !important;
            line-height: 0.5 !important;
            padding: 8px 12px !important;
            border: 1px solid #ced4da;
            /* Border default */
            border-radius: 4px;
            /* Border radius */
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            /* Transisi halus */
        }

        /* Form dalam keadaan normal (default) */
        .select2-container .select2-selection--single .select2-selection__rendered {
            color: #495057;
            /* Warna teks default */
            line-height: 1.5 !important;
        }

        /* Form yang valid (success) */
        .select2-container .select2-selection--single.is-valid {
            border-color: #0ab39c;
            /* Hijau */
            /* box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);  */
        }

        /* Form yang invalid (required/error) */
        .select2-container .select2-selection--single.is-invalid {
            border-color: #dc3545;
            /* Merah */
            box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
            /* Bayangan merah */
        }

        /* Placeholder teks berwarna abu-abu */
        .select2-container .select2-selection--single .select2-selection__rendered[title=''] {
            color: #6c757d;
            /* Warna abu placeholder */
        }

        /* Warna tombol 'x' saat invalid */
        .select2-container .select2-selection--single.is-invalid .select2-selection__clear {
            color: #dc3545;
            /* Warna merah */
        }

        /* Warna tombol 'x' saat valid */
        .select2-container .select2-selection--single.is-valid .select2-selection__clear {
            color: #0ab39c;
            /* Warna hijau */
        }

        /* Mengatur posisi tombol 'x' (clear button) */
        .select2-container .select2-selection--single .select2-selection__clear {
            position: absolute;
            top: 30%;
            right: 30px;
            /* transform: translateY(-50%); */
            font-size: 16px;
            color: rgb(255, 0, 0);
            cursor: pointer;
        }