/* style.css - Complete Stylesheet for CBT Exam Portal & MyAdmin Console */
:root {
    --exam-blue: #1e3a8a;
    --exam-accent: #2563eb;
    --active-pill: linear-gradient(135deg, #fef08a 0%, #facc15 100%);
    --active-pill-dark: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Official Exam Fonts */
.font-punjabi-box {
    font-family: 'Raavi', 'Noto Sans Gurmukhi', sans-serif !important;
    line-height: 2.38 !important;
    font-size: clamp(1.22rem, 2.5vw, 1.52rem) !important;
    letter-spacing: 0.01em;
}

.font-english-box {
    font-family: 'JetBrains Mono', monospace !important;
    line-height: 2.08 !important;
    font-size: clamp(1.05rem, 2vw, 1.28rem) !important;
}

/* Word Spans inside Exam Reading Window */
.word-span {
    padding: 3px 7px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
    border: 1px solid transparent;
    transition: all 0.12s ease;
}

.word-active {
    background: var(--active-pill);
    color: #0f172a !important;
    font-weight: 800;
    border-color: #ca8a04;
    box-shadow: 0 3px 10px rgba(234, 179, 8, 0.35);
    transform: translateY(-1px);
}

.dark .word-active {
    background: var(--active-pill-dark);
    color: #ffffff !important;
    border-color: #fde047;
}

.word-correct {
    color: #15803d;
    background-color: rgba(22, 163, 74, 0.08);
}

.dark .word-correct {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.12);
}

.word-wrong {
    color: #b91c1c;
    background-color: #fee2e2;
    border-color: #fca5a5;
    text-decoration: line-through;
}

.dark .word-wrong {
    color: #f87171;
    background-color: rgba(220, 38, 38, 0.25);
    border-color: rgba(248, 113, 113, 0.35);
}

.lcd-timer {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}

.input-warning-shake {
    animation: shakeError 0.3s ease-in-out;
    border-color: #dc2626 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(148, 163, 184, 0.08); }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* =========================================================
   AUTO-FULLSCREEN EXAM FOCUS MODE (NO DISTRACTION VIEW)
   ========================================================= */
body.exam-focus-mode {
    overflow: hidden !important;
    background-color: #0f172a !important;
}

body.exam-focus-mode header,
body.exam-focus-mode #examTopStrip,
body.exam-focus-mode #settingsSection,
body.exam-focus-mode #leaderboardSection,
body.exam-focus-mode footer {
    display: none !important;
}

body.exam-focus-mode main {
    max-width: 100% !important;
    height: 100dvh !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.exam-focus-mode #liveStatsSection {
    margin-bottom: 8px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

body.exam-focus-mode #liveStatsSection > div {
    padding: 6px 14px !important;
    border-radius: 12px !important;
}

body.exam-focus-mode #typingWorkspaceSection {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

body.exam-focus-mode #passageContainer {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px 26px !important;
}

#exitFocusBtn {
    display: none;
}

body.exam-focus-mode #exitFocusBtn {
    display: inline-flex !important;
}

@media print {
    header, footer, #examTopStrip, #settingsSection, #liveStatsSection, #typingWorkspaceSection, #leaderboardSection {
        display: none !important;
    }
    #resultModal {
        position: static !important;
        background: white !important;
        display: block !important;
        padding: 0 !important;
    }
}