/* Codex Content tab (sub-tab nav + Items sub-tab).
 * Reuses the cdx- primitives from cohorts.css (.cdx-btn, .cdx-modal*,
 * .cdx-field, .cdx-empty) and the tokens from codex.css / theme.css, so no new
 * color token is introduced (dark mode is inherited). Colors come only from
 * CSS custom properties, per the module contract. */

/* The sub-tab BAR is the legacy bs-topbar-subrow rendered by codex-topbar.js
   (styled in backstage.css), so no sub-tab styles live here. This file styles
   only the Items sub-tab content below. */

/* ── Items toolbar ───────────────────────────────────────────────────────── */
.cdx-items { display: flex; flex-direction: column; gap: 1rem; }

.cdx-items-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cdx-items-toolbar-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-primary);
  flex: 1;
}
.cdx-items-toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Bulk bar ────────────────────────────────────────────────────────────── */
.cdx-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--cdx-card-sel-bg);
  border: 1px solid var(--cdx-card-sel-border);
  border-radius: 8px;
}
.cdx-bulk-bar > span { color: var(--text-secondary); font-size: 0.85rem; flex: 1; }

/* ── Left list column: a search + sort header above the scrolling list ────── */
/* The search sits at the top of the LEFT panel (like the Turmas search) so it is
   easy to find; the sort is a small toggle button beside it that cycles modes. */
.cdx-items-listcol { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.cdx-items-listhead { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.cdx-items-search {
  flex: 1;
  min-width: 0;
  padding: 0.42rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cdx-items-search:focus { outline: none; border-color: var(--primary); }
.cdx-items-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.cdx-items-sortbtn:hover { border-color: var(--primary); color: var(--primary-dark); }
.cdx-items-sortbtn svg { flex: 0 0 auto; }

/* ── Filter row ──────────────────────────────────────────────────────────── */
.cdx-filter-row { display: flex; align-items: center; gap: 0.5rem; }

/* ── Lista + Prévia (master-detail) ──────────────────────────────────────── */
/* Compact item list on the left, live preview on the right. Mirrors the
   cohorts pane pattern: each side scrolls independently, the preview composes a
   fixed header + scrolling body (no sticky actions over scrolling content). */
.cdx-items-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1rem;
  align-items: stretch;
  min-height: calc(100vh - 240px);
}
@media (max-width: 980px) {
  .cdx-items-split { grid-template-columns: 1fr; }
}
/* Select/bulk mode: hide the preview, the list spans the full width. */
.cdx-items-split.is-bulk { grid-template-columns: 1fr; }
.cdx-items-split.is-bulk .cdx-item-preview { display: none; }
/* Liberações + Tarefas (in the dossiê) get a draggable divider between the two
   panels: the first column rides the resizer's --cdx-rz-w var (js/resizable.js), and
   the grip itself is styled in cohorts.css (.cdx-rz-grip). Must come after the base
   rule + its mobile collapse so it wins on equal specificity; the override re-states
   the 1fr collapse for phones. */
.cdx-releases-split, .cdx-tarefas-split { position: relative; grid-template-columns: var(--cdx-rz-w, 380px) 1fr; }
@media (max-width: 980px) {
  .cdx-releases-split, .cdx-tarefas-split { grid-template-columns: 1fr; }
}

.cdx-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.4rem;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}

.cdx-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.cdx-item-row:hover {
  background: var(--cdx-card-hover-bg);
  border-color: var(--cdx-card-hover-border);
}
.cdx-item-row.is-selected {
  background: var(--cdx-card-sel-bg);
  border-color: var(--cdx-card-sel-border);
}
.cdx-item-row.is-active {
  background: var(--cdx-card-sel-bg);
  border-color: var(--cdx-card-sel-border);
  box-shadow: inset 3px 0 0 var(--codex-content);
}

/* ── Preview pane ────────────────────────────────────────────────────────── */
.cdx-item-preview {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
  max-height: calc(100vh - 240px);
}
.cdx-preview-empty {
  margin: auto;
  padding: 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}
.cdx-preview-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cdx-preview-head .cdx-item-type-icon { font-size: 1.4rem; margin-top: 0.1rem; }
.cdx-preview-head-info { flex: 1; min-width: 0; }
.cdx-preview-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.cdx-preview-type {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}
.cdx-preview-actions { display: flex; gap: 0.4rem; flex-shrink: 0; flex-wrap: wrap; }
.cdx-preview-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1.1rem;
}
.cdx-preview-body .cdx-item-tags { margin: 0 0 1rem; }
.cdx-preview-render { color: var(--text-primary); }

