/* Custom Styling & Mobile PWA Animations for EduPulse Uganda */

@layer utilities {
    .brand-shadow {
        box-shadow: 0 10px 30px -5px rgba(217, 4, 41, 0.15);
    }
}

/* Touch-friendly transitions */
button, a, input, select {
    touch-action: manipulation;
}

/* Status Pill Badges */
.badge-present {
    @apply bg-emerald-100 text-emerald-800 border border-emerald-200 font-semibold px-2.5 py-1 rounded-full text-xs inline-flex items-center gap-1;
}

.badge-absent {
    @apply bg-rose-100 text-rose-800 border border-rose-200 font-semibold px-2.5 py-1 rounded-full text-xs inline-flex items-center gap-1;
}

.badge-late {
    @apply bg-amber-100 text-amber-800 border border-amber-200 font-semibold px-2.5 py-1 rounded-full text-xs inline-flex items-center gap-1;
}

.badge-excused {
    @apply bg-sky-100 text-sky-800 border border-sky-200 font-semibold px-2.5 py-1 rounded-full text-xs inline-flex items-center gap-1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #0D0D0D;
    border-radius: 4px;
}

/* High Quality Print Styles for Official ID Cards & Receipts */
@media print {
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    body {
        background: #ffffff !important;
    }

    body * {
        visibility: hidden;
    }

    #modalPrintStudentIdCard, #modalPrintStudentIdCard *,
    #modalPrintTeacherIdCard, #modalPrintTeacherIdCard *,
    #modalViewReceipt, #modalViewReceipt * {
        visibility: visible;
    }

    #modalPrintStudentIdCard,
    #modalPrintTeacherIdCard,
    #modalViewReceipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    .print\:hidden {
        display: none !important;
    }
}