/* Curriculum planner (/curriculum) -- self-contained page, own tiny CSS file
   on top of main.css's shared primitives (.btn/.form-group/.form-row/
   .settings-section/.settings-card/.empty-state/.hidden/.toast-container),
   same convention as public/css/grades.css. Classes prefixed cp- throughout.

   --cp-accent is this page's own identity color (violet) -- distinct from
   Grades' blue and from the user's general theme --accent, so the page
   reads as its own product rather than Grades-with-different-copy. Used
   for the category-card border, progress fill, and the small icon marks. */
:root { --cp-accent: #8B5CF6; }
:root[data-theme="dark"] { --cp-accent: #A78BFA; }

#cp-loading {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.625rem;
  background: var(--bg);
}

#cp-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

.cp-wordmark-hero { font-weight: 800; letter-spacing: -0.5px; color: #6D28D9; font-size: 1.375rem; }
:root[data-theme="dark"] .cp-wordmark-hero { color: #C4A5FF; }
/* Header's own copy is smaller than the loading screen's -- same
   proportions Grades uses for its header vs. loading-screen wordmark. */
.cp-header .cp-wordmark-hero { font-size: 1.0625rem; }

/* Full icon+wordmark lockup (not just plain text) -- same structural
   pattern as .grades-logo-lockup/.grades-logomark in main.css, but with
   its own violet-tinted shadow instead of reusing those (which carry a
   blue-tinted drop-shadow baked in, matching Grades specifically). */
.cp-logo-lockup { display: flex; align-items: center; gap: 0.4em; }
.cp-logomark {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(30,10,60,0.3)) drop-shadow(0 6px 16px rgba(139,92,246,0.45));
}

.cp-header {
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cp-header .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--text); }
.cp-header #cp-btn-close { margin-left: auto; }

@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cp-fade-in { animation: cpFadeIn 0.2s ease; }

.cp-main {
  flex: 1; overflow-y: auto; padding: 1.25rem 1.25rem 3rem;
  max-width: 42rem; width: 100%; margin: 0 auto;
}

/* Overall progress summary, above the category cards */
.cp-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.875rem 1.125rem; border-radius: var(--radius); background: var(--surface2);
  margin-bottom: 1.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--text);
}

.cp-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 1.125rem 1.25rem; border-radius: var(--radius); border: 1px dashed var(--border2);
  background: var(--surface2);
}
.cp-empty-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem;
  background: color-mix(in srgb, var(--cp-accent) 16%, transparent);
  color: var(--cp-accent);
}
.cp-empty-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.cp-empty-sub { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; max-width: 34rem; }
.cp-empty-actions { display: flex; gap: 0.5rem; margin-top: 0.375rem; flex-wrap: wrap; }
.cp-hint { font-size: 0.71875rem; color: var(--text-dim); margin-top: 0.375rem; line-height: 1.4; }

.cp-draft-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.cp-draft-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.cp-draft-row:first-of-type { border-top: 1px solid var(--border); }
.cp-draft-row-name { flex: 1; font-size: 0.8125rem; color: var(--text); display: flex; align-items: center; gap: 0.4375rem; }
.cp-draft-row-tag {
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 14%, transparent);
  border-radius: 999px; padding: 0.125rem 0.4375rem; flex-shrink: 0;
}
/* A real published source was actually found and used for this draft
   (see draftCurriculumCategories' groundingMetadata check) -- distinct
   from the default violet "Estimate" tag above so it visibly reads as a
   different, more trustworthy kind of result, not the same guess. */
.cp-draft-row-tag-public {
  color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent);
}
.cp-draft-row input[type="number"] { width: 5rem; }
.cp-draft-sources { display: inline; }
.cp-draft-sources a { color: var(--cp-accent); }
.cp-draft-row-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.125rem; }
.cp-draft-row-remove:hover { color: var(--red); }

/* Category cards */
.cp-category-card {
  border: 1px solid var(--border); border-left: 3px solid var(--cp-accent);
  border-radius: var(--radius); padding: 0.875rem 1rem;
  margin-bottom: 0.875rem; background: var(--surface);
  transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.cp-category-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cp-category-head { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; }
.cp-category-name { font-weight: 700; font-size: 0.875rem; color: var(--text); flex: 1; }
.cp-category-progress-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.cp-category-move, .cp-category-edit, .cp-category-delete {
  background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.125rem; flex-shrink: 0;
  display: flex; align-items: center;
}
.cp-category-move:hover, .cp-category-edit:hover { color: var(--cp-accent); }
.cp-category-delete:hover { color: var(--red); }
.cp-category-move:disabled { opacity: 0.3; cursor: default; }
.cp-category-move:disabled:hover { color: var(--text-dim); }

.cp-progress-track {
  height: 0.5rem; border-radius: 999px; background: var(--surface2); overflow: hidden; margin-bottom: 0.625rem;
}
.cp-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cp-accent), color-mix(in srgb, var(--cp-accent) 70%, white));
  transition: width 0.3s var(--ease);
}

