/* 
 * Uganda Education Tracker Custom CSS Stylesheet
 * Integrates glassmorphism styles and terminal designs.
 */

:root {
    --glass-bg: rgba(15, 23, 42, 0.45);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Custom Glassmorphism Styles */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

/* Auth active display state */
#auth-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#auth-overlay.active > div {
    transform: scale(1);
}

/* Custom terminal styling & scrollbars */
.scrollbar-terminal::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-terminal::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
}

.scrollbar-terminal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.scrollbar-terminal::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Table styling fixes */
th, td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Pulse animation states */
.pulse-green {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    animation: pulse-green-anim 2s infinite;
}

@keyframes pulse-green-anim {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-amber {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
    animation: pulse-amber-anim 2s infinite;
}

@keyframes pulse-amber-anim {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.pulse-red {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    animation: pulse-red-anim 2s infinite;
}

@keyframes pulse-red-anim {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Animations for new logs */
@keyframes log-fade-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.log-entry {
    animation: log-fade-in 0.2s ease-out forwards;
}