/* Campus Admin content: categories, courses, course detail, course builder, quiz builder (tokens only). */

/* ---------- shared */
.ct-cell { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.ct-cell > * { overflow: hidden; text-overflow: ellipsis; }
.stack.tight { gap: var(--space-2); }
.row.center { justify-content: center; margin-top: var(--space-4); }
.view-switch { margin-bottom: var(--space-3); }
.span-all { grid-column: 1 / -1; }
.text-bad { color: var(--color-danger-text); }
.text-ok { color: var(--color-success-text); }
.dot.warn { width: 8px; height: 8px; background: var(--color-warning); }
.badge.xs { height: 18px; padding: 0 6px; font-size: 11px; }
.btn.xs { height: 26px; width: 26px; padding: 0; }
.sticky-actions { position: sticky; bottom: 0; z-index: 2; background: var(--color-background); padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); }
.status-chips { gap: var(--space-2); }
.status-chips .count { margin-left: 6px; color: var(--color-text-muted); font-weight: 500; }
.stat-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 70px; gap: var(--space-3); align-items: center; }
.stat-row .num { text-align: right; }
.stat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .stat-row { grid-template-columns: 1fr 60px; } .stat-row .progress { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- checks, warnings, confirm */
.checks-box ul { margin-top: 2px; }
.checks-box li { padding: 4px 0; border-bottom: 0; display: block; font-size: var(--font-size-sm); }
.checks-box .link-btn { text-align: left; color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
.warn-list li, .affected li { padding: var(--space-2) 0; font-size: var(--font-size-sm); }
.warn-list li .ic { color: var(--color-warning); flex: none; }
.affected { max-height: 260px; overflow: auto; }

/* ---------- pick dialog */
.ct-pick-list { display: grid; gap: 2px; max-height: 360px; overflow: auto; }
.ct-pick-item { display: flex; gap: var(--space-3); align-items: center; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: none;
  border-radius: var(--radius-md); cursor: pointer; color: var(--color-text); font: inherit; }
.ct-pick-item:hover, .ct-pick-item:focus-visible { background: var(--color-surface-secondary); }
.ct-pick-item .mono { min-width: 76px; }

/* ---------- rich text */
.rich-editor { border: 1px solid var(--color-border-strong); border-radius: var(--d-radius-ctl); background: var(--color-surface); overflow: hidden; }
.rich-editor:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.rich-bar { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px; border-bottom: 1px solid var(--color-divider); background: var(--color-surface-secondary); }
.rich-bar .btn { min-width: 30px; }
.rich-area { padding: var(--space-3) var(--space-4); outline: none; min-height: 140px; }
.rich-area.rows-10 { min-height: 260px; }
.rich-area:empty::before { content: attr(data-placeholder); color: var(--color-text-placeholder); }
.rich-text { line-height: 1.6; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text p { margin: 0 0 var(--space-3); }
.rich-text h3 { font-size: var(--font-size-lg); margin: var(--space-4) 0 var(--space-2); }
.rich-text ul, .rich-text ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.rich-text a { color: var(--color-primary-text); }

/* ---------- uploads, images */
.upload-zone { display: grid; justify-items: center; gap: 4px; padding: var(--space-5); }
.upload-zone.busy { opacity: .6; pointer-events: none; }
.upload-zone.disabled { opacity: .5; cursor: not-allowed; }
.upload-progress { display: grid; gap: 6px; }
.img-preview { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.img-preview img { width: 180px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.img-preview.wide img { width: 100%; max-width: 360px; }
.file-info { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-secondary); flex-wrap: wrap; }
.file-info .grow { min-width: 160px; overflow-wrap: anywhere; }

/* ---------- categories */
.cat-grid { display: grid; gap: var(--d-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-skel { height: 220px; border-radius: var(--d-radius-card); }
.cat-card { display: grid; grid-template-rows: 1fr auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--d-radius-card);
  overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s; }
.cat-card:hover { box-shadow: var(--shadow-3); border-color: var(--color-border-strong); }
.cat-card.inactive .cat-media, .cat-card.deleted { opacity: .65; }
.cat-main { display: grid; grid-template-rows: auto 1fr; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.cat-media { aspect-ratio: 16 / 6; background: color-mix(in srgb, var(--cat) 14%, var(--color-surface)); display: grid; place-items: center; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-ph { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--color-text-on-primary); background: var(--cat); }
.cat-body { padding: var(--space-4) var(--space-4) var(--space-2); display: grid; gap: var(--space-1); align-content: start; }
.cat-title { font-size: var(--font-size-lg); margin: 0; }
.cat-desc { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-foot { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-top: 1px solid var(--color-divider); }
.cat-foot a { color: var(--color-primary-text); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.cat-dot { width: 26px; height: 26px; border-radius: var(--radius-md); display: inline-grid; place-items: center; background: var(--cat); color: var(--color-text-on-primary); flex: none; }
.course-admin-foot { margin-top: var(--space-2); gap: var(--space-2); }

/* ---------- states, outline */
.state-chips { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.state-chip { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--font-size-sm); background: var(--color-surface); }
.state-chip input { accent-color: var(--color-primary); width: 18px; height: 18px; margin: 0; }
.state-chip b { min-width: 24px; }
.state-chip.sel { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary-text); }
.outline-grid { align-items: start; margin-top: var(--space-3); }
.outline-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface-secondary); max-height: 320px; overflow: auto; }
.outline-tree, .outline-tree ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.outline-tree ol { padding-left: var(--space-6); margin-top: 4px; font-size: var(--font-size-sm); }

/* ---------- course detail */
.tree-group.inactive .tree-head, .tree-child.inactive { opacity: .6; }
a.tree-head, a.tree-child { color: inherit; text-decoration: none; }

/* ---------- builder */
.builder { display: grid; gap: var(--d-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
  .builder { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .bt-panel { position: sticky; top: calc(var(--d-top-h) + var(--space-3)); max-height: calc(100vh - var(--d-top-h) - var(--space-6)); overflow: auto; }
}
.bt-panel { padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; }
.bt-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
.bt-tree { display: grid; gap: var(--space-2); }
.bt-modules, .bt-lessons, .bt-quizzes { list-style: none; margin: 0; padding: 0; }
.bt-modules { display: grid; gap: var(--space-2); }
.bt-module { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.bt-module.inactive > .bt-row, .bt-lesson.inactive > .bt-row, .bt-row.inactive { opacity: .6; }
.bt-lessons { border-top: 1px solid var(--color-divider); padding: 4px 0; }
.bt-quizzes { padding-left: 26px; }
.bt-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px var(--space-2); border: 0; background: none; color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); min-height: 36px; }
.bt-row:hover { background: var(--color-surface-secondary); }
.bt-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.bt-row.sel { background: var(--color-primary-subtle); color: var(--color-primary-text); }
.bt-course { border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 600; }
.bt-lesson > .bt-row { padding-left: var(--space-3); }
.bt-name { flex: 1; min-width: 0; display: grid; line-height: 1.3; overflow-wrap: anywhere; font-size: var(--font-size-sm); }
.bt-num { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; }
.bt-grip { color: var(--n-400); cursor: grab; display: inline-flex; }
.bt-kind { color: var(--color-text-muted); display: inline-flex; }
.bt-move { display: inline-flex; opacity: .35; transition: opacity .15s; }
.bt-row:hover .bt-move, .bt-row:focus-within .bt-move, .q-card:hover .bt-move, .q-card:focus-within .bt-move, .opt-row .bt-move { opacity: 1; }
@media (hover: none) { .bt-move { opacity: 1; } .bt-grip { display: none; } }
.bt-add { padding: 4px var(--space-3) 6px 38px; }
.bt-add-module { justify-self: start; }
.bt-empty { padding: var(--space-3); }
.dragging { opacity: .4; }
.drop-before { box-shadow: inset 0 3px 0 var(--color-primary); }
.drop-after { box-shadow: inset 0 -3px 0 var(--color-primary); }
.drop-into { outline: 2px dashed var(--color-primary); outline-offset: -2px; background: var(--color-primary-subtle); }

.be-panel { min-width: 0; }
.be-head { display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.be-head h2 { margin: 0; font-size: var(--font-size-xl); overflow-wrap: anywhere; }
.be-head .grow { flex: 1; min-width: 200px; }
.be-ic { width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--color-primary-subtle); color: var(--color-primary-text); display: grid; place-items: center; flex: none; }
.be-block { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.be-block h3 { margin: 0; font-size: var(--font-size-md); }
.be-hint { margin-top: calc(var(--space-2) * -1); }
.be-stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.be-stat { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: 2px; }
.be-stat b { font-size: var(--font-size-xl); }
.be-list li { padding: var(--space-2) 0; }
.be-video, .lp-video { width: 100%; max-height: 420px; background: var(--n-900); border-radius: var(--radius-md); }
.be-pdf, .lp-pdf { width: 100%; height: 480px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-secondary); }

/* ---------- quiz builder */
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.q-card { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); flex-wrap: wrap; }
.q-card.inactive { opacity: .6; }
.q-card > .grow { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.q-no { width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface-secondary); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: 600; flex: none; }
.q-text { font-weight: 550; overflow-wrap: anywhere; }
.q-editor { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.opt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.opt-row { display: flex; align-items: center; gap: var(--space-2); padding: 4px; border-radius: var(--radius-md); border: 1px solid transparent; flex-wrap: wrap; }
.opt-row.correct { border-color: var(--color-success); background: var(--color-success-subtle); }
.opt-row .input { flex: 1; min-width: 120px; }
.opt-mark { display: inline-flex; gap: 6px; align-items: center; min-width: 82px; cursor: pointer; }
.opt-mark input { width: 18px; height: 18px; accent-color: var(--color-success); margin: 0; }
.q-msg { margin-top: var(--space-1); }

/* quiz preview */
.qp-list { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-4); }
.qp-q { display: grid; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); }
.qp-q.ok { background: var(--color-success-subtle); }
.qp-q.bad { background: var(--color-danger-subtle); }
.qp-opts { display: grid; gap: 6px; }
.qp-opt { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; min-height: 44px; }
.qp-opt input { width: 18px; height: 18px; accent-color: var(--color-primary); margin: 0; }
.qp-opt.right { border-color: var(--color-success); }
.qp-expl { color: var(--color-text-secondary); }

/* lesson preview */
.lp-layout { display: grid; gap: var(--d-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .lp-layout { grid-template-columns: minmax(0, 1fr) 260px; } }
.lp-title { margin: 2px 0 0; font-size: var(--font-size-2xl); }
.lp-external { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-secondary); flex-wrap: wrap; }
.lp-external .grow { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.lp-side summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
.lp-outline { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--font-size-sm); }
.lp-outline .link-btn { display: flex; gap: 6px; align-items: center; color: var(--color-text); padding: 6px; border-radius: var(--radius-sm); width: 100%; text-align: left; }
.lp-outline .link-btn.sel { background: var(--color-primary-subtle); color: var(--color-primary-text); }

/* course certificate: unit split rows */
.cert-part { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-secondary); }
.cert-part .row { gap: var(--space-2); flex-wrap: wrap; }
.cert-part .row .input:nth-of-type(2) { flex: 1 1 14rem; }
.cert-units { max-width: 7rem; }
.input.cert-postcode { max-width: 8rem; }