@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap");

:root {
  color-scheme: light;
  --browser-notice-height: 0px;
  --bg: #f5f2eb;
  --bg-2: #e5ece8;
  --surface: #fffdf8;
  --surface-soft: rgba(255, 253, 248, 0.92);
  --surface-strong: rgba(255, 253, 248, 0.98);
  --line: rgba(18, 63, 70, 0.12);
  --text: #172326;
  --muted: #68777a;
  --accent: #123f46;
  --accent-2: #6f8067;
  --accent-rgb: 18, 63, 70;
  --accent-2-rgb: 111, 128, 103;
  --danger: #bf4a3a;
  --shadow: 0 24px 54px rgba(18, 63, 70, 0.14);
}

/* Daily announcement student grid */
.daily-announcement-view {
  display: none;
  width: 100%;
  min-width: 0;
  max-width: 1320px;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.daily-announcement-view > *,
#dailyAnnouncementForm {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body[data-view="daily-announcement"] .daily-announcement-view {
  display: grid;
}

body[data-view="daily-announcement"] .content > :not(.daily-announcement-view):not(.pull-refresh-indicator) {
  display: none !important;
}

.daily-announcement-header,
.daily-announcement-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.daily-announcement-header h1,
.daily-announcement-review-header h2,
.daily-announcement-review-card h3 {
  margin: 0;
}

.daily-announcement-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 280px));
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.daily-announcement-state {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.daily-announcement-state.draft {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-2);
}

.daily-announcement-state.sent {
  background: rgba(39, 143, 88, 0.14);
  color: #267348;
}

.daily-announcement-status {
  min-height: 20px;
  color: var(--muted);
}

.daily-announcement-status.error {
  color: var(--danger);
}

.daily-announcement-empty,
.daily-announcement-review-errors {
  padding: 16px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--muted);
}

.daily-announcement-participation {
  padding: 11px 13px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.daily-announcement-participation[hidden] {
  display: none;
}

.daily-announcement-participation.is-attendance-driven {
  border-color: rgba(39, 143, 88, 0.24);
  color: #267348;
}

.daily-announcement-review-errors:empty {
  display: none;
}

.daily-announcement-review-errors {
  background: rgba(216, 75, 75, 0.1);
  color: var(--danger);
}

.daily-announcement-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.daily-announcement-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.daily-announcement-table th,
.daily-announcement-table td {
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.daily-announcement-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.daily-announcement-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
  background: var(--surface);
  background-clip: padding-box;
  box-shadow: 8px 0 14px -13px rgba(18, 63, 70, 0.85);
}

.daily-announcement-table thead th:first-child {
  z-index: 4;
  background: var(--surface);
}

.daily-announcement-roll-no {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.daily-announcement-student-column > span,
.daily-announcement-student-column > small {
  display: block;
}

.daily-announcement-student-column > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.daily-announcement-student-selection {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}

.daily-announcement-student-checkbox {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.daily-announcement-student-checkbox:disabled {
  cursor: default;
}

.daily-announcement-student-identity {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.daily-announcement-student-identity strong {
  display: block;
}

.daily-announcement-student-state {
  display: inline-flex;
  margin-top: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(39, 143, 88, 0.12);
  color: #267348;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
}

.daily-announcement-student-state.is-excluded {
  background: rgba(104, 119, 122, 0.12);
  color: var(--muted);
}

.daily-announcement-table tr.is-excluded th:first-child {
  background: var(--surface);
}

.daily-announcement-table tr.is-excluded td {
  background: rgba(104, 119, 122, 0.06);
}

.daily-announcement-table tr.is-excluded .daily-announcement-input {
  opacity: 0.48;
}

.daily-announcement-field-label {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.daily-announcement-table th[data-announcement-column-id] {
  cursor: pointer;
}

.daily-announcement-column-toggle {
  appearance: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.daily-announcement-column-toggle-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.08);
  line-height: 1;
}

.daily-announcement-copy {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-2);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.daily-announcement-copy:disabled {
  opacity: 0.5;
  cursor: default;
}

.daily-announcement-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
}

.daily-announcement-table th.is-collapsed,
.daily-announcement-table td.is-collapsed {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-right: 5px;
  padding-left: 5px;
}

.daily-announcement-table th.is-collapsed .daily-announcement-column-toggle {
  justify-content: center;
  margin-bottom: 0;
}

.daily-announcement-table th.is-collapsed .daily-announcement-field-label,
.daily-announcement-table th.is-collapsed .daily-announcement-copy {
  display: none;
}

.daily-announcement-table td.is-collapsed .daily-announcement-input {
  visibility: hidden;
  pointer-events: none;
}

.daily-announcement-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.daily-announcement-review {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.daily-announcement-review[hidden] {
  display: none;
}

.daily-announcement-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.daily-announcement-review-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}

.daily-announcement-review-card ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

@media (max-width: 720px) {
  .daily-announcement-header,
  .daily-announcement-review-header {
    flex-direction: column;
  }

  .daily-announcement-controls {
    grid-template-columns: 1fr;
  }

  .daily-announcement-table th,
  .daily-announcement-table td {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    padding: 9px;
  }

  .daily-announcement-table th:first-child {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    overflow-wrap: anywhere;
  }

  .daily-announcement-actions > button {
    flex: 1 1 150px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  max-width: 100%;
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.28), transparent 45%),
    radial-gradient(circle at 25% 55%, rgba(var(--accent-2-rgb), 0.24), transparent 50%),
    linear-gradient(140deg, var(--bg), var(--bg-2));
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}

body {
  padding-top: var(--browser-notice-height);
}

.browser-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  border-bottom: 1px solid #e8ce83;
  background: #fff4d6;
  color: #664500;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: break-word;
}

.browser-notice[hidden] {
  display: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(
      115deg,
      rgba(16, 24, 26, 0.08) 0%,
      rgba(16, 24, 26, 0) 60%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(16, 24, 26, 0.04),
      rgba(16, 24, 26, 0.04) 1px,
      transparent 1px,
      transparent 120px
    );
  pointer-events: none;
  z-index: -1;
}

.debug-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: min(360px, 92vw);
  max-height: 40vh;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 26, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 32px rgba(16, 24, 26, 0.18);
  font-size: 0.8rem;
  color: var(--text);
  z-index: 100;
}

.debug-panel h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.debug-line {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(16, 24, 26, 0.12);
  word-break: break-word;
}

.debug-line:last-child {
  border-bottom: none;
}

.debug-tag {
  font-weight: 600;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  opacity: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.92);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 16px 32px rgba(16, 24, 26, 0.2);
  z-index: 120;
  pointer-events: none;
  max-width: min(90vw, 520px);
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error {
  background: rgba(216, 75, 75, 0.95);
}

.app {
  position: relative;
  min-height: calc(100vh - var(--browser-notice-height));
}

.sidebar {
  position: fixed;
  top: var(--browser-notice-height);
  left: 0;
  bottom: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 22px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-2-rgb), 0.12));
  border-right: 1px solid var(--line);
  box-shadow: 16px 0 40px rgba(16, 24, 26, 0.12);
  transform: translateX(-110%);
  transition: transform 0.25s ease;
  z-index: 20;
}

.nav-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(16, 24, 26, 0.12);
  z-index: 30;
}

.nav-toggle span {
  width: 14px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body[data-nav="open"] .nav-toggle span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

body[data-nav="open"] .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body[data-nav="open"] .nav-toggle span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: var(--browser-notice-height) 0 0;
  background: rgba(16, 24, 26, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border: none;
  z-index: 15;
}

body[data-nav="open"] .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

body[data-auth="logged-in"][data-nav="open"] .sidebar {
  transform: translateX(0);
}

body[data-auth="logged-out"] .sidebar {
  transform: translateX(-110%);
  pointer-events: none;
}

body[data-auth="logged-out"] .nav-toggle {
  opacity: 0;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-text {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fffaf2;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
  white-space: nowrap;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-item.nav-item-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-2-rgb), 0.25));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

