/* Custom Styling - Sistem Presensi MAN Manokwari */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism Classes */
.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass-header {
    background: rgba(15, 23, 42, 0.85);
}

/* Scanner Laser Animation */
.scanner-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}

.scanner-laser {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, #6366f1 50%, rgba(99, 102, 241, 0) 100%);
    box-shadow: 0 0 15px 3px rgba(99, 102, 241, 0.75);
    animation: scanAnimation 2.2s infinite ease-in-out;
    z-index: 10;
    pointer-events: none;
}

@keyframes scanAnimation {
    0% {
        top: 5%;
        opacity: 0.8;
    }
    50% {
        top: 90%;
        opacity: 1;
    }
    100% {
        top: 5%;
        opacity: 0.8;
    }
}

/* Scanner Corner Guides */
.scanner-guide {
    position: absolute;
    width: 32px;
    height: 32px;
    border-color: #6366f1;
    border-style: solid;
    pointer-events: none;
    z-index: 10;
}
.guide-tl { top: 16px; left: 16px; border-width: 4px 0 0 4px; border-top-left-radius: 8px; }
.guide-tr { top: 16px; right: 16px; border-width: 4px 4px 0 0; border-top-right-radius: 8px; }
.guide-bl { bottom: 16px; left: 16px; border-width: 0 0 4px 4px; border-bottom-left-radius: 8px; }
.guide-br { bottom: 16px; right: 16px; border-width: 0 4px 4px 0; border-bottom-right-radius: 8px; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* Kartu Pelajar (Student ID Card) CR80 Standard Layout */
.id-card-container {
    width: 330px;
    height: 210px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    color: #ffffff;
    page-break-inside: avoid;
    break-inside: avoid;
}

.id-card-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
}

/* Print Stylesheet for ID Cards & Reports */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .no-print, nav, header, aside, .bottom-nav, button.print-hide {
        display: none !important;
    }
    .print-sheet {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .id-card-container {
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .table-print {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .table-print th, .table-print td {
        border: 1px solid #cbd5e1 !important;
        padding: 6px 8px !important;
        color: #0f172a !important;
    }
}