/* ─── admin.html — Adminisztráció panels (not the shared table/form primitives) ─ */

/* Shared tabs, tables, toasts, forms, spinner, badges live in
   css/components.css + css/admin-pages.css; only admin-specific panels and
   divergent variants stay here. */

/* The paste areas here take UUID / filename lists and JSON: taller, and
   monospace so ids and indentation line up. */
.field-textarea {
  min-height: 8rem;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-label);
}

/* Történet–KST: one row per story; the title opens the reader modal. */
.story-kst-best { color: var(--ink-soft); 
}
.story-kst-best b { color: var(--ink); font-weight: 800; 
}
.story-kst-nodes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); 
}
.story-kst-nodes li {
  display: grid; grid-template-columns: 3.2rem minmax(12rem, 1fr) minmax(14rem, 1.6fr);
  gap: 0 1.25rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--line);
}
.story-kst-value { display: grid; gap: 0.2rem; font-variant-numeric: tabular-nums; font-weight: 800; 
}
.story-kst-value i {
  display: block; height: 4px; border: 1px solid var(--ink); border-radius: var(--r-xs);
  background: linear-gradient(to right, var(--mint-deep) var(--fit), transparent var(--fit));
}
/* Underlined text buttons: a KST node opens the graph, a title the story reader. */
.story-kst-node, .story-kst-title-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; 
}
.story-kst-node:hover, .story-kst-node:focus-visible,
.story-kst-title-btn:hover, .story-kst-title-btn:focus-visible { text-decoration-color: var(--ink); outline: none; 
}
.story-kst-node code { font-weight: 800; font-family: inherit; margin-right: 0.35rem; 
}
.story-kst-node small { display: block; color: var(--ink-muted); font-size: var(--fs-label); 
}
.story-kst-reason { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.45; 
}
@media (max-width: 720px) {
  .story-kst-nodes li { grid-template-columns: 3.2rem 1fr; 
}
  .story-kst-reason { grid-column: 2; 
}
}

/* Story reader modal: text on the left, KST node list on the right. */
.story-kst-story-card { width: min(96vw, 1100px); max-height: 92vh; display: flex; flex-direction: column; text-align: left; 
}
.story-kst-story-card h2 { text-align: left; margin-right: 2.5rem; 
}
.story-kst-story-card .story-kst-story-meta { text-align: left; margin: 0 0 0.75rem; 
}
.story-kst-story-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; min-height: 0; flex: 1; 
}
.story-kst-story-text, .story-kst-story-nodes { min-height: 0; overflow-y: auto; padding-right: 0.5rem; 
}
.story-kst-story-text p { text-align: left; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin: 0 0 0.85rem; 
}
.story-kst-story-nodes h3 { margin: 0 0 0.35rem; font-size: var(--fs-body); 
}
.story-kst-story-nodes .story-kst-nodes li { grid-template-columns: 3rem 1fr; 
}
.story-kst-story-nodes .story-kst-reason { grid-column: 2; 
}
@media (max-width: 860px) { .story-kst-story-body { grid-template-columns: 1fr; 
} 
}

.story-kst-pick { display: grid; gap: 0.5rem; max-height: 32rem; overflow-y: auto; margin-bottom: 0.75rem; 
}
.story-kst-pick .missing-media-meta { display: block; 
}
.story-kst-pick-row.is-scored .missing-media-row { background: var(--paper); 
}
.story-kst-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin: 0.75rem 0; 
}

.role-select {
  min-width: 8.5rem;
  width: auto;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
}

/* .badge-prereg base is in components.css; admin adds trailing space. */
.badge-prereg { margin-left: 0.35rem; 
}

.pre-register-card {
  max-width: 480px;
}

.pre-register-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.pre-register-card p {
  color: var(--ink-muted);
  font-size: var(--fs-body);
  margin: 0 0 1.25rem;
}

.promote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.promote-results-wrap {
  margin-top: 1.5rem;
}

.promote-results-wrap h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  margin: 0 0 0.75rem;
  color: var(--ink);
}

.promote-row-error td {
  background: rgba(232, 81, 77, 0.08);
}

/* Wider login-card for the unseeded-task / missing-media pickers. */
.unseeded-tasks-card,
.missing-media-card {
  width: min(94vw, 520px);
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
}

.unseeded-tasks-card h2,
.missing-media-card h2 { text-align: center; 
}

.missing-media-card h3 {
  margin: 1rem 0 0.4rem;
  font-size: var(--fs-body);
  color: var(--ink);
}

.unseeded-select-all,
.missing-media-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
  cursor: pointer;
}

.unseeded-task-row,
.missing-media-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  padding: 0.6rem 0.7rem;
  background: var(--white-85);
  cursor: pointer;
  text-align: left;
}

.unseeded-task-row input,
.missing-media-row input { margin-top: 0.2rem; flex-shrink: 0; 
}

