/* ==========================================================================
   BAMS Planner — styles
   Progress summary is the visual focus. Category color coding distinguishes
   GE / Common / Mandated / Major / Production / Capstone at a glance.
   ========================================================================== */

:root {
  --color-primary: #1e73be;
  --color-primary-hover: #185f9c;

  --color-bg: #f9f9f5;
  --color-surface: #ffffff;
  --color-border: #e5e5e0;
  --color-text: #1c1c1c;
  --color-text-muted: #4d4d4d;

  --color-ge: #1e73be;
  --color-common: #7c3aed;
  --color-mandated: #64748b;
  --color-major: #0d9488;
  --color-production: #d97706;
  --color-capstone: #dc2626;

  /* Foregrounds are darker than the usual mid-tone of each hue because they
     are drawn on their own tinted background, not on white. The original
     mid-tones measured 2.3–3.3:1 against these tints; these clear 6:1. */
  --color-planned: #475569;
  --color-planned-bg: #f1f5f9;
  --color-in-progress: #92400e;
  --color-in-progress-bg: #fef3c7;
  --color-completed: #065f46;
  --color-completed-bg: #d1fae5;

  --color-on-primary: #ffffff;
  /* Form fields sit slightly inset against the white surface in light mode,
     and slightly raised against the dark surface in dark mode. */
  --color-input-bg: #f9f9f5;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Footer bar: a dark block in both themes, so it reads as a base rail. */
  --color-bar-bg: #1c1c1c;
  --color-bar-text: #f2f2ec;
}

/* ---------- Dark theme ----------
   theme.js sets data-theme on <html>, defaulting to the OS preference.
   Category hues are brightened so the coloured left borders stay readable
   against the dark surface. Print output stays light — see @media print. */
:root[data-theme="dark"] {
  --color-primary: #58a6f0;
  --color-primary-hover: #7bb8f5;

  --color-bg: #1a1a17;
  --color-surface: #232320;
  --color-border: #35352f;
  --color-text: #f2f2ec;
  --color-text-muted: #a5a59c;

  --color-ge: #60a5fa;
  --color-common: #a78bfa;
  --color-mandated: #94a3b8;
  --color-major: #2dd4bf;
  --color-production: #fbbf24;
  --color-capstone: #f87171;

  --color-planned: #94a3b8;
  --color-planned-bg: #2a2f36;
  --color-in-progress: #fbbf24;
  --color-in-progress-bg: #3d2f14;
  --color-completed: #34d399;
  --color-completed-bg: #123328;

  --color-on-primary: #10233a;
  --color-input-bg: #30302b;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --color-bar-bg: #100f0e;
  --color-bar-text: #e6e3dc;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over any rule that sets `display`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ---------- Header ---------- */

.app-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}

.app-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.home-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.home-link:hover { color: var(--color-primary); }

.theme-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }

.header-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- Buttons ---------- */

.btn {
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 8px 15px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost { background: transparent; }

/* ---------- Dashboard ---------- */

.dashboard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.dashboard-headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.dashboard-headline-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.dashboard-headline h2 {
  margin: 0;
  font-size: 1.6rem;
}

.dashboard-pct {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
}

.progress-bar {
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}

/* A category you have not started yet still needs a track — it is what makes
   the card legible as a progress card — but it should not carry the same
   visual weight as one that is actually moving. */
.progress-bar.is-empty { opacity: 0.4; }

.progress-bar-lg { height: 14px; margin-bottom: 24px; }

.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Pinned to three columns rather than auto-fit: with six categories, auto-fit
   lands on four-plus-two at some widths and orphans the last row. Three and
   two both divide six evenly. */
.dashboard-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .dashboard-groups { grid-template-columns: repeat(2, 1fr); }
}

.dashboard-group-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 4px solid var(--group-color, var(--color-primary));
}

.dashboard-group-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.dashboard-group-units {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.dashboard-nongwa h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.dashboard-nongwa-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-nongwa-item {
  flex: 1 1 200px;
}

.dashboard-nongwa-item .dashboard-group-units { margin-bottom: 6px; }

/* ---------- List controls ---------- */

.list-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.checkbox-label:hover { color: var(--color-text); }
.checkbox-label input { accent-color: var(--color-primary); cursor: pointer; }

.list-controls select {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
}

/* ---------- Course list ---------- */

.course-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-category-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 20px 0 4px;
  padding-left: 2px;
}

.course-category-req {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.course-category-heading:first-child { margin-top: 0; }

/* ---------- Collapsible category sections ----------
   Each category is a <details>, so open/closed state, keyboard operation and
   screen-reader semantics come from the element rather than from script. */

.course-category {
  display: flex;
  flex-direction: column;
}

.course-category-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The default triangle is replaced by a chevron that rotates, so the control
   matches the rest of the page rather than the browser's own furniture. */
.course-category-heading-sub::-webkit-details-marker { display: none; }
.course-category-heading-sub { list-style: none; }

.course-category-heading-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
  margin-right: 2px;
}

.course-category[open] > .course-category-heading-sub::before {
  transform: rotate(45deg);
}

.course-category-heading-sub:hover { opacity: 1; }

/* Category headings nested inside the unassigned pool. Indented behind a rule
   and set smaller than a term heading, so the hierarchy is readable at a
   glance: term > category > course. */
.course-category-heading-sub {
  cursor: pointer;
  user-select: none;
  margin: 16px 0 2px;
  padding-left: 11px;
  border-left: 2px solid var(--color-border);
  font-size: 0.72rem;
  color: var(--color-text);
  opacity: 0.75;
}

