/**
 * Styles for block_duration_report.
 *
 * Ported from block_quiz_report (same design language, selectors renamed:
 * qar- -> dur-, qsr- -> dsr-) so both blocks look and behave identically:
 *   - RTL-first (dir="rtl" on wrapper, text-align: right)
 *   - Expand/collapse mirrors block_quiz_report: height 0->computed, 0.5s linear
 *   - Exceptional (< 30 min) completions highlighted red via .dur-duration-short
 *   - Responsive horizontal scroll; spinner for AJAX loading state
 *
 * Unlike block_quiz_report there is no bottom-sheet modal (no per-row
 * drill-down is needed — a duration row is already final), so this file has
 * no .qar-quiz-modal equivalent.
 */

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

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

/* ── Mobile tab switcher ─────────────────────────────────────────────
   Two tabs ("Search student" / "Search course") 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. ────── */
.dur-mobile-tabs {
    display: none;
    direction: rtl;
}

.dur-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;
}

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

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

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

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

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

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

.dur-input {
    flex: 1 1 130px;
    max-width: 220px;
    min-width: 0;
    padding: 0.45em 0.75em 0.45em 1.65em;
    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;
}

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

.dur-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;
}

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

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

.dur-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;
}

.dur-btn-clear:hover,
.dur-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. */
.dur-export-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75em;
}

.dur-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;
}

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

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

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

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

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

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

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

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

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

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

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

/* The course-name link nested inside the row's toggle <button> (see
   summary.mustache) — styled to still read as part of the row, not a
   generic blue link, underlining only on hover/focus like every other
   in-row link in this plugin. */
.dsr-course-link {
    color: inherit;
    text-decoration: none;
}

.dsr-course-link:hover,
.dsr-course-link:focus {
    text-decoration: underline;
}

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

.dur-student-result.dur-expanded {
    background-color: #fff;
    color: #031635;
}
.dur-student-result.dur-expanded .dur-expand-icon {
    font-size: 1.85em;
}

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

.dur-student-result-name strong {
    font-weight: 700;
}
.dur-student-result-name {
    font-weight: normal;
}

.dur-student-result-id {
    color: #555;
    direction: ltr;
    white-space: nowrap;
}

.dur-student-result.dur-expanded .dur-student-result-id {
    color: inherit;
}

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

.dsr-course-tag {
    display: inline-block;
    padding: 0.2em 0.9em;
    border: 0;
    border-radius: 20px;
    color: #0060AC;
    font-size: 0.82em;
    font-weight: 100;
    background: #CFEAFF;
    white-space: nowrap;
}

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

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

/* ── Grade / duration badge (course card + per-attempt row) ──────────── */
.dur-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;
}

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

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

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

.dur-grade-badge-sm .dur-grade-value {
    font-size: 0.95em;
}

/* ── Exceptional-completion badge ─────────────────────────────────────── */
.dur-exceptional-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0.9em;
    border-radius: 8px;
    background-color: transparent;
    color: #253A8F;
    font-size: 0.92em;
    font-weight: 100;
    white-space: nowrap;
}

.dur-exceptional-badge.dur-exceptional-yes {
    background-color: transparent;
    color: #dc3545;
}

/* ── Course duration cards (one per completed course) ─────────────────── */
.dur-course-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-top: 0.5em;
}

.dur-course-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);
}

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

.dur-course-card-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.dur-course-card-title {
    display: block;
    font-weight: 700;
    color: var(--dashboard_secendary_color, #253A8F);
    text-decoration: none;
}

.dur-course-card-title:hover,
.dur-course-card-title:focus {
    text-decoration: underline;
}

.dur-course-card-sub {
    color: #6b7280;
    font-size: 0.85em;
}

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

.dur-course-card-count-value {
    font-weight: 700;
    font-size: 1.05em;
    color: #0060AC;
}

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

/* ── Section 1 mobile Level 2 card: student's average duration + status +
   "Details" button (opens the per-course bottom sheet — see .dur-course-modal
   below) — reuses .dur-course-card/.dur-course-card-list for the outer card,
   just with its own row layout since there's no per-item title/info block
   here (unlike the per-course card this replaced). ─────────────────────── */
.dur-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
}

/* Wider than the shared .dur-grade-badge default — both section 1's and
   section 2's Level 2 cards reuse this exact .dur-summary-row/.dur-grade-badge
   markup (see result.mustache / summary.mustache), and both labels
   ("Average learning duration" / "Number completed") wrap onto fewer lines
   at this width. */
.dur-summary-row .dur-grade-badge {
    min-width: 6em;
}

.dur-summary-row .dur-grade-label {
    min-width: 8em;
}

.dur-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;
}

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

/* ── Average-duration summary row (bottom of a course/desktop table) ──── */
.dur-average-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6em;
    padding: 0.7em 1em;
    background-color: #eef4fc;
    border-radius: 8px;
    font-weight: 700;
}

.dur-average-label {
    color: #1A2B4B;
}

.dur-average-value {
    color: #0060AC;
    font-size: 1.1em;
}

.dsr-detail-average-row {
    background-color: #fff;
    border: 1px solid #e1e5f0;
}

/* ── Attempt / student rows (rendered inline inside an expanded course) ── */
.dur-attempt-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* A single row: name, then the meta columns, then the exceptional badge —
   matches the reference design. Scrolls horizontally rather than wrapping
   if a narrow screen can't fit all items. */
.dur-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;
}

.dur-attempt-name {
    flex: 0 0 auto;
    font-weight: 400;
    color: #031635;
    white-space: break-spaces;
    width: min-content;
    min-width: 6em;
    text-decoration: none;
    text-align: center;
}

