/**
 * Styles for block_quiz_report.
 *
 * Design follows mentor_dashboard and local/catalog.php:
 *   – RTL-first (dir="rtl" on wrapper, text-align: right)
 *   – Expand/collapse mirrors sub_report.css: height 0→computed, 0.5 s linear
 *   – Responsive horizontal scroll; spinner for AJAX loading state
 */

/* ── Root wrapper ───────────────────────────────────────────────────── */
.qar-mobile-panel[data-panel="student"] {
    margin-bottom: 5em;
}

.qar-wrapper {
    font-family: inherit;
    color: #2c2c2c;
    direction: rtl;
    text-align: right;
}

/* ── Mobile tab switcher ─────────────────────────────────────────────
   Two tabs ("Search student" / "Search quiz") let a narrow screen show
   one search panel at a time instead of both stacked (amd/src/tabs.js
   toggles the *-active classes on click). Hidden entirely outside the
   mobile breakpoint below, where both panels are always shown. ────── */
.qar-mobile-tabs {
    display: none;
    direction: rtl;
}

.qar-mobile-tab {
    flex: 1 1 0;
    padding: 0.6em 1em;
    border: 1px solid var(--dashboard_main_color, #253A8F);
    border-radius: 8px;
    background: #fff;
    color: var(--dashboard_main_color, #253A8F);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.qar-mobile-tab-active {
    background: #0060AC;
    color: #fff;
}

/* ── Search form ────────────────────────────────────────────────────── */
.qar-search-area {
    margin-bottom: 1.5em;
}

.qar-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6em;
}

.qar-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 77px;
}

.qar-form-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
}

.qar-label {
    font-weight: 600;
    font-size: 1em;
    color: #000;
    white-space: nowrap;
}

