:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #e2e5ea;
  --text: #1c2128;
  --text-muted: #6b7280;
  --accent: #4f5fe0;
  --accent-soft: #eef0fd;
  --completed: #1a9c6d;
  --completed-soft: #e7f7f0;
  --planned: #c8790d;
  --planned-soft: #fdf1e3;
  --locked: #e0475a;
  --locked-soft: #fdeef0;
  --notoffered: #9aa1ac;
  --notoffered-soft: #f1f2f4;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* html needs a background too, not just body - with viewport-fit=cover
   (see base.html) the safe-area strip below the home indicator on iOS
   standalone/PWA renders as plain black unless something behind the fixed
   bottom nav is actually colored there, and that strip is html's box, not
   body's. Same story for iOS Safari's rubber-band overscroll past the end
   of the page, which briefly reveals html's background. Matches
   .bottom-nav's own background (--surface), not the page's --bg, since
   that's the bar this strip sits flush against. */
html {
  background: var(--surface);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 18px; margin: 0; white-space: nowrap; }

.tabs { display: flex; gap: 4px; }
.tab-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
}
.tab-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab-btn:disabled { opacity: .35; cursor: default; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }

.study-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}
.study-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.study-chip input { cursor: pointer; }

/* Lives at the top of Plan/Weekly (see .study-filters in app.html) instead
   of the navbar - wraps instead of the header's forced single-line scroll,
   since there's real width to spare down here. */
.study-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.study-filters:empty { display: none; }

.hidden { display: none; }

.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag-chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--text-muted);
}
.tag-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.selected-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.selected-summary .study-chip { cursor: default; }
.selected-summary-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }

.study-selector-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

.study-list {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-height: 420px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; background: var(--surface);
}

.fetch-progress-track { width: 100%; max-width: 400px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: 8px; }
.fetch-progress-fill { height: 100%; width: 0; min-width: 3%; background: var(--accent); transition: width .3s ease; }
.fetch-progress-fill.active {
  background-image: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: fetch-progress-pulse 1.4s linear infinite;
}
@keyframes fetch-progress-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

.fetch-banner { display: flex; align-items: center; gap: 10px; background: var(--planned-soft); color: var(--planned); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.fetch-banner a { color: var(--planned); font-weight: 600; }
.fetch-banner.hidden { display: none; }

.meta { font-size: 13px; color: var(--text-muted); }
.meta strong { color: var(--accent); }

/* First item of the trailing (right-aligned) cluster - actions, then
   counts, then the avatar - pushes that whole cluster to the far right.
   base.html's simpler header (no undo/redo, no ECTS counts) has only the
   avatar as a topbar child, so it needs its own auto margin too - redundant
   with topbar-actions' on app.html (no free space left for it to claim
   there) but the only thing doing the job on base.html. */
.topbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }

/* ---- Profile menu (top-right icon + dropdown) ---- */
.profile-menu-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: auto; }
.profile-menu-btn {
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-soft);
  color: var(--accent);
  width: 36px;
  height: 36px;
  padding: 0;
}
.profile-menu-btn:hover { border-color: var(--accent); }
.profile-menu-btn svg { width: 20px; height: 20px; }
.profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 30;
}
.profile-menu.open { display: block; }
.profile-menu-email {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow-wrap: break-word;
}
.profile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.profile-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.profile-menu form { margin: 0; }

main { padding: 20px 24px 60px; max-width: 1100px; margin: 0 auto; }
/* Weekly Schedule has a lot more to lay out side-by-side (course lists +
   a full week grid) than the other views, so let it use a wider column
   on desktop instead of being capped at the same width as Study Plan. */
