// Thinkera Academy: the instructor's workspace. A dark sidebar at the inline start (right in Arabic), a slim white
// top bar, and a light canvas for the page. Logical properties throughout, so Arabic and English mirror each other.
// Every target is at least 44px; nothing depends on colour alone (active items also carry a bar and weight).

$tkt-side-w: 272px;
$tkt-side-bg: #0A1628;
$tkt-side-ink: #C9D5E6;
$tkt-side-muted: #8397B5;
$tkt-side-hover: rgba(255, 255, 255, .06);
$tkt-side-active: rgba(255, 255, 255, .10);
$tkt-canvas: #F3F6FB;
$tkt-line: #E3E9F2;
$tkt-teal-ink: #5EE6CF;

body.tk-teach {
    background: $tkt-canvas;
    color: #1F2A3C;

    // Moodle chrome the workspace replaces
    .navbar.fixed-top, .drawer-toggles, #page-footer, .btn-footer-popover, nav.breadcrumb, .breadcrumb,
    .tool_dataprivacy, .helplink-mobileapp, .usermenu { display: none !important; }
    #page-wrapper { min-height: 100vh; }
    #page { margin-block: 0; padding: 0; }
}

// ------------------------------------------------------------------------------------------------ the sidebar
.tkt-side {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1040;
    width: $tkt-side-w; display: flex; flex-direction: column;
    background: $tkt-side-bg; color: $tkt-side-ink;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
    transition: transform .2s ease;

    a { color: inherit; text-decoration: none; }
    :focus-visible { outline: 2px solid $tkt-teal-ink; outline-offset: 2px; }

    @include media-breakpoint-down(lg) {
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
        transform: translateX(-100%);
        [dir="rtl"] & { transform: translateX(100%); }
        body.tkt-menu-open & { transform: none; }
    }
}
.tkt-side-top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 1rem; }
.tkt-brand {
    display: flex; align-items: center; gap: .6rem; min-height: 44px;
    img { height: 30px; width: auto; }
}
.tkt-brand-tag {
    padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: rgba(10, 191, 163, .16); color: $tkt-teal-ink;
}
.tkt-side-close {
    display: none; width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: transparent; color: $tkt-side-ink;
    &:hover { background: $tkt-side-hover; }
    @include media-breakpoint-down(lg) { display: grid; place-items: center; }
}

.tkt-nav, .tkt-courses-nav { padding: 0 .75rem; ul { list-style: none; margin: 0; padding: 0; } }
.tkt-nav-link, .tkt-cnav-link {
    position: relative; display: flex; align-items: center; gap: .75rem;
    min-height: 44px; padding: .5rem .75rem; border-radius: 12px; font-weight: 500;
    &:hover { background: $tkt-side-hover; color: #fff; }
    &.is-active { background: $tkt-side-active; color: #fff; font-weight: 600; }
    &.is-active::before {
        content: ""; position: absolute; inset-inline-start: -.75rem; inset-block: .55rem;
        width: 3px; border-radius: 0 3px 3px 0; background: $tkt-teal-ink;
    }
}
.tkt-nav-icon { display: grid; place-items: center; width: 24px; flex: none; color: $tkt-side-muted; }
.tkt-nav-link.is-active .tkt-nav-icon, .tkt-nav-link:hover .tkt-nav-icon { color: $tkt-teal-ink; }
.tkt-nav-label { flex: 1; min-width: 0; }
.tkt-badge {
    min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px;
    display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700; line-height: 1;
    background: #E0A542; color: $tkt-side-bg;
    &.is-live { background: #0ABFA3; color: $tkt-side-bg; animation: tkt-pulse 2s ease-out infinite; }
}
@keyframes tkt-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 191, 163, .5); } 100% { box-shadow: 0 0 0 8px rgba(10, 191, 163, 0); } }

