/* ========================================
   GLOBAL LAYOUT SCALING
======================================== */

.container {

    max-width: 1100px;
}

.card {

    border-radius: 14px;
    padding: 1.25rem;
}

body {

    font-size: 0.96rem;
}

/* ================================
   RESET + BASE
================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #f5f7fb;
    color: #1f2937;
    line-height: 1.6;
}

/* ================================
   LAYOUT
================================ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem;
}

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-main {
    padding: 2rem 0;
}

.site-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

/* ================================
   BRANDING
================================ */
.brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
}

.brand-sub {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
}

/* ================================
   BUTTONS
================================ */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-outline {
    border: 1px solid #2254c2;
    color: #2563eb;
    background: transparent;
}

.btn-outline:hover {
    background: #2563eb;
    color: #ffffff;
}

/* ================================
   CARDS
================================ */
.card {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    border: 1px solid #e5e7eb;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ================================
   STATUS BADGES
================================ */
.status {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* ================================
   TEXT HELPERS
================================ */
.text-muted {
    color: #6b7280;
}

.mt {
    margin-top: 1rem;
}

.mb {
    margin-bottom: 1rem;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ================================
   CBC GRADES
================================ */
.cbc {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.4rem;
}

.cbc-ee {
    background: #dcfce7;
    color: #166534;
}

.cbc-me {
    background: #e0f2fe;
    color: #075985;
}

.cbc-ae {
    background: #fef9c3;
    color: #854d0e;
}

.cbc-be {
    background: #fee2e2;
    color: #991b1b;
}


.cbc-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.cbc-be { background: #f8d7da; color: #842029; }
.cbc-ae { background: #fff3cd; color: #664d03; }
.cbc-me { background: #d1e7dd; color: #0f5132; }
.cbc-ee { background: #cfe2ff; color: #084298; }


/* ===== Practice: Short Answer Input (UI only) ===== */

.practice-short-answer {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    font-size: 1.05rem;
    border-radius: 8px;
    border: 1.5px solid #cfd8e3;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.practice-short-answer::placeholder {
    color: #9aa4b2;
}

.practice-short-answer:focus {
    outline: none;
    border-color: #2563eb; /* blue focus */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.text-muted {
    font-size: 0.9rem;
}
/* Practice container */
#practice-card {
    max-width: 720px;
    margin: 0 auto;
}

/* Mini title */
#practice-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Question counter */
#question-counter {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Question text */
.practice-question {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 1rem 0;
}
.option-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.option-item:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
}

/* When radio is checked */
.option-item input:checked + label {
    font-weight: 600;
    color: #0d6efd;
}
.card {
    padding: 1.25rem 1.5rem;
}

.card + .card {
    margin-top: 1.25rem;
}
.breadcrumb {
    font-size: 0.85rem;
}

.breadcrumb a {
    color: #6c757d;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}
.progress-hint {
    height: 6px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-hint span {
    display: block;
    height: 100%;
    width: calc(1 / 25 * 100%);
    background: #0d6efd;
}
.back-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
}
.practice-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

/* Back to dashboard */
.back-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: #0d6efd;
}

.back-link:hover {
    text-decoration: underline;
}

/* Logout styled as link */
.logout-form {
    margin: 0;
}

.logout-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    color: #6c757d;
    cursor: pointer;
}

.logout-link:hover {
    color: #dc3545;
    text-decoration: underline;
}
/* =========================
   CBC GRADING COLORS
   ========================= */

.cbc-ee {
    color: #1e7e34;        /* green */
    font-weight: 600;
}

.cbc-me {
    color: #0d6efd;        /* blue */
    font-weight: 600;
}

.cbc-ae {
    color: #f59e0b;        /* amber */
    font-weight: 600;
}

.cbc-be {
    color: #dc2626;        /* red */
    font-weight: 600;
}
/* =========================
   REMOVE CBC BACKGROUND SHADING
   ========================= */

/* Neutralize old summary / badge backgrounds */
.subject-summary-card,
.subtopic-summary-card,
.cbc-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}




/* =========================
   FOOTER ACTION LINKS
   ========================= */

.page-footer-actions {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-footer-actions a,
.page-footer-actions button.logout-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    color: #2563eb; /* blue */
    cursor: pointer;
    text-decoration: none;
}

.page-footer-actions a:hover,
.page-footer-actions button.logout-link:hover {
    color: #f97316; /* orange (or change to pink if you prefer) */
    text-decoration: underline;
}
/* =========================
   HEADER AS CARD (RESPONSIVE)
   ========================= */

.header-card {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Brand */
.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
    display: block;
}

.brand-sub {
    font-size: 0.85rem;
    color: #6b7280;
}

/* User */
.header-user {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

/* Mobile behavior */
@media (max-width: 640px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-user {
        align-self: flex-end;
    }
}

/* =========================
   HEADER – LEFT ALIGNED & RESPONSIVE
   ========================= */

.header-center {
    justify-content: flex-start;
}

.header-center-block {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Brand */
.brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2563eb;
}

.brand-sub {
    font-size: 0.85rem;
    color: #6b7280;
}

/* User */
.header-user {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

/* =========================
   HEADER – ALWAYS LEFT ALIGNED
   ========================= */

.header-flex {
    display: flex;
    justify-content: flex-start;   /* FORCE LEFT */
    align-items: flex-start;
}

.header-center {
    justify-content: flex-start;   /* OVERRIDE ANY CENTERING */
}

.header-center-block {
    text-align: left;              /* FORCE LEFT TEXT */
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* FORCE LEFT ALIGNMENT */
    gap: 0.25rem;
}

/* Brand */
.brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2563eb;
}

.brand-sub {
    font-size: 0.85rem;
    color: #6b7280;
}

/* User */
.header-user {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}
/* =========================
   HEADER USER – FORCE LEFT
   ========================= */

.header-flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.header-center-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* FORCE LEFT */
    text-align: left;
    gap: 0.25rem;
}

.header-user {
    margin: 0;                /* REMOVE ANY INDENT */
    padding: 0;               /* REMOVE ANY INDENT */
    align-self: flex-start;   /* FORCE LEFT */
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}
.card a:hover {
    text-decoration: underline;
}
.bottom-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-top: 1.5rem;
}

.bottom-actions form {
    margin: 0;
}

.action-link {
    background: none;
    border: none;
    padding: 0;
    color: #0d6efd; /* same as Bootstrap primary */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.action-link:hover {
    text-decoration: underline;
}
.bg-be { background-color: #fabbbb; }
.bg-ae { background-color: #ffefe5; }
.bg-me { background-color: #e8f0fe; }
.bg-ee { background-color: #e6f4ea; }



.assessment-pill {
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ==============================
   CBC GRADE SHADING (FORCED)
   ============================== */

.cbc-grade {
    display: block;
    font-weight: 600;
    margin-top: 0.5rem;
}

.cbc-ee {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
    border-left: 6px solid #2e7d32 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}

.cbc-ae {
    background: #e3f2fd !important;
    color: #0d47a1 !important;
    border-left: 6px solid #1565c0 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}

.cbc-me {
    background: #fff8e1 !important;
    color: #e65100 !important;
    border-left: 6px solid #f9a825 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}

.cbc-be {
    background: #ffebee !important;
    color: #b71c1c !important;
    border-left: 6px solid #c62828 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}
/* Subject Exam – force vertical MCQ options */
.exam-options label {
    display: block;
    margin-bottom: 0.5rem;
}
.exam-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
/* Hide default radio button */
.exam-option input[type="radio"] {
    display: none;
}

/* Option container */
.exam-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
}

/* A / B / C / D circle */
.exam-option .option-label {
    width: 28px;
    height: 28px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #6c757d;
    flex-shrink: 0;
}

/* Option text */
.exam-option .option-text {
    font-size: 0.95rem;
}

/* Selected state */
.exam-option input[type="radio"]:checked + .option-label {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
/* ===== FORCE RADIOS TO SHOW (SUBJECT EXAM DEBUG) ===== */
input[type="radio"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    appearance: auto !important;
}
/* ================================
   SUBJECT EXAM — MCQ RADIO STYLE
   ================================ */

.exam-mcq-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;      /* reduced from 8px 10px */
    margin-bottom: 2px;    /* reduced from 6px */
    border-radius: 6px;
    cursor: pointer;
}




.exam-mcq-option .mcq-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #495057;
}

.exam-mcq-option input[type="radio"]:checked + .mcq-letter {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.exam-mcq-option .mcq-text {
    font-size: 15px;
}
/* ================================
   SUBJECT EXAM — HIDE NATIVE RADIO
   ================================ */

.exam-mcq-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

/* Result feedback clarity */
.text-primary {
    color: #0d6efd !important; /* Blue for Correct */
}

.text-danger {
    color: #dc3545 !important; /* Red for Wrong / Unanswered */
}

.text-success {
    color: #198754 !important; /* Green for correct option */
}
.mcq-letter {
    font-weight: 600;
    width: 24px;
    display: inline-block;
}

.mcq-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 26px;
    height: 26px;

    font-weight: 600;
    font-size: 14px;

    color: #333;
}
.mcq-letter {
    border: 1px solid #ccc;
    border-radius: 50%;
}
.exam-mcq-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcq-letter {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    height: 28px;

    border: 1px solid #bbb;
    border-radius: 50%;

    font-weight: 700;
    font-size: 14px;

    color: #000 !important;
    background: #f8f9fa;

    flex-shrink: 0;
}
/* === FORCE MCQ LETTERS (A/B/C/D) TO SHOW === */

.exam-mcq-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcq-letter {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    height: 28px;

    border: 1px solid #bbb;
    border-radius: 50%;

    font-weight: 700;
    font-size: 14px;

    color: #000 !important;
    background-color: #f8f9fa;

    flex-shrink: 0;
    line-height: 1;
}
.options ul {
    list-style: none;
    padding-left: 0;
}



/* ================= MCQ CIRCLE LETTER ================= */

.exam-mcq-option {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.15s ease;
}

.exam-mcq-option:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* hide native radio */
.mcq-radio {
    display: none;
}

/* letter circle */
.mcq-letter-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #374151;
    flex-shrink: 0;
}

/* selected state */
.mcq-radio:checked + .mcq-letter-circle {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

.mcq-text {
    font-size: 0.95rem;
}


/* ============================= */
/* MCQ LETTER CIRCLE (MINI PRACTICE) */
/* ============================= */
.mcq-letter-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 16px;
    color: #1e293b;           /* ← THIS IS THE FIX */
    background-color: #fff;

    transition: all 0.15s ease;
}

/* Selected state */
.exam-mcq-option input[type="radio"]:checked
+ .mcq-letter-circle {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* Option row */
.exam-mcq-option {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.exam-mcq-option:hover {
    background-color: #f8fafc;
}


/* ================================================= */
/* FORCE MCQ LETTER VISIBILITY (MINI PRACTICE)       */
/* ================================================= */

.mcq-letter-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50%;
    border: 2px solid #cbd5e1;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    color: #1e293b !important;
    background-color: #ffffff !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Hide native radio completely */
.exam-mcq-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Selected state */
.exam-mcq-option input[type="radio"]:checked + .mcq-letter-circle {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Option container */
.exam-mcq-option {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
}

/* ============================================ */
/* MINI PRACTICE — MCQ LETTER CIRCLES (FINAL)   */
/* ============================================ */

.exam-mcq-option label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

/* Hide native radio */
.exam-mcq-option input[type="radio"] {
    display: none;
}

/* Letter circle */
.mcq-letter-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 2px solid #cbd5e1;

    font-size: 15px;
    font-weight: 700;

    color: #1e293b;
    background: #ffffff;
}

/* Selected state — THIS IS THE KEY FIX */
.exam-mcq-option input[type="radio"]:checked
    ~ .mcq-letter-circle {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
/* =============================== */
/* MCQ LETTER CIRCLE (FINAL)       */
/* =============================== */

.mcq-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.mcq-label input[type="radio"] {
    display: none;
}

.mcq-letter-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 2px solid #cbd5e1;

    font-weight: 700;
    font-size: 15px;

    color: #1e293b;
    background: #ffffff;
}

.mcq-label input[type="radio"]:checked ~ .mcq-letter-circle {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.mcq-text {
    font-size: 15px;
}
/* ===== MINI PRACTICE MCQ LETTER CIRCLES ===== */

.mcq-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.mcq-label input[type="radio"] {
    display: none; /* hide default radio */
}

.mcq-letter-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 14px;
    color: #1f2937;       /* ← THIS is what was missing */
    background-color: #ffffff;
}

/* Selected state */
.mcq-label input[type="radio"]:checked + .mcq-letter-circle {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Option container */
.exam-mcq-option {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.exam-mcq-option:hover {
    background: #f8fafc;
}
/* ===============================
   MINI PRACTICE MCQ LETTER CIRCLE
   =============================== */

.mcq-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.mcq-letter-circle {
    width: 36px;
    height: 36px;

    border: 2px solid #cbd5e1;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;

    color: #111827;        /* <-- THIS WAS MISSING */
    background-color: #ffffff;

    flex-shrink: 0;
}

/* Selected state */
.mcq-label input[type="radio"]:checked + .mcq-letter-circle {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Hide default radio */
.mcq-label input[type="radio"] {
    display: none;
}

/* Option container */
.exam-mcq-option {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.exam-mcq-option:hover {
    background-color: #f9fafb;
}
/* ================================
   REMOVE BULLETS FROM MCQ LISTS
   ================================ */

ul.list-unstyled,
ul.list-unstyled li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* ================================
   MCQ Option Letter Badge (A/B/C/D)
   Used in Mini Assessment
   ================================ */

.option-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* Selected option (radio checked) */
input[type="radio"]:checked + .option-badge {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

/* Correct answer (results view) */
.option-badge.correct {
    background-color: #198754;
    color: #ffffff;
    border-color: #198754;
}

/* Wrong answer (results view) */
.option-badge.wrong {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}
/* ================================
   MCQ Single Circle Letter Options
   ================================ */

.mcq-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Hide native radio */
.mcq-option input[type="radio"] {
    display: none;
}

/* Circle with letter */
.mcq-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

/* Selected option */
.mcq-option input[type="radio"]:checked + .mcq-circle {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

/* Correct / Wrong (results) */
.mcq-circle.correct {
    background-color: #198754;
    color: #ffffff;
    border-color: #198754;
}

.mcq-circle.wrong {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

/* Option text */
.mcq-text {
    user-select: none;
}
/* ================================
   MCQ Result Shading
   ================================ */

/* Correct answer row */
.mcq-option.correct-row {
    background-color: #e9f7ef; /* light green */
    border-radius: 6px;
    padding: 6px 8px;
}

/* Wrong selected row (optional clarity) */
.mcq-option.wrong-row {
    background-color: #fdecea; /* light red */
    border-radius: 6px;
    padding: 6px 8px;
}

#floating-timer {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #ffffff;
    border: 2px solid #dc3545;
    color: #dc3545;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    font-size: 16px;
}


#exam-actions {
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 9999;
}
.cbc-grade {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
}

.cbc-ee { background: #e6f7ee; color: #0a7a3f; }
.cbc-me { background: #e6f0ff; color: #1d4ed8; }
.cbc-ae { background: #fff4e5; color: #b45309; }
.cbc-be { background: #ffe5e5; color: #b91c1c; }


.working-box {
    background: #f8f9fa;
    padding: 12px;
    border-left: 4px solid #2c6ed5;
    border-radius: 6px;
    margin-top: 8px;
    white-space: normal;
}
.exam-band-line {
    border-left: 3px solid;
}
.exam-ee { border-color: #198754; }
.exam-me { border-color: #ffc107; }
.exam-be { border-color: #dc3545; }



.subtopic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.assessment-card {
    border: 2px dashed #2563eb;
    background: #f8fbff;
}

.best-row {
    background: #e6f4ea;
    border-left: 5px solid #22c55e;
}

.best-row {
    background: #e6f4ea !important;
    border-left: 5px solid #18e061;
}

.table .best-row td {
    background-color: #a8d7ec !important;
    font-weight: 600;
}

/* ===== Modern Top Header ===== */

.top-header {
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.top-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-block {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 700;
    font-size: 1.5rem;
    color: #2563eb;
    margin: 0;
}

.brand-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.user-chip {
    background: #2563eb;
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 768px) {
    .top-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .user-chip {
        align-self: flex-end;
    }
}

/* Wrong selected option (brown style like mini assessment) */
.wrong-choice {
    background-color: #f3d6d6;
    border-left: 5px solid #b02a37;
}

/* Correct option highlight */
.correct-choice {
    background-color: #d1f2dc;
    border-left: 5px solid #198754;
}

/* Topic Assessment History Back Button */

.floating-back-btn{
    display: inline-block;

    margin-bottom: 16px;

    padding: 8px 14px;

    background: #eef4ff;
    color: #2563eb;

    border: 1px solid #9fc0ff;
    border-radius: 999px;

    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.floating-back-btn:hover{
    text-decoration:none;
}

/* Mobile */
@media (max-width:576px){

    .floating-back-btn{

        top: 12px;
        left: 12px;

        padding: 7px 12px;
        font-size: .88rem;
    }

}

.math-working {
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    line-height: 1.4;

    margin: 0;
    padding: 0;

    white-space: pre;
}

.math-column {
    font-family: "Courier New", monospace;
    font-size: 20px;
    line-height: 1.6;
}

.math-column p {
    margin: 0;
}

.math-column p:nth-child(2) {
    border-bottom: 2px solid #000;
    padding-bottom: 2px;
}

.math-working{
    font-family: "Courier New", monospace;
    font-size: 18px;
    line-height: 1.5;
}

/* =========================
   Vertical Math Working
========================= */

.math-working {
    font-family: "Courier New", monospace;
    font-size: 20px;
    line-height: 1.6;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    display: inline-block;
}

.math-working .line {
    text-align: right;
}

.math-working .divider {
    border-top: 2px solid #333;
    margin: 4px 0;
}

/* =========================
   EdukitKe Math Working
========================= */

.math-working{
    font-family: "Courier New", monospace;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    display: inline-block;
    line-height: 1.7;
    font-size: 16px;
}

.math-working{
    font-family: "Courier New", monospace;
    background: #f8fafc;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.math-working {
    font-family: "Courier New", monospace;
    font-size: 18px;
    background: #f8f9fb;
    padding: 12px;
    border-radius: 6px;

    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
}

/* CBC PERFORMANCE COLORS */

.cbc-badge{
    padding:6px 12px;
    border-radius:6px;
    font-size:14px;
    display:inline-block;
    font-weight:600;
}

.cbc-ee{
    background:#e6f4ea;
    color:#1e7e34;
    border-left:4px solid #1e7e34;
}

.cbc-me{
    background:#fff4e5;
    color:#d97706;
    border-left:4px solid #d97706;
}

.cbc-ae{
    background:#e8f0fe;
    color:#1a73e8;
    border-left:4px solid #1a73e8;
}

.cbc-be{
    background:#fdecea;
    color:#c5221f;
    border-left:4px solid #c5221f;
}

.math-working{
    font-family: "Courier New", monospace;
    font-size: 16px;
    background:#f5f7fa;
    padding:12px;
    border-radius:6px;
}

/* ===============================
   LONG DIVISION DISPLAY
================================ */

.long-division-box{
    font-family: "Courier New", monospace;
    margin-bottom:8px;
}

/* quotient (top answer) */
.ld-quotient{
    margin-left:48px;   /* centers above dividend */
    font-size:18px;
    font-weight:600;
    line-height:1;
}

/* row containing divisor + bracket + dividend */
.ld-row{
    display:flex;
    align-items:flex-start;
    font-size:20px;
}

/* divisor number */
.ld-divisor{
    margin-right:6px;
}

/* correct long-division bracket */
.ld-bracket{
    border-left:2px solid #333;     /* vertical bar */
    border-top:2px solid #333;      /* horizontal bar */
    width:50px;                     /* extends over dividend */
    height:40px;
    margin-right:4px;
}

/* dividend number */
.ld-dividend{
    font-weight:600;
}


.math-working{
    font-family: "Courier New", monospace;
    font-size: 16px;
    line-height: 1.45;
    white-space: pre;
    overflow-x: auto;
}

.correct-choice {
    background-color: #d4edda;
}

.wrong-choice {
    background-color: #f8d7da;
}

/* QUESTION CARD */
.card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* MCQ OPTIONS */
.exam-mcq-option {
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.exam-mcq-option:hover {
    background: #f1f5f9;
}

/* SELECTED OPTION */
.exam-mcq-option {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.exam-mcq-option:hover {
    background: #f1f5f9;
}

.exam-mcq-option input {
    cursor: pointer;
}

/* TIMER */
#floating-timer {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #111827;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: bold;
    z-index: 10;   /* NOT too high */
    pointer-events: none;  /* 🔥 THIS FIXES CLICK BLOCKING */
}

.site-main {
    position: relative;
    z-index: 1;
}

.card {
    position: relative;
    z-index: 2;
}

/* 🔥 FORCE EXAM CONTENT ABOVE ALL */
.site-main {
    position: relative;
    z-index: 10;
}

.container {
    position: relative;
    z-index: 10;
}

.card {
    position: relative;
    z-index: 20;
}


/* 🔥 Prevent invisible overlays blocking clicks */
body * {
    pointer-events: auto;
}

/* Custom radio circle */
.custom-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #6b7280;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

/* When selected */
input[type="radio"]:checked + label .custom-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 🔥 FORCE RADIO BUTTONS TO SHOW */
.exam-mcq-option input[type="radio"] {
    display: inline-block !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
}

/* 🔥 FIX RADIO CLICK BLOCK */
.exam-mcq-option {
    position: relative;
    z-index: 1;
}

.exam-mcq-option input[type="radio"] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 🔥 FORCE OPTIONS TO BE CLICKABLE */
.exam-mcq-option {
    position: relative;
    z-index: 5;
}

.card {
    position: relative;
    z-index: 1;
}
/* 🔥 GUARANTEE CLICK WORKS */
.exam-mcq-option * {
    pointer-events: auto !important;
}







/* =========================
   SELECTED OPTION (BLUE)
========================= */

input[type="radio"]:checked + label.exam-mcq-option {
    background-color: #98b5da;   /* light blue */
    border: 1px solid #2162ee;   /* blue border */
}

.exam-mcq-option:hover {
    background-color: #bbbdc0;
}

/* =========================
   SELECTED OPTION (BLUE)
========================= */
.assessment-option {
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.assessment-option:hover {
    background: #f9fafb;
}

/* BLUE SELECT */
.assessment-option input[type="radio"]:checked {
    accent-color: #2563eb;
}

.assessment-option input[type="radio"]:checked ~ span {
    font-weight: 600;
}



/* ================================
   MINI ASSESSMENT IMPROVEMENT
================================ */

.assessment-container {
    max-width: 900px;
    margin: auto;
    padding: 1rem;
}

.question-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);

    /* NEW */
    border-bottom: 1px solid #e5e7eb;
}

.question-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Mobile tuning */
@media (max-width: 600px) {
    .assessment-container {
        padding: 0.5rem;
    }

    .question-card {
        padding: 0.8rem;
    }
}

/* Subtle separator between questions */
.question-card + .question-card {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    margin-top: 1rem;
}

.question-card {
    border-left: 4px solid #dbeafe; /* soft blue */
}

.question-card:last-child {
    border-bottom: none;
}

.question-card {
    position: relative;
}

.question-card::after {
    content: "";
    display: block;
    height: 1px;
    background: #e5e7eb;
    margin-top: 1rem;
}

.question-card:last-child::after {
    display: none;
}

/* ================================
   ANSWER FEEDBACK STATES
================================ */

.answer-box {
    padding: 0.6rem;
    border-radius: 8px;
    margin-top: 0.6rem;
}

.answer-correct {
    background: #ecfdf5;
    border: 1px solid #10b981;
}

.answer-wrong {
    background: #fef2f2;
    border: 1px solid #ef4444;
}

.answer-missed {
    background: #fffbeb;
    border: 1px solid #f59e0b;
}

.answer-box {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.answer-correct {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
}

.answer-wrong {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
}

.answer-missed {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}


.cbc-badge {
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
}

.cbc-ee { background: #d1f7d6; color: #0f5132; }
.cbc-me { background: #e7f1ff; color: #084298; }
.cbc-ae { background: #fff3cd; color: #664d03; }
.cbc-be { background: #f8d7da; color: #842029; }

.cbc-badge {
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-block;
}

.cbc-ee { background: #d1f7d6; color: #0f5132; }
.cbc-me { background: #e7f1ff; color: #084298; }
.cbc-ae { background: #fff3cd; color: #664d03; }
.cbc-be { background: #f8d7da; color: #842029; }

.math-working {
    font-family: "Courier New", monospace;
    white-space: pre;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    line-height: 1.5;
}

.math-working {
    font-family: monospace;
    white-space: pre-wrap;
    line-height: 1.6;

    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: auto;
    max-width: 100%;
}

/* =========================================
   FINAL CBC COLORS (MASTER OVERRIDE)
========================================= */

.cbc-ee{
    background:#e8f5e9 !important;
    color:#1b5e20 !important;
    border-left:6px solid #2e7d32 !important;
}

.cbc-me{
    background:#e3f2fd !important;
    color:#0d47a1 !important;
    border-left:6px solid #1565c0 !important;
}

.cbc-ae{
    background:#fff8e1 !important;
    color:#e65100 !important;
    border-left:6px solid #f9a825 !important;
}

.cbc-be{
    background:#ffebee !important;
    color:#b71c1c !important;
    border-left:6px solid #c62828 !important;
}

/* ========================================
   TOUR MOBILE POLISH
======================================== */

@media (max-width: 768px) {

    /* Main cards */
    #tour-question-card,
    .card {

        padding: 1rem !important;
        border-radius: 14px;
    }

    /* Heading */
    #tour-question-card h5,
    h1 {

        font-size: 1.45rem;
        line-height: 1.3;
    }

    /* Question text */
    #tour-question-card p {

        font-size: 1rem;
        line-height: 1.6;
    }

    /* Options */
    .tour-option {

        padding: 0.9rem !important;
    }

    .tour-option .form-check-label {

        display: inline-block;
        width: 100%;
        line-height: 1.5;
        font-size: 0.98rem;
        word-break: break-word;
    }

    /* Buttons */
    .btn {

        width: 100%;
        margin-bottom: 0.6rem;
        padding: 0.75rem 1rem;
        font-size: 0.98rem;
        border-radius: 10px;
    }

    /* Completion card */
    .card.text-center ul {

        padding-left: 0;
    }

    /* Images */
    #tour-question-card img {

        max-width: 100%;
        height: auto;
    }

    /* Alerts */
    .alert {

        font-size: 0.95rem;
        line-height: 1.5;
    }
}


/* =====================================
   Mobile Completion Buttons
===================================== */

@media (max-width: 576px) {

    .completion-actions .btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.95rem;
        min-height: 48px;
    }

}

/* =========================
   Assessment History Mobile
========================= */

@media (max-width: 576px) {

    .table-responsive {
        border-radius: 8px;
    }

    .table td,
    .table th {
        white-space: nowrap;
        font-size: 14px;
        vertical-align: middle;
    }

}


/* ==========================================
   Topic Assessment History Buttons
========================================== */

.breakdown-btn{
    white-space: nowrap;
    padding: .25rem .55rem;
    line-height: 1.2;
}

/* Mobile */
@media (max-width: 576px){

    .breakdown-btn{
        font-size: .72rem;
        padding: .20rem .45rem;
    }

}.mobile-date{
    display:none;
}

@media (max-width:576px){

    .desktop-date{
        display:none;
    }

    .mobile-date{
        display:inline;
    }

}

/* =====================================
   Assessment Result Action Buttons
===================================== */

.assessment-actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.assessment-actions .btn{
    flex:1;
    text-align:center;
}

/* Mobile */
@media (max-width:576px){

    .assessment-actions{
        gap:8px;
    }

    .assessment-actions .btn{
        font-size:.9rem;
        padding:.7rem .5rem;
    }

}

.assessment-actions .btn{
    flex:1;
    text-align:center;
    font-weight:600;
    border-radius:12px;
}

/* =====================================
   Static Page Back Button
===================================== */

.page-back-btn{
    display:inline-block;

    margin-bottom:16px;

    padding:8px 14px;

    background:#eef4ff;
    color:#2563eb;

    border:1px solid #9fc0ff;
    border-radius:999px;

    text-decoration:none;
    font-weight:600;
    font-size:.9rem;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.page-back-btn:hover{
    text-decoration:none;
    background:#e4eeff;
}

.history-table th:last-child,
.history-table td:last-child{
    text-align: center;
    width: 90px;
}

.history-link{
    text-decoration: none;
    font-weight: 500;
}

.history-link:hover{
    text-decoration: underline;
} 

/* =====================================
   Practice Completion Buttons
===================================== */

.completion-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.practice-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    background:#eef4ff;
    color:#2563eb;

    border:1px solid #9fc0ff;
    border-radius:12px;

    text-decoration:none;
    font-weight:600;

    min-height:44px;

    transition:.2s ease;
}

.practice-action-btn:hover{
    background:#e4eeff;
    color:#1d4ed8;
    text-decoration:none;
}

/* Slight emphasis for Next Practice */
.practice-next-btn{
    background:#dbeafe;
    border-color:#60a5fa;
}

/* Mobile */
@media (max-width:576px){

    .completion-actions{
        flex-direction:column;
    }

    .practice-action-btn{
        width:100%;
    }

}

@media (max-width: 576px) {

    .top-header-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .brand-block{
        text-align:center;
    }

    .user-chip{

        align-self:center;
        margin-left:0;
        margin-right:0;

        background:#dbeafe;
        color:#1d4ed8;

        border:1px solid #93c5fd;

        padding:8px 16px;
        border-radius:999px;

        font-weight:600;
    }

}