main:has(#weeklyView.active) { max-width: 1600px; }

.view { display: none; }
.view.active { display: block; }

.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.deselect-all-btn { margin-left: auto; }
.deselect-all-btn:disabled { opacity: .5; cursor: default; }
.swatch-completed { background: var(--completed); }
.swatch-planned { background: var(--planned); }
.swatch-locked { background: var(--locked); }
.swatch-notoffered { background: var(--notoffered); }

/* ---- Study sections (plan view, one per checked study filter) ---- */
.study-section { margin-bottom: 36px; }
.study-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.study-section-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.study-section-title { font-size: 16px; font-weight: 700; }
.study-section-progress { margin-left: auto; font-size: 13px; color: var(--text-muted); }

.section-heading {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 0 0 12px;
}
.steop-group { margin-bottom: 12px; padding-bottom: 20px; border-bottom: 2px solid var(--border); }
.steop-group .study-section:last-child { margin-bottom: 0; }

/* ---- Tree ---- */
.node { margin-bottom: 6px; }
.node-children { margin-left: 18px; padding-left: 12px; border-left: 1px dashed var(--border); }

.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.cat-row:hover { border-color: var(--accent); }
.cat-row .chevron { width: 14px; text-align: center; color: var(--text-muted); transition: transform .15s; font-size: 11px; }
.node.collapsed > .cat-row .chevron { transform: rotate(-90deg); }
.cat-row .title { font-weight: 600; font-size: 14px; flex: 1; }
.cat-row .progress-wrap { display: flex; align-items: center; gap: 8px; }
.cat-row .progress-bar { width: 80px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.cat-row .progress-bar > div { height: 100%; background: var(--accent); }
.cat-row.done .progress-bar > div { background: var(--completed); }
.cat-row .progress-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.node.collapsed > .node-children { display: none; }

/* StEOP gate between the mandatory StEOP section and the rest of the tree */
.steop-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--locked);
  background: var(--locked-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 8px 0 20px;
}
.steop-banner.done { color: var(--completed); background: var(--completed-soft); }
.steop-banner label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; white-space: nowrap; }

.locked-section { opacity: .6; }

/* Choice groups (Wahlfach / Vertiefungsfeld style either-or) */
.choice-banner {
  font-size: 12px;
  color: var(--planned);
  background: var(--planned-soft);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 4px 0 8px;
  display: inline-block;
}
.choice-option { position: relative; }
.choice-option > .cat-row { border-color: var(--accent); }
.choice-option.chosen > .cat-row { border-color: var(--completed); background: var(--completed-soft); }
.choice-option.not-chosen > .cat-row { opacity: .55; }
.choice-option.not-chosen > .node-children { display: none; }
.choose-btn {
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.choice-option.chosen .choose-btn { border-color: var(--completed); color: var(--completed); }

/* Course rows */
.course-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
}
.course-row .lva-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 2px 6px;
  min-width: 24px;
  text-align: center;
}
.course-row .title { flex: 1; }
.course-row .ects { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.course-row .semester-badge { font-size: 11px; color: var(--notoffered); white-space: nowrap; }

.companion-note {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  cursor: help;
}
.companion-note.companion-missing { color: var(--locked); background: var(--locked-soft); font-weight: 600; }
.sidebar-course-info .companion-note { align-self: flex-start; }
.course-row.completed { background: var(--completed-soft); border-color: var(--completed); }
.course-row.planned:not(.completed) { background: var(--planned-soft); border-color: var(--planned); }
.course-row.locked { background: var(--locked-soft); border-color: var(--locked); }
.course-row.not-offered .title { color: var(--text-muted); }

.checkbox-group { display: flex; align-items: center; gap: 4px; }
.checkbox-group label { font-size: 10px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }

.lock-icon { cursor: help; color: var(--locked); font-size: 13px; }

.milestone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- View tabs / topbar extras ---- */
.view-tabs { margin-left: 8px; }
.planned-count { color: var(--planned); font-weight: 600; margin-left: 12px; }

/* ---- Mobile bottom nav ---- */
/* Hidden on desktop - the top tabs handle navigation there. Shown (and the
   equivalent top nav hidden) below 768px, see the mobile media query. */
.bottom-nav { display: none; }
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}
.bottom-nav-item.active { color: var(--accent); font-weight: 600; }

