/* ==========================================================================
   EVALUATION REPORT MODAL — dedicated stylesheet
   All styles for the evaluation result modal (#evaluation-result-modal).

   Template:  partials/evaluation_result_modal.html
   JS wiring: app.js  → renderEvaluationReport()

   Component hierarchy (matches the HTML order inside the modal):
   ┌─ #evaluation-result-modal  ← full-screen backdrop
   │  ┌─ .modal-content.eval-result-modal  ← the white card
   │  │  ├─ .modal-header          (section 1)  title + subtitle
   │  │  ├─ .eval-modal-content    (section 2)  scrollable report body
   │  │  │   ├─ .eval-modal-summary           (section 3)  3-column KPI strip
   │  │  │   │   ├─ .eval-modal-section       Overall  → .kpi, .meta
   │  │  │   │   ├─ .eval-modal-section       Questions → .progress > .progress-bar
   │  │  │   │   └─ .eval-modal-section       Components → .progress > .progress-bar
   │  │  │   ├─ .eval-modal-section [Scoring]             (section 4)
   │  │  │   ├─ .eval-modal-section [Recommendations]     (section 5)
   │  │  │   │   └─ ul.eval-rec-list
   │  │  │   ├─ details.eval-acc #eval-module-1           (section 6)
   │  │  │   │   └─ .eval-acc-body → .eval-modal-section [Arch Report]
   │  │  │   │                     → .eval-modal-section [Requirements]
   │  │  │   │                        └─ .eval-kpis (FR/NFR pills)
   │  │  │   ├─ details.eval-acc #eval-module-2           (section 7)
   │  │  │   │   └─ .eval-acc-body → .eval-qa-list
   │  │  │   │                        └─ .eval-qa-item (.correct / .incorrect)
   │  │  │   └─ details.eval-acc #eval-module-3           (section 8)
   │  │  │       └─ .eval-acc-body → .eval-tradeoff-list
   │  │  │                            └─ .eval-tradeoff-item → .to-badge
   │  │  └─ .modal-actions         (section 9)  Download / Save buttons
   └──┘
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   1.  MODAL SHELL — sizing, scroll behaviour, hidden scrollbars
       Controls the outer card dimensions, its flex column layout, and
       ensures only the report body (.eval-modal-content) scrolls while
       the header and footer stay pinned.
   ───────────────────────────────────────────────────────────────────────── */


/* Width preset for the evaluation-result modal card */
.eval-result-modal {
  width: min(820px, 96vw);
}

/* Flex column so header / body / footer stack vertically */
#evaluation-result-modal .modal-content.eval-result-modal {
  height: 85vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;                /* outer card never scrolls — only .eval-modal-content does */
}

/* The inner content wrapper — this is the scroll container */
.eval-modal-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#evaluation-result-modal .eval-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  overflow: auto;
  padding-bottom: 84px;            /* space so last card isn't hidden behind sticky footer */
  scrollbar-width: none;           /* Firefox – hide scrollbar */
  -ms-overflow-style: none;        /* IE/Edge – hide scrollbar */
}

/* Chrome / Safari – hide scrollbar */
#evaluation-result-modal .eval-modal-content::-webkit-scrollbar {
  display: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   2.  MODAL HEADER — title row
       The "Evaluation result" <h2> and subtitle <p>.
       Stays fixed at top while report body scrolls.
   ───────────────────────────────────────────────────────────────────────── */

#evaluation-result-modal .modal-header {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 10px;
}


/* ─────────────────────────────────────────────────────────────────────────
   3.  SUMMARY KPI STRIP — the 3-column grid at the top of the report
       Contains three .eval-modal-section cards:
         • Overall  — shows .kpi number (e.g. "62/100") and .meta text
         • Questions — shows correct/total + .progress bar
         • Components — shows used/total + .progress bar
   ───────────────────────────────────────────────────────────────────────── */

.eval-modal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  /* background: #f8fafc; */
  /* border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px; */
  height: fit-content;
}

/* Each of the three KPI cards inside the strip */
.eval-modal-summary .eval-modal-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  box-sizing: border-box;
  background: #768df89f;           /* default translucent purple tint */
  border-color: rgba(15, 23, 42, 0.08);
}