.nav-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.12));
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateX(2px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.nav-foot {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.content {
  display: grid;
  place-items: center;
  padding: 72px 24px 36px;
}

body[data-auth="logged-out"] .content {
  min-height: calc(100vh - var(--browser-notice-height));
  min-height: calc(100svh - var(--browser-notice-height));
  min-height: calc(100dvh - var(--browser-notice-height));
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-view="attendance"] .content,
body[data-view="attendance-list"] .content,
body[data-view="dashboard"] .content,
body[data-view="management-dashboard"] .content,
body[data-view="management-incident-reports"] .content,
body[data-view="management-infirmary-stats"] .content,
body[data-view="management-fee-stats"] .content,
body[data-view="management-student-counts"] .content,
body[data-view="teacher-utilization"] .content,
body[data-view="users"] .content,
body[data-view="student-qr"] .content,
body[data-view="class-scratchpad"] .content,
body[data-view="learning-objectives"] .content,
body[data-view="requisitions"] .content,
body[data-view="support-tickets"] .content,
body[data-view="infirmary-visits"] .content,
body[data-view="elearning"] .content,
body[data-view="announcements"] .content,
body[data-view="announcement-compose"] .content,
body[data-view="circulars"] .content,
body[data-view="circular-compose"] .content,
body[data-view="message-compose"] .content,
body[data-view="transport"] .content,
body[data-view="time-table"] .content,
body[data-view="calendar"] .content,
body[data-view="planned-absence"] .content,
body[data-view="subject-details"] .content,
body[data-view="subject-detail-compose"] .content,
body[data-view="dau-summaries"] .content,
body[data-view="dau-summary-compose"] .content,
body[data-view="daily-announcement"] .content,
body[data-view="photo-manager"] .content,
body[data-view="profile"] .content {
  place-items: start center;
  align-content: start;
  padding-top: 8px;
  padding-bottom: 18px;
}

.college-classes-view { display: none; padding: 24px; gap: 14px; }
body[data-view="college-classes"] .content > :not(.college-classes-view):not(.pull-refresh-indicator) { display: none; }
body[data-view="college-classes"] .college-classes-view { display: grid; }
.college-classes-filters, #collegeClassesList, #collegeClassRoster { display: grid; gap: 12px; }
#collegeClassRoster .field { padding: 12px 0; border-bottom: 1px solid #ddd; }
.college-classes-view .error { color: #ad2828; }

.learning-objectives-view {
  display: none;
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  padding: 20px;
  gap: 16px;
}
body[data-view="learning-objectives"] .content > :not(.learning-objectives-view):not(.pull-refresh-indicator) { display: none; }
body[data-view="learning-objectives"] .learning-objectives-view { display: grid; }
.learning-objectives-header, .learning-objectives-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.learning-objectives-header h1 { margin: 0 0 8px; }
.learning-objectives-header p, .learning-objectives-actions p, .learning-objectives-legend, .learning-objectives-summary { margin: 0; color: var(--muted); }
.learning-objectives-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.learning-objectives-filters select { width: 100%; min-height: 44px; }
.learning-objectives-status:empty { display: none; }
.learning-objectives-status.error { color: #a12525; }
.learning-objectives-matrix { overflow-x: auto; max-width: 100%; border: 1px solid #d4dfda; border-radius: 12px; background: #fff; }
.learning-objectives-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.learning-objectives-table caption { text-align: left; padding: 14px; font-weight: 700; }
.learning-objectives-table th, .learning-objectives-table td { padding: 12px; border-top: 1px solid #d4dfda; border-right: 1px solid #d4dfda; text-align: left; vertical-align: top; min-width: 215px; }
.learning-objectives-table thead th { background: #eef5f1; font-weight: 600; }
.learning-objectives-table th:first-child { position: sticky; left: 0; min-width: 145px; max-width: 190px; background: #f7faf8; z-index: 1; }
.learning-objectives-table select, .learning-objectives-table textarea { width: 100%; min-height: 42px; font: inherit; border: 1px solid #c3d1ca; border-radius: 7px; padding: 8px; background: white; }
.learning-objectives-table thead select { margin-top: 10px; }
.learning-objectives-table details { margin-top: 8px; font-size: 13px; }
.learning-objectives-table summary { cursor: pointer; color: #27594a; }
.learning-objectives-table textarea { margin-top: 8px; resize: vertical; }
.learning-objectives-actions .primary { flex-shrink: 0; }
.learning-objectives-empty { padding: 20px; margin: 0; color: var(--muted); }
@media (max-width: 700px) {
  .learning-objectives-view { padding: 14px; }
  .learning-objectives-filters { grid-template-columns: 1fr; }
  .learning-objectives-actions { flex-direction: column; align-items: stretch; }
}

.whats-new-view {
  display: none;
  width: 100%;
  max-width: 900px;
  padding: 18px 20px 24px;
  gap: 18px;
}

body[data-view="whats-new"] .content {
  place-items: start center;
  align-content: start;
  padding-top: 8px;
}

body[data-view="whats-new"] .content > :not(.whats-new-view):not(.pull-refresh-indicator) {
  display: none;
}

body[data-view="whats-new"] .whats-new-view,
.whats-new-header,
.whats-new-list {
  display: grid;
  gap: 14px;
}

.whats-new-header > button {
  width: max-content;
}

.whats-new-header h1 {
  margin: 0;
}

.whats-new-intro,
.whats-new-version {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.whats-new-version {
  font-size: 0.85rem;
}

.whats-new-release {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.whats-new-release-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.whats-new-release-heading h2 {
  margin: 0;
  font-size: 1.05rem;
}

.whats-new-release-heading time {
  color: var(--muted);
  font-size: 0.85rem;
}

.whats-new-changes {
  display: grid;
  gap: 20px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.whats-new-changes h3 {
  margin: 8px 0 4px;
  font-size: 1rem;
}

.whats-new-changes p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.whats-new-type {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.whats-new-type--fixed {
  background: rgba(39, 143, 88, 0.12);
  color: #267348;
}

#profileWhatsNewBtn {
  align-self: start;
  width: max-content;
}

.support-tickets-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

body[data-view="support-tickets"] .content > :not(.support-tickets-view):not(.pull-refresh-indicator) {
  display: none !important;
}

body[data-view="support-tickets"] .support-tickets-view {
  display: grid;
}

.support-ticket-update-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.support-tickets-search {
  width: 100%;
}

.support-ticket-file-list {
  color: var(--muted);
  font-size: 0.88rem;
}

.support-ticket-file-list:empty {
  display: none;
}

.support-ticket-form[hidden] {
  display: none;
}

.support-ticket-form small,
.support-ticket-details-form small {
  color: var(--muted);
  font-weight: 400;
}

.support-ticket-card {
  font: inherit;
}

.support-tickets-list {
  display: grid;
  gap: 10px;
}

.support-ticket-card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.support-ticket-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.support-ticket-state.open {
  border-color: rgba(38, 139, 87, 0.2);
  background: rgba(38, 139, 87, 0.12);
  color: #187346;
}

.support-ticket-state.closed {
  border-color: rgba(90, 98, 108, 0.2);
  background: rgba(90, 98, 108, 0.13);
  color: #525b66;
}

.support-ticket-detail {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(16, 24, 26, 0.06);
}

.support-ticket-detail h2 {
  margin: 0;
  color: var(--text);
}

body[data-support-tickets-mode="list"] .support-ticket-detail {
  display: none;
}

body[data-support-tickets-mode="detail"] .support-tickets-list {
  display: none;
}

body[data-support-tickets-mode="detail"] .support-ticket-detail {
  width: min(860px, 100%);
  justify-self: center;
}

body[data-support-tickets-mode="form"] .support-tickets-header-actions,
body[data-support-tickets-mode="form"] .support-tickets-search,
body[data-support-tickets-mode="form"] .support-tickets-layout {
  display: none;
}

body[data-support-tickets-mode="detail"] .support-tickets-search {
  display: none;
}

body[data-support-tickets-mode="form"] .support-ticket-form {
  width: min(860px, 100%);
  justify-self: center;
}

.support-ticket-description {
  white-space: pre-wrap;
}

.support-ticket-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  color: var(--muted);
}

.support-ticket-images a {
  display: grid;
  place-items: center;
  min-height: 120px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.035);
}

.support-ticket-images img {
  width: 100%;
  height: 160px;
  object-fit: contain;
}

.support-ticket-images .support-ticket-file-link {
  min-height: 64px;
  padding: 12px;
  color: var(--accent);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.support-ticket-update-attachments {
  margin-top: 6px;
}

.support-ticket-update-attachments:empty {
  display: none;
}

.support-ticket-updates {
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.support-ticket-update {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.045);
}

.support-ticket-update.requester {
  border-left-color: rgba(38, 139, 87, 0.5);
}

.support-ticket-update-header strong {
  color: var(--text);
  font-size: 0.9rem;
}

.support-ticket-update-header span,
.support-ticket-update small {
  color: var(--muted);
  font-size: 0.76rem;
}

.support-ticket-update p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.support-ticket-details-form {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
}

.support-ticket-details-form[hidden] {
  display: none;
}

.support-ticket-closed-notice {
  padding: 12px 14px;
  border: 1px solid rgba(90, 98, 108, 0.22);
  border-radius: 9px;
  background: rgba(90, 98, 108, 0.08);
  color: #525b66;
  font-size: 0.88rem;
}

.support-ticket-closed-notice[hidden] {
  display: none;
}

.support-ticket-details-form .primary {
  justify-self: start;
}

.support-ticket-detail-back {
  justify-self: start;
}

@media (max-width: 820px) {
  .support-tickets-view {
    padding: 14px 12px 20px;
  }
}

body[data-view="photo-manager"] .content {
  padding-top: 0;
}

body[data-view="elearning"] .content {
  padding-top: 0;
}

.login-card,
.error-card,
.update-card,
.dashboard-view,
.management-dashboard-view {
  width: min(440px, 92vw);
  padding: 32px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.login-card h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.sub {
  margin: 0 0 24px;
  color: var(--muted);
  font-family: "Source Serif 4", serif;
  font-size: 1rem;
}

body[data-auth="logged-in"] .sub,
body[data-auth="logged-in"] .notifications-sub {
  display: none;
}

.dashboard-view {
  display: none;
  width: 100%;
  max-width: 760px;
  gap: 12px;
  padding: 16px 18px 20px;
}

.management-dashboard-view,
.management-incident-reports-view,
.management-infirmary-stats-view,
.management-fee-stats-view,
.management-student-counts-view,
.teacher-utilization-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

.users-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

.student-qr-view {
  display: none;
  width: 100%;
  max-width: 900px;
  gap: 16px;
  padding: 18px 20px 24px;
}

body[data-view="student-qr"] .content > :not(.student-qr-view):not(.pull-refresh-indicator) {
  display: none;
}

body[data-view="student-qr"] .student-qr-view,
.student-qr-form,
.student-qr-result,
.student-qr-contact {
  display: grid;
  gap: 12px;
}

.student-qr-result[hidden] {
  display: none;
}

.student-qr-form > label {
  color: var(--muted);
  font-size: 0.88rem;
}

.student-qr-view .users-header {
  flex-wrap: wrap;
}

.student-qr-view .users-header > div {
  flex: 1 1 320px;
}

.student-qr-view .users-header > button {
  flex-shrink: 0;
  white-space: nowrap;
}

.student-qr-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.student-qr-input-row input {
  flex: 1 1 260px;
  min-width: 0;
}

.student-qr-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.student-qr-result h2,
.student-qr-contact h3 {
  margin: 0;
  font-size: 1.1rem;
}

.student-qr-contact {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.student-qr-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.student-qr-photos figure {
  width: 150px;
  max-width: 100%;
  margin: 0;
}

.student-qr-photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

.student-qr-photos figcaption {
  margin-top: 6px;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.student-qr-view .student-detail-field strong {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.teachers-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

.requisitions-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

.class-scratchpad-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 0;
}

.infirmary-visits-view {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: 16px;
  padding: 18px 20px 24px;
}

.elearning-view {
  display: none;
  width: 100%;
  max-width: 1220px;
  gap: 10px;
  padding: 8px 4px 20px;
}

.profile-view {
  display: none;
  width: 100%;
  max-width: 720px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.profile-tabs {
  display: flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.profile-tab {
  flex: 1 1 0;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.profile-tab:hover,
.profile-tab.is-active {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.08);
}

.profile-tab-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.profile-tab-panel[hidden] {
  display: none;
}

body[data-auth="logged-in"][data-view="profile"][data-profile-tab="cache"] .profile-view {
  max-width: 980px;
}

.settings-cache-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-cache-heading h2,
.settings-cache-section h3 {
  margin: 0;
}

.settings-cache-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.settings-cache-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(18, 63, 70, 0.08);
}

.settings-cache-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.settings-cache-actions .nav-item,
.settings-cache-actions .primary {
  width: auto;
  min-height: 42px;
  margin: 0;
  padding: 10px 14px;
}

.settings-cache-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.settings-cache-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-cache-status.success {
  color: #267348;
}

.settings-cache-status.error {
  color: var(--danger);
}

.settings-cache-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.settings-cache-counts,
.settings-cache-section {
  display: grid;
  gap: 12px;
}

.settings-cache-counts[hidden] {
  display: none;
}

.settings-cache-grid {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-cache-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(80px, 0.7fr));
  align-items: center;
  min-width: 620px;
  border-bottom: 1px solid var(--line);
}

.settings-cache-row:last-child {
  border-bottom: 0;
}

.settings-cache-row-header {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-cache-cell {
  padding: 11px 12px;
  overflow-wrap: anywhere;
}

.settings-cache-name {
  font-weight: 700;
}

.settings-cache-health {
  color: #267348;
  font-weight: 700;
}

.settings-cache-row.is-unhealthy .settings-cache-health {
  color: var(--danger);
}

.settings-device-cache-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.settings-device-cache-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.settings-device-cache-card span {
  color: var(--muted);
  font-size: 0.82rem;
}

.settings-device-cache-card strong {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .settings-cache-heading {
    display: grid;
  }

  .settings-cache-actions {
    justify-content: stretch;
  }

  .settings-cache-actions button {
    flex: 1 1 180px;
  }

  .settings-cache-directory-grid {
    overflow-x: auto;
  }
}

.photo-manager-view {
  display: none;
  width: 100%;
  max-width: 760px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.transport-view {
  display: none;
  width: 100%;
  max-width: 760px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.time-table-view {
  display: none;
  width: 100%;
  max-width: 1100px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.calendar-view {
  display: none;
  width: 100%;
  max-width: 900px;
  gap: 6px;
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.planned-absence-view {
  display: none;
  width: 100%;
  max-width: 1120px;
  gap: 14px;
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.staff-day-view {
  display: none;
  width: 100%;
  max-width: 980px;
  gap: 16px;
}

body[data-view="teacher-attendance"] .content > :not(.teacher-attendance-view),
body[data-view="substitutions"] .content > :not(.substitutions-view),
body[data-view="my-substitutions"] .content > :not(.substitutions-view) {
  display: none;
}

body[data-view="teacher-attendance"] .teacher-attendance-view,
body[data-view="substitutions"] .substitutions-view,
body[data-view="my-substitutions"] .substitutions-view {
  display: grid;
}

body[data-view="teacher-attendance"] .content,
body[data-view="substitutions"] .content,
body[data-view="my-substitutions"] .content {
  place-items: start center;
  align-content: start;
  padding-top: 8px;
}

.staff-day-header, .staff-day-toolbar, .staff-day-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staff-day-header h1 { margin: 0; font-size: 26px; }
.staff-day-header .sub { margin-bottom: 0; }
.staff-day-header .field { min-width: 160px; }
.staff-day-list, .staff-day-view form { display: grid; gap: 12px; }
.staff-day-actions { justify-content: flex-start; }
.staff-day-status { color: var(--muted); }
.staff-day-status:empty { display: none; }
.staff-day-status.error { color: #ae3232; }
.staff-substitution-card {
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.staff-teacher-name { font-weight: 600; }
.staff-substitution-card h2 { font-size: 17px; margin: 0; }
.staff-substitution-card p { margin: 8px 0; }
.staff-lesson-meta, .staff-day-empty { color: var(--muted); }
.staff-assigned-teacher { font-weight: 600; }
.staff-substitution-card .field { max-width: 440px; margin-top: 12px; }
.staff-day-actions [hidden] { display: none; }

.time-table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.time-table-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.planned-absence-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.planned-absence-header > div {
  min-width: 0;
}

.planned-absence-new-btn {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.planned-absence-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.planned-absence-status.error {
  color: var(--danger);
}

.planned-absence-status:empty {
  display: none;
}

.planned-absence-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.84);
}

.planned-absence-form[hidden] {
  display: none;
}

.planned-absence-note {
  grid-column: span 2;
}

.planned-absence-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.planned-absence-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.planned-absence-month-switcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.planned-absence-month-label {
  min-width: 190px;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  color: var(--text);
}

.planned-absence-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.planned-absence-filter select {
  min-width: 190px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 253, 248, 0.96);
  color: var(--text);
  font: inherit;
}

.planned-absence-weekdays,
.planned-absence-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.planned-absence-weekday {
  min-height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.planned-absence-cell {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 253, 248, 0.92);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
}

.planned-absence-cell:hover,
.planned-absence-cell:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.1);
  outline: none;
}

.planned-absence-cell.is-outside-month {
  opacity: 0.46;
}

.planned-absence-cell.is-selected {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.16);
}

.planned-absence-cell.has-absence {
  border-color: rgba(var(--accent-rgb), 0.36);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(255, 253, 248, 0.95) 52%),
    rgba(255, 253, 248, 0.95);
}

.planned-absence-cell.has-absence::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.planned-absence-cell.is-today .planned-absence-cell-number {
  background: var(--accent);
  color: #fffdf8;
}

.planned-absence-cell-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
}

.planned-absence-cell-count {
  align-self: end;
  max-width: 100%;
  min-width: 0;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planned-absence-cell-count::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.planned-absence-day-panel {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.planned-absence-day-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.planned-absence-day-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.planned-absence-day-header span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.planned-absence-day-list {
  display: grid;
  gap: 10px;
}

.planned-absence-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.94);
}

.planned-absence-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.planned-absence-card h3 {
  margin: 0;
  font-size: 0.98rem;
}

.planned-absence-pill {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
}

.planned-absence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
}

.planned-absence-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.06);
}

.planned-absence-note-text {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.planned-absence-card-actions {
  display: flex;
  justify-content: flex-end;
}

.planned-absence-empty {
  padding: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.18);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px) {
  .planned-absence-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .planned-absence-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .planned-absence-new-btn {
    padding-inline: 12px;
  }

  .planned-absence-form {
    grid-template-columns: 1fr;
  }

  .planned-absence-note {
    grid-column: auto;
  }

  .planned-absence-form-actions,
  .planned-absence-card-actions {
    justify-content: stretch;
  }

  .planned-absence-form-actions button,
  .planned-absence-card-actions button {
    width: 100%;
  }

  .planned-absence-month-switcher {
    justify-content: space-between;
  }

  .planned-absence-month-label {
    min-width: 0;
    font-size: 0.98rem;
  }

  .planned-absence-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .planned-absence-filter select {
    width: 100%;
  }

  .planned-absence-cell {
    min-height: 58px;
    padding: 7px;
  }

  .planned-absence-cell-count {
    min-height: 20px;
    padding: 3px 5px;
    font-size: 0.68rem;
  }
}

.calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.calendar-status {
  min-height: 0;
  color: var(--accent);
  font-size: 0.9rem;
}

.calendar-status.error {
  color: var(--danger);
}

.calendar-status:empty {
  display: none;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-month-switcher {
  width: min(100%, 380px);
  min-height: 36px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 6px 14px rgba(23, 33, 43, 0.06);
}

.calendar-month-label {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-nav-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(23, 33, 43, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    background 0.2s ease;
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 8px 16px rgba(23, 33, 43, 0.09);
  outline: none;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-grid {
  touch-action: pan-y;
}

.calendar-weekday {
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-cell {
  position: relative;
  min-height: 54px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.94);
  padding: 5px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.calendar-cell:hover,
.calendar-cell:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  outline: none;
}

.calendar-cell.is-outside-month {
  opacity: 0.48;
  background: rgba(255, 253, 248, 0.7);
}

.calendar-cell.is-selected {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.98));
}

.calendar-cell-number {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.calendar-cell.is-today .calendar-cell-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fffdf8;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.24);
}

.calendar-cell-markers {
  position: absolute;
  left: 6px;
  bottom: 5px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calendar-cell-marker {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--calendar-marker, var(--accent));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.calendar-cell-count {
  position: absolute;
  right: 6px;
  bottom: 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.calendar-upcoming {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.9);
}

.calendar-upcoming-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-upcoming-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
}

.calendar-upcoming-header span,
.calendar-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.calendar-upcoming-list,
.calendar-day-events {
  display: grid;
  gap: 6px;
}

.calendar-event-card {
  --calendar-accent: var(--accent);
  --calendar-accent-soft: rgba(var(--accent-rgb), 0.12);
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--calendar-accent-soft), rgba(255, 255, 255, 0.96));
  padding: 14px;
  display: grid;
  gap: 9px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.calendar-event-card:hover,
.calendar-event-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--calendar-accent);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
  outline: none;
}

.calendar-event-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.calendar-event-title-wrap {
  display: grid;
  gap: 7px;
}

.calendar-event-kind {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--calendar-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-event-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.calendar-event-when {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.calendar-event-meta {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.calendar-upcoming-card {
  border-left: 4px solid var(--calendar-accent);
  border-radius: 10px;
  padding: 7px 9px;
  gap: 0;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.calendar-upcoming-card .calendar-event-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.calendar-upcoming-card .calendar-event-title-wrap {
  min-width: 0;
  gap: 0;
}

.calendar-upcoming-card h3 {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-upcoming-card .calendar-event-when {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.calendar-upcoming-empty,
.calendar-empty {
  display: none;
  color: var(--muted);
  font-size: 0.86rem;
}

.calendar-day-modal,
.calendar-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  z-index: 62;
}

.calendar-modal {
  z-index: 63;
}

.calendar-day-modal.show,
.calendar-modal.show {
  display: flex;
}

.calendar-day-modal-card,
.calendar-modal-card {
  position: relative;
  width: min(660px, calc(100vw - 40px));
  min-width: 0;
  max-width: 100%;
  max-height: min(86vh, calc(100dvh - 40px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
  padding: 18px 18px 22px;
  display: grid;
  gap: 12px;
  animation: fadeUp 0.3s ease-out;
}

.calendar-modal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.calendar-modal-header h3,
.calendar-day-title,
.calendar-detail-top h3 {
  margin: 0;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.calendar-modal-header h3 {
  font-size: 1.1rem;
}

.calendar-day-title,
.calendar-detail-top h3 {
  font-size: 1.05rem;
}

.calendar-day-modal-content,
.calendar-detail,
.calendar-detail-body {
  display: grid;
  gap: 12px;
}

.calendar-day-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.calendar-detail {
  border-radius: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.28);
  padding: 14px;
  background: rgba(255, 253, 248, 0.75);
}

.calendar-detail-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.calendar-detail-body {
  --calendar-accent: var(--accent);
  --calendar-accent-soft: rgba(var(--accent-rgb), 0.12);
  display: none;
  border-radius: 16px;
  padding: 4px;
}

.calendar-detail-body.show {
  display: grid;
}

.calendar-detail-when {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.calendar-detail-meta {
  color: var(--calendar-accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.calendar-detail-text {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--calendar-accent-soft), rgba(255, 255, 255, 0.96));
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .calendar-month-switcher {
    width: 100%;
    min-height: 34px;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 4px;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 3px;
  }

  .calendar-weekday {
    padding: 0;
    font-size: 0.58rem;
  }

  .calendar-cell {
    min-height: 42px;
    padding: 4px;
    border-radius: 9px;
  }

  .calendar-cell-number {
    font-size: 0.72rem;
  }

  .calendar-cell.is-today .calendar-cell-number {
    min-width: 18px;
    min-height: 18px;
    padding: 2px 5px;
  }

  .calendar-cell-markers {
    left: 5px;
    bottom: 4px;
    gap: 3px;
  }

  .calendar-cell-marker {
    width: 5px;
    height: 5px;
  }

  .calendar-cell-count {
    right: 5px;
    bottom: 1px;
    font-size: 0.58rem;
  }

  .calendar-upcoming {
    padding: 7px;
  }

  .calendar-upcoming-card {
    padding: 6px 8px;
  }

  .calendar-upcoming-card h3 {
    font-size: 0.82rem;
  }

  .calendar-upcoming-card .calendar-event-when {
    font-size: 0.7rem;
  }

  .calendar-day-modal,
  .calendar-modal {
    padding: 14px;
  }

  .calendar-event-top,
  .calendar-detail-top {
    display: grid;
  }

  .calendar-event-when {
    width: fit-content;
  }
}

.time-table-status:empty {
  display: none;
}

.time-table-status.error {
  color: var(--danger);
}

.time-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.time-table-autocomplete-field {
  display: grid;
  gap: 4px;
  width: min(420px, 100%);
  min-width: min(320px, 100%);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.time-table-autocomplete {
  position: relative;
  min-width: 0;
}

.time-table-autocomplete input {
  width: 100%;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 253, 248, 0.96);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}

.time-table-autocomplete input:focus {
  outline: 2px solid rgba(var(--accent-rgb), 0.22);
  outline-offset: 2px;
}

.time-table-autocomplete-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(360px, 55vh);
  overflow-y: auto;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  padding: 6px;
  color: var(--text);
}

.time-table-autocomplete-results[hidden] {
  display: none;
}

.time-table-autocomplete-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.time-table-autocomplete-option:hover,
.time-table-autocomplete-option:focus-visible,
.time-table-autocomplete-option.is-active {
  background: rgba(var(--accent-rgb), 0.1);
  outline: none;
}

.time-table-autocomplete-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  font-weight: 800;
}

.time-table-autocomplete-option-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.time-table-autocomplete-empty,
.time-table-autocomplete-hint {
  padding: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.time-table-autocomplete-hint {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.time-table-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.time-table-badge:empty {
  display: none;
}

.time-table-card {
  display: grid;
  gap: 12px;
}

.time-table-card-header {
  display: grid;
  gap: 2px;
}

.time-table-card-header h2,
.time-table-card-header p {
  margin: 0;
}

.time-table-card-header h2 {
  font-size: 1.08rem;
}

.time-table-card-header p {
  color: var(--muted);
  font-size: 0.88rem;
}

.time-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.time-table-grid {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.time-table-grid--teacher {
  min-width: 980px;
}

.time-table-grid th,
.time-table-grid td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 0.86rem;
  line-height: 1.35;
}

.time-table-grid tr:last-child th,
.time-table-grid tr:last-child td {
  border-bottom: 0;
}

.time-table-grid th:last-child,
.time-table-grid td:last-child {
  border-right: 0;
}

.time-table-grid thead th {
  background: rgba(var(--accent-rgb), 0.1);
  font-weight: 800;
  white-space: nowrap;
}

.time-table-grid th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 112px;
  box-shadow: 8px 0 14px rgba(15, 23, 42, 0.06);
}

.time-table-grid thead th:first-child {
  z-index: 3;
}

.time-table-grid thead th span,
.time-table-grid thead th small {
  display: block;
}

.time-table-grid thead th small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.time-table-grid tbody th {
  background: rgba(var(--accent-rgb), 0.05);
  font-weight: 800;
  white-space: nowrap;
}

.time-table-grid tbody tr.is-today th,
.time-table-grid tbody tr.is-today td {
  background: rgba(var(--accent-rgb), 0.1);
}

.time-table-grid tbody tr.is-today th {
  color: var(--accent);
}

.time-table-grid td.is-today {
  background: rgba(var(--accent-rgb), 0.1);
}

.time-table-grid thead th:first-child {
  background: linear-gradient(rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.1)), var(--surface-strong);
}

.time-table-grid tbody th:first-child {
  background: linear-gradient(rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05)), var(--surface-strong);
}

.time-table-grid tbody tr.is-today th:first-child {
  background: linear-gradient(rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.1)), var(--surface-strong);
}

.time-table-grid hr {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  margin: 7px 0;
}

.time-table-entry {
  overflow-wrap: anywhere;
}

.time-table-free {
  color: var(--muted);
  font-weight: 700;
}

.time-table-empty {
  display: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.transport-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.transport-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.transport-status:empty {
  display: none;
}

.transport-status.error {
  color: var(--danger);
}

.transport-route-groups {
  display: grid;
  gap: 14px;
}

.transport-route-top,
.transport-route-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.transport-route-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.transport-route-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.transport-route-title strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.transport-route-meta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.transport-route-actions {
  margin-left: 0;
}

.transport-route-actions .primary {
  min-height: 34px;
  padding: 8px 14px;
}

.transport-direction-pill,
.transport-route-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.transport-direction-pill {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.transport-route-unavailable {
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--muted);
}

.transport-route-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.transport-route-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-radius: 14px;
  padding: 10px;
  background: rgba(var(--accent-rgb), 0.05);
}

.transport-route-field span {
  color: var(--muted);
  font-size: 0.76rem;
}

.transport-route-field strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.transport-empty {
  display: none;
  color: var(--muted);
  font-size: 0.9rem;
}

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

  .transport-route-meta-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.photo-manager-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.photo-manager-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.photo-manager-status.error {
  color: var(--danger);
}

.photo-manager-form {
  display: grid;
  gap: 16px;
}

.photo-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.photo-camera-canvas {
  display: none;
}

.photo-cropper {
  position: relative;
  width: min(320px, 100%);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 26, 0.15);
  background: rgba(248, 250, 252, 0.9);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  touch-action: none;
}

.photo-cropper video,
.photo-cropper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.photo-cropper-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  z-index: 2;
}

.photo-cropper[data-mode="idle"] .photo-cropper-placeholder {
  display: grid;
}

.photo-cropper-grid {
  position: absolute;
  border: 2px solid rgba(var(--accent-rgb), 0.7);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.25);
  cursor: grab;
  touch-action: none;
  display: none;
  z-index: 3;
}

.photo-cropper[data-ready="true"][data-mode="crop"] .photo-cropper-grid {
  display: block;
}

.photo-cropper-grid.dragging {
  cursor: grabbing;
}

.photo-cropper-grid.resizing {
  cursor: nwse-resize;
}

.photo-cropper-grid .grid-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
}

.photo-cropper-grid .grid-line.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}

.photo-cropper-grid .grid-line.horizontal {
  left: 0;
  right: 0;
  height: 1px;
}

.photo-cropper-grid .grid-line.vertical.one {
  left: 33.333%;
}

.photo-cropper-grid .grid-line.vertical.two {
  left: 66.666%;
}

.photo-cropper-grid .grid-line.horizontal.one {
  top: 33.333%;
}

.photo-cropper-grid .grid-line.horizontal.two {
  top: 66.666%;
}

.photo-cropper-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(var(--accent-rgb), 0.9);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  touch-action: none;
  z-index: 2;
}

.photo-cropper-handle.nw {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}

.photo-cropper-handle.ne {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}

.photo-cropper-handle.sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}

.photo-cropper-handle.se {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}

.photo-cropper-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.65) 100%);
  color: #fff;
  z-index: 4;
  pointer-events: none;
}

.photo-cropper[data-mode="idle"] .photo-cropper-overlay {
  display: none;
}

.photo-cropper-hint {
  display: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
}

.photo-cropper[data-mode="camera"] .photo-cropper-hint[data-mode="camera"],
.photo-cropper[data-mode="crop"] .photo-cropper-hint[data-mode="crop"] {
  display: block;
}

.photo-cropper video {
  display: none;
}

.photo-cropper img {
  display: none;
}

.photo-cropper[data-mode="camera"] video {
  display: block;
}

.photo-cropper[data-mode="crop"] img {
  display: block;
}

.profile-header h1 {
  margin: 0 0 6px;
  font-size: 1.6rem;
}

.profile-rows {
  display: grid;
  gap: 10px;
}

.profile-row {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(16, 24, 26, 0.12);
}

.profile-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-debug-block {
  display: block;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 24, 26, 0.1);
}

.profile-debug-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.profile-debug-summary::-webkit-details-marker {
  display: none;
}

.profile-debug-summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.profile-debug-block[open] .profile-debug-summary::after {
  content: "−";
}

.profile-debug-summary-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-debug-block[open] .profile-debug-summary-hint {
  display: none;
}

.profile-debug-content {
  padding-top: 8px;
}

.profile-debug-heading {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-debug-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 26, 0.09);
  border-radius: 8px;
  background: rgba(16, 24, 26, 0.09);
}

.profile-debug-rows .profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 5px 6px;
  border: 0;
  background: rgba(255, 253, 248, 0.98);
}

.profile-debug-rows .profile-debug-wide-row {
  grid-column: 1 / -1;
}

.profile-debug-rows .profile-label {
  font-size: 0.58rem;
  line-height: 1.1;
  letter-spacing: 0.055em;
}

.profile-debug-rows .profile-value {
  font-size: 0.7rem;
  line-height: 1.18;
}

.profile-label {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-value {
  font-size: 0.95rem;
  color: var(--text);
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.profile-institution-controls {
  display: none;
  grid-column: 2 / -1;
  gap: 8px;
}

.profile-institution-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(16, 24, 26, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.profile-institution-select:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
  outline: none;
}

.profile-institution-button {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}

.profile-institution-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.quick-actions {
  display: grid;
  gap: 12px;
}

.quick-actions h2 {
  margin: 0;
  font-size: 1.1rem;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.quick-action {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
}

.notifications-panel {
  display: grid;
  gap: 12px;
}

.notification-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  z-index: 60;
}

.notification-modal.show {
  display: flex;
}

.notification-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.notification-modal-card {
  position: relative;
  width: min(560px, calc(100vw - 40px));
  min-width: 0;
  max-width: 100%;
  max-height: 86vh;
  max-height: min(86vh, calc(100dvh - 40px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
  padding: 18px 18px 22px;
  display: grid;
  gap: 12px;
  animation: fadeUp 0.3s ease-out;
}

.notification-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.notification-modal-header h3 {
  margin: 0;
  min-width: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

body.modal-open {
  overflow: hidden;
}

.notifications-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notifications-header h1,
.notifications-header h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.notifications-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.notifications-count {
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 6px;
}

.notifications-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.notifications-enable {
  padding: 6px 10px;
  font-size: 0.82rem;
  border-radius: 999px;
}

.notifications-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.notifications-status.error {
  color: var(--danger);
}

.notifications-list {
  display: grid;
  gap: 10px;
}

.notification-card {
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.notification-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.notification-card.unread {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
  font-weight: 600;
}

.notification-card h4 {
  margin: 0;
  font-size: 0.98rem;
}

.notification-time,
.notification-card .meta {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.notification-card .body {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 400;
}

.notification-card.unread .body {
  font-weight: 500;
}

.notification-detail {
  border-radius: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.75);
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.notification-detail-empty {
  font-size: 0.9rem;
  color: var(--muted);
}

.notification-detail-body {
  display: none;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.notification-detail-body.show {
  display: grid;
}

.notification-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.notification-detail-header h3 {
  margin: 0;
  min-width: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.notification-detail-time {
  font-size: 0.82rem;
  color: var(--muted);
}

.notification-detail-meta {
  font-size: 0.85rem;
  color: var(--accent-2);
}

.notification-detail-text {
  min-width: 0;
  max-width: 100%;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.notification-detail-files {
  display: grid;
  gap: 6px;
}

.notification-detail-files a {
  max-width: 100%;
  color: var(--accent-2);
  text-decoration: none;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.attendance-list-view {
  display: none;
  width: 100%;
  max-width: 880px;
  gap: 18px;
  padding: 20px 22px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.announcements-view,
.circulars-view {
  display: none;
  width: 100%;
  max-width: 980px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.messages-view {
  display: none;
  width: 100%;
  max-width: 980px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.message-compose-view {
  display: none;
  width: min(760px, 94vw);
  max-width: 760px;
  gap: 12px;
  padding: 12px 16px 20px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.message-compose-view h1 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}

.message-compose-view .sub {
  margin: 0;
}

.messages-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.messages-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.messages-status.error {
  color: var(--danger);
}

.attendance-search,
.announcements-search,
.requisitions-search,
.incident-reports-search,
.elearning-course-search,
.subject-detail-search,
.dau-summary-search {
  width: 100%;
  max-width: 760px;
  margin: 4px 0 12px;
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(16, 24, 26, 0.15);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-list {
  display: none;
}

body[data-view="messages"][data-messages-mode="list"] .message-thread-detail {
  display: none;
}

.messages-list {
  display: grid;
  gap: 12px;
}

.message-thread-card {
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message-thread-card.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.message-thread-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 24, 26, 0.12);
}

.message-thread-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.message-thread-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-thread-preview {
  font-size: 0.85rem;
  color: var(--muted);
}

.message-thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.message-thread-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 24, 26, 0.1);
  color: var(--text);
}

.message-thread-status.closed {
  background: rgba(216, 75, 75, 0.18);
  color: #8b1b1b;
}

.message-thread-detail {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 240px;
}

.message-thread-nav {
  display: flex;
  justify-content: flex-start;
}

.message-thread-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.message-thread-body {
  display: none;
  gap: 12px;
}

.message-thread-body.show {
  display: grid;
}

.message-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.message-thread-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.message-thread-messages {
  display: grid;
  gap: 10px;
  padding: 8px 4px;
}

.messages-conversation-closed {
  justify-self: center;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.message-thread-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

.message-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16, 24, 26, 0.06);
  color: var(--text);
  font-size: 0.9rem;
  display: grid;
  gap: 6px;
  white-space: pre-wrap;
}

.message-bubble.self {
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  justify-self: end;
}

.message-bubble .meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.message-bubble a {
  color: var(--accent-2);
  text-decoration: none;
  font-size: 0.82rem;
}

.message-reply-form {
  border-top: 1px dashed rgba(16, 24, 26, 0.12);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.message-reply-actions {
  display: flex;
  justify-content: flex-end;
}

.message-compose-form {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.message-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.announcement-compose-view,
.circular-compose-view {
  display: none;
  width: 100%;
  max-width: 720px;
  gap: 10px;
  padding: 12px 16px 20px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.announcement-compose-view .announcements-header,
.circular-compose-view .announcements-header {
  gap: 8px;
}

.announcement-compose-view h1,
.circular-compose-view h1 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}

.announcement-compose-view .sub,
.circular-compose-view .sub {
  margin: 0;
}

.subject-detail-view {
  display: none;
  width: 100%;
  max-width: 980px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.subject-detail-compose-view {
  display: none;
  width: 100%;
  max-width: 860px;
  gap: 12px;
  padding: 16px 18px 22px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.dau-summary-view {
  display: none;
  width: 100%;
  max-width: 980px;
  gap: 16px;
  padding: 18px 20px 24px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.dau-summary-compose-view {
  display: none;
  width: 100%;
  max-width: 760px;
  gap: 12px;
  padding: 16px 18px 22px;
  border-radius: 24px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.dau-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dau-summary-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.dau-summary-status.error {
  color: var(--danger);
}

.dau-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

body[data-view="dau-summaries"][data-dau-summary-mode="detail"] .dau-summary-list {
  display: none;
}

body[data-view="dau-summaries"][data-dau-summary-mode="list"] .dau-summary-panel {
  display: none;
}

.dau-summary-list {
  display: grid;
  gap: 12px;
}

.dau-summary-card {
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dau-summary-card.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.dau-summary-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 24, 26, 0.12);
}

.dau-summary-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.dau-summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dau-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.dau-summary-panel {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.94);
  padding: 18px 20px;
}

.dau-summary-nav {
  display: flex;
  justify-content: flex-end;
}

.dau-summary-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 30px 12px;
}

.dau-summary-body {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.dau-summary-body.show {
  display: flex;
}

.dau-summary-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.dau-summary-header-row h2 {
  margin: 0;
  font-size: 1.2rem;
}

.dau-summary-status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.08);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dau-summary-status-pill.published {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-2);
}

.dau-summary-content {
  display: grid;
  gap: 12px;
}

.dau-summary-detail-card {
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: #fff;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.dau-summary-detail-card h4 {
  margin: 0;
  font-size: 1rem;
}

.dau-summary-detail-grid {
  display: grid;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
}

.dau-summary-detail-grid span {
  color: var(--muted);
}

.dau-summary-notifications {
  border-radius: 14px;
  border: 1px dashed rgba(16, 24, 26, 0.2);
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.dau-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dau-summary-form {
  display: grid;
  gap: 14px;
}

.subject-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subject-detail-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.subject-detail-status.error {
  color: var(--danger);
}

.subject-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 18px;
}

body[data-view="subject-details"][data-subject-detail-mode="detail"] .subject-detail-list {
  display: none;
}

body[data-view="subject-details"][data-subject-detail-mode="list"] .subject-detail-panel {
  display: none;
}

.subject-detail-list {
  display: grid;
  gap: 12px;
}

.subject-detail-card {
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subject-detail-card.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.subject-detail-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 24, 26, 0.12);
}

.subject-detail-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.subject-detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subject-detail-excerpt {
  font-size: 0.85rem;
  color: var(--muted);
}

.subject-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.subject-detail-panel {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 240px;
}

.subject-detail-nav {
  display: flex;
  justify-content: flex-start;
}

.subject-detail-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.subject-detail-body {
  display: none;
  gap: 10px;
}

.subject-detail-body.show {
  display: grid;
}

.subject-detail-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.subject-detail-header-row h2 {
  margin: 0;
  font-size: 1.1rem;
}

.subject-detail-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 24, 26, 0.1);
  color: var(--text);
}

.subject-detail-status-pill.published {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.subject-detail-fields {
  display: grid;
  gap: 10px;
}

.subject-detail-field {
  display: grid;
  gap: 4px;
}

.subject-detail-field .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.subject-detail-field .value {
  font-size: 0.9rem;
  color: var(--text);
  white-space: pre-wrap;
}

.subject-detail-attachments {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

.subject-detail-attachments a {
  color: var(--accent-2);
  text-decoration: none;
}

.subject-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subject-detail-form {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.announcements-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.announcements-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.announcements-status.error {
  color: var(--danger);
}

.announcements-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

body[data-view="announcements"][data-announcements-mode="detail"] .announcements-list {
  display: none;
}

body[data-view="circulars"][data-circulars-mode="detail"] .announcements-list {
  display: none;
}

body[data-view="announcements"][data-announcements-mode="list"] .announcement-detail {
  display: none;
}

body[data-view="circulars"][data-circulars-mode="list"] .announcement-detail {
  display: none;
}

.announcements-list {
  display: grid;
  gap: 12px;
}

.announcement-detail {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 240px;
}

.announcement-detail-nav {
  display: flex;
  justify-content: flex-start;
}

.announcement-detail-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.announcement-detail-body {
  display: none;
  gap: 10px;
}

.announcement-detail-body.show {
  display: grid;
}

.announcement-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.announcement-detail-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.announcement-files {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

.announcement-files a {
  color: var(--accent-2);
  text-decoration: none;
}

.announcement-card {
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.announcement-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.announcement-card.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.announcement-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 24, 26, 0.12);
}

.announcement-card h3 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
  min-width: 0;
}

.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.announcement-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 24, 26, 0.1);
  color: var(--text);
}

.announcement-status-pill.sent {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.announcement-status-pill.cancelled {
  background: rgba(216, 75, 75, 0.18);
  color: #8b1b1b;
}

.announcement-body {
  font-size: 0.9rem;
  color: var(--text);
}

.announcement-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.announcement-form {
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.announcement-form h2 {
  margin: 0;
  font-size: 1.05rem;
}

.announcement-form textarea {
  resize: vertical;
}

#announcementBody,
#circularBody,
#subjectDetailClassAssignment,
#subjectDetailHomeAssignment,
#subjectDetailNextTestPortion,
#subjectDetailNotification,
#subjectDetailRemarks,
#elearningChapterSummaryInput {
  display: none;
}

.announcement-editor-field {
  gap: 8px;
}

.rich-text-editor {
  overflow: hidden;
  border: 1px solid rgba(16, 24, 26, 0.14);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.96);
}

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px;
  border-bottom: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(var(--accent-rgb), 0.04);
}

.rich-text-tool {
  min-width: 34px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.rich-text-tool:hover,
.rich-text-tool:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
}

.rich-text-tool:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.35);
  outline-offset: 2px;
}

.rich-text-tool.active,
.rich-text-tool[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.rich-text-input {
  min-height: 172px;
  max-height: 420px;
  overflow-y: auto;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.55;
  outline: none;
  overflow-wrap: anywhere;
}

.rich-text-input:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}

.rich-text-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.rich-text-input p {
  margin: 0 0 0.75em;
}

.rich-text-input p:last-child,
.rich-text-input ul:last-child,
.rich-text-input ol:last-child,
.rich-text-input blockquote:last-child {
  margin-bottom: 0;
}

.rich-text-input blockquote {
  margin: 0.75em 0;
  padding-left: 12px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.35);
  color: var(--muted);
}

.announcement-recipients {
  display: grid;
  gap: 10px;
}

.selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.multi-select-control {
  position: relative;
  display: grid;
  gap: 8px;
}

.multi-select-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 38px 10px 12px;
  border: 1px solid rgba(16, 24, 26, 0.14);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.multi-select-toggle::after {
  position: absolute;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
}

.multi-select-toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.multi-select-toggle.has-selection {
  color: var(--text);
}

.multi-select-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.multi-select-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.multi-select-toggle-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-panel {
  overflow: hidden;
  border: 1px solid rgba(16, 24, 26, 0.12);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 12px 26px rgba(16, 24, 26, 0.12);
}

.multi-select-panel input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 0;
  background: #fffdf8;
}

.multi-select-options {
  display: grid;
  max-height: 210px;
  overflow-y: auto;
  background: rgba(255, 253, 248, 0.92);
}

.multi-select-options.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(16, 24, 26, 0.07);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.multi-select-option[aria-selected="true"] {
  background: rgba(var(--accent-rgb), 0.08);
}

.multi-select-option:last-child {
  border-bottom: none;
}

.multi-select-option:hover,
.multi-select-option:focus-within {
  background: rgba(var(--accent-rgb), 0.08);
}

.multi-select-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.field .multi-select-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border-radius: 3px;
}

.multi-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.multi-select-option-status {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.multi-select-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--text);
  font-size: 0.8rem;
}

.selection-pill button {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--muted);
}

.selection-pill button:hover {
  color: var(--text);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}

.announcement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.attendance-list-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.attendance-list-status.error {
  color: var(--danger);
}

.attendance-groups {
  display: grid;
  gap: 12px;
}

.attendance-group {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attendance-group:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 24, 26, 0.15);
}

.attendance-group.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.attendance-view {
  display: none;
  width: 100%;
  max-width: 960px;
  gap: 12px;
  padding: 8px 0 24px;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  animation: fadeUp 0.8s ease-out 0.1s both;
}

.attendance-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.attendance-back-button {
  min-height: 28px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  color: var(--accent);
  padding: 5px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  width: max-content;
  box-shadow: none;
}

.attendance-back-button:hover,
.attendance-back-button:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.08);
  outline: none;
}