.cdx-item-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cdx-chip-border);
  border-radius: 4px;
  display: inline-block;
  position: relative;
}
.cdx-item-check.is-checked {
  background: var(--primary);
  border-color: var(--primary);
}
.cdx-item-check.is-checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--cdx-btn-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cdx-item-type-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  width: 1.6rem;
  text-align: center;
  color: var(--text-secondary);
}

.cdx-item-info { flex: 1; min-width: 0; }
.cdx-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.cdx-item-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.cdx-item-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }

.cdx-set-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--cdx-chip-bg);
  border: 1px solid var(--cdx-chip-border);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Canonical off-Items chip (Phase 4) ──────────────────────────────────────
   One pill skin shared by the static count/status chips OUTSIDE the frozen
   Items surface. (Items' own .cdx-set-badge stays a 4px square; .cdx-tag-chip
   stays the interactive pill; cohorts' .cdx-card-info-chip already matches this
   pill.) Each chip below keeps only its own layout/icon specifics. */
.cdx-tag-row-count,
.cdx-rel-aula-date,
.cdx-rel-count,
.cdx-field-future {
  background: var(--cdx-chip-bg);
  border: 1px solid var(--cdx-chip-border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Tags manager modal ──────────────────────────────────────────────────── */
.cdx-tag-manager-create { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.cdx-tag-manager-create input { flex: 1; }

.cdx-tag-manager-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 50vh;
  overflow-y: auto;
}
.cdx-tag-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.cdx-tag-row-label { flex: 1; color: var(--text-primary); font-size: 0.88rem; }
/* .cdx-tag-row-count: skin via the canonical off-Items chip rule above. */

/* ── Shared item editor / creator (item-form.js, item-creator.js) ─────────── */
/* Codex-native port of the legacy ct-editor chrome. Reuses .cdx-field,
   .cdx-modal-backdrop, .cdx-modal-actions, .cdx-btn from cohorts.css; colors
   come only from existing tokens (dark mode inherited). The editor mounts into
   .cdx-modal-body, used exclusively by these two modules. */
.cdx-modal-body { width: 100%; max-width: 760px; box-sizing: border-box; }

.cdx-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  box-shadow: 0 12px 48px var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.cdx-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cdx-editor-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.cdx-editor-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.cdx-editor-footer {
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cdx-editor textarea { resize: vertical; min-height: 80px; }

.cdx-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Inline SVG glyph inside a button (AI actions) */
.cdx-btn-glyph { vertical-align: -2px; margin-right: 2px; }

.cdx-preview-area {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.cdx-preview-area h1, .cdx-preview-area h2, .cdx-preview-area h3 { margin-top: 0.5em; margin-bottom: 0.25em; }
.cdx-preview-area p { margin: 0 0 0.5em; }
.cdx-preview-area code { background: var(--cdx-card-sel-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.cdx-preview-area pre { background: var(--cdx-card-sel-bg); padding: 0.75rem; border-radius: 7px; overflow-x: auto; }
.cdx-preview-area pre code { background: none; padding: 0; }
/* Prompt preview: verbatim, matches CTRenderer.renderPrompt on the student page. */
.cdx-preview-verbatim { white-space: pre-wrap; word-break: break-word; font-family: monospace; font-size: 0.85em; }

.cdx-type-block {
  margin-top: 0.5rem;
  padding: 0.9rem;
  background: var(--cdx-card-sel-bg);
  border: 1px solid var(--cdx-card-sel-border);
  border-radius: 10px;
}
.cdx-platform-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.cdx-platform-tabs .cdx-field { margin-bottom: 0; }

.cdx-upload-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-top: 6px; }
.cdx-upload-filename {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.cdx-upload-progress { font-size: 0.78rem; color: var(--primary); }

/* Type option picker (replaces native <select> in item editor) */
.cdx-type-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}
.cdx-type-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
}
.cdx-type-opt:hover { border-color: var(--primary); background: var(--cdx-card-hover-bg); color: var(--text-primary); }
.cdx-type-opt.is-active { border-color: var(--primary); background: var(--cdx-card-sel-bg); color: var(--primary); font-weight: 600; }
.cdx-type-opt-icon { display: inline-flex; flex-shrink: 0; }
.cdx-type-opt-icon svg { display: block; }
.cdx-type-opt-new { border-style: dashed; }

/* Tag chip picker (inline "+ tag") */
.cdx-tag-picker { display: block; }
.cdx-tag-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cdx-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cdx-tag-chip:hover { border-color: var(--cdx-card-hover-border); color: var(--text-primary); }
.cdx-tag-chip.active {
  background: var(--cdx-card-sel-bg);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.cdx-tag-add-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.cdx-tag-add-chip:hover { border-color: var(--primary); color: var(--primary); }
.cdx-tag-add-input {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  font-size: 0.78rem;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  width: 140px;
  box-sizing: border-box;
}

/* Toggle switch (guide platform tabs, emoji toggle) */
.cdx-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.cdx-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cdx-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: background 0.2s;
  cursor: pointer;
}
.cdx-toggle-slider:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--cdx-btn-primary-text);
  border-radius: 50%;
  transition: transform 0.2s;
}
.cdx-toggle input:checked + .cdx-toggle-slider { background: var(--primary); }
.cdx-toggle input:checked + .cdx-toggle-slider:before { transform: translateX(16px); }
.cdx-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.cdx-toggle-text { line-height: 22px; }

/* Content-first creator extras */
.cdx-gdoc-row { margin-bottom: 0.75rem; }
.cdx-gdoc-inline { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.cdx-helper-text { font-size: 0.78rem; color: var(--text-secondary); margin: 0.5rem 0 0; }
.cdx-emoji-toggle-row {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--cdx-card-sel-bg);
  border: 1px solid var(--cdx-card-sel-border);
  border-radius: 10px;
}

/* ── Glyph picker + types manager ────────────────────────────────────────── */
.cdx-item-type-icon svg { display: block; }
.cdx-type-emoji { font-size: 1.1em; line-height: 1; }

.cdx-glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 1.2rem;
}
.cdx-glyph-option {
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.cdx-glyph-option:hover { border-color: var(--primary); color: var(--primary); }
.cdx-glyph-option.is-active { border-color: var(--primary); color: var(--primary); background: var(--cdx-card-sel-bg); }

.cdx-glyph-choose { display: inline-flex; align-items: center; gap: 0.45rem; }
.cdx-glyph-choose-icon { display: inline-flex; }

.cdx-type-manager-actions { margin-bottom: 0.85rem; }
.cdx-type-manager-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 50vh;
  overflow-y: auto;
}
.cdx-type-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.cdx-type-glyph-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.cdx-type-glyph-btn:hover { border-color: var(--primary); color: var(--primary); }
.cdx-type-row-label { flex: 1; color: var(--text-primary); font-size: 0.88rem; }
.cdx-type-row-slug { font-size: 0.72rem; color: var(--text-secondary); font-family: monospace; }

/* ── Presets sub-tab (native, master-detail like Items) ──────────────────────
   Full-native port of the legacy CVPresetsUI + CVItemPicker. Reuses the Items
   split shell (.cdx-items-split / .cdx-items-list / .cdx-item-row /
   .cdx-item-preview): left = selectable preset list, right = an inline editor
   (name field + grouped item-picker). Reuses .cdx-btn, .cdx-field, .cdx-empty
   and existing tokens; no new color token, so dark mode is inherited. */
.cdx-presets { display: flex; flex-direction: column; gap: 1rem; }
.cdx-presets-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cdx-presets-title { margin: 0; font-size: 1.15rem; color: var(--text-primary); flex: 1; }

.cdx-preset-icon { color: var(--codex-content); font-size: 1.1rem; }
.cdx-presets-split .cdx-item-info { flex: 1; min-width: 0; }
/* No header: the picker fills the whole body, and the footer carries Edit name +
   Delete on the left with Cancel/Save on the right, so the list goes higher. */
.cdx-presets-split .cdx-preview-body { display: flex; flex-direction: column; }
.cdx-presets-split .cdx-preset-picker-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cdx-presets-split .cdx-picker { flex: 1; min-height: 0; max-height: none; }
.cdx-preset-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.1rem; border-top: 1px solid var(--border); }
.cdx-preset-actions-left { display: flex; gap: 0.5rem; }
.cdx-preset-actions-right { display: flex; gap: 0.5rem; }