/* Score-based card colours — JS adds these based on the score value */
/* Good: ≥ 70 — green tint */
.eval-modal-summary .eval-modal-section.kpi-good {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}
/* Okay: 40–69 — amber/yellow tint */
.eval-modal-summary .eval-modal-section.kpi-okay {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.25);
}
/* Weak: < 40 — red tint */
.eval-modal-summary .eval-modal-section.kpi-weak {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

/* Big headline number — e.g. "62/100" */
.eval-modal-summary .kpi {
  font-size: 0.93rem;
  font-weight: 800;
  color: #0f172a;
}

/* Secondary text — e.g. "Correct: 2/4" or problem description */
.eval-modal-summary .meta {
  color: #3b4a5f;
  font-size: 0.93rem;
  margin-top: 4px;
}

/* Small gap before the progress bar */
.eval-modal-summary .progress {
  margin-top: 6px;
}


/* ─────────────────────────────────────────────────────────────────────────
   4.  PROGRESS BARS — the horizontal bar inside Questions & Components
       <div class="progress">           ← track (background)
         <div class="progress-bar">     ← filled portion (JS sets width)
       </div>
   ───────────────────────────────────────────────────────────────────────── */

.progress {
  background: #e6eefc;
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  width: 0%;                       /* JS updates via data-q-scorebar / data-c-scorebar */
  transition: width 400ms ease;
  border-radius: 8px;
}

/* Progress bar colours that match the KPI card tint */
.kpi-good .progress-bar  { background: linear-gradient(90deg, #4ade80, #22c55e); }
.kpi-okay .progress-bar  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.kpi-weak .progress-bar  { background: linear-gradient(90deg, #f87171, #ef4444); }


/* ─────────────────────────────────────────────────────────────────────────
   5.  SECTION CARDS — white rounded cards used throughout the report
       Every distinct "block" (Scoring, Recommendations, Requirements,
       Arch Report, MCQ Review, Trade-off Evaluation) is wrapped in
       a <div class="eval-modal-section">.
   ───────────────────────────────────────────────────────────────────────── */

.eval-modal-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  height: fit-content;
  padding: 10px 12px;
}

/* Section heading — e.g. "Scoring", "Recommendations" */
.eval-modal-section h4 {
  display: flex;
  text-align: center;
  justify-content: center;
  color: #000715;
}

/* Body text inside a section card */
.eval-modal-section .meta {
  color: #475569;
  font-size: 0.93rem;
  line-height: 1.45;
}

.eval-modal-section strong {
  color: #0f172a;
  font-size: 0.93rem;
}

/* Spacing between stacked section cards */
#evaluation-result-modal .eval-modal-section {
  margin: 8px 0;
}

#evaluation-result-modal .eval-modal-section h4 {
  font-size: 1.2rem;
  text-align: center;
  padding-bottom: 10px;
}

#evaluation-result-modal .meta {
  line-height: 1.45;
}

/* Subtle <hr> dividers the JS may inject */
#evaluation-result-modal hr {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  margin: 10px 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   6.  RECOMMENDATION LISTS — bullet lists under "Recommendations",
       "Strengths", "Improve", "Missing dimensions", etc.
       <ul class="eval-rec-list"> inside a .eval-modal-section.
   ───────────────────────────────────────────────────────────────────────── */

.eval-modal-section ul {
  margin: 6px 0 0 16px;
  padding: 0;
}

.eval-modal-section li {
  line-height: 1.5;
  margin: 4px 0;
  font-size: 0.93rem;
}

.eval-rec-list {
  margin-top: 6px;
  font-size: 0.93rem;
}


/* ─────────────────────────────────────────────────────────────────────────
   7.  ACCORDION MODULES — the <details> / <summary> sections
       Module 1 (Arch Report + Requirements), Module 2 (MCQ), Module 3 (TO).
       Each is: <details class="eval-acc" id="eval-module-N">
                  <summary class="eval-acc-summary">
                    <div class="eval-acc-title">Module N</div>
                    <div class="eval-acc-sub">subtitle</div>
                  </summary>
                  <div class="eval-acc-body"> … </div>
                </details>
   ───────────────────────────────────────────────────────────────────────── */

/* Outer card for each accordion */
.eval-acc {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  margin: 6px 0;
}

/* Clickable header bar */
.eval-acc-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  font-size: 0.85rem;
  -ms-user-select: none;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 1));
}

/* Prevent child elements stealing click from summary */
.eval-acc-summary * {
  pointer-events: none;
}