.unseeded-task-row .unseeded-task-title,
.missing-media-row .missing-media-title {
  display: block;
  font-weight: 800;
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.3;
}

.unseeded-task-row .unseeded-task-meta,
.missing-media-row .missing-media-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-label);
  color: var(--ink-soft);
}

.unseeded-tasks-actions,
.missing-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.1rem;
}

/* Missing Cache-Control is a real cost (re-download per page load), so it
   reads as an error, not as a neutral "no value". */
.asset-cache-missing {
  color: var(--danger);
  font-weight: 600;
}

.asset-cache-ok {
  color: var(--ink-soft);
  font-family: ui-monospace, monospace;
  font-size: var(--fs-label);
}

/* ── Learning Insight panel ─────────────────────────────────────────── */
.insight-panel-card {
  max-width: 960px;
}

.insight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.25rem 0 1.25rem;
}

/* Competency radar: chart + a readable score legend side by side, so
   every value is still legible even where the plotted point is faint. */
.report-radar-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-stamp-sm);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
}

.report-chart-wrap {
  position: relative;
  flex: 1 1 380px;
  height: 400px;
  min-width: 300px;
}

.report-legend {
  flex: 1 1 240px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.report-legend li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--line);
}

.report-legend .legend-name {
  font-weight: 700;
  font-size: var(--fs-label);
  color: var(--ink);
  line-height: 1.3;
}

.report-legend .legend-score {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--coral-deep);
  white-space: nowrap;
}

.report-legend .legend-score.is-unknown {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Compact per-task table: scoped additions on top of .users-table so no
   other tab's table is affected. */
.report-tasks-table {
  table-layout: fixed;
}

.report-tasks-table th,
.report-tasks-table td {
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-body);
  vertical-align: top;
}

.report-tasks-table td:first-child {
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
}

.report-tasks-table .why-cell {
  color: var(--ink-soft);
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.45;
}

/* Difficulty and KST node-status badges (.status-badge) share one palette. */
.difficulty-very_easy, .difficulty-easy,
.node-status-mastered              { background: var(--badge-success-bg); color: var(--badge-success-fg); 
}
.difficulty-appropriate,
.node-status-partially_mastered    { background: var(--badge-warning-bg); color: var(--badge-warning-fg); 
}
.difficulty-hard, .difficulty-very_hard,
.node-status-not_mastered          { background: var(--badge-danger-bg); color: var(--badge-danger-fg); 
}
.difficulty-unknown,
.node-status-insufficient_evidence { background: var(--paper-deep); color: var(--ink-muted); 
}

.confidence-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.confidence-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color, var(--ink-muted));
  flex-shrink: 0;
}

.next-easier { background: rgba(126, 206, 196, 0.28); color: var(--mint-deep); 
}
.next-same   { background: var(--paper-deep); color: var(--ink-muted); 
}
.next-harder { background: rgba(255, 107, 107, 0.18); color: var(--coral-deep); 
}

/* KST diagnosis: a fallback is a from → to card whose path chips show every hop. */
.report-kst-table .node-id {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--coral-deep);
  margin-right: 0.4rem;
}

.report-kst-table .node-inferred {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.report-fallbacks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.report-fallbacks li {
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-stamp-sm);
  padding: 1rem 1.25rem;
}

.report-fallbacks .fallback-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-weight: 700;
  color: var(--ink);
}

.report-fallbacks .fallback-arrow {
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
}

.report-fallbacks .fallback-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.6rem 0 0.5rem;
}

.report-fallbacks .path-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-full);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--fs-label);
  font-weight: 700;
}

.report-fallbacks .path-chip.is-endpoint {
  background: rgba(126, 206, 196, 0.28);
  color: var(--mint-deep);
}

.report-fallbacks .fallback-reason {
  color: var(--ink-soft);
  line-height: 1.45;
  font-size: var(--fs-body);
}

.report-fallbacks .muted {
  padding: 0.5rem 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Focus plan: numbered practice steps, most urgent first. */
.report-focus-plan {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--ink-soft);
  line-height: 1.45;
  font-size: var(--fs-body);
}

.report-focus-plan li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--coral-deep);
}

.report-focus-plan .focus-node {
  font-weight: 700;
  color: var(--ink);
}

.report-focus-plan .focus-node .node-id {
  font-family: var(--font-display);
  color: var(--coral-deep);
  margin-right: 0.4rem;
}

.report-focus-plan .focus-journey {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--mint-deep);
}

.report-focus-plan li.muted {
  list-style: none;
  margin-left: -1.6rem;
}

@media (max-width: 576px) {
  .report-tasks-table { table-layout: auto; 
}
  .report-tasks-table col { width: auto !important; 
}
}
/* .users-error, .users-toast*, .empty-state--muted, .spinner, .muted, .is-hidden
   are all provided by css/admin-pages.css + css/components.css. */