BRAND FONTS (self-hosted)
========================================= */
@font-face {
  font-family: "Plantin MT Pro";
  src:
    url("../assets/fonts/plantin/plantinmtprorg-webfont.woff2") format("woff2"),
    url("../assets/fonts/plantin/plantinmtprorg-webfont.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular Pro";
  src:
    url("../assets/fonts/circular/circularpro-medium-webfont.woff2") format("woff2"),
    url("../assets/fonts/circular/circularpro-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-bg: #faf7ed;
  --brand-dark: #596e5e;
  --brand-text: #262b26;
  --brand-muted: #1C1B1F4D;
  --brand-accent: #adb58f;
  --brand-surface: #ffffff;
  --divider-subtle: #dde2d5;
}

body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 200;
}

/* =========================
   Main content width shell
   ========================= */

.main-content {
  max-width: 90rem; /* 1440px */
  margin-left: auto;
  margin-right: auto;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--brand-bg); 
  border-bottom: 1px solid #dde2d5;
}

.logo-title {
  font-family: "Circular Pro", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--brand-dark);
}

.logo-text-block {
  display: flex;
  flex-direction: column;
}

/* hidden by default, shown in print */
.print-grade-label {
  display: none;
  font-family: "Plantin MT Pro", "Times New Roman", serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-accent); /* your light green */
  margin-top: 4px;
}

/* hidden by default, shown in print */
.print-header-title-block {
  display: none;
}

.print-header-title {
  font-family: "Circular Pro", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 40px;           /* same as .logo-title */
  line-height: 1;
  color: var(--brand-dark) !important;
}

.print-header-year {
  font-family: "Plantin MT Pro", "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--brand-accent); /* light green year */
  margin-top: 2px;
}

.nav-tab {
  border: none;
  background: transparent;
  padding-bottom: 4px;
  font-size: 15px;
  font-weight: 300;
  color: var(--brand-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.nav-tab-active {
  color: var(--brand-text);
  border-color: var(--brand-text);
}

.section-title {
  font-family: "Plantin MT Pro", "Times New Roman", serif;
  font-size: 48px;
  font-weight: 200;
  margin-bottom: 0.5rem;
  color: var(--brand-text);
}

.section-subtitle {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 200;
  color: var(--brand-text);
  max-width: 781px;
  width: 100%;
  line-height: 1.5;
  margin-left: 0;
}

/* Font helpers for branding */
.font-plantin {
  font-family: 'Plantin MT Pro', 'Times New Roman', serif;
  font-weight: 200;
}

.font-circular {
  font-family: 'Circular Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
}

/* Filter panel (Course list) */
.filter-panel {
  max-width: 1601px;
  width: 100%;
  padding: 24px;
  border-radius: 0 0 4px 4px;  
  border: 1px solid #dde2d5;
  border-top: none;            
  background-color: transparent;
}

.filter-panel-title {
  font-family: "Circular Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--brand-text);
  margin: 0 0 16px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

.filter-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dde2d5;
  padding: 8px 12px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300; /* DM Sans medium look */
  font-size: 14px;
  background-color: #ffffff;
}

.filter-placeholder {
  color: var(--brand-muted);
  font-weight: 300;
  font-size: 14px;
}

.filter-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--brand-muted);
}

.filter-chevron svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-text);
  transition: transform 0.15s ease;
}

.filter-chevron-open svg {
  transform: rotate(180deg);
}

.filter-control input {
  border: none;
  outline: none;
  width: 100%;
  font: inherit;
  background: transparent;
  color: var(--brand-text);
  font-size: 14px;
}

.filter-control input::placeholder {
  color: var(--brand-muted);
  font-weight: 300; /* DM Sans medium */
  font-size: 14px;
}

.filter-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .filter-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* --- Students (Manage + filter) ---------------------------------- */
.student-tools-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  margin: 6px 0 14px;
}

.student-tools-row .manage-students-toggle{
  grid-column: 2;
  justify-self: start;
}

/* Students dropdown sits under Grade */
.student-tools-row > .relative{
  grid-column: 1;
  min-width: 0;
}