.attendance-view h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}

.attendance-view .sub {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.attendance-meta {
  display: grid;
  gap: 8px;
  align-items: end;
  justify-items: end;
}

.attendance-date .field.inline {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
}

.attendance-date-static {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: right;
}

.attendance-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.attendance-status.error {
  color: var(--danger);
}

.attendance-card {
  border-radius: 0;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 8px;
}

.status-guide {
  font-size: 0.85rem;
  color: var(--muted);
}

.attendance-table {
  display: grid;
  gap: 8px;
}

.attendance-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 0;
  border-bottom: 1px solid rgba(16, 24, 26, 0.08);
  background: transparent;
  width: 100%;
  font-size: 0.92rem;
}

.attendance-row > div {
  min-width: 0;
}

.attendance-row > div:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-header-row {
  border-bottom: 1px solid rgba(16, 24, 26, 0.18);
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.attendance-body:empty {
  display: none;
}

.attendance-empty {
  display: none;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(16, 24, 26, 0.18);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.attendance-empty.show {
  display: block;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(16, 24, 26, 0.18);
  background: rgba(16, 24, 26, 0.08);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 34px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(16, 24, 26, 0.15);
}

.status-pill.present {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.status-pill.absent {
  background: rgba(216, 75, 75, 0.18);
  color: #8b1b1b;
  border-color: rgba(216, 75, 75, 0.35);
}

.status-pill.neutral {
  background: rgba(16, 24, 26, 0.08);
  color: var(--text);
  border-color: rgba(16, 24, 26, 0.2);
}

.status-pill.other {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.28);
}

.attendance-actions {
  display: flex;
  justify-content: flex-end;
}

.dashboard-view h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.dashboard-card {
  min-height: 180px;
  border-radius: 18px;
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.08));
}

.management-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.management-dashboard-header h1 {
  margin: 0;
  font-size: 1.9rem;
}

.management-dashboard-updated,
.management-dashboard-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.management-dashboard-status.error {
  color: var(--danger);
}

.management-dashboard-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.users-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.users-header h1 {
  margin: 0;
  font-size: 1.9rem;
}

.users-scope,
.users-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.users-status:empty {
  display: none;
}

.users-status.error {
  color: var(--danger);
}

.users-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -2px;
}

.teachers-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -2px;
}

.users-search {
  flex: 1 1 280px;
  min-width: 0;
}

.teachers-search {
  flex: 1 1 280px;
  min-width: 0;
}

.user-card {
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(16, 24, 26, 0.06);
}

.users-list {
  display: grid;
  gap: 8px;
}

.teachers-layout {
  display: grid;
  gap: 8px;
  align-items: start;
}

.teachers-list {
  display: grid;
  gap: 8px;
}

.users-list:empty {
  display: none;
}

.teachers-list:empty {
  display: none;
}

.html-content,
.rendered-html {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.55;
}

.html-content p,
.rendered-html p {
  margin-top: 0;
}

.html-content p:last-child,
.rendered-html p:last-child,
.html-content ul:last-child,
.rendered-html ul:last-child,
.html-content ol:last-child,
.rendered-html ol:last-child,
.html-content blockquote:last-child,
.rendered-html blockquote:last-child {
  margin-bottom: 0;
}

.html-content *,
.rendered-html *,
.html-content img,
.rendered-html img,
.html-content video,
.rendered-html video,
.rendered-html iframe,
.html-content table {
  max-width: 100%;
}

.rendered-html-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 10px 0 14px;
  overflow-x: auto;
  border: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.84);
  -webkit-overflow-scrolling: touch;
}

.html-content table {
  width: 100%;
  table-layout: fixed;
}

.rendered-html-table-wrap table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.rendered-html-table-wrap th,
.rendered-html-table-wrap td {
  min-width: 84px;
  max-width: 180px;
  padding: 7px 8px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  vertical-align: top;
  white-space: normal;
}

.html-content a,
.rendered-html a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.user-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
}

.user-card-button {
  width: 100%;
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 253, 248, 0.94);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.user-card-button:hover,
.user-card-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 12px 24px rgba(16, 24, 26, 0.1);
  outline: none;
}

.teacher-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.teacher-card:hover,
.teacher-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 12px 24px rgba(16, 24, 26, 0.1);
  outline: none;
}

.teacher-card.active {
  border-color: rgba(var(--accent-rgb), 0.62);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 12px 24px rgba(16, 24, 26, 0.08);
}

.user-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.user-card-title h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.18;
}

.user-type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.user-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
}

.user-field {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.25;
}

.user-field-parent {
  grid-column: 1 / -1;
}

.user-field span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
}

.user-field strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.users-empty {
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
}

.student-detail-view {
  display: none;
  gap: 16px;
}

.student-detail-header {
  display: grid;
  gap: 10px;
}

.student-detail-back {
  width: max-content;
}

.student-detail-meta,
.student-detail-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.student-detail-status.error {
  color: var(--danger);
}

.student-detail-status:empty {
  display: none;
}

.student-detail-basic,
.student-detail-panel {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 253, 248, 0.94);
  padding: 14px;
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.student-detail-basic[hidden],
.student-detail-panel[hidden] {
  display: none;
}

.student-detail-basic-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.student-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.student-detail-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.student-detail-field-wide {
  grid-column: 1 / -1;
}

.student-detail-field span,
.student-detail-item-fact span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.student-detail-field strong,
.student-detail-item-fact strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.student-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-detail-tab {
  min-height: 38px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--accent);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.student-detail-tab.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.46);
  color: var(--text);
}

.student-detail-tab.is-disabled {
  border-color: rgba(16, 24, 26, 0.1);
  background: rgba(16, 24, 26, 0.04);
  color: rgba(66, 78, 82, 0.58);
  cursor: not-allowed;
}

.student-detail-list {
  display: grid;
  gap: 10px;
}

.student-detail-list-compact {
  gap: 6px;
}

.student-spa-item {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 26, 0.09);
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
}

.student-spa-item h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.student-spa-meta,
.student-spa-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.student-spa-note {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.student-spa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.student-spa-chips span {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.student-detail-item {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px;
}

.student-book-read-item {
  gap: 4px;
  padding: 8px 10px;
}

.student-detail-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.student-book-read-item .student-detail-item-header {
  align-items: center;
}

.student-detail-item-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.25;
}

.student-book-read-item .student-detail-item-header h3 {
  font-size: 0.9rem;
  line-height: 1.2;
}

.student-detail-item-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 900;
}

.student-detail-item-meta,
.student-detail-item-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.student-book-read-item .student-detail-item-meta {
  font-size: 0.76rem;
  line-height: 1.25;
}

.student-detail-item-note {
  color: var(--text);
  white-space: pre-wrap;
}

.student-detail-item-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.student-detail-item-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.student-detail-empty {
  padding: 18px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--accent-rgb), 0.26);
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.58);
}

.student-infirmary-panel {
  display: grid;
  gap: 12px;
}

.student-infirmary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.student-infirmary-stat {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), rgba(255, 255, 255, 0.96));
  padding: 10px;
}

.student-infirmary-stat-label,
.student-infirmary-stat-meta {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.student-infirmary-stat-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.student-infirmary-stat-value {
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.1;
}

.student-infirmary-cancelled-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.student-infirmary-visit.is-cancelled {
  opacity: 0.68;
}

.student-attendance-panel {
  display: grid;
  gap: 12px;
}

.student-attendance-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.attendance-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.attendance-metric-card,
.attendance-calendar-panel {
  border: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 12px 24px rgba(16, 24, 26, 0.07);
}

.attendance-metric-card {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.attendance-metric-card--primary {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.96));
}

.attendance-metric-card--absent {
  background: linear-gradient(160deg, rgba(216, 75, 75, 0.12), rgba(255, 255, 255, 0.96));
}

.attendance-metric-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.attendance-metric-value {
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.1;
}

.attendance-metric-meta {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.18;
}

.attendance-calendar-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.attendance-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.attendance-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.attendance-calendar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attendance-calendar-nav {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--accent);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.attendance-calendar-nav:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.attendance-calendar-month-label {
  min-width: 112px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
}

