body {
    font-family: 'Sukhumvit Set', 'Prompt', 'Inter', 'Kanit', 'Noto Sans Lao', sans-serif !important;
}

.hidden-important {
    display: none !important;
}

@media print {
    body>*:not(#bill-modal) {
        display: none !important;
    }

    #bill-modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    #bill-modal>div {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        background: rgb(23, 9, 102) !important;
    }

    .print-hide {
        display: none !important;
    }
}

/* 📌 Custom Scrollbar Styling (Premium Web Design) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* For purple background card (Announcements) */
.bg-\[\#7c50ff\] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

.bg-\[\#7c50ff\] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

.bg-\[\#7c50ff\] .custom-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 📌 Mobile Responsive & Touch Optimizations (All Screen Sizes) */
@media (max-width: 640px) {
    /* Form & Input adjustments for touch screens */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    select,
    textarea {
        font-size: 14px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Modal responsiveness */
    #form-modal > div,
    #asset-modal > div,
    #policy-modal > div,
    #bill-modal > div {
        max-height: 94vh !important;
        border-radius: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Table responsive overflow */
    #table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack filter controls on narrow screens */
    #table-controls-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Modal footer buttons */
    #form-modal button[type="submit"],
    #form-modal button[type="button"] {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Extra small phone screens (320px - 480px) */
    body {
        font-size: 13px !important;
    }

    .glass-card {
        padding: 1.25rem !important;
    }

    #modal-title {
        font-size: 1rem !important;
    }

    /* Ensure warning alert badges don't overflow */
    #emp-id-duplicate-alert {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}