/* ===================== BASE ===================== */
html, body { height: 100%; }

body{
  background:#f5f7fb;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1f2937;
}

/* ===================== LAYOUT ===================== */
.rp-root{ height:100%; }

/* ===================== SIDEBAR ===================== */
.rp-sidebar{
  background: linear-gradient(180deg,#e8f1ff 0%,#f4f8ff 100%);
  border-right:1px solid #dbe5f5;
}

.rp-sidebar-body{
  overflow-y:auto;
  max-height:calc(100vh - 120px);
}

/* Unit cards */
.rp-unit-card{
  border:0;
  border-radius:8px;
  margin-bottom:8px;
  overflow:hidden;
}

.rp-unit-header{
  background:#fff;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #dbe5f5;
  border-radius:6px;
}
.rp-unit-header:hover{ background:#f0f6ff; }

.rp-unit-body{
  background:#f8fbff;
  padding:8px 10px;
}

/* Category links */
.rp-category-link{
  display:block;
  padding:6px 8px;
  font-size:.9rem;
  color:#1e40af;
  text-decoration:none;
  border-radius:4px;
}
.rp-category-link:hover{
  background:#e0ebff;
  text-decoration:none;
}

/* ===================== MAIN PANEL ===================== */
.rp-main{
  background:#f5f7fb;
  overflow-y:auto;
}

/* ===================== TOPIC CARDS ===================== */
.rp-topic-card{
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.rp-topic-card .card-header{
  background:#f9fafb;
  border-bottom:1px solid #e5e7eb;
}

/* ===================== MODAL (BIGGER + ONE SCROLL) ===================== */
/* Add this class to your modal dialog: rp-questions-dialog */
.rp-questions-dialog{
  max-width:68vw;
  width:68vw;
  margin:1vh auto;

}

#rpQuestionsModal .modal-content{
  height:96vh;
  border-radius:14px;
}

#rpQuestionsModal .modal-body{
  background:#f8fafc;
  padding:14px;
  overflow-y:auto;   /* ONE scroll for the whole modal */
  max-height:none;
}

/* ===================== QUESTION CARD ===================== */
.rp-question-card{
  background:#fff;
  border:1px solid #dbe5f5;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  height:auto;       /* IMPORTANT: no forced equal height */
  overflow:visible;  /* IMPORTANT: prevent internal scrollbars */
}

/* Header */
.rp-question-header{
  background: linear-gradient(90deg,#16a34a,#22c55e);
  color:#fff;
  padding:8px 12px;
  font-weight:600;
  font-size:.9rem;
  border-radius:10px 10px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Header icons */
.rp-q-tools i{
  margin-left:10px;
  cursor:pointer;
  opacity:.9;
}
.rp-q-tools i:hover{
  opacity:1;
  transform:scale(1.1);
}

/* ===================== QUESTION BODY ===================== */
/* IMPORTANT: no overflow here; let modal body scroll */
.rp-question-body{
  position:relative;
  overflow:visible;
}

/* Typography (match questions.html feel) */
.question-text,
.rp-question-answer{
  line-height:1.7;
  font-size:.95rem;
  padding:6px 6px 0 6px; /* NO bottom padding */
    margin-bottom: 0 !important;

  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}
/* Tighten spacing before Show Answer button */
.rp-question-body .text-center {
  margin-top: 4px !important;
}

/* Restore normal block flow (YOUR OLD CSS forced inline -> broke alignment) */
.question-text p{
  display:block;
  margin:0 0 4px 0;
  padding:0;
  padding-left: 6px;
}

.rp-question-answer p{
  display:block;
  margin:0 0 .65rem 0;
  padding:6px;
}
.rp-question-body .text-center.mt-3{
  margin-top: 2px !important;
}

.question-text p:last-child,
.rp-question-answer p:last-child{ margin-bottom:0; }

/* Inline helpers */
.question-text strong,
.question-text em,
.question-text b,
.question-text i,
.question-text u,
.question-text small,
.rp-question-answer span,
.rp-question-answer strong,
.rp-question-answer em,
.rp-question-answer b,
.rp-question-answer i,
.rp-question-answer u,
.rp-question-answer small{
  display:inline;
  margin:0;
}

/* Keep semantic line breaks (steps/working) */
.question-text br,
.rp-question-answer br{
  display:block;
  margin:4px 0;
}

/* ===================== DESMOS / SVG SAFETY ===================== */
.question-text svg,
.question-text canvas,
.question-text iframe,
.question-text .dcg-calculator-api-container,
.question-text .dcg-calculator-api-container > div{
  display:block;
  margin:12px auto;
  max-width:100%;
}

/* ===================== MEDIA SAFETY ===================== */
.rp-question-body img,
.rp-question-body svg,
.rp-question-body canvas,
.rp-question-body iframe,
.rp-question-body video{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===================== TABLES (RESTORE REAL TABLE LAYOUT) ===================== */
.rp-question-body table,
.question-text table,
.rp-question-answer table{
  display:table !important;
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.rp-question-body thead,
.question-text thead,
.rp-question-answer thead{ display:table-header-group !important; }

.rp-question-body tbody,
.question-text tbody,
.rp-question-answer tbody{ display:table-row-group !important; }

.rp-question-body tr,
.question-text tr,
.rp-question-answer tr{ display:table-row !important; }

.rp-question-body td,
.rp-question-body th,
.question-text td,
.question-text th,
.rp-question-answer td,
.rp-question-answer th{
  display:table-cell !important;
  vertical-align:top;
  height:auto !important;
}

/* If table is wide, allow horizontal scroll */
.question-text,
.rp-question-answer{ overflow-x:auto; }

/* ===================== MATHJAX (MATCH questions.html) ===================== */
.question-text mjx-container,
.rp-question-answer mjx-container {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.question-text mjx-container > svg,
.rp-question-answer mjx-container > svg {
  vertical-align: middle !important;
}


/* Display math behaves like block */
.question-text mjx-container[display="true"],
.rp-question-answer mjx-container[display="true"]{
  display:block;
  margin:.6em 0;
}

/* ===================== ANSWER BOX ===================== */
.rp-question-answer{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed #d1d5db;
  background:#f9fafb;
  position:relative;
  z-index:2;
}

/* Keep buttons clickable */
.rp-question-body button{
  position:relative;
  z-index:5;
}

/* ===================== SCROLLBARS ===================== */
.rp-sidebar-body::-webkit-scrollbar,
#rpQuestionsModal .modal-body::-webkit-scrollbar{ width:6px; }

.rp-sidebar-body::-webkit-scrollbar-thumb,
#rpQuestionsModal .modal-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:4px;
}
.rp-answer-steps{
  line-height:1.7;
}

/* ===================== ADMIN ACTIONS ===================== */
.rp-q-tools .edit-question,
.rp-q-tools .delete-question{
  margin-left:10px;
  cursor:pointer;
  opacity:.9;
}

.rp-q-tools .edit-question:hover{
  color:#facc15;
  transform:scale(1.15);
}

.rp-q-tools .delete-question:hover{
  color:#ef4444;
  transform:scale(1.15);
}
.question-text p:last-child {
  margin-bottom: 0 !important;
}