/* ---------------- Manual question editor (admin "สร้างโจทย์" → "เพิ่มคำถามเอง") redesign ----------------
   Pure UI/UX restyle of js/exam-generator.js's renderManualQuestionPanel(): card-based sections
   with icon toolbars, laid out closer to the requested mockup. Every element here still drives
   the exact same #ids/classes the existing JS already wires up (qf-text, qf-choices,
   qf-image-input, qf-image-url, mq-form, ...) — no new functionality, no new backend fields,
   just a nicer arrangement using the site's own palette (--black/--paper/--card/--line/--muted
   from styles/main.css) instead of introducing new colors. */

.qe-panel{ display:flex; flex-direction:column; gap:16px; }

/* ---- existing-questions list ---- */
.qe-list-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px;
}
.qe-list-title{ font-weight:700; font-size:var(--fs-base); margin-bottom:4px; }
.qe-list-empty{ font-size:var(--fs-sm); color:var(--muted); padding:6px 0; }
.qe-list-row{
  display:flex; align-items:flex-start; gap:10px; padding:12px 0;
  border-top:1px solid var(--line);
}
.qe-list-row:first-of-type{ border-top:none; }
.qe-list-actions{ display:flex; gap:6px; flex-shrink:0; }
.qe-list-icon-btn{
  width:30px; height:30px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); display:flex; align-items:center; justify-content:center;
  color:var(--ink); flex-shrink:0; transition:background 150ms ease, transform 120ms ease;
}
.qe-list-icon-btn .ic{ margin-right:0; }
.qe-list-icon-btn:hover{ background:rgba(18,18,18,0.06); }
.qe-list-icon-btn:active{ transform:scale(0.9); }
.qe-list-icon-btn.qe-danger{ color:var(--danger); border-color:rgba(var(--danger-rgb),0.3); }
.qe-list-icon-btn.qe-danger:hover{ background:rgba(var(--danger-rgb),0.07); }
.qe-list-meta{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.qe-list-row{ animation:motionFadeUp 260ms cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .qe-list-row{ animation:none; } }

/* ---- form shell ---- */
.qe-form{ display:flex; flex-direction:column; gap:14px; }
.qe-form-title{ font-weight:700; font-size:var(--fs-md); }

.qe-field-row{ display:flex; gap:10px; }
.qe-field{ flex:1; min-width:0; }
.qe-field-narrow{ flex:0 0 42%; }
.qe-label{ display:block; font-size:var(--fs-xs); font-weight:600; margin-bottom:6px; color:rgba(18,18,18,0.6); }

/* ---- card block (used for "ตัวโจทย์" and "เฉลยและวิธีทำ") ---- */
.qe-block{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px; overflow:hidden;
}
.qe-block-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 12px; background:rgba(18,18,18,0.03); border-bottom:1px solid var(--line);
}
.qe-block-title{ font-weight:700; font-size:var(--fs-base); }
.qe-toolbar{ display:flex; align-items:center; gap:2px; }
.qe-tool-btn{
  width:30px; height:30px; border-radius:9px; border:1px solid transparent;
  background:transparent; display:flex; align-items:center; justify-content:center;
  color:var(--ink); flex-shrink:0; padding:0; transition:background 150ms ease, transform 120ms ease;
}
.qe-tool-btn .ic{ margin-right:0; }
.qe-tool-btn:hover{ background:rgba(18,18,18,0.08); }
.qe-tool-btn:active{ transform:scale(0.88); }
.qe-tool-btn.active{ background:var(--black); color:#fff; }
.qe-tool-btn:disabled{ opacity:0.3; cursor:default; }
.qe-tool-btn:disabled:hover{ background:transparent; }
.qe-tool-btn:disabled:active{ transform:none; }

.qe-block-body{ padding:12px 14px 14px; }
.qe-textarea{
  width:100%; border:none; border-radius:12px; padding:12px 14px; font-size:var(--fs-base);
  background:rgba(18,18,18,0.05); color:var(--ink); outline:none; font-weight:500;
  font-family:inherit; box-sizing:border-box; resize:vertical;
  transition:outline-offset 150ms ease, box-shadow 150ms ease;
}
.qe-textarea:focus{ outline:2px solid var(--black); outline-offset:2px; box-shadow:0 0 0 4px rgba(18,18,18,0.06); }

.qe-mathbar-collapse{ margin-top:10px; }
.qe-mathbar-collapse.hidden{ display:none; }
.qe-mathbar-collapse .rc-toolbar{ margin:0; }

.qe-image-chip{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.qe-image-thumb{ width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.qe-image-chip-label{ font-size:var(--fs-sm); color:var(--muted); }
.qe-image-uploading{ font-size:var(--fs-sm); color:var(--muted); margin-top:8px; }

/* ---- choices ---- */
.qe-choices{ display:flex; flex-direction:column; gap:8px; }
.qe-choice-row{
  display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px;
  padding:6px 10px; transition:border-color .15s, background-color .15s;
}
.qe-choice-row.qe-choice-correct{ border-color:var(--black); background:rgba(18,18,18,0.035); }
.qe-choice-letter{
  width:20px; flex-shrink:0; font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-align:center;
}
.qe-choice-row.qe-choice-correct .qe-choice-letter{ color:var(--ink); }
.qe-choice-radio-wrap{ flex-shrink:0; display:flex; }
.qe-choice-radio-wrap input[type=radio]{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:999px;
  border:2px solid var(--line); margin:0; position:relative; cursor:pointer; flex-shrink:0; background:var(--card);
  transition:border-color 150ms ease, transform 120ms ease;
}
.qe-choice-radio-wrap input[type=radio]:active{ transform:scale(0.88); }
.qe-choice-radio-wrap input[type=radio]:checked{ border-color:var(--black); background:var(--black); }
/* Round 11: the dot's centering already depends on `transform:translate(-50%,-50%)` — reusing
   the shared motionPop keyframe here would clobber that translate with motionPop's own
   `scale()`-only transform and knock the dot off-center for the duration of the animation. This
   is a dedicated keyframe instead, which keeps the same translate centering at every step and
   only animates the scale on top of it. */
.qe-choice-radio-wrap input[type=radio]:checked::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  transform:translate(-50%,-50%); border-radius:999px; background:#fff;
  animation:qeRadioDotPop 260ms var(--ease-pop);
}
@keyframes qeRadioDotPop{
  0%{ transform:translate(-50%,-50%) scale(0); }
  60%{ transform:translate(-50%,-50%) scale(1.35); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .qe-choice-radio-wrap input[type=radio]:checked::after{ animation:none; } }
.qe-choice-text{ flex:1; min-width:0; border:none; background:transparent; font-size:var(--fs-base); padding:6px 2px; outline:none; font-family:inherit; color:var(--ink); }
.qe-choice-remove{ background:none; border:none; color:var(--danger); font-size:var(--fs-md); cursor:pointer; flex-shrink:0; padding:4px; line-height:1; transition:transform 120ms ease, opacity 150ms ease; }
.qe-choice-remove:active{ transform:scale(0.8); opacity:0.7; }
.qe-add-choice{
  align-self:flex-start; border:1.5px dashed var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:6px 14px; font-size:var(--fs-sm); font-weight:600; margin-top:2px;
  transition:background 150ms ease, transform 120ms ease;
}
.qe-add-choice:hover{ background:rgba(18,18,18,0.04); }
.qe-add-choice:active{ transform:scale(0.96); }

/* ---- footer ---- */
.qe-status{ margin:0; }
.qe-footer{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.qe-footer-spacer{ flex:1; }
.qe-btn-save{
  background:var(--black); color:#fff; border:none; border-radius:999px; padding:11px 26px;
  font-size:var(--fs-base); font-weight:700; transition:transform 120ms ease, opacity 150ms ease;
}
.qe-btn-save:active{ transform:scale(0.98); }
.qe-btn-cancel{
  background:transparent; color:var(--ink); border:1.5px solid var(--line); border-radius:999px;
  padding:11px 20px; font-size:var(--fs-base); font-weight:600; transition:background 150ms ease, transform 120ms ease;
}
.qe-btn-cancel:active{ transform:scale(0.98); background:rgba(18,18,18,0.05); }
.qe-btn-delete-icon{
  width:42px; height:42px; border-radius:999px; border:1.5px solid rgba(var(--danger-rgb),0.3);
  background:transparent; color:var(--danger); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background 150ms ease, transform 120ms ease;
}
.qe-btn-delete-icon .ic{ margin-right:0; }
.qe-btn-delete-icon:hover{ background:rgba(var(--danger-rgb),0.07); }
.qe-btn-delete-icon:active{ transform:scale(0.9); }

@media (max-width: 480px){
  .qe-field-row{ flex-direction:column; }
  .qe-field-narrow{ flex:1; }
}

/* ---------------- "สร้างโจทย์" admin panel — visual restyle to match the marketplace upload
   wizard's look (see .mkt-field/.mkt-wizard-progress/.mkt-mode-btn/.mkt-review-card/.mkt-toc-row
   in styles/marketplace.css). Style-only: scoped entirely under #admin-practice-panel, so nothing
   outside this screen changes. Same tabs, same JS logic — renderAdminPracticePanel()/
   renderWizardTab()/renderTemplatesTab()/renderDatasetsTab() in js/exam-generator.js are unchanged
   apart from a few class= hooks added purely so these rules have something to target. ---------------- */

/* header intro card, spacing */
#admin-practice-panel{ padding-bottom:12px; }

/* tab switcher: plain chip row -> segmented pill control, same shape as the wizard's step/mode
   toggle look elsewhere in the app */
#admin-practice-panel .profile-tabs{
  background:rgba(18,18,18,0.045); border-radius:999px; padding:4px; gap:2px; flex-wrap:nowrap; overflow-x:auto;
}
#admin-practice-panel .profile-tabs .chip{
  flex:1; text-align:center; border:none; border-radius:999px; background:transparent;
  color:var(--muted); font-weight:600; white-space:nowrap;
}
#admin-practice-panel .profile-tabs .chip.active{ background:var(--black); color:#fff; }

/* every sub-tab's body sits inside one rounded card, like .mkt-wallet-card / .mkt-review-card */
#admin-practice-panel #gen-body{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 16px;
}

/* field labels -> small uppercase muted caption, matching .mkt-field label */
#admin-practice-panel .admin-label{
  font-size:var(--fs-2xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;
  margin-bottom:8px;
}
#admin-practice-panel .admin-input{
  border-radius:14px; background:rgba(18,18,18,0.045);
}
#admin-practice-panel .admin-input:focus{ background:rgba(18,18,18,0.06); }