/* Chevron indicator — rotates when open */
.eval-acc-summary::after {
  content: '▾';
  color: #64748b;
  font-size: 0.85rem;
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.eval-acc[open] .eval-acc-summary::after {
  transform: rotate(180deg);
}

/* Hide browser's default disclosure triangle */
.eval-acc summary::-webkit-details-marker { display: none; }

/* Module title — e.g. "Module 1 Summary" */
.eval-acc-title {
  font-weight: 600;
  font-size: 0.93rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* Subtitle — e.g. "Requirements • Architectural Report" */
.eval-acc-sub {
  font-size: 0.9rem;
  font-weight: 700;
  color: #64748b;
  text-align: right;
}

@media (max-width: 720px) {
  .eval-acc-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .eval-acc-sub {
    text-align: left;
  }
}

/* Inner content area when the accordion is expanded */
.eval-acc-body {
  padding: 10px 12px 8px;
}

/* When open: just add bottom padding — NO nested scroll.
   All scrolling happens in the parent .eval-modal-content so
   the user can always scroll past an open module to the next one. */
#evaluation-result-modal details.eval-acc[open] .eval-acc-body {
  padding-bottom: 12px;
}

/* Section cards INSIDE accordions — flatten to lightweight sub-sections */
#evaluation-result-modal details.eval-acc .eval-modal-section {
  background: #ffffff;
  border: 0;
  border-radius: 12px;
}
#evaluation-result-modal details.eval-acc[open] .eval-modal-section {
  margin: 8px 0;
}

/* Keep items from touching the scroll container edge */
#evaluation-result-modal details.eval-acc[open] .eval-tradeoff-item,
#evaluation-result-modal details.eval-acc[open] .eval-qa-item {
  margin-right: 2px;
}

/* Ensure accordion details elements are visible */
#evaluation-result-modal details.eval-acc {
  display: block;
}

/* Extra spacing when open */
.eval-acc[open] {
  margin-bottom: 10px;
}
.eval-acc[open] .eval-acc-summary {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}


/* ─────────────────────────────────────────────────────────────────────────
   8.  MODULE 2 — MCQ REVIEW
       List of answered questions, each in a .eval-qa-item card.
       Green border = correct, red = incorrect.
       <div class="eval-qa-list">
         <div class="eval-qa-item correct">
           <div class="qa-title">Question text</div>
           <div class="qa-sub">Explanation text</div>
         </div>
       </div>
   ───────────────────────────────────────────────────────────────────────── */

.eval-qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.eval-qa-item {
  background: #ffffff;
  border: 1px solid #e6eef6;
  border-radius: 10px;
  padding: 10px 12px;
}

.eval-qa-item.correct {
  border-color: #22c55e;           /* green = answered correctly */
}

.eval-qa-item.incorrect {
  border-color: #fca5a5;           /* red = answered incorrectly */
}

.eval-qa-item .qa-title {
  font-weight: 700;
  font-size: 0.93rem;
  color: #0f172a;
}

.eval-qa-item .qa-sub {
  font-size: 0.93rem;
  color: #475569;
  line-height: 1.45;
  margin-top: 2px;
}

/* Explanation shown after correct/your answer */
.eval-qa-item .qa-explanation {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

/* Component + difficulty pills on MCQ items */
.qa-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  text-transform: capitalize;
}
.qa-pill-diff {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}


/* ─────────────────────────────────────────────────────────────────────────
   9.  MODULE 3 — TRADE-OFF EVALUATION
       List of trade-off questions the user answered.
       Each item may show a score badge.
       <div class="eval-tradeoff-list">
         <div class="eval-tradeoff-item">
           <div class="to-title">Question</div>
           <span class="to-badge">8/10</span>
           <div class="to-answer">User's answer</div>
         </div>
       </div>
   ───────────────────────────────────────────────────────────────────────── */

.eval-tradeoff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}

.eval-tradeoff-item {
  background: #ffffff;
  padding: 10px 12px;
  width: 100%;
}

.eval-tradeoff-item .to-title {
  font-weight: 700;
  font-size: 0.93rem;
  color: #0f172a;
  line-height: 1.35;
  width: 100%;
}

.eval-tradeoff-item .to-answer {
  font-size: 0.93rem;
  color: #475569;
  line-height: 1.45;
  margin-top: 4px;
}

/* Score badge — small pill next to each trade-off item */
.eval-tradeoff-item .to-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #eef2ff;            /* default; JS may override per score */
  color: #3730a3;
}


/* ─────────────────────────────────────────────────────────────────────────
   10. MODAL FOOTER — sticky Download / Save buttons
       <div class="modal-actions">
         <button id="evaluation-result-download">Download report (PDF)</button>
         <button id="evaluation-result-save">Save</button>
       </div>
       Stays pinned at the bottom while the report scrolls.
   ───────────────────────────────────────────────────────────────────────── */

#evaluation-result-modal .modal-actions {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0;
  z-index: 2;
}


/* ─────────────────────────────────────────────────────────────────────────
   11. KPI PILLS — small tag-like pills for FR/NFR indicators
       Inside Module 1 → Requirements section.
       <div class="eval-kpis" data-frnfr-pills> … </div>
   ───────────────────────────────────────────────────────────────────────── */