/* Let List View span columns 3–4 (acts like one combined “wide” column) */
.student-tools-row .list-view-controls{
  grid-column: 3 / 5;        /* spans col 3 + col 4 */
  justify-self: end;         /* right-align the whole block */
  width: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;

  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
}

/* List View styling (match filter box tone) */
.student-tools-row .list-view-label{
  color: var(--brand-muted);
  font-size: 14px;
  font-weight: 300;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.student-tools-row .list-view-radio{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--brand-muted);
  font-size: 14px;
  font-weight: 300;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  white-space: nowrap;
}

.student-tools-row .list-view-radio input{
  width: 14px;
  height: 14px;
  accent-color: #596e5e;
}

/* ===== 4-col → 3-col ===== */
@media (max-width: 1180px){
  .student-tools-row{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .student-tools-row > .relative{
    grid-column: 1 !important;
  }

  .student-tools-row .manage-students-toggle{
    grid-column: 2 !important;
    justify-self: start;
  }

  .student-tools-row .list-view-controls{
    grid-column: 3 !important;
    justify-self: end;
    width: 100%;
  }
}

/* ===== 2 columns ===== */
@media (max-width: 980px){
  .student-tools-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .student-tools-row > .relative{
    grid-column: 1 !important;
  }

  .student-tools-row .list-view-controls{
    grid-column: 2 !important;
    justify-self: end;
    width: 100%;
  }

  .student-tools-row .manage-students-toggle{
    grid-column: 1 !important;
    grid-row: 2;
    justify-self: start;
  }
}

/* ===== Mobile: stack cleanly ===== */
@media (max-width: 640px){
  .student-tools-row{
    grid-template-columns: 1fr !important;
    row-gap: 10px;
  }

  .student-tools-row > .relative{
    grid-column: 1 !important;
    width: 100%;
    min-width: 0;
  }

  .student-tools-row .manage-students-toggle{
    grid-column: 1 !important;
    justify-self: start;
  }

  .student-tools-row .list-view-controls{
    grid-column: 1 !important;
    justify-self: start;
    width: 100%;
    justify-content: flex-start;

    flex-wrap: wrap;
    white-space: normal;
    gap: 10px;
  }

  .student-tools-row .list-view-label,
  .student-tools-row .list-view-radio{
    white-space: normal !important;
  }
}

.manage-students-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  color: var(--brand-muted);
  font-size: 14px;
  font-weight: 300;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.manage-students-toggle:hover{
  text-decoration: underline;
}

.student-filter-control{
  width: 100%;
  max-width: none;
  cursor: pointer;
}

.student-filter-control select{
  border:none;
  outline:none;
  width:100%;
  background:transparent;
  font: inherit;
  color: var(--brand-text);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}

.student-filter-control select.is-placeholder{
  color: var(--brand-muted);
}

.student-manager{
  border: 1px solid #dde2d5;
  border-radius: 4px;
  background: #ffffff;
  padding: 12px;
  margin-bottom: 16px;
}

.student-manager-help{
  font-size: 12px;
  color: var(--brand-muted);
  margin: 0 0 10px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
}

.student-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 12px;
}

