/* Author tools: editors, reports, dashboard and class additions (kept apart from app.css). */

/* Save indicator */
.qed__cloud--dirty { color: #d97706; }
.qed__cloud--failed { color: var(--danger-ink); }

/* Publish checks */
.pubissues { align-items: flex-start; margin: 8px 18px 0; }
.pubissues--warn { background: var(--tint-info); color: var(--brand-ink); border-color: var(--info-line); }
.pubissues__list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.qed > .qed__banner { margin: 8px 18px 0; }

/* Course editor: the outline first, the settings folded under it */
.qed--course .qed__body { grid-template-columns: 300px 1fr; }
.qed__list > * { min-width: 0; }
.qed__setting, .qed__setting--inline { min-width: 0; }
.qed__setting .fld__input, .qed__setting .fld__textarea, .qed__setting .qe__setting-select { width: 100%; max-width: 100%; box-sizing: border-box; }
.qed__setting--inline { flex-wrap: wrap; }
.cedit__outline { display: flex; flex-direction: column; gap: 8px; }
.cedit__settings { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.cedit__settings-head { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.cedit__settings-head::-webkit-details-marker { display: none; }
.cedit__settings-head::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.cedit__settings:not([open]) .cedit__settings-head::after { transform: rotate(-90deg); }
.cedit__settings .cedit__banner { margin-top: 10px; }
.path__chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.qed__item .confirm { position: absolute; right: 6px; top: 6px; z-index: 2; box-shadow: 0 6px 18px rgba(17, 17, 40, .12); }
.qed__item { position: relative; }

/* Empty text blocks show a hint that is never stored */
.rte__area:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }

/* Lesson blocks that link a quiz, an assignment or a download */
.blk__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.blk__link { flex: 1; min-width: 200px; }
.blk__hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.blk__url--readonly { display: flex; align-items: center; background: var(--surface-2); color: var(--ink-2); }
.lblock { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); margin: 12px 0; flex-wrap: wrap; }
.lblock--empty { color: var(--muted); }
.lblock__icon { font-size: 22px; }
.lblock__body { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.lblock__kind { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lblock__title { font-weight: 700; }

/* Quiz editor: question menu and result screen */
.qed__item-menu { position: relative; }
.qed__more { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 0 4px; font-size: 16px; line-height: 1; border-radius: 6px; }
.qed__more:hover, .qed__more[aria-expanded="true"] { background: var(--tint-brand); color: var(--brand-ink); }
.qmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 61; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(17, 17, 40, .14); padding: 4px; display: flex; flex-direction: column; }
.qmenu__item { border: none; background: none; text-align: left; padding: 8px 10px; font-size: 13px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.qmenu__item:hover, .qmenu__item:focus { background: var(--surface-2); outline: none; }
.qmenu__item--danger { color: var(--danger-ink); }
.qmenu .confirm { margin: 4px; }
.qed__result { cursor: pointer; text-align: left; width: 100%; font: inherit; }
.qed__result:hover { border-color: var(--tint-brand-line); }
.qed__result--open { border-color: var(--brand); }
.qed__resultedit { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.qed__resultedit label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; }
.qed__nomatch { margin: 4px 0; font-size: 12.5px; color: var(--muted); }

/* Phone and tablet: every editor stacks its panels and the top bar wraps, so Publish stays reachable */
@media (max-width: 800px) {
    .qed { overflow-y: auto; }
    .qed__top { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .qed__top-left, .qed__top-right { flex: 1 1 auto; }
    .qed__top-mid { order: 3; flex: 1 1 100%; padding: 4px 0; }
    .qed__top-right { flex-wrap: wrap; justify-content: flex-start; }
    .qed__title { width: 100%; text-align: left; }
    .qed__body, .qed--course .qed__body { display: block; overflow: visible; }
    .qed__list { display: flex; border-right: none; border-bottom: 1px solid var(--line); overflow: visible; }
    .qed__main { overflow: visible; padding: 14px 12px 40px; }
    .pubissues, .qed > .qed__banner { margin: 8px 12px 0; }
}

/* Reports overview and charts */
.repover { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.repover__card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); color: inherit; text-decoration: none; }
.repover__card:hover { border-color: var(--tint-brand-line); box-shadow: 0 6px 18px rgba(17, 17, 40, .06); }
.repover__icon { font-size: 22px; }
.repover__title { font-weight: 700; }
.repover__text { font-size: 13px; color: var(--muted); }
.repnote { font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; }
.earn__axis { stroke: var(--line-strong); stroke-width: 1; }

/* Course manage: learners and review replies */
.manage__enrol { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.manage__enrol .fld__input { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; }
.manage__progress { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.manage__progress span { display: block; height: 100%; background: var(--brand); }
.reviewreply { margin: 8px 0 0 16px; padding: 8px 12px; border-left: 3px solid var(--tint-brand-line); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 13.5px; }
.reviewreply__who { font-size: 12px; font-weight: 700; color: var(--brand-ink); display: block; margin-bottom: 2px; }
.reviewreply__form { display: grid; gap: 6px; margin-top: 8px; }

/* Class discussion */
.clsdisc { display: grid; gap: 10px; }
.clsdisc__compose { display: flex; gap: 8px; align-items: flex-start; }
.clsdisc__compose .fld__textarea { flex: 1; }
.clsdisc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.clsdisc__post { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.clsdisc__head { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.clsdisc__head b { color: var(--ink); }
.clsdisc__body { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }

/* Grading page */
.grade__head { display: flex; flex-direction: column; min-width: 0; }
.grade__title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade__sub { font-size: 12px; color: var(--muted); }
.grade__main { padding: 0; max-width: 880px; }
.grade__main h2 { margin: 0; font-size: 18px; }
.grade__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.admintable__row--muted td { opacity: .6; }

/* Author dashboard */
.acard__caption { font-size: 12px; color: var(--muted); }
.acard__note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.atoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.atoggle__btn { border: none; background: var(--surface); padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.atoggle__btn--on { background: var(--tint-brand); color: var(--brand-ink); }
.atable__empty { text-align: center; color: var(--muted); padding: 18px 8px; }

/* Course editor: language versions */
.langs__intro, .langs__hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.langs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.langs__item { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; }
.langs__item--current { border-color: var(--tint-brand-line); background: var(--surface-2); }
.langs__name { font-weight: 700; color: var(--ink); }
.langs__item .qed__status { padding: 2px 8px; font-size: 11px; }
.langs__tag { font-size: 11px; color: var(--muted); }
.langs__open { margin-left: auto; font-size: 12px; }
.langs__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.langs__remaining, .langs__leave { align-self: flex-start; }

/* AI translation progress: fixed at the bottom of the screen, outside the editor that is locked meanwhile */
.trrun { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; box-sizing: border-box;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 40px rgba(17, 17, 40, .18); display: grid; gap: 10px; font-size: 13px; }
.trrun__head { display: flex; align-items: center; gap: 10px; }
.trrun__head strong { flex: 1; min-width: 0; }
.trrun__spinner { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--tint-brand-line); border-top-color: var(--brand); animation: qedSpin .8s linear infinite; }
.trrun__bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.trrun__bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.trrun__sub { font-size: 12px; font-weight: 700; color: var(--warn-ink); }
.trrun__failures { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trrun__failures li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--tint-warn); color: var(--warn-ink); font-size: 12px; }
.trrun__failures li span { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .trrun__spinner { animation: none; } .trrun__bar span { transition: none; } }
@media (max-width: 600px) { .trrun { right: 16px; left: 16px; bottom: 16px; width: auto; } }