/**
 * Turnitin Admin Dashboard - Main Styles
 * Extracted from index.html for better code organization
 * Version: 1.0.0
 */

/* ============================================================================
   Base Styles
   ============================================================================ */

body {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: #F8FAFC;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Animations
   ============================================================================ */

/* Pulse Soft Animation */
@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .85;
        transform: scale(0.98);
    }
}

.animate-pulse-soft {
    animation: pulse-soft 3s ease-in-out infinite;
}

/* Blink Subtle Animation */
@keyframes blink-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.animate-blink-subtle {
    animation: blink-subtle 1.5s ease-in-out infinite;
}

/* Breathe Animation */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

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

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* Sweep Animation (for details expand) */
@keyframes sweep {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* VIP Shine Animation */
@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   Dropzone Styles
   ============================================================================ */

#dropzone {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#dropzone.dragover {
    border-color: #2563EB;
    background-color: #EFF6FF;
    box-shadow: inset 0 0 20px rgba(37, 99, 235, 0.05);
    transform: translateY(-2px);
}

/* ============================================================================
   Table Styles
   ============================================================================ */

.table-row-hover:hover td {
    background-color: #FEFCE8;
}

/* ============================================================================
   Details/Summary (FAQ Accordion)
   ============================================================================ */

details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

details[open] summary~* {
    animation: sweep .3s ease-in-out;
}

details[open] .arrow-icon {
    transform: rotate(180deg);
}

/* ============================================================================
   Scrollbar Hide Utilities
   ============================================================================ */

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ============================================================================
   VIP Speedup Styles
   ============================================================================ */

.vip-shine {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    background-size: 200% 100%;
    animation: shine 1.5s infinite linear;
}

.bg-pattern-vip {
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0);
    background-size: 16px 16px;
}