.qar-input {
    flex: 1 1 130px;
    max-width: 220px;
    min-width: 0;
    padding: 0.45em 0.75em;
    border: 1px solid #cdd3e0;
    border-radius: 6px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.15s;
    text-align: right;
    background: #fff;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qar-input:focus {
    border-color: var(--dashboard_main_color, #253A8F);
    box-shadow: 0 0 0 3px rgba(37, 58, 143, 0.12);
}

.qar-btn-search {
    padding: 0.48em 1.4em;
    background-color:#0060AC;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.qar-btn-search:hover,
.qar-btn-search:focus {
    background-color: #0060AC;
    opacity: 0.92;
}

.qar-btn-search:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.qar-btn-clear {
    padding: 0.48em 1.4em;
    background-color: #fff;
    color: var(--dashboard_main_color, #253A8F);
    border: 1px solid var(--dashboard_main_color, #253A8F);
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: background-color 0.15s, color 0.15s;
}

.qar-btn-clear:hover,
.qar-btn-clear:focus {
    background-color: rgb(220, 228, 248);
}

/* ── Excel export link ─────────────────────────────────────────────────
   Sits below the results (both the mobile card list and the desktop
   table), pinned to the end of the line — the visual left in this RTL
   layout, achieved via flex's direction-aware "flex-end" rather than a
   hardcoded physical side. Plain link styling (no button chrome) with a
   small download icon, distinct from the solid search/clear buttons above. */
.qar-export-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75em;
}

.qar-btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0;
    background: none;
    border: none;
    color: var(--dashboard_main_color, #253A8F);
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, opacity 0.15s;
}

.qar-btn-export:hover,
.qar-btn-export:focus {
    color: #1b2d75;
    text-decoration: underline;
}

.qar-btn-export:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.qar-btn-export-icon {
    display: inline-flex;
    line-height: 1;
}

/* ── Alerts ─────────────────────────────────────────────────────────── */
.qar-alert {
    padding: 0.75em 1em;
    border-radius: 6px;
    margin: 0.75em 0;
    font-size: 0.97em;
}

.qar-alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #664d00;
}

.qar-alert-info {
    /* background-color: #eef4fc;
    border: 1px solid #c9dcf4;
    color: #253A8F; */
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #664d00;
}

/* ── Multi-match student list ───────────────────────────────────────── */
.qar-student-list-wrapper {
    margin: 0.75em 0;
}

.qar-student-list-hint {
    margin: 0 0 0.6em;
    color: #555;
    font-size: 0.95em;
}

.qar-student-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.qar-student-card {
    border: 1px solid #cdd3e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.qar-student-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    padding: 0.85em 1em;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.qar-student-result:hover,
.qar-student-result:focus {
    background-color: rgb(220, 228, 248);
    color: var(--dashboard_secendary_color, #253A8F);
}

.qar-student-result.qar-expanded {
    background-color: #fff;
    color: #031635;
}

.qar-student-result-text {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.qar-student-result-name strong {
    font-weight: 700;
}
.qar-student-result-name {
    font-weight: normal;
}
.qar-student-result-id {
    color: #555;
    direction: ltr;
    white-space: nowrap;
}

.qar-student-result.qar-expanded .qar-student-result-id {
    color: inherit;
}
.qar-student-result.qar-expanded .qar-expand-icon {
    font-size: 1.85em;
}

/* Department / knowledge-area tags under a course card's title. */
.qsr-course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.35em;
}

.qsr-course-tag {
    display: inline-block;
    padding: 0.2em 1.6em;
    border: 0;
    border-radius: 15px;
    color: #0060AC;
    font-size: 0.82em;
    font-weight: 600;
    background: #CFEAFF;
    white-space: nowrap;
}

/* Lazy-loaded per-student report; starts collapsed, JS animates it open. */
.qar-student-sub-container {
    overflow: hidden;
    height: 0;
    background-color: #f7f8fa;
    transition: height 0.5s linear;
}

.qar-student-sub-inner {
    padding: 0.85em 1em;
}

/* ── Grade badge (quiz card + per-attempt row, in the modal) ─────────── */
.qar-grade-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    flex-shrink: 0;
    min-width: 3em;
    padding: 0;
    border: 0;
    background-color: transparent;
    line-height: 1.2;
}

.qar-grade-value {
    color: #0060AC;
    font-weight: 400;
    font-size: 1.05em;
}

.qar-grade-label {
    color: #777;
    font-size: 0.7em;
    white-space: break-spaces;
    width: min-content;
    text-align: center;
    min-width: 3.2em;
}

.qar-grade-badge-sm {
    min-width: 2.6em;
    padding: 0.25em 0.5em;
}

.qar-grade-badge-sm .qar-grade-value {
    font-size: 0.9em;
    font-weight: 700;
}

/* ── Quiz cards (one per quiz a student attempted) ───────────────────── */
.qar-quiz-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-top: 0.5em;
}

.qar-quiz-card {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    padding: 0.85em 1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Spans the card's full width, above the info/count/grade/details row. */
.qar-quiz-card-sub {
    color: #2c2c2c;
    font-size: 0.95em;
    padding-bottom: 0.25em;
}

.qar-quiz-card-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75em;
}

.qar-quiz-card-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Toggled by amd/src/report.js only when the title renders on a single
   line — top-aligns it with the count/grade widgets instead of centering
   it against their full two-line height. A wrapped (multi-line) title
   keeps the row's default centered alignment. */
.qar-quiz-card-info-top {
    align-self: flex-start;
}

.qar-quiz-card-title {
    display: block;
    font-weight: normal;
    color: #031635;
    text-decoration: none;
}

.qar-quiz-card-title:hover,
.qar-quiz-card-title:focus {
    text-decoration: underline;
}

.qar-quiz-card-count {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    min-width: 2.6em;
    line-height: 1.2;
}

.qar-quiz-card-count-value {
    font-weight: 400;
    font-size: 0.95em;
    color: #0060AC;
}

.qar-quiz-card-count-label {
    font-size: 0.7em;
    color: #777;
    white-space: break-spaces;
    width: min-content;
}

.qar-attempt-row .qar-quiz-card-count .qar-quiz-card-count-label {
    min-width: 5.2em;
    text-align: center;
}

.qar-btn-details {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
    background-color: #1A2B4B;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, opacity 0.15s;
    height: 2.5em!important;
}

.qar-btn-details:hover,
.qar-btn-details:focus {
    background-color: #1b2d75;
    opacity: 0.92;
}

/* Hidden source cloned into the shared modal — never rendered in place. */
.qar-quiz-detail-source {
    display: none;
}

/* ── Attempt rows (rendered inside the modal after cloning) ──────────── */
.qar-attempt-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* A single row: badge, then the 3 time columns, then the attempt-number
   link — matches the reference design. Scrolls horizontally rather than
   wrapping if a narrow screen can't fit all 5 items. */
.qar-attempt-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    background: #f4f7fd;
    border-radius: 8px;
    padding: 0.6em 0.75em;
    overflow-x: auto;
    border-collapse: collapse;
    border: 1px solid rgba(197, 198, 207, 0.23);
    background: #FFF;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    margin-top: 0.7em;
}

.qar-attempt-label {
    flex: 0 0 auto;
    font-weight: 100;
    color: #031635;
    text-decoration: none;
    white-space: nowrap;
}

.qar-attempt-label:hover,
.qar-attempt-label:focus {
    text-decoration: underline;
}

/* Same look as .qar-attempt-label but for plain (non-link) text — used for
   the student name in section 2's per-quiz detail popup. */
.qar-attempt-name {
    flex: 0 0 auto;
    font-weight: 400;
    color: #031635;
    white-space: break-spaces;
    width: min-content;
    min-width: 6em;
}

.qar-attempt-meta-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    text-align: center;
}

