/* Site-wide typography: keep every page (navbar included) on Poppins */
    body {
        font-family: "Poppins", sans-serif;
    }

    /* OAuth Button Styles */
    .oauth-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px;
        margin-top: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: background-color 0.3s ease;
    }

    .oauth-button:hover {
        background-color: #f8f9fa;
        text-decoration: none;
        color: #333;
    }

    .oauth-button img {
        width: 20px;
        height: 20px;
    }

    .oauth-button p {
        margin: 0;
        font-size: 14px;
    }
     /* OAuth Button Styles END */


    .question-prompt {
        font-family: inherit;
        word-wrap: break-word;
        border-radius: 8px;
        padding: 1rem;
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Responsive font sizes */
    @media (max-width: 768px) {
        .question-prompt {
            font-size: 0.85rem;
            line-height: 1.4;
        }
    }

    @media (max-width: 480px) {
        .question-prompt {
            font-size: 0.8rem;
        }
    }

    tr.clickable-row:hover {
        background-color: #f1f1f1;
    }
    tr.clickable-row {
        cursor: pointer;
    }

    .scrollable-menu {
        height: auto;
        max-height: 450px;
        overflow-x: hidden;
    }

    .pagination .page-item:first-child a,
    .pagination .page-item:last-child a {
        background-color: #777; /* Darker background */
        color: white; /* White text color */
    }

    .pagination .page-item a {
        margin-right: 5px; /* Spacing between links */
    }

    .pagination .page-item a:hover {
        background-color: #555; /* Even darker background on hover */
        color: #ddd; /* Light grey text color on hover */
    }

    .table-actions {
        display: flex;
        gap: 5px;
    }

    .table-actions .btn {
        padding: 4px 8px;
        font-size: 12px;
        margin: 0;
    }

    .btn-link {
    padding: 0;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    }

    th {
        white-space: nowrap;
    }

    th i {
        margin-left: 5px;
    }
    .clickable-option {
        border: 1px solid #ddd;
        border-radius: 8px;
        transition: background-color 0.3s, box-shadow 0.3s;
        cursor: pointer;
        width: 100%; /* Ensures responsive layout */
        max-width: 500vw; /* Limits the box width */
        height: 100vw; /* Sets a fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto; /* Centers the box in its column */
    }
    .clickable-option:hover {
        background-color: #f8f9fa;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    #progress_bar {
        height: 25px; /* Adjust the height to make it thinner */
        width: 100%; /* Full width */
    }
    .selected-option {
        border: 2px solid #007bff; /* Blue border for selected answers */
        background-color: #f0f8ff; /* Light blue background */
        font-weight: bold;
    }
    .btn-group {
        justify-content: center; /* Center the buttons */
        flex-wrap: wrap; /* Ensure buttons wrap if there's not enough space */
    }


    #infoBox {
    display: none;
    position: absolute;
    padding: 10px;
    background-color: white;
    border: 1px solid black;
    z-index: 9999; /* Ensure it appears on top of everything */
    pointer-events: none; /* Prevent interactions from blocking other elements */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
    border-radius: 4px; /* Smooth corners */
    font-size: 14px; /* Readable font size */
    color: black; /* Text color for better contrast */
    }

    .dropdown-cell {
        position: relative;
        text-align: center;
        cursor: pointer;
        z-index: 1; /* Lower than #infoBox */
    }

    .quiz-percentage {
        display: inline-block;
        z-index: 2; /* Ensure text is visible but doesn't interfere with the hover bar */
    }

    .quiz-dropdown {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0; /* Invisible but clickable */
        z-index: 3; /* Above other elements in the cell but below #infoBox */
        cursor: pointer;
    }

    .dropdown-arrow {
        position: relative;
        font-size: 12px;
        color: #333;
        pointer-events: none; /* Prevent arrow from blocking interactions */
        z-index: 4; /* Above dropdown but below #infoBox */
    }
    .no-select {
            user-select: none; /* Prevents text selection */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
    }

    .code-block {
    background-color: #f4f4f4;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    overflow-x: auto;
    font-size: 1rem;
}



.chat-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  line-height: 55px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}

.chat-popup {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 320px;
  max-height: 450px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;

  /* FIX: Make it visible when not d-none */
  opacity: 1;
  transform: translateY(0);
}