.attendance-calendar-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.attendance-calendar-summary-item {
  border-radius: 8px;
  background: rgba(16, 24, 26, 0.06);
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-calendar-summary-item--primary {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.attendance-calendar-summary-item--present {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

.attendance-calendar-summary-item--absent {
  background: rgba(216, 75, 75, 0.12);
  color: var(--danger);
}

.attendance-calendar-weekdays,
.attendance-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.attendance-calendar-weekday {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attendance-calendar-cell {
  position: relative;
  display: grid;
  min-height: 54px;
  align-content: start;
  gap: 5px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px;
}

.attendance-calendar-cell.is-outside-month {
  background: rgba(255, 253, 248, 0.68);
  opacity: 0.46;
}

.attendance-calendar-cell.is-today .attendance-calendar-number {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.attendance-calendar-cell.is-absent {
  border-color: rgba(216, 75, 75, 0.35);
  background: linear-gradient(160deg, rgba(216, 75, 75, 0.14), rgba(255, 255, 255, 0.95));
}

.attendance-calendar-cell.is-present {
  border-color: rgba(5, 150, 105, 0.32);
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.12), rgba(255, 255, 255, 0.95));
}

.attendance-calendar-cell.is-other {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.95));
}

.attendance-calendar-number {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.attendance-calendar-status-badge {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 0.62rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-calendar-status-badge--absent {
  background: rgba(216, 75, 75, 0.14);
  color: var(--danger);
}

.attendance-calendar-status-badge--present {
  background: rgba(5, 150, 105, 0.13);
  color: #047857;
}

.attendance-calendar-status-badge--other {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.student-detail-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-detail-action {
  min-height: 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--accent);
  padding: 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.student-detail-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

@media (min-width: 720px) {
  .attendance-summary-grid,
  .attendance-calendar-summary,
  .student-infirmary-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.teacher-detail-modal[hidden] {
  display: none;
}

.teacher-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 22px;
}

.teacher-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(16, 24, 26, 0.46);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.teacher-detail-card {
  position: relative;
  width: min(760px, 94vw);
  max-height: min(82vh, 760px);
  overflow: auto;
  display: grid;
  gap: 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 26, 0.12);
  background: rgba(255, 255, 255, 0.96);
  padding: 18px;
  box-shadow: 0 22px 52px rgba(16, 24, 26, 0.2);
}

.teacher-detail-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.teacher-detail-body {
  display: none;
  gap: 14px;
}

.teacher-detail-body.show {
  display: grid;
}

.teacher-detail-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.teacher-detail-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.teacher-detail-time-table {
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.teacher-detail-time-table:hover,
.teacher-detail-time-table:focus-visible {
  filter: brightness(0.95);
  outline: 2px solid rgba(var(--accent-rgb), 0.22);
  outline-offset: 2px;
}

.teacher-detail-close {
  flex: 0 0 auto;
  border: 1px solid rgba(16, 24, 26, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.teacher-detail-close:hover,
.teacher-detail-close:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42);
  outline: none;
}

.teacher-detail-header-row h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.teacher-detail-header-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.teacher-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.teacher-detail-section {
  display: grid;
  gap: 8px;
}

.teacher-assignments {
  display: grid;
  gap: 12px;
}

.teacher-assignment-section {
  display: grid;
  gap: 8px;
}

.teacher-detail-section h3,
.teacher-assignment-section h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.teacher-assignment-list {
  display: grid;
  gap: 8px;
}

.teacher-assignment-item,
.teacher-assignment-empty {
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 255, 255, 0.76);
  padding: 10px 12px;
}

.teacher-assignment-item {
  display: grid;
  gap: 3px;
}

.teacher-assignment-item strong {
  font-size: 0.94rem;
  line-height: 1.25;
}

.teacher-assignment-item span,
.teacher-assignment-empty {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.requisitions-view {
  display: none;
}

.incident-reports-view,
.management-incident-reports-view,
.management-infirmary-stats-view,
.management-fee-stats-view,
.management-student-counts-view,
.teacher-utilization-view {
  display: none;
}

.infirmary-visits-view {
  display: none;
}

.anecdotal-records-view {
  display: none;
}

.class-scratchpad-view {
  display: none;
}

.requisitions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.incident-reports-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.requisitions-header h1 {
  margin: 0;
  font-size: 1.9rem;
}

.incident-reports-header h1 {
  margin: 0;
  font-size: 1.9rem;
}

.requisitions-header-actions,
.incident-reports-header-actions,
.incident-report-form-actions,
.requisition-form-actions,
.requisition-detail-actions,
.requisition-products-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.requisitions-status,
.incident-reports-status,
.incident-report-form-status,
.requisition-form-status {
  color: var(--muted);
  font-size: 0.9rem;
}

.requisitions-status:empty,
.incident-reports-status:empty,
.incident-report-form-status:empty,
.requisition-form-status:empty {
  display: none;
}

.requisitions-status.error,
.incident-reports-status.error,
.incident-report-form-status.error,
.requisition-form-status.error {
  color: var(--danger);
}

.class-scratchpad-header,
.class-scratchpad-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.class-scratchpad-header h1,
.class-scratchpad-editor-header h2 {
  margin: 0;
  color: var(--text);
}

.class-scratchpad-header h1 {
  font-size: 1.9rem;
}

.class-scratchpad-editor-header h2 {
  font-size: 1.18rem;
}

.class-scratchpad-status {
  color: var(--muted);
  font-size: 0.9rem;
}

.class-scratchpad-status:empty {
  display: none;
}

.class-scratchpad-status.error {
  color: var(--danger);
}

.class-scratchpad-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}

.class-scratchpad-editor {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.class-scratchpad-meta,
.class-scratchpad-empty,
.class-scratchpad-select-meta {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.class-scratchpad-selector {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.class-scratchpad-selector[hidden] {
  display: none;
}

.class-scratchpad-selector .field {
  margin: 0;
}

.class-scratchpad-selector input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  color: var(--text);
  font: inherit;
  outline: none;
}

.class-scratchpad-selector input[type="search"]:focus {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.class-scratchpad-selector input[type="search"]:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.class-scratchpad-meta:empty,
.class-scratchpad-select-meta:empty {
  display: none;
}

.class-scratchpad-editor {
  min-width: 0;
  padding: 0;
  border-radius: 0;
}

.class-scratchpad-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
}

.class-scratchpad-empty[hidden],
.class-scratchpad-public-actions [hidden] {
  display: none;
}

.class-scratchpad-editor-body {
  display: grid;
  gap: 14px;
}

.class-scratchpad-editor-body[hidden] {
  display: none;
}

.class-scratchpad-public-actions,
.class-scratchpad-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.class-scratchpad-public-url {
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent-2);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.class-scratchpad-editor .field {
  margin: 0;
}

.class-scratchpad-editor textarea {
  min-height: 260px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

@media (max-width: 800px) {
  .class-scratchpad-header,
  .class-scratchpad-editor-header {
    display: grid;
  }

  .class-scratchpad-public-actions,
  .class-scratchpad-form-actions {
    justify-content: stretch;
  }

  .class-scratchpad-public-actions > *,
  .class-scratchpad-form-actions > * {
    flex: 1 1 150px;
  }
}

.requisitions-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.incident-reports-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

body[data-requisitions-mode="list"] .requisition-detail {
  display: none;
}

body[data-requisitions-mode="detail"] .requisitions-list {
  display: none;
}

body[data-requisitions-mode="detail"] .requisition-detail {
  width: min(860px, 100%);
  justify-self: center;
}

body[data-requisitions-mode="form"] .requisitions-header-actions,
body[data-requisitions-mode="form"] .requisitions-search,
body[data-requisitions-mode="form"] .requisitions-layout {
  display: none;
}

body[data-requisitions-mode="detail"] .requisitions-search {
  display: none;
}

body[data-requisitions-mode="form"] .requisition-form {
  width: min(860px, 100%);
  justify-self: center;
}

body[data-incident-reports-mode="list"] .incident-report-detail {
  display: none;
}

body[data-incident-reports-mode="detail"] .incident-reports-list {
  display: none;
}

body[data-incident-reports-mode="detail"] .incident-report-detail {
  width: min(860px, 100%);
  justify-self: center;
}

body[data-infirmary-visits-mode="list"] .infirmary-visits-view .incident-report-detail {
  display: none;
}

body[data-infirmary-visits-mode="form"] .infirmary-visits-view .incident-reports-layout {
  display: none;
}

body[data-infirmary-visits-mode="detail"] .infirmary-visits-view .incident-reports-list {
  display: none;
}

body[data-infirmary-visits-mode="detail"] .infirmary-visits-view .incident-report-detail {
  width: min(860px, 100%);
  justify-self: center;
}

.requisitions-list {
  display: grid;
  gap: 10px;
}

.incident-reports-list {
  display: grid;
  gap: 10px;
}

.requisition-card,
.incident-report-card,
.incident-report-detail,
.incident-report-form,
.requisition-issue-card {
  border: 1px solid rgba(16, 24, 26, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(16, 24, 26, 0.06);
}

.requisition-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.incident-report-card {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.requisition-card.active {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.07);
}

.incident-report-card.active {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.07);
}

.requisition-card-header,
.incident-report-card-header,
.incident-report-detail-header,
.incident-report-form-header,
.requisition-detail-header,
.requisition-issue-header,
.requisition-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.requisition-card h2,
.incident-report-card h2,
.incident-report-detail h2,
.incident-report-form h2,
.requisition-detail h2,
.requisition-form h2,
.requisition-issue-card h4 {
  margin: 0;
  color: var(--text);
}

.requisition-card h2 {
  font-size: 1rem;
}

.incident-report-card h2 {
  font-size: 1rem;
}

.requisition-card-description,
.incident-report-card-description,
.incident-report-description,
.requisition-description {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.requisition-card-meta,
.incident-report-card-meta,
.incident-report-detail-meta,
.incident-report-inline-empty,
.requisition-card-products,
.requisition-detail-meta,
.requisition-history-detail,
.requisition-inline-empty {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.requisition-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.incident-report-category-pill,
.incident-report-priority-pill,
.incident-report-central-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.incident-report-priority-pill.high,
.incident-report-priority-pill.critical {
  border-color: rgba(191, 74, 58, 0.22);
  background: rgba(191, 74, 58, 0.08);
  color: var(--danger);
}

.incident-report-central-pill {
  border-color: rgba(22, 101, 52, 0.2);
  background: rgba(22, 101, 52, 0.08);
  color: #166534;
}

.incident-report-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.incident-report-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.requisition-status-pill.rejected {
  border-color: rgba(191, 74, 58, 0.22);
  background: rgba(191, 74, 58, 0.08);
  color: var(--danger);
}

.requisition-status-pill.fulfilled,
.requisition-status-pill.closed,
.requisition-status-pill.returned {
  border-color: rgba(22, 101, 52, 0.2);
  background: rgba(22, 101, 52, 0.08);
  color: #166534;
}

.requisition-form,
.incident-report-form,
.incident-report-detail,
.requisition-detail {
  display: grid;
  gap: 14px;
}

.incident-report-form,
.incident-report-detail {
  padding: 14px;
  border-radius: 8px;
}

.requisition-form[hidden] {
  display: none;
}

.incident-report-form[hidden] {
  display: none;
}

.incident-report-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.requisition-products-editor {
  display: grid;
  gap: 10px;
}

.requisition-products-editor-header {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.requisition-add-product-row {
  justify-self: start;
}

.requisition-products-rows {
  display: grid;
  gap: 8px;
}

.requisition-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  gap: 8px;
  align-items: center;
}

.requisition-product-row input,
.requisition-status-form select,
.requisition-status-form input,
.requisition-issue-form textarea,
.requisition-issue-row input {
  min-width: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 10px;
  padding: 10px 11px;
  background: rgba(255, 253, 248, 0.96);
  color: var(--text);
  font: inherit;
}

.requisition-product-picker {
  position: relative;
  min-width: 0;
}

.requisition-product-picker input {
  width: 100%;
}

.requisition-product-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 34px rgba(16, 24, 26, 0.14);
}

.requisition-product-results[hidden] {
  display: none;
}

.requisition-product-option,
.requisition-product-option-empty {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.requisition-product-option:last-child,
.requisition-product-option-empty:last-child {
  border-bottom: 0;
}

.requisition-product-option {
  cursor: pointer;
}

.requisition-product-option:hover,
.requisition-product-option.is-active {
  background: rgba(var(--accent-rgb), 0.08);
}

.requisition-product-option-label {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.requisition-product-option-meta,
.requisition-product-option-empty {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.requisition-detail-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.requisitions-empty,
.incident-report-detail-empty,
.incident-reports-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.requisition-detail-back {
  justify-self: start;
}

.incident-report-detail-back {
  justify-self: start;
}

.requisition-detail-body {
  display: none;
  gap: 14px;
}

.incident-report-detail-body {
  display: none;
  gap: 14px;
}

.requisition-detail-body.show {
  display: grid;
}

.incident-report-detail-body.show {
  display: grid;
}

.requisition-detail-section {
  display: grid;
  gap: 8px;
}

.incident-report-detail-section {
  display: grid;
  gap: 8px;
}

.requisition-detail-section h3,
.incident-report-detail-section h3,
.requisition-issue-form h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
}

.requisition-products-list,
.requisition-history-list,
.requisition-issues-list,
.requisition-issue-products {
  display: grid;
  gap: 8px;
}

.requisition-product-line,
.requisition-history-row,
.requisition-issue-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(var(--accent-rgb), 0.05);
}

.requisition-product-line strong {
  color: var(--text);
  font-size: 0.9rem;
}

.requisition-product-line span {
  color: var(--muted);
  font-size: 0.8rem;
}

.requisition-status-form,
.requisition-issue-form,
.requisition-return-form {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  padding: 10px;
  background: rgba(var(--accent-rgb), 0.05);
}

.requisition-status-form[hidden],
.requisition-issue-form[hidden] {
  display: none;
}

.requisition-status-form {
  grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr) auto;
}

.requisition-issue-row {
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
}

.requisition-issue-row span {
  min-width: 0;
  color: var(--text);
  font-size: 0.86rem;
}

.requisition-issue-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
}

.incident-report-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(var(--accent-rgb), 0.045);
}

.incident-report-fact span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.incident-report-fact strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.incident-report-attachment a {
  color: var(--accent-2);
  font-weight: 800;
}

@media (max-width: 820px) {
  .requisitions-header,
  .incident-reports-header,
  .incident-report-card-header,
  .incident-report-detail-header,
  .incident-report-form-header,
  .requisition-card-header,
  .requisition-detail-header,
  .requisition-form-header {
    flex-direction: column;
    align-items: stretch;
  }

  .requisitions-layout,
  .incident-reports-layout,
  .requisition-status-form {
    grid-template-columns: 1fr;
  }

  .incident-report-form-grid {
    grid-template-columns: 1fr;
  }

  .requisition-product-row {
    grid-template-columns: 1fr;
  }

  .requisition-issue-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .users-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .users-search {
    flex: 0 0 auto;
  }

  .user-fields {
    grid-template-columns: 1fr;
  }
}

.management-summary-grid,
.management-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.management-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.management-stat-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(16, 24, 26, 0.08);
}

.management-stat-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.management-stat-value {
  color: var(--text);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.management-stat-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.management-teacher-count {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.management-teacher-count:hover,
.management-teacher-count[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.management-teacher-count:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.management-teacher-count-hint {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.management-teacher-drilldown[hidden] {
  display: none;
}

.management-teacher-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.management-teacher-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.management-teacher-list li {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.management-teacher-list li span {
  color: var(--muted);
  font-size: 0.85rem;
}

.management-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 255, 255, 0.82);
}

.management-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.management-section-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.management-section-header span {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

.management-bar-chart {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.management-bar-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(120px, 3fr) minmax(72px, auto);
  align-items: center;
  gap: 10px;
}

.management-bar-label {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.management-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
}

.management-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.management-bar-value {
  color: var(--text);
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
}

.management-grade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.management-grade-list .management-empty {
  grid-column: 1 / -1;
}

.management-grade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.management-grade-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-grade-row strong {
  color: var(--text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.management-fee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.management-fee-grid .management-empty {
  grid-column: 1 / -1;
}

.management-spa-summary,
.management-spa-category-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.management-spa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.management-spa-category {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.management-spa-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.management-spa-category-header h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-spa-category-header span,
.management-spa-subhead {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.management-spa-category-header span {
  text-align: right;
  white-space: nowrap;
}

.management-spa-subhead {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.management-spa-category .management-stat-card {
  padding: 10px;
  box-shadow: none;
}

.management-spa-category .management-stat-value {
  font-size: 1.2rem;
}

.management-spa-activity-list {
  display: grid;
  gap: 7px;
}

.management-spa-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: rgba(255, 255, 255, 0.64);
}

.management-spa-activity-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-spa-activity-row strong {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.management-empty {
  padding: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.6);
}

.management-screen-header,
.management-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.management-screen-header > div,
.management-dashboard-header > div {
  min-width: 0;
  max-width: 100%;
}

.management-screen-header h1 {
  margin: 0;
  font-size: 1.9rem;
}

.management-screen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.management-search,
.management-date-filter {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.management-search input,
.management-date-filter input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
}

.management-search input {
  width: min(320px, 66vw);
}

.management-screen-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.management-screen-status:empty {
  display: none;
}

.management-screen-status.error {
  color: var(--danger);
}

.teacher-utilization-scope,
.teacher-utilization-note,
.teacher-utilization-results {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.teacher-utilization-scope {
  margin-top: 6px;
}

.teacher-utilization-toolbar,
.teacher-utilization-filters,
.teacher-utilization-card-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.teacher-utilization-toolbar,
.teacher-utilization-card-heading {
  justify-content: space-between;
}

.teacher-utilization-toolbar {
  align-items: flex-end;
}

.teacher-utilization-filters .nav-item,
#teacherUtilizationRefreshBtn,
#teacherUtilizationSearchInput {
  min-height: 44px;
}

.teacher-utilization-filters .nav-item[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

.teacher-utilization-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.teacher-utilization-card {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.teacher-utilization-card h2 {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.teacher-utilization-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.teacher-utilization-badge.is-overworked {
  color: #9f3a2c;
  background: #ffebe5;
}

.teacher-utilization-percent {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.teacher-utilization-percent strong {
  color: var(--text);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.teacher-utilization-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.teacher-utilization-metrics dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.teacher-utilization-metrics dd {
  margin: 4px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.teacher-utilization-days summary {
  padding: 10px 0;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
}

.teacher-utilization-days ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.teacher-utilization-days li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  #teacherUtilizationSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #teacherUtilizationSummary .management-stat-card {
    padding: 12px;
  }

  #teacherUtilizationSummary .management-stat-label {
    font-size: 0.7rem;
  }

  .teacher-utilization-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .teacher-utilization-toolbar .management-search,
  #teacherUtilizationSearchInput {
    width: 100%;
  }
}

.management-screen-content,
.management-incident-reports-list,
.management-institution-list {
  display: grid;
  gap: 12px;
}

.management-institution-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.management-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.management-subhead h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.management-subhead span {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

.management-institution-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.management-institution-card h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1rem;
}

.management-fee-intro,
.management-fee-basis,
.management-fee-institution-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.5;
}

.management-fee-institution-list {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.management-fee-institution-card {
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
}

.management-fee-institution-header h2 {
  font-size: 1.15rem;
}

.management-fee-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.management-fee-metrics .management-stat-card {
  box-shadow: none;
}

.management-fee-metrics .management-stat-value {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}

.management-fee-reconciliation {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.management-fee-reconciliation p {
  margin: 0;
}

.fee-type-breakdown,
.management-fee-consolidated {
  min-width: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 8px;
  padding: 12px;
}

.fee-type-breakdown summary,
.management-fee-consolidated summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
}

.management-fee-consolidated .management-fee-metrics {
  margin-top: 12px;
}

.management-fee-type-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.management-fee-type-table caption {
  text-align: left;
  color: var(--muted);
  margin-bottom: 8px;
}

.management-fee-type-table th,
.management-fee-type-table td {
  padding: 10px 6px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  text-align: right;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.management-fee-type-table th:first-child {
  text-align: left;
}

.management-fee-type-table thead {
  color: var(--muted);
}

@media (max-width: 720px) {
  .management-fee-institution-card {
    padding: 14px;
  }

  .management-fee-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-fee-metrics .management-stat-card {
    padding: 10px;
  }

  .management-fee-metrics .management-stat-label {
    font-size: 0.7rem;
  }

  .management-fee-type-table,
  .management-fee-type-table tbody,
  .management-fee-type-table tr,
  .management-fee-type-table caption {
    display: block;
  }

  .management-fee-type-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .management-fee-type-table tbody {
    display: grid;
    gap: 12px;
  }

  .management-fee-type-table tr {
    padding: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 8px;
  }

  .management-fee-type-table th {
    display: block;
    text-align: left;
  }

  .management-fee-type-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .management-fee-type-table td::before {
    content: attr(data-label);
    color: var(--muted);
    text-align: left;
  }
}

.management-report-card {
  cursor: default;
}

@media (min-width: 900px) {
  .management-grade-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .management-dashboard-header,
  .management-screen-header,
  .management-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .management-screen-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .management-search,
  .management-search input {
    width: 100%;
  }

  .management-summary-grid,
  .management-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .management-grade-list {
    grid-template-columns: 1fr;
  }

  .management-fee-grid {
    grid-template-columns: 1fr 1fr;
  }

  .management-institution-list {
    grid-template-columns: 1fr;
  }

  .management-subhead {
    align-items: flex-start;
    flex-direction: column;
  }

  .management-spa-summary,
  .management-spa-grid {
    grid-template-columns: 1fr;
  }

  .management-spa-category-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .management-spa-activity-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .management-spa-activity-row strong {
    white-space: normal;
  }

  .management-bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .management-bar-value {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .management-summary-grid,
  .management-mini-grid,
  .management-fee-grid,
  .management-spa-category-metrics {
    grid-template-columns: 1fr;
  }
}

.classes-panel h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.classes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.classes-list li {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
}

.classes-list li.empty {
  color: var(--muted);
  border-style: dashed;
  background: rgba(255, 255, 255, 0.7);
}

.error-card {
  display: none;
  text-align: center;
}

.update-card {
  display: none;
  text-align: center;
}

.error-card h1 {
  margin: 12px 0 8px;
  font-size: 1.9rem;
}

.error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(216, 75, 75, 0.12);
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-view="error"] .login-card {
  display: none;
}

body[data-view="error"] .error-card {
  display: block;
}

body[data-view="update"] .login-card,
body[data-view="update"] .error-card,
body[data-view="update"] .dashboard-view,
body[data-view="update"] .management-dashboard-view,
body[data-view="update"] .users-view,
body[data-view="update"] .teachers-view,
body[data-view="update"] .attendance-list-view,
body[data-view="update"] .attendance-view,
body[data-view="update"] .announcements-view,
body[data-view="update"] .announcement-compose-view,
body[data-view="update"] .messages-view,
body[data-view="update"] .message-compose-view,
body[data-view="update"] .subject-detail-view,
body[data-view="update"] .subject-detail-compose-view,
body[data-view="update"] .dau-summary-view,
body[data-view="update"] .dau-summary-compose-view,
body[data-view="update"] .photo-manager-view,
body[data-view="update"] .profile-view {
  display: none;
}

body[data-view="update"] .update-card {
  display: block;
}

body[data-view="login"] .error-card,
body[data-view="login"] .update-card,
body[data-view="login"] .dashboard-view,
body[data-view="login"] .management-dashboard-view,
body[data-view="login"] .users-view,
body[data-view="login"] .teachers-view,
body[data-view="login"] .attendance-list-view,
body[data-view="login"] .attendance-view,
body[data-view="login"] .announcements-view,
body[data-view="login"] .announcement-compose-view,
body[data-view="login"] .messages-view,
body[data-view="login"] .message-compose-view,
body[data-view="login"] .subject-detail-view,
body[data-view="login"] .subject-detail-compose-view,
body[data-view="login"] .dau-summary-view,
body[data-view="login"] .dau-summary-compose-view,
body[data-view="login"] .photo-manager-view,
body[data-view="login"] .profile-view {
  display: none;
}

body[data-view="login"] .login-card {
  display: block;
}

body[data-view="dashboard"] .login-card,
body[data-view="dashboard"] .error-card {
  display: none;
}

body[data-view="dashboard"] .dashboard-view {
  display: grid;
}

body[data-auth="logged-in"] .login-card {
  display: none;
}

body[data-view="management-dashboard"] .login-card,
body[data-view="management-dashboard"] .error-card,
body[data-view="management-dashboard"] .update-card,
body[data-view="management-dashboard"] .dashboard-view,
body[data-view="management-dashboard"] .users-view,
body[data-view="management-dashboard"] .teachers-view,
body[data-view="management-dashboard"] .profile-view,
body[data-view="management-dashboard"] .photo-manager-view,
body[data-view="management-dashboard"] .attendance-list-view,
body[data-view="management-dashboard"] .attendance-view,
body[data-view="management-dashboard"] .announcements-view,
body[data-view="management-dashboard"] .announcement-compose-view,
body[data-view="management-dashboard"] .messages-view,
body[data-view="management-dashboard"] .message-compose-view,
body[data-view="management-dashboard"] .transport-view,
body[data-view="management-dashboard"] .subject-detail-view,
body[data-view="management-dashboard"] .subject-detail-compose-view,
body[data-view="management-dashboard"] .dau-summary-view,
body[data-view="management-dashboard"] .dau-summary-compose-view {
  display: none;
}

body[data-view="management-incident-reports"] .login-card,
body[data-view="management-incident-reports"] .error-card,
body[data-view="management-incident-reports"] .update-card,
body[data-view="management-incident-reports"] .dashboard-view,
body[data-view="management-infirmary-stats"] .login-card,
body[data-view="management-infirmary-stats"] .error-card,
body[data-view="management-infirmary-stats"] .update-card,
body[data-view="management-infirmary-stats"] .dashboard-view,
body[data-view="management-fee-stats"] .login-card,
body[data-view="management-fee-stats"] .error-card,
body[data-view="management-fee-stats"] .update-card,
body[data-view="management-fee-stats"] .dashboard-view,
body[data-view="management-student-counts"] .login-card,
body[data-view="management-student-counts"] .error-card,
body[data-view="management-student-counts"] .update-card,
body[data-view="management-student-counts"] .dashboard-view,
body[data-view="teacher-utilization"] .login-card,
body[data-view="teacher-utilization"] .error-card,
body[data-view="teacher-utilization"] .update-card,
body[data-view="teacher-utilization"] .dashboard-view {
  display: none;
}

body[data-view="management-dashboard"] .management-dashboard-view {
  display: grid;
}

body[data-view="management-incident-reports"] .management-incident-reports-view,
body[data-view="management-infirmary-stats"] .management-infirmary-stats-view,
body[data-view="management-fee-stats"] .management-fee-stats-view,
body[data-view="management-student-counts"] .management-student-counts-view,
body[data-auth="logged-in"][data-view="teacher-utilization"] .teacher-utilization-view {
  display: grid;
}

body[data-view="users"] .login-card,
body[data-view="users"] .error-card,
body[data-view="users"] .update-card,
body[data-view="users"] .dashboard-view,
body[data-view="users"] .management-dashboard-view,
body[data-view="users"] .student-detail-view,
body[data-view="users"] .teachers-view,
body[data-view="users"] .profile-view,
body[data-view="users"] .photo-manager-view,
body[data-view="users"] .attendance-list-view,
body[data-view="users"] .attendance-view,
body[data-view="users"] .announcements-view,
body[data-view="users"] .announcement-compose-view,
body[data-view="users"] .messages-view,
body[data-view="users"] .message-compose-view,
body[data-view="users"] .transport-view,
body[data-view="users"] .subject-detail-view,
body[data-view="users"] .subject-detail-compose-view,
body[data-view="users"] .dau-summary-view,
body[data-view="users"] .dau-summary-compose-view {
  display: none;
}

body[data-view="users"] .users-view {
  display: grid;
}

body[data-view="student-detail"] .login-card,
body[data-view="student-detail"] .error-card,
body[data-view="student-detail"] .update-card,
body[data-view="student-detail"] .dashboard-view,
body[data-view="student-detail"] .management-dashboard-view,
body[data-view="student-detail"] .users-view,
body[data-view="student-detail"] .teachers-view,
body[data-view="student-detail"] .incident-reports-view,
body[data-view="student-detail"] .infirmary-visits-view,
body[data-view="student-detail"] .anecdotal-records-view,
body[data-view="student-detail"] .requisitions-view,
body[data-view="student-detail"] .profile-view,
body[data-view="student-detail"] .photo-manager-view,
body[data-view="student-detail"] .attendance-list-view,
body[data-view="student-detail"] .attendance-view,
body[data-view="student-detail"] .announcements-view,
body[data-view="student-detail"] .announcement-compose-view,
body[data-view="student-detail"] .messages-view,
body[data-view="student-detail"] .message-compose-view,
body[data-view="student-detail"] .transport-view,
body[data-view="student-detail"] .time-table-view,
body[data-view="student-detail"] .subject-detail-view,
body[data-view="student-detail"] .subject-detail-compose-view,
body[data-view="student-detail"] .dau-summary-view,
body[data-view="student-detail"] .dau-summary-compose-view,
body[data-view="student-detail"] .elearning-view {
  display: none;
}

body[data-view="student-detail"] .student-detail-view {
  display: grid;
}

body[data-view="teachers"] .login-card,
body[data-view="teachers"] .error-card,
body[data-view="teachers"] .update-card,
body[data-view="teachers"] .dashboard-view,
body[data-view="teachers"] .management-dashboard-view,
body[data-view="teachers"] .users-view,
body[data-view="teachers"] .student-detail-view,
body[data-view="teachers"] .profile-view,
body[data-view="teachers"] .photo-manager-view,
body[data-view="teachers"] .attendance-list-view,
body[data-view="teachers"] .attendance-view,
body[data-view="teachers"] .announcements-view,
body[data-view="teachers"] .announcement-compose-view,
body[data-view="teachers"] .messages-view,
body[data-view="teachers"] .message-compose-view,
body[data-view="teachers"] .transport-view,
body[data-view="teachers"] .subject-detail-view,
body[data-view="teachers"] .subject-detail-compose-view,
body[data-view="teachers"] .dau-summary-view,
body[data-view="teachers"] .dau-summary-compose-view {
  display: none;
}

body[data-view="teachers"] .teachers-view {
  display: grid;
}

body[data-view="incident-reports"] .login-card,
body[data-view="incident-reports"] .error-card,
body[data-view="incident-reports"] .update-card,
body[data-view="incident-reports"] .dashboard-view,
body[data-view="incident-reports"] .management-dashboard-view,
body[data-view="incident-reports"] .users-view,
body[data-view="incident-reports"] .teachers-view,
body[data-view="incident-reports"] .infirmary-visits-view,
body[data-view="incident-reports"] .anecdotal-records-view,
body[data-view="incident-reports"] .requisitions-view,
body[data-view="incident-reports"] .profile-view,
body[data-view="incident-reports"] .photo-manager-view,
body[data-view="incident-reports"] .attendance-list-view,
body[data-view="incident-reports"] .attendance-view,
body[data-view="incident-reports"] .announcements-view,
body[data-view="incident-reports"] .announcement-compose-view,
body[data-view="incident-reports"] .messages-view,
body[data-view="incident-reports"] .message-compose-view,
body[data-view="incident-reports"] .transport-view,
body[data-view="incident-reports"] .subject-detail-view,
body[data-view="incident-reports"] .subject-detail-compose-view,
body[data-view="incident-reports"] .dau-summary-view,
body[data-view="incident-reports"] .dau-summary-compose-view {
  display: none;
}

body[data-view="incident-reports"] .incident-reports-view {
  display: grid;
}

body[data-view="infirmary-visits"] .login-card,
body[data-view="infirmary-visits"] .error-card,
body[data-view="infirmary-visits"] .update-card,
body[data-view="infirmary-visits"] .dashboard-view,
body[data-view="infirmary-visits"] .management-dashboard-view,
body[data-view="infirmary-visits"] .users-view,
body[data-view="infirmary-visits"] .teachers-view,
body[data-view="infirmary-visits"] .incident-reports-view,
body[data-view="infirmary-visits"] .anecdotal-records-view,
body[data-view="infirmary-visits"] .requisitions-view,
body[data-view="infirmary-visits"] .profile-view,
body[data-view="infirmary-visits"] .photo-manager-view,
body[data-view="infirmary-visits"] .attendance-list-view,
body[data-view="infirmary-visits"] .attendance-view,
body[data-view="infirmary-visits"] .announcements-view,
body[data-view="infirmary-visits"] .announcement-compose-view,
body[data-view="infirmary-visits"] .messages-view,
body[data-view="infirmary-visits"] .message-compose-view,
body[data-view="infirmary-visits"] .transport-view,
body[data-view="infirmary-visits"] .subject-detail-view,
body[data-view="infirmary-visits"] .subject-detail-compose-view,
body[data-view="infirmary-visits"] .dau-summary-view,
body[data-view="infirmary-visits"] .dau-summary-compose-view {
  display: none;
}

body[data-view="infirmary-visits"] .infirmary-visits-view {
  display: grid;
}

body[data-view="anecdotal-records"] .login-card,
body[data-view="anecdotal-records"] .error-card,
body[data-view="anecdotal-records"] .update-card,
body[data-view="anecdotal-records"] .dashboard-view,
body[data-view="anecdotal-records"] .management-dashboard-view,
body[data-view="anecdotal-records"] .users-view,
body[data-view="anecdotal-records"] .teachers-view,
body[data-view="anecdotal-records"] .incident-reports-view,
body[data-view="anecdotal-records"] .infirmary-visits-view,
body[data-view="anecdotal-records"] .requisitions-view,
body[data-view="anecdotal-records"] .profile-view,
body[data-view="anecdotal-records"] .photo-manager-view,
body[data-view="anecdotal-records"] .attendance-list-view,
body[data-view="anecdotal-records"] .attendance-view,
body[data-view="anecdotal-records"] .announcements-view,
body[data-view="anecdotal-records"] .announcement-compose-view,
body[data-view="anecdotal-records"] .messages-view,
body[data-view="anecdotal-records"] .message-compose-view,
body[data-view="anecdotal-records"] .transport-view,
body[data-view="anecdotal-records"] .subject-detail-view,
body[data-view="anecdotal-records"] .subject-detail-compose-view,
body[data-view="anecdotal-records"] .dau-summary-view,
body[data-view="anecdotal-records"] .dau-summary-compose-view {
  display: none;
}

body[data-view="anecdotal-records"] .anecdotal-records-view {
  display: grid;
}

body[data-view="class-scratchpad"] .login-card,
body[data-view="class-scratchpad"] .error-card,
body[data-view="class-scratchpad"] .update-card,
body[data-view="class-scratchpad"] .dashboard-view,
body[data-view="class-scratchpad"] .management-dashboard-view,
body[data-view="class-scratchpad"] .management-incident-reports-view,
body[data-view="class-scratchpad"] .management-infirmary-stats-view,
body[data-view="class-scratchpad"] .management-fee-stats-view,
body[data-view="class-scratchpad"] .management-student-counts-view,
body[data-view="class-scratchpad"] .users-view,
body[data-view="class-scratchpad"] .student-detail-view,
body[data-view="class-scratchpad"] .teachers-view,
body[data-view="class-scratchpad"] .incident-reports-view,
body[data-view="class-scratchpad"] .infirmary-visits-view,
body[data-view="class-scratchpad"] .anecdotal-records-view,
body[data-view="class-scratchpad"] .requisitions-view,
body[data-view="class-scratchpad"] .profile-view,
body[data-view="class-scratchpad"] .photo-manager-view,
body[data-view="class-scratchpad"] .attendance-list-view,
body[data-view="class-scratchpad"] .attendance-view,
body[data-view="class-scratchpad"] .announcements-view,
body[data-view="class-scratchpad"] .circulars-view,
body[data-view="class-scratchpad"] .announcement-compose-view,
body[data-view="class-scratchpad"] .circular-compose-view,
body[data-view="class-scratchpad"] .messages-view,
body[data-view="class-scratchpad"] .message-compose-view,
body[data-view="class-scratchpad"] .transport-view,
body[data-view="class-scratchpad"] .time-table-view,
body[data-view="class-scratchpad"] .subject-detail-view,
body[data-view="class-scratchpad"] .subject-detail-compose-view,
body[data-view="class-scratchpad"] .dau-summary-view,
body[data-view="class-scratchpad"] .dau-summary-compose-view,
body[data-view="class-scratchpad"] .elearning-view {
  display: none;
}

body[data-view="class-scratchpad"] .class-scratchpad-view {
  display: grid;
}

body[data-view="requisitions"] .login-card,
body[data-view="requisitions"] .error-card,
body[data-view="requisitions"] .update-card,
body[data-view="requisitions"] .dashboard-view,
body[data-view="requisitions"] .management-dashboard-view,
body[data-view="requisitions"] .users-view,
body[data-view="requisitions"] .teachers-view,
body[data-view="requisitions"] .infirmary-visits-view,
body[data-view="requisitions"] .anecdotal-records-view,
body[data-view="requisitions"] .profile-view,
body[data-view="requisitions"] .photo-manager-view,
body[data-view="requisitions"] .attendance-list-view,
body[data-view="requisitions"] .attendance-view,
body[data-view="requisitions"] .announcements-view,
body[data-view="requisitions"] .announcement-compose-view,
body[data-view="requisitions"] .messages-view,
body[data-view="requisitions"] .message-compose-view,
body[data-view="requisitions"] .transport-view,
body[data-view="requisitions"] .subject-detail-view,
body[data-view="requisitions"] .subject-detail-compose-view,
body[data-view="requisitions"] .dau-summary-view,
body[data-view="requisitions"] .dau-summary-compose-view {
  display: none;
}

body[data-view="requisitions"] .requisitions-view {
  display: grid;
}

body[data-view="profile"] .login-card,
body[data-view="profile"] .error-card,
body[data-view="profile"] .dashboard-view,
body[data-view="profile"] .management-dashboard-view,
body[data-view="profile"] .users-view,
body[data-view="profile"] .teachers-view,
body[data-view="profile"] .attendance-list-view,
body[data-view="profile"] .attendance-view,
body[data-view="profile"] .announcements-view,
body[data-view="profile"] .announcement-compose-view {
  display: none;
}

body[data-view="profile"] .profile-view {
  display: grid;
}

body[data-view="photo-manager"] .login-card,
body[data-view="photo-manager"] .error-card,
body[data-view="photo-manager"] .dashboard-view,
body[data-view="photo-manager"] .management-dashboard-view,
body[data-view="photo-manager"] .users-view,
body[data-view="photo-manager"] .teachers-view,
body[data-view="photo-manager"] .attendance-list-view,
body[data-view="photo-manager"] .attendance-view,
body[data-view="photo-manager"] .announcements-view,
body[data-view="photo-manager"] .announcement-compose-view,
body[data-view="photo-manager"] .messages-view,
body[data-view="photo-manager"] .message-compose-view,
body[data-view="photo-manager"] .subject-detail-view,
body[data-view="photo-manager"] .subject-detail-compose-view,
body[data-view="photo-manager"] .dau-summary-view,
body[data-view="photo-manager"] .dau-summary-compose-view,
body[data-view="photo-manager"] .profile-view {
  display: none;
}

body[data-view="photo-manager"] .photo-manager-view {
  display: grid;
}

body[data-view="attendance-list"] .login-card,
body[data-view="attendance-list"] .error-card,
body[data-view="attendance-list"] .dashboard-view,
body[data-view="attendance-list"] .attendance-view {
  display: none;
}

body[data-view="attendance-list"] .attendance-list-view {
  display: grid;
}

body[data-view="announcements"] .login-card,
body[data-view="announcements"] .error-card,
body[data-view="announcements"] .dashboard-view,
body[data-view="announcements"] .attendance-list-view,
body[data-view="announcements"] .attendance-view {
  display: none;
}

body[data-view="announcements"] .announcements-view {
  display: grid;
}

body[data-view="circulars"] .login-card,
body[data-view="circulars"] .error-card,
body[data-view="circulars"] .dashboard-view,
body[data-view="circulars"] .attendance-list-view,
body[data-view="circulars"] .attendance-view {
  display: none;
}

body[data-view="circulars"] .circulars-view {
  display: grid;
}

body[data-view="messages"] .login-card,
body[data-view="messages"] .error-card,
body[data-view="messages"] .dashboard-view,
body[data-view="messages"] .attendance-list-view,
body[data-view="messages"] .attendance-view,
body[data-view="messages"] .announcements-view,
body[data-view="messages"] .announcement-compose-view,
body[data-view="messages"] .subject-detail-view,
body[data-view="messages"] .subject-detail-compose-view,
body[data-view="messages"] .dau-summary-view,
body[data-view="messages"] .dau-summary-compose-view,
body[data-view="messages"] .profile-view {
  display: none;
}

body[data-view="messages"] .messages-view {
  display: grid;
}

body[data-view="transport"] .login-card,
body[data-view="transport"] .error-card,
body[data-view="transport"] .dashboard-view,
body[data-view="transport"] .profile-view,
body[data-view="transport"] .photo-manager-view,
body[data-view="transport"] .attendance-list-view,
body[data-view="transport"] .attendance-view,
body[data-view="transport"] .announcements-view,
body[data-view="transport"] .announcement-compose-view,
body[data-view="transport"] .messages-view,
body[data-view="transport"] .message-compose-view,
body[data-view="transport"] .subject-detail-view,
body[data-view="transport"] .subject-detail-compose-view,
body[data-view="transport"] .dau-summary-view,
body[data-view="transport"] .dau-summary-compose-view {
  display: none;
}

body[data-view="transport"] .transport-view {
  display: grid;
}

body[data-view="time-table"] .login-card,
body[data-view="time-table"] .error-card,
body[data-view="time-table"] .update-card,
body[data-view="time-table"] .dashboard-view,
body[data-view="time-table"] .management-dashboard-view,
body[data-view="time-table"] .users-view,
body[data-view="time-table"] .teachers-view,
body[data-view="time-table"] .profile-view,
body[data-view="time-table"] .photo-manager-view,
body[data-view="time-table"] .attendance-list-view,
body[data-view="time-table"] .attendance-view,
body[data-view="time-table"] .announcements-view,
body[data-view="time-table"] .announcement-compose-view,
body[data-view="time-table"] .messages-view,
body[data-view="time-table"] .message-compose-view,
body[data-view="time-table"] .transport-view,
body[data-view="time-table"] .subject-detail-view,
body[data-view="time-table"] .subject-detail-compose-view,
body[data-view="time-table"] .dau-summary-view,
body[data-view="time-table"] .dau-summary-compose-view {
  display: none;
}

body[data-view="time-table"] .time-table-view {
  display: grid;
}

body[data-view="time-table"] .content {
  overflow-x: visible;
  overflow-y: visible;
}

body[data-view="calendar"] .login-card,
body[data-view="calendar"] .error-card,
body[data-view="calendar"] .update-card,
body[data-view="calendar"] .dashboard-view,
body[data-view="calendar"] .management-dashboard-view,
body[data-view="calendar"] .users-view,
body[data-view="calendar"] .teachers-view,
body[data-view="calendar"] .profile-view,
body[data-view="calendar"] .photo-manager-view,
body[data-view="calendar"] .attendance-list-view,
body[data-view="calendar"] .attendance-view,
body[data-view="calendar"] .announcements-view,
body[data-view="calendar"] .announcement-compose-view,
body[data-view="calendar"] .messages-view,
body[data-view="calendar"] .message-compose-view,
body[data-view="calendar"] .transport-view,
body[data-view="calendar"] .time-table-view,
body[data-view="calendar"] .planned-absence-view,
body[data-view="calendar"] .subject-detail-view,
body[data-view="calendar"] .subject-detail-compose-view,
body[data-view="calendar"] .dau-summary-view,
body[data-view="calendar"] .dau-summary-compose-view {
  display: none;
}

body[data-view="calendar"] .calendar-view {
  display: grid;
}

body[data-view="planned-absence"] .login-card,
body[data-view="planned-absence"] .error-card,
body[data-view="planned-absence"] .update-card,
body[data-view="planned-absence"] .dashboard-view,
body[data-view="planned-absence"] .management-dashboard-view,
body[data-view="planned-absence"] .users-view,
body[data-view="planned-absence"] .teachers-view,
body[data-view="planned-absence"] .profile-view,
body[data-view="planned-absence"] .photo-manager-view,
body[data-view="planned-absence"] .attendance-list-view,
body[data-view="planned-absence"] .attendance-view,
body[data-view="planned-absence"] .announcements-view,
body[data-view="planned-absence"] .announcement-compose-view,
body[data-view="planned-absence"] .messages-view,
body[data-view="planned-absence"] .message-compose-view,
body[data-view="planned-absence"] .transport-view,
body[data-view="planned-absence"] .time-table-view,
body[data-view="planned-absence"] .subject-detail-view,
body[data-view="planned-absence"] .subject-detail-compose-view,
body[data-view="planned-absence"] .dau-summary-view,
body[data-view="planned-absence"] .dau-summary-compose-view {
  display: none;
}

body[data-view="planned-absence"] .planned-absence-view {
  display: grid;
}

body[data-view="subject-details"] .login-card,
body[data-view="subject-details"] .error-card,
body[data-view="subject-details"] .dashboard-view,
body[data-view="subject-details"] .attendance-list-view,
body[data-view="subject-details"] .attendance-view,
body[data-view="subject-details"] .announcements-view,
body[data-view="subject-details"] .announcement-compose-view {
  display: none;
}

body[data-view="subject-details"] .subject-detail-view {
  display: grid;
}

body[data-view="dau-summaries"] .login-card,
body[data-view="dau-summaries"] .error-card,
body[data-view="dau-summaries"] .dashboard-view,
body[data-view="dau-summaries"] .attendance-list-view,
body[data-view="dau-summaries"] .attendance-view,
body[data-view="dau-summaries"] .announcements-view,
body[data-view="dau-summaries"] .announcement-compose-view,
body[data-view="dau-summaries"] .subject-detail-view,
body[data-view="dau-summaries"] .subject-detail-compose-view {
  display: none;
}

body[data-view="dau-summaries"] .dau-summary-view {
  display: grid;
}

body[data-view="announcement-compose"] .login-card,
body[data-view="announcement-compose"] .error-card,
body[data-view="announcement-compose"] .dashboard-view,
body[data-view="announcement-compose"] .attendance-list-view,
body[data-view="announcement-compose"] .attendance-view,
body[data-view="announcement-compose"] .announcements-view {
  display: none;
}

body[data-view="announcement-compose"] .announcement-compose-view {
  display: grid;
}

body[data-view="circular-compose"] .login-card,
body[data-view="circular-compose"] .error-card,
body[data-view="circular-compose"] .dashboard-view,
body[data-view="circular-compose"] .attendance-list-view,
body[data-view="circular-compose"] .attendance-view,
body[data-view="circular-compose"] .circulars-view {
  display: none;
}

body[data-view="circular-compose"] .circular-compose-view {
  display: grid;
}

body[data-view="message-compose"] .login-card,
body[data-view="message-compose"] .error-card,
body[data-view="message-compose"] .dashboard-view,
body[data-view="message-compose"] .attendance-list-view,
body[data-view="message-compose"] .attendance-view,
body[data-view="message-compose"] .announcements-view,
body[data-view="message-compose"] .announcement-compose-view,
body[data-view="message-compose"] .messages-view,
body[data-view="message-compose"] .subject-detail-view,
body[data-view="message-compose"] .subject-detail-compose-view,
body[data-view="message-compose"] .dau-summary-view,
body[data-view="message-compose"] .dau-summary-compose-view,
body[data-view="message-compose"] .profile-view {
  display: none;
}

body[data-view="message-compose"] .message-compose-view {
  display: grid;
}

body[data-view="dau-summary-compose"] .login-card,
body[data-view="dau-summary-compose"] .error-card,
body[data-view="dau-summary-compose"] .dashboard-view,
body[data-view="dau-summary-compose"] .attendance-list-view,
body[data-view="dau-summary-compose"] .attendance-view,
body[data-view="dau-summary-compose"] .announcements-view,
body[data-view="dau-summary-compose"] .announcement-compose-view,
body[data-view="dau-summary-compose"] .subject-detail-view,
body[data-view="dau-summary-compose"] .subject-detail-compose-view,
body[data-view="dau-summary-compose"] .dau-summary-view {
  display: none;
}

body[data-view="dau-summary-compose"] .dau-summary-compose-view {
  display: grid;
}

body[data-view="subject-detail-compose"] .login-card,
body[data-view="subject-detail-compose"] .error-card,
body[data-view="subject-detail-compose"] .dashboard-view,
body[data-view="subject-detail-compose"] .attendance-list-view,
body[data-view="subject-detail-compose"] .attendance-view,
body[data-view="subject-detail-compose"] .announcements-view,
body[data-view="subject-detail-compose"] .announcement-compose-view,
body[data-view="subject-detail-compose"] .subject-detail-view {
  display: none;
}

body[data-view="subject-detail-compose"] .subject-detail-compose-view {
  display: grid;
}

body[data-view="attendance"] .login-card,
body[data-view="attendance"] .error-card,
body[data-view="attendance"] .dashboard-view,
body[data-view="attendance"] .attendance-list-view {
  display: none;
}

body[data-view="attendance"] .attendance-view {
  display: grid;
}

.status {
  min-height: 20px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--accent-2);
}

.status.error {
  color: var(--danger);
}

.login-form {
  display: grid;
  gap: 16px;
}

.install-prompt {
  margin-top: 16px;
  display: none;
  gap: 8px;
  align-items: center;
}

.install-prompt.ios-install {
  margin-top: 10px;
  display: none;
  text-align: center;
}

.install-prompt.ios-install strong {
  color: var(--text);
}

.install-prompt .nav-item {
  width: 100%;
  justify-content: center;
}

.clear-data-prompt {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.clear-data-prompt .danger {
  width: 100%;
}

.clear-data-prompt .hint {
  text-align: center;
}

.install-nav {
  display: none;
}

.nav-install-ios {
  display: none;
  margin: 6px 4px 4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  background: rgba(255, 255, 255, 0.7);
}

.nav-install-ios .hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.dashboard-install {
  margin-top: 8px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15, 23, 42, 0.15);
}

.google-login {
  display: flex;
  justify-content: center;
}

.field {
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 26, 0.15);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input[type="file"] {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(16, 24, 26, 0.2);
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 26, 0.15);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.field select:focus,
.field textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.field input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.primary {
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(var(--accent-2-rgb), 0.3);
}

.danger {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(220, 38, 38, 0.24);
}

.danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.helper {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted);
}

.helper a {
  color: var(--accent-2);
  text-decoration: none;
}

.helper a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

.elearning-header,
.elearning-form-header,
.elearning-course-header-row,
.elearning-course-detail-header,
.elearning-chapter-header,
.elearning-resource-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.elearning-header h2,
.elearning-course-detail h3,
.elearning-chapter-card h3,
.elearning-card h2 {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
}

.elearning-header h2 {
  font-size: 1.35rem;
}

.elearning-header p {
  margin: 2px 0 0;
  color: var(--muted);
}

.elearning-header .page-title-row {
  gap: 8px;
}

.elearning-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.elearning-header .title-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.elearning-actions,
.elearning-header-actions,
.elearning-course-actions-row,
.elearning-course-actions,
.elearning-chapter-actions,
.elearning-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.elearning-course-actions-row {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.elearning-course-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.elearning-course-actions-row > .nav-item,
.elearning-course-actions > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.elearning-detail-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.elearning-detail-heading > div {
  min-width: 0;
}

.elearning-status,
.elearning-form-status {
  min-height: 18px;
  color: var(--accent-2);
  font-size: 0.88rem;
  font-weight: 500;
}

.elearning-status:empty,
.elearning-form-status:empty {
  display: none;
}

.elearning-status.error,
.elearning-form-status.error {
  color: var(--danger);
}

.elearning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.elearning-course-detail {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.elearning-course-list,
.elearning-courses-list,
.elearning-chapters-list,
.elearning-resource-list {
  display: grid;
  gap: 10px;
}

.elearning-course-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: stretch;
}

.elearning-chapter-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.elearning-card,
.elearning-chapter-card,
.elearning-inline-empty {
  min-width: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.13);
  background: rgba(255, 255, 255, 0.86);
}

.elearning-card {
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.elearning-card:hover,
.elearning-card.active {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.12);
}

.elearning-card h2 {
  font-size: 0.98rem;
}

#elearningCourseTitle,
#elearningChapterTitle {
  font-weight: 500;
}

.elearning-card.empty,
.elearning-inline-empty {
  padding: 12px;
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

.elearning-card-meta,
.elearning-chapter-meta,
.elearning-course-meta,
.elearning-resource-main span {
  color: var(--muted);
  font-size: 0.82rem;
}

.elearning-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.elearning-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  background: rgba(100, 116, 139, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.elearning-pill.active {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.elearning-empty {
  padding: 24px;
  border-radius: 14px;
  border: 1px dashed rgba(var(--accent-rgb), 0.2);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
}

.elearning-course-body,
.elearning-chapter-body {
  display: none;
  gap: 14px;
}

.elearning-course-body.show,
.elearning-chapter-body.show {
  display: grid;
}

.elearning-chapter-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
}

.elearning-chapter-row {
  width: 100%;
  align-items: center;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.elearning-chapter-row:hover,
.elearning-chapter-row.active {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.1);
}

.elearning-chapter-sort-row {
  cursor: grab;
}

.elearning-chapter-sort-row:active {
  cursor: grabbing;
}

.elearning-chapter-sort-row.is-dragging {
  opacity: 0.55;
}

.elearning-chapter-drag-handle {
  width: fit-content;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.24);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}

.elearning-chapter-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.elearning-chapter-summary {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
  font-size: 0.9rem;
}

.elearning-resource-row {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: rgba(255, 253, 248, 0.78);
}

.elearning-resource-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.elearning-resource-main strong {
  font-weight: 500;
}

.elearning-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 400;
}

.elearning-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 400;
}

.elearning-textarea-label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 400;
}

.elearning-summary-editor-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.elearning-summary-editor-field .rich-text-input {
  min-height: 150px;
  max-height: 340px;
}

.elearning-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 12px 24px rgba(23, 33, 43, 0.08);
}

.elearning-form[hidden] {
  display: none;
}

.elearning-form h3 {
  margin: 0;
  font-size: 1.05rem;
}

.elearning-form-grid label:not(.elearning-checkbox),
.elearning-resource-modal label:not(.elearning-checkbox) {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 400;
}

.elearning-form-grid label:not(.elearning-checkbox) > span,
.elearning-resource-modal label:not(.elearning-checkbox) > span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.elearning-form-grid input:not([type="checkbox"]),
.elearning-form-grid select,
.elearning-form-grid textarea,
.elearning-resource-modal input:not([type="checkbox"]),
.elearning-resource-modal select,
.elearning-resource-modal textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 253, 248, 0.98);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.elearning-form-grid input[type="file"],
.elearning-resource-modal input[type="file"] {
  border-style: dashed;
  background: rgba(var(--accent-rgb), 0.04);
}

.elearning-form-grid input:not([type="checkbox"]):focus,
.elearning-form-grid select:focus,
.elearning-form-grid textarea:focus,
.elearning-resource-modal input:not([type="checkbox"]):focus,
.elearning-resource-modal select:focus,
.elearning-resource-modal textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.elearning-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.elearning-form .field.full {
  grid-column: 1 / -1;
}

.elearning-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.elearning-form-cancel {
  margin-top: 4px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(100, 116, 139, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.elearning-form-cancel:hover {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

body.elearning-resource-modal-open {
  overflow: hidden;
}

.elearning-resource-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.elearning-resource-modal[hidden] {
  display: none;
}

.elearning-resource-modal-card {
  width: min(640px, 100%);
  max-height: calc(100vh - 36px);
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: #fffdf8;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
}

.elearning-resource-modal .elearning-form-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.elearning-resource-modal .elearning-form-header h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 500;
}

.elearning-resource-modal .elearning-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.elearning-resource-modal .elearning-form-actions {
  position: sticky;
  bottom: -18px;
  margin: 4px -18px -18px;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.86), #fffdf8 38%);
}

body[data-view="elearning"] .login-card,
body[data-view="elearning"] .error-card,
body[data-view="elearning"] .update-card,
body[data-view="elearning"] .dashboard-view,
body[data-view="elearning"] .management-dashboard-view,
body[data-view="elearning"] .users-view,
body[data-view="elearning"] .teachers-view,
body[data-view="elearning"] .anecdotal-records-view,
body[data-view="elearning"] .incident-reports-view,
body[data-view="elearning"] .infirmary-visits-view,
body[data-view="elearning"] .requisitions-view,
body[data-view="elearning"] .profile-view,
body[data-view="elearning"] .photo-manager-view,
body[data-view="elearning"] .attendance-list-view,
body[data-view="elearning"] .attendance-view,
body[data-view="elearning"] .announcements-view,
body[data-view="elearning"] .announcement-compose-view,
body[data-view="elearning"] .messages-view,
body[data-view="elearning"] .message-compose-view,
body[data-view="elearning"] .transport-view,
body[data-view="elearning"] .time-table-view,
body[data-view="elearning"] .subject-detail-view,
body[data-view="elearning"] .subject-detail-compose-view,
body[data-view="elearning"] .dau-summary-view,
body[data-view="elearning"] .dau-summary-compose-view {
  display: none;
}

body[data-view="elearning"] .elearning-view {
  display: grid;
}

body[data-view="elearning"].elearning-new-course-form-open .elearning-header-actions,
body[data-view="elearning"].elearning-new-course-form-open .elearning-course-search,
body[data-view="elearning"].elearning-new-course-form-open .elearning-layout {
  display: none;
}

body[data-view="elearning"][data-elearning-mode="list"] .elearning-course-detail,
body[data-view="elearning"][data-elearning-mode="course"] .elearning-course-search,
body[data-view="elearning"][data-elearning-mode="course"] .elearning-course-list,
body[data-view="elearning"][data-elearning-mode="course"] .elearning-chapter-body,
body[data-view="elearning"][data-elearning-mode="chapter"] .elearning-course-search,
body[data-view="elearning"][data-elearning-mode="chapter"] .elearning-course-list,
body[data-view="elearning"][data-elearning-mode="chapter"] .elearning-course-body {
  display: none;
}

@media (max-width: 800px) {
  .sidebar {
    width: 240px;
  }

  .content {
    padding-top: 16px;
  }

  body[data-auth="logged-in"] .content {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .announcements-view,
  .circulars-view {
    padding: 18px 18px 24px;
  }

  .announcements-layout {
    grid-template-columns: 1fr;
  }

  .messages-view {
    padding: 18px 18px 24px;
  }

  .messages-layout {
    grid-template-columns: 1fr;
  }

  .elearning-view {
    padding: 8px 4px 20px;
  }

  .elearning-header,
  .elearning-form-header,
  .elearning-course-header-row,
  .elearning-course-detail-header,
  .elearning-chapter-header,
  .elearning-resource-row {
    display: grid;
  }

  .elearning-header,
  .elearning-course-header-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .elearning-header > div:first-child,
  .elearning-detail-heading {
    flex: 1 1 0;
  }

  .elearning-header-actions,
  .elearning-course-actions-row {
    flex: 0 0 auto;
  }

  .elearning-actions,
  .elearning-chapter-actions,
  .elearning-resource-actions,
  .elearning-form-actions {
    justify-content: stretch;
  }

  .elearning-actions > *,
  .elearning-chapter-actions > *,
  .elearning-resource-actions > *,
  .elearning-form-actions > * {
    width: 100%;
    justify-content: center;
  }

  .elearning-course-actions-row {
    width: 100%;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .elearning-course-actions {
    justify-content: flex-start;
  }

  .elearning-course-actions-row > .nav-item,
  .elearning-course-actions > * {
    width: auto;
    justify-content: center;
  }

  .elearning-header-actions > * {
    width: auto;
    justify-content: center;
  }

  .elearning-chapter-search {
    grid-template-columns: 1fr;
  }

  .elearning-layout,
  .elearning-form-grid {
    grid-template-columns: 1fr;
  }

  .teachers-view {
    padding: 18px 18px 24px;
  }

  .teachers-layout {
    grid-template-columns: 1fr;
  }

  .teacher-detail-modal {
    padding: 14px;
    align-items: start;
  }

  .teacher-detail-card {
    width: min(94vw, 760px);
    max-height: 86vh;
    padding: 16px;
  }

  .teacher-detail-fields {
    grid-template-columns: 1fr;
  }

  .subject-detail-view {
    padding: 18px 18px 24px;
  }

  .subject-detail-layout {
    grid-template-columns: 1fr;
  }

  .dau-summary-view {
    padding: 18px 18px 24px;
  }

  .dau-summary-layout {
    grid-template-columns: 1fr;
  }

  .announcement-compose-view {
    padding: 18px 18px 24px;
  }

  .message-compose-view {
    padding: 18px 18px 24px;
  }

  .subject-detail-compose-view {
    padding: 18px 18px 24px;
  }

  .dau-summary-compose-view {
    padding: 18px 18px 24px;
  }

  .attendance-header {
    flex-direction: column;
    align-items: stretch;
  }

  .attendance-meta {
    justify-items: start;
  }

  .attendance-row {
    grid-template-columns: 48px 1fr 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Family app shell parity for teacher app. */
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(120deg, rgba(var(--accent-rgb), 0.08), transparent 42%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

body::before {
  background-image:
    linear-gradient(115deg, rgba(var(--accent-rgb), 0.045) 0%, rgba(var(--accent-rgb), 0) 58%),
    repeating-linear-gradient(
      90deg,
      rgba(var(--accent-rgb), 0.018),
      rgba(var(--accent-rgb), 0.018) 1px,
      transparent 1px,
      transparent 128px
    );
}

.app {
  max-width: 100%;
  overflow-x: hidden;
}

.app-topbar {
  position: relative;
  width: 100%;
  height: 48px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 14px 30px rgba(23, 33, 43, 0.1);
  backdrop-filter: blur(12px);
  z-index: 32;
}

body[data-auth="logged-out"] .app-topbar {
  display: none;
}

.app-topbar-title {
  min-width: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-notifications-button {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.app-notifications-button:hover,
.app-notifications-button:focus-visible {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
  outline: none;
}

.app-topbar-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-notifications-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  border: 2px solid rgba(255, 253, 248, 0.98);
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 800;
}

.app-notifications-badge[hidden] {
  display: none;
}

.sidebar {
  gap: 14px;
  padding: 60px 14px 18px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(238, 244, 240, 0.94)),
    linear-gradient(150deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-2-rgb), 0.08));
  box-shadow: 18px 0 38px rgba(var(--accent-rgb), 0.1);
  z-index: 50;
  overflow: hidden;
}

.nav-toggle {
  position: static;
  width: 36px;
  height: 36px;
  padding: 6px 5px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  z-index: auto;
}

.nav-toggle span {
  width: 16px;
  height: 1.8px;
  background: var(--accent);
}

.nav-toggle:hover span,
.nav-toggle:focus-visible span {
  background: var(--text);
}

.nav-scrim {
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: grayscale(0.25);
  z-index: 40;
}

.brand {
  justify-content: space-between;
  gap: 12px;
}

.brand-home,
.brand-profile {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.brand-home {
  min-width: 0;
}

.logo-text {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffaf3;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 22px rgba(23, 33, 43, 0.18);
  transition: transform 0.2s ease;
}

.brand-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: var(--text);
  background: rgba(255, 252, 246, 0.86);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 10px 20px rgba(23, 33, 43, 0.08);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.brand-profile svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-home:hover .logo-text,
.brand-profile:hover {
  transform: translateY(-1px);
}

.sidebar-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.24) transparent;
}

.nav::-webkit-scrollbar {
  width: 8px;
}

.nav::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 999px;
}

.nav::-webkit-scrollbar-track {
  background: transparent;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-collapse {
  display: grid;
  gap: 2px;
}

.nav-collapse > summary {
  list-style: none;
}

.nav-collapse > summary::-webkit-details-marker {
  display: none;
}

.sidebar .nav-group-trigger {
  width: 100%;
  user-select: none;
}

.nav-group-label {
  flex: 1;
}

.nav-chevron {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-collapse[open] .nav-chevron {
  transform: rotate(225deg);
}

.nav-group-items {
  display: grid;
  gap: 2px;
  padding-left: 10px;
}

.nav-group-items .nav-item {
  width: 100%;
}

.nav-collapse.is-active > .nav-group-trigger {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.nav-divider {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  background: rgba(var(--accent-rgb), 0.1);
}

#enablePushNavBtn,
.notifications-enable {
  display: none;
}

.sidebar .nav-item {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: none;
  font-size: 0.8rem;
  line-height: 1.2;
}

.sidebar .nav-item.nav-item-icon {
  gap: 6px;
}

.sidebar .nav-icon {
  width: 20px;
  height: 20px;
  border-radius: 8px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.16);
}

.sidebar .nav-icon svg {
  width: 11px;
  height: 11px;
}

.nav-item:hover,
.nav-item.is-active {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.1);
}

#logoutBtn {
  background: rgba(216, 75, 75, 0.1);
  border-color: rgba(216, 75, 75, 0.24);
  color: #b83232;
}

#logoutBtn .nav-icon {
  color: #b83232;
  background: rgba(216, 75, 75, 0.12);
  border-color: rgba(216, 75, 75, 0.24);
}

#logoutBtn:hover,
#logoutBtn:focus-visible {
  background: rgba(216, 75, 75, 0.16);
  border-color: rgba(216, 75, 75, 0.34);
  color: #9f2424;
}

.content {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.content > * {
  min-width: 0;
  max-width: 100%;
}

.login-card,
.dashboard-view,
.profile-view,
.photo-manager-view,
.transport-view,
.management-incident-reports-view,
.management-infirmary-stats-view,
.management-fee-stats-view,
.management-student-counts-view,
.anecdotal-records-view,
.class-scratchpad-view,
.incident-reports-view,
.infirmary-visits-view,
.attendance-list-view,
.attendance-view,
.announcements-view,
.circulars-view,
.announcement-compose-view,
.circular-compose-view,
.messages-view,
.message-compose-view,
.subject-detail-view,
.subject-detail-compose-view,
.dau-summary-view,
.dau-summary-compose-view,
.error-card,
.update-card {
  background: rgba(255, 253, 248, 0.94);
  border-color: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.login-card {
  background:
    linear-gradient(160deg, rgba(255, 253, 248, 0.98), rgba(239, 246, 242, 0.94));
}

.dashboard-view,
.teachers-view,
.management-incident-reports-view,
.management-infirmary-stats-view,
.management-fee-stats-view,
.management-student-counts-view,
.anecdotal-records-view,
.class-scratchpad-view,
.incident-reports-view,
.infirmary-visits-view,
.attendance-list-view,
.attendance-view,
.announcements-view,
.circulars-view,
.messages-view,
.transport-view,
.subject-detail-view,
.dau-summary-view {
  max-width: 1180px;
}

.login-card h1,
.dashboard-header h1,
.profile-header h1,
.photo-manager-header h1,
.management-screen-header h1,
.teachers-header h1,
.attendance-header h1,
.announcements-header h1,
.messages-header h1,
.incident-reports-header h1,
.class-scratchpad-header h1,
.requisitions-header h1,
.transport-header h1,
.calendar-header h1,
.planned-absence-header h1,
.subject-detail-header h1,
.dau-summary-header h1 {
  color: var(--text);
  letter-spacing: 0;
}

.primary {
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  box-shadow: 0 12px 22px rgba(var(--accent-rgb), 0.18);
}

.primary:hover {
  box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.22);
}

.danger {
  border-color: rgba(191, 74, 58, 0.32);
  background: rgba(191, 74, 58, 0.08);
  color: var(--danger);
}

.danger:hover {
  box-shadow: 0 10px 18px rgba(191, 74, 58, 0.18);
}

.field input,
.field select,
.field textarea,
.search-input,
.profile-institution-select {
  background: rgba(255, 253, 248, 0.96);
  border-color: rgba(var(--accent-rgb), 0.14);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus,
.profile-institution-select:focus {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.profile-institution-button {
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
}

.notification-card,
.message-thread-card,
.message-thread-detail,
.message-compose-form,
.announcement-card,
.announcement-detail,
.announcement-form,
.incident-report-card,
.incident-report-detail,
.incident-report-form,
.support-ticket-detail,
.requisition-card,
.requisition-issue-card,
.planned-absence-card,
.planned-absence-form,
.subject-detail-card,
.subject-detail-panel,
.subject-detail-form,
.dau-summary-card,
.dau-summary-panel,
.dau-summary-detail-card,
.attendance-group,
.classes-list li,
.calendar-cell,
.attendance-empty,
.nav-install-ios {
  background: rgba(255, 253, 248, 0.94);
  border-color: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.notification-card:hover,
.message-thread-card:hover,
.announcement-card:hover,
.incident-report-card:hover,
.requisition-card:hover,
.subject-detail-card:hover,
.dau-summary-card:hover,
.attendance-group:hover {
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.1);
}

.notification-card.unread,
.message-thread-card.active,
.announcement-card.active,
.incident-report-card.active,
.requisition-card.active,
.subject-detail-card.active,
.dau-summary-card.active,
.attendance-group.active {
  background: rgba(var(--accent-rgb), 0.07);
  border-color: rgba(var(--accent-rgb), 0.26);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
}

.notification-detail,
.dau-summary-notifications,
.dashboard-card {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.18);
}

.message-bubble.self,
.status-pill.present,
.announcement-status-pill.sent,
.subject-detail-status-pill.published,
.dau-summary-status-pill.published,
.update-badge {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.message-bubble,
.status-pill.neutral,
.announcement-status-pill,
.subject-detail-status-pill,
.dau-summary-status-pill {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.12);
}

.selection-pill {
  background: rgba(var(--accent-rgb), 0.09);
}

.status,
.notifications-status,
.messages-status,
.announcements-status,
.class-scratchpad-status,
.requisitions-status,
.incident-reports-status,
.incident-report-form-status,
.requisition-form-status,
.attendance-status,
.attendance-list-status,
.transport-status,
.subject-detail-status,
.dau-summary-status,
.photo-manager-status,
.notification-detail-meta,
.helper a,
.notification-detail-files a,
.message-bubble a,
.announcement-files a,
.incident-report-attachment a,
.subject-detail-attachments a {
  color: var(--accent-2);
}

.photo-cropper {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.photo-cropper-grid {
  border-color: rgba(var(--accent-rgb), 0.7);
}

.photo-cropper-handle {
  border-color: rgba(var(--accent-rgb), 0.9);
}

.toast.error {
  background: rgba(191, 74, 58, 0.95);
}

@media (max-width: 800px) {
  .sidebar {
    width: 240px;
  }
}

/* Logged-in pages use the app background; cards are reserved for content items. */
:root {
  --app-topbar-gap: 16px;
  --page-max-width: 1180px;
  --page-inline-padding: clamp(24px, 4vw, 52px);
}

body[data-auth="logged-in"] .content,
body[data-auth="logged-in"][data-view="attendance"] .content,
body[data-auth="logged-in"][data-view="attendance-list"] .content,
body[data-auth="logged-in"][data-view="dashboard"] .content,
body[data-auth="logged-in"][data-view="management-dashboard"] .content,
body[data-auth="logged-in"][data-view="management-incident-reports"] .content,
body[data-auth="logged-in"][data-view="management-infirmary-stats"] .content,
body[data-auth="logged-in"][data-view="management-fee-stats"] .content,
body[data-auth="logged-in"][data-view="management-student-counts"] .content,
body[data-auth="logged-in"][data-view="teacher-utilization"] .content,
body[data-auth="logged-in"][data-view="users"] .content,
body[data-auth="logged-in"][data-view="student-detail"] .content,
body[data-auth="logged-in"][data-view="teachers"] .content,
body[data-auth="logged-in"][data-view="anecdotal-records"] .content,
body[data-auth="logged-in"][data-view="class-scratchpad"] .content,
body[data-auth="logged-in"][data-view="incident-reports"] .content,
body[data-auth="logged-in"][data-view="requisitions"] .content,
body[data-auth="logged-in"][data-view="announcements"] .content,
body[data-auth="logged-in"][data-view="announcement-compose"] .content,
body[data-auth="logged-in"][data-view="circulars"] .content,
body[data-auth="logged-in"][data-view="circular-compose"] .content,
body[data-auth="logged-in"][data-view="message-compose"] .content,
body[data-auth="logged-in"][data-view="transport"] .content,
body[data-auth="logged-in"][data-view="subject-details"] .content,
body[data-auth="logged-in"][data-view="subject-detail-compose"] .content,
body[data-auth="logged-in"][data-view="dau-summaries"] .content,
body[data-auth="logged-in"][data-view="dau-summary-compose"] .content,
body[data-auth="logged-in"][data-view="photo-manager"] .content,
body[data-auth="logged-in"][data-view="profile"] .content {
  place-items: start center;
  align-content: start;
  padding: var(--app-topbar-gap) var(--page-inline-padding) 32px;
}

body[data-auth="logged-in"] .dashboard-view,
body[data-auth="logged-in"] .management-dashboard-view,
body[data-auth="logged-in"] .management-incident-reports-view,
body[data-auth="logged-in"] .management-infirmary-stats-view,
body[data-auth="logged-in"] .management-fee-stats-view,
body[data-auth="logged-in"] .management-student-counts-view,
body[data-auth="logged-in"] .teacher-utilization-view,
body[data-auth="logged-in"] .users-view,
body[data-auth="logged-in"] .student-detail-view,
body[data-auth="logged-in"] .teachers-view,
body[data-auth="logged-in"] .anecdotal-records-view,
body[data-auth="logged-in"] .class-scratchpad-view,
body[data-auth="logged-in"] .incident-reports-view,
body[data-auth="logged-in"] .infirmary-visits-view,
body[data-auth="logged-in"] .requisitions-view,
body[data-auth="logged-in"] .profile-view,
body[data-auth="logged-in"] .photo-manager-view,
body[data-auth="logged-in"] .attendance-list-view,
body[data-auth="logged-in"] .attendance-view,
body[data-auth="logged-in"] .announcements-view,
body[data-auth="logged-in"] .announcement-compose-view,
body[data-auth="logged-in"] .circulars-view,
body[data-auth="logged-in"] .circular-compose-view,
body[data-auth="logged-in"] .messages-view,
body[data-auth="logged-in"] .message-compose-view,
body[data-auth="logged-in"] .time-table-view,
body[data-auth="logged-in"] .transport-view,
body[data-auth="logged-in"] .subject-detail-view,
body[data-auth="logged-in"] .subject-detail-compose-view,
body[data-auth="logged-in"] .dau-summary-view,
body[data-auth="logged-in"] .dau-summary-compose-view {
  width: 100%;
  padding: 0;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-auth="logged-in"] .users-view {
  gap: 10px;
}

body[data-auth="logged-in"] .student-detail-view {
  gap: 12px;
}

body[data-auth="logged-in"] .teachers-view {
  gap: 10px;
}

body[data-auth="logged-in"] .dashboard-view,
body[data-auth="logged-in"] .management-dashboard-view,
body[data-auth="logged-in"] .management-incident-reports-view,
body[data-auth="logged-in"] .management-infirmary-stats-view,
body[data-auth="logged-in"] .management-fee-stats-view,
body[data-auth="logged-in"] .management-student-counts-view,
body[data-auth="logged-in"] .teacher-utilization-view,
body[data-auth="logged-in"] .users-view,
body[data-auth="logged-in"] .student-detail-view,
body[data-auth="logged-in"] .teachers-view,
body[data-auth="logged-in"] .anecdotal-records-view,
body[data-auth="logged-in"] .class-scratchpad-view,
body[data-auth="logged-in"] .incident-reports-view,
body[data-auth="logged-in"] .infirmary-visits-view,
body[data-auth="logged-in"] .requisitions-view,
body[data-auth="logged-in"] .attendance-list-view,
body[data-auth="logged-in"] .attendance-view,
body[data-auth="logged-in"] .announcements-view,
body[data-auth="logged-in"] .circulars-view,
body[data-auth="logged-in"] .messages-view,
body[data-auth="logged-in"] .time-table-view,
body[data-auth="logged-in"] .transport-view,
body[data-auth="logged-in"] .subject-detail-view,
body[data-auth="logged-in"] .dau-summary-view {
  max-width: var(--page-max-width);
}

body[data-auth="logged-in"][data-view="time-table"] .content {
  overflow-x: visible;
  overflow-y: visible;
}

body[data-auth="logged-in"] .profile-view {
  max-width: 720px;
}

body[data-auth="logged-in"] .photo-manager-view,
body[data-auth="logged-in"] .message-compose-view,
body[data-auth="logged-in"] .dau-summary-compose-view {
  max-width: 760px;
}

body[data-auth="logged-in"] .announcement-compose-view,
body[data-auth="logged-in"] .circular-compose-view {
  max-width: 720px;
}

body[data-auth="logged-in"] .subject-detail-compose-view {
  max-width: 860px;
}

body[data-auth="logged-in"] .notifications-panel {
  gap: 16px;
}

body[data-auth="logged-in"] .notifications-header,
body[data-auth="logged-in"] .profile-header,
body[data-auth="logged-in"] .student-detail-header,
body[data-auth="logged-in"] .teachers-header,
body[data-auth="logged-in"] .photo-manager-header,
body[data-auth="logged-in"] .attendance-header,
body[data-auth="logged-in"] .announcements-header,
body[data-auth="logged-in"] .messages-header,
body[data-auth="logged-in"] .class-scratchpad-header,
body[data-auth="logged-in"] .time-table-header,
body[data-auth="logged-in"] .subject-detail-header,
body[data-auth="logged-in"] .dau-summary-header,
body[data-auth="logged-in"] .daily-announcement-header {
  min-height: 44px;
  margin: 0;
  padding: 0 0 2px;
  align-items: flex-start;
}

body[data-auth="logged-in"] .notifications-header h1,
body[data-auth="logged-in"] .profile-header h1,
body[data-auth="logged-in"] .student-detail-header h1,
body[data-auth="logged-in"] .teachers-header h1,
body[data-auth="logged-in"] .photo-manager-header h1,
body[data-auth="logged-in"] .attendance-header h1,
body[data-auth="logged-in"] .announcements-header h1,
body[data-auth="logged-in"] .messages-header h1,
body[data-auth="logged-in"] .class-scratchpad-header h1,
body[data-auth="logged-in"] .time-table-header h1,
body[data-auth="logged-in"] .subject-detail-header h1,
body[data-auth="logged-in"] .dau-summary-header h1,
body[data-auth="logged-in"] .daily-announcement-header h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.72rem);
  line-height: 1.15;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
}

.page-title-row h1 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-icon {
  width: clamp(1.25rem, 2vw, 1.45rem);
  height: clamp(1.25rem, 2vw, 1.45rem);
  flex: 0 0 auto;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.announcements-view .announcements-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.announcements-view .announcements-header > div {
  min-width: 0;
}

.announcements-view #announcementNewBtn {
  justify-self: end;
  align-self: start;
  min-height: 36px;
  padding: 9px 16px;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  box-shadow: 0 12px 22px rgba(var(--accent-rgb), 0.16);
}

.announcements-view #announcementNewBtn:hover,
.announcements-view #announcementNewBtn:focus-visible {
  background: linear-gradient(135deg, #164f57, var(--accent));
  color: #fffdf8;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.2);
}

.announcements-view .announcements-search {
  margin: 0 0 4px;
}

.announcements-view .announcements-status:empty {
  display: none;
}

.announcements-view .announcements-status {
  min-height: 0;
}

.announcements-view .announcements-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.subject-detail-view .subject-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.subject-detail-view .subject-detail-header > div {
  min-width: 0;
}

.subject-detail-view #subjectDetailNewBtn {
  justify-self: end;
  align-self: start;
  min-height: 36px;
  padding: 9px 16px;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  box-shadow: 0 12px 22px rgba(var(--accent-rgb), 0.16);
}

.subject-detail-view #subjectDetailNewBtn:hover,
.subject-detail-view #subjectDetailNewBtn:focus-visible {
  background: linear-gradient(135deg, #164f57, var(--accent));
  color: #fffdf8;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.2);
}

.subject-detail-view .subject-detail-search {
  margin: 0 0 4px;
}

.subject-detail-view .subject-detail-status:empty {
  display: none;
}

.subject-detail-view .subject-detail-status {
  min-height: 0;
}

.subject-detail-view .subject-detail-status:not(:empty) {
  display: block;
  min-height: 18px;
}

body[data-auth="logged-in"] .subject-detail-compose-view {
  gap: 10px;
}

.subject-detail-compose-view .subject-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.subject-detail-compose-view .subject-detail-header > div {
  min-width: 0;
}

.subject-detail-compose-view #subjectDetailComposeBackBtn {
  justify-self: end;
  align-self: start;
}

.subject-detail-compose-view .subject-detail-status:empty {
  display: none;
}

.subject-detail-compose-view .subject-detail-status {
  min-height: 0;
}

.subject-detail-compose-view .subject-detail-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.dau-summary-view .dau-summary-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.dau-summary-view .dau-summary-header > div {
  min-width: 0;
}

.dau-summary-view #dauSummaryNewBtn {
  justify-self: end;
  align-self: start;
  min-height: 36px;
  padding: 9px 16px;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  box-shadow: 0 12px 22px rgba(var(--accent-rgb), 0.16);
}

.dau-summary-view #dauSummaryNewBtn:hover,
.dau-summary-view #dauSummaryNewBtn:focus-visible {
  background: linear-gradient(135deg, #164f57, var(--accent));
  color: #fffdf8;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.2);
}

.dau-summary-view .dau-summary-search {
  margin: 0 0 4px;
}

.dau-summary-view .dau-summary-status:empty {
  display: none;
}

.dau-summary-view .dau-summary-status {
  min-height: 0;
}

.dau-summary-view .dau-summary-status:not(:empty) {
  display: block;
  min-height: 18px;
}

body[data-view="dau-summaries"][data-dau-summary-mode="detail"] .dau-summary-view #dauSummaryNewBtn,
body[data-view="dau-summaries"][data-dau-summary-mode="detail"] .dau-summary-view .dau-summary-search {
  display: none;
}

.dau-summary-view .dau-summary-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.dau-summary-view .dau-summary-body {
  gap: 10px;
}

.dau-summary-view .dau-summary-nav {
  justify-content: flex-start;
}

.dau-summary-view .dau-summary-header-row {
  padding-top: 2px;
}

.dau-summary-view .dau-summary-meta {
  margin-top: -4px;
}

.dau-summary-view .dau-summary-content {
  gap: 0;
}

.dau-summary-view .dau-summary-detail-card {
  border: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 0;
}

.dau-summary-view .dau-summary-detail-card:first-child {
  padding-top: 4px;
}

.dau-summary-view .dau-summary-detail-card h4 {
  color: var(--accent);
  font-size: 1.04rem;
  line-height: 1.25;
}

.dau-summary-view .dau-summary-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.dau-summary-view .dau-summary-detail-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dau-summary-view .dau-summary-detail-field.long {
  grid-column: 1 / -1;
}

.dau-summary-view .dau-summary-detail-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dau-summary-view .dau-summary-detail-value {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dau-summary-view .dau-summary-attachments a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.dau-summary-view .dau-summary-notifications {
  margin-top: 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: none;
  padding: 12px 14px;
}

.dau-summary-view .dau-summary-notifications h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.95rem;
}

.dau-summary-view .dau-summary-notification-item {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
}

.dau-summary-view .dau-summary-notification-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.dau-summary-view .dau-summary-notification-item strong {
  color: var(--text);
}

@media (max-width: 800px) {
  .dau-summary-view .dau-summary-detail-grid {
    grid-template-columns: 1fr;
  }
}

body[data-auth="logged-in"] .attendance-list-view {
  gap: 10px;
}

.attendance-list-view .attendance-header {
  min-height: 38px;
  padding-bottom: 0;
}

.attendance-list-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.attendance-list-date.field.inline {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
}

.attendance-list-view .attendance-search {
  margin: 0 0 4px;
}

.attendance-list-view .attendance-list-status:empty {
  display: none;
}

.attendance-list-view .attendance-list-status {
  min-height: 0;
}

.attendance-list-view .attendance-list-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.attendance-list-view .attendance-card {
  gap: 6px;
}

.attendance-list-view .attendance-groups {
  gap: 10px;
}

.attendance-list-view .attendance-group {
  display: grid;
  gap: 9px;
  padding: 13px 15px;
}

.attendance-group-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.attendance-group-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attendance-group-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.attendance-group-stat-label {
  color: var(--muted);
  font-weight: 600;
}

.attendance-group-stat strong {
  font-size: 0.82rem;
  font-weight: 800;
}

.attendance-group-stat.present {
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--accent);
}

.attendance-group-stat.absent {
  background: rgba(191, 74, 58, 0.08);
  border-color: rgba(191, 74, 58, 0.14);
  color: var(--danger);
}

.attendance-group-stat.taken {
  background: rgba(var(--accent-2-rgb), 0.1);
  color: var(--accent-2);
}

.attendance-group-stat.pending {
  background: rgba(104, 119, 122, 0.08);
  color: var(--muted);
}

@media (max-width: 800px) {
  .attendance-list-meta {
    width: 100%;
    justify-items: start;
  }
}

.attendance-view .attendance-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.attendance-view .attendance-header > div:first-child {
  min-width: 0;
}

.attendance-view .page-title-row {
  display: inline-flex;
}

.attendance-view .sub {
  margin-bottom: 4px;
}

.attendance-view .attendance-header-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.attendance-view .attendance-meta {
  align-self: start;
  justify-items: end;
  gap: 6px;
}

.attendance-view .attendance-date {
  justify-self: end;
}

.attendance-view .attendance-date-static {
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.attendance-view .attendance-status:empty {
  display: none;
}

.attendance-view .status-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 2px 0 6px;
  color: var(--text);
}

.status-guide-label {
  margin-right: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 253, 248, 0.92);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.06);
}

.status-guide-pill strong {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
}

.status-guide-pill.present {
  background: rgba(var(--accent-rgb), 0.09);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}

.status-guide-pill.present strong {
  color: var(--accent);
}

.status-guide-pill.absent {
  background: rgba(191, 74, 58, 0.08);
  border-color: rgba(191, 74, 58, 0.18);
  color: var(--danger);
}

.status-guide-pill.absent strong {
  color: var(--danger);
}

.status-guide-pill.other {
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.status-guide-pill.other strong {
  color: #1d4ed8;
}

.app-confirmation[hidden] {
  display: none;
}

.app-confirmation {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
}

.app-confirmation-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(2px);
}

.app-confirmation-card {
  position: relative;
  width: min(360px, 92vw);
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 22px 52px rgba(18, 63, 70, 0.2);
}

.app-confirmation-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.2;
}

.app-confirmation-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.app-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.app-confirmation-card .primary,
.app-confirmation-card .secondary {
  min-width: 88px;
}

.app-confirmation-card .secondary {
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.88);
  color: var(--text);
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.app-confirmation-card .secondary:hover {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.08);
}

.attendance-view .status-pill.present {
  background: #2f8f64;
  color: #fffdf8;
  border-color: #2f8f64;
  box-shadow: 0 8px 16px rgba(47, 143, 100, 0.18);
}

.teacher-attendance-view .staff-day-header > div { min-width: 0; }
.teacher-attendance-view .staff-day-header .field { flex: 0 0 160px; }
.teacher-attendance-view .staff-day-toolbar { gap: 8px; }
.teacher-attendance-view .status-guide { display: flex; gap: 8px; padding-bottom: 6px; }
.teacher-attendance-view .staff-attendance-row {
  grid-template-columns: 32px minmax(0, 1fr) 52px;
  gap: 8px;
  padding: 8px 4px;
  min-height: 60px;
}
.teacher-attendance-view .attendance-header-row { min-height: 32px; }
.teacher-attendance-view .staff-teacher-number { color: var(--muted); }
.teacher-attendance-view .staff-teacher-name { white-space: normal; overflow-wrap: anywhere; }
.teacher-attendance-view .staff-attendance-row > :last-child { justify-self: center; }
.teacher-attendance-view .status-pill { width: 44px; height: 44px; font-weight: 800; }
.teacher-attendance-view .status-pill.present { background: #2f8f64; color: #fffdf8; border-color: #2f8f64; }
.teacher-attendance-view .status-pill.absent { background: var(--danger); color: #fffdf8; border-color: var(--danger); }
.teacher-attendance-view .status-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.teacher-attendance-view .status-pill:disabled { cursor: default; transform: none; box-shadow: none; }
.teacher-attendance-view .staff-day-actions { justify-content: center; }
.teacher-attendance-view #teacherAttendanceSave { min-width: min(260px, 100%); }

@media (max-width: 480px) {
  .teacher-attendance-view .staff-day-header { align-items: flex-start; }
  .teacher-attendance-view .staff-day-header .field { flex-basis: 100%; }
  .teacher-attendance-view .staff-day-header .field input { width: 100%; min-height: 44px; }
  .teacher-attendance-view .staff-day-actions > button { width: 100%; }
}

.attendance-view .status-pill.absent {
  background: var(--danger);
  color: #fffdf8;
  border-color: var(--danger);
  box-shadow: 0 8px 16px rgba(191, 74, 58, 0.18);
}

.attendance-view .status-pill.other {
  background: #2563eb;
  color: #fffdf8;
  border-color: #2563eb;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.attendance-view .attendance-actions {
  justify-content: center;
}

.attendance-view #attendanceSubmit {
  min-width: min(260px, 100%);
}

body[data-auth="logged-in"] .dashboard-view .notifications-panel {
  gap: 8px;
}

body[data-auth="logged-in"] .dashboard-view .notifications-header {
  min-height: 38px;
  padding-bottom: 0;
}

.dashboard-view .notifications-status:empty {
  display: none;
}

.dashboard-view .notifications-status {
  min-height: 0;
}

.dashboard-view .notifications-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.messages-view .messages-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.messages-view .messages-header > div {
  min-width: 0;
}

.messages-view #messageNewBtn {
  justify-self: end;
  align-self: start;
  min-height: 36px;
  padding: 9px 16px;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(135deg, var(--accent), #1f6267);
  color: #fffdf8;
  box-shadow: 0 12px 22px rgba(var(--accent-rgb), 0.16);
}

.messages-view #messageNewBtn:hover,
.messages-view #messageNewBtn:focus-visible {
  background: linear-gradient(135deg, #164f57, var(--accent));
  color: #fffdf8;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.2);
}

.messages-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 420px);
  align-items: center;
  gap: 10px;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-controls {
  display: none;
}

.messages-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 253, 248, 0.78);
}

