/* ------------------------------------------------- */
/* Custom styles                                     */
/* ------------------------------------------------- */

.dot-20px {
    display: inline-block;       /* Menjaga elemen tetap dalam satu baris */
    width: 20px;                 /* Lebar tetap untuk elemen */
    white-space: nowrap;         /* Mencegah teks membungkus */
    overflow: hidden;            /* Menyembunyikan teks yang berlebih */
    text-overflow: ellipsis;     /* Menambahkan titik-titik di akhir */
}

.text-truncate {
    white-space: nowrap;           /* Mencegah teks membungkus ke baris baru */
    overflow: hidden;              /* Menyembunyikan teks yang berlebih */
    text-overflow: ellipsis;       /* Menambahkan titik-titik di akhir */
}


/* ------------------------------------------------- */
/* Custom button styles                              */
/* ------------------------------------------------- */
/* Extend Bootstrap primary button */
.btn-primary-app {
    color: #fff;                               /* teks putih */
    background-color: var(--app-bg);             /* custom warna */
    border-color: var(--app-bg);                 /* border sama dengan background */
}

/* Hover */
.btn-primary-app:hover {
    color: #fff;
    background-color: var(--app-bg-hover);       /* lebih gelap saat hover */
    border-color: var(--app-bg-border);
}

/* Active / focus */
.btn-primary-app:active,
.btn-primary-app:focus {
    color: #fff;
    background-color: var(--app-bg-active);
    border-color: var(--app-border-active);
}

/* Optional: disabled */
.btn-primary-app:disabled {
    background-color: var(--app-bg);
    border-color: var(--app-bg);
    opacity: 0.65;
}


/* ------------------------------------------------- */
/* Custom range track & thumb styles                 */
/* ------------------------------------------------- */
/* Custom range track & thumb */
.form-range-app {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    background-color: #dee2e6;  /* track default */
    border-radius: 0.25rem;
    outline: none;
    padding: 0;
    margin: 0;
}
/* Track for Firefox */
.form-range-app::-moz-range-track {
    background-color: #dee2e6;
    border-radius: 0.25rem;
}
/* Track for Chrome, Safari, Edge */
.form-range-app::-webkit-slider-runnable-track {
    background-color: #dee2e6;
    border-radius: 0.25rem;
}
.form-range-app::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--app-bg);  /* custom color */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin-top: -0.25rem; /* center thumb on track */
    transition: background 0.2s ease-in-out;
}
.form-range-app::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: var(--app-bg);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
.form-range-app:hover::-webkit-slider-thumb {
    background-color: var(--app-bg-hover); /* lebih gelap saat hover */
}
.form-range-app:active::-webkit-slider-thumb {
    background-color: var(--app-bg-active);
}
.form-range-app::-webkit-slider-thumb {
    transition: background 0.2s ease-in-out;
}




/* Style untuk mengatur gap antar element dalam group */
.element-group-container {
    display: flex;
    gap: 8px;
}


/* Style untuk menjadikan text huruf besar pada input */
input.text-uppercase {
    text-transform: uppercase;
}


/* Style untuk menjadikan text miring placeholder pada input */
input.italic-placeholder::placeholder {
    font-style: italic;
    text-transform: none;
}




/* Style untuk zoom icon */
.icon-zoom {
    transition: transform 0.3s ease;
    display: inline-block;
}
.icon-zoom:hover {
    animation: zoom 0.3s forwards;
}
.icon-zoom.disabled {
    color: #ccc;
    cursor: not-allowed;
}

@keyframes zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}




/* ------------------------------------------------- */
/* Custom styles untuk Toastr                        */
/* ------------------------------------------------- */
#toast-container {
    margin-top: 40px;
    box-shadow: none !important;
    padding: 15px !important;
}
#toast-container .toast-info {
    background-color: #17a2b8 !important;
    color: white !important;
}
#toast-container .toast-success {
    background-color: #28a745 !important;
    color: white !important;
}
#toast-container .toast-warning {
    background-color: #ffc107 !important;
    color: black !important;
}
#toast-container .toast-error {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Animasi muncul dari samping (dari kanan ke kiri) */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%); /* Mulai di luar layar sebelah kanan */
    }
    100% {
        transform: translateX(0); /* Posisikan ke tempat semula */
    }
}

/* Efek getar (seperti nabrak) */
@keyframes shakeEffect {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px); /* Geser sedikit ke kiri */
    }
    50% {
        transform: translateX(10px); /* Geser sedikit ke kanan */
    }
    75% {
        transform: translateX(-5px); /* Geser sedikit ke kiri */
    }
    100% {
        transform: translateX(0); /* Kembali ke posisi awal */
    }
}

/* Efek hide (animasi menghilang dengan shake) */
@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        opacity: 1; /* Mulai dengan opasitas penuh */
    }
    100% {
        transform: translateX(-100%); /* Geser ke kiri keluar dari layar */
        opacity: 0; /* Hilang */
    }
}

/* Style untuk toast */
.toast {
    border-radius: 10px !important;
    overflow: hidden !important;
    animation: slideInFromRight 0.5s ease, shakeEffect 0.3s ease 0.5s; /* Animasi muncul dari kanan dan getar */
}
/* Animasi bergerak ke kiri dan menghilang */
.toast.hide {
    animation: slideOutToLeft 0.5s ease forwards;
}