/* Colours, fonts and layout carried over from legacy/index.html. */
:root {
  --bg: #101218;
  --panel: #171a22;
  --panel2: #1c202a;
  --line: #292d38;
  --text: #f2f3f7;
  --muted: #9298a8;
  --accent: #a9f26d;
  --accent2: #d5ffab;
  --red: #ff8f94;
  --radius: 18px;
  --sidebar: 246px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; }

.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--muted);
}

/* Shared pieces */
.card {
  background: var(--panel);
  border: 1px solid #242832;
  border-radius: var(--radius);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: var(--accent);
  color: #161a12;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.brand-name { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.5px; font-size: 17px; }
.brand-sub { font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: .7px; text-transform: uppercase; }

.btn {
  border: 0;
  background: var(--accent);
  color: #192011;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 12px;
  transition: .18s;
}
.btn:hover { background: var(--accent2); }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible, .nav a:focus-visible, .secondary-btn:focus-visible, .mobile-menu:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Login */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-card h1 { font: 700 24px Manrope, sans-serif; letter-spacing: -.8px; margin: 26px 0 18px; }
.login-card label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin: 14px 0 6px; }
.login-card input {
  width: 100%;
  padding: 11px 12px;
  /* 16px stops iPhone Safari from zooming in when the field gets focus. */
  font-size: 16px;
  color: var(--text);
  background: #101218;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.login-error { color: var(--red); font-size: 13px; margin: 14px 0 0; }
.login-submit { width: 100%; margin-top: 20px; padding: 12px 14px; font-size: 13px; }

/* App shell */
.sidebar {
  width: var(--sidebar);
  position: fixed;
  inset: 0 auto 0 0;
  padding: 27px 17px 18px;
  background: #14161d;
  border-right: 1px solid #222530;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 4;
}
.sidebar > .brand { padding: 0 10px 34px; }
.nav-group { margin-bottom: 20px; }
.nav-label {
  padding: 8px 11px;
  color: #72798a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.nav { display: grid; gap: 4px; }
.nav a {
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 10px;
  color: #aeb3c0;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: .18s;
}
.nav a:hover { background: #20232d; color: white; }
.nav a.active { background: #282d34; color: var(--accent); font-weight: 700; }
.ico { width: 18px; text-align: center; font-size: 16px; }
.side-bottom { margin-top: auto; }
.side-bottom .nav-group { margin-bottom: 12px; }
.profile { border-top: 1px solid var(--line); padding: 13px 8px 0; display: grid; gap: 10px; }
.profile-email { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secondary-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  color: #bec3cd;
  font-size: 12px;
  font-weight: 600;
}
.secondary-btn:hover { background: #20232d; color: white; }

.main { margin-left: var(--sidebar); padding: 0 38px 50px; }
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #242731;
  margin-bottom: 34px;
}
.date-chip { font-size: 12px; color: #b7bdc9; background: #1b1e27; padding: 9px 12px; border-radius: 9px; }
.mobile-menu {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  color: #bec3cd;
}
.content { max-width: 1200px; margin: 0 auto; }
.content h1 { font: 700 31px Manrope, sans-serif; letter-spacing: -1.2px; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 13px; margin: 0; }
.scrim { display: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 22px; }
.stat { padding: 17px 18px; }
.stat-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.stat-value { font: 700 31px Manrope, sans-serif; letter-spacing: -1px; margin-top: 10px; }

/* Page pieces */
.page-heading { margin: 0 0 22px; }
.page-heading h1 { font: 700 28px Manrope, sans-serif; letter-spacing: -.8px; margin: 7px 0; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.eyebrow { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; }
.section-card { padding: 19px 20px; }
.footnote { color: #777e8d; font-size: 10px; line-height: 1.5; margin-top: 14px; }
.empty-state { padding: 42px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); margin: 10px; }
.empty-state-icon { font-size: 28px; }
.soon { color: #717787; font-size: 9px; border: 1px solid #353947; border-radius: 5px; padding: 2px 5px; }
.link-btn { border: 0; background: none; color: var(--accent); font-size: 11px; font-weight: 700; padding: 5px; }
.link-btn:focus-visible, .check:focus-visible, .system-link:focus-visible, .toast-choice button:focus-visible,
.task-status-tabs button:focus-visible, .task-status-select:focus-visible, .task-filters input:focus-visible, .task-filters select:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .calendar-tabs button:focus-visible,
.week-navigator button:focus-visible, .month-date:focus-visible, .month-event:focus-visible, .week-event:focus-visible, .appearance-mode:focus-visible, .appearance-color:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 23px;
  background: #252b25;
  border: 1px solid #536b43;
  color: #d9f6c1;
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: .2s;
  pointer-events: none;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-error { background: #2d2022; border-color: #7a4449; color: var(--red); }
.toast-choice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toast-choice button { border: 1px solid #667655; background: #323a2d; color: #efffe0; border-radius: 6px; padding: 6px 9px; font-size: 11px; }
.toast-choice button:hover { background: #46543b; }

/* Task and to-do rows */
.task-list { display: grid; gap: 7px; }
.task { display: flex; align-items: center; gap: 11px; padding: 11px 10px; background: #1c1f28; border-radius: 10px; border: 1px solid transparent; }
.task:hover { border-color: #353a46; }
.check { appearance: none; width: 17px; height: 17px; border: 1px solid #626878; border-radius: 5px; margin: 0; flex: none; cursor: pointer; position: relative; }
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after { content: '✓'; position: absolute; color: #172012; font-size: 12px; left: 2px; top: -1px; font-weight: 800; }
.task-main { flex: 1; min-width: 0; }
.task-main strong { font-weight: 600; font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-main small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.task.done .task-main { text-decoration: line-through; opacity: .48; }
.todo-entry { display: flex; gap: 8px; margin-top: 13px; }
.todo-entry-top { margin: 0 0 15px; }
.todo-entry input { min-width: 0; width: 100%; background: #10131a; border: 1px solid #303541; color: var(--text); border-radius: 8px; padding: 10px 11px; outline: none; font-size: 11px; }
.todo-entry input:focus { border-color: #829b67; }
.todo-entry .btn { white-space: nowrap; }
.task .link-btn { font-size: 18px; line-height: 1; min-width: 32px; min-height: 32px; }

/* Předměty */
.page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.subject-code { font-size: 9px; color: var(--accent); font-weight: 700; letter-spacing: .4px; }
.subject-large { padding: 19px; }
.subject-large h3 { margin: 8px 0 3px; font: 700 15px Manrope, sans-serif; }
.subject-large p { font-size: 11px; color: var(--muted); }

/* Školní systémy */
.systems-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.systems-group-wide { grid-column: 1 / -1; }
.systems-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 1100px); }
.systems-pair .systems-grid { grid-template-columns: 1fr; }
.systems-group h2 { font: 700 13px Manrope, sans-serif; color: var(--muted); margin: 0 0 10px; }
.systems-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.system-link { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); text-decoration: none; transition: border-color .18s, transform .18s; }
.system-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.system-link-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: #252a31; color: var(--accent); font-size: 16px; }
.system-link-icon svg { display: block; width: 22px; height: 22px; }
.system-icon-letter, .system-icon-moodle, .system-icon-hub { font: 800 8px Manrope, sans-serif; line-height: 1; letter-spacing: 0; color: var(--accent); }
.system-icon-letter:not(.system-icon-brute), .system-icon-moodle { font-size: 10px; }
.system-link-icon .system-icon-brute { font-size: 22px; }
.system-icon-mail { font-size: 18px; line-height: 1; }
.system-link > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.system-link strong { font-size: 12px; }
.system-link small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-link-arrow { margin-left: auto; color: var(--accent); font-size: 12px; }
.system-link.compact { padding: 9px; gap: 8px; }
.system-link.compact .system-link-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; }
.system-link.compact small { display: none; }

/* Dialog */
.modal-backdrop { position: fixed; inset: 0; background: #05060ac9; z-index: 10; display: flex; padding: 18px; overflow-y: auto; }
.modal { width: min(430px, 100%); margin: auto; background: #1a1d26; border: 1px solid #363b48; border-radius: 17px; padding: 23px; box-shadow: 0 24px 90px #0008; outline: none; }
.modal h2 { font: 700 18px Manrope, sans-serif; margin: 0 0 5px; }
.modal > p { font-size: 11px; color: var(--muted); margin: 0 0 19px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.field { margin-bottom: 13px; }
.field label { font-size: 10px; color: #b6bdc9; display: block; margin-bottom: 6px; }
.field input, .field select, .field textarea { min-width: 0; width: 100%; background: #10131a; border: 1px solid #303541; color: var(--text); border-radius: 8px; padding: 10px 11px; outline: none; font-size: 12px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #829b67; }
.field textarea { display: block; resize: vertical; }

/* Správa úkolů */
.subtle { font-size: 11px; color: var(--muted); margin: 0; }
.task-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.task-manager-head .btn { flex: none; white-space: nowrap; }
.task-status-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0; }
.task-status-tabs button, .task-status-select { border: 1px solid var(--line); background: #20232c; color: var(--muted); border-radius: 8px; padding: 8px 10px; font-size: 11px; }
.task-status-tabs button.active { color: var(--accent); border-color: #667b54; background: #272d25; }
.task-status-tabs button span { margin-left: 5px; opacity: .75; }
.task-filters { display: flex; gap: 9px; margin: 12px 0; }
.task-filters input, .task-filters select { background: #10131a; border: 1px solid #303541; color: var(--text); border-radius: 8px; padding: 9px 11px; min-width: 0; font-size: 11px; }
.task-filters input { flex: 1; }
.manage-task { gap: 9px; }
.manage-task .task-main { flex: 1; min-width: 0; }
.manage-task .task-status-select { flex: none; color: var(--text); max-width: 130px; }
.manage-task .task-deadline { flex: none; margin-left: auto; min-width: 88px; text-align: right; color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; }
.task-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.manage-task .task-title-row strong.task-title-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; }
.task-course-prefix { font-weight: 800; color: var(--text); }
.task-title-separator { color: var(--muted); font-weight: 500; }
.priority { flex: none; font-size: 10px; padding: 4px 7px; border-radius: 5px; background: #302b22; color: #eabb76; }
.priority.high { background: #302326; color: #ff9696; }
.priority.low { background: #252b26; color: #a6d78e; }
.task-main small.task-source-inline { flex: none; margin: 0; white-space: nowrap; }
.task-source-link { display: inline-block; margin-top: 5px; color: var(--accent); font-size: 10px; text-decoration: none; }
.task-source-link:hover { text-decoration: underline; }
.task .link-btn svg { display: block; margin: auto; }

/* Nastavení */
.settings-grid { display: grid; gap: 15px; }
.settings-card h2 { font: 700 15px Manrope, sans-serif; margin: 0 0 4px; }
.settings-card > p { font-size: 11px; color: var(--muted); margin: 0 0 15px; }
.appearance-section { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); max-width: 500px; }
.appearance-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.appearance-section > strong { display: block; font: 600 13px Manrope, sans-serif; margin-bottom: 12px; }
.appearance-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appearance-mode { display: grid; justify-items: center; gap: 7px; padding: 7px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: 600 11px Manrope, sans-serif; }
.appearance-mode:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.appearance-mode.selected { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.appearance-preview { display: block; width: 100%; height: 58px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.appearance-preview::before, .appearance-preview::after { content: ''; position: absolute; top: 10px; height: 30px; width: 42%; border: 1px solid; border-radius: 5px; }
.appearance-preview::before { left: 7%; }
.appearance-preview::after { right: 7%; }
.appearance-preview[data-preview="light"] { background: #f2f3f5; }
.appearance-preview[data-preview="light"]::before { background: #f2f3f7; box-shadow: inset 0 6px 0 #c4c8d0; border-color: #9298a8; }
.appearance-preview[data-preview="light"]::after { background: #fff; box-shadow: inset 0 6px 0 #e1e3e8; border-color: #c0c3ca; }
.appearance-preview[data-preview="dark"] { background: #101218; }
.appearance-preview[data-preview="dark"]::before { background: #171a22; box-shadow: inset 0 6px 0 #292d38; border-color: #4a4e58; }
.appearance-preview[data-preview="dark"]::after { background: #1c202a; box-shadow: inset 0 6px 0 #343946; border-color: #626875; }
.appearance-color-grid { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.appearance-color { width: 34px; height: 34px; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: transparent; display: grid; place-items: center; }
.appearance-color:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.appearance-color.selected { border-color: var(--muted); }
.appearance-swatch { display: block; width: 24px; height: 24px; border-radius: 50%; }
.appearance-swatch[data-swatch="spectrum"] { background: conic-gradient(#ff453a, #ff9f0a, #ffd60a, #32d74b, #0a84ff, #bf5af2, #ff375f, #ff453a); }
.appearance-swatch[data-swatch="blue"] { background: #0a84ff; }
.appearance-swatch[data-swatch="purple"] { background: #bf5af2; }
.appearance-swatch[data-swatch="pink"] { background: #ff375f; }
.appearance-swatch[data-swatch="red"] { background: #ff453a; }
.appearance-swatch[data-swatch="orange"] { background: #ff9f0a; }
.appearance-swatch[data-swatch="yellow"] { background: #ffd60a; }
.appearance-swatch[data-swatch="green"] { background: #a9f26d; }
.appearance-swatch[data-swatch="graphite"] { background: #8e9299; }

/* Kalendář */
.week-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.calendar-tabs { display: flex; gap: 6px; justify-self: start; }
.calendar-tabs button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 8px; padding: 8px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.calendar-tabs button.active { background: #272d25; border-color: #667b54; color: var(--accent); }
.week-navigator { display: flex; align-items: center; justify-self: center; gap: 8px; }
.week-navigator button { border: 1px solid var(--line); background: #20232c; border-radius: 8px; min-width: 34px; height: 34px; font-size: 15px; }
.week-navigator .week-today { font-size: 11px; font-weight: 700; padding: 0 9px; }
.week-label { font: 700 13px Manrope, sans-serif; text-align: center; }
.calendar-add { justify-self: end; white-space: nowrap; }
.calendar-empty-note { color: var(--muted); font-size: 11px; padding: 10px 4px 0; }
.drag-over { background-color: #333f30 !important; box-shadow: inset 0 0 0 2px var(--accent) !important; }

.week-scroll { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.week-head, .week-all-day, .week-body { display: grid; }
.days-5 { grid-template-columns: 58px repeat(5, minmax(0, 1fr)); }
.days-6 { grid-template-columns: 58px repeat(6, minmax(0, 1fr)); }
.days-7 { grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
.week-head { background: #1b1e27; border-bottom: 1px solid var(--line); }
.week-head-cell { text-align: center; padding: 10px 4px; color: var(--muted); font-size: 10px; border-left: 1px solid var(--line); }
.week-head-cell:first-child { border-left: 0; }
.week-head-cell strong { display: block; color: var(--text); font: 700 12px Manrope, sans-serif; margin-top: 4px; }
.week-head-cell.today { color: #172012; background: var(--accent); font-weight: 800; }
.week-head-cell.today strong { color: #172012; }
.week-all-day { border-bottom: 1px solid var(--line); background: var(--panel); }
.week-all-day-label { color: var(--muted); font-size: 9px; padding: 8px 6px; text-align: right; }
.week-all-day-cell { display: grid; align-content: start; gap: 4px; padding: 4px; min-width: 0; min-height: 38px; border-left: 1px solid var(--line); }
.week-all-day-cell.today { background-color: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.week-times { position: relative; background: var(--panel); }
.week-time { position: absolute; right: 8px; color: var(--muted); font-size: 9px; transform: translateY(-6px); }
.week-time:first-child { transform: none; }
.week-day { position: relative; min-width: 0; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, var(--line) 54px, var(--line) 55px); cursor: pointer; }
.week-day.today { background-color: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 2px 0 var(--accent), inset -2px 0 var(--accent); }
.week-event { position: absolute; border-left: 3px solid var(--kind-line); border-radius: 6px; background: var(--kind-fill); padding: 4px 6px; overflow: hidden; color: #f2f3f7; cursor: grab; }
.week-event strong { display: block; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.week-event small { display: block; color: #c0c4ce; font-size: 9px; margin-top: 2px; line-height: 1.2; overflow-wrap: anywhere; }
.week-event.done { opacity: .55; }
.week-event.done strong { text-decoration: line-through; }

.lecture { --kind-line: #ffce62; --kind-fill: #443920; }
.exercise { --kind-line: #5cddc5; --kind-fill: #1d3d3a; }
.exam { --kind-line: #ff8f94; --kind-fill: #452c32; }
.assignment { --kind-line: #9aaeff; --kind-fill: #252c40; }
.other { --kind-line: #c495ea; --kind-fill: #382a45; }

.month-calendar { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.month-weekdays, .month-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekday { text-align: center; padding: 10px 4px; background: #1b1e27; color: var(--muted); font-size: 11px; font-weight: 700; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month-weekday:last-child { border-right: 0; }
.month-day { min-width: 0; min-height: 118px; padding: 6px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.month-day:nth-child(7n) { border-right: 0; }
.month-day:nth-child(7n+6), .month-day:nth-child(7n) { background: #151820; }
.month-day.outside > * { opacity: .48; }
.month-day.today, .month-day.today:nth-child(n) { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.month-date { display: inline-grid; place-items: center; min-width: 25px; height: 25px; margin-bottom: 4px; padding: 0; border: 0; background: none; color: var(--text); font-size: 12px; font-weight: 700; border-radius: 50%; }
.month-day.today .month-date { background: var(--accent); color: #172012; }
.month-day-items { display: grid; gap: 4px; }
.month-dots, .month-selected-day, .calendar-agenda { display: none; }
.month-event { display: flex; align-items: flex-start; gap: 5px; min-width: 0; padding: 5px 4px; border-left: 3px solid var(--kind-line); border-radius: 5px; background: var(--kind-fill); color: var(--text); font-size: 10px; line-height: 1.2; cursor: grab; user-select: none; -webkit-user-select: none; }
.month-event:active, .week-event:active { cursor: grabbing; }
.month-event-text { min-width: 0; flex: 1; overflow-wrap: break-word; }
.month-day-items .month-event-text strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.month-event-text strong { display: block; font-size: 10px; font-weight: 700; }
.month-event-text small { display: block; color: #bec4d0; font-size: 9px; margin-top: 3px; }
.month-event.done { opacity: .55; }
.month-event.done strong { text-decoration: line-through; }
.month-done-check { flex: none; color: #b9f28b; font-weight: 900; font-size: 11px; line-height: 1; }
.month-task-mark { flex: none; color: #bbc9ff; font-size: 8px; font-weight: 800; border: 1px solid #667594; padding: 2px 3px; border-radius: 3px; }

.agenda-day h2, .month-selected-head h2 { font: 700 13px Manrope, sans-serif; margin: 0; }
.agenda-day { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day:first-child { padding-top: 0; }
.agenda-day .month-event, .month-selected-day .month-event { padding: 9px 8px; font-size: 12px; }
.agenda-day .month-event-text strong, .month-selected-day .month-event-text strong { font-size: 13px; }
.agenda-day .month-event-text small, .month-selected-day .month-event-text small { font-size: 11px; }
.agenda-today { margin-left: 8px; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: #172012; font-size: 10px; }
.agenda-empty { color: var(--muted); font-size: 11px; margin: 0; }
.month-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.calendar-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calendar-check-field { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; font-size: 12px; cursor: pointer; }
.calendar-item-description { font-size: 12px; line-height: 1.5; margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.calendar-item-actions { flex-wrap: wrap; }

/* Colour choices */
body[data-cockpit-color="spectrum"] { --accent: #0a84ff; --accent2: #73b6ff; }
body[data-cockpit-color="blue"] { --accent: #0a84ff; --accent2: #84c2ff; }
body[data-cockpit-color="purple"] { --accent: #bf5af2; --accent2: #dda7ff; }
body[data-cockpit-color="pink"] { --accent: #ff375f; --accent2: #ff9bab; }
body[data-cockpit-color="red"] { --accent: #ff453a; --accent2: #ff9b94; }
body[data-cockpit-color="orange"] { --accent: #ff9f0a; --accent2: #ffc36d; }
body[data-cockpit-color="yellow"] { --accent: #ffd60a; --accent2: #ffe980; }
body[data-cockpit-color="green"] { --accent: #a9f26d; --accent2: #d5ffab; }
body[data-cockpit-color="graphite"] { --accent: #aeb2b8; --accent2: #e0e2e5; }

/* Light mode */
.light { --bg: #e9ebef; --panel: #f1f2f5; --panel2: #e7e9ee; --line: #d4d7df; --text: #20232c; --muted: #68707f; color-scheme: light; }
.light .sidebar { background: #f1f2f5; border-color: #d4d7df; }
.light .topbar { border-color: #d4d7df; }
.light .card { border-color: #d8dbe2; }
.light .task { background: #e7e9ee; border-color: transparent; }
.light .task:hover { border-color: #c6cad3; }
.light .topbar .date-chip, .light .nav a.active { background: #e4e8dd; color: #4d663c; }
.light .nav a { color: #606777; }
.light .nav a:hover { background: #e6e8ec; color: #20232c; }
.light .nav-label { color: #68707f; }
.light .secondary-btn, .light .mobile-menu { color: #414754; }
.light .secondary-btn:hover { background: #e6e8ec; color: #20232c; }
.light .check { border-color: #8d93a1; }
.light .eyebrow, .light .link-btn, .light .subject-code, .light .task-source-link, .light .system-link-arrow, .light .system-link-icon { color: #4d663c; }
body.light:not([data-cockpit-color="green"]) :is(.eyebrow, .link-btn, .subject-code, .task-source-link, .system-link-arrow, .system-link-icon) { color: color-mix(in srgb, var(--accent) 70%, #20232c); }
.light .system-link-icon { background: #e2e5ea; }
.light .system-icon-letter, .light .system-icon-moodle, .light .system-icon-hub { color: inherit; }
.light .todo-entry input, .light .field input, .light .field select { background: #f5f6f8; color: #20232c; border-color: #cfd3dc; }
.light .task-status-tabs button, .light .task-status-select { background: #fff; }
.light .task-status-tabs button.active { background: #eff6e8; color: #355225; border-color: #9bb582; }
.light .task-filters input, .light .task-filters select { background: #fff; color: #20232c; border-color: #d9dce3; }
.light .modal { background: #f1f2f5; border-color: #d4d7df; }
.light .field label { color: #414754; }
.light .toast { background: #eff6e8; color: #2e4520; border-color: #a4c289; }
.light .toast-error { background: #fbeaea; color: #8c2f36; border-color: #e3b4b8; }
.light .toast-choice button { background: #fff; color: #314626; border-color: #b9c9a9; }
.light .calendar-tabs button { background: #fff; }
.light .calendar-tabs button.active { background: #eff6e8; color: #355225; border-color: #9bb582; }
.light .week-navigator button { background: #fff; }
.light .week-head, .light .month-weekday { background: #f6f7f9; }
.light .week-head-cell.today strong { color: #25341b; }
.light .week-times, .light .week-all-day { background: #f1f2f5; }
.light .month-day { background: #fff; }
.light .month-day:nth-child(7n+6), .light .month-day:nth-child(7n) { background: #f8f9fb; }
.light .month-day.today:nth-child(n) { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.light .week-day.today, .light .week-all-day-cell.today { background-color: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.light .drag-over { background-color: #e4efd9 !important; }
.light .lecture { --kind-line: #c79200; --kind-fill: #ffe08a; }
.light .exercise { --kind-line: #17a58c; --kind-fill: #8debd7; }
.light .exam { --kind-line: #d9545b; --kind-fill: #ffd9dc; }
.light .assignment { --kind-line: #5d75d9; --kind-fill: #e8edfb; }
.light .other { --kind-line: #9358c4; --kind-fill: #d9b4f2; }
.light .week-event, .light .month-event { color: #20232c; }
.light .week-event small, .light .month-event-text small { color: #414754; }
.light .month-done-check { color: #3c7b25; }
.light .month-task-mark { color: #3a4c94; border-color: #8393cf; }
.light .field textarea { background: #f5f6f8; color: #20232c; border-color: #cfd3dc; }

@media (max-width: 900px) {
  /* The grids become lists here. kalendar.js has the same width in NARROW_SCREEN. */
  .week-toolbar { grid-template-columns: 1fr auto; }
  .week-navigator { grid-column: 1 / -1; grid-row: 2; }
  .week-scroll, .calendar-drag-help { display: none; }
  .calendar-agenda { display: block; }
  .month-day { min-height: 54px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; }
  .month-day-items { display: none; }
  .month-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .month-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kind-line); }
  .month-dot-more { font-size: 8px; line-height: 6px; color: var(--muted); }
  .month-day.selected { box-shadow: inset 0 0 0 2px var(--muted); }
  .month-selected-day { display: grid; gap: 6px; margin-top: 14px; }
  .field textarea { font-size: 16px; }
}
@media (max-width: 420px) {
  .calendar-tabs button { padding: 8px 7px; }
  .calendar-add { padding: 9px 9px; font-size: 11px; }
  .week-navigator { gap: 5px; width: 100%; }
  .week-navigator .week-label { flex: 1; font-size: 11px; }
}

@media (max-width: 700px) {
  .systems-groups { grid-template-columns: 1fr; }
  .systems-group-wide, .systems-pair { grid-column: auto; }
  .systems-pair { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .systems-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .task-manager-head { align-items: flex-start; }
  .task-filters { flex-direction: column; }
  .manage-task { flex-wrap: wrap; }
  .manage-task .task-main { flex: 1 1 calc(100% - 40px); }
  .manage-task .task-deadline { margin-left: 28px; text-align: left; min-width: 72px; }
  .manage-task .task-status-select { margin-left: auto; max-width: none; }
  .task-title-row { flex-wrap: wrap; row-gap: 4px; }
  .manage-task .task-title-row strong.task-title-text { white-space: normal; flex: 1 1 100%; }
  /* 16px stops iPhone Safari from zooming in when the field gets focus. */
  .field input, .field select, .task-filters input, .task-filters select, .task-status-select { font-size: 16px; }
  .page-grid { grid-template-columns: 1fr; }
  .section-card { padding: 16px; }
  .task { padding: 10px 8px; }
  /* 16px stops iPhone Safari from zooming in when the field gets focus. */
  .todo-entry input { font-size: 16px; }
  .toast { left: 16px; right: 16px; bottom: 16px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 3; }
  .main { margin-left: 0; padding: 0 16px 40px; }
  .mobile-menu { display: block; }
  .topbar { height: 64px; margin-bottom: 22px; }
}