.cp-course-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0;
  border-top: 1px solid var(--border); font-size: 0.8125rem;
  border-radius: 0.375rem;
}
.cp-course-row:first-of-type { border-top: none; }
.cp-course-row:hover { background: var(--surface2); }
.cp-course-status {
  background: none; border: 1.5px solid var(--border2); border-radius: 5px; width: 1.125rem; height: 1.125rem;
  flex-shrink: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.cp-course-status svg { width: 0.625rem; height: 0.625rem; opacity: 0; }
.cp-course-status.completed { background: var(--cp-accent); border-color: var(--cp-accent); }
.cp-course-status.completed svg { opacity: 1; color: #fff; }
.cp-course-name { flex: 1; color: var(--text); }
.cp-course-name.completed { text-decoration: line-through; color: var(--text-muted); }
.cp-course-credits { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cp-course-term {
  color: var(--text-muted); font-size: 0.6875rem; white-space: nowrap;
  background: var(--surface2); border-radius: 999px; padding: 0.09375rem 0.5rem;
}
.cp-course-move, .cp-course-edit, .cp-course-delete {
  background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.125rem; flex-shrink: 0;
  display: flex; align-items: center;
}
.cp-course-move:hover, .cp-course-edit:hover { color: var(--cp-accent); }
.cp-course-delete:hover { color: var(--red); }
.cp-course-move:disabled { opacity: 0.3; cursor: default; }
.cp-course-move:disabled:hover { color: var(--text-dim); }

.cp-inline-form { display: flex; gap: 0.5rem; margin-top: 0.625rem; flex-wrap: wrap; }
.cp-inline-form input, .cp-inline-form select { width: auto; flex: 1; min-width: 7.5rem; }

/* Edit-in-place mode (category head / course row swap to this) */
.cp-edit-row { display: flex; align-items: center; gap: 0.4375rem; flex: 1; flex-wrap: wrap; }
.cp-edit-row input[type="text"] { flex: 2; min-width: 6rem; }
.cp-edit-row input[type="number"] { width: 4.5rem; }
.cp-edit-save, .cp-edit-cancel {
  background: none; border: none; cursor: pointer; padding: 0.125rem; flex-shrink: 0;
  display: flex; align-items: center;
}
/* CP_ICON_CHECK (also used by .cp-course-status, sized separately there)
   carries no width/height of its own -- unsized here it would render at
   the SVG spec's 300x150 default intrinsic size. */
.cp-edit-save svg { width: 0.75rem; height: 0.75rem; }
.cp-edit-save { color: var(--cp-accent); }
.cp-edit-cancel { color: var(--text-dim); }
.cp-edit-cancel:hover { color: var(--red); }

/* School combobox -- same positioning shape as grades.css's .ng-school-*,
   duplicated per this page's self-contained convention. */
.cp-school-combobox { position: relative; }
.cp-school-results {
  position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 13.75rem; overflow-y: auto; z-index: 20;
}
.cp-school-result {
  padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
  display: flex; align-items: baseline; gap: 0.375rem;
}
.cp-school-result-country { color: var(--text-muted); font-size: 0.71875rem; }
.cp-school-result:hover, .cp-school-result.active { background: var(--surface2); }
.cp-school-result-empty { padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }

/* High-school branch: country picker, Italy credito scolastico calculator */
.cp-checkbox-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem;
  color: var(--text); margin: 0.75rem 0; cursor: pointer;
}
.cp-checkbox-row input { width: auto; margin: 0; }

.cp-hs-result {
  margin-top: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.cp-hs-result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.875rem; font-size: 0.8125rem; color: var(--text);
  border-top: 1px solid var(--border);
}
.cp-hs-result-row:first-child { border-top: none; }
.cp-hs-result-value { font-weight: 700; color: var(--cp-accent); white-space: nowrap; }
.cp-hs-result-band { font-weight: 500; color: var(--text-muted); }
.cp-hs-result-total { background: var(--surface2); font-weight: 700; }
.cp-hs-result-total .cp-hs-result-value { font-size: 0.9375rem; }
.cp-hs-year-hint { font-size: 0.6875rem; color: var(--text-dim); margin-top: 0.25rem; display: block; }