.qar-attempt-meta-value {
    font-weight: 400;
    font-size: 0.85em;
    line-height: 1.25em;
    padding-top:2px;
    color: #0060AC;
    white-space: break-spaces;
}

.qar-attempt-meta-value.timefinish,
.qar-attempt-meta-value.timestart {
    font-weight: 100;
    font-size: 0.8em;
    color: #008EFF;
}
span.qar-attempt-meta-value.qar-duration-short{
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.3em;
    margin-bottom: -0.2em;
}

.qar-attempt-meta-label {
    font-size: 0.72em;
    color: #777;
    white-space: nowrap;
}

/* ── Student-match list pagination ───────────────────────────────────── */
.qar-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    margin-top: 0.85em;
    padding-top: 0.75em;
    border-top: 1px solid #e1e5f0;
}

.qar-pagination-summary {
    color: #777;
    font-size: 0.88em;
}

.qar-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.qar-page-btn {
    min-width: 2em;
    height: 2em;
    padding: 0 0.4em;
    border: 1px solid #cdd3e0;
    border-radius: 6px;
    background: #fff;
    color: var(--dashboard_secendary_color, #253A8F);
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.qar-page-btn:hover:not(:disabled) {
    background-color: rgb(220, 228, 248);
}

.qar-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qar-page-current {
    background-color: var(--dashboard_main_color, #253A8F);
    border-color: var(--dashboard_main_color, #253A8F);
    color: #fff;
}

/* ── Quiz-attempt bottom sheet ────────────────────────────────────────── */
.qar-quiz-modal[hidden] {
    display: none;
}

.qar-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.qar-quiz-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 45, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.qar-quiz-modal-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    padding: 1em 1.1em calc(1.25em + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.qar-quiz-modal-open .qar-quiz-modal-backdrop {
    opacity: 1;
}

.qar-quiz-modal-open .qar-quiz-modal-sheet {
    transform: translateY(0);
}

.qar-modal-open-lock {
    overflow: hidden;
}

/* Theme-wide floating widgets that would otherwise sit on top of (or peek
   out from behind) the open bottom sheet. */
.qar-modal-open-lock .btn_feedback_wrap,
.qar-modal-open-lock .scrollToHome,
.qar-modal-open-lock #ccnSettingsMenu {
    display: none !important;
}

.qar-quiz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.75em;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fbf9f9;
    padding: 0 0.3em;
}

.qar-quiz-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    min-width: 0;
}
span.qar-quiz-modal-tags.qsr-course-tags {
    padding-bottom: 1em;
}
.qar-quiz-modal-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--dashboard_secendary_color, #253A8F);
}

.qar-quiz-modal-tags:empty {
    display: none;
}

.qar-quiz-modal-close {
    border: none;
    background: none;
    font-size: 1.4em;
    line-height: 1;
    color: #777;
    cursor: pointer;
    padding: 0.1em 0.3em;
    background: #E5E9EB;
    border-radius: 50%;
}

.qar-quiz-modal-student {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    margin-bottom: 1em;
    padding-bottom: 0.05em;
    border-bottom: 0px solid #e1e5f0;
}

.qar-quiz-detail-student-label {
    font-size: 0.8em;
    color: #777;
}

.qar-quiz-detail-student-value {
    font-weight: 400;
    color: #2c2c2c;
}

.qar-expand-icon {
    font-size: 0.85em;
    text-align: center !important;
    color: var(--dashboard_main_color, #253A8F);
    transition: transform 0.3s;
    user-select: none;
}

/* ── Desktop-only flat search table ───────────────────────────────────
   Hidden below the tablet breakpoint — mobile always shows the card UI
   instead (see .qar-mobile-tabs / .qar-quiz-card-list above). ────────── */
.qar-desktop-only {
    display: none;
}

.qar-report-title {
    display: none;
}

@media screen and (min-width: 769px) {
    .qar-desktop-only {
        display: block;
        margin-top: 0.5em;
    }

    .qar-report-title {
        display: block;
        margin: 0 0 0.75em;
        color: #0060AC;
        text-align: right;
        font-size: 1.6em;
        font-style: normal;
        font-weight: 700;
        line-height: 2em; 
    }

    /* Section 1's own mobile card UI only — scoped to .qar-wrapper so
       section 2's identically-named .qar-quiz-card-list (inside .qsr-wrapper
       course cards) is entirely unaffected. */
    .qar-wrapper .qar-student-list-wrapper,
    .qar-wrapper .qar-quiz-card-list {
        display: none;
    }

    /* Shared by both sections: whenever a mobile-only "no results" message is
       set, the desktop table already shows its own empty-state row instead. */
    .qar-alert-mobile-only {
        display: none;
    }
}

.qar-desktop-table-scroll {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(70, 70, 70, 0.12);
    -webkit-overflow-scrolling: touch;
}

/* table-layout: fixed makes the browser size columns from the header row's
   widths alone (see the .qar-desktop-num / :last-child rules below), ignoring
   cell content entirely — combined with width: 100% and no min-width, the
   table can never exceed its container's width, so .qar-desktop-table-scroll
   below never actually has anything to scroll. Any cell whose real content
   doesn't fit its column is handled by the ellipsis rule further down. */
.qar-desktop-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #fff;
}

.qar-desktop-table thead th {
    background-color: #1A2B4B;
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
    padding: 0.5em 0.75em;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}

.qar-desktop-table thead th.qar-desktop-num {
    text-align: center;
}

/* Wide, fixed-width columns (attempt counts, grade) — wide enough for their
   (2-word) header labels ("משך ממוצע", "ציון ממוצע", "סך נסיונות") to fit on
   one line without wrapping or ellipsis-clipping. The remaining
   (unspecified-width) text columns share whatever space is left after these
   plus qar-desktop-dept/qar-desktop-category below — see the table-layout:
   fixed note above. Only the header row's widths matter for column sizing,
   but set on both head and body for clarity. */
.qar-desktop-table th.qar-desktop-num,
.qar-desktop-table td.qar-desktop-num {
    width: 9em;
}

/* Student ID number column (section 1 only) — fixed digits, doesn't need to
   compete with course/quiz names for the flexible remaining space. */
.qar-desktop-table th.qar-desktop-id,
.qar-desktop-table td.qar-desktop-id {
    width: 7em;
}

/* Department column (section 2 only) — short values (e.g. "אגף"), doesn't
   need to compete with course/quiz names for the flexible remaining space. */
.qar-desktop-table th.qar-desktop-dept,
.qar-desktop-table td.qar-desktop-dept {
    width: 6.5em;
}

/* Knowledge-area/category column (section 2) — short-ish values, same
   reasoning as qar-desktop-dept above. Section 1 uses the wider
   qar-desktop-category-lg variant below instead. */
.qar-desktop-table th.qar-desktop-category,
.qar-desktop-table td.qar-desktop-category {
    width: 8.5em;
}

/* Knowledge-area/category column (section 1 only) — given more room than
   qar-desktop-category above, at the expense of the now-narrower
   qar-desktop-name columns next to it. */
.qar-desktop-table th.qar-desktop-category-lg,
.qar-desktop-table td.qar-desktop-category-lg {
    width: 6.5em;
}

/* Student first/last name columns (section 1 only) — typically short single
   words, freed up to give qar-desktop-category-lg more room. */
.qar-desktop-table th.qar-desktop-name,
.qar-desktop-table td.qar-desktop-name {
    width: 8.5em;
}

/* The trailing "details" toggle-button column — wider than a plain numeric
   column since it holds a button with an icon + label. */
.qar-desktop-table th:last-child,
.qar-desktop-table td:last-child {
    width: 6.5em;
}

.qar-desktop-table tbody td {
    padding: 0.4em 0.75em;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eceef2;
    background-color: #fff;
}

.qar-desktop-row:hover td {
    background-color: rgb(220, 228, 248);
}

.qar-desktop-table tbody td a {
    color: inherit;
    text-decoration: underline;
}

.qar-desktop-num {
    text-align: center;
}

.qar-desktop-attempts {
    color: #0060AC;
    font-weight: 700;
}

/* ── Desktop table empty state (no search yet, or 0 matches) ─────────── */
.qar-desktop-empty-row td {
    white-space: normal;
    border-bottom: none;
}

.qar-desktop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5em;
    padding: 3em 1.5em;
}