.course-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--group-color, var(--color-primary));
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.course-row-main {
  flex: 1 1 260px;
  min-width: 0;
}

/* Code, units and any flag share a baseline row, so the units read as part of
   the course identity instead of floating in the middle of the card. */
.course-code-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

/* Opened up from 0.88/0.85rem: the old pair were close enough in size that
   neither read as the primary line. */
.course-code {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.course-title {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.course-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  opacity: 0.85;
  margin-top: 2px;
}

/* ---------- Prerequisites ---------- */

.course-prereq {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.course-prereq-seq { opacity: 0.75; font-style: italic; }

/* Unmet prerequisites are a hint, not a block — amber rather than an error
   red, since the planner cannot know about consent of instructor or credit. */
.course-prereq-flag {
  color: var(--color-in-progress);
  font-weight: 600;
}

/* ---------- Page notice ---------- */

.page-notice {
  max-width: 920px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-in-progress);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.page-notice a { color: var(--color-primary); }

.course-units {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 2px 8px;
  flex: 0 0 auto;
}

.unverified-flag {
  color: var(--color-in-progress);
  font-weight: 600;
}

.course-row select,
.course-row input[type="text"] {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
}

.course-row select { flex: 0 0 140px; }
.course-row input[type="text"] { flex: 0 0 130px; }

/* ---------- Status ----------
   These were previously written as `.status-*` alone, which lost on
   specificity to `.course-row select` and so never rendered at all. Scoping
   them to the select both fixes that and lets the control read as a status
   pill rather than one more grey dropdown. */

.course-row select.status-none { color: var(--color-text-muted); }

.course-row select.status-planned,
.course-row select.status-in-progress,
.course-row select.status-completed {
  font-weight: 600;
}

.course-row select.status-planned {
  color: var(--color-planned);
  background: var(--color-planned-bg);
  border-color: var(--color-planned);
}

.course-row select.status-in-progress {
  color: var(--color-in-progress);
  background: var(--color-in-progress-bg);
  border-color: var(--color-in-progress);
}

.course-row select.status-completed {
  color: var(--color-completed);
  background: var(--color-completed-bg);
  border-color: var(--color-completed);
}

/* ---------- Completed courses ----------
   A passed course is settled business. It stays readable and editable, but
   recedes so the eye lands on what still needs deciding. The left edge takes
   the completion colour, overriding the category stripe: once a course is
   done, "finished" matters more than which bucket it came from. */
.course-row.is-completed {
  border-left-color: var(--color-completed);
  background: transparent;
}

.course-row.is-completed .course-code {
  color: var(--color-text-muted);
}

.course-row.is-completed .course-title,
.course-row.is-completed .course-note,
.course-row.is-completed .course-prereq {
  opacity: 0.6;
}

.course-row.is-in-progress {
  border-left-color: var(--color-in-progress);
}

/* ---------- Print ---------- */

.print-only { display: none; }

@media print {
  /* A Plan of Study is printed on white paper, so the light palette is
     forced back on even when the app is being viewed in dark mode —
     otherwise the PDF comes out as a black page. */
  :root, :root[data-theme="dark"] {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-border: #e5e5e0;
    --color-text: #1c1c1c;
    --color-text-muted: #4d4d4d;
    --color-primary: #1e73be;
    --color-ge: #1e73be;
    --color-common: #7c3aed;
    --color-mandated: #64748b;
    --color-major: #0d9488;
    --color-production: #d97706;
    --color-capstone: #dc2626;
    --color-planned: #475569;
    --color-planned-bg: #f1f5f9;
    --color-in-progress: #92400e;
    --color-in-progress-bg: #fef3c7;
    --color-completed: #065f46;
    --color-completed-bg: #d1fae5;
    --color-input-bg: #ffffff;
    --shadow: none;
  }

  .no-print { display: none !important; }
  .print-only { display: block; margin: 0 0 20px; }
  body { background: #fff; color: #1c1c1c; }
  main { max-width: none; padding: 0; }
  .dashboard { box-shadow: none; border: none; padding: 0; margin-bottom: 20px; }
  .course-row { break-inside: avoid; box-shadow: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .app-header { padding: 14px 16px; }
  main { padding: 0 14px 40px; }
  .course-row select, .course-row input[type="text"] { flex: 1 1 120px; }
}

/* ---------- Shared version / copyright bar ---------- */

.site-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 14px 24px;
  background: var(--color-bar-bg);
  color: var(--color-bar-text);
  font-size: 0.78rem;
}

.site-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-bar a:hover { opacity: 0.75; }

.site-bar-version {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}


/* ---------- Term load summary ---------- */

.term-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.term-summary h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.term-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.term-summary-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  font-size: 0.8rem;
}

.term-summary-name { font-weight: 600; white-space: nowrap; }

.term-summary-units {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.term-summary-count {
  flex-basis: 100%;
  color: var(--color-text-muted);
  opacity: 0.8;
  font-size: 0.73rem;
}

/* The term picker is a select now, so it matches the status dropdown. */
.course-row select.course-term { flex: 0 0 150px; }

/* ---------- Backup reminder ---------- */

.backup-reminder {
  max-width: 920px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-completed);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.backup-reminder strong { color: var(--color-text); }

/* The notice carries a short list now, so it needs block spacing. */
.page-notice p { margin: 0 0 6px; }
.page-notice ul { margin: 0; padding-left: 20px; }
.page-notice li { margin-bottom: 2px; }