.btn-secondary {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}

/* ---- Course row detail (lecturer chip, group select, session badge) ---- */
.course-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  max-width: 220px;
}
.lecturer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--notoffered-soft);
  color: var(--text-muted);
  font-size: 11px;
}
.lecturer-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.lecturer-chip .lecturer-name { white-space: nowrap; }

.lecturer-tooltip {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  font-size: 13px;
}
.lecturer-tooltip.hidden { display: none; }
.lecturer-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; overflow: hidden; flex-shrink: 0;
}
.lecturer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lecturer-avatar.small { width: 18px; height: 18px; font-size: 8px; }

.badge.session-count { background: var(--notoffered-soft); color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge.session-count:hover { background: var(--accent-soft); color: var(--accent); }

.kusss-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 4px;
}
.kusss-link:hover { color: var(--accent); }
.group-picker-header .kusss-link { font-size: 12px; margin-left: 4px; }

/* ---- Weekly view ---- */
.weekly-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#selectedCount { font-size: 13px; color: var(--text-muted); }

.weekly-layout { display: flex; gap: 16px; align-items: flex-start; }
.calendar-scroll { flex: 1; min-width: 0; overflow-x: auto; }

.course-sidebar { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.sidebar-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sidebar-section-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; padding: 10px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); text-align: left;
}
.sidebar-section-header:hover { background: var(--bg); }
.sidebar-chevron { display: inline-block; transition: transform 0.15s ease; color: var(--text-muted); font-size: 11px; }
.sidebar-section.collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-section.collapsed .sidebar-section-body { display: none; }
.sidebar-section-body { max-height: 460px; overflow-y: auto; border-top: 1px solid var(--border); }

.sidebar-course-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px; }
.sidebar-course-row:first-child { border-top: none; }
.sidebar-course-row input[type="checkbox"] { width: 14px; height: 14px; margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.sidebar-course-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar-course-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sidebar-course-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sidebar-course-title { font-weight: 600; }
.sidebar-course-schedule { color: var(--text-muted); font-size: 11px; }
.sidebar-course-conflict { color: var(--locked); font-size: 11px; }
.sidebar-empty { padding: 10px 12px; color: var(--text-muted); font-size: 12px; font-style: italic; }

.calendar {
  display: grid;
  grid-template-columns: 56px repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-corner { border-bottom: 1px solid var(--border); }
.cal-day-header {
  padding: 8px; text-align: center; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
}
.cal-time-col { border-right: 1px solid var(--border); position: relative; }
.cal-time-label { font-size: 10px; color: var(--text-muted); position: absolute; right: 4px; transform: translateY(-50%); }
.cal-day-col {
  position: relative;
  border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--bg) 40px);
}

.cal-event {
  position: absolute;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  background: var(--planned-soft);
  border: 1px solid var(--planned);
  color: var(--planned);
  cursor: pointer;
}
.cal-event:hover { filter: brightness(0.97); }
.cal-event.has-options { border-style: dashed; }
.cal-event.biweekly {
  background-image: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 8px);
  background-blend-mode: overlay;
  opacity: 0.92;
}
.cal-event .ev-title { font-weight: 600; display: block; }
.cal-event .ev-time { opacity: 0.8; }

.ev-tags { display: flex; gap: 3px; margin-bottom: 2px; }
.ev-study-tag, .sidebar-course-tag { display: inline-block; font-size: 8px; font-weight: 700; color: #fff; padding: 1px 4px; border-radius: 999px; letter-spacing: 0.02em; flex-shrink: 0; }

.ev-options-marker {
  position: absolute; bottom: 3px; right: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--planned); color: #fff;
  font-size: 9px; line-height: 14px; text-align: center;
}
.ev-count-badge {
  position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px;
  padding: 0 3px; border-radius: 7px; background: var(--surface);
  border: 1px solid currentColor; color: inherit; font-size: 9px; font-weight: 700;
  line-height: 12px; text-align: center;
}

