/* ============================================================================
   backoffice.css — teacher back-office kit on the quanta foundation.
   Load AFTER /public/quanta.css. Used by: login, landing, course dashboards,
   course managers, quiz manager, database manager, health monitor.
   ============================================================================ */

@layer page {

.hidden { display: none !important; }

/* ---- shell ---- */
body.quanta { background: var(--bg); }
.bo-wrap { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.bo-wrap.narrow { max-width: 760px; }

/* page header */
.bo-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 1.6rem; }
.bo-head .who { flex: 1; min-width: 260px; }
.bo-head h1 { font-family: 'Inter Tight', sans-serif; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.2rem; color: var(--text); }
.bo-head .sub { font-size: 0.92rem; color: var(--text-mute); margin: 0; }
.bo-head .tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* connection / status dot */
.conn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-mute); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-mute); flex: none; }
.status-dot.ok { background: var(--positive); }
.status-dot.warn { background: var(--note); }
.status-dot.bad { background: var(--negative); }

/* ---- cards ---- */
.bo-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
}
.bo-card > h2 { font-family: 'Inter Tight', sans-serif; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.9rem; color: var(--text); }
.bo-card .hint { font-size: 0.84rem; color: var(--text-mute); line-height: 1.5; margin: 0 0 0.8rem; }
.bo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .bo-grid2 { grid-template-columns: 1fr; } }

/* section head with a right-side action */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.card-head h2 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--text); }

/* ---- buttons (quanta .btn is the base; these add back-office variants) ---- */
.btn.subtle { background: var(--panel); color: var(--text-dim); border-color: var(--line); }
.btn.subtle:hover { border-color: var(--accent-strong); color: var(--accent); background: var(--panel); }
.btn.sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
/* confirmed state (e.g. "Session set ✓") — readable, not dimmed */
.btn.set-ok, .btn.set-ok:disabled {
  background: var(--positive-soft); color: var(--positive);
  border-color: var(--positive-border); opacity: 1; cursor: default;
}
/* one-line session status */
.session-line { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.session-line .mute { color: var(--text-mute); font-size: 0.85rem; }
.bo-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* ---- forms ---- */
.bo-input {
  font: inherit; font-size: 0.95rem; color: var(--text);
  padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--panel); box-sizing: border-box;
}
.bo-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.bo-row .grow { flex: 1; min-width: 160px; }
select.bo-input { padding-right: 1.6rem; width: auto; }
.bo-label { font-size: 0.84rem; font-weight: 600; color: var(--text-dim); }

/* ---- chip buttons (quiz selection grid) ---- */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.55rem; }
.chip-btn {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-ctl);
  padding: 0.6rem 0.6rem; cursor: pointer; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chip-btn:hover { border-color: var(--accent-strong); color: var(--accent); }
.chip-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip-btn .mono { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-mute); display: block; margin-top: 0.15rem; }
/* quiz chip states: upcoming = default, done = muted, demo = accent-tinted */
.chip-btn.done { color: var(--text-mute); background: var(--panel-2); }
.chip-btn.done:hover { border-color: var(--line); color: var(--text-mute); }
.chip-btn.demo { color: var(--accent); background: var(--tag-bg); border-color: var(--tag-border); }
/* Event quizzes (eventMode configs): amber, so a one-off event never reads as a class quiz.
   Kept on completed event chips too — the tint is the category, ✓+date shows the run. */
.chip-btn.event { color: var(--note); background: var(--note-soft); border-color: var(--note-border); }
.chip-btn.event:hover { border-color: var(--note); color: var(--note); }
.chip-btn .sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 400; color: var(--text-mute); margin-top: 0.15rem; }
/* Divider subhead splitting the class grid from the event section below it */
.chip-subhead { grid-column: 1 / -1; font-size: 0.74rem; font-weight: 600; color: var(--text-mute); margin-top: 0.55rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.chip-legend { grid-column: 1 / -1; display: flex; gap: 1.1rem; align-items: center; font-size: 0.76rem; color: var(--text-mute); margin-top: 0.35rem; }
.chip-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; border: 1px solid var(--line); vertical-align: -1px; }
.chip-legend .up { background: var(--panel); }
.chip-legend .done { background: var(--panel-2); }
.chip-legend .demo { background: var(--tag-bg); border-color: var(--tag-border); }
.chip-legend .event { background: var(--note-soft); border-color: var(--note-border); }

/* selected info strip */
.info-strip {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-ctl);
  padding: 0.75rem 0.9rem; font-size: 0.9rem; color: var(--text-dim); margin: 0.9rem 0;
}

/* ---- landing (course pick) ---- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.pick-card {
  display: block; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 1.3rem 1.3rem 1.2rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  color: var(--text); text-decoration: none;
}
.pick-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.pick-card .kick { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: var(--text-mute); margin: 0 0 0.4rem; }
.pick-card h2 { font-family: 'Inter Tight', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.45rem; color: var(--text); }
.pick-card p { font-size: 0.86rem; color: var(--text-mute); line-height: 1.5; margin: 0; max-width: none; }
.pick-card .go { display: inline-block; margin-top: 0.9rem; font-size: 0.86rem; font-weight: 600; color: var(--accent); }

/* ---- tables ---- */
.bo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bo-table th { text-align: left; font-weight: 600; color: var(--text-mute); font-size: 0.8rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); }
.bo-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.bo-table td.mono, .bo-table .mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.76rem; font-weight: 600; border-radius: 999px; padding: 0.16rem 0.6rem;
  border: 1px solid var(--line); color: var(--text-dim); background: var(--panel-2);
}
.badge.ok { color: var(--positive); background: var(--positive-soft); border-color: var(--positive-border); }
.badge.warn { color: var(--note); background: var(--note-soft); border-color: var(--note-border); }
.badge.bad { color: var(--negative); background: var(--negative-soft); border-color: var(--negative-border); }

