// Thinkera Academy: Moodle's own reports (logs, live logs, activity, participation, completion, report builder), in
// the same hand as the participants and grades pages. Filters sit in one card and wrap; each table sits in its own
// card and scrolls sideways inside it; the logs keep their time on one line. Logical properties only.

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

body[id^="page-report-"], body[id^="page-reportbuilder-"] {

    // ------------------------------------------------------------------ the filters: one card, one wrapping row
    form.logselecform, form.participationselectform, .include-activity-selector, .activity-order-selector,
    .activity-section-selector, #region-main form.mform:not(.dataformatselector) > fieldset.collapsible,
    #region-main .report-filters {
        background: #fff; border: 1px solid $tkr-line; border-radius: 16px; padding: .85rem 1rem !important;
    }
    form.logselecform, form.participationselectform {
        display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem;
        > div, > span, > label { margin: 0 !important; }
        label { color: $tkr-muted; font-weight: 600; font-size: .88rem; margin: 0 .25rem !important; }
    }
    .include-activity-selector, .activity-order-selector, .activity-section-selector { display: inline-flex !important; margin: 0 .5rem .75rem 0 !important; }
    form.participationselectform > * { flex: 0 1 auto !important; width: auto !important; display: inline-flex; align-items: center; gap: .4rem; }
    form.participationselectform label { display: inline; }
    #region-main .form-select, #region-main .custom-select, #region-main select {
        min-height: 42px; border-radius: 12px; border-color: #C9D3E3; width: auto; max-width: 100%;
    }
    #region-main input[type="submit"].btn, #region-main button.btn-primary, #region-main .btn-secondary {
        min-height: 42px; border-radius: 999px; padding-inline: 1.25rem; font-weight: 700;
    }

    // ------------------------------------------------------------------ the tables: each in its own card
    .table-responsive, .no-overflow {
        background: #fff; border: 1px solid $tkr-line; border-radius: 18px; overflow-x: auto; max-width: 100%;
        scrollbar-width: thin; scrollbar-color: #C9D3E3 transparent; margin-bottom: 1rem;
    }
    #region-main table.generaltable, #region-main table.flexible, #region-main table.reportbuilder-table {
        margin: 0; --bs-table-striped-bg: transparent; --bs-table-bg: transparent; --bs-table-accent-bg: transparent;
        --bs-table-hover-bg: #{$tkr-soft};
        thead th {
            background: $tkr-soft; color: $tkr-muted; font-size: .82rem; font-weight: 600; white-space: nowrap;
            border-bottom: 1px solid $tkr-line; padding: .75rem .85rem; vertical-align: bottom;
            a { color: $tkr-muted; text-decoration: none; }
            a:hover { color: $tk-royal; }
        }
        tbody > tr > * { padding: .75rem .85rem; border-top: 0; border-bottom: 1px solid $tkr-line; vertical-align: middle; font-size: .92rem; }
        tbody tr:last-child > * { border-bottom: 0; }
        tbody tr:hover > * { background: $tkr-soft; }
        a { text-decoration: none; }
        a:hover { text-decoration: underline; }
        .userpicture, .userinitials { width: 32px !important; height: 32px !important; border-radius: 50%; }
        .badge { border-radius: 999px; padding: .25rem .6rem; font-weight: 600; }
    }

    // the logs: the time on one line, the description with room to read
    &#page-report-log-index, &#page-report-loglive-index {
        #region-main table td.c0, #region-main table th.c0 { white-space: nowrap; font-variant-numeric: tabular-nums; }
        #region-main table td.c1, #region-main table td.c2 { white-space: nowrap; }
        #region-main table td.c6 { min-width: 280px; color: #33445C; }
        #region-main table td.c8 { direction: ltr; text-align: end; font-variant-numeric: tabular-nums; color: $tkr-muted; }
        #region-main table td.c7 { color: $tkr-muted; }
    }

    // the activity report: activity names with their icon, the counts as figures
    table#outlinereport {
        td { font-variant-numeric: tabular-nums; }
        td.activity img, td.c0 img { width: 24px; height: 24px; }
        tr.section td, tr.section th, td.section { background: #EEF3FA; color: $tk-royal; font-weight: 700; }
    }

    // activity completion: the matrix scrolls inside its card, the names stay readable
    table#completion-progress {
        th.completion-header { vertical-align: bottom; }
        tbody th, tbody td:first-child { white-space: nowrap; font-weight: 600; }
        td.completion-progresscell { text-align: center; }
    }

    // ------------------------------------------------------------------ paging, letters and download
    .pagination { gap: 4px; flex-wrap: wrap; }
    .pagination .page-link {
        min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 .55rem;
        border: 1px solid $tkr-line; border-radius: 10px !important; color: $tk-ink; font-weight: 600; font-size: .85rem;
    }
    .pagination .page-item.active .page-link { background: $tk-royal; border-color: $tk-royal; color: #fff; }
    .initialbar { flex-wrap: nowrap !important; align-items: center; gap: .5rem; justify-content: flex-start !important; max-width: 100%; }
    .initialbar .initialbarlabel { color: $tkr-muted; font-weight: 600; font-size: .85rem; white-space: nowrap; }
    .initialbargroups { flex-wrap: nowrap !important; overflow-x: auto; min-width: 0; gap: 8px; justify-content: flex-start !important; }
    .initialbargroups .pagination { flex-wrap: nowrap !important; flex: none; margin: 0; }
    .initialbargroups .page-link { min-width: 28px; height: 28px; border-color: transparent; font-size: .8rem; }
    form.dataformatselector {
        display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem;
        padding: .6rem .9rem; background: $tkr-soft; border: 1px solid $tkr-line; border-radius: 14px;
        label { margin: 0; color: $tkr-muted; font-weight: 600; font-size: .88rem; }
    }

    // a report that has nothing to show yet says so calmly, not as an alarm
    #region-main .box.errorbox, #region-main .alert-danger, #region-main .alert-info, #region-main .alert-warning {
        border-radius: 16px; border: 1px solid $tkr-line; background: #fff; color: #33445C; padding: 1.25rem 1.5rem;
    }
    #region-main .box.errorbox { border-color: #EBC47A; background: #FFFBF3; }

    @include media-breakpoint-down(md) {
        form.logselecform > *, form.participationselectform > * { flex: 1 1 100%; }
        #region-main .form-select, #region-main select { width: 100%; }
    }
}