.student-row{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Color picker square (replaces dot) */
.student-color-btn{
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
  cursor: pointer;
  background: #dde2d5;
}

/* Subtle remove X */
.student-remove-x{
  border: none;
  background: transparent;
  color: var(--brand-muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 6px;
}

.student-remove-x:hover{
  color: var(--brand-text);
  background: rgba(0,0,0,0.05);
}

.student-name-input{
  flex: 1;
  min-width: 0;
  border: 1px solid #dde2d5;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.student-row-btn{
  border: 1px solid #dde2d5;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  color: var(--brand-text);
}

.student-row-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.student-swatches{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  margin-top: 8px;
}

.student-swatch{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  cursor: pointer;
}

.student-swatch--selected{
  box-shadow: 0 0 0 2px rgba(89,110,94,0.55);
}

.student-add-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.student-add-row input{
  flex: 1;
}

.student-dd-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.student-dd-swatch{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
}

@media (max-width: 640px){
  .student-tools-row{
    grid-template-columns: 1fr;
  }
  .student-tools-row .manage-students-toggle{
    grid-column: auto;
  }
}

/* =========================
   Student rail toggle (bottom of cards)
   ========================= */

.student-rail-toggle-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;     
  padding: 0;
  margin-top: 8px;
  min-height: 22px;      
}

.student-rail-toggle {
  display: inline-flex;
  align-items: center;

  /* keep a little space between the person + chevron */
  gap: 8px;

  /* remove extra clickable padding so it doesn’t waste vertical space */
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;

  color: var(--brand-muted);
  cursor: pointer;
  line-height: 1;
  position: relative;
}

.student-rail-toggle:hover {
  color: #9eaa99;
}

.student-rail-toggle:focus {
  outline: none;
}

.student-rail-icon {
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.75; /* makes filled icon a touch more visible without getting “heavy” */
}

.student-rail-wedge {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 120ms ease;
}

/* Student assigned-count badge (on person icon) */
.student-count-badge{
  position: absolute;

  /* bottom-right overlap */
  right: 10px;
  bottom: -6px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  border-radius: 999px;
  background: #ffffff;
  color: var(--brand-muted);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  line-height: 1;
  font-weight: 600;

  border: 1px solid rgba(0,0,0,0.10);
  pointer-events: none; /* don’t steal clicks from the icon */
}

/* =========================
   Student chips (on cards)
   ========================= */

/* sits in the same row as the toggle button and + button */
.student-chip-row{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: 10px;
  flex: 1;
}

.student-chip{
  /* make it a real chip */
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 22px;
  padding: 0 10px;
  border-radius: 999px;

  /* filled with student color */
  background: var(--stu, #9eaa99);
  border: 1px solid rgba(0,0,0,0.08);

  /* readable label */
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.student-chip-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

.student-chip-text{
  display: inline-block;
  max-width: 160px;      /* prevents super long names blowing out the row */
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-chip-remove{
  position: static;          /* inline, not floating */
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;

  padding: 0 0 0 6px;        /* small gap after name */
  cursor: pointer;

  font-size: 11px;           /* tiny like filter-chip-remove */
  line-height: 1;
  color: rgba(255,255,255,0.9);
}

.student-chip-remove:hover{
  color: #ffffff;
  opacity: 1;
}

.student-chip--ghost .student-chip-dot{
  display: none;
}

/* Tiny marker before ghost list */
.student-ghost-marker {
  margin-left: 6px;
  margin-right: 2px;
  color: var(--brand-muted);
  opacity: 0.6;
  font-size: 12px;
  line-height: 1;
}

/* Ghost student chips — match combining & placement tips styling */
.student-chip--ghost{
  position: relative;          
  background-color: #f4f6fa;  
  border: 1px solid #dde2d5;   
  color: var(--brand-muted);  
  opacity: 0.75;          
}

/* Ghost chips should not show the color dot */
.student-chip--ghost .student-chip-dot{
  display: none;
}

/* Tiny "+" button on ghost student chips (overlaps like planning tags) */
.student-chip-apply{
  position: absolute;
  bottom: -4px;
  right: -4px;

  border: none;
  background-color: #ffffff; 
  border-radius: 999px;

  width: 14px;
  height: 14px;

  font-size: 11px;
  line-height: 1;
  padding: 0;

  cursor: pointer;
  color: var(--brand-muted);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.student-chip-apply:hover{
  opacity: 0.9;
}

/* TODO(cleanup): If ghost students are removed, delete .student-chip--ghost */

/* CLOSED = down (default). OPEN = right. */
.student-rail-toggle[aria-expanded="true"] .student-rail-wedge {
  transform: rotate(-90deg);
}

/* =========================
   List View: Minimal
   ========================= */

/* Minimal = hide ALL student rail UI (toggle + chips) */
.course-list-shell.listview-minimal .student-rail-toggle-row,
.course-list-shell.listview-minimal .student-chip-row{
  display: none !important;
}

.filter-control-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #f4f6fa;
  font-size: 13px;
  font-weight: 300;
  color: var(--brand-text);
}

/* Student filter chips: force white text on colored backgrounds */
.filter-chip--student{
  color: #fff;
}
.filter-chip--student .filter-chip-remove{
  color: #fff;
}

.filter-chip-remove {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: var(--brand-muted);
}

/* Student filter: "All Students" chip should look like tips box */
.filter-chip--any-student{
  background-color: #f4f6fa;
  border: 1px solid #dde2d5;
  color: var(--brand-muted);
  opacity: 0.8;
}

.filter-chip--any-student .filter-chip-remove{
  color: var(--brand-muted);
  opacity: 0.8;
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #dde2d5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 20;
}

.filter-dropdown-item {
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-size: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-dropdown-item:hover {
  background-color: #f4f6fa;
}

.filter-dropdown-check {
  font-size: 14px;
  color: var(--brand-dark);
}

/* Keep it in Subject column (you already have this) */
.student-tools-row .manage-students-toggle{
  grid-column: 2;
  justify-self: start;
}

/* Make the chevron overlay instead of shifting the text */
.manage-students-toggle{
  position: relative;
  gap: 0;                 /* remove the spacing that indents the label */
  padding-left: 0;        /* keep label flush */
}

.manage-students-toggle .chev{
  position: absolute;
  left: -18px;            /* pull chevron into the gutter */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

/* Keep your rotate behavior */
.manage-students-toggle[aria-expanded="true"] .chev{
  transform: translateY(-50%) rotate(90deg);
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 300;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  border: 1px solid #262b26;
  background-color: transparent;
  color: var(--brand-text);
  cursor: pointer;
}

.btn-pill-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-pill-icon svg {
  width: 16px;
  height: 16px;
}

.btn-pill.print-btn .btn-pill-icon svg {
  width: 21px;
  height: 21px;
}

/* Slightly enlarge the bookmark reset icon for visual balance */
.btn-pill-icon.bookmark-reset svg {
  width: 20px;
  height: 20px;
}

.btn-secondary {
  /* print button keeps same transparent style, but we may
     enhance later if you want emphasis */
  background-color: transparent;
  border-color: #262b26;
  color: var(--brand-text);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--brand-muted);
  white-space: nowrap;
}

.toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background-color: rgba(38, 43, 38, 0.16);
  padding: 2px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.toggle-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease;
}

.toggle--on .toggle-switch {
  background-color: var(--brand-accent);
}

.toggle--on .toggle-switch-knob {
  transform: translateX(14px);
}

.search-icon {
  position: absolute;
  left: 10px;
  right: auto;
  width: 20px;
  height: 20px; 
  pointer-events: none;
  color: var(--brand-muted);
}

.search-icon svg {
  width: 20px;
  height: 20px;
}

.filter-control input[type="search"] {
  padding-left: 32px;  /* adjust if you want more/less spacing */
}

/* Sticky container that sits right below the app header */
.filter-state-wrapper {
  position: sticky;
  top: var(--app-header-h, 85px); /* dynamic header height */
  z-index: 30;
  background: var(--brand-bg);
  margin-top: 24px;
}

/* Outer shell sticks under the header */
.filter-state-bar {
  position: relative;          
  top: 0;                     
  z-index: 1;                 
  background: var(--brand-bg);
  border: 1px solid #dde2d5;
  border-radius: 4px 4px 0 0;
  padding: 6px 12px;
  max-width: 1601px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}

/* Left area: main button that opens filters */
.filter-state-main {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* "Filters" label text */
.filter-state-label {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Summary text: truncated pill */
.filter-state-summary {
  color: #6b7280;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-state-toggle-text {
  color: var(--brand-muted);   
  font-size: 14px;        
  font-weight: 300; 
  cursor: pointer;   
}

/* Right area: quick toggles */
.filter-state-actions {
  display: flex;
  gap: 0.4rem;
}

.filter-state-toggle {
  border-radius: 999px;
  border: 1px solid #cfd4c6;
  padding: 3px 9px;
  font-size: 0.8rem;
  background: white;
  cursor: pointer;
}

.filter-state-toggle--on {
  border-color: #596e5e;
  background: #596e5e;
  color: #f7f8f5;
}

/* Subject, course, and topic shells */
.course-shell {
  margin-top: 40px;
}

.subject-block + .subject-block {
  margin-top: 32px;
}

.subject-title {
  font-family: "Plantin MT Pro", "Crimson Text", Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 200;
  color: var(--brand-text);
  margin-bottom: 12px; /* space before first course card */
}

.subject-courses {
  display: flex;
  flex-direction: column;
  gap: 12px; /* space between course cards */
}

.course-card,
.topic-card {
  border-radius: 4px;
  padding: 20px;
  background-color: var(--brand-surface);
}

.topic-card {
  border: 1px solid var(--divider-subtle);
}

/* course cards: default border before subject override */
.course-card {
  border: 1px solid var(--divider-subtle);
}

.topic-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-title,
.topic-title {
  margin: 0;
  font-family: "Circular Pro", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--brand-text);
}

/* Title row: keep title + edit pill on the SAME line */
.title-with-edit {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;          /* allows text to truncate nicely if needed */
}

/* Make headings behave nicely inside inline-flex */
.title-with-edit .course-title,
.title-with-edit .topic-title {
  display: inline;       /* prevents forced line breaks */
  min-width: 0;
}

.edit-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;

  /* muted Alveary light green */
  background: rgba(173, 181, 143, 0.18);
  border: 1px solid rgba(173, 181, 143, 0.55);
  color: #596e5e;

  text-decoration: none;
  white-space: nowrap;
}

.edit-pill:hover {
  background: rgba(173, 181, 143, 0.26);
  border-color: rgba(173, 181, 143, 0.8);
}

.course-meta {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 200;
  color: var(--brand-muted);
  white-space: normal;
}

.meta-schedule {
  white-space: pre-line;
}

.meta-schedule--with-grade {
  padding-right: 20px;
  border-right: 1px solid #e5e8e5;
}

.meta-schedule--solo {
  padding-right: 0;
  border-right: none;
}

.meta-grade {
  white-space: normal;
}

.meta-grade--with-sched {
  padding-left: 20px;
}

.meta-grade--solo {
  padding-left: 0;
}

.meta-flex-spacer {
  margin-left: auto;
}

/* --- Notes button (pencil) --- */

.note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--soft-border, #e2dfd7);
  background-color: #ffffff;
  padding: 0;
  cursor: pointer;
  color: var(--brand-muted);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}

.note-btn svg {
  width: 20px;
  height: 20px;
}

/* no note yet */
.note-btn--empty:hover {
  border-color: var(--brand-muted);
}

/* note exists but NOT bookmarked */
.note-btn--soft {
  background-color: #f4f6fa;         /* same light grey as tips box */
  color: var(--brand-muted);         /* same muted text color */
  border-color: var(--brand-muted);  /* subtle but clear outline */
}

/* note exists AND bookmarked */
.note-btn--strong {
  font-weight: 500;
}

/* --- Quick Enroll button (bookmark all topics) --- */
.quick-enroll-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--soft-border, #e2dfd7);
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quick-enroll-btn:hover {
  border-color: var(--brand-muted);
}

.quick-enroll-btn--active {
  /* background + border handled by inline style */
}

.quick-enroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quick-enroll-icon svg,
.quick-enroll-icon img {
  width: 20px;
 height: 20px;
}

.quick-chip {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background-color: #ffffff;
  /* remove the old border line */
  /* border: 1px solid var(--soft-border, #e2dfd7); */
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--brand-muted);
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06); /* same feel as bookmark-apply */
}

.quick-enroll-label {
  font-size: 11px;
  color: var(--brand-muted);
  line-height: 1;
  margin-top: 0;
}

.quick-enroll-label--active {
  /* background-color is now set inline via Alpine */
  color: #ffffff !important;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.quick-enroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px; /* spacing between button and label */
}

/* --- My courses: topic bookmark controls --- */

.card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.bookmark-region {
  display: inline-flex;
  align-items: center;
}

/* Base bookmark button */
.bookmark-btn {
  position: relative;   /* NEW: so chips can be absolutely positioned */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--soft-border, #e2dfd7); 
  background-color: #ffffff;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Empty (unselected) bookmark */
.bookmark-btn--empty {
  color: var(--brand-muted);
  border-color: var(--soft-border, #e2dfd7);
}

/* Hover state for subtle affordance (optional but nice) */
.bookmark-btn--empty:hover {
  border-color: var(--brand-muted);
}

.bookmark-btn--solid {
  border-color: transparent;
  color: #ffffff;              /* icon white */
}

.bookmark-btn--ghost {
  border-color: transparent;
  color: #ffffff;
  opacity: 0.4;                /* faded ghost look */
  position: relative;
}

.bookmark-icon {
  width: 26px;
  height: 26px;
}

.bookmark-apply {
  position: absolute;
  top: -4px;          /* top-right, like ghost button */
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--brand-muted);   /* muted text color */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* variant: let chip take on the current text color (subject color, etc.) */
.bookmark-apply--subject {
  color: inherit;
}

/* --------------------------------------------------
   Small bookmark button (used on resource cards)
-------------------------------------------------- */
.bookmark-btn--small{
  width: 22px;
  height: 22px;
  padding: 0;
}

/* icon inside small bookmark */
.bookmark-btn--small .bookmark-icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* smaller + overlay */
.bookmark-btn--small .bookmark-apply{
  width: 14px;
  height: 14px;
  font-size: 11px;
  line-height: 14px;
  right: -5px;
  bottom: -6px;
  border-width: 2px;
}

/* Planning tags */
.planning-tag-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The initial "+ Planning tag" button */
.planning-tag-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e5e8e5;
  background-color: #ffffff;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: var(--brand-muted);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}

.planning-tag-label {
  white-space: nowrap;
}

/* When tags are selected: row of images + small "+" button */
.planning-tag-selected-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.planning-tag-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.planning-tag-img {
  display: block;
  height: 28px;
  width: auto;
}

.planning-tag-remove {
  position: absolute;
  bottom: -4px;           
  right: -4px;
  border: none;
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--brand-muted);
  box-shadow: none;
}

.planning-tag-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #e5e8e5;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  color: var(--brand-muted);
  line-height: 1;
}

   /* Ghost version of planning tags (global memory) */
   .planning-tag-img-ghost {
     opacity: 0.45;
   }

   /* Tiny "+" button to apply a previous tag here */
   .planning-tag-apply {
     position: absolute;
     bottom: -4px;
     right: -4px;
     border: none;
     background-color: #ffffff;
     border-radius: 999px;
     width: 14px;
     height: 14px;
     font-size: 11px;
     line-height: 1;
     padding: 0;
     cursor: pointer;
     color: var(--brand-muted);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
   }

/* Dropdown-like menu for planning tag selections */
.planning-tag-menu {
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #dde2d5;
  background-color: #ffffff;
  max-width: 260px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 60;
}

.planning-tag-option {
  width: 100%;
  border: none;
  background: transparent;
  padding: 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.planning-tag-option:hover {
  background-color: #f4f6fa;
}

.planning-tag-option-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.planning-tag-option-main img {
  height: 24px;
  width: auto;
  display: block;
}

/* Description + tips rows */
.course-detail-row {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--brand-text);
}

/* --- Notes accordion section --- */

.note-panel {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  /* background color is set per-subject inline via :style */
  color: #fbfbf9;
}

.note-label {
  display: block;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: inherit;
  opacity: 0.7;
}

.note-textarea {
  width: 100%;
  min-height: 72px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 8px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  /* background color is overridden inline with a lighter subject tint */
  background-color: rgba(250, 247, 237, 0.12);
  color: #505650;
  resize: vertical;
}

.note-textarea::placeholder {
  color: rgba(80, 86, 80, 0.55);
}

.course-detail-tips {
  flex: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background-color: #f4f6fa;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--brand-muted);
}

.course-detail-tips-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.course-detail-tips-icon svg {
  width: 20px;
  height: 20px;
}

/* Preserve line breaks from CSV for descriptions & tips text */
.course-detail-description {
  white-space: pre-line;
}

/* Tips text should also respect line breaks */
.course-detail-tips span[x-text],
.course-detail-tips span[ x-text ],
.course-detail-tips span {
  white-space: pre-line;
}

/* Card headers with chevrons */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-toggle {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--brand-muted);
}

