/* ══════════════════════════════════════════════════════════════
   GLOBAL STYLES — TechnoKraft Test Portal
   Custom Scrollbar · Light Theme · Smooth Scrolling
   ══════════════════════════════════════════════════════════════ */

/* ── Smooth scrolling for anchor navigation ── */
html {
    scroll-behavior: smooth;
}

/* ── Global Custom Scrollbar (Light Theme) ──
   Works in Chrome, Edge, Safari (Webkit-based).
   Firefox uses scrollbar-width + scrollbar-color.
   ──────────────────────────────────────────── */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #c0c9d8 #f0f4f8;
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f4f8;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a8b8cc 0%, #8fa4bc 100%);
    border-radius: 100px;
    border: 2px solid #f0f4f8;
    /* creates inner padding effect */
    transition: background 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7a96b2 0%, #5a7fa6 100%);
}

::-webkit-scrollbar-corner {
    background: #f0f4f8;
}

/* ── Sidebar Scrollbar (Darker, matches navy sidebar) ── */
.sidebar ::-webkit-scrollbar {
    width: 4px;
}

.sidebar ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
}

.sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    border: none;
}

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

/* Firefox - sidebar */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ── Modal / Popup Scrollbar ── */
.completed-modal-content ::-webkit-scrollbar,
.modal-content ::-webkit-scrollbar,
#popupFooter ::-webkit-scrollbar,
.footer-container ::-webkit-scrollbar {
    width: 5px;
}

.completed-modal-content ::-webkit-scrollbar-track,
.modal-content ::-webkit-scrollbar-track,
#popupFooter ::-webkit-scrollbar-track {
    background: #e8edf4;
    border-radius: 100px;
}

.completed-modal-content ::-webkit-scrollbar-thumb,
.modal-content ::-webkit-scrollbar-thumb,
#popupFooter ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a8b8cc 0%, #8fa4bc 100%);
    border-radius: 100px;
    border: none;
}

/* Firefox - modals */
.completed-modal-content,
.modal-content,
#popupFooter {
    scrollbar-width: thin;
    scrollbar-color: #a8b8cc #e8edf4;
}

/* ── Test answer review / result panels ── */
.answer-review ::-webkit-scrollbar,
.detailed-report ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

/* ── Text area / code blocks (if any) ── */
textarea ::-webkit-scrollbar {
    width: 6px;
}

textarea ::-webkit-scrollbar-thumb {
    background: #a8b8cc;
    border-radius: 100px;
}