/**
 * MathLib — Consolidated CSS for Moodle math questions
 * Load via local/mathlib plugin
 */

/* Base input styling */
input.formulas_number {
  height: 30px !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Input width variants - add mathlib-input-width-N to question wrapper */
.mathlib-input-width-35 input.formulas_number { width: 35px !important; }
.mathlib-input-width-40 input.formulas_number { width: 40px !important; }
.mathlib-input-width-45 input.formulas_number { width: 45px !important; }
.mathlib-input-width-50 input.formulas_number { width: 50px !important; }
.mathlib-input-width-55 input.formulas_number { width: 55px !important; }
.mathlib-input-width-60 input.formulas_number { width: 60px !important; }
.mathlib-input-width-65 input.formulas_number { width: 65px !important; }
.mathlib-input-width-70 input.formulas_number { width: 70px !important; }
.mathlib-input-width-75 input.formulas_number { width: 75px !important; }
.mathlib-input-width-80 input.formulas_number { width: 80px !important; }
.mathlib-input-width-85 input.formulas_number { width: 85px !important; }
.mathlib-input-width-90 input.formulas_number { width: 90px !important; }
.mathlib-input-width-95 input.formulas_number { width: 95px !important; }
.mathlib-input-width-100 input.formulas_number { width: 100px !important; }


/* Video embed */
.mathlib-video-wrap { display: flex; justify-content: center; }
.mathlib-video-container { width: 100%; max-width: 520px; }
.mathlib-video-container iframe { aspect-ratio: 16/9; width: 100% !important; }

/* Video grid (Multiplication) */
.video-grid { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.video-item { flex: 1; min-width: 200px; max-width: 280px; text-align: center; }
@media (max-width: 520px) { .video-item { min-width: 100%; max-width: 100%; } }

/* Feedback layout (You said / Correct answer) — side-by-side panels, centered */
.que.formulas .feedback,
.que.formulas .specificfeedback,
.que.formulas .outcome {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  text-align: left;
}
.que.formulas .mathlib-feedback-compare,
.mathlib-feedback-compare {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 10px auto !important;
  width: 100% !important;
  max-width: 600px !important;
  clear: both;
  justify-content: center;
}
.que.formulas .mathlib-feedback-panel,
.mathlib-feedback-panel {
  flex: 1 1 200px !important;
  min-width: 180px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center !important;
  box-sizing: border-box;
}

/* Coordinates JSXGraph */
.jxgbox { width: 100% !important; max-width: 500px !important; aspect-ratio: 1/1 !important; height: auto !important; margin: 0 auto; }

/* Pictograms / Tally */
.question-container { max-width: 100%; margin: 0 auto; }
.tally-table { width: 100% !important; border-collapse: collapse !important; border: 2px solid #7e8c8d !important; font-size: 1rem; }

/* Pictograms drag-drop (Q4, Q5, Q7, Q8) — hide inputs, table, circles, drop-boxes */
.que.formulas:has(.pictogram-table) input.formulas_number { display: none !important; }
.pictogram-table {
  width: 100%; max-width: 600px; border-collapse: collapse; border: 2px solid #7e8c8d;
  font-size: 1rem; margin: 20px auto;
}
.pictogram-table td { padding: 10px 8px; border: 2px solid #7e8c8d; text-align: center; vertical-align: middle; }
.pictogram-table td:nth-child(1), .pictogram-table td:nth-child(2) { font-size: 1.5rem; }
.pictogram-table td:nth-child(3), .pictogram-table td:nth-child(4), .pictogram-table td:nth-child(5), .pictogram-table td:nth-child(6) { padding: 5px 1px; }
.ice-circle {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid #ccc;
  display: flex; flex-direction: row; overflow: hidden; background: #fff; margin: 0 auto;
}
.hf { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; overflow: hidden; }
.hf::after { content: '🍦'; }
.he { flex: 1; background: transparent; }
.blank-cell { width: 50px; height: 50px; }
.drop-box {
  width: 60px; height: 60px; border: 2px dashed #666; background-color: #f5f5f5;
  display: flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0 auto;
}
.drop-box.drag-over { background-color: #fff3e0; border-color: #FF9800; }
.draggable-item { cursor: move; cursor: grab; touch-action: none; }
.draggable-item:active { cursor: grabbing; }
.draggable-item.dragging { opacity: 0.5; }
.key-drag-container { display: flex; gap: 20px; max-width: 600px; margin: 20px auto; }
.key-box, .drag-box-container {
  flex: 1; padding: 12px 20px; background-color: #fff; border-radius: 8px;
  border: 2px solid #7e8c8d; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Pictograms feedback table (Q4, Q5, Q7, Q8) */
.feedback-table {
  width: 100%;
  max-width: 500px;
  margin: 10px auto;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed;
}
.feedback-table td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}
.feedback-row-label {
  font-weight: bold;
  text-align: left !important;
  background-color: #f5f5f5;
  width: 120px;
  font-size: 1.25rem;
}
.feedback-circle-cell {
  width: 70px;
}
@media (max-width: 768px) {
  .feedback-table { font-size: 0.9rem; }
  .feedback-table td { padding: 4px 2px; }
  .feedback-row-label { width: 80px; font-size: 0.85rem; }
  .feedback-circle-cell { width: 50px; }
  .feedback-table .ice-circle,
  .feedback-table .full-circle,
  .feedback-table .half-circle,
  .feedback-table .quarter-box,
  .feedback-table .full-box,
  .feedback-table .half-box,
  .feedback-table .three-q-box { width: 32px; height: 32px; }
  .feedback-table .hf,
  .feedback-table .qf { font-size: 12px; }
}
@media (max-width: 400px) {
  .feedback-row-label { width: 70px; font-size: 0.8rem; }
  .feedback-circle-cell { width: 40px; }
  .feedback-table .ice-circle,
  .feedback-table .full-circle,
  .feedback-table .half-circle,
  .feedback-table .quarter-box,
  .feedback-table .full-box,
  .feedback-table .half-box,
  .feedback-table .three-q-box { width: 28px; height: 28px; }
  .feedback-table .hf,
  .feedback-table .qf { font-size: 10px; }
}
@media (max-width: 768px) {
  .pictogram-table { font-size: 0.9rem; max-width: 100%; table-layout: fixed; width: 100%; }
  .pictogram-table td { padding: 4px 3px; }
  .pictogram-table td:nth-child(1), .pictogram-table td:nth-child(2) { font-size: 0.95rem; }
  .pictogram-table td:nth-child(2) { text-align: right; }
  .pictogram-table td:nth-child(3), .pictogram-table td:nth-child(4), .pictogram-table td:nth-child(5), .pictogram-table td:nth-child(6) { padding: 4px 1px; }
  .ice-circle { width: 32px; height: 32px; }
  .hf { font-size: 12px; }
  .drop-box { width: 40px; height: 40px; }
  .drop-box .ice-circle { width: 32px !important; height: 32px !important; }
  .drop-box .hf { font-size: 12px !important; }
  .draggable-bank .ice-circle { width: 38px; height: 38px; }
  .draggable-bank .hf { font-size: 14px; }
  .draggable-bank { gap: 15px; padding: 15px; }
  .key-drag-container { flex-direction: column; gap: 10px; max-width: 100%; }
  .drag-box-container { order: -1; width: 100%; }
  .key-box { align-self: flex-end; flex: none; width: auto; }
}
@media (max-width: 400px) {
  .pictogram-table { font-size: 0.85rem; }
  .pictogram-table td { padding: 3px 2px; }
  .pictogram-table td:nth-child(1), .pictogram-table td:nth-child(2) { font-size: 0.9rem; }
  .pictogram-table td:nth-child(3), .pictogram-table td:nth-child(4), .pictogram-table td:nth-child(5), .pictogram-table td:nth-child(6) { padding: 3px 1px; }
  .ice-circle { width: 28px; height: 28px; }
  .hf { font-size: 10px; }
  .drop-box { width: 35px; height: 35px; }
  .drop-box .ice-circle { width: 26px !important; height: 26px !important; }
  .drop-box .hf { font-size: 10px !important; }
  .draggable-bank .ice-circle { width: 32px; height: 32px; }
  .draggable-bank .hf { font-size: 12px; }
  .key-drag-container { gap: 8px; }
}
.tally-table td { padding: 10px 8px !important; border: 2px solid #7e8c8d !important; text-align: center !important; vertical-align: middle !important; }
.tally-table img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.tally-table input.formulas_number { height: 30px; width: 50px; margin: 0 auto; text-align: center; vertical-align: middle; display: inline-block; border: 1px solid #7e8c8d; border-radius: 4px; font-size: 1rem; }
.instruction-table { border: 2px solid #7e8c8d !important; margin-bottom: 15px; }
.instruction-table td { padding: 12px !important; text-align: left !important; }
.answer-section { border: 2px solid #7e8c8d !important; margin-top: 15px; }
.answer-section td { padding: 15px 10px !important; }
.feedback-container { margin-top: 20px; padding: 15px; border: 2px solid #7e8c8d; background-color: #fff8dc; border-radius: 5px; }
.feedback-container .correctness { margin: 10px 0; }
@media (max-width: 768px) { .tally-table { font-size: 1.1rem; } .tally-table td { padding: 12px 6px !important; } .tally-table input.formulas_number { height: 44px; width: 60px; font-size: 1.1rem; } }
@media (max-width: 480px) { .tally-table { font-size: 0.95rem; } .tally-table td { padding: 8px 4px !important; } }

/* Superscript inputs */
[data-role="superscript"] input.formulas_number { width: 35px !important; height: 22px !important; font-size: 0.75em !important; }

.fmt-hidden { display: none !important; }

/* Center "Try another question like this one" on web (matches mobile app) */
.que .extra-feedback {
  text-align: center !important;
}