.card-toggle svg {
  width: 24px;
  height: 24px;
  transition: transform 0.15s ease;
}

.card-toggle--closed svg {
  transform: rotate(-90deg);
}

/* Print Tip Modal (screen-only) */
.print-tip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.print-tip-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.print-tip-modal {
  position: relative;
  max-width: 520px;
  margin: 12vh auto 0;
  background: #fff;
  border: 1px solid #dde3d2;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.print-tip-title {
  font-size: 16px;
  font-weight: 700;
  color: #262b26;
  margin-bottom: 10px;
}

.print-tip-body {
  font-size: 14px;
  color: #262b26;
}

.print-tip-body ul {
  margin: 8px 0 0 18px;
}

.print-tip-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #4b544b;
}

.print-tip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.print-tip-btn {
  border: 1px solid #cfd6c6;
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
}

.print-tip-btn-primary {
  background: #596e5e;
  border-color: #596e5e;
  color: #fff;
}

/* Never show the modal in print */
@media print {
  .print-tip-overlay {
    display: none !important;
  }
}

/* Hide Alpine sections until ready */
[x-cloak] {
  display: none !important;
}

/* -----------------------------
   Print layout for Course list
   ----------------------------- */

/* Hide print-only bits on screen */
.print-year-left,
.print-header-title-block,
.print-footer {
  display: none;
}