.cal-event.conflict { background: var(--locked-soft); border-color: var(--locked); color: var(--locked); }
.cal-event.conflict .ev-count-badge { border-color: var(--locked); }

/* ---- Calendar view ---- */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-range-label { font-size: 14px; font-weight: 600; min-width: 160px; }
.calendar-body { overflow-x: auto; }

.cal-day-header.today { color: var(--accent); }
.cal-day-col.today { background-color: var(--accent-soft); }

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-month-weekday {
  padding: 8px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.cal-month-cell {
  min-height: 96px; padding: 6px; border-top: 1px solid var(--border);
  border-left: 1px solid var(--border); cursor: pointer; display: flex;
  flex-direction: column; gap: 2px;
}
.cal-month-cell:nth-child(7n+1) { border-left: none; }
.cal-month-cell.outside-month { background: var(--bg); color: var(--text-muted); }
.cal-month-cell.today .cal-month-date {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
.cal-month-date { font-size: 12px; font-weight: 600; }
.cal-month-chip {
  font-size: 10px; line-height: 1.3; padding: 1px 4px; border-radius: 3px;
  background: var(--bg); border-left: 3px solid var(--accent); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.cal-month-chip:hover { filter: brightness(0.96); }
.cal-month-more { font-size: 10px; color: var(--text-muted); cursor: pointer; }

/* ---- Workload view ---- */
.workload-toolbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.workload-nav { display: flex; align-items: center; gap: 10px; }
.workload-range-label { font-size: 13px; font-weight: 600; min-width: 160px; text-align: center; }
.workload-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }

.workload-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 12px; }
.workload-empty { color: var(--text-muted); font-size: 13px; margin: 0; }

.workload-plot-row { display: flex; align-items: stretch; }
.workload-yaxis { position: relative; width: 30px; flex-shrink: 0; height: 180px; }
.workload-ytick { position: absolute; left: 0; right: 6px; transform: translateY(50%); text-align: right; }
.workload-ytick-label { font-size: 10px; color: var(--text-muted); }

.workload-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; height: 180px; border-bottom: 1px solid var(--border); }
.workload-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); z-index: 0; }
.workload-col {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; cursor: default; border-radius: 4px;
}
.workload-col:hover, .workload-col:focus-visible { background: var(--bg); outline: none; }
.workload-bar { width: 100%; max-width: 24px; min-height: 2px; background: var(--planned); border-radius: 4px 4px 0 0; }
.workload-col.empty .workload-bar { background: var(--notoffered-soft); }
.workload-col:hover .workload-bar, .workload-col:focus-visible .workload-bar { filter: brightness(0.9); }

.workload-axis-row { display: flex; margin-top: 6px; }
.workload-yaxis-spacer { width: 30px; flex-shrink: 0; }
.workload-axis { display: flex; gap: 2px; flex: 1; min-width: 0; }
.workload-axis-label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.workload-axis-kw { font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.workload-axis-month { font-size: 9px; color: var(--text-muted); opacity: 0.75; white-space: nowrap; }

.workload-tooltip {
  position: fixed; z-index: 100; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 8px 10px;
  font-size: 12px; max-width: 260px; pointer-events: none;
}
.workload-tooltip.hidden { display: none; }
.workload-tooltip-range { color: var(--text-muted); margin-bottom: 2px; }
.workload-tooltip-value { font-weight: 700; margin-bottom: 4px; }
.workload-tooltip-course { color: var(--text-muted); font-size: 11px; }

/* ---- Group / Termine picker popup ---- */
.group-picker {
  position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 8px;
  display: flex; flex-direction: column; min-width: 260px; max-width: 340px;
}
.group-picker-header { font-size: 13px; font-weight: 600; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.group-picker-divider {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
  padding: 8px 6px 4px; border-top: 1px solid var(--border); margin-top: 4px;
}
.group-picker-option { text-align: left; border: none; background: transparent; padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--text); }
.group-picker-option:hover { background: var(--bg); }
.group-picker-option.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.group-picker-option.conflict { color: var(--locked); }
.group-picker-option.conflict:hover { background: var(--locked-soft); }
.group-picker-option.conflict.active { background: var(--locked-soft); color: var(--locked); }
.group-picker-option.remove-option { color: var(--locked); font-weight: 600; }
.group-picker-option.remove-option:hover { background: var(--locked-soft); }

.session-list { max-height: 260px; overflow-y: auto; }
.session-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; font-size: 12px; border-radius: 6px; }
.session-row:nth-child(odd) { background: var(--bg); }
.session-row-empty { color: var(--text-muted); font-style: italic; }
.session-when { flex: 1; white-space: nowrap; }
.session-room { color: var(--text-muted); white-space: nowrap; }
.session-note { color: var(--accent); font-size: 11px; white-space: nowrap; }
.session-row.conflict { background: var(--locked-soft); color: var(--locked); }
.session-row.conflict .session-room { color: var(--locked); }

.conflict-warning { background: var(--locked-soft); color: var(--locked); font-size: 12px; padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; line-height: 1.5; }

