:root {
  --ink: #202720;
  --muted: #687068;
  --line: #ddd8ca;
  --soft-line: #eeeae0;
  --page: #f3f5f1;
  --surface: #fffdf8;
  --forest: #0d4438;
  --forest-2: #216456;
  --mint: #e4efe9;
  --new: #176c58;
  --new-soft: #e1f0e9;
  --review: #922f41;
  --review-soft: #f5e5e8;
  --gold: #a97c25;
  --gold-bright: #c5a155;
  --gold-soft: #f6edd9;
  --ivory: #fffdf8;
  --danger: #9d382f;
  --danger-soft: #f8e7e4;
  --shadow: 0 12px 32px rgba(28, 42, 33, 0.08);
  --sidebar-width: 246px;
}

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

html { background: var(--page); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background-color: var(--page);
  background-image: repeating-linear-gradient(135deg, rgba(169,124,37,0.018) 0 1px, transparent 1px 18px);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
}

.language-welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background-color: #edf2ee;
  background-image: repeating-linear-gradient(135deg, rgba(169,124,37,.035) 0 1px, transparent 1px 20px);
}
.language-welcome-panel {
  display: grid;
  width: min(560px, 100%);
  justify-items: center;
  gap: 20px;
  border: 3px double #a9873f;
  border-radius: 8px;
  padding: 28px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(13,68,56,.16);
  text-align: center;
}
.language-welcome-heading { display: grid; gap: 5px; }
.language-welcome-heading p { margin: 0; color: var(--gold); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.language-welcome-heading h1 { color: var(--forest); font-size: 1.7rem; }
.language-welcome-heading h2 { color: #5b4a25; font-size: 1.55rem; }
.language-welcome-actions { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.language-choice {
  display: grid;
  min-height: 112px;
  place-content: center;
  gap: 6px;
  border: 2px solid #6b9485;
  border-radius: 7px;
  padding: 16px;
  color: var(--forest);
  background: #eef7f3;
}
.language-choice.arabic { border-color: #c2a157; color: #62470e; background: #fff7e5; }
.language-choice strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.language-choice span { color: var(--muted); font-size: .82rem; }
.language-choice:hover { border-color: currentColor; box-shadow: 0 6px 18px rgba(28,42,33,.09); }

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cec9bc;
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--ivory);
}

textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 3px solid rgba(169, 124, 37, 0.22);
  outline-offset: 1px;
  border-color: var(--gold);
}

label { display: grid; gap: 6px; }
label > span { color: #48564f; font-size: 0.88rem; font-weight: 600; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
p { color: var(--muted); }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow-y: auto;
  padding: 28px 16px;
  background-color: var(--page);
  background-image: none;
}
.auth-panel {
  width: calc(100vw - 32px);
  max-width: 460px;
  border: 3px double #a9873f;
  border-radius: 8px;
  padding: 26px;
  background: rgba(255,253,248,0.98);
  box-shadow: 0 24px 70px rgba(13,68,56,0.16);
}
.auth-brand { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid rgba(169,124,37,0.45); padding-bottom: 18px; }
.auth-mark { width: 68px; height: 68px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--gold); border-radius: 6px; }
.auth-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-brand p { margin: 0 0 3px; color: var(--gold); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.auth-brand h1 { color: var(--forest); font-size: 1.55rem; }
.auth-form { display: grid; gap: 16px; padding-top: 22px; }
.auth-form h2 { margin-bottom: 6px; color: #17352d; }
.auth-form p { margin-bottom: 0; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-message { min-height: 20px; margin: 12px 0 0; color: var(--forest); font-size: 0.82rem; text-align: center; }
.auth-message.error { color: var(--danger); font-weight: 700; }
.auth-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; border-top: 1px solid var(--soft-line); padding-top: 14px; color: var(--muted); font-size: 0.76rem; }
.auth-note svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold); }
.temporary-password-notice { display: flex; align-items: flex-start; gap: 10px; border-inline-start: 4px solid var(--gold); border-radius: 5px; padding: 12px; color: #17352d; background: #fff8e6; font-size: .84rem; line-height: 1.45; }
.temporary-password-notice svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold); }
.auth-link { border: 0; padding: 4px; color: var(--forest); background: transparent; font-size: 0.86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.app-version {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(169,124,37,0.42);
  border-radius: 4px;
  padding: 2px 7px;
  color: #72551d;
  background: rgba(246,237,217,0.72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.app-version-entry { width: max-content; margin: 14px auto 0; }
.app-version-loading { margin-top: 4px; }
.loading-screen .app-version-loading {
  border-color: #0b2f46;
  color: #0b2f46;
  background: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--ink);
  background: var(--page);
}

.loading-screen.hidden { display: none; }
.loading-mark, .brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(197,161,85,0.72);
  border-radius: 6px;
  background: var(--forest);
  box-shadow: 0 0 0 2px rgba(255,253,248,0.08);
}
.loading-mark { width: 64px; height: 64px; margin-bottom: 4px; }
.loading-mark img, .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loading-screen span { color: var(--muted); }

.startup-progress {
  display: grid;
  width: min(78vw, 340px);
  gap: 7px;
  margin-top: 4px;
}

.startup-progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.startup-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 220ms ease;
}

.startup-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  line-height: 1.3;
}

.startup-progress-meta > span {
  min-width: 0;
  color: inherit;
  text-align: start;
}

.startup-progress-meta > strong {
  flex: 0 0 auto;
  color: #f1c54b;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.startup-progress.is-waiting .startup-progress-fill {
  animation: startup-progress-waiting 1.25s ease-in-out infinite;
}

.startup-progress.is-failed .startup-progress-track {
  border-color: rgba(159, 45, 38, 0.38);
  background: rgba(159, 45, 38, 0.1);
}