/* Only takes effect where this is a real link (the course-name row in the
   Section 1 bottom sheet — see .dur-course-modal below); harmless no-op on
   the plain-text (non-interactive) uses elsewhere. */
.dur-attempt-name:hover,
.dur-attempt-name:focus {
    text-decoration: underline;
}

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

.dur-attempt-meta-value {
    font-weight: 700;
    font-size: 0.85em;
    color: var(--dashboard_main_color, #253A8F);
    white-space: break-spaces;
}

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

/* ── Student-match list pagination ───────────────────────────────────── */
.dur-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;
}

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

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

.dur-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;
}

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

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

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

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

/* ── Section 1 mobile Level 3: per-course bottom sheet ─────────────────
   Mirrors block_quiz_report's identical .qar-quiz-modal — a single shared
   modal per .dur-wrapper, populated by amd/src/report.js cloning the
   student's hidden .dur-course-detail-source (rendered inline in
   result.mustache — the data is already on the page, so opening it never
   re-fetches anything) into it. ─────────────────────────────────────── */
.dur-course-modal[hidden] {
    display: none;
}

.dur-course-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

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

.dur-course-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;
}

.dur-course-modal-open .dur-course-modal-backdrop {
    opacity: 1;
}

.dur-course-modal-open .dur-course-modal-sheet {
    transform: translateY(0);
}

.dur-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. */
.dur-modal-open-lock .btn_feedback_wrap,
.dur-modal-open-lock .scrollToHome,
.dur-modal-open-lock #ccnSettingsMenu {
    display: none !important;
}

.dur-course-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 0.8em;
}

.dur-course-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    min-width: 0;
}

.dur-course-modal-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--dashboard_secendary_color, #253A8F);
}

.dur-course-modal-tags:empty {
    display: none;
}

.dur-course-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%;
}

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

.dur-course-modal-student-value {
    font-weight: 400;
    color: #2c2c2c;
}

/* ── Duration highlight ─────────────────────────────────────────────── */
/* Applied by PHP when a completion's duration < report_service::EXCEPTIONAL_SECONDS */
.dur-duration-short {
    color: #dc3545 !important;
    font-weight: 700;
    line-height: 1.1em;
}

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

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

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

    .dur-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 .dur-wrapper so
       section 2's identically-named .dur-course-card-list (inside
       .dsr-wrapper course cards) is entirely unaffected. */
    .dur-wrapper .dur-student-list-wrapper,
    .dur-wrapper .dur-course-card-list,
    .dur-wrapper .dur-average-row {
        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. */
    .dur-alert-mobile-only {
        display: none;
    }
}

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

.dur-desktop-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
}

.dur-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;
    border: none;
}

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

/* ── Sortable table headers (shared by the outer desktop tables and the
   inner per-course/per-student breakdown tables) ─────────────────────── */
.dur-desktop-table thead th.dur-sort-th,
.dur-desktop-attempts-table thead th.dur-sort-th {
    padding: 0;
}

.dur-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;
}

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

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

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

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

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

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

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

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

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

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

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

.dur-desktop-table tbody td a {
    color: #0060AC;
    text-decoration: none;
}

/* Course name column: truncated with an ellipsis instead of stretching the
   table (and forcing horizontal scroll) — the link's own title attribute
   (see result.mustache/summary.mustache) shows the full name on hover. */
.dur-desktop-course-link {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.dur-desktop-table tbody td a:hover,
.dur-desktop-table tbody td a:focus {
    text-decoration: underline;
}

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

.dur-desktop-grade {
    color: #0060AC;
    font-weight: 700;
}

.dur-desktop-average-row td {
    background-color: #eef4fc !important;
    font-weight: 700;
    color: #1A2B4B;
}

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

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

.dur-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;
}

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

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

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

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

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

.dur-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;
}

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

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

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

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

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

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

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

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

.dur-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);
}

.dur-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;
}

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

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

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

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

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

.dur-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: dur-spin 0.7s linear infinite;
}

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

/* ── Responsive ─────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .dur-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. */
    .dur-mobile-panel {
        display: none;
    }

    .dur-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. */
    .dur-search-area,
    .dsr-filter-area {
        background: #fff;
        border: 1px solid #cdd3e0;
        border-radius: 10px;
        padding: 1em;
    }

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

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

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

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

/* ══════════════════════════════════════════════════════════════════════
   Section 2 — department / knowledge-area / course summary report.
   Independent wrapper (.dsr-wrapper, not .dur-wrapper) but deliberately
   reuses dur-* 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.
   ══════════════════════════════════════════════════════════════════════ */

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

.dsr-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 .dur-mobile-panel h3.dsr-section-title {
    display: none;
}

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

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

.dsr-field {
    min-width: 0;
}

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

.dsr-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) {
    .dsr-field {
        flex: 0 0 200px;
        width: 200px;
    }
}

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

.dur-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 (.dur-desktop-only, shared rule above)
   replaces the course-card list on desktop — mobile keeps the cards, unchanged.
   Its pagination (.dsr-course-pagination) is a SIBLING of .dsr-course-list, not
   a child, so it needs its own selector here too — otherwise it stays visible
   alongside the desktop table's own pagination at desktop widths. */
@media screen and (min-width: 769px) {
    .dsr-wrapper .dsr-course-list,
    .dsr-wrapper .dsr-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_course_students.mustache. */
.dsr-desktop-detail-heading {
    font-weight: 700;
    color: var(--dashboard_secendary_color, #253A8F);
    padding: 0 0 0.5em;
}

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

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

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

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

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

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