/**
 * Report Proposal Page Styles
 *
 * Berisi styling untuk halaman pengumuman proposal termasuk:
 * - Animasi gradient shift dan fade in
 * - Table hover effects untuk desktop dan mobile
 * - Dark mode support dengan gradients
 * - Responsive design untuk berbagai ukuran layar
 *
 * @author LazisMU Team
 * @version 1.0
 * @since 2025
 */

/* ===============================================
   ANIMATIONS
   =============================================== */

/**
 * Animasi gradient shift untuk background dinamis
 * Membuat efek pergerakan gradient yang smooth
 */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

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

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

/**
 * Animasi fade in untuk entrance effect
 * Digunakan untuk animasi masuk elemen saat page load
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ===============================================
   LAYOUT & BACKGROUNDS
   =============================================== */

/**
 * Dark mode background dengan gradient dinamis
 * Menggunakan multiple colors untuk efek yang menarik
 */
.dark {
    background: linear-gradient(-45deg, #1a1a1a, #2d2d2d, #3a3a3a, #2d1f1f);
}

/* ===============================================
   UTILITY CLASSES
   =============================================== */

/**
 * Fade in animation utility class
 * Dapat diterapkan pada elemen yang membutuhkan entrance animation
 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* ===============================================
   TABLE INTERACTIONS
   =============================================== */

/**
 * Table row hover effect untuk light mode
 * Memberikan feedback visual saat user hover pada baris tabel
 */
.table-row:hover {
    background-color: rgba(251, 146, 60, 0.05);
}

/**
 * Table row hover effect untuk dark mode
 * Menggunakan opacity lebih tinggi untuk visibilitas yang lebih baik
 */
.dark .table-row:hover {
    background-color: rgba(251, 146, 60, 0.1);
}