.messages-tab {
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.messages-tab[aria-selected="true"] {
  background: var(--accent);
  color: #fffdf8;
  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.14);
}

.messages-search {
  min-width: 0;
}

.messages-search .search-input {
  min-height: 38px;
  padding: 9px 12px;
}

body[data-auth="logged-in"] .message-compose-view {
  gap: 10px;
}

.message-compose-view .messages-status:empty {
  display: none;
}

.message-compose-view .messages-status {
  min-height: 0;
}

.message-compose-view .messages-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.messages-view .messages-status:empty {
  display: none;
}

.messages-view .messages-status {
  min-height: 0;
}

.messages-view .messages-status:not(:empty) {
  display: block;
  min-height: 18px;
}

.messages-view .message-thread-card {
  gap: 7px;
}

@media (max-width: 800px) {
  body[data-auth="logged-in"] .content,
  body[data-auth="logged-in"][data-view="attendance"] .content,
  body[data-auth="logged-in"][data-view="attendance-list"] .content,
  body[data-auth="logged-in"][data-view="dashboard"] .content,
  body[data-auth="logged-in"][data-view="management-dashboard"] .content,
  body[data-auth="logged-in"][data-view="users"] .content,
  body[data-auth="logged-in"][data-view="student-detail"] .content,
  body[data-auth="logged-in"][data-view="teachers"] .content,
  body[data-auth="logged-in"][data-view="incident-reports"] .content,
  body[data-auth="logged-in"][data-view="requisitions"] .content,
  body[data-auth="logged-in"][data-view="elearning"] .content,
  body[data-auth="logged-in"][data-view="announcements"] .content,
  body[data-auth="logged-in"][data-view="announcement-compose"] .content,
  body[data-auth="logged-in"][data-view="message-compose"] .content,
  body[data-auth="logged-in"][data-view="transport"] .content,
  body[data-auth="logged-in"][data-view="subject-details"] .content,
  body[data-auth="logged-in"][data-view="subject-detail-compose"] .content,
  body[data-auth="logged-in"][data-view="dau-summaries"] .content,
  body[data-auth="logged-in"][data-view="dau-summary-compose"] .content,
  body[data-auth="logged-in"][data-view="photo-manager"] .content,
  body[data-auth="logged-in"][data-view="profile"] .content {
    padding: 16px 20px 24px;
  }

  body[data-auth="logged-in"] .notifications-header,
  body[data-auth="logged-in"] .profile-header,
  body[data-auth="logged-in"] .student-detail-header,
  body[data-auth="logged-in"] .teachers-header,
  body[data-auth="logged-in"] .photo-manager-header,
  body[data-auth="logged-in"] .attendance-header,
  body[data-auth="logged-in"] .announcements-header,
  body[data-auth="logged-in"] .messages-header,
  body[data-auth="logged-in"] .elearning-header,
  body[data-auth="logged-in"] .time-table-header,
  body[data-auth="logged-in"] .subject-detail-header,
  body[data-auth="logged-in"] .dau-summary-header {
    min-height: 40px;
  }

  .messages-controls {
    grid-template-columns: 1fr;
  }

  .student-detail-fields,
  .student-detail-item-facts {
    grid-template-columns: 1fr;
  }

  .messages-tabs {
    width: 100%;
  }

  .messages-tab {
    flex: 1;
  }
}

