:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #182230;
  --muted: #667085;
  --line: #d9e0ea;
  --soft: #eef4ff;
  --accent: #2563eb;
}

.tutor-main-page,
.conversion-page {
  gap: 14px;
  padding: 16px;
}

.tutor-main-filters {
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(160px, 0.75fr));
}

.tutor-main-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.main-metric {
  min-height: 116px;
  padding: 16px;
}

.main-metric strong {
  font-size: 34px;
}

.main-metric small {
  color: #667085;
  font-size: 11px;
}

.main-metric-accent {
  border-color: #84adff;
  background: #f5f8ff;
}

.main-metric.has-tooltip::after {
  white-space: pre-line;
}

.tutor-main-status {
  min-height: 24px;
}

.conversion-filters {
  grid-template-columns: minmax(230px, 1.25fr) repeat(2, minmax(145px, 0.75fr)) repeat(2, minmax(180px, 0.9fr));
  align-items: end;
}

.conversion-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.conversion-panel {
  padding: 14px;
}

.conversion-table-wrap {
  max-height: calc(100vh - 330px);
  min-height: 360px;
  margin-top: 12px;
}

.conversion-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.conversion-table th,
.conversion-table td {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  padding: 0;
  text-align: center;
}

.conversion-table thead th {
  padding: 9px 6px;
  font-size: 11px;
}

.conversion-table .conversion-teacher-col {
  position: sticky;
  left: 0;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  padding: 9px 10px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.conversion-table thead .conversion-teacher-col {
  background: #f8fafc;
  z-index: 4;
}

.conversion-table .conversion-total-col {
  position: sticky;
  left: 210px;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 #d9e0ea;
}

.conversion-table thead .conversion-total-col {
  background: #f8fafc;
  z-index: 4;
}

.conversion-table tfoot .conversion-teacher-col,
.conversion-table tfoot td {
  border-top: 2px solid #98a2b3;
  font-weight: 750;
}

.conversion-cell {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: #fff;
  color: #1d2939;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: help;
}

.conversion-level-green {
  border-color: #75e0a7 !important;
  background: #dcfae6 !important;
  color: #05603a !important;
}

.conversion-level-green-light {
  border-color: #a6efc6 !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
}

.conversion-level-yellow {
  border-color: #f7d070 !important;
  background: #fef7c3 !important;
  color: #854a0e !important;
}

.conversion-level-red {
  border-color: #fda29b !important;
  background: #fee4e2 !important;
  color: #b42318 !important;
}

.conversion-level-empty {
  background: #fff !important;
  color: #98a2b3 !important;
}

.conversion-cell.is-empty {
  background: #fff;
  color: #98a2b3;
  cursor: default;
}

.conversion-cell.has-data:hover,
.conversion-cell.has-data:focus-visible {
  box-shadow: inset 0 0 0 2px #175cd3;
  outline: 0;
}

.conversion-floating-tooltip {
  position: fixed;
  display: none;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 24px));
  overflow: auto;
  padding: 10px 12px;
  border-radius: 7px;
  background: #101828;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.25);
  font-size: 12px;
  line-height: 1.35;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  pointer-events: auto;
  z-index: 100;
}

.conversion-floating-tooltip.is-visible {
  display: block;
}

.conversion-tooltip-total {
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  font-weight: 750;
}

.analytics-conversion-floating-tooltip .conversion-tooltip-total > * {
  display: block;
}

.analytics-conversion-floating-tooltip .conversion-tooltip-total small {
  margin-top: 2px;
  color: #d0d5dd;
  font-size: 10px;
  font-weight: 500;
}

.analytics-conversion-floating-tooltip .conversion-tooltip-total span {
  margin-top: 5px;
}

.conversion-tooltip-section {
  margin-top: 8px;
}

.conversion-tooltip-section > strong,
.conversion-tooltip-section div span,
.conversion-tooltip-section div small {
  display: block;
}

.conversion-tooltip-trial {
  position: relative;
  padding-right: 68px;
}

.conversion-exclude-button {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 22px;
  padding: 2px 6px;
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
  color: #fff;
  font-size: 10px;
}

.analytics-conversion-exclusions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #475467;
  font-size: 12px;
}

.analytics-conversion-exclusions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.analytics-conversion-exclusions button {
  min-height: 26px;
  padding: 3px 8px;
  border-color: #d0d5dd;
  background: #fff;
  color: #344054;
  font-size: 11px;
}

.analytics-conversion-exclusions button small {
  color: #b42318;
}

.conversion-tooltip-section div {
  margin-top: 5px;
}

.conversion-tooltip-section div small {
  color: #d0d5dd;
  font-size: 10px;
}

@media (max-width: 980px) {
  .tutor-main-filters,
  .tutor-main-cards,
  .conversion-filters,
  .conversion-cards {
    grid-template-columns: 1fr;
  }

  .conversion-table .conversion-teacher-col {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
  }

  .conversion-table .conversion-total-col {
    left: 155px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.is-embedded body {
  min-height: 0;
  display: block;
  overflow-x: hidden;
}

.is-embedded .sidebar,
.is-embedded .topbar {
  display: none;
}

.is-embedded .page {
  padding: 0;
}

.is-compact-embed .filters {
  display: none;
}

button,
input,
select {
  font: inherit;
}

.sidebar {
  min-height: 100vh;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #111827;
  color: #fff;
}

.brand {
  font-size: 22px;
  font-weight: 760;
}

.muted,
.topbar p,
.panel-head p,
label span,
.status {
  color: var(--muted);
}

.sidebar .muted {
  color: #aab4c5;
}

nav {
  display: grid;
  gap: 8px;
}

.nav-button {
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  padding: 0 12px;
}

.nav-button.active {
  background: #fff;
  color: #111827;
}

.nav-button:disabled,
.nav-button.disabled {
  opacity: 0.5;
}

.role-dashboard-page {
  gap: 14px;
}

.role-dashboard-head {
  align-items: center;
}

.role-access-chip {
  padding: 7px 10px;
  border: 1px solid #b2ccff;
  border-radius: 999px;
  background: #eff4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.role-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.role-tabs button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-weight: 700;
}

.role-tabs button.active {
  background: var(--soft);
  color: #1849a9;
}

.role-frame-shell {
  min-width: 0;
}

.role-frame-shell iframe {
  width: 100%;
  min-height: 560px;
  display: block;
  border: 0;
  background: transparent;
}

.role-frame-shell iframe[hidden] {
  display: none;
}

.page {
  min-width: 0;
  padding: 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.topbar,
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  font-size: 18px;
}

.primary {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
}

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

.progress-filters {
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.1fr) minmax(190px, 1.1fr) 140px 140px minmax(150px, 0.9fr) minmax(150px, 0.8fr);
  align-items: end;
}

.progress-senior-filters {
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.3fr) 140px 140px minmax(150px, 0.9fr) minmax(150px, 0.8fr);
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.checkbox-label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
}

.checkbox-label input {
  width: 16px;
  min-height: 16px;
}

input,
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

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

.progress-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metric {
  min-height: 88px;
  padding: 14px;
  display: grid;
  align-content: space-between;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  font-size: 27px;
}

.panel {
  min-width: 0;
  padding: 16px;
}

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

.departure-head {
  align-items: end;
}

.departure-filters {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(140px, 0.8fr) minmax(260px, 1.4fr);
  gap: 10px;
}

.departure-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.departure-metric {
  min-height: 76px;
}

.departure-status {
  margin-top: 12px;
}

.departures-matrix-filters {
  grid-template-columns: repeat(2, minmax(145px, 0.8fr)) repeat(2, minmax(210px, 1.1fr));
  align-items: end;
}

.departure-archive-field {
  position: relative;
}

.departure-archive-field small {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.departure-archive-field small.is-error {
  color: #b42318;
}

.departure-archive-field input:focus {
  border-color: #84adff;
  outline: 2px solid #dbeafe;
}

.departure-matrix-table tbody .departure-teacher-column .departure-archive-mark {
  color: #b54708;
  font-weight: 700;
}

.grain-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grain-fieldset legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}

.segmented-control {
  min-height: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.segmented-control label {
  position: relative;
  display: block;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0.58;
  pointer-events: none;
}

.segmented-control span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 650;
}

.segmented-control input:checked + span {
  background: #eaf1ff;
  color: #1849a9;
}

.segmented-control input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.departure-type-filter {
  position: relative;
  min-width: 210px;
}

.departure-type-filter summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.departure-type-filter summary::-webkit-details-marker {
  display: none;
}

.departure-type-filter summary strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure-type-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 260px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  z-index: 20;
}

.departure-type-menu label {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #344054;
  font-size: 12px;
  cursor: pointer;
}

.departure-type-menu label:hover {
  background: #f8fafc;
}

.departure-type-menu input {
  width: 15px;
  min-height: 15px;
}

.departure-matrix-panel {
  padding: 14px;
}

.departure-matrix-head {
  align-items: center;
}

.departure-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.departure-scale span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.departure-scale-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 4px;
}

.departure-matrix-summary {
  margin-bottom: 4px;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

.departure-matrix-wrap {
  max-height: calc(100vh - 290px);
  min-height: 420px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.departure-matrix-table {
  table-layout: fixed;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.departure-matrix-table th,
.departure-matrix-table td {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  height: 46px;
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.departure-matrix-table.is-weekly th:not(.departure-teacher-column),
.departure-matrix-table.is-weekly td:not(.departure-total-column) {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}

.departure-matrix-table thead th {
  height: 38px;
  padding: 4px;
  background: #f8fafc;
  font-size: 10px;
  line-height: 1.1;
  white-space: normal;
  z-index: 3;
}

.departure-matrix-table .departure-teacher-column {
  position: sticky;
  left: 0;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  padding: 7px 10px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.departure-matrix-table thead .departure-teacher-column {
  background: #f8fafc;
  z-index: 4;
}

.departure-matrix-table .departure-period-boundary {
  border-left: 3px solid #475467;
}

.departure-matrix-table .departure-total-column {
  position: sticky;
  right: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  border-left: 2px solid #cbd5e1;
  background: #f8fafc;
  z-index: 2;
}

.departure-matrix-table thead .departure-total-column {
  z-index: 4;
}

.departure-matrix-table tbody .departure-total-column {
  font-size: 13px;
  font-weight: 760;
}

.departure-matrix-table tbody .departure-teacher-column strong,
.departure-matrix-table tbody .departure-teacher-column span {
  display: block;
}

.departure-matrix-table tbody .departure-teacher-column strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure-matrix-table tbody .departure-teacher-column span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure-count-button {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #182230;
  font-size: 15px;
  font-weight: 760;
  cursor: default;
}

.departure-count-button:focus-visible {
  position: relative;
  outline: 2px solid #1849a9;
  outline-offset: -3px;
  z-index: 1;
}

.departures-count-0 {
  background: #dcfae6;
}

.departures-count-1 {
  background: #fef0c7;
}

.departures-count-2 {
  background: #ffddb8;
}

.departures-count-3 {
  background: #fecaca;
}

.departures-no-data {
  background: #f8fafc;
  color: #98a2b3;
}

.departure-matrix-table td {
  transition: filter 120ms ease;
}

.departure-matrix-table td:hover {
  filter: brightness(0.96);
}

.departure-cell-tooltip {
  position: fixed;
  width: min(310px, calc(100vw - 16px));
  max-height: min(360px, calc(100vh - 16px));
  overflow: auto;
  padding: 10px;
  border: 1px solid #344054;
  border-radius: 7px;
  background: #182230;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.22);
  pointer-events: auto;
  z-index: 100;
}

.departure-tooltip-title {
  font-size: 12px;
  font-weight: 750;
}

.departure-tooltip-period {
  margin-top: 2px;
  color: #cbd5e1;
  font-size: 11px;
}

.departure-tooltip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
  color: #e2e8f0;
  font-size: 10px;
}

.departure-cell-tooltip ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.departure-cell-tooltip li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
}

.departure-cell-tooltip li strong {
  display: block;
  font-weight: 600;
}

.departure-cell-tooltip li small {
  display: block;
  margin: 2px 0 4px;
  color: #cbd5e1;
  font-size: 9px;
}

.departure-cell-tooltip li span {
  color: #cbd5e1;
  white-space: nowrap;
}

.departure-tooltip-empty {
  color: #cbd5e1;
}

.departure-type-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #eaecf0;
  color: #344054;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.departure-cell-tooltip .departure-type-badge {
  color: inherit;
}

.departure-type-true_departure,
.departure-cell-tooltip .departure-type-true_departure {
  border-color: #fda29b;
  background: #fee4e2;
  color: #912018;
}

.departure-type-internal_transfer,
.departure-cell-tooltip .departure-type-internal_transfer {
  border-color: #fec84b;
  background: #fef0c7;
  color: #7a2e0e;
}

.departure-type-technical_transfer,
.departure-cell-tooltip .departure-type-technical_transfer {
  border-color: #84adff;
  background: #dbeafe;
  color: #1849a9;
}

.departure-type-not_departure,
.departure-cell-tooltip .departure-type-not_departure {
  border-color: #75e0a7;
  background: #dcfae6;
  color: #05603a;
}

.departure-details-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.departure-details-dialog::backdrop {
  background: rgba(16, 24, 40, 0.5);
}

.departure-details-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  z-index: 2;
}

.departure-details-head h2 {
  margin: 0 0 2px;
  font-size: 17px;
}

.departure-details-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #475467;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.departure-details-list {
  padding: 10px;
}

.departure-detail-card {
  padding: 11px;
  border-bottom: 1px solid var(--line);
}

.departure-detail-card:last-child {
  border-bottom: 0;
}

.departure-detail-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.departure-detail-main h3 {
  margin: 0;
  font-size: 14px;
}

.departure-detail-subject,
.departure-auto-type {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.departure-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: #344054;
  font-size: 11px;
}

.auth-hidden {
  display: none !important;
}

.departure-manual-editor {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
}

.departure-manual-editor label {
  min-width: 0;
}

