// Thinkera Academy: a course's participants (user/index.php) and its «ضم المستخدمين» dialog, for the admin and the
// instructor alike. The table sits in its own card and scrolls inside it on a phone; roles and status read as pills;
// the two letter bars become one scrollable row each. Logical properties only, so Arabic and English mirror.

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

body#page-course-view-participants,
body#page-user-index {

    // ------------------------------------------------------------------ heading row: «المستخدمون المنضمون» and the button
    .userlist { display: flex; flex-direction: column; gap: 1rem; }
    .tertiary-navigation, .tertiary-navigation .row { gap: .75rem; align-items: center; }
    .enrolusersbutton .btn, .enrolusersbutton input[type="submit"] {
        min-height: 44px; padding-inline: 1.25rem; border-radius: 999px; font-weight: 700;
    }

    // ------------------------------------------------------------------ filters: one quiet card
    .filter-group {
        background: #fff !important; border: 1px solid $tkp-line !important; border-radius: 16px !important;
        padding: .75rem 1rem !important; margin: 0 !important;
        .filter-row, [data-filterregion="filter"] { background: $tkp-soft; border: 0; border-radius: 12px; padding: .5rem .75rem; }
        .form-select, .custom-select, .form-control { min-height: 40px; border-radius: 10px; }
        .btn { min-height: 40px; border-radius: 999px; font-weight: 600; }
    }

    // ------------------------------------------------------------------ the letter bars: one scrollable row each
    .initialbar {
        flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center; gap: .5rem;
        margin: 0 !important;
        .initialbarlabel { flex: none; margin: 0 !important; color: $tkp-muted; font-size: .85rem; font-weight: 600; white-space: nowrap; }
        .initialbargroups {
            flex: 1; min-width: 0; margin: 0 !important;
            flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 10px;
            overflow-x: auto; padding-block: 2px 6px; scrollbar-width: thin; scrollbar-color: $tkp-line transparent;
        }
        .pagination {
            flex: none; flex-wrap: nowrap !important; gap: 3px; margin: 0 !important;
            padding-inline-end: 10px; border-inline-end: 1px solid $tkp-line;
            &:last-child { border-inline-end: 0; padding-inline-end: 0; }
        }
        .page-item { flex: none; margin: 0; }
        .page-link {
            min-width: 30px; height: 30px; padding: 0 .5rem; display: grid; place-items: center;
            border: 1px solid transparent !important; border-radius: 8px !important;
            background: transparent; color: $tk-ink; font-size: .82rem; font-weight: 600; line-height: 1;
            &:hover { background: $tkp-soft; border-color: $tkp-line !important; }
        }
        .page-item.active .page-link { background: $tk-royal !important; color: #fff; }
    }

    // ------------------------------------------------------------------ the table, in its own card
    [data-region="core_table/dynamic"] {
        background: #fff; border: 1px solid $tkp-line; border-radius: 18px; overflow: hidden; margin-top: .5rem;
        > .initialbar { padding: .75rem 1rem .25rem; }
        > .initialbar + .initialbar { padding-top: .25rem; }
    }
    .table-responsive { overflow-x: auto; margin: 0; }
    table#participants {
        margin: 0; min-width: 720px;
        --bs-table-striped-bg: transparent; --bs-table-hover-bg: #{$tkp-soft};
        --bs-table-bg: transparent; --bs-table-accent-bg: transparent;

        thead th {
            background: $tkp-soft; border-bottom: 1px solid $tkp-line; padding: .8rem .9rem;
            color: $tkp-muted; font-size: .82rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
            a { color: $tkp-muted; text-decoration: none; }
            a:hover { color: $tk-royal; }
            .commands a, .icon { opacity: .55; }
        }
        tbody > tr > * {
            padding: .85rem .9rem; border-bottom: 1px solid $tkp-line; vertical-align: middle; background: transparent;
        }
        tbody tr:last-child > * { border-bottom: 0; }
        tbody tr:hover > * { background: $tkp-soft; }

        // the person: round picture or initials, name in bold
        th.c1 a {
            display: inline-flex !important; align-items: center; gap: .65rem; color: $tk-ink; font-weight: 700; text-decoration: none;
            &:hover { color: $tk-royal; }
        }
        .userinitials, .userpicture {
            width: 38px !important; height: 38px !important; border-radius: 50%; margin: 0 !important; flex: none;
        }
        .userinitials {
            display: inline-grid !important; place-items: center; background: #E9EFF9; color: $tk-royal;
            font-size: .8rem; font-weight: 700;
        }
        td.c2 { color: $tkp-muted; font-size: .9rem; }
        td.c4, td.c5 { color: $tkp-muted; font-size: .88rem; white-space: nowrap; }

        // roles: a pill per role, the pencil quiet beside it
        td.c3 .inplaceeditable {
            display: inline-flex; align-items: center; gap: .35rem;
            > a:first-child, > span:first-child, .quickeditlink {
                display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px;
                background: #E9EFF9; color: $tk-royal; font-weight: 600; font-size: .85rem; text-decoration: none;
            }
            .icon { font-size: .75rem; opacity: .6; margin: 0; }
            .quickeditlink:hover .icon { opacity: 1; }
        }

        // status: a soft pill with a dot, then the quiet actions
        td.c6 > div { display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; }
        td.c6 .badge {
            display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px;
            font-size: .8rem; font-weight: 700;
            &::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
        }
        td.c6 .badge.bg-success { background: #E6F4EA !important; color: #1E6B35 !important; }
        td.c6 .badge.bg-warning, td.c6 .badge.bg-secondary { background: #FBF1DE !important; color: #8A5A10 !important; }
        td.c6 .badge.bg-danger { background: #FBECEA !important; color: #8E2A23 !important; }
        td.c6 a {
            width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: $tkp-muted;
            .icon { margin: 0; }
            &:hover { background: #E9EFF9; color: $tk-royal; }
        }
        .usercheckbox, #select-all-participants { width: 18px; height: 18px; accent-color: $tk-royal; }
    }

    // on a phone: the columns that matter, and the table scrolls inside its card
    @include media-breakpoint-down(md) {
        table#participants { min-width: 560px; }
        table#participants .c4, table#participants .c5 { display: none; }
        .initialbar .initialbarlabel { font-size: .8rem; }
    }

    // ------------------------------------------------------------------ with the selected people…
    #formactionid { min-height: 42px; border-radius: 10px; max-width: 320px; }
    #formactionid:disabled { background: $tkp-soft; }
    [data-region="participant-count"], .userlist > div > p { color: $tkp-muted; margin: 0; }

    // ------------------------------------------------------------------ «ضم المستخدمين»
    .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(15, 27, 45, .22); overflow: hidden; }
    .modal-header { border-bottom: 1px solid $tkp-line; padding: 1.1rem 1.5rem; }
    .modal-title { font-weight: 700; font-size: 1.15rem; }
    .modal-body { padding: 1.25rem 1.5rem; }
    .modal-body h3, .modal-body .h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
    .modal-body .fitem { margin-bottom: 1rem; }
    .modal-body .form-control, .modal-body .form-select, .modal-body .custom-select { min-height: 44px; border-radius: 12px; }
    .modal-body .form-autocomplete-selection [role="option"], .modal-body .badge {
        border-radius: 999px; padding: .35rem .7rem; background: #E9EFF9 !important; color: $tk-royal !important; font-weight: 600;
    }
    .modal-footer { background: $tkp-soft; border-top: 1px solid $tkp-line; padding: .9rem 1.5rem; gap: .5rem; }
    .modal-footer .btn { min-height: 42px; border-radius: 999px; padding-inline: 1.25rem; font-weight: 700; }
}

// On a narrow screen nothing may push the page sideways: the heading row wraps, the letter bars scroll inside
// the card, and the card never grows past its column.
body#page-course-view-participants,
body#page-user-index {
    .tertiary-navigation, .tertiary-navigation > .row, .tertiary-navigation .navitem { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .userlist, .userlist > *, [data-region="core_table/dynamic"], .initialbar { min-width: 0; max-width: 100%; }
    .initialbar { display: flex; }
}