.tkt-side-h {
    margin: 1.5rem .75rem .5rem; font-size: .78rem; font-weight: 600; letter-spacing: 0;
    color: $tkt-side-muted;
}
.tkt-cnav-initial {
    flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: .85rem;
}
.tkt-cnav-link.is-active .tkt-cnav-initial { background: #426EB5; }
.tkt-cnav-name {
    flex: 1; min-width: 0; font-size: .92rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tkt-tools {
    margin: .25rem 0 .5rem !important; padding-inline-start: 1.6rem !important;
    border-inline-start: 1px solid rgba(255, 255, 255, .1); margin-inline-start: 1.65rem !important;
}
.tkt-tool {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 40px; padding: .35rem .75rem; border-radius: 10px; font-size: .9rem; color: #AFC0D8 !important;
    &:hover { background: $tkt-side-hover; color: #fff !important; }
    &.is-active { background: $tkt-side-active; color: #fff !important; font-weight: 600; }
}

.tkt-me { margin-top: auto; padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); position: sticky; bottom: 0; background: $tkt-side-bg; }
.tkt-me-btn {
    width: 100%; display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .45rem .6rem;
    border: 0; border-radius: 12px; background: transparent; color: $tkt-side-ink; text-align: start;
    &:hover { background: $tkt-side-hover; }
    img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
}
.tkt-me-initial {
    width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: #426EB5; color: #fff; font-weight: 700;
}
.tkt-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3;
    strong { color: #fff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    span { font-size: .76rem; color: $tkt-side-muted; } }
.tkt-me-caret { flex: none; color: $tkt-side-muted; }
.tkt-me-menu {
    width: calc(#{$tkt-side-w} - 1.5rem); padding: .4rem; border-radius: 14px; border: 1px solid $tkt-line;
    box-shadow: 0 16px 40px rgba(15, 27, 45, .18);
    .dropdown-item { border-radius: 9px; min-height: 42px; display: flex; align-items: center; color: $tk-ink !important; }
    .tkt-me-out { color: $tk-bad !important; }
}

.tkt-scrim {
    display: none;
    @include media-breakpoint-down(lg) {
        body.tkt-menu-open & { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(10, 22, 40, .45); }
    }
}

// ------------------------------------------------------------------------------------------------ top bar and canvas
.tkt-main {
    min-height: 100vh; display: flex; flex-direction: column;
    @include media-breakpoint-up(lg) { margin-inline-start: $tkt-side-w !important; }
}
.tkt-top {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .5rem 1rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid $tkt-line;
    @include media-breakpoint-up(lg) { padding: .5rem 2rem; }
}
.tkt-menu-btn {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    border: 1px solid $tkt-line; border-radius: 12px; background: #fff; color: $tk-ink;
    @include media-breakpoint-up(lg) { display: none; }
}
.tkt-top-brand img { height: 26px; width: auto; @include media-breakpoint-up(lg) { display: none; } }
.tkt-crumb {
    min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-decoration: none !important;
    .tkt-crumb-label { font-size: .75rem; color: $tk-muted; }
    .tkt-crumb-name { font-weight: 700; color: $tk-ink; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    &:hover .tkt-crumb-name { color: $tk-royal; }
}
.tkt-top-tools { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.tkt-editswitch {
    .editmode-switch-form { margin: 0; }
    label { font-size: .85rem; font-weight: 600; color: $tk-ink; }
    .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
    .form-check-input:checked { background-color: #0ABFA3; border-color: #0ABFA3; }
    @include media-breakpoint-down(sm) { label { display: none; } }
}
.tkt-plugins {
    display: flex; align-items: center;
    .popover-region-toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
    .popover-region-toggle:hover { background: $tkt-canvas; }
    .popover-region-container { border-radius: 16px; border-color: $tkt-line; box-shadow: 0 16px 40px rgba(15, 27, 45, .12); }
}

.tkt-canvas { flex: 1; padding: 1.25rem 1rem 2rem; @include media-breakpoint-up(lg) { padding: 1.75rem 2rem 2.5rem; } }
.tkt-canvas > * { max-width: 1280px; margin-inline: auto; }
.tkt-foot { margin-top: 2.5rem; text-align: center; color: $tk-muted; font-size: .8rem; }
.tkt-guide { color: $tk-royal; font-weight: 700; text-decoration: none; }
.tkt-guide:hover, .tkt-guide:focus { text-decoration: underline; }

// Moodle's page header, made a page title
.tkt-pagehead {
    #page-header { margin: 0 0 1rem; padding: 0; }
    .page-context-header { padding: 0; margin: 0; }
    .page-header-headings h1, h1.h2 { font-size: 1.5rem; font-weight: 700; color: $tk-ink; margin: 0; }
    .page-header-image { display: none; }
    .header-actions-container { gap: .5rem; }
}
body.tk-teach#page-local-thinkera-teach .tkt-pagehead,
body.tk-teach#page-course-view-thinkera:not(.editing) .tkt-pagehead { display: none; }
// the workspace's own pages: the sidebar already holds the course's tools, so Moodle's tabs would repeat them
body.tk-teach.path-local-thinkera .tkt-tabs,
body.tk-teach.path-local-thinkera .tertiary-navigation { display: none; }
body.tk-teach #page-content, body.tk-teach #region-main-box, body.tk-teach #region-main { background: transparent; }

// the course's and the activity's tabs
.tkt-tabs {
    margin-bottom: 1.25rem;
    .moremenu { opacity: 1; }
    max-width: 100%;
    .nav-tabs { border-bottom: 1px solid $tkt-line; gap: .25rem; flex-wrap: nowrap; @include media-breakpoint-down(lg) { flex-wrap: wrap; } }
    .nav-link {
        border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
        background: transparent !important; color: $tk-muted; font-weight: 600; padding: .7rem .9rem; min-height: 44px;
        &:hover { color: $tk-royal; }
        &.active, &[aria-current="true"] { color: $tk-royal; border-bottom-color: $tk-royal !important; }
    }
}

// the page: a white sheet for Moodle's screens, nothing for pages drawn by the workspace itself
.tkt-region-main { min-width: 0; }
body.tk-teach:not(.path-local-thinkera):not(#page-course-view-thinkera) .tkt-region-main {
    background: #fff; border: 1px solid $tkt-line; border-radius: 18px; padding: 1.25rem;
    @include media-breakpoint-up(md) { padding: 1.75rem; }
}
body.tk-teach #region-main-box {
    display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr);
    &:has(> .tkt-blocks) { @include media-breakpoint-up(xl) { grid-template-columns: minmax(0, 1fr) 300px; } }
}
.tkt-blocks {
    display: flex; flex-direction: column; gap: 1rem;
    .block { border: 1px solid $tkt-line; border-radius: 16px; background: #fff; }
}

// forms and tables across Moodle's screens, in the workspace's hand
body.tk-teach {
    .form-control, .form-select, .custom-select { min-height: 44px; border-radius: 10px; }
    textarea.form-control { min-height: 0; }
    .mform .fitem { margin-bottom: 1.1rem; }
    .mform fieldset.collapsible { border: 1px solid $tkt-line; border-radius: 14px; padding: .25rem 1rem; margin-bottom: 1rem; background: #fff; }
    .mform legend a, .mform .ftoggler { font-weight: 700; color: $tk-ink; }
    .btn { min-height: 40px; font-weight: 600; }
    .table { --bs-table-bg: transparent; }
    .table > thead th { color: $tk-muted; font-weight: 600; font-size: .85rem; border-bottom-color: $tkt-line; }
    .generaltable { border-radius: 12px; overflow: hidden; }
    h2, .h2 { font-size: 1.3rem; }

    // the course editor
    .course-content .section-item, .course-content li.section { border-radius: 16px; }
    &.editing .course-content .section-item { background: #fff; border: 1px solid $tkt-line; padding: 1rem 1.25rem; margin-bottom: 1rem; }
    .activity-item { border-radius: 12px; }
    .activity-item:hover { background: $tkt-canvas; }
}

@media (prefers-reduced-motion: reduce) {
    .tkt-side { transition: none; }
    .tkt-badge.is-live { animation: none; }
}
@media print {
    .tkt-side, .tkt-top, .tkt-scrim { display: none !important; }
    .tkt-main { margin: 0 !important; }
}