.chat-popup.d-none {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.chat-header {
  font-weight: bold;
}

.chat-box {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: #f9f9f9;
  height: 350px;
}

#chat-form {
  padding: 5px;
}

.chat-box .message.user { color: #2a8; font-weight: bold; }
.chat-box .message.bot { color: #333; }

.chat-label {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.3s;
}

/* ============================================================
   Class report grids (analysis/class_report/class_grid.php)
   Class-based, not id-based: a class renders one table per
   module, so an id would be duplicated on multi-module classes.
   ============================================================ */

/* Lesson headers carry the full lesson name (avg 21 chars, max 45), so they
   opt out of the global `th { white-space: nowrap }` and wrap instead. The
   fixed width keeps every lesson column the same size, which is what makes
   the grid scannable vertically ("how did the class do on this lesson").
   118px is measured, not guessed: headers render at bold 700 14px Poppins,
   where the longest unbreakable word in the lesson set ("Polymorphism") is
   107px, plus 8px padding and 2px border. Below this, words break mid-word. */
.class-grid-table th.lesson-header {
  white-space: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  min-width: 118px;
  max-width: 118px;
  vertical-align: bottom;
  padding: 0.35rem 0.25rem;
}

/* Freeze the student column. A single module can carry 22 lessons (~2600px),
   so without this the row's owner scrolls out of sight and the grid becomes
   unreadable. The .table-responsive wrapper is the scroll container, which is
   the correct positioning context for the sticky offset. */
.class-grid-table th:first-child,
.class-grid-table td:first-child,
.exam-grid-table th:first-child,
.exam-grid-table td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 2; /* Ensure it sits above the body cells */
  /* Bootstrap tables use border-collapse: collapse, which makes borders belong
     to the table rather than the cell -- so a sticky cell's own borders scroll
     away underneath it and the frozen column loses its right-hand divider.
     Redraw it as an inset shadow, which travels with the element. The outer
     shadow is the standard frozen-column affordance and also covers the 1px
     of neighbouring cell that can bleed through at the scrollport edge.
     The left inset is 2px, not 1px: the table lays out at a fractional width
     (~2704.8px), so a 1px cover leaves a sub-pixel strip of the scrolled cell
     visible against the frozen column. */
  box-shadow: inset 2px 0 0 #dee2e6, inset -1px 0 0 #dee2e6,
              3px 0 5px -2px rgba(0, 0, 0, 0.12);
}

/* bump up the z-index on header cells so they sit above the body cells */
.class-grid-table thead th:first-child,
.exam-grid-table thead th:first-child {
  z-index: 3;
}

/* Tablet: shed header width before the columns themselves start to crowd. */
@media (max-width: 767.98px) {
  .class-grid-table th.lesson-header {
    min-width: 92px;
    max-width: 92px;
    font-size: 0.78rem;
  }
}

/* Phone: 118px columns put even a 10-lesson module far off screen. Scale down
   so more of the grid lands per swipe; long words hyphen-break at this size,
   which is an acceptable trade at 375px. */
@media (max-width: 575.98px) {
  .class-grid-table th.lesson-header {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.72rem;
  }
}

/* Quiz-specific styles */
.quiz-container * { 
    box-sizing: border-box; 
}

.quiz-page html, 
.quiz-page body { 
    height: 100%; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #e8eaef;
    margin: 0;
    padding: 0;
}

.quiz-container {
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 1rem;
    gap: 1rem;
    background: #e8eaef;
    overflow: auto;
}

.quiz-header {
    background: white;
    border: 1px solid #c8d0d8;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.quiz-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
}

.timer {
    font-size: 1rem;
    font-weight: 500;
    color: #3d3d3d;
    background: rgba(0,0,0,0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.quiz-progress {
    background: white;
    border: 1px solid #c8d0d8;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #3d3d3d;
}

.progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #d1d8e0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.5s ease;
    border-radius: 4px;
}

.quiz-content {
    background: white;
    border: 1px solid #c8d0d8;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    height: 100%;
    overflow: auto;
}

.question-section {
    background: #f0f2f5;
    border: 2px solid #c8d0d8;
    border-radius: 10px;
    padding: 1.25rem;
    flex-shrink: 0;
    position: relative;
}

.answers-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.5rem;
    flex: 1;
    min-height: 0;
}

.answer-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border: 2px solid #c8d0d8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    line-height: 1.4;
    min-height: 60px;
    flex-shrink: 0;
}