.qar-desktop-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background-color: #eef4fc;
    color: #253A8F;
    margin-bottom: 0.3em;
}

.qar-desktop-empty-icon svg {
    width: 1.6em;
    height: 1.6em;
}

.qar-desktop-empty-title {
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
    color: #1A2B4B;
}

.qar-desktop-empty-desc {
    margin: 0;
    max-width: 39em;
    color: #6b7280;
    font-size: 0.92em;
}

.qar-desktop-empty-clear {
    margin-top: 0.4em;
    padding: 0.55em 1.4em;
    background-color: #fff;
    border: 1px solid #d5dae3;
    border-radius: 8px;
    color: #1A2B4B;
    font-weight: 100;
    font-size: 0.92em;
    cursor: pointer;
    transition: background-color 0.15s;
}

.qar-desktop-empty-clear:hover,
.qar-desktop-empty-clear:focus {
    background-color: #f2f4f8;
}

.qar-desktop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 1em;
    background-color: #517ADB;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 100;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, opacity 0.15s;
}

.qar-desktop-toggle:hover,
.qar-desktop-toggle:focus {
    background-color: #1b2d75;
    opacity: 0.92;
}

.qar-desktop-toggle .qar-expand-icon {
    display: none;
}

.qar-desktop-toggle.qar-expanded .qar-expand-icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-size: 1.4em;
    line-height: 0.5em;
    margin-bottom: 0.7em;
}

