/* ─────────────────────────────────────────────────────────────────────────────
   custom.css
   Anti-cheat overrides + exam-specific styles that Tailwind utilities cannot
   handle inline (pseudo-elements, user-select, pointer-events, print rules).
   Tailwind handles all layout and component styling — this file is minimal.
   ───────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
   1. ANTI-CHEAT — Text selection disabled on exam pages
   Applied to #exam-root so it only affects the exam interface.
   ───────────────────────────────────────────────────────────────────────────── */
#exam-root,
#exam-root * {
    -webkit-user-select: none !important;
    -moz-user-select:    none !important;
    -ms-user-select:     none !important;
    user-select:         none !important;
}

/* Allow text selection inside option labels so screen readers work */
#exam-root input[type="radio"] + label {
    -webkit-user-select: none !important;
    user-select:         none !important;
    cursor:              pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. ANTI-CHEAT — Hide content when window loses focus (visibilitychange)
   The JS handler logs the event; this CSS adds a visual blur as extra deterrence.
   ───────────────────────────────────────────────────────────────────────────── */
body.exam-blur #exam-questions {
    filter:          blur(8px);
    pointer-events:  none;
    transition:      filter 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. FULLSCREEN — Remove any scroll bars that appear inside fullscreen mode
   ───────────────────────────────────────────────────────────────────────────── */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen {
    overflow: auto;
    background-color: #f9fafb;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. EXAM LAYOUT — Sticky timer + header inside fullscreen
   Tailwind's `sticky top-0` works, but z-index stacking needs explicit values
   when fullscreen resets the stacking context.
   ───────────────────────────────────────────────────────────────────────────── */
#exam-header {
    position: sticky;
    top:      0;
    z-index:  50;
}

#exam-palette {
    position: sticky;
    top:      72px;   /* Height of exam-header */
    z-index:  40;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. QUESTION CARD — Selected option highlight
   Tailwind's peer/group utilities don't easily handle radio → parent styling.
   ───────────────────────────────────────────────────────────────────────────── */
.option-label-wrap {
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.option-label-wrap:hover {
    background-color: #eef2ff;   /* indigo-50 */
    border-color:     #a5b4fc;   /* indigo-300 */
}

input[type="radio"]:checked + .option-label-wrap {
    background-color: #e0e7ff;   /* indigo-100 */
    border-color:     #6366f1;   /* indigo-500 */
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. WARNING BANNER — Slides down from top when a violation is detected
   ───────────────────────────────────────────────────────────────────────────── */
#warning-banner {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. TOAST CONTAINER — Fixed bottom-right, above everything
   ───────────────────────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom:   1.5rem;
    right:    1.5rem;
    z-index:  9999;
    display:  flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

#toast-container > div {
    pointer-events: auto;
    min-width: 280px;
    max-width: 380px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. WEBCAM PREVIEW — Small floating preview in the exam corner
   ───────────────────────────────────────────────────────────────────────────── */
#webcam-preview {
    transform:    scaleX(-1);   /* Mirror so candidate sees themselves naturally */
    border-radius: 0.5rem;
    object-fit:   cover;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. PROCTOR MONITOR — Live feed images
   ───────────────────────────────────────────────────────────────────────────── */
#live-webcam,
#live-screen {
    border-radius: 0.5rem;
    object-fit:    cover;
    width:         100%;
    transition:    opacity 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. SNAPSHOT LIGHTBOX OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */
#snapshot-overlay {
    position:         fixed;
    inset:            0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index:          9999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

#snapshot-overlay.hidden {
    display: none !important;
}

#snapshot-overlay img {
    max-width:     90vw;
    max-height:    90vh;
    border-radius: 0.5rem;
    box-shadow:    0 25px 50px rgba(0, 0, 0, 0.5);
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. PRINT — Hide nav and sidebar when printing result pages
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    nav,
    #sidebar,
    #toast-container,
    #warning-banner,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. SCROLLBAR STYLING — Thin scrollbar for palette and log panels
   ───────────────────────────────────────────────────────────────────────────── */
#exam-palette::-webkit-scrollbar,
#monitor-log-feed::-webkit-scrollbar {
    width: 4px;
}

