:root {
  --font: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;
}

/* setting up two panels side by side */
body {
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  height: 100vh;
  width: 100%;
  font-family: var(--font)
}

#site-title {
  font-size: 1rem;
  color: #B90124;
  margin: 0;
  white-space: nowrap; 
}

#catalog-wrapper {
  flex: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
}

#catalog-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0e8e8;
}

#catalog {
  overflow-y: scroll;
  padding: 16px;
}

#dept-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1
}

#dept-nav button {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  color: #333;
}

#dept-nav button:hover {
  border-color: #B90124;
  color: #B90124;
}

#search {
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e8d8d8;
  border-radius: 8px;
  font-family: var(--font);
  max-width: 500px;
  font-size: 0.95rem;
  outline: none;
}

#search:focus {
  border-color: #B90124;
}

#resize-handle {
  width: 5px;
  cursor: col-resize;
  background: #f0e8e8;
  flex-shrink: 0;
}

#resize-handle:hover, #resize-handle.dragging {
  background: #B90124;
}

#plan {
  flex: 2;
  display: flex;
  flex-direction: column;
  background-color: #f7f5f5;
  transition: flex 0.25s ease;
}

/* collapsed: narrow strip — whole thing is clickable to open the plan */
#plan.collapsed {
  flex: 0 0 64px;
  overflow: hidden;
  cursor: pointer;
}

/* toggle arrow — full-width bar at the top of the panel
   lives outside #plan-inner so padding changes to the scroll area never move it */
#plan-toggle {
  display: block;
  width: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 1px solid #f0e8e8;
  font-size: 1.5rem;
  cursor: pointer;
  color: #B90124;
  padding: 10px 0;
  text-align: center;
  line-height: 1;
}

#plan-toggle:hover {
  background-color: #fdf0f2;
}

/* the scrollable content area — everything except the toggle and the collapsed label */
#plan-inner {
  flex: 1;
  overflow-y: scroll;
  padding: 24px;
}

/* when collapsed, hide the inner content */
#plan.collapsed #plan-inner {
  display: none;
}

/* "My Course Plan" rotated — only visible when the panel is collapsed */
#plan-collapsed-label {
  display: none;
  writing-mode: vertical-lr;
  font-family: var(--font);
  font-size: 1.1rem;
  color: #B90124;
  letter-spacing: 0.06em;
}

#plan.collapsed #plan-collapsed-label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

#modal-overlay {
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#modal-overlay.hidden {
  display: none;
}

#modal-box {
  background: white;
  border-radius: 10px;
  padding: 3rem; 
  max-width: 560px;
  width: 90%;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

#modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #888;
}

/* stats table */
#modal-stats tbody tr td:first-child {
  color: #888;
  font-size: 1.10rem;
  padding-right: 16px;
  padding-bottom: 6px;
  white-space: nowrap;
}

#modal-name {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

#modal-description {
  font-size: 1.10rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

#modal-stats td {
  font-size: 1.05rem;
  padding-bottom: 8px;
}

/* department headers */
h2 {
  color: #B90124;
  scroll-margin-top: 24px;
}

/* divider between departments */
hr {
  border: none;
  border-top: 1px solid #f0e8e8;
  margin-bottom: 12px;
}