/* --- Media Print --- */
@media print {

  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Force all text to true black for print */
  body {
    color: #000 !important;
  }

  /* Ensure common text elements stay black */
  h1, h2, h3, h4, h5, h6,
  p, span, li, div {
    color: #000 !important;
  }

  header.app-header .logo-text-block {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .print-header-title-block {
    margin-right: 0 !important;
    padding-right: 0 !important;
    text-align: right;
  }

  textarea {
    resize: none !important;
  }
  
  textarea::-webkit-resizer {
    display: none;
  }

  body {
    background: #ffffff !important;
    margin: 0;
    padding-bottom: 40pt; /* keep content out of footer area */
  }

  /* HEADER --------------------------------------------------- */

  header.app-header {
    position: relative !important;
    top: auto !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 12pt 0 6pt 0 !important;
    margin: 0 0 8pt;
    background: #ffffff !important;
    box-sizing: border-box;
    width: 100%;
  }

  header.app-header nav {
    display: none !important;
  }

  header.app-header .brand-name,
  header.app-header .logo-title {
    font-size: 28pt !important;
    line-height: 1.1;
    color: #596e5e !important;
  }

  header.app-header .flex.items-center {
    align-items: flex-start !important;
  }

  .print-year-left {
    display: block !important;
    margin-top: 2px;
    font-family: "Plantin MT Pro", "Times New Roman", serif;
    font-size: 16pt !important;
    font-weight: 400;
    color: #adb58f !important;
  }

  .print-header-title-block {
    display: flex !important;
    flex-direction: column;
    margin-left: auto;
    align-items: flex-end;
    padding-right: 0;
  }

  .print-header-title {
    font-family: "Circular Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 28pt !important;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-dark) !important;
  }

  .print-header-grade {
    margin-top: 2px;
    font-family: "Plantin MT Pro", "Times New Roman", serif;
    font-size: 16pt !important;
    font-weight: 400;
    color: #adb58f !important;
  }

  .section-title,
  .section-subtitle {
    display: none !important;
  }

  .filter-state-wrapper,
  .filter-panel,
  .filter-actions,
  .btn-pill,
  .toggle,
  .card-toggle,
  .planning-tag-wrapper,
  .edit-pill {
    display: none !important;
  }

  /* Prevent the planning menu overlay from printing */
  .planning-tag-menu,
  [x-show="planningMenuOpen"] {
    display: none !important;
  }

  .course-list-shell {
    margin-top: 16px !important;
  }

  /* CARD + TEXT SIZING --------------------------------------- */

  .subject-title { font-size: 18pt !important; }
  .course-title  { font-size: 13pt !important; }
  .topic-title   { font-size: 11pt !important; }

  .course-detail-tips {
    background: #f2f2f2 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .course-meta,
  .topic-meta,
  .course-detail-description,
  .course-detail-tips,
  .topic-schedule,
  .topic-grades,
  .meta-schedule,
  .meta-grade,
  .course-card p,
  .topic-card p {
    font-size: 9pt !important;
  }

  /* PRINT: Course cards — top border only */
  .course-card {
    box-shadow: none !important;
    background-color: #ffffff !important;
  
    border: none !important;
    border-top: 3px solid #596e5e !important; /* Dk. Green */
    border-radius: 0 !important;
  
    break-inside: auto;
    page-break-inside: auto;
  }
  
  /* PRINT: Topic cards top border only */
  .topic-card {
    box-shadow: none !important;
    background-color: #ffffff !important;
  
    border: none !important;
    border-top: 2px solid #adb58f !important; /* Lt. Green */
    border-radius: 0 !important;
  
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Prevent titles and headers from being orphaned at page breaks */
  .subject-title,
  .course-title,
  .topic-title {
    break-after: avoid;
    page-break-after: avoid;
  }
  
  /* Keep title rows with their meta info */
  .card-header,
  .course-meta {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  main {
    padding-bottom: 0 !important;
  }

  /* FOOTER --------------------------------------------------- */

  /* Show footer only in print, and make it a running element for Paged.js */
  .print-footer {
    width: 100%;
    padding: 4pt 15mm 2pt;

    font-size: 8pt;
    color: #4b544b;
    background: #ffffff;

    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  .print-footer-left,
  .print-footer-center,
  .print-footer-right {
    white-space: nowrap;
  }

  /* PRINT: hide planning/action controls, keep selected tags visible */
.card-header-actions,
.planning-tag-button,    
.planning-tag-add,  
.planning-tag-remove,  
.planning-tag-apply,   
.edit-pill {             
  display: none !important;
}

/* But still show the selected planning tag icons (pills) */
.planning-tag-region,
.planning-tag-selected-row,
.planning-tag-pill,
.planning-tag-img {
  display: inline-flex !important;
}

.student-rail-toggle-row {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .student-chip-row {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    display: inline-block !important;
    width: 100% !important;
  }

  .student-chip {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* --- PRINT: restore student chip colors --- */
  .student-chip {
    background-color: var(--stu) !important;
    color: #ffffff !important;
  }
  
  .student-chip-text {
    color: #ffffff !important;
  }

  /* Hide the toggle UI (person icon + count badge + chevron) */
  .student-rail-toggle {
    display: none !important;
  }

  /* Extra safety: if any of these still render, hide them too */
  .student-rail-icon,
  .student-count-badge,
  .student-rail-wedge {
    display: none !important;
  }

  /* Hide the ghost marker symbol (↪) */
  .student-ghost-marker {
    display: none !important;
  }

  /* Hide ghost chips entirely (outlined “assigned elsewhere” ones) */
  .student-chip--ghost {
    display: none !important;
  }

  /* Remove tiny X on real chips */
  .student-chip-remove {
    display: none !important;
  }

  /* Hide any ghost “apply +” button (just in case a ghost chip sneaks through) */
  .student-chip-apply {
    display: none !important;
  }

  .student-rail-toggle-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  /* If there are NO student chips, remove the row entirely */
  .student-rail-toggle-row:has(.student-chip-row:empty),
  .student-rail-toggle-row:has(.student-chip-row:not(:has(*))) {
    display: none !important;
  }

  .course-shell {
    margin-top: 12px !important;
  }

  .subject-block + .subject-block {
    margin-top: 16px !important;
  }

  .subject-title {
    margin-bottom: 6px !important;
  }

  .course-card,
  .topic-card {
    padding: 12px 14px !important;
  }

  .subject-courses {
    gap: 8px !important;
  }

  .topic-list {
    gap: 8px !important;
  }

  .course-detail-row {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  .course-detail-tips {
    padding: 6px 8px !important;
  }

  .course-meta,
  .topic-meta {
    margin-top: 2px !important;
    line-height: 1.3 !important;
  }

  /* When student chips ARE present, add a little air above them */
  .student-rail-toggle-row:has(.student-chip-row:not(:empty)) {
    margin-top: 6px !important;
  }
  
}

/* -----------------------------------------
   Course List: List View modes
----------------------------------------- */

/* Minimal: hide student rails completely */
.course-list-shell.listview-minimal .student-rail-toggle-row,
.course-list-shell.listview-minimal .student-chip-row{
  display: none !important;
}