.eval-kpis {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ─────────────────────────────────────────────────────────────────────────
   12. LEGACY HELPERS — assessment table detail rows, result cards, chips
       These styles power the older "assessment-table" view that shows
       evaluation results in a table with expandable detail rows.
       Still used as a fallback / in the left-panel assessment list.

       .eval-result-card  — flex column holding score + analysis
       .eval-summary      — flex row with two .eval-score halves
       .eval-analysis     — "used components" / "missing" chip row
       .chip              — small rounded pill for component names
       .component-missing — red text for missing component names
       .assessment-table  — the <table> itself
   ───────────────────────────────────────────────────────────────────────── */

.eval-result { padding: 0.9rem; }
.eval-large { font-size: 2.2rem; font-weight: 800; margin: 0.4rem 0 0.9rem 0; }
.eval-result h4 { padding: 5px;}
.eval-result ul { margin-top: 0.25rem; margin-left: 0.9rem; margin-bottom: 0.4rem; }

.eval-result-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px;
  flex-direction: column;
}

.eval-summary { display: flex; gap: 12px; width: 100%; }
.eval-summary .eval-score { flex: 0 0 50%; min-width: 0; }
.eval-score-label { font-size: 0.93rem; color: #475569; margin-bottom: 6px; font-weight: 600; }
.eval-score-value { font-size: 0.93rem; color: #0f172a; margin-top: 6px; font-weight: 700; }

/* Component analysis chips (used / missing) */
.eval-analysis {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.eval-analysis .used { font-size: 0.93rem; color: #334155; margin-bottom: 0; font-weight: 600; }
.missing-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.chip {
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.93rem;
  color: #0f172a;
  border: 1px solid #e6eef6;
}
.component-missing { color: #b91c1c; margin-top: 0; font-weight: 600; }

/* Detail-row separator in the assessment table */
.eval-details-row td {
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 12px;
  background: #fbfdff;
}

/* Assessment table */
.assessment-table { width: 100%; border-collapse: collapse; font-family: inherit; }
.assessment-table thead th {
  text-align: left;
  padding: 12px 8px;
  color: #475569;
  font-weight: 600;
  font-size: 0.93rem;
  border-bottom: 1px solid #cbd5e1;
  vertical-align: middle;
}
.assessment-table tbody td {
  padding: 10px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #cbd5e1;
  font-size: 0.93rem;
  color: #334155;
}
.assessment-table .open-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.assessment-table .open-button:hover { background: #1e40af; }

/* Hide the main-row bottom border when a detail row follows it */
.assessment-table tbody tr:has(+ .eval-details-row) td {
  border-bottom: none;
}

/* Responsive: on small screens stack the score columns */
@media (max-width: 640px) {
  .eval-summary { flex-direction: column; }
  .eval-summary .eval-score { flex: 1 1 100%; }
  .eval-analysis { width: 100%; }
}


/* ==========================================================================
   13. SCORING LOADING MODAL — shown while AI evaluates the design
       Full-screen overlay with rotating system design facts.
   ========================================================================== */

.scoring-modal {
  width: min(460px, 92vw);
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 20px;
  background: linear-gradient(170deg, #ffffff 0%, #f0f4ff 100%);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.18), 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.scoring-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* ── Spinner ─────────────────────────────────────────────── */
.scoring-spinner {
  position: relative;
  width: 72px;
  height: 72px;
}

.scoring-spinner-svg {
  width: 72px;
  height: 72px;
  animation: scoring-rotate 1.4s linear infinite;
}

.scoring-spinner-svg circle {
  stroke: #6366f1;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: scoring-dash 1.4s ease-in-out infinite;
}

.scoring-spinner-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  animation: scoring-pulse 2s ease-in-out infinite;
}

@keyframes scoring-rotate {
  100% { transform: rotate(360deg); }
}

@keyframes scoring-dash {
  0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

@keyframes scoring-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ── Text ────────────────────────────────────────────────── */
.scoring-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

.scoring-modal-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ── Fact card ───────────────────────────────────────────── */
.scoring-fact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  animation: scoring-fadeIn 0.5s ease;
}

.scoring-fact-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6366f1;
}

.scoring-fact-text {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.55;
  margin: 8px 0 0;
}

@keyframes scoring-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bouncing dots ───────────────────────────────────────── */
.scoring-progress-dots {
  display: flex;
  gap: 6px;
}

.scoring-progress-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  animation: scoring-bounce 1.4s ease-in-out infinite;
}

.scoring-progress-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.scoring-progress-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes scoring-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}