// Thinkera Academy: a course's settings (course/edit.php), for the admin and the instructor. Each section is a card
// with a clear head and a round toggle; labels are plain and strong, fields are roomy; the save bar at the bottom
// reads as the page's one action. Logical properties only, so Arabic and English mirror.

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

body#page-course-edit,
body#page-course-editsection,
body#page-mod-edit {

    // ------------------------------------------------------------------ the heading and «توسيع الكل»
    #region-main h2, .tkt-region-main > h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .25rem; }
    .collapsible-actions { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
    .collapsible-actions .collapseexpand {
        min-height: 38px; padding: .3rem 1rem !important; border-radius: 999px; border: 1px solid $tke-line;
        background: #fff; color: $tk-royal; font-weight: 600; text-decoration: none;
        &:hover { border-color: $tk-royal; background: #E9EFF9; }
    }

    // ------------------------------------------------------------------ each section, a card
    form.mform > fieldset.collapsible {
        background: #fff; border: 1px solid $tke-line !important; border-radius: 18px;
        padding: .35rem 1.25rem !important; margin-bottom: .9rem !important;
        transition: border-color .15s ease, box-shadow .15s ease;
        &:hover { border-color: #C9D3E3 !important; }
        &:focus-within { box-shadow: 0 0 0 3px rgba(17, 57, 114, .08); }

        > .d-flex:first-of-type {                                      // the section's head row
            min-height: 56px; margin: 0 !important; gap: .75rem;
            h3, .h3, .fheader { font-size: 1.08rem !important; font-weight: 700; margin: 0; color: $tk-ink; text-decoration: none; }
            .btn-icon, .icons-collapse-expand {
                width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
                background: #E9EFF9; color: $tk-royal; border: 0;
            }
        }
        > .fcontainer { padding-block: .5rem 1rem; border-top: 1px solid #EEF2F7; }
    }
    form.mform > fieldset.collapsible.collapsed > .d-flex:first-of-type h3 { color: #33445C; }

    // ------------------------------------------------------------------ the rows: label, then the field
    .fitem.row { margin-bottom: 1.1rem !important; align-items: flex-start; }
    .fitem .col-form-label, .fitem label.col-form-label, .fitem > .col-md-3 {
        font-weight: 600; color: $tk-ink; padding-top: .55rem;
    }
    .fitem .col-md-3 .text-danger .icon, .fitem .col-md-3 .form-label-addon .icon { font-size: .7rem; }
    .fitem .col-md-3 .btn-link .icon, .fitem .col-md-3 a.btn .icon { color: #8397B5; }
    .form-control, .form-select, .custom-select, input[type="text"].form-control {
        min-height: 44px; border-radius: 12px; border-color: #C9D3E3; font-size: 1rem;
        &:focus { border-color: $tk-royal; box-shadow: 0 0 0 3px rgba(17, 57, 114, .12); }
    }
    textarea.form-control { min-height: 0; }
    .fdate_time_selector, .fdate_selector { gap: .4rem; flex-wrap: wrap; }
    .fdate_time_selector .form-select, .fdate_selector .form-select { min-width: 0; width: auto; }
    .form-check-input { width: 1.2em; height: 1.2em; accent-color: $tk-royal; }
    .form-autocomplete-selection [role="option"], .form-autocomplete-selection .badge {
        border-radius: 999px; padding: .35rem .75rem; background: #E9EFF9 !important; color: $tk-royal !important;
        border: 0; font-weight: 600;
    }
    .form-text, .form-control-feedback { font-size: .88rem; }
    .form-control-feedback.invalid-feedback { font-weight: 600; }

    // the description editor and the course picture
    .tox-tinymce { border-radius: 14px !important; border-color: #C9D3E3 !important; }
    .filemanager, .filepicker-filelist {
        border-radius: 14px; border-color: #C9D3E3;
        .filemanager-toolbar, .fp-navbar { background: $tke-soft; border-radius: 14px 14px 0 0; }
        .dndupload-message, .fm-empty-container { border-radius: 12px; border-color: #C9D3E3; background: $tke-soft; }
    }

    // «مطلوبة» at the foot of the form
    .fdescription.required { color: $tke-muted; font-size: .88rem; }

    // ------------------------------------------------------------------ the save bar
    #sticky-footer {
        background: rgba(255, 255, 255, .94) !important; backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid $tke-line !important; box-shadow: 0 -8px 24px rgba(15, 27, 45, .06);
        padding-block: .6rem !important;
        .fitem { margin: 0 !important; }
        .btn { min-height: 44px; border-radius: 999px; padding-inline: 1.4rem; font-weight: 700; }
        .btn-primary { box-shadow: 0 2px 6px rgba(17, 57, 114, .2); }
        .btn-secondary { background: #fff; border: 1px solid #C9D3E3; color: $tk-ink; }
    }
    // room at the end of the page so the last section clears the bar
    form.mform { padding-bottom: 5rem; }

    // a phone: labels above their fields, the cards a little tighter
    @include media-breakpoint-down(md) {
        form.mform > fieldset.collapsible { padding: .25rem .9rem !important; border-radius: 16px; }
        .fitem .col-form-label, .fitem > .col-md-3 { padding-top: 0; margin-bottom: .35rem; }
    }
}

// In the instructor's workspace the save bar starts where the sidebar ends, instead of running under it.
body.tk-teach #sticky-footer {
    @include media-breakpoint-up(lg) { inset-inline-start: 272px !important; }
}