/* Mencegah zoom cubitan layar dan efek membal saat mentok */
html,
body {
    touch-action: pan-y;
    overscroll-behavior-y: none;
}

/* Mencegah zoom otomatis saat mengklik kolom input / form */
input,
button,
select,
textarea {
    touch-action: manipulation;
    font-size: 16px !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
}

.tab-button.active {
    background-color: #eef2ff;
    color: #4338ca;
    border-bottom: 2px solid #4338ca;
}

/* Toggle Switch CSS */
input:checked ~ .toggle-bg {
    background-color: #4f46e5;
}
input:checked ~ .dot {
    transform: translateX(100%);
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-gradient {
    background: linear-gradient(-45deg, #6366f1, #a855f7, #ec4899, #3b82f6);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.view-section {
    display: none;
}

.view-section.active {
    display: block;
}

.judul-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.print-button {
    @apply flex items-center justify-center gap-2 w-full py-2 bg-indigo-50 text-indigo-600 font-medium rounded-lg transition-colors duration-200 mt-2 mb-4 hover:bg-indigo-100;
}

@media print {
    body * {
        visibility: hidden;
    }
    #modal-container, #modal-container * {
        visibility: visible;
    }
    #modal-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent !important;
    }
    .printable-rapor, .printable-rapor * {
        visibility: visible;
    }
    .printable-rapor {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    /* Sembunyikan elemen modal bawaan */
    .bg-slate-800, button {
        display: none !important;
    }
}

/* Tampilan khusus HP untuk memisahkan Branding dan Form Login */
@media (max-width: 1023px) {
    #panelForm {
        display: none !important;
    }

    .mobile-login-active #panelForm {
        display: flex !important;
    }

    .mobile-login-active #panelBranding {
        display: none !important;
    }

    .mobile-login-active #mobileLoginBtnWrapper {
        display: none !important;
    }

    #panelBranding {
        border-bottom: none !important;
    }
}