/* Hide the <tr> entirely when collapsed so it takes zero table-row height. */
.qar-desktop-sub-row {
    display: none;
}

.qar-desktop-sub-row.qar-sub-visible {
    display: table-row;
}

.qar-desktop-sub-cell {
    padding: 0;
    border: none;
    background-color: #f4f7fd;
}

/* The inner div animates height 0 → computed, same as the mobile sheets. */
.qar-desktop-sub-container {
    overflow: hidden;
    height: 0;
    transition: height 0.5s linear;
}

.qar-desktop-sub-inner {
    padding: 0.75em 1em;
}

.qar-desktop-attempts-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    border: 1px solid rgba(197, 198, 207, 0.23);
    background: #FFF;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}

.qar-desktop-attempts-table thead th {
    background-color: #517ADB;
    color: #fff;
    font-weight: 700;
    font-size: 0.85em;
    padding: 0.5em 1em;
    text-align: right;
    white-space: nowrap;
}

.qar-desktop-attempts-table thead th:first-child {
        border-top-left-radius: 0;
    border-top-right-radius: 0.6em;
}

.qar-desktop-attempts-table thead th:last-child {
        border-top-left-radius: 0.6em;
    border-top-right-radius: 0;
}

.qar-desktop-attempts-table tbody td {
    padding: 0.5em 1em;
    font-size: 0.88em;
    background-color: #fff;
    border-bottom: 1px solid #eceef2;
    white-space: nowrap;
}

.qar-desktop-attempts-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Sortable table headers ───────────────────────────────────────────
   Shared by the main desktop tables (result.mustache / summary.mustache)
   and the nested per-row tables (desktop_attempts.mustache /
   desktop_quiz_students.mustache) — see amd/src/report.js and
   amd/src/filters.js's applySortIndicators()/nextSortDir(). ─────────── */
.qar-desktop-table thead th.qar-sort-th,
.qar-desktop-attempts-table thead th.qar-sort-th {
    padding: 0;
}

.qar-sort-btn {
    display: flex;
    align-items: center;
    gap: 0.35em;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    white-space: inherit;
    cursor: pointer;
}

.qar-desktop-table .qar-sort-btn {
    padding: 0.5em 0.75em;
}

.qar-desktop-attempts-table .qar-sort-btn {
    padding: 0.5em 1em;
}

.qar-desktop-table thead th.qar-desktop-num .qar-sort-btn {
    justify-content: center;
}

.qar-sort-btn:hover,
.qar-sort-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}

.qar-sort-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.qar-sort-icon {
    display: inline-block;
    line-height: 1;
    font-size: 0.75em;
}

.qar-sort-icon::after {
    content: '⇅';
    opacity: 0.55;
}

.qar-sort-th[aria-sort="ascending"] .qar-sort-icon::after {
    content: '▲';
    opacity: 1;
}

.qar-sort-th[aria-sort="descending"] .qar-sort-icon::after {
    content: '▼';
    opacity: 1;
}

/* ── AJAX loading spinner ───────────────────────────────────────────── */
.qar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 0;
}