.departure-manual-editor label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.departure-manual-editor select,
.departure-manual-editor input {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.departure-override-save {
  min-height: 34px;
  padding: 6px 10px;
}

.departure-save-status {
  min-height: 14px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.departure-details-empty {
  padding: 40px 12px;
  color: var(--muted);
  text-align: center;
}

.chart {
  min-height: 430px;
  overflow-x: auto;
}

/* Menu icons must keep their intrinsic size even before sidebar.css loads. */
svg:not(.bi-sb-icon) {
  width: 100%;
  min-width: 820px;
  height: auto;
}

.axis {
  stroke: #98a2b3;
}

.gridline {
  stroke: #e4e7ec;
}

.tick,
.month-label {
  fill: #475467;
  font-size: 12px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-top: 8px;
  font-size: 13px;
  color: #475467;
}

.legend-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  padding: 5px 7px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}

.legend-button:hover,
.legend-button.highlighted {
  background: #f2f4f7;
  color: #101828;
}

.legend-button.muted {
  opacity: 0.32;
}

.legend-button:focus-visible,
.sort-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.series-bar {
  transition: opacity 140ms ease;
}

.chart.has-highlight .series-bar {
  opacity: 0.14;
}

.chart.has-highlight .series-bar.highlighted {
  opacity: 1;
}

.table-wrap {
  max-height: 520px;
  overflow: auto;
  margin-top: 12px;
}

.progress-table-wrap {
  max-height: calc(100vh - 330px);
  min-height: 420px;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  padding: 0;
  background: #f8fafc;
  color: #475467;
  z-index: 1;
}

.progress-average-row th {
  top: 28px;
  background: #fff;
  color: #344054;
  z-index: 3;
}

.progress-table {
  min-width: 900px;
  width: max-content;
}

.progress-table th,
.progress-table td {
  padding: 5px;
  font-size: 11px;
}

.progress-table th {
  padding: 6px 5px;
  white-space: nowrap;
}

.progress-student-col {
  position: sticky;
  left: 0;
  min-width: 150px;
  max-width: 150px;
  background: #fff;
  z-index: 2;
}

th.progress-student-col {
  background: #f8fafc;
  z-index: 4;
}

.progress-track-col {
  position: sticky;
  left: 150px;
  min-width: 64px;
  max-width: 64px;
  background: #fff;
  z-index: 2;
}

th.progress-track-col {
  background: #f8fafc;
  z-index: 4;
}

.progress-teacher-col {
  position: sticky;
  left: 150px;
  min-width: 120px;
  max-width: 120px;
  background: #fff;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.progress-teacher-col {
  background: #f8fafc;
  z-index: 4;
}

.progress-current-col {
  position: sticky;
  left: 214px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
  background: #fff;
  z-index: 2;
}

th.progress-current-col {
  background: #f8fafc;
  z-index: 4;
}

.progress-senior-view .progress-track-col {
  left: 270px;
}

.progress-senior-view .progress-current-col {
  left: 334px;
}

.progress-week-col {
  min-width: 56px;
  text-align: center;
}

.progress-student-col strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-student-col span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.progress-hw {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  cursor: help;
}

.progress-hw-chip {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.progress-cell {
  position: relative;
  min-width: 56px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #edf1f7;
  background: #fff;
}

.progress-score-edit {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e8eef8;
  color: #344054;
  font-size: 13px;
  line-height: 15px;
  cursor: pointer;
  opacity: 0;
}

.progress-cell:hover .progress-score-edit,
.progress-score-edit:focus-visible {
  opacity: 1;
}

.progress-score-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.2);
}

.progress-score-dialog::backdrop {
  background: rgba(16, 24, 40, 0.34);
}

.progress-score-dialog form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.progress-score-dialog-head,
.progress-score-dialog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-score-dialog-head {
  justify-content: space-between;
}

.progress-score-dialog-head h2,
.progress-score-dialog-head p {
  margin: 0;
}

.progress-score-dialog-head p {
  margin-top: 4px;
  color: #667085;
  font-size: 13px;
}

.progress-score-dialog-note {
  margin: 0;
  color: #667085;
  font-size: 13px;
}

.progress-score-dialog-fields {
  display: grid;
  gap: 10px;
}

.progress-score-dialog-fields label {
  display: grid;
  gap: 5px;
  color: #475467;
  font-size: 13px;
}

.progress-score-dialog-fields .progress-score-no-average {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #344054;
}

.progress-score-no-average input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.progress-score-dialog-fields input:not([type="checkbox"]):not([type="radio"]),
.progress-score-dialog-fields textarea {
  width: 100%;
  box-sizing: border-box;
}

.progress-score-dialog-fields textarea {
  resize: vertical;
}

.progress-score-dialog-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.progress-score-dialog-actions .danger {
  margin-right: auto;
  color: #b42318;
}

.progress-quarter-boundary {
  border-left: 2px solid #8aa4c8 !important;
  box-shadow: inset 1px 0 0 #d8e3f2;
  background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent 18px);
}

.progress-cell-stack {
  min-width: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap: 2px;
  align-items: stretch;
}

.progress-score-chip {
  position: relative;
  min-width: 22px;
  min-height: 20px;
  padding: 2px 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  cursor: help;
  outline: 0;
  white-space: nowrap;
}

.progress-score-chip:hover,
.progress-score-chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
  z-index: 8;
}

.progress-floating-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  width: 420px;
  max-width: min(420px, 88vw);
  padding: 8px 9px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
}

.progress-floating-tooltip.is-visible {
  display: block;
}

.progress-floating-tooltip::after {
  content: "";
  position: absolute;
  left: var(--progress-tooltip-arrow-left, 50%);
  top: 100%;
  border: 6px solid transparent;
  border-top-color: #111827;
  transform: translateX(-50%);
}

.progress-floating-tooltip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #111827;
}

.progress-green {
  background: #c7ebd8;
  color: #14532d;
}

.progress-red {
  background: #f7b6bc;
  color: #7f1d1d;
}

.progress-yellow {
  background: #fde68a;
  color: #713f12;
}

.progress-gray {
  background: #edf2f7;
  color: #475467;
}

.progress-missing {
  background: #f8fafc;
  color: #667085;
  border: 1px dashed #98a2b3;
}

.compliance-good {
  border-color: #75e0a7;
  background: #dcfae6;
  color: #05603a;
}

.compliance-warn {
  border-color: #f7d070;
  background: #fef7c3;
  color: #854a0e;
}

.compliance-bad {
  border-color: #fda29b;
  background: #fee4e2;
  color: #b42318;
}

.reports-trend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.reports-trend-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  background: #edf2f7;
  color: #475467;
}

.reports-teacher-row {
  cursor: pointer;
}

.reports-period-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

.reports-period-button {
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 6px;
  border: 1px solid #d0d5dd;
  background: #fff;
  cursor: pointer;
}

.reports-period-button.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.reports-period-nav {
  padding: 3px 7px;
  font-size: 11px;
}

.reports-period-label {
  min-width: 120px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
}

.reports-status-button {
  padding: 4px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  font: inherit;
  cursor: pointer;
}

.reports-status-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.reports-clickable-row {
  cursor: pointer;
}

.reports-teacher-details td {
  padding: 0 0 12px 24px;
  background: #f8fafc;
}

.reports-subtable {
  width: 100%;
}

.reports-teacher-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.reports-teacher-dialog::backdrop {
  background: rgba(16, 24, 40, 0.5);
}

.reports-teacher-dialog-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  z-index: 3;
}

.reports-teacher-dialog-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
}

.reports-teacher-dialog-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.reports-teacher-dialog-head .icon-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.reports-teacher-dialog-body {
  padding: 14px 16px 16px;
}

.reports-critical-panel .panel-head h2,
.reports-teachers-panel .panel-head h2 {
  color: inherit;
}

.progress-absence {
  background: #dbeafe;
  color: #1e3a8a;
}

.progress-blank {
  background: #fff;
  color: #98a2b3;
}

.progress-report-queue-panel {
  padding: 14px;
}

.progress-report-queue-count {
  min-width: 42px;
  color: var(--ink);
  font-size: 24px;
  text-align: right;
}

.progress-report-queue-wrap {
  max-height: 360px;
  margin-top: 10px;
}

.progress-report-queue-table {
  width: 100%;
  min-width: 680px;
}

.progress-report-queue-table th,
.progress-report-queue-table td {
  padding: 8px 10px;
  font-size: 12px;
}

.progress-report-sort-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.progress-report-sort-button:hover,
.progress-report-sort-button:focus-visible,
.progress-report-sort-button.is-active {
  color: #175cd3;
}

.progress-report-sort-button:focus-visible {
  outline: 2px solid #84adff;
  outline-offset: 2px;
}

.progress-report-sort-indicator {
  margin-left: 3px;
}

.progress-legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #475467;
  font-size: 13px;
}

.progress-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.progress-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.sort-button {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.sort-button:hover {
  background: #eef2f6;
  color: var(--ink);
}

.sort-button.active {
  color: var(--accent);
}

.sort-indicator {
  min-width: 12px;
  color: #98a2b3;
  font-size: 11px;
}

.sort-button.active .sort-indicator {
  color: var(--accent);
}

.table-empty {
  padding: 28px 10px;
  color: var(--muted);
  text-align: center;
}

.makeups-filters {
  grid-template-columns: minmax(260px, 1.5fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr);
}

.senior-makeups-filters {
  grid-template-columns: minmax(260px, 1.5fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr);
}

.makeups-page {
  padding: 16px;
  gap: 10px;
}

.makeups-page .topbar h1 {
  font-size: 26px;
}

.makeups-page .topbar p {
  font-size: 13px;
}

.makeups-page input,
.makeups-page select,
.makeups-page .primary {
  min-height: 34px;
}

.makeups-page .metric {
  min-height: 66px;
  padding: 10px 12px;
}

.makeups-page .metric strong {
  font-size: 23px;
}

.makeups-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.senior-makeups-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.makeups-panel {
  padding: 12px;
}

.makeups-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.makeups-toolbar .absence-legend {
  flex: 1;
  margin-top: 0;
}

.makeups-inline-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 7px;
}

.inline-metric {
  min-height: 48px;
  padding: 6px 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inline-metric span {
  color: var(--muted);
  font-size: 11px;
}

.inline-metric strong {
  font-size: 21px;
}

.metric-attention {
  border-color: #f4c95d;
  background: #fffaf0;
}

.metric-review {
  border-color: #f79009;
  background: #fffaeb;
}

.absence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  color: #475467;
  font-size: 12px;
}

.absence-legend label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.absence-legend input {
  width: 14px;
  height: 14px;
  margin: 0 1px 0 0;
  accent-color: #175cd3;
  cursor: pointer;
}

.absence-legend label:has(input:not(:checked)) {
  opacity: 0.48;
}

.absence-legend .debt-only-filter {
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-weight: 650;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(16, 24, 40, 0.16);
  border-radius: 3px;
}

.makeups-table-wrap {
  max-height: 660px;
  margin-top: 8px;
}

.makeups-table {
  table-layout: fixed;
}

.makeups-table th {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  padding: 6px;
  font-size: 11px;
  white-space: nowrap;
}

.makeups-table .sticky-name {
  position: sticky;
  left: 0;
  width: 192px;
  min-width: 192px;
  max-width: 192px;
  z-index: 3;
}

.makeups-table .sticky-count {
  position: sticky;
  left: 192px;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  z-index: 3;
  text-align: center;
}

.makeups-table thead .sticky-name,
.makeups-table thead .sticky-count {
  z-index: 5;
}

.makeups-table .makeup-period-head {
  width: auto;
  max-width: none;
  border-left: 2px solid #98a2b3;
  color: #344054;
  text-align: left;
}

.makeups-table .period-count {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

.makeups-table .period-previous,
.makeups-table .is-previous-period {
  background-color: #f8fafc;
}

.makeups-table .period-event.is-previous-period {
  opacity: 0.72;
}

.makeups-table .period-count,
.makeups-table .period-event:first-of-type {
  border-left: 2px solid #98a2b3;
}

.student-name,
.pending-count {
  background: #fff;
  vertical-align: middle;
}

.student-name {
  font-weight: 650;
  font-size: 12px;
  line-height: 1.2;
}

.pending-count {
  font-size: 16px;
  font-weight: 750;
}

.pending-count.has-debt {
  background: #fff5f5;
  color: #b42318;
}

.makeup-event {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  min-height: 62px;
  padding: 5px 6px;
  border-left: 3px solid transparent;
  vertical-align: middle;
}

.makeup-event.is-resolved-event {
  opacity: 0.5;
  filter: saturate(0.72);
  transition: opacity 120ms ease, filter 120ms ease;
}

.makeup-event.is-resolved-event:hover,
.makeup-event.is-resolved-event:focus-within {
  opacity: 1;
  filter: none;
}

.event-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.event-date span {
  color: #667085;
  font-size: 10px;
}

.event-date strong {
  font-size: 12px;
  white-space: nowrap;
}

.event-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid rgba(16, 24, 40, 0.12);
  color: #344054;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.event-review-help {
  display: inline-grid;
  width: 15px;
  min-width: 15px;
  height: 15px;
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 9px/1 sans-serif;
}

.event-result.is-completed {
  color: #027a48;
}

.event-result.is-pending,
.event-result.is-urgent {
  color: #b54708;
}

.event-result.is-urgent {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.event-result.is-expired {
  color: #667085;
}

.event-result.is-no-expiry {
  color: #175cd3;
}

.event-result.is-excluded {
  color: #667085;
}

.event-result.is-review {
  color: #b54708;
  font-size: 9px;
}

.event-result.is-burned {
  color: #b42318;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.makeup-event.is-burned-event {
  box-shadow: inset 0 -3px 0 #f04438;
}

.workoff-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-top: 4px;
}