.answer-option:hover {
    border-color: #007bff;
    background: #e8f0fe;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.15);
}

.answer-option.selected {
    border-color: #007bff;
    background: linear-gradient(135deg, #cce5ff 0%, #99c9ff 100%);
    box-shadow: 0 4px 12px rgba(0,123,255,0.25);
    transform: translateY(-1px);
}

.option-letter {
    font-weight: 700;
    color: #2d3439;
    font-size: 1.1rem;
    min-width: 24px;
    flex-shrink: 0;
}

.answer-text {
    flex: 1;
    font-weight: 500;
    color: #1a1a1a;
}

.quiz-actions {
    background: white;
    border: 1px solid #c8d0d8;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.btn-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

/* ============================================================
   Unified site-wide button system
   Every Bootstrap button (.btn + a variant) shares one polished
   shape and feel: rounded pill, subtle gradient, lift + glow on
   hover, and a soft shine sweep. Colors stay meaningful
   (success = green, danger = red, etc.) so buttons look like one
   family across every page.
   ============================================================ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}

/* Sizes */
.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

/* Shine sweep for solid buttons (skip outline, link, and dropdown
   toggles — the latter use ::after for their caret) */
.btn:not([class*="btn-outline"]):not(.btn-link):not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn:not([class*="btn-outline"]):not(.btn-link):not(.dropdown-toggle):hover::after {
    left: 130%;
}

/* Solid color variants */
.btn-primary {
    background: linear-gradient(135deg, #0066cc 0%, #4f9eff 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.30);
}
.btn-primary:hover { color: #fff; box-shadow: 0 10px 22px rgba(0, 102, 204, 0.42); }

.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #939ba2 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.30);
}
.btn-secondary:hover { color: #fff; box-shadow: 0 10px 22px rgba(108, 117, 125, 0.42); }

.btn-success {
    background: linear-gradient(135deg, #1e9e54 0%, #28c76f 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.30);
}
.btn-success:hover { color: #fff; box-shadow: 0 10px 22px rgba(40, 167, 69, 0.42); }

.btn-danger {
    background: linear-gradient(135deg, #d62c3b 0%, #ff5c5c 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.30);
}
.btn-danger:hover { color: #fff; box-shadow: 0 10px 22px rgba(220, 53, 69, 0.42); }

.btn-info {
    background: linear-gradient(135deg, #1592a8 0%, #25c2d8 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(23, 162, 184, 0.30);
}
.btn-info:hover { color: #fff; box-shadow: 0 10px 22px rgba(23, 162, 184, 0.42); }

.btn-warning {
    background: linear-gradient(135deg, #e0a800 0%, #ffce3a 100%);
    color: #2d2d2d;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.30);
}
.btn-warning:hover { color: #2d2d2d; box-shadow: 0 10px 22px rgba(255, 193, 7, 0.42); }

.btn-light {
    background: #f4f6f8;
    color: #2d2d2d;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.btn-light:hover { color: #2d2d2d; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12); }

.btn-dark {
    background: linear-gradient(135deg, #2b3035 0%, #4b5159 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(33, 37, 41, 0.30);
}
.btn-dark:hover { color: #fff; box-shadow: 0 10px 22px rgba(33, 37, 41, 0.42); }

/* Outline variants */
.btn-outline-primary {
    background: transparent;
    color: #0066cc;
    border: 2px solid #0066cc;
}
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #0066cc 0%, #4f9eff 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(0, 102, 204, 0.35);
}

.btn-outline-secondary {
    background: transparent;
    color: #6c757d;
    border: 2px solid #6c757d;
}
.btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(108, 117, 125, 0.35);
}

.btn-outline-success {
    background: transparent;
    color: #1e9e54;
    border: 2px solid #1e9e54;
}
.btn-outline-success:hover {
    background: #1e9e54;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(40, 167, 69, 0.35);
}

.btn-outline-danger {
    background: transparent;
    color: #d62c3b;
    border: 2px solid #d62c3b;
}
.btn-outline-danger:hover {
    background: #d62c3b;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.35);
}

.btn-outline-info {
    background: transparent;
    color: #1592a8;
    border: 2px solid #1592a8;
}
.btn-outline-info:hover {
    background: #1592a8;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(23, 162, 184, 0.35);
}

/* Plain link-style button (e.g. table filter toggles): keep it flat */
.btn-link {
    background: transparent;
    box-shadow: none;
    color: #0066cc;
}
.btn-link:hover {
    transform: none;
    background: transparent;
}

/* Hero call-to-action button (landing page + any prominent action) */
.btn-quiz {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #0066cc 0%, #4f9eff 100%);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.35);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-quiz:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 102, 204, 0.45);
}
.btn-quiz:active {
    transform: translateY(-1px) scale(0.98);
}
.btn-quiz i {
    font-size: 1.25rem;
    transition: transform 0.25s ease;
}
.btn-quiz:hover i {
    transform: translateX(4px);
}
.btn-quiz::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-quiz:hover::after {
    left: 130%;
}
.btn-quiz-outline {
    background: transparent;
    color: #0066cc;
    border: 2px solid #0066cc;
    box-shadow: none;
}
.btn-quiz-outline:hover {
    color: #fff;
    background: linear-gradient(135deg, #0066cc 0%, #4f9eff 100%);
    box-shadow: 0 10px 22px rgba(0, 102, 204, 0.35);
}

.chat-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,123,255,0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0,123,255,0.5);
}

.chat-popup {
    position: fixed;
    bottom: 90px;
    right: 1.5rem;
    width: min(400px, calc(100vw - 3rem));
    height: min(500px, 60vh);
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    z-index: 999;
    overflow: hidden;
}

.chat-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.chat-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-input {
    padding: 1rem;
    border-top: 1px solid #c8d0d8;
    display: flex;
    gap: 0.75rem;
}

.chat-input input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #c8d0d8;
    border-radius: 8px;
    font-size: 0.9rem;
}

.chat-input button {
    padding: 0.75rem 1.25rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* Desktop-specific adjustments for better question/answer spacing */
@media (min-width: 769px) {
    .answers-section {
        min-height: 300px;
    }
    
    .quiz-content {
        min-height: 0;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .quiz-container {
        padding: 0.75rem;
        gap: 0.75rem;
        grid-template-rows: auto auto auto 1fr auto;
        overflow: auto;
    }
    
    .quiz-header {
        padding: 0.75rem 1rem;
    }
    
    .quiz-header h1 {
        font-size: 1.2rem;
    }
    
    .timer {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    
    .quiz-progress {
        padding: 0.5rem 1rem;
    }
    
    .quiz-content {
        padding: 1rem;
        gap: 1rem;
        overflow: auto;
    }
    
    .question-section {
        padding: 1rem;
    }
    
    .answers-section {
        gap: 0.75rem;
    }
    
    .answer-option {
        padding: 1rem;
        font-size: 0.9rem;
        min-height: 50px;
        gap: 0.75rem;
    }
    
    .option-letter {
        font-size: 1rem;
        min-width: 20px;
    }
    
    .quiz-actions {
        padding: 1rem;
    }
    
    .btn-group {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
        min-height: 45px;
    }
    
    .chat-toggle {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.3rem;
    }
    
    .chat-popup {
        right: 1rem;
        bottom: 70px;
        width: calc(100vw - 2rem);
        height: 50vh;
    }
}

@media (max-width: 480px) {
    .quiz-container {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .quiz-header {
        padding: 0.625rem 0.75rem;
    }
    
    .quiz-header h1 {
        font-size: 1.1rem;
    }
    
    .timer {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .quiz-content {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .question-section {
        padding: 0.75rem;
    }
    
    .answer-option {
        padding: 0.75rem;
        font-size: 0.85rem;
        min-height: 45px;
    }
    
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        min-height: 42px;
    }
}

/* Landscape mode optimizations */
@media (max-height: 600px) {
    .quiz-container {
        gap: 0.5rem;
    }
    
    .quiz-header, .quiz-progress, .quiz-actions {
        padding: 0.5rem 1rem;
    }
}

/* Custom scrollbar */
.question-section::-webkit-scrollbar,
.answers-section::-webkit-scrollbar,
.chat-body::-webkit-scrollbar {
    width: 6px;
}

.question-section::-webkit-scrollbar-track,
.answers-section::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track {
    background: #d8dce0;
    border-radius: 3px;
}

.question-section::-webkit-scrollbar-thumb,
.answers-section::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb {
    background: #8a8f94;
    border-radius: 3px;
}

.question-section::-webkit-scrollbar-thumb:hover,
.answers-section::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover {
    background: #6b6f73;
}

.question-code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-family: inherit !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Ensure answers also preserve whitespace */
.answer-text span {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/*////////////////////class_grid specific styles//////////////////////*/
.module-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #f8f9fa;
}

.module-title {
    color: #495057;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.table-sm th, .table-sm td {
    padding: 0.5rem;
    font-size: 0.875rem;
}

.quiz-cell, .dropdown-cell, .exam-question-cell, .overall-score-cell {
    cursor: pointer;
    transition: background-color 0.2s;
}

.quiz-cell:hover, .dropdown-cell:hover, .exam-question-cell:hover, .overall-score-cell:hover {
    opacity: 0.8;
}

.dropdown-cell {
    position: relative;
}

.quiz-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropdown-arrow {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #666;
}

.quiz-percentage {
    pointer-events: none;
}

.exam-question-cell {
    font-weight: bold;
    font-size: 1.2em;
}

.overall-score-cell {
    font-weight: bold;
    font-size: 1.1em;
    min-width: 80px;
}

/* Exam grids only: the Q1..Qn columns are short labels over single-digit
   scores, so they stay narrow. Scoped to .exam-grid-table because the class
   grid's lesson headers carry full lesson names and must not be clamped. */
.exam-grid-table th.small, .exam-grid-table td.exam-question-cell {
    min-width: 40px;
    max-width: 60px;
    padding: 0.25rem;
}

/*Question section - no inner scroll/resize; quiz-content is the only scroll container */
.question-section {
    background: #f0f2f5;
    border: 2px solid #c8d0d8;
    border-radius: 10px;
    padding: 1.25rem;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
}

/* Code formatting inside question section */
.question-section .prompt-text {
    margin-bottom: 1rem;
    color: #111111;
    font-weight: 500;
}

/* Code block styling - horizontal scroll only for long lines; no vertical scroll */
/* Remove Prism Coy's ::before/::after pseudo-elements that create trapezoidal shadow artifacts */
.question-section pre[class*="language-"]::before,
.question-section pre[class*="language-"]::after,
.question-section pre::before,
.question-section pre::after {
    display: none !important;
    content: none !important;
}

.question-section pre[class*="language-"],
.question-section pre {
    margin: 0.5rem 0 0 0 !important;
    padding: 1rem !important;
    background: #f7f7f7 !important;
    border: 1px solid #d0d4d8 !important;
    border-left: none !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: none !important;
}

.question-section code[class*="language-"]::before,
.question-section code[class*="language-"]::after,
.question-section code::before,
.question-section code::after {
    display: none !important;
    content: none !important;
}

.question-section code[class*="language-"],
.question-section code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit;
    border: none !important;
    border-left: none !important;
}

.question-section pre[class*="language-"] code,
.question-section pre code {
    display: block;
    white-space: pre;
    word-wrap: normal;
}

/* High-contrast syntax highlighting for quiz code blocks */
.question-section .token.comment { color: #2d5a27; }
.question-section .token.keyword { color: #0066cc; }
.question-section .token.string { color: #c41a16; }
.question-section .token.punctuation { color: #333333; }
.question-section .token.operator { color: #333333; }
.question-section .token.function { color: #795e26; }
.question-section .token.class-name { color: #267f99; }
.question-section .token.tag { color: #0066cc; }
.question-section .token.attr-name { color: #795e26; }
.question-section .token.attr-value { color: #c41a16; }
.question-section .token.number { color: #098658; }
/*End Question resize*/



/* ============================================================
   Card-wrapped data table (opt-in)
   Wraps a plain Bootstrap table in the same white, softly
   shadowed, rounded surface the profile hub cards use, so list
   pages read as part of the same site instead of as a bare
   spreadsheet. Deliberately opt-in: pages ask for it by adding
   .table-card / .table-clean, so the educator gradebook and
   class grid keep the styling they were tuned for.
   ============================================================ */
.table-card {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 12px;
    overflow: hidden; /* clips the table's square corners to the card */
}

/* Horizontal dividers only - no vertical grid lines, no outer frame. */
.table-clean {
    margin-bottom: 0;
}

.table-clean > :not(caption) > * > * {
    padding: 0.85rem 1rem;
    border-bottom-color: #edf0f4;
}

.table-clean > thead > tr > th {
    background: #f6f8fa;
    color: #3d4650;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e6ec;
}

/* The final row draws no divider against the card's own edge. */
.table-clean > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* Bootstrap's .container narrows in steps faster than the table sheds
   columns, so the roomy desktop cell padding is what pushes the Action
   button behind a horizontal scroll on tablets. Tighten cells once
   columns start dropping out. */
@media (max-width: 767.98px) {
    .table-clean > :not(caption) > * > * {
        padding: 0.7rem 0.5rem;
    }
}

/* Phone tier: with only four columns left, the fixed-width action button
   and nowrap headers still overflow a 375px container. Scale the type and
   the in-cell button down so the primary action stays reachable without
   sideways scrolling. Scoped to .table-clean, so the site-wide button
   sizing is untouched everywhere else. */
@media (max-width: 575.98px) {
    .table-clean {
        font-size: 0.8rem;
    }

    .table-clean > :not(caption) > * > * {
        padding: 0.55rem 0.4rem;
    }

    .table-clean .btn-sm {
        padding: 0.35rem 0.7rem;
        font-size: 0.75rem;
    }
}

/* ------------------------------------------------------------------------
   Topic breakdown modal (assignment gradebook score cell)
   ------------------------------------------------------------------------ */

/* The score cell advertises that it opens the breakdown. The cell keeps its
   own red/yellow/green background from the gradebook, so the affordance is a
   cursor and an underline rather than a colour that would fight it. */
.topic-cell {
    cursor: pointer;
}

.topic-cell:hover .topic-cell-value,
.topic-cell:focus-visible .topic-cell-value {
    text-decoration: underline;
}

.topic-cell:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* Score bands, shared with the gradebook cells they summarise: at or above
   80% reads good, 50-79% needs attention, below 50% is weak. Solid fills
   here (not the table's translucent rgba) so badges stay legible on the
   modal's white ground. */
.tb-score-good {
    background-color: #198754;
    color: #fff;
}

.tb-score-warn {
    background-color: #ffc107;
    color: #3d4650;
}

.tb-score-bad {
    background-color: #dc3545;
    color: #fff;
}

/* Per-lesson mastery bar. Narrow and fixed so every lesson row's bar starts
   at the same place and the rows read as one column of comparisons. */
.tb-bar {
    width: 90px;
    height: 6px;
    flex: 0 0 auto;
}

/* Per-question verdict mark. Fixed width keeps the prompts left-aligned
   down the list regardless of which glyph a row carries. */
.tb-verdict {
    flex: 0 0 1.1rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.tb-correct   { color: #198754; }
.tb-partial   { color: #fd7e14; }
.tb-incorrect { color: #dc3545; }
.tb-pending   { color: #6c757d; }

.tb-qnum {
    flex: 0 0 2.2rem;
}

/* Prompts carry authored code: preserve the newlines and indentation the
   server un-escaped, and let long lines wrap instead of widening the modal. */
.tb-prompt {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Bootstrap's accordion button reserves the right edge for its chevron; the
   score badge sits inside that, so pull it clear of the arrow. */
.accordion-button .badge {
    margin-right: 0.75rem;
}

/* Focus-area cards: the weak topics to actually talk to the student about.
   Fixed minimum so several read as a row of comparable cards, and they wrap
   to one per line on a phone. */
.tb-focus {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 260px;
    background-color: #fbfcfd;
}

/* Lesson disclosure row. Deliberately not a .btn: the site-wide button
   system centres its label and gives it a pill and a shine sweep, which is
   wrong for a tree row whose names have to line up down the left edge. */
.tb-lesson-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.15rem 0;
    border: none;
    background: none;
    color: #0d6efd;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.tb-lesson-toggle:hover {
    text-decoration: underline;
}

.tb-lesson-toggle:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 3px;
}

/* The caret points down once the lesson is open, so a row that is already
   expanded reads as expanded. */
.tb-caret {
    display: inline-block;
    transition: transform 0.15s ease;
}

.tb-lesson-toggle[aria-expanded="true"] .tb-caret {
    transform: rotate(90deg);
}

/* Phone tier: the lesson row cannot fit a name, a correct-count, a bar and a
   badge across ~340px without the count wrapping mid-phrase. Drop the bar
   (the badge already states the percentage) and let the name take the width
   it needs. */
@media (max-width: 575.98px) {
    .tb-bar {
        display: none;
    }

    .tb-lesson-toggle {
        flex-wrap: wrap;
    }

    .tb-focus {
        max-width: none;
    }
}