.qar-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(37, 58, 143, 0.2);
    border-top-color: var(--dashboard_main_color, #253A8F);
    border-radius: 50%;
    animation: qar-spin 0.7s linear infinite;
}

@keyframes qar-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .qar-mobile-tabs {
        display: flex;
        gap: 0.5em;
        margin-bottom: 0.75em;
    }

    /* Only the active panel is shown; both are always in the DOM so
       switching tabs never re-fetches or resets either section's state. */
    .qar-mobile-panel {
        display: none;
    }

    .qar-mobile-panel-active {
        display: block;
    }

    /* Section 1's search form and section 2's filter form get the same
       white bordered card look as the panel's own content area. */
    .qar-search-area,
    .qsr-filter-area {
        background: #fff;
        border: 1px solid #cdd3e0;
        border-radius: 10px;
        padding: 1em;
    }

    .qar-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .qar-input {
        max-width: 100%;
    }

    .qar-form-actions {
        flex-direction: row;
        align-items: stretch;
    }

    .qar-btn-search,
    .qar-btn-clear {
        flex: 1 1 0;
        width: auto;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Section 2 — department / knowledge-area / course / quiz summary report.
   Independent wrapper (.qsr-wrapper, not .qar-wrapper — see amd/src/filters.js
   for why) but deliberately reuses qar-* classes directly in the markup for
   buttons / alerts / spinner / table / expand-icon / sub-row animation, so
   the two sections look identical without duplicating that CSS.
   ══════════════════════════════════════════════════════════════════════ */

.qsr-wrapper {
    font-family: inherit;
    color: #2c2c2c;
    direction: rtl;
    text-align: right;
    margin-top: 2em;
}

.qsr-section-title {
    margin: 0 0 0.75em;
    color: #0060AC;
    text-align: right;
    font-size: 1.6em;
    font-style: normal;
    font-weight: 700;
    line-height: 2em; 
}

.mobiletheme .qar-mobile-panel h3.qsr-section-title {
    display: none;
}

.qsr-filter-area {
    margin-bottom: 1.5em;
}

.qsr-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6em;
}

.qsr-field {
    /* height: auto; */
    min-width: 0;
}

.qsr-select {
    width: 100%;
    min-width: 0;
}

.qsr-select:disabled {
    background-color: #f2f3f6;
    cursor: not-allowed;
}

/* Desktop only: fix each filter field to a constant width so switching the
   selected option (e.g. a longer/shorter knowledge-area name) doesn't
   resize the field and shift the rest of the row. Mobile already stacks
   fields full-width via the max-width: 768px block below, so it's unaffected. */
@media screen and (min-width: 769px) {
    .qsr-field {
        flex: 0 0 200px;
        width: 200px;
    }
}

.qsr-results {
    margin-top: 0.5em;
}

.qar-desktop-empty-clear {
    border: 1px solid var(--dashboard_main_color, #253A8F);
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: background-color 0.15s, color 0.15s;
}

/* Section 2's own desktop flat table (.qar-desktop-only, shared rule above)
   replaces the course-card list on desktop — mobile keeps the cards, unchanged.
   Its pager (.qsr-course-pagination) is a sibling of the <ul>, not hidden by
   the same selector, and must be hidden separately — the desktop table has
   its own independent pager inside .qar-desktop-only (see
   report_service::get_summary_desktop_rows()), so showing both at once would
   duplicate the pagination controls. */
@media screen and (min-width: 769px) {
    .qsr-wrapper .qsr-course-list,
    .qsr-wrapper .qsr-course-pagination {
        display: none;
    }
}

/* ── Section 2's desktop student-detail sub-table (second part) ───────────
   Heading shown above the nested student table when a desktop row expands
   — see desktop_quiz_students.mustache. */
.qsr-desktop-detail-heading {
    font-weight: 700;
    color: var(--dashboard_secendary_color, #253A8F);
    padding: 0 0 0.5em;
}

/* ── "Load more" pagination (per-quiz detail popup's student list) ─────── */
.qsr-load-more-row {
    display: flex;
    justify-content: center;
    padding: 0.9em 0;
    background-color: #fff;
}

.qsr-detail-list .qsr-load-more-row {
    background-color: #f4f7fd;
}

@media screen and (max-width: 768px) {
    .qsr-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .qsr-field {
        min-width: unset;
    }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    .qar-search-area {
        display: none;
    }

    .qar-student-sub-container {
        height: auto !important;
        overflow: visible;
    }
}