.workoff-date {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.workoff-date.is-conducted {
  color: #027a48;
}

.workoff-date.is-burned {
  color: #b42318;
}

.workoff-date.is-superseded {
  text-decoration: line-through;
  opacity: 0.65;
}

.status-burned {
  background: #fef3f2;
  border-color: #f04438;
}

.category-np-first {
  background: #fff4cc;
  border-left-color: #eaaa08;
}

.category-np-repeat {
  background: #fee4e2;
  border-left-color: #d92d20;
}

.category-up {
  background: #dcfae6;
  border-left-color: #079455;
}

.category-bp {
  background: #e0f2fe;
  border-left-color: #1570ef;
}

.category-unknown {
  background: #f2f4f7;
  border-left-color: #98a2b3;
}

.category-review {
  background: #fffaeb;
  border-left-color: #f79009;
}

.senior-period-block + .senior-period-block {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.senior-period-block.period-previous {
  opacity: 0.72;
}

.senior-period-label {
  display: block;
  margin-bottom: 3px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.empty-event {
  background: #fff;
  border-left-color: transparent;
}

.quality-note {
  min-height: 18px;
  margin-top: 7px;
  color: #667085;
  font-size: 12px;
}

.weekly-summary-panel {
  padding: 12px;
}

.weekly-summary-wrap {
  width: min(720px, 100%);
  max-height: 360px;
  margin-top: 9px;
}

.weekly-summary-table {
  width: 100%;
  min-width: 520px;
}

.weekly-summary-table th,
.weekly-summary-table td {
  padding: 8px 10px;
  font-size: 12px;
}

.weekly-summary-table thead th {
  background: #f8fafc;
  font-weight: 650;
}

.weekly-summary-table tfoot th {
  position: sticky;
  top: auto;
  bottom: 0;
  background: #eef2f6;
  color: var(--ink);
  font-weight: 750;
  z-index: 2;
}

.weekly-number {
  text-align: center;
}

.senior-teachers-wrap,
.senior-students-wrap {
  max-height: 460px;
}

.senior-teachers-table,
.senior-students-table {
  width: 100%;
  min-width: 760px;
}

.senior-students-head {
  align-items: flex-start;
  gap: 14px;
}

.senior-event-legend {
  justify-content: flex-end;
  max-width: 620px;
  margin-top: 0;
}

.senior-event-legend label {
  font-size: 11px;
}

.senior-teacher-row {
  cursor: pointer;
}

.senior-teacher-row:hover td {
  background: #f8fafc;
}

.senior-teacher-row.is-selected td {
  background: #eff8ff;
}

.progress-senior-teachers-wrap {
  max-height: 360px;
}

.progress-senior-teachers-table {
  width: 100%;
  min-width: 560px;
}

.progress-senior-teachers-table th {
  white-space: nowrap;
  font-size: 12px;
}

.progress-senior-teachers-table th:not(:first-child),
.progress-senior-teachers-table td:not(:first-child) {
  width: 1%;
  padding-left: 14px;
  padding-right: 14px;
  text-align: center;
  white-space: nowrap;
}

.progress-senior-teachers-table th.has-hint {
  text-decoration: underline dotted #98a2b3;
  text-underline-offset: 3px;
  cursor: help;
}

.progress-senior-teachers-table td.is-zero {
  color: #c0c6d0;
}

.progress-senior-teacher-row {
  cursor: pointer;
}

.progress-senior-teacher-row:hover td {
  background: #f8fafc;
}

.progress-senior-teacher-row.is-selected td {
  background: #eff8ff;
}

.progress-teacher-accordions {
  display: grid;
  gap: 8px;
}

.progress-teacher-accordion {
  overflow: hidden;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
}

.progress-teacher-accordion.is-open {
  border-color: #84adf4;
  box-shadow: 0 0 0 1px rgb(132 173 244 / 16%);
}

.progress-teacher-accordion-toggle {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 24px;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 18px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #101828;
  text-align: left;
  cursor: pointer;
}

.progress-teacher-accordion-toggle:hover {
  background: #f8fafc;
}

.progress-teacher-accordion-name {
  min-width: 0;
}

.progress-teacher-accordion-name strong,
.progress-teacher-accordion-name small {
  display: block;
}

.progress-teacher-accordion-name strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-teacher-accordion-name small {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
}

.progress-teacher-accordion-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 112px));
  gap: 8px;
}

.progress-teacher-accordion-metrics > span {
  display: grid;
  min-height: 40px;
  align-content: center;
  justify-items: center;
  padding: 3px 7px;
  border-left: 1px solid #eaecf0;
  text-align: center;
}

.progress-teacher-accordion-metrics small {
  color: #667085;
  font-size: 10px;
  white-space: nowrap;
}

.progress-teacher-accordion-metrics strong {
  margin-top: 2px;
  font-size: 13px;
}

.progress-teacher-accordion-chevron {
  color: #667085;
  font-size: 20px;
  line-height: 1;
  transform: rotate(0);
  transition: transform 140ms ease;
}

.progress-teacher-accordion.is-open .progress-teacher-accordion-chevron {
  transform: rotate(180deg);
}

.progress-teacher-accordion-detail {
  border-top: 1px solid #eaecf0;
  background: #fcfcfd;
}

.progress-teacher-detail-table-wrap {
  max-height: 560px;
  border: 0;
  border-radius: 0;
}

.progress-senior-empty {
  min-height: 90px;
}

.has-debt-text {
  color: #b42318;
  font-weight: 750;
}

.has-review-text {
  color: #b54708;
  font-weight: 750;
}

.compact-events {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.compact-event {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 6px;
  border-left: 3px solid transparent;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.has-tooltip {
  position: relative;
  cursor: help;
}

.has-tooltip::after {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: max-content;
  max-width: 240px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #101828;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
  z-index: 10;
}

.has-tooltip:hover::after,
.has-tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.review-panel {
  padding: 12px;
}

.review-queue {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.review-empty {
  min-height: 70px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.review-item {
  padding: 10px;
  border: 1px solid #fedf89;
  border-radius: 8px;
  background: #fffcf5;
}

.review-item.is-resolved {
  border-color: var(--line);
  background: #f8fafc;
  opacity: 0.78;
}

.review-summary,
.review-summary > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-summary {
  justify-content: space-between;
}

.review-summary strong {
  font-size: 13px;
}

.review-summary span,
.review-context,
.review-notes {
  color: var(--muted);
  font-size: 11px;
}

.review-flag {
  padding: 3px 6px;
  border-radius: 5px;
  background: #fef0c7;
  color: #93370d !important;
  font-weight: 650;
}

.review-context,
.review-notes {
  margin-top: 5px;
}

.review-form {
  display: grid;
  grid-template-columns: 150px 200px 160px minmax(180px, 1fr) auto;
  align-items: end;
  gap: 7px;
  margin-top: 8px;
}

.review-form label {
  gap: 3px;
  font-size: 11px;
}

.review-form input,
.review-form select,
.review-save {
  min-height: 30px;
  border-radius: 6px;
  font-size: 11px;
}

.review-save {
  border: 0;
  background: #344054;
  color: #fff;
  padding: 0 10px;
  cursor: pointer;
}

.review-save:disabled {
  opacity: 0.6;
}

.status-compensated {
  background: #d0d5dd;
}

.makeup-event-action {
  width: 100%;
  min-width: 0;
  margin-top: 5px;
  padding: 4px 2px;
  border: 1px solid #98a2b3;
  border-radius: 5px;
  background: #fff;
  color: #344054;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.15;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: pointer;
}

.makeup-action-dialog {
  width: min(460px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(16, 24, 40, 0.24);
}

.makeup-action-dialog::backdrop {
  background: rgba(16, 24, 40, 0.46);
}

.makeup-action-dialog form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.makeup-action-dialog label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
}

.makeup-action-dialog label[hidden] {
  display: none;
}

.makeup-action-dialog select,
.makeup-action-dialog input {
  min-height: 36px;
}

.makeup-action-head,
.makeup-action-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.makeup-action-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.makeup-action-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.dialog-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.makeup-action-footer {
  justify-content: flex-end;
}

.makeup-action-footer button {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.makeup-action-footer button.primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.makeup-action-footer button:disabled {
  opacity: 0.6;
  cursor: default;
}

.makeup-action-error {
  min-height: 16px;
  color: #b42318;
  font-size: 12px;
}

.empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.analytics-page {
  gap: 18px;
}

.analytics-period {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.analytics-period-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 190px)) auto;
  align-items: end;
  gap: 10px;
}

.analytics-period-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
  color: var(--muted);
  font-size: 12px;
}

.analytics-period-meta strong {
  color: #344054;
}

.analytics-source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #475467;
  font-size: 11px;
  font-weight: 650;
}

.source-ready {
  border-color: #abefc6;
  background: #ecfdf3;
  color: #067647;
}

.source-loading,
.source-pending {
  border-color: #fedf89;
  background: #fffaeb;
  color: #b54708;
}

.analytics-section {
  display: grid;
  gap: 12px;
}

.analytics-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.analytics-section-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.analytics-hero-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.analytics-hero-cards .metric {
  min-height: 104px;
}

.metric small {
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.analytics-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.analytics-inline-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.analytics-inline-metrics > div {
  min-height: 66px;
  display: grid;
  align-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.analytics-inline-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.analytics-inline-metrics strong {
  font-size: 23px;
}

.analytics-school-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 14px;
}

.analytics-school-cards .metric {
  min-height: 84px;
}

.analytics-group-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
}

.analytics-group-cards .metric {
  min-height: 82px;
}

.analytics-group-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 14px 0 10px;
}

.analytics-group-toolbar fieldset {
  flex: 0 0 220px;
  min-width: 220px;
  margin: 0;
  padding: 0;
  border: 0;
}

.analytics-group-filters {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(120px, 180px));
  gap: 8px;
}

.analytics-group-multifilter {
  position: relative;
  min-width: 0;
}

.analytics-group-multifilter summary {
  min-height: 34px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 26px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.analytics-group-multifilter summary::-webkit-details-marker {
  display: none;
}

.analytics-group-multifilter summary::after {
  position: absolute;
  top: 11px;
  right: 9px;
  content: "▾";
  color: var(--muted);
  font-size: 10px;
}

.analytics-group-multifilter[open] summary::after {
  transform: rotate(180deg);
}

.analytics-group-multifilter summary span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.analytics-group-multifilter summary strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-group-filter-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 210px);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgb(16 24 40 / 16%);
}

.analytics-group-filter-options label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px;
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.analytics-group-filter-options label:hover {
  background: #f2f4f7;
}

.analytics-group-filter-options input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
}

.group-filter-empty {
  display: block;
  padding: 6px;
  color: var(--muted);
  font-size: 11px;
}