.course-card {
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 12px;
  margin: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*  keep a small top gap so it doesn't look crushed */
.course-card p {
  margin: 5px 0 0 0;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* minmax lets cards grow if they need to (rotation label, grade level line)
     while keeping a consistent minimum height across all cards */
  grid-auto-rows: minmax(120px, auto);
  gap: 8px;
}

/* selected state on catalog card */
.course-card--selected {
  border-color: #B90124;
  background-color: #fdf0f2;
}

/* grade column boxes in the plan */
.grade-column {
  border: 1px solid #e8d8d8;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background-color: #ffffff;
}

.grade-column h3 {
  color: #B90124;
  margin-top: 0;
}

/* inside each grade column where cards get dropped */
.drop-zone {
  list-style: none;
  padding: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

/* placeholder text shown when a drop zone has no cards yet */
.drop-zone:empty::before {
  content: 'Drag courses here';
  grid-column: 1 / -1;
  text-align: center;
  color: #aaa;
  font-size: 0.9rem;
  padding: 14px 8px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* mini card inside the plan */
.plan-card {
  background-color: #ffffff;
  border: 1px solid #e8d8d8;
  border-radius: 6px;
  padding: 10px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* + button on mini cards to add a note */
.note-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  cursor: pointer;
  color: #aaa;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

/* text input that appears when you click the + */
.note-input {
  margin-top: 6px;
  border: 1px solid #e8d8d8;
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--font);
  font-size: 0.78rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.note-input:focus {
  border-color: #B90124;
}

/* saved note displayed on the card */
.note-text {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #888;
  font-family: Georgia, serif;
}

.hidden {
  display: none;
}

.plan-card strong {
  padding-right: 26px;
}

.plan-card span {
  color: #888;
  font-size: 0.78rem;
}

/* status tag on plan cards — color is set inline by JS to match the catalog card icon */
.plan-status {
  font-size: 0.72rem;
  margin-top: 3px;
  display: block;
}

/* card row: badge (left) · course name (fills space) · ⋮ button (right) */
.card-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

/* name fills the space between badge and â‹® button */
.card-row strong {
  flex: 1;
}

/* shows which grade year a course has been added to (e.g. "9th") */
.grade-badge {
  font-size: 0.68rem;
  color: #B90124;
  font-weight: bold;
  background: #fdf0f2;
  border-radius: 3px;
  padding: 1px 5px;
}

/* â‹® button on catalog cards for setting a status */
/* bigger padding = easier to click without changing the visual size much */
.status-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  font-size: 1.1rem;
  padding: 6px 8px;
  line-height: 1;
  margin-left: auto;
  /* negative margin pulls back any extra space so the card layout isn't affected */
  margin-right: -4px;
}

.status-btn:hover {
  opacity: 0.7;
}


/* dropdown that appears under the â‹® button */
.status-dropdown {
  position: absolute;
  top: 34px;
  right: 6px;
  background: white;
  border: 1px solid #e8d8d8;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 10;
  min-width: 148px;
}

.status-dropdown button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  color: #333;
}

.status-dropdown button:hover {
  background: #fdf0f2;
  color: #B90124;
}

/* green tint when a course is marked as taken previously */
.course-card--taken {
  border-color: #2e7d32;
  background-color: #f0f7f0;
}

/* "Remove status" option at the bottom of the dropdown */
.status-dropdown button[data-status="none"] {
  color: #aaa;
  font-style: italic;
  border-top: 1px solid #f0e8e8;
}

/* brief popup at the bottom of the screen for prereq warnings */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font);
  z-index: 200;
  max-width: 620px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* plan header: title on the left, print button on the right */
#plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

#plan-header h2 {
  margin: 0;
}

#print-btn {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  color: #555;
}

#print-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

/* same style as the print button, just tucked below the tracker */
#clear-btn {
  display: block;
  margin: 20px auto 8px;
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  color: #555;
}

#clear-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

/* responsive layout, stack panels vertically on mobile */

@media (max-width: 768px) {
  #app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  #catalog-wrapper {
    flex: none;
    width: 100%;
    overflow: visible;
  }

  /* catalog scrolls naturally with the page on mobile */
  #catalog {
    overflow-y: visible;
  }

  /* hide the drag handle, not useful on mobile */
  #resize-handle {
    display: none !important;
  }

  /* plan panel sits below the catalog, full width, always expanded on mobile */
  #plan, #plan.collapsed {
    flex: none;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  /* always show plan-inner on mobile */
  #plan.collapsed #plan-inner {
    display: block !important;
  }

  #plan-inner {
    overflow-y: visible;
    padding: 16px;
  }

  /* hide the toggle arrow and collapsed label on mobile, plan is always open */
  #plan-toggle,
  #plan-collapsed-label,
  #help-btn {
    display: none !important;
  }

  /* catalog header: let the search bar take a full row below the nav */
  #catalog-header {
    flex-wrap: wrap;
  }

  #search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* drop zones fill the full width in one column */
  .drop-zone {
    grid-template-columns: 1fr;
  }
}