/* ---- health widget (floating, quiet) ---- */
.health-pod {
  position: fixed; bottom: 14px; right: 14px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pop);
  box-shadow: var(--shadow-soft); padding: 0.5rem 0.8rem; cursor: pointer;
  font-size: 0.8rem; color: var(--text-mute);
}
.health-pod:hover { border-color: var(--accent-strong); }
.health-pod .row { display: flex; align-items: center; gap: 0.45rem; }
.health-pod .detail { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--line-soft); font-size: 0.76rem; line-height: 1.6; font-family: 'JetBrains Mono', monospace; }

/* ---- question manager ---- */
.sticky-bar { position: sticky; top: 0; z-index: 50; background: var(--bg); padding: 0.8rem 0 0.6rem; }
.sticky-bar.scrolled { box-shadow: 0 4px 14px -8px rgba(15, 32, 22, 0.25); }
.pane-scroll { overflow-y: auto; }

.q-card {
  background: var(--panel); border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--radius-ctl); padding: 0.9rem 1rem; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.q-card:hover { box-shadow: var(--shadow-soft); }
.q-card.selected { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.q-card.diff-easy { border-left-color: var(--positive); }
.q-card.diff-medium { border-left-color: var(--note); }
.q-card.diff-hard { border-left-color: var(--negative); }
.q-card h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0.55rem 0; }
.q-card .opts { font-size: 0.85rem; color: var(--text-dim); line-height: 1.55; }
.q-card .opts .ok { color: var(--positive); font-weight: 600; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.tag-row .spacer { flex: 1; }
.pill.loss { color: var(--negative); background: var(--negative-soft); border-color: var(--negative-border); }

.sel-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--accent-soft); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius-ctl); padding: 0.45rem 0.6rem; cursor: move;
}
.sel-item.dragging { opacity: 0.5; }
.sel-item.drag-over { border-top: 3px solid var(--accent); }
.sel-item .t { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-item .m { font-size: 0.74rem; color: var(--text-mute); display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
/* category text truncates so the time input + "sec" never wrap to a new line */
.sel-item .m > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-item .m .time-input { flex: none; }
.sel-item .grip { color: var(--text-mute); cursor: grab; font-size: 0.85rem; }
.sel-item .time-input {
  width: 3.2rem; font-size: 0.74rem; padding: 0.12rem 0.25rem;
  border: 1px solid var(--line); border-radius: var(--radius-chip);
  background: var(--panel); color: var(--text); transition: background 0.3s ease;
}
.sel-item .time-input.saved { background: var(--positive-soft); }
.sel-item .rm { border: none; background: none; color: var(--negative); cursor: pointer; font-size: 0.95rem; padding: 0 0.3rem; }

.modal-wrap {
  position: fixed; inset: 0; z-index: 70; background: rgba(10, 15, 12, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto;
}
.modal-card {
  background: var(--panel-elev); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); width: 100%; max-width: 640px; max-height: 90vh;
  overflow-y: auto; padding: 1.4rem 1.5rem;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-head h3 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.modal-x { border: none; background: none; font-size: 1.4rem; color: var(--text-mute); cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--text); }
.f-field { margin-bottom: 0.9rem; }
.f-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 0.35rem; }
.f-field .bo-input, .f-field select.bo-input { width: 100%; }
textarea.bo-input { width: 100%; resize: vertical; }

.fab-col { position: fixed; bottom: 4.6rem; right: 14px; z-index: 45; display: flex; flex-direction: column; gap: 0.5rem; }
.fab {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--text-dim); font-size: 1rem; cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.fab:hover { border-color: var(--accent-strong); color: var(--accent); }

.flash {
  position: fixed; top: 16px; right: 16px; z-index: 80;
  background: var(--panel-elev); border: 1px solid var(--positive-border); color: var(--positive);
  font-weight: 600; font-size: 0.9rem; padding: 0.6rem 1.1rem; border-radius: 999px;
  box-shadow: var(--shadow-card);
}

/* ---- login ---- */
.login-box {
  max-width: 380px; margin: 14vh auto 0; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 2rem 1.8rem 1.8rem;
}
.login-box h1 { font-family: 'Inter Tight', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.3rem; color: var(--text); }
.login-box .sub { font-size: 0.88rem; color: var(--text-mute); margin: 0 0 1.3rem; }
.login-box input { width: 100%; margin-bottom: 0.8rem; text-align: center; font-size: 1rem; padding: 0.7rem 0.9rem; }
.login-box .btn { width: 100%; padding: 0.7rem 1rem; font-size: 0.98rem; }
.login-err {
  background: var(--negative-soft); border: 1px solid var(--negative-border);
  color: var(--negative); border-radius: var(--radius-ctl);
  font-size: 0.85rem; padding: 0.55rem 0.8rem; margin-bottom: 0.9rem;
}

}