.analytics-group-toolbar legend {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.analytics-group-coverage {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.analytics-groups-table-wrap {
  max-height: 640px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.analytics-groups-table {
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

.analytics-groups-table th,
.analytics-groups-table td {
  min-width: 58px;
  padding: 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  vertical-align: middle;
  font-size: 11px;
}

.analytics-groups-table thead th {
  position: sticky;
  z-index: 4;
  top: 0;
  background: #f8fafc;
  text-align: left;
}

.analytics-groups-table thead th small {
  display: block;
  margin-top: 2px;
  color: #b54708;
  font-size: 9px;
}

.analytics-groups-table thead button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.analytics-groups-table .group-name-column {
  position: sticky;
  z-index: 2;
  left: 0;
  min-width: 150px;
  max-width: 180px;
  background: var(--panel);
}

.analytics-groups-table thead .group-name-column {
  z-index: 6;
  background: #f8fafc;
}

.analytics-groups-table .group-teacher-column {
  min-width: 125px;
  max-width: 155px;
}

.analytics-groups-table .group-subject-column {
  min-width: 95px;
  max-width: 120px;
}

.analytics-groups-table .group-schedule-column {
  min-width: 130px;
  max-width: 165px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.analytics-groups-table .group-change-column {
  min-width: 120px;
  max-width: 165px;
}

.analytics-groups-table .group-capacity-column {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

.group-change-list,
.group-tooltip-changes {
  display: grid;
  gap: 4px;
}

.group-change-list span,
.group-tooltip-changes span {
  line-height: 1.35;
}

.group-change-added {
  color: #067647;
}

.group-change-removed {
  color: #b42318;
}

.group-change-none {
  color: var(--muted);
}

.group-period-cell {
  padding: 0 !important;
  text-align: center;
}

.group-period-cell.group-count-green {
  background: #ecfdf3;
  color: #067647;
}

.group-period-cell.group-count-yellow {
  background: #fffaeb;
  color: #b54708;
}

.group-period-cell.group-count-red {
  background: #fef3f2;
  color: #b42318;
}

.group-period-cell > button {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.group-period-cell > button:hover,
.group-period-cell > button:focus-visible {
  background: #eff8ff;
  outline: 2px solid #84caff;
  outline-offset: -2px;
}

.group-period-cell strong {
  font-size: 15px;
}

.group-period-cell small {
  color: var(--muted);
  font-size: 9px;
}

.analytics-groups-tooltip {
  position: fixed;
  z-index: 1200;
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  overflow-y: auto;
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid #344054;
  border-radius: 7px;
  background: #101828;
  color: #fff;
  box-shadow: 0 14px 32px rgb(16 24 40 / 24%);
}

.analytics-groups-tooltip[hidden] {
  display: none;
}

.analytics-groups-tooltip > span,
.analytics-groups-tooltip > small {
  color: #d0d5dd;
}

.group-tooltip-section {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid #344054;
}

.group-tooltip-section > b {
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}

.group-tooltip-members > span {
  color: #d0d5dd;
  font-size: 11px;
  line-height: 1.45;
}

.analytics-groups-tooltip .group-change-none {
  color: #d0d5dd;
}

.analytics-groups-tooltip .group-change-added {
  color: #6ce9a6;
}

.analytics-groups-tooltip .group-change-removed {
  color: #fda29b;
}

.analytics-conversion-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.analytics-departure-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.analytics-conversion-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
}

.analytics-conversion-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.analytics-conversion-toolbar fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.analytics-conversion-toolbar legend {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.analytics-conversion-toolbar .segmented-control {
  min-height: 38px;
}

.analytics-conversion-toolbar .segmented-control label {
  display: block;
  color: inherit;
}

.analytics-conversion-toolbar .conversion-probation-filter {
  min-height: 40px;
  display: flex;
  align-items: center;
  align-self: end;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  cursor: pointer;
}

.analytics-conversion-toolbar .conversion-probation-filter input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.analytics-conversion-toolbar select {
  width: 100%;
}

.analytics-conversion-table-wrap {
  max-height: 420px;
}

.analytics-conversion-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.analytics-conversion-table th,
.analytics-conversion-table td {
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  white-space: nowrap;
  text-align: center;
}

.analytics-conversion-table .analytics-conversion-senior-col {
  position: sticky;
  left: 0;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.analytics-conversion-table .analytics-conversion-teacher-col {
  position: sticky;
  left: 140px;
  width: 270px;
  min-width: 270px;
  max-width: 270px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.conversion-probation-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid #b2ccff;
  border-radius: 5px;
  background: #eff4ff;
  color: #1849a9;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}

.conversion-probation-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 10px;
}

.conversion-probation-legend i {
  width: 14px;
  height: 10px;
  border: 2px solid #2e90fa;
  border-radius: 3px;
  background: #fff;
}

.analytics-conversion-table td.conversion-probation-period {
  box-shadow: inset 0 0 0 2px #2e90fa;
}

.analytics-conversion-table .analytics-conversion-total-col {
  position: sticky;
  left: 410px;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  z-index: 2;
  box-shadow: 1px 0 0 var(--line);
}

.analytics-conversion-table thead .analytics-conversion-senior-col,
.analytics-conversion-table thead .analytics-conversion-teacher-col,
.analytics-conversion-table thead .analytics-conversion-total-col {
  background: #f8fafc;
  z-index: 4;
}

.analytics-conversion-rate {
  color: #1849a9;
  font-weight: 750;
  cursor: help;
}

.analytics-conversion-sort-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.analytics-conversion-sort-button:hover,
.analytics-conversion-sort-button:focus-visible,
.analytics-conversion-sort-button.is-active {
  color: #175cd3;
}

.analytics-conversion-sort-button:focus-visible {
  outline: 2px solid #84adff;
  outline-offset: 2px;
}

.analytics-departure-table-wrap {
  max-height: 420px;
}

.analytics-departure-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.analytics-departure-table th,
.analytics-departure-table td {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  white-space: nowrap;
  text-align: center;
}

.analytics-departure-table .analytics-departure-senior-col {
  position: sticky;
  left: 0;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.analytics-departure-table .analytics-departure-teacher-col {
  position: sticky;
  left: 190px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.analytics-departure-table .analytics-departure-total-col {
  position: sticky;
  left: 410px;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  background: #fff;
  box-shadow: 1px 0 0 var(--line);
  z-index: 2;
}

.analytics-departure-table thead .analytics-departure-senior-col,
.analytics-departure-table thead .analytics-departure-teacher-col,
.analytics-departure-table thead .analytics-departure-total-col {
  background: #f8fafc;
  z-index: 4;
}

.analytics-departure-value {
  color: #b42318;
  font-weight: 750;
}

.analytics-departure-value[data-departure-detail] {
  cursor: help;
}

.analytics-departure-table td.conversion-probation-period {
  box-shadow: inset 0 0 0 2px #2e90fa;
}

.analytics-departure-tooltip {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 24px));
  overflow: auto;
  padding: 10px 12px;
  border-radius: 7px;
  background: #101828;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.25);
  font-size: 12px;
  line-height: 1.35;
  z-index: 100;
}

.school-metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.school-metric-head button {
  flex: 0 0 auto;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed #98a2b3;
  background: transparent;
  color: #475467;
  font-size: 10px;
  cursor: pointer;
}

.school-metric-head button:hover,
.school-metric-head button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.school-history-dialog {
  width: min(980px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.school-history-dialog::backdrop {
  background: rgba(16, 24, 40, 0.5);
}

.school-history-dialog-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  z-index: 3;
}

.school-history-dialog-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
}

.school-history-dialog-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.school-history-dialog-head .icon-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.school-history-dialog-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 0;
}

.school-history-dialog-toolbar label {
  display: grid;
  gap: 4px;
  width: 160px;
  color: var(--muted);
  font-size: 10px;
}

.school-history-dialog-toolbar select {
  min-height: 34px;
  font-size: 11px;
}

.school-history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 10px;
}

.school-history-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.school-history-legend i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 3px;
}

.school-history-matrix-wrap {
  max-height: 430px;
  margin: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.school-history-matrix {
  table-layout: fixed;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.school-history-matrix th,
.school-history-matrix td {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  height: 58px;
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.school-history-matrix thead th {
  position: sticky;
  top: 0;
  height: 44px;
  padding: 4px;
  background: #f8fafc;
  font-size: 10px;
  line-height: 1.15;
  z-index: 2;
}

.school-history-matrix thead th small {
  display: block;
  margin-top: 2px;
  color: #b54708;
  font-size: 8px;
}

.school-history-matrix .school-history-branch-column {
  position: sticky;
  left: 0;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  padding: 7px 10px;
  background: #fff;
  text-align: left;
  z-index: 2;
}

.school-history-matrix thead .school-history-branch-column {
  background: #f8fafc;
  z-index: 4;
}

.school-history-matrix button {
  width: 100%;
  height: 100%;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.school-history-matrix button strong,
.school-history-matrix button small {
  display: block;
}

.school-history-matrix button strong {
  font-size: 15px;
}

.school-history-matrix button small {
  margin-top: 2px;
  color: #475467;
  font-size: 9px;
}

.school-history-matrix td:hover {
  filter: brightness(0.97);
}

.history-change-up {
  background: #dbeafe;
}

.history-change-down {
  background: #fee4e2;
}

.history-change-flat {
  background: #f2f4f7;
}

.history-change-none {
  background: #fff;
}

.history-period-incomplete {
  box-shadow: inset 0 0 0 2px #fec84b;
}

.school-history-tooltip {
  position: fixed;
  width: 240px;
  padding: 10px;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  background: #101828;
  color: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.2);
  font-size: 11px;
  pointer-events: none;
  z-index: 1000;
}

.school-history-tooltip > strong,
.school-history-tooltip > span,
.school-history-tooltip > small {
  display: block;
}

.school-history-tooltip > span,
.school-history-tooltip > small {
  margin-top: 3px;
  color: #d0d5dd;
}

.school-history-tooltip dl {
  margin: 8px 0 0;
}

.school-history-tooltip dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
}

.school-history-tooltip dt,
.school-history-tooltip dd {
  margin: 0;
}

.school-history-tooltip dd {
  font-weight: 700;
}

.school-history-details {
  margin: 0 16px 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.school-history-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.school-history-details > div span {
  color: var(--muted);
  font-size: 11px;
}

.school-history-details dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.school-history-details dl div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.school-history-details dt {
  color: var(--muted);
  font-size: 9px;
}

.school-history-details dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 750;
}

.school-history-people {
  margin-top: 12px;
}

.school-history-people-component + .school-history-people-component {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.school-history-people-component > h3 {
  margin: 0 0 7px;
  font-size: 12px;
}

.school-history-people-component > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.school-history-people section {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.school-history-people h4 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 10px;
}

.school-history-people h4 span {
  color: var(--muted);
}

.school-history-people ul {
  max-height: 150px;
  margin: 7px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.school-history-people li {
  padding: 4px 0;
  border-top: 1px solid #f2f4f7;
  font-size: 10px;
}

.school-history-people p,
.school-history-people-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.analytics-list {
  display: grid;
  gap: 9px;
}

.analytics-list-row {
  display: grid;
  grid-template-columns: 90px minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.analytics-list-row strong {
  text-align: right;
}

.analytics-list-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #eef2f6;
}

.analytics-list-bar i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #2563eb;
}

.comparison-chart {
  display: grid;
  gap: 16px;
  margin: 18px 0;
}

.comparison-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.comparison-row > strong {
  font-size: 12px;
}

.comparison-bars {
  display: grid;
  gap: 6px;
}

.comparison-bars > div,
.comparison-bars > button {
  display: grid;
  grid-template-columns: 58px minmax(3px, 1fr) 28px;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}

.comparison-bars > button {
  width: 100%;
  padding: 3px 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.comparison-bars > button:hover,
.comparison-bars > button:focus-visible {
  background: #f2f4f7;
  outline: 2px solid #84adff;
  outline-offset: 1px;
}

.comparison-bars span,
.comparison-bars b {
  color: var(--muted);
  font-size: 10px;
}

.comparison-bars b {
  color: #344054;
  text-align: right;
}

.comparison-bars i {
  height: 9px;
  justify-self: start;
  min-width: 3px;
  border-radius: 3px;
}

.bar-blue { background: #2563eb; }
.bar-red { background: #dc2626; }
.bar-muted { background: #98a2b3; }

.movement-details-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.movement-details-dialog::backdrop {
  background: rgba(16, 24, 40, 0.5);
}

.movement-details-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.movement-details-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
}

.movement-details-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.movement-details-head .icon-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.movement-details-table-wrap {
  max-height: 620px;
  margin: 12px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.movement-details-table {
  min-width: 760px;
}

.movement-details-table th,
.movement-details-table td {
  padding: 8px 10px;
  font-size: 11px;
  vertical-align: top;
}

.movement-details-table td:first-child strong,
.movement-details-table td:first-child small {
  display: block;
}

.movement-details-table td:first-child small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.analytics-detail-link {
  color: #1849a9;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.analytics-progress-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.analytics-progress-cards .metric {
  min-height: 58px;
  padding: 9px 10px;
  gap: 5px;
}

.analytics-progress-cards .metric span {
  font-size: 11px;
}

.analytics-progress-cards .metric strong {
  font-size: 22px;
}

.analytics-progress-hierarchy {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.analytics-progress-hierarchy-head {
  color: var(--muted);
  font-size: 11px;
}

.analytics-progress-senior,
.analytics-progress-teacher {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.analytics-progress-senior > summary,
.analytics-progress-teacher > summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 110px minmax(190px, auto);
  align-items: center;
  gap: 10px;
  padding: 9px 28px 9px 10px;
  cursor: pointer;
  list-style: none;
}

.analytics-progress-senior > summary::-webkit-details-marker,
.analytics-progress-teacher > summary::-webkit-details-marker {
  display: none;
}

.analytics-progress-senior > summary {
  position: relative;
  background: #f8fafc;
}

.analytics-progress-senior > summary::after,
.analytics-progress-teacher > summary::after {
  position: absolute;
  right: 11px;
  content: "▾";
  color: var(--muted);
  font-size: 11px;
}

.analytics-progress-senior[open] > summary::after,
.analytics-progress-teacher[open] > summary::after {
  transform: rotate(180deg);
}

.analytics-progress-senior > summary span,
.analytics-progress-teacher > summary span {
  font-weight: 700;
}

.analytics-progress-senior > summary small,
.analytics-progress-teacher > summary small {
  color: var(--muted);
  font-size: 11px;
}

.analytics-progress-teachers {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.analytics-progress-frame-shell {
  padding: 8px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.analytics-progress-frame-shell iframe {
  width: 100%;
  min-height: 760px;
  display: block;
  border: 0;
  background: transparent;
}

.analytics-progress-teacher > summary {
  position: relative;
  grid-template-columns: minmax(180px, 1fr) 70px minmax(160px, auto);
  font-size: 12px;
}

.analytics-progress-detail-wrap {
  margin: 0 8px 8px;
  max-height: 330px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.analytics-progress-detail-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 11px;
}

.analytics-progress-detail-table th,
.analytics-progress-detail-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.analytics-progress-detail-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
}

.analytics-progress-score {
  font-weight: 700;
}

.analytics-progress-score-red { color: #b42318; }
.analytics-progress-score-green { color: #067647; }
.analytics-progress-score-yellow { color: #b54708; }
.analytics-progress-score-gray,
.analytics-progress-score-blank { color: var(--muted); }

.analytics-nps-strip-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.analytics-nps-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  min-width: 620px;
  background: #fff;
}

.analytics-nps-strip > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  border-right: 1px solid var(--line);
}

.analytics-nps-strip > div:last-child {
  border-right: 0;
}

.analytics-nps-strip span {
  color: var(--muted);
  font-size: 11px;
}

.analytics-nps-strip strong {
  font-size: 21px;
}

.analytics-nps-strip .nps-strip-attention strong {
  color: #b42318;
}

.nps-response-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  padding: 8px 12px;
  border-block: 1px solid var(--line);
  background: #f8fafc;
  font-size: 11px;
}

.nps-response-rate > strong {
  margin-right: 4px;
  font-size: 12px;
}

.nps-response-rate span {
  color: var(--muted);
}

.nps-response-rate b {
  margin-left: 4px;
  color: var(--ink);
  font-size: 14px;
}

.nps-response-rate small {
  margin-left: auto;
  color: var(--muted);
}

.analytics-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid #f79009;
  background: #fffaeb;
  color: #7a2e0e;
  font-size: 11px;
}

.analytics-note span {
  color: #93370d;
}

.analytics-nps-disclosures {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.analytics-disclosure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.analytics-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

.analytics-disclosure summary::-webkit-details-marker {
  display: none;
}

.analytics-disclosure summary::after {
  content: "+";
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
}

.analytics-disclosure[open] summary::after {
  content: "−";
}

.analytics-disclosure summary span {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f2f4f7;
  color: #475467;
  font-size: 10px;
}

.analytics-nps-window {
  max-height: 310px;
  border-top: 1px solid var(--line);
}

.analytics-nps-window table {
  min-width: 900px;
}

.analytics-nps-queue-window table {
  min-width: 560px;
}

.nps-queue-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.nps-response-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(320px, 1.6fr) 180px auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.nps-response-search,
.nps-response-sort {
  min-height: 32px;
  font-size: 11px;
}

.nps-response-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.nps-response-filters label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
}

.nps-response-filters input[type="checkbox"] {
  appearance: auto;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #2563eb;
}

.nps-status-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nps-status-filters label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
}

.nps-status-filters input[type="checkbox"] {
  appearance: auto;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  accent-color: #2563eb;
}

.nps-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.nps-status-pending {
  background: #fef0c7;
  color: #93370d;
}

.nps-status-sent,
.nps-status-answered {
  background: #dcfae6;
  color: #067647;
}

.nps-status-unknown {
  background: #f2f4f7;
  color: #344054;
}

.nps-status-select {
  width: auto;
  min-width: 112px;
  min-height: 28px;
  padding: 2px 24px 2px 8px;
  border: 0;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

.nps-status-select:disabled {
  cursor: wait;
  opacity: 0.65;
}

.nps-copy-button {
  min-height: 30px;
  margin-left: auto;
  padding: 5px 9px;
  font-size: 11px;
}

.nps-copy-status {
  min-width: 88px;
  color: #067647;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .nps-response-toolbar {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) 170px;
  }

  .nps-response-toolbar .nps-copy-button {
    margin-left: 0;
  }
}

.analytics-comment {
  max-width: 440px;
  white-space: normal;
}

.attention-signal {
  color: #b42318;
  font-weight: 650;
}

.nps-response-attention {
  background: #fff8f6;
}

.analytics-placeholder {
  min-height: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.analytics-placeholder p {
  max-width: 520px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.analytics-subtitle {
  margin: 16px 0 8px;
  color: #344054;
  font-size: 12px;
}

.analytics-extra-sales-strip {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.analytics-extra-sales-process-strip {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.analytics-extra-sales-result-strip {
  grid-template-columns: repeat(7, minmax(125px, 1fr));
}

.analytics-extra-sales-strip.analytics-extra-sales-result-strip > div {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
  min-height: 58px;
}

.analytics-extra-sales-result-strip strong {
  text-align: right;
}

.analytics-extra-sales-strip > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.analytics-extra-sales-strip > div:last-child {
  border-right: 0;
}

.analytics-extra-sales-strip span {
  color: var(--muted);
  font-size: 10px;
}

.analytics-extra-sales-strip strong {
  font-size: 20px;
}

.analytics-extra-sales-strip .extra-sales-strip-attention {
  background: #fff8f6;
}

.analytics-extra-sales-strip .extra-sales-strip-attention strong {
  color: #b42318;
}

.analytics-extra-sales-strip .extra-sales-strip-review {
  background: #fffaeb;
}

.analytics-extra-sales-strip .extra-sales-strip-review strong {
  color: #b54708;
}

.analytics-extra-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 24px;
  margin-top: 4px;
}

.analytics-extra-sales-stages {
  display: grid;
  gap: 8px;
}

.analytics-extra-sales-stage {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(40px, 1fr) 28px;
  align-items: center;
  gap: 9px;
  font-size: 11px;
}

.analytics-extra-sales-stage i {
  height: 8px;
  overflow: hidden;
  border-radius: 3px;
  background: #eef2f6;
}

.analytics-extra-sales-stage i b {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: #2563eb;
}

.analytics-extra-sales-stage strong {
  text-align: right;
}

.analytics-extra-sales-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.analytics-extra-sales-kinds span {
  padding: 5px 8px;
  border: 1px solid #b2ccff;
  border-radius: 5px;
  background: #eff4ff;
  color: #1849a9;
  font-size: 10px;
  font-weight: 650;
}

.analytics-extra-sales-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.analytics-extra-sales-disclosure {
  margin-top: 16px;
}

.extra-sales-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr)) auto minmax(120px, auto);
  align-items: center;
  gap: 7px;
  padding: 10px 0;
}

.extra-sales-toolbar select {
  width: 100%;
  min-height: 32px;
  padding: 5px 28px 5px 8px;
  font-size: 10px;
}

.extra-sales-toolbar button {
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.extra-sales-toolbar small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
}

.analytics-extra-sales-window {
  max-height: 390px;
  border-top: 1px solid var(--line);
}

.analytics-extra-sales-window table {
  min-width: 1120px;
  font-size: 11px;
}

.extra-sales-stage-select {
  min-width: 150px;
  min-height: 30px;
  padding: 4px 26px 4px 7px;
  font-size: 10px;
}

.extra-sales-items {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 250px;
}

.extra-sales-item {
  display: grid;
  gap: 1px;
  max-width: 180px;
  padding: 5px 7px;
  border: 1px solid #b2ccff;
  border-radius: 5px;
  background: #eff4ff;
  color: #1849a9;
  text-align: left;
  cursor: pointer;
}

.extra-sales-item strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extra-sales-item span,
.extra-sales-item small {
  color: #475467;
  font-size: 8px;
}

.extra-sales-item-static {
  cursor: default;
}

.extra-sales-add-item {
  min-height: 30px;
  padding: 4px 7px;
  font-size: 9px;
}

.extra-sales-dialog {
  width: min(430px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgb(16 24 40 / 20%);
}

.extra-sales-dialog::backdrop {
  background: rgb(16 24 40 / 45%);
}

.extra-sales-dialog form {
  display: grid;
  gap: 13px;
  padding: 16px;
}

.extra-sales-dialog-head,
.extra-sales-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.extra-sales-dialog-actions .extra-sales-delete {
  margin-left: auto;
  border-color: #fecdca;
  color: #b42318;
}

.extra-sales-dialog-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.extra-sales-dialog-head .icon-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  font-size: 20px;
}

.extra-sales-dialog-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.extra-sales-dialog-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.extra-sales-dialog-checks input[type="checkbox"] {
  appearance: auto;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #2563eb;
}

.analytics-extra-sales-window td strong,
.analytics-extra-sales-window td small {
  display: block;
}

.analytics-extra-sales-window td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.extra-sales-status {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.extra-sales-status-overdue {
  background: #fee4e2;
  color: #b42318;
}

.extra-sales-status-payment,
.extra-sales-status-analysis {
  background: #fef0c7;
  color: #93370d;
}

.extra-sales-status-ready {
  background: #dcfae6;
  color: #067647;
}

.extra-sales-status-muted {
  background: #f2f4f7;
  color: #475467;
}

.extra-sales-row-overdue {
  background: #fff8f6;
}

.analytics-extra-sales-unavailable {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #fedf89;
  border-radius: 7px;
  background: #fffaeb;
  color: #93370d;
  font-size: 12px;
}

@media (max-width: 1400px) {
  .departures-matrix-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1250px) {
  .analytics-hero-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-school-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-extra-sales-strip {
    overflow-x: auto;
  }

  .extra-sales-toolbar {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .departures-matrix-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .departure-matrix-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .departure-matrix-summary {
    text-align: left;
  }
}

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

  .topbar {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar > div,
  .topbar p,
  .analytics-page > *,
  .analytics-section,
  .analytics-grid-two,
  .analytics-grid-two > *,
  .analytics-attention-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .topbar p {
    overflow-wrap: anywhere;
  }

  .topbar .primary {
    width: 100%;
  }

  .filters,
  .cards,
  .grid,
  .departure-metrics,
  .analytics-grid-two,
  .analytics-progress-cards,
  .analytics-conversion-cards,
  .analytics-conversion-toolbar,
  .analytics-hero-cards,
  .analytics-school-cards {
    grid-template-columns: 1fr;
  }

  .analytics-group-cards {
    grid-template-columns: 1fr;
  }

  .analytics-group-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-group-filters {
    grid-template-columns: 1fr;
  }

  .analytics-group-toolbar fieldset {
    min-width: 0;
    flex: 0 0 auto;
  }

  .analytics-group-coverage {
    text-align: left;
  }

  .analytics-progress-senior > summary,
  .analytics-progress-teacher > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .analytics-progress-senior > summary small,
  .analytics-progress-teacher > summary small {
    grid-column: 1 / -1;
  }

  .analytics-extra-sales-grid {
    grid-template-columns: 1fr;
  }

  .school-history-dialog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .school-history-details dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .school-history-people-component > div {
    grid-template-columns: 1fr;
  }

  .extra-sales-toolbar {
    grid-template-columns: 1fr;
  }

  .extra-sales-toolbar small {
    grid-column: 1;
  }


  .analytics-period,
  .analytics-placeholder {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-period-fields,
  .analytics-inline-metrics {
    grid-template-columns: 1fr;
  }

  .analytics-period-meta {
    display: grid;
    justify-content: flex-start;
  }

  .analytics-period-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .departure-head {
    align-items: stretch;
    flex-direction: column;
  }

  .departure-filters {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .departures-matrix-filters {
    grid-template-columns: 1fr;
  }

  .departure-matrix-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .departure-matrix-summary {
    text-align: left;
  }

  .departure-matrix-wrap {
    max-height: 620px;
    min-height: 360px;
  }

  .departure-matrix-table .departure-teacher-column {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }

  .departure-type-menu {
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 40px));
  }

  .departure-manual-editor {
    grid-template-columns: 1fr;
  }

  .makeups-table .sticky-name {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
  }

  .makeups-table .sticky-count {
    left: 145px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
  }

  .review-summary,
  .review-summary > div {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .makeups-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .makeups-inline-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .senior-makeups-cards {
    grid-template-columns: 1fr;
  }

  .senior-students-head {
    flex-direction: column;
  }

  .senior-event-legend {
    justify-content: flex-start;
    max-width: none;
  }

  .progress-teacher-accordion-toggle {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 8px;
  }

  .progress-teacher-accordion-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .progress-teacher-accordion-chevron {
    grid-column: 2;
    grid-row: 1;
  }
}
/* Authentication */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background: #eef3f7;
}

.login-shell {
  width: min(100% - 32px, 380px);
}

.login-panel {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid #cbd5df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(25, 39, 52, 0.12);
}

.login-panel h1 {
  margin: 4px 0 0;
  font-size: 28px;
}

.login-panel label {
  display: grid;
  gap: 6px;
}

.login-panel input {
  width: 100%;
  min-height: 42px;
}

.login-panel .status {
  min-height: 20px;
  margin: 0;
  color: #b42318;
}

.auth-account {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.auth-account strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}

.auth-account button {
  width: 100%;
}

/* School schedule */
.school-schedule-page { gap: 14px; padding: 16px; }
.school-schedule-head { align-items: flex-end; }
.school-schedule-toolbar { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(135px, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid #d9e0ea; border-radius: 7px; background: #fff; }
.schedule-week-controls { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; }
.schedule-week-controls button { width: 34px; height: 34px; padding: 0; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #344054; font-size: 18px; cursor: pointer; }
.schedule-week-controls strong { flex: 1; color: #182230; font-size: 13px; text-align: center; }
.school-schedule-toolbar label { display: grid; gap: 3px; color: #667085; font-size: 10px; font-weight: 700; }
.school-schedule-toolbar select { min-width: 0; height: 36px; padding: 4px 26px 4px 8px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #182230; font: inherit; font-size: 12px; }
.school-schedule-toolbar .status { align-self: center; white-space: nowrap; }
.schedule-synced-at { align-self: center; white-space: nowrap; color: #98a2b3; font-size: 10px; }
.school-schedule-panel { overflow-x: auto; border: 1px solid #d9e0ea; border-radius: 7px; background: #fff; }
.school-schedule-selection { display: grid; min-height: 340px; place-items: center; padding: 24px; color: #667085; font-size: 13px; text-align: center; }
.school-schedule-grid { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); min-width: 0; }
.school-schedule-times { padding-top: 37px; border-right: 1px solid #d9e0ea; background: #f8fafc; }
.school-schedule-hour { height: 42px; padding: 2px 7px 0 0; border-top: 1px solid #e4e9f0; color: #667085; font-size: 10px; text-align: right; }
.school-schedule-day { min-width: 0; border-right: 1px solid #d9e0ea; }
.school-schedule-day:last-child { border-right: 0; }
.school-schedule-day header { height: 37px; padding: 10px 8px; border-bottom: 1px solid #d9e0ea; background: #f8fafc; color: #344054; font-size: 11px; font-weight: 750; text-transform: capitalize; }
.school-schedule-day.is-today header { background: #fef6e0; color: #93650a; }
.school-schedule-day.is-today .school-schedule-day-body { background-color: #fffdf5; }
.school-schedule-day-body { position: relative; height: 588px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, #e4e9f0 41px, #e4e9f0 42px); }
.school-schedule-now-line { position: absolute; z-index: 4; right: 0; left: 0; height: 0; border-top: 2px solid #e03131; pointer-events: none; }
.school-schedule-now-line span { position: absolute; top: -8px; left: 2px; padding: 0 3px; border-radius: 3px; background: #e03131; color: #fff; font-size: 8px; font-weight: 700; line-height: 15px; }
.school-schedule-card { position: absolute; z-index: 1; display: grid; align-content: start; gap: 0; overflow: hidden; padding: 3px 4px; border: 1px solid var(--subject-border, #b8a9a2); border-bottom: 3px solid var(--subject-bar, #9d9d9d); border-radius: 3px; background: var(--subject-bg, #fff8f4); color: #182230; text-align: left; cursor: pointer; }
.school-schedule-card:hover { z-index: 3; border-color: #175cd3; background: #eff4ff; }
.school-schedule-card.is-group { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.school-schedule-card strong { font-size: 9px; line-height: 1.05; white-space: nowrap; }
.school-schedule-card i, .school-schedule-card b { margin-right: 2px; font-style: normal; font-weight: 400; }
.school-schedule-card em { float: right; font-style: normal; white-space: nowrap; }
.school-schedule-card em i { margin: 0 0 0 2px; }
.school-schedule-card .schedule-status-box { margin-right: 3px; color: #98a2b3; font-size: 11px; }
.school-schedule-card .schedule-status-box.is-complete { color: #027a48; }
.schedule-icon-stop { color: #b42318; }
.school-schedule-card b { margin-right: 1px; margin-left: 4px; }
.school-schedule-card span { display: -webkit-box; overflow: hidden; color: #344054; font-size: 10px; font-weight: 750; line-height: 1.05; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.school-schedule-card small { overflow: hidden; color: #667085; font-size: 8px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.school-schedule-card.is-short span { -webkit-line-clamp: 1; }
.school-schedule-card.is-cancelled { border-color: #d0a5a0; border-bottom-color: #b42318; background: #fff5f4; opacity: .78; }
.school-schedule-card.is-cancelled span, .school-schedule-card.is-cancelled small { text-decoration: line-through; }
.school-schedule-card.is-covered { opacity: .55; border-style: dashed; }
.school-schedule-card .schedule-covered-note { font-style: italic; }
.schedule-lesson-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 22px; border: 0; border-radius: 8px; box-shadow: 0 24px 80px rgba(16, 24, 40, .28); }
.schedule-lesson-dialog::backdrop { background: rgba(16, 24, 40, .44); }
.schedule-dialog-close { float: right; width: 32px; height: 32px; padding: 0; border: 1px solid #d0d5dd; border-radius: 5px; background: #fff; color: #344054; font-size: 22px; cursor: pointer; }
.schedule-progress-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.schedule-progress-fields[hidden] { display: none; }
.schedule-field-label { color: #667085; font-size: 9px; font-weight: 700; white-space: nowrap; }
.schedule-student-form .schedule-field { display: flex; flex-direction: column; gap: 4px; }
.schedule-field textarea { flex: 1; min-height: 46px; }
.schedule-homework-status { display: flex; gap: 12px; }
.schedule-score-group { display: flex; flex-direction: column; gap: 8px; }
.schedule-score-field { display: flex; flex-direction: column; gap: 4px; }
.schedule-score-input-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.schedule-score-field .schedule-score-input-row > input { width: 100%; }
.schedule-student-form .schedule-no-score { display: flex; align-items: center; gap: 4px; color: #667085; font-size: 9px; font-weight: 600; white-space: nowrap; }
.schedule-student-form .schedule-no-score input[type="checkbox"] { width: 13px; min-width: 13px; height: 13px; min-height: 0; padding: 0; flex: none; }
.schedule-student-form .required { margin-left: 2px; color: #b42318; }
.schedule-dialog-kicker { margin: 0 38px 6px 0; color: #667085; font-size: 12px; font-weight: 700; }
.schedule-lesson-dialog h2 { margin: 0; color: #182230; font-size: 22px; }
.schedule-dialog-time { margin: 5px 0 16px; color: #475467; }
.schedule-lesson-dialog dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.schedule-lesson-dialog dl div { padding: 9px 10px; border: 1px solid #e4e9f0; border-radius: 5px; background: #f8fafc; }
.schedule-lesson-dialog dt { color: #667085; font-size: 10px; font-weight: 700; }
.schedule-lesson-dialog dd { margin: 3px 0 0; color: #182230; font-size: 12px; font-weight: 700; }
.schedule-lesson-dialog h3 { margin: 0 0 7px; font-size: 14px; }
.schedule-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 7px; }
.schedule-report-head h3 { margin: 0; }
.schedule-report-head button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.schedule-student-forms { display: grid; gap: 8px; }
.schedule-student-form { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 9px; border: 1px solid #e4e9f0; border-radius: 5px; }
.schedule-student-form legend { padding: 0 3px; color: #182230; font-size: 12px; font-weight: 750; }
.schedule-student-form label { display: grid; gap: 3px; color: #667085; font-size: 9px; font-weight: 700; }
.schedule-student-form .schedule-present-toggle { display: flex; align-items: center; gap: 6px; color: #182230; font-size: 12px; font-weight: 700; }
.schedule-student-form .schedule-present-toggle input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; flex: none; }
.schedule-reason-select { max-width: 280px; height: 30px; padding: 3px 6px; }
.schedule-reason-select[hidden] { display: none; }
.schedule-absence-field { max-width: 560px; margin-top: 8px; }
.schedule-absence-field[hidden] { display: none; }
.schedule-absence-field textarea { width: 100%; }
.schedule-comment-field { display: grid; gap: 3px; margin-top: 2px; color: #667085; font-size: 9px; font-weight: 700; }
.schedule-comment-field textarea { min-height: 46px; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #182230; font: inherit; font-size: 11px; resize: vertical; }
.schedule-comment-field input { height: 30px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #182230; font: inherit; font-size: 11px; }
.schedule-student-form select, .schedule-student-form input, .schedule-student-form textarea { width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #182230; font: inherit; font-size: 11px; }
.schedule-student-form select, .schedule-student-form input { height: 30px; padding: 3px 6px; }
.schedule-student-form textarea { min-height: 46px; padding: 5px 6px; resize: vertical; }
.schedule-student-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.schedule-student-list li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #e4e9f0; border-radius: 5px; }
.schedule-student-list strong { color: #182230; font-size: 12px; }
.schedule-student-list span, .schedule-readonly { color: #667085; font-size: 11px; }
.schedule-readonly { margin: 14px 0 0; padding: 9px 10px; border-radius: 5px; background: #fff7ed; }

@media (max-width: 720px) {
  .school-schedule-head { align-items: stretch; flex-direction: column; }
  .school-schedule-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-schedule-toolbar .schedule-week-controls,
  .school-schedule-toolbar .status { grid-column: 1 / -1; }
  .schedule-student-form { grid-template-columns: 1fr; }
  .schedule-progress-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lesson control prototype */
.lesson-control-page {
  gap: 14px;
  padding: 16px;
}

.lesson-control-head {
  align-items: flex-end;
}

.lesson-control-eyebrow {
  margin-bottom: 4px;
  color: #175cd3;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lesson-control-actions {
  display: flex;
  gap: 8px;
}

.lesson-room-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #b8c6d9;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  font-weight: 700;
  text-decoration: none;
}

.lesson-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #d9e0ea;
  border-radius: 7px;
  background: #fff;
}

.lesson-context > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 14px;
  border-right: 1px solid #e4e9f0;
}

.lesson-context > div:last-child {
  border-right: 0;
}

.lesson-context span,
.lesson-control-metric small {
  color: #667085;
  font-size: 11px;
}

.lesson-context strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-context select {
  width: 100%;
  min-height: 30px;
  padding: 3px 28px 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  color: #182230;
  font: inherit;
  font-size: 13px;
}

.lesson-control-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lesson-control-metric {
  min-height: 98px;
  padding: 14px;
}

.lesson-control-metric strong {
  font-size: 28px;
}

.lesson-control-panel {
  padding: 14px;
}

.lesson-control-panel-head p {
  margin: 3px 0 0;
  color: #667085;
  font-size: 12px;
}

.lesson-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lesson-empty {
  padding: 22px;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  text-align: center;
}

.lesson-day {
  overflow: hidden;
  border: 1px solid #d9e0ea;
  border-radius: 7px;
  background: #fff;
}

.lesson-day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.lesson-day-summary::marker {
  color: #667085;
}

.lesson-day[open] .lesson-day-summary {
  border-bottom: 1px solid #d9e0ea;
  background: #eff4ff;
}

.lesson-day-summary strong {
  color: #182230;
  text-transform: capitalize;
}

.lesson-day-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e4e7ec;
  color: #475467;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.lesson-day[open] .lesson-day-count {
  background: #d1e0ff;
  color: #175cd3;
}

.lesson-day-list {
  display: grid;
}

.lesson-day-list .lesson-row {
  border: 0;
  border-radius: 0;
}

.lesson-day-list .lesson-row + .lesson-row {
  border-top: 1px solid #e4e9f0;
}

.lesson-row {
  overflow: hidden;
  border: 1px solid #d9e0ea;
  border-radius: 7px;
  background: #fff;
}

.lesson-row-main {
  display: grid;
  grid-template-columns: 105px minmax(180px, 1.3fr) repeat(5, minmax(88px, 0.65fr)) 118px 86px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
}

.lesson-call-main {
  grid-template-columns: 105px minmax(220px, 1fr) repeat(3, minmax(100px, 0.45fr)) 86px;
}

.recording-main {
  display: grid;
  grid-template-columns: 105px minmax(220px, 1fr) 90px 110px 90px 130px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
}

.lesson-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #b8c6d9;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.lesson-download:hover {
  border-color: #84adff;
  color: #175cd3;
}

.lesson-download:disabled {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #98a2b3;
  cursor: wait;
}

.lesson-schedule-main {
  display: grid;
  grid-template-columns: 112px minmax(220px, 1fr) minmax(110px, 0.45fr) 92px 170px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.lesson-schedule-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lesson-schedule-meta span {
  color: #667085;
  font-size: 10px;
}

.lesson-schedule-meta strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-time,
.lesson-people,
.lesson-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lesson-time strong,
.lesson-people strong {
  overflow: hidden;
  color: #182230;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-time span,
.lesson-people span,
.lesson-stat span {
  color: #667085;
  font-size: 10px;
}

.lesson-stat strong {
  font-size: 12px;
}

.tone-good {
  color: #067647;
}

.tone-warn {
  color: #b54708;
}

.tone-bad {
  color: #b42318;
}

.tone-neutral {
  color: #667085;
}

.recording-toggle {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.recording-toggle:has(input:checked) {
  border-color: #84adff;
  background: #eff4ff;
  color: #175cd3;
}

.recording-toggle input {
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #175cd3;
  cursor: pointer;
}

.recording-readonly {
  justify-self: stretch;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.lesson-demo-panel {
  border-color: #d6bbfb;
  background: #fcfaff;
}

.lesson-demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #d6bbfb;
  border-radius: 999px;
  background: #f4ebff;
  color: #6941c6;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.lesson-row-demo-badge {
  justify-self: center;
}

.lesson-completed-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #e9d7fe;
  border-radius: 6px;
  background: #fff;
  color: #667085;
  font-size: 11px;
}

.lesson-completed-summary strong {
  margin-left: 4px;
  color: #344054;
}

.lesson-expand {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.lesson-details {
  padding: 12px;
  border-top: 1px solid #e4e9f0;
  background: #f8fafc;
}

.lesson-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 10px;
  color: #667085;
  font-size: 11px;
}

.lesson-detail-summary strong {
  margin-left: 4px;
  color: #344054;
}

.lesson-participant-table th,
.lesson-participant-table td {
  padding: 8px 10px;
  font-size: 11px;
}

.lesson-participant-table small {
  margin-left: 3px;
  color: #667085;
}

@media (max-width: 1100px) {
  .lesson-schedule-main {
    grid-template-columns: 100px minmax(190px, 1fr) 100px 160px;
  }

  .lesson-schedule-main .lesson-schedule-meta:nth-of-type(4) {
    display: none;
  }

  .lesson-row-main {
    grid-template-columns: 100px minmax(180px, 1fr) repeat(3, minmax(90px, 0.7fr));
  }

  .lesson-call-main {
    grid-template-columns: 100px minmax(180px, 1fr) repeat(2, minmax(90px, 0.7fr)) 86px;
  }

  .recording-main {
    grid-template-columns: 100px minmax(180px, 1fr) 90px 110px;
  }

  .lesson-row-main .lesson-stat:nth-of-type(4),
  .lesson-row-main .lesson-stat:nth-of-type(5) {
    display: none;
  }
}

@media (max-width: 720px) {
  .lesson-control-head,
  .lesson-control-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-context,
  .lesson-control-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-context > div {
    border-bottom: 1px solid #e4e9f0;
  }

  .lesson-row-main {
    grid-template-columns: 88px minmax(0, 1fr) 84px;
  }

  .lesson-call-main {
    grid-template-columns: 88px minmax(0, 1fr) 84px;
  }

  .recording-main {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .recording-main .lesson-stat,
  .recording-main .lesson-download {
    grid-column: 1 / -1;
  }

  .lesson-schedule-main {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .lesson-schedule-main .lesson-schedule-meta {
    display: none;
  }

  .lesson-schedule-main .recording-toggle,
  .lesson-schedule-main .recording-readonly {
    grid-column: 1 / -1;
  }

  .lesson-stat {
    display: none;
  }

  .recording-toggle {
    grid-column: 1 / 3;
  }

  .lesson-expand {
    grid-column: 3;
    grid-row: 2;
  }
}

.tutor-main-filters label[hidden] {
  display: none;
}

/* Отток по школе (school-churn.js) */
.school-churn-panel { --kind-other: #5b8def; --kind-newbie: #f5a524; --kind-teacher_left: #e5484d; --kind-graduate: #b4bccc; }
.school-churn-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.school-churn-toolbar { flex-wrap: wrap; }
.school-churn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 4px; color: var(--muted); font-size: 13px; }
.school-churn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.school-churn-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.school-churn-legend b { color: var(--ink); }
.school-churn-panel .kind-other { background: var(--kind-other); }
.school-churn-panel .kind-newbie { background: var(--kind-newbie); }
.school-churn-panel .kind-teacher_left { background: var(--kind-teacher_left); }
.school-churn-panel .kind-graduate { background: var(--kind-graduate); }
.school-churn-chart { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding: 22px 2px 6px; }
.school-churn-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 8px; background: none; padding: 4px 2px; cursor: pointer; font: inherit; color: var(--ink); }
.school-churn-col:hover, .school-churn-col.is-selected { border-color: var(--line); background: var(--soft); }
.school-churn-col.is-fresh .school-churn-stack { opacity: 0.45; }
.school-churn-plot { position: relative; width: 100%; height: 180px; display: flex; justify-content: center; }
.school-churn-stack { width: 60%; max-width: 34px; height: 100%; display: flex; flex-direction: column-reverse; }
.school-churn-stack i { display: block; width: 100%; }
.school-churn-stack i:last-child { border-radius: 4px 4px 0 0; }
.school-churn-plot b { position: absolute; left: 50%; transform: translate(-50%, 50%); font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--panel); border: 1px solid var(--ink); border-radius: 10px; padding: 0 5px; line-height: 16px; }
.school-churn-count { font-weight: 600; font-size: 13px; }
.school-churn-month { color: var(--muted); font-size: 12px; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.school-churn-table tbody tr { cursor: pointer; }
.school-churn-table tbody tr:hover, .school-churn-table tbody tr.is-selected { background: var(--soft); }
.school-churn-table tr.is-fresh td { color: var(--muted); }
.school-churn-fresh { font-size: 11px; border: 1px dashed var(--muted); border-radius: 8px; padding: 0 6px; }
.school-churn-leavers { margin-top: 14px; }
.school-churn-leavers-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.school-churn-kind { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 12px; color: #fff; white-space: nowrap; }
.school-churn-kind.kind-graduate { color: var(--ink); }
@media (max-width: 760px) { .school-churn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.school-churn-count small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); text-align: center; }

/* Мои ученики (личное расписание, вне метрик школы) */
.personal-chip { border: 0; cursor: pointer; font: inherit; }
.personal-chip.is-made-up { text-decoration: line-through; opacity: .6; }
.personal-simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.personal-simple-table th, .personal-simple-table td { padding: 6px 8px; border-bottom: 1px solid #eaecf0; text-align: left; white-space: nowrap; }
.personal-lessons-fold > summary { cursor: pointer; list-style: none; }
.personal-lessons-fold > summary h2 { display: inline; }
.personal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.personal-students-page .progress-student-col { min-width: 190px; max-width: 190px; }
.personal-students-page .progress-current-col { left: 190px; min-width: 84px; max-width: 84px; }
.personal-students-page [hidden] { display: none !important; }
.personal-students-page .progress-score-dialog-fields .progress-score-no-average { display: flex; align-items: center; gap: 8px; }
.personal-students-page .progress-score-dialog-fields input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.personal-math-score-fields { display: grid; gap: 10px; }
.personal-history-filter { margin: 8px 0; }
.personal-history-filter label { display: inline-grid; gap: 4px; }
.personal-history-note { white-space: normal !important; max-width: 320px; color: #475467; }

.role-frame-title {
  margin: 20px 0 4px;
  font-size: 20px;
}

.role-frame-title[hidden] {
  display: none;
}

.role-frame-fold {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.role-frame-fold[hidden] {
  display: none;
}

.role-frame-fold > summary.role-frame-title {
  margin: 0;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.role-frame-fold[open] > summary.role-frame-title {
  border-bottom: 1px solid var(--line);
}

/* Репетитору в «Успеваемости» не нужны фильтры старшего/преподавателя/ученика. */
.is-tutor-embed label:has(#progressSeniorSelect),
.is-tutor-embed label:has(#progressTeacherSelect),
.is-tutor-embed label:has(#progressStudentInput) {
  display: none;
}

/* Зона риска по успеваемости (risk-students.js) */
.risk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.risk-score { color: #e5484d; font-size: 15px; }
.risk-table td { vertical-align: middle; }
.risk-switch { max-width: 320px; margin-bottom: 14px; }
.personal-tabs { grid-template-columns: repeat(3, minmax(96px, 1fr)); width: min(100%, 420px); }
.personal-tabs span { padding: 0 14px; }
.personal-head-actions { display: flex; align-items: center; gap: 10px; }
.personal-contacts { color: #475467; white-space: normal; min-width: 180px; }
.personal-contacts small { display: block; color: #98a2b3; }
.personal-billing-table input, .personal-billing-table select { width: 100%; min-width: 70px; font: inherit; padding: 2px 4px; }
.personal-billing-table tfoot td { font-weight: 600; border-top: 2px solid #d0d5dd; }

/* «Мои ученики»: вёрстка под половину экрана (iframe ~700–950px) */
.personal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.personal-panel-stack { display: grid; gap: 16px; min-width: 0; }
.personal-students-page .personal-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.personal-students-page .personal-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.personal-students-page .personal-cards .metric { min-height: 0; padding: 10px 12px; gap: 4px; }
.personal-students-page .personal-cards .metric strong { font-size: 22px; }
.personal-students-page .panel-head { flex-wrap: wrap; }
.personal-students-page .panel-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.personal-students-page .panel-head p { color: var(--muted); font-size: 13px; }
.personal-students-page .progress-legend { flex-wrap: wrap; }
.personal-lessons-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.personal-lessons-fold > summary { align-items: center; }
.personal-lessons-fold > summary::before { content: "›"; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; transition: transform .15s; }
.personal-lessons-fold[open] > summary::before { transform: rotate(90deg); }
.personal-lessons-fold > summary:hover::before { background: #f2f4f7; }
.personal-lessons-fold > summary::-webkit-details-marker { display: none; }
.personal-fold-hint { color: var(--muted); font-size: 13px; }
.personal-status-chip { border: 0; cursor: pointer; font: inherit; }
.personal-status-chip:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(16, 24, 40, .12); }
@media (max-width: 1000px) {
  .personal-students-page .progress-student-col { min-width: 150px; max-width: 150px; }
  .personal-students-page .progress-current-col { left: 150px; min-width: 64px; max-width: 64px; }
  .personal-students-page .progress-student-col strong { white-space: normal; }
}
.personal-students-page .progress-table-wrap { min-height: 0; max-height: 70vh; }
@media (max-width: 1000px) {
  .personal-simple-table:not(.personal-billing-table) :is(th, td) { white-space: normal; }
  .personal-simple-table td:has(> button) { white-space: nowrap; }
}
.personal-students-page .personal-simple-table:not(.personal-billing-table) { min-width: 560px; }
.personal-billing-table input, .personal-billing-table select { min-height: 30px; }
.personal-month-field { display: grid; gap: 6px; font-size: 13px; }
.personal-month-stepper { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.personal-month-stepper button { min-height: 40px; min-width: 40px; font-size: 20px; line-height: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.personal-month-stepper button:hover { border-color: var(--accent); color: var(--accent); }
.personal-month-stepper .personal-month-today { font-size: 13px; padding: 0 12px; }
.personal-month-stepper strong { min-width: 130px; text-align: center; font-size: 15px; }
.personal-students-page .personal-filters .personal-month-field { grid-column: span 2; }
.personal-billing-student { cursor: pointer; }
.personal-billing-student:hover td { background: #f9fafb; }
.personal-billing-toggle { border: 0; background: none; padding: 0 4px; cursor: pointer; font: inherit; color: #475467; }
.personal-billing-subject td { color: #475467; }
.personal-billing-subject td:first-child { padding-left: 36px; }
.personal-billing-subject input { width: 90px; min-width: 0; }
.personal-paid { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.personal-paid.is-paid { background: #dcfae6; color: #067647; }
.personal-paid.is-unpaid { background: #fee4e2; color: #b42318; }
.personal-billing-table .personal-billing-name { width: 1%; }
.personal-billing-student td:first-child { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.personal-billing-amount { text-align: right; white-space: nowrap; }
.personal-warning { color: #b42318; }

/* ===== Аналитика: компактная раскладка (в т.ч. пол-экрана) ===== */
.analytics-body .analytics-page { gap: 14px; }
.analytics-body .panel { padding: 14px 16px; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.analytics-body .panel-head h2 { font-size: 17px; }
.analytics-body .panel-head p { margin-top: 3px; max-width: 78ch; font-size: 12px; line-height: 1.45; }
.analytics-body .metric { border-radius: 9px; }
.analytics-body .panel-head > .status { max-width: 40%; font-size: 12px; text-align: right; }
.analytics-body .analytics-page > section[id] { scroll-margin-top: 58px; }

.analytics-jumpbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  margin: -4px -24px 0;
  padding: 8px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(245, 247, 251, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.analytics-jumpbar::-webkit-scrollbar { display: none; }
.analytics-jumpbar a {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.analytics-jumpbar a:hover { border-color: #b2ccff; color: #1849a9; }
.analytics-jumpbar a.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.analytics-body .analytics-progress-senior > summary span { color: var(--muted); font-size: 12px; font-weight: 600; }
.analytics-progress-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.analytics-progress-badges b {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.analytics-progress-badges b.is-risk { background: #fef3f2; color: #b42318; }
.analytics-progress-badges b.is-missing { background: #fffaeb; color: #b54708; }

@media (max-width: 1280px) {
  .analytics-body { grid-template-columns: minmax(0, 1fr); }
  .analytics-body .sidebar {
    position: static;
    min-width: 0;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
  }
  .analytics-body .sidebar > div:first-child .muted { display: none; }
  .analytics-body .brand { font-size: 16px; white-space: nowrap; }
  .analytics-body .sidebar nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .analytics-body .sidebar nav::-webkit-scrollbar { display: none; }
  .analytics-body .nav-button { min-height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; border-color: transparent; }
  .analytics-body .sidebar > :last-child:not(nav):not(:first-child) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    white-space: nowrap;
  }
  .analytics-body .sidebar > :last-child:not(nav):not(:first-child) button { width: auto; min-height: 28px; padding: 0 10px; }
  .analytics-body .page { padding: 16px; }
  .analytics-jumpbar { margin: -2px -16px 0; padding: 8px 16px; }
}

@media (max-width: 980px) {
  html:has(.analytics-body),
  .analytics-body { overflow-x: clip; }
  .analytics-body .topbar { flex-direction: row; align-items: center; }
  .analytics-body .topbar .primary { width: auto; }
  .analytics-body h1 { font-size: 24px; }
  .analytics-body .topbar p { font-size: 12px; }
  .analytics-body .analytics-period { flex-direction: column; align-items: stretch; gap: 10px; }
  .analytics-body .analytics-period-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .analytics-body .analytics-period-meta { flex-direction: row; justify-content: flex-start; }
  .analytics-body .cards,
  .analytics-body .analytics-hero-cards,
  .analytics-body .analytics-school-cards,
  .analytics-body .analytics-group-cards,
  .analytics-body .analytics-progress-cards,
  .analytics-body .analytics-conversion-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .analytics-body .metric { min-height: 0; gap: 6px; padding: 11px 12px; }
  .analytics-body .metric strong { font-size: 22px; }
  .analytics-body .analytics-grid-two { grid-template-columns: 1fr; }
  .analytics-body .analytics-progress-senior > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .analytics-body .analytics-progress-senior > summary small { grid-column: auto; grid-row: 1 / span 2; grid-column-start: 2; }
}

@media (max-width: 560px) {
  .analytics-body .analytics-period-fields { grid-template-columns: 1fr 1fr; }
  .analytics-body .analytics-period-fields .primary { grid-column: 1 / -1; }
  .analytics-body .analytics-progress-senior > summary small { grid-row: auto; grid-column: 1 / -1; justify-content: flex-start; }
}

/* ===== Встроенная витрина успеваемости (iframe в «Аналитике») ===== */
.is-compact-embed .page { gap: 10px; }
.is-compact-embed .cards,
.is-compact-embed .progress-cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.is-compact-embed .metric { min-height: 0; gap: 4px; padding: 8px 11px; }
.is-compact-embed .metric span { font-size: 11px; }
.is-compact-embed .metric strong { font-size: 20px; }
.is-compact-embed .panel { padding: 10px 12px; }
.is-compact-embed .panel-head h2 { font-size: 15px; }
.is-compact-embed .panel-head p { font-size: 11px; }

.has-missing-text { color: #475467; font-weight: 750; }
.metric-missing { border-color: #d0d5dd; background: #f9fafb; }
.analytics-progress-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Привязка пробного к другой карточке AlfaCRM (конверсия, экран старшего) */
.conversion-link-button { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: #2f6fed; font: inherit; font-size: 12px; cursor: pointer; }
.conversion-link-note { display: block; color: #2f7d4f; }
.conversion-link-dialog { width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line, #dde3ea); border-radius: 12px; padding: 20px; }
.conversion-link-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.conversion-link-dialog label { display: grid; gap: 4px; margin-top: 8px; }
.conversion-link-dialog input { font: inherit; padding: 8px 10px; }
.conversion-link-matches { display: grid; gap: 2px; max-height: 220px; overflow: auto; margin-top: 4px; }
.conversion-link-matches button { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.conversion-link-matches button small { color: var(--muted, #6b7280); white-space: nowrap; }
.conversion-link-matches button:hover { background: #eef4ff; }
.conversion-link-matches .client-note { padding: 6px 8px; font-size: 12px; color: var(--muted, #6b7280); }
.conversion-link-error { color: #c0392b; min-height: 1em; }
.conversion-link-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Состояние школы: разбивка учеников в подсказке по строкам */
.school-breakdown-tip::after { white-space: pre-line; max-width: 280px; text-align: left; }

/* KPI преподавателя (kpi-ui.js) */
.kpi-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.kpi-tabs button { border: 1px solid var(--line, #d9dee7); background: transparent; border-radius: 8px; padding: 6px 14px; cursor: pointer; font: inherit; }
.kpi-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.kpi-grid { font-variant-numeric: tabular-nums; }
.kpi-grid th, .kpi-grid td { text-align: center; padding: 6px 5px; white-space: nowrap; }
.kpi-grid .kpi-name { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--panel, #fff); min-width: 180px; white-space: normal; }
.kpi-grid th.kpi-month { border-left: 2px solid var(--line, #d9dee7); text-transform: capitalize; }
.kpi-grid th.kpi-current { color: var(--accent); }
.kpi-grid th.kpi-sub { font-size: 11px; font-weight: 500; opacity: 0.7; }
.kpi-grid .kpi-start { border-left: 2px solid var(--line, #d9dee7); }
.kpi-grid td.kpi-sum, .kpi-grid th.kpi-sum { font-weight: 700; }
.kpi-grid td[data-tip], .kpi-grid th[data-tip] { cursor: help; }
.kpi-grid td[data-tip]:hover { background: rgba(37, 99, 235, 0.08); }
.kpi-grid td.kpi-empty { background: rgba(127, 127, 127, 0.05); }
.kpi-progress { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.kpi-progress small { opacity: 0.7; }
.kpi-bar { flex: 1; min-width: 50px; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.2); overflow: hidden; }
.kpi-bar i { display: block; height: 100%; background: var(--accent); }
.kpi-good { color: #1f9d55; }
.kpi-warn { color: #c27c00; }
.kpi-bad { color: #d14343; }
.kpi-note { font-size: 13px; margin-top: 10px; }
.kpi-tip { position: absolute; z-index: 50; max-width: 340px; padding: 10px 12px; border-radius: 10px; background: #1d2330; color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); pointer-events: none; }
.kpi-tip p { margin: 4px 0 0; }
.kpi-tip ul { margin: 4px 0 0; padding-left: 16px; }
.kpi-tip ul:has(li:nth-child(8)) { columns: 2; column-gap: 18px; }
.kpi-tip:has(li:nth-child(8)) { max-width: 560px; }
.kpi-tip .muted { color: #b8bfcc; }
.kpi-names { margin: 0; line-height: 1.6; }
.kpi-grid td[data-full] { cursor: pointer; }

.progress-mode-switch {
  display: inline-flex;
  margin-top: 8px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  overflow: hidden;
}

.progress-mode-switch button {
  padding: 5px 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #475467;
  font-size: 13px;
  cursor: pointer;
}

.progress-mode-switch button.is-active {
  background: #e8f0fe;
  color: #1d4ed8;
  font-weight: 650;
}

.exam-test-cell {
  white-space: nowrap;
  text-align: center;
}

.exam-test-cell .progress-score-chip {
  min-width: 34px;
  font-size: 11px;
  padding: 3px 6px;
}

.exam-test-sub {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
}

.exam-test-chip-button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.exam-test-average-row td {
  background: #f8fafc;
  font-weight: 650;
}

.exam-test-literacy {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  color: #344054;
  font-size: 13px;
}

.exam-test-literacy label {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.exam-test-preview {
  margin: 0;
  color: #475467;
  font-size: 13px;
}

.progress-score-dialog [hidden] {
  display: none !important;
}

.exam-test-add {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px dashed #b8c4d4;
  border-radius: 50%;
  background: #fff;
  color: #475467;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.exam-test-add:hover,
.exam-test-add:focus-visible {
  border-style: solid;
  border-color: #2563eb;
  color: #2563eb;
}

.exam-test-table .progress-current-col {
  left: 150px;
  min-width: 64px;
  max-width: 64px;
}

.analytics-groups-table thead .group-total-row th { top: var(--group-head-h, 44px); padding-top: 3px; padding-bottom: 3px; background: #eef2f7; font-size: 11px; }
.analytics-groups-table thead .group-total-row th small { display: inline; color: #64748b; font-size: 10px; font-weight: 400; margin: 0 0 0 4px; }
.analytics-groups-table thead .group-total-cell button { display: block; width: 100%; line-height: 1.2; white-space: nowrap; }
.analytics-groups-table thead .group-total-cell strong { font-size: 12px; }
.analytics-groups-table thead .group-total-cell small { display: block; margin: 0; font-size: 10px; }
.analytics-groups-table thead .group-total-cell small span { font-weight: 600; }
.group-history-matrix td strong, .group-history-matrix td small { display: block; }
.group-history-matrix td small { font-size: 11px; opacity: .75; }
.group-history-active th, .group-history-active td { outline: 2px solid #2563eb; outline-offset: -2px; }
.group-history-matrix td[data-group-history-cell] { cursor: pointer; }
.group-history-matrix td[data-group-history-cell]:hover { box-shadow: inset 0 0 0 2px #93c5fd; }
.group-history-details { margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; font-size: 13px; }
.group-history-details header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.group-history-hint { margin: 6px 0 10px; color: #64748b; }
.group-history-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.group-history-detail-grid p { margin: 4px 0 0; line-height: 1.5; }
.group-history-detail-grid small { color: #64748b; }
#groupHistoryDialog .school-history-matrix-wrap { overflow: auto; max-height: 52vh; }
#groupHistoryDialog .group-history-details { margin: 0 16px 16px; }
.group-history-matrix .group-history-flow { padding-top: 4px; padding-bottom: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.group-history-matrix tr:has(.group-history-flow) th { padding-top: 4px; padding-bottom: 4px; font-size: 12px; }

.referral-own-panel .tutor-main-cards { margin: 12px 0 16px; }
.referral-own-subtitle { margin: 20px 0 8px; font-size: 16px; }
.referral-own-panel td { vertical-align: middle; }
.referral-own-panel td a { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.referral-copy { min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.referral-copy:hover { background: var(--soft); }

.recording-watch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.recording-watch-field {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #344054;
  font-size: 12px;
}

.recording-watch-field input {
  min-height: 32px;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
}

.recording-watch-field input[type="number"] {
  width: 64px;
}

.recording-watch-students {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: #667085;
  font-size: 12px;
}

.recording-watch-students > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recording-auto-badge {
  color: #175cd3;
  font-size: 10px;
  font-weight: 700;
}

.conversion-stop-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid #fda29b;
  border-radius: 5px;
  background: #fef3f2;
  color: #b42318;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}

.conversion-stop-line {
  margin-top: 3px;
  line-height: 1;
}

.conversion-stop-line .conversion-stop-badge {
  margin: 0 4px 0 0;
}

/* Конверсия: если метка не помещается рядом с именем — переносится под него, а не обрезается */
.analytics-conversion-table td.analytics-conversion-teacher-col {
  white-space: normal;
}

.analytics-conversion-table .conversion-probation-badge {
  white-space: nowrap;
}

/* NPS: раздел аналитики (новый вид, 20.10.2026) */
.nps2 { padding: 20px 22px; font-variant-numeric: tabular-nums; }
.nps2-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.nps2-head > div { flex: 1 1 320px; }
.nps2-head h2 { margin: 0; font-size: 20px; font-weight: 650; }
.nps2-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 680px; }
.nps2-fresh { font-size: 12px; color: var(--muted); background: #f9fafb; border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.nps2-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; margin: 16px 0 14px; }
.nps2-kpi { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); }
.nps2-kpi span {  color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nps2-kpi strong { font-size: 22px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.nps2-kpi small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nps2-kpi-warn { border-left-color: #f59e0b; }
.nps2-kpi-head { flex: 0 0 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.nps2-kpi-head span { flex: 1 1 auto; min-width: 0; }
.nps2-kpi-head button, .nps2-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.nps2-kpi-head button:hover, .nps2-link:hover { text-decoration: underline; }
.nps2-history-cell { display: grid; gap: 2px; padding: 6px 8px; text-align: center; }
.nps2-history-cell small { font-size: 11px; color: var(--muted); }
.nps2-history-few .nps2-history-cell { opacity: 0.5; }
.nps2-history th.nps2-history-on { color: var(--accent); }
.nps2-history tr.nps2-history-selected th { color: var(--accent); }
.nps2-kpi-warn strong { color: #b54708; }
.nps2-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f9fafb; color: var(--muted); font-size: 13px; }
.nps2-rate b { color: var(--ink); font-size: 15px; }
.nps2-rate-note { flex: 0 0 100%; color: var(--muted); font-size: 12px; }
.nps2-bar { flex: 1 1 140px; height: 8px; border-radius: 4px; background: #e4e7ec; overflow: hidden; }
.nps2-bar i { display: block; height: 100%; width: 0; background: #17b26a; }
.nps2-tabs { display: flex; gap: 4px; margin: 20px 0 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nps2-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; color: var(--muted); font: inherit; font-size: 14px; font-weight: 550; white-space: nowrap; cursor: pointer; min-height: 0; }
.nps2-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.nps2-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 10px; background: #f2f4f7; color: #475467; font-size: 12px; }
.nps2-tabs .on .nps2-count { background: #eef4ff; color: var(--accent); }
.nps2-tabs .nps2-tab-alert .nps2-count { background: #fef0c7; color: #b54708; }
.nps2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.nps2-search { flex: 0 1 260px; min-width: 180px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.nps2-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nps2-pill { white-space: nowrap; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: #344054; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 0; }
.nps2-pill.on { border-color: #b2ccff; background: #eef4ff; color: #1d4ed8; }
.nps2-select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.nps2-sp { flex: 1; }
.nps2-hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.nps2-table-wrap { overflow-x: auto; max-height: 560px; }
.nps2-table { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.nps2-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12px; font-weight: 550; text-align: left; }
.nps2-table td { padding: 12px 10px; border-bottom: 1px solid #f2f4f7; vertical-align: top; overflow-wrap: anywhere; line-height: 1.45; }
.nps2-table tr.nps2-row-att td:first-child { box-shadow: inset 3px 0 0 #f79009; }
.nps2-date { color: var(--muted); white-space: nowrap; }
.nps2-name { font-weight: 550; overflow-wrap: normal !important; }
.nps2-comment { color: #344054; }
.nps2-tag + .nps2-comment, .nps2-tag ~ .nps2-comment { margin-top: 2px; }
.nps2-none { color: #98a2b3; }
.nps2-scores { display: inline-flex; gap: 4px; }
.nps2-score { min-width: 28px; padding: 1px 6px; border-radius: 6px; background: #f2f4f7; font-size: 13px; font-weight: 600; text-align: center; }
.nps2-score-good { background: #dcfae6; color: #067647; }
.nps2-score-mid { background: #fef0c7; color: #b54708; }
.nps2-score-bad { background: #fee4e2; color: #b42318; }
.nps2-tag { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 6px; background: #fef0c7; color: #b54708; font-size: 12px; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.nps2-tag-red { background: #fee4e2; color: #b42318; }
.nps2-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.nps2-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nps2-status-new { background: #fef3f2; color: #b42318; }
.nps2-status-work { background: #fffaeb; color: #b54708; }
.nps2-status-done { background: #ecfdf3; color: #067647; }
.nps2-log { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--line); color: #475467; font-size: 12px; }
.nps2-log em, .nps2-log-entry em { display: block; color: var(--muted); font-style: normal; }
.nps2-log-entry + .nps2-log-entry { margin-top: 6px; }
.nps2-log-full { margin-top: 10px; }
.nps2-actions { text-align: right; }
.nps2-btn-sm { padding: 4px 10px; font-size: 12px; min-height: 0; white-space: nowrap; }
.nps2-note-row td { background: #f9fafb; padding: 12px 14px 14px; }
.nps2-note-box { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 8px; align-items: start; }
.nps2-note-box textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.nps2-note-box .nps2-hint { margin: 4px 0 0; }
.nps2-note-buttons { display: flex; gap: 6px; }
.nps2-note-buttons button { white-space: nowrap; }
@media (max-width: 820px) {
  .nps2 { padding: 16px; }
  .nps2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nps2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nps2-tabs button { padding: 10px 8px; }
  .nps2-kpi span, .nps2-kpi small { white-space: normal; }
  .nps2-kpi-head { flex-wrap: wrap; }
  .nps2-kpi-head span { flex: 0 0 100%; overflow-wrap: anywhere; }
  .nps2-note-box { grid-template-columns: 1fr; }
  .nps2-note-inner { position: sticky; left: 14px; max-width: calc(100vw - 150px); }
  .nps2-fresh { white-space: normal; }
  .nps2-tag { white-space: normal; }
  .nps2-search { flex: 1 1 100%; min-width: 0; }
}

/* Exam form controls must keep their intrinsic size inside the shared dialog. */
#examTestDialog { max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; }
#examTestDialog .exam-test-literacy input[type="radio"] { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }
#examTestDialog .secondary, #examTestDialog .icon-button {
  font: inherit; border: 1px solid #d0d5dd; border-radius: 8px;
  background: #fff; color: #344054; padding: 8px 12px; cursor: pointer;
}
#examTestDialog .icon-button { flex: 0 0 32px; height: 32px; padding: 0; font-size: 22px; }
#examTestDialog .danger { color: #b42318; }
#examTestDialog .progress-score-dialog-head { align-items: flex-start; }
#examTestDialog .progress-score-dialog-head > div { min-width: 0; overflow-wrap: anywhere; }
#examTestDialog .status:empty { display: none; }

/* «Мои ученики» → незакрытые отработки: сколько ждёт, тип значком, кнопки рядом со строкой. */
.personal-calendar-link { display: inline-flex; align-items: center; text-decoration: none; }
.is-embedded .personal-calendar-link { display: none; }
.personal-makeup-table { width: auto; max-width: 100%; }
.personal-makeup-table :is(th, td) { padding: 7px 10px; }
.personal-wait { font-weight: 600; color: var(--muted); }
.personal-wait.is-mid { color: #b54708; }
.personal-wait.is-old { color: #b42318; }
.ps-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef4ff; color: #1d4ed8; font-size: 12px; font-weight: 600; }
.ps-tag-teacher { background: #fff1e6; color: #c2410c; }
.ps-tag-plan { background: #ecfdf3; color: #067647; }
.personal-row-actions { display: flex; gap: 6px; }
.personal-row-actions .primary { min-height: 30px; padding: 0 12px; }
.personal-simple-table.personal-makeup-table :is(th, td) { white-space: nowrap; }
.personal-simple-table.personal-makeup-table td:is(:first-child, :nth-child(5), :nth-child(6)) { white-space: normal; min-width: 90px; }
.personal-row-actions { flex-wrap: wrap; }
.personal-row-actions .secondary { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.personal-row-actions .secondary:hover { border-color: var(--accent); color: var(--accent); }
.personal-row-actions .primary { border-radius: 8px; font-size: 13px; }

/* Мои ученики: отъезд, «Не оплачивается», оплата без занятий. */
.personal-chip.is-away { background: repeating-linear-gradient(45deg, #f1f3f4 0 5px, #e8eaed 5px 10px); color: #5f6368; font-size: 11px; }
.personal-paid.is-empty { background: #fef0c7; color: #93370d; }
.personal-away-fields { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.personal-away-fields legend { padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.personal-away-row { grid-template-columns: 1fr 1fr auto; align-items: end; }
.personal-away-fields .muted { margin: 0; font-size: 12px; }
/* Мои ученики: второстепенные кнопки и «×» в стиле сайта, а не браузера. */
.personal-students-page button.secondary { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.personal-students-page button.secondary:hover { background: var(--soft); border-color: #b9c9e8; }
.personal-students-page button.secondary.danger { border-color: #f4c7c3; color: #b42318; }
.personal-students-page button.secondary.danger:hover { background: #fef3f2; }
.personal-students-page .progress-score-dialog-actions .primary { min-height: 34px; }
.personal-students-page .icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.personal-students-page .icon-button:hover { background: #f1f3f4; color: var(--ink); }