@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ===================== Root Variables ===================== */
:root {
    --brand-black: #181818;
    --bg-color: #FBFBFB;
    --bg-black: #111111;
    --bg-light-blue: #F9FAFC;
    --border: #c6c6c6;
    --bg-blue: #2A23B0;
    --bg-hover: #2319db;
    --bg-gray-light: #AAAAAA;
    --bg-gray: #575757;
    --bg-gray-2: #f5f6f8;
    --bg-gray-3: #F5F5F5;
    --bg-gray-text: #676767;
}

/* ===================== Global Styles ===================== */
body { background-color: var(--bg-color); font-family: "Poppins", sans-serif; }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1920px;
    margin: 0 auto;
}

button { cursor: pointer; border-radius: 8px !important; }

::placeholder { font-size: 14px; color: #919191; }

/* ===================== Typography ===================== */
.label-title { color: var(--bg-black); font-size: 16px; }
.label-time, .label-month, .label-style, .forgot-btn, .f-13, .f-14, .create-account, .btn-timer, .comp-text, .event-support-text, .event-support-text.event-label { font-size: 14px; }
.label-month { font-weight: 500; }
.label-style { color: var(--bg-gray); }
.question { font-size: 16px; }
/* Hide the question notes/hint block (q_notes). The notes box must never be
   shown to students during an assessment. This rule also hides it if an older
   cached dashboardScript.js (which rendered the block) is still running. */
.q-notes { display: none !important; }
.qs-count { font-size: 14px; color: var(--bg-black); }
.comp-text { font-size: 16px; }
.event-support-text.highlight { font-weight: 600; font-size: 13px; }
.event-highlights-text { font-size: 12px; font-weight: 500; }
.event-heading { font-weight: 600; }
.f-500 { font-weight: 500; }

/* ===================== Buttons ===================== */
.lang-button { padding: 12px 14px; border-radius: 8px; border: 3px solid var(--brand-black); background-color: #fff; }
.lang-button:hover { background-color: var(--bg-black); color: #fff; }

.ans-button { padding: 12px 20px; border-radius: 8px; border-style: none; font-size: 16px; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ans-button.next { background-color: var(--bg-blue); color: #fff; }
.ans-button.next:hover { background-color: var(--bg-hover); }
.ans-button.prev { background-color: #fff; }
.ans-button.prev:hover { background-color: #efefef; }
.btn-brand { background-color: var(--bg-blue); color: var(--bg-light-blue); border-radius: 8px; font-weight: 400 !important; }
.btn-brand:hover { background-color: var(--bg-hover); color: var(--bg-light-blue); }
.forgot-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.forgot-btn:hover { text-decoration-line: underline; }

/* ===================== Navbar ===================== */
#navbar { position: sticky; top: 0; z-index: 1030; }
.navbar { background-color: #fff !important; position: sticky; top: 0; z-index: 1050; width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.navbar.login { background-color: var(--bg-color) !important; }
.nav-link.active { color: #0d6efd !important; font-weight: bold; border-bottom: 2px solid #0d6efd; }
.navbar-brand img { vertical-align: middle; }

/* ===================== Layout & Components ===================== */
.qs-header { padding: 14px 20px; }
.timer { padding: 6px 8px; border-radius: 8px; }
.ans-handle { padding: 14px 16px; }
.radio-style { padding: 20px 8px; border-color: var(--border); border-radius: 12px; margin-bottom: 14px; }
.ans-box { border-color: #e9e9e9 !important; width: 100px; }
.ans-box.active { border-color: var(--bg-gray) !important; background-color: beige !important; }
.ans-box.completed { background-color: #93e6b2 !important; border-color: #e9e9e9 !important; }
.count-section { height: 470px; }
.c-info { height: 24px; width: 24px; border-radius: 4px; }
.c-info.completed { background-color: #93e6b2; border-color: #e9e9e9 !important; }
.c-info.active { border-color: var(--bg-gray) !important; background-color: beige !important; }
.c-info.pending { border-color: var(--border) !important; }
.ans-button.submit { background-color: #198754 !important; color: white; }
.stop-watch { color: white !important; }

/* ===================== Modals ===================== */
/* On larger screens the modals are centered/scrollable with capped heights.
   Below md the markup uses `modal-fullscreen-md-down`, so we let Bootstrap
   manage heights there (no fixed caps) to avoid double scrollbars / clipping. */
@media (min-width: 768px) {
    #studentDetailModal .modal-content { max-height: 95vh; }
    #studentDetailModal .modal-body { overflow-y: auto; max-height: 75vh; }
    #answerKeyModal .modal-content { max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
    #answerKeyModal .modal-body { overflow-y: auto; padding: 1rem 1.5rem; }
    #answerKeyModal .modal-body > div:last-child { padding-bottom: 2rem; }
}

/* Mobile modal polish (fullscreen below md). */
@media (max-width: 767.98px) {
    #studentDetailModal .modal-header,
    #answerKeyModal .modal-header { padding: 0.75rem 1rem; }
    #studentDetailModal .modal-title,
    #answerKeyModal .modal-title { font-size: 1rem; line-height: 1.3; }
    #studentDetailModal .modal-body { padding: 0.75rem; }
    #answerKeyModal .modal-body { padding: 0.75rem 1rem; }
    /* Student-details table: keep it readable and horizontally scrollable. */
    #studentGridTable { font-size: 12px; white-space: nowrap; }
    #studentGridTable th, #studentGridTable td { padding: 0.4rem 0.5rem; }
    /* Answer key: questions/choices stack and wrap comfortably. */
    #answerKeyContent { font-size: 13px; }
    #answerKeyContent img { max-width: 100%; height: auto; }
    /* Footer buttons full width so they're easy to tap. */
    #answerKeyModal .modal-footer { padding: 0.5rem 0.75rem; }
    #answerKeyModal .modal-footer .btn { width: 100%; }
}

/* ===================== Cards & Events ===================== */
.event-highlights { background-color: #EEF2F5; }
.event-container { position: relative; }
.event-cards { background-color: #fff; }
.assessment-img { height: 100px; background-color: #EEF2F5; }
.event-custom-p { padding: 28px 26px; }
.event-id-badge, .language-badge, .remaining-days-badge { background-color: #fff; color: var(--bg-black); font-weight: 500; }
.event-id-badge { background-color: #f8f575; }

/* ===================== Progress Bars ===================== */
.prog-bar { height: 8px; width: 34px; background: var(--bg-black); }
.progress-bar-custom { width: 24px; height: 8px; background-color: var(--bg-black); border-radius: 4px; }
.progress-bar-custom.incomplete { opacity: 14%; }

/* ===================== Utility & Misc Classes ===================== */
.border, .border-bottom, .border-end { border-color: var(--border) !important; }
.border-r-14 { border-radius: 14px; }
.shadow-2 { box-shadow: 0px 0px 2px 0px rgba(18, 18, 18, 0.12); }
.s-top { box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.06); }
.custom-shadow-top { box-shadow: 0 -6px 5px rgba(0,0,0,0.1); }
.remove-border-r { border-right: 0px !important; }
.text-gray { color: var(--bg-gray); }
.line-style { color: var(--bg-gray-light); }
.icon-bg { background-color: var(--bg-light-blue); border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.date-style { background-color: #fff !important; border-radius: 8px; }
.info { background-color: var(--bg-gray-2); border-radius: 12px; padding: 24px 20px; }
.page-nations { background-color: var(--bg-black) !important; align-items: center; justify-content: center; }
.page-nations .active-page-nation { color: #fff !important; }

/* ===================== Sizes & Spacing ===================== */
.m-t-64 { margin-top: 64px; }
.m-t-40 { margin-top: 40px; }
.m-t-32 { margin-top: 32px; }
.m-t-20 { margin-top: 20px; }
.h-44 { height: 44px; }
.h-72 { height: 72px; }
.h-74 { height: 74px; }
.p-20 { padding: 20px; }
.padding-s-2-5 { padding-left: 2.5rem !important; }
.rounded-8 { border-radius: 8px; }
.logo-size { height: 48px; }
.completed-icon { height: 64px; }

/* ===================== Filters ===================== */
.filter-section { position: sticky; top: 74px; height: calc(100vh - 74px); overflow-y: auto; }
@media (max-width: 991.98px) { .filter-section { position: static; height: auto; overflow-y: visible; } }

/* ===================== Responsive helpers ===================== */
/* Prevent accidental horizontal scroll on small screens. */
html, body { overflow-x: hidden; }
/* Media (images/svg) should never overflow their container. */
img, svg, .choice-img { max-width: 100%; height: auto; }
/* Tables inside modals scroll horizontally instead of breaking layout. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Small-screen width utility used by the student-details modal search box. */
@media (min-width: 576px) {
    .w-sm-25 { width: 25% !important; }
}

/* ===================== Media Queries ===================== */
@media (min-width: 1920px) {
    .container, .container-lg, .container-xl { max-width: 1920px; }
    /* Bounded, scrollable question area: keep the card a fixed size but let
       tall questions (many options / images) scroll INSIDE instead of
       overflowing the white box. */
    .qs-section { height: 500px !important; overflow-y: auto; overflow-x: hidden; }
}
@media (min-width: 1400px) and (max-width:1919.98px) {
    .container { max-width: 1515px; }
    .qs-section { height: 450px !important; overflow-y: auto; overflow-x: hidden; }
}
@media (max-width: 1399.98px) {
    .qs-section { height: 400px !important; padding: 1rem; overflow-y: auto; overflow-x: hidden; }
    .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}

/* ===================== Assessment option alignment ===================== */
/* Make every option fill its grid cell so the left/right columns line up and
   stay equal height even when one option wraps to more lines than its
   neighbour. We stretch the column and let the inner box fill it, WITHOUT
   overriding Bootstrap's .form-check radio positioning. */
.qs-section .row > [class*="col-"] { display: flex; }
.qs-section .radio-style { width: 100%; }
/* Long option text wraps cleanly instead of overflowing the box width. */
.qs-section .radio-style .form-check-label {
    width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Keep option images from blowing the row height out. */
.qs-section .choice-img { max-height: 120px; width: auto; }

/* ===================== Mobile question navigator (train-coach strip) ===== */
/* Hidden on desktop (lg+) where the right-hand side navigator is used instead.
   The .d-lg-none utility handles visibility; these rules style the strip. */

/* Sticky wrapper holds BOTH the scrollable strip and the status legend so they
   stay pinned together at the top of the question card. */
.mobile-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.mobile-qs-nav {
    display: flex;
    flex-wrap: nowrap;                 /* single horizontal row */
    gap: 8px;
    overflow-x: auto;                  /* horizontal scroll like train coaches */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    padding: 10px 12px 8px;
    scrollbar-width: thin;
}
.mobile-qs-nav::-webkit-scrollbar { height: 5px; }
.mobile-qs-nav::-webkit-scrollbar-thumb { background: var(--bg-gray-light); border-radius: 3px; }

/* Belt-and-suspenders: force every direct child of the strip to be an inline
   flex box in a row, so the layout can never fall back to a vertical stack. */
.mobile-qs-nav > * {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: auto !important;
}
.mobile-nav-box {
    flex: 0 0 auto;                    /* each coach keeps its size, no shrink */
    min-width: 38px;
    width: auto;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    user-select: none;
}
/* Same status colours as the desktop navigator boxes. */
.mobile-nav-box.active { border-color: var(--bg-gray) !important; background-color: beige !important; }
.mobile-nav-box.completed { background-color: #93e6b2 !important; border-color: #e9e9e9 !important; }

/* Mobile status legend under the strip. */
.mobile-nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 12px 8px;
}
.mobile-nav-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bg-gray);
}
.mobile-nav-legend .c-info {
    height: 14px;
    width: 14px;
    border-radius: 3px;
}

/* ===================== JS-driven mobile layout (safety net) ===============
   fitAssessmentCard() in dashboardScript.js adds .is-mobile-layout to
   #assessmentSection when window.innerWidth < 992, regardless of whether the
   CSS media query fires. These rules force the single-column mobile layout so
   the page is correct even with a stale cached stylesheet or odd DPR. */
#assessmentSection.is-mobile-layout .col-lg-9,
#assessmentSection.is-mobile-layout .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
/* Hide the right-hand desktop navigator; show the mobile strip. */
#assessmentSection.is-mobile-layout .col-lg-3.d-none { display: none !important; }
#assessmentSection.is-mobile-layout .mobile-nav-wrap { display: block !important; }
#assessmentSection.is-mobile-layout .assessment-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
    border-radius: 12px;
}
#assessmentSection.is-mobile-layout .assessment-card .qs-header,
#assessmentSection.is-mobile-layout .assessment-card .mobile-nav-wrap,
#assessmentSection.is-mobile-layout .assessment-card .ans-handle { flex: 0 0 auto; }
#assessmentSection.is-mobile-layout .assessment-card .qs-section {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Force the strip horizontal in this mode too. */
#assessmentSection.is-mobile-layout .mobile-qs-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; }
#assessmentSection.is-mobile-layout .mobile-qs-nav > * { flex: 0 0 auto !important; display: inline-flex !important; width: auto !important; }

/* Tablets and below (< lg): side navigator is hidden. The assessment card
   becomes a full-height flex column that AUTO-FITS the device viewport, so it
   adapts to any phone resolution:
     - header (question count + timer)  -> fixed height
     - mobile nav strip + legend        -> fixed height
     - question/options area            -> flexes to fill, scrolls if tall
     - Previous/Next footer             -> fixed height, always visible
   Using 100dvh (dynamic viewport height) so it accounts for the mobile
   browser's address bar showing/hiding. */
@media (max-width: 991.98px) {
    .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
    .count-section { height: auto; }

    /* Remove wasted outer margin so the card can use the full width/height. */
    #assessmentSection { padding-left: 0; padding-right: 0; margin: 0 !important; }
    #assessmentSection > .col-lg-9 { padding-left: 0; padding-right: 0; }

    /* The "Monthly Assessment Test | October - 2026" title row stays its
       natural size above the card. */

    /* Card fills the remaining viewport height. 56px is a rough allowance for
       the sticky navbar + the title row above; the flex children absorb the
       rest, and the question area scrolls if content is tall. */
    .assessment-card {
        display: flex;
        flex-direction: column;
        /* Height is set precisely by fitAssessmentCard() in JS (measures the
           real space below the navbar + title). These are fallbacks for before
           the JS runs / if JS is disabled. */
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
        min-height: 360px;
        overflow: hidden;               /* only the inner question area scrolls */
        border-radius: 12px;
    }

    /* Fixed-size top/bottom regions. */
    .assessment-card .qs-header { flex: 0 0 auto; }
    .assessment-card .mobile-nav-wrap { flex: 0 0 auto; }
    .assessment-card .ans-handle { flex: 0 0 auto; }

    /* The question + options area takes all remaining height and scrolls. */
    .assessment-card .qs-section {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0 !important;        /* critical: lets flex item shrink/scroll */
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 1rem !important;
    }

    /* Tighter spacing so options sit close under the question (no big gap). */
    .m-t-32 { margin-top: 12px !important; }
    .question { padding-bottom: 0.75rem !important; }
    .qs-section .row.row-gap-3 { padding-top: 0.75rem !important; row-gap: 10px !important; }
    .radio-style { padding: 14px 10px; margin-bottom: 0; }
}

/* Landscape phones / small tablets (< md). */
@media (max-width: 767.98px) {
    /* Timer header: let the "Test will end in" label + timer wrap. */
    .qs-header { flex-wrap: wrap; height: auto !important; gap: 8px; padding: 12px 14px; }
    .ans-handle { height: auto !important; padding: 12px 14px; }
    /* Keep the Previous/Next buttons on one row but allow shrink. */
    .ans-button { flex: 1 1 auto; }
    /* Question navigator boxes shouldn't be forced to 100px. */
    .ans-box { width: auto !important; min-width: 40px; }
    /* Event cards go full width. */
    .assessment-img { height: 90px; }
}

/* Phones (< sm). */
@media (max-width: 575.98px) {
    .qs-count { font-size: 13px; }
    .question { font-size: 14px; }
    .label-title { font-size: 15px; }
    .ans-button { font-size: 13px; padding: 10px 12px; }
    .radio-style { padding: 12px 8px; font-size: 13px; margin-bottom: 10px; }
    .info { padding: 16px 14px; }
    /* Timer label can be dropped to save space; keep the clock visible. */
    .label-time { font-size: 12px; }
    .timer { padding: 6px 10px; }
    /* Modal headers/titles scale down. */
    .modal-title { font-size: 1rem; }
    /* Pagination buttons tighten up so they wrap neatly. */
    .pagination .page-link,
    #paginationWrapper .btn { padding: 6px 10px; font-size: 13px; }
    /* Navbar brand text can be long; keep it from pushing layout. */
    .navbar-brand { font-size: 0.95rem; }
    .navbar-brand .version { display: block; font-size: 0.75rem; }
}