/* ---- Auth / plain forms (signup, login, settings) ---- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 360px;
  max-width: 100%;
}
.auth-card h1 { font-size: 18px; margin: 0 0 20px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.form-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.form-errors { color: var(--locked); font-size: 13px; margin-bottom: 12px; }
.btn-primary {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 14px;
  cursor: pointer;
}
.auth-switch { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
.auth-switch a { color: var(--accent); }

.container { padding: 20px 24px 60px; max-width: 1100px; margin: 0 auto; }

/* ---- Notification settings ---- */
.notif-settings {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); max-width: 480px; margin-bottom: 8px;
}
.notif-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.notif-row select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.notif-status { font-size: 13px; color: var(--text-muted); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  /* Title on top, the done/planned/total-ECTS numbers centered directly
     below it - undo/redo and the avatar sit beside that stack and stretch
     to its full combined height instead of pinning to just the title row.
     Study filters and the view tabs don't live here at all any more
     (filters moved to Plan/Weekly's own content - see .study-filters; view
     tabs move to .bottom-nav below). base.html's simpler header (Settings/
     login - no undo/redo, no ECTS) just leaves "actions" and "counts"
     empty, which CSS grid is fine with. */
  .topbar {
    display: grid;
    /* Equal-width outer tracks (not auto) so the title in the middle sits at
       the row's true visual center regardless of how wide undo/redo vs. the
       avatar happen to be - auto/auto would skew it toward whichever side
       is narrower. */
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "actions title end"
      "actions counts end";
    align-items: stretch;
    gap: 2px 10px;
    padding: 8px 12px;
  }
  .topbar h1 { grid-area: title; font-size: 15px; text-align: center; }
  .topbar-actions {
    grid-area: actions;
    justify-self: start;
    align-items: center;
    margin-left: 0;
  }
  .meta {
    grid-area: counts;
    justify-self: center;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    font-size: 11px;
  }
  .profile-menu-wrap {
    grid-area: end;
    justify-self: end;
    margin-left: 0;
    display: flex;
    align-items: center;
  }
  .profile-menu-btn { width: 40px; height: 40px; }

  .view-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tab-btn { white-space: nowrap; padding: 8px 12px; }

  /* The 4 view tabs move to the bottom nav bar on mobile - hide the
     desktop equivalents (top-level Settings/Study Helper tabs and the
     in-app view tabs) so each destination only appears once. The profile
     menu (Settings/Log out) stays visible at every width instead of
     folding into either of these. */
  .page-nav, .topbar .view-tabs { display: none; }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  main, .container {
    padding: 14px 12px calc(68px + 12px + env(safe-area-inset-bottom));
  }

  .weekly-layout { flex-direction: column; align-items: stretch; }
  /* Calendar grid first, then the Selected/Available/Available-with-conflict
     course lists below it - on desktop these sit side by side instead. */
  .calendar-scroll { order: 1; }
  .course-sidebar { order: 2; width: 100%; }
  .calendar-scroll, .calendar-body { -webkit-overflow-scrolling: touch; }

  .calendar-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .cal-nav { justify-content: space-between; }
  #calViewSwitch { overflow-x: auto; }

  /* Narrower day columns (see calGridColumnTemplate in weekly.js) so all
     weekdays fit without horizontal scrolling - shrink the text to match. */
  .cal-day-header { padding: 4px 2px; font-size: 11px; }
  .cal-time-label { font-size: 9px; right: 2px; }
  .cal-event { padding: 3px 4px; font-size: 10px; }
  .ev-study-tag { font-size: 7px; }

  .cal-month-cell { min-height: 60px; padding: 4px; }
  .cal-month-date { font-size: 11px; }
  .cal-month-chip { font-size: 9px; }

  .workload-toolbar { flex-direction: column; }

  .study-selector-controls { flex-direction: column; align-items: stretch; }
  .study-selector-controls input { max-width: 100% !important; }

  .notif-settings { max-width: 100%; }

  .course-row { flex-wrap: wrap; }
  .course-row .title { flex: 1 1 auto; min-width: 120px; }
  .course-row .checkbox-group { order: -1; }

  .cat-row { flex-wrap: wrap; row-gap: 6px; }
  .cat-row .progress-wrap { flex-basis: 100%; order: 1; }

  .study-section-header { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 480px) {
  .topbar h1 { font-size: 14px; }
  .cal-month-cell { min-height: 52px; }
  .cal-month-chip { font-size: 8px; padding: 1px 3px; }
  .group-picker { min-width: 220px; max-width: calc(100vw - 24px); }
}

/* ---- Manual course / extra-option modal ---- */
.manual-modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
  overflow-y: auto;
}
.manual-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: 560px; max-width: 100%; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column;
}
.manual-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.manual-modal-header h2 { font-size: 16px; margin: 0; }
.manual-close {
  border: none; background: transparent; font-size: 16px; cursor: pointer;
  color: var(--text-muted); line-height: 1; padding: 4px;
}
.manual-close:hover { color: var(--text); }
.manual-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--border); }
.manual-tab {
  border: none; background: transparent; padding: 8px 12px; font-size: 13px; cursor: pointer;
  color: var(--text-muted); border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.manual-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.manual-modal-body { padding: 16px 20px 20px; }
.manual-panel { display: flex; flex-direction: column; gap: 12px; }
.manual-field { display: flex; flex-direction: column; gap: 4px; }
.manual-field-label { font-size: 12px; color: var(--text-muted); }
.manual-field input[type="text"],
.manual-field select,
.manual-termine {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.manual-field input[type="checkbox"] { align-self: flex-start; width: 16px; height: 16px; }
.manual-termine { resize: vertical; min-height: 120px; white-space: pre; }
.manual-subhead {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
}
.manual-group-form { display: flex; flex-direction: column; gap: 10px; }
.manual-preview {
  font-size: 12px; color: var(--text-muted); background: var(--bg); border-radius: 6px;
  padding: 8px 10px; max-height: 180px; overflow-y: auto; line-height: 1.5;
}
.manual-preview-head { font-weight: 600; color: var(--text); }
.manual-preview-warn { color: var(--planned); }
.manual-save { width: auto; align-self: flex-start; padding: 9px 18px; }
.manual-status { font-size: 13px; color: var(--text-muted); }
.manual-manage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.manual-manage-title { font-size: 13px; font-weight: 600; }
.manual-manage-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 480px) {
  .manual-modal-overlay { padding: 16px 8px; }
}