/* Skill Assessment Portal — Custom Styles
   Supplements Tailwind CDN for components that need CSS beyond utility classes. */

/* Timer pulse animation (exam page) */
.timer-warning {
    animation: timer-pulse 1s infinite;
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Question card transitions */
.question-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.question-card.answered {
    border-left: 4px solid #10b981;
}
.question-card.unanswered {
    border-left: 4px solid #e5e7eb;
}

/* Option label hover/selected states */
.option-label {
    transition: all 0.15s ease;
}
.option-label:hover {
    background-color: #eef2ff;
}
.option-label.selected {
    background-color: #e0e7ff;
    border-color: #6366f1;
}

/* Module tab styling */
.tab-btn {
    transition: all 0.2s ease;
}
.tab-btn.active {
    border-bottom: 3px solid #4f46e5;
    color: #4f46e5;
    font-weight: 600;
}
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

/* Monitor status dot */
.status-dot {
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.8); }
}

/* Score color coding — applied via JS */
.score-high { color: #16a34a; }     /* >= 80 */
.score-medium { color: #eab308; }   /* >= 60 */
.score-low { color: #ef4444; }      /* < 60 */

/* Print styles for result page */
@media print {
    header, footer, .no-print { display: none !important; }
    body { background: white; }
    .shadow-md, .shadow-sm { box-shadow: none; }
}