*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  background: #f5f5f5;
  color: #454E5C;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  gap: 0;
  background: #7F5482;
  color: white;
  padding: 0 16px;
  height: 48px;
  position: relative;
  z-index: 200;
}
.brand {
  font-weight: 700;
  font-size: 15px;
  margin-right: 24px;
  color: white;
  white-space: nowrap;
}
.topnav a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 0 16px;
  line-height: 48px;
  display: block;
}
.topnav a:hover, .topnav a.active {
  color: white;
  background: rgba(255,255,255,0.15);
}
/* ── Nav dropdowns ───────────────────────────────────────────────────────── */
.nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-trigger {
  color: rgba(255,255,255,0.8);
  padding: 0 14px;
  line-height: 48px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav-trigger:hover, .nav-trigger.active {
  color: white;
  background: rgba(255,255,255,0.15);
}
.nav-trigger .caret {
  font-size: 9px;
  opacity: 0.7;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 48px;
  left: 0;
  background: #2d3070;
  min-width: 160px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 300;
}
.nav-group:hover .nav-dropdown {
  display: block;
}
.nav-user {
  margin-left: auto;
}

/* ── Timezone switcher ───────────────────────────────────────────────────── */
.tz-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.tz-switcher-label {
  font-size: 12px;
  color: #5B6878;
  margin-right: 2px;
}
.tz-btn {
  padding: 3px 11px;
  border-radius: 12px;
  font-size: 12px;
  border: 1.5px solid #ddd;
  color: #5B6878;
  text-decoration: none;
  background: #fff;
}
.tz-btn:hover { border-color: #7F5482; color: #7F5482; }
.tz-btn.active { background: #7F5482; color: #fff; border-color: #7F5482; }
.nav-dropdown a {
  display: block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 10px 18px;
  line-height: 1.4;
  font-size: 13px;
}
.nav-dropdown a:hover, .nav-dropdown a.active {
  background: rgba(255,255,255,0.15);
  color: white;
}
/* ── Time pair in modals ─────────────────────────────────────────────────── */
.time-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
main { padding: 16px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.inline-form select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}
.week-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.week-nav a {
  color: #7F5482;
  text-decoration: none;
  font-weight: 600;
}
.week-nav a:hover { text-decoration: underline; }
.note { color: #777; margin-bottom: 12px; font-style: italic; }

/* ── Schedule grid ───────────────────────────────────────────────────────── */
.schedule-wrap {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: auto;
}

.schedule-header {
  display: flex;
  border-bottom: 2px solid #ddd;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
.gutter { width: 52px; flex-shrink: 0; }
.day-head {
  flex: 1;
  min-width: 100px;
  text-align: center;
  font-weight: 600;
  padding: 8px 4px;
  border-left: 1px solid #eee;
  font-size: 12px;
}

.schedule-body {
  display: flex;
  position: relative;
}

.time-col {
  width: 52px;
  flex-shrink: 0;
  position: relative;
}
.time-label {
  position: absolute;
  right: 6px;
  font-size: 10px;
  color: #999;
  transform: translateY(-50%);
  white-space: nowrap;
}

.day-col {
  flex: 1;
  min-width: 100px;
  position: relative;
  border-left: 1px solid #eee;
}
.hour-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid #f0f0f0;
}

/* ── Class blocks ────────────────────────────────────────────────────────── */
.class-block {
  position: absolute;
  box-sizing: border-box;
  background: #4285f4;
  color: white;
  border-radius: 4px;
  padding: 3px 5px;
  overflow: hidden;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.3;
  border-left: 3px solid #1a56c4;
  transition: filter 0.1s;
}
.class-block:hover { filter: brightness(1.1); }
/* Events render in brand purple to stand out from regular classes. Status
   colors (unassigned/has-sub/cancelled) intentionally take precedence — they
   appear later / use !important. */
.class-block.event {
  background: #7F5482;
  border-left-color: #5c3a5f;
}
.class-block.unassigned {
  background: #e53935;
  border-left-color: #b71c1c;
}
.class-block.staff-block {
  background: #43a047;
  border-left-color: #1b5e20;
  cursor: default;
}
.b-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-teacher { opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-time { opacity: 0.75; font-size: 10px; }
.b-notes { opacity: 0.8; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.class-block.teacher-block { border-left-width: 4px; filter: none; }
.class-block.teacher-block:hover { filter: brightness(1.12); }

/* ── Legend ──────────────────────────────────────────────────────────────── */
.legend-chip {
  display: inline-block;
  color: white;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 8px 4px 0;
}

/* ── Add button ──────────────────────────────────────────────────────────── */
.btn-add {
  background: white;
  border: 1px solid #ccc;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.btn-add:hover { background: #f5f5f5; }
.btn-danger {
  background: #c62828;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.btn-danger:hover { background: #b71c1c; }

/* ── Modal grid layout ───────────────────────────────────────────────────── */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-grid .field-label { margin-bottom: 0; }
dialog { max-width: 480px; }
dialog input[type="time"], dialog input[type="text"], dialog input[type="number"] {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
dialog {
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  min-width: 300px;
  max-width: 400px;
}
/* The class modal uses a FIXED width so the box stays the same size whichever
   panel is open (no resizing when Shifts/Staffing expand), and the 4 action
   buttons fit one row. */
#edit-modal { width: min(540px, 94vw); max-width: min(540px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,0.4); }
dialog h3 { font-size: 15px; margin-bottom: 4px; }
.modal-close-x {
  float: right;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: #aaa; cursor: pointer;
  padding: 0 2px;
  margin: -4px -4px 4px 8px;
}
.modal-close-x:hover { color: #333; }
.modal-teacher-name {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  color: #333;
}
.modal-sub { color: #666; margin-bottom: 16px; font-size: 12px; }

/* ── Class modal: summary + collapsible action panels ──────────────────────── */
.modal-summary {
  padding: 10px 12px;
  border: 1px solid #efe9f1;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #5B6878;
}
.modal-summary .ev-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.modal-summary .ev-badge.event { background: #7F5482; color: #fff; }
.modal-summary .ev-badge.klass { background: #eef0f3; color: #5B6878; }
.modal-summary .roster-name { font-weight: 600; color: #2b2b2b; }
.modal-summary .roster-sub { color: #a13a3a; }
.modal-summary .roster-extra { margin-top: 6px; }
.modal-summary .chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 9px;
  background: #f0e6f2;
  border-radius: 12px;
  font-size: 12px;
  color: #5B4060;
}
.modal-summary .cancelled-banner {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fbe9e9;
  color: #a13a3a;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
}
.modal-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.modal-tab {
  flex: 1 1 100px;            /* all on one row on PC; wrap to 2×2 on narrow screens */
  padding: 7px 10px;
  border: 1.5px solid #efe9f1;
  border-radius: 8px;
  background: #fff;
  color: #5B6878;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.modal-tab:hover { background: #fbf8fc; border-color: #e0d4e3; }
.modal-tab.active { background: #7F5482; border-color: #7F5482; color: #fff; }
.modal-tab.danger { color: #c64646; border-color: #f0d4d4; }
.modal-tab.danger:hover { background: #fdf3f3; }
.modal-tab.danger.active { background: #c64646; border-color: #c64646; color: #fff; }
.modal-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #efe9f1;
  border-radius: 8px;
  background: #fbf8fc;
}
/* Inline forms inside a panel: bottom-align controls, no leftover stacked margin. */
.modal-panel .inline-form { align-items: flex-end; }
.modal-panel .inline-form .field-label { margin-bottom: 0; }
/* field-label already spaces label↔control with its gap; drop the input's extra
   top margin so a number input lines up with adjacent selects. */
.modal-panel .field-label input { margin-top: 0; }
.modal-panel .field-label select,
.modal-panel .field-label input { height: 32px; box-sizing: border-box; }
/* Per-teacher shift rows (name on top, controls below so nothing overflows). */
.modal-panel .ev-row { padding: 7px 0; border-bottom: 1px solid #efe9f1; }
.modal-panel .ev-row:last-child { border-bottom: none; }
.modal-panel .ev-name { font-size: 13px; color: #2b2b2b; }
.modal-panel .ev-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px;
  color: #5B6878;
}
.modal-panel .ev-controls select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
.field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 16px;
}
.field-label select {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}
.modal-actions { display: flex; gap: 8px; }
.btn-save {
  background: #7F5482;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.btn-save:hover { background: #2d3070; }
.btn-cancel {
  background: white;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.modal-status { font-size: 12px; color: #c00; margin-top: 8px; min-height: 16px; }

/* ── Subs table ──────────────────────────────────────────────────────────── */
.subs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.subs-table th {
  background: #f0f0f0;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
}
.subs-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.subs-table tr:last-child td { border-bottom: none; }
.subs-table tr.assigned { background: #f0faf0; }
.subs-table select { font-size: 13px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.subs-table button {
  margin-left: 6px;
  background: #7F5482;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.subs-table button:hover { background: #2d3070; }
.assign-status { margin-left: 8px; color: #2a7a2a; font-size: 12px; }

.toolbar-label { font-weight: 600; font-size: 14px; }
.clickable-col { cursor: crosshair; }
.clickable-col .class-block { cursor: pointer; }

.empty-state {
  color: #777;
  padding: 32px;
  text-align: center;
  background: white;
  border-radius: 6px;
  border: 1px solid #ddd;
}


/* ── Role chips (table display) ──────────────────────────────────────────── */
.role-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: white;
  margin: 2px 2px;
  white-space: nowrap;
}
.role-primary { font-weight: 700; }
.role-teacher    { background: #1565c0; }
.role-principal  { background: #4527a0; }
.role-studio     { background: #006064; }
.role-coord      { background: #e65100; }
.role-leadership { background: #b71c1c; }  /* Education Director, Regional Manager, Chief of Staff */
.role-regional   { background: #b71c1c; }  /* legacy alias — kept for any pre-migration markup */
.role-director   { background: #b71c1c; }  /* legacy alias — kept for any pre-migration markup */
.role-external   { background: #546e7a; }
.role-other      { background: #757575; }

/* ── Location chips (table display) ─────────────────────────────────────── */
.loc-chip-sm {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  background: #e8f5e9;
  color: #2e7d32;
  margin: 2px 2px;
  white-space: nowrap;
}

/* ── Role chip picker (modal) ────────────────────────────────────────────── */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.chip-opt {
  padding: 5px 14px;
  border-radius: 20px;
  background: #f0f0f0;
  color: #555;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.chip-opt:hover { background: #e0e0e0; }
.chip-opt.chip-sel {
  background: #dbeafe;
  color: #1d4ed8;
}
.chip-opt.chip-primary-sel {
  background: #1d4ed8;
  color: white;
}
.chip-star { font-size: 11px; margin-left: 3px; opacity: 0.85; }

/* ── Location chip picker (modal) ────────────────────────────────────────── */
.loc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 4px;
}
.loc-quick-btn {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: white;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.loc-quick-btn:hover { border-color: #2e7d32; color: #2e7d32; }
.loc-quick-btn.loc-quick-sel {
  background: #e8f5e9;
  border-color: #2e7d32;
  color: #2e7d32;
}
.loc-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
  padding: 2px 0;
}
.loc-chip-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 14px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 13px;
}
.chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #2e7d32;
  font-size: 15px;
  line-height: 1;
  padding: 0 0 1px;
}
.loc-input-row { display: flex; gap: 7px; margin-top: 6px; }
.loc-input-row input { flex: 1; }
.loc-input-row button {
  padding: 5px 14px;
  background: #7F5482;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

/* ── Directory section headers ───────────────────────────────────────────── */
.dir-section { margin-bottom: 28px; }
.dir-section-hdr {
  padding: 7px 16px;
  border-radius: 6px 6px 0 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
/* Studio multi-select on /teaching — checkbox dropdown */
.studio-multi { position: relative; display: inline-block; }
.studio-multi-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 13px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  cursor: pointer; min-width: 140px; justify-content: space-between;
}
.studio-multi-trigger:hover { border-color: #7F5482; }
.studio-multi-label { font-weight: 500; color: #454E5C; }
.studio-multi-caret { color: #9aa1ad; font-size: 11px; }
.studio-multi-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
  min-width: 200px;
  background: #fff; border: 1px solid #efe9f1; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10); padding: 6px;
}
.studio-multi-panel.studio-multi-open { display: block; }
.studio-multi-options { display: flex; flex-direction: column; gap: 1px; }
.studio-multi-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 13px;
  font-weight: 400; color: #454E5C;
}
.studio-multi-option:hover { background: #fbf8fc; }
.studio-multi-option input { margin: 0; cursor: pointer; }
.studio-multi-name { flex: 1; }
.studio-multi-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 4px 2px;
  border-top: 1px solid #f3f4f6; margin-top: 4px;
}
.studio-multi-hint { font-size: 10px; color: #9aa1ad; }

.dir-cat-teacher       { background: #dbeafe; color: #1e40af; }
.dir-cat-external-sub  { background: #fef3c7; color: #92400e; }
.dir-cat-remote        { background: #ede9fe; color: #5b21b6; }
.dir-cat-other         { background: #f3f4f6; color: #374151; }
.dir-cat-inactive      { background: #f3f4f6; color: #9ca3af; }

/* ── Directory table ─────────────────────────────────────────────────────── */
.dir-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  font-size: 13px;
}
.dir-table th {
  background: #fafafa;
  padding: 7px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}
.dir-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.dir-table tr:last-child td { border-bottom: none; }
.dir-row { cursor: pointer; transition: background 0.1s; }
.dir-row:hover { background: #f8f9ff; }
.inactive-row { opacity: 0.5; }
.inactive-badge {
  font-size: 11px;
  background: #e0e0e0;
  color: #666;
  padding: 1px 6px;
  border-radius: 10px;
}
.btn-reactivate {
  font-size: 11px;
  padding: 1px 8px;
  border: 1px solid #2a7a2a;
  background: #fff;
  color: #2a7a2a;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 4px;
}
.btn-reactivate:hover { background: #e8f5e9; }
.chip-cell { white-space: normal; line-height: 1.8; }
.notes-cell {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
}
.text-sm { font-size: 12px; color: #444; }
.nowrap { white-space: nowrap; }

.region-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
}

/* ── Directory dialog ────────────────────────────────────────────────────── */
.dir-dialog {
  max-height: 88vh;
  overflow-y: auto;
  width: 560px;
  max-width: 95vw;
}
.field-hint {
  display: block;
  font-size: 11px;
  color: #888;
  font-weight: normal;
  margin-bottom: 2px;
}
.remote-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-top: 8px;
  cursor: pointer;
  color: #555;
}

/* ── Site Manager role chip ──────────────────────────────────────────────── */
/* Distinct from .role-studio (#006064 dark cyan) — light green so the two
   manager roles are easy to tell apart on the directory page. */
.role-site { background: #7cb342; }

/* ── Managed schools picker ──────────────────────────────────────────────── */
.mgd-btn     { border-color: #ccc; color: #555; }
.mgd-btn-sel { background: #fff3e0; border-color: #e65100; color: #e65100; }
.mgd-btn-sel:hover { background: #ffe0b2; }

/* ── Sub teacher on class blocks ─────────────────────────────────────────── */
.class-block.has-sub {
  background: #fff3cd !important;
  border-left-color: #e67e00 !important;
  color: #6b3d00;
}
.class-block.cancelled {
  background: #fee2e2 !important;
  border-left-color: #dc2626 !important;
  color: #7f1d1d;
  opacity: 0.85;
}
.parent-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.contact-check input[type=checkbox] { cursor: pointer; }
.contact-ts-input {
  font-size: 11px;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: 4px;
  background: #f0fdf4;
  width: 145px;
}

.cancelled-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  background: #dc2626;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.sub-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  background: #e67e00;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-right: 3px;
}
.sub-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cancel-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cancel-divider::before, .cancel-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #fca5a5;
}
.cancelled-notice {
  font-size: 12px;
  color: #dc2626;
  margin-bottom: 8px;
}
.sub-divider::before, .sub-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

/* ── Academic calendar table ─────────────────────────────────────────────── */
.cal-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  font-size: 13px;
}
.cal-table th {
  background: #f0f0f0;
  padding: 8px 14px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
}
.cal-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.cal-table tr:last-child td { border-bottom: none; }
.cal-row:hover { background: #f8f9ff; }

.cal-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cal-holiday     { background: #fce7f3; color: #9d174d; }
.cal-break       { background: #d1fae5; color: #065f46; }
.cal-special     { background: #ede9fe; color: #5b21b6; }
.cal-bravo       { background: #fff3c4; color: #92400e; }
.cal-theme-week  { background: #dbeafe; color: #1e40af; }
.cal-other       { background: #f3f4f6; color: #374151; }

.btn-edit-sm {
  font-size: 11px;
  padding: 3px 9px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 4px;
}
.btn-edit-sm:hover { background: #e0e0e0; }
.btn-del-sm {
  font-size: 11px;
  padding: 3px 7px;
  background: #fff0f0;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  cursor: pointer;
  color: #dc2626;
}

/* ── Open Subs table ─────────────────────────────────────────────────────── */
.subs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  font-size: 13px;
}
.subs-table th {
  background: #f0f0f0;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
  white-space: nowrap;
}
.subs-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.subs-table tr:last-child td { border-bottom: none; }
.subs-row:hover { background: #f8f9ff; }
.subs-status-cancelled { opacity: 0.5; }
.subs-status-filled { background: #f0fdf4; }

.sub-assign-sel { font-size: 12px; padding: 3px 6px; margin-right: 4px; }
.subs-actions { white-space: nowrap; }
.assigned-sub { color: #16a34a; font-weight: 600; }
.no-sub { color: #aaa; }

.days-urgent { color: #dc2626; font-weight: 700; }
.days-soon   { color: #d97706; font-weight: 600; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.status-open            { background: #dbeafe; color: #1e40af; }
.status-filled          { background: #d1fae5; color: #065f46; }
.status-rejected        { background: #fee2e2; color: #991b1b; }
.status-withdrawn       { background: #e5e7eb; color: #4b5563; }
.status-class_cancelled { background: #1f1f1f; color: #fff; }

.cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.cat-standard  { background: #f3f4f6; color: #374151; }
.cat-emergency { background: #fee2e2; color: #991b1b; }

.reason-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #eef2ff;
  color: #3730a3;
  cursor: help;
  border-bottom: 1px dotted #6366f1;
}
.sick-badge { color: #15803d; font-weight: 700; }
.text-center { text-align: center; }
.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.inline-check input { width: auto; margin: 0; }

.btn-warn-sm {
  font-size: 11px;
  padding: 3px 9px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 4px;
  cursor: pointer;
  color: #c2410c;
  margin-right: 4px;
}
.btn-warn-sm:hover { background: #ffedd5; }

/* ── Region tabs ─────────────────────────────────────────────────────────── */
.region-tabs { display: flex; gap: 4px; }
.rtab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #555;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
.rtab:hover    { background: #e0e0e0; }
.rtab-active   { background: #7F5482; color: white; border-color: #7F5482; }

/* ── Hamburger toggle (hidden on desktop) ────────────────────────────────── */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Nav */
  .nav-toggle { display: flex; align-items: center; }

  .topnav {
    flex-wrap: wrap;
    height: auto;
    padding: 0 12px;
    align-items: center;
  }
  .topnav > .brand { padding: 14px 0; }

  /* Hide all nav items except brand + toggle by default */
  .topnav > .nav-group,
  .topnav > a {
    display: none;
    width: 100%;
  }

  /* When open, show everything stacked */
  .topnav.nav-open > .nav-group,
  .topnav.nav-open > a {
    display: block;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .nav-group { position: static; }

  .nav-trigger {
    display: block;
    padding: 12px 0;
    cursor: pointer;
  }

  .nav-dropdown {
    position: static;
    display: block;
    box-shadow: none;
    background: transparent;
    padding-left: 16px;
    border-radius: 0;
    min-width: 0;
    top: auto;
    left: auto;
  }

  .nav-dropdown a {
    padding: 10px 0;
    border-radius: 0;
  }

  /* Disable hover-based dropdown on mobile (already expanded in nav-open) */
  .nav-group:hover .nav-dropdown { display: block; }

  /* Touch-friendly inputs */
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px !important;  /* prevents iOS auto-zoom */
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  /* General layout */
  main { padding: 12px; }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .toolbar select,
  .toolbar .btn-add,
  .toolbar .inline-form { width: 100%; }
  .toolbar .inline-form select { width: 100%; }

  .region-tabs { flex-wrap: wrap; }

  /* Modal */
  .modal-grid { grid-template-columns: 1fr !important; }
  dialog { width: 95vw !important; max-width: 95vw !important; }

  /* Request sub form */
  .req-sub-wrap { padding: 0; }
  .class-row { flex-direction: column; gap: 8px; }
  .class-row-fields { flex-direction: column; }
  .class-row-fields .field-label { min-width: 0; width: 100%; }
  .field-label { width: 100%; display: flex; flex-direction: column; gap: 4px; }
  .req-sub-wrap .btn-submit {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* Tables and schedule — allow horizontal scroll */
  .schedule-wrap { overflow-x: auto; }
  .subs-table,
  .dir-table,
  .cal-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Directory */
  .dir-section { overflow-x: auto; }

  /* Legend chips */
  .legend-chip { font-size: 10px; padding: 2px 8px; }
}

.btn-toggle {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #555;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
.btn-toggle-on { background: #f59e0b; color: white; border-color: #f59e0b; }

/* ── Request Sub form ────────────────────────────────────────────────────── */
.req-sub-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.req-sub-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #7F5482;
}
.req-section {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.req-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #444;
  margin-bottom: 4px;
}
.req-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.class-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
  background: #f8f8ff;
  border: 1px solid #e0e0f0;
  border-radius: 6px;
  margin-bottom: 8px;
}
.class-row-fields {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.class-row-fields .field-label { flex: 1; min-width: 140px; }
.btn-remove-row {
  background: #fff0f0;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  color: #dc2626;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
  align-self: flex-end;
  margin-bottom: 1px;
}
.btn-add-class {
  background: #f0f4ff;
  border: 1px dashed #7c8fde;
  border-radius: 6px;
  color: #7F5482;
  cursor: pointer;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  margin-top: 4px;
}
.btn-add-class:hover { background: #e6ecff; }

textarea.field-label,
label.field-label textarea {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
}
.btn-del-sm:hover { background: #fee2e2; }

/* ── Help docs (Google-Docs-backed inline render) ─────────────────────────── */
.help-rendered { color: #1f2937; line-height: 1.55; font-size: 15px; }
.help-rendered h1,
.help-rendered h2,
.help-rendered h3 { color: #7F5482; margin-top: 24px; margin-bottom: 8px; }
.help-rendered h1 { font-size: 24px; }
.help-rendered h2 { font-size: 20px; border-bottom: 1px solid #efe9f1; padding-bottom: 4px; }
.help-rendered h3 { font-size: 16px; }
.help-rendered p  { margin: 8px 0; }
.help-rendered ul, .help-rendered ol { margin: 8px 0 8px 22px; padding: 0; }
.help-rendered li { margin: 4px 0; }
.help-rendered blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid #7F5482;
  background: #fbf8fc;
  color: #5B6878;
  font-style: italic;
}
.help-rendered a { color: #7F5482; text-decoration: underline; }
.help-rendered hr { border: none; border-top: 1px solid #efe9f1; margin: 20px 0; }
.help-rendered code,
.help-rendered pre {
  background: #f4f1f5;
  border-radius: 4px;
  padding: 2px 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
}
.help-rendered pre { padding: 10px 14px; overflow-x: auto; }
.help-rendered table {
  border-collapse: collapse;
  margin: 12px 0;
}
.help-rendered th,
.help-rendered td { border: 1px solid #efe9f1; padding: 6px 10px; text-align: left; }
.help-rendered th { background: #fbf8fc; }