.cdx-field--picker { display: flex; flex-direction: column; }
.cdx-field-error { font-size: 0.78rem; color: var(--danger); margin-top: 0.3rem; min-height: 1em; }
.cdx-field input.is-invalid, input.is-invalid { border-color: var(--danger); }

/* ── Item picker (grouped multi-select) ──────────────────────────────────── */
.cdx-picker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  max-height: 48vh;
  overflow: hidden;
}
.cdx-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cdx-picker-search {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cdx-picker-search:focus { outline: none; border-color: var(--primary); }
.cdx-picker-count { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.cdx-picker-list { overflow-y: auto; padding: 0.4rem; flex: 1; min-height: 0; }
.cdx-picker-empty { padding: 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.88rem; }

.cdx-picker-group { margin-bottom: 0.5rem; }
/* Collapsible accordion header (single-open; toggled in presets.js). */
.cdx-picker-group-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0.35rem 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cdx-picker-group-label:hover {
  background: var(--cdx-card-hover-bg);
  border-color: var(--cdx-card-hover-border);
  color: var(--text-primary);
}
.cdx-picker-group-name { flex: 1; min-width: 0; }
.cdx-picker-group-caret { display: inline-flex; font-size: 0.95rem; line-height: 1; transition: transform 120ms ease; }
.cdx-picker-group-label[aria-expanded="true"] .cdx-picker-group-caret { transform: rotate(90deg); }
.cdx-picker-group-rows { display: flex; flex-direction: column; gap: 0.15rem; }
.cdx-picker-group-rows.is-collapsed { display: none; }
.cdx-picker-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.cdx-picker-row:hover { background: var(--cdx-card-hover-bg); border-color: var(--cdx-card-hover-border); }
.cdx-picker-row.is-selected { background: var(--cdx-card-sel-bg); border-color: var(--cdx-card-sel-border); }
.cdx-picker-check { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.cdx-picker-icon { flex-shrink: 0; display: inline-flex; color: var(--text-secondary); }
.cdx-picker-icon svg { display: block; }
.cdx-picker-title {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Shared turma pill picker (Releases + Tarefas) ────────────────────────── */
.cdx-turma-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cdx-turma-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.cdx-turma-pill:hover { border-color: var(--cdx-card-hover-border); color: var(--text-primary); }
.cdx-turma-pill.is-active { border-color: var(--primary); background: var(--cdx-card-sel-bg); color: var(--primary); font-weight: 600; }
.cdx-turma-pill-client { font-weight: 600; }
.cdx-turma-pill-sep { opacity: 0.5; }

/* ── Releases (Liberações) sub-tab (native, master-detail like Items) ────────
   Reuses the Items split shell (.cdx-items-split / .cdx-items-list /
   .cdx-item-row / .cdx-item-preview): left = aula list (+ an Outros bucket),
   right = the composer for the selected aula. The composer markup, the diff
   rules and the save paths are unchanged; only the host moved from an inline
   accordion to the right pane. All theme tokens, so dark mode is inherited. */
.cdx-releases { display: flex; flex-direction: column; gap: 1rem; }
.cdx-releases-split .cdx-item-info { flex: 1; min-width: 0; }
.cdx-releases-split .cdx-item-sub { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* Aula number badge in the row icon slot (Outros uses a glyph instead). */
.cdx-rel-aula-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  background: var(--cdx-chip-bg); border: 1px solid var(--cdx-chip-border);
  font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);
}
.cdx-rel-outros-icon { color: var(--codex-content); }
.cdx-rel-aula-title { font-size: 0.85rem; color: var(--text-secondary); }
/* .cdx-rel-aula-date skin via the canonical off-Items chip rule; modifiers only here. */
.cdx-rel-aula-date.is-happened { color: var(--primary); }
.cdx-rel-aula-date.is-tbd { opacity: 0.7; }
.cdx-rel-aula-counts { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
/* .cdx-rel-count skin via the canonical off-Items chip rule; layout only here. */
.cdx-rel-count {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.cdx-rel-count svg { display: block; }
.cdx-rel-count-empty { opacity: 0.6; font-style: italic; }
/* Debug-only "clear NOVO" pill on the right edge of a lesson row. Border comes
   from the shared .cdx-dev-only marker (dashed --danger); see Codex CLAUDE.md
   "Developer-mode-only UI". */
.cdx-rel-clear-fresh {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--cdx-danger-bg);
  color: var(--danger);
  font-size: 0.7rem; font-weight: 700; line-height: 1.4;
  cursor: pointer;
  opacity: 0.85;
}
.cdx-rel-clear-fresh:hover {
  opacity: 1;
  background: var(--danger);
  color: var(--text-on-accent, #fff);
}
/* Hidden state ("+ NOVO", badge currently off): muted, fills on hover. */
.cdx-rel-clear-fresh.is-hidden-state { background: transparent; opacity: 0.6; }
.cdx-rel-clear-fresh.is-hidden-state:hover { background: var(--danger); color: var(--text-on-accent, #fff); opacity: 1; }
/* "Marcar como ocorrida": mark an aula happened on its scheduled day, from here. */
.cdx-rel-mark-happened {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: transparent;
  color: var(--primary);
  font-size: 0.7rem; font-weight: 700; line-height: 1.4;
  cursor: pointer;
  opacity: 0.85;
}
.cdx-rel-mark-happened:hover { opacity: 1; background: var(--primary); color: var(--text-on-accent, #fff); }
/* Composer in the right pane: one search + a single-open accordion (the Presets
   picker layout, .cdx-picker*), filling the body with the Save pinned below. */
.cdx-releases-split .cdx-preview-body { display: flex; flex-direction: column; gap: 0.8rem; }
.cdx-releases-split .cdx-rel-acc { flex: 1; min-height: 0; max-height: none; }
.cdx-comp-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.cdx-comp-item:hover { background: var(--cdx-card-hover-bg); }
.cdx-comp-item span { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.cdx-comp-item svg { display: block; flex-shrink: 0; }
.cdx-comp-cb { flex-shrink: 0; accent-color: var(--primary); }
.cdx-comp-empty { font-size: 0.82rem; color: var(--text-secondary); padding: 0.4rem 0; }
/* Item already released to another aula in this turma: greyed, with a small note. */
.cdx-comp-item.is-already-released { opacity: 0.5; }
.cdx-comp-item.is-already-released:hover { opacity: 0.75; }
.cdx-comp-elsewhere { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; margin-left: 0.6rem; }
.cdx-comp-actions { display: flex; justify-content: flex-end; flex-shrink: 0; }

/* ── Apostila sub-tab (imported course content) ──────────────────────────── */
.cdx-apostila { display: flex; flex-direction: column; gap: 1rem; }
.cdx-apostila-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cdx-apostila-title { margin: 0; font-size: 1.15rem; color: var(--text-primary); flex: 1; }
.cdx-apostila-toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Master-detail (like Items): left = section list, right = section read-preview. */
.cdx-apostila-split .cdx-item-info { flex: 1; min-width: 0; }
.cdx-apostila-pos {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  background: var(--cdx-chip-bg);
  border: 1px solid var(--cdx-chip-border);
  color: var(--text-secondary);
}

/* ── Tarefas sub-tab (assignments authoring + answers) ───────────────────── */
.cdx-tarefas { display: flex; flex-direction: column; gap: 1rem; }
.cdx-tarefas-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cdx-tarefas-title { margin: 0; font-size: 1.15rem; color: var(--text-primary); flex: 1; }
.cdx-tarefas-meta { font-size: 0.82rem; color: var(--text-secondary); }
.cdx-tarefas-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* Live Tarefas row bits (rendered inside the shared .cdx-item-row by tarefas.js).
   The old accordion shell (.cdx-tarefa-row/-head/-grid/-chev/-body/-title*) was
   removed 2026-06-04 after the master-detail migration left it dead. */
.cdx-tarefa-icon { flex-shrink: 0; display: inline-flex; color: var(--text-secondary); }
.cdx-tarefa-icon svg { display: block; }
.cdx-tarefa-sub { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.2rem; font-size: 0.78rem; color: var(--text-secondary); }
.cdx-tarefa-dot { opacity: 0.5; }
.cdx-tarefa-count.is-zero { opacity: 0.6; }
.cdx-tarefa-anon-badge { color: var(--danger); }
.cdx-tarefa-reuse.is-multi { color: var(--primary); cursor: help; }
.cdx-tarefa-reuse.is-solo { opacity: 0.7; }
.cdx-tarefa-pane { min-width: 0; }
.cdx-tarefa-pane-title { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-primary); }
.cdx-tarefa-editor-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

.cdx-field-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cdx-field-chip-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.cdx-field-chip-btn.is-active { border-color: var(--primary); background: var(--cdx-card-sel-bg); color: var(--primary); font-weight: 600; }
.cdx-field-chip-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
/* .cdx-field-future: skin via the canonical off-Items chip rule above. */

.cdx-tarefa-delete-quote { font-weight: 700; color: var(--text-primary); padding: 0.4rem 0.6rem; background: var(--cdx-card-sel-bg); border-radius: 6px; }
.cdx-tf-del-input { width: 100%; box-sizing: border-box; margin-bottom: 1rem; }

.cdx-resp-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.cdx-resp-search {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cdx-resp-search:focus { outline: none; border-color: var(--primary); }
.cdx-resp-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 460px; overflow-y: auto; }
.cdx-resp-empty { font-size: 0.85rem; color: var(--text-secondary); padding: 0.6rem 0; }
.cdx-resp-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; background: var(--surface); }
.cdx-resp-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.cdx-resp-who { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.cdx-resp-who.is-anon { font-weight: 400; color: var(--text-secondary); }
.cdx-resp-when { font-size: 0.74rem; color: var(--text-secondary); }
.cdx-resp-content { font-size: 0.85rem; color: var(--text-primary); max-height: 4.5em; overflow: hidden; }
.cdx-resp-card.is-expanded .cdx-resp-content { max-height: none; }
.cdx-resp-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* ── Tarefas sub-tab (native, master-detail like Items) ──────────────────────
   Reuses the Items split shell: left = tarefa list, right = the selected
   tarefa's editor stacked above its answers. All theme tokens, dark-safe. */
.cdx-tarefas-split .cdx-item-info { flex: 1; min-width: 0; }
.cdx-tarefa-panes { display: flex; flex-direction: column; gap: 1.4rem; }
.cdx-tarefas-split .cdx-resp-list { max-height: none; }

/* ── Labs sub-tab (native, master-detail like Items) ─────────────────────────
   Reuses the Items split shell (.cdx-items-split / .cdx-items-list /
   .cdx-item-row / .cdx-item-preview). Only the lab-specific bits (header, on/off
   switch, live preview iframe) live here. All theme tokens, so dark-safe. */
.cdx-labs { display: flex; flex-direction: column; gap: 0.9rem; }
.cdx-labs-head { display: flex; flex-direction: column; gap: 0.25rem; }
.cdx-labs-title { margin: 0; font-size: 1.4rem; color: var(--text-primary); }
.cdx-labs-hint { color: var(--text-secondary); font-size: 0.9rem; max-width: 640px; }
.cdx-labs-split .cdx-item-info { flex: 1; min-width: 0; }
.cdx-labs-split .cdx-item-row.is-off { opacity: 0.5; }
.cdx-lab-icon { color: var(--codex-content); font-size: 1.2rem; }

/* On/off switch (ported value-for-value from the legacy ct-lab-switch). */
.cdx-lab-switch { position: relative; width: 44px; height: 24px; display: inline-block; flex-shrink: 0; cursor: pointer; }
.cdx-lab-switch input { opacity: 0; width: 0; height: 0; }
.cdx-lab-switch-track { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 18%, transparent); transition: background 160ms; }
.cdx-lab-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 160ms, background 160ms; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.cdx-lab-switch input:checked + .cdx-lab-switch-track { background: var(--primary, #14b8a6); }
.cdx-lab-switch input:checked + .cdx-lab-switch-track .cdx-lab-switch-thumb { left: 23px; }

/* Preview pane: fixed head + full-bleed live iframe. */
.cdx-lab-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cdx-lab-preview-meta { min-width: 0; }
.cdx-lab-ptitle { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.cdx-lab-psub { font-size: 0.8rem; color: var(--text-secondary); }
.cdx-lab-preview-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.cdx-lab-preview-body { flex: 1; min-height: 0; overflow: hidden; padding: 0.9rem; display: flex; justify-content: center; align-items: center; }
/* The lab is rendered at full viewport size then transform-scaled (in labs.js)
   so the small preview looks like the fullscreen view. White line delimits it;
   pointer-events off so only the fullscreen button is interactive. */
.cdx-lab-frame-wrap { position: relative; overflow: hidden; border: 2px solid #fff; border-radius: 4px; background: #0a0e1a; flex-shrink: 0; box-sizing: border-box; }
.cdx-lab-frame { position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: top left; pointer-events: none; background: #0a0e1a; }

/* ── Drive sub-tab (native, master-detail like Items) ────────────────────────
   Reuses the Items split shell. Toolbar + connection status + folder rows +
   file groups + the folder editor. All theme tokens, so dark-safe. */
.cdx-drive { display: flex; flex-direction: column; gap: 0.9rem; }
.cdx-drive-toolbar { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.cdx-drive-title { margin: 0; font-size: 1.4rem; color: var(--text-primary); }
.cdx-drive-statuswrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cdx-drive-status { font-size: 0.85rem; color: var(--text-secondary); }
.cdx-drive-status.is-ok { color: var(--success, #16a34a); }
.cdx-drive-status.is-warn { color: var(--error); }
.cdx-drive-lastsync { font-size: 0.78rem; color: var(--text-secondary); }
.cdx-drive-split .cdx-item-info { flex: 1; min-width: 0; }
.cdx-drive-icon { color: var(--codex-content); font-size: 1.1rem; }
.cdx-drive-add { align-self: flex-start; margin-bottom: 0.3rem; }
.cdx-drive-fid { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--text-secondary); word-break: break-all; }

/* Preview head + file groups */
.cdx-drive-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cdx-drive-preview-meta { min-width: 0; }
.cdx-drive-preview-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.cdx-drive-files { flex: 1; min-height: 0; overflow-y: auto; padding: 0.6rem 0.9rem 1rem; }
.cdx-drive-files-empty { color: var(--text-secondary); font-size: 0.9rem; padding: 1.5rem 0.5rem; text-align: center; }
.cdx-drive-subfolder { margin-bottom: 0.9rem; }
.cdx-drive-subfolder-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.35rem; }
.cdx-drive-count { color: var(--text-secondary); font-weight: 600; }
.cdx-drive-subfolder-files { display: flex; flex-direction: column; gap: 0.25rem; }
.cdx-drive-file { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.45rem 0.6rem; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--text-primary); font: inherit; }
.cdx-drive-file:hover { background: var(--cdx-card-hover-bg); border-color: var(--cdx-card-hover-border); }
.cdx-drive-file-icon { flex-shrink: 0; }
.cdx-drive-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.cdx-drive-file-label { flex-shrink: 0; font-size: 0.72rem; color: var(--text-secondary); }

/* Folder editor (rendered in the preview pane) */
.cdx-drive-editor { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 1.1rem; }
.cdx-drive-editor-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.cdx-drive-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-secondary); }
.cdx-drive-field input { font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-primary); }
.cdx-drive-field input.is-invalid { border-color: var(--error); }
.cdx-drive-editor-error { color: var(--error); font-size: 0.82rem; min-height: 1em; }
.cdx-drive-editor-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }