:root {
  --navy: #14213d;
  --navy-soft: #203254;
  --blue: #2f67f6;
  --blue-dark: #2555d7;
  --blue-light: #edf3ff;
  --green: #138a62;
  --green-light: #e9f8f2;
  --amber: #c87a11;
  --amber-light: #fff5e6;
  --violet: #7157d9;
  --violet-light: #f1edff;
  --red: #c93f55;
  --red-light: #fff0f2;
  --ink: #1f2937;
  --muted: #667085;
  --line: #e5e9f0;
  --surface: #ffffff;
  --background: #f4f6fa;
  --shadow: 0 18px 45px rgba(20, 33, 61, 0.12);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--background);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

html.public-survey-route #loginView,
html.public-survey-route #appView {
  display: none !important;
}

html.public-survey-route #publicSurveyView.hidden {
  display: block !important;
}

.login-view {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  padding: 64px 8vw;
  background:
    radial-gradient(circle at 15% 20%, rgba(47, 103, 246, 0.22), transparent 32%),
    linear-gradient(125deg, #101c34 0 49%, #f4f6fa 49% 100%);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  align-self: start;
}

.login-brand strong,
.sidebar-brand strong {
  display: block;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.login-brand strong {
  font-size: 22px;
}

.sidebar-brand strong {
  max-width: 145px;
  font-size: 13px;
}

.login-brand span,
.sidebar-brand span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.72;
}

.login-brand .brand-motto {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  opacity: 0.9;
}

.brand-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: white;
  background: var(--blue);
  box-shadow: 0 10px 25px rgba(47, 103, 246, 0.35);
  font-size: 21px;
  font-weight: 800;
}

.brand-mark.small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 19px;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.login-logo {
  width: 96px;
  height: 96px;
}

.sidebar-logo {
  width: 46px;
  height: 46px;
}

.login-card {
  width: min(460px, 100%);
  justify-self: end;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.login-card input,
.login-card select {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15px;
}

.login-card .primary-button,
.login-card .secondary-button {
  min-height: 46px;
  font-size: 14px;
}

.login-heading {
  margin-bottom: 28px;
}

.login-heading h1 {
  margin: 7px 0 10px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.2;
}

.login-heading p,
.panel-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: #b9d0ff;
}

.stack-form,
.stack-form label {
  display: grid;
  gap: 6px;
}

.stack-form {
  gap: 12px;
}

label > span {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input,
select {
  min-height: 34px;
  padding: 0 12px;
}

textarea {
  padding: 8px;
  resize: vertical;
}

#courseGroupStudentSelect {
  min-height: 220px;
  padding: 8px;
}

#courseGroupStudentSelect option {
  padding: 8px;
}

.course-enrollment-payment-card {
  display: grid;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #f8fbff;
}

.inline-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.inline-check input {
  width: auto;
  min-height: auto;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 103, 246, 0.12);
}

.muted-input[readonly] {
  color: var(--muted);
  background: #f3f6fb;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 68px;
}

.icon-button {
  position: absolute;
  top: 50%;
  right: 8px;
  border: 0;
  color: var(--blue);
  background: transparent;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
}

.primary-button,
.secondary-button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
}

.primary-button {
  border: 1px solid var(--blue);
  color: white;
  background: var(--blue);
  box-shadow: 0 7px 18px rgba(47, 103, 246, 0.18);
}

.primary-button:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.secondary-button {
  border: 1px solid #d7dde7;
  color: #344054;
  background: white;
}

.secondary-button.light {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--navy);
}

.full-width {
  width: 100%;
  margin-top: 2px;
}

.demo-note {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 13px 15px;
  border-radius: 10px;
  color: #42526b;
  background: #f1f5fb;
  font-size: 12px;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 248px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 18px;
  color: white;
  background:
    radial-gradient(circle at 16% 0%, rgba(47, 103, 246, 0.42), transparent 31%),
    radial-gradient(circle at 100% 34%, rgba(20, 184, 166, 0.24), transparent 30%),
    radial-gradient(circle at 16% 98%, rgba(249, 115, 22, 0.16), transparent 28%),
    linear-gradient(180deg, #0f2452 0%, #142f6c 44%, #0b1733 100%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    18px 0 50px rgba(15, 36, 82, 0.08);
}

.sidebar-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-sector-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid rgba(180, 205, 255, 0.20);
  border-radius: 14px;
  background: rgba(5, 17, 41, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-sector-button {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #dbe8ff;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.sidebar-sector-button:hover,
.sidebar-sector-button:focus-visible {
  color: #ffffff;
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-sector-button.active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, rgba(47, 103, 246, 0.92), rgba(20, 184, 166, 0.40));
  box-shadow:
    0 12px 26px rgba(12, 24, 58, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: rgba(191, 219, 254, 0.46) transparent;
  scrollbar-width: thin;
}

.nav-list::-webkit-scrollbar {
  width: 4px;
}

.nav-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(191, 219, 254, 0.38);
}

.nav-item {
  position: relative;
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  color: #d9e6ff;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  text-align: left;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.nav-item::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #8fb3ff, #2f66f6);
  opacity: 0;
  content: "";
  transition: opacity 160ms ease;
}

.nav-item::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(47, 102, 246, 0.18), rgba(255, 255, 255, 0.045));
  opacity: 0;
  content: "";
  transition: opacity 160ms ease;
}

.nav-item > span:not(.nav-icon):not(.nav-unread-dot):not(.nav-badge) {
  position: relative;
  z-index: 1;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.nav-item:hover {
  color: white;
  border-color: rgba(147, 197, 253, 0.36);
  background: linear-gradient(115deg, rgba(47, 103, 246, 0.22), rgba(20, 184, 166, 0.10));
  box-shadow: 0 12px 26px rgba(4, 11, 28, 0.18);
}

.nav-item:hover::after {
  opacity: 1;
}

.nav-item.active {
  color: white;
  border-color: rgba(167, 197, 255, 0.48);
  background: linear-gradient(115deg, rgba(47, 103, 246, 0.56), rgba(20, 184, 166, 0.18));
  box-shadow:
    0 16px 34px rgba(28, 73, 180, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.nav-item.active::before,
.nav-item.active::after {
  opacity: 1;
}

.nav-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  color: #dfe8ff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav-item.active .nav-icon {
  color: white;
  background: linear-gradient(145deg, #3b73ff, #1d4ed8);
  box-shadow: 0 8px 18px rgba(47, 102, 246, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nav-item:hover .nav-icon {
  transform: scale(1.05);
}

.nav-item[data-page="dashboard"] .nav-icon {
  background: linear-gradient(145deg, #3b73ff, #1d4ed8);
  font-size: 0;
}

.nav-item[data-page="dashboard"] .nav-icon::before {
  content: "\2302";
  font-size: 15px;
}

.nav-item[data-page="documents"] .nav-icon {
  background: linear-gradient(145deg, #37c7b7, #087f74);
}

.nav-item[data-page="users"] .nav-icon {
  background: linear-gradient(145deg, #8b5cf6, #5b21b6);
}

.nav-item[data-page="payroll"] .nav-icon {
  background: linear-gradient(145deg, #22c55e, #15803d);
}

.nav-item[data-page="administration"] .nav-icon {
  background: linear-gradient(145deg, #60a5fa, #2563eb);
}

.nav-item[data-page="students"] .nav-icon {
  background: linear-gradient(145deg, #f59e0b, #b45309);
}

.nav-item[data-page="contracts"] .nav-icon {
  background: linear-gradient(145deg, #ec4899, #be185d);
}

.nav-item[data-page="finance"] .nav-icon {
  background: linear-gradient(145deg, #14b8a6, #0f766e);
}

.nav-item[data-page="activities"] .nav-icon {
  background: linear-gradient(145deg, #f97316, #c2410c);
}

.nav-item[data-page="registers"] .nav-icon {
  background: linear-gradient(145deg, #06b6d4, #0e7490);
}

.nav-item[data-page="tests"] .nav-icon {
  background: linear-gradient(145deg, #a855f7, #7e22ce);
}

.nav-item[data-page="expenses"] .nav-icon {
  background: linear-gradient(145deg, #ef4444, #b91c1c);
}

.nav-item[data-page="reports"] .nav-icon {
  background: linear-gradient(145deg, #64748b, #334155);
}

.nav-item[data-page="chat"] .nav-icon {
  background: linear-gradient(145deg, #38bdf8, #2563eb);
}

.nav-badge {
  min-width: 22px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  color: white;
  background: #dc2626;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.nav-unread-dot {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

.current-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-user > div:last-child {
  min-width: 0;
}

.current-user strong,
.current-user span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-user strong {
  font-size: 13px;
}

.current-user span {
  margin-top: 3px;
  color: #aeb9ca;
  font-size: 11px;
}

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: var(--blue);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.current-user {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.logout-button {
  width: auto;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  color: #c7cfdb;
  background: transparent;
  font-size: 12px;
}

.main-content {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 12px;
  padding: 14px 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.topbar h1 {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 22px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

.topbar-account .current-user {
  width: auto;
  min-width: 168px;
  max-width: 220px;
  padding: 6px 10px 6px 6px;
  border: 1px solid #d8dee8;
  border-radius: 15px;
  color: var(--navy);
  background: white;
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.06);
}

.topbar-account .current-user span {
  color: var(--muted);
}

.topbar-account .avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 12px;
}

.topbar-account .logout-button {
  min-height: 38px;
  padding: 0 13px;
  border-color: #d8dee8;
  border-radius: 12px;
  color: #344054;
  background: white;
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.05);
  font-weight: 800;
}

.install-app-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #99f6e4;
  border-radius: 12px;
  color: #0f766e;
  background: #ecfdf5;
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
  font-size: 12px;
  font-weight: 850;
}

.install-app-button:hover,
.install-app-button:focus-visible {
  border-color: #5eead4;
  background: #dffcf3;
}

.sector-switcher {
  position: sticky;
  top: 14px;
  z-index: 16;
  display: flex;
  flex: 0 0 auto;
  min-width: 270px;
  padding: 6px;
  border: 1px solid #cdd9eb;
  border-radius: 14px;
  background: #edf2f9;
  box-shadow: 0 6px 18px rgba(31, 50, 81, 0.08);
}

.sector-switch {
  min-height: 34px;
  flex: 1;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.025em;
}

.sector-switch.active {
  color: white;
  background: var(--blue);
  box-shadow: 0 4px 10px rgba(47, 103, 246, 0.2);
}

.school-level-filter {
  width: auto;
  min-width: 155px;
  min-height: 40px;
  font-size: 11px;
}

.topbar-season-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.topbar-season-filter select {
  min-width: 112px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d6dfec;
  border-radius: 11px;
  background: white;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
}

.date-label {
  color: var(--muted);
  font-size: 12px;
}

.date-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.date-input-group {
  position: relative;
  display: flex;
  width: 100%;
  align-items: stretch;
}

.date-input-group > .date-input {
  min-width: 0;
  padding-right: 82px;
}

.date-picker-button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  min-width: 70px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 7px 7px 0;
  color: var(--blue);
  background: #f4f7ff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.date-picker-button:hover,
.date-picker-button:focus-visible {
  background: #e8efff;
}

.birth-age-hint {
  display: block;
  margin-top: 5px;
  color: #365aa6;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.birth-age-hint.hidden {
  display: none;
}

.birth-age-hint.invalid {
  color: #c93f55;
}

.native-date-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.installment-date.date-input {
  min-width: 165px;
}

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  font-size: 22px;
}

.page {
  display: none;
  padding: 28px 34px 42px;
}

.page.active {
  display: block;
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.sector-card {
  position: relative;
  display: grid;
  min-height: 190px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 26px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px;
  color: var(--ink);
  background: white;
  box-shadow: 0 10px 28px rgba(20, 33, 61, 0.08);
  text-align: left;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.sector-card::after {
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(47, 103, 246, 0.06);
  content: "";
}

.sector-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(20, 33, 61, 0.12);
}

.sector-card.active {
  border-color: var(--blue);
}

.sector-card.courses.active {
  border-color: var(--violet);
}

.sector-card-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 17px;
  color: white;
  background: linear-gradient(145deg, #244fae, var(--blue));
  font-size: 15px;
  font-weight: 850;
}

.sector-card.courses .sector-card-icon {
  background: linear-gradient(145deg, #5840b7, var(--violet));
}

.sector-card-content {
  min-width: 0;
}

.sector-card-content h2 {
  margin: 5px 0 7px;
  color: var(--navy);
  font-size: 24px;
}

.sector-card-content p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.sector-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px;
}

.sector-levels span,
.sector-levels button {
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #52637e;
  background: #f1f4f8;
  font-size: 9px;
  font-weight: 700;
}

.sector-levels button {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.sector-levels button:hover,
.sector-levels button.active {
  color: #174ba8;
  border-color: #9ebcf2;
  background: #e8f0ff;
}

.sector-card-count {
  z-index: 1;
  min-width: 58px;
  text-align: center;
}

.sector-card-count strong,
.sector-card-count span,
.sector-card-count small {
  display: block;
}

.sector-card-count strong {
  color: var(--navy);
  font-size: 30px;
}

.sector-card-count span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.sector-card-count small {
  margin-top: 5px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.welcome-banner {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  color: white;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.22), transparent 26%),
    radial-gradient(circle at 12% 0%, rgba(20, 184, 166, 0.22), transparent 30%),
    linear-gradient(120deg, #1d459b, #2f67f6 58%, #4b7dff);
  box-shadow: 0 14px 32px rgba(47, 103, 246, 0.18);
}

.welcome-banner h2 {
  margin: 5px 0;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.welcome-banner p {
  margin: 0;
  color: #dce7ff;
  font-size: 13px;
}

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

#dashboardPrimaryActionButton {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  color: white;
  background: linear-gradient(145deg, #18a66f, #087f5b);
  box-shadow: 0 12px 26px rgba(8, 127, 91, 0.28);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 10px 0;
}

.stat-card,
.finance-card,
.register-summary-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #dbe3ef;
  border-top: 4px solid var(--blue);
  border-radius: 14px;
  background: white;
  box-shadow: none;
}

.stat-card {
  min-height: 110px;
}

.stats-grid > .stat-card:not(.course-program-stat-card) {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top-width: 5px;
  box-shadow: 0 12px 28px rgba(20, 33, 61, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stats-grid > .stat-card:not(.course-program-stat-card):hover {
  box-shadow: 0 16px 34px rgba(20, 33, 61, 0.10);
  transform: translateY(-2px);
}

.stat-card-success {
  border-top-color: var(--green);
}

.stat-card-info {
  border-top-color: var(--blue);
}

.stat-card-warning {
  border-top-color: var(--amber);
}

.stat-card-danger {
  border-top-color: var(--red);
}

.course-program-stats-grid {
  margin-top: -4px;
}

.course-program-stat-card {
  position: relative;
  border-top-color: var(--green);
}

.course-program-stat-card.active {
  border-color: #9ebcf2;
  border-top-color: var(--blue);
  background: #fbfdff;
}

.course-program-stat-icon,
.course-program-table-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  color: var(--blue);
  background: #f4f7ff;
  font-size: 20px;
  font-weight: 900;
}

.course-program-stat-icon {
  position: absolute;
  top: 18px;
  right: 18px;
}

.course-program-stat-icon.has-image,
.course-program-table-icon.has-image {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.course-program-stat-icon img,
.course-program-table-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

.course-program-stat-card strong {
  padding-right: 66px;
}

.course-program-table-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 14px;
}

.stat-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
}

.stat-icon.blue {
  color: var(--blue);
  background: var(--blue-light);
}

.stat-icon.green {
  color: var(--green);
  background: var(--green-light);
}

.stat-icon.violet {
  color: var(--violet);
  background: var(--violet-light);
}

.stat-icon.amber {
  color: var(--amber);
  background: var(--amber-light);
}

.stat-icon.teal {
  color: #087f8c;
  background: #e8f8fa;
}

.stat-card span,
.stat-card strong {
  display: block;
}

.stat-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-card strong {
  margin-top: 8px;
  color: var(--navy);
  font-size: 21px;
  letter-spacing: -0.03em;
}

.stat-card small {
  display: block;
  margin-top: 9px;
  color: #8a94a6;
  font-size: 10px;
}

.clickable-stat-card {
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
}

.clickable-stat-card:hover,
.clickable-stat-card:focus-visible {
  border-color: #9eb9df;
  outline: 0;
  transform: translateY(-1px);
}

.dashboard-insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.dashboard-today-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: #d8e4f6;
  background:
    radial-gradient(circle at top left, rgba(47, 100, 255, 0.12), transparent 34%),
    linear-gradient(145deg, #fff, #f7faff);
}

.dashboard-today-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--green), var(--amber), var(--red));
}

.dashboard-today-card .panel-heading {
  position: relative;
  z-index: 1;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(204, 216, 235, 0.72);
}

.dashboard-today-card .panel-heading h3 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.dashboard-today-card .panel-heading p {
  max-width: 420px;
}

.dashboard-today-card .result-count {
  padding: 9px 14px;
  border: 1px solid #dbe8ff;
  color: #2454d8;
  background: rgba(239, 246, 255, 0.92);
  box-shadow: 0 10px 24px rgba(47, 100, 255, 0.1);
}

.dashboard-today-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.dashboard-today-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(20, 33, 61, 0.06);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-today-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--blue);
}

.dashboard-today-item::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background: rgba(47, 100, 255, 0.08);
}

.dashboard-today-item:hover {
  border-color: #b8c8e4;
  background: white;
  box-shadow: 0 18px 36px rgba(20, 33, 61, 0.11);
  transform: translateY(-2px);
}

.dashboard-today-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: var(--blue-light);
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.dashboard-today-item strong,
.dashboard-today-item small {
  display: block;
}

.dashboard-today-item strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-today-item small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
}

.dashboard-today-item b {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 46px;
  min-height: 46px;
  place-items: center;
  border-radius: 15px;
  color: var(--navy);
  background: #f3f7ff;
  font-size: 21px;
  letter-spacing: -0.04em;
}

.dashboard-today-item.success .dashboard-today-icon {
  color: var(--green);
  background: var(--green-light);
}

.dashboard-today-item.success::before {
  background: var(--green);
}

.dashboard-today-item.success::after {
  background: rgba(7, 148, 85, 0.1);
}

.dashboard-today-item.success b {
  color: var(--green);
  background: var(--green-light);
}

.dashboard-today-item.warning .dashboard-today-icon {
  color: var(--amber);
  background: var(--amber-light);
}

.dashboard-today-item.warning::before {
  background: var(--amber);
}

.dashboard-today-item.warning::after {
  background: rgba(245, 158, 11, 0.12);
}

.dashboard-today-item.warning b {
  color: #b46a05;
  background: var(--amber-light);
}

.dashboard-today-item.danger .dashboard-today-icon {
  color: var(--red);
  background: var(--red-light);
}

.dashboard-today-item.danger::before {
  background: var(--red);
}

.dashboard-today-item.danger::after {
  background: rgba(225, 29, 72, 0.1);
}

.dashboard-today-item.danger b {
  color: var(--red);
  background: var(--red-light);
}

.dashboard-today-item.info .dashboard-today-icon {
  color: var(--blue);
  background: var(--blue-light);
}

.dashboard-today-item.info::before {
  background: var(--blue);
}

.dashboard-today-item.info b {
  color: var(--blue);
  background: var(--blue-light);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
  gap: 20px;
}

.panel-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-contract-types {
  margin-top: 20px;
}

.template-upload-box {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #cfd9e8;
  border-radius: 12px;
  background: #f8faff;
}

.template-upload-heading,
.template-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-upload-heading {
  justify-content: space-between;
}

.template-upload-heading strong,
.template-upload-heading small,
.template-file-label span,
.template-file-label small {
  display: block;
}

.template-upload-heading strong,
.template-file-label span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 750;
}

.template-upload-heading small,
.template-file-label small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.template-file-label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.template-file-label input {
  padding: 9px;
  border: 1px dashed #9cafd0;
  background: white;
}

.template-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #12664a;
  background: var(--green-light);
  font-size: 10px;
  font-weight: 750;
}

.initial-payment-box {
  padding: 15px;
  border: 1px solid #b8e4d3;
  border-radius: 12px;
  background: var(--green-light);
}

.initial-payment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.initial-payment-heading strong,
.initial-payment-heading small {
  display: block;
}

.initial-payment-heading strong {
  color: #12664a;
  font-size: 13px;
}

.initial-payment-heading small {
  margin-top: 4px;
  color: #386452;
  font-size: 10px;
}

.initial-payment-heading > span {
  padding: 4px 8px;
  border-radius: 999px;
  color: white;
  background: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.initial-payment-box.free-contract-payment {
  border-color: #b9c9f2;
  background: #eef3ff;
}

.initial-payment-box.free-contract-payment .initial-payment-heading strong {
  color: #294a82;
}

.initial-payment-box.free-contract-payment .initial-payment-heading small {
  color: #536b91;
}

.initial-payment-box.free-contract-payment .initial-payment-heading > span {
  background: var(--blue);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 16px;
}

.panel-heading p {
  font-size: 12px;
}

.text-button {
  padding: 4px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sortable-header-row th {
  vertical-align: bottom;
}

.column-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
}

.column-sort-button span {
  color: #9aa7bb;
  font-size: 12px;
}

.column-sort-button.active,
.column-sort-button.active span {
  color: var(--blue);
}

.column-sort-button[data-direction="asc"] span {
  transform: rotate(180deg);
}

.column-sort-button[data-direction="desc"] span {
  transform: none;
}

.readonly-detail-card {
  background: #f8fafc;
}

.column-filter-row th {
  padding: 5px 8px 9px;
  border-top: 0;
  background: #f8faff;
}

.column-filter-row input,
.column-filter-row select {
  width: 100%;
  min-width: 92px;
  min-height: 30px;
  padding: 6px 8px;
  border-color: #dce3ee;
  border-radius: 7px;
  background: white;
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.column-filter-row input::placeholder {
  color: #9aa6b8;
}

.column-filter-row select {
  cursor: pointer;
}

.program-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.program-subnav button {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  color: var(--navy);
  background: white;
  font-size: 11px;
  font-weight: 750;
}

.program-subnav button:hover {
  border-color: #9eb9df;
  background: #f7faff;
}

.program-subnav button.active {
  border-color: var(--blue);
  color: white;
  background: var(--blue);
  box-shadow: 0 5px 12px rgba(28, 91, 165, 0.18);
}

.finance-program-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 260px;
}

.finance-program-buttons button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  color: var(--navy);
  background: white;
  font-size: 10px;
  font-weight: 800;
}

.finance-program-buttons button.active {
  border-color: var(--blue);
  color: white;
  background: var(--blue);
}

.program-panel-selected .program-column {
  display: none;
}

.course-season-column {
  display: none;
}

.course-students-mode .course-season-column {
  display: table-cell;
}

.course-students-mode .teacher-column {
  display: none;
}

.administration-placeholder {
  padding: 24px;
  border: 1px dashed #cbd7e8;
  border-radius: 12px;
  color: var(--muted);
  background: #f8faff;
  text-align: center;
}

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

.course-admin-section {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.course-admin-section.span-two {
  grid-column: 1 / -1;
}

.table-wrap.course-levels-table-wrap {
  max-height: none;
  height: auto;
  overflow: visible;
}

.course-levels-admin-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.course-levels-admin-table th,
.course-levels-admin-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.course-levels-admin-table th,
.course-levels-admin-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.course-levels-admin-table th:nth-child(2),
.course-levels-admin-table td:nth-child(2) {
  width: 76px;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
}

.course-levels-admin-table th:last-child,
.course-levels-admin-table td:last-child {
  width: 260px;
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}

.course-level-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

.course-level-action-buttons .action-button {
  margin: 0;
  padding: 6px 8px;
  font-size: 10px;
}

.course-level-action-buttons .action-button.delete-action {
  flex-basis: auto;
  margin-left: auto;
}

#courseClassesPanel .course-admin-section {
  grid-column: auto;
  width: 100%;
}

.course-management-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 16px;
  padding: 5px;
  border: 1px solid #e3eaf6;
  border-radius: 999px;
  background: #f7faff;
}

.course-management-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: #5f6f8a;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.course-management-tabs button:hover {
  background: #eef4ff;
  color: var(--blue);
}

.course-management-tabs button.active {
  background: linear-gradient(135deg, var(--blue), #5b7cfa);
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 103, 246, 0.22);
  transform: translateY(-1px);
}

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

.price-list-page {
  display: none;
}

.price-list-page.active {
  display: grid;
  height: calc(100vh - 82px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.price-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.price-list-view-toggle {
  width: fit-content;
}

.price-list-summary {
  margin-bottom: 0;
}

.report-letterhead.price-list-print-letterhead {
  display: none;
}

.price-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.price-list-table-wrap {
  min-height: 0;
  max-height: none;
  overflow: auto;
  position: relative;
}

.price-list-table {
  width: 100%;
  min-width: 780px;
  white-space: normal;
  border: 1px solid #111827;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

#priceListSchoolPanel .price-list-table {
  min-width: 760px;
}

#priceListCoursesPanel .price-list-table {
  min-width: 680px;
}

.price-list-table th,
.price-list-table td {
  padding: 9px 10px;
  border: 1px solid #111827;
  vertical-align: top;
}

.price-list-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #08aeea;
  color: #08111f;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.price-list-table.admin-config-table th:last-child,
.price-list-table.admin-config-table td:last-child {
  right: auto;
  min-width: 0;
  box-shadow: none;
}

.price-list-table.admin-config-table th:last-child {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #08aeea;
}

.price-list-table.admin-config-table td:last-child {
  position: static;
  background: #fff;
}

.price-list-table td {
  background: #fff;
  overflow-wrap: anywhere;
}

.price-list-table .table-primary {
  display: block;
  color: #0f172a;
  font-weight: 850;
}

.price-list-table .table-secondary {
  display: block;
  margin-top: 2px;
  color: #475569;
  font-size: 0.74rem;
  white-space: normal;
}

.price-list-table tbody .price-list-program-row td,
.price-list-table.admin-config-table tbody .price-list-program-row td:last-child {
  background: #e7d4ff;
  color: #3b1c59;
  text-align: center;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  padding: 0;
}

.price-list-group-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.price-list-toggle-chevron {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.price-list-group-toggle[aria-expanded="false"] .price-list-toggle-chevron {
  transform: rotate(0deg);
}

.price-list-table tbody .price-list-program-row.is-collapsed td,
.price-list-table.admin-config-table tbody .price-list-program-row.is-collapsed td:last-child {
  background: #f2e7ff;
}

.price-list-row-hidden {
  display: none;
}

.course-subpanel-heading {
  padding: 12px 14px;
  border: 1px solid #e4ebf7;
  border-radius: 14px;
  background: #fbfdff;
}

.course-packages-summary {
  display: grid;
  gap: 12px;
}

.course-management-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fbff;
  color: var(--muted);
}

.course-management-empty strong {
  color: var(--ink);
}

.compact-heading {
  margin-bottom: 12px;
}

.compact-heading h4 {
  margin: 0;
  font-size: 1rem;
}

.compact-admin-form {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #cfe0ff;
  border-top: 4px solid var(--blue);
  border-radius: 14px;
  background: #f8fbff;
}

.course-popup-form {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 22px;
  border: 0;
  border-top: 6px solid var(--blue);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.course-popup-form::before {
  content: "Administrimi i kurseve";
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compact-actions {
  justify-content: flex-start;
}

.compact-switch {
  margin: 0;
}

.compact-table {
  max-height: 360px;
}

.table-wrap.course-programs-table-wrap {
  height: auto;
  max-height: none;
  overflow: visible;
}

.course-programs-admin-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.course-programs-admin-table th,
.course-programs-admin-table td {
  white-space: normal;
  vertical-align: middle;
}

.course-programs-admin-table th:last-child,
.course-programs-admin-table td:last-child {
  width: 260px;
  white-space: nowrap;
}

#courseClassesSection .course-management-table-wrap,
#contractsListPanel .contracts-table-wrap {
  height: auto;
  max-height: none;
  overflow: visible;
}

#courseClassesSection .course-management-table-wrap table,
#contractsListPanel .contracts-table-wrap table {
  min-width: 100%;
}

#contractsListPanel .contracts-table-wrap table {
  min-width: 1380px;
  width: 100%;
  table-layout: fixed;
}

#contractsListPanel .contracts-table-wrap th,
#contractsListPanel .contracts-table-wrap td {
  padding: 9px 7px;
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

#contractsListPanel .contracts-table-wrap th {
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow-wrap: normal;
}

#contractsListPanel .contracts-table-wrap .action-button {
  padding: 6px 6px;
  font-size: 9.5px;
  margin: 0 1px 2px 0;
  white-space: nowrap;
}

#contractsListPanel .contracts-table-wrap .align-right {
  min-width: 190px;
  white-space: nowrap;
  text-align: right;
}

#contractsListPanel .contracts-table-wrap .column-sort-button {
  padding: 0;
  font-size: 9px;
  line-height: 1.15;
}

#contractsListPanel .contracts-table-wrap .column-filter-row input,
#contractsListPanel .contracts-table-wrap .column-filter-row select {
  min-width: 0;
  padding: 6px 5px;
  font-size: 9.5px;
}

.column-filter-stack {
  display: grid;
  gap: 5px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(1),
#contractsListPanel .contracts-table-wrap td:nth-child(1) {
  width: 105px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(2),
#contractsListPanel .contracts-table-wrap td:nth-child(2) {
  width: 160px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(3),
#contractsListPanel .contracts-table-wrap td:nth-child(3) {
  width: 170px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(4),
#contractsListPanel .contracts-table-wrap td:nth-child(4) {
  width: 86px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(5),
#contractsListPanel .contracts-table-wrap td:nth-child(5) {
  width: 110px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(6),
#contractsListPanel .contracts-table-wrap td:nth-child(6) {
  width: 48px;
  text-align: center;
}

#contractsListPanel .contracts-table-wrap th:nth-child(7),
#contractsListPanel .contracts-table-wrap td:nth-child(7) {
  width: 78px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(8),
#contractsListPanel .contracts-table-wrap td:nth-child(8) {
  width: 86px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(9),
#contractsListPanel .contracts-table-wrap td:nth-child(9) {
  width: 82px;
}

#contractsListPanel .contracts-table-wrap th:nth-child(10),
#contractsListPanel .contracts-table-wrap td:nth-child(10) {
  width: 92px;
}

#contractsListPanel .contracts-table-wrap th:last-child,
#contractsListPanel .contracts-table-wrap td:last-child {
  width: 216px;
}

#contractsListPanel .contracts-table-wrap td:last-child {
  white-space: nowrap;
}

.contract-group-cell {
  font-weight: 800;
}

.contract-pdf-cell,
.contract-status-pdf-cell {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.contract-pdf-cell .action-button,
.contract-pdf-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 28px;
}

.contract-pdf-placeholder {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 700;
}

.contract-action-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: 204px;
}

.contract-action-grid .action-button {
  margin: 0;
}

#courseClassesSection,
#contractsListPanel {
  overflow: visible;
}

.official-holiday-box {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.staff-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.staff-summary-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.staff-summary-card span,
.staff-summary-card strong {
  display: block;
}

.staff-summary-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.staff-summary-card strong {
  margin-top: 8px;
  color: var(--navy);
  font-size: 24px;
}

.staff-departure-note {
  display: block;
  max-width: 220px;
  margin-top: 5px;
  white-space: normal;
}

.staff-document-row .staff-renewal-date {
  width: 118px;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 10px;
}

.staff-document-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 8px 50px;
}

.staff-document-history button {
  padding: 5px 8px;
  border: 1px solid #dce5f2;
  border-radius: 7px;
  color: #49617f;
  background: #f8faff;
  font-size: 8px;
  font-weight: 700;
}

.salary-change-values {
  align-items: flex-start;
  min-width: 220px;
}

.salary-change-values small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
  text-align: right;
}

.staff-custom-document-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  margin-top: 8px;
}

.staff-custom-document-form label {
  display: grid;
  gap: 6px;
}

.staff-custom-document-form label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-custom-document-form input,
.staff-custom-document-form select {
  min-height: 38px;
}

.renewal-due {
  color: #a4332a !important;
  border-color: #f0c6c2 !important;
  background: #fff4f3 !important;
}

.salary-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.salary-preview > div {
  padding: 11px 12px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  background: #f8faff;
}

.salary-preview span,
.salary-preview strong {
  display: block;
}

.salary-preview span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.salary-preview strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 13px;
}

.payroll-toolbar {
  align-items: flex-end;
}

.payroll-toolbar > .filter-group {
  justify-content: flex-end;
}

.payroll-view-toggle {
  position: sticky;
  top: 12px;
  z-index: 4;
  flex: 0 0 270px;
  min-width: 270px;
  padding: 5px;
  border: 1px solid #cbd9ec;
  background: #e7eef9;
  box-shadow: 0 4px 12px rgba(16, 35, 63, 0.09);
}

.payroll-view-toggle button {
  flex: 1;
  min-height: 38px;
  font-size: 11px;
}

.payroll-month-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.payroll-search {
  min-width: 240px;
}

.payroll-table {
  min-width: 1220px;
}

.payroll-table th:first-child,
.payroll-table td:first-child {
  width: 145px;
  min-width: 145px;
  max-width: 145px;
  white-space: normal;
}

.payroll-employee-cell .table-primary,
.payroll-employee-cell .table-secondary {
  display: block;
  max-width: none;
  white-space: normal;
}

.payroll-employee-cell .table-secondary {
  margin-top: 2px;
  line-height: 1.25;
}

.payroll-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.payroll-liquidation-cell {
  text-align: center;
}

.liquidation-toggle {
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid #d6a8a4;
  border-radius: 999px;
  color: #8f2f29;
  background: #fff4f3;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.liquidation-toggle.is-liquidated {
  border-color: #9bcdb8;
  color: #28664e;
  background: #eefaf4;
}

.inline-liquidation-date {
  display: block;
  width: 82px;
  min-height: 22px;
  margin: 4px auto 0;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px solid #ccd6e5;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  text-align: center;
}

.automatic-entry {
  border-color: #c9d9ef;
  background: #f3f7fd;
}

.payroll-bank-toggle,
.payroll-bank-confirmation {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 750;
}

.payroll-bank-toggle input,
.payroll-bank-confirmation input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.payroll-bank-confirmation {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid #cbd9ec;
  border-radius: 10px;
  background: #f5f9ff;
}

.payroll-liquidation-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr);
  align-items: end;
  gap: 14px;
  margin-top: 16px;
}

.payroll-liquidation-fields .payroll-bank-confirmation {
  margin: 0;
}

#annualBonusPanel .payroll-table {
  width: 100%;
  min-width: 1380px;
  table-layout: auto;
}

#annualBonusPanel .payroll-table th:first-child,
#annualBonusPanel .payroll-table td:first-child {
  width: 180px;
  min-width: 180px;
}

#annualBonusPanel .payroll-table th:not(:first-child),
#annualBonusPanel .payroll-table td:not(:first-child) {
  text-align: center;
}

#annualBonusPanel .payroll-table th:nth-child(n + 2):nth-child(-n + 13),
#annualBonusPanel .payroll-table td:nth-child(n + 2):nth-child(-n + 13) {
  width: 72px;
  min-width: 72px;
  padding-inline: 7px;
  font-size: 9px;
}

#annualBonusPanel .payroll-table th:nth-child(14),
#annualBonusPanel .payroll-table td:nth-child(14) {
  width: 110px;
  min-width: 110px;
}

#annualBonusPanel .payroll-table th:nth-child(15),
#annualBonusPanel .payroll-table td:nth-child(15) {
  width: 130px;
  min-width: 130px;
}

#annualBonusPanel .payroll-table th:nth-child(16),
#annualBonusPanel .payroll-table td:nth-child(16) {
  width: 80px;
  min-width: 80px;
}

.annual-bonus-lost {
  color: #8f3a12;
  background: #fff7ed;
  font-weight: 850;
}

.annual-bonus-forfeited-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid #f0b88f;
  border-radius: 999px;
  color: #8f3a12;
  background: #fff7ed;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.payroll-liquidation-cell .annual-bonus-forfeited-badge + small {
  display: block;
  margin-top: 4px;
  color: #8b6a4a;
  font-size: 9px;
  font-weight: 750;
}

#annualLeavePanel {
  margin-top: 18px;
}

.departed-staff-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #cbd9ec;
}

.departed-staff-section .compact-heading {
  margin-bottom: 10px;
}

.departed-staff-section h4 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 15px;
}

.departed-staff-section p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.departed-staff-section .table-wrap {
  border-radius: 12px;
  background: #fbfdff;
}

.inactive-users-section {
  margin-top: 20px;
}

.inactive-users-section .compact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.inactive-users-section .result-count {
  flex: 0 0 auto;
}

.annual-leave-table {
  min-width: 920px;
}

.annual-leave-table th:nth-child(2),
.annual-leave-table td:nth-child(2) {
  min-width: 440px;
}

.leave-period-chip.unpaid {
  color: #9f2f41;
  border-color: #efb8b3;
  background: #fff2f1;
}

.module-form,
.module-workspace {
  margin-bottom: 18px;
}

.module-form label,
.compact-entry-form label,
.register-date-bar label {
  display: grid;
  gap: 6px;
}

.module-form label > span,
.compact-entry-form label > span,
.register-date-bar label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 14px;
}

.module-two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 20px;
}

.module-two-columns > section {
  min-width: 0;
}

.module-two-columns h4 {
  margin: 0 0 12px;
  color: var(--navy);
}

#activityWorkspace .module-two-columns {
  grid-template-columns: 1fr;
}

#activityParticipantsSection,
#activityDeclinedParticipantsSection {
  width: 100%;
}

.activity-teacher-view #activitiesTable th:nth-child(6),
.activity-teacher-view #activitiesTable td:nth-child(6) {
  display: none;
}

.teacher-activity-workspace .module-two-columns {
  grid-template-columns: 1fr;
}

.compact-entry-form {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #dde5f0;
  border-radius: 12px;
  background: #f8faff;
}

.compact-entry-form > .compact-button {
  margin-top: 11px;
}

.activity-summary {
  margin-bottom: 18px;
}

#activitiesTable {
  min-width: 0;
  table-layout: fixed;
}

#activitiesTable th,
#activitiesTable td {
  white-space: normal;
  overflow-wrap: anywhere;
}

#activitiesTable th:first-child,
#activitiesTable td:first-child {
  width: 24%;
}

#activitiesTable th:last-child,
#activitiesTable td:last-child {
  width: 260px;
}

#activitiesTable .align-right {
  white-space: nowrap;
  overflow-wrap: normal;
}

.activity-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

.activity-row-actions .action-button {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 5px 7px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.activity-list-description-preview {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#activitiesPage:not(.visitors-view) .activity-visitors-panel,
#activitiesPage.visitors-view .activity-main-only {
  display: none;
}

#activitiesPage:not(.activity-workspace-view) .activity-summary .finance-card:nth-child(n+5) {
  display: none;
}

#activitiesPage.activity-workspace-view .activity-overview-panel,
#activitiesPage.activity-workspace-view .period-mode-toggle,
#activitiesPage.activity-workspace-view #newActivityButton,
#activitiesPage.activity-workspace-view .activity-visitors-panel {
  display: none !important;
}

#activitiesPage.activity-workspace-view .page-tools {
  align-items: center;
}

#activitiesPage.activity-workspace-view #activityWorkspace {
  margin-top: 0;
}

#activitiesPage.activity-workspace-view #activityWorkspace > .panel-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid #e3ebf6;
}

.panel-heading-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.test-template-heading-actions {
  gap: 8px;
}

.certificate-manual-create-button {
  min-height: 30px;
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
  box-shadow: none;
}

.certificate-manual-create-button:hover,
.certificate-manual-create-button:focus-visible {
  border-color: #93c5fd;
  color: #1e40af;
  background: #dbeafe;
}

.template-header-button {
  min-height: 30px;
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
  box-shadow: none;
}

.template-header-button:hover,
.template-header-button:focus-visible {
  border-color: #93c5fd;
  color: #1e40af;
  background: #dbeafe;
}

.activity-group-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  align-items: start;
  gap: 10px 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8faff 0%, #f3f7ff 100%);
}

.activity-participant-toolbar,
.activity-filter-bar,
.register-page-filters {
  display: flex;
  align-items: end;
  gap: 10px;
}

#backToRegisterOverviewButton {
  min-height: 38px;
  white-space: nowrap;
}

#registersPage.register-workspace-view .register-page-filters label,
#registersPage.register-workspace-view #backToRegisterOverviewButton,
#registersPage.register-workspace-view #teacherRegisterProfile,
#registersPage.register-workspace-view #registerTeacherSummary,
#registersPage.register-workspace-view #registerAssignmentPanel,
#registersPage.register-workspace-view #registerDuePanel {
  display: none !important;
}

#registersPage.register-workspace-view .page-tools {
  align-items: center;
}

#registersPage.register-workspace-view #registerWorkspace {
  margin-top: 0;
}

#registersPage.register-workspace-view #registerWorkspace > .panel-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid #e3ebf6;
}

.activity-participant-toolbar {
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  background: #fff;
}

.activity-participant-toolbar > div {
  display: flex;
  align-items: end;
  gap: 6px;
}

.activity-filter-bar label,
.register-page-filters label {
  display: grid;
  gap: 5px;
}

.activity-filter-bar label > span,
.register-page-filters label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.activity-filter-bar select {
  min-width: 135px;
  min-height: 34px;
  font-size: 10px;
}

.activity-group-picker label {
  display: grid;
  gap: 6px;
}

.activity-group-picker > label:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.activity-group-picker > label:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

.activity-group-picker > label:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
}

.activity-group-picker select {
  min-height: 36px;
  border-radius: 10px;
  font-size: 12px;
}

.activity-teacher-picker {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  min-height: 54px;
}

.activity-fixed-teacher {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.activity-fixed-teacher span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.activity-fixed-teacher strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.activity-fixed-teacher .compact-button {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 30px;
  padding-inline: 12px;
  font-size: 10px;
}

.activity-teacher-editor {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid #c9d8f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.activity-teacher-editor label {
  gap: 4px;
}

.activity-teacher-picker .compact-button,
.activity-teacher-editor .compact-button {
  min-height: 32px;
  padding-inline: 12px;
  font-size: 10px;
}

.activity-group-picker label > span,
.activity-group-picker small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.activity-group-picker small {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
  font-weight: 600;
  line-height: 1.35;
}

.activity-filter-actions {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.activity-filter-actions .compact-button {
  align-self: center;
  min-height: 32px;
  padding-inline: 14px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

#declineActivityGroupButton {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff7f7;
}

#activityClearFiltersButton:disabled {
  opacity: 0.55;
}

.activity-confirm-modal {
  width: min(480px, calc(100vw - 32px));
}

.activity-confirm-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8ed 0%, #fff 100%);
}

.activity-confirm-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: #b45309;
  background: #ffedd5;
  font-weight: 900;
}

.activity-confirm-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 15px;
}

.activity-confirm-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.activity-status-toggle,
.activity-payment-toggle,
.activity-attendance-toggle,
.attendance-status-toggle {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid #cbd8e8;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.activity-status-toggle.confirmed,
.activity-payment-toggle.paid,
.activity-attendance-toggle.present,
.attendance-status-toggle.present {
  color: var(--green);
  border-color: #9fd3b5;
  background: var(--green-light);
}

.activity-status-toggle.pending,
.activity-payment-toggle.unpaid,
.activity-attendance-toggle.unset {
  color: var(--amber);
  border-color: #e9cf9e;
  background: var(--amber-light);
}

.activity-status-toggle.declined,
.activity-attendance-toggle.absent,
.attendance-status-toggle.absent {
  color: var(--red);
  border-color: #efb8b3;
  background: var(--red-light);
}

.activity-decline-button {
  width: 28px;
  min-height: 28px;
  margin-left: 5px;
  border: 1px solid #efb8b3;
  border-radius: 50%;
  color: var(--red);
  background: #fff;
  font-weight: 900;
}

.activity-declined-row {
  opacity: 0.64;
}

.activity-declined-section {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #fecaca;
  border-radius: 16px;
  background: #fffafa;
}

.activity-declined-section .panel-heading {
  margin-bottom: 10px;
}

.activity-bottom-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e1e8f4;
}

.activity-bottom-section .compact-entry-form {
  margin-bottom: 12px;
}

.activity-participant-modal {
  max-width: min(1480px, calc(100vw - 40px));
}

.activity-expense-modal {
  max-width: 720px;
}

.activity-participant-modal .compact-entry-form,
.activity-expense-modal .compact-entry-form {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.activity-participant-modal .compact-entry-form {
  padding-left: 28px;
  padding-right: 28px;
}

.activity-participant-modal .activity-participant-grid {
  gap: 16px 20px;
}

.activity-participant-modal .activity-participant-grid label {
  min-width: 0;
}

.activity-participant-modal .activity-participant-search {
  grid-column: 1 / -1;
}

.activity-participant-modal .activity-participant-search input {
  min-height: 46px;
  font-size: 15px;
}

.activity-student-picker,
.activity-visitor-picker,
.activity-visitor-new-panel {
  grid-column: 1 / -1;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  padding: 16px;
  background: #f8fbff;
}

.activity-visitor-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.activity-visitor-panel-head span {
  display: block;
  color: #17233f;
  font-size: 13px;
  font-weight: 800;
}

.activity-visitor-panel-head small,
.activity-visitor-result-meta {
  color: #60718d;
  font-size: 11px;
  line-height: 1.45;
}

.activity-visitor-result-meta {
  margin: 8px 0;
}

.activity-visitor-results {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  background: white;
}

.activity-visitor-results table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.activity-visitor-results th,
.activity-visitor-results td {
  padding-top: 12px;
  padding-bottom: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.activity-visitor-results th:nth-child(1),
.activity-visitor-results td:nth-child(1) {
  width: 78%;
}

.activity-visitor-results th:nth-child(2),
.activity-visitor-results td:nth-child(2) {
  width: 22%;
}

.activity-visitor-results td strong,
.activity-visitor-results td small {
  display: block;
}

.activity-visitor-results td small {
  margin-top: 3px;
  color: #60718d;
  font-size: 11px;
}

.activity-visitor-results tr.is-selected {
  background: #f0fdf4;
}
.activity-student-results {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  background: white;
}

.activity-student-results table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.activity-student-results th,
.activity-student-results td {
  padding-top: 12px;
  padding-bottom: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.activity-student-results th:nth-child(1),
.activity-student-results td:nth-child(1) {
  width: 78%;
}

.activity-student-results th:nth-child(2),
.activity-student-results td:nth-child(2) {
  width: 22%;
}

.activity-student-results td strong,
.activity-student-results td small {
  display: block;
}

.activity-student-results td small {
  margin-top: 3px;
  color: #60718d;
  font-size: 11px;
}

.activity-student-results tr.is-selected {
  background: #f0fdf4;
}

.activity-visitor-new-grid {
  margin-top: 12px;
}

.activity-participant-modal select,
.activity-participant-modal input,
.activity-participant-modal textarea {
  width: 100%;
}

.activity-complete-button {
  color: var(--green);
  border-color: #9fd3b5;
  background: var(--green-light);
}

.activity-publish-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px dashed #bfd0ea;
  border-radius: 14px;
  background: #f8fbff;
}

.activity-publish-upload label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.activity-publish-upload small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
}

.activity-pending-media {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: #f4f8ff;
}

.activity-pending-media strong {
  color: var(--primary);
  font-size: 12px;
}

.activity-pending-media div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activity-pending-media span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d7e3f8;
  font-size: 12px;
  font-weight: 800;
}

.activity-pending-media .activity-upload-chip {
  display: grid;
  min-width: min(280px, 100%);
  align-items: stretch;
  gap: 5px;
}

.activity-upload-chip b {
  display: block;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #e6eefb;
}

.activity-upload-chip i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f66f6, #16a34a);
}

.activity-upload-chip em {
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.activity-pending-media small {
  color: var(--muted);
  font-weight: 700;
}

#activityPublishModal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#activityPublishModal .modal-body {
  max-height: none;
  min-height: 0;
}

#activityPublishModal .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -14px 28px rgba(15, 31, 58, .06);
}

.activity-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.activity-media-card,
.activity-public-media {
  overflow: hidden;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.activity-media-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 135px;
  background: linear-gradient(135deg, #eef5ff, #f8fbff);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-media-preview.large {
  min-height: 260px;
}

.activity-media-preview img,
.activity-media-preview video {
  width: 100%;
  height: 100%;
  max-height: 310px;
  object-fit: cover;
}

.activity-media-meta {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.activity-media-meta strong {
  color: var(--ink);
  font-size: 12px;
}

.activity-media-meta small,
.activity-public-card header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.activity-media-meta input {
  min-height: 34px;
  font-size: 11px;
}

.activity-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activity-public-preview-body {
  background: #f5f8fc;
}

.activity-public-card {
  display: grid;
  gap: 12px;
}

.activity-public-card header {
  padding: 18px;
  border: 1px solid #dbe5f4;
  border-radius: 18px;
  background: #fff;
}

.activity-public-card h3 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: 24px;
}

.activity-public-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.activity-youtube-link,
.tc-public-youtube-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  min-height: 32px;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 999px;
  background: rgba(254, 242, 242, .95);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(185, 28, 28, .08);
}

.activity-youtube-link:hover,
.tc-public-youtube-link:hover {
  background: #fff1f2;
  transform: translateY(-1px);
}

.activity-youtube-icon,
.tc-public-youtube-icon {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 18px;
  padding: 0 4px;
  border-radius: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.tc-public-activity-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.tc-public-activity-actions .tc-public-activity-action,
.tc-public-activity-actions .tc-public-youtube-link {
  margin-top: 0;
}

.activity-public-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.activity-public-media {
  margin: 0;
}

.activity-public-media figcaption {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.register-date-bar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  background: #f8faff;
}

.register-day-buttons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.register-day-button {
  min-width: 28px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: white;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.register-day-button.course-session {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 38px;
  gap: 1px;
  line-height: 1;
  white-space: nowrap;
}

.register-day-button.course-session small {
  font-size: 8px;
  font-weight: 900;
  opacity: 0.78;
}

.register-day-button.session-block-0 {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.register-day-button.session-block-1 {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.register-day-button.session-block-2 {
  border-color: #fde68a;
  background: #fffbeb;
}

.register-day-button.session-block-3 {
  border-color: #ddd6fe;
  background: #f5f3ff;
}

.register-day-button.weekend {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff7f7;
}

.register-day-button.active {
  color: white;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 8px 16px rgba(36, 99, 235, 0.18);
}

.register-course-session-tools {
  display: flex;
  align-items: end;
  gap: 6px;
  flex-wrap: wrap;
}

.register-course-session-tools label {
  min-width: 150px;
}

.danger-soft {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff7f7;
}

.course-day-times {
  display: grid;
  gap: 10px;
  margin-top: 7px;
}

.course-day-time-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(2, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 8px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: #f8fbff;
}

.course-day-time-row strong {
  color: var(--navy);
  padding-bottom: 10px;
}

.course-package-session-planner {
  display: grid;
  gap: 10px;
  padding: 8px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: #f8fbff;
}

.course-package-session-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.course-package-session-heading strong {
  display: block;
  color: var(--navy);
}

.course-package-session-heading small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
}

.course-package-session-rows {
  display: grid;
  gap: 10px;
}

.course-package-generated-panel {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.course-package-generated-panel strong {
  color: var(--navy);
}

.course-package-generated-panel small {
  color: var(--muted);
  font-weight: 600;
}

.course-package-session-row {
  display: grid;
  grid-template-columns: minmax(95px, 0.7fr) repeat(3, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.course-package-session-row strong {
  color: var(--blue);
  padding-bottom: 11px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.course-package-session-preview {
  grid-template-columns: minmax(95px, 0.7fr) repeat(2, minmax(130px, 1fr));
  align-items: center;
}

.course-package-session-preview strong {
  padding-bottom: 0;
}

.course-package-session-preview span {
  color: var(--text);
  font-weight: 700;
}

.course-finish-level-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #ffffff;
}

.course-finish-level-panel strong,
.course-finish-level-panel small {
  display: block;
}

.course-finish-level-panel small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.course-finish-level-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 320px) auto;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid #dbe6f4;
}

.finish-course-exam-results {
  grid-column: 1 / -1;
  width: 100%;
}

.finish-course-exam-table {
  margin-top: 4px;
}

.exam-score-pair {
  display: grid;
  gap: 4px;
  min-width: 130px;
  padding: 6px 8px;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: #f8fbff;
}

.exam-score-pair strong {
  font-size: 11px;
  color: #17233f;
}

.exam-score-pair span {
  font-size: 13px;
  font-weight: 800;
  color: #0b1d3b;
}

.exam-score-pair small {
  font-size: 10px;
  color: #66738f;
}

.exam-score-pair.is-ready {
  border-color: #b9ead8;
  background: #effdf7;
}

.exam-score-pair.is-waiting {
  border-color: #f5cf9f;
  background: #fff8ed;
}

.finish-course-exam-warning,
.course-test-score-note {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid #f5cf9f;
  border-radius: 14px;
  background: #fff8ed;
  color: #7a4b00;
  font-size: 12px;
}

.course-test-score-note {
  display: grid;
  gap: 4px;
  grid-column: 1 / -1;
}

.finish-final-grade {
  width: 100%;
  min-width: 0;
}

.course-register-timing-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #f8fbff;
}

.course-register-timing-card strong {
  color: var(--navy);
  font-size: 18px;
}

.course-register-timing-card small {
  color: var(--muted);
  font-weight: 700;
}

.register-detail-panel,
.register-substitution-box {
  margin: 14px 0;
  padding: 10px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #fbfcff;
}

.register-detail-panel .student-profile-section-heading,
.register-substitution-box .panel-heading {
  margin-top: 0;
}

.register-workspace-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.register-tool-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  color: var(--navy);
  background: linear-gradient(135deg, #ffffff, #f7faff);
  text-align: left;
  box-shadow: 0 8px 22px rgba(31, 77, 160, 0.05);
}

.register-tool-button span {
  grid-row: 1 / span 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #2452d6;
  background: #edf4ff;
  font-size: 11px;
  font-weight: 900;
}

.register-tool-button strong {
  font-size: 13px;
}

.register-tool-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.register-tool-button:hover {
  border-color: #9bb7ff;
  transform: translateY(-1px);
}

.modal.large.register-modal-panel {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  margin: 0;
}

.modal.register-modal-panel .student-profile-section-heading {
  position: sticky;
  top: -18px;
  z-index: 1;
  margin: -18px -18px 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e9f3;
  background: #fff;
}

.register-substitution-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

.register-substitution-item,
.register-substitution-list > article {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  background: white;
}

.register-substitution-item strong,
.register-substitution-item span,
.register-substitution-item small,
.register-substitution-list > article strong,
.register-substitution-list > article small {
  display: block;
}

.register-substitution-item small,
.register-substitution-list > article small {
  margin-top: 3px;
  color: var(--muted);
}

.register-schedule-table {
  display: grid;
  width: 100%;
  margin-top: 7px;
  gap: 6px;
}

.register-weekly-schedule {
  min-width: 760px;
  table-layout: fixed;
}

.register-weekly-schedule th {
  color: white;
  background: #244fae;
  text-align: center;
}

.register-weekly-schedule td {
  height: 58px;
  padding: 10px;
  border-right: 1px solid #e2e9f3;
  text-align: center;
  vertical-align: top;
}

.register-weekly-schedule td strong,
.register-weekly-schedule td small {
  display: block;
}

.register-weekly-schedule td small {
  margin-top: 4px;
  color: var(--muted);
}

.register-schedule-editor {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 6px;
}

.register-schedule-editor textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

.register-schedule-table > div {
  display: grid;
  grid-template-columns: 130px 130px minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #e2e9f3;
  border-radius: 9px;
  background: white;
}

.register-schedule-table span,
.register-schedule-table b,
.register-schedule-table em {
  font-size: 10px;
  font-style: normal;
}

.register-schedule-group + .register-schedule-group {
  margin-top: 16px;
}

.register-schedule-row {
  display: grid;
  grid-template-columns: 140px 105px 105px minmax(180px, 1fr) auto;
  gap: 6px;
  margin-bottom: 8px;
}

.register-schedule-row input,
.register-schedule-row select {
  min-height: 36px;
}

.attendance-note {
  min-width: 230px;
  min-height: 74px;
  resize: vertical;
  line-height: 1.45;
}

.attendance-note-view {
  min-width: 230px;
  min-height: 48px;
  padding: 10px;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  color: #45546d;
  background: #f8faff;
  white-space: pre-wrap;
}

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

.daily-plan-template label {
  min-width: 0;
}

.daily-plan-template textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}

.daily-plan-preview {
  margin: 0 0 14px;
}

.daily-plan-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.daily-plan-preview-grid article {
  padding: 8px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.daily-plan-preview-grid span {
  display: block;
  margin-bottom: 6px;
  color: #2452d6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.daily-plan-preview-grid p {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
}

.course-lesson-preview {
  margin: 0 0 10px;
}

.course-lesson-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.course-lesson-card {
  position: relative;
  min-height: 92px;
  padding: 12px 12px 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 8px 18px rgba(31, 77, 160, 0.04);
}

.course-lesson-card::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #2f67f6;
  content: "";
}

.course-lesson-card span {
  display: block;
  margin-bottom: 7px;
  color: #2452d6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.course-lesson-card p {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.course-lesson-card.is-empty p {
  color: var(--muted);
  font-style: italic;
}

.course-lesson-editor {
  margin-top: 10px;
  padding: 0;
  border-color: #cbd8ef;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 77, 160, 0.06);
  overflow: hidden;
}

.course-lesson-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #e3eaf5;
  background: #f5f8ff;
}

.course-lesson-editor-head > strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.course-lesson-editor textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
  border-color: transparent;
  background: transparent;
}

.course-lesson-editor .form-grid {
  gap: 10px;
  padding: 10px;
}

.course-lesson-field {
  gap: 7px;
  padding: 10px;
  border: 1px solid #dde6f4;
  border-radius: 8px;
  background: #fbfdff;
}

.course-lesson-field:focus-within {
  border-color: #8fb0ff;
  box-shadow: 0 0 0 3px rgba(47, 103, 246, 0.08);
}

.course-lesson-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.course-lesson-edit-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #b9c9ee;
  color: #2452d6;
  background: #f4f7ff;
  box-shadow: 0 6px 14px rgba(36, 82, 214, 0.08);
}

.course-lesson-edit-button::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f67f6;
  content: "";
}

.course-lesson-edit-button:hover,
.course-lesson-edit-button:focus-visible {
  border-color: #7fa0f6;
  color: #173fba;
  background: #edf3ff;
}

.daily-plan-activities {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #cfdced;
  border-radius: 10px;
  background: white;
}

.daily-plan-activities > strong {
  color: var(--navy);
  text-align: center;
  text-transform: uppercase;
}

.daily-plan-day-schedule {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cfd8e8;
  border-radius: 8px;
  background: #fff;
}

.daily-plan-day-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-bottom: 1px solid #d8e2f0;
  background: #f7fbff;
}

.daily-plan-day-schedule-head strong {
  color: #1f5dd8;
  font-weight: 900;
}

.daily-plan-day-schedule-head span {
  color: #5b6981;
  font-weight: 700;
}

.daily-plan-schedule-lines {
  display: grid;
}

.daily-plan-schedule-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border-top: 1px solid #e7edf6;
}

.daily-plan-schedule-line:first-child {
  border-top: 0;
}

.daily-plan-schedule-line span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #eef5ff;
  color: #1f5dd8;
  font-size: 10px;
  font-weight: 900;
}

.daily-plan-schedule-line strong {
  color: #17233c;
  font-weight: 750;
  line-height: 1.25;
}

.daily-plan-schedule-empty {
  padding: 10px;
  color: #66758e;
  font-style: italic;
}

.daily-plan-schedule-note {
  padding: 9px 10px;
  border-top: 1px solid #f0d7a8;
  background: #fff8ea;
}

.daily-plan-schedule-note strong {
  display: block;
  margin-bottom: 4px;
  color: #9a5b00;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.register-subgroup-select,
.attendance-subgroup {
  min-width: 90px;
  min-height: 32px;
  font-size: 10px;
}

.homework-status-button,
.homework-status-toggle {
  min-width: 86px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #e5c785;
  border-radius: 999px;
  color: #9a6700;
  background: #fff9e9;
  font-size: 9px;
  font-weight: 850;
}

.homework-status-button.done,
.homework-status-toggle.completed {
  color: var(--green);
  border-color: #9fd3b5;
  background: var(--green-light);
}

.teacher-dashboard-panel {
  margin: 18px 0;
  border-color: #c8d8ef;
  background: linear-gradient(145deg, #fff, #f5f9ff);
}

.teacher-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.teacher-dashboard-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid #dbe5f4;
  border-top: 4px solid var(--blue);
  border-radius: 14px;
  background: white;
  box-shadow: 0 12px 24px rgba(20, 33, 61, 0.06);
}

.teacher-dashboard-stat-card > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: var(--blue-light);
  font-size: 12px;
  font-weight: 900;
}

.teacher-dashboard-stat-card small,
.teacher-dashboard-stat-card strong,
.teacher-dashboard-stat-card em {
  display: block;
}

.teacher-dashboard-stat-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.teacher-dashboard-stat-card strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.teacher-dashboard-stat-card em {
  margin-top: 7px;
  color: #7d8798;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.teacher-dashboard-stat-card.success {
  border-top-color: var(--green);
}

.teacher-dashboard-stat-card.success > span {
  color: var(--green);
  background: var(--green-light);
}

.teacher-dashboard-stat-card.info {
  border-top-color: var(--blue);
}

.teacher-dashboard-stat-card.danger {
  border-top-color: var(--red);
}

.teacher-dashboard-stat-card.danger > span {
  color: var(--red);
  background: var(--red-light);
}

.teacher-dashboard-stat-card.warning {
  border-top-color: var(--amber);
}

.teacher-dashboard-stat-card.warning > span {
  color: var(--amber);
  background: var(--amber-light);
}

.teacher-dashboard-stat-card.activity {
  border-top-color: var(--violet);
}

.teacher-dashboard-stat-card.activity > span {
  color: var(--violet);
  background: var(--violet-light);
}

.teacher-dashboard-mode > .sector-grid,
.teacher-dashboard-mode > .stats-grid,
.teacher-dashboard-mode > .content-grid {
  display: none;
}

.permission-edit-hidden {
  display: none !important;
}

.panel-permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.panel-permission-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid #dce4f1;
  border-radius: 10px;
  background: #fbfcff;
}

.panel-permission-card strong,
.panel-permission-card small {
  display: block;
}

.panel-permission-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.panel-permission-option {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.panel-permission-option input {
  width: 17px;
  height: 17px;
  min-height: auto;
}

.register-summary-card[data-register-teacher],
.register-summary-card[data-register-summary-teacher] {
  width: 100%;
  border: 1px solid #dbe5f2;
  border-top: 4px solid var(--blue);
  text-align: left;
  cursor: pointer;
}

.register-summary-card[data-register-teacher].active,
.register-summary-card[data-register-summary-teacher].active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(47, 103, 246, 0.12);
}

.register-date-bar small {
  padding-bottom: 9px;
  color: var(--muted);
}

.register-teacher-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.register-summary-card {
  min-height: 118px;
}

button.register-summary-card {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.register-summary-card:hover {
  border-color: #b8c8df;
  border-top-color: var(--blue);
  transform: translateY(-1px);
}

.teacher-activity-visitor-card {
  border-top-color: #f59e0b;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 46%);
}

button.teacher-activity-visitor-card:hover {
  border-top-color: #f59e0b;
}

.register-summary-card strong,
.register-summary-card small {
  display: block;
}

.register-summary-card strong {
  margin-top: 7px;
  color: var(--navy);
  font-size: 20px;
}

.register-summary-card p {
  min-height: 0;
  margin: 8px 0 0;
  color: #8a94a6;
  font-size: 10px;
  line-height: 1.45;
}

.register-summary-card small {
  margin-top: 7px;
  color: #8a94a6;
  font-size: 10px;
  font-weight: 650;
}

.manager-absence-panel {
  margin: 18px 0;
  border-color: #c8d8ef;
}

.manager-absence-summary {
  padding: 0 18px 14px;
}

.manager-absence-list {
  display: grid;
  gap: 6px;
  padding: 0 18px 18px;
}

.manager-absence-list article {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr);
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  background: #fbfcff;
}

.manager-absence-list strong,
.manager-absence-list span {
  display: block;
}

.manager-absence-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.register-student-link {
  padding: 0;
  border: 0;
  color: var(--navy);
  background: transparent;
  text-align: left;
}

.register-student-link strong,
.register-student-link small {
  display: block;
}

.register-student-link strong {
  font-size: 11px;
}

.register-student-link small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.register-activities-notice {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #b9d3fa;
  border-radius: 11px;
  background: #f3f8ff;
}

.register-activities-notice > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
}

.register-activities-notice div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid #dce8f7;
}

.register-activities-notice small {
  color: var(--muted);
}

.register-due-panel {
  margin-top: 18px;
}

.register-due-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
}

.register-due-list.teacher-debt-list {
  display: block;
  overflow-x: auto;
}

.register-due-list .teacher-debt-table {
  min-width: 1080px;
}

.register-due-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #e5d6ae;
  border-radius: 10px;
  color: var(--navy);
  background: #fffdf6;
  text-align: left;
}

.register-due-item span,
.register-due-item strong,
.register-due-item small {
  display: block;
}

.register-due-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.register-due-item b {
  color: var(--amber);
  white-space: nowrap;
}

.register-due-item.overdue {
  border-color: #efb8b3;
  color: #a4332a;
  background: #fff5f4;
}

.register-due-item.overdue b,
.register-due-item.overdue strong {
  color: #a4332a;
}

.register-due-item.reminder {
  border-color: #b9e2cc;
  color: #12643b;
  background: #f2fbf6;
}

.register-due-item.reminder b,
.register-due-item.reminder strong {
  color: #12643b;
}

.staff-profile-compact {
  display: flex;
  align-items: center;
  gap: 14px;
}

.staff-profile-compact h3,
.staff-profile-compact p {
  margin: 2px 0;
}

.teacher-debt-panel {
  margin: 18px 0;
  border-color: #efc3bf;
  background: #fffafa;
}

.admin-debt-page-card {
  border: 1px solid #efc3bf;
  background: linear-gradient(180deg, #fffafa 0%, #ffffff 42%);
}

.admin-debt-summary {
  margin: 14px 0 18px;
}

.admin-debt-list .teacher-debt-table {
  min-width: 1080px;
}

.danger-count {
  color: #a4332a;
  background: #fff0ee;
}

.teacher-debt-list {
  display: block;
  overflow-x: auto;
}

.teacher-debt-table {
  min-width: 940px;
  border: 1px solid #efceca;
  border-radius: 14px;
  overflow: hidden;
  background: white;
}

.teacher-debt-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(210px, 1.45fr) minmax(105px, .8fr) minmax(105px, .75fr) minmax(260px, 1.65fr) minmax(130px, .9fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #eef1f6;
}

.teacher-debt-row:first-child {
  border-top: 0;
}

.teacher-debt-head {
  background: #fff5f4;
  color: #566276;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.teacher-debt-row strong,
.teacher-debt-row small {
  display: block;
}

.teacher-debt-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.teacher-debt-row.overdue {
  background: #fff9f8;
}

.teacher-debt-row.reminder {
  background: #f6fdf9;
}

.teacher-debt-row.overdue > div:nth-child(3) strong {
  color: #a4332a;
}

.teacher-debt-row.reminder > div:nth-child(3) strong {
  color: #12643b;
}

.teacher-debt-note {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: 1px solid #d6e0f0;
  border-radius: 10px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
}

.teacher-debt-comments {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.teacher-debt-comment {
  padding: 8px 9px;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #f8fbff;
}

.teacher-debt-comment strong {
  color: var(--text);
  font-size: 11px;
}

.teacher-debt-comment small {
  margin-top: 2px;
  font-size: 9px;
}

.teacher-debt-comment p {
  margin: 5px 0 0;
  color: #24324a;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.teacher-debt-no-comments {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

.teacher-debt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.chat-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.documents-summary-grid {
  margin-bottom: 18px;
}

.surveys-table-wrap td {
  vertical-align: middle;
}

.surveys-table-wrap tbody td:first-child .table-secondary {
  display: none;
}

.survey-link-line {
  display: flex;
  max-width: 360px;
  align-items: center;
  gap: 6px;
}

.survey-link-line code {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f8fbff;
  color: #30415f;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.survey-builder-heading,
.survey-responses-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.survey-builder-heading h3,
.survey-responses-heading h4 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.survey-builder-heading p,
.survey-responses-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.survey-response-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 430px);
}

.survey-response-search {
  width: min(290px, 100%);
  min-height: 34px;
}

.survey-question-editor {
  display: grid;
  gap: 10px;
}

.survey-question-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 150px 88px auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #dce6f6;
  border-radius: 8px;
  background: #f8fbff;
}

.survey-question-card label {
  display: grid;
  gap: 6px;
}

.survey-question-card label > span {
  color: #53647e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.survey-question-card input,
.survey-question-card select,
.survey-question-card textarea {
  min-height: 36px;
  border: 1px solid #cfdaea;
  border-radius: 8px;
  background: #fff;
}

.survey-question-options {
  grid-column: 1 / -1;
}

.survey-question-options.hidden {
  display: none;
}

.survey-responses-panel {
  margin: 0;
  padding: 16px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #fbfdff;
}

.survey-responses-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.survey-response-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #dce6f6;
  border-radius: 8px;
  background: #fff;
}

.survey-response-card.open {
  border-color: #bcd0f0;
  background: #fbfdff;
}

.survey-response-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid #cfe0f6;
  border-radius: 7px;
  background: #fff;
  color: var(--blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.survey-response-toggle:hover {
  border-color: #8db4ff;
  background: #f2f7ff;
}

.survey-response-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.survey-response-main {
  display: grid;
  gap: 3px;
}

.survey-response-main strong {
  color: var(--navy);
  font-size: 13px;
}

.survey-response-main span {
  color: #53647e;
  font-size: 11px;
}

.survey-response-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #53647e;
  font-size: 11px;
}

.survey-answer-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  padding-left: 44px;
}

.survey-answer-item {
  padding: 8px 10px;
  border: 1px solid #e4ecf8;
  border-radius: 8px;
  background: #f8fbff;
}

.survey-answer-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--navy);
  font-size: 12px;
}

@media (max-width: 760px) {
  .survey-responses-heading,
  .survey-response-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-response-search {
    width: 100%;
  }

  .survey-response-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .survey-answer-list {
    padding-left: 0;
  }
}

.public-survey-view {
  min-height: 100vh;
  padding: 32px 16px;
  background: #edf3fb;
}

.public-survey-identity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-survey-card {
  width: min(860px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d5e1f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.public-survey-letterhead {
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid #e2eaf6;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.public-survey-letterhead img {
  width: 82px;
  height: 82px;
}

.public-survey-letterhead .report-letterhead h2,
.public-survey-letterhead h2 {
  font-size: clamp(16px, 2vw, 24px);
}

.public-survey-letterhead .report-letterhead-details {
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  font-size: 10px;
}

.public-survey-letterhead-title {
  margin-top: 9px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-survey-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2eaf6;
}

.public-survey-brand img {
  width: 48px;
  height: 48px;
}

.public-survey-brand h1 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 22px;
}

.public-survey-content {
  padding: 20px;
}

.public-survey-content h2 {
  margin: 0 0 6px;
  color: var(--navy);
}

.public-survey-content p {
  color: var(--muted);
}

.public-survey-form {
  display: grid;
  gap: 14px;
}

.public-survey-question {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce6f6;
  border-radius: 8px;
  background: #fbfdff;
}

.public-survey-question > strong {
  color: var(--navy);
  font-size: 13px;
}

.public-survey-options {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 6px;
}

.survey-rating-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-survey-options label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #dce6f6;
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.public-survey-options label span {
  flex: 1;
}

.public-survey-options input[type="radio"],
.public-survey-options input[type="checkbox"],
.survey-rating-row input[type="radio"] {
  flex: 0 0 14px;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--blue);
}

.public-survey-options label:hover,
.public-survey-options label:focus-within {
  border-color: #b9c9e5;
  background: #f8fbff;
  box-shadow: inset 3px 0 0 #d9e6ff;
}

.public-survey-options label:has(input:checked) {
  border-color: #8bb2ff;
  background: #f1f6ff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.survey-rating-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid #dce6f6;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.public-survey-content textarea,
.public-survey-content input[type="text"],
.public-survey-content input[type="email"],
.public-survey-content input[type="tel"] {
  width: 100%;
  border: 1px solid #cfdaea;
  border-radius: 8px;
}

.public-survey-thanks {
  padding: 18px;
  border: 1px solid #b8ead2;
  border-radius: 8px;
  background: #ecfdf5;
  color: #087f5b;
}

@media (max-width: 820px) {
  .survey-question-card {
    grid-template-columns: 1fr;
  }

  .public-survey-identity-grid {
    grid-template-columns: 1fr;
  }

  .public-survey-view {
    padding: 18px 10px;
  }

  .public-survey-letterhead {
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px;
  }

  .public-survey-letterhead img {
    width: 56px;
    height: 56px;
  }

  .public-survey-letterhead h2 {
    font-size: 15px;
    line-height: 1.15;
  }

  .public-survey-letterhead .report-letterhead-details {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 9px;
  }

  .public-survey-letterhead-title {
    margin-top: 7px;
    font-size: 10px;
  }
}

.panel-heading-actions .table-search-input {
  min-width: 220px;
}

.document-entry-form {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #dce6f6;
  border-radius: 14px;
  background: #f8fbff;
}

.document-entry-modal-form {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.document-entry-form select[multiple] {
  min-height: 120px;
  padding: 8px;
}

.document-entry-form label small {
  color: var(--muted);
  font-size: 11px;
}

.test-template-details {
  border: 1px solid #dce6f6;
  border-radius: 14px;
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.test-template-details summary {
  cursor: pointer;
  padding: 13px 16px;
  color: #2452d6;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.test-template-details[open] summary {
  border-bottom: 1px solid #e4ecf8;
  background: #f8fbff;
}

.test-template-details .form-grid {
  padding: 14px 16px 16px;
}

.test-template-level-summary {
  display: grid;
  gap: 8px;
  margin: 0 22px 16px;
  padding: 12px;
  border: 1px solid #dce6f6;
  border-radius: 12px;
  background: #f8fbff;
}

.test-template-level-summary-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.test-template-level-summary-item {
  display: grid;
  grid-template-columns: minmax(190px, 0.82fr) minmax(0, 2fr);
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #e1e9f6;
  border-radius: 8px;
  background: #fff;
}

.test-template-level-summary-item span,
.test-template-level-group-row span {
  display: block;
  color: #52637e;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.test-template-level-summary-item strong,
.test-template-level-group-row strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.test-template-level-summary-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.test-template-point-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.test-template-point-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid #d8e4f5;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.test-template-point-pill strong,
.test-template-point-pill span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  text-transform: none;
}

.test-template-point-pill span {
  padding-left: 8px;
  border-left: 1px solid currentColor;
  opacity: 0.78;
}

.test-template-point-pill.is-complete {
  border-color: #b8ead2;
  background: #ecfdf5;
  color: #087f5b;
}

.test-template-point-pill.is-under {
  border-color: #f3d39b;
  background: #fff8eb;
  color: #a15c07;
}

.test-template-point-pill.is-over {
  border-color: #f0b5bf;
  background: #fff0f2;
  color: #b4233a;
}

.test-template-point-pill.is-missing {
  border-style: dashed;
  border-color: #cbd5e1;
  background: #f3f6fb;
  color: #667085;
}

.test-template-point-meter {
  display: inline-flex;
  min-width: 94px;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  line-height: 1.1;
}

.test-template-point-meter strong {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.test-template-point-meter small {
  color: inherit;
  font-size: 10px;
  font-weight: 750;
  opacity: 0.78;
}

.test-template-point-meter.is-complete {
  border-color: #b8ead2;
  background: #ecfdf5;
  color: #087f5b;
}

.test-template-point-meter.is-under {
  border-color: #f3d39b;
  background: #fff8eb;
  color: #a15c07;
}

.test-template-point-meter.is-over {
  border-color: #f0b5bf;
  background: #fff0f2;
  color: #b4233a;
}

.certificate-template-cell {
  display: inline-flex;
  max-width: 220px;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  line-height: 1.15;
}

.certificate-template-cell strong,
.certificate-template-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.certificate-template-cell strong {
  color: #10244d;
  font-size: 11px;
  font-weight: 800;
}

.certificate-template-cell small {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.certificate-template-cell.is-missing {
  border-style: dashed;
  background: #f8fafc;
}

.test-template-level-group-row td {
  padding: 12px 16px;
  border-top: 1px solid #cbdaf2;
  border-bottom: 1px solid #dce6f6;
  background: #f8fbff;
}

.test-template-level-group-row td > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.test-template-level-group-row td > div:first-child strong,
.test-template-level-group-row td > div:first-child span {
  display: inline;
  margin: 0;
}

.test-template-level-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.test-template-level-group-heading > div:first-child {
  min-width: 0;
}

.test-template-level-group-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.level-certificate-template-control {
  display: inline-flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.level-certificate-template-control.is-missing,
.level-certificate-template-control.has-template {
  background: transparent;
}

.level-certificate-template-control .action-button {
  min-height: 26px;
  padding: 4px 9px;
  border-color: #d8e2ef;
  border-radius: 7px;
  color: #334155;
  background: #fff;
  box-shadow: none;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.level-certificate-template-control .action-button + .action-button {
  margin-left: 0;
}

.level-certificate-template-control .action-button:hover {
  border-color: #b8c7dc;
  color: #0f172a;
  background: #f8fafc;
}

.level-certificate-template-control .action-button:disabled {
  cursor: progress;
  opacity: 0.65;
}
.level-certificate-template-control .template-download-button {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.level-certificate-template-control .template-download-button:hover {
  border-color: #86efac;
  color: #065f46;
  background: #dcfce7;
}

.level-certificate-template-control .template-change-button {
  border-color: #c7d2fe;
  color: #3754c8;
  background: #eef2ff;
}

.level-certificate-template-control .template-change-button:hover {
  border-color: #a5b4fc;
  color: #243aa8;
  background: #e0e7ff;
}

.manual-level-certificate-modal-body {
  display: grid;
  gap: 14px;
}

.manual-level-certificate-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dbe6f3;
  border-radius: 9px;
  background: #f8fbff;
}

.manual-level-certificate-mode legend {
  padding: 0 4px;
  color: #5b6b82;
  font-size: 11px;
  font-weight: 800;
}

.manual-level-certificate-student-fields {
  margin: 0;
  padding: 0;
}

.manual-level-certificate-exams-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e4f5;
  border-radius: 10px;
  background: #fbfdff;
}

.manual-level-certificate-exams-heading,
.manual-level-certificate-exam-row,
.manual-level-certificate-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manual-level-certificate-exams-heading strong,
.manual-level-certificate-exam-row strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.25;
}

.manual-level-certificate-exams-heading small,
.manual-level-certificate-exam-row small,
.manual-level-certificate-preview {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

#manualLevelCertificateTotal {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #b45309;
  background: #fff7ed;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#manualLevelCertificateTotal.is-complete {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.manual-level-certificate-exams {
  display: grid;
  gap: 8px;
}

.manual-level-certificate-exam-row {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.manual-level-certificate-exam-row input {
  width: 120px;
  min-height: 34px;
  text-align: right;
}

.manual-level-certificate-preview {
  min-height: 32px;
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
}

.manual-level-certificate-preview strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.manual-level-certificate-history-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.test-template-level-total {
  display: inline-flex;
  min-width: 130px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #d8e4f5;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  white-space: nowrap;
}

.test-template-level-total strong,
.test-template-level-total span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  text-transform: none;
}

.test-template-level-total strong {
  font-weight: 900;
}

.test-template-level-total span {
  opacity: 0.78;
  font-weight: 800;
}

.test-template-level-total.is-complete {
  border-color: #b8ead2;
  background: #ecfdf5;
  color: #087f5b;
}

.test-template-level-total.is-under {
  border-color: #f3d39b;
  background: #fff8eb;
  color: #a15c07;
}

.test-template-level-total.is-over {
  border-color: #f0b5bf;
  background: #fff0f2;
  color: #b4233a;
}

@media (max-width: 900px) {
  .test-template-level-summary {
    margin-inline: 14px;
  }

  .test-template-level-summary-item {
    grid-template-columns: 1fr;
  }
}

.pretty-file-upload {
  position: relative;
  cursor: pointer;
  border: 1px dashed #abc0e4;
  border-radius: 14px;
  background: #f8fbff;
  padding: 14px 16px;
}

.pretty-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pretty-file-upload strong {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 800;
}

.pretty-file-upload small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.document-file-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e8edf6;
}

.document-file-line.active {
  padding: 10px;
  border: 1px solid #cfeedd;
  border-radius: 12px;
  background: #f0fff7;
}

.document-protocol-note {
  display: block;
  margin-top: 6px;
  color: #12643b;
  font-size: 12px;
  font-weight: 800;
}

.protocol-label-cell {
  width: 180px;
  max-width: 220px;
  white-space: normal;
}

.protocol-label-cell .table-primary {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-file-line:last-child {
  border-bottom: 0;
}

.document-file-line small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}

.document-profile-body {
  display: grid;
  gap: 12px;
}

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

.document-profile-section {
  padding: 10px;
  border: 1px solid #e1e8f5;
  border-radius: 14px;
  background: #fbfdff;
}

.document-profile-section h3 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 14px;
}

.document-profile-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
}

#institutionProtocolPreview {
  color: var(--primary);
  font-size: 20px;
}

.inline-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.chat-message {
  max-width: 760px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fbff;
}

.chat-message.mine {
  justify-self: end;
  border-color: #bfd2ff;
  background: #eef4ff;
}

.chat-message div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
}

.chat-message p {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.expense-category-summary {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.expense-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.expense-summary-metrics .finance-card {
  min-height: 98px;
  padding: 16px 18px;
}

.expense-summary-metrics .finance-card strong {
  font-size: 20px;
}

.expense-category-breakdown {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
}

.expense-category-breakdown-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.expense-category-breakdown-header strong {
  color: var(--navy);
  font-size: 13px;
}

.expense-category-breakdown-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.expense-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 18px;
}

.expense-category-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid #eef2f7;
}

.expense-category-line:first-child,
.expense-category-line:nth-child(2) {
  border-top-color: transparent;
}

.expense-category-line span,
.expense-category-line strong,
.expense-category-line small {
  min-width: 0;
}

.expense-category-line span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.expense-category-line strong {
  color: var(--navy);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.expense-category-line small {
  grid-column: 1 / -1;
  color: #8a94a6;
  font-size: 10px;
}

.expense-category-bar {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.expense-category-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
}

.expense-table-actions {
  min-width: min(100%, 420px);
}

.expense-table-actions .table-search-input {
  flex: 1 1 230px;
  min-width: 220px;
}

.fixed-expense-total-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  color: var(--navy);
  background: #f8fbff;
  font-size: 10px;
  font-weight: 650;
}

.fixed-expense-total-bar span {
  color: var(--muted);
  letter-spacing: .01em;
  font-weight: 650;
}

.fixed-expense-total-bar strong {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 850;
}

.fixed-expense-total-bar small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.expense-conversion-preview {
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
  font-weight: 750;
}

.expense-conversion-preview strong {
  color: var(--navy);
}

.expense-conversion-line {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.fixed-expense-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}

.fixed-expense-actions .action-button {
  margin-left: 0;
}

.fixed-expense-actions .action-button + .action-button {
  margin-left: 0;
}

.fixed-expense-paid-date-field {
  display: grid;
  gap: 2px;
  min-width: 92px;
  text-align: left;
}

.fixed-expense-paid-date-field span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.fixed-expense-paid-date-field .date-input {
  width: 92px;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 10px;
}

.leave-period-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 3px 5px 3px 0;
  padding: 5px 8px;
  border: 1px solid #d9e4f2;
  border-radius: 999px;
  color: var(--navy);
  background: #f5f9ff;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.leave-period-chip small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.individual-payroll-print {
  display: none;
}

.staff-profile-print,
.student-profile-print,
.course-registration-print {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.daily-plan-print {
  display: none;
}

.test-print-area {
  display: none;
}

.proforma-print-area {
  display: none;
}

.activity-list-print {
  display: none;
}

.staff-card-sheet {
  width: 190mm;
  min-height: 270mm;
  margin: 0 auto;
  padding: 10mm;
  color: #061833;
  background: white;
  font-family: Arial, Helvetica, sans-serif;
}

.staff-card-report-letterhead {
  margin-bottom: 8px;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: white;
}

.staff-card-report-letterhead img {
  width: 76px;
  height: 76px;
}

.staff-card-report-letterhead h2 {
  font-size: 18px;
  line-height: 1.05;
}

.staff-card-report-letterhead .report-letterhead-details {
  font-size: 8.5px;
  line-height: 1.18;
}
.course-registration-sheet .staff-card-section {
  margin-top: 7px;
}

.course-registration-identity {
  display: flex;
  min-height: auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0;
  padding: 7px 9px;
  border-radius: 10px;
}

.course-registration-title-block {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.course-registration-title-block .staff-card-eyebrow,
.course-registration-title-block h2,
.course-registration-title-block p {
  flex: 0 0 auto;
}

.course-registration-title-block p {
  margin: 0;
  white-space: nowrap;
}

.course-registration-identity h2 {
  margin: 2px 0;
  font-size: 18px;
  line-height: 1.05;
}

.course-registration-identity p {
  font-size: 11px;
}

.course-registration-meta-block {
  display: grid;
  min-width: 142px;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.course-registration-meta-block span {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  color: #0f5132;
  background: #eafaf1;
  font-size: 10px;
  font-weight: 800;
}

.course-registration-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.course-registration-summary .staff-card-field {
  min-height: 32px;
}

.course-registration-table {
  table-layout: fixed;
}

.course-registration-table th,
.course-registration-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.course-registration-table td strong {
  font-weight: 850;
}

.course-registration-table td small {
  display: block;
  margin-top: 2px;
  line-height: 1.12;
}

.course-registration-date-lines {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.course-registration-date-lines span {
  display: block;
  white-space: nowrap;
}

.course-registration-payment-lines {
  display: grid;
  gap: 1px;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: break-word;
}

.course-registration-plan-table th:nth-child(1),
.course-registration-plan-table td:nth-child(1) {
  width: 13%;
}

.course-registration-plan-table th:nth-child(2),
.course-registration-plan-table td:nth-child(2) {
  width: 31%;
}

.course-registration-plan-table th:nth-child(3),
.course-registration-plan-table td:nth-child(3) {
  width: 11%;
}

.course-registration-plan-table th:nth-child(4),
.course-registration-plan-table td:nth-child(4) {
  width: 10%;
}

.course-registration-plan-table th:nth-child(5),
.course-registration-plan-table td:nth-child(5) {
  width: 8%;
}

.course-registration-plan-table th:nth-child(6),
.course-registration-plan-table td:nth-child(6) {
  width: 12%;
}

.course-registration-plan-table th:nth-child(7),
.course-registration-plan-table td:nth-child(7) {
  width: 15%;
}

.course-registration-plan-table th:nth-child(3),
.course-registration-plan-table td:nth-child(3),
.course-registration-plan-table th:nth-child(4),
.course-registration-plan-table td:nth-child(4),
.course-registration-plan-table th:nth-child(5),
.course-registration-plan-table td:nth-child(5),
.course-registration-plan-table th:nth-child(6),
.course-registration-plan-table td:nth-child(6),
.course-registration-plan-table th:nth-child(7),
.course-registration-plan-table td:nth-child(7) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.course-registration-plan-table td:nth-child(1) strong,
.course-registration-plan-table td:nth-child(6) strong {
  display: inline-block;
  font-size: 0.86em;
  line-height: 1.05;
  white-space: nowrap;
}

.course-registration-plan-table td:nth-child(4),
.course-registration-plan-table td:nth-child(6) {
  font-size: 0.9em;
}

.course-registration-payments-table th:nth-child(1),
.course-registration-payments-table td:nth-child(1) {
  width: 17%;
}

.course-registration-payments-table th:nth-child(2),
.course-registration-payments-table td:nth-child(2) {
  width: 12%;
}

.course-registration-payments-table th:nth-child(3),
.course-registration-payments-table td:nth-child(3) {
  width: 43%;
}

.course-registration-payments-table th:nth-child(4),
.course-registration-payments-table td:nth-child(4) {
  width: 12%;
}

.course-registration-payments-table th:nth-child(5),
.course-registration-payments-table td:nth-child(5) {
  width: 16%;
}
.course-registration-payments-section {
  break-inside: avoid;
}

.course-registration-plan-section {
  break-inside: auto;
}

.staff-card-document-title {
  margin: -4px 0 8px;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.staff-card-letterhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #dce7f5;
}

.staff-card-letterhead img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.staff-card-letterhead span,
.staff-card-eyebrow {
  display: block;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.staff-card-letterhead h1 {
  margin: 3px 0 0;
  font-size: 21px;
  line-height: 1;
}

.staff-card-letterhead p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.staff-card-identity {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  background: #f8fbff;
}

.staff-card-photo {
  width: 78px;
  height: 94px;
  overflow: hidden;
  border: 1px solid #d4e1f2;
  border-radius: 14px;
  background: #eef4ff;
}

.staff-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-card-photo-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #2563eb;
  font-size: 23px;
  font-weight: 900;
}

.staff-card-identity h2 {
  margin: 5px 0;
  font-size: 22px;
  line-height: 1.1;
}

.staff-card-identity p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.staff-card-status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.staff-card-status-row span,
.staff-card-section-heading span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0f5132;
  background: #eafaf1;
  font-size: 11px;
  font-weight: 800;
}

.staff-card-section {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
}

.staff-card-section h3 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 14px;
}

.staff-card-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.staff-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.staff-card-field {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #e2eaf5;
  border-radius: 10px;
  background: #fbfdff;
}

.staff-card-field span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-card-field strong {
  display: block;
  margin-top: 4px;
  color: #061833;
  font-size: 12px;
  line-height: 1.25;
}

.staff-card-field strong small,
.contract-number-detail-card strong small {
  display: block;
  margin-top: 3px;
  color: #475569;
  font-size: 0.86em;
  line-height: 1.25;
}

.staff-card-documents {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.staff-card-documents th,
.staff-card-documents td {
  padding: 4px 6px;
  border: 1px solid #dbe7f5;
  text-align: left;
}

.staff-card-documents th {
  color: #334155;
  background: #f1f5fb;
  font-size: 10px;
  text-transform: uppercase;
}

.staff-card-documents td small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.86em;
  font-weight: 700;
}

.staff-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 14px;
  color: #334155;
  border-top: 1px solid #dbe7f5;
  font-size: 12px;
  font-weight: 700;
}

.test-media-print-label {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d8e3f3;
  border-radius: 12px;
  background: #f8fbff;
  color: #10244d;
  font-size: 12px;
}

.test-print-page {
  background: white;
}

.test-print-info-card {
  margin-bottom: 12px;
}

.test-print-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.test-print-answer-grid div {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 10px;
  background: #f8fbff;
}

.test-print-answer-grid span {
  color: #60708a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.test-print-answer-grid strong {
  color: #10244d;
  font-size: 12px;
  line-height: 1.35;
}

.test-print-description {
  margin: 0 0 14px;
  color: #42526d;
  font-size: 12px;
  line-height: 1.5;
}

.daily-plan-print-page {
  width: 210mm;
  min-height: 297mm;
  padding: 10mm;
  color: #17233c;
  background: white;
  font-family: "Times New Roman", serif;
  font-size: 11px;
}

.daily-plan-print-page .daily-plan-document-letterhead {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.daily-plan-print-page .daily-plan-document-letterhead img {
  width: 78px;
  height: 78px;
}

.daily-plan-print-page .daily-plan-document-letterhead h2 {
  font-size: 17px;
  line-height: 1.08;
}

.daily-plan-print-page .daily-plan-document-letterhead .report-letterhead-details {
  font-size: 9px;
}

.daily-plan-document-title {
  margin: 0 0 10px;
  padding: 8px 0 9px;
  border-top: 1px solid #dce6f4;
  border-bottom: 2px solid #1f5dd8;
  text-align: center;
}

.daily-plan-document-title span {
  display: block;
  color: #1f5dd8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daily-plan-print-page h1 {
  margin: 5px 0;
  font-size: 22px;
  text-transform: uppercase;
}

.daily-plan-document-title p {
  margin: 0;
  color: #536278;
  font-size: 11px;
  font-weight: 700;
}

.daily-plan-print-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.daily-plan-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}

.daily-plan-print-grid-bottom {
  align-items: start;
}

.daily-plan-document-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
  gap: 7px;
  align-items: start;
  margin-bottom: 7px;
}

.daily-plan-print-meta div,
.daily-plan-print-page section {
  padding: 7px;
  border: 1px solid #cfd8e8;
  border-radius: 6px;
}

.daily-plan-print-meta strong,
.daily-plan-print-meta span {
  display: block;
}

.daily-plan-print-page section {
  margin-bottom: 7px;
  break-inside: avoid;
}

.daily-plan-print-grid section {
  margin-bottom: 0;
}

.daily-plan-print-page .daily-plan-schedule-section {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.daily-plan-print-page h4 {
  margin: 0 0 5px;
  color: #1f3763;
  font-size: 11px;
}

.daily-plan-print-page p {
  margin: 0;
  line-height: 1.35;
}

.daily-plan-print-page ol {
  margin: 0;
  padding-left: 18px;
}

.daily-plan-print-page .daily-plan-print-actions {
  padding-left: 16px;
}

.daily-plan-print-page .daily-plan-print-actions li {
  margin-bottom: 2px;
  line-height: 1.25;
}

.daily-plan-print-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.daily-plan-print-page th,
.daily-plan-print-page td {
  padding: 5px;
  border: 1px solid #cfd8e8;
  vertical-align: top;
}

.daily-plan-preview-document {
  padding: 8px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: #eef4ff;
  overflow: auto;
}

.daily-plan-preview-document .daily-plan-print-page {
  width: auto;
  min-height: auto;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid #cfd8e8;
  border-radius: 10px;
  box-shadow: 0 16px 35px rgba(20, 38, 74, 0.08);
}

.daily-plan-preview-document .daily-plan-document-letterhead {
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .daily-plan-preview-document .daily-plan-print-grid,
  .daily-plan-preview-document .daily-plan-document-bottom {
    grid-template-columns: 1fr;
  }
}

.individual-payroll-sheet {
  padding: 16px;
  color: #14243d;
  background: white;
}

.individual-payroll-sheet > header,
.individual-payroll-sheet > footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.individual-payroll-sheet > header div {
  display: grid;
  gap: 4px;
}

.individual-payroll-employee-block {
  min-height: 78mm;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6mm;
}

.individual-payroll-sheet h1 {
  margin: 0 0 3px;
}

.individual-payroll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 12px 0;
}

.individual-payroll-salary-level {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #f8fbff;
}

.individual-payroll-salary-level h2 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 13px;
}

.individual-payroll-grid.compact {
  margin: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.individual-payroll-sheet section {
  margin-top: 8px;
}

.individual-payroll-sheet table {
  white-space: normal;
}

.individual-payroll-sheet th,
.individual-payroll-sheet td {
  padding: 5px;
  border: 1px solid #dce5f2;
  text-align: left;
}

.individual-payroll-sheet > footer {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #ccd7e7;
}

.payroll-entry-employee {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  color: var(--navy);
  background: #f8faff;
}

.payroll-entry-employee span {
  color: var(--muted);
  font-size: 11px;
}

.work-week-fieldset {
  margin: 0;
  padding: 10px;
  border: 1px solid #dce5f2;
  border-radius: 11px;
}

.work-week-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.work-week-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-week-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #dce5f2;
  border-radius: 9px;
  background: #f8faff;
  cursor: pointer;
}

.work-week-options input {
  margin: 0;
}

.employment-contract-history {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.employment-contract-history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #dce5f2;
  border-radius: 11px;
  background: #fbfcff;
}

.employment-contract-history-item > div:first-child {
  display: grid;
  gap: 4px;
}

.employment-contract-history-item span,
.employment-contract-history-item small {
  color: var(--muted);
  font-size: 9px;
}

.employment-contract-history-item p {
  margin: 3px 0 0;
  color: #445875;
  font-size: 11px;
  white-space: normal;
}

.employment-contract-history-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.payroll-absence-editor {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #fbfcff;
}

.payroll-entry-list {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.payroll-entry-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid #dce5f2;
  border-radius: 9px;
  background: #fff;
}

.payroll-entry-list-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.payroll-entry-list-item span,
.payroll-entry-empty {
  color: var(--muted);
  font-size: 10px;
  white-space: normal;
}

.annual-payout-fields {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f1;
}

.payroll-table .table-secondary {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-termination-card {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #f0c6c2;
  border-radius: 12px;
  background: #fffafa;
}

.staff-termination-card.completed {
  border-color: #d8dee9;
  background: #f8fafc;
}

.staff-termination-card > label {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.staff-termination-card .danger-button {
  margin-top: 8px;
}

.staff-transfer-field {
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  display: grid;
  gap: 6px;
}

.staff-transfer-field label {
  display: grid;
  gap: 7px;
}

.staff-transfer-field small {
  color: #64748b;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .course-admin-grid {
    grid-template-columns: 1fr;
  }

  .staff-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-custom-document-form {
    grid-template-columns: 1fr;
  }

  .salary-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

caption {
  padding: 10px 18px;
  color: #1d2b4f;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

th,
td {
  padding: 14px 18px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
  font-size: 12px;
}

th {
  color: #697386;
  background: #fafbfc;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #fbfcfe;
}

.table-primary {
  display: block;
  color: var(--navy);
  font-weight: 750;
}

.table-stacked-line + .table-stacked-line {
  margin-top: 4px;
}

.table-deadline-line {
  display: block;
}

.table-deadline-line + .table-deadline-line {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.table-secondary {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.course-schedule-lines {
  display: grid;
  gap: 4px;
  min-width: 120px;
}

.course-schedule-line {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}

.course-schedule-line strong {
  color: var(--navy);
  font-size: 10px;
}

.course-schedule-line small {
  color: var(--muted);
  font-size: 10px;
}

.course-group-actions {
  min-width: 160px;
}

.course-group-actions .action-button {
  margin: 2px 0 2px 3px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 9px;
}

.align-right {
  text-align: right;
}

.admin-config-table th:last-child,
.admin-config-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 190px;
  background: white;
  box-shadow: -8px 0 14px -14px rgba(16, 24, 40, 0.55);
}

.admin-config-table th:last-child {
  z-index: 2;
  background: #fafbfc;
}

#studentsPage .admin-config-table,
#courseClassesSection .course-management-table-wrap table {
  table-layout: fixed;
  min-width: 0;
  white-space: normal;
}

#studentsPage .table-wrap,
#courseClassesSection .course-management-table-wrap {
  overflow-x: hidden;
}

#studentsPage .admin-config-table th,
#studentsPage .admin-config-table td,
#courseClassesSection .course-management-table-wrap th,
#courseClassesSection .course-management-table-wrap td {
  padding: 9px 8px;
  font-size: 10.6px;
  line-height: 1.24;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

#studentsPage .admin-config-table th,
#courseClassesSection .course-management-table-wrap th {
  font-size: 8.8px;
  line-height: 1.12;
  letter-spacing: 0.04em;
}

#studentsPage .admin-config-table .column-sort-button,
#courseClassesSection .course-management-table-wrap .column-sort-button {
  gap: 3px;
  font-size: 8.8px;
  line-height: 1.12;
}

#studentsPage .admin-config-table .column-sort-button span,
#courseClassesSection .course-management-table-wrap .column-sort-button span {
  font-size: 9px;
}

#studentsPage .admin-config-table .column-filter-row th {
  padding: 5px 5px 7px;
}

#studentsPage .admin-config-table .column-filter-row input,
#studentsPage .admin-config-table .column-filter-row select {
  min-width: 0;
  min-height: 26px;
  padding: 5px 5px;
  font-size: 8.7px;
}

#studentsPage .admin-config-table .table-primary,
#courseClassesSection .course-management-table-wrap .table-primary {
  font-size: 10.6px;
  line-height: 1.22;
}

#studentsPage .admin-config-table .table-secondary,
#courseClassesSection .course-management-table-wrap .table-secondary {
  margin-top: 2px;
  font-size: 8.8px;
  line-height: 1.2;
}

#studentsPage .admin-config-table .status-badge,
#courseClassesSection .course-management-table-wrap .status-badge {
  padding: 3px 6px;
  font-size: 8.8px;
  line-height: 1.1;
}

#studentsPage .admin-config-table th:nth-child(1),
#studentsPage .admin-config-table td:nth-child(1) {
  width: 9.5%;
}

#studentsPage .admin-config-table th:nth-child(2),
#studentsPage .admin-config-table td:nth-child(2) {
  width: 8.5%;
}

#studentsPage .admin-config-table th:nth-child(3),
#studentsPage .admin-config-table td:nth-child(3) {
  width: 7%;
}

#studentsPage .admin-config-table th:nth-child(4),
#studentsPage .admin-config-table td:nth-child(4) {
  width: 7%;
}

#studentsPage .admin-config-table th:nth-child(5),
#studentsPage .admin-config-table td:nth-child(5) {
  width: 7.5%;
}

#studentsPage .admin-config-table th:nth-child(6),
#studentsPage .admin-config-table td:nth-child(6) {
  width: 15.5%;
}

#studentsPage .admin-config-table th:nth-child(7),
#studentsPage .admin-config-table td:nth-child(7) {
  width: 11%;
}

#studentsPage .admin-config-table th:nth-child(8),
#studentsPage .admin-config-table td:nth-child(8) {
  width: 11%;
}

#studentsPage .admin-config-table th:nth-child(9),
#studentsPage .admin-config-table td:nth-child(9) {
  width: 7%;
}

#studentsPage .admin-config-table th:nth-child(10),
#studentsPage .admin-config-table td:nth-child(10) {
  width: 5.5%;
}

#studentsPage .admin-config-table th:last-child,
#studentsPage .admin-config-table td:last-child {
  width: 11%;
  min-width: 142px;
  white-space: normal;
}

#studentsPage .admin-config-table td:last-child .action-button,
#courseClassesSection .course-management-table-wrap td:last-child .action-button {
  margin: 1px;
  padding: 4px 5px;
  font-size: 8.8px;
  line-height: 1.1;
  white-space: nowrap;
}

#studentsPage .admin-config-table td:last-child .action-button + .action-button,
#courseClassesSection .course-management-table-wrap td:last-child .action-button + .action-button {
  margin-left: 1px;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(1),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(1) {
  width: 8%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(2),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(2) {
  width: 9%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(3),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(3) {
  width: 12%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(4),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(4) {
  width: 11%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(5),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(5) {
  width: 14%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(6),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(6) {
  width: 6%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(7),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(7) {
  width: 7%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(8),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(8) {
  width: 10%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:nth-child(9),
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:nth-child(9) {
  width: 7%;
}

#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap th:last-child,
#courseClassesSection [data-course-management-panel="groups"] .course-management-table-wrap td:last-child {
  width: 16%;
  min-width: 0;
  white-space: normal;
}

#courseClassesSection .course-management-table-wrap .course-schedule-lines {
  min-width: 0;
  gap: 2px;
}

#courseClassesSection .course-management-table-wrap .course-schedule-line {
  grid-template-columns: minmax(44px, auto) 1fr;
  gap: 4px;
  font-size: 8.8px;
}

#courseClassesSection .course-management-table-wrap .course-schedule-line strong,
#courseClassesSection .course-management-table-wrap .course-schedule-line small {
  font-size: 8.8px;
}

.status-badge,
.permission-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
}

.status-badge.active {
  color: var(--green);
  background: var(--green-light);
}

.status-badge.pending {
  color: var(--amber);
  background: var(--amber-light);
}


.status-badge.trial {
  color: var(--blue);
  background: var(--blue-light);
}
.status-badge.inactive,
.status-badge.cancelled {
  color: var(--red);
  background: var(--red-light);
}

.status-badge.completed {
  color: var(--violet);
  background: var(--violet-light);
}

.permission-chip {
  margin: 2px 3px 2px 0;
  color: #4b5d7b;
  background: #eff2f7;
}

.quick-actions {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: white;
  text-align: left;
}

.quick-action:hover {
  border-color: #b7c9f8;
  background: #f8faff;
}

.quick-action > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue);
  background: var(--blue-light);
  font-size: 20px;
}

.quick-action strong,
.quick-action small {
  display: block;
}

.quick-action strong {
  font-size: 12px;
}

.quick-action small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.page-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.search-box {
  position: relative;
  width: min(390px, 100%);
}

.search-box span {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #8a94a6;
  transform: translateY(-50%);
}

.search-box input {
  padding-left: 37px;
  background: white;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.finance-tools {
  align-items: flex-start;
}

.finance-tools .filter-group {
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filter-group select {
  min-width: 170px;
}

.result-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.report-page-title {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 22px;
}

.report-controls {
  align-items: flex-start;
  gap: 12px;
}

.report-controls > div:first-child {
  flex: 0 0 330px;
}

.finance-tools.report-controls .report-filter-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(165px, 1fr));
  gap: 10px;
  align-items: stretch;
  justify-content: end;
}

.report-filter-card {
  min-height: 46px;
  margin: 0;
  padding: 0 10px 0 12px;
  gap: 12px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(16, 35, 63, 0.04);
}

.report-filter-card span {
  min-width: auto;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}

.report-filter-card select,
.report-filter-card input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  font-size: 14px;
}

.report-source-filter {
  grid-column: span 1;
}

.report-date-filter {
  min-width: 0;
}

.report-filter-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-end;
}

.report-filter-actions button {
  min-height: 46px;
  white-space: nowrap;
}

.report-output {
  margin-top: 18px;
}

.report-letterhead {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #dce6f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.report-letterhead img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: auto;
}

.report-letterhead-main {
  flex: 1;
  min-width: 0;
}

.report-letterhead h2 {
  margin: 0;
  color: #78c9ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.report-letterhead h2 strong {
  color: #ff7774;
}

.report-letterhead-rule {
  height: 2px;
  margin: 6px 0 8px;
  background: #8e949c;
}

.report-letterhead-details {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, auto);
  gap: 12px;
  color: #8b94a5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.28;
}

.report-letterhead-details span {
  display: block;
}

.report-print-generated-at {
  display: none;
  margin: -6px 0 12px;
  color: #60708a;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.report-builder-panel {
  margin-top: 18px;
}

.report-column-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.report-column-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #f8fbff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 750;
}

.report-column-option input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.report-output table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.report-output th,
.report-output td {
  white-space: normal;
  word-break: break-word;
}

.report-output tfoot td {
  border-top: 2px solid #d3def0;
  background: #f7fbff;
  color: var(--navy);
  font-weight: 900;
}

.report-total-label {
  text-align: left !important;
}

.report-total-row td:not(.report-total-label) {
  text-align: right;
  white-space: nowrap;
}

.report-output .column-sort-button {
  width: 100%;
  justify-content: flex-start;
}

.report-column-sort-button[data-direction="asc"] span,
.report-column-sort-button[data-direction="desc"] span {
  transform: none;
}

.report-output th:first-child,
.report-output td:first-child {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center;
}

.report-row-number {
  color: var(--blue);
  font-weight: 800;
  white-space: nowrap !important;
  word-break: normal !important;
}

.report-total-label {
  text-align: left !important;
  white-space: nowrap !important;
}

.report-total-value {
  text-align: right !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.report-missing-documents-cell {
  line-height: 1.25;
}

.report-missing-documents-cell {
  width: 190px;
  max-width: 190px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.report-table-filter-row th:first-child {
  background: #f8faff;
}

.report-table-filter-row input,
.report-table-filter-row select {
  width: 100%;
  min-width: 0;
  font-size: 10px;
}

.report-table-filter-row select {
  padding-right: 20px;
  color: var(--navy);
}

@media (max-width: 1280px) {
  .report-controls {
    flex-direction: column;
  }

  .report-controls > div:first-child {
    flex-basis: auto;
  }

  .finance-tools.report-controls .report-filter-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.month-filter,
.period-mode-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 12px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: white;
}

.period-mode-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #eef1f6;
}

.period-mode-toggle button {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 800;
}

.period-mode-toggle button.active {
  color: var(--blue);
  background: white;
  box-shadow: 0 1px 4px rgba(16, 35, 63, 0.12);
}

.draft-subtype-toggle {
  display: inline-flex;
  margin: 12px 0 14px;
}

.draft-subtype-toggle button {
  padding-inline: 12px;
}

.month-filter input {
  min-width: 145px;
  border: 0;
  box-shadow: none;
}

.month-filter select {
  min-width: 140px;
  border: 0;
  box-shadow: none;
}

#financeStartDateFilter,
#financeEndDateFilter {
  min-width: 220px;
}

#financeTodayButton {
  min-height: 42px;
  padding-inline: 14px;
}

#paymentContractSearchHelp {
  color: var(--muted);
  font-size: 9px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.finance-view-tabs {
  margin: 0 0 18px;
}

.finance-overview-tabs {
  margin: 0 0 14px;
}

.finance-overview-tabs button {
  padding-inline: 14px;
}

.finance-subpanel {
  min-width: 0;
}

.finance-overview-mode .finance-ledger-only {
  display: none !important;
}

.finance-season-summary-mode .period-mode-filter,
.finance-season-summary-mode #financeMonthFilter,
.finance-season-summary-mode #financeDateFilter,
.finance-season-summary-mode #financeStartDateFilter,
.finance-season-summary-mode #financeEndDateFilter,
.finance-season-summary-mode #financeTodayButton {
  display: none !important;
}

.finance-overview-summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

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

.finance-books-summary {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.book-catalog-search-row {
  margin: 10px 0 14px;
  max-width: 440px;
}

.book-catalog-search-row .search-field {
  display: block;
}

.book-catalog-search-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.book-catalog-search-row input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 100, 255, 0.12);
}

.book-missing-row td {
  background: #fff7f7;
}

.book-missing-row td:first-child {
  border-left: 4px solid var(--red);
}

.book-target-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef4ff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.book-target-tag.missing {
  background: #ffe9ec;
  color: #b4233a;
}

.book-inactive-row {
  opacity: 0.78;
}

.book-hidden-targets {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: #f8fbff;
  display: grid;
  gap: 10px;
}

.book-hidden-targets p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.book-hidden-targets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.book-hidden-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.book-hidden-target-chip button {
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.status-pill.danger {
  background: var(--red-light);
  color: var(--red);
}

.finance-books-mode .finance-balances,
.finance-books-mode .finance-payments {
  display: none;
}

.finance-season-contract-cards .finance-card {
  min-height: 102px;
  border-top-color: var(--green);
}

.finance-season-contract-cards .finance-card.course {
  border-top-color: var(--blue);
}

.finance-season-contract-cards .finance-card strong {
  font-size: 21px;
}

.finance-season-contract-cards .finance-card small {
  color: var(--navy);
  font-weight: 800;
}

.balance-card {
  border-top-color: var(--green);
}

.balance-card.negative {
  border-top-color: var(--red);
}

.balance-card.positive strong {
  color: var(--green);
}

.balance-card.negative strong {
  color: var(--red);
}

.balance-carry-card {
  border-top-color: var(--blue);
}

.balance-carry-card.positive strong {
  color: var(--green);
}

.balance-carry-card.negative {
  border-top-color: var(--red);
}

.balance-carry-card.negative strong {
  color: var(--red);
}

.finance-balance-panel tfoot td {
  border-top: 2px solid #d3def0;
  background: #f7fbff;
  color: var(--navy);
  font-weight: 900;
}

.finance-balance-panel tfoot tr.carry-forward-row td {
  background: #fffdf5;
}

.finance-balance-panel tfoot tr.contract-season-row td {
  background: #f0fdf8;
  border-top-color: #bbf7d0;
}

.finance-balance-panel tfoot tr.season-accounting-row td {
  background: #f8fafc;
}

.finance-balance-panel tfoot tr.final-result-row td {
  background: #eef6ff;
  border-top-color: var(--blue);
}

.finance-card {
  min-height: 118px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: 14px;
  background: white;
  box-shadow: none;
}

.finance-card.paid {
  border-top-color: var(--green);
}

.finance-card.due {
  border-top-color: var(--red);
}

.finance-card span,
.finance-card strong,
.finance-card small {
  display: block;
}

.finance-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.finance-card strong {
  margin-top: 8px;
  color: var(--navy);
  font-size: 23px;
}

.finance-card small {
  margin-top: 9px;
  color: #8a94a6;
  font-size: 10px;
}

.staff-profile-compact.teacher-profile-link {
  width: 100%;
  padding: 18px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.teacher-profile-open {
  margin-left: auto;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.document-approval-badge {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.document-approval-badge.approved {
  color: #0d7a52;
  background: #e8f7f0;
}

.document-approval-badge.pending {
  color: #9a6200;
  background: #fff4d6;
}

.document-approval-badge.archived {
  color: #475569;
  background: #eef2f7;
}

.approve-action {
  color: #0d7a52;
  border-color: #addfca;
  background: #f2fbf7;
}

.finance-payments {
  margin-top: 18px;
}

.amount-paid {
  color: var(--green);
  font-weight: 750;
}

.amount-due {
  color: var(--red) !important;
  font-weight: 750;
}

.action-button {
  padding: 6px 9px;
  border: 1px solid #dbe1e9;
  border-radius: 8px;
  color: #42526b;
  background: white;
  font-size: 10px;
  font-weight: 750;
}

.action-button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.action-button + .action-button {
  margin-left: 6px;
}

.action-button.primary-lite {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

.action-button.primary-lite:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.action-button.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

.action-button.success {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.action-button.success:hover {
  border-color: #059669;
  color: #065f46;
}

.action-button.warning {
  border-color: #fed7aa;
  color: #c2410c;
  background: #fff7ed;
}

.action-button.warning:hover {
  border-color: #f97316;
  color: #9a3412;
}

.action-button.delete-action {
  border-color: #fecdca;
  color: #b42318;
  background: #fffafa;
}

.action-button.delete-action:hover {
  border-color: #b42318;
  color: #8f1d14;
  background: #fff1f0;
}

.maintenance-card {
  border: 1px solid #fecdca;
  background: #fffafa;
}

.maintenance-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.danger-zone-button {
  padding: 10px 14px;
  border: 1px solid #fda29b;
  border-radius: 10px;
  color: #b42318;
  background: white;
  font-size: 11px;
  font-weight: 800;
}

.danger-zone-button:hover {
  border-color: #b42318;
  color: white;
  background: #b42318;
}

.empty-row {
  padding: 38px 18px;
  color: var(--muted);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(13, 24, 45, 0.62);
  backdrop-filter: blur(3px);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 34px);
  overflow: hidden;
  border-radius: 18px;
  background: white;
  box-shadow: 0 28px 70px rgba(10, 20, 38, 0.28);
  transform: translate(-50%, -50%);
}

.modal.large {
  width: min(1040px, calc(100vw - 32px));
}

.modal.action-confirm-modal {
  width: min(520px, calc(100vw - 32px));
  z-index: 90;
}

#installmentDueDateModal {
  z-index: 85;
}

.action-confirm-body {
  display: grid;
  gap: 16px;
}

.action-confirm-message {
  margin: 0;
  color: #344054;
  font-size: 14px;
  line-height: 1.55;
}

.action-confirm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe5f5;
  border-radius: 12px;
  background: #f7faff;
}

.action-confirm-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.action-confirm-summary span,
#actionConfirmReasonField small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.action-confirm-summary strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#actionConfirmReasonField {
  display: grid;
  gap: 7px;
}

#actionConfirmReasonField textarea {
  min-height: 96px;
  resize: vertical;
}

.modal-footer .danger-button {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.modal-footer .danger-button:hover,
.modal-footer .danger-button:focus-visible {
  background: #b91c1c;
}

.payment-coverage-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

#staffAmendmentModal,
#staffSalaryChangeModal {
  z-index: 70;
}

#testPreviewModal.modal.large,
#studentTestModal.modal.large {
  width: min(1180px, calc(100vw - 28px));
}

.modal.pdf-viewer-modal {
  z-index: 80;
  width: min(1180px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

.modal.pdf-viewer-modal.compact-file-viewer-modal {
  width: min(760px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100vh - 24px);
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
}

.modal-header {
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 20px;
}

.modal-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #667085;
  background: white;
  font-size: 22px;
}

.modal-body {
  max-height: calc(100vh - 185px);
  padding: 24px;
  overflow-y: auto;
}

.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}

.pdf-viewer-body {
  position: relative;
  height: calc(100vh - 157px);
  padding: 8px;
  background: #e8edf5;
}

.pdf-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: white;
}

.pdf-viewer-fallback {
  position: absolute;
  inset: 12px;
  display: grid;
  place-content: center;
  gap: 6px;
  border-radius: 10px;
  color: var(--navy);
  background: white;
  text-align: center;
}

.pdf-viewer-fallback span {
  color: var(--muted);
  font-size: 12px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

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

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

.span-two {
  grid-column: span 2;
}

.span-three {
  grid-column: span 3;
}

.span-four {
  grid-column: 1 / -1;
}

.permissions-box,
.form-section {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.permissions-box legend {
  margin-bottom: 10px;
  color: #344054;
  font-size: 13px;
  font-weight: 750;
}

.check-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.check-card + .check-card {
  margin-top: 9px;
}

.check-card input {
  width: 16px;
  min-height: 16px;
  margin-top: 2px;
}

.check-card strong,
.check-card small,
.switch-row strong,
.switch-row small {
  display: block;
}

.check-card strong,
.switch-row strong {
  font-size: 12px;
}

.check-card small,
.switch-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 13px;
  border-radius: 10px;
  background: #f7f8fa;
}

.switch-row input {
  width: 18px;
  min-height: 18px;
}

.free-contract-switch {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  border: 1px solid #cbd7f0;
  background: #f4f7ff;
}

.free-contract-switch strong {
  color: var(--navy);
}

.free-contract-switch input {
  accent-color: var(--blue);
}

.contract-form-body {
  background: #f8f9fb;
}

.contract-existing-student-picker {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  background: #f8fbff;
}

.contract-existing-student-picker .student-profile-section-heading {
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 14px;
}

.contract-existing-student-search {
  display: grid;
  gap: 7px;
}

.contract-existing-student-search input {
  min-height: 46px;
  font-size: 15px;
}

.contract-existing-student-results {
  margin-top: 12px;
}

.contract-existing-student-results .table-wrap {
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.contract-existing-student-results table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.contract-existing-student-results th,
.contract-existing-student-results td {
  white-space: normal;
}

.contract-existing-student-results th:nth-child(1),
.contract-existing-student-results td:nth-child(1) {
  width: 28%;
}

.contract-existing-student-results th:nth-child(2),
.contract-existing-student-results td:nth-child(2) {
  width: 32%;
}

.contract-existing-student-results th:nth-child(4),
.contract-existing-student-results td:nth-child(4) {
  width: 110px;
}

.contract-existing-student-results .selected-row {
  background: #ecfdf4;
}

.course-group-student-picker {
  margin-bottom: 0;
}

.course-group-student-picker .contract-existing-student-results .table-wrap {
  max-height: 230px;
}

.course-group-student-picker .contract-existing-student-results th:nth-child(1),
.course-group-student-picker .contract-existing-student-results td:nth-child(1) {
  width: auto;
}

.course-group-student-picker .contract-existing-student-results th:nth-child(2),
.course-group-student-picker .contract-existing-student-results td:nth-child(2) {
  width: 112px;
  text-align: right;
}

.course-group-student-picker .muted-row {
  color: var(--muted);
  background: #f8fafc;
}

.course-individual-student-picker {
  margin-bottom: 0;
}

.course-package-student-picker {
  margin-bottom: 0;
}

.course-individual-student-picker .contract-existing-student-results .table-wrap {
  max-height: 230px;
}

.course-package-student-picker .contract-existing-student-results .table-wrap {
  max-height: 230px;
}

.course-individual-selected-student {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #ecfdf4;
}

.course-individual-selected-student strong {
  color: #065f46;
  font-size: 13px;
}

.course-individual-selected-student span {
  color: var(--muted);
  font-size: 11px;
}

.course-individual-schedule-panel {
  padding: 14px;
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  background: #f8fbff;
}

.course-individual-schedule-panel .student-profile-section-heading {
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 12px;
}

.course-individual-schedule-rows {
  display: grid;
  gap: 10px;
}

.course-individual-schedule-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.course-individual-schedule-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--blue);
  background: #eff6ff;
  font-weight: 800;
}

.course-individual-schedule-row label {
  display: grid;
  gap: 6px;
}

.course-individual-schedule-row span {
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

.form-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
}

.form-section:first-of-type {
  margin-top: 0;
}

.form-section legend {
  padding: 0 8px 0 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.form-section legend span {
  display: inline-grid;
  width: 23px;
  height: 23px;
  margin-right: 6px;
  place-items: center;
  border-radius: 7px;
  color: white;
  background: var(--blue);
  font-size: 10px;
}

.form-section legend strong {
  display: inline-block;
  vertical-align: middle;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.info-notice {
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid #b8e4d3;
  border-radius: 10px;
  color: #12664a;
  background: var(--green-light);
  font-size: 12px;
  font-weight: 650;
}

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

.parent-form-card,
.signing-parent-section {
  padding: 16px;
  border: 1px solid #dce4f1;
  border-radius: 12px;
  background: #fbfcff;
}

.parent-section-check {
  justify-content: flex-start;
  margin: -4px 0 12px;
}

.registrant-parent-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #dce4f1;
  border-radius: 10px;
  background: #f8fbff;
}

.registrant-parent-field > span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 750;
}

.parent-form-card.is-inactive {
  opacity: 0.55;
  background: #f5f7fb;
}

.parent-form-card.is-inactive input {
  cursor: not-allowed;
}

.parent-form-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.parent-form-title > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  color: white;
  background: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.parent-form-title strong,
.parent-form-title small,
.subsection-heading strong,
.subsection-heading small {
  display: block;
}

.parent-form-title strong,
.subsection-heading strong {
  color: var(--navy);
  font-size: 13px;
}

.parent-form-title small,
.subsection-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.signing-parent-section {
  margin-top: 14px;
}

.subsection-heading {
  margin-bottom: 14px;
}

#otherGuardianFields {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.parent-extra-fields {
  margin-top: 16px;
}

.installment-section {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: 12px;
  background: #fbfcff;
}

.installment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4e9f1;
}

.installment-heading strong,
.installment-heading small {
  display: block;
}

.installment-heading strong {
  color: var(--navy);
  font-size: 13px;
}

.installment-heading small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.installment-heading > span {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--green);
  background: var(--green-light);
  font-size: 12px;
  font-weight: 800;
}

.installment-table input {
  min-width: 145px;
  min-height: 38px;
  font-size: 11px;
}

.installment-table .installment-amount {
  color: var(--navy);
  background: #f2f5fa;
  font-weight: 750;
}

.payment-balance-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 10px;
  border-radius: 12px;
  background: #f2f5fa;
}

.payment-balance-info div {
  padding: 10px;
  border-radius: 9px;
  background: white;
}

.payment-balance-info span,
.payment-balance-info strong {
  display: block;
}

.payment-balance-info span {
  color: var(--muted);
  font-size: 10px;
}

.payment-balance-info strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 12px;
}

.payment-balance-info .coverage-lines {
  line-height: 1.65;
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(120deg, var(--navy), #294a82);
}

.finance-history-header .history-total {
  text-align: right;
}

.details-header .history-total strong {
  display: block;
  margin-top: 6px;
  color: white;
  font-size: 22px;
}

.history-table {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.history-table.compact {
  margin-top: 8px;
}

.details-header h3 {
  margin: 6px 0 0;
  font-size: 24px;
}

.details-header span {
  color: #c6d4ea;
  font-size: 11px;
}

.student-profile-identity,
.student-profile-actions,
.student-documents-heading,
.student-document-row,
.student-document-info,
.student-document-actions {
  display: flex;
  align-items: center;
}

.student-profile-identity {
  gap: 12px;
}

.student-profile-identity small {
  display: block;
  margin-top: 6px;
  color: #dbe6f7;
  font-size: 11px;
  font-weight: 750;
}

.student-profile-photo {
  display: grid;
  width: 82px;
  height: 102px;
  flex: 0 0 82px;
  overflow: hidden;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  color: white;
  background: rgba(255, 255, 255, 0.14);
  font-size: 22px;
  font-weight: 850;
}

.student-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.register-student-profile-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(125deg, var(--navy), #315a97);
}

.register-student-profile-hero h3 {
  margin: 6px 0;
  font-size: 24px;
}

.register-student-profile-hero p {
  margin: 0;
  color: #dce8fa;
}

.register-homework-table th,
.register-homework-table td {
  min-width: 130px;
  vertical-align: top;
}

.register-homework-table th:first-child,
.register-homework-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  background: white;
}

.register-homework-table th span,
.register-homework-table th small,
.register-homework-table td strong,
.register-homework-table td small {
  display: block;
}

.register-homework-table th small,
.register-homework-table td small {
  margin: 4px 0;
  color: var(--muted);
}

.register-homework-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.register-homework-summary-card,
.student-homework-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
}

.register-homework-summary-card span,
.student-homework-item span {
  display: block;
  min-width: 0;
}

.register-homework-summary-card strong,
.student-homework-item strong {
  display: block;
  color: var(--ink);
}

.register-homework-summary-card small,
.student-homework-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.student-homework-list {
  display: grid;
  gap: 6px;
}

.attendance-homework-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

.attendance-homework-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #f8faff;
}

.attendance-homework-item span,
.attendance-homework-item strong,
.attendance-homework-item small {
  display: block;
}

.attendance-homework-item strong {
  color: var(--navy);
  font-size: 11px;
}

.attendance-homework-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.student-homework-table td:first-child {
  min-width: 220px;
}

.student-profile-actions {
  align-items: stretch;
  flex-direction: column;
  gap: 6px;
}

.profile-button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 9px;
  color: var(--navy);
  background: white;
  font-size: 10px;
  font-weight: 800;
}

.profile-button.subtle {
  color: white;
  background: transparent;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.detail-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.detail-card span,
.detail-card strong {
  display: block;
}

.test-schedule-suggestions {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e4f4;
  border-radius: 14px;
  background: #f8fbff;
}

.test-schedule-suggestions:empty {
  display: none;
}

.test-schedule-suggestions-heading,
.test-schedule-student-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.test-schedule-suggestions-heading strong,
.test-schedule-student-picker-heading strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.test-schedule-suggestions-heading small,
.test-schedule-student-picker-heading small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.test-schedule-suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.test-schedule-students-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.test-schedule-suggestion {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid #d6e1f1;
  border-radius: 12px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.test-schedule-suggestion.active {
  border-color: var(--blue);
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.test-schedule-suggestion strong {
  font-size: 11px;
}

.test-schedule-suggestion span,
.test-schedule-suggestion small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

#testScheduleModal {
  display: flex;
  flex-direction: column;
  height: min(840px, calc(100vh - 34px));
}

#testScheduleModal #testScheduleForm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#testScheduleModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow-y: auto;
}

#testScheduleModal .modal-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.05);
}

.test-schedule-student-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e4f4;
  border-radius: 14px;
  background: #f8fbff;
}

.test-schedule-student-picker-heading > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--blue);
  background: #eaf1ff;
  font-size: 10px;
  font-weight: 900;
}

#testScheduleModal .test-schedule-students-list {
  max-height: min(218px, 28vh);
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-color: rgba(47, 103, 246, 0.38) transparent;
  scrollbar-width: thin;
}

#testScheduleModal .test-schedule-students-list::-webkit-scrollbar {
  width: 4px;
}

#testScheduleModal .test-schedule-students-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(47, 103, 246, 0.34);
}

.test-schedule-student-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #d6e1f1;
  border-radius: 10px;
  background: #ffffff;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.test-schedule-student-row:hover,
.test-schedule-student-row:focus-within {
  border-color: #a9bef0;
  background: #fbfdff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.test-schedule-student-row:has(.test-schedule-student-checkbox:checked) {
  border-color: rgba(37, 99, 235, 0.5);
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.test-schedule-student-checkbox {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #aebfda;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.test-schedule-student-row .test-schedule-student-checkbox {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
}

.test-schedule-student-checkbox::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -1px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.test-schedule-student-checkbox:checked {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.test-schedule-student-checkbox:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.test-schedule-student-checkbox:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.test-schedule-student-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}

.test-schedule-student-row strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.test-schedule-student-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

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

.detail-card-heading span {
  flex: 1;
}

.detail-edit-button {
  padding: 0;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-size: 9px;
  font-weight: 800;
}

.editable-detail-card.editing {
  background: #f8fbff;
}

.profile-inline-editor {
  margin-top: 8px;
}

.profile-inline-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 11px;
}

.profile-inline-actions {
  display: flex;
  gap: 10px;
  margin-top: 7px;
}

.text-button.muted {
  color: var(--muted);
}

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

.parent-profile-card {
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: 14px;
  background: #fbfcff;
}

.parent-profile-card.adult-profile-card {
  grid-column: 1 / -1;
}

.parent-profile-title {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid #dce4f1;
  background: #eef5ff;
}

.parent-profile-title > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.parent-profile-title.father {
  background: #f3f1ff;
}

.parent-profile-title.father > span {
  background: #6857c8;
}

.parent-profile-title h4,
.parent-profile-title p {
  margin: 0;
}

.parent-profile-title h4 {
  color: var(--navy);
  font-size: 13px;
}

.parent-profile-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.parent-profile-details {
  display: grid;
  gap: 10px;
  padding: 8px;
}

.parent-profile-details .detail-card {
  background: white;
}

.detail-card span {
  color: var(--muted);
  font-size: 10px;
}

.detail-card strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 12px;
}

.detail-card.due-detail-card {
  border-color: #fecdca;
  background: #fffafa;
}

.detail-card.due-detail-card strong {
  color: var(--red);
}

.detail-section-title {
  margin: 24px 0 10px;
  color: var(--navy);
  font-size: 14px;
}

.student-notes-card {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #dce4f1;
  border-radius: 12px;
  background: #fbfcff;
}

.student-notes-card textarea {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
  background: white;
}

.student-note-attachment-field {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #cbd5e4;
  border-radius: 10px;
  background: white;
}

.student-note-attachment-field > span {
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
}

.student-note-attachment-field input {
  min-height: 38px;
  padding: 7px 9px;
  font-size: 10px;
}

.student-note-attachment-field small {
  color: var(--muted);
  font-size: 9px;
}

.student-profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.profile-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.student-notes-card .student-profile-section-heading {
  margin-top: 0;
}

.student-profile-section-heading h3,
.student-profile-section-heading p {
  margin: 0;
}

.student-profile-section-heading h3 {
  color: var(--navy);
  font-size: 14px;
}

.student-profile-section-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.student-profile-section-heading > strong {
  color: var(--navy);
  font-size: 16px;
  white-space: nowrap;
}

.compact-button {
  min-height: 34px;
  padding: 8px 13px;
  font-size: 10px;
  white-space: nowrap;
}

.student-profile-table {
  margin-top: 7px;
}

.student-profile-table th,
.student-profile-table td {
  white-space: nowrap;
}

.student-profile-table td:nth-child(2),
.student-profile-table td:nth-child(3) {
  white-space: normal;
}

.student-exam-results-table td:nth-child(4) {
  min-width: 260px;
  white-space: normal;
}

.student-manual-test-card {
  margin-top: 16px;
}

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

.manual-test-form-grid label,
.student-manual-test-card > label {
  display: grid;
  gap: 6px;
}

.manual-test-form-grid span,
.student-manual-test-card > label > span {
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
}

.student-manual-tests-table td:nth-child(6) {
  min-width: 210px;
  white-space: normal;
}

.student-profile-exam-card-list {
  display: grid;
  gap: 6px;
  margin-top: 5px;
}

.student-profile-exam-card,
.student-profile-exam-empty {
  padding: 8px 10px;
  border: 1px solid #dfe8f5;
  border-radius: 8px;
  background: #fff;
}

.student-profile-exam-empty {
  display: grid;
  gap: 4px;
  color: #52637e;
}

.student-profile-exam-empty strong {
  color: var(--navy);
}

.student-profile-exam-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.student-profile-exam-title {
  min-width: 0;
}

.student-profile-exam-title span {
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
}

.student-profile-exam-title h4 {
  margin: 1px 0 0;
  color: var(--navy);
  font-size: 12px;
}

.student-profile-exam-outcome {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 50px;
}

.student-profile-exam-outcome .student-grade-pill,
.student-profile-exam-outcome .student-profile-exam-grade {
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.student-profile-exam-outcome small {
  color: #52637e;
  font-size: 9px;
  font-weight: 800;
}

.student-profile-exam-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  color: #30415f;
  font-size: 10px;
  font-weight: 800;
}

.course-exam-result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.course-exam-result-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 6px;
  border: 1px solid #dbe6f4;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--navy);
  font-size: 9px;
  font-weight: 800;
}

.course-exam-result-pill strong {
  color: #1e3a8a;
  font-size: 8px;
  text-transform: uppercase;
}

.course-exam-result-pill small {
  color: #52637e;
  font-size: 9px;
  font-weight: 900;
}

.course-exam-result-pill.is-done {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.course-exam-result-pill.is-not-done {
  border-style: dashed;
  color: #667085;
  background: #f8fafc;
}

.test-student-not-done-row td {
  background: #fbfcff;
}

.student-test-summary-row td {
  vertical-align: middle;
  background: #fff;
}

.student-test-summary-row.is-expanded td {
  background: #f8fbff;
}

.student-test-expand-button {
  width: 32px;
  height: 32px;
  border: 1px solid #cddbf0;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.student-test-expand-button:hover,
.student-test-expand-button:focus-visible {
  border-color: var(--blue);
  background: #eef4ff;
  outline: none;
}

.student-test-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-test-summary-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid #d8e4f5;
  border-radius: 999px;
  background: #f8fbff;
  color: #30415f;
  font-size: 10px;
  font-weight: 800;
}

.student-test-detail-row > td {
  padding: 0 16px 16px;
  background: #f8fbff;
}

.student-test-detail-panel {
  overflow-x: auto;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
}

.student-test-inner-table {
  min-width: 980px;
}

.student-test-inner-table th,
.student-test-inner-table td {
  padding: 12px 14px;
}

.student-test-grade-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.student-test-grade-editor .student-profile-exam-grade-input {
  width: 66px;
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.student-test-grade-editor .text-button {
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.student-test-grade-static {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.student-grade-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 92px;
  padding: 3px 7px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-test-grade-static .text-button.muted {
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #52637e;
  font-size: 10px;
  font-weight: 700;
}

.student-test-inner-table .action-button.muted {
  border-color: #d8e4f5;
  background: #f8fafc;
  color: #52637e;
}

.student-test-certificate-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.certificate-code-pill,
.student-test-certificate-note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #d8e4f5;
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.certificate-code-pill,
.student-test-certificate-note.is-ready {
  border-color: #b8ead2;
  background: #ecfdf5;
  color: #087f5b;
}

.student-test-certificate-note.is-missing {
  border-color: #f3d39b;
  background: #fff8eb;
  color: #a15c07;
}

.student-profile-certificate-codes {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.student-profile-certificate-codes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 900;
}

.student-profile-certificate-codes small {
  color: #047857;
  font-size: 9px;
  font-weight: 800;
}

.student-profile-certificate-note {
  color: #52637e;
  font-size: 11px;
  font-weight: 800;
}

.student-profile-grade-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.student-profile-exam-grade-input {
  width: 74px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.student-profile-grade-editor .text-button {
  padding-inline: 6px;
}

.student-profile-exam-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.student-note-history-heading {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.student-note-history-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.student-note-history-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 11px;
  background: #fbfcff;
}

.student-note-history-meta,
.student-note-file,
.student-note-file > div {
  display: flex;
  align-items: center;
}

.student-note-history-meta,
.student-note-file {
  justify-content: space-between;
  gap: 12px;
}

.student-note-history-meta strong,
.student-note-history-meta span,
.student-note-file strong,
.student-note-file small {
  display: block;
}

.student-note-history-meta strong {
  color: var(--navy);
  font-size: 11px;
}

.student-note-history-meta span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.student-note-history-item > p {
  margin: 14px 0 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.65;
}

.student-note-file {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 9px;
  background: #eef3fa;
}

.student-note-file > div {
  gap: 6px;
}

.student-note-file > div:first-child {
  display: block;
  min-width: 0;
}

.student-note-file strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-note-file small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.student-note-history-empty {
  margin-top: 8px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: #fbfcff;
  text-align: center;
  font-size: 11px;
}

.student-documents-heading {
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.student-documents-heading .detail-section-title {
  margin: 0;
}

.student-documents-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.document-completion {
  min-width: 96px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--green);
  background: var(--green-light);
  text-align: center;
}

.document-completion span,
.document-completion strong {
  display: block;
}

.document-completion span {
  font-size: 9px;
}

.document-completion strong {
  margin-top: 3px;
  font-size: 17px;
}

.document-completion small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.document-completion.missing-documents-summary {
  color: var(--danger);
  background: var(--danger-light);
}

.student-document-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.student-document-row {
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}

.required-staff-document-list {
  margin-bottom: 14px;
}

.missing-required-document {
  border-color: rgba(224, 64, 89, 0.35);
  background: #fff6f7;
}

.missing-required-document .student-document-icon,
.document-approval-badge.missing {
  color: var(--danger);
  background: var(--danger-light);
}

.student-document-info {
  min-width: 0;
  gap: 12px;
}

.student-document-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: var(--blue-light);
  font-size: 11px;
  font-weight: 850;
}

.student-document-info strong,
.student-document-info small {
  display: block;
}

.student-document-info strong {
  color: var(--navy);
  font-size: 12px;
}

.student-document-info small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.student-document-programs {
  margin-top: 6px;
}

.student-document-programs span {
  display: inline-block;
  margin: 0 4px 3px 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: #49617f;
  background: #eef3fa;
  font-size: 8px;
  font-weight: 750;
}

.student-document-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.student-documents-empty {
  margin-top: 8px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.student-file-viewer-body {
  display: grid;
  height: calc(100vh - 157px);
  padding: 8px;
  overflow: auto;
  place-items: center;
  background: #e8edf5;
}

.compact-file-viewer-modal .student-file-viewer-body {
  height: auto;
  min-height: 230px;
  padding: 18px;
  overflow: auto;
  background: #eef4fb;
}

.student-file-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: white;
}

.student-file-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(16, 35, 63, 0.16);
}

.compact-file-viewer-modal .pdf-viewer-fallback {
  position: static;
  inset: auto;
  width: 100%;
  max-height: calc(100vh - 210px);
  padding: 24px;
  border: 1px solid #d8e3f3;
  box-shadow: 0 12px 28px rgba(16, 35, 63, 0.08);
}

.office-file-fallback {
  align-content: start;
  justify-items: center;
  gap: 10px;
}

.institution-file-preview-badge {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #185abd;
  font-size: 20px;
  font-weight: 900;
}

.institution-file-preview-badge.excel-preview-badge {
  background: #107c41;
}

.institution-file-preview-badge.generic-preview-badge {
  background: #475467;
}

.institution-file-preview-name {
  max-width: 100%;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.institution-file-text-preview {
  width: 100%;
  max-height: min(360px, calc(100vh - 330px));
  margin-top: 6px;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid #d9e4f4;
  border-radius: 10px;
  color: #1d2939;
  background: #f8fbff;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
}

.word-ready-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid #b8e4d3;
  border-radius: 12px;
  background: var(--green-light);
}

.word-ready-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 9px;
  color: white;
  background: #185abd;
  font-size: 17px;
  font-weight: 850;
}

.word-ready-card strong,
.word-ready-card span {
  display: block;
}

.word-ready-card strong {
  color: var(--navy);
  font-size: 13px;
}

.word-ready-card span {
  margin-top: 4px;
  color: #386452;
  font-size: 11px;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  max-width: 360px;
  padding: 13px 17px;
  border-radius: 10px;
  color: white;
  background: var(--navy);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.2s, transform 0.2s;
  font-size: 12px;
  font-weight: 650;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: #9f2f41;
}

@media (max-width: 1050px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-insight-grid {
    grid-template-columns: 1fr;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-overview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-actions {
    gap: 6px;
  }

  .sector-switcher {
    min-width: 220px;
  }

  .register-substitution-item,
  .register-substitution-list > article,
  .register-schedule-row,
  .register-schedule-editor {
    grid-template-columns: 1fr 1fr;
  }

  .date-label {
    display: inline-flex;
  }
}

@media (max-width: 780px) {
  .login-view {
    grid-template-columns: 1fr;
    padding: 24px;
    background: linear-gradient(165deg, #101c34 0 28%, #f4f6fa 28% 100%);
  }

  .login-brand {
    margin-bottom: 50px;
  }

  .login-card {
    justify-self: center;
    padding: 28px 22px;
  }

  .app-shell {
    display: block;
  }

  .welcome-banner,
  .dashboard-today-list {
    grid-template-columns: 1fr;
  }

  .welcome-banner {
    display: grid;
  }

  .sidebar {
    position: fixed;
    left: -270px;
    width: 248px;
    transition: left 0.22s;
  }

  .sidebar.open {
    left: 0;
    box-shadow: 15px 0 40px rgba(10, 20, 38, 0.28);
  }

  .menu-button {
    display: block;
  }

  .sector-switcher {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .panel-permissions-grid,
  .register-substitution-item,
  .register-substitution-list > article,
  .register-schedule-row,
  .register-schedule-table > div,
  .register-schedule-editor,
  .daily-plan-template,
  .manager-absence-list article {
    grid-template-columns: 1fr;
  }

  .register-date-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    padding: 12px 18px;
  }

  .topbar-actions {
    max-width: 58%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .sector-switch {
  padding: 0 8px;
}

  .school-level-filter {
    min-width: 142px;
    min-height: 34px;
  }

  .topbar-season-filter {
    width: 100%;
    justify-content: flex-end;
  }

  .topbar-season-filter select {
    min-height: 34px;
  }

  .topbar-actions .primary-button {
    display: none;
  }

  .page {
    padding: 20px 16px 34px;
  }

  .welcome-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding: 28px 24px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .sector-grid {
    grid-template-columns: 1fr;
  }

  .sector-card {
    min-height: 170px;
    grid-template-columns: auto 1fr;
    padding: 20px;
  }

  .sector-card-count {
    position: absolute;
    top: 16px;
    right: 18px;
  }

  .sector-card-content {
    padding-right: 35px;
  }

  .page-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

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

  .finance-tools .filter-group {
    width: 100%;
  }

  .finance-overview-summary {
    grid-template-columns: 1fr;
  }

  .payroll-view-toggle {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .payroll-liquidation-fields {
    grid-template-columns: 1fr;
  }

  .module-two-columns {
    grid-template-columns: 1fr;
  }

  .register-date-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .month-filter {
    justify-content: space-between;
  }

  #financeStartDateFilter,
  #financeEndDateFilter {
    min-width: 0;
  }

  .finance-summary,
  .payment-balance-info {
    grid-template-columns: 1fr;
  }

  .installment-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .installment-section .table-wrap {
    overflow: visible;
  }

  .installment-table,
  .installment-table tbody,
  .installment-table tr,
  .installment-table td {
    display: block;
    width: 100%;
  }

  .installment-table thead {
    display: none;
  }

  .installment-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid #e4e9f1;
  }

  .installment-table tr:last-child {
    border-bottom: 0;
  }

  .installment-table td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border: 0;
  }

  .installment-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .installment-table input {
    width: 100%;
    min-width: 0;
  }

  .two-columns,
  .three-columns,
  .four-columns,
  .course-lesson-preview-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .parent-profile-grid {
    grid-template-columns: 1fr;
  }

  .student-profile-header,
  .student-document-row,
  .student-documents-heading,
  .student-profile-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .student-profile-actions,
  .student-document-actions {
    width: 100%;
  }

  .student-document-actions {
    justify-content: flex-start;
  }

  .student-profile-section-heading > strong {
    align-self: flex-start;
  }

  .student-notes-card .compact-button {
    align-self: flex-start;
  }

  .student-note-history-meta,
  .student-note-file {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-note-file > div:last-child {
    flex-wrap: wrap;
  }

  .span-two,
  .span-three {
    grid-column: span 1;
  }

  .modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .modal-body {
    max-height: calc(100vh - 170px);
    padding: 18px;
  }

  .modal-header,
  .modal-footer {
    padding: 15px 18px;
  }
}

@media print {
  body.printing-contract * {
    visibility: hidden;
  }

  body.printing-contract #contractDetailsModal,
  body.printing-contract #contractDetailsModal * {
    visibility: visible;
  }

  body.printing-contract #contractDetailsModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: none;
    box-shadow: none;
    transform: none;
  }

  body.printing-contract #contractDetailsModal .modal-header,
  body.printing-contract #contractDetailsModal .modal-footer {
    display: none;
  }

  body.printing-contract #contractDetailsModal .modal-body {
    max-height: none;
    overflow: visible;
  }

  body.printing-reports * {
    visibility: visible;
  }

  body.printing-reports #reportsPage,
  body.printing-reports #reportsPage * {
    visibility: visible;
  }

  body.printing-reports > :not(.app-shell) {
    display: none !important;
  }

  body.printing-reports .app-shell {
    display: block !important;
    min-height: 0 !important;
  }

  body.printing-reports .sidebar,
  body.printing-reports .topbar,
  body.printing-reports .page:not(#reportsPage) {
    display: none !important;
  }

  body.printing-reports .main-content {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.printing-reports #reportsPage {
    display: block !important;
    position: static !important;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 0 !important;
    padding: 0;
    background: white;
    overflow: visible !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  body.printing-reports .report-controls {
    display: none !important;
  }

  body.printing-reports .report-builder-panel,
  body.printing-reports .report-summary {
    display: none !important;
  }

  body.printing-reports .report-output {
    margin-top: 0;
    border: 0;
    box-shadow: none;
    page-break-after: avoid;
    break-after: avoid;
  }

  body.printing-reports .report-letterhead {
    margin-bottom: 14px;
    padding: 0 0 10px;
    border: 0;
    border-radius: 0;
    background: white;
  }

  body.printing-reports .report-letterhead img {
    width: 92px;
    height: 92px;
  }

  body.printing-reports .report-letterhead h2 {
    font-size: 20px;
  }

  body.printing-reports .report-letterhead-details {
    font-size: 9px;
  }

  body.printing-reports .report-print-generated-at {
    display: block;
  }

  body.printing-reports .report-output .panel-heading {
    display: none !important;
  }

  body.printing-reports .report-table-filter-row {
    display: none !important;
  }

  body.printing-reports .report-output .table-wrap {
    overflow: visible;
    page-break-after: avoid;
    break-after: avoid;
  }

  body.printing-reports .report-output table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 9px;
    page-break-after: auto;
  }

  body.printing-reports .report-output tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  body.printing-reports .report-output th,
  body.printing-reports .report-output td {
    padding: 7px 5px;
    white-space: normal;
    word-break: break-word;
  }

  body.printing-reports .report-missing-documents-cell {
    max-width: none;
    line-height: 1.2;
  }

  body.printing-activity-list * {
    visibility: hidden;
  }

  body.printing-activity-list #appView,
  body.printing-activity-list .modal {
    display: none !important;
  }

  body.printing-activity-list #activityListPrint,
  body.printing-activity-list #activityListPrint * {
    visibility: visible;
  }

  body.printing-activity-list #activityListPrint {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 12mm;
    color: #061833;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
  }

  body.printing-activity-list .activity-list-letterhead {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #d8e5f6;
    border-radius: 10px;
    background: #ffffff;
  }

  body.printing-activity-list .activity-list-letterhead img {
    width: 70px;
    height: 70px;
  }

  body.printing-activity-list .activity-list-letterhead h2 {
    font-size: 17px;
  }

  body.printing-activity-list .activity-list-letterhead .report-letterhead-details {
    grid-template-columns: 1fr auto;
    gap: 8px;
    font-size: 8.5px;
  }

  body.printing-activity-list .activity-list-print-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid #d8e5f6;
  }

  body.printing-activity-list .activity-list-print-heading h1 {
    margin: 0 0 4px;
    font-size: 20px;
    color: #071936;
  }

  body.printing-activity-list .activity-list-print-heading p {
    margin: 0;
    color: #53647d;
    font-size: 11px;
  }

  body.printing-activity-list .activity-list-print-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  body.printing-activity-list .activity-list-print-meta span {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid #d8e5f6;
    border-radius: 8px;
    font-size: 10px;
  }

  body.printing-activity-list .activity-list-print-meta strong {
    font-size: 12px;
  }

  body.printing-activity-list .activity-list-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
  }

  body.printing-activity-list .activity-list-print-table th,
  body.printing-activity-list .activity-list-print-table td {
    padding: 7px 6px;
    border: 1px solid #d8e5f6;
    text-align: left;
    vertical-align: top;
  }

  body.printing-activity-list .activity-list-print-table th {
    background: #eef5ff;
    color: #263b5f;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.printing-activity-list .activity-list-print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-proforma * {
    visibility: hidden;
  }

  body.printing-proforma #appView,
  body.printing-proforma .modal {
    display: none !important;
  }

  body.printing-proforma #proformaPrintArea,
  body.printing-proforma #proformaPrintArea * {
    visibility: visible;
  }

  body.printing-proforma #proformaPrintArea {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 80mm;
    min-height: auto;
    padding: 0;
    color: #000000;
    background: #ffffff;
    font-family: "Segoe UI", Arial, sans-serif;
  }

  body.printing-proforma .thermal-proforma {
    width: 80mm;
    box-sizing: border-box;
    padding: 3mm 3mm 3.5mm;
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 9px;
    line-height: 1.28;
  }

  body.printing-proforma .thermal-header {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 0 0 6px;
    border-bottom: 1.5px solid #000;
    text-align: center;
  }

  body.printing-proforma .thermal-header img {
    display: none;
  }

  body.printing-proforma .thermal-header strong {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-header span,
  body.printing-proforma .thermal-header small {
    font-size: 8.5px;
    font-weight: 700;
  }

  body.printing-proforma .thermal-title {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin: 6px 0;
    padding: 5px 4px;
    border: 1.5px solid #000;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-section-title {
    margin: 6px 0 3px;
    padding: 2px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-meta {
    display: grid;
    gap: 1.5px;
    padding: 2px 0 4px;
  }

  body.printing-proforma .thermal-meta div {
    display: grid;
    grid-template-columns: 20mm 1fr;
    gap: 3px;
  }

  body.printing-proforma .thermal-meta span {
    font-weight: 700;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-meta strong {
    font-weight: 800;
    text-align: right;
  }

  body.printing-proforma .thermal-contract {
    display: grid;
    gap: 1.5px;
    margin: 3px 0 0;
    padding: 4px;
    border: 1px solid #000;
    font-size: 8px;
  }

  body.printing-proforma .thermal-contract strong,
  body.printing-proforma .thermal-contract span {
    display: block;
    color: #000000;
  }

  body.printing-proforma .thermal-meta span,
  body.printing-proforma .thermal-line span,
  body.printing-proforma .thermal-line small {
    color: #000000;
  }

  body.printing-proforma .thermal-lines {
    display: grid;
    gap: 0;
    padding: 0 0 5px;
    border-bottom: 1.5px solid #000;
  }

  body.printing-proforma .thermal-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
    align-items: start;
    padding: 4px 0;
    border-bottom: 1px dotted #000;
  }

  body.printing-proforma .thermal-line:last-child {
    border-bottom: 0;
  }

  body.printing-proforma .thermal-line-head {
    padding: 2px 0;
    border-bottom: 1px solid #000;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-line strong,
  body.printing-proforma .thermal-line span,
  body.printing-proforma .thermal-line small {
    display: block;
  }

  body.printing-proforma .thermal-line b {
    white-space: nowrap;
    font-size: 9px;
    font-weight: 900;
  }

  body.printing-proforma .thermal-total {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin: 6px 0 4px;
    padding: 6px 4px;
    border: 1.8px solid #000;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-bank,
  body.printing-proforma .thermal-notes {
    display: grid;
    gap: 2px;
    padding: 5px 0 0;
    border-top: 1px solid #000;
    font-size: 8px;
  }

  body.printing-proforma .thermal-bank strong {
    text-transform: uppercase;
  }

  body.printing-proforma .thermal-bank span,
  body.printing-proforma .thermal-notes p {
    margin: 0;
    color: #000000;
  }

  body.printing-proforma .thermal-note {
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    color: #000000;
    text-align: center;
    font-size: 8px;
  }

  body.printing-proforma .thermal-footer {
    padding-top: 5px;
    text-align: center;
    font-weight: 800;
  }

  body.printing-payroll * {
    visibility: hidden;
  }

  body.printing-payroll .sidebar,
  body.printing-payroll .topbar,
  body.printing-payroll .page:not(#payrollPage),
  body.printing-payroll .modal {
    display: none !important;
  }

  body.printing-payroll #payrollPage,
  body.printing-payroll #payrollPage * {
    visibility: visible;
  }

  body.printing-payroll #payrollPage {
    display: block !important;
    position: static;
    width: 100%;
    padding: 0;
    background: white;
  }

  body.printing-payroll .main-content {
    display: block;
    padding: 0;
    width: 100%;
  }

  body.printing-payroll .payroll-toolbar,
  body.printing-payroll .payroll-table th:last-child,
  body.printing-payroll .payroll-table td:last-child {
    display: none !important;
  }

  body.printing-payroll .payroll-summary {
    grid-template-columns: repeat(4, 1fr);
  }

  body.printing-payroll .payroll-panel {
    border: 0;
    box-shadow: none;
  }

  body.printing-payroll .payroll-panel .table-wrap {
    overflow: visible;
  }

  body.printing-payroll .payroll-table {
    min-width: 0;
  }

  body.printing-payroll .payroll-table th,
  body.printing-payroll .payroll-table td {
    padding: 7px 5px;
    font-size: 8px;
  }

  body.printing-individual-payroll * {
    visibility: hidden;
  }

  body.printing-individual-payroll #appView,
  body.printing-individual-payroll .modal {
    display: none !important;
  }

  body.printing-individual-payroll #individualPayrollPrint,
  body.printing-individual-payroll #individualPayrollPrint * {
    visibility: visible;
  }

  body.printing-individual-payroll #individualPayrollPrint {
    display: block;
    position: static;
    width: 100%;
    background: white;
  }

  body.printing-individual-payroll .individual-payroll-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  body.printing-staff-profile * {
    visibility: hidden;
  }

  body.printing-staff-profile #appView,
  body.printing-staff-profile .modal {
    display: none !important;
  }

  body.printing-staff-profile #staffProfilePrint,
  body.printing-staff-profile #staffProfilePrint * {
    visibility: visible;
  }

  body.printing-staff-profile #staffProfilePrint {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    background: white;
  }

  body.printing-staff-profile .staff-card-sheet {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  body.printing-staff-profile .staff-card-section,
  body.printing-staff-profile .staff-card-identity {
    break-inside: avoid;
  }

  body.printing-staff-profile .staff-card-report-letterhead {
    margin-bottom: 6px;
    padding-bottom: 7px;
  }

  body.printing-staff-profile .staff-card-report-letterhead img {
    width: 72px;
    height: 72px;
  }

  body.printing-staff-profile .staff-card-report-letterhead h2 {
    font-size: 17px;
  }

  body.printing-staff-profile .staff-card-document-title {
    margin-bottom: 6px;
  }

  body.printing-staff-profile .staff-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.printing-staff-profile .staff-card-field {
    min-height: 30px;
    padding: 5px 7px;
  }

  body.printing-staff-profile .staff-card-field span {
    font-size: 8.5px;
  }

  body.printing-staff-profile .staff-card-field strong {
    margin-top: 2px;
    font-size: 10.5px;
  }

  body.printing-staff-profile .staff-card-documents {
    font-size: 9.5px;
  }

  body.printing-staff-profile .staff-card-documents th,
  body.printing-staff-profile .staff-card-documents td {
    padding: 3px 5px;
  }

  body.printing-student-profile * {
    visibility: hidden;
  }

  body.printing-student-profile #appView,
  body.printing-student-profile .modal {
    display: none !important;
  }

  body.printing-student-profile #studentProfilePrint,
  body.printing-student-profile #studentProfilePrint * {
    visibility: visible;
  }

  body.printing-student-profile #studentProfilePrint {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    background: white;
  }

  body.printing-student-profile .staff-card-sheet {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  body.printing-student-profile .staff-card-section,
  body.printing-student-profile .staff-card-identity {
    break-inside: avoid;
  }

  body.printing-student-profile .staff-card-report-letterhead {
    margin-bottom: 6px;
    padding-bottom: 7px;
  }

  body.printing-student-profile .staff-card-report-letterhead img {
    width: 72px;
    height: 72px;
  }

  body.printing-student-profile .staff-card-report-letterhead h2 {
    font-size: 17px;
  }

  body.printing-student-profile .staff-card-document-title {
    margin-bottom: 6px;
  }

  body.printing-student-profile .staff-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.printing-student-profile .staff-card-field {
    min-height: 30px;
    padding: 5px 7px;
  }

  body.printing-student-profile .staff-card-field span {
    font-size: 8.5px;
  }

  body.printing-student-profile .staff-card-field strong {
    margin-top: 2px;
    font-size: 10.5px;
  }

  body.printing-student-profile .staff-card-documents {
    font-size: 9.5px;
  }

  body.printing-student-profile .staff-card-documents th,
  body.printing-student-profile .staff-card-documents td {
    padding: 3px 5px;
  }

  body.printing-course-registration * {
    visibility: hidden;
  }

  body.printing-course-registration #appView,
  body.printing-course-registration .modal {
    display: none !important;
  }

  body.printing-course-registration #courseRegistrationPrint,
  body.printing-course-registration #courseRegistrationPrint * {
    visibility: visible;
  }

  body.printing-course-registration #courseRegistrationPrint {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    background: white;
  }

  body.printing-course-registration .course-registration-sheet {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  body.printing-course-registration .staff-card-section,
  body.printing-course-registration .course-registration-identity {
    break-inside: avoid;
  }

  body.printing-course-registration .staff-card-report-letterhead {
    margin-bottom: 6px;
    padding-bottom: 7px;
  }

  body.printing-course-registration .staff-card-report-letterhead img {
    width: 72px;
    height: 72px;
  }

  body.printing-course-registration .staff-card-report-letterhead h2 {
    font-size: 17px;
  }

  body.printing-course-registration .staff-card-document-title {
    margin-bottom: 6px;
  }

  body.printing-course-registration .course-registration-identity {
    margin: 5px 0;
    padding: 7px 9px;
    gap: 8px;
    align-items: center;
  }

  body.printing-course-registration .course-registration-title-block {
    gap: 7px;
    align-items: baseline;
    flex-wrap: nowrap;
  }

  body.printing-course-registration .course-registration-title-block .staff-card-eyebrow {
    font-size: 9.6px;
    letter-spacing: .08em;
  }

  body.printing-course-registration .course-registration-identity h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1;
  }

  body.printing-course-registration .course-registration-identity p {
    font-size: 9.5px;
    white-space: nowrap;
  }

  body.printing-course-registration .course-registration-meta-block span {
    font-size: 8.8px;
  }

  body.printing-course-registration .staff-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  body.printing-course-registration .course-registration-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  body.printing-course-registration .staff-card-field {
    min-height: 27px;
    padding: 4px 6px;
  }

  body.printing-course-registration .staff-card-field span {
    font-size: 8.5px;
  }

  body.printing-course-registration .staff-card-field strong {
    margin-top: 2px;
    font-size: 10.5px;
  }

  body.printing-course-registration .staff-card-documents {
    font-size: 7.7px;
  }

  body.printing-course-registration .staff-card-documents th,
  body.printing-course-registration .staff-card-documents td {
    padding: 2.3px 3px;
  }

  body.printing-course-registration .course-registration-date-lines,
  body.printing-course-registration .course-registration-payment-lines {
    line-height: 1.08;
  }

  body.printing-course-registration .course-registration-date-lines span {
    white-space: nowrap;
  }
  body.printing-daily-plan * {
    visibility: hidden;
  }

  body.printing-daily-plan #dailyPlanPrint,
  body.printing-daily-plan #dailyPlanPrint * {
    visibility: visible;
  }

  body.printing-daily-plan #dailyPlanPrint {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    background: white;
  }

  body.printing-daily-plan .daily-plan-print-page {
    width: auto;
    min-height: auto;
    padding: 0;
    box-shadow: none;
  }

  body.printing-test * {
    visibility: hidden;
  }

  body.printing-test #appView,
  body.printing-test .modal {
    display: none !important;
  }

  body.printing-test #testPrintArea,
  body.printing-test #testPrintArea * {
    visibility: visible;
  }

  body.printing-test #testPrintArea {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    background: white;
  }

  body.printing-test #testPrintArea .student-test-question {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 7px;
    box-shadow: none;
    padding: 9px 10px;
    gap: 6px;
    border-radius: 8px;
  }

  body.printing-test #testPrintArea .test-print-letterhead {
    display: flex !important;
    margin-bottom: 8px;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: white;
  }

  body.printing-test #testPrintArea .test-print-letterhead img {
    width: 64px;
    height: 64px;
  }

  body.printing-test #testPrintArea .test-print-letterhead h2 {
    font-size: 15px;
  }

  body.printing-test #testPrintArea .test-print-letterhead .report-letterhead-details {
    font-size: 7.5px;
  }

  body.printing-test #testPrintArea .test-print-info-card {
    margin-bottom: 7px;
    gap: 6px;
  }

  body.printing-test #testPrintArea .student-test-question .test-question-title {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    margin-bottom: 4px;
  }

  body.printing-test #testPrintArea .test-question-number {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
  }

  body.printing-test #testPrintArea .test-question-prompt {
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
  }

  body.printing-test #testPrintArea .test-question-points-pill {
    padding: 2px 6px;
    font-size: 9px;
  }

  body.printing-test #testPrintArea .student-test-options {
    gap: 3px;
    margin-top: 2px;
  }

  body.printing-test #testPrintArea .student-test-options label {
    gap: 5px;
    padding: 4px 6px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.2;
  }

  body.printing-test #testPrintArea .student-test-options input[type="radio"] {
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
    margin-top: 2px;
    border-width: 1px;
  }

  body.printing-test #testPrintArea .test-passage-text {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.3;
  }

  body.printing-test #testPrintArea .test-passage-text p {
    margin-bottom: 5px;
  }

  body.printing-test #testPrintArea textarea {
    min-height: 54px;
  }
}

.course-registration-mode .contract-pdf-column {
  display: none;
}

.student-test-login {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #d9e2ef);
}

.test-summary {
  margin-bottom: 18px;
}

.tests-subtabs {
  margin: 0 0 14px;
}

.test-tab-panel {
  margin-top: 0;
}

.template-tables-stack {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.template-table-section {
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #fff;
}

.template-table-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e7edf7;
  background: #f8fbff;
}

.template-table-section-heading h4 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}

.template-table-section-heading span {
  color: #697386;
  font-size: 11px;
  font-weight: 650;
}

.general-template-table-wrap table {
  table-layout: fixed;
}

.general-template-table-wrap th,
.general-template-table-wrap td {
  padding: 12px 16px;
  vertical-align: middle;
}

.general-template-table-wrap th:nth-child(1),
.general-template-table-wrap td:nth-child(1) {
  width: 24%;
}

.general-template-table-wrap th:nth-child(2),
.general-template-table-wrap td:nth-child(2) {
  width: 13%;
}

.general-template-table-wrap th:nth-child(3),
.general-template-table-wrap td:nth-child(3) {
  width: 30%;
}

.general-template-table-wrap th:nth-child(4),
.general-template-table-wrap td:nth-child(4) {
  width: 11%;
}

.general-template-table-wrap th:nth-child(5),
.general-template-table-wrap td:nth-child(5) {
  width: 22%;
  min-width: 250px;
  text-align: right;
}

.general-template-table-wrap .table-secondary {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-template-table-wrap .table-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.general-template-table-wrap .template-row-actions {
  margin-left: auto;
}

.general-template-table-wrap .action-button {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}

.general-template-table-wrap .action-button + .action-button {
  margin-left: 0;
}

.general-template-table-wrap .template-download-button {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.general-template-table-wrap .template-download-button:hover,
.general-template-table-wrap .template-download-button:focus-visible {
  border-color: #86efac;
  color: #065f46;
  background: #dcfce7;
}

.general-template-table-wrap .template-change-button,
.general-template-table-wrap .template-create-button {
  border-color: #c7d2fe;
  color: #3754c8;
  background: #eef2ff;
}

.general-template-table-wrap .template-change-button:hover,
.general-template-table-wrap .template-change-button:focus-visible,
.general-template-table-wrap .template-create-button:hover,
.general-template-table-wrap .template-create-button:focus-visible {
  border-color: #a5b4fc;
  color: #243aa8;
  background: #e0e7ff;
}

.general-template-table-wrap .template-delete-button {
  border-color: #fecaca;
  color: #b42318;
  background: #fff5f5;
}

.general-template-table-wrap .template-delete-button:hover,
.general-template-table-wrap .template-delete-button:focus-visible {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fee2e2;
}

.test-student-filter-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
  align-items: center;
  margin: 0 18px 16px;
  padding: 12px;
  border: 1px solid #e3eaf6;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff, #f3f7ff);
}

.test-student-filter-row input,
.test-student-filter-row select {
  min-height: 38px;
  border-color: #cfdaeb;
  border-radius: 10px;
  background-color: #fff;
  color: #17233d;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.test-student-filter-row input:focus,
.test-student-filter-row select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 103, 246, 0.12);
}

.test-student-filter-row input::placeholder {
  color: #7a879b;
  font-weight: 600;
}

.test-student-filter-row input[type="search"] {
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 15px 15px;
}

@media (max-width: 900px) {
  .test-student-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .test-student-filter-row {
    grid-template-columns: 1fr;
    margin-inline: 12px;
  }
}

.test-question-editor,
.test-review-body,
.student-test-body {
  display: grid;
  gap: 14px;
}

.student-test-body {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.student-test-body > *,
.student-test-body .span-three {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

.test-print-letterhead {
  display: none;
}

.student-test-sticky-header {
  position: sticky;
  top: -24px;
  z-index: 8;
  display: grid;
  gap: 12px;
  margin: -24px -24px 4px;
  padding: 14px 24px 16px;
  border-bottom: 1px solid #dbe6f5;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 24px rgba(20, 38, 70, 0.08);
  backdrop-filter: blur(8px);
}

.student-test-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-test-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: #eef5ff;
}

.student-test-brand strong {
  display: block;
  margin-top: 2px;
  color: #10244d;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.student-test-brand small {
  display: block;
  margin-top: 2px;
  color: #60708a;
  font-size: 12px;
  font-weight: 650;
}

.student-test-info-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #cfdcf2;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.student-test-info-card div {
  display: grid;
  gap: 4px;
}

.student-test-info-card span {
  color: #60708a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.student-test-info-card strong {
  color: #10244d;
  font-size: 14px;
  font-weight: 750;
}

@media (max-width: 720px) {
  .student-test-info-card {
    grid-template-columns: 1fr;
  }

  .student-test-brand img {
    width: 44px;
    height: 44px;
  }
}

.test-question-editor-card,
.test-question-editor-row,
.student-test-question,
.test-review-submission,
.test-session-card {
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 18px;
  background: #fff;
}

.test-question-editor-card {
  padding: 0;
}

.test-question-editor-row,
.student-test-question,
.test-review-submission {
  padding: 16px;
}

.student-test-question {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(25, 45, 78, 0.05);
}

.test-question-editor-header,
.test-question-title,
.test-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.test-question-editor-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.test-question-editor-title small {
  color: #60708a;
  font-size: 12px;
  font-weight: 700;
  max-width: 760px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-question-editor-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.test-question-editor-row.is-collapsed {
  background: #f8fbff;
}

.test-question-editor-row.is-collapsed .test-question-editor-body {
  display: none;
}

.test-question-draft-row.is-collapsed .test-question-editor-body {
  display: grid;
}

.test-session-card {
  padding: 14px 16px;
}

.test-session-card strong,
.test-session-card small {
  display: block;
}

.test-question-points-pill,
.test-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef4ff;
  color: #2452d6;
  padding: 5px 10px;
  font-weight: 700;
  white-space: nowrap;
  font-size: 12px;
}

.student-test-question .test-question-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}

.test-supplement-title {
  grid-template-columns: 1fr;
}

.test-question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #f0f5ff;
  color: #2452d6;
  font-weight: 700;
}

.test-question-prompt {
  color: #1f2d45;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-line;
}

.test-question-prompt span {
  display: inline;
}

.test-question-kind {
  display: inline-flex;
  width: fit-content;
  border-left: 3px solid #9eb7f4;
  color: #20304a;
  padding: 2px 0 2px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.test-text-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.test-question-text-label {
  color: #17233b;
  font-size: 12px;
  font-weight: 800;
}

.test-format-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9e2ef;
  border-radius: 999px;
  background: #f8fbff;
  padding: 4px 6px;
}

.test-format-button {
  min-width: 30px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9e2ef;
  border-radius: 999px;
  background: #fff;
  color: #17233b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.test-format-button:hover {
  border-color: #2f63f6;
  color: #2452d6;
}

.test-format-color-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #60708a;
  font-size: 11px;
  font-weight: 800;
}

.test-format-color-label input[type="color"] {
  width: 28px;
  height: 24px;
  min-height: 24px;
  padding: 2px;
  border-radius: 999px;
}

.test-question-text-field small {
  display: block;
  color: #60708a;
  font-size: 11px;
  margin-top: 6px;
}

.test-reading-passage {
  background: #f8fbff;
  border-color: #bcd0f6;
}

.test-media-block {
  background: #fbfdff;
  border-color: #c7d8f4;
}

.test-builder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.test-question-draft-editor {
  margin: 14px 0;
}

.test-question-draft-row {
  border-color: #2f63f6;
  box-shadow: 0 16px 36px rgba(47, 99, 246, 0.12);
}

.test-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}

.test-passage-text {
  margin-top: 8px;
  color: #17233b;
  line-height: 1.65;
  font-size: 15px;
}

.test-passage-text p {
  margin: 0 0 12px;
}

.test-passage-text p:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  color: #17233b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.test-question-options-field small {
  display: block;
  color: #60708a;
  margin-bottom: 10px;
}

.test-question-options-list {
  display: grid;
  gap: 6px;
}

.test-question-option-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) auto 26px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 14px;
  background: #f8fbff;
  padding: 8px;
}

.test-question-option-letter {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #eaf1ff;
  color: #2452d6;
  font-weight: 900;
}

.test-option-remove-button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ffd0d0;
  border-radius: 999px;
  background: #fff5f5;
  color: #c53030;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.test-option-remove-button:hover {
  background: #ffe8e8;
  border-color: #ffb5b5;
}

.test-question-option-correct-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #17233b;
  white-space: nowrap;
}

.test-add-option-button {
  margin-top: 7px;
}

.test-question-file-field input[type="file"] {
  border: 1px dashed #9db2d3;
  background: #f8fbff;
  cursor: pointer;
}

.test-question-media-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #60708a;
  font-size: 12px;
}

.student-test-options {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.student-test-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fbfdff;
  color: #26364f;
  cursor: pointer;
  line-height: 1.45;
  font-size: 14px;
  font-weight: 450;
}

.student-test-options label span {
  display: inline;
}

.student-test-options label strong {
  color: #20304a;
  font-weight: 650;
}

.student-test-options input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  margin: 4px 0 0;
  padding: 0;
  border: 2px solid #a9bad8;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.student-test-options input[type="radio"]:checked {
  border-color: #2452d6;
  background: radial-gradient(circle, #2452d6 0 38%, transparent 42%);
}

.student-test-options label:hover {
  border-color: #c3d0e8;
  background: #f7faff;
}

.empty-student-test {
  min-height: 240px;
  justify-content: center;
  color: #60708a;
  background: #f8fbff;
}

.empty-student-test strong {
  color: #17233b;
  margin-bottom: 6px;
}

.test-question-media {
  display: block;
  width: min(100%, 880px);
  max-width: 100%;
  max-height: 320px;
  margin: 4px auto 0;
  border-radius: 14px;
  border: 1px solid var(--border-color, #d9e2ef);
  object-fit: contain;
  background: #fff;
}

.test-question-document {
  width: 100%;
  height: 360px;
  max-height: none;
  background: #fff;
}

.test-review-answer {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  background: #f8fbff;
}

.test-final-grade-row {
  margin-top: 14px;
}

.test-score-summary-row {
  padding: 10px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #f8fbff;
}

.test-score-summary-row input[readonly] {
  font-weight: 800;
  color: #0f2f6c;
  background: #eef5ff;
}

.empty-review {
  color: #60708a;
  background: #f8fbff;
}

.webmail-panel-card {
  min-height: 360px;
}

.webmail-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #f8fbff;
  color: #30415f;
}

.webmail-notice strong {
  color: #10244d;
  font-size: 13px;
}

.webmail-notice span {
  color: #60708a;
  font-size: 13px;
  line-height: 1.45;
}

.webmail-frame-wrap {
  height: calc(100vh - 360px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #d7e2f5;
  border-radius: 18px;
  background: #f8fbff;
}

.webmail-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.webmail-launch-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 260px;
  margin-top: 16px;
  padding: 28px;
  border: 1px solid #d7e2f5;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #eef5ff 100%);
}

.webmail-launch-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(135deg, #2452d6, #4b7cff);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 28px rgba(36, 82, 214, 0.22);
}

.webmail-launch-card h3 {
  margin: 4px 0 8px;
  color: #17233b;
  font-size: 24px;
}

.webmail-launch-card p {
  max-width: 720px;
  margin: 0 0 16px;
  color: #60708a;
  line-height: 1.55;
}

.webmail-link-row {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #fff;
  color: #60708a;
  font-size: 13px;
}

.webmail-link-row strong {
  color: #10244d;
}

.email-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 10px 0;
}

.email-status-card {
  padding: 16px;
  border: 1px solid #d7e2f5;
  border-radius: 18px;
  background: #f8fbff;
}

.email-status-card strong {
  display: block;
  margin-top: 6px;
  color: #10244d;
  font-size: 18px;
}

.email-status-card span {
  color: #60708a;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.email-workspace-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  align-items: start;
}

.email-card {
  padding: 18px;
  border: 1px solid #d7e2f5;
  border-radius: 20px;
  background: #fff;
}

.email-inbox-card {
  margin-top: 16px;
}

.email-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 4px;
  padding: 8px;
  border: 1px solid #d7e2f5;
  border-radius: 18px;
  background: #f8fbff;
}

.email-tab-bar button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 13px;
  color: #31415f;
  background: transparent;
  font-weight: 800;
}

.email-tab-bar button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(47, 103, 246, 0.22);
}

.compact-heading {
  margin-bottom: 12px;
}

.compact-heading h3 {
  margin-bottom: 4px;
}

.compact-table-wrap {
  max-height: 280px;
  overflow: auto;
}

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

.email-message-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #f8fbff;
}

.email-message-row.unread {
  background: #eef5ff;
  border-color: #abc8f8;
}

.email-message-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  flex: 1;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.email-message-row strong {
  color: #10244d;
}

.email-message-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.email-message-summary strong,
.email-message-summary span,
.email-message-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-row span,
.email-message-row small {
  color: #60708a;
}

.email-message-modal {
  width: min(920px, calc(100vw - 32px));
}

.email-folder-actions {
  align-items: center;
}

.email-message-search {
  min-width: 220px;
}

.secondary-button.danger,
.compact-button.danger {
  border-color: #fecdd3;
  color: #be123c;
  background: #fff1f2;
}

.secondary-button.danger:hover,
.secondary-button.danger:focus-visible,
.compact-button.danger:hover,
.compact-button.danger:focus-visible {
  border-color: #fb7185;
  background: #ffe4e6;
}

.email-message-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px;
  gap: 12px;
  max-height: calc(100vh - 165px);
  padding: 22px 24px;
  overflow-y: auto;
}

.email-message-viewer .detail-card {
  min-width: 0;
  padding: 12px 14px;
}

.email-message-body {
  grid-column: 1 / -1;
  max-height: 56vh;
  overflow: auto;
  margin: 0;
  padding: 18px;
  border: 1px solid #d7e2f5;
  border-radius: 18px;
  color: #10244d;
  background: #f8fbff;
  white-space: pre-wrap;
  word-break: break-word;
  font: 15px/1.65 "Inter", "Segoe UI", Arial, sans-serif;
}

.email-message-body.rich-email-body {
  white-space: normal;
}

.email-attachment-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #ffffff;
}

.email-attachment-list > span {
  color: #60708a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #edf2fb;
  border-radius: 10px;
  background: #f8fbff;
}

.email-attachment-row strong,
.email-attachment-row small {
  display: block;
}

.email-attachment-row strong {
  color: #10244d;
  font-size: 12px;
  line-height: 1.25;
}

.email-attachment-row small {
  margin-top: 3px;
  color: #60708a;
  font-size: 11px;
}

.email-attachment-row .row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.email-attachment-row .row-actions .action-button,
.email-attachment-row .row-actions .primary-button {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  box-shadow: none;
}

.email-compose-modal {
  display: flex;
  flex-direction: column;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 34px);
}

#emailComposeForm {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.email-compose-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  gap: 14px;
  padding-bottom: 18px;
}

.email-compose-modal textarea {
  min-height: 180px;
}

.email-compose-recipient-field {
  position: relative;
}

.email-recipient-input-wrap {
  position: relative;
}

.email-recipient-input-wrap input {
  width: 100%;
  min-width: 0;
  padding-right: 48px;
}

.email-recipient-dropdown-button {
  display: grid;
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  width: 34px;
  min-height: 0;
  place-items: center;
  border: 0;
  border-left: 1px solid #dbe5f6;
  border-radius: 8px;
  color: #2452d6;
  background: #f6f9ff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.email-recipient-dropdown-button:hover,
.email-recipient-dropdown-button:focus-visible {
  color: #153fb2;
  background: #eef5ff;
}

.email-compose-attachment-field {
  display: grid;
  gap: 8px;
}

.email-compose-attachment-field > span {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.email-attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px dashed #9bb8ee;
  border-radius: 10px;
  color: #2452d6;
  background: #f5f8ff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(36, 82, 214, 0.08);
}

.email-attach-button:hover,
.email-attach-button:focus-visible {
  border-color: #2452d6;
  background: #eef5ff;
}

.email-attach-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #2452d6;
  font-size: 14px;
  line-height: 1;
}

.email-upload-progress {
  display: grid;
  gap: 6px;
  max-width: 360px;
}

.email-upload-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef8;
  border: 1px solid #d6e2f4;
}

.email-upload-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2452d6, #16a7a1);
  transition: width 0.18s ease;
}

.email-upload-progress small {
  color: #5f6f89;
  font-size: 12px;
  font-weight: 700;
}

.email-compose-attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px;
  width: 100%;
  max-width: none;
}

.email-compose-modal .modal-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.email-compose-attachment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #dbe5f5;
  border-radius: 9px;
  background: #f8fbff;
}

.email-compose-attachment-item strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-compose-attachment-item small {
  color: #6b7890;
  font-size: 10.5px;
  font-weight: 700;
}

.email-compose-attachment-item .action-button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
}

.email-signature-preview {
  padding: 12px 14px;
  border: 1px dashed #b8c8e4;
  border-radius: 14px;
  background: #fbfdff;
}

.email-signature-preview > span {
  display: block;
  margin-bottom: 8px;
  color: #60708a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-auto-signature-editor {
  min-height: 170px;
  cursor: default;
}

.email-auto-signature-editor:focus {
  border-color: #cfdaf0;
  box-shadow: none;
}

.timecenter-signature-badge {
  max-width: 620px;
}

.timecenter-signature-badge img {
  display: block;
  object-fit: contain !important;
}

.email-recipient-suggestions {
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: 240px;
  overflow: auto;
  margin-top: 8px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(16, 35, 63, 0.12);
  z-index: 10;
}

.email-recipient-suggestions button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf2fb;
  color: #10244d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.email-recipient-suggestions button:last-child {
  border-bottom: 0;
}

.email-recipient-suggestions button:hover,
.email-recipient-suggestions button:focus-visible {
  background: #f1f6ff;
}

.email-recipient-suggestions strong,
.email-recipient-suggestions span,
.email-recipient-suggestions small {
  display: block;
}

.email-recipient-suggestions span,
.email-recipient-suggestions small {
  color: #60708a;
  font-size: 12px;
}

.email-signature-preview img,
.rich-editor img {
  max-width: 180px;
  height: auto;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.rich-toolbar button,
.color-tool {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #cfdaf0;
  border-radius: 10px;
  color: #10244d;
  background: #f8fbff;
  font-size: 12px;
  font-weight: 800;
}

.color-tool input {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.rich-editor {
  min-height: 130px;
  padding: 10px;
  border: 1px solid #cfdaf0;
  border-radius: 14px;
  color: #10244d;
  background: #fff;
  outline: none;
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #8a97ad;
}

.email-compose-card,
.email-contacts-card,
.email-settings-card {
  margin-top: 16px;
}

.email-contact-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.email-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d7e2f5;
  border-radius: 14px;
  background: #f8fbff;
}

.email-contact-row.auto-contact {
  background: #fff;
}

.email-contact-profile,
.email-message-party,
.email-recipient-option,
.email-participant-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.email-contact-meta,
.email-recipient-option-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-contact-avatar {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7e2f5;
  border-radius: 50%;
  color: #2452d6;
  background: #eef5ff;
  font-size: 13px;
  font-weight: 900;
}

img.email-contact-avatar {
  object-fit: cover;
  background: #fff;
}

.email-message-avatar {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
}

.email-recipient-avatar {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.email-participant-avatar {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  font-size: 12px;
}

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

.email-message-viewer .email-participant-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  padding: 6px 10px 6px 6px;
  border: 1px solid #d7e2f5;
  border-radius: 18px;
  background: #f8fbff;
  color: #10244d;
}

.email-message-viewer .email-participant-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-message-viewer .email-participant-name {
  overflow: hidden;
  color: #10244d;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-viewer .email-participant-role {
  overflow: hidden;
  color: #60708a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-contact-row strong,
.email-contact-row span,
.email-contact-row small {
  display: block;
}

.email-contact-row strong {
  color: #10244d;
}

.email-contact-row span,
.email-contact-row small {
  color: #60708a;
}

@media (max-width: 980px) {
  .email-workspace-grid {
    grid-template-columns: 1fr;
  }

  .email-message-viewer {
    grid-template-columns: 1fr;
  }

  .email-contact-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-attachment-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-folder-actions {
    width: 100%;
  }

  .email-message-search {
    width: 100%;
    min-width: 0;
  }
}

@media print {
  body.printing-price-list * {
    visibility: hidden;
  }

  body.printing-price-list .sidebar,
  body.printing-price-list .topbar,
  body.printing-price-list .page:not(#priceListPage),
  body.printing-price-list .modal,
  body.printing-price-list .price-list-toolbar,
  body.printing-price-list #priceListPage .price-list-panel[hidden],
  body.printing-price-list #priceListPage .price-list-panel.hidden,
  body.printing-price-list #priceListPage .price-list-program-row.is-collapsed,
  body.printing-price-list #priceListPage .price-list-row-hidden {
    display: none !important;
  }

  body.printing-price-list #priceListPage,
  body.printing-price-list #priceListPage * {
    visibility: visible;
  }

  body.printing-price-list .app-shell,
  body.printing-price-list .main-content,
  body.printing-price-list #priceListPage {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.printing-price-list #priceListPage {
    position: static;
  }

  body.printing-price-list .price-list-print-letterhead {
    display: flex !important;
    margin-bottom: 14px;
    padding: 0 0 10px;
    border: 0;
    border-radius: 0;
    background: white;
    page-break-after: avoid;
    break-after: avoid;
  }

  body.printing-price-list .price-list-print-letterhead img {
    width: 92px;
    height: 92px;
  }

  body.printing-price-list .price-list-print-letterhead h2 {
    font-size: 20px;
  }

  body.printing-price-list .price-list-print-letterhead .report-letterhead-details {
    font-size: 9px;
  }

  body.printing-price-list .price-list-print-generated-at {
    display: block !important;
  }

  body.printing-price-list .price-list-panel {
    display: block !important;
    overflow: visible !important;
    border: 0;
    box-shadow: none;
  }

  body.printing-price-list .price-list-panel .panel-heading {
    padding: 0 0 8px;
    border-bottom: 2px solid #111827;
  }

  body.printing-price-list .price-list-table-wrap {
    overflow: visible !important;
    max-height: none !important;
  }

  body.printing-price-list .price-list-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse;
    font-size: 9px;
    page-break-after: auto;
  }

  body.printing-price-list .price-list-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  body.printing-price-list .price-list-table tbody .price-list-program-row:not(:first-child) {
    page-break-before: always;
    break-before: page;
  }

  body.printing-price-list .price-list-table tbody .price-list-program-row {
    page-break-after: avoid;
    break-after: avoid;
  }

  body.printing-price-list .price-list-table th,
  body.printing-price-list .price-list-table td,
  body.printing-price-list .price-list-table.admin-config-table th:last-child,
  body.printing-price-list .price-list-table.admin-config-table td:last-child {
    position: static !important;
    padding: 6px 5px;
    border: 1px solid #111827;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: none;
  }

  body.printing-price-list .price-list-table th,
  body.printing-price-list .price-list-table.admin-config-table th:last-child {
    background: #08aeea !important;
    color: #08111f !important;
  }

  body.printing-price-list .price-list-table tbody .price-list-program-row td,
  body.printing-price-list .price-list-table.admin-config-table tbody .price-list-program-row td:last-child {
    background: #e7d4ff !important;
    color: #3b1c59 !important;
  }

  body.printing-price-list .price-list-group-toggle {
    min-height: 0;
    padding: 4px;
  }

  body.printing-price-list .price-list-toggle-chevron {
    display: none;
  }

  body.printing-price-list .result-count {
    border: 1px solid #d8e5f6;
    background: #f8fbff;
  }
}

@media screen and (min-width: 901px) {
  .login-view {
    padding: 54px 7.2vw;
  }

  .login-logo {
    width: 86px;
    height: 86px;
  }

  .login-brand {
    gap: 11px;
  }

  .login-brand strong {
    font-size: 20px;
  }

  .login-brand span {
    font-size: 11px;
  }

  .login-brand .brand-motto {
    font-size: 12px;
  }

  .login-card {
    width: min(414px, 100%);
    padding: 38px;
    border-radius: 22px;
  }

  .login-heading {
    margin-bottom: 25px;
  }

  .login-heading h1 {
    font-size: 27px;
  }

  .login-card input,
  .login-card select {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 13.5px;
  }

  .login-card .primary-button,
  .login-card .secondary-button {
    min-height: 41px;
    font-size: 12.6px;
  }

  .app-shell {
    grid-template-columns: 223px 1fr;
  }

  .sidebar {
    padding: 22px 14px;
  }

  .sidebar-brand {
    gap: 10px;
    padding: 9px 6px 16px;
  }

  .sidebar-logo {
    width: 42px;
    height: 42px;
  }

  .sidebar-brand strong {
    max-width: 132px;
    font-size: 12px;
  }

  .sidebar-brand span {
    font-size: 10.8px;
  }

  .nav-list {
    gap: 5px;
  }

  .nav-item {
    min-height: 41px;
    gap: 10px;
    padding: 0 11px;
    border-radius: 13px;
    font-size: 12.6px;
  }

  .nav-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 10px;
    font-size: 11px;
  }

  .nav-item[data-page="dashboard"] .nav-icon::before {
    font-size: 13.5px;
  }

  .nav-badge {
    min-width: 20px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .topbar {
    min-height: 74px;
    gap: 11px;
    padding: 12px 30px;
  }

  .topbar h1 {
    font-size: 20px;
  }

  .eyebrow {
    font-size: 10px;
  }

  .topbar-account .current-user {
    min-width: 151px;
    max-width: 198px;
    padding: 5px 9px 5px 5px;
    border-radius: 14px;
  }

  .topbar-account .avatar {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 11px;
  }

  .topbar-account .logout-button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 11px;
  }

  .topbar-season-filter,
  .date-label {
    font-size: 10px;
  }

  .topbar-season-filter select,
  .school-level-filter {
    min-height: 36px;
    font-size: 10.8px;
  }

  .topbar-season-filter select {
    min-width: 101px;
    padding: 0 11px;
  }

  .page {
    padding: 25px 30px 38px;
  }

  .sector-grid {
    gap: 11px;
    margin-bottom: 18px;
  }

  .sector-card {
    min-height: 171px;
    gap: 11px;
    padding: 23px;
    border-radius: 18px;
  }

  .sector-card::after {
    right: -49px;
    bottom: -68px;
    width: 162px;
    height: 162px;
  }

  .sector-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    font-size: 13.5px;
  }

  .sector-card-content h2 {
    font-size: 21.6px;
  }

  .sector-card-content p {
    font-size: 10.8px;
  }

  .sector-levels {
    gap: 4px;
    margin-top: 11px;
  }

  .sector-levels span,
  .sector-levels button {
    padding: 4px 6px;
    font-size: 8.5px;
  }

  .sector-card-count {
    min-width: 52px;
  }

  .sector-card-count strong {
    font-size: 27px;
  }

  .sector-card-count span {
    font-size: 8px;
  }

  .sector-card-count small {
    font-size: 9px;
  }

  .welcome-banner {
    min-height: 101px;
    gap: 20px;
    padding: 20px 27px;
    border-radius: 16px;
  }

  .welcome-banner h2 {
    font-size: 21.6px;
  }

  .welcome-banner p {
    font-size: 11.7px;
  }

  #dashboardPrimaryActionButton,
  .primary-button,
  .secondary-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 12.6px;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
    gap: 12px;
    margin: 9px 0;
  }

  .stat-card,
  .finance-card,
  .register-summary-card {
    padding: 18px;
    border-radius: 13px;
  }

  .stat-card {
    min-height: 99px;
  }

  .stats-grid > .stat-card:not(.course-program-stat-card) {
    gap: 13px;
    border-top-width: 4px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 13px;
    font-size: 12px;
  }

  .stat-card span {
    font-size: 9px;
  }

  .stat-card strong {
    margin-top: 7px;
    font-size: 19px;
  }

  .stat-card small {
    margin-top: 8px;
    font-size: 9px;
  }

  .course-program-stat-icon,
  .course-program-table-icon {
    width: 47px;
    height: 47px;
    border-radius: 13px;
    font-size: 18px;
  }

  .course-program-stat-icon {
    top: 16px;
    right: 16px;
  }

  .course-program-stat-card strong {
    padding-right: 59px;
  }

  .dashboard-insight-grid {
    gap: 11px;
    margin-bottom: 18px;
  }

  .dashboard-today-card .panel-heading {
    padding: 20px 20px 14px;
  }

  .dashboard-today-card .panel-heading h3 {
    font-size: 16px;
  }

  .dashboard-today-list {
    gap: 12px;
    padding: 16px;
  }

  .dashboard-today-item {
    grid-template-columns: 47px minmax(0, 1fr) 52px;
    min-height: 83px;
    gap: 13px;
    padding: 15px 16px;
    border-radius: 16px;
  }

  .dashboard-today-icon {
    width: 47px;
    height: 47px;
    border-radius: 13px;
    font-size: 13.5px;
  }

  .dashboard-today-item strong {
    font-size: 12.6px;
  }

  .dashboard-today-item small {
    font-size: 10.3px;
  }

  .dashboard-today-item b {
    min-width: 41px;
    min-height: 41px;
    border-radius: 14px;
    font-size: 19px;
  }

  .dashboard-today-card .result-count,
  .result-count {
    padding: 8px 13px;
    font-size: 11px;
  }

  .panel-card {
    border-radius: 14px;
  }

  .panel-heading {
    gap: 11px;
    padding: 18px 20px;
  }

  .panel-heading h3 {
    font-size: 14.4px;
  }

  .panel-heading p {
    font-size: 10.8px;
  }

  .program-subnav {
    gap: 5px;
    margin-bottom: 14px;
  }

  .program-subnav button,
  .finance-program-buttons button {
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 10px;
  }

  th,
  td {
    padding: 12px 16px;
    font-size: 10.8px;
  }

  th {
    font-size: 9px;
  }

  .table-secondary {
    font-size: 9px;
  }

  .status-badge,
  .permission-chip {
    padding: 4px 7px;
    font-size: 9px;
  }

  .action-button {
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 9.5px;
  }
}

#studentsPage .admin-config-table th:last-child,
#studentsPage .admin-config-table td:last-child {
  width: 14%;
  min-width: 190px;
  white-space: nowrap;
}

#studentsPage .admin-config-table td:last-child {
  text-align: right;
}

#studentsPage .admin-config-table td:last-child .action-button {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  margin: 1px 0 1px 2px;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 8.5px;
  line-height: 1;
  white-space: nowrap;
}

#studentsPage .admin-config-table td:last-child .action-button + .action-button {
  margin-left: 2px;
}

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

  .app-shell,
  .main-content {
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    left: 0;
    width: min(84vw, 282px);
    max-width: 300px;
    height: 100vh;
    height: 100dvh;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }

  .sidebar.open {
    left: 0;
    transform: translateX(0);
    box-shadow: 18px 0 48px rgba(10, 20, 38, 0.32);
  }

  .sidebar-brand {
    padding-bottom: 14px;
  }

  .nav-list {
    padding-bottom: 18px;
  }

  .menu-button {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid #d8e2ef;
    border-radius: 12px;
    color: var(--navy);
    background: #fff;
    box-shadow: 0 8px 18px rgba(20, 33, 61, 0.08);
    font-size: 22px;
    line-height: 1;
  }

  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    min-height: 0;
    padding: 10px 14px 12px;
  }

  .topbar > div:not(.topbar-actions) {
    min-width: 0;
  }

  .topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-left: 0;
    gap: 8px;
    justify-content: stretch;
  }

  .sector-switcher,
  .school-level-filter,
  .topbar-season-filter,
  .date-label,
  .topbar-account {
    flex: 1 1 100%;
    max-width: none;
  }

  .sector-switcher {
    order: 1;
    width: 100%;
  }

  .school-level-filter {
    order: 2;
    width: 100%;
  }

  .topbar-season-filter {
    order: 3;
    justify-content: space-between;
    width: 100%;
  }

  .topbar-season-filter select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .date-label {
    order: 4;
    width: 100%;
  }

  .topbar-account {
    order: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    padding-left: 0;
  }

  .install-app-button {
    order: 5;
    min-height: 34px;
    white-space: nowrap;
  }

  .topbar-account .current-user {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .topbar-account .logout-button {
    white-space: nowrap;
  }

  .page {
    width: 100%;
    min-width: 0;
  }

  .panel-heading,
  .page-tools,
  .filter-group,
  .panel-card,
  .course-admin-section {
    min-width: 0;
  }

  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-wrap,
  .compact-table-wrap,
  .course-management-table-wrap,
  .price-list-table-wrap,
  .general-template-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #studentsPage .table-wrap,
  #courseClassesSection .course-management-table-wrap,
  #contractsListPanel .contracts-table-wrap,
  .table-wrap.course-programs-table-wrap,
  .table-wrap.course-levels-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-config-table {
    min-width: 680px;
  }

  #studentsPage .admin-config-table,
  #courseClassesSection .course-management-table-wrap table {
    min-width: 760px;
    table-layout: auto;
  }

  #contractsListPanel .contracts-table-wrap table {
    min-width: 980px;
  }

  .course-management-tabs,
  .program-subnav,
  .finance-program-buttons {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .course-management-tabs button,
  .program-subnav button,
  .finance-program-buttons button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #surveysPanel .panel-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #surveysPanel .panel-heading-actions .table-search-input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  #surveysPanel .panel-heading-actions .result-count,
  #surveysPanel .panel-heading-actions .compact-button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 38px;
  }
}

@media (max-width: 420px) {
  .login-view {
    padding: 18px 14px;
  }

  .login-card {
    padding: 24px 18px;
  }

  .topbar {
    padding-inline: 10px;
  }

  .page {
    padding-inline: 12px;
  }

  .topbar-account {
    grid-template-columns: 1fr;
  }

  .topbar-account .logout-button {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .mobile-card-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto !important;
  }

  .mobile-card-table thead {
    display: none;
  }

  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-card-table tr {
    margin: 0 0 14px;
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid #dfe7f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.06);
  }

  .mobile-card-table tr:last-child {
    margin-bottom: 0;
  }

  .mobile-card-table td {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    box-sizing: border-box;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .mobile-card-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .mobile-card-table td::before {
    color: #6b778c;
    content: "";
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-card-table td > * {
    grid-column: 2;
    min-width: 0;
  }

  .mobile-card-table td:first-child {
    display: block;
    padding-top: 0;
  }

  .mobile-card-table td:first-child > *,
  .mobile-card-table td.align-right > * {
    grid-column: auto;
  }

  .mobile-card-table td:first-child::before {
    display: none;
  }

  .mobile-card-table .table-primary,
  .mobile-card-table .table-secondary,
  .mobile-card-table .table-stacked-line,
  .mobile-card-table .table-deadline-line {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .mobile-card-table .table-primary {
    font-size: 14px;
  }

  .mobile-card-table .table-secondary {
    margin-top: 3px;
    font-size: 12px;
  }

  .mobile-card-table .status-badge {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    white-space: normal;
  }

  .mobile-card-table td.align-right {
    display: block;
    text-align: left !important;
  }

  .mobile-card-table td.align-right::before {
    display: block;
    margin-bottom: 8px;
  }

  .mobile-card-table .activity-row-actions,
  .mobile-card-table .contract-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start;
  }

  .mobile-card-table .action-button {
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.15;
  }

  .surveys-mobile-table td:nth-child(2)::before {
    content: "Grupi";
  }

  .surveys-mobile-table td:nth-child(3)::before {
    content: "Pyetje";
  }

  .surveys-mobile-table td:nth-child(4)::before {
    content: "Pergjigje";
  }

  .surveys-mobile-table td:nth-child(5)::before {
    content: "Statusi";
  }

  .surveys-mobile-table td:nth-child(6)::before {
    content: "Linku";
  }

  .surveys-mobile-table td:nth-child(7)::before {
    content: "Veprime";
  }

  .surveys-table-wrap {
    overflow-x: visible;
  }

  .surveys-mobile-table .survey-link-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-width: 100%;
    gap: 7px;
  }

  .surveys-mobile-table .survey-link-line code {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .surveys-mobile-table td.align-right {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .surveys-mobile-table td.align-right .action-button {
    flex: 0 1 auto;
  }

  .mobile-card-table .empty-row {
    display: block;
    padding: 18px 10px;
    border: 0;
    text-align: center;
  }

  .mobile-card-table .empty-row::before {
    display: none;
  }

  .recent-contracts-table td:nth-child(2)::before {
    content: "Nxenesi";
  }

  .recent-contracts-table td:nth-child(3)::before {
    content: "Programi";
  }

  .recent-contracts-table td:nth-child(4)::before {
    content: "Statusi";
  }

  .activities-mobile-table td:nth-child(2)::before {
    content: "Data";
  }

  .activities-mobile-table td:nth-child(3)::before {
    content: "Cmimi";
  }

  .activities-mobile-table td:nth-child(4)::before {
    content: "Pjesemarres";
  }

  .activities-mobile-table td:nth-child(5)::before {
    content: "Te ardhura";
  }

  .activities-mobile-table td:nth-child(6)::before {
    content: "Shpenzime";
  }

  .activities-mobile-table td:nth-child(7)::before {
    content: "Publikimi";
  }

  .activities-mobile-table td:nth-child(8)::before {
    content: "Statusi";
  }

  .activities-mobile-table td:nth-child(9)::before {
    content: "Veprime";
  }

  .activity-participants-mobile-table td:nth-child(2)::before,
  .activity-declined-mobile-table td:nth-child(2)::before {
    content: "Grupi / Klasa";
  }

  .activity-participants-mobile-table td:nth-child(3)::before,
  .activity-declined-mobile-table td:nth-child(3)::before {
    content: "Kontakti";
  }

  .activity-participants-mobile-table td:nth-child(4)::before,
  .activity-declined-mobile-table td:nth-child(4)::before {
    content: "Mesuesi";
  }

  .activity-participants-mobile-table td:nth-child(5)::before {
    content: "Konfirmimi";
  }

  .activity-participants-mobile-table td:nth-child(6)::before {
    content: "Pagesa";
  }

  .activity-participants-mobile-table td:nth-child(7)::before {
    content: "Prezenca";
  }

  .activity-participants-mobile-table td:nth-child(8)::before {
    content: "Cmimi / Skonto";
  }

  .activity-participants-mobile-table td:nth-child(9)::before,
  .activity-declined-mobile-table td:nth-child(6)::before {
    content: "Veprime";
  }

  .activity-declined-mobile-table td:nth-child(5)::before {
    content: "Statusi";
  }

  .activity-expenses-mobile-table td:nth-child(2)::before {
    content: "Pershkrimi";
  }

  .activity-expenses-mobile-table td:nth-child(3)::before {
    content: "Shuma";
  }

  .activity-expenses-mobile-table td:nth-child(4)::before {
    content: "Veprime";
  }

  .registers-mobile-table td:nth-child(2)::before {
    content: "Grupi / Klasa";
  }

  .registers-mobile-table td:nth-child(3):nth-last-child(4)::before {
    content: "Mesuesi";
  }

  .registers-mobile-table td:nth-child(3):nth-last-child(5)::before {
    content: "Ditet / Orari";
  }

  .registers-mobile-table td:nth-child(4):nth-last-child(3)::before {
    content: "Nxenes";
  }

  .registers-mobile-table td:nth-child(4):nth-last-child(4)::before {
    content: "Mesuesi";
  }

  .registers-mobile-table td:nth-child(5):nth-last-child(2)::before {
    content: "Sezoni";
  }

  .registers-mobile-table td:nth-child(5):nth-last-child(3)::before {
    content: "Nxenes";
  }

  .registers-mobile-table td:nth-child(6):nth-last-child(1)::before {
    content: "Veprime";
  }

  .registers-mobile-table td:nth-child(6):nth-last-child(2)::before {
    content: "Sezoni";
  }

  .registers-mobile-table td:nth-child(7)::before {
    content: "Veprime";
  }

  .students-mobile-table.program-panel-selected .program-column,
  .students-mobile-table .course-season-column,
  .students-mobile-table.course-students-mode .teacher-column,
  .contracts-mobile-table.program-panel-selected .program-column {
    display: none !important;
  }

  .students-mobile-table.course-students-mode .course-season-column {
    display: grid !important;
  }

  .students-mobile-table td:nth-child(2)::before {
    content: "Niveli / Kursi";
  }

  .students-mobile-table td:nth-child(3)::before {
    content: "Grupi / Klasa";
  }

  .students-mobile-table td:nth-child(4)::before {
    content: "Sezoni";
  }

  .students-mobile-table td:nth-child(5)::before {
    content: "Mesuesi";
  }

  .students-mobile-table td:nth-child(6)::before {
    content: "Prindi";
  }

  .students-mobile-table td:nth-child(7)::before {
    content: "Aksesi";
  }

  .students-mobile-table td:nth-child(8)::before {
    content: "Pagesa";
  }

  .students-mobile-table td:nth-child(9)::before {
    content: "Dokumente";
  }

  .students-mobile-table td:nth-child(10)::before {
    content: "Statusi";
  }

  .students-mobile-table td:nth-child(11)::before {
    content: "Veprime";
  }

  .contracts-mobile-table td:nth-child(2)::before {
    content: "Nxenesi";
  }

  .contracts-mobile-table td:nth-child(3)::before {
    content: "Prindi";
  }

  .contracts-mobile-table td:nth-child(4)::before {
    content: "Programi";
  }

  .contracts-mobile-table td:nth-child(5)::before {
    content: "Lloji";
  }

  .contracts-mobile-table td:nth-child(6)::before {
    content: "Gr./Kl.";
  }

  .contracts-mobile-table td:nth-child(7)::before {
    content: "Sezoni";
  }

  .contracts-mobile-table td:nth-child(8)::before {
    content: "Tarifa";
  }

  .contracts-mobile-table td:nth-child(9)::before {
    content: "Statusi";
  }

  .contracts-mobile-table td:nth-child(10)::before {
    content: "PDF";
  }

  .contracts-mobile-table td:nth-child(11)::before {
    content: "Veprime";
  }

  .staff-mobile-table td:nth-child(2)::before {
    content: "Punonjesi";
  }

  .staff-mobile-table td:nth-child(3)::before {
    content: "Pozicioni";
  }

  .staff-mobile-table td:nth-child(4)::before {
    content: "Kontrata";
  }

  .staff-mobile-table td:nth-child(5)::before {
    content: "Fillimi";
  }

  .staff-mobile-table td:nth-child(6)::before {
    content: "Email";
  }

  .staff-mobile-table td:nth-child(7)::before {
    content: "Dokumente";
  }

  .staff-mobile-table td:nth-child(8)::before {
    content: "Statusi";
  }

  .staff-mobile-table td:nth-child(9)::before {
    content: "Veprime";
  }

  .employment-types-mobile-table td:nth-child(2)::before {
    content: "Kohezgjatja";
  }

  .employment-types-mobile-table td:nth-child(3)::before {
    content: "Modelet Word";
  }

  .employment-types-mobile-table td:nth-child(4)::before {
    content: "Statusi";
  }

  .employment-types-mobile-table td:nth-child(5)::before {
    content: "Veprime";
  }

  .users-mobile-table td:nth-child(2)::before {
    content: "Roli";
  }

  .users-mobile-table td:nth-child(3)::before {
    content: "Statusi";
  }

  .users-mobile-table td:nth-child(4)::before {
    content: "Veprime";
  }

  .payroll-monthly-mobile-table td:nth-child(2)::before {
    content: "Paga bruto";
  }

  .payroll-monthly-mobile-table td:nth-child(3)::before {
    content: "Paga neto";
  }

  .payroll-monthly-mobile-table td:nth-child(4)::before {
    content: "Bonus mujor";
  }

  .payroll-monthly-mobile-table td:nth-child(5)::before {
    content: "Bonus vjetor";
  }

  .payroll-monthly-mobile-table td:nth-child(6)::before {
    content: "Mungesa";
  }

  .payroll-monthly-mobile-table td:nth-child(7)::before {
    content: "Likuidimi";
  }

  .payroll-monthly-mobile-table td:nth-child(8)::before {
    content: "Per pagese";
  }

  .payroll-monthly-mobile-table td:nth-child(9)::before {
    content: "Veprime";
  }

  .payroll-annual-mobile-table td:nth-child(n+2):nth-child(-n+13)::before {
    content: "Muaj";
  }

  .payroll-annual-mobile-table td:nth-child(14)::before {
    content: "Totali";
  }

  .payroll-annual-mobile-table td:nth-child(15)::before {
    content: "Likuidimi";
  }

  .payroll-annual-mobile-table td:nth-child(16)::before {
    content: "Veprime";
  }

  .payroll-leave-mobile-table td:nth-child(2)::before {
    content: "Periudha";
  }

  .payroll-leave-mobile-table td:nth-child(3)::before {
    content: "Totali";
  }

  .payroll-leave-mobile-table td:nth-child(4)::before {
    content: "Veprime";
  }

  .official-holidays-mobile-table td:nth-child(2)::before {
    content: "Pershkrimi";
  }

  .official-holidays-mobile-table td:nth-child(3)::before {
    content: "Veprime";
  }

  .admin-seasons-mobile-table td:nth-child(2)::before {
    content: "Fillimi";
  }

  .admin-seasons-mobile-table td:nth-child(3)::before {
    content: "Perfundimi";
  }

  .admin-seasons-mobile-table td:nth-child(4)::before {
    content: "Statusi";
  }

  .admin-seasons-mobile-table td:nth-child(5)::before {
    content: "Veprime";
  }

  .admin-school-programs-mobile-table td:nth-child(2)::before,
  .course-programs-mobile-table td:nth-child(2)::before {
    content: "Logo";
  }

  .admin-school-programs-mobile-table td:nth-child(3)::before {
    content: "Emertimi";
  }

  .admin-school-programs-mobile-table td:nth-child(4)::before {
    content: "Grupe / Klasa";
  }

  .admin-school-programs-mobile-table td:nth-child(5)::before,
  .course-programs-mobile-table td:nth-child(5)::before {
    content: "Statusi";
  }

  .admin-school-programs-mobile-table td:nth-child(6)::before,
  .course-programs-mobile-table td:nth-child(6)::before {
    content: "Veprime";
  }

  .admin-program-groups-mobile-table td:nth-child(2)::before {
    content: "Grupi / Klasa";
  }

  .admin-program-groups-mobile-table td:nth-child(3)::before {
    content: "Mesuesi";
  }

  .admin-program-groups-mobile-table td:nth-child(4)::before {
    content: "Statusi";
  }

  .admin-program-groups-mobile-table td:nth-child(5)::before {
    content: "Veprime";
  }

  .admin-contract-types-mobile-table td:nth-child(2)::before {
    content: "Lloji";
  }

  .admin-contract-types-mobile-table td:nth-child(3)::before {
    content: "Tarifa";
  }

  .admin-contract-types-mobile-table td:nth-child(4)::before {
    content: "Kohezgjatja";
  }

  .admin-contract-types-mobile-table td:nth-child(5)::before {
    content: "Modeli Word";
  }

  .admin-contract-types-mobile-table td:nth-child(6)::before {
    content: "Statusi";
  }

  .admin-contract-types-mobile-table td:nth-child(7)::before {
    content: "Veprime";
  }

  .course-programs-mobile-table td:nth-child(3)::before {
    content: "Nivele";
  }

  .course-programs-mobile-table td:nth-child(4)::before {
    content: "Grupe";
  }

  .course-levels-mobile-table td:nth-child(2)::before {
    content: "Radha";
  }

  .course-levels-mobile-table td:nth-child(3)::before {
    content: "Niveli";
  }

  .course-levels-mobile-table td:nth-child(4)::before {
    content: "Provime";
  }

  .course-levels-mobile-table td:nth-child(5)::before {
    content: "Individual";
  }

  .course-levels-mobile-table td:nth-child(6)::before {
    content: "Grup";
  }

  .course-levels-mobile-table td:nth-child(7)::before {
    content: "Pakete";
  }

  .course-levels-mobile-table td:nth-child(8)::before {
    content: "Statusi";
  }

  .course-levels-mobile-table td:nth-child(9)::before {
    content: "Veprime";
  }

  .course-groups-mobile-table td:nth-child(2)::before {
    content: "Niveli";
  }

  .course-groups-mobile-table td:nth-child(3)::before {
    content: "Grupi";
  }

  .course-groups-mobile-table td:nth-child(4)::before {
    content: "Tarifa";
  }

  .course-groups-mobile-table td:nth-child(5)::before {
    content: "Orari";
  }

  .course-groups-mobile-table td:nth-child(6)::before {
    content: "Nxenes";
  }

  .course-groups-mobile-table td:nth-child(7)::before {
    content: "Me detyrim";
  }

  .course-groups-mobile-table td:nth-child(8)::before {
    content: "Mesuesi";
  }

  .course-groups-mobile-table td:nth-child(9)::before {
    content: "Statusi";
  }

  .course-groups-mobile-table td:nth-child(10)::before {
    content: "Veprime";
  }

  .course-individual-mobile-table td:nth-child(2)::before,
  .course-packages-mobile-table td:nth-child(2)::before {
    content: "Nxenesi";
  }

  .course-individual-mobile-table td:nth-child(3)::before,
  .course-packages-mobile-table td:nth-child(3)::before {
    content: "Kursi";
  }

  .course-individual-mobile-table td:nth-child(4)::before,
  .course-packages-mobile-table td:nth-child(4)::before {
    content: "Mesuesi";
  }

  .course-individual-mobile-table td:nth-child(5)::before,
  .course-packages-mobile-table td:nth-child(5)::before {
    content: "Orari";
  }

  .course-individual-mobile-table td:nth-child(6)::before,
  .course-packages-mobile-table td:nth-child(6)::before {
    content: "Pagesa";
  }

  .course-individual-mobile-table td:nth-child(7)::before,
  .course-packages-mobile-table td:nth-child(7)::before {
    content: "Statusi";
  }

  .course-individual-mobile-table td:nth-child(8)::before,
  .course-packages-mobile-table td:nth-child(8)::before {
    content: "Veprime";
  }

  .course-contract-types-mobile-table td:nth-child(2)::before {
    content: "Niveli";
  }

  .course-contract-types-mobile-table td:nth-child(3)::before {
    content: "Lloji";
  }

  .course-contract-types-mobile-table td:nth-child(4)::before {
    content: "Cmimi";
  }

  .course-contract-types-mobile-table td:nth-child(5)::before {
    content: "Seanca";
  }

  .course-contract-types-mobile-table td:nth-child(6)::before {
    content: "Statusi";
  }

  .course-contract-types-mobile-table td:nth-child(7)::before {
    content: "Veprime";
  }

  .mobile-card-table .course-level-action-buttons,
  .mobile-card-table .contract-action-grid {
    width: 100%;
  }
}