.library-issue-return-view,
.library-books-view,
.library-division-issue-return-view,
.library-audit-view,
.library-bulk-return-view,
.library-reading-history-view {
  display: none;
  width: 100%;
  max-width: var(--page-max-width);
  gap: 16px;
}

body[data-auth="logged-in"][data-view="library-issue-return"] .content,
body[data-auth="logged-in"][data-view="library-books"] .content,
body[data-auth="logged-in"][data-view="library-division-issue-return"] .content,
body[data-auth="logged-in"][data-view="library-audit"] .content,
body[data-auth="logged-in"][data-view="library-bulk-return"] .content,
body[data-auth="logged-in"][data-view="library-reading-history"] .content {
  place-items: start center;
  align-content: start;
  padding: var(--app-topbar-gap) var(--page-inline-padding) 32px;
}

body[data-auth="logged-in"][data-view="library-issue-return"] .library-issue-return-view,
body[data-auth="logged-in"][data-view="library-books"] .library-books-view,
body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-division-issue-return-view,
body[data-auth="logged-in"][data-view="library-audit"] .library-audit-view,
body[data-auth="logged-in"][data-view="library-bulk-return"] .library-bulk-return-view,
body[data-auth="logged-in"][data-view="library-reading-history"] .library-reading-history-view {
  display: grid;
}