.startup-progress.is-failed .startup-progress-fill { background: #9f2d26; }
.startup-progress.is-failed .startup-progress-meta > strong { color: #ffaaa2; }
.loading-screen.startup-complete .startup-progress-fill { background: #27744d; }

@keyframes startup-progress-waiting {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .startup-progress-fill { transition: none; }
  .startup-progress.is-waiting .startup-progress-fill { animation: none; }
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  color: #fff;
  background: var(--forest);
  box-shadow: inset -1px 0 rgba(197,161,85,0.22);
}
.sidebar::before { content: none; }
.sidebar > * { position: relative; z-index: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(197,161,85,0.35);
}

.brand-mark { width: 50px; height: 50px; flex: 0 0 auto; }
.brand h1 { color: #fffdf8; font-size: 1.12rem; }
.brand p { margin: 4px 0 0; color: rgba(255,253,248,0.7); font-size: 0.73rem; }

.main-nav { display: grid; gap: 5px; padding: 18px 12px; }
.nav-item, .sidebar-action {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  padding: 0 13px;
  color: rgba(255,255,255,0.78);
  background: transparent;
  text-align: left;
}
.nav-item:hover, .sidebar-action:hover { color: #fff; background: rgba(255,253,248,0.09); }
.nav-item.active { color: var(--forest); border-left: 3px solid var(--gold); background: var(--ivory); font-weight: 700; }
.nav-item svg, .sidebar-action svg { width: 19px; height: 19px; flex: 0 0 auto; }

.sidebar-footer { margin-top: auto; padding: 14px 12px 18px; border-top: 1px solid rgba(197,161,85,0.28); }
.sidebar-action { width: 100%; }
.app-version-sidebar { margin: 10px 10px 0; border-color: rgba(197,161,85,0.45); color: rgba(255,253,248,0.76); background: rgba(255,253,248,0.08); }

.workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 18px;
  padding: 12px 26px;
  border-bottom: 2px solid rgba(169,124,37,0.55);
  background: rgba(255,253,248,0.97);
  backdrop-filter: blur(10px);
}
.page-heading { min-width: 220px; }
.page-heading span { display: block; margin-bottom: 2px; color: var(--gold); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }
.page-heading h2 { font-size: 1.38rem; }
.page-title-row { display: flex; align-items: center; gap: 9px; }
.page-heading .app-version-topbar { display: inline-flex; margin: 0; color: #72551d; font-size: 0.62rem; text-transform: none; }
.role-badge { display: inline-flex !important; align-items: center; min-height: 24px; margin: 0 !important; border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; color: var(--muted) !important; background: #fff; font-family: Inter, Arial, sans-serif; font-size: 0.66rem !important; line-height: 1; text-transform: uppercase; }
.role-badge.admin { border-color: rgba(169,124,37,0.5); color: #77520e !important; background: #fff8e8; }
.topbar-actions { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.user-button { max-width: 190px; color: var(--forest); }
.user-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-access-button { border-color: var(--gold); color: #fff; background: var(--gold); }
.admin-access-button:hover { background: #8c651d; }

.global-search, .small-search {
  position: relative;
  display: block;
}
.global-search svg, .small-search svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 17px;
  transform: translateY(-50%);
  color: var(--muted);
}
.global-search { flex: 1 1 260px; min-width: 120px; max-width: 260px; }
.global-search input { width: 100%; min-width: 0; padding-left: 38px; background: #f7f6f1; }
.small-search input { width: 260px; padding-left: 38px; }

.button, .icon-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #cec9bc;
  border-radius: 6px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--ivory);
  font-weight: 700;
}
.button:hover, .icon-button:hover { border-color: #b9a477; background: #f8f4e9; }
.button svg, .icon-button svg { width: 18px; height: 18px; }
.button.primary { color: #fff; border-color: #0a352c; background: var(--forest); box-shadow: inset 0 -2px rgba(197,161,85,0.3); }
.button.primary:hover { border-color: var(--gold); background: var(--forest-2); }
.button.quiet { background: transparent; }
.button.danger-quiet { color: var(--danger); border-color: #e4bcb8; background: var(--danger-soft); }
.icon-button { width: 44px; padding: 0; }
.menu-button { display: none; }

.view { display: none; padding: 28px 30px 44px; }
.view.active { display: block; }
.view-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.view-intro > div:first-child { position: relative; padding-left: 14px; }
.view-intro > div:first-child::before { position: absolute; top: 3px; bottom: 3px; left: 0; width: 3px; background: var(--gold); content: ""; }
.view-intro h3 { margin-bottom: 6px; color: #17352d; font-size: 1.55rem; }
.view-intro p { margin-bottom: 0; }
.eyebrow { margin-bottom: 5px !important; color: var(--gold) !important; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }
.date-control, .select-control { width: 200px; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.metric {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 15px 16px;
  border-top: 3px solid rgba(169,124,37,0.72);
  background: var(--surface);
}
.metric span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.8rem; font-weight: 650; }
.metric strong { display: block; font-size: 1.8rem; }
.metric small { display: block; margin-top: 4px; color: var(--muted); }

.class-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--ivory); }
.segmented button { min-height: 38px; border: 0; border-radius: 5px; padding: 0 14px; color: var(--muted); background: transparent; font-weight: 700; }
.segmented button.active { color: #fff; background: var(--forest); }

.class-message { margin-bottom: 12px; border: 1px solid #e5d3aa; border-radius: 6px; padding: 12px 14px; color: #6c4b0c; background: var(--gold-soft); }
.roster-list { border-top: 2px solid rgba(169,124,37,0.5); background: var(--ivory); }
.roster-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr) 130px;
  min-height: 74px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--soft-line);
  padding: 10px 12px;
}
.roster-row:hover { background: #faf7ee; }
.person-cell { display: flex; min-width: 0; align-items: center; gap: 12px; }
.avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c8b88f;
  border-radius: 50%;
  color: var(--forest);
  background: var(--mint);
  font-weight: 800;
}
.avatar.large { width: 88px; height: 88px; font-size: 1.45rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell span, .homework-status span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.homework-status { min-width: 0; }
.homework-status strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.grade-chip, .presence-badge, .saved-state, .status-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 800;
}
.grade-chip.new, .saved-state.new { color: var(--new); background: var(--new-soft); }
.grade-chip.review, .saved-state.review { color: var(--review); background: var(--review-soft); }
.grade-chip.empty, .saved-state, .presence-badge.waiting { color: #68746f; background: #edf1ef; }
.grade-chip.redo { color: var(--danger); background: var(--danger-soft); }
.presence-badge.present, .status-chip.active { color: var(--new); background: var(--new-soft); }
.status-chip.archived { color: #6c726f; background: #ecefed; }
.roster-row .button { justify-self: end; }
.empty-state { padding: 48px 20px; color: var(--muted); text-align: center; }

.grading-header { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.grading-student-summary { display: flex; min-width: 0; align-items: center; gap: 10px; }
.grading-student-summary strong { display: block; font-size: 1.15rem; }
.grading-student-summary span { display: block; color: var(--muted); font-size: 0.8rem; }
.grading-header .presence-badge { margin-left: auto; }
.grading-workspace { display: block; }
.grading-form { display: grid; gap: 16px; }
.homework-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.homework-panel { border: 1px solid var(--line); border-top: 3px solid rgba(169,124,37,0.55); border-left-width: 5px; border-radius: 7px; padding: 18px; background: var(--ivory); box-shadow: var(--shadow); }
.new-homework { border-left-color: var(--new); }
.review-homework { border-left-color: var(--review); }
.homework-title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.homework-number { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--forest); font-weight: 800; }
.review-homework .homework-number { background: var(--review); }
.homework-title h3 { font-size: 1.15rem; }
.homework-title p { margin: 2px 0 0; font-size: 0.78rem; }
.homework-title .saved-state { margin-left: auto; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-two { grid-column: 1 / -1; }
.homework-panel > label { margin-top: 12px; }
.previous-private-note { display: grid; gap: 8px; margin-top: 8px; border: 1px solid #d8c17e; border-inline-start: 4px solid var(--gold); border-radius: 6px; padding: 11px 12px; background: #fffaf0; }
.previous-private-note-heading { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: start; gap: 8px; }
.previous-private-note-heading > svg { width: 18px; height: 18px; color: var(--gold); }
.previous-private-note-heading > div { display: grid; gap: 2px; }
.previous-private-note-heading span, .previous-private-note-heading small { color: var(--muted); font-size: .72rem; }
.previous-private-note-heading small { text-align: end; }
.previous-private-note p { margin: 0; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.current-assignment { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; border: 1px solid #ded4bd; border-radius: 6px; padding: 12px 13px; background: #faf7ee; }
.current-assignment div { min-width: 0; }
.current-assignment span, .current-assignment small { display: block; color: var(--muted); font-size: 0.76rem; }
.current-assignment strong { display: block; margin: 4px 0; font-size: 1rem; }
.quran-button { flex: 0 0 auto; color: var(--forest); border-color: #aebdb6; }
.assignment-picker { margin: 14px 0 0; border: 1px solid #e3dbc8; border-radius: 6px; padding: 10px 12px 12px; background: #fbf9f3; }
.assignment-picker legend { padding: 0 6px; color: var(--ink); font-size: 0.86rem; font-weight: 750; }
.assignment-grid { display: grid; grid-template-columns: minmax(130px, 1.5fr) minmax(76px, 0.7fr) minmax(130px, 1.5fr) minmax(76px, 0.7fr); gap: 8px; }
.assignment-segments { display: grid; gap: 9px; }
.assignment-segment { border-left: 3px solid rgba(169,124,37,0.52); background: #fffdf8; }
.assignment-segment legend { display: flex; align-items: center; justify-content: space-between; min-width: 150px; }
.assignment-segment legend .icon-button { width: 30px; height: 30px; min-height: 30px; margin-left: 10px; color: var(--danger); }
.add-assignment-segment { width: 100%; margin-top: 9px; border-style: dashed; }
.assignment-location { display: block; min-height: 18px; margin-top: 7px; color: var(--muted); font-size: 0.74rem; }
.location-box { margin-top: 12px; border: 1px solid var(--soft-line); border-radius: 6px; padding: 12px; background: #f9fbfa; }
.location-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.location-heading span { color: var(--muted); font-size: 0.76rem; }
.page-line-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1.4fr 0.8fr 44px; align-items: end; gap: 8px; }
.open-page-button { color: var(--forest); }
.grading-actions { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 12px; }
.save-grades { min-width: 230px; }

.mushaf-reader { border: 3px double #a9873f; border-radius: 7px; background: #f8f4e8; box-shadow: var(--shadow); overflow: hidden; }
.mushaf-dialog { width: min(820px, calc(100vw - 28px)); background: transparent; box-shadow: none; }
html.mushaf-scroll-locked { overflow: hidden; overscroll-behavior: none; }
body.mushaf-scroll-locked {
  position: fixed;
  top: var(--mushaf-scroll-offset, 0);
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.mushaf-dialog .mushaf-reader {
  display: flex;
  width: 100%;
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  flex-direction: column;
}
.mushaf-dialog .mushaf-toolbar,
.mushaf-dialog .mushaf-segment-picker,
.mushaf-dialog .mushaf-credit { flex: 0 0 auto; }
.mushaf-dialog .mushaf-toolbar {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-inline-end: max(14px, env(safe-area-inset-right));
  padding-inline-start: max(14px, env(safe-area-inset-left));
}
.mushaf-dialog .mushaf-page {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}
.mushaf-dialog .mushaf-credit { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.mushaf-actions { display: flex; align-items: center; gap: 10px; }
.mushaf-toolbar { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #d9ceb2; background: #f2ebd9; }
.mushaf-toolbar > div:first-child { display: grid; gap: 2px; }
.mushaf-toolbar span { color: #786e57; font-size: 0.72rem; }
.page-stepper { display: flex; align-items: end; gap: 5px; }
.page-stepper label { width: 76px; }
.page-stepper label span { text-align: center; }
.page-stepper input { min-height: 40px; text-align: center; }
.page-stepper .icon-button { min-height: 40px; height: 40px; width: 40px; border-color: #cbbf9f; background: #fffdf7; }
.mushaf-page {
  min-height: 625px;
  max-height: calc(100vh - 235px);
  overflow: auto;
  padding: 30px 28px;
  color: #211d15;
  background: #fffdf7;
  font-family: "Traditional Arabic", "Arabic Typesetting", "Segoe UI", serif;
  font-size: 1.55rem;
  text-align: justify;
}
.mushaf-page-number { margin-bottom: 18px; color: #81745a; font-family: "Segoe UI", sans-serif; font-size: 0.76rem; text-align: center; }
.mushaf-image-shell { position: relative; display: grid; width: min(100%, 760px); min-height: 520px; margin: 0 auto; place-items: start center; aspect-ratio: 1298 / 1890; background: #f8f4e8; }
.tajweed-mushaf-image { display: block; width: 100%; height: auto; border: 1px solid #d9ceb2; background: #f8f4e8; box-shadow: 0 5px 18px rgba(52, 44, 26, 0.16); }
.mushaf-image-shell .mushaf-loading { position: absolute; inset: 0; display: grid; padding: 0; place-items: center; }
.mushaf-segment-picker { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid #d9ceb2; padding: 8px 12px; background: #f8f3e6; }
.mushaf-segment-picker[hidden] { display: none; }
.mushaf-segment-picker button { flex: 0 0 auto; max-width: 260px; overflow: hidden; border: 1px solid #cbbf9f; border-radius: 4px; padding: 7px 10px; color: var(--forest); background: #fffdf7; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.mushaf-segment-picker button.active { color: #fff; border-color: var(--forest); background: var(--forest); }
.mushaf-lines { display: grid; grid-template-rows: repeat(15, minmax(34px, auto)); min-width: 700px; }
.mushaf-line { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.mushaf-word { display: inline-block; }
.mushaf-verse { display: inline; }
.ayah-number { display: inline-grid; min-width: 29px; height: 29px; margin: 0 4px; place-items: center; border: 1px solid #ac9b73; border-radius: 50%; font-family: "Segoe UI", sans-serif; font-size: 0.68rem; vertical-align: middle; }
.surah-heading { margin: 17px 0 12px; border-top: 1px solid #cbbf9f; border-bottom: 1px solid #cbbf9f; padding: 7px; font-size: 1rem; text-align: center; }
.mushaf-loading { padding-top: 180px; color: #81745a; font-family: "Segoe UI", sans-serif; font-size: 0.9rem; text-align: center; }
.mushaf-credit { margin: 0; padding: 8px 12px; color: #786e57; font-size: 0.68rem; text-align: center; }

.student-directory-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,360px); gap: 14px; align-items: start; }
.student-directory { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.student-list-header, .student-row { display: grid; grid-template-columns: minmax(220px,1.5fr) 92px 108px 72px 72px 22px; align-items: center; gap: 10px; }
.student-list-header { min-height: 38px; border-bottom: 1px solid var(--line); padding: 0 13px; color: var(--muted); background: #f7f5ee; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.student-row { width: 100%; min-height: 68px; border: 0; border-bottom: 1px solid var(--soft-line); padding: 8px 13px; background: var(--surface); text-align: left; }
.student-row:last-child { border-bottom: 0; }
.student-row:hover, .student-row.selected { background: #f2f7f3; }
.student-row.selected { box-shadow: inset 3px 0 var(--gold); }
.student-row-person { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; }
.student-row-person strong, .student-row-person small, .student-row-stat strong, .student-row-stat small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-row-person small, .student-row-stat small { color: var(--muted); font-size: 0.7rem; }
.student-row-stat strong { font-size: 0.9rem; }
.student-row > svg { width: 17px; color: var(--muted); }
.student-preview { position: fixed; inset-block: 84px 18px; right: 18px; left: auto; z-index: 44; width: min(380px,calc(100vw - 36px)); max-height: none; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #c7b47e; border-top: 3px solid var(--gold); border-radius: 7px; padding: 15px; background: var(--surface); box-shadow: 0 12px 30px rgba(25,48,39,0.12); -webkit-overflow-scrolling: touch; }
html[dir="rtl"] .student-preview { right: auto; left: 18px; }
.student-preview-toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; padding-block: 2px 6px; color: var(--muted); background: inherit; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.student-preview-person { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--soft-line); }
.student-preview-person h4 { margin: 0 0 3px; font-size: 1.2rem; }
.student-preview-person span { color: var(--muted); font-size: 0.78rem; }
.student-preview-progress { padding: 15px 0 10px; }
.student-preview-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 0.8rem; }
.student-preview-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.student-preview-metrics div { min-width: 0; padding: 11px 6px; text-align: center; }
.student-preview-metrics span, .student-preview-metrics strong { display: block; }
.student-preview-metrics span { min-height: 30px; color: var(--muted); font-size: 0.67rem; }
.student-preview-lessons { display: grid; gap: 11px; padding: 14px 0; }
.student-preview-lessons div { display: grid; gap: 3px; }
.student-preview-lessons span { color: var(--muted); font-size: 0.7rem; }
.student-preview-lessons strong { overflow-wrap: anywhere; font-size: 0.82rem; }
.student-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.student-preview-actions .button { width: 100%; min-width: 0; padding-inline: 8px; font-size: 0.76rem; }
.record-loading { display: flex; min-height: 240px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.record-loading.compact { min-height: 84px; }
.loading-spinner { width: 19px; height: 19px; border: 2px solid #d9d6ca; border-top-color: var(--forest); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.profile-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.delete-student-warning { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #e4bcb8; padding: 14px; color: #6f2520; background: var(--danger-soft); }
.delete-student-warning > svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.delete-student-warning div { display: grid; gap: 4px; }
.delete-student-warning span { color: #744945; line-height: 1.45; }
.profile-hero { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid rgba(169,124,37,0.45); padding-bottom: 20px; }
.profile-photo-wrap { position: relative; }
.photo-button { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; min-height: 34px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.student-photo-crop-card { width: min(520px, 100%); }
.student-photo-crop-card .dialog-heading p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.student-photo-crop-stage { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #0b2f46; }
.student-photo-crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.student-photo-crop-stage canvas.dragging { cursor: grabbing; }
.student-photo-crop-guide { position: absolute; inset: 9%; border: 3px solid rgba(255,255,255,.94); border-radius: 50%; box-shadow: 0 0 0 999px rgba(7,31,47,.38); pointer-events: none; }
.photo-crop-help { margin: -4px 0 0; color: var(--muted); text-align: center; font-size: .85rem; line-height: 1.45; }
.student-photo-crop-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; }
.student-photo-crop-controls label { display: grid; gap: 8px; font-weight: 750; }
.student-photo-crop-controls input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--gold); }
.profile-title { min-width: 0; }
.profile-title h3 { margin-bottom: 7px; font-size: 1.65rem; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 0.82rem; }
.profile-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.profile-stat { border: 1px solid var(--line); border-top: 2px solid rgba(169,124,37,0.58); border-radius: 6px; padding: 13px; background: var(--surface); }
.profile-stat span { display: block; color: var(--muted); font-size: 0.76rem; }
.profile-stat strong { display: block; margin-top: 5px; font-size: 1.45rem; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, 0.6fr); gap: 16px; align-items: start; }
.profile-section { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 5px 18px rgba(28,42,33,0.035); }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--soft-line); padding: 13px 15px; }
.profile-section-heading { border-top: 2px solid rgba(169,124,37,0.5); background: #faf7ee; }
.profile-section-heading h4 { font-size: 1rem; }
.profile-section-heading span { color: var(--muted); font-size: 0.75rem; }
.profile-section-body { padding: 14px 15px; }
.profile-chart { min-width: 0; min-height: 245px; }
.notes-block { margin-bottom: 14px; }
.notes-block:last-child { margin-bottom: 0; }
.notes-block strong { display: block; margin-bottom: 5px; font-size: 0.8rem; }
.notes-block p { margin: 0; white-space: pre-wrap; }
.contact-list { display: grid; gap: 11px; }
.contact-list div { display: grid; gap: 3px; }
.contact-list span { color: var(--muted); font-size: 0.75rem; }
.history-table { width: 100%; border-collapse: collapse; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.history-table th, .history-table td { border-bottom: 1px solid var(--soft-line); padding: 10px 8px; text-align: left; vertical-align: top; }
.history-table th { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.history-table td { font-size: 0.84rem; }
.history-table .text-cell { max-width: 250px; }
.page-map-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.page-map-summary p { margin: 0; font-size: 0.8rem; }
.page-map { display: grid; grid-template-columns: repeat(20, minmax(19px,1fr)); gap: 3px; }
.page-cell { display: grid; aspect-ratio: 1; place-items: center; border: 0; border-radius: 2px; padding: 0; color: #76817c; background: #eef1ef; font-size: 0.55rem; }
.page-cell.new { color: #fff; background: var(--new); }
.page-cell.review { color: #fff; background: var(--review); }
.page-cell.both { color: #fff; background: linear-gradient(135deg, var(--new) 50%, var(--review) 50%); }

.progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.chart-section { min-width: 0; border: 1px solid var(--line); border-top: 3px solid rgba(169,124,37,0.6); border-radius: 7px; padding: 16px; background: var(--surface); box-shadow: 0 5px 18px rgba(28,42,33,0.035); }
.chart-section.wide { grid-column: 1 / -1; }
.section-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-heading h4 { margin-bottom: 3px; }
.section-heading p { margin: 0; font-size: 0.78rem; }
.chart-legend { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.75rem; }
.chart-legend span::before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; content: ""; }
.legend-new::before { border-radius: 50% !important; background: var(--new); }
.legend-review::before { background: var(--review); }
.chart { min-height: 280px; overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis-label { fill: #6d7973; font-size: 11px; }
.chart .grid-line { stroke: #e6ebe8; stroke-width: 1; }
.chart .full-credit-line { stroke: #a66f08; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .full-credit-label { fill: #7a5108; font-size: 11px; font-weight: 700; }
.chart .new-line { fill: none; stroke: var(--new); stroke-width: 3; }
.chart .review-line { fill: none; stroke: var(--review); stroke-width: 3; stroke-dasharray: 8 5; }
.chart .new-dot { fill: var(--new); }
.chart .review-dot { fill: var(--review); }
.chart-empty { display: grid; min-height: 250px; place-items: center; color: var(--muted); text-align: center; }
.bar-list { display: grid; gap: 12px; padding-top: 8px; }
.bar-item { display: grid; grid-template-columns: minmax(100px,1fr) 2fr 42px; align-items: center; gap: 10px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.bar-track { height: 12px; border-radius: 2px; background: #edf1ef; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--review); }
.bar-value { color: var(--muted); font-size: 0.78rem; text-align: right; }

.report-builder { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.report-controls { display: grid; gap: 13px; border: 1px solid var(--line); border-top: 3px solid rgba(169,124,37,0.6); border-radius: 7px; padding: 15px; background: var(--surface); }
.report-list { display: grid; gap: 6px; }
.report-list-item { display: grid; gap: 3px; width: 100%; min-height: 56px; border: 1px solid var(--line); border-radius: 5px; padding: 9px 10px; color: var(--ink); background: var(--ivory); text-align: left; }
.report-list-item.active { color: #fff; border-color: var(--forest); background: var(--forest); }
.report-list-item span { color: inherit; font-size: 0.73rem; opacity: 0.75; }
.report-preview { min-height: 600px; border: 3px double #b18b3f; border-radius: 7px; padding: 34px 40px; background: var(--ivory); }
.report-preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.report-letterhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 3px double var(--gold); padding-bottom: 15px; }
.report-letterhead h3 { margin-bottom: 4px; }
.report-letterhead span { color: var(--muted); font-size: 0.78rem; }
.report-title { margin: 26px 0 18px; text-align: center; }
.report-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 22px; }
.report-fact { border-top: 2px solid rgba(169,124,37,0.5); padding: 12px; background: #f7f3e9; }
.report-fact span { display: block; color: var(--muted); font-size: 0.72rem; }
.report-fact strong { display: block; margin-top: 4px; }
.report-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.report-section h4 { margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.report-section p { white-space: pre-wrap; }
.report-dialog-card { width: min(760px, 100%); }

.profile-chart-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.profile-chart-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-chart-controls label { min-width: 140px; }
.profile-chart-controls select { min-height: 38px; }
.memorization-progress { display: grid; gap: 16px; }
.memorization-progress, .memorization-progress * { min-width: 0; }
.memorization-overview { display: grid; grid-template-columns: minmax(112px,.28fr) minmax(0,1fr); align-items: stretch; gap: 12px; }
.memorization-total { display: grid; align-content: center; justify-items: center; gap: 2px; border: 1px solid #b9c9c2; border-inline-start: 5px solid var(--new); padding: 12px; background: var(--new-soft); text-align: center; }
.memorization-total strong { color: var(--forest); font-size: 2rem; font-variant-numeric: tabular-nums; line-height: 1; }
.memorization-total span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.progress-summary { display: grid; gap: 6px; }
.progress-summary-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.progress-summary-header span { color: var(--muted); font-size: 0.77rem; }
.progress-summary-header strong { font-size: 1.08rem; }
.progress-track { height: 14px; overflow: hidden; border: 1px solid #d7ceb9; border-radius: 3px; background: #ebe9df; }
.progress-track span { display: block; height: 100%; background: var(--new); }
.progress-track.juz span { background: var(--gold); }
.memorization-overview > .progress-summary { align-content: center; border: 1px solid var(--soft-line); padding: 12px; background: #fffdf8; }
.memorization-overview small { overflow-wrap: anywhere; color: var(--muted); line-height: 1.4; }
.completion-forecast { display: grid; gap: 11px; border: 1px solid #b9c9c2; border-inline-start: 4px solid var(--new); padding: 14px; background: #f6faf7; }
.completion-forecast.waiting { border-color: #d4cbb8; border-inline-start-color: var(--gold); background: #fbf8ef; }
.completion-forecast.complete { border-inline-start-color: var(--gold); background: #f8f8f1; }
.completion-forecast-heading { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; }
.completion-forecast-heading > svg { width: 32px; height: 32px; border: 1px solid #b9c9c2; padding: 7px; color: var(--forest); background: #fff; }
.completion-forecast-heading > div { display: grid; gap: 2px; }
.completion-forecast-heading strong { color: var(--forest); font-size: .88rem; }
.completion-forecast-heading span { color: var(--muted); font-size: .71rem; line-height: 1.35; }
.completion-forecast-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.8fr); align-items: end; gap: 14px; }
.completion-forecast-summary > div:first-child { display: grid; gap: 4px; }
.completion-forecast-summary > div:first-child > strong { color: var(--ink); font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }
.completion-forecast-summary > div:first-child > span { color: var(--muted); font-size: .74rem; }
.completion-forecast-summary > div:first-child > span b { color: var(--ink); }
.completion-forecast-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-inline-start: 1px solid #d7ded9; }
.completion-forecast-metrics span { display: grid; gap: 2px; padding-inline: 12px; color: var(--muted); font-size: .67rem; line-height: 1.25; }
.completion-forecast-metrics b { color: var(--forest); font-size: 1rem; font-variant-numeric: tabular-nums; }
.completion-forecast-route { display: grid; grid-template-columns: 18px minmax(0,1fr) 18px; align-items: center; color: var(--forest); }
.completion-forecast-route > svg { width: 17px; height: 17px; }
.completion-forecast-route > span { height: 2px; background: var(--new); }
.completion-forecast-route.pending { color: #9a927e; }
.completion-forecast-route.pending > span { height: 1px; background: repeating-linear-gradient(90deg,#b7af9c 0 7px,transparent 7px 12px); }
.completion-forecast-endpoints { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.memorization-progress.compact .completion-forecast { padding: 11px; }
.memorization-progress.compact .completion-forecast-summary > div:first-child > strong { font-size: 1.15rem; }
.memorization-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.memorization-section-heading strong { color: var(--ink); font-size: .84rem; }
.memorization-section-heading span { color: var(--muted); font-size: .72rem; }
.quran-coverage-card, .memorization-growth, .juz-summary { border: 1px solid var(--soft-line); padding: 12px; background: #fbfaf5; }
.quran-coverage-track { position: relative; width: 100%; height: 26px; overflow: hidden; border: 1px solid #cfc8b7; background-color: #e8e5dc; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(98,91,73,.17) calc(10% - 1px) 10%); }
.quran-coverage-range { position: absolute; inset-block: 0; left: var(--coverage-start); width: var(--coverage-width); min-width: 2px; background: var(--new); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.quran-coverage-scale { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-size: .67rem; font-variant-numeric: tabular-nums; }
.quran-coverage-key { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; color: var(--muted); font-size: .7rem; }
.quran-coverage-key span::before { display: inline-block; width: 11px; height: 11px; margin-inline-end: 5px; border: 1px solid #c7c0af; vertical-align: -1px; content: ""; }
.quran-coverage-key .recorded::before { border-color: var(--new); background: var(--new); }
.quran-coverage-key .empty::before { background: #e8e5dc; }
.memorization-growth-bars { display: grid; min-height: 118px; grid-template-columns: repeat(6,minmax(34px,1fr)); align-items: end; gap: 7px; }
.memorization-growth-month { display: grid; min-width: 0; gap: 5px; text-align: center; }
.memorization-growth-track { position: relative; display: flex; height: 90px; align-items: end; justify-content: center; border-bottom: 1px solid #b9b2a1; background: repeating-linear-gradient(to top, transparent 0 21px, rgba(107,99,80,.1) 21px 22px); }
.memorization-growth-track span { display: block; width: min(28px,72%); min-height: 0; background: var(--gold); }
.memorization-growth-track strong { position: absolute; inset-block-start: 2px; color: var(--ink); font-size: .72rem; font-variant-numeric: tabular-nums; }
.memorization-growth-month small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.memorization-growth-empty { display: grid; min-height: 84px; place-items: center; color: var(--muted); font-size: .78rem; text-align: center; }
.progress-position { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--soft-line); padding-top: 12px; color: var(--muted); font-size: 0.8rem; }
.grade-history-bars { display: grid; max-height: 640px; gap: 0; overflow-y: auto; overscroll-behavior: contain; }
.grade-score-guide { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 14px; padding-bottom: 5px; color: var(--muted); font-size: .67rem; }
.grade-score-guide b { color: var(--ink); }
.grade-scale { position: sticky; inset-block-start: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; border-bottom: 1px solid var(--line); padding: 4px 0 7px; color: var(--muted); background: var(--surface); font-size: .67rem; }
.grade-scale span:nth-child(2) { position: absolute; left: var(--full-credit-position); transform: translateX(-50%); }
.grade-history-day { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 11px; border-bottom: 1px solid var(--soft-line); padding: 10px 0; }
.grade-history-day:last-child { border-bottom: 0; }
.grade-history-day time { padding-top: 3px; color: var(--muted); font-size: .72rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.grade-day-scores { display: grid; gap: 7px; }
.grade-score-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 34px; align-items: center; gap: 8px; }
.grade-score-label { color: var(--ink); font-size: .72rem; font-weight: 800; }
.grade-score-track { position: relative; height: 15px; overflow: hidden; border: 1px solid #d4d0c5; background: #eeece5; }
.grade-score-track::after { position: absolute; inset-block: -2px; left: var(--full-credit-position); border-inline-start: 2px solid rgba(66,56,37,.52); content: ""; }
.grade-score-track > span { display: block; height: 100%; }
.grade-score-row.new .grade-score-track > span { background: var(--new); }
.grade-score-row.review .grade-score-track > span { background: var(--review); }
.grade-score-row > strong { color: var(--ink); font-size: .78rem; font-variant-numeric: tabular-nums; text-align: end; }
.grade-history-bars.compact { max-height: none; }
.grade-history-bars.compact .grade-scale { position: relative; }
.saved-report-summary { display: grid; gap: 8px; }
.saved-report-summary article { border-bottom: 1px solid var(--soft-line); padding-bottom: 8px; }
.saved-report-summary article:last-child { border-bottom: 0; padding-bottom: 0; }
.saved-report-summary strong, .saved-report-summary span { display: block; }
.saved-report-summary span { margin-top: 2px; color: var(--muted); font-size: 0.76rem; }

.staff-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 12px; }
.staff-card { display: flex; min-height: 86px; align-items: center; gap: 12px; border: 1px solid var(--line); border-top: 2px solid rgba(169,124,37,0.5); border-radius: 7px; padding: 14px; background: var(--surface); }
.staff-card div:nth-child(2) { min-width: 0; }
.staff-card strong { display: block; }
.staff-card span { color: var(--muted); font-size: 0.78rem; }
.staff-card .status-chip { margin-left: auto; }

.switch-row { grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.switch-row input { width: 21px; min-height: 21px; height: 21px; }
.switch-row span { display: grid; gap: 2px; color: var(--ink); }
.switch-row small { color: var(--muted); font-weight: 400; }

dialog { width: min(720px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); border: 2px solid #a9873f; border-radius: 8px; padding: 0; overflow: hidden; background: var(--ivory); box-shadow: 0 24px 80px rgba(0,0,0,0.25); }
dialog::backdrop { background: rgba(14, 26, 22, 0.58); }
.dialog-card { display: grid; max-height: calc(100dvh - 32px); gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
.compact-dialog { width: min(450px, 100%); }
.dialog-heading { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 2px solid rgba(169,124,37,0.4); padding-bottom: 13px; background: var(--ivory); }
.dialog-heading span { color: var(--muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; }
.dialog-heading h3 { margin-top: 3px; }
.dialog-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--soft-line); padding-top: 16px; background: var(--ivory); }
.dialog-actions.split-actions { align-items: center; }
.dialog-action-spacer { flex: 1; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; max-width: min(420px, calc(100vw - 30px)); transform: translateY(20px); border-radius: 6px; padding: 12px 16px; color: #fff; background: var(--forest); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: 180ms ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--danger); }

.mobile-nav { display: none; }
.account-management { margin-top: 26px; border-top: 2px solid rgba(169,124,37,0.35); padding-top: 24px; }
.account-directory { display: grid; gap: 8px; margin-top: 14px; }
.account-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--soft-line); padding: 10px 2px; }
.account-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.account-row span { color: var(--muted); font-size: 0.78rem; }
.invitation-result { border: 1px solid rgba(169,124,37,0.45); border-radius: 6px; padding: 14px; background: var(--gold-soft); }
.invitation-result p { margin: 5px 0 12px; font-size: 0.82rem; }
.invite-code { margin-bottom: 12px; color: var(--forest); font-family: Consolas, monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 0; }
.saved-state.locked { max-width: 180px; color: #665f50; background: #e7e2d5; white-space: normal; text-align: right; }

.identity-chip { align-self: center; border: 1px solid rgba(169,124,37,0.45); border-radius: 5px; padding: 8px 11px; color: var(--forest); background: var(--gold-soft); font-size: 0.78rem; font-weight: 800; }
.time-clock-layout { display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr); gap: 16px; align-items: start; }
.clock-card, .kiosk-card, .timesheet-section, .payroll-card { border: 1px solid var(--line); border-top: 3px solid rgba(169,124,37,0.62); border-radius: 7px; padding: 18px; background: var(--surface); box-shadow: 0 5px 18px rgba(28,42,33,0.035); }
.clock-card.not-eligible { background: #f7f5ef; }
.clock-status-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; border-bottom: 1px solid var(--soft-line); padding-bottom: 16px; }
.clock-status-row > div:last-child { display: grid; gap: 3px; }
.clock-status-row span, .clock-status-row small { color: var(--muted); font-size: 0.78rem; }
.clock-status-row strong { font-variant-numeric: tabular-nums; font-size: 2rem; }
.clock-status-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: var(--muted); background: #edf0ed; }
.clock-status-icon.active { color: #fff; background: var(--forest); box-shadow: 0 0 0 5px var(--mint); }
.clock-punch-form { display: grid; gap: 12px; margin-top: 16px; }
.clock-punch-form input { font-size: 1.55rem; font-weight: 800; letter-spacing: 0; text-align: center; }
.clock-action { width: 100%; min-height: 52px; font-size: 1rem; }
.clock-message { min-height: 36px; margin: 12px 0 0; color: var(--muted); font-size: 0.76rem; }
.clock-message.error { color: var(--danger); }
.admin-private-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 0.72rem; font-weight: 800; }
.admin-private-badge svg { width: 16px; }
.kiosk-display { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 7px; border: 2px solid var(--gold); padding: 22px; color: #fff; background: var(--forest); }
.kiosk-display.inactive { color: var(--muted); border-color: var(--line); background: #f1f0e9; }
.kiosk-display > span, .kiosk-display > small { font-size: 0.78rem; font-weight: 700; }
.kiosk-display > strong { font-variant-numeric: tabular-nums; font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1; letter-spacing: 0; }
.kiosk-progress { width: min(320px, 90%); height: 7px; margin-top: 8px; overflow: hidden; background: rgba(255,255,255,0.2); }
.kiosk-progress span { display: block; height: 100%; background: var(--gold); transition: width 1s linear; }
.kiosk-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.kiosk-card:fullscreen { display: grid; align-content: center; width: 100vw; height: 100vh; border: 0; border-radius: 0; padding: 6vw; background: var(--ivory); }
.kiosk-card:fullscreen .kiosk-display { min-height: 58vh; }
.kiosk-card:fullscreen .kiosk-display > strong { font-size: min(20vw, 12rem); }
.timesheet-section { margin-top: 16px; }
.time-entry-list { display: grid; gap: 4px; }
.time-entry-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--soft-line); padding: 11px 2px; }
.time-entry-row:last-child { border-bottom: 0; }
.time-entry-row > div { display: grid; gap: 2px; }
.time-entry-row span { color: var(--muted); font-size: 0.76rem; }
.status-chip.verified { color: #315a4b; background: #e4efe9; }

.privacy-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border: 1px solid rgba(169,124,37,0.42); border-left: 4px solid var(--gold); padding: 12px 14px; color: var(--forest); background: var(--gold-soft); }
.privacy-banner svg { flex: 0 0 auto; }
.privacy-banner div { display: grid; gap: 2px; }
.privacy-banner span { color: var(--muted); font-size: 0.76rem; }
.payroll-month-navigation { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px minmax(170px,auto); align-items: end; gap: 8px; margin-bottom: 10px; border: 1px solid var(--line); padding: 10px; background: #f7f5ee; }
.payroll-month-navigation > .icon-button { width: 42px; height: 42px; align-self: end; }
.payroll-month-tabs { display: grid; grid-auto-columns: minmax(108px,1fr); grid-auto-flow: column; gap: 5px; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.payroll-month-tab { min-height: 42px; border: 1px solid #c8c4b7; border-radius: 4px; padding: 7px 10px; color: var(--muted); background: var(--surface); font-size: .76rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.payroll-month-tab:hover { border-color: #8da79b; color: var(--forest); }
.payroll-month-tab.active { border-color: var(--forest); color: #fff; background: var(--forest); box-shadow: inset 0 -3px 0 var(--gold); }
.payroll-month-picker { display: grid; min-width: 170px; gap: 4px; }
.payroll-month-picker > span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.payroll-month-picker input { min-height: 42px; }
.payroll-month-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; border-inline-start: 5px solid var(--gold); padding: 12px 14px; color: var(--forest); background: #f5f0df; }
.payroll-month-banner > div { display: grid; gap: 2px; }
.payroll-month-banner span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.payroll-month-banner strong { font-family: var(--serif); font-size: 1.2rem; }
.payroll-month-banner p { max-width: 520px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; text-align: end; }
.payroll-directory { display: grid; gap: 14px; }
.payroll-card { padding: 0; overflow: hidden; }
.payroll-card-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px 17px; background: #faf8f1; }
.payroll-card-header > div:nth-child(2) { display: grid; gap: 3px; }
.payroll-card-header span { color: var(--muted); font-size: 0.76rem; }
.payroll-status { border-radius: 4px; padding: 5px 8px; font-size: 0.7rem !important; font-weight: 800; text-transform: uppercase; }
.payroll-status.open { color: #655b46; background: #ece7da; }
.payroll-status.approved { color: #184838; background: #dcece5; }
.payroll-status.paid { color: #fff; background: var(--forest); }
.payroll-summary { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.payroll-summary div { padding: 14px 17px; border-right: 1px solid var(--soft-line); }
.payroll-summary div:last-child { border-right: 0; }
.payroll-summary span, .payroll-summary strong { display: block; }
.payroll-summary span { color: var(--muted); font-size: 0.72rem; }
.payroll-summary strong { margin-top: 4px; font-size: 1.15rem; }
.payroll-controls { padding: 14px 17px; }
.payroll-open-controls { display: grid; grid-template-columns: minmax(220px,1fr) auto auto auto; align-items: end; gap: 9px; }
.payroll-open-controls > label { display: grid; gap: 4px; }
.payroll-open-controls > label > span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.payroll-final-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.payroll-final-actions > :first-child { margin-inline-end: auto; }
.payroll-payment-form { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(170px,.55fr) minmax(220px,1fr); align-items: end; gap: 10px; margin-top: 13px; border-top: 1px solid var(--soft-line); padding-top: 13px; }
.payroll-payment-form[hidden] { display: none !important; }
.payroll-payment-form > div:first-child { grid-column: 1 / -1; display: grid; gap: 2px; }
.payroll-payment-form > div:first-child span { color: var(--muted); font-size: .74rem; }
.payroll-payment-form > label { display: grid; gap: 4px; }
.payroll-payment-form > label > span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.payroll-payment-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.payroll-period-note, .payroll-live-note { display: flex; align-items: center; gap: 8px; margin: 0; border-top: 1px solid var(--soft-line); padding: 10px 17px; color: var(--muted); background: #fbfaf6; font-size: .74rem; }
.payroll-period-note svg, .payroll-live-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gold); }
.payroll-live-note { border-top: 0; padding: 10px 0 0; color: #7c3a27; background: transparent; }
.payroll-live-note svg { color: #a14d34; }
.money-input { position: relative; }
.money-input > span { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: var(--muted); }
.money-input input { padding-left: 25px; }
.payroll-timesheet { border-top: 1px solid var(--soft-line); }
.payroll-timesheet summary { padding: 12px 17px; color: var(--forest); background: #faf8f1; cursor: pointer; font-size: 0.8rem; font-weight: 800; }
.payroll-timesheet > div { padding: 4px 17px 12px; }
.teacher-timesheet-list { display: grid; gap: 12px; }
.teacher-timesheet-card { display: grid; gap: 10px; border: 1px solid var(--line); border-top: 3px solid rgba(169,124,37,0.62); border-radius: 7px; padding: 15px 17px; background: var(--surface); box-shadow: 0 5px 18px rgba(28,42,33,0.035); }
.payroll-time-row { display: grid; grid-template-columns: minmax(0,1fr) auto 38px; align-items: center; gap: 12px; border-bottom: 1px solid var(--soft-line); padding: 10px 0; }
.payroll-time-row > div { display: grid; gap: 2px; }
.payroll-time-row span { color: var(--muted); font-size: 0.74rem; }
.payroll-session-row { display: grid; gap: 9px; border-bottom: 1px solid var(--soft-line); padding: 12px 0; }
.payroll-session-heading, .payroll-policy-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.payroll-session-heading > div { display: grid; gap: 2px; }
.payroll-session-heading span, .payroll-policy-line { color: var(--muted); font-size: 0.74rem; }
.payroll-policy-line { justify-content: flex-start; }
.payroll-policy-line span { border-right: 1px solid var(--line); padding-right: 8px; }
.shift-time-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; }
.shift-time-summary > div { display: grid; gap: 3px; border-inline-end: 1px solid var(--line); padding: 9px 11px; }
.shift-time-summary > div:last-child { border-inline-end: 0; }
.shift-time-summary span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.shift-time-summary strong { color: var(--forest); font-size: .86rem; font-variant-numeric: tabular-nums; }
.shift-review-button { justify-self: start; }
.payroll-timeline { height: 28px; }
.payroll-timeline-wrap { display: grid; gap: 5px; }
.payroll-timeline > button { min-width: 8px; min-height: 100%; border: 0; border-radius: 0; padding: 0; }
.payroll-timeline > button:hover, .payroll-timeline > button:focus-visible { z-index: 2; outline: 3px solid rgba(146,47,65,.28); outline-offset: -3px; filter: brightness(1.13); }
.payroll-timeline-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.payroll-timeline-key { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .68rem; }
.payroll-timeline-key span { display: inline-flex; align-items: center; gap: 5px; }
.payroll-timeline-key span::before { width: 9px; height: 9px; border-radius: 2px; background: #777; content: ""; }
.payroll-timeline-key .ready::before { background: #7394a6; }
.payroll-timeline-key .teaching::before { background: #18705a; }
.payroll-timeline-key .break::before { background: #d4a227; }
.payroll-timeline-key .break-excess::before { background: repeating-linear-gradient(135deg,#a96820 0,#a96820 4px,#e0aa58 4px,#e0aa58 8px); }
.payroll-timeline-key .inactive::before { background: #922f41; }
.payroll-timeline-key .inactive-confirmed::before { background: #63313a; }
.payroll-timeline-key .authorized::before { background: #287f9d; }
.payroll-timeline-key .unpaid::before { background: #382f35; }
.payroll-timeline-key .clocked-out::before { background: repeating-linear-gradient(135deg,#b8bfbc 0,#b8bfbc 4px,#e3e6e4 4px,#e3e6e4 8px); }
.payroll-session-row.live-shift { margin-inline: -10px; border: 1px solid #8bbbab; border-inline-start: 5px solid #13705a; padding-inline: 10px; background: #f1f8f5; }
.live-shift-indicator { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; border: 1px solid #8bbbab; border-radius: 4px; padding: 4px 8px; color: #0b4d3d; background: #e1f1eb; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.live-shift-indicator[hidden] { display: none !important; }
.live-shift-indicator svg { width: 15px; height: 15px; animation: live-shift-pulse 1.8s ease-in-out infinite; }
.live-shift-indicator b { border-inline-start: 1px solid #8bbbab; padding-inline-start: 6px; font-variant-numeric: tabular-nums; }
@keyframes live-shift-pulse { 50% { opacity: .42; } }

.timesheet-desktop-banner { display: none; }
.timesheet-workspace { min-width: 0; }
.timesheet-mobile-blocker { display: none; }
.timesheet-desktop-workspace { display: grid; gap: 18px; }
.timesheet-workspace[aria-busy="true"] .timesheet-desktop-workspace { pointer-events: none; opacity: .78; }
.timesheet-workspace-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.timesheet-workspace-title { display: grid; gap: 3px; }
.timesheet-workspace-title h3 { margin: 0; color: var(--forest); font-family: var(--serif); font-size: 1.55rem; }
.timesheet-workspace-title p:last-child { margin: 0; color: var(--muted); font-size: .8rem; }
.timesheet-workspace-status { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.timesheet-saved-status, .timesheet-draft-status { display: inline-flex; min-height: 29px; align-items: center; gap: 6px; border: 1px solid #9bb9c5; padding: 5px 8px; color: #164f66; background: #edf6f8; font-size: .72rem; font-weight: 800; }
.timesheet-saved-status svg { width: 15px; height: 15px; }
.timesheet-draft-status { border-color: #ddbd67; color: #654906; background: #fff7dc; }
.timesheet-save-confirmation { display: flex; align-items: center; gap: 9px; border: 1px solid #8bbbab; border-inline-start: 5px solid #18705a; padding: 11px 13px; color: #0b4d3d; background: #edf7f2; font-size: .82rem; font-weight: 800; }
.timesheet-save-confirmation[hidden] { display: none !important; }
.timesheet-save-confirmation svg { width: 20px; height: 20px; }
.timesheet-workspace-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); background: var(--surface); }
.timesheet-workspace-summary > div { display: grid; min-width: 0; gap: 4px; border-inline-end: 1px solid var(--line); padding: 13px 15px; }
.timesheet-workspace-summary > div:last-child { border-inline-end: 0; }
.timesheet-workspace-summary > .counted { background: #eef6f3; }
.timesheet-workspace-summary span { color: var(--muted); font-size: .7rem; font-weight: 750; }
.timesheet-workspace-summary strong { color: var(--forest); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.timesheet-workspace-timeline, .timesheet-periods-panel, .timesheet-period-editor, .timesheet-control-card, .timesheet-draft-panel { border: 1px solid var(--line); padding: 17px; background: var(--surface); }
.timesheet-workspace-timeline { display: grid; gap: 11px; }
.timesheet-workspace-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.timesheet-workspace-section-heading > div { display: grid; gap: 3px; }
.timesheet-workspace-section-heading h4, .timesheet-control-card h4 { margin: 0; color: var(--forest); font-family: var(--serif); font-size: 1.08rem; }
.timesheet-workspace-section-heading p, .timesheet-control-card p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.timesheet-workspace-section-heading > label { display: grid; min-width: 180px; gap: 4px; }
.timesheet-workspace-section-heading > label > span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.timesheet-lane { display: grid; grid-template-columns: 106px minmax(0,1fr); align-items: center; gap: 11px; }
.timesheet-lane > strong { color: var(--muted); font-size: .72rem; text-align: end; }
.timesheet-lane.final > strong { color: var(--forest); }
.timesheet-lane-track { position: relative; height: 34px; overflow: hidden; border: 1px solid #aeb8b3; background: repeating-linear-gradient(to right,#f7f8f5 0,#f7f8f5 calc(12.5% - 1px),#e3e6e2 calc(12.5% - 1px),#e3e6e2 12.5%); direction: ltr; }
.timesheet-lane-track.scheduled { height: 22px; background: #f5f3eb; }
.timesheet-lane-track.final { height: 44px; border-color: #7c8d85; }
.timesheet-schedule-window, .timesheet-lane-segment { position: absolute; inset-block: 0; border: 0; border-inline-end: 1px solid rgba(255,255,255,.45); border-radius: 0; padding: 0; }
.timesheet-schedule-window { background: rgba(24,112,90,.22); }
button.timesheet-lane-segment { min-width: 6px; cursor: pointer; }
.timesheet-lane-segment.teaching { background: #18705a; }
.timesheet-lane-segment.break { background: #d4a227; }
.timesheet-lane-segment.break-excess { background: repeating-linear-gradient(135deg,#a96820 0,#a96820 7px,#e0aa58 7px,#e0aa58 14px); }
.timesheet-lane-segment.inactive { background: #a43c4d; }
.timesheet-lane-segment.inactive-confirmed { background: repeating-linear-gradient(135deg,#63313a 0,#63313a 6px,#85505a 6px,#85505a 12px); }
.timesheet-lane-segment.authorized { background: #287f9d; }
.timesheet-lane-segment.unpaid { background: #382f35; }
.timesheet-lane-segment.clocked-out { background: repeating-linear-gradient(135deg,#aeb6b2 0,#aeb6b2 7px,#e2e5e3 7px,#e2e5e3 14px); }
.timesheet-lane-segment.selected { z-index: 2; outline: 3px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 2px #0b2f46; }
.timesheet-lane-segment:focus-visible { z-index: 3; outline: 3px solid var(--gold); outline-offset: -3px; }
.timesheet-workspace-axis { display: grid; grid-template-columns: repeat(5,1fr); margin-inline-start: 117px; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; direction: ltr; }
.timesheet-workspace-axis span { text-align: center; }
.timesheet-workspace-axis span:first-child { text-align: start; }
.timesheet-workspace-axis span:last-child { text-align: end; }
.timesheet-workspace-key { margin-inline-start: 117px; border-top: 1px solid var(--soft-line); padding-top: 9px; }
.timesheet-workspace-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(330px,.72fr); align-items: start; gap: 16px; }
.timesheet-periods-panel, .timesheet-period-editor, .timesheet-draft-panel, .timesheet-control-card { display: grid; gap: 14px; }
.timesheet-period-editor { position: sticky; top: 16px; border-inline-start: 5px solid var(--forest-2); background: #f8fbfa; }
.timesheet-editor-empty { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; }
.timesheet-editor-empty[hidden] { display: none !important; }
.timesheet-editor-empty svg { width: 34px; height: 34px; color: var(--forest); }
.timesheet-editor-empty > div { display: grid; gap: 4px; }
.timesheet-editor-empty span { max-width: 280px; font-size: .76rem; line-height: 1.45; }
#timesheetPeriodEditorFields { display: grid; gap: 13px; }
#timesheetPeriodEditorFields[hidden] { display: none !important; }
.timesheet-period-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timesheet-period-editor-heading > div { display: grid; gap: 2px; }
.timesheet-period-editor-heading span { color: var(--muted); font-size: .7rem; font-weight: 750; }
.timesheet-period-editor-heading strong { color: var(--forest); font-size: .98rem; }
.timesheet-exact-controls { display: grid; grid-template-columns: repeat(2,minmax(150px,1fr)); align-items: end; gap: 10px; }
.timesheet-exact-controls > label { display: grid; gap: 5px; }
.timesheet-exact-controls > label > span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.exact-time-field { display: grid; grid-template-columns: minmax(0,1fr) 72px; }
.exact-time-field input { border-radius: 5px 0 0 5px; font-variant-numeric: tabular-nums; }
.exact-time-field select { border-inline-start: 0; border-radius: 0 5px 5px 0; font-weight: 800; }
.timesheet-period-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.timesheet-period-type { display: grid; min-height: 72px; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--line); padding: 9px; color: var(--ink); background: #fff; text-align: start; cursor: pointer; }
.timesheet-period-type:hover { border-color: var(--forest); }
.timesheet-period-type.selected { outline: 3px solid rgba(24,112,90,.2); border-color: var(--forest); background: #edf7f2; }
.timesheet-period-type > svg { width: 21px; height: 21px; }
.timesheet-period-type > span { display: grid; gap: 2px; }
.timesheet-period-type small { color: var(--muted); font-size: .65rem; }
.timesheet-period-type.teaching { border-inline-start: 5px solid #18705a; }
.timesheet-period-type.break { border-inline-start: 5px solid #d4a227; }
.timesheet-period-type.unpaid { border-inline-start: 5px solid #382f35; }
.timesheet-period-editor-actions, .timesheet-control-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.timesheet-period-list { display: grid; border-top: 1px solid var(--line); }
.timesheet-period-row { display: grid; grid-template-columns: 8px minmax(150px,1fr) 170px 64px auto; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--soft-line); padding: 8px 0; }
.timesheet-period-swatch { width: 8px; height: 34px; background: #777; }
.timesheet-period-row.teaching .timesheet-period-swatch { background: #18705a; }
.timesheet-period-row.break .timesheet-period-swatch { background: #d4a227; }
.timesheet-period-row.break-excess .timesheet-period-swatch { background: #a96820; }
.timesheet-period-row.inactive .timesheet-period-swatch { background: #a43c4d; }
.timesheet-period-row.inactive-confirmed .timesheet-period-swatch { background: #63313a; }
.timesheet-period-row.authorized .timesheet-period-swatch { background: #287f9d; }
.timesheet-period-row.unpaid .timesheet-period-swatch { background: #382f35; }
.timesheet-period-row.clocked-out .timesheet-period-swatch { background: #aeb6b2; }
.timesheet-period-row > div { display: grid; gap: 2px; }
.timesheet-period-row > div span, .timesheet-period-guidance { color: var(--muted); font-size: .68rem; }
.timesheet-period-row time, .timesheet-period-row > b { color: var(--forest); font-size: .78rem; font-variant-numeric: tabular-nums; }
.timesheet-period-guidance { text-align: end; }
.timesheet-shift-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.timesheet-control-card > div:first-child { display: grid; gap: 3px; }
.timesheet-control-card > .button { justify-self: start; }
.timesheet-penalty-field { display: grid; max-width: 280px; gap: 5px; }
.timesheet-penalty-field > span, .timesheet-draft-panel > label > span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.timesheet-penalty-field > div { display: grid; grid-template-columns: 110px auto; align-items: center; gap: 8px; }
.timesheet-penalty-field b { color: var(--muted); font-size: .76rem; }
.timesheet-draft-count { border: 1px solid #ddbd67; padding: 5px 8px; color: #654906; background: #fff7dc; font-size: .72rem; font-weight: 800; }
.timesheet-draft-list { display: grid; border-top: 1px solid var(--line); }
.timesheet-draft-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 38px; align-items: center; gap: 9px; border-bottom: 1px solid var(--soft-line); padding: 8px 0; }
.timesheet-draft-row > svg { width: 18px; height: 18px; color: var(--gold); }
.timesheet-draft-row > span { font-size: .78rem; }
.timesheet-draft-panel > label { display: grid; gap: 5px; }
.timesheet-audit-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; }
.timesheet-audit-details summary { color: var(--forest); cursor: pointer; font-size: .78rem; font-weight: 800; }
.timesheet-audit-details > div { display: grid; gap: 10px; padding: 12px 0 3px; }
.timesheet-audit-details p { margin: 0; color: var(--muted); font-size: .74rem; }
.timesheet-original-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.timesheet-original-grid > span { display: grid; gap: 2px; border: 1px solid var(--soft-line); padding: 9px; color: var(--muted); font-size: .68rem; }
.timesheet-original-grid strong { color: var(--forest); font-size: .82rem; }
.timesheet-workspace-footer { position: sticky; z-index: 10; bottom: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding: 13px 0 max(13px,env(safe-area-inset-bottom)); background: rgba(248,247,242,.97); backdrop-filter: blur(8px); }
.timesheet-workspace-footer > div:last-child { display: flex; gap: 9px; }
.timesheet-workspace-footer .button { min-height: 46px; }
.merged-shift-indicator { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #9bb9c5; border-radius: 4px; padding: 6px 8px; color: #164f66; background: #edf6f8; font-size: .72rem; font-weight: 800; }
.merged-shift-indicator svg { width: 15px; height: 15px; }
.shift-row-more { border-top: 1px solid var(--soft-line); padding-top: 8px; }
.shift-row-more summary, .shift-merge-toolbar > summary { width: max-content; color: var(--muted); cursor: pointer; font-size: .74rem; font-weight: 800; }
.shift-row-more .button { margin-top: 9px; }
.shift-merge-toolbar { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.shift-merge-toolbar > summary { display: flex; align-items: center; gap: 6px; }
.shift-merge-toolbar > summary svg { width: 17px; }
.shift-merge-toolbar > div { display: grid; gap: 10px; padding: 10px 0 2px; }
.shift-merge-toolbar p { margin: 0; color: var(--muted); font-size: .74rem; }
.shift-merge-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.shift-merge-options label { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; padding: 8px; cursor: pointer; }
.shift-merge-options input { width: 18px; height: 18px; accent-color: var(--forest); }
.shift-merge-options span { display: grid; gap: 2px; }
.shift-merge-options small { color: var(--muted); font-size: .68rem; }
.timesheet-unsaved-notice { display: flex; align-items: center; gap: 8px; border: 1px solid #ddbd67; border-radius: 5px; padding: 9px 11px; color: #654906; background: #fff7dc; font-size: .76rem; font-weight: 800; }
.timesheet-unsaved-notice[hidden] { display: none !important; }
.timesheet-unsaved-notice svg { width: 18px; height: 18px; flex: 0 0 auto; }
.inactive-review-summary { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; border: 1px solid #d9a6af; border-inline-start: 5px solid var(--review); border-radius: 7px; padding: 13px; background: var(--review-soft); }
.inactive-review-summary > svg { width: 34px; height: 34px; color: var(--review); }
.inactive-review-summary > div { display: grid; gap: 3px; }
.inactive-review-summary span { color: var(--muted); font-size: .8rem; }
.inactive-review-summary b { color: var(--review); font-size: .92rem; }
.calculation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 9px 0; }
.calculation-grid span { display: grid; gap: 2px; color: var(--muted); font-size: 0.72rem; }
.calculation-grid strong { color: var(--ink); }
.policy-flag { display: flex; align-items: center; gap: 8px; border-top: 1px solid #ebd5a2; padding: 10px 17px; color: #62470e; background: #fff4d6; font-size: 0.78rem; font-weight: 700; }
.policy-flag svg { width: 17px; height: 17px; }
.historical-payroll { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; }
.historical-payroll span { color: var(--muted); }
.empty-state.compact { min-height: 54px; }
.form-note { margin: 0; color: var(--muted); font-size: 0.74rem; }

.language-toggle { width: max-content; }
.auth-panel > .language-toggle { margin: 0 0 14px auto; }
.language-toggle.compact { min-height: 38px; }
.language-toggle.compact button { min-height: 36px; padding: 0 10px; }
.auth-entry-links { display: grid; justify-items: center; gap: 8px; border-top: 1px solid var(--soft-line); padding-top: 12px; }
.auth-entry-links .auth-link { min-height: 30px; }

.session-focus, .operations-section, .timeline-panel, .teacher-queue, .access-panel, .family-children-section, .class-board, .school-success, .family-messages {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  background: var(--surface);
  box-shadow: 0 5px 18px rgba(28,42,33,0.045);
}
.session-focus { display: grid; max-width: 860px; gap: 18px; margin: 0 auto 18px; }
.session-focus.live { max-width: none; }
.teacher-session-guidance { max-width: 1100px; margin: 0 auto 18px; border: 1px solid rgba(169,124,37,.45); border-top: 4px solid var(--gold); border-radius: 7px; background: #fffdf7; box-shadow: 0 5px 18px rgba(28,42,33,.04); }
.teacher-guidance-heading { display: flex; align-items: center; gap: 11px; padding: 15px 16px 11px; }
.teacher-guidance-heading > svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--forest); }
.teacher-guidance-heading > div { display: grid; gap: 2px; }
.teacher-guidance-heading span { color: var(--gold); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.teacher-guidance-heading h3 { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.class-guidance-grid, .clock-policy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.class-guidance-rule, .clock-policy-rule { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 9px; min-width: 0; border-top: 1px solid var(--soft-line); padding: 12px 16px; }
.class-guidance-rule:nth-child(odd), .clock-policy-rule:nth-child(odd) { border-inline-end: 1px solid var(--soft-line); }
.class-guidance-rule > svg, .clock-policy-rule > svg { width: 20px; height: 20px; color: var(--gold); }
.class-guidance-rule span, .clock-policy-rule span { color: var(--ink); font-size: .84rem; line-height: 1.55; }
.clock-policy-guide { border-top: 1px solid rgba(169,124,37,.35); background: #f8f6ee; }
.clock-policy-guide summary { display: grid; grid-template-columns: 22px 1fr 20px; align-items: center; gap: 9px; min-height: 48px; padding: 10px 16px; cursor: pointer; list-style: none; color: var(--forest); }
.clock-policy-guide summary::-webkit-details-marker { display: none; }
.clock-policy-guide summary > svg { width: 20px; height: 20px; }
.clock-policy-guide summary > svg:last-child { transition: transform .18s ease; }
.clock-policy-guide[open] summary > svg:last-child { transform: rotate(180deg); }
.clock-policy-rule > svg { color: var(--forest); }
.mode-picker { width: min(460px,100%); }
.mode-picker button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ready-form { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: end; gap: 12px; }
.ready-form[data-special-request="true"] { grid-template-columns: minmax(240px,1fr) auto; }
.assigned-school-meet { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #9fc9b8; border-radius: 6px; padding: 11px 12px; background: #edf7f2; }
.assigned-school-meet > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.assigned-school-meet > div > svg { flex: 0 0 auto; color: var(--forest); }
.assigned-school-meet span { display: grid; min-width: 0; }
.assigned-school-meet strong, .assigned-school-meet small { overflow-wrap: anywhere; }
.assigned-school-meet small { color: var(--muted); }
.large-action { min-height: 52px; font-size: 1rem; }
.readiness-notice { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 12px; border: 1px solid #d8c17e; border-left: 4px solid var(--gold); padding: 13px 14px; background: var(--gold-soft); }
.readiness-notice svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--gold); }
.readiness-notice div { display: grid; gap: 4px; }
.readiness-notice span { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.readiness-notice.confirmed { border-color: #8fb7a0; border-left-color: #18705a; background: #eff8f2; }
.readiness-notice.confirmed svg { color: #18705a; }
.session-state { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--gold); padding: 14px; background: var(--gold-soft); }
.session-state svg { width: 28px; height: 28px; color: var(--gold); }
.session-state div { display: grid; gap: 3px; }
.session-live-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--soft-line); }
.session-live-metrics div { display: grid; gap: 4px; min-width: 0; padding: 14px; border-right: 1px solid var(--soft-line); }
.session-live-metrics div:last-child { border-right: 0; }
.session-live-metrics span, .session-card-stats, .timeline-events { color: var(--muted); font-size: 0.76rem; }
.session-live-metrics strong { font-size: 1.05rem; }
.live-clock-metric strong { color: var(--forest); font-variant-numeric: tabular-nums; }
.previous-shift-notice { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; border: 1px solid #b8d6cb; border-radius: 7px; padding: 13px 14px; color: #164f41; background: #edf7f2; }
.previous-shift-notice > svg { width: 24px; height: 24px; flex: 0 0 auto; }
.previous-shift-notice > div { display: grid; gap: 3px; }
.previous-shift-notice span { color: #43675e; font-size: .84rem; }
.join-meet { justify-self: start; min-height: 50px; }
.session-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button.warning { color: #4f3810; border-color: #d7b65e; background: #f7e5ac; }
.teacher-queue, .timeline-panel { margin-top: 16px; }
.queue-row { display: grid; grid-template-columns: 70px minmax(160px,1fr) minmax(170px,260px) auto 40px; align-items: center; gap: 10px; border-bottom: 1px solid var(--soft-line); padding: 10px 0; }
.queue-row:last-child { border-bottom: 0; }
.queue-row > div:nth-child(2) { display: grid; gap: 3px; }
.queue-row span { color: var(--muted); font-size: 0.76rem; }
.queue-number { color: var(--gold); font-weight: 800; }
.queue-row > .queue-student-person { display: flex; min-width: 0; align-items: center; gap: 10px; }
.queue-student-person > div { display: grid; min-width: 0; gap: 3px; }
.queue-student-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-student-person .avatar { width: 38px; height: 38px; }

.full-timeline, .mini-timeline { position: relative; height: 20px; overflow: hidden; border: 1px solid var(--line); background: #eceae2; }
.mini-timeline { height: 12px; }
.full-timeline > span, .full-timeline > button, .mini-timeline > span { position: absolute; inset-block: 0; }
.full-timeline .ready, .mini-timeline .ready { background: #7394a6; }
.full-timeline .teaching, .mini-timeline .teaching { background: #18705a; }
.full-timeline .break, .mini-timeline .break { background: #d4a227; }
.full-timeline .break-excess, .mini-timeline .break-excess { background: repeating-linear-gradient(135deg,#a96820 0,#a96820 5px,#e0aa58 5px,#e0aa58 10px); }
.full-timeline .inactive, .mini-timeline .inactive { background: #922f41; }
.full-timeline .inactive-confirmed, .mini-timeline .inactive-confirmed { background: repeating-linear-gradient(135deg,#63313a 0,#63313a 5px,#85505a 5px,#85505a 10px); }
.full-timeline .unpaid, .mini-timeline .unpaid { background: #382f35; }
.full-timeline .authorized, .mini-timeline .authorized { background: #287f9d; }
.full-timeline .clocked-out, .mini-timeline .clocked-out { background: repeating-linear-gradient(135deg,#aeb6b2 0,#aeb6b2 5px,#e2e5e3 5px,#e2e5e3 10px); }
.timeline-key, .timeline-events { display: flex; flex-wrap: wrap; gap: 12px; }
.timeline-key span::before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; content: ""; }
.timeline-key .ready::before { background: var(--gold-bright); }
.timeline-key .teaching::before { background: #18705a; }
.timeline-key .break::before { background: #d4a227; }
.timeline-key .inactive::before { background: #922f41; }
.timeline-events { justify-content: space-between; margin-top: 8px; }

.live-session-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.live-session-card { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 15px; background: var(--surface); }
.live-session-card.needs-confirmation { border-color: #c79d39; box-shadow: 0 0 0 2px rgba(199,157,57,0.12); }
.live-session-card > div:first-child { display: grid; grid-template-columns: 12px 1fr; gap: 4px 8px; align-items: center; }
.live-session-card > div:first-child small { grid-column: 2; color: var(--muted); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.status-dot.awaiting_admin, .status-dot.awaiting_special_approval, .status-dot.confirmed_early { background: var(--gold); }
.status-dot.special_declined { background: var(--danger); }
.status-chip.awaiting_special_approval { color: #775312; background: var(--gold-soft); }
.status-chip.special_declined { color: var(--danger); background: var(--danger-soft); }
.status-dot.teaching { background: #18705a; }
.status-dot.break { background: #d4a227; }
.status-dot.break_unconfirmed { background: #a43c4d; }
.status-chip.break_unconfirmed { color: #7d2334; background: #f9e6e9; }
.status-dot.inactive { background: #922f41; }
.session-card-stats { display: flex; justify-content: space-between; gap: 8px; }
.confirmation-request { display: grid; gap: 10px; border: 1px solid #d8c17e; padding: 12px; background: var(--gold-soft); }
.confirmation-request > div { display: grid; gap: 4px; }
.confirmation-request span { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.confirmation-request .button { width: 100%; }
.special-approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.break-request { display: grid; gap: 8px; border: 1px solid #e2c985; border-left: 4px solid var(--gold); padding: 10px; background: var(--gold-soft); }
.break-request > span { color: var(--muted); font-size: 0.8rem; }
.break-request > div { display: flex; flex-wrap: wrap; gap: 6px; }
.request-status { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 10px 12px; background: var(--surface); }
.request-status svg { width: 20px; height: 20px; color: var(--gold); }
.request-status div { display: grid; gap: 2px; }
.request-status span { color: var(--muted); font-size: 0.78rem; }
.request-status.approved { border-color: #8fb7a0; background: #eff8f2; }
.request-status.declined { border-color: #d9aaa2; background: #fff4f2; }
.button.small { min-height: 36px; padding: 7px 10px; font-size: 0.78rem; }
.break-notice { display: flex; align-items: center; gap: 10px; border: 1px solid #e2c985; padding: 12px; color: #6c4b0c; background: var(--gold-soft); }
.break-notice svg { width: 22px; height: 22px; flex: 0 0 auto; }
.long-break-warning { border-color: #d69aa4; border-left-color: #a43c4d; color: #742536; background: #fff1f3; }
.long-break-warning svg { color: #a43c4d; }

dialog.teacher-agreement-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 0; background: #eef2ef; }
dialog.teacher-agreement-dialog::backdrop { background: rgba(6,36,28,.72); }
.teacher-agreement-gate { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
.teacher-agreement-card, .teacher-agreement-page { width: min(860px,100%); margin: 0 auto; }
.teacher-agreement-card { display: grid; gap: 15px; }
.teacher-agreement-document { overflow: hidden; border: 1px solid #b8c7c0; border-radius: 8px; background: #fff; box-shadow: 0 16px 45px rgba(15,55,44,.14); }
.teacher-agreement-page { display: grid; gap: 14px; padding-bottom: 24px; }
.teacher-agreement-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 21px 22px 18px; background: #f8faf8; }
.teacher-agreement-heading > div:first-child { display: grid; gap: 5px; }
.teacher-agreement-heading .eyebrow { margin: 0; color: var(--gold); font-size: .72rem; font-weight: 900; }
.teacher-agreement-heading h2 { margin: 0; color: var(--forest); font-family: var(--serif); font-size: 1.75rem; letter-spacing: 0; }
.teacher-agreement-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.agreement-language-control { display: grid; flex: 0 0 auto; gap: 6px; }
.agreement-language-control > span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.teacher-agreement-intro { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #e2d5af; padding: 13px 22px; color: #5b4718; background: #fff9e7; }
.teacher-agreement-intro svg { width: 21px; height: 21px; }
.teacher-agreement-intro p { margin: 0; font-size: .86rem; line-height: 1.55; }
.teacher-agreement-intro span { font-size: .72rem; font-weight: 800; white-space: nowrap; }
.teacher-agreement-sections { display: grid; }
.teacher-agreement-sections > section { padding: 18px 22px; border-bottom: 1px solid var(--soft-line); }
.teacher-agreement-sections > section:last-child { border-bottom: 0; }
.agreement-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.agreement-section-heading svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--gold); }
.agreement-section-heading h3 { margin: 0; color: var(--forest); font-size: 1.05rem; }
.teacher-agreement-sections ul { display: grid; gap: 8px; margin: 0; padding-inline-start: 22px; }
.teacher-agreement-sections li { padding-inline-start: 3px; color: var(--ink); font-size: .88rem; line-height: 1.55; }
.teacher-agreement-confirmation { display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: start; gap: 10px; border: 2px solid #b78d2e; border-radius: 7px; padding: 14px; background: #fff9e7; cursor: pointer; }
.teacher-agreement-confirmation input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--forest); }
.teacher-agreement-confirmation span { font-size: .94rem; font-weight: 800; line-height: 1.45; }
.teacher-agreement-accept { width: 100%; min-height: 54px; font-size: 1rem; }
.teacher-agreement-status { display: flex; align-items: center; gap: 10px; border: 1px solid #9fc7b6; border-radius: 7px; padding: 12px 14px; color: #145644; background: #eff8f3; }
.teacher-agreement-status svg { width: 24px; height: 24px; flex: 0 0 auto; }
.teacher-agreement-status > div { display: grid; gap: 2px; }
.teacher-agreement-status span { color: #4b6e64; font-size: .76rem; }
.teacher-agreement-status.required { border-color: #d8ab68; color: #6d4910; background: #fff7e8; }

.shift-policy-flag { border: 1px solid #e1c576; border-radius: 5px; }

.operations-section { margin-bottom: 16px; }
.device-setup-guide { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; margin-bottom: 18px; border: 1px solid rgba(169,124,37,0.35); padding: 14px; background: #fffaf0; }
.device-setup-guide > div { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; }
.device-setup-guide > div > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--forest); font-weight: 900; }
.device-setup-guide > svg { width: 20px; color: var(--gold); }
.device-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.device-card { display: grid; gap: 12px; border: 1px solid var(--soft-line); padding: 14px; background: #faf9f4; }
.device-card.assigned { border-color: rgba(169,124,37,0.45); background: #fffaf0; }
.device-card.ready { border-color: rgba(20,111,83,0.48); background: #f3fbf6; }
.device-card-heading { display: grid; grid-template-columns: 30px 42px minmax(0,1fr); align-items: center; gap: 9px; }
.device-card-heading > div:last-child { display: grid; gap: 2px; }
.device-number { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff !important; background: var(--forest); font-weight: 900; }
.device-teacher-picker { gap: 6px; }
.device-teacher-picker > span { color: var(--forest); font-size: 0.8rem; font-weight: 800; }
.device-teacher-picker select { min-height: 50px; font-size: 1rem; font-weight: 750; }
.device-card > div:nth-child(2) { display: grid; gap: 2px; }
.device-card span { color: var(--muted); font-size: 0.76rem; }
.device-access-panel { display: grid; gap: 14px; margin-bottom: 16px; border: 1px solid rgba(169,124,37,0.48); border-left: 5px solid var(--gold); padding: 16px; background: #fffaf0; }
.device-access-panel > div:first-child { display: flex; align-items: center; gap: 12px; }
.device-access-panel h4, .device-access-panel p { margin: 0; }
.device-link-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; color: #fff; background: var(--forest); }
.device-link-controls { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: 8px; }
.device-link-controls code { overflow: hidden; border: 1px solid var(--line); padding: 10px; background: #fff; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.device-pin-reveal { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(169,124,37,0.34); padding-top: 12px; }
.device-pin-reveal strong { color: var(--forest); font-size: 1.7rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.device-pin-reveal small, .device-access-status { color: var(--muted); }
.device-access-status { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; }
.device-state { display: flex; align-items: center; gap: 8px; min-height: 42px; border: 1px solid var(--soft-line); padding: 9px; background: #fff; }
.device-state svg { width: 20px; flex: 0 0 auto; }
.device-state.teaching { border-color: rgba(20,111,83,0.35); color: var(--forest); background: var(--mint); }
.device-state.teaching span { color: var(--forest); font-weight: 800; }
.count-badge.ready { color: var(--forest); background: var(--mint); }
.device-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--forest); background: var(--mint); }
.device-state { border-left: 3px solid var(--gold); padding: 8px 10px; color: var(--muted); background: var(--gold-soft); font-size: 0.78rem; font-weight: 700; }
.device-state.teaching { border-color: var(--new); color: var(--forest); background: var(--new-soft); }
.count-badge { border-radius: 4px; padding: 6px 9px; color: var(--forest); background: var(--mint); font-size: 0.76rem; font-weight: 800; }
.count-badge.attention { color: #5c3f08; background: #f2dda3; }

.schedule-list, .family-admin-list { display: grid; gap: 10px; }
.family-page-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 10px; }
.family-page-actions .select-control { min-width: 180px; }
#familyAdminView { display: grid; min-width: 0; gap: 14px; }
.family-admin-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); background: #fff; }
.family-admin-tabs button { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; gap: 8px; border: 0; border-inline-start: 1px solid var(--line); padding: 9px 12px; color: var(--muted); background: #fff; font-size: .78rem; font-weight: 850; }
.family-admin-tabs button:first-child { border-inline-start: 0; }
.family-admin-tabs button:hover { background: var(--surface-alt); }
.family-admin-tabs button.active { color: #fff; background: var(--forest); }
.family-admin-tabs button svg { width: 19px; height: 19px; flex: 0 0 auto; }
.family-admin-tabs button > span:not(.family-tab-count) { min-width: 0; overflow-wrap: anywhere; }
.family-tab-count { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--forest); background: var(--gold-soft); font-size: .67rem; font-weight: 900; }
.family-admin-section { display: grid; min-width: 0; gap: 14px; }
.family-payment-overview { display: grid; min-width: 0; gap: 12px; }
.family-overview-heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 18px; border-inline-start: 8px solid var(--gold); padding: 13px 15px; background: #fffaf0; }
.family-overview-heading > div { display: grid; min-width: 0; gap: 3px; }
.family-overview-heading > div > span { color: var(--gold); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.family-overview-heading h4 { margin: 0; color: var(--forest); font-family: var(--font-display); font-size: 1.28rem; }
.family-overview-heading p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.family-overview-heading > strong { flex: 0 0 auto; color: var(--forest); font-size: .78rem; }
.family-overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); background: #fff; }
.family-overview-metrics article { display: grid; min-width: 0; gap: 4px; border-inline-start: 1px solid var(--line); padding: 11px 13px; }
.family-overview-metrics article:first-child { border-inline-start: 0; }
.family-overview-metrics span { color: var(--muted); font-size: .68rem; font-weight: 850; }
.family-overview-metrics strong { overflow-wrap: anywhere; color: var(--forest); font-family: var(--font-display); font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.family-overview-metrics .due strong { color: var(--review); }
.family-overview-metrics .attention strong { color: #765111; }
.family-overview-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.family-overview-toolbar label { display: grid; min-width: min(280px,100%); gap: 5px; }
.family-overview-toolbar label > span { color: var(--muted); font-size: .7rem; font-weight: 850; }
.family-section-phone-action { display: none; }
.family-payment-overview-list { display: grid; border-top: 2px solid var(--forest); background: #fff; }
.family-payment-overview-row { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) 48px; align-items: stretch; border-bottom: 1px solid var(--line); }
.family-payment-overview-main { display: grid; min-width: 0; grid-template-columns: minmax(170px,1fr) auto 92px 92px 18px; align-items: center; gap: 10px; border: 0; padding: 11px 8px 11px 4px; color: var(--ink); background: transparent; text-align: start; }
.family-payment-overview-main:hover { background: #f7faf7; }
.family-payment-overview-main > svg { width: 17px; color: var(--muted); }
html[dir="rtl"] .family-payment-overview-main > svg { transform: scaleX(-1); }
.family-payment-overview-name { display: grid; min-width: 0; gap: 2px; }
.family-payment-overview-name strong { overflow: hidden; color: var(--forest); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.family-payment-overview-name small, .family-payment-overview-amount small { color: var(--muted); font-size: .64rem; }
.family-payment-overview-amount { display: grid; min-width: 0; gap: 2px; text-align: end; }
.family-payment-overview-amount strong { overflow-wrap: anywhere; font-size: .82rem; font-variant-numeric: tabular-nums; }
.family-payment-overview-amount.paid strong { color: var(--new); }
.family-payment-overview-amount.due strong { color: var(--review); }
.family-payment-overview-row .status-chip { justify-self: start; font-size: .61rem; }
.family-payment-overview-row .status-chip.paid { color: var(--new); background: var(--new-soft); }
.family-payment-overview-row .status-chip.paid-aid { color: #0d5970; background: #e1f2f6; }
.family-payment-overview-row .status-chip.partial { color: #765111; background: #fff1c9; }
.family-payment-overview-row .status-chip.unpaid { color: var(--review); background: var(--review-soft); }
.family-payment-overview-row .status-chip.waived { color: #365d80; background: #e7f0f7; }
.family-payment-overview-row .status-chip.not-set { color: var(--muted); background: var(--surface-alt); }
.family-payment-quick-action { align-self: center; justify-self: center; color: #fff; background: var(--forest); }
.family-payment-quick-action:hover { color: #fff; background: #173f35; }
.family-management-section { display: grid; gap: 12px; }
.family-management-heading > div:last-child { display: none; }
.family-account-setup-heading { border-inline-start: 8px solid var(--gold); padding: 13px 15px; background: #fffaf0; }
.family-account-setup-heading h4 { margin: 0 0 3px; color: var(--forest); font-family: var(--font-display); font-size: 1.2rem; }
.family-account-setup-heading p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.family-card-summary { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) auto 22px; align-items: center; gap: 12px; border: 0; padding: 13px 15px; color: var(--ink); background: #faf8f1; text-align: start; }
.family-card-summary:hover { background: #f5f2e8; }
.family-card-summary > span:first-child { display: grid; min-width: 0; gap: 3px; }
.family-card-summary > span:first-child strong { overflow: hidden; color: var(--forest); text-overflow: ellipsis; white-space: nowrap; }
.family-card-summary > span:first-child small, .family-card-summary .balance small { color: var(--muted); font-size: .7rem; }
.family-card-summary .balance { display: grid; gap: 2px; text-align: end; }
.family-card-summary .balance strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.family-card-summary > svg { width: 19px; color: var(--muted); }
.family-admin-card.expanded { border-color: var(--gold); }
.family-card-details[hidden] { display: none !important; }
.family-student-access { display: grid; gap: 12px; }
.family-student-picker { display: grid; gap: 6px; }
.family-student-picker > span { color: var(--muted); font-size: .72rem; font-weight: 850; }
.family-student-access-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block: 1px solid var(--line); padding-block: 11px; }
.family-student-access-result > div { display: grid; min-width: 0; gap: 2px; }
.family-student-access-result > div span { color: var(--gold); font-size: .7rem; font-weight: 900; }
.family-student-access-result > div strong { overflow-wrap: anywhere; }
.family-access-directory-link { justify-self: start; }
.schedule-row { display: grid; grid-template-columns: 46px minmax(220px,1fr) minmax(170px,0.5fr); align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: var(--surface); }
.schedule-row > div:not(.schedule-date) { display: grid; gap: 3px; }
.schedule-row span { color: var(--muted); font-size: 0.76rem; }
.schedule-date { display: grid; width: 42px; height: 42px; place-items: center; color: var(--gold); background: var(--gold-soft); }
.weekday-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.weekday-picker label { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); padding: 8px; }
.weekday-picker input { width: 18px; min-height: 18px; }

#scheduleManager { display: grid; gap: 20px; }
.schedule-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.weekly-schedule-board, .temporary-schedule-list { border: 1px solid var(--line); border-radius: 7px; padding: 17px; background: var(--surface); }
.schedule-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.schedule-legend span { border-inline-start: 8px solid var(--forest); border-radius: 4px; padding: 5px 8px; color: var(--muted); background: #f4f5f1; font-size: .72rem; font-weight: 750; }
.schedule-legend .selected-teachers { border-inline-start-color: var(--gold); }
.schedule-week-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; align-items: stretch; }
.schedule-day-column { display: grid; min-width: 0; grid-template-rows: auto 1fr auto; gap: 8px; border: 1px solid var(--soft-line); border-radius: 6px; padding: 9px; background: #f8f8f4; }
.schedule-day-heading { display: grid; gap: 2px; border-bottom: 1px solid var(--soft-line); padding-bottom: 7px; }
.schedule-day-heading strong { color: var(--forest); font-size: .84rem; }
.schedule-day-heading span, .schedule-day-empty { color: var(--muted); font-size: .7rem; }
.schedule-day-segments { display: grid; align-content: start; gap: 7px; }
.schedule-day-empty { padding: 8px 2px; line-height: 1.35; }
.schedule-segment { display: grid; width: 100%; min-width: 0; min-height: 86px; align-content: start; gap: 4px; border: 1px solid #76a795; border-inline-start: 5px solid var(--forest); border-radius: 5px; padding: 9px 8px; color: var(--ink); background: #edf7f2; text-align: start; }
.schedule-segment.selected-teachers { border-color: #d8bd79; border-inline-start-color: var(--gold); background: #fff8e8; }
.schedule-segment.closed { border-color: #d9a6a1; border-inline-start-color: var(--danger); background: var(--danger-soft); }
.schedule-segment:hover { border-color: currentColor; box-shadow: 0 4px 12px rgba(28,42,33,.08); }
.schedule-segment span { color: var(--forest); font-size: .74rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.schedule-segment strong { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.25; }
.schedule-segment small { overflow-wrap: anywhere; color: var(--muted); font-size: .67rem; line-height: 1.25; }
.schedule-day-add { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 5px; border: 1px dashed #b9b5aa; border-radius: 5px; padding: 7px; color: var(--forest); background: transparent; font-size: .72rem; font-weight: 800; }
.schedule-day-add svg { width: 16px; height: 16px; }
.temporary-schedule-list { display: grid; gap: 11px; }
.temporary-schedule-row { display: grid; width: 100%; grid-template-columns: 42px minmax(0,1fr) auto 20px; align-items: center; gap: 11px; border: 1px solid var(--line); border-inline-start: 5px solid var(--gold); border-radius: 6px; padding: 11px 12px; color: var(--ink); background: #fffaf0; text-align: start; }
.temporary-schedule-row.closed { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.temporary-schedule-row > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.temporary-schedule-row small { overflow-wrap: anywhere; color: var(--muted); font-size: .74rem; }
.temporary-schedule-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 6px; color: #fff; background: var(--forest); }
.temporary-schedule-icon svg { width: 21px; height: 21px; }
.temporary-schedule-time { color: var(--forest); font-size: .82rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.schedule-dialog-card { width: 100%; }
.schedule-type-tabs { width: 100%; }
.schedule-type-tabs button { flex: 1; }
.schedule-days-field, .schedule-teachers-field { display: grid; gap: 10px; min-width: 0; }
.schedule-days-field .weekday-picker { grid-template-columns: repeat(7,minmax(0,1fr)); }
.schedule-days-field .weekday-picker label { display: grid; min-width: 0; justify-items: center; gap: 5px; border-radius: 5px; padding: 8px 3px; }
.schedule-teacher-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.schedule-teacher-choices label { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--soft-line); border-radius: 5px; padding: 9px; }
.schedule-teacher-choices input { width: 19px; min-height: 19px; }
.schedule-teacher-choices span { overflow-wrap: anywhere; }
.check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 260px; overflow: auto; }
.check-list label { display: flex; align-items: center; gap: 8px; }
.check-list input { width: 18px; min-height: 18px; }

.access-panel { margin-bottom: 16px; }
.access-student-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 16px; }
.access-student-list > div { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--soft-line); padding: 7px 0; }
.access-student-list > div > span:first-child { color: var(--gold); font-weight: 800; }
.family-admin-card { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.family-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: #faf8f1; }
.family-card-header > div { display: grid; gap: 3px; }
.family-card-header span { color: var(--muted); font-size: 0.76rem; }
.balance { text-align: right; }
.balance.paid strong { color: var(--new); }
.balance.due strong { color: var(--review); }
.balance.not-set strong { color: var(--muted); }
.family-member-chips { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--soft-line); padding: 10px 16px; }
.family-member-chips > span { border-radius: 4px; padding: 6px 8px; color: var(--ink); background: var(--surface-alt); font-size: 0.76rem; }
.family-member-chips b { margin-inline-end: 4px; color: var(--gold); }
.family-ledger-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding: 14px 16px; }
.family-ledger-grid > * { min-width: 0; border-inline-start: 1px solid var(--soft-line); padding: 0 12px; }
.family-ledger-grid > :first-child { border-inline-start: 0; padding-inline-start: 0; }
.family-ledger-grid > :last-child { padding-inline-end: 0; }
.family-money-field, .family-ledger-stat { display: grid; align-content: start; gap: 5px; }
.family-money-field > span, .family-ledger-stat > span { color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.family-money-field small, .family-ledger-stat small { min-height: 2.2em; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.family-ledger-stat strong { padding-top: 7px; font-family: var(--font-display); font-size: 1.22rem; }
.family-ledger-stat.paid strong { color: var(--new); }
.family-ledger-stat.due strong { color: var(--review); }
.family-ledger-stat.not-set strong { color: var(--muted); }
.family-waiver-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 12px; border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; background: var(--surface-alt); cursor: pointer; }
.family-waiver-toggle input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forest); }
.family-waiver-toggle > span { display: grid; gap: 2px; }
.family-waiver-toggle small { color: var(--muted); font-size: 0.72rem; }
.family-payment-history { margin: 0 16px 12px; border-top: 1px solid var(--soft-line); padding-top: 9px; }
.family-payment-history summary { color: var(--forest); font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.family-payment-history > div { display: grid; gap: 5px; padding-top: 8px; }
.family-payment-history > div > div { display: grid; grid-template-columns: minmax(100px,0.5fr) auto minmax(120px,1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--soft-line); padding: 6px 0; }
.family-payment-history small, .family-payment-history > div > span { color: var(--muted); font-size: 0.72rem; }
#familyHistoryDialog { width: min(920px, calc(100vw - 28px)); }
.family-history-dialog-card { width: 100%; gap: 14px; }
.family-history-dialog-card .dialog-heading p { max-width: 620px; margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.family-history-search { position: relative; display: grid; gap: 6px; }
.family-history-search > label { display: grid; gap: 6px; }
.family-history-search > label > span { color: var(--ink); font-size: 0.78rem; font-weight: 850; }
.family-history-search .search-shell { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 6px; padding: 0 11px; background: #fff; }
.family-history-search .search-shell:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,124,37,.12); }
.family-history-search .search-shell svg { width: 19px; color: var(--forest); }
.family-history-search .search-shell input { min-height: 48px; border: 0; padding-inline: 0; background: transparent; }
.family-history-search .search-shell input:focus { outline: 0; }
.family-history-matches { display: grid; max-height: min(330px,42dvh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 12px 26px rgba(28,42,33,.12); }
.family-history-matches > button { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr) 20px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--soft-line); padding: 11px 12px; color: var(--ink); background: transparent; text-align: start; }
.family-history-matches > button:last-child { border-bottom: 0; }
.family-history-matches > button:hover, .family-history-matches > button:focus-visible { background: var(--gold-soft); }
.family-history-matches > button > svg:first-child { width: 38px; height: 38px; border-radius: 5px; padding: 9px; color: #fff; background: var(--forest); }
.family-history-matches > button > svg:last-child { width: 18px; color: var(--muted); }
html[dir="rtl"] .family-history-matches > button > svg:last-child { transform: scaleX(-1); }
.family-history-matches > button > span { display: grid; min-width: 0; gap: 3px; }
.family-history-matches strong, .family-history-matches small { overflow-wrap: anywhere; }
.family-history-matches small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.family-history-content { min-width: 0; }
.family-history-family-heading { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(260px,1fr); gap: 14px 24px; border-bottom: 1px solid var(--line); padding: 7px 0 14px; }
.family-history-family-heading > div:first-child { display: grid; align-content: start; gap: 2px; }
.family-history-family-heading > div:first-child > span, .family-history-linked-students > span { color: var(--muted); font-size: .72rem; font-weight: 850; }
.family-history-family-heading h4 { margin: 0; color: var(--forest); font-family: var(--font-display); font-size: 1.35rem; }
.family-history-family-heading > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.family-history-linked-students { display: grid; align-content: start; gap: 6px; }
.family-history-linked-students > div { display: flex; flex-wrap: wrap; gap: 5px; }
.family-history-linked-students > div > span { border-radius: 4px; padding: 5px 7px; color: var(--ink); background: var(--surface-alt); font-size: .72rem; }
.family-history-linked-students b { margin-inline-end: 3px; color: var(--gold); }
.family-history-totals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); background: #faf8f1; }
.family-history-totals > div { display: grid; gap: 3px; border-inline-start: 1px solid var(--line); padding: 12px; }
.family-history-totals > div:first-child { border-inline-start: 0; }
.family-history-totals span { color: var(--muted); font-size: .7rem; font-weight: 800; }
.family-history-totals strong { color: var(--forest); font-family: var(--font-display); font-size: 1.12rem; }
.family-history-totals .due strong { color: var(--review); }
.family-history-months { display: grid; }
.family-history-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0 5px; }
.family-history-section-title h4 { margin: 0; color: var(--ink); }
.family-history-section-title > span { color: var(--muted); font-size: .72rem; }
.family-history-month-row { display: grid; grid-template-columns: minmax(150px,.48fr) minmax(320px,1fr); gap: 10px 18px; border-top: 1px solid var(--line); padding: 14px 0; }
.family-history-month-heading { display: grid; align-content: start; justify-items: start; gap: 7px; }
.family-history-month-heading > strong { color: var(--forest); font-family: var(--font-display); font-size: 1rem; }
.family-history-month-heading .status-chip.paid { color: var(--new); background: var(--new-soft); }
.family-history-month-heading .status-chip.due { color: var(--review); background: var(--review-soft); }
.family-history-month-heading .status-chip.not-set { color: var(--muted); background: var(--surface-alt); }
.family-history-month-figures { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; }
.family-history-month-figures > div { display: grid; gap: 3px; border-inline-start: 1px solid var(--soft-line); padding-inline: 10px; }
.family-history-month-figures > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.family-history-month-figures dt { color: var(--muted); font-size: .68rem; font-weight: 800; }
.family-history-month-figures dd { margin: 0; color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums; }
.family-history-month-figures .due dd { color: var(--review); }
.family-history-payment-list { display: grid; grid-column: 2; gap: 5px; }
.family-history-payment-list > span:first-child { color: var(--muted); font-size: .68rem; font-weight: 850; }
.family-history-no-payments { color: var(--muted); font-size: .7rem; }
.family-history-payment-entry { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px dashed var(--soft-line); padding-top: 7px; }
.family-history-payment-entry > svg { width: 18px; color: var(--gold); }
.family-history-payment-entry > div { display: grid; min-width: 0; gap: 2px; }
.family-history-payment-entry span, .family-history-payment-entry small { overflow-wrap: anywhere; color: var(--muted); font-size: .7rem; }
.family-history-payment-entry strong { color: var(--new); font-variant-numeric: tabular-nums; }

#monthlyPaymentReportDialog { width: min(980px, calc(100vw - 28px)); }
.monthly-payment-report-dialog-card { width: 100%; gap: 14px; }
.monthly-payment-report-dialog-card .dialog-heading p { max-width: 650px; margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.monthly-payment-report-controls { display: grid; grid-template-columns: minmax(190px,.6fr) minmax(220px,1fr); gap: 12px; border-block: 1px solid var(--line); padding-block: 12px; }
.monthly-payment-report-controls label { display: grid; gap: 6px; }
.monthly-payment-report-controls label > span { color: var(--ink); font-size: .75rem; font-weight: 850; }
.monthly-payment-report-content { display: grid; min-width: 0; gap: 12px; }
.monthly-payment-report-hero { display: flex; align-items: end; justify-content: space-between; gap: 18px; border-inline-start: 7px solid var(--gold); padding: 11px 14px; background: #faf8f1; }
.monthly-payment-report-hero > div { display: grid; min-width: 0; gap: 2px; }
.monthly-payment-report-hero > div > span { color: var(--gold); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.monthly-payment-report-hero h4 { margin: 0; color: var(--forest); font-family: var(--font-display); font-size: 1.35rem; }
.monthly-payment-report-hero p { margin: 2px 0 0; color: var(--ink); font-size: .8rem; line-height: 1.4; }
.monthly-payment-report-hero > small { flex: 0 0 auto; color: var(--muted); font-size: .68rem; }
.monthly-payment-report-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); background: #fff; }
.monthly-payment-report-metrics article { display: grid; min-width: 0; gap: 4px; border-inline-start: 1px solid var(--line); padding: 11px 12px; }
.monthly-payment-report-metrics article:first-child { border-inline-start: 0; }
.monthly-payment-report-metrics span { color: var(--muted); font-size: .7rem; font-weight: 850; }
.monthly-payment-report-metrics strong { overflow-wrap: anywhere; color: var(--forest); font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.monthly-payment-report-metrics .due strong { color: var(--review); }
.monthly-payment-report-list { display: grid; border-top: 2px solid var(--forest); }
.monthly-payment-report-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; }
.monthly-payment-report-list-heading strong { color: var(--ink); }
.monthly-payment-report-list-heading span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.monthly-payment-report-row { display: grid; grid-template-columns: minmax(230px,.85fr) minmax(430px,1.35fr); gap: 14px 20px; border-top: 1px solid var(--line); padding: 13px 4px; break-inside: avoid; }
.monthly-payment-family { display: grid; align-content: start; min-width: 0; gap: 4px; }
.monthly-payment-family > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.monthly-payment-family strong { min-width: 0; overflow-wrap: anywhere; color: var(--forest); font-size: .9rem; }
.monthly-payment-family small { overflow-wrap: anywhere; color: var(--muted); font-size: .69rem; line-height: 1.35; }
.monthly-payment-report-row .status-chip { font-size: .62rem; }
.monthly-payment-report-row .status-chip.paid { color: var(--new); background: var(--new-soft); }
.monthly-payment-report-row .status-chip.paid-aid { color: #0d5970; background: #e1f2f6; }
.monthly-payment-report-row .status-chip.partial { color: #765111; background: #fff1c9; }
.monthly-payment-report-row .status-chip.unpaid { color: var(--review); background: var(--review-soft); }
.monthly-payment-report-row .status-chip.waived { color: #365d80; background: #e7f0f7; }
.monthly-payment-report-row .status-chip.not-set { color: var(--muted); background: var(--surface-alt); }
.monthly-payment-figures { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; margin: 0; }
.monthly-payment-figures > div { display: grid; min-width: 0; gap: 3px; border-inline-start: 1px solid var(--soft-line); padding-inline: 10px; }
.monthly-payment-figures > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.monthly-payment-figures > div:last-child { padding-inline-end: 0; }
.monthly-payment-figures dt { color: var(--muted); font-size: .66rem; font-weight: 850; }
.monthly-payment-figures dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.monthly-payment-figures dd.paid { color: var(--new); }
.monthly-payment-figures dd.due { color: var(--review); }
.monthly-payment-report-actions { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); z-index: 2; margin: 0 -22px -22px; border-top: 1px solid var(--line); padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.family-children { padding: 4px 16px; }
.family-children > div { display: grid; grid-template-columns: 58px minmax(150px,1fr) minmax(130px,0.45fr) minmax(130px,0.45fr) 38px; align-items: end; gap: 8px; border-bottom: 1px solid var(--soft-line); padding: 10px 0; }
.family-children > div > span { color: var(--gold); font-weight: 800; }
.family-children label { font-size: 0.75rem; }
.family-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--soft-line); padding: 12px 16px; }

.student-ready-button { margin-bottom: 16px; }
.student-connection { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; border: 2px solid var(--gold); padding: 15px; background: var(--gold-soft); }
.student-connection > div { display: grid; gap: 3px; }
.student-connection span, .student-connection small { color: var(--muted); }
.family-children-section, .class-board, .school-success, .family-messages { margin-bottom: 16px; }
.family-child-grid { display: grid; gap: 12px; }
.family-child-card { min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--soft-line); padding: 14px; background: #faf9f4; }
.family-child-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.family-child-heading > div { display: grid; gap: 2px; }
.family-child-heading span { color: var(--gold); font-size: 0.76rem; font-weight: 800; }
.family-child-heading > strong { color: var(--forest); font-size: 1.2rem; }
.family-child-card > small { display: block; margin: 6px 0 12px; color: var(--muted); }
.family-child-card .memorization-progress { margin: 12px 0 16px; }
.family-grade-history, .family-recent-records { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.family-recitation-list { display: grid; gap: 9px; }
.family-recitation-list > article { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 10px; border: 1px solid var(--soft-line); padding: 10px; background: var(--surface); }
.family-recitation-list > article > time { color: var(--muted); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.family-recitation-list > article > div { display: grid; gap: 9px; }
.family-recitation-subject { min-width: 0; border-inline-start: 4px solid currentColor; padding-inline-start: 9px; }
.family-recitation-subject.new { color: var(--new); }
.family-recitation-subject.review { color: var(--review); }
.family-recitation-subject-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.family-recitation-subject-heading span { font-size: .73rem; font-weight: 900; }
.family-recitation-subject-heading strong { color: var(--ink); font-size: .82rem; }
.family-recitation-subject > small { color: var(--muted); font-size: .68rem; }
.family-recitation-subject .history-assignment-details { min-width: 0; color: var(--ink); }
.family-current-homework { margin: 0 0 14px; border-block: 1px solid var(--line); padding: 12px 0; }
.family-current-homework > strong { display: block; margin-bottom: 9px; color: var(--ink); font-size: 0.82rem; }
.family-current-homework > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.family-current-homework > div > div { display: grid; min-width: 0; gap: 4px; padding: 2px 12px; border-inline-start: 4px solid currentColor; }
.family-current-homework > div > div + div { margin-inline-start: 10px; }
.family-current-homework .hw1 { color: var(--new); }
.family-current-homework .hw2 { color: var(--review); }
.family-current-homework span { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.family-current-homework b { overflow-wrap: anywhere; color: var(--ink); font-size: 0.86rem; line-height: 1.45; }
.history-assignment-details { display: grid; min-width: 190px; gap: 7px; margin-top: 7px; }
.history-assignment-details > div { display: grid; gap: 2px; }
.history-assignment-details b { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.history-assignment-details span { overflow-wrap: anywhere; line-height: 1.4; }
.history-assignment-details .assigned-next { border-inline-start: 3px solid var(--gold); padding-inline-start: 7px; }
.history-assignment-details .assigned-next b { color: #785616; }
.history-assignment-details small { display: block; border-top: 1px solid var(--soft-line); padding-top: 6px; color: var(--muted); }
.family-board-table tr.absent { color: #716d65; background: #f3f1eb; }
.message-form { display: grid; grid-template-columns: minmax(150px,0.25fr) minmax(180px,0.3fr) minmax(240px,1fr) auto; align-items: end; gap: 8px; }
.message-body-field { min-width: 0; }
.message-list { display: grid; gap: 7px; margin-top: 12px; }
.message-list article { border-left: 3px solid var(--gold); padding: 9px 11px; background: #faf8f1; }
.message-list article.teacher, .message-list article.admin { border-left-color: var(--forest-2); background: var(--new-soft); }
.message-list p { margin: 4px 0; color: var(--ink); }
.message-list span { color: var(--muted); font-size: 0.72rem; }
.message-thread-list { display: grid; gap: 14px; }
.message-thread { border: 1px solid var(--line); padding: 15px; background: var(--surface); }
.message-reply-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-top: 12px; }

.school-bars { display: flex; min-height: 310px; align-items: stretch; gap: 4px; overflow-x: auto; padding: 16px 4px 2px; }
.school-bar-item { display: grid; min-width: 35px; flex: 1 0 35px; grid-template-rows: 260px auto; gap: 7px; text-align: center; }
.school-bar-track { position: relative; display: flex; min-width: 0; align-items: end; background: #ece9df; }
.school-bar-track > span { width: 100%; background: var(--forest-2); }
.school-bar-track > strong { position: absolute; inset: 4px 0 auto; font-size: 0.62rem; }
.school-bar-item label { overflow: hidden; color: var(--muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }

.step-away-reminder, .ended-session-recovery { display: grid; grid-column: 1 / -1; grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 9px; width: 100%; border: 1px solid rgba(169,124,37,0.35); padding: 10px 12px; color: #604a1a; background: #fff8e8; }
.step-away-reminder svg, .ended-session-recovery svg { width: 22px; }
.ended-session-recovery > div { display: grid; gap: 2px; }
.ended-session-recovery span { color: var(--muted); }

.support-log-list { display: grid; gap: 8px; }
.support-log-row { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; border: 1px solid var(--soft-line); padding: 12px; background: #fff; }
.support-log-row.attention { border-left: 4px solid var(--danger); background: #fff8f7; }
.support-log-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--forest); background: var(--mint); }
.support-log-icon svg { width: 20px; }
.support-log-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.support-log-heading span, .support-log-row small { color: var(--muted); }
.support-log-row p { margin: 6px 0 0; }
.ticket-summary { display: grid; grid-template-columns: repeat(2,minmax(0,180px)); gap: 10px; margin-bottom: 18px; }
.ticket-summary > div { display: grid; gap: 2px; border-bottom: 3px solid var(--gold); padding: 11px 12px; background: #fff; }
.ticket-summary span { color: var(--muted); font-size: 0.78rem; }
.ticket-summary strong { color: var(--forest); font-size: 1.6rem; }
.support-ticket-section { margin-bottom: 18px; }
.support-ticket-list { display: grid; gap: 8px; }
.support-ticket { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--soft-line); border-left: 4px solid var(--danger); padding: 13px; background: #fff; }
.support-ticket.closed { border-left-color: var(--new); background: #f8fbf9; }
.support-ticket p { margin: 6px 0; }
.support-ticket small { color: var(--muted); }
.support-diagnostics { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.support-diagnostics > summary { cursor: pointer; color: var(--forest); font-weight: 800; }
.support-diagnostics[open] > summary { margin-bottom: 12px; }

.device-page { min-width: 320px; min-height: 100vh; color: var(--ink); background: #f4f6f1; }
.device-topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(169,124,37,0.42); padding: 10px clamp(16px,4vw,48px); background: #fffdf8; }
.device-topbar-actions { display: flex; align-items: center; gap: 10px; }
.device-brand { display: flex; min-width: 0; align-items: center; gap: 10px; }
.device-brand img { width: 48px; height: 48px; object-fit: contain; }
.device-brand div { display: grid; min-width: 0; }
.device-brand strong { color: var(--forest); font-family: Georgia,serif; font-size: 1.15rem; }
.device-brand span { overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.device-main { width: min(760px,100%); margin: 0 auto; padding: clamp(24px,5vw,54px) 16px; }
.device-login-section, .device-station, .device-teacher-chooser { display: grid; gap: 20px; border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: clamp(18px,4vw,32px); background: #fffdf8; box-shadow: 0 14px 38px rgba(28,42,33,0.08); }
.device-page-heading, .device-station-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.device-page-heading h1, .device-station-heading h1 { margin: 2px 0 4px; color: var(--forest); font-size: clamp(1.55rem,4vw,2rem); }
.device-page-heading p, .device-station-heading p { margin: 0; color: var(--muted); }
.device-login-form { display: grid; gap: 14px; }
.device-login-form label { display: grid; gap: 6px; font-weight: 750; }
.compact-device-guide { margin: 0; }
.device-control-surface { display: grid; gap: 16px; border-block: 1px solid var(--line); padding-block: 20px; }
.device-control-surface select { min-height: 52px; font-size: 1rem; }
.teacher-choice-surface { gap: 18px; }
.device-choice-title { display: flex; align-items: center; gap: 10px; color: var(--forest); }
.device-choice-title h2 { margin: 0; font-size: 1.15rem; }
.device-choice-title svg { color: var(--gold); }
.device-teacher-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.device-teacher-button { display: grid; grid-template-columns: 44px minmax(0,1fr) 24px; min-height: 78px; align-items: center; gap: 12px; border: 1px solid #b9c9c0; border-radius: 6px; padding: 12px 14px; color: var(--forest); background: #fff; text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.device-teacher-button:hover, .device-teacher-button:focus-visible { border-color: var(--gold); background: #f4faf7; box-shadow: 0 0 0 3px rgba(169,124,37,0.14); outline: 0; }
.device-teacher-button:disabled { cursor: wait; opacity: 0.58; }
.device-teacher-button strong { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; letter-spacing: 0; }
.device-teacher-button > svg { color: var(--gold); }
.device-teacher-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: var(--forest); }
.device-teacher-avatar svg { width: 22px; height: 22px; }
.device-join-button { display: flex; min-height: 58px; justify-content: center; font-size: 1.08rem; }
.device-join-button[hidden] { display: none; }
.device-station-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.device-page dialog { max-width: min(92vw,520px); }

html[dir="rtl"] .device-access-panel, html[dir="rtl"] .support-ticket { border-left-width: 1px; border-right: 5px solid var(--gold); }
html[dir="rtl"] .device-teacher-button { text-align: right; }
html[dir="rtl"] .support-ticket { border-right-color: var(--danger); }
html[dir="rtl"] .support-ticket.closed { border-right-color: var(--new); }
.support-category { display: inline-block; margin-top: 6px; border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; color: var(--forest); background: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.report-problem-button { margin-top: 7px; color: var(--forest); background: var(--mint); }

.capability-fieldset { display: grid; gap: 8px; border: 1px solid var(--line); padding: 12px; }
.capability-fieldset legend { padding: 0 6px; color: var(--forest); font-size: 0.8rem; font-weight: 800; }

.mushaf-verse tajweed.ham_wasl, .mushaf-verse .ham_wasl { color: #8b8b8b; }
.mushaf-verse tajweed.laam_shamsiyah, .mushaf-verse .laam_shamsiyah { color: #9b59b6; }
.mushaf-verse tajweed.madda_normal, .mushaf-verse .madda_normal { color: #2a7ab9; }
.mushaf-verse tajweed.madda_permissible, .mushaf-verse .madda_permissible { color: #e67e22; }
.mushaf-verse tajweed.madda_obligatory, .mushaf-verse .madda_obligatory { color: #d63031; }
.mushaf-verse tajweed.ghunnah, .mushaf-verse .ghunnah { color: #00a88f; }
.mushaf-verse tajweed.ikhafa, .mushaf-verse .ikhafa { color: #8e44ad; }
.mushaf-verse tajweed.idgham_with_ghunnah, .mushaf-verse .idgham_with_ghunnah { color: #159957; }
.mushaf-verse tajweed.qalqalah, .mushaf-verse .qalqalah { color: #1565c0; }
.mushaf-word .ham_wasl { color: #8b8b8b; }
.mushaf-word .laam_shamsiyah { color: #9b59b6; }
.mushaf-word .madda_normal { color: #2a7ab9; }
.mushaf-word .madda_permissible { color: #e67e22; }
.mushaf-word .madda_obligatory { color: #d63031; }
.mushaf-word .ghunnah { color: #00a88f; }
.mushaf-word .ikhafa { color: #8e44ad; }
.mushaf-word .idgham_with_ghunnah { color: #159957; }
.mushaf-word .qalqalah { color: #1565c0; }

html[dir="rtl"] .sidebar { inset: 0 0 0 auto; }
html[dir="rtl"] .workspace { margin-left: 0; margin-right: var(--sidebar-width); }
html[dir="rtl"] .sidebar-action, html[dir="rtl"] .nav-item, html[dir="rtl"] .family-board-table, html[dir="rtl"] .history-table { text-align: right; }
html[dir="rtl"] .session-state, html[dir="rtl"] .device-state, html[dir="rtl"] .message-list article { border-left: 0; border-right: 4px solid var(--gold); }
html[dir="rtl"] .readiness-notice { border-left: 1px solid var(--line); border-right: 4px solid var(--gold); }
html[dir="rtl"] .readiness-notice.confirmed { border-right-color: #18705a; }
html[dir="rtl"] .break-request { border-left: 1px solid #e2c985; border-right: 4px solid var(--gold); }
html[dir="rtl"] .timeline-key span::before { margin-right: 0; margin-left: 5px; }
html[dir="rtl"] .money-input > span { left: auto; right: 11px; }
html[dir="rtl"] .money-input input { padding-left: 11px; padding-right: 25px; }
html[dir="rtl"] .student-row { text-align: right; }
html[dir="rtl"] .student-row.selected { box-shadow: inset -3px 0 var(--gold); }
html[lang="ar"] body { font-family: Tahoma, "Segoe UI", Arial, sans-serif; line-height: 1.55; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: Tahoma, "Segoe UI", Arial, sans-serif; line-height: 1.4; }
html[lang="ar"] .eyebrow, html[lang="ar"] .auth-brand p { text-transform: none; }
html[dir="rtl"] [data-lucide="arrow-left"],
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] [data-lucide="chevron-left"],
html[dir="rtl"] [data-lucide="chevron-right"] { transform: scaleX(-1); }

@media (max-width: 1280px) {
  :root { --sidebar-width: 218px; }
  .global-search { display: none; }
  .homework-grid { grid-template-columns: 1fr; }
  .profile-metrics { grid-template-columns: repeat(3,1fr); }
  .time-clock-layout { grid-template-columns: 1fr; }
  .payroll-open-controls { grid-template-columns: minmax(190px,1fr) auto auto auto; }
  .student-list-header, .student-row { grid-template-columns: minmax(190px,1.5fr) 78px 96px 20px; }
  .student-list-header > :nth-child(4), .student-list-header > :nth-child(5), .student-row > :nth-child(4), .student-row > :nth-child(5) { display: none; }
}

@media (max-width: 880px) {
  html, body { overflow-x: hidden; }
  .workspace, .view, .view > *, .profile-layout, .profile-layout > *, .profile-section, .profile-section-body, .family-details-panel, .family-child-grid, .family-child-card { min-width: 0; max-width: 100%; }
  .sidebar { transform: translateX(-100%); box-shadow: 10px 0 30px rgba(0,0,0,0.2); transition: transform 180ms ease; }
  .sidebar.open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .menu-button { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .page-heading { min-width: 0; }
  .global-search { display: none; }
  .view { padding: 22px 16px 96px; }
  .metric-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .roster-row { grid-template-columns: minmax(180px,1.2fr) repeat(2,minmax(120px,0.8fr)) 110px; }
  .profile-layout, .report-builder { grid-template-columns: 1fr; }
  .progress-grid { grid-template-columns: 1fr; }
  .chart-section.wide { grid-column: auto; }
  .mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 68px;
    border-top: 1px solid rgba(169,124,37,0.38);
    padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(255,253,248,0.98);
    box-shadow: 0 -8px 24px rgba(28,42,33,0.1);
  }
  .mobile-nav button { display: grid; place-items: center; gap: 2px; min-width: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 0.68rem; font-weight: 700; }
  .mobile-nav button.active { color: var(--forest); background: var(--mint); }
  .mobile-nav .mobile-admin-menu { color: #fff; background: var(--gold); }
  .mobile-nav svg { width: 21px; height: 21px; }
  .toast { bottom: 82px; }
  .device-grid { grid-template-columns: 1fr; }
  .device-setup-guide { grid-template-columns: 1fr; gap: 8px; }
  .device-setup-guide > svg { display: none; }
  .student-directory-layout { display: block; }
  .student-preview { inset-block: calc(68px + env(safe-area-inset-top)) calc(69px + env(safe-area-inset-bottom)); right: 0; left: auto; width: min(390px,100%); border-radius: 0; border-right: 0; background: #fffdf8; box-shadow: -16px 0 40px rgba(20,39,32,0.22); }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  html[dir="rtl"] .workspace { margin-right: 0; }
  html[dir="rtl"] .student-preview { right: auto; left: 0; border-right: 1px solid #c7b47e; border-left: 0; box-shadow: 16px 0 40px rgba(20,39,32,0.22); }
}

@media (max-width: 640px) {
  .auth-screen { align-items: start; padding-top: 18px; }
  .auth-panel { padding: 20px 18px; }
  .auth-mark { width: 58px; height: 58px; }
  .topbar-actions .button span { display: none; }
  .topbar-actions .admin-access-button span { display: inline; }
  #ownerPreviewButton, #addStudentButton { display: none !important; }
  .admin-access-button { min-width: 76px; padding-inline: 10px; }
  .page-heading > span { display: none; }
  .page-title-row { flex-wrap: wrap; gap: 3px 7px; }
  .page-heading h2 { font-size: 1.05rem; }
  .role-badge { font-size: 0.58rem !important; }
  .role-admin .menu-button { display: none; }
  .device-link-controls { grid-template-columns: 1fr; }
  .device-link-controls .button { width: 100%; }
  .device-pin-reveal { align-items: flex-start; flex-direction: column; }
  .support-ticket { align-items: start; grid-template-columns: 38px minmax(0,1fr); }
  .support-ticket > .button { width: 100%; grid-column: 1 / -1; }
  .device-topbar { align-items: flex-start; flex-direction: column; }
  .device-topbar-actions, .device-topbar .language-toggle { width: 100%; }
  .device-topbar-actions { align-items: stretch; flex-direction: column-reverse; }
  .app-version-device { width: max-content; }
  .device-main { width: 100%; min-width: 0; padding-inline: 12px; }
  .device-login-section, .device-station, .device-teacher-chooser { width: 100%; min-width: 0; padding: 20px; }
  .device-page-heading { align-items: flex-start; flex-direction: column; }
  .device-page-heading > div, .device-login-form, .device-login-form label { width: 100%; min-width: 0; }
  .device-page-heading h1, .device-page-heading p { max-width: 100%; overflow-wrap: anywhere; }
  .device-login-form select { min-width: 0; }
  .device-login-form .large-action { width: 100%; min-width: 0; height: auto; padding: 12px; line-height: 1.25; white-space: normal; }
  .device-login-form .large-action span { min-width: 0; overflow-wrap: anywhere; }
  .device-station-heading { align-items: stretch; flex-direction: column; }
  .device-station-heading .button { width: 100%; }
  .device-teacher-buttons { grid-template-columns: 1fr; }
  .view-intro, .today-intro, .class-toolbar, .grading-header, .profile-toolbar { align-items: stretch; flex-direction: column; }
  .profile-section-heading { align-items: flex-start; flex-direction: column; }
  .profile-chart-toolbar { align-items: stretch; }
  .profile-chart-controls { display: grid; width: 100%; grid-template-columns: 1fr; }
  .profile-chart-controls label, .profile-chart-controls select { width: 100%; min-width: 0; }
  .memorization-overview { grid-template-columns: 1fr; }
  .memorization-total { grid-template-columns: auto minmax(0,1fr); align-items: baseline; justify-items: start; text-align: start; }
  .memorization-total strong { font-size: 1.7rem; }
  .completion-forecast-summary { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
  .completion-forecast-metrics { border-block-start: 1px solid #d7ded9; border-inline-start: 0; padding-top: 9px; }
  .completion-forecast-metrics span:first-child { padding-inline-start: 0; }
  .completion-forecast-metrics span:last-child { padding-inline-end: 0; }
  .quran-coverage-card, .memorization-growth, .juz-summary { padding: 10px; }
  .memorization-growth-bars { gap: 4px; }
  .memorization-growth-track span { width: min(24px,76%); }
  .grade-history-day { grid-template-columns: 1fr; gap: 6px; }
  .grade-history-day time { padding-top: 0; }
  .grade-score-row { grid-template-columns: 74px minmax(0,1fr) 30px; gap: 6px; }
  .grade-scale { padding-inline-start: 80px; }
  .family-child-card { padding: 12px; }
  .family-recitation-list > article { grid-template-columns: 1fr; gap: 6px; }
  .date-control, .select-control, .small-search input { width: 100%; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 8px; }
  .roster-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 13px 8px; }
  .person-cell { grid-column: 1 / -1; }
  .roster-row .button { width: 100%; justify-self: stretch; }
  .grading-workspace { display: block; }
  .grading-form { margin-bottom: 16px; }
  .form-grid.two, .report-columns { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .assignment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .current-assignment { align-items: stretch; flex-direction: column; }
  .quran-button { width: 100%; }
  .page-line-grid { grid-template-columns: repeat(2,1fr); }
  .page-line-grid .open-page-button { width: 100%; grid-column: 1 / -1; }
  .grading-actions { position: sticky; bottom: 72px; z-index: 12; flex-direction: column-reverse; margin: 12px -8px -8px; border-top: 1px solid var(--line); padding: 10px 8px 8px; background: rgba(255,253,248,0.97); box-shadow: 0 -10px 24px rgba(28,42,33,0.08); }
  .grading-actions .button { width: 100%; }
  .mushaf-toolbar { align-items: stretch; flex-direction: column; }
  .page-stepper { justify-content: center; }
  .mushaf-page { min-height: 500px; padding: 18px 12px; font-size: 1.05rem; }
  .mushaf-lines { min-width: 610px; grid-template-rows: repeat(15, minmax(30px, auto)); }
  .mushaf-line { min-height: 30px; }
  .profile-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .profile-delete-button { grid-column: 1 / -1; }
  .profile-hero { align-items: flex-start; }
  .profile-metrics { grid-template-columns: repeat(2,1fr); }
  .student-list-header, .student-row { grid-template-columns: minmax(0,1fr) 70px 82px 18px; gap: 6px; }
  .student-list-header, .student-row { padding-inline: 8px; }
  .student-row-person .avatar { width: 36px; height: 36px; }
  .student-preview-actions { grid-template-columns: 1fr; }
  .page-map { grid-template-columns: repeat(12,1fr); }
  .report-preview { padding: 22px 18px; }
  .report-letterhead, .report-facts { grid-template-columns: repeat(2,1fr); }
  .report-letterhead { display: block; }
  .report-letterhead > div:last-child { margin-top: 8px; }
  .account-row { grid-template-columns: 38px minmax(0,1fr); }
  .account-row .status-chip { grid-column: 2; justify-self: start; }
  .identity-chip { align-self: stretch; text-align: center; }
  .time-entry-row { grid-template-columns: minmax(0,1fr) auto; }
  .time-entry-row .status-chip { grid-column: 2; }
  .kiosk-actions { flex-wrap: wrap; }
  .payroll-card-header { grid-template-columns: auto minmax(0,1fr); }
  .payroll-card-header .payroll-status { grid-column: 2; justify-self: start; }
  .payroll-summary { grid-template-columns: 1fr; }
  .payroll-summary div { border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .payroll-summary div:last-child { border-bottom: 0; }
  .payroll-month-navigation { grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; }
  .payroll-month-picker { grid-column: 1 / -1; min-width: 0; }
  .payroll-month-banner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .payroll-month-banner p { max-width: none; text-align: start; }
  .payroll-open-controls, .payroll-payment-form { grid-template-columns: 1fr; }
  .payroll-open-controls .button, .payroll-final-actions .button, .payroll-payment-actions .button { width: 100%; }
  .payroll-final-actions, .payroll-payment-actions { display: grid; grid-template-columns: 1fr; }
  .payroll-final-actions > :first-child { margin-inline-end: 0; }
  .payroll-payment-form > div:first-child, .payroll-payment-actions { grid-column: 1; }
  .payroll-time-row { grid-template-columns: minmax(0,1fr) auto 38px; }
  .language-toggle.compact { width: auto; }
  .ready-form, .ready-form[data-special-request="true"], .message-form, .message-reply-form { grid-template-columns: 1fr; }
  .assigned-school-meet { align-items: stretch; flex-direction: column; }
  .assigned-school-meet > .button { width: 100%; }
  .session-live-metrics { grid-template-columns: 1fr; }
  .session-live-metrics div { border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .session-live-metrics div:last-child { border-bottom: 0; }
  .session-actions .button, .join-meet { width: 100%; }
  .queue-row { grid-template-columns: 58px minmax(0,1fr) auto; }
  .queue-row select { grid-column: 1 / -1; }
  .queue-row .button { grid-column: 1 / 3; }
  .schedule-row { grid-template-columns: 42px minmax(0,1fr); }
  .schedule-row > div:last-child { grid-column: 2; }
  .weekday-picker, .check-list, .access-student-list { grid-template-columns: 1fr; }
  .family-card-header { align-items: flex-start; flex-direction: column; }
  .balance { text-align: left; }
  html[dir="rtl"] .balance { text-align: right; }
  .family-page-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .family-page-actions .select-control, .family-page-actions .button { width: 100%; }
  .family-page-actions #openFamilyHistoryButton, .family-page-actions #addFamilyButton { display: none; }
  .family-report-button { min-height: 52px; font-size: .9rem; }
  .family-overview-metrics { grid-template-columns: 1fr 1fr; }
  .family-overview-metrics article:nth-child(odd) { border-inline-start: 0; }
  .family-overview-metrics article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .family-payment-overview-main { grid-template-columns: minmax(0,1fr) auto 78px 78px 18px; }
  .family-section-phone-action { display: inline-flex; }
  .family-management-heading { align-items: stretch; flex-direction: column; }
  .family-management-heading > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .family-management-heading .button { width: 100%; }
  .family-account-setup-heading, .family-overview-heading { border-inline-start-width: 6px; }
  .family-ledger-grid { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .family-ledger-grid > * { border-inline-start: 1px solid var(--soft-line); padding: 0 10px; }
  .family-ledger-grid > :nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .family-ledger-grid > :nth-child(even) { padding-inline-end: 0; }
  .family-payment-history > div > div { grid-template-columns: minmax(0,1fr) auto; }
  .family-payment-history small { grid-column: 1 / -1; }
  #familyHistoryDialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .family-history-dialog-card { max-height: calc(100dvh - 16px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .family-history-family-heading { grid-template-columns: 1fr; }
  .family-history-family-heading > p { grid-column: 1; }
  .family-history-totals { grid-template-columns: 1fr 1fr; }
  .family-history-totals > div:nth-child(odd) { border-inline-start: 0; }
  .family-history-totals > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .family-history-month-row { grid-template-columns: 1fr; gap: 10px; }
  .family-history-month-heading { display: flex; align-items: center; justify-content: space-between; }
  .family-history-payment-list { grid-column: 1; }
  .monthly-payment-report-dialog-card { max-height: calc(100dvh - 16px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .monthly-payment-report-controls { grid-template-columns: 1fr 1fr; }
  .monthly-payment-report-hero { align-items: start; flex-direction: column; gap: 5px; }
  .monthly-payment-report-metrics { grid-template-columns: 1fr 1fr; }
  .monthly-payment-report-metrics article:nth-child(odd) { border-inline-start: 0; }
  .monthly-payment-report-metrics article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .monthly-payment-report-row { grid-template-columns: 1fr; gap: 10px; }
  .monthly-payment-report-actions { bottom: calc(-14px - env(safe-area-inset-bottom)); margin: 0 -14px -14px; padding-inline: 14px; }
  .family-children > div { grid-template-columns: 54px minmax(0,1fr) 38px; }
  .family-children label { grid-column: 1 / -1; }
  .family-card-actions .button { width: 100%; }
  .student-connection { align-items: stretch; flex-direction: column; }
  .school-bars { min-height: 260px; }
  .school-bar-item { grid-template-rows: 210px auto; }
  .timeline-events { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .family-admin-tabs button { min-height: 68px; flex-direction: column; gap: 5px; padding: 8px 4px; font-size: .67rem; line-height: 1.15; }
  .family-admin-tabs button svg { width: 20px; height: 20px; }
  .family-tab-count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; font-size: .58rem; }
  .family-overview-heading { align-items: start; flex-direction: column; gap: 5px; padding: 11px 12px; }
  .family-overview-heading h4 { font-size: 1.08rem; }
  .family-overview-toolbar { align-items: stretch; flex-direction: column; }
  .family-overview-toolbar label, .family-overview-toolbar .button { width: 100%; }
  .family-payment-overview-row { grid-template-columns: minmax(0,1fr) 46px; }
  .family-payment-overview-main { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 7px 10px; padding: 10px 6px 10px 2px; }
  .family-payment-overview-main > svg { display: none; }
  .family-payment-overview-name { grid-column: 1; grid-row: 1; }
  .family-payment-overview-row .status-chip { grid-column: 2; grid-row: 1; max-width: 112px; justify-self: end; text-align: center; white-space: normal; }
  .family-payment-overview-amount { grid-row: 2; text-align: start; }
  .family-payment-overview-amount:nth-of-type(3) { grid-column: 1; }
  .family-payment-overview-amount:nth-of-type(4) { grid-column: 2; text-align: end; }
  .family-payment-overview-name strong { white-space: normal; }
  .family-card-summary { grid-template-columns: minmax(0,1fr) auto 20px; gap: 8px; padding: 12px; }
  .family-card-summary > span:first-child strong { white-space: normal; }
  .family-student-access-result { align-items: stretch; flex-direction: column; }
  .family-student-access-result .button { width: 100%; }
  .family-access-directory-link { width: 100%; }
  .family-ledger-grid { grid-template-columns: 1fr; gap: 0; }
  .family-ledger-grid > * { border-inline-start: 0; border-top: 1px solid var(--soft-line); padding: 12px 0; }
  .family-ledger-grid > :first-child { border-top: 0; padding-top: 0; }
  .family-ledger-grid > :last-child { padding-bottom: 0; }
  .family-card-actions .button { min-height: 48px; }
  .family-history-month-figures { grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .family-history-month-figures > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .family-history-month-figures > div:nth-child(n+3) { border-top: 1px solid var(--soft-line); padding-top: 8px; }
  .family-history-payment-entry { grid-template-columns: 22px minmax(0,1fr) auto; }
  .monthly-payment-report-controls { grid-template-columns: 1fr; }
  .monthly-payment-figures { grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .monthly-payment-figures > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .monthly-payment-figures > div:nth-child(n+3) { border-top: 1px solid var(--soft-line); padding-top: 8px; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .mobile-nav, .view:not([data-view-panel="reports"]), .report-controls, .view-intro, .report-preview-actions { display: none !important; }
  .workspace { margin: 0; }
  .view[data-view-panel="reports"] { display: block !important; padding: 0; }
  .report-builder { display: block; }
  .report-preview { border: 0; padding: 0; }
  body.payment-report-printing > * { display: none !important; }
  body.payment-report-printing > #monthlyPaymentReportDialog { display: block !important; position: static; inset: auto; width: auto; max-width: none; height: auto; max-height: none; margin: 0; overflow: visible; border: 0; padding: 0; background: #fff; }
  body.payment-report-printing > #monthlyPaymentReportDialog::backdrop { display: none; }
  body.payment-report-printing .monthly-payment-report-dialog-card { display: block; width: auto; max-width: none; max-height: none; overflow: visible; padding: 0; box-shadow: none; }
  body.payment-report-printing .monthly-payment-report-dialog-card > * { margin-bottom: 12px; }
  body.payment-report-printing .monthly-payment-report-controls,
  body.payment-report-printing .monthly-payment-report-actions,
  body.payment-report-printing .monthly-payment-report-dialog-card .dialog-heading .icon-button { display: none !important; }
  body.payment-report-printing .monthly-payment-report-dialog-card .dialog-heading { border-bottom: 2px solid #173f35; padding-bottom: 10px; }
  body.payment-report-printing .monthly-payment-report-row { grid-template-columns: 38% 62%; padding-block: 9px; }
  body.payment-report-printing .monthly-payment-report-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

.parent-registration-form { max-height: min(760px, calc(100vh - 170px)); overflow-y: auto; padding-inline-end: 4px; }
.parent-student-picker { min-width: 0; }
.student-picker-search { position: relative; margin-bottom: 10px; }
.student-picker-search svg { position: absolute; z-index: 1; inset-inline-start: 11px; top: 12px; width: 19px; height: 19px; color: var(--muted); }
.student-picker-search input { padding-inline-start: 39px; }
.student-request-list { max-height: 240px; overflow-y: auto; align-content: start; }
.student-request-list label { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 46px; }
.student-request-list input { width: 20px; min-height: 20px; }
.empty-picker { color: var(--muted); padding: 14px; text-align: center; }

.owner-preview-button { border-color: #b5862f; background: #fff7e4; color: #714f11; }
.owner-preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; border-bottom: 1px solid #c59b46; background: #fff1c9; color: #523b12; }
.owner-preview-banner > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.owner-preview-banner svg { width: 20px; height: 20px; flex: 0 0 auto; }
.owner-preview-banner span { color: #755d2e; }
.owner-preview-banner .button { flex: 0 0 auto; }
.owner-test-mode { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; border: 1px solid #c59b46; border-left: 4px solid #9b6a13; border-radius: 7px; padding: 12px 14px; background: #fff7df; color: #553b0c; }
.owner-test-mode svg { width: 22px; height: 22px; flex: 0 0 auto; color: #8a5d0d; }
.owner-test-mode div { display: grid; gap: 3px; }
.owner-test-mode span { color: #725c32; font-size: 0.84rem; line-height: 1.45; }
html[dir="rtl"] .owner-test-mode { border-right: 4px solid #9b6a13; border-left: 1px solid #c59b46; }

.parent-request-panel, .parent-account-panel, .parent-access-status, .class-average-panel { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: var(--surface); }
.parent-daily-hero { margin: -30px -30px 22px; padding: 28px 30px 24px; color: #fff; background: #114b3b; }
.parent-hero-heading, .parent-hero-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.parent-hero-heading p { margin: 0 0 4px; color: #e3c77c; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.parent-hero-heading h3 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); }
.parent-hero-heading > div > span, .parent-hero-footer > span { color: #d4e4dc; font-size: .82rem; }
.parent-hero-date { min-width: 170px; color: #fff; }
.parent-hero-date > span { display: block; margin-bottom: 5px; color: #d4e4dc; font-size: .72rem; font-weight: 700; }
.parent-hero-date input { border-color: rgba(255,255,255,.42); background: #fff; color: var(--ink); }
.parent-hero-main { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(250px,1.45fr); align-items: center; gap: 30px; margin: 24px 0; }
.parent-class-score { display: grid; gap: 3px; }
.parent-class-score > span { color: #d4e4dc; font-size: .82rem; }
.parent-class-score > strong { color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 3.7rem; line-height: 1; }
.parent-class-score > strong small { margin-inline-start: 5px; color: #e3c77c; font-size: 1.15rem; }
.parent-class-score > strong.no-grade { font-family: inherit; font-size: 1.45rem; line-height: 1.3; }
.parent-class-score > small { color: #d4e4dc; }
.parent-hero-comparison { display: grid; gap: 13px; }
.parent-hero-comparison article { display: grid; gap: 6px; }
.parent-hero-comparison article > div { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.parent-hero-comparison article span { color: #f5f4ed; }
.parent-hero-comparison article b { color: #fff; }
.parent-child-score-label { display: flex; min-width: 0; align-items: center; gap: 8px; }
.parent-child-score-label .avatar { width: 30px; height: 30px; border-color: rgba(255,255,255,.5); font-size: .68rem; }
.parent-child-score-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-hero-track { height: 12px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.18); }
.parent-hero-track > span { display: block; height: 100%; }
.parent-hero-track .class-average { background: #e3c77c; }
.parent-hero-track .student-average { background: #8fd6bd; }
.parent-hero-footer { border-top: 1px solid rgba(255,255,255,.18); padding-top: 17px; }
.parent-details-button { border-color: #fff; background: #fff; color: #114b3b; }
.parent-details-button:hover { background: #f5f1e5; }
.family-details-panel { scroll-margin-top: 82px; }
.historical-timesheet-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.request-count { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--gold-soft); color: #775312; font-weight: 800; }
.parent-request-list, .parent-account-list { display: grid; gap: 8px; }
.parent-request-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--soft-line); padding: 12px 0; }
.parent-request-list article:first-child { border-top: 0; }
.parent-request-list article > div:first-child { display: grid; gap: 3px; }
.parent-request-list article > div:last-child { display: flex; gap: 8px; }
.parent-request-list span, .parent-account-list span { color: var(--muted); }
.parent-account-list article { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.4fr) auto; align-items: center; gap: 14px; border-top: 1px solid var(--soft-line); padding: 12px 0; }
.parent-account-list article:first-child { border-top: 0; }
.parent-account-list article > div:first-child { display: grid; gap: 3px; }
.linked-student-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.linked-student-chips span { border: 1px solid #d8d2c4; border-radius: 6px; padding: 4px 7px; background: #f8f5ed; font-size: .79rem; }
.account-summary { display: grid; gap: 4px; border-inline-start: 4px solid var(--gold); padding: 8px 12px; }
.account-summary span { color: var(--muted); }

.access-request-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--soft-line); padding: 10px 0; }
.access-request-row .status-chip.pending { background: var(--gold-soft); color: #775312; }
.access-request-row .status-chip.denied { background: var(--danger-soft); color: var(--danger); }
.approval-waiting { display: flex; align-items: center; gap: 12px; border: 1px dashed #c8b783; border-radius: 6px; padding: 14px; background: #fffaf0; }
.approval-waiting svg { width: 24px; height: 24px; color: var(--gold); }
.approval-waiting div { display: grid; gap: 3px; }
.approval-waiting span { color: var(--muted); }

.class-average-panel > .section-heading > span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.average-comparison { display: grid; gap: 12px; }
.average-comparison article { display: grid; gap: 7px; }
.average-comparison article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.average-comparison article span { color: var(--muted); }
.average-track { height: 12px; overflow: hidden; border-radius: 5px; background: #e8e5dc; }
.average-track > span { display: block; height: 100%; border-radius: inherit; }
.average-track .class-average { background: var(--gold); }
.average-track .student-average { background: var(--forest); }
.average-subjects { display: flex; gap: 22px; margin-top: 13px; border-top: 1px solid var(--soft-line); padding-top: 11px; color: var(--muted); font-size: .88rem; }

@media (max-width: 760px) {
  .parent-registration-form { max-height: none; overflow: visible; }
  .owner-preview-banner { align-items: stretch; flex-direction: column; padding: 10px 14px; }
  .owner-preview-banner > div { align-items: flex-start; flex-wrap: wrap; }
  .owner-preview-banner .button { width: 100%; }
  .parent-request-list article, .parent-account-list article { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .parent-request-list article > div:last-child, .parent-request-list .button, .parent-account-list .button { width: 100%; }
  .parent-request-list article > div:last-child .button { flex: 1; }
  .parent-access-status .section-heading { align-items: stretch; flex-direction: column; }
  .parent-access-status .button { width: 100%; }
  .average-subjects { flex-direction: column; gap: 7px; }
  .parent-daily-hero { margin: -22px -16px 18px; padding: 22px 16px 20px; }
  .parent-hero-heading, .parent-hero-footer { align-items: stretch; flex-direction: column; }
  .parent-hero-date { width: 100%; }
  .parent-hero-main { grid-template-columns: 1fr; gap: 22px; margin: 22px 0; }
  .parent-class-score { text-align: center; }
  .parent-details-button { width: 100%; }
  .family-current-homework > div { grid-template-columns: 1fr; gap: 12px; }
  .family-current-homework > div > div + div { margin-inline-start: 0; }
}

/* Controlled relaunch and role-specific daily workspaces */
.launch-gate-screen {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow-y: auto;
  padding: 24px 16px;
  background-color: #eef2ef;
  background-image: repeating-linear-gradient(135deg, rgba(169,124,37,.04) 0 1px, transparent 1px 20px);
}
.launch-gate-panel { width: calc(100vw - 32px); max-width: 470px; border: 3px double #a9873f; border-radius: 8px; padding: 26px; background: var(--surface); box-shadow: 0 24px 70px rgba(13,68,56,.16); }
.launch-gate-panel > .language-toggle { width: 190px; margin: 0 0 15px auto; }
html[dir="rtl"] .launch-gate-panel > .language-toggle { margin-right: auto; margin-left: 0; }
.launch-gate-brand { margin-bottom: 22px; }
.launch-gate-message { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: start; gap: 13px; }
.launch-gate-message > svg { width: 42px; height: 42px; border-radius: 7px; padding: 9px; color: #fff; background: var(--forest); }
.launch-gate-message .eyebrow { margin-bottom: 3px; }
.launch-gate-message h2 { color: var(--forest); font-size: 1.7rem; }
.launch-gate-message p:last-child { margin: 7px 0 0; }
.launch-access-form { display: grid; gap: 12px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.launch-access-form input { min-height: 58px; text-align: center; font-size: 1.55rem; font-weight: 800; letter-spacing: 0; }
.launch-access-form .button { width: 100%; }
.launch-gate-owner { display: block; width: 100%; margin-top: 14px; text-align: center; }

.launch-control-intro { border-inline-start: 5px solid var(--gold); }
.launch-status { display: inline-flex; min-width: 112px; align-items: center; justify-content: center; gap: 7px; border: 1px solid currentColor; border-radius: 6px; padding: 9px 12px; font-size: .82rem; font-weight: 900; }
.launch-status svg { width: 19px; height: 19px; }
.launch-status.closed { color: var(--danger); background: var(--danger-soft); }
.launch-status.open { color: #12624e; background: var(--new-soft); }
.launch-control-surface { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: var(--surface); box-shadow: var(--shadow); }
.launch-open-form, .launch-active-details { display: grid; gap: 18px; }
.launch-closed-notice, .launch-code-hidden { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #d8c793; border-radius: 7px; padding: 15px; background: #fff8e8; }
.launch-closed-notice svg, .launch-code-hidden svg { width: 25px; height: 25px; flex: 0 0 auto; color: var(--gold); }
.launch-closed-notice div { display: grid; gap: 3px; }
.launch-closed-notice span, .launch-code-hidden span { color: var(--muted); }
.launch-code-reveal { display: grid; justify-items: start; gap: 9px; border: 2px solid var(--forest); border-radius: 8px; padding: 18px; background: #f0f7f3; }
.launch-code-reveal > span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.launch-code-reveal > strong { color: var(--forest); font-size: 2.2rem; letter-spacing: 0; }
.launch-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.launch-rules > div { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--soft-line); border-radius: 7px; padding: 12px; background: var(--surface); color: var(--muted); font-size: .82rem; }
.launch-rules svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--gold); }

.director-intro { border-inline-start: 5px solid var(--forest); }
.director-day-counts { display: grid; min-width: 190px; gap: 7px; }
.director-day-counts span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--soft-line); padding: 5px 0; color: var(--muted); font-size: .84rem; }
.director-day-counts strong { color: var(--forest); font-size: 1.2rem; }
.director-attention, .director-task-list { margin-bottom: 18px; }
.director-notice-list { display: grid; gap: 9px; }
.director-notice { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #d5b96f; border-radius: 7px; padding: 13px; background: #fff9e9; }
.director-notice > svg { width: 27px; height: 27px; color: var(--gold); }
.director-notice > .avatar { width: 38px; height: 38px; }
.director-notice > div { display: grid; gap: 3px; }
.director-notice span { color: var(--muted); font-size: .82rem; }
.director-notice-actions { display: flex; align-items: center; gap: 8px; }

.password-input-shell { position: relative; display: block; width: 100%; }
.password-input-shell > input { width: 100%; padding-inline-end: 46px; }
.password-visibility-button { position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 5px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.password-visibility-button:hover, .password-visibility-button:focus-visible { color: var(--green); background: #edf5f0; outline: 2px solid color-mix(in srgb, var(--green) 28%, transparent); }
.password-visibility-button svg { width: 19px; height: 19px; }

.history-edit-banner { margin: 0 0 14px; border: 1px solid #d5b96f; border-inline-start: 5px solid var(--gold); border-radius: 6px; background: #fff9e9; padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
.history-edit-banner[hidden] { display: none; }
.history-edit-banner > svg { width: 24px; height: 24px; color: #8f6810; flex: 0 0 auto; }
.history-edit-banner > div { display: grid; gap: 2px; }
.history-edit-banner span { color: var(--muted); font-size: .84rem; }
.history-edit-button { white-space: nowrap; }

.student-ready-prompt, .student-connection.ready { margin-bottom: 16px; border: 2px solid #1d765a; border-radius: 7px; background: #f1faf6; padding: 16px; display: grid; gap: 13px; }
.student-ready-prompt > div, .student-ready-confirmed { display: flex; align-items: center; gap: 12px; }
.student-ready-prompt > div > svg, .student-ready-confirmed > svg { width: 30px; height: 30px; color: #167052; flex: 0 0 auto; }
.student-ready-prompt > div > div, .student-ready-confirmed > div { display: grid; gap: 3px; }
.student-ready-prompt span, .student-ready-confirmed small { color: var(--muted); }
.student-ready-confirmed strong { color: #0c5b42; font-size: 1.02rem; }
.student-queue-focus { max-width: 650px; }
.student-account-waiting { margin-bottom: 16px; }

.director-queue-assign { min-width: 230px; display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 8px; }
.queue-attention { border-color: #29916d; background: #f0faf6; }
.queue-attention > svg { color: #167052; }
.online-teacher-status { margin: 0 0 10px; padding: 9px 11px; border-radius: 5px; background: #edf5f0; color: #125a44; display: flex; align-items: center; gap: 8px; font-size: .83rem; }
.online-teacher-status svg { width: 18px; height: 18px; }
.teacher-waiting-alert { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 0 0 14px; border: 2px solid #b9851c; border-inline-start-width: 6px; border-radius: 7px; padding: 13px 14px; color: #17352d; background: #fff7dc; box-shadow: 0 5px 18px rgba(87,64,17,.1); }
.teacher-waiting-alert > svg { width: 27px; height: 27px; color: #9a6700; animation: teacher-alert-ring 1.2s ease-in-out 2; }
.teacher-waiting-alert > div { display: grid; gap: 2px; min-width: 0; }
.teacher-waiting-alert strong { font-size: 1rem; }
.teacher-waiting-alert span { color: #675522; font-size: .82rem; }
.teacher-alerts-enabled { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #176047; font-size: .76rem; font-weight: 800; }
.teacher-alerts-enabled.muted { color: var(--muted); }
.teacher-alerts-enabled svg { width: 17px; height: 17px; }
.teacher-alerts-button { white-space: nowrap; background: #fff; }
@keyframes teacher-alert-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }

.access-request-panel, .access-issue-panel, .access-directory-panel { margin-bottom: 18px; border-top: 1px solid var(--soft-line); padding-top: 16px; }
.staff-queue-access-note { margin-bottom: 14px; font-size: .86rem; line-height: 1.5; }
.staff-row > .staff-row-queue { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--soft-line); padding-top: 10px; }
.queue-delegation-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 52px; align-items: center; gap: 11px; min-height: 54px; cursor: pointer; }
.queue-delegation-row.disabled { opacity: .58; cursor: not-allowed; }
.queue-delegation-row > div { min-width: 0; display: grid; gap: 3px; }
.queue-delegation-row strong { font-size: .86rem; }
.queue-delegation-row > div span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.queue-access-included { display: flex; align-items: center; gap: 8px; color: var(--forest); font-size: .82rem; }
.queue-access-included svg { width: 18px; height: 18px; flex: 0 0 auto; }
.queue-delegation-row > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.queue-access-switch { width: 48px; height: 28px; border: 2px solid #87958f; border-radius: 14px; padding: 2px; background: #dfe5e2; transition: background .15s ease, border-color .15s ease; }
.queue-access-switch > span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,38,30,.28); transition: transform .15s ease; }
.queue-delegation-row > input:checked + .queue-access-switch { border-color: var(--forest); background: var(--forest); }
.queue-delegation-row > input:checked + .queue-access-switch > span { transform: translateX(20px); }
html[dir="rtl"] .queue-delegation-row > input:checked + .queue-access-switch > span { transform: translateX(-20px); }
.queue-delegation-row > input:focus-visible + .queue-access-switch { outline: 3px solid rgba(181,135,34,.32); outline-offset: 3px; }
.access-clear { margin-bottom: 18px; }
.access-request-list { display: grid; gap: 9px; }
.access-request-list article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #d5b96f; border-radius: 7px; background: #fff9e9; padding: 13px; }
.access-request-icon { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; background: #f0dfaa; color: #6f5010; }
.access-request-list article > div:nth-child(2) { display: grid; gap: 3px; }
.access-request-list article span, .access-request-list article small { color: var(--muted); font-size: .8rem; }
.access-request-actions { display: flex; gap: 7px; }
.access-issue-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.access-issue-list > div { min-width: 0; border: 1px solid var(--soft-line); border-radius: 6px; padding: 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
.access-issue-list > div > span { color: var(--gold-dark); font-weight: 800; }
.access-directory-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(160px,220px); gap: 10px; margin-bottom: 11px; }
.access-directory-toolbar .search-control { position: relative; }
.access-directory-toolbar .search-control > svg { position: absolute; inset-inline-start: 11px; bottom: 11px; width: 18px; height: 18px; color: var(--muted); z-index: 1; }
.access-directory-toolbar .search-control input { padding-inline-start: 37px; }
.access-account-list { border-top: 1px solid var(--soft-line); }
.access-account-row { display: grid; grid-template-columns: 42px minmax(170px,1fr) minmax(130px,auto) auto; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--soft-line); }
.access-account-row.disabled { opacity: .66; background: #f4f4f2; }
.access-account-identity { min-width: 0; display: grid; gap: 2px; }
.access-account-identity span, .access-account-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .78rem; }
.access-account-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: .76rem; }
.access-account-actions { display: flex; justify-content: flex-end; gap: 7px; }

.my-account-layout { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(300px,1.15fr); gap: 18px; align-items: start; }
.my-account-card, .change-credential-card { border: 1px solid var(--soft-line); border-radius: 7px; padding: 18px; background: #fff; }
.my-account-heading { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--soft-line); padding-bottom: 14px; }
.my-account-heading > div:last-child { display: grid; gap: 2px; }
.my-account-heading h4 { margin: 0; font-size: 1.2rem; }
.my-account-heading span, .my-account-heading small { color: var(--muted); }
.my-account-card dl { margin: 0; }
.my-account-card dl > div { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.2fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--soft-line); }
.my-account-card dt { color: var(--muted); }
.my-account-card dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.managed-account-note { margin: 14px 0 0; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; }
.managed-account-note svg { width: 19px; color: var(--green); flex: 0 0 auto; }
.account-credential-form { display: grid; gap: 12px; }
.credential-reveal { display: grid; gap: 8px; text-align: center; padding: 18px 0; }
.credential-reveal strong { font-size: 1.7rem; letter-spacing: 0; color: var(--green); overflow-wrap: anywhere; user-select: all; }
.credential-reveal span, .credential-reveal small { color: var(--muted); }
.director-clear { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; border: 1px solid #bbd7cb; border-radius: 7px; padding: 12px; color: #17624f; background: #edf7f2; }
.director-clear svg { width: 21px; height: 21px; }
.director-task-list { display: grid; gap: 8px; }
.director-task-list .section-heading { margin-bottom: 4px; }
.director-task-list > button { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 12px; width: 100%; min-height: 72px; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; color: var(--ink); background: var(--surface); text-align: start; }
.director-task-list > button:hover { border-color: var(--gold); background: #fffaf0; }
.director-task-list > button > svg:first-child { width: 40px; height: 40px; border-radius: 7px; padding: 9px; color: #fff; background: var(--forest); }
.director-task-list > button > svg:last-child { width: 20px; height: 20px; color: var(--gold); }
.director-task-list > button > span { display: grid; gap: 3px; }
.director-task-list strong { font-size: .98rem; }
.director-task-list small { color: var(--muted); font-size: .8rem; }

.grading-anytime-note { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; border: 1px solid #b8d6cb; border-radius: 7px; padding: 11px 12px; color: #164f41; background: #edf7f2; }
.grading-anytime-note svg { width: 20px; height: 20px; flex: 0 0 auto; }

.device-link-simple { display: grid; gap: 14px; margin-bottom: 14px; border: 2px solid var(--forest); border-radius: 8px; padding: 17px; background: #f1f7f4; }
.meet-automation-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 6px; padding: 14px 16px; background: #fffaf0; }
.meet-automation-panel.ready { border-left-color: #18705a; background: #edf7f2; }
.meet-automation-panel > div { display: flex; min-width: 0; align-items: center; gap: 12px; }
.meet-automation-panel > div > svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--forest); }
.meet-automation-panel > div > div { display: grid; min-width: 0; gap: 2px; }
.meet-automation-panel span { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.meet-automation-panel strong, .meet-automation-panel small { overflow-wrap: anywhere; }
.meet-automation-panel small { color: var(--muted); }
html[dir="rtl"] .meet-automation-panel { border-left-width: 1px; border-right: 5px solid var(--gold); }
html[dir="rtl"] .meet-automation-panel.ready { border-right-color: #18705a; }
.device-link-simple > div { display: flex; align-items: center; gap: 12px; }
.device-link-simple > div:first-child > svg { width: 34px; height: 34px; color: var(--forest); }
.device-link-simple h4, .device-link-simple p { margin: 0; }
.device-link-simple p { margin-top: 3px; }
.device-link-simple code { min-width: 0; overflow-wrap: anywhere; border: 1px solid #c5d8d0; border-radius: 6px; padding: 10px 12px; color: var(--forest); background: #fff; font-size: .95rem; font-weight: 800; }
.device-link-simple > div:last-child { justify-content: space-between; }
.device-setup-guide { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; gap: 7px; margin-bottom: 20px; }
.device-setup-guide > div { display: flex; min-height: 74px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: var(--surface); }
.device-setup-guide > div > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--gold); font-weight: 900; }
.device-setup-guide > svg { width: 20px; height: 20px; color: var(--gold); }
.device-request-list { display: grid; gap: 8px; }
.device-request-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: var(--surface); }
.device-request-row.pending { border-color: #d2b567; background: #fffaf0; }
.device-request-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 7px; color: #fff; background: var(--forest); }
.device-request-icon svg { width: 23px; height: 23px; }
.device-request-row > div:nth-child(2) { display: grid; gap: 2px; }
.device-request-row span, .device-request-row small { color: var(--muted); }
.device-request-actions { display: flex; gap: 7px; }

.staff-directory { display: grid; grid-template-columns: 1fr; gap: 7px; }
.staff-row { display: grid; grid-template-columns: 42px minmax(180px,1.2fr) minmax(120px,.55fr) auto 38px; align-items: center; gap: 12px; min-height: 68px; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; background: var(--surface); }
.staff-row-identity, .staff-row-stat { display: grid; gap: 3px; min-width: 0; }
.staff-row-identity span, .staff-row-stat span { color: var(--muted); font-size: .78rem; }
.staff-row-stat strong { color: var(--forest); font-size: 1rem; }

.problem-instructions { display: flex; align-items: flex-start; gap: 11px; border: 2px solid #d2ad54; border-radius: 7px; padding: 13px; color: #61450f; background: #fff8e5; }
.problem-instructions > svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gold); }
.problem-instructions > div { display: grid; gap: 3px; }
.problem-instructions span { color: #765d2a; font-size: .82rem; }
.problem-picture-field small { color: var(--muted); }
.support-screenshot-button { width: fit-content; margin-top: 6px; }
.support-no-picture { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .78rem; }
.support-no-picture svg { width: 15px; height: 15px; }

.forgot-password-button { display: inline-flex; align-items: center; align-self: center; gap: 6px; }
.forgot-password-button svg { width: 17px; height: 17px; }

.director-notifications { position: fixed; z-index: 46; right: 24px; bottom: 24px; }
.director-notifications-button { position: relative; display: grid; width: 56px; height: 56px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--forest); box-shadow: 0 9px 28px rgba(17,59,48,.28); cursor: pointer; }
.director-notifications-button:hover, .director-notifications-button.active { background: #0a5644; }
.director-notifications-button.has-alerts { background: #9a2f2a; }
.director-notifications-button > svg { width: 25px; height: 25px; }
.director-notifications-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 24px; height: 24px; place-items: center; border: 2px solid #fff; border-radius: 50%; padding: 0 5px; color: #fff; background: #c73d35; font-size: .72rem; font-weight: 900; }
.director-notifications-panel { position: absolute; right: 0; bottom: 68px; width: min(410px,calc(100vw - 32px)); max-height: min(680px,70dvh); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 20px 55px rgba(19,48,39,.24); }
.director-notifications-panel[hidden] { display: none !important; }
.director-notifications-panel:not([hidden]) { display: block; }
.director-notifications-heading { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 15px; background: #f8f6ef; }
.director-notifications-heading > div { display: grid; gap: 2px; }
.director-notifications-heading span { color: var(--gold); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.director-notifications-heading h3 { margin: 0; color: var(--forest); font-size: 1.1rem; }
.director-notifications-list { max-height: calc(min(680px,70dvh) - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 14px; }
.floating-notification { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--soft-line); padding: 13px 0; }
.floating-notification:last-child { border-bottom: 0; }
.floating-notification > svg { width: 22px; height: 22px; color: var(--forest); }
.floating-notification.urgent > svg { color: #a83731; }
.floating-notification > div:not(.floating-notification-actions) { display: grid; gap: 2px; min-width: 0; }
.floating-notification span { color: var(--muted); font-size: .78rem; }
.floating-notification-actions { display: flex; gap: 6px; }
html[dir="rtl"] .director-notifications { right: auto; left: 24px; }
html[dir="rtl"] .director-notifications-panel { right: auto; left: 0; }
html[dir="rtl"] .director-notifications-badge { right: auto; left: -5px; }

@media (max-width: 880px) {
  .teacher-waiting-alert { grid-template-columns: 30px minmax(0,1fr); }
  .teacher-waiting-alert .teacher-alerts-button, .teacher-waiting-alert .teacher-alerts-enabled { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .class-guidance-grid, .clock-policy-grid { grid-template-columns: 1fr; }
  .class-guidance-rule:nth-child(odd), .clock-policy-rule:nth-child(odd) { border-inline-end: 0; }
  .teacher-guidance-heading { padding: 13px 14px 10px; }
  .class-guidance-rule, .clock-policy-rule { padding: 11px 14px; }
  .schedule-week-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .schedule-page-actions { width: 100%; justify-content: stretch; }
  .schedule-page-actions .button { flex: 1; }
  .temporary-schedule-row { grid-template-columns: 40px minmax(0,1fr) 20px; }
  .temporary-schedule-time { grid-column: 2; }
  .temporary-schedule-row > svg { grid-column: 3; grid-row: 1 / 3; }
  .schedule-teacher-choices { grid-template-columns: 1fr; }
  .launch-gate-panel { padding: 20px 17px; }
  .launch-gate-message { grid-template-columns: 38px minmax(0,1fr); }
  .launch-gate-message > svg { width: 36px; height: 36px; padding: 8px; }
  .launch-gate-message h2 { font-size: 1.45rem; }
  .launch-rules { grid-template-columns: 1fr; }
  .launch-control-intro, .director-intro { align-items: stretch; }
  .launch-status { width: 100%; }
  .director-day-counts { min-width: 0; }
  .director-notice { grid-template-columns: 34px minmax(0,1fr); }
  .director-notice .button { width: 100%; grid-column: 1 / -1; }
  .director-notice-actions { width: 100%; grid-column: 1 / -1; }
  .director-notice-actions .button { flex: 1; }
  .director-queue-assign { width: 100%; min-width: 0; grid-column: 1 / -1; grid-template-columns: 1fr; }
  .access-request-list article { grid-template-columns: 36px minmax(0,1fr); }
  .access-request-actions { grid-column: 1 / -1; }
  .access-request-actions .button { flex: 1; }
  .access-issue-list { grid-template-columns: 1fr; }
  .access-directory-toolbar { grid-template-columns: 1fr; }
  .access-account-row { grid-template-columns: 38px minmax(0,1fr); }
  .access-account-meta, .access-account-actions { grid-column: 1 / -1; }
  .access-account-actions { justify-content: stretch; }
  .access-account-actions .button { flex: 1; }
  .my-account-layout { grid-template-columns: 1fr; }
  .student-connection.ready .button, .student-ready-prompt .button { width: 100%; }
  .device-link-simple > div:last-child { align-items: stretch; flex-direction: column; }
  .meet-automation-panel { align-items: stretch; flex-direction: column; }
  .meet-automation-panel > .button { width: 100%; }
  .device-link-simple .button { width: 100%; }
  .device-setup-guide { grid-template-columns: 1fr; }
  .device-setup-guide > svg { margin: auto; transform: rotate(90deg); }
  html[dir="rtl"] .device-setup-guide > svg { transform: rotate(90deg); }
  .device-request-row { grid-template-columns: 42px minmax(0,1fr); }
  .device-request-actions, .device-request-row > .status-chip { width: 100%; grid-column: 1 / -1; }
  .device-request-actions .button { flex: 1; }
  .staff-row { grid-template-columns: 42px minmax(0,1fr) auto; }
  .staff-row-stat { grid-column: 2; }
  .staff-row > .status-chip { grid-column: 2; justify-self: start; }
  .staff-row > .icon-button { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 640px) {
  .language-welcome-panel { gap: 16px; padding: 22px 16px; }
  .language-welcome-actions { grid-template-columns: 1fr; }
  .language-choice { min-height: 86px; }
  dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); margin: 6px auto; }
  dialog .dialog-card { max-height: calc(100dvh - 16px); gap: 15px; padding: 14px; }
  dialog .dialog-heading { min-height: 53px; }
  dialog .dialog-heading .icon-button { width: 44px; height: 44px; flex: 0 0 auto; }
  dialog .dialog-actions { flex-wrap: wrap; padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  dialog .dialog-actions .button { flex: 1; }
  .student-photo-crop-stage { width: min(100%, clamp(220px, 46dvh, 380px)); }
  .student-photo-crop-controls { grid-template-columns: 1fr; }
  .student-photo-crop-controls .button { width: 100%; }
  dialog .split-actions .danger-quiet { width: 100%; flex-basis: 100%; }
  dialog.teacher-agreement-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .teacher-agreement-gate { padding: max(8px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom)); }
  .teacher-agreement-heading { align-items: stretch; flex-direction: column; padding: 17px 15px 14px; }
  .teacher-agreement-heading h2 { font-size: 1.45rem; }
  .agreement-language-control .segmented { width: 100%; }
  .agreement-language-control button { flex: 1; }
  .teacher-agreement-intro { grid-template-columns: 22px minmax(0,1fr); padding: 12px 15px; }
  .teacher-agreement-intro span { grid-column: 2; }
  .teacher-agreement-sections > section { padding: 16px 15px; }
  .teacher-agreement-sections li { font-size: .86rem; }
  .dialog-action-spacer { display: none; }
  .schedule-week-grid { grid-template-columns: 1fr; }
  .schedule-page-actions { display: grid; grid-template-columns: 1fr; }
  .weekly-schedule-board, .temporary-schedule-list { padding: 13px; }
  .weekly-schedule-board > .section-heading { align-items: stretch; flex-direction: column; }
  .schedule-day-column { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .schedule-days-field .weekday-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .temporary-schedule-list .section-heading { align-items: stretch; flex-direction: column; }
  .temporary-schedule-list .section-heading .button { width: 100%; }
  .temporary-schedule-row { grid-template-columns: 40px minmax(0,1fr); }
  .temporary-schedule-row > svg { display: none; }
  .payroll-timeline-key { gap: 6px 9px; }
  .shift-time-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .shift-time-summary > div { padding-inline: 8px; }
  .shift-review-button { width: 100%; }
  .timesheet-exact-controls { grid-template-columns: 1fr; }
  .shift-merge-options { grid-template-columns: 1fr; }
  .shift-merge-toolbar .button { width: 100%; }
  .inactive-review-summary { grid-template-columns: 38px minmax(0,1fr); }
  .inactive-review-summary > svg { width: 29px; height: 29px; }
  .director-notifications { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  html[dir="rtl"] .director-notifications { right: auto; left: 14px; }
  .director-notifications-panel { position: fixed; right: 8px; bottom: calc(142px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-height: min(600px,66dvh); }
  html[dir="rtl"] .director-notifications-panel { right: 8px; left: auto; }
  .director-notifications-list { max-height: calc(min(600px,66dvh) - 72px); }
  .floating-notification { grid-template-columns: 32px minmax(0,1fr); }
  .floating-notification > .button, .floating-notification-actions { width: 100%; grid-column: 1 / -1; }
  .floating-notification-actions .button { flex: 1; }
}

.teacher-queue-popup[hidden] { display: none !important; }
.teacher-queue-popup {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2600;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  width: min(560px,calc(100vw - 32px));
  max-height: calc(100dvh - 44px);
  align-items: center;
  gap: 12px;
  overflow-y: auto;
  border: 2px solid #b9851c;
  border-inline-start-width: 7px;
  border-radius: 8px;
  padding: 16px 48px 16px 16px;
  color: #17352d;
  background: #fffdf7;
  box-shadow: 0 18px 54px rgba(18,45,36,.28);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.teacher-queue-popup.show { opacity: 1; transform: translateY(0); }
.teacher-queue-popup-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: #9a6700; }
.teacher-queue-popup-icon svg { width: 25px; height: 25px; animation: teacher-alert-ring 1.2s ease-in-out 3; }
.teacher-queue-popup-copy { display: grid; min-width: 0; gap: 3px; }
.teacher-queue-popup-copy > span { color: #8a5d08; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.teacher-queue-popup-copy > strong { font-family: var(--serif); font-size: 1.16rem; line-height: 1.15; }
.teacher-queue-popup-copy p { margin: 0; color: #5e5848; font-size: .84rem; line-height: 1.4; }
.teacher-queue-popup-close { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; color: #665f4f; }
.teacher-queue-popup-open { min-height: 48px; white-space: nowrap; }
html[dir="rtl"] .teacher-queue-popup { right: auto; left: 22px; padding: 16px 16px 16px 48px; }
html[dir="rtl"] .teacher-queue-popup-close { right: auto; left: 8px; }

@media (max-width: 640px) {
  .teacher-queue-popup {
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    grid-template-columns: 44px minmax(0,1fr);
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    padding: 14px 44px 14px 13px;
  }
  html[dir="rtl"] .teacher-queue-popup { right: 8px; left: auto; padding: 14px 13px 14px 44px; }
  .teacher-queue-popup-open { grid-column: 1 / -1; width: 100%; }
}
/* Recovery states stay deliberately plain so they remain readable on small phones. */
.loading-screen.startup-failed,
.loading-screen.startup-slow {
  gap: 12px;
  padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

.loading-screen.startup-failed > span,
.loading-screen.startup-failed > small,
.loading-screen.startup-slow > span,
.loading-screen.startup-slow > small {
  max-width: 36rem;
}

.loading-screen.startup-failed > small,
.loading-screen.startup-slow > small {
  color: var(--text-muted, #5d666b);
}

.startup-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(100%, 34rem);
}

.startup-recovery-actions .button {
  min-height: 48px;
}

.saved-state.offline-pending {
  color: #7b4300;
  background: #fff2d5;
  border-color: #d79739;
}

@media (max-width: 520px) {
  .startup-recovery-actions {
    display: grid;
  }
}

@media (max-width: 1099px) {
  .timesheet-desktop-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
    border: 1px solid #9bb9c5;
    border-inline-start: 5px solid #287f9d;
    padding: 12px 13px;
    color: #164f66;
    background: #edf6f8;
  }
  .timesheet-desktop-banner svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .timesheet-desktop-banner > div { display: grid; gap: 3px; }
  .timesheet-desktop-banner span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
  .timesheet-desktop-workspace { display: none !important; }
  .timesheet-mobile-blocker {
    display: grid;
    min-height: 420px;
    place-items: center;
    align-content: center;
    gap: 16px;
    border: 1px solid var(--line);
    padding: 28px 20px;
    background: var(--surface);
    text-align: center;
  }
  .timesheet-mobile-blocker > svg { width: 48px; height: 48px; color: var(--forest); }
  .timesheet-mobile-blocker > div { display: grid; max-width: 440px; gap: 7px; }
  .timesheet-mobile-blocker h3 { margin: 0; color: var(--forest); font-family: var(--serif); font-size: 1.35rem; }
  .timesheet-mobile-blocker p:last-child { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
  .shift-review-button { display: none !important; }
}

@media (min-width: 1100px) {
  .timesheet-mobile-blocker { display: none !important; }
}