/* Shared styles for all modules. Module-specific styles go in their own file. */

/* Always light: a light grey page, white cards and black text, whatever the device's theme. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #000000;
  --muted: #5d6b7e;
  --border: #dde2e8;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --error: #b42318;
  --error-bg: #fdecea;
  --ok-bg: #e7f5ec;
  --radius: 10px;
}

* { box-sizing: border-box; }

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

a { color: var(--accent); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; text-decoration: none; color: var(--text); }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.site-nav a { text-decoration: none; }
.nav-soon { color: var(--muted); }

.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card.narrow { max-width: 420px; margin: 0 auto; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.module-card { text-decoration: none; color: var(--text); }
.module-card h2 { margin: 0; font-size: 1.2rem; }
.module-card.is-soon { color: var(--muted); }
.module-card.is-soon p { margin: 4px 0 0; }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.field-error { color: var(--error); margin: 4px 0 0; font-size: 0.9rem; }

.button {
  display: inline-block;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

form.inline { display: inline; }
.link-button {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.flash { padding: 10px 14px; border-radius: 8px; background: var(--ok-bg); }
.flash-error { background: var(--error-bg); color: var(--error); }

.muted { color: var(--muted); }
.card + .card, .card + .subnav { margin-top: 16px; }
.card h2 { margin-top: 0; font-size: 1.1rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.link-button.danger { color: var(--error); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.95em; }

/* School: sync status card */
.status-card { border-left: 6px solid var(--muted); }
.status-card.status-success { border-left-color: #2e8b57; }
.status-card.status-syncing,
.status-card.status-requested { border-left-color: var(--accent); }
.status-card.status-partial,
.status-card.status-paused { border-left-color: #c77700; }
.status-card.status-failed { border-left-color: var(--error); }
.status-headline { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; }
.status-detail { margin: 0 0 8px; color: var(--muted); }
.status-warning { margin: 0 0 8px; color: #c77700; font-weight: 600; }

/* School: devices */
.key-card { border: 2px solid var(--accent); }
.key-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.key {
  flex: 1 1 260px;
  padding: 10px;
  overflow-wrap: anywhere;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.device-list { list-style: none; margin: 0; padding: 0; }
.device {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.device:first-child { border-top: 0; }
.device .muted { display: block; font-size: 0.9rem; }
.device-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form input {
  width: 150px; padding: 6px 8px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}

/* School: sub-menu, schedule items, week grid */
.subnav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; }
.subnav a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.center { text-align: center; }
.badge {
  display: inline-block; padding: 1px 8px; font-size: 0.8rem; font-weight: 600;
  color: var(--accent-text); background: var(--accent); border-radius: 999px;
}
.button.secondary { color: var(--accent); background: transparent; border: 1px solid var(--border); }
.two-columns { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 800px) { .two-columns { grid-template-columns: 1fr 1fr; } }
.two-columns .card + .card { margin-top: 0; }
.module-grid .card + .card { margin-top: 0; }

.items { list-style: none; margin: 0 0 8px; padding: 0; }
.item {
  display: grid; gap: 2px; padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg); border-left: 4px solid var(--accent); border-radius: 6px;
}
.item-exam { border-left-color: var(--error); }
.item-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.item-meta { color: var(--muted); font-size: 0.9rem; }


.changes { margin: 0; padding-left: 18px; }
.change { margin-bottom: 6px; }
.exam-list { margin: 0; padding-left: 18px; }
.exam-list li { margin-bottom: 10px; }
.exam-list.is-past { color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* School: tuition bills from IUPay */
.pay-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pay-card h2, .pay-card p { margin: 0 0 4px; }
.button { text-decoration: none; }
.bill-text { white-space: pre-line; }
.bill-card.is-overdue { border-left: 4px solid var(--error); }
.is-overdue .bill-due { color: var(--error); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.bills { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bills th, .bills td { padding: 6px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.bills .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tuition-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  border-left: 4px solid var(--accent); }
.tuition-notice.is-overdue { border-left-color: var(--error); }

/* School: timetable calendar (FullCalendar) */
:root {
  --class-color: #1f5fbf;
  --exam-color: #b42318;
}
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.legend-item::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  vertical-align: -1px; border-radius: 3px;
}
.legend-class::before { background: var(--class-color); }
.legend-exam::before { background: var(--exam-color); }
.calendar-card { padding: 12px; overflow-x: auto; }
.fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--bg);
  --fc-list-event-hover-bg-color: var(--bg);
  --fc-border-color: var(--border);
  --fc-today-bg-color: rgba(31, 95, 191, 0.08);
  --fc-now-indicator-color: var(--error);
  --fc-button-bg-color: var(--accent);
  --fc-button-border-color: var(--accent);
  --fc-button-hover-bg-color: var(--accent);
  --fc-button-hover-border-color: var(--accent);
  --fc-button-active-bg-color: var(--text);
  --fc-button-active-border-color: var(--text);
  --fc-button-text-color: var(--accent-text);
  color: var(--text);
}
.fc .fc-toolbar-title { font-size: 1.15rem; }
.fc .fc-button { font-size: 0.9rem; text-transform: none; }
.fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
.fc .event-class { background: var(--class-color); border-color: var(--class-color); color: #fff; }
.fc .event-exam { background: var(--exam-color); border-color: var(--exam-color); color: #fff; }
.fc .fc-list-event.event-class, .fc .fc-list-event.event-exam { background: transparent; color: var(--text); }
.fc .fc-list-event.event-class .fc-list-event-dot { border-color: var(--class-color); }
.fc .fc-list-event.event-exam .fc-list-event-dot { border-color: var(--exam-color); }
.fc .event-time { font-weight: 700; font-size: 0.8rem; }
.fc .event-title { font-size: 0.85rem; line-height: 1.25; }
.fc .event-room { font-size: 0.8rem; opacity: 0.9; }
.fc .fc-list-event .event-time { display: none; }

.system-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.system-lines li { margin: 2px 0; }
.system-paused, .system-partial { color: #c77700; }
.system-failed { color: var(--error); }

/* School: Blackboard */
:root { --due-color: #c77700; }
.legend-due::before { background: var(--due-color); }
.fc .event-due { background: var(--due-color); border-color: var(--due-color); color: #fff; }
.fc .fc-list-event.event-due { background: transparent; color: var(--text); }
.fc .fc-list-event.event-due .fc-list-event-dot { border-color: var(--due-color); }
.item-due { border-left-color: var(--due-color); }
.bb-item { padding: 10px 0; border-top: 1px solid var(--border); }
.bb-item:first-of-type { border-top: 0; }
.bb-item h3 { margin: 0 0 4px; font-size: 1rem; }
.bb-item p { margin: 4px 0; }
.bb-text { white-space: pre-line; }
.bb-item.is-overdue h3 { color: var(--error); }
.badge-warning { background: var(--due-color); }
.bb-materials { margin: 0; padding-left: 18px; }
.bb-materials li { margin-bottom: 6px; }
/* Blackboard names like "Entrepreneurship_S1_2026-27_G01" have no spaces to wrap at. */
h1, .module-card h2, .bb-item h3 { overflow-wrap: anywhere; }

/* School: events joined from Mailbox (docs/superpowers/specs/2026-09-28-mailbox-events-design.md, 4.7) */
:root { --event-color: #1d8a4e; }
.legend-event::before { background: var(--event-color); }
.fc .event-event { background: var(--event-color); border-color: var(--event-color); color: #fff; }
.fc .fc-list-event.event-event { background: transparent; color: var(--text); }
.fc .fc-list-event.event-event .fc-list-event-dot { border-color: var(--event-color); }
.item-event { border-left-color: var(--event-color); }

/* School: the student's own events */
:root { --mine-color: #6d28d9; }
.legend-mine::before { background: var(--mine-color); }
.fc .event-mine { background: var(--mine-color); border-color: var(--mine-color); color: #fff; }
.fc .fc-list-event.event-mine { background: transparent; color: var(--text); }
.fc .fc-list-event.event-mine .fc-list-event-dot { border-color: var(--mine-color); }
.item-mine { border-left-color: var(--mine-color); }
.fc .event-conflict { border: 2px solid var(--error); }
.fc .fc-list-event.event-conflict .event-title { color: var(--error); }
/* The hidden attribute must win over display rules such as flex labels (event-form.js hides fields with it). */
[hidden] { display: none !important; }
.event-repeat { margin: 0 0 14px; padding: 0; border: 0; }
.event-repeat legend { margin-bottom: 6px; font-weight: 600; }
.event-repeat .check { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.event-weekdays { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.event-check { margin: 0 0 14px; }
.event-check ul { margin: 6px 0 0; padding-left: 18px; }
.event-delete { margin-top: 12px; }
.event-day, .event-skipped { margin: 0 0 14px; }
.event-skipped ul { margin: 0; padding-left: 18px; }
.event-day form, .event-skipped form { display: inline; }
.timetable-actions { margin: 0 0 12px; }
.my-events { margin-top: 16px; }
.my-event-lines { margin: 0; padding-left: 18px; }
.my-event-lines li { margin-bottom: 6px; }

/* School: To submit */
.item.is-overdue { border-left-color: var(--error); }
.badge-overdue { background: var(--error); color: #fff; }

/* School: classes changed by an announcement */
:root { --changed-color: #6f42c1; --cancelled-color: #c9ced6; }
.legend-changed::before { background: var(--changed-color); }
.legend-cancelled::before { background: var(--cancelled-color); }
.fc .event-changed { background: var(--changed-color); border-color: var(--changed-color); color: #fff; }
.fc .event-cancelled { background: #eef0f3; border-color: var(--cancelled-color); color: var(--muted); }
.fc .event-cancelled .event-title { text-decoration: line-through; }
.fc .fc-list-event.event-changed, .fc .fc-list-event.event-cancelled { background: transparent; color: var(--text); }
.fc .fc-list-event.event-changed .fc-list-event-dot { border-color: var(--changed-color); }
.fc .fc-list-event.event-cancelled .fc-list-event-dot { border-color: var(--cancelled-color); }
.fc .fc-list-event.event-cancelled .event-title { color: var(--muted); }
.item-changed { border-left-color: var(--changed-color); }
.item-cancelled { border-left-color: var(--cancelled-color); color: var(--muted); }
.item-cancelled .item-title { text-decoration: line-through; }
.badge-changed { background: var(--changed-color); color: #fff; }
.badge-cancelled { background: var(--cancelled-color); color: var(--text); }
.fc .fc-list-event a.event-title { color: inherit; text-decoration: none; }
.fc .fc-list-event.event-cancelled a.event-title { text-decoration: line-through; }

/* School: Mailbox, one row per card (docs/superpowers/specs/2026-09-28-mailbox-events-design.md, 4.2) */
.container:has(.mailbox) { max-width: 1200px; }
.mail-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px;
  margin: 0 0 10px; }
.mail-read { margin: 0; }
.mail-setting { margin: 0; font-size: 0.9rem; }
.mail-setting .check { display: flex; gap: 6px; align-items: center; }
.mailbox .card + .card { margin-top: 10px; }
.mailbox-box { padding: 10px 14px 8px; }
.mailbox-box h2 { margin: 0 0 4px; font-size: 1rem; }
.mailbox-box h2 .count { color: var(--muted); font-weight: 400; }
.mail-rows { list-style: none; margin: 0; padding: 0; }
.mail-row {
  display: grid; grid-template-columns: 170px minmax(0, 170px) minmax(0, 1fr) auto 130px 300px;
  align-items: center; column-gap: 12px; padding: 4px 0; border-top: 1px solid var(--border);
}
.mail-row:first-child { border-top: 0; }
.mail-text { display: contents; }
.mail-labels { display: flex; gap: 4px; }
.cat {
  padding: 1px 7px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; border-radius: 4px;
}
.cat-class { background: #e3edfb; color: #1f4f99; }
.cat-school_task { background: #efe6fb; color: #5b2a9a; }
.cat-money { background: #e2f3e7; color: #1d6b3a; }
.cat-event { background: #dff2f4; color: #0f5f68; }
.cat-training_points { background: #fff1cc; color: #7a5200; border-color: #e0b64a; }
.cat-requests_account { background: #e9edf2; color: #3b4757; }
.cat-system_notice { background: #efefef; color: #555555; }
.cat-promotion { background: #fde7ef; color: #9c2256; }
.cat-other { background: var(--surface); color: var(--muted); border-color: var(--border); }
.cat-unsorted { background: #fff0e0; color: #a24d00; border-color: #f0b57a; cursor: help; }
.mail-sender { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject { color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject:hover { color: var(--accent); text-decoration: underline; }
.mail-row.is-opened .mail-subject { color: var(--muted); }
.mail-extra { display: flex; gap: 4px; white-space: nowrap; }
.tag { padding: 0 6px; font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; }
.tag-register { color: #7a5200; border-color: #e0b64a; }
.mail-when { color: var(--muted); font-size: 0.9rem; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums; }
.mail-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 0.9rem; }
.mail-actions a { text-decoration: none; }
.mail-actions a:hover { text-decoration: none; }
.done-button {
  display: inline-flex; align-items: center; box-sizing: border-box;
  min-height: 32px; padding: 4px 12px; font: inherit; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer;
}
.done-button:hover { color: var(--accent-text); background: var(--accent); }
.mail-actions .done-button { min-height: 28px; padding: 2px 8px; font-weight: 500; }
.mail-row.is-done .mail-done, .mail-row:not(.is-done) .mail-undo { display: none; }
.mail-sessions { grid-column: 2 / -1; font-size: 0.85rem; color: var(--muted); }
.mark { font-weight: 600; }
.mark-conflict { color: var(--error); }
.mark-free { color: #1d6b3a; }
.mark-joined { padding: 0 6px; color: #1d6b3a; background: #e2f3e7; border-radius: 4px; }
.join-card { max-width: 560px; margin: 0 auto; }
.join-sessions, .join-add { margin: 0 0 14px; padding: 0; border: 0; }
.join-sessions legend, .join-add legend { margin-bottom: 6px; font-weight: 600; }
.join-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; }
.join-add-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.join-add-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.join-add-fields input {
  padding: 6px 8px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
.mailbox-box details { margin-top: 6px; }
.mailbox-box summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
/* Phone: labels, tags and the date on the first line (the date drops below them when they don't fit, never under
   them), then sender · subject, then the actions. */
@media (max-width: 700px) {
  .mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 6px 0; }
  .mail-labels, .mail-extra { flex-wrap: wrap; }
  .mail-when { margin-left: auto; }
  .mail-text { display: block; order: 1; flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .mail-text .mail-sender::after { content: " · "; font-weight: 400; color: var(--muted); }
  .mail-actions { order: 2; flex: 1 0 100%; gap: 12px; }
  .mail-sessions { order: 3; flex: 1 0 100%; }
}
.field select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.field .check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.field .check input { width: auto; margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mail-automatic { margin-top: 12px; }

/* live.js: the short "Updated 14:32" note */
.live-note { position: fixed; right: 16px; bottom: 16px; margin: 0; padding: 6px 12px; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }