/* ==========================================
   LUMINA - GLOBAL STYLES & ANIMATIONS
   ========================================== */

/* Base overrides complementing Tailwind */
body {
    background-color: #f8fafc;
    color: #334155;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Custom Scrollbar (Premium Feel)
   ---------------------------------------- */
::-webkit-scrollbar {
    width: 6px; 
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Utility to completely hide scrollbar while maintaining scroll functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ----------------------------------------
   Smooth Tab & Content Transitions
   ---------------------------------------- */
.fade-enter {
    opacity: 0;
    transform: translateY(10px);
}

.fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* ----------------------------------------
   3D Digital ID Card Animations
   ---------------------------------------- */
.perspective-1000 {
    perspective: 1000px;
}
.transform-style-3d {
    transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
}
.rotate-y-180 {
    transform: rotateY(180deg);
}
.group.is-flipped .flip-inner {
    transform: rotateY(180deg);
}





/* ==========================================
   PROCTORED EXAM ENVIRONMENT STYLES
   ========================================== */

/* 1. Exam Lockdown Mode (Hides Sidebar & Header) */
body.is-exam-mode aside,
body.is-exam-mode header {
    display: none !important;
}

body.is-exam-mode #main-content-area {
    padding: 0 !important;
    background-color: #f1f5f9; /* surface-100 */
}

/* 2. Mock IDE Code Editor */
.mock-ide {
    font-family: 'Courier New', Courier, monospace;
    background-color: #0f172a; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
    caret-color: #14b8a6; /* brand-500 */
    line-height: 1.6;
    resize: vertical;
    min-height: 200px;
}
.mock-ide:focus {
    outline: 2px solid #14b8a6;
    outline-offset: -2px;
}

/* 3. Question Palette Dynamic States */
.palette-btn {
    transition: all 0.2s ease-in-out;
}
/* Default: Unanswered */
.palette-btn.unanswered {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
}
/* Answered: Green */
.palette-btn.answered {
    background-color: #10b981;
    border: 1px solid #10b981;
    color: #ffffff;
}
/* Marked for Review: Purple */
.palette-btn.marked {
    background-color: #8b5cf6;
    border: 1px solid #8b5cf6;
    color: #ffffff;
}
/* Answered AND Marked: Purple with Green Dot */
.palette-btn.marked-answered {
    background-color: #8b5cf6;
    border: 1px solid #8b5cf6;
    color: #ffffff;
    position: relative;
}
.palette-btn.marked-answered::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    border: 1px solid #ffffff;
}
/* Currently Active Question */
.palette-btn.active {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.4);
    border-color: #14b8a6;
    transform: scale(1.05);
    font-weight: bold;
}