body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-division-issue-return-view {
  padding-bottom: 88px;
}

.library-panel {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 18px 20px 24px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.library-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.library-panel-header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text);
  letter-spacing: 0;
}

.library-panel-actions,
.library-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.library-status-grid,
.library-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.library-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  font-size: 0.95rem;
}

.library-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-field input,
.library-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 253, 248, 0.96);
  color: var(--text);
  font: inherit;
  outline: none;
}

.library-field input:focus,
.library-field select:focus {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.library-input-with-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.library-input-with-button .nav-item {
  white-space: nowrap;
}

.library-search-field {
  grid-column: 1 / -1;
}

.library-form {
  display: grid;
  gap: 16px;
}

.library-toggle-group {
  display: inline-flex;
  align-self: end;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
}

.library-toggle,
.library-division-toggle {
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.library-toggle.is-active,
.library-division-toggle.is-active {
  background: var(--accent);
  color: #fffdf8;
  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.14);
}

.library-status {
  min-height: 20px;
  color: var(--accent-2);
  font-size: 0.9rem;
}

.library-status.error {
  color: var(--danger);
}

.library-status.success {
  color: #2f8f64;
}

.library-result-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.07);
}

.library-result-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-result-body,
#libraryBooksList,
#libraryDivisionList,
#libraryAuditList,
#libraryBulkReturnDetails,
#libraryReadingHistoryList {
  display: grid;
  gap: 8px;
  overflow-wrap: anywhere;
}

