/* Base styles */
html {
    scroll-behavior: smooth;
}

/* Animations */
@keyframes dataFlow {
    0% { left: 20%; opacity: 0; transform: scale(0.5); }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { left: 80%; opacity: 0; transform: scale(0.5); }
}

@keyframes scanEffect {
    0% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(96px); opacity: 0.2; }
    100% { transform: translateY(0); opacity: 0.8; }
}

.data-particle {
    animation: dataFlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.data-particle-delayed {
    animation: dataFlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 1.5s;
}

.animate-scan {
    animation: scanEffect 2s ease-in-out infinite;
}

/* Print CSS */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: white !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .a4-page {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        height: auto !important;
        page-break-after: always;
    }
    
    /* Ensure table borders print properly */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }
    th, td {
        border: 1px solid #000 !important;
        padding: 8px !important;
    }
    
    /* Ensure colors print properly */
    .bg-slate-200 { background-color: #e2e8f0 !important; }
    .bg-slate-100 { background-color: #f1f5f9 !important; }
    .bg-slate-50  { background-color: #f8fafc !important; }
    .bg-brand-green { 
        background-color: #008b4b !important; 
        color: white !important;
    }
    .text-brand-green { color: #008b4b !important; }
    .text-brand-blue { color: #0d6efd !important; }
    /* Modal Print Support */
    body.modal-open > *:not(.print-modal-only.flex) {
        display: none !important;
    }
    
    .print-modal-only.flex {
        display: block !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .print-modal-only.flex > div {
        display: block !important;
        min-height: auto !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .print-modal-only.flex .bg-white.rounded-xl {
        box-shadow: none !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
}

/* Screen layout for the A4 form simulation */
@media screen {
    .a4-page {
        width: 210mm;
        min-height: 297mm;
        padding: 15mm;
        margin: 0 auto;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        /* shadow-2xl from tailwind is applied */
    }
}

/* -------------------------------------
 * SIMULATION ANIMATIONS (Dự án A & B) 
 * ------------------------------------- */

/* Project A: Road Movement */
.sim-road {
    background-image: linear-gradient(90deg, transparent 50%, #94a3b8 50%);
    background-size: 30px 4px;
    background-repeat: repeat-x;
    background-position: 0 center;
}
.sim-road-animate {
    animation: roadMove 0.5s linear infinite;
}
@keyframes roadMove {
    from { background-position: 0 center; }
    to { background-position: -30px center; }
}

/* Project A: Flash Effect */
@keyframes flashCamera {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; transform: scale(1.5); }
    20% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
.animate-flash {
    animation: flashCamera 1s ease-out forwards;
}

/* Project A: Scanner Beam */
@keyframes beamScan {
    0% { opacity: 0; transform: rotate(15deg) scaleY(0); }
    10% { opacity: 0.8; transform: rotate(15deg) scaleY(1); }
    50% { transform: rotate(-15deg) scaleY(1.2); }
    90% { opacity: 0.8; transform: rotate(15deg) scaleY(1); }
    100% { opacity: 0; transform: rotate(15deg) scaleY(0); }
}
.animate-beam {
    animation: beamScan 2s ease-in-out forwards;
}

/* Project B: Radar Spin */
.sim-radar-sweep {
    animation: radarSpin 4s linear infinite;
}
@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Grid Cell Flash Alert */
@keyframes cellAlert {
    0% { background-color: rgba(239, 68, 68, 0.2); }
    50% { background-color: rgba(239, 68, 68, 0.8); }
    100% { background-color: rgba(239, 68, 68, 0.2); }
}
.sim-cell-alert {
    animation: cellAlert 1s ease-in-out infinite;
}

/* Project A: Laser Sweep Animation */
@keyframes laserSweep {
    0% { transform: translateY(-40px); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(0px); }
    90% { opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}
.animate-laser {
    animation: laserSweep 1.5s ease-in-out forwards;
}