/* callouts (empty-state / status messages) -> softer rounded card instead of a dashed box */
#admin-practice-panel .setup-banner{
  background:rgba(var(--info-rgb),0.14); border:1px dashed rgba(18,18,18,0.16); border-radius:14px;
}

/* generic field-group rows get the same breathing room as .mkt-field (18px stacking) */
#admin-practice-panel #gen-body > div{ margin-bottom:18px; }
#admin-practice-panel #gen-body > div:last-child{ margin-bottom:0; }
#admin-practice-panel #gen-body > hr{ display:none; } /* replaced by card spacing above, kept in DOM for older callers */

/* list/summary rows (dataset list, wizard preview questions) -> rounded card row, same family as
   .mkt-toc-row / .mkt-sale-row */
#admin-practice-panel .gen-card-row{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:8px;
}
#admin-practice-panel .gen-card-row:last-child{ margin-bottom:0; }
#admin-practice-panel .gen-section-title{ font-weight:800; font-size:var(--fs-base); margin-bottom:2px; }

/* mode-choice buttons (wizard's "จำนวนต่อระดับ" vs "เปอร์เซ็นต์") reuse the segmented pill style
   above via .profile-tabs, so no separate rule needed there — this covers the topic checkboxes
   that sit just above them, giving them the same pill look as the marketplace wizard's chips */
#admin-practice-panel .gen-topic-chip{
  display:flex; align-items:center; gap:5px; border:1.5px solid var(--line); border-radius:20px;
  padding:6px 13px; font-size:var(--fs-sm); cursor:pointer; background:var(--paper);
}

/* buttons: consistent pill CTA sizing, same as the upload wizard's nav buttons */
#admin-practice-panel .btn{ border-radius:999px; }