#exam-palette::-webkit-scrollbar-track,
#monitor-log-feed::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#exam-palette::-webkit-scrollbar-thumb,
#monitor-log-feed::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius:    2px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. ANIMATE PULSE ONCE — Used for new alert rows in proctor dashboard
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes pulseOnce {
    0%   { background-color: #fef9c3; }
    50%  { background-color: #fde047; }
    100% { background-color: #fef9c3; }
}

.animate-pulse-once {
    animation: pulseOnce 1s ease 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. GLOBAL MOTION — Subtle, classy transitions across the candidate UI
   Kept understated: edtech should feel calm and trustworthy, not flashy.
   ───────────────────────────────────────────────────────────────────────────── */
* {
    scroll-behavior: smooth;
}

a, button {
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Buttons get a gentle lift on hover, a soft press on click */
button:not(:disabled):hover,
a.inline-flex:hover {
    transform: translateY(-1px);
}

button:not(:disabled):active,
a.inline-flex:active {
    transform: translateY(0) scale(0.98);
}

/* Cards lift slightly on hover where shadow-md is already used on hover */
.hover\:shadow-md {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hover\:shadow-md:hover {
    transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. PAGE ENTRANCE — Fade + rise for main content on load
   ───────────────────────────────────────────────────────────────────────────── */
main {
    animation: pageIn 0.45s ease both;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. EXAM QUESTIONS — Staggered fade-in so the list doesn't feel static
   ───────────────────────────────────────────────────────────────────────────── */
#exam-questions > div {
    animation: questionIn 0.4s ease both;
}

#exam-questions > div:nth-child(1)  { animation-delay: 0.02s; }
#exam-questions > div:nth-child(2)  { animation-delay: 0.05s; }
#exam-questions > div:nth-child(3)  { animation-delay: 0.08s; }
#exam-questions > div:nth-child(4)  { animation-delay: 0.11s; }
#exam-questions > div:nth-child(5)  { animation-delay: 0.14s; }
#exam-questions > div:nth-child(6)  { animation-delay: 0.17s; }
#exam-questions > div:nth-child(7)  { animation-delay: 0.20s; }
#exam-questions > div:nth-child(8)  { animation-delay: 0.23s; }
#exam-questions > div:nth-child(n+9) { animation-delay: 0.25s; }

@keyframes questionIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Subtle highlight ring when a question is scrolled to via the palette */
#exam-questions > div:target,
.question-flash {
    animation: questionFlash 1.1s ease;
}

@keyframes questionFlash {
    0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. OPTION SELECTION — Smoother check-in feel for MCQ options
   ───────────────────────────────────────────────────────────────────────────── */
.option-label-wrap {
    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.15s ease, box-shadow 0.18s ease;
}

.option-label-wrap:active {
    transform: scale(0.99);
}

input[type="radio"]:checked + .option-label-wrap {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
}

/* Small dot/check indicator that appears once an option is selected */
.option-label-wrap::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

input[type="radio"]:checked + .option-label-wrap::before {
    border-color: #6366f1;
    background-color: #6366f1;
    box-shadow: inset 0 0 0 3px #fff;
    transform: scale(1.05);
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. PALETTE DOTS — Smooth color transition when an answer is saved
   ───────────────────────────────────────────────────────────────────────────── */
[id^="palette-dot-"] {
    transition: background-color 0.3s ease, transform 0.3s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. TIMER — Gentle pulse once it turns critical (red, < 1 min)
   ───────────────────────────────────────────────────────────────────────────── */
#timer-display.text-red-500 {
    animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. SAVE STATUS — Fade text in/out instead of popping
   ───────────────────────────────────────────────────────────────────────────── */
[id^="save-status-"] {
    transition: opacity 0.25s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   21. AUTH / LOBBY — Soft focus glow on inputs (more premium than default ring)
   ───────────────────────────────────────────────────────────────────────────── */
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}


/* ─────────────────────────────────────────────────────────────────────────────
   22. WEBCAM PREVIEW — Soft pulse ring to show it's "live"
   ───────────────────────────────────────────────────────────────────────────── */
#webcam-preview {
    animation: liveRing 2.4s ease-in-out infinite;
}

@keyframes liveRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   23. REDUCED MOTION — Respect accessibility preference
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}