.library-history-row,
.library-division-row,
.library-book-row,
.library-audit-row {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.14);
}

.library-history-row:last-child,
.library-division-row:last-child,
.library-book-row:last-child,
.library-audit-row:last-child {
  border-bottom: 0;
}

.library-division-toolbar {
  display: flex;
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(calc(100vw - (2 * var(--page-inline-padding))), var(--page-max-width));
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  transform: translateX(-50%);
}

.library-checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.library-checkbox-line input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.library-division-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
}

.library-division-row-details {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.library-division-row-details strong {
  color: var(--text);
  font-weight: 850;
}

.library-division-row-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

.library-division-row-meta.is-overdue {
  color: var(--danger);
  font-weight: 850;
}

.library-division-remarks-field {
  display: grid;
  gap: 6px;
  width: min(100%, 280px);
}

.library-division-remarks-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-division-remarks-select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.95);
  color: var(--text);
  font: inherit;
}

.library-division-remarks-select:focus {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  outline: none;
}

.library-division-book-input {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  min-width: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.95);
  color: var(--text);
  font: inherit;
}

.library-division-issued-books {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.04);
}

.library-division-issued-books-title {
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 850;
}

.library-division-issued-book {
  display: grid;
  gap: 3px;
  color: var(--text);
  font-size: 0.84rem;
}

.library-division-issued-book-date {
  color: var(--muted);
  font-size: 0.8rem;
}

.library-division-issued-book-date.is-overdue {
  color: var(--danger);
  font-weight: 850;
}

.library-books-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.library-book-row {
  display: grid;
  gap: 8px;
}

.library-book-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.library-book-title {
  min-width: 0;
  color: var(--text);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.library-book-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.library-book-status.available {
  background: rgba(47, 143, 100, 0.12);
  color: #2f8f64;
}

.library-book-status.issued {
  background: rgba(217, 119, 6, 0.14);
  color: #9a5a04;
}

.library-book-status.lost,
.library-book-status.damaged {
  background: rgba(186, 73, 73, 0.12);
  color: var(--danger);
}

.library-book-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.library-book-details span {
  overflow-wrap: anywhere;
}

.library-scan-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.library-scan-modal.show {
  display: flex;
}

.library-scan-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
}

.library-scan-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(620px, calc(100vw - 40px));
  max-height: min(86vh, calc(100dvh - 40px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
}

.library-scan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.library-scan-header h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.library-scan-body {
  display: grid;
  gap: 10px;
}

.library-scan-body video {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #0f172a;
  object-fit: cover;
}

.library-scan-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

body.library-scan-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .library-search-field .library-input-with-button {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  body[data-auth="logged-in"][data-view="library-issue-return"] .content,
  body[data-auth="logged-in"][data-view="library-books"] .content,
  body[data-auth="logged-in"][data-view="library-division-issue-return"] .content,
  body[data-auth="logged-in"][data-view="library-audit"] .content,
  body[data-auth="logged-in"][data-view="library-bulk-return"] .content,
  body[data-auth="logged-in"][data-view="library-reading-history"] .content {
    padding: 16px 20px 24px;
  }

  .library-panel {
    padding: 16px;
  }

  .library-panel-header {
    display: grid;
  }

  .library-input-with-button {
    grid-template-columns: 1fr;
  }

  .library-books-search {
    grid-template-columns: 1fr;
  }

  .library-division-toolbar,
  .library-division-row {
    grid-template-columns: 1fr;
  }

  .library-division-toolbar {
    display: grid;
    align-items: stretch;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] .content {
    padding: 10px 12px 96px;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-division-issue-return-view {
    padding-bottom: 0;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-division-toolbar {
    left: 12px;
    right: 12px;
    bottom: 8px;
    width: auto;
    grid-template-columns: auto minmax(0, 1fr);
    transform: none;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] #libraryDivisionSaveBtn {
    width: 100%;
  }

  .library-toggle-group {
    width: 100%;
  }

  .library-toggle,
  .library-division-toggle {
    flex: 1;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.button-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-icon,
.messages-composer-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="messages"] .messages-view {
  width: 100%;
  max-width: 1180px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.messages-view .messages-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
}

.messages-view .messages-header h1 {
  margin: 0;
  font-size: 1.7rem;
}

.messages-view #messageNewBtn {
  min-height: 40px;
  padding: 10px 16px;
}

.messages-controls {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(220px, 420px);
  align-items: center;
  gap: 10px;
}

.messages-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.messages-tab {
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 9px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.messages-tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-2-rgb), 0.18));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22);
}

.messages-view .messages-status:empty,
.messages-compose-card .messages-status:empty {
  display: none;
}

.messages-view .messages-status,
.messages-compose-card .messages-status {
  min-height: 0;
  font-size: 0.9rem;
  color: var(--accent);
}

.messages-view .messages-status.error,
.messages-compose-card .messages-status.error {
  color: var(--danger);
}

.messages-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-layout {
  align-items: stretch;
  min-height: calc(100dvh - 96px);
}

.messages-list-panel,
.messages-detail-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body[data-view="messages"][data-messages-mode="list"] .messages-detail-panel {
  display: none;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-list-panel {
  display: none;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-header,
body[data-view="messages"][data-messages-mode="detail"] .messages-controls,
body[data-view="messages"][data-messages-mode="detail"] .messages-status {
  display: none;
}

body[data-view="messages"][data-messages-mode="detail"] .messages-detail-panel {
  min-height: inherit;
  height: 100%;
  animation: messagesPaneEnterRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-view="messages"][data-messages-mode="list"] .messages-list-panel {
  animation: messagesPaneEnterLeft 0.28s ease both;
}

.messages-thread-list {
  display: grid;
  gap: 10px;
}

.message-thread-card {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 255, 255, 0.98));
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.message-thread-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.message-thread-card.active,
.message-thread-card.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.98));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.message-thread-card.is-addressed-to-you {
  border-inline-start: 4px solid var(--accent);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.09), var(--surface));
}

.message-thread-personal-badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

.messages-list-end {
  padding: 18px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.messages-thread-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-2-rgb), 0.2));
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.messages-thread-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-thread-card-header,
.messages-thread-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.message-thread-card h3 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.02rem;
}

.message-thread-preview,
.messages-thread-preview,
.message-thread-meta,
.messages-thread-meta,
.messages-detail-meta,
.messages-detail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.message-thread-preview,
.messages-thread-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-meta,
.messages-thread-meta {
  display: block;
  font-size: 0.78rem;
}

.message-thread-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.message-thread-status.closed {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.message-thread-detail,
.messages-detail-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.message-thread-body,
.messages-detail-card {
  display: none;
  gap: 14px;
  padding: 0;
}

.message-thread-body.show,
.messages-detail-card.show {
  display: grid;
  min-height: inherit;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.messages-detail-header,
.message-thread-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-left: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.messages-detail-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.messages-detail-header h2,
.message-thread-header h2 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: 1.15rem;
}

.messages-detail-back {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  padding: 6px 10px;
  justify-self: end;
  flex-shrink: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.messages-conversation,
.message-thread-messages {
  display: grid;
  gap: 12px;
  align-content: end;
  min-height: 0;
  overflow: auto;
  padding: 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.035) 25%, transparent 25%) 0 0 / 26px 26px,
    linear-gradient(225deg, rgba(15, 23, 42, 0.03) 25%, transparent 25%) 0 0 / 26px 26px,
    linear-gradient(180deg, rgba(242, 248, 242, 0.96), rgba(232, 241, 234, 0.86));
}

.messages-bubble-row {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.messages-bubble-row.is-mine {
  justify-items: end;
}

.messages-bubble,
.message-bubble {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: min(100%, 560px);
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  white-space: normal;
}

.messages-bubble-row.is-mine .messages-bubble,
.message-bubble.self {
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.12));
}

.messages-bubble::before,
.message-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 12px;
  height: 14px;
  background: inherit;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.messages-bubble-row.is-mine .messages-bubble::before,
.message-bubble.self::before {
  left: auto;
  right: -6px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.messages-bubble-text {
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

.messages-bubble-meta,
.message-bubble .meta {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: right;
}

.messages-bubble-file,
.message-bubble a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(255, 253, 248, 0.8);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}

.messages-reply-form,
.message-reply-form {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
}

.messages-reply-composer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.messages-reply-form.has-send .messages-reply-composer {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
}

.messages-reply-body-field {
  gap: 0;
}

.messages-reply-body-field > span {
  display: none;
}

.messages-reply-body-field textarea {
  min-height: 44px;
  max-height: 104px;
  resize: vertical;
  border-radius: 22px;
  padding: 11px 14px;
}

.messages-attach-button,
.messages-reply-send {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
}

.messages-attach-button {
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.messages-attach-button:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.32);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.messages-reply-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.messages-reply-send {
  padding: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.messages-reply-send[hidden] {
  display: none;
}

.messages-reply-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.messages-reply-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.8rem;
}

.messages-end-thread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(191, 74, 58, 0.24);
  border-radius: 14px;
  background: rgba(191, 74, 58, 0.1);
  color: #9f2f22;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.messages-end-thread[hidden] {
  display: none;
}

.messages-end-thread:hover {
  transform: translateY(-1px);
  border-color: rgba(191, 74, 58, 0.34);
  background: rgba(191, 74, 58, 0.16);
}

.messages-compose-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 69;
}

.messages-compose-modal.show {
  display: flex;
}

.messages-compose-card {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(640px, calc(100vw - 40px));
  max-height: min(86vh, calc(100dvh - 40px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: var(--surface-strong);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.28);
  animation: fadeUp 0.3s ease-out;
}

.messages-compose-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.messages-compose-header h3 {
  margin: 0;
  font-size: 1.12rem;
}

.messages-compose-form,
.messages-compose-card .message-compose-form {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.messages-compose-actions,
.messages-compose-card .message-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@keyframes messagesPaneEnterRight {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes messagesPaneEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 800px) {
  .messages-controls {
    grid-template-columns: 1fr;
  }

  .messages-view .messages-header {
    grid-template-columns: 1fr;
  }

  .messages-view #messageNewBtn {
    justify-self: stretch;
  }

  .message-thread-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px;
  }

  .messages-thread-avatar {
    width: 40px;
    height: 40px;
  }

  .messages-detail-header,
  .message-thread-header {
    padding-left: 0;
  }

  .messages-detail-heading {
    grid-template-columns: 1fr;
  }

  .messages-reply-meta-row {
    grid-template-columns: 1fr;
  }

  .messages-end-thread {
    justify-self: stretch;
  }
}

@media (min-width: 1024px) {
  :root {
    --desktop-sidebar-width: 280px;
    --app-topbar-gap: 24px;
    --page-max-width: 1280px;
    --page-inline-padding: clamp(28px, 3vw, 56px);
  }

  body[data-auth="logged-in"] .app {
    min-height: calc(100vh - var(--browser-notice-height));
    padding-left: var(--desktop-sidebar-width);
  }

  body[data-auth="logged-in"] .app-topbar {
    position: sticky;
    top: 0;
    height: 56px;
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 8px var(--page-inline-padding);
    border-width: 0 0 1px;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: 0 10px 28px rgba(23, 33, 43, 0.08);
    z-index: 35;
  }

  body[data-auth="logged-in"] .app-topbar-title {
    text-align: left;
    font-size: 1rem;
  }

  body[data-auth="logged-in"] .app-notifications-button {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  body[data-auth="logged-in"] .nav-toggle,
  body[data-auth="logged-in"] .nav-scrim {
    display: none;
  }

  body[data-auth="logged-in"] .sidebar,
  body[data-auth="logged-in"][data-nav="open"] .sidebar {
    width: var(--desktop-sidebar-width);
    transform: translateX(0);
    padding: 20px 16px;
    gap: 16px;
    border-right-color: rgba(var(--accent-rgb), 0.14);
    box-shadow: 14px 0 36px rgba(var(--accent-rgb), 0.08);
  }

  body[data-auth="logged-in"] .brand {
    min-height: 42px;
  }

  body[data-auth="logged-in"] .brand-home {
    flex: 1 1 auto;
  }

  body[data-auth="logged-in"] .logo-text {
    width: 100%;
    justify-content: center;
  }

  body[data-auth="logged-in"] .sidebar .nav-item {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.84rem;
  }

  body[data-auth="logged-in"] .sidebar .nav-icon {
    width: 22px;
    height: 22px;
  }

  body[data-auth="logged-in"] .sidebar .nav-icon svg {
    width: 12px;
    height: 12px;
  }

  body[data-auth="logged-in"] .nav-group-items {
    padding-left: 12px;
  }

  body[data-auth="logged-in"] .content,
  body[data-auth="logged-in"][data-view] .content,
  body[data-auth="logged-in"][data-view="library-issue-return"] .content,
  body[data-auth="logged-in"][data-view="library-books"] .content,
  body[data-auth="logged-in"][data-view="library-division-issue-return"] .content,
  body[data-auth="logged-in"][data-view="library-audit"] .content,
  body[data-auth="logged-in"][data-view="library-bulk-return"] .content,
  body[data-auth="logged-in"][data-view="library-reading-history"] .content {
    min-height: calc(100vh - 56px - var(--browser-notice-height));
    padding: var(--app-topbar-gap) var(--page-inline-padding) 48px;
    place-items: start center;
    align-content: start;
  }

  body[data-auth="logged-in"][data-view="library-division-issue-return"] .library-division-toolbar {
    left: calc(var(--desktop-sidebar-width) + ((100vw - var(--desktop-sidebar-width)) / 2));
    width: min(
      calc(100vw - var(--desktop-sidebar-width) - (2 * var(--page-inline-padding))),
      var(--page-max-width)
    );
  }

  body[data-auth="logged-in"] .content > * {
    width: 100%;
  }

  body[data-auth="logged-in"] .dashboard-view {
    max-width: min(860px, var(--page-max-width));
  }

  body[data-auth="logged-in"] .profile-view,
  body[data-auth="logged-in"] .photo-manager-view,
  body[data-auth="logged-in"] .transport-view,
  body[data-auth="logged-in"] .message-compose-view,
  body[data-auth="logged-in"] .announcement-compose-view,
  body[data-auth="logged-in"] .circular-compose-view,
  body[data-auth="logged-in"] .dau-summary-compose-view {
    justify-self: start;
  }
}

/* Admission figures use the same scoped snapshot as the admin dashboard. */
.admission-dashboard-view { display: none; width: 100%; max-width: var(--page-max-width); min-width: 0; gap: 16px; }
body[data-auth="logged-in"][data-view="admission-dashboard"] .admission-dashboard-view { display: grid; }
body[data-view="admission-dashboard"] .content > :not(.admission-dashboard-view) { display: none; }
body[data-auth="logged-in"][data-view="admission-dashboard"] .content { place-items: start center; align-content: start; padding: var(--app-topbar-gap) var(--page-inline-padding) 32px; }
.admission-dashboard-note { margin: 6px 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.admission-dashboard-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.admission-dashboard-filters label { display: grid; gap: 6px; min-width: 150px; font-size: 0.85rem; }
.admission-dashboard-filters select { min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--text); }
.admission-dashboard-summary { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.admission-dashboard-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.admission-dashboard-stage { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.admission-dashboard-stage h3 { margin: 0; font-size: 0.95rem; }
.admission-dashboard-stage progress { width: 100%; height: 10px; accent-color: var(--accent); }
.admission-dashboard-table-scroll { max-width: 100%; overflow-x: auto; border-radius: 8px; }
.admission-dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admission-dashboard-table th, .admission-dashboard-table td { padding: 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admission-dashboard-table th:first-child { text-align: left; }
.admission-dashboard-table thead { background: rgba(var(--accent-rgb), 0.06); }
@media (max-width: 520px) {
  .admission-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admission-dashboard-filters label { flex: 1 1 120px; min-width: 0; }
  .admission-dashboard-filters button { flex: 1 1 auto; }
}

.admission-dashboard-view .page-title-row h1 { white-space: normal; overflow: visible; text-overflow: clip; font-size: clamp(1.35rem, 5vw, 2rem); }
.admission-dashboard-filters button, .admission-dashboard-view .management-screen-header > button { width: auto; min-height: 42px; justify-content: center; padding: 10px 16px; }

.admission-info-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin-left: 6px; border: 1px solid var(--muted); border-radius: 50%; background: transparent; color: var(--text); font: italic 700 15px Georgia, serif; cursor: pointer; vertical-align: middle; }
.admission-info-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.admission-dashboard-summary .management-stat-label, .admission-dashboard-stage h3 { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.admission-info-dialog { width: min(420px, calc(100vw - 40px)); padding: 24px; border: 0; border-radius: 14px; box-shadow: 0 18px 70px #17282740; color: var(--text); }
.admission-info-dialog::backdrop { background: #142b3466; }
.admission-info-dialog h2 { margin: 0 0 14px; font-size: 1.1rem; }
.admission-info-dialog p { margin: 0 0 22px; line-height: 1.6; font-size: 0.95rem; }
.admission-info-dialog .nav-item { min-height: 42px; justify-content: center; }
.admission-submission-rate { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 0.9rem; }
.management-teacher-search { display: grid; gap: 6px; margin: 14px 0 8px; font-size: 0.9rem; }
.management-teacher-search input { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: white; }
.management-teacher-result-count { font-size: 0.85rem; color: var(--muted); }
.management-institution-teacher-counts { margin: 14px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .admission-info-button { width: 30px; height: 30px; }
  .management-institution-teacher-counts .management-stat-card { padding: 12px; }
}
.admission-dashboard-view .management-section-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.admission-dashboard-view .management-section-header > span { grid-column: 1; text-align: left; }
.admission-dashboard-view .management-section-header > .admission-info-button { grid-column: 2; grid-row: 1; margin: 0; }
.management-teacher-drilldown { scroll-margin-top: calc(var(--browser-notice-height) + 72px); }


/* Compact dashboard cards; keep the summary visible while details open on demand. */
#managementDashboardContent,
#admissionDashboardContent {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

#managementDashboardContent > .management-summary-grid,
#admissionDashboardContent > .management-summary-grid,
#managementTeacherDrilldown,
#managementDashboardContent > .management-empty,
#admissionDashboardContent > .admission-dashboard-note {
  grid-column: 1 / -1;
}

#managementDashboardContent .management-summary-grid,
#admissionDashboardContent .management-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#managementDashboardContent .management-stat-card,
#admissionDashboardContent .management-stat-card {
  align-content: start;
  gap: 5px;
  padding: 10px 12px;
  box-shadow: none;
}

#managementDashboardContent .management-stat-label,
#admissionDashboardContent .management-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}

#managementDashboardContent .management-stat-value,
#admissionDashboardContent .management-stat-value {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.dashboard-section.management-section {
  display: block;
  padding: 0;
  border-radius: 10px;
}

.dashboard-section > .management-section-header,
.admission-dashboard-view .dashboard-section > .management-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 8px;
  min-height: 48px;
  padding: 10px 12px;
  list-style: none;
  cursor: pointer;
}

.dashboard-section > summary::-webkit-details-marker { display: none; }
.dashboard-section > summary::marker { content: ""; }
.dashboard-section > summary::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.dashboard-section[open] > summary::after { transform: rotate(225deg); }
.dashboard-section > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.dashboard-section > summary h2 { font-size: 0.95rem; }
.dashboard-section > summary > span { grid-column: 1; text-align: left; font-size: 0.78rem; }
.dashboard-section > :not(summary) { margin: 0 12px 12px; }
.dashboard-section .management-fee-grid,
.dashboard-section .management-spa-summary,
.dashboard-section .management-spa-category-metrics,
.dashboard-section .admission-dashboard-stages {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-section .management-grade-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.dashboard-section .management-spa-grid { grid-template-columns: minmax(0, 1fr); }
.dashboard-section .management-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.dashboard-section .management-bar-label { grid-column: 1 / -1; }
.dashboard-section .management-bar-value { text-align: right; }
.dashboard-section .management-spa-category-header { flex-wrap: wrap; }
.dashboard-section .management-spa-category-header h3 { white-space: normal; }
.dashboard-section .management-spa-activity-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.dashboard-section .management-spa-activity-row span,
.dashboard-section .management-spa-activity-row strong { white-space: normal; overflow-wrap: anywhere; }
.dashboard-section .admission-dashboard-stage { padding: 10px; gap: 6px; }
.dashboard-section .admission-dashboard-stage h3 { font-size: 0.85rem; }
.dashboard-section .admission-dashboard-table th,
.dashboard-section .admission-dashboard-table td { padding: 8px; }
.management-dashboard-status:empty { display: none; }

@media (max-width: 899px) {
  #managementDashboardContent,
  #admissionDashboardContent { grid-template-columns: minmax(0, 1fr); }
}


/* Staff announcements share the communication styles and keep private panels scoped to their view. */
.teacher-announcements-view { display: none; width: 100%; max-width: var(--page-max-width); gap: 16px; }
body[data-auth="logged-in"][data-view="teacher-announcements"] .content > section:not(.teacher-announcements-view) { display: none !important; }
body[data-auth="logged-in"][data-view="teacher-announcements"] .teacher-announcements-view { display: grid; }
.teacher-announcements-view [hidden] { display: none !important; }
.teacher-announcement-card { width: 100%; text-align: left; cursor: pointer; }
.teacher-announcement-card h3 { margin: 0 0 8px; }
.teacher-announcement-recipients { border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.teacher-announcement-options { display: grid; max-height: 260px; overflow-y: auto; margin: 10px 0; }
.teacher-announcements-view .selection-pill { cursor: pointer; border: 1px solid rgba(var(--accent-rgb), 0.16); min-height: 32px; }
.teacher-announcements-view .announcement-body { white-space: normal; overflow-wrap: anywhere; }
.teacher-announcements-view .announcement-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.teacher-announcements-view #teacherAnnouncementDetail { display: grid; gap: 12px; }
@media (max-width: 640px) {
  .teacher-announcements-view .announcements-header { flex-wrap: wrap; }
}