// Thinkera Academy: the grades of a course (the grader report), in the same hand as the participants page. The
// table sits in its own card and scrolls sideways inside it, with the students' names held in place; grades line
// up as figures; the overall average reads as the table's footing. Logical properties only.

$tkg-line: #E3E9F2;
$tkg-soft: #F6F9FD;
$tkg-muted: #52627A;

body#page-grade-report-grader-index {

    // ------------------------------------------------------------------ the bar above: report, search, letters
    .tertiary-navigation {
        border: 0 !important; padding-inline: 0 !important; margin-bottom: 1rem;
        .row, .d-flex { gap: .75rem; flex-wrap: wrap; align-items: center; }
        .form-select, .custom-select, .form-control, input[type="text"], input[type="search"] {
            min-height: 42px; border-radius: 12px; border-color: #C9D3E3;
        }
        .btn, .dropdown-toggle { min-height: 42px; border-radius: 999px; }
        .comboboxsearch .btn, .initials-selector .btn {
            background: #fff; border: 1px solid #C9D3E3; color: $tk-ink; font-weight: 600; padding-inline: 1rem;
        }
        .comboboxsearch .btn:hover, .initials-selector .btn:hover { border-color: $tk-royal; color: $tk-royal; }
    }

    // ------------------------------------------------------------------ the table, in its own card
    .gradeparent {
        max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
        background: #fff; border: 1px solid $tkg-line; border-radius: 18px;
        scrollbar-width: thin; scrollbar-color: #C9D3E3 transparent;
    }
    table#user-grades {
        margin: 0; border-collapse: separate; border-spacing: 0; background: #fff;
        --bs-table-striped-bg: transparent; --bs-table-bg: transparent; --bs-table-accent-bg: transparent;

        th, td { border: 0 !important; border-bottom: 1px solid $tkg-line !important; background-color: #fff; vertical-align: middle; }
        tr > * + * { border-inline-start: 1px solid #EEF2F7 !important; }

        // the category row and the item headings
        .topleft, th.category { background: $tkg-soft; color: $tkg-muted; font-weight: 600; font-size: .85rem; }
        tr.heading th { background: $tkg-soft; padding: .7rem .75rem; font-size: .84rem; font-weight: 600; color: $tk-ink; }
        tr.heading th a { color: $tk-ink; text-decoration: none; font-weight: 600; }
        tr.heading th a:hover { color: $tk-royal; text-decoration: underline; }
        tr.heading .icon { color: $tkg-muted; }

        // the students: round picture, name in bold, held in place while the grades scroll
        th.header.user, th.header.ps-3 {
            background: #fff; min-width: 220px; padding: .7rem .9rem; box-shadow: inset -1px 0 0 $tkg-line;
            a { color: $tk-ink; font-weight: 700; text-decoration: none; }
            a:hover { color: $tk-royal; }
            .userpicture, .userinitials { width: 34px !important; height: 34px !important; border-radius: 50%; margin-inline-end: .5rem; }
            .userinitials { display: inline-grid !important; place-items: center; background: #E9EFF9; color: $tk-royal; font-size: .75rem; font-weight: 700; }
        }
        [dir="rtl"] & th.header.user { box-shadow: inset 1px 0 0 $tkg-line; }
        td.userfield { color: $tkg-muted; font-size: .88rem; white-space: nowrap; padding-inline: .9rem; }

        // the grades: figures that line up, a soft wash on the row being read
        td.gradecell, td.grade { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: $tk-ink; padding: .6rem .75rem; min-width: 96px; }
        tr.userrow:hover > td, tr.userrow:hover > th { background-color: $tkg-soft; }
        td .gradevalue, td .gradepass, td .gradefail { font-variant-numeric: tabular-nums; }
        td .gradepass { color: #1E6B35; }
        td .gradefail { color: #8E2A23; }
        td.overridden, td.excluded { background-color: #FFFBF3; }
        .dropdown-toggle, .action-menu .btn { color: $tkg-muted; opacity: .7; }
        tr:hover .dropdown-toggle, tr:hover .action-menu .btn { opacity: 1; }
        .form-control, input.text { min-height: 36px; border-radius: 8px; text-align: center; }

        // the overall average: the table's footing
        tr.avg > *, tr.lastrow > * { background: #EEF3FA !important; font-weight: 700; color: $tk-royal; border-bottom: 0 !important; }
        // Moodle pins this row to the bottom of the window; inside the card that pin is measured against the card
        // and lifts the row over the last student, so here it simply closes the table where it belongs.
        tr.avg, tr.avg > *, tr.lastrow, tr.lastrow > *, tr.pinned > * { position: static !important; bottom: auto !important; }
    }

    // a phone: the card scrolls, the names stay narrower
    @include media-breakpoint-down(md) {
        table#user-grades th.header.user, table#user-grades th.header.ps-3 { min-width: 160px; }
        table#user-grades td.userfield { display: none; }
        table#user-grades th.userfield { display: none; }
    }
}

// the rest of the gradebook's own tables (the student's report, the overview): the same quiet table
body.path-grade-report:not(#page-grade-report-grader-index) {
    table.generaltable, table.user-grade {
        background: #fff; border: 1px solid $tkg-line; border-radius: 18px; overflow: hidden; border-collapse: separate; border-spacing: 0;
        --bs-table-striped-bg: transparent;
        th { background: $tkg-soft; color: $tkg-muted; font-size: .85rem; font-weight: 600; border-bottom: 1px solid $tkg-line; }
        td { border-top: 0; border-bottom: 1px solid $tkg-line; font-variant-numeric: tabular-nums; }
        tr:last-child td { border-bottom: 0; }
    }
    .table-responsive, .user-report-container { max-width: 100%; overflow-x: auto; }
}