/* print / save as pdf: hide catalog, show plan full-width */
@media print {
  #catalog-wrapper { display: none; }
  #resize-handle { display: none; }
  /* always print the plan fully expanded even if it was collapsed on screen */
  #plan, #plan.collapsed { flex: 1; overflow: visible; display: flex; flex-direction: column; }
  #plan.collapsed #plan-inner { display: block !important; }
  #plan-inner { overflow: visible; padding: 0; }
  #plan-toggle, #plan-collapsed-label { display: none !important; }
  #app { display: block; }

  /* swap the rounded box for a simple top rule so a page break mid-section
     doesn't produce a split empty box with the header on one page */
  .grade-column {
    box-sizing: border-box;
    border: none;
    border-top: 2px solid #f0e8e8;
    border-radius: 0;
    padding: 8px 0 16px 0;
    margin-bottom: 0;
    background: none;
  }

  /* keep the grade heading glued to its first row of cards */
  .grade-column h3 { break-after: avoid; }

  /* hide empty grade years entirely — no "Drag courses here" on the printout */
  .grade-column:has(.drop-zone:empty) { display: none; }
  .drop-zone { min-height: 0; }
  .drop-zone:empty::before { display: none; }

  .drop-zone, .plan-card { box-sizing: border-box; }

  .note-btn, .status-btn, #print-btn { display: none !important; }
  .plan-card { margin-bottom: 6px; break-inside: avoid; }
  /* hide interactive elements that don't belong on a printout */
  .block-picker, #entry-grade-selector { display: none !important; }
  .block-counter { float: none; margin-left: 6px; }

  /* always show the distribution requirements when printing, even if collapsed */
  #dist-table-wrap.hidden { display: block !important; }
  #dist-toggle { display: none; }
}

/* entry grade selector */

#entry-grade-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: #888;
  flex-wrap: wrap;
}

.entry-btn {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 20px;
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
  color: #555;
}

.entry-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

.entry-btn.active {
  border-color: #B90124;
  color: #B90124;
  background-color: #fdf0f2;
}

/* per-grade block counter */

/* sits inside the grade h3, floated right */
.block-counter {
  font-size: 0.75rem;
  font-weight: normal;
  color: #bbb;
  float: right;
  margin-top: 4px;
  font-family: var(--font);
}

/* turns green when the total lands in the 18–21 range */
.block-counter.good {
  color: #2e7d32;
}

/* turns red when blocks are out of the 18–21 range */
.block-counter.off {
  color: #B90124;
}

/* block range picker on plan cards */

/* shows up on cards where the block count is a range */
.block-picker {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.block-picker-label {
  font-size: 0.7rem;
  color: #bbb;
}

.block-pick-btn {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: var(--font);
  color: #888;
  line-height: 1.4;
}

.block-pick-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

/* active = the currently selected block count */
.block-pick-btn.active {
  border-color: #B90124;
  color: #B90124;
  background-color: #fdf0f2;
}

/* distribution requirements tracker */

#dist-tracker {
  margin-top: 20px;
  background-color: #ffffff;
  border: 1px solid #e8d8d8;
  border-radius: 8px;
  overflow: hidden;
}

/* the clickable header row that collapses/expands the table */
#dist-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 0.9rem;
  color: #B90124;
  cursor: pointer;
  text-align: left;
}

#dist-toggle:hover {
  background-color: #fdf0f2;
}

#dist-arrow {
  font-size: 0.75rem;
  color: #B90124;
}

/* the table gets padding only when it's visible */
/* wrapper div gets the padding, table elements ignore padding */
#dist-table-wrap {
  padding: 20px 16px 24px;
}

#dist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

#dist-table td {
  padding: 3px 4px;
  vertical-align: top;
}

/* indent the subject name column so it doesn't hug the left edge */
#dist-table td:first-child {
  padding-left: 12px;
}

/* right-aligned credit count column */
.dist-count {
  text-align: right;
  color: #888;
  white-space: nowrap;
  padding-right: 8px;
}

/* third column: just the checkmark/x */
#dist-table tr td:last-child {
  width: 20px;
  text-align: center;
}

.dist-met   { color: #2e7d32; font-weight: bold; }
.dist-unmet { color: #B90124; }

/* indented sub-rows (e.g. Biology ✓  Chemistry ✗  Physics ✓) */
.dist-sub {
  font-size: 0.78rem;
  color: #888;
  padding: 0 4px 6px 16px;
}

.dist-sub .dist-met   { font-weight: normal; }
.dist-sub .dist-unmet { font-weight: normal; }

/* confirmation dialog  */

/* Chrome Translate can reach <dialog>  */
#confirm-dialog {
  border: none;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  max-width: 460px;
  width: 90%;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* dark overlay behind the dialog, same as the course detail modal */
#confirm-dialog::backdrop {
  background: rgba(0,0,0,0.7);
}

/* white-space: pre-line makes \n in the JS message show as real line breaks */
#confirm-message {
  margin: 0 0 1.5rem 0;
  white-space: pre-line;
}

#confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#confirm-cancel {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  cursor: pointer;
  color: #555;
}

#confirm-cancel:hover {
  border-color: #B90124;
  color: #B90124;
}

#confirm-ok {
  background: none;
  border: 1px solid #B90124;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  cursor: pointer;
  color: #B90124;
}

#confirm-ok:hover {
  background-color: #fdf0f2;
}

/* small grade-level note on catalog cards (e.g. "Grades 11, 12" or "Grade 9 only") */
.card-grade-levels {
  display: block;
  font-size: 0.7rem;
  color: #aaa;
  margin-top: 2px;
}

/* rotating math course note (e.g. "Offered: 2026, 2029, 2032") */
.card-rotation {
  display: block;
  font-size: 0.7rem;
  color: #aaa;
  margin-top: 2px;
  font-style: italic;
}

/* startup bounce animations */

/* plan strip bounces left-right to hint it can be opened */
@keyframes plan-bounce {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-14px); }
  30%  { transform: translateX(0); }
  45%  { transform: translateX(-9px); }
  60%  { transform: translateX(0); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.plan-bounce {
  animation: plan-bounce 0.9s ease 0.7s 1 both;
}

/* ? button pulses to draw attention to the tutorial */
@keyframes help-bounce {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.45); }
  40%  { transform: scale(1); }
  60%  { transform: scale(1.25); }
  80%  { transform: scale(1); }
  90%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.help-bounce {
  animation: help-bounce 0.8s ease 1.4s 1 both;
}

/* ? help button in the catalog header */

#help-btn {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-family: var(--font);
  font-size: 0.9rem;
  color: #888;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

#help-btn:hover {
  border-color: #B90124;
  color: #B90124;
}

/* help / tutorial overlay */

#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#help-overlay.hidden {
  display: none;
}

#help-box {
  background: white;
  border-radius: 10px;
  padding: 2.5rem 3rem;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  font-family: var(--font);
  color: #333;
  line-height: 1.6;
}

#help-box h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.2rem;
}

#help-box h3 {
  color: #B90124;
  font-size: 1rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

#help-box ul {
  margin: 0 0 0.5rem 0;
  padding-left: 1.2rem;
}

#help-box li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

#help-box p {
  font-size: 0.95rem;
  margin: 0.4rem 0 0.8rem 0;
}

#help-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #888;
}

#help-close:hover {
  color: #B90124;
}

/* ── d-block section inside each grade column ───────────────── */

/* hidden when the dblock-zone is empty so no stray heading shows */
.dblock-section:has(.dblock-zone:empty) {
  display: none;
}

.dblock-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0e8e8;
}

/* small "D-Blocks" label above the d-block mini-cards */
.dblock-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #bbb;
  margin: 0 0 6px 0;
  font-family: var(--font);
}

/* same grid layout as the regular drop-zone */
.dblock-zone {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

/* ── season picker on d-block mini-cards ─────────────────────── */

.season-picker {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  flex-wrap: wrap;
}

/* small Fall / Winter / Spring toggle buttons */
.season-btn {
  background: none;
  border: 1px solid #e8d8d8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: var(--font);
  color: #bbb;
  line-height: 1.4;
}

.season-btn.active {
  border-color: #B90124;
  color: #B90124;
  background-color: #fdf0f2;
}

.season-btn:hover:not(:disabled) {
  border-color: #B90124;
  color: #B90124;
}

/*  locked required course plan cards */

.plan-card--locked {
  cursor: default;
  border-color: #e8d8d8;
  background-color: #fdfbfb;
}

/* locked-dialog (info popup for required courses) */

#locked-dialog {
  border: none;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  max-width: 420px;
  width: 90%;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

#locked-dialog::backdrop {
  background: rgba(0,0,0,0.7);
}

#locked-message {
  margin: 0 0 1.5rem 0;
}

#locked-buttons {
  display: flex;
  justify-content: flex-end;
}

#locked-ok {
  background: none;
  border: 1px solid #B90124;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  cursor: pointer;
  color: #B90124;
}

#locked-ok:hover {
  background-color: #fdf0f2;
}