:root {
  color-scheme: light;
  --school-navy: #0b2442;
  --school-navy-2: #10365f;
  --school-navy-3: #174a7b;
  --school-gold: #c79b4b;
  --school-gold-soft: #f3e6cb;
  --school-blue: #2472b9;
  --school-green: #16825d;
  --school-red: #c33f4d;
  --school-amber: #b7791f;
  --school-violet: #7155a6;

  --bg: #f3f6fa;
  --bg-grad-from: #f7f9fc;
  --bg-grad-to: #edf2f7;
  --surface: #ffffff;
  --card: #ffffff;
  --surface-soft: #f8fafc;
  --surface-muted: #eef3f8;
  --text: #10243a;
  --muted: #68788a;
  --border: #dfe6ee;
  --border-strong: #c9d4df;
  --brand: #1767a8;
  --brand-dark: #0b4f88;
  --success: #16825d;
  --danger: #c33f4d;
  --warning: #b7791f;
  --radius: 18px;
  --radius-sm: 12px;
  --pill-bg: #eff4f8;
  --pill-text: #29465f;
  --pill-border: #dce5ed;
  --avatar-bg: #dfeef9;
  --avatar-text: #0b568f;
  --input-bg: #ffffff;
  --shadow-sm: 0 6px 18px rgba(16, 36, 58, 0.06);
  --shadow-md: 0 16px 38px rgba(16, 36, 58, 0.09);
  --shadow-lg: 0 28px 70px rgba(8, 25, 44, 0.16);
  --sidebar-width: 294px;
  --topbar-height: 82px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --bg-grad-from: #081525;
  --bg-grad-to: #06101d;
  --surface: #0d1d2e;
  --card: #0d1d2e;
  --surface-soft: #11263a;
  --surface-muted: #152b40;
  --text: #edf4fb;
  --muted: #9caec0;
  --border: #22394f;
  --border-strong: #315069;
  --brand: #70b6ed;
  --brand-dark: #9acdf3;
  --school-gold-soft: #3b2d16;
  --pill-bg: #11263a;
  --pill-text: #dce9f5;
  --pill-border: #294158;
  --avatar-bg: #164c78;
  --avatar-text: #eef8ff;
  --input-bg: #0a1928;
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.38);
}

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 82% 0%, rgba(36, 114, 185, 0.08), transparent 28rem),
    linear-gradient(180deg, var(--bg-grad-from), var(--bg-grad-to));
  color: var(--text);
  font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--brand);
  text-decoration: none;
}

img {
  max-width: 100%;
}

::selection {
  background: rgba(36, 114, 185, 0.22);
}

:focus-visible {
  outline: 3px solid rgba(36, 114, 185, 0.26);
  outline-offset: 2px;
}

.school-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.school-icon--sm {
  width: 18px;
  height: 18px;
}

.school-skip-link {
  position: fixed;
  z-index: 2000;
  inset-block-start: 10px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  color: #0b2442;
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
}

.school-skip-link:focus {
  transform: translateY(0);
}

/* Application shell */
.school-shell {
  min-height: 100vh;
}

.school-sidebar {
  position: fixed;
  z-index: 1000;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width);
  color: #eaf2f9;
  background:
    radial-gradient(circle at 16% -5%, rgba(199, 155, 75, 0.2), transparent 16rem),
    linear-gradient(180deg, #0c2a4b 0%, #081d35 58%, #07182b 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -18px 0 50px rgba(5, 17, 31, 0.15);
  overflow: hidden;
}

.school-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.school-sidebar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 16px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.school-brand {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 8px;
  color: #fff;
  border-radius: 16px;
}

.school-brand:hover {
  background: rgba(255, 255, 255, 0.055);
}

.school-brand__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.school-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
}

.school-brand__text {
  min-width: 0;
}

.school-brand__name,
.school-brand__caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-brand__name {
  font-size: 15px;
  font-weight: 900;
}

.school-brand__caption {
  margin-top: 3px;
  color: #aebfd0;
  font-size: 11px;
  font-weight: 700;
}

.school-sidebar__rule {
  height: 1px;
  margin: 13px 8px 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.school-nav__label {
  margin: 12px 13px 7px;
  color: #8399ad;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.school-nav {
  display: grid;
  gap: 4px;
}

.school-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 9px 12px;
  overflow: hidden;
  color: #c9d7e4;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.18s ease;
}

.school-nav__link::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 99px;
  background: transparent;
}

.school-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.school-nav__link.is-active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(44, 124, 191, 0.36), rgba(255, 255, 255, 0.075));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.school-nav__link.is-active::before {
  background: var(--school-gold);
  box-shadow: 0 0 12px rgba(199, 155, 75, 0.55);
}

.school-nav__link .school-icon {
  color: #9db6ca;
}

.school-nav__link.is-active .school-icon,
.school-nav__link:hover .school-icon {
  color: #fff;
}

.school-nav__badge {
  margin-inline-start: auto;
  padding: 2px 7px;
  color: #ead3a4;
  border: 1px solid rgba(199, 155, 75, 0.26);
  border-radius: 999px;
  background: rgba(199, 155, 75, 0.1);
  font-size: 9px;
  font-weight: 900;
}

.school-nav__badge--alert {
  min-width: 22px;
  color: #ffe2e6;
  border-color: rgba(255, 116, 132, 0.38);
  background: rgba(195, 63, 77, 0.32);
  text-align: center;
}

.school-sidebar__footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.school-subscription-card {
  position: relative;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
}

.school-subscription-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--school-gold), transparent);
}

.school-subscription-card__head,
.school-subscription-card__dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.school-subscription-card__eyebrow {
  color: #8ea5b9;
  font-size: 9px;
  font-weight: 900;
}

.school-subscription-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c9d7e4;
  font-size: 9px;
  font-weight: 800;
}

.school-subscription-card__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55c795;
  box-shadow: 0 0 0 4px rgba(85, 199, 149, 0.1);
}

.school-subscription-card__plan {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.school-subscription-card__remaining {
  display: block;
  margin-top: 3px;
  color: #d9e5ef;
  font-size: 11px;
  font-weight: 800;
}

.school-subscription-card[data-tone="warning"] .school-subscription-card__remaining,
.school-subscription-card[data-tone="critical"] .school-subscription-card__remaining {
  color: #f4d28e;
}

.school-subscription-card[data-tone="expired"] .school-subscription-card__remaining {
  color: #ffadb6;
}

.school-subscription-card__track {
  display: flex;
  height: 5px;
  margin: 10px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.school-subscription-card__bar {
  display: block;
  width: var(--subscription-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3da37b, #75d2aa);
}

.school-subscription-card[data-tone="warning"] .school-subscription-card__bar,
.school-subscription-card[data-tone="critical"] .school-subscription-card__bar {
  background: linear-gradient(90deg, #b7791f, #edc36e);
}

.school-subscription-card[data-tone="expired"] .school-subscription-card__bar {
  background: linear-gradient(90deg, #a82f40, #e46a75);
}

.school-subscription-card__dates {
  color: #8ea5b9;
  font-size: 9px;
}

.school-user-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
}

.school-user-card__avatar,
.school-user-chip__avatar {
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #2b76b7, #174b78);
  font-weight: 900;
}

.school-user-card__avatar {
  width: 38px;
  height: 38px;
}

.school-user-card__info {
  min-width: 0;
}

.school-user-card__name,
.school-user-card__role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-user-card__name {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.school-user-card__role {
  margin-top: 2px;
  color: #8fa6ba;
  font-size: 9px;
}

.school-user-card__logout {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #aebfd0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.school-user-card form {
  margin: 0;
}

.school-user-card__logout:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.school-sidebar-backdrop {
  position: fixed;
  z-index: 950;
  inset: 0;
  display: none;
  padding: 0;
  border: 0;
  background: rgba(4, 13, 24, 0.58);
  backdrop-filter: blur(3px);
}

.school-main {
  min-height: 100vh;
  margin-inline-start: var(--sidebar-width);
}

.school-topbar {
  position: sticky;
  z-index: 800;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--topbar-height);
  padding: 13px 28px;
  border-bottom: 1px solid rgba(201, 212, 223, 0.84);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 5px 18px rgba(16, 36, 58, 0.035);
  backdrop-filter: blur(18px) saturate(145%);
}

html[data-theme="dark"] .school-topbar {
  border-color: rgba(49, 80, 105, 0.62);
}

.school-topbar__start,
.school-topbar__end {
  display: flex;
  align-items: center;
  gap: 13px;
}

.school-topbar__titles {
  min-width: 0;
}

.school-topbar__eyebrow {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.school-topbar__title {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-topbar__date {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.school-sidebar-toggle,
.school-theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: 0.16s ease;
}

.school-sidebar-toggle {
  display: none;
}

.school-sidebar-toggle:hover,
.school-theme-toggle:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  transform: translateY(-1px);
}

.school-subscription-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 11px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.school-subscription-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 12%, transparent);
}

.school-subscription-chip[data-tone="warning"] .school-subscription-chip__dot,
.school-subscription-chip[data-tone="critical"] .school-subscription-chip__dot {
  background: var(--warning);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 12%, transparent);
}

.school-subscription-chip[data-tone="expired"] .school-subscription-chip__dot {
  background: var(--danger);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 12%, transparent);
}

.school-subscription-chip__text {
  display: grid;
  line-height: 1.2;
}

.school-subscription-chip__text strong {
  font-size: 10px;
}

.school-subscription-chip__text span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.school-user-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 160px;
}

.school-user-chip__avatar {
  width: 36px;
  height: 36px;
}

.school-user-chip__text {
  min-width: 0;
  line-height: 1.2;
}

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

.school-user-chip__text strong {
  font-size: 11px;
}

.school-user-chip__text span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.school-content {
  width: min(100%, 1680px);
  min-height: calc(100vh - var(--topbar-height));
  margin-inline: auto;
  padding: 26px 28px 18px;
}

.school-content__body {
  min-width: 0;
}

.school-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px;
  padding: 17px 4px 4px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 10px;
}

/* Flash and toast feedback */
.school-flashes {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.school-flash,
.flash {
  position: relative;
  padding: 12px 15px;
  color: var(--text);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 700;
}

.school-flash--success,
.flash.success {
  border-inline-start-color: var(--success);
}

.school-flash--warning,
.flash.warning {
  border-inline-start-color: var(--warning);
}

.school-flash--error,
.flash.error,
.school-flash--danger,
.flash.danger {
  border-inline-start-color: var(--danger);
}

#toast-container {
  position: fixed;
  z-index: 3000;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  display: grid;
  gap: 9px;
  width: min(92vw, 390px);
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-12px);
  transition: 0.22s ease;
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.toast-message {
  font-size: 12px;
  font-weight: 800;
}

.toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
}

.toast-close:hover {
  color: var(--text);
  background: var(--surface-muted);
}

/* Shared institutional components */
.page-title {
  margin: 0 0 15px;
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
}

.card,
.fieldset {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.card {
  padding: 18px;
}

.fieldset {
  padding: 16px;
}

.card + .card {
  margin-top: 14px;
}

.card h1,
.card h2,
.card h3,
.fieldset h1,
.fieldset h2,
.fieldset h3 {
  color: var(--text);
}

.muted,
.note {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 14px;
}

.grid-2 {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
}

.top-actions,
.actions,
.inline-form,
.search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.top-actions {
  justify-content: space-between;
  margin-bottom: 15px;
}

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

.btn,
button.btn,
a.btn,
.btn-back,
.search-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--school-blue), #155a91);
  box-shadow: 0 7px 16px rgba(23, 103, 168, 0.16);
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: 0.16s ease;
}

.btn:hover,
button.btn:hover,
a.btn:hover,
.search-bar button:hover {
  color: #fff;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn[disabled],
button[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.btn-muted,
.btn-secondary,
.btn-back {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.btn-danger {
  color: #fff !important;
  background: linear-gradient(145deg, #cf4b58, #a92f3e) !important;
}

.btn-success {
  color: #fff !important;
  background: linear-gradient(145deg, #26936d, #116c4c) !important;
}

.xl {
  min-height: 45px;
  padding-inline: 17px;
  font-size: 14px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.search-bar input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  outline: 0;
  background: var(--input-bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

textarea {
  min-height: 112px;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.search-bar input:focus {
  border-color: var(--school-blue);
  box-shadow: 0 0 0 3px rgba(36, 114, 185, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--school-blue);
}

input[type="file"] {
  padding: 7px !important;
}

input[type="file"]::file-selector-button {
  margin-inline-end: 9px;
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  font-weight: 800;
  cursor: pointer;
}

label {
  color: var(--text);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  padding: 11px 12px;
  color: #41566a;
  border-block: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 900;
  text-align: start;
  white-space: nowrap;
}

html[data-theme="dark"] thead th {
  color: #c9d9e7;
}

thead th:first-child {
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

thead th:last-child {
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}

tbody td {
  padding: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  vertical-align: middle;
}

tbody tr {
  transition: background 0.14s ease;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--school-blue) 5%, transparent);
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 13px;
}

.card-tile {
  display: flex;
  gap: 12px;
  min-height: 115px;
  padding: 15px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card-tile:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--surface-muted);
  font-size: 20px;
}

.tile-content h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.tile-content p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.class-boxes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.class-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}

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

.fieldset .row {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-block: 10px;
}

.a4-sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 16px auto;
  padding: 15mm;
  color: #000;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 12px 40px rgba(16, 36, 58, 0.12);
}

/* Common page families already present in the project */
.school-content :is(
  .dash-wrap,
  .std-wrap,
  .secadm-page,
  .audit-page,
  .db-page,
  .pledges-page,
  .report-page,
  .tm-page,
  .csr-page
) {
  margin-top: 0 !important;
}

.school-content :is(
  .dash-hero,
  .std-hero,
  .secadm-shell,
  .audit-hero,
  .db-hero
) {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}

.school-content :is(
  .dash-zone,
  .dash-stat,
  .std-card,
  .secadm-card,
  .secadm-user,
  .audit-card,
  .db-card
) {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.school-content :is(.dash-tile, .dash-tile-wide):hover {
  border-color: color-mix(in srgb, var(--school-blue) 36%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
}

.school-content .secadm-topbar {
  margin-top: 0;
}

.school-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
  padding: 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 21px;
  background:
    radial-gradient(circle at 8% -30%, rgba(199, 155, 75, 0.2), transparent 20rem),
    linear-gradient(135deg, #0d3157, #081e37);
  box-shadow: var(--shadow-md);
}

.school-page-intro__eyebrow,
.school-inline-status__eyebrow,
.operation-success__eyebrow {
  color: #e6cd9c;
  font-size: 9px;
  font-weight: 900;
}

.school-page-intro h2 {
  margin: 4px 0 5px;
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
}

.school-page-intro p {
  max-width: 760px;
  margin: 0;
  color: #b6c7d8;
  font-size: 11px;
  line-height: 1.85;
}

.school-page-intro .btn-muted {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.record-summary,
.document-preview,
.operation-success,
.school-inline-status,
.school-empty-state {
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.record-summary + .document-preview {
  margin-top: 14px;
}

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

.record-summary__grid > div {
  min-height: 79px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.record-summary__grid span,
.record-summary__grid strong {
  display: block;
}

.record-summary__grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.record-summary__grid strong {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.75;
}

.record-summary > .actions {
  margin-top: 14px;
}

.school-empty-state {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.school-table-card {
  margin-top: 13px;
  padding: 0;
  overflow: hidden;
}

.school-table-card__head,
.document-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.school-table-card__head {
  border-bottom: 1px solid var(--border);
}

.school-table-card__head h3,
.document-preview__head h3 {
  margin: 0;
  font-size: 15px;
}

.school-table-card__head p,
.document-preview__head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.school-table-scroll {
  overflow-x: auto;
}

.school-table-scroll table {
  min-width: 780px;
}

.school-table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.school-table-actions .btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
}

.document-preview {
  padding: 0;
  overflow: hidden;
}

.document-preview__frame {
  margin: 0 18px 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #1a2634;
}

.document-preview__frame iframe {
  display: block;
  width: 100%;
  height: min(78vh, 920px);
  border: 0;
  background: #1a2634;
}

.document-preview > .note {
  display: block;
  margin: 0 18px 16px;
  font-size: 9px;
}

.pledge-view-page {
  display: grid;
  gap: 14px;
}

.pledge-record-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pledge-record-summary__head span,
.pledge-record-summary__head h3 {
  display: block;
}

.pledge-record-summary__head > div > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.pledge-record-summary__head h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 16px;
}

.pledge-record-summary__status {
  padding: 7px 10px;
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 23%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  font-size: 8px;
  font-weight: 900;
}

.pledge-record-summary__violations {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--school-gold);
  border-radius: 12px;
  background: var(--surface-soft);
}

.pledge-record-summary__violations > span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
}

.pledge-record-summary__violations :is(ul, p) {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 10px;
  line-height: 1.75;
}

.pledge-record-summary__violations ul {
  padding-inline-start: 18px;
}

.operation-success {
  max-width: 840px;
  margin-inline: auto;
  padding: 28px;
  text-align: center;
}

.operation-success__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(145deg, #26936d, #116c4c);
  box-shadow: 0 13px 28px rgba(22, 130, 93, 0.22);
  font-size: 26px;
  font-weight: 900;
}

.operation-success h2 {
  margin: 5px 0 7px;
  font-size: 27px;
}

.operation-success > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.operation-success__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  padding: 8px 12px;
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  font-size: 10px;
  font-weight: 800;
}

.operation-success__fallback {
  margin-top: 17px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
  text-align: start;
}

.operation-success__fallback > strong {
  font-size: 11px;
}

.operation-success__fallback ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.operation-success__fallback li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-size: 10px;
}

.operation-success__fallback a {
  color: var(--success);
  font-weight: 900;
}

.operation-success > .actions {
  justify-content: center;
  margin-top: 19px;
}

.school-inline-status {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 19px;
  align-items: center;
  max-width: 860px;
  margin: 8vh auto 0;
  padding: 25px;
}

.school-inline-status__code {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: #fff;
  border-radius: 20px;
  background: linear-gradient(145deg, #d15460, #a52c3a);
  font-size: 30px;
  font-weight: 900;
}

.school-inline-status h2 {
  margin: 4px 0 6px;
  font-size: 25px;
}

.school-inline-status p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.school-inline-status .actions {
  justify-content: flex-start;
  margin-top: 15px;
}

/* School dashboard */
.school-dashboard {
  display: grid;
  gap: 18px;
}

.school-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
  gap: 18px;
  min-height: 290px;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 112%, rgba(44, 124, 191, 0.55), transparent 24rem),
    radial-gradient(circle at 92% -10%, rgba(199, 155, 75, 0.26), transparent 20rem),
    linear-gradient(135deg, #0e365f, #081e37 72%);
  box-shadow: 0 25px 65px rgba(7, 24, 43, 0.2);
}

.school-dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to left, #000, transparent 86%);
}

.school-dashboard-hero__main,
.school-dashboard-hero__aside {
  position: relative;
  z-index: 1;
}

.school-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: #ead3a4;
  font-size: 11px;
  font-weight: 900;
}

.school-dashboard-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: var(--school-gold);
}

.school-dashboard-hero h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(27px, 4vw, 44px);
  line-height: 1.3;
}

.school-dashboard-hero__description {
  max-width: 770px;
  margin: 14px 0 0;
  color: #c4d3df;
  font-size: 13px;
  line-height: 1.95;
}

.school-dashboard-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.school-dashboard-quick__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 13px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.075);
  font-size: 11px;
  font-weight: 900;
  transition: 0.16s ease;
}

.school-dashboard-quick__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
}

.school-dashboard-quick__link--primary {
  color: #10243a;
  border-color: #e4c78c;
  background: linear-gradient(145deg, #efd9aa, #cda55c);
}

.school-dashboard-quick__link--primary:hover {
  color: #10243a;
  background: linear-gradient(145deg, #f4e1b8, #d7b36c);
}

.school-dashboard-hero__aside {
  display: grid;
  place-items: center;
}

.school-dashboard-identity {
  width: min(100%, 420px);
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.school-dashboard-identity__top {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.school-dashboard-identity__logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}

.school-dashboard-identity__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-dashboard-identity__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.school-dashboard-identity__name {
  display: block;
  max-width: none;
  overflow: visible;
  font-size: 13px;
  line-height: 1.65;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.school-dashboard-identity__copy > span {
  display: block;
  margin: 0;
  color: #9fb2c4;
  font-size: 9px;
  line-height: 1.65;
  white-space: normal;
}

.school-dashboard-identity__subscription {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.school-dashboard-identity__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #aebfd0;
  font-size: 9px;
}

.school-dashboard-identity__row strong {
  max-width: 62%;
  color: #fff;
  font-size: 10px;
  line-height: 1.55;
  text-align: end;
  white-space: normal;
  overflow-wrap: anywhere;
}

.school-dashboard-identity__remaining {
  display: block;
  margin-top: 9px;
  color: #f0d596;
  font-size: 17px;
  font-weight: 900;
}

.school-dashboard-identity__track {
  display: flex;
  height: 6px;
  margin: 10px 0 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.school-dashboard-identity__bar {
  display: block;
  width: var(--subscription-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #47a67f, #89d5b3);
  transition: width 0.35s ease;
}

.school-dashboard-identity[data-tone="warning"] .school-dashboard-identity__bar,
.school-dashboard-identity[data-tone="critical"] .school-dashboard-identity__bar {
  background: linear-gradient(90deg, #b57920, #edc56f);
}

.school-dashboard-identity[data-tone="expired"] .school-dashboard-identity__bar {
  background: linear-gradient(90deg, #9d3344, #df6d78);
}

.school-dashboard-identity[data-tone="expired"] .school-dashboard-identity__remaining {
  color: #ffb7be;
}

.school-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.school-dashboard-stat {
  position: relative;
  min-height: 135px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.school-dashboard-stat::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 72px;
  height: 72px;
  border-radius: 0 0 0 100%;
  opacity: 0.08;
  background: var(--stat-color, var(--school-blue));
}

.school-dashboard-stat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.school-dashboard-stat__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--stat-color, var(--school-blue));
  border-radius: 11px;
  background: color-mix(in srgb, var(--stat-color, var(--school-blue)) 10%, transparent);
}

.school-dashboard-stat__label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.school-dashboard-stat__value {
  display: block;
  margin-top: 12px;
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
}

.school-dashboard-stat__note {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.school-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.school-dashboard-section {
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.school-dashboard-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.school-dashboard-section__head h3 {
  margin: 0;
  font-size: 16px;
}

.school-dashboard-section__head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.school-dashboard-section__badge {
  padding: 5px 9px;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

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

.school-dashboard-action {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: start;
  min-height: 112px;
  padding: 14px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  transition: 0.16s ease;
}

.school-dashboard-action:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--school-blue) 38%, var(--border));
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.school-dashboard-action__icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: var(--action-color, var(--school-blue));
  border-radius: 12px;
  background: color-mix(in srgb, var(--action-color, var(--school-blue)) 10%, transparent);
}

.school-dashboard-action h4 {
  margin: 1px 0 5px;
  font-size: 12px;
}

.school-dashboard-action p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.75;
}

.school-dashboard-action__arrow {
  color: var(--muted);
  font-size: 17px;
  transform: rotate(180deg);
}

.school-dashboard-side {
  display: grid;
  gap: 16px;
}

.school-dashboard-scope {
  padding: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(199, 155, 75, 0.2), transparent 15rem),
    linear-gradient(145deg, #10365f, #0a2440);
}

.school-dashboard-scope__label {
  color: #9db2c5;
  font-size: 9px;
  font-weight: 900;
}

.school-dashboard-scope strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
}

.school-dashboard-scope p {
  margin: 7px 0 0;
  color: #b7c7d6;
  font-size: 9px;
  line-height: 1.75;
}

.school-dashboard-feature-list {
  display: grid;
  gap: 8px;
}

.school-dashboard-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 800;
}

.school-dashboard-feature::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--success);
  border-radius: 6px;
  background: color-mix(in srgb, var(--success) 10%, transparent);
  font-size: 10px;
}

.school-dashboard-login-list {
  display: grid;
  gap: 10px;
}

.school-dashboard-login {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: 0 7px 18px rgba(15, 35, 58, 0.05);
}

.school-dashboard-login__identity {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.school-dashboard-login__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  font-size: 14px;
  font-weight: 900;
}

.school-dashboard-login__person strong,
.school-dashboard-login__person span {
  display: block;
}

.school-dashboard-login__person strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-dashboard-login__role {
  margin-top: 3px;
  color: var(--school-blue);
  font-size: 8.5px;
  font-weight: 800;
}

.school-dashboard-login__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.school-dashboard-login__status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.school-dashboard-login__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.school-dashboard-login__meta > div {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.school-dashboard-login__meta dt,
.school-dashboard-login__meta dd {
  margin: 0;
}

.school-dashboard-login__meta dt {
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
}

.school-dashboard-login__meta dd {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .school-dashboard-login__identity {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .school-dashboard-login__status {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .school-dashboard-login__meta {
    grid-template-columns: 1fr;
  }
}

.school-dashboard-empty {
  padding: 16px;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  font-size: 10px;
  text-align: center;
}

/* Full-screen loader */
.school-loader {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(189, 139, 50, 0.12), transparent 28rem),
    rgba(7, 24, 42, 0.64);
  backdrop-filter: blur(7px) saturate(108%);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.school-loader.is-visible {
  visibility: visible;
  opacity: 1;
}

.school-loader__card {
  position: relative;
  width: min(94vw, 620px);
  overflow: hidden;
  color: #15283c;
  border: 1px solid #c8d3dd;
  border-block-start: 3px solid var(--school-gold);
  border-radius: 22px;
  background: #fdfefe;
  box-shadow:
    0 38px 90px rgba(2, 18, 33, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.94) inset;
}

.school-loader__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(18, 54, 93, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 54, 93, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, #000, transparent 76%);
}

.school-loader__masthead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 13px 18px;
  border-bottom: 1px solid #dce4eb;
  background: rgba(247, 250, 252, 0.88);
}

.school-loader__institution {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.school-loader__seal {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 6px;
  border: 1px solid #c8d4de;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(12, 43, 71, 0.09);
}

.school-loader__seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-loader__institution > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.school-loader__institution small {
  color: #8a641f;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.045em;
}

.school-loader__institution b {
  overflow: hidden;
  color: #17314a;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-loader__live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  color: #506579;
  border: 1px solid #d4dee7;
  border-radius: 999px;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
}

.school-loader__live i,
.school-loader__copy > small i {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #16835f;
  box-shadow: 0 0 0 4px rgba(22, 131, 95, 0.1);
  animation: school-loader-status 1.65s ease-in-out infinite;
}

.school-loader__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px 31px 30px;
}

.school-loader__visual {
  position: relative;
  display: grid;
  min-height: 184px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6e0e8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 46%, rgba(35, 105, 157, 0.12), transparent 6.4rem),
    linear-gradient(145deg, #f6f9fb, #edf3f7);
}

.school-loader__visual::before,
.school-loader__visual::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(27, 91, 139, 0.08);
  border-radius: 50%;
}

.school-loader__visual::after {
  width: 150px;
  height: 150px;
  border-color: rgba(189, 139, 50, 0.09);
}

.school-loader__document {
  position: relative;
  z-index: 1;
  display: block;
  width: 104px;
  height: 138px;
  overflow: hidden;
  border: 1px solid #adbdca;
  border-block-start: 3px solid #1c5f91;
  border-radius: 8px 8px 6px 6px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(17, 52, 84, 0.17);
  transform: rotate(-1.6deg);
}

[dir="rtl"] .school-loader__document { transform: rotate(1.6deg); }

.school-loader__document-mark {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #1b6399;
  border-radius: 7px;
  background: #eaf2f8;
}

.school-loader__document-mark .school-icon { width: 15px; height: 15px; }

.school-loader__document-title,
.school-loader__document-line,
.school-loader__document-signature {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: #d5dfe7;
}

.school-loader__document-title {
  inset-block-start: 18px;
  inset-inline: 51px 13px;
  height: 4px;
  background: #8fa6b9;
}

.school-loader__document-line { inset-block-start: 58px; inset-inline: 14px 27px; }
.school-loader__document-line--wide { inset-block-start: 48px; inset-inline-end: 14px; }
.school-loader__document-line--short { inset-block-start: 68px; inset-inline-end: 42px; }
.school-loader__document-signature {
  inset-block-end: 17px;
  inset-inline: 48px 14px;
  height: 1px;
  background: #aebdca;
}

.school-loader__scan {
  position: absolute;
  z-index: 2;
  inset-inline: 8px;
  inset-block-start: 38px;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bd8b32 18%, #2875aa 82%, transparent);
  box-shadow: 0 3px 12px rgba(36, 114, 185, 0.22);
  animation: school-loader-scan 2s ease-in-out infinite;
}

.school-loader__copy {
  display: grid;
  min-width: 0;
  justify-items: start;
  text-align: start;
}

.school-loader__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8a641f !important;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.school-loader__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: #bd8b32;
}

.school-loader__copy strong {
  display: block;
  margin-top: 7px;
  color: #122a42;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.45;
}

.school-loader__copy > span:last-child {
  display: block;
  max-width: 340px;
  margin-top: 7px;
  color: #66778a;
  font-size: 10.5px;
  line-height: 1.85;
}

.school-loader__progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 19px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e9ef;
}
.school-loader__progress b {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b9852b, #1d6da5 70%);
  animation: school-loader-progress 1.65s cubic-bezier(.55,.05,.45,.95) infinite;
}

.school-loader__copy > small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: #7b8b9b;
  font-size: 8px;
  font-weight: 700;
}

.school-loader__copy > small i {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px rgba(22, 131, 95, 0.09);
}

html[data-theme="dark"] .school-loader {
  background:
    radial-gradient(circle at 18% 12%, rgba(189, 139, 50, 0.1), transparent 28rem),
    rgba(1, 9, 17, 0.79);
}
html[data-theme="dark"] .school-loader__card {
  color: #edf4fa;
  border-color: #3a5268;
  background: #0b1d2d;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .school-loader__masthead { border-color: #31485c; background: rgba(14, 34, 51, 0.9); }
html[data-theme="dark"] .school-loader__seal {
  border-color: #425a70;
  background: #f8fafb;
}
html[data-theme="dark"] .school-loader__institution b { color: #edf5fb; }
html[data-theme="dark"] .school-loader__institution small { color: #e0bd6e; }
html[data-theme="dark"] .school-loader__live { color: #b6c7d5; border-color: #3a5268; background: #10283c; }
html[data-theme="dark"] .school-loader__visual {
  border-color: #344c61;
  background:
    radial-gradient(circle at 50% 46%, rgba(77, 153, 208, 0.13), transparent 6.4rem),
    linear-gradient(145deg, #112b40, #0d2234);
}
html[data-theme="dark"] .school-loader__visual::before { border-color: rgba(120, 181, 224, 0.1); }
html[data-theme="dark"] .school-loader__visual::after { border-color: rgba(224, 189, 110, 0.09); }
html[data-theme="dark"] .school-loader__document { border-color: #5b7184; background: #f9fbfc; }
html[data-theme="dark"] .school-loader__eyebrow { color: #e2c074 !important; }
html[data-theme="dark"] .school-loader__copy strong { color: #f4f8fb; }
html[data-theme="dark"] .school-loader__copy > span:last-child { color: #adbdcb; }
html[data-theme="dark"] .school-loader__progress { background: #263e53; }
html[data-theme="dark"] .school-loader__copy > small { color: #92a6b8; }

@keyframes school-loader-progress {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(82%); }
  100% { transform: translateX(265%); }
}

[dir="rtl"] .school-loader__progress b { animation-direction: reverse; }

@keyframes school-loader-scan {
  0%, 12% { transform: translateY(0); opacity: 0.32; }
  50% { opacity: 0.95; }
  88%, 100% { transform: translateY(79px); opacity: 0.28; }
}

@keyframes school-loader-status {
  50% { opacity: 0.45; box-shadow: 0 0 0 7px rgba(22, 131, 95, 0.04); }
}

@media (max-width: 560px) {
  .school-loader { padding: 14px; }
  .school-loader__card { width: min(100%, 420px); border-radius: 18px; }
  .school-loader__masthead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-items: flex-start; padding: 11px 13px; }
  .school-loader__institution { grid-template-columns: 37px minmax(0, 1fr); }
  .school-loader__seal { width: 37px; height: 37px; border-radius: 10px; }
  .school-loader__institution b { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .school-loader__live { min-height: 28px; justify-self: start; padding-inline: 8px; }
  .school-loader__body { grid-template-columns: 1fr; gap: 18px; padding: 19px 19px 22px; }
  .school-loader__visual { min-height: 128px; }
  .school-loader__document { width: 76px; height: 101px; }
  .school-loader__document-mark { inset-block-start: 10px; inset-inline-start: 10px; width: 22px; height: 22px; }
  .school-loader__document-mark .school-icon { width: 12px; height: 12px; }
  .school-loader__document-title { inset-block-start: 14px; inset-inline: 39px 10px; }
  .school-loader__document-line { inset-block-start: 45px; inset-inline: 10px 21px; }
  .school-loader__document-line--wide { inset-block-start: 37px; inset-inline-end: 10px; }
  .school-loader__document-line--short { inset-block-start: 53px; inset-inline-end: 32px; }
  .school-loader__document-signature { inset-block-end: 12px; inset-inline: 36px 10px; }
  .school-loader__copy strong { font-size: 19px; }
  .school-loader__copy > span:last-child { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .school-loader__progress b { width: 62%; animation: none; }
  .school-loader__scan { transform: translateY(38px); opacity: 0.58; animation: none; }
  .school-loader__live i,
  .school-loader__copy > small i { animation: none; }
}

@keyframes school-spin {
  to { transform: rotate(360deg); }
}

/* Standalone operational pages */
body.school-standalone {
  padding: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(36, 114, 185, 0.13), transparent 32rem),
    linear-gradient(180deg, var(--bg-grad-from), var(--bg-grad-to)) !important;
}

body.school-standalone::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 36, 66, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 36, 66, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.school-standalone > :is(.wrap, .shell, .container) {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
}

.school-standalone .header,
.school-standalone .topbar {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 19px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(199, 155, 75, 0.22), transparent 18rem),
    linear-gradient(135deg, #0d3157, #081e37) !important;
  box-shadow: 0 18px 45px rgba(7, 24, 43, 0.18) !important;
}

.school-standalone .header :is(.title, .sub),
.school-standalone .topbar :is(.topbar__title, .topbar__subtitle) {
  color: inherit !important;
}

.school-standalone .header .sub,
.school-standalone .topbar .topbar__subtitle {
  color: #b5c7d8 !important;
}

.school-standalone .card {
  border-color: var(--border) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.school-standalone :is(.hcap, .section-title, .card__head) {
  border-color: var(--border) !important;
}

.school-standalone :is(.btn, button, .theme-toggle, .header-chip) {
  font-family: inherit;
}

.school-standalone .theme-toggle,
.school-standalone .header-chip {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.school-standalone .theme-fab,
.school-standalone .header .theme-toggle {
  display: none !important;
}

.school-commandbar {
  position: relative;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 1480px);
  min-height: 72px;
  margin: 0 auto 15px;
  padding: 10px 12px 10px 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 19px;
  background:
    radial-gradient(circle at 12% -100%, rgba(199, 155, 75, 0.3), transparent 18rem),
    linear-gradient(135deg, #0d3157, #081d35);
  box-shadow: 0 18px 45px rgba(7, 24, 43, 0.2);
}

.school-commandbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}

.school-commandbar__brand,
.school-commandbar__actions,
.school-commandbar__user,
.school-commandbar__subscription,
.school-commandbar__home {
  display: flex;
  align-items: center;
}

.school-commandbar__brand {
  min-width: 0;
  gap: 11px;
}

.school-commandbar__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
}

.school-commandbar__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-commandbar__titles {
  min-width: 0;
}

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

.school-commandbar__titles span {
  color: #aebfd0;
  font-size: 10px;
  font-weight: 700;
}

.school-commandbar__titles strong {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
}

.school-commandbar__actions {
  gap: 8px;
  flex: 0 0 auto;
}

.school-commandbar__subscription {
  gap: 8px;
  min-height: 45px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.school-commandbar__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #55d5a7;
  box-shadow: 0 0 0 4px rgba(85, 213, 167, 0.12);
}

.school-commandbar__subscription[data-tone="warning"] .school-commandbar__dot,
.school-commandbar__subscription[data-tone="critical"] .school-commandbar__dot {
  background: #e7b95f;
  box-shadow: 0 0 0 4px rgba(231, 185, 95, 0.13);
}

.school-commandbar__subscription[data-tone="expired"] .school-commandbar__dot {
  background: #ef7a85;
  box-shadow: 0 0 0 4px rgba(239, 122, 133, 0.12);
}

.school-commandbar__subscription small,
.school-commandbar__subscription strong,
.school-commandbar__user small,
.school-commandbar__user strong {
  display: block;
}

.school-commandbar__subscription small,
.school-commandbar__user small {
  color: #9eb2c5;
  font-size: 8px;
  font-weight: 700;
}

.school-commandbar__subscription strong,
.school-commandbar__user strong {
  margin-top: 1px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.school-commandbar__user {
  gap: 8px;
  padding-inline: 5px;
}

.school-commandbar__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.school-commandbar__control,
.school-commandbar__home {
  min-height: 40px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
}

.school-commandbar__control {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  cursor: pointer;
}

.school-commandbar__control svg,
.school-commandbar__home svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.school-commandbar__home {
  gap: 7px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 900;
}

.school-commandbar__control:hover,
.school-commandbar__home:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.school-standalone .grid2--single,
.school-standalone .grid-top--single {
  grid-template-columns: 1fr !important;
}

/* WhatsApp operations */
.wa-monitor,
.wa-links-page {
  display: grid;
  gap: 16px;
}

.wa-monitor__hero,
.wa-links-page__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% -20%, rgba(83, 205, 154, 0.2), transparent 18rem),
    radial-gradient(circle at 95% 0%, rgba(199, 155, 75, 0.17), transparent 20rem),
    linear-gradient(135deg, #0d3157, #081e37);
  box-shadow: var(--shadow-md);
}

.wa-monitor__hero h2,
.wa-links-page__hero h2 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(22px, 3vw, 31px);
}

.wa-monitor__hero p,
.wa-links-page__hero p {
  max-width: 850px;
  margin: 0;
  color: #b8c9d9;
  font-size: 12px;
  line-height: 1.9;
}

.wa-monitor__eyebrow,
.wa-links-page__eyebrow {
  color: #e9d3a7;
  font-size: 9px;
  font-weight: 900;
}

.wa-monitor__hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.wa-monitor__hero .btn-muted {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.wa-monitor__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(85, 213, 167, 0.2);
  border-radius: 11px;
  background: rgba(85, 213, 167, 0.08);
  font-size: 10px;
  font-weight: 900;
}

.wa-monitor__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55d5a7;
  box-shadow: 0 0 0 4px rgba(85, 213, 167, 0.12);
  animation: wa-live-pulse 1.8s ease-in-out infinite;
}

@keyframes wa-live-pulse {
  50% { opacity: 0.45; }
}

.wa-monitor__summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.wa-monitor__summary--management {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wa-monitor__management-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(200px, 280px);
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.wa-monitor__management-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.wa-monitor__management-filters :is(input, select) {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
}

@media (max-width: 980px) {
  .wa-monitor__summary--management {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .wa-monitor__management-filters {
    grid-template-columns: 1fr;
  }
}

.wa-monitor__metric {
  position: relative;
  min-height: 100px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.wa-monitor__metric::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--brand);
}

.wa-monitor__metric--pending::after { background: var(--school-blue); }
.wa-monitor__metric--success::after { background: var(--success); }
.wa-monitor__metric--warning::after { background: var(--warning); }
.wa-monitor__metric--danger::after { background: var(--danger); }

.wa-monitor__metric span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.wa-monitor__metric strong {
  display: block;
  margin-top: 14px;
  font-size: 28px;
  line-height: 1;
}

.wa-monitor__panel,
.wa-links-page__panel {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.wa-monitor__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.wa-monitor__panel-head h3 {
  margin: 0;
  font-size: 17px;
}

.wa-monitor__panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.wa-monitor__table-wrap,
.wa-links-page__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.wa-monitor__table,
.wa-links-page__table-wrap table {
  min-width: 920px;
}

.wa-monitor__source,
.wa-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.wa-status::before {
  content: "•";
  margin-inline-end: 5px;
  font-size: 11px;
  line-height: 1;
}

.wa-status[data-status="queued"]::before { content: "◷"; }
.wa-status[data-status="sending"]::before { content: "↗"; }
.wa-status[data-status="sent"]::before { content: "✓"; }
.wa-status[data-status="delivered"]::before { content: "✓✓"; letter-spacing: -3px; margin-inline-end: 8px; }
.wa-status[data-status="read"]::before { content: "◉"; }
.wa-status[data-status="failed"]::before,
.wa-status[data-status="configuration_error"]::before { content: "!"; }
.wa-status[data-status="undelivered"]::before { content: "×"; }
.wa-status[data-status="canceled"]::before { content: "—"; }
.wa-status[data-status="no_whatsapp_number"]::before { content: "∅"; }

.wa-status--pending {
  color: #1c65a0;
  border-color: color-mix(in srgb, var(--school-blue) 28%, var(--border));
  background: color-mix(in srgb, var(--school-blue) 9%, var(--surface));
}

.wa-status--success {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.wa-status--info {
  color: var(--school-blue);
  border-color: color-mix(in srgb, var(--school-blue) 28%, var(--border));
  background: color-mix(in srgb, var(--school-blue) 8%, var(--surface));
}

.wa-status--warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}

.wa-status--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}

.wa-status--neutral {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-soft);
}

.wa-monitor__status-note {
  display: block;
  max-width: 390px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.wa-monitor__failure {
  display: block;
  max-width: 390px;
  margin-top: 5px;
  color: var(--danger);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.7;
}

.wa-monitor__failure[hidden],
.wa-monitor__error[hidden] {
  display: none !important;
}

.wa-monitor__technical {
  min-width: 190px;
}

.wa-monitor__technical code,
.wa-monitor__technical small {
  display: block;
  max-width: 240px;
  overflow-wrap: anywhere;
}

.wa-monitor__technical code {
  color: var(--text);
  font-size: 9px;
}

.wa-monitor__technical small {
  margin-top: 5px;
  color: var(--danger);
  font-size: 9px;
}

.wa-monitor__live[data-state="hidden"] i {
  background: #e2b45d;
  box-shadow: 0 0 0 4px rgba(226, 180, 93, 0.13);
  animation: none;
}

.wa-monitor__live[data-state="error"] {
  color: #ffd8dc;
  border-color: rgba(255, 112, 126, 0.28);
  background: rgba(255, 112, 126, 0.1);
}

.wa-monitor__live[data-state="error"] i {
  background: #ff707e;
  box-shadow: 0 0 0 4px rgba(255, 112, 126, 0.13);
  animation: none;
}

.wa-monitor__empty {
  display: grid;
  place-items: center;
  min-height: 145px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.wa-monitor__empty strong,
.wa-monitor__empty span {
  display: block;
}

.wa-monitor__empty strong {
  color: var(--text);
  font-size: 14px;
}

.wa-monitor__empty span {
  margin-top: 5px;
  font-size: 10px;
}

.wa-monitor__error {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  font-size: 11px;
  font-weight: 800;
}

.wa-links-page__hero {
  justify-content: flex-start;
}

.wa-links-page__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 1px solid rgba(85, 213, 167, 0.25);
  border-radius: 18px;
  background: rgba(85, 213, 167, 0.12);
  color: #b8f3d9;
  font-size: 14px;
  font-weight: 900;
}

.wa-links-page__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #26936d, #116c4c);
  font-size: 10px;
  font-weight: 900;
}

.wa-links-page__panel .actions {
  margin-top: 15px;
}

/* Login and status screens */
.school-auth-page,
.school-status-page {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 82% 6%, rgba(199, 155, 75, 0.16), transparent 24rem),
    radial-gradient(circle at 5% 94%, rgba(36, 114, 185, 0.2), transparent 30rem),
    #071b31;
}

.school-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
  width: min(100%, 1180px);
  min-height: 650px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.36);
}

.school-auth-identity {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 20% 12%, rgba(199, 155, 75, 0.24), transparent 16rem),
    linear-gradient(145deg, #0d3157, #071a2f 72%);
}

.school-auth-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 35px 35px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.school-auth-brand,
.school-auth-identity__content,
.school-auth-security {
  position: relative;
  z-index: 1;
}

.school-auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.school-auth-brand__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.school-auth-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-auth-brand strong {
  display: block;
  font-size: 15px;
}

.school-auth-brand span {
  display: block;
  margin-top: 3px;
  color: #aebfd0;
  font-size: 11px;
}

.school-auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  color: #ebd39f;
  font-size: 11px;
  font-weight: 900;
}

.school-auth-identity h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.22;
}

.school-auth-identity p {
  max-width: 630px;
  margin: 17px 0 0;
  color: #c3d1de;
  font-size: 14px;
  line-height: 2;
}

.school-auth-security {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.school-auth-security__item {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.school-auth-security__item strong,
.school-auth-security__item span {
  display: block;
}

.school-auth-security__item strong {
  font-size: 10px;
}

.school-auth-security__item span {
  margin-top: 3px;
  color: #91a8bc;
  font-size: 8px;
}

.school-auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45px;
  color: #10243a;
  background: #fff;
}

.school-auth-panel__head {
  margin-bottom: 25px;
}

.school-auth-panel__head span {
  color: #718195;
  font-size: 11px;
  font-weight: 800;
}

.school-auth-panel__head h2 {
  margin: 6px 0 0;
  font-size: 28px;
}

.school-auth-panel__head p {
  margin: 8px 0 0;
  color: #718195;
  font-size: 12px;
  line-height: 1.8;
}

.school-auth-form {
  display: grid;
  gap: 16px;
}

.school-auth-field {
  display: grid;
  gap: 7px;
}

.school-auth-field label {
  color: #263f56;
  font-size: 11px;
  font-weight: 900;
}

.school-auth-control {
  position: relative;
}

.school-auth-control .school-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 13px;
  width: 18px;
  height: 18px;
  color: #7a8b9b;
  transform: translateY(-50%);
}

.school-auth-control input {
  min-height: 48px !important;
  padding-inline-start: 42px !important;
  color: #10243a !important;
  border-color: #ccd7e1 !important;
  background: #fff !important;
}

.school-auth-control input:focus {
  border-color: #2472b9 !important;
  box-shadow: 0 0 0 3px rgba(36, 114, 185, 0.12) !important;
}

.school-auth-hint {
  color: #718195;
  font-size: 9px;
  line-height: 1.65;
}

.school-auth-submit {
  width: 100%;
  min-height: 49px;
  margin-top: 3px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #1767a8, #0b4d80);
  box-shadow: 0 12px 26px rgba(23, 103, 168, 0.24);
  font-weight: 900;
  cursor: pointer;
}

.school-auth-submit:hover {
  filter: brightness(1.04);
}

.school-auth-submit.is-loading {
  opacity: 0.68;
  pointer-events: none;
}

.school-auth-footnote {
  margin-top: 19px;
  padding-top: 15px;
  color: #7c8b99;
  border-top: 1px solid #e4e9ef;
  font-size: 9px;
  line-height: 1.75;
}

.school-auth-alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  color: #9b2938;
  border: 1px solid #efc7cc;
  border-radius: 10px;
  background: #fff4f5;
  font-size: 11px;
  font-weight: 800;
}

.school-status-card {
  width: min(100%, 580px);
  margin: auto;
  padding: 32px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.school-status-card__mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 17px;
  color: #fff;
  border-radius: 22px;
  background: linear-gradient(145deg, #174a7b, #0b2442);
  font-size: 21px;
  font-weight: 900;
}

.school-status-card h1 {
  margin: 0;
  font-size: 28px;
}

.school-status-card p {
  margin: 11px 0 0;
  color: var(--muted);
  line-height: 1.9;
}

.school-status-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 21px 0;
}

.school-status-card__meta div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.school-status-card__meta span,
.school-status-card__meta strong {
  display: block;
}

.school-status-card__meta span {
  color: var(--muted);
  font-size: 9px;
}

.school-status-card__meta strong {
  margin-top: 4px;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .school-sidebar {
    transform: translateX(106%);
    transition: transform 0.23s ease;
  }

  html[dir="ltr"] .school-sidebar {
    transform: translateX(-106%);
  }

  body.school-sidebar-open .school-sidebar {
    transform: translateX(0);
  }

  body.school-sidebar-open .school-sidebar-backdrop {
    display: block;
  }

  .school-main {
    margin-inline-start: 0;
  }

  .school-sidebar-toggle {
    display: grid;
  }

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

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

@media (max-width: 820px) {
  .school-auth-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .school-auth-identity {
    min-height: 390px;
    padding: 30px;
  }

  .school-auth-panel {
    padding: 34px 30px;
  }

  .school-auth-security {
    grid-template-columns: 1fr;
  }

  .school-auth-security__item {
    display: none;
  }

  .school-auth-security__item:first-child {
    display: block;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .school-dashboard-hero,
  .school-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .school-dashboard-hero__aside {
    justify-items: start;
  }

  .school-dashboard-identity {
    width: 100%;
    max-width: none;
  }

  .school-commandbar {
    align-items: flex-start;
  }

  .school-commandbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .school-commandbar__user {
    display: none;
  }

  .wa-monitor__hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .school-page-intro {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  :root {
    --topbar-height: 70px;
  }

  .school-topbar {
    gap: 8px;
    min-height: var(--topbar-height);
    padding: 10px 12px;
  }

  .school-topbar__start,
  .school-topbar__end {
    min-width: 0;
    gap: 8px;
  }

  .school-topbar__start {
    flex: 1 1 auto;
  }

  .school-topbar__end {
    flex: 0 0 auto;
  }

  .school-sidebar-toggle,
  .school-theme-toggle,
  .school-notifications__trigger {
    width: 36px;
    height: 36px;
  }

  .school-topbar__eyebrow,
  .school-topbar__date,
  .school-user-chip__text {
    display: none;
  }

  .school-subscription-chip {
    min-width: 0;
    gap: 7px;
    padding: 7px 9px;
  }

  .school-subscription-chip__text span {
    display: none;
  }

  .school-user-chip {
    display: none;
  }

  .school-content {
    padding: 18px 13px 14px;
  }

  .school-footer {
    display: grid;
    text-align: center;
  }

  .fieldset .row {
    grid-template-columns: 1fr;
  }

  .top-actions,
  .actions,
  .inline-form,
  .search-bar {
    align-items: stretch;
  }

  .search-bar input {
    max-width: none;
  }

  .school-content table {
    min-width: 680px;
  }

  .school-content :is(.card, .fieldset):has(table) {
    overflow-x: auto;
  }

  .school-dashboard-stats,
  .school-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.school-standalone {
    padding: 10px;
  }

  .school-status-card__meta {
    grid-template-columns: 1fr;
  }

  .school-commandbar {
    min-height: 64px;
    padding: 8px;
  }

  .school-commandbar__subscription {
    min-height: 40px;
    gap: 6px;
    padding: 6px 8px;
  }

  .school-commandbar__subscription small {
    display: none;
  }

  .school-commandbar__subscription strong {
    max-width: 88px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .school-commandbar__home span {
    display: none;
  }

  .school-commandbar__home {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .wa-monitor__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-monitor__panel,
  .wa-links-page__panel {
    padding: 13px;
  }

  .record-summary__grid {
    grid-template-columns: 1fr;
  }

  .document-preview__head,
  .school-table-card__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .school-inline-status {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .school-inline-status__code {
    margin-inline: auto;
  }

  .school-inline-status .actions {
    justify-content: center;
  }
}

/* Phase 3: academic subjects and protected student photos */
.subject-admin-grid.ops-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.65fr);
}

.subject-admin-filters .ops-actions {
  margin: 0;
}

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

.subject-admin-item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.subject-admin-item.is-inactive {
  opacity: 0.78;
}

.subject-admin-item__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.subject-admin-item__head h3 {
  margin: 9px 0 3px;
  color: var(--text);
  font-size: 16px;
}

.subject-admin-item__head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.subject-admin-item__badges,
.subject-admin-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.subject-admin-levels {
  margin-top: 13px;
}

.subject-admin-levels > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 9px;
  font-weight: 800;
}

.subject-admin-levels small {
  color: var(--muted);
}

.subject-admin-levels .is-warning {
  color: var(--warning);
}

.subject-admin-edit {
  margin-top: 13px;
  border-top: 1px solid var(--border);
}

.subject-admin-edit summary {
  padding: 13px 0 2px;
  color: var(--brand);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.subject-admin-edit form {
  margin-top: 13px;
}

.subject-admin-level-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.subject-admin-level-picker legend {
  padding-inline: 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.subject-admin-level-picker label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}

.subject-admin-level-picker label:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

.subject-admin-level-picker input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.subject-admin-level-picker strong,
.subject-admin-level-picker small {
  display: block;
}

.subject-admin-level-picker strong {
  color: var(--text);
  font-size: 10px;
}

.subject-admin-level-picker small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.subject-import-table {
  min-width: 1080px !important;
}

.student-import-file-summary--photos .student-import-file-summary__icon {
  background: linear-gradient(145deg, var(--school-blue), var(--school-navy-2));
}

.student-import-photo-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-import-photo-zip {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.student-import-photo-zip__status {
  color: var(--brand) !important;
  font-size: 9px !important;
}

.student-profile__avatar--photo {
  overflow: hidden;
  padding: 0;
}

.student-profile__avatar--photo img,
.student-profile__photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.student-profile__operations article {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.student-profile__operations span,
.student-profile__operations small,
.student-profile__operations strong {
  display: block;
}

.student-profile__operations span,
.student-profile__operations small {
  color: var(--muted);
  font-size: 9px;
}

.student-profile__operations strong {
  margin: 5px 0 3px;
  color: var(--text);
  font-size: 24px;
}

.student-profile__side {
  display: grid;
  gap: 14px;
}

.student-profile__photo-preview {
  width: min(100%, 240px);
  aspect-ratio: 4 / 5;
  margin: 16px auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-soft);
}

.student-profile__photo-form {
  display: grid;
  gap: 10px;
}

.student-profile__photo-form .btn,
.student-profile__photo-remove {
  width: 100%;
  justify-content: center;
}

.student-profile__photo-remove {
  margin-top: 8px;
}

.student-profile__privacy-note {
  grid-column: 1 / -1;
}

.student-profile__privacy-note dd {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 1080px) {
  .subject-admin-grid.ops-grid {
    grid-template-columns: 1fr;
  }

  .student-profile__operations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .subject-admin-item__head {
    align-items: stretch;
    flex-direction: column;
  }

  .subject-admin-item__head form,
  .subject-admin-item__head .btn {
    width: 100%;
  }

  .student-import-photo-metrics,
  .student-profile__operations {
    grid-template-columns: 1fr;
  }
}

/* Phase 1: institutional pledge workflow and official document */
.pledge-wizard-page,
.pledge-issue {
  display: grid;
  gap: 15px;
}

.pledge-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pledge-stepper__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  color: var(--muted);
  border-inline-end: 1px solid var(--border);
}

.pledge-stepper__item:last-child {
  border-inline-end: 0;
}

.pledge-stepper__item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 900;
}

.pledge-stepper__item strong,
.pledge-stepper__item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pledge-stepper__item strong {
  color: var(--text);
  font-size: 10px;
}

.pledge-stepper__item small {
  margin-top: 3px;
  font-size: 8px;
}

.pledge-stepper__item.is-current {
  background: color-mix(in srgb, var(--school-blue) 7%, var(--surface));
}

.pledge-stepper__item.is-current > span {
  color: #fff;
  border-color: var(--school-blue);
  background: var(--school-blue);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--school-blue) 24%, transparent);
}

.pledge-stepper__item.is-complete > span {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.pledge-wizard-card,
.pledge-workflow__panel,
.pledge-preview-shell {
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pledge-wizard-card {
  padding: 18px;
}

.pledge-wizard-card--scope {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  border-inline-start: 4px solid var(--school-blue);
}

.pledge-wizard-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--school-blue);
  border-radius: 14px;
  background: color-mix(in srgb, var(--school-blue) 10%, var(--surface));
}

.pledge-wizard-card--scope span,
.pledge-wizard-card--scope strong,
.pledge-wizard-card--scope p {
  display: block;
}

.pledge-wizard-card--scope span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.pledge-wizard-card--scope strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
}

.pledge-wizard-card--scope p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.pledge-wizard-card__head,
.pledge-workflow__head,
.pledge-preview-shell__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.pledge-wizard-card__eyebrow,
.pledge-workflow__head > div > span,
.pledge-preview-shell__head > div > span {
  color: var(--school-blue);
  font-size: 8px;
  font-weight: 900;
}

.pledge-wizard-card__head h3,
.pledge-workflow__head h3 {
  margin: 4px 0 4px;
  color: var(--text);
  font-size: 17px;
}

.pledge-wizard-card__head p,
.pledge-workflow__head p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.75;
}

.pledge-wizard-card__count,
.pledge-workflow__count,
.pledge-confirmation-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--school-blue);
  border: 1px solid color-mix(in srgb, var(--school-blue) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--school-blue) 7%, var(--surface));
  font-size: 8px;
  font-weight: 900;
}

.pledge-wizard-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.pledge-wizard-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  flex: 1 1 360px;
  padding-inline: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
}

.pledge-wizard-search__field .school-icon {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.pledge-wizard-search__field input {
  width: 100%;
  min-height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.pledge-student-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 15px;
}

.pledge-student-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pledge-student-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--school-blue) 34%, var(--border));
  box-shadow: var(--shadow-sm);
}

.pledge-student-card__head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.pledge-student-card__avatar,
.pledge-student-summary__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--school-blue);
  border-radius: 12px;
  background: color-mix(in srgb, var(--school-blue) 10%, var(--surface));
  font-weight: 900;
}

.pledge-student-card__head strong,
.pledge-student-card__head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pledge-student-card__head strong {
  color: var(--text);
  font-size: 11px;
}

.pledge-student-card__head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.pledge-student-card dl,
.pledge-document dl {
  margin: 0;
}

.pledge-student-card dl {
  display: grid;
  gap: 6px;
}

.pledge-student-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  background: var(--surface);
}

.pledge-student-card dt,
.pledge-student-card dd {
  margin: 0;
  font-size: 8px;
}

.pledge-student-card dt {
  color: var(--muted);
}

.pledge-student-card dd {
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pledge-student-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--school-blue), #174f91);
  font-size: 9px;
  font-weight: 900;
  text-decoration: none;
}

html[dir="ltr"] .pledge-student-card__action span {
  transform: scaleX(-1);
}

.pledge-wizard-empty {
  grid-column: 1 / -1;
}

.pledge-wizard-empty strong,
.pledge-wizard-empty p {
  display: block;
}

.pledge-wizard-empty p {
  margin: 6px 0 0;
}

.pledge-wizard-actions,
.pledge-workflow__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.pledge-wizard-actions > span {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 8px;
}

.pledge-issue__workspace {
  display: grid;
  gap: 15px;
}

.pledge-issue.is-confirmation .pledge-issue__workspace {
  grid-template-columns: minmax(330px, 0.72fr) minmax(620px, 1.28fr);
  align-items: start;
}

.pledge-workflow__panel {
  padding: 18px;
}

.pledge-student-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.pledge-student-summary > div span,
.pledge-student-summary > div strong,
.pledge-student-summary > div small {
  display: block;
}

.pledge-student-summary > div span,
.pledge-student-summary > div small {
  color: var(--muted);
  font-size: 8px;
}

.pledge-student-summary > div strong {
  margin: 3px 0;
  color: var(--text);
  font-size: 11px;
}

.pledge-student-summary > a {
  color: var(--school-blue);
  font-size: 9px;
  font-weight: 900;
}

.pledge-violations {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.pledge-violation-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.pledge-violation-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--text);
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.pledge-violation-group__head small {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  color: var(--school-blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--school-blue) 10%, var(--surface));
}

.pledge-violation-group__chips {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 12px;
}

.pledge-violation-group.is-open .pledge-violation-group__chips {
  display: flex;
}

.pledge-violation-chip {
  padding: 7px 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 8.5px;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;
}

.pledge-violation-chip.is-selected {
  color: #fff;
  border-color: var(--school-blue);
  background: var(--school-blue);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--school-blue) 18%, transparent);
}

.pledge-custom-violation {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(140px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 13px;
  background: var(--surface-soft);
}

.pledge-custom-violation label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.pledge-custom-violation :is(input, select) {
  width: 100%;
  min-height: 39px;
}

.pledge-guardian-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 15px;
}

.pledge-guardian-grid > div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.pledge-guardian-grid span,
.pledge-guardian-grid strong {
  display: block;
}

.pledge-guardian-grid span {
  color: var(--muted);
  font-size: 8px;
}

.pledge-guardian-grid strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 11px;
}

.pledge-signature-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.pledge-signature-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.pledge-signature-card__head strong,
.pledge-signature-card__head span {
  display: block;
}

.pledge-signature-card__head strong {
  color: var(--text);
  font-size: 11px;
}

.pledge-signature-card__head > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.pledge-signature-card__head > span {
  padding: 5px 7px;
  color: var(--warning);
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  font-size: 8px;
  font-weight: 900;
}

.pledge-signature-card__head > span.is-ready {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.pledge-signature-canvas {
  display: block;
  width: 100%;
  height: 190px;
  border: 1px dashed #9bacbf;
  border-radius: 11px;
  background: #fff;
  touch-action: none;
}

.pledge-signature-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.pledge-whatsapp-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.pledge-whatsapp-option input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.pledge-whatsapp-option strong,
.pledge-whatsapp-option small {
  display: block;
}

.pledge-whatsapp-option strong {
  color: var(--text);
  font-size: 10px;
}

.pledge-whatsapp-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.65;
}

.pledge-workflow__actions .btn:last-child {
  margin-inline-start: auto;
}

.pledge-confirmation-badge {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 24%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.pledge-confirmation-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.pledge-confirmation-list > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}

.pledge-confirmation-list > div > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--success);
  border-radius: 9px;
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  font-weight: 900;
}

.pledge-confirmation-list p {
  margin: 0;
}

.pledge-confirmation-list strong,
.pledge-confirmation-list small {
  display: block;
}

.pledge-confirmation-list strong {
  color: var(--text);
  font-size: 10px;
}

.pledge-confirmation-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.pledge-final-notice {
  margin-top: 12px;
  padding: 12px;
  color: var(--text);
  border-inline-start: 4px solid var(--school-gold);
  border-radius: 11px;
  background: color-mix(in srgb, var(--school-gold) 8%, var(--surface-soft));
}

.pledge-final-notice strong {
  font-size: 10px;
}

.pledge-final-notice p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.7;
}

.pledge-preview-shell {
  overflow: hidden;
}

.pledge-preview-shell__head {
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.pledge-preview-shell__head > div > strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 11px;
}

.pledge-document {
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 11mm 12mm 10mm;
  overflow: hidden;
  color: #182230;
  background: #fff;
  font-family: "Tajawal", Inter, Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pledge-document,
.pledge-document * {
  box-sizing: border-box;
}

.pledge-document__header {
  display: grid;
  grid-template-columns: 25mm minmax(0, 1fr) 25mm;
  gap: 5mm;
  align-items: center;
  padding-bottom: 4mm;
  border-bottom: 0.7mm solid #173f70;
}

.pledge-document__logo,
.pledge-document__school-logo {
  display: grid;
  place-items: center;
  width: 25mm;
  height: 22mm;
}

.pledge-document__logo img,
.pledge-document__school-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pledge-document__identity {
  text-align: center;
}

.pledge-document__identity span {
  color: #46566b;
  font-size: 8pt;
  font-weight: 700;
}

.pledge-document__identity h1 {
  margin: 1.5mm 0 1mm;
  color: #123a68;
  font-size: 17pt;
  line-height: 1.2;
}

.pledge-document__identity p {
  margin: 0;
  color: #46566b;
  font-size: 8pt;
  font-weight: 700;
}

.pledge-document__reference {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 1.2fr;
  margin-top: 4mm;
  border: 0.3mm solid #ccd6e2;
  border-radius: 2.5mm;
  background: #f7f9fc;
}

.pledge-document__reference > div {
  min-width: 0;
  padding: 2.5mm 3mm;
  border-inline-end: 0.3mm solid #d8e0ea;
}

.pledge-document__reference > div:last-child {
  border-inline-end: 0;
}

.pledge-document__reference span,
.pledge-document__reference strong {
  display: block;
}

.pledge-document__reference span {
  color: #68758a;
  font-size: 6.8pt;
  font-weight: 700;
}

.pledge-document__reference strong {
  overflow-wrap: anywhere;
  margin-top: 1mm;
  color: #182230;
  font-size: 8pt;
}

.pledge-document__section {
  margin-top: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pledge-document__section > h2 {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin: 0 0 2mm;
  color: #173f70;
  font-size: 9pt;
}

.pledge-document__section > h2 > span {
  display: grid;
  place-items: center;
  width: 7mm;
  height: 7mm;
  color: #fff;
  border-radius: 2mm;
  background: #173f70;
  font-size: 6.5pt;
}

.pledge-document__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0.3mm solid #d5dee9;
  border-radius: 2mm;
  overflow: hidden;
}

.pledge-document__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pledge-document__grid > div {
  min-width: 0;
  padding: 2.3mm 3mm;
  border-inline-end: 0.3mm solid #e0e6ee;
  border-bottom: 0.3mm solid #e0e6ee;
}

.pledge-document__grid > div:nth-child(even),
.pledge-document__grid--three > div:nth-child(3n) {
  border-inline-end: 0;
}

.pledge-document__grid > div:nth-last-child(-n + 2),
.pledge-document__grid--three > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.pledge-document__grid dt,
.pledge-document__grid dd {
  margin: 0;
}

.pledge-document__grid dt {
  color: #69778c;
  font-size: 6.8pt;
  font-weight: 700;
}

.pledge-document__grid dd {
  overflow-wrap: anywhere;
  margin-top: 1mm;
  color: #182230;
  font-size: 8.2pt;
  font-weight: 800;
}

.pledge-document__violations {
  padding: 2.5mm 3mm;
  border: 0.3mm solid #d5dee9;
  border-inline-start: 1.2mm solid #c6922d;
  border-radius: 2mm;
  background: #fffdf8;
}

.pledge-document__violations > div + div {
  margin-top: 2mm;
}

.pledge-document__violations h3 {
  margin: 0 0 1mm;
  color: #6b4c12;
  font-size: 7.5pt;
}

.pledge-document__violations ol {
  margin: 0;
  padding-inline-start: 5mm;
  font-size: 7.5pt;
  line-height: 1.6;
}

.pledge-document__empty {
  margin: 0;
  color: #68758a;
  font-size: 8pt;
}

.pledge-document__terms {
  padding: 3mm;
  color: #29384b;
  border: 0.3mm solid #d5dee9;
  border-radius: 2mm;
  background: #f9fbfd;
  font-size: 8pt;
  line-height: 1.85;
  text-align: justify;
}

.pledge-document__ack {
  margin: 2mm 0 0;
  padding: 2mm 3mm;
  color: #173f70;
  border-inline-start: 1mm solid #173f70;
  background: #eef4fb;
  font-size: 7.3pt;
  font-weight: 700;
}

.pledge-document__signatures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5mm;
  margin-top: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pledge-document__signatures > div {
  display: grid;
  grid-template-rows: auto 21mm auto;
  min-width: 0;
  padding: 2.5mm;
  border: 0.3mm solid #cad5e2;
  border-radius: 2mm;
  text-align: center;
}

.pledge-document__signatures strong {
  color: #173f70;
  font-size: 7.2pt;
}

.pledge-document__signatures small {
  overflow-wrap: anywhere;
  color: #5c6c80;
  font-size: 6.5pt;
}

.pledge-document__signature-image,
.pledge-document__admin-sign,
.pledge-document__stamp {
  display: grid;
  place-items: center;
  min-width: 0;
  margin-block: 1.5mm;
  border-bottom: 0.3mm dashed #aebccc;
}

.pledge-document__signature-image img,
.pledge-document__stamp img {
  max-width: 100%;
  max-height: 19mm;
  object-fit: contain;
}

.pledge-document__signature-image em,
.pledge-document__admin-sign {
  color: #7b8797;
  font-size: 6.5pt;
  font-style: normal;
}

.pledge-document__admin-sign {
  color: #24364a;
  font-weight: 800;
}

.pledge-document__footer {
  display: flex;
  justify-content: space-between;
  gap: 5mm;
  margin-top: 4mm;
  padding-top: 2mm;
  color: #718096;
  border-top: 0.3mm solid #d7e0ea;
  font-size: 6.2pt;
}

@media (max-width: 1220px) {
  .pledge-issue.is-confirmation .pledge-issue__workspace {
    grid-template-columns: 1fr;
  }

  .pledge-preview-shell {
    overflow-x: auto;
  }
}

@media (max-width: 920px) {
  .pledge-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pledge-stepper__item:nth-child(2) {
    border-inline-end: 0;
  }

  .pledge-stepper__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .pledge-student-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .pledge-stepper {
    grid-template-columns: 1fr;
  }

  .pledge-stepper__item,
  .pledge-stepper__item:nth-child(2) {
    border-inline-end: 0;
    border-bottom: 1px solid var(--border);
  }

  .pledge-stepper__item:last-child {
    border-bottom: 0;
  }

  .pledge-wizard-card__head,
  .pledge-workflow__head,
  .pledge-preview-shell__head {
    display: grid;
  }

  .pledge-wizard-search,
  .pledge-wizard-actions,
  .pledge-workflow__actions,
  .pledge-signature-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pledge-wizard-search__field {
    flex-basis: auto;
  }

  .pledge-student-grid,
  .pledge-guardian-grid,
  .pledge-custom-violation {
    grid-template-columns: 1fr;
  }

  .pledge-wizard-actions > span,
  .pledge-workflow__actions .btn:last-child {
    margin-inline-start: 0;
  }

  .pledge-workflow__actions > *,
  .pledge-wizard-search > *,
  .pledge-wizard-actions > * {
    width: 100%;
  }
}

@media print {
  html,
  body {
    width: auto !important;
  }

  .school-skip-link {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }

  .pledge-issue > :not(.pledge-issue__workspace),
  .pledge-workflow,
  .pledge-preview-shell__head {
    display: none !important;
  }

  .pledge-issue,
  .pledge-issue__workspace,
  .pledge-preview-shell {
    display: block !important;
    width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .pledge-preview-shell[hidden] {
    display: block !important;
  }

  .pledge-document {
    display: block !important;
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}

.pledge-success-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  text-align: start;
}

.pledge-success-meta > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}

.pledge-success-meta dt,
.pledge-success-meta dd {
  margin: 0;
}

.pledge-success-meta dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.pledge-success-meta dd {
  overflow-wrap: anywhere;
  margin-top: 5px;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
}

.operation-success__fallback p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.operation-success__fallback li span strong,
.operation-success__fallback li span small {
  display: block;
}

.operation-success__fallback li span small {
  margin-top: 2px;
  color: var(--muted);
}

.pledge-success-notice {
  display: grid;
  gap: 4px;
  margin-top: 15px;
  padding: 12px;
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 23%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  text-align: start;
}

.pledge-success-notice strong {
  font-size: 10px;
}

.pledge-success-notice span {
  color: var(--muted);
  font-size: 8px;
}

@media (max-width: 720px) {
  .pledge-success-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .pledge-success-meta {
    grid-template-columns: 1fr;
  }
}

/* Core bilingual controls and direction support */
html[dir="ltr"] body {
  font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

html[dir="ltr"] .school-dashboard-action__arrow,
html[dir="ltr"] .support-ticket-card__arrow {
  transform: scaleX(-1);
}

input[name*="student_id"],
input[name*="national_id"],
input[name*="guardian_phone"],
input[type="tel"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  padding: 3px;
  border: 1px solid var(--border, rgba(151, 169, 188, 0.35));
  border-radius: 10px;
  background: var(--surface, rgba(255, 255, 255, 0.92));
  direction: ltr;
}

.language-switcher__option {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--muted, #64748b);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  unicode-bidi: isolate;
}

.language-switcher__option:hover,
.language-switcher__option:focus-visible {
  color: var(--text, #102a43);
  outline: 2px solid rgba(41, 105, 160, 0.2);
  outline-offset: 1px;
}

.language-switcher__option.is-active {
  background: var(--school-blue, #1f5f94);
  color: #fff;
}

.language-switcher--sidebar {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.language-switcher--sidebar .language-switcher__option {
  color: rgba(255, 255, 255, 0.78);
}

.language-switcher--sidebar .language-switcher__option.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.language-switcher--auth {
  position: fixed;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 30;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(12, 37, 63, 0.12));
}

.language-switcher--commandbar {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .language-switcher--header {
    display: none;
  }

  .language-switcher--auth {
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }

  .language-switcher--commandbar .language-switcher__option {
    padding-inline: 7px;
    font-size: 9px;
  }
}

/* Phase 5: school support workspace */
.support-page {
  --enterprise-accent: var(--school-blue);
}

.support-create-card {
  scroll-margin-top: calc(var(--topbar-height) + 18px);
}

.support-form__grid {
  grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(145px, 1fr));
}

.support-filter-grid {
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(128px, 1fr));
}

.support-form__message {
  min-height: 132px;
}

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

.support-ticket-card {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  min-height: 112px;
  overflow: hidden;
  padding: 16px 18px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: 160ms ease;
}

.support-ticket-card:hover,
.support-ticket-card:focus-visible {
  border-color: color-mix(in srgb, var(--school-blue) 38%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.support-ticket-card.is-unread {
  background: color-mix(in srgb, var(--school-blue) 5%, var(--surface));
}

.support-ticket-card__marker {
  width: 5px;
  height: 58px;
  border-radius: 999px;
  background: var(--border-strong);
}

.support-ticket-card.is-unread .support-ticket-card__marker {
  background: var(--school-blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--school-blue) 10%, transparent);
}

.support-ticket-card__topline,
.support-ticket-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
}

.support-ticket-card__number {
  color: var(--brand);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.support-ticket-card h2 {
  margin: 8px 0 7px;
  color: var(--text);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.45;
}

.support-ticket-card__meta {
  color: var(--muted);
  font-size: 9px;
}

.support-ticket-card__meta span + span::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  content: "";
  vertical-align: middle;
}

.support-ticket-card__arrow {
  color: var(--muted);
  font-size: 19px;
  font-weight: 900;
}

.support-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  color: var(--support-tone, var(--muted));
  border: 1px solid color-mix(in srgb, var(--support-tone, var(--muted)) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--support-tone, var(--muted)) 8%, var(--surface));
  font-size: 8px;
  font-weight: 1000;
  white-space: nowrap;
}

.support-badge--status-open,
.support-badge--status-in_progress { --support-tone: #175cd3; }
.support-badge--status-waiting_school { --support-tone: #b54708; }
.support-badge--status-resolved { --support-tone: #067647; }
.support-badge--status-closed { --support-tone: #667085; }
.support-badge--priority-low { --support-tone: #667085; }
.support-badge--priority-normal { --support-tone: #175cd3; }
.support-badge--priority-high { --support-tone: #b54708; }
.support-badge--priority-urgent { --support-tone: #b42318; }

.support-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.support-pagination > :last-child {
  justify-self: end;
}

.support-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 15px;
  align-items: start;
}

.support-conversation,
.support-ticket-aside {
  display: grid;
  gap: 15px;
}

.support-closure-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--closure-tone, var(--muted)) 30%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--closure-tone, var(--muted)) 8%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.support-closure-notice[data-tone="danger"] { --closure-tone: #b42318; }
.support-closure-notice[data-tone="warning"] { --closure-tone: #b54708; }
.support-closure-notice[data-tone="neutral"] { --closure-tone: #667085; }

.support-closure-notice > div {
  display: grid;
  gap: 4px;
}

.support-closure-notice strong {
  color: var(--closure-tone, var(--text));
  font-size: 10px;
}

.support-closure-notice span {
  color: var(--text);
  font-size: 10px;
  line-height: 1.7;
}

.support-live-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.support-live-state__connection,
.support-live-state__new {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

.support-live-state__connection {
  color: #067647;
  background: color-mix(in srgb, #067647 9%, var(--surface));
}

.support-live-state__connection[data-state="warning"] {
  color: #b54708;
  background: color-mix(in srgb, #b54708 10%, var(--surface));
}

.support-live-state__new {
  color: #175cd3;
  background: color-mix(in srgb, #175cd3 10%, var(--surface));
}

.support-ticket-aside {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
}

.support-thread {
  display: grid;
  gap: 13px;
  max-height: 650px;
  overflow: auto;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  scrollbar-color: var(--border-strong) transparent;
}

.support-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  width: min(84%, 720px);
}

.support-message--school {
  justify-self: start;
}

.support-message--platform {
  justify-self: end;
}

.support-message__avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--school-blue), var(--brand-dark));
  font-size: 12px;
  font-weight: 1000;
}

.support-message--platform .support-message__avatar {
  background: linear-gradient(145deg, var(--school-gold), #9b6c25);
}

.support-message__content {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}

.support-message--school .support-message__content {
  border-start-start-radius: 5px;
}

.support-message--platform .support-message__content {
  border-start-end-radius: 5px;
  background: color-mix(in srgb, var(--school-gold) 5%, var(--surface));
}

.support-message__content header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}

.support-message__content header strong,
.support-message__content header span {
  display: block;
}

.support-message__content header strong {
  color: var(--text);
  font-size: 10px;
}

.support-message__content header span,
.support-message__content header time {
  color: var(--muted);
  font-size: 8px;
}

.support-message__body {
  padding: 11px 12px 13px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.support-message__changes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
}

.support-message__changes span {
  padding: 4px 7px;
  color: var(--muted);
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 8px;
}

.support-message--event {
  width: 100%;
}

.support-message--event .support-message__avatar {
  background: var(--muted);
}

.support-ticket-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.support-ticket-facts > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.support-ticket-facts > div:last-child {
  border-bottom: 0;
}

.support-ticket-facts dt,
.support-ticket-facts dd {
  margin: 0;
}

.support-ticket-facts dt {
  color: var(--muted);
  font-size: 9px;
}

.support-ticket-facts dd {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  text-align: end;
}

.support-status-button {
  width: 100%;
}

.ticket-history,
.ticket-history__empty {
  margin: 0;
}

.ticket-history {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.ticket-history__item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ticket-history__item:last-child {
  border-bottom: 0;
}

.ticket-history__item strong {
  color: var(--text);
  font-size: 9px;
}

.ticket-history__item span,
.ticket-history__item time,
.ticket-history__empty {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}

.support-page :disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

@media (max-width: 1120px) {
  .support-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .support-filter-grid .enterprise-field:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .support-detail-layout {
    grid-template-columns: 1fr;
  }

  .support-ticket-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .support-form__grid,
  .support-filter-grid,
  .support-ticket-aside {
    grid-template-columns: 1fr;
  }

  .support-filter-grid .enterprise-field:first-child {
    grid-column: auto;
  }

  .support-ticket-card {
    grid-template-columns: 4px minmax(0, 1fr);
    padding: 14px;
  }

  .support-ticket-card__arrow {
    display: none;
  }

  .support-message {
    width: 100%;
  }

  .support-message__content header {
    flex-direction: column;
    gap: 3px;
  }

  .support-closure-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .support-closure-notice .enterprise-button {
    width: 100%;
  }

  .support-live-state {
    justify-content: flex-start;
  }
}

.http-error-page {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  place-items: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(36, 114, 185, 0.14), transparent 30rem),
    linear-gradient(180deg, var(--bg-grad-from), var(--bg-grad-to));
}

.http-error-card {
  width: min(100%, 620px);
  padding: clamp(26px, 6vw, 48px);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.http-error-code {
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  place-items: center;
  color: #fff;
  border-radius: 25px;
  background: linear-gradient(145deg, var(--school-blue), var(--school-navy));
  box-shadow: var(--shadow-md);
  font-size: 27px;
  font-weight: 1000;
}

.http-error-eyebrow {
  margin: 0 0 6px;
  color: var(--school-gold);
  font-size: 10px;
  font-weight: 1000;
}

.http-error-card h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 5vw, 34px);
}

.http-error-card > p:not(.http-error-eyebrow) {
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.http-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

.http-error-card small {
  display: block;
  margin-top: 22px;
  padding-top: 16px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 9px;
  line-height: 1.8;
}

@media (max-width: 520px) {
  .http-error-page {
    padding: 14px;
  }

  .http-error-actions,
  .http-error-actions > * {
    width: 100%;
  }
}

/* Phase 4: Student import experience */
.student-import-page {
  --import-danger: #b42318;
  --import-danger-soft: color-mix(in srgb, var(--import-danger) 8%, var(--surface));
}

.ops-badge--danger {
  color: var(--import-danger, #b42318);
  border-color: color-mix(in srgb, var(--import-danger, #b42318) 28%, var(--border));
  background: color-mix(in srgb, var(--import-danger, #b42318) 8%, var(--surface));
}

.ops-callout--danger {
  border-inline-start-color: var(--import-danger, #b42318);
}

.student-import-hero strong {
  color: var(--text);
}

.student-import-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.student-import-flow span {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 10px 14px;
  color: var(--muted);
  border-inline-end: 1px solid var(--border);
  font-size: 11px;
  font-weight: 900;
}

.student-import-flow span:last-child {
  border-inline-end: 0;
}

.student-import-flow b {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
}

.student-import-flow .is-active {
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

.student-import-flow .is-active b,
.student-import-flow .is-done b {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--school-navy-3), var(--school-blue));
}

.student-import-flow .is-done {
  color: var(--text);
}

.student-import-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.student-import-result--success {
  border-color: color-mix(in srgb, var(--success) 36%, var(--border));
}

.student-import-result--error {
  border-color: color-mix(in srgb, var(--import-danger) 34%, var(--border));
}

.student-import-result__context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-import-result__context > span {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.student-import-result__context small,
.student-import-result__context strong {
  display: block;
}

.student-import-result__context small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.student-import-result__context strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-import-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.student-import-metrics > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.student-import-metrics > div.is-success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.student-import-metrics > div.has-value {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}

.student-import-metrics span,
.student-import-metrics small,
.student-import-metrics strong {
  display: block;
}

.student-import-metrics span,
.student-import-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.student-import-metrics strong {
  margin: 4px 0 2px;
  color: var(--text);
  font-size: 25px;
  line-height: 1.1;
}

.student-import-file-summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.student-import-file-summary__icon,
.student-import-file-type {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(145deg, #177245, #2d9b68);
  font-size: 11px;
  font-weight: 900;
}

.student-import-file-summary strong,
.student-import-file-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-import-file-summary strong {
  color: var(--text);
  font-size: 13px;
}

.student-import-file-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.student-import-inline-badge,
.student-import-required {
  display: inline-flex;
  margin: 3px;
  padding: 3px 7px;
  color: var(--import-danger);
  border: 1px solid color-mix(in srgb, var(--import-danger) 24%, var(--border));
  border-radius: 999px;
  background: var(--import-danger-soft);
  font-size: 9px;
  font-weight: 900;
}

.student-import-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.student-import-table-wrap .ops-table {
  min-width: 760px;
}

.student-import-mapping-table {
  min-width: 620px !important;
}

.student-import-mapping-table td:first-child {
  direction: auto;
}

.student-import-data-table tbody tr.has-error {
  background: var(--import-danger-soft);
}

.student-import-data-table tbody tr.has-duplicate {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.student-import-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.student-import-status--matched {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 27%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.student-import-status--unrecognized,
.student-import-status--warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.student-import-status--error {
  color: var(--import-danger);
  border-color: color-mix(in srgb, var(--import-danger) 26%, var(--border));
  background: var(--import-danger-soft);
}

.student-import-table-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.student-import-issue-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.student-import-issue-groups > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.student-import-issue-groups strong {
  color: var(--text);
  font-size: 10px;
}

.student-import-issue-groups small {
  grid-column: 2;
  color: var(--muted);
  font-size: 9px;
}

.student-import-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface-soft);
  text-align: center;
}

.student-import-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--brand);
  background: var(--surface);
  font-size: 21px;
}

.student-import-empty strong {
  color: var(--text);
}

.student-import-empty p {
  margin: 5px 0 0;
  font-size: 10px;
}

.student-import-confirm__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-import-confirm__summary > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.student-import-confirm__summary span,
.student-import-confirm__summary strong {
  display: block;
}

.student-import-confirm__summary span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.student-import-confirm__summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-import-duplicate-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.student-import-duplicate-options legend {
  width: 100%;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.student-import-duplicate-options label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 78px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.student-import-duplicate-options label:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.student-import-duplicate-options input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.student-import-duplicate-options strong,
.student-import-duplicate-options small {
  display: block;
}

.student-import-duplicate-options small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.student-import-upload-grid.ops-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
}

.student-import-upload.ops-upload {
  gap: 18px;
  min-height: 320px;
}

.student-import-upload__picker {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.student-import-upload__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.student-import-upload__meta span {
  padding: 4px 8px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 9px;
  font-weight: 800;
}

.student-import-upload .ops-file {
  max-width: 650px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 12px;
}

.student-import-file-actions {
  display: flex;
  gap: 7px;
}

.student-import-file-actions .btn {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 10px;
}

.student-import-template-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
  text-decoration: none;
}

.student-import-template-card > span {
  display: grid;
  place-items: center;
  height: 42px;
  color: #fff;
  border-radius: 11px;
  background: #177245;
  font-size: 9px;
  font-weight: 900;
}

.student-import-template-card strong,
.student-import-template-card small {
  display: block;
}

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

.student-import-template-card > b {
  color: var(--brand);
  font-size: 10px;
}

[data-file-download] {
  position: relative;
}

[data-file-download][aria-disabled="true"] {
  pointer-events: none;
}

[data-file-download].is-download-preparing > :not(.file-download-feedback),
[data-file-download].is-download-success > :not(.file-download-feedback) {
  opacity: 0.22;
}

.file-download-feedback {
  position: absolute;
  inset: 5px;
  z-index: 2;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 5px 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.is-download-preparing .file-download-feedback::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-inline-end: 6px;
  border: 2px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: school-download-spin 0.75s linear infinite;
}

.is-download-preparing .file-download-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-download-success .file-download-feedback {
  color: #0b6b49;
  border-color: color-mix(in srgb, #16805d 35%, var(--border));
  background: color-mix(in srgb, #e8f6f0 92%, var(--surface));
}

@keyframes school-download-spin {
  to { transform: rotate(360deg); }
}

.student-import-fields {
  display: grid;
  gap: 8px;
}

.student-import-fields > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.student-import-fields small {
  grid-column: 2;
  color: var(--muted);
  font-size: 9px;
  text-align: start;
}

.student-import-guide__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.student-import-guide__steps > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-height: 95px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.student-import-guide__steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--school-navy-3), var(--school-blue));
}

.student-import-guide__steps strong,
.student-import-guide__steps small {
  display: block;
}

.student-import-guide__steps strong {
  margin-top: 1px;
  color: var(--text);
  font-size: 11px;
}

.student-import-guide__steps small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.student-import-db-access {
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface);
}

.student-import-db-access summary {
  padding: 13px 15px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.student-import-db-access > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 0 15px 15px;
  border-top: 1px solid var(--border);
}

.student-import-db-access p {
  margin: 12px 0 0;
  font-size: 10px;
}

.student-import-dialog {
  width: min(680px, calc(100% - 28px));
  padding: 0;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.student-import-dialog::backdrop {
  background: rgba(8, 20, 38, 0.66);
  backdrop-filter: blur(4px);
}

@media (max-width: 1120px) {
  .student-import-upload-grid.ops-grid {
    grid-template-columns: 1fr;
  }

  .student-import-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-import-guide__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .student-import-flow {
    display: flex;
    overflow-x: auto;
  }

  .student-import-flow span {
    flex: 0 0 165px;
  }

  .student-import-result__context,
  .student-import-confirm__summary,
  .student-import-duplicate-options,
  .student-import-issue-groups {
    grid-template-columns: 1fr;
  }

  .student-import-file-summary {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .student-import-file-summary .btn {
    grid-column: 1 / -1;
  }

  .student-import-upload .ops-file {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .student-import-file-actions {
    grid-column: 1 / -1;
  }

  .student-import-file-actions .btn {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .student-import-metrics,
  .student-import-guide__steps {
    grid-template-columns: 1fr;
  }

  .student-import-upload.ops-upload {
    min-height: 280px;
    padding-inline: 12px;
  }

  .student-import-db-access > div {
    display: grid;
  }
}

/* School UI V8: enterprise reports, audit trail, and database portal */
.enterprise-page {
  --enterprise-accent: var(--school-blue);
  --enterprise-accent-soft: color-mix(in srgb, var(--school-blue) 10%, var(--surface));
  display: grid;
  gap: 15px;
  margin-bottom: 30px;
}

.enterprise-page * {
  min-width: 0;
}

.report-print-footer {
  display: none;
}

.enterprise-page.is-pdf-export {
  width: 190mm;
  padding: 0;
  color: #111827;
  background: #fff;
}

.enterprise-page.is-pdf-export .no-print {
  display: none !important;
}

.enterprise-page.is-pdf-export .enterprise-card,
.enterprise-page.is-pdf-export .enterprise-metric {
  box-shadow: none;
}

.enterprise-page--danger {
  --enterprise-accent: #b42318;
  --enterprise-accent-soft: color-mix(in srgb, #b42318 9%, var(--surface));
}

.enterprise-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 23px;
  background:
    radial-gradient(circle at 6% -30%, rgba(199, 155, 75, 0.28), transparent 22rem),
    linear-gradient(135deg, #0d3157, #081e37);
  box-shadow: var(--shadow-md);
}

.enterprise-page--danger .enterprise-hero {
  background:
    radial-gradient(circle at 8% -35%, rgba(255, 207, 125, 0.18), transparent 22rem),
    linear-gradient(135deg, #751f1a, #3d1110);
}

.enterprise-hero::after {
  position: absolute;
  z-index: -1;
  inset-inline-end: -70px;
  bottom: -110px;
  width: 270px;
  height: 270px;
  content: "";
  border: 42px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
}

.enterprise-hero__identity {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.enterprise-hero__icon {
  display: grid;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.enterprise-hero__icon .school-icon {
  width: 27px;
  height: 27px;
}

.enterprise-eyebrow {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.enterprise-title {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 1000;
  line-height: 1.15;
}

.enterprise-subtitle {
  max-width: 850px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.9;
}

.enterprise-hero__actions,
.enterprise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.enterprise-hero__actions {
  justify-content: flex-end;
}

.enterprise-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: 160ms ease;
}

.enterprise-button:hover {
  border-color: color-mix(in srgb, var(--enterprise-accent) 38%, var(--border));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.enterprise-button--hero {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.enterprise-button--hero:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.15);
}

.enterprise-button--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #2f6fc5, #255ea9);
}

.enterprise-page--danger .enterprise-button--primary,
.enterprise-button--danger {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #d92d20, #b42318);
}

.enterprise-button--quiet {
  color: var(--muted);
  background: var(--surface-soft);
}

.enterprise-button .school-icon {
  width: 15px;
  height: 15px;
}

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

.enterprise-metric {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.enterprise-metric::after {
  position: absolute;
  inset-inline-end: -34px;
  bottom: -47px;
  width: 104px;
  height: 104px;
  content: "";
  border: 22px solid color-mix(in srgb, var(--metric-color, var(--enterprise-accent)) 9%, transparent);
  border-radius: 50%;
}

.enterprise-metric__top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.enterprise-metric__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--metric-color, var(--enterprise-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--metric-color, var(--enterprise-accent)) 12%, transparent);
}

.enterprise-metric strong {
  display: block;
  margin-top: 11px;
  color: var(--text);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 1000;
  line-height: 1;
}

.enterprise-metric small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.enterprise-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.enterprise-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 61px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
}

.enterprise-card__head h2,
.enterprise-card__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 1000;
}

.enterprise-card__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.enterprise-card__body {
  padding: 16px;
}

.enterprise-card__body--flush {
  padding: 0;
}

.enterprise-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(145px, 1fr));
  gap: 10px;
}

.enterprise-filter-grid--audit {
  grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(130px, 1fr));
}

.enterprise-field {
  display: grid;
  gap: 6px;
}

.enterprise-field label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.enterprise-input,
.enterprise-select,
.enterprise-textarea {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--input-bg);
  font: inherit;
  font-size: 11px;
  transition: 150ms ease;
}

.enterprise-textarea {
  min-height: 105px;
  padding-block: 10px;
  resize: vertical;
}

.enterprise-input:focus,
.enterprise-select:focus,
.enterprise-textarea:focus {
  border-color: color-mix(in srgb, var(--enterprise-accent) 62%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enterprise-accent) 10%, transparent);
}

.enterprise-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.enterprise-filter-note {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 9px;
}

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

.enterprise-chart {
  position: relative;
  height: 255px;
}

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

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

.enterprise-table th {
  padding: 12px 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 9px;
  font-weight: 1000;
  text-align: start;
  white-space: nowrap;
}

.enterprise-table td {
  padding: 12px 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.7;
  vertical-align: middle;
}

.enterprise-table tbody tr {
  transition: background 130ms ease;
}

.enterprise-table tbody tr:hover {
  background: color-mix(in srgb, var(--enterprise-accent) 4%, var(--surface));
}

.enterprise-table tbody tr:last-child td {
  border-bottom: 0;
}

.enterprise-cell-title {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.enterprise-cell-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.enterprise-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  color: var(--badge-color, var(--school-blue));
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--school-blue)) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-color, var(--school-blue)) 8%, var(--surface));
  font-size: 8px;
  font-weight: 1000;
  white-space: nowrap;
}

.enterprise-badge::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.enterprise-badge--success { --badge-color: #067647; }
.enterprise-badge--danger { --badge-color: #b42318; }
.enterprise-badge--info { --badge-color: #175cd3; }
.enterprise-badge--warning { --badge-color: #b54708; }
.enterprise-badge--neutral { --badge-color: #667085; }

.enterprise-empty {
  display: grid;
  min-height: 220px;
  padding: 32px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.enterprise-empty__mark {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  place-items: center;
  color: var(--enterprise-accent);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--enterprise-accent-soft);
}

.enterprise-empty__mark .school-icon {
  width: 24px;
  height: 24px;
}

.enterprise-empty strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.enterprise-empty p {
  max-width: 420px;
  margin: 6px auto 0;
  font-size: 10px;
  line-height: 1.8;
}

.enterprise-scope {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--enterprise-accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-size: 10px;
  line-height: 1.8;
}

.enterprise-scope strong {
  color: var(--text);
}

.enterprise-loading {
  position: fixed;
  z-index: 1700;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(8, 20, 39, 0.55);
  backdrop-filter: blur(5px);
}

.enterprise-loading.is-visible {
  display: grid;
}

.enterprise-loading__card {
  display: grid;
  min-width: min(340px, 92vw);
  padding: 24px;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.enterprise-spinner {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border: 4px solid var(--surface-muted);
  border-top-color: var(--enterprise-accent);
  border-radius: 50%;
  animation: enterprise-spin 800ms linear infinite;
}

@keyframes enterprise-spin {
  to { transform: rotate(360deg); }
}

.audit-timeline {
  position: relative;
}

.audit-timeline::before {
  position: absolute;
  inset-block: 20px;
  inset-inline-start: 25px;
  width: 1px;
  content: "";
  background: var(--border);
}

.audit-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.audit-timeline__item:last-child {
  border-bottom: 0;
}

.audit-timeline__marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--marker-color, var(--school-blue));
  border: 1px solid color-mix(in srgb, var(--marker-color, var(--school-blue)) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--marker-color, var(--school-blue)) 8%, var(--surface));
}

.audit-timeline__marker .school-icon {
  width: 17px;
  height: 17px;
}

.audit-timeline__item[data-status="failed"] .audit-timeline__marker { --marker-color: #b42318; }
.audit-timeline__item[data-status="success"] .audit-timeline__marker { --marker-color: #067647; }

.audit-timeline__title {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 1000;
}

.audit-timeline__message {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.75;
}

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

.audit-time {
  text-align: end;
  white-space: nowrap;
}

.audit-time strong,
.audit-time span {
  display: block;
}

.audit-time strong {
  color: var(--text);
  font-size: 10px;
}

.audit-time span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.enterprise-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 34px 100px rgba(2, 8, 23, 0.35);
}

.enterprise-dialog::backdrop {
  background: rgba(8, 20, 39, 0.68);
  backdrop-filter: blur(5px);
}

.enterprise-dialog__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 17px 19px;
  color: #fff;
  background: linear-gradient(135deg, #0d3157, #081e37);
}

.enterprise-page--danger .enterprise-dialog__head {
  background: linear-gradient(135deg, #751f1a, #3d1110);
}

.enterprise-dialog__head h2 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}

.enterprise-dialog__close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  cursor: pointer;
}

.enterprise-dialog__body {
  max-height: calc(86vh - 70px);
  padding: 18px;
  overflow: auto;
}

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

.audit-detail {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.audit-detail span,
.audit-detail strong {
  display: block;
}

.audit-detail span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
}

.audit-detail strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 10px;
}

.audit-detail--wide {
  grid-column: 1 / -1;
}

.db-portal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.db-navigation {
  position: sticky;
  top: 82px;
}

.db-navigation__list {
  display: grid;
  gap: 7px;
}

.db-navigation__link {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 12px;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.db-navigation__link:hover,
.db-navigation__link.is-active {
  color: var(--enterprise-accent);
  border-color: color-mix(in srgb, var(--enterprise-accent) 25%, var(--border));
  background: var(--enterprise-accent-soft);
}

.db-navigation__count {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  padding-inline: 7px;
  place-items: center;
  color: var(--muted);
  border-radius: 9px;
  background: var(--surface);
  font-size: 8px;
}

.db-portal-content {
  display: grid;
  gap: 15px;
}

.db-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px auto;
  gap: 9px;
  align-items: end;
}

.db-editor {
  display: none;
}

.db-editor.is-open {
  display: block;
}

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

.db-code-cell {
  display: block;
  max-width: 250px;
  overflow: hidden;
  color: var(--text);
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-table-scroll {
  max-height: 66vh;
}

.db-table-scroll .enterprise-table th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.db-row-actions {
  display: flex;
  gap: 6px;
}

.db-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-top: 1px solid var(--border);
}

.db-pagination__link {
  display: inline-grid;
  min-width: 35px;
  height: 35px;
  padding-inline: 8px;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 9px;
  font-weight: 900;
  text-decoration: none;
}

.db-pagination__link.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--enterprise-accent);
}

.db-pagination__link.is-disabled {
  color: var(--muted);
  background: var(--surface-soft);
  pointer-events: none;
}

.db-danger-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  color: #912018;
  border: 1px solid rgba(217, 45, 32, 0.24);
  border-radius: 13px;
  background: rgba(217, 45, 32, 0.06);
  font-size: 9px;
  line-height: 1.8;
}

[data-theme="dark"] .db-danger-note {
  color: #fda29b;
}

.db-wipe-card {
  border-color: rgba(217, 45, 32, 0.28);
}

.db-wipe-card .enterprise-card__head {
  background: color-mix(in srgb, #b42318 7%, var(--surface));
}

.db-danger-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.db-danger-list li {
  padding: 10px 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 9px;
}

.db-danger-list li::before {
  margin-inline-end: 6px;
  color: #b42318;
  content: "•";
  font-weight: 1000;
}

@media (max-width: 1120px) {
  .enterprise-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enterprise-filter-grid,
  .enterprise-filter-grid--audit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .db-portal-grid {
    grid-template-columns: 1fr;
  }

  .db-navigation {
    position: static;
  }

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

@media (max-width: 760px) {
  .enterprise-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .enterprise-hero__actions {
    justify-content: flex-start;
  }

  .enterprise-grid,
  .enterprise-filter-grid,
  .enterprise-filter-grid--audit,
  .db-form-grid,
  .audit-details-grid,
  .db-toolbar {
    grid-template-columns: 1fr;
  }

  .enterprise-filter-note {
    width: 100%;
    margin-inline-start: 0;
  }

  .audit-timeline__item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .audit-time {
    grid-column: 2;
    text-align: start;
  }

  .db-navigation__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .enterprise-summary,
  .db-navigation__list,
  .db-danger-list {
    grid-template-columns: 1fr;
  }

  .enterprise-hero__identity {
    display: grid;
  }

  .enterprise-hero__actions > *,
  .enterprise-actions > *,
  .enterprise-filter-actions > * {
    width: 100%;
  }
}

@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  html,
  body {
    width: 210mm;
    min-height: 297mm;
    color: #111827 !important;
    background: #fff !important;
    font-family: "Tajawal", Tahoma, Arial, sans-serif !important;
  }

  .enterprise-page {
    display: block;
    margin: 0;
    color: #111827;
  }

  .enterprise-page > * {
    margin-bottom: 7mm;
  }

  .enterprise-hero {
    display: block;
    padding: 7mm;
    color: #111827 !important;
    border: 1px solid #cbd5e1;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
  }

  .enterprise-hero::after,
  .enterprise-hero__icon,
  .enterprise-hero__actions,
  .enterprise-filter-card,
  .enterprise-loading,
  .no-print,
  .db-portal-grid,
  .enterprise-dialog {
    display: none !important;
  }

  .enterprise-title,
  .enterprise-subtitle,
  .enterprise-eyebrow {
    color: #111827 !important;
  }

  .enterprise-title {
    font-size: 22pt;
  }

  .enterprise-subtitle {
    font-size: 9pt;
  }

  .enterprise-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3mm;
  }

  .enterprise-metric,
  .enterprise-card {
    color: #111827 !important;
    border: 1px solid #cbd5e1;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
    break-inside: avoid;
  }

  .enterprise-metric {
    min-height: 0;
    padding: 4mm;
  }

  .enterprise-metric strong {
    color: #111827;
    font-size: 18pt;
  }

  .enterprise-card__head {
    min-height: 0;
    padding: 3mm 4mm;
    color: #111827;
    border-color: #cbd5e1;
    background: #f8fafc !important;
  }

  .enterprise-card__body {
    padding: 4mm;
  }

  .enterprise-grid {
    gap: 4mm;
  }

  .enterprise-chart {
    height: 58mm;
  }

  .enterprise-table {
    min-width: 0;
    font-size: 8pt;
  }

  .enterprise-table th,
  .enterprise-table td {
    padding: 2.4mm;
    color: #111827 !important;
    border-color: #cbd5e1;
    font-size: 8pt;
  }

  .enterprise-table th {
    background: #eef2f7 !important;
  }

  .enterprise-table-wrap {
    overflow: visible;
  }

  .report-print-footer {
    display: flex !important;
    justify-content: space-between;
    margin-top: 6mm;
    padding-top: 3mm;
    color: #475467;
    border-top: 1px solid #cbd5e1;
    font-size: 8pt;
  }
}

/* Administrators and role-based access control */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rbac-page {
  display: grid;
  gap: 18px;
  padding-block: 4px 26px;
}

.rbac-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 210px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 110%, rgba(199, 155, 75, 0.24), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(62, 150, 220, 0.24), transparent 36%),
    linear-gradient(135deg, #0a2039, #10365f 58%, #0d2948);
  color: #f4f8fc;
  box-shadow: 0 22px 54px rgba(11, 36, 66, 0.22);
}

.rbac-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000);
}

.rbac-hero--permissions {
  background:
    radial-gradient(circle at 8% 115%, rgba(113, 85, 166, 0.32), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(36, 114, 185, 0.25), transparent 36%),
    linear-gradient(135deg, #101d36, #14375d 58%, #122945);
}

.rbac-hero__content,
.rbac-hero__actions {
  position: relative;
  z-index: 1;
}

.rbac-hero__content {
  max-width: 760px;
}

.rbac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.rbac-eyebrow.is-danger {
  color: #b42332;
  border-color: rgba(195, 63, 77, 0.22);
  background: rgba(195, 63, 77, 0.08);
}

html[data-theme="dark"] .rbac-eyebrow.is-danger {
  color: #ff9da8;
}

.rbac-hero h2 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.22;
}

.rbac-hero p {
  max-width: 720px;
  margin: 0;
  color: #c9d8e7;
  font-size: 14px;
  line-height: 1.9;
}

.rbac-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rbac-hero__actions .btn {
  min-height: 44px;
}

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

.rbac-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.rbac-stat__icon {
  grid-row: 1 / span 3;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
}

.rbac-stat__icon.is-blue {
  color: #1767a8;
  background: rgba(36, 114, 185, 0.12);
}

.rbac-stat__icon.is-violet {
  color: #7155a6;
  background: rgba(113, 85, 166, 0.13);
}

.rbac-stat__icon.is-green {
  color: #16825d;
  background: rgba(22, 130, 93, 0.12);
}

.rbac-stat__icon.is-amber {
  color: #a66b17;
  background: rgba(183, 121, 31, 0.13);
}

html[data-theme="dark"] .rbac-stat__icon {
  color: #d6eaff;
}

.rbac-stat__label,
.rbac-stat small {
  color: var(--muted);
  font-size: 11px;
}

.rbac-stat strong {
  font-size: 27px;
  line-height: 1.1;
}

.rbac-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.rbac-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rbac-panel__head h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.rbac-panel__head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.rbac-result-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 11px;
  font-weight: 800;
}

.rbac-filters {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(155px, 190px) minmax(155px, 190px) auto auto;
  gap: 9px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.rbac-filters select,
.rbac-filters input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
}

.rbac-filters :is(select, input):focus {
  border-color: var(--school-blue);
  box-shadow: 0 0 0 3px rgba(36, 114, 185, 0.12);
}

.rbac-search {
  position: relative;
}

.rbac-search .school-icon {
  position: absolute;
  z-index: 1;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  color: var(--muted);
}

.rbac-search input {
  padding-inline-start: 39px;
}

.rbac-filter-loading {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: -17px;
  display: none;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}

.rbac-filters.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

.rbac-filters.is-loading .rbac-filter-loading {
  display: block;
}

.rbac-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 17px;
}

.rbac-table {
  width: 100%;
  min-width: 870px;
  border-collapse: collapse;
}

.rbac-table th {
  padding: 12px 14px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: start;
  white-space: nowrap;
}

.rbac-table td {
  padding: 15px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  vertical-align: middle;
}

.rbac-table tbody tr {
  transition: background-color 0.18s ease;
}

.rbac-table tbody tr:hover {
  background: var(--surface-soft);
}

.rbac-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rbac-user > span:not(.rbac-avatar):not(.rbac-badge) {
  display: grid;
  min-width: 0;
}

.rbac-user strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.rbac-user small,
.rbac-muted {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.rbac-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(36, 114, 185, 0.14);
  border-radius: 12px;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-size: 15px;
  font-weight: 900;
}

.rbac-badge-row,
.rbac-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.rbac-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.rbac-badge.is-admin {
  color: #5e3d97;
  border-color: rgba(113, 85, 166, 0.23);
  background: rgba(113, 85, 166, 0.11);
}

.rbac-badge.is-supervisor {
  color: #1767a8;
  border-color: rgba(36, 114, 185, 0.22);
  background: rgba(36, 114, 185, 0.1);
}

.rbac-badge.is-current {
  color: #0f7552;
  border-color: rgba(22, 130, 93, 0.22);
  background: rgba(22, 130, 93, 0.1);
}

html[data-theme="dark"] .rbac-badge.is-admin {
  color: #cfbaff;
}

html[data-theme="dark"] .rbac-badge.is-supervisor {
  color: #9dd2fa;
}

html[data-theme="dark"] .rbac-badge.is-current {
  color: #8ce5c4;
}

.rbac-scope,
.rbac-last-login {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.rbac-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.rbac-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22, 130, 93, 0.1);
}

.rbac-icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
  cursor: pointer;
  transition: 0.18s ease;
}

.rbac-icon-btn:hover {
  border-color: var(--school-blue);
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.rbac-icon-btn.is-danger {
  color: var(--danger);
}

.rbac-mobile-list {
  display: none;
  gap: 10px;
}

.rbac-mobile-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.rbac-mobile-card > header,
.rbac-mobile-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rbac-mobile-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.rbac-mobile-card dl div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.rbac-mobile-card :is(dt, dd) {
  margin: 0;
}

.rbac-mobile-card dt {
  color: var(--muted);
  font-size: 9px;
}

.rbac-mobile-card dd {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.rbac-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  padding: 30px;
  text-align: center;
}

.rbac-empty > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 18px;
  background: var(--surface-muted);
  color: var(--brand);
}

.rbac-empty h3 {
  margin: 0 0 5px;
}

.rbac-empty p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.rbac-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.rbac-dialog--compact {
  width: min(540px, calc(100vw - 28px));
}

.rbac-dialog::backdrop {
  background: rgba(3, 14, 27, 0.66);
  backdrop-filter: blur(5px);
}

.rbac-dialog[open] {
  animation: rbac-dialog-in 0.2s ease-out;
}

@keyframes rbac-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

.rbac-dialog form {
  display: flex;
  max-height: inherit;
  flex-direction: column;
}

.rbac-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 21px 22px 17px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.rbac-dialog__head .rbac-eyebrow {
  margin-bottom: 7px;
  color: var(--brand);
  border-color: rgba(36, 114, 185, 0.17);
  background: rgba(36, 114, 185, 0.08);
}

.rbac-dialog__head h3 {
  margin: 0 0 4px;
  font-size: 21px;
}

.rbac-dialog__head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.rbac-dialog__close {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font-size: 21px;
  cursor: pointer;
}

.rbac-dialog__body {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  overflow-y: auto;
}

.rbac-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

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

.rbac-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.rbac-field--wide {
  grid-column: 1 / -1;
}

.rbac-field > span {
  font-size: 11px;
  font-weight: 800;
}

.rbac-field :is(input, select) {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: 0;
  background: var(--input-bg);
  color: var(--text);
}

.rbac-field :is(input, select):focus {
  border-color: var(--school-blue);
  box-shadow: 0 0 0 3px rgba(36, 114, 185, 0.12);
}

.rbac-class-picker {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-soft);
}

.rbac-class-picker.is-disabled {
  display: none;
}

.rbac-class-picker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.rbac-class-picker > header div:first-child {
  display: grid;
  gap: 2px;
}

.rbac-class-picker > header small {
  color: var(--muted);
  font-size: 10px;
}

.rbac-class-picker > header div:last-child {
  display: flex;
  gap: 6px;
}

.rbac-class-picker > header button {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--brand);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.rbac-class-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  max-height: 250px;
  overflow-y: auto;
}

.rbac-class-grid label {
  position: relative;
  min-width: 0;
}

.rbac-class-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rbac-class-grid span {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.rbac-class-grid input:checked + span {
  border-color: rgba(36, 114, 185, 0.48);
  background: rgba(36, 114, 185, 0.11);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(36, 114, 185, 0.08);
}

.rbac-class-grid input:focus-visible + span {
  outline: 3px solid rgba(36, 114, 185, 0.22);
}

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

.rbac-role-options label {
  position: relative;
}

.rbac-role-options input {
  position: absolute;
  opacity: 0;
}

.rbac-role-options label > span {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  cursor: pointer;
}

.rbac-role-options small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.rbac-role-options input:checked + span {
  border-color: rgba(36, 114, 185, 0.5);
  background: rgba(36, 114, 185, 0.1);
  box-shadow: inset 0 0 0 1px rgba(36, 114, 185, 0.08);
}

.rbac-role-options input:focus-visible + span {
  outline: 3px solid rgba(36, 114, 185, 0.22);
}

.rbac-access-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rbac-access-summary article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.rbac-access-summary__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
}

.rbac-access-summary__icon.is-admin {
  color: #65469b;
  background: rgba(113, 85, 166, 0.12);
}

.rbac-access-summary__icon.is-supervisor {
  color: #1767a8;
  background: rgba(36, 114, 185, 0.11);
}

.rbac-access-summary__icon.is-denied {
  color: #ad3441;
  background: rgba(195, 63, 77, 0.1);
}

html[data-theme="dark"] .rbac-access-summary__icon {
  color: #d9eaff;
}

.rbac-access-summary small,
.rbac-access-summary p {
  color: var(--muted);
  font-size: 10px;
}

.rbac-access-summary strong {
  display: block;
  margin: 3px 0;
  font-size: 13px;
}

.rbac-access-summary p {
  margin: 0;
  line-height: 1.65;
}

.rbac-matrix td:first-child {
  min-width: 280px;
}

.rbac-matrix td:first-child strong {
  display: block;
  margin-bottom: 2px;
}

.rbac-permission-state {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.rbac-permission-state.is-allowed {
  color: #0f7552;
  background: rgba(22, 130, 93, 0.11);
}

.rbac-permission-state.is-limited {
  color: #1767a8;
  background: rgba(36, 114, 185, 0.11);
}

.rbac-permission-state.is-denied {
  color: #ad3441;
  background: rgba(195, 63, 77, 0.1);
}

html[data-theme="dark"] .rbac-permission-state.is-allowed {
  color: #82dfbd;
}

html[data-theme="dark"] .rbac-permission-state.is-limited {
  color: #9dd2fa;
}

html[data-theme="dark"] .rbac-permission-state.is-denied {
  color: #ff9da8;
}

.rbac-permission-list {
  display: grid;
  gap: 11px;
}

.rbac-permission-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
}

.rbac-permission-card__head,
.rbac-permission-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.rbac-permission-card__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

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

.rbac-scope-block,
.rbac-capabilities {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.rbac-scope-block > span,
.rbac-capabilities > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.rbac-scope-block > strong {
  font-size: 13px;
}

.rbac-class-chips,
.rbac-capabilities > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rbac-class-chips span,
.rbac-capabilities i {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--pill-text);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.rbac-capabilities i.is-allowed {
  color: #0f7552;
  background: rgba(22, 130, 93, 0.1);
}

.rbac-capabilities i.is-limited {
  color: #1767a8;
  background: rgba(36, 114, 185, 0.1);
}

.rbac-capabilities i.is-denied {
  color: #ad3441;
  background: rgba(195, 63, 77, 0.09);
}

html[data-theme="dark"] .rbac-capabilities i.is-allowed {
  color: #82dfbd;
}

html[data-theme="dark"] .rbac-capabilities i.is-limited {
  color: #9dd2fa;
}

html[data-theme="dark"] .rbac-capabilities i.is-denied {
  color: #ff9da8;
}

.rbac-permission-card__actions {
  border-top: 1px solid var(--border);
}

.rbac-text-danger {
  color: var(--danger);
}

[data-admin-form].is-loading {
  pointer-events: none;
  opacity: 0.74;
}

[data-admin-form].is-loading button[type="submit"] {
  position: relative;
  padding-inline-start: 34px;
}

[data-admin-form].is-loading button[type="submit"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  animation: rbac-spin 0.75s linear infinite;
}

@keyframes rbac-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1080px) {
  .rbac-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbac-access-summary {
    grid-template-columns: 1fr;
  }

  .rbac-filters {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) minmax(140px, 180px);
  }
}

@media (max-width: 780px) {
  .rbac-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 23px;
  }

  .rbac-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .rbac-panel {
    padding: 16px;
    border-radius: 20px;
  }

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

  .rbac-search {
    grid-column: 1 / -1;
  }

  .rbac-table-wrap--directory {
    display: none;
  }

  .rbac-mobile-list {
    display: grid;
  }

  .rbac-form-grid,
  .rbac-role-options,
  .rbac-permission-card__body {
    grid-template-columns: 1fr;
  }

  .rbac-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rbac-stats {
    grid-template-columns: 1fr;
  }

  .rbac-panel__head,
  .rbac-class-picker > header,
  .rbac-permission-card__head,
  .rbac-permission-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

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

  .rbac-search {
    grid-column: auto;
  }

  .rbac-mobile-card dl {
    grid-template-columns: 1fr;
  }

  .rbac-mobile-card__actions .btn,
  .rbac-hero__actions .btn {
    flex: 1;
  }

  .rbac-class-grid {
    grid-template-columns: 1fr;
  }

  .rbac-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 19px;
  }

  .rbac-dialog__head,
  .rbac-dialog__body,
  .rbac-dialog__actions {
    padding-inline: 15px;
  }
}

/* Enterprise operational pages */
.ops-page {
  display: grid;
  gap: 18px;
}

.ops-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(199, 155, 75, 0.14), transparent 18rem),
    linear-gradient(135deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow-sm);
}

.ops-hero::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 6px;
  background: linear-gradient(var(--school-gold), var(--school-blue));
}

.ops-eyebrow,
.ops-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 10px;
  color: var(--brand-dark);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  font-size: 11px;
  font-weight: 900;
}

.ops-badge--success {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.ops-badge--warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.ops-hero h1 {
  margin: 11px 0 6px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
}

.ops-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.ops-hero__actions,
.ops-actions,
.ops-tools,
.ops-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 18px;
  align-items: start;
}

.ops-stack {
  display: grid;
  gap: 16px;
}

.ops-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ops-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 17px 19px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-soft), var(--surface));
}

.ops-card__head h2,
.ops-card__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
}

.ops-card__head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.ops-card__body {
  padding: 19px;
}

.ops-steps {
  display: grid;
  gap: 10px;
}

.ops-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.ops-step__number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--school-navy-3), var(--school-blue));
  font-size: 13px;
  font-weight: 900;
}

.ops-step strong {
  display: block;
  margin: 1px 0 3px;
  font-size: 13px;
}

.ops-step small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.ops-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

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

.ops-field {
  display: grid;
  /* Rows keep their natural height. Without this a field whose neighbour is
     taller (a hint line under one of them) stretches its own rows, so an input
     carrying only min-height grows and the two boxes in a row stop matching. */
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.ops-field--full {
  grid-column: 1 / -1;
}

.ops-field > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.ops-field small {
  color: var(--muted);
  font-weight: 500;
}

.ops-field :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  outline: none;
  background: var(--input-bg);
}

.ops-field textarea {
  min-height: 92px;
  resize: vertical;
}

.ops-field :is(input, select, textarea):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

.ops-tabs {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
}

.ops-tab {
  flex: 1 1 150px;
  min-height: 42px;
  padding: 8px 13px;
  color: var(--muted);
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  text-align: center;
}

.ops-tab.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--school-navy-3), var(--school-blue));
  box-shadow: var(--shadow-sm);
}

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

.ops-stat {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.ops-stat span,
.ops-stat small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.ops-stat strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--text);
  font-size: 20px;
}

.ops-roster {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.ops-roster__scroll {
  max-height: 520px;
  overflow: auto;
}

.ops-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.ops-table th,
.ops-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: middle;
  font-size: 12px;
}

.ops-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: var(--text);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 900;
}

.ops-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.ops-table tr[hidden] {
  display: none;
}

.ops-empty {
  padding: 28px 16px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
  font-size: 12px;
}

.ops-callout {
  padding: 14px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--school-blue);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
  line-height: 1.8;
}

.ops-callout strong {
  color: var(--text);
}

.ops-callout--success {
  border-inline-start-color: var(--success);
}

.ops-callout--warning {
  border-inline-start-color: var(--warning);
}

.ops-callout--link {
  display: block;
  color: var(--muted);
  text-decoration: none;
}

.ops-callout--link:hover {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.ops-hero--absence::after {
  background: linear-gradient(var(--danger), #d92d20);
}

.ops-hero--tardy::after {
  background: linear-gradient(var(--warning), var(--school-gold));
}

.student-search-field .student-search-status {
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.student-search-results {
  display: grid;
  gap: 7px;
  max-height: 330px;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.student-search-result {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 13px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.16s ease, background 0.16s ease,
    box-shadow 0.16s ease, transform 0.16s ease;
}

.student-search-result:hover,
.student-search-result:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-1px);
}

.student-search-result.is-selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow: inset 4px 0 0 var(--brand);
}

[dir="rtl"] .student-search-result.is-selected {
  box-shadow: inset -4px 0 0 var(--brand);
}

.student-search-result strong {
  font-size: 13px;
}

.student-search-result span,
.student-search-result small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.student-identity .ops-stat strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

.student-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.student-preview-list > span {
  display: inline-flex;
  max-width: 100%;
  padding: 6px 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.absence-roster {
  min-width: 860px;
}

.ops-inline-reason {
  width: min(100%, 310px);
  min-height: 38px;
  padding: 7px 9px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--input-bg);
}

.ops-inline-reason:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ops-confirm-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.ops-confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
}

.ops-confirm-dialog__panel {
  display: grid;
  max-height: calc(100vh - 32px);
}

.ops-confirm-dialog__head,
.ops-confirm-dialog__body,
.ops-confirm-dialog__actions {
  padding: 18px 20px;
}

.ops-confirm-dialog__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.ops-confirm-dialog__head h2 {
  margin: 10px 0 5px;
  font-size: 19px;
}

.ops-confirm-dialog__head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.ops-confirm-dialog__body {
  display: grid;
  gap: 12px;
  overflow: auto;
}

.ops-confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--border);
}

.ops-actions {
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ops-actions .btn {
  min-height: 44px;
  justify-content: center;
}

.ops-subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ops-choice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-height: 62px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  cursor: pointer;
}

.ops-choice:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.ops-choice input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.ops-choice strong,
.ops-choice small {
  display: block;
}

.ops-choice small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.ops-subject-block {
  display: none;
}

.ops-subject-block.is-active {
  display: block;
}

.ops-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 28px 18px;
  border: 2px dashed var(--border-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 13rem),
    var(--surface-soft);
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ops-upload.is-dragging {
  border-color: var(--brand);
  background-color: color-mix(in srgb, var(--brand) 7%, var(--surface));
  transform: translateY(-2px);
}

.ops-upload__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  font-size: 25px;
}

.ops-upload h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.ops-upload p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 11px;
}

.ops-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ops-file {
  display: none;
  width: 100%;
  max-width: 520px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  text-align: start;
}

.ops-file.is-visible {
  display: grid;
}

.ops-file__meta {
  min-width: 0;
}

.ops-file__meta strong,
.ops-file__meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-file__meta small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.ops-progress {
  display: none;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.ops-progress.is-visible {
  display: grid;
}

.ops-progress__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.ops-progress__bar span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--school-gold), var(--school-blue));
  animation: ops-progress 1.25s ease-in-out infinite;
}

@keyframes ops-progress {
  0% { transform: translateX(760%); }
  100% { transform: translateX(-100%); }
}

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

.ops-result__item {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.ops-result__item strong,
.ops-result__item span {
  display: block;
}

.ops-result__item strong {
  font-size: 22px;
}

.ops-result__item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 1000px) {
  .ops-grid {
    grid-template-columns: 1fr;
  }

  .ops-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ops-hero {
    display: grid;
    padding: 19px;
  }

  .ops-form-grid,
  .ops-form-grid--3,
  .ops-summary,
  .ops-result,
  .ops-subjects {
    grid-template-columns: 1fr;
  }

  .ops-card__head,
  .ops-card__body {
    padding-inline: 14px;
  }

  .ops-actions > * {
    width: 100%;
  }

  .student-search-results {
    max-height: 280px;
  }

  .ops-confirm-dialog__actions {
    display: grid;
  }

  .ops-confirm-dialog__actions > * {
    width: 100%;
  }
}

@media print {
  .ops-hero__actions,
  .ops-actions,
  .ops-tools {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .school-auth-page,
  .school-status-page {
    padding: 10px;
  }

  .school-auth-shell {
    border-radius: 19px;
  }

  .school-auth-identity {
    min-height: 330px;
    padding: 24px;
  }

  .school-auth-panel {
    padding: 28px 22px;
  }

  .school-auth-identity h1 {
    font-size: 28px;
  }

  .school-sidebar {
    width: min(88vw, var(--sidebar-width));
  }

  .school-dashboard-hero {
    min-height: 0;
    padding: 23px 19px;
  }

  .school-dashboard-hero h2 {
    font-size: 27px;
  }

  .school-dashboard-stats,
  .school-dashboard-actions {
    grid-template-columns: 1fr;
  }

  .school-dashboard-section {
    padding: 15px;
  }

  .school-commandbar__titles span {
    display: none;
  }

  .school-commandbar__titles strong {
    max-width: 100px;
    font-size: 12px;
  }

  .school-commandbar__mark {
    width: 42px;
    height: 42px;
  }

  .wa-monitor__summary {
    grid-template-columns: 1fr 1fr;
  }

  .wa-monitor__metric {
    min-height: 84px;
  }

  .wa-monitor__metric strong {
    margin-top: 10px;
    font-size: 23px;
  }

  .wa-monitor__hero,
  .wa-links-page__hero {
    padding: 18px;
  }

  .wa-links-page__mark {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
}

@media print {
  .school-sidebar,
  .school-topbar,
  .school-sidebar-backdrop,
  .school-footer,
  .school-loader,
  .no-print {
    display: none !important;
  }

  .school-main {
    margin: 0 !important;
  }

  .school-content {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body {
    color: #000;
    background: #fff !important;
  }

  .a4-sheet {
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* In-site support reply notifications */
.school-notifications {
  position: relative;
}

.school-notifications > summary {
  list-style: none;
}

.school-notifications > summary::-webkit-details-marker {
  display: none;
}

.school-notifications__trigger {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.school-notifications__trigger > span {
  position: absolute;
  inset: -6px auto auto -6px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding-inline: 5px;
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #b42318;
  font-size: 9px;
  font-weight: 900;
}

.school-notifications__menu {
  position: absolute;
  inset: calc(100% + 10px) auto auto 0;
  z-index: 120;
  width: min(390px, 88vw);
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

html[dir="ltr"] .school-notifications__menu {
  inset: calc(100% + 10px) 0 auto auto;
}

.school-notifications__menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.school-notifications__menu header a {
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.school-notification {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.school-notification:hover,
.school-notification:focus-visible {
  background: var(--surface-soft);
  outline: none;
}

.school-notification strong { font-size: 11px; }
.school-notification span,
.school-notification small,
.school-notifications__empty {
  color: var(--muted);
  font-size: 10px;
}

.school-notifications__empty {
  padding: 24px 15px;
  text-align: center;
}

@media (max-width: 720px) {
  .school-notifications__menu {
    position: fixed;
    inset: 76px 12px auto 12px !important;
    width: auto;
  }
}

/* School UI V5: complete identity and student registry */
.school-brand {
  align-items: start;
}

.school-brand__name,
.school-brand__caption {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
}

.school-brand__name {
  font-size: 14px;
}

.school-commandbar {
  position: sticky;
  top: 8px;
}

.school-commandbar__brand {
  flex: 1 1 300px;
}

.school-commandbar__titles {
  min-width: 0;
  max-width: 520px;
}

.school-commandbar__titles span,
.school-commandbar__titles strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
}

.school-commandbar__titles span {
  color: #dbe8f3;
  font-size: 12px;
  font-weight: 900;
}

.school-commandbar__titles strong {
  color: #aebfd0;
  font-size: 11px;
  font-weight: 700;
}

.school-commandbar__mark {
  width: 54px;
  height: 54px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.12);
}

.school-page-tardy .wrap > .header,
.school-page-waqfa .wrap > .header,
.school-page-exams .wrap > .header,
.school-page-skip .shell > .topbar {
  display: none !important;
}

.student-registry,
.student-profile {
  display: grid;
  gap: 16px;
}

.student-registry__intro {
  min-height: 178px;
  padding: 26px;
  border-color: color-mix(in srgb, var(--school-blue) 24%, var(--border));
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--school-gold) 18%, transparent), transparent 19rem),
    linear-gradient(135deg, color-mix(in srgb, var(--school-navy) 96%, var(--surface)), var(--school-navy-2));
  box-shadow: var(--shadow-md);
}

.student-registry__intro h2,
.student-registry__intro p {
  color: #fff;
}

.student-registry__intro p {
  max-width: 760px;
  margin: 9px 0 0;
  color: #c9d8e7;
  line-height: 1.8;
}

.school-page-intro__eyebrow,
.student-registry__intro-actions,
.student-registry__filters,
.student-registry__filter-actions,
.student-registry__actions,
.student-profile__badges,
.student-profile__hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.school-page-intro__eyebrow span {
  padding: 6px 10px;
  color: #e8d4aa;
  border: 1px solid rgba(199, 155, 75, 0.28);
  border-radius: 999px;
  background: rgba(199, 155, 75, 0.1);
  font-size: 10px;
  font-weight: 900;
}

.student-registry__intro-actions {
  justify-content: flex-end;
}

.student-registry__intro-actions .btn {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.student-registry__intro-actions .btn-muted {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.student-registry__metrics,
.student-profile__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.student-registry__metric,
.student-profile__summary article {
  position: relative;
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.student-registry__metric::before,
.student-profile__summary article::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(var(--school-blue), var(--school-navy-2));
}

.student-registry__metric span,
.student-profile__summary article span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.student-registry__metric strong,
.student-profile__summary article strong {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font-size: 30px;
  font-weight: 900;
}

.student-registry__metric strong.student-registry__metric-text,
.student-profile__summary article strong.student-profile__summary-text,
.student-profile__summary article strong.student-profile__summary-date {
  font-size: 18px;
}

.student-registry__metric small,
.student-profile__summary article small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.student-registry__panel,
.student-registry__table-card,
.student-profile__panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.student-registry__panel {
  padding: 20px;
}

.student-registry__panel-head,
.student-registry__table-head,
.student-profile__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.student-registry__panel-head h3,
.student-registry__table-head h3,
.student-profile__panel-head h3 {
  margin: 3px 0 0;
  font-size: 17px;
}

.student-registry__panel-head p,
.student-registry__table-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.student-registry__panel-kicker,
.student-profile__panel-head > div > span {
  color: var(--brand);
  font-size: 9px;
  font-weight: 900;
}

.student-registry__filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) minmax(190px, 0.7fr) auto;
  align-items: end;
  margin-top: 17px;
}

.student-registry__filters label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.student-registry__filter-actions {
  flex-wrap: nowrap;
}

.student-registry__filter-actions .btn {
  white-space: nowrap;
}

.student-registry__scope {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 10px;
  line-height: 1.6;
}

.student-registry__scope-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 12%, transparent);
}

.student-registry__table-head {
  padding: 17px 19px;
  border-bottom: 1px solid var(--border);
}

.student-registry__live-badge,
.student-profile__status,
.student-profile__count {
  padding: 6px 10px;
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 9px;
  font-weight: 900;
}

.student-registry__table-scroll,
.student-profile__table-scroll {
  overflow: auto;
}

.student-registry__table {
  min-width: 1120px;
}

.student-registry__table thead th,
.student-profile__table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.student-registry__student {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr);
  gap: 9px;
  align-items: center;
}

.student-registry__student strong,
.student-registry__student small,
.student-registry__phones span,
.student-registry__phones small {
  display: block;
}

.student-registry__student strong {
  font-size: 12px;
}

.student-registry__student small,
.student-registry__phones small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.student-registry__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--avatar-text);
  border-radius: 11px;
  background: var(--avatar-bg);
  font-weight: 900;
  overflow: hidden;
}

.student-registry__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.student-registry__avatar b {
  font: inherit;
}

.student-registry__class {
  display: inline-flex;
  padding: 5px 9px;
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 10px;
  font-weight: 900;
}

.student-registry__actions {
  min-width: 180px;
}

.student-registry__action,
.student-profile__file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 900;
}

.student-registry__action:hover,
.student-profile__file:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
}

.student-registry__action.is-primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--school-blue), #155a91);
}

/* Targeted academic structure and student edit surfaces */
.academic-class-card {
  align-items: flex-start;
}

.academic-class-card__edit {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.academic-class-card__edit summary {
  color: var(--brand);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.academic-class-card__edit form {
  margin-top: 12px;
}

/* Final acceptance: institutional class directory and pledge class picker */
.class-directory,
.class-directory__workspace {
  display: grid;
  gap: 16px;
}

.class-directory__intro {
  border-block-start: 4px solid #c99a45;
}

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

.class-directory__summary article {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.class-directory__summary article::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 4px;
  background: linear-gradient(#143b73, #c99a45);
}

.class-directory__summary span,
.class-directory__summary strong {
  display: block;
}

.class-directory__summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.class-directory__summary strong {
  margin-top: 5px;
  font-size: 25px;
  font-weight: 1000;
}

.class-directory__filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px);
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.class-directory__table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.class-directory__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.class-directory__table th,
.class-directory__table td {
  padding: 12px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-align: start;
}

.class-directory__table th {
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 9px;
  font-weight: 1000;
}

.class-directory__table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}

.class-directory__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.class-directory__name b {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  background: #143b73;
  font-size: 10px;
}

.class-directory__name strong { font-size: 11px; }
.class-directory__legacy { color: var(--muted); font-weight: 800; }

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

.pledge-class-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  text-decoration: none;
  transition: 150ms ease;
}

.pledge-class-card:hover,
.pledge-class-card:focus-visible,
.pledge-class-card.is-selected {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  box-shadow: var(--shadow-sm);
  outline: none;
}

.pledge-class-card__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(145deg, #143b73, #225f94);
  font-weight: 1000;
}

.pledge-class-card__copy strong,
.pledge-class-card__copy small,
.pledge-class-card__count b {
  display: block;
}

.pledge-class-card__copy strong { font-size: 12px; }
.pledge-class-card__copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pledge-class-card__count { color: var(--muted); font-size: 8px; text-align: center; }
.pledge-class-card__count b { color: var(--text); font-size: 18px; }

@media (max-width: 760px) {
  .class-directory__summary,
  .class-directory__filters,
  .pledge-class-grid {
    grid-template-columns: 1fr;
  }
}

.student-edit-page,
.student-edit-form {
  display: grid;
  gap: 16px;
}

.student-edit-page__intro {
  align-items: center;
}

.student-edit-page__identity {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 220px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
}

.student-edit-page__identity strong,
.student-edit-page__identity small {
  display: block;
}

.student-edit-page__identity small {
  margin-top: 3px;
  opacity: 0.82;
}

.student-edit-page__avatar {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  color: var(--avatar-text);
  border-radius: 50%;
  background: var(--avatar-bg);
  font-size: 20px;
  font-weight: 900;
}

.student-edit-page__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-edit-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.report-official-header,
.report-print-details {
  display: none;
}

@media (max-width: 680px) {
  .student-edit-page__identity {
    width: 100%;
  }

  .student-edit-form__actions > * {
    flex: 1 1 100%;
  }
}

@media print {
  html,
  body {
    width: auto !important;
  }

  .school-skip-link {
    display: none !important;
  }

  .report-page {
    width: auto !important;
    font-size: 9pt;
  }

  .report-page .enterprise-hero,
  .report-page .enterprise-grid,
  .report-page > .enterprise-card:not(:has(.enterprise-table)) {
    display: none !important;
  }

  .report-official-header {
    display: grid !important;
    grid-template-columns: 22mm minmax(0, 1fr) 50mm;
    gap: 5mm;
    align-items: center;
    margin: 0 0 6mm !important;
    padding: 4mm 5mm;
    color: #111827;
    border: 1.2pt solid #143b73;
    border-block-start-width: 4pt;
    background: #fff !important;
    break-inside: avoid;
  }

  .report-official-header img {
    width: 20mm;
    height: 20mm;
    object-fit: contain;
  }

  .report-official-header h1,
  .report-official-header p,
  .report-official-header dl,
  .report-official-header dd,
  .report-official-header dt {
    margin: 0;
  }

  .report-official-header span,
  .report-official-header dt {
    color: #475467;
    font-size: 7.5pt;
    font-weight: 700;
  }

  .report-official-header h1 {
    margin-block: 1.2mm;
    color: #143b73;
    font-size: 17pt;
  }

  .report-official-header p,
  .report-official-header dd {
    color: #111827;
    font-size: 9pt;
    font-weight: 800;
  }

  .report-official-header dl {
    display: grid;
    gap: 2mm;
  }

  .report-official-header dl > div {
    padding-block-end: 1.5mm;
    border-block-end: 0.5pt solid #cbd5e1;
  }

  .report-print-details {
    display: block !important;
    margin: 0 0 5mm !important;
    break-inside: avoid;
  }

  .report-print-details--split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
  }

  .report-print-details h2 {
    margin: 0;
    padding: 2.5mm 3mm;
    color: #143b73;
    border: 0.7pt solid #9fb0c4;
    border-block-end: 0;
    background: #eef3f8 !important;
    font-size: 10pt;
  }

  .report-page .enterprise-summary {
    margin-bottom: 5mm !important;
  }

  .report-page .enterprise-metric {
    padding: 3mm;
  }

  .report-page .enterprise-metric small {
    display: none;
  }

  .report-page .enterprise-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .report-page .enterprise-table thead {
    display: table-header-group;
  }

  .report-page > .enterprise-card:has(.enterprise-table) {
    break-inside: auto;
    page-break-inside: auto;
  }

  .report-page .enterprise-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report-page .enterprise-table th,
  .report-page .enterprise-table td {
    overflow-wrap: anywhere;
    border: 0.8pt solid #7f93aa !important;
  }

  .report-page .enterprise-table th + th,
  .report-page .enterprise-table td + td {
    border-inline-start-width: 0 !important;
  }

  .report-page .enterprise-table tr + tr td {
    border-block-start-width: 0 !important;
  }

  .report-print-footer {
    break-inside: avoid;
  }
}

.student-registry__empty {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 34px 18px;
  color: var(--muted);
  text-align: center;
}

.student-registry__empty strong {
  color: var(--text);
}

.student-registry__empty.is-hidden {
  display: none;
}

.student-profile__back {
  display: flex;
}

.student-profile__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 190px;
  padding: 28px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(199, 155, 75, 0.25), transparent 18rem),
    linear-gradient(135deg, #0d3157, #081d35);
  box-shadow: var(--shadow-md);
}

.student-profile__identity {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
}

.student-profile__avatar {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 29px;
  font-weight: 900;
}

.student-profile__badges span {
  padding: 5px 9px;
  color: #dce9f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 9px;
  font-weight: 800;
}

.student-profile__identity h2 {
  margin: 10px 0 5px;
  color: #fff;
  font-size: clamp(23px, 3vw, 32px);
}

.student-profile__identity p {
  margin: 0;
  color: #b7c9da;
  font-size: 11px;
}

.student-profile__hero-actions {
  justify-content: flex-end;
}

.student-profile__hero-actions .btn-muted {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.student-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
  gap: 14px;
}

.student-profile__panel {
  padding: 19px;
}

.student-profile__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 17px 0 0;
}

.student-profile__details div {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.student-profile__details dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.student-profile__details dd {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.student-profile__access {
  display: flex;
  flex-direction: column;
}

.student-profile__access-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 18px;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(145deg, #26936d, #116c4c);
  font-size: 20px;
  font-weight: 900;
}

.student-profile__access p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.student-profile__access-class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 10px;
}

.student-profile__history {
  padding: 0;
}

.student-profile__history .student-profile__panel-head {
  padding: 18px 19px;
  border-bottom: 1px solid var(--border);
}

.student-profile__table {
  min-width: 880px;
}

.student-profile__violation {
  min-width: 260px;
}

.student-profile__violation small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.student-profile__violation-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.student-profile__violation-tags span {
  padding: 4px 7px;
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 8px;
  font-weight: 900;
}

.student-profile__empty {
  display: grid;
  gap: 5px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.student-profile__empty strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .student-registry__intro,
  .student-profile__hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-registry__metrics,
  .student-profile__summary {
    grid-template-columns: 1fr;
  }

  .student-registry__filters,
  .student-profile__grid {
    grid-template-columns: 1fr;
  }

  .student-registry__filter-actions {
    align-items: stretch;
  }

  .student-profile__hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .school-commandbar {
    top: 4px;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 9px;
  }

  .school-commandbar__brand {
    flex-basis: calc(100% - 72px);
  }

  .school-commandbar__titles {
    max-width: none;
  }

  .school-commandbar__titles span,
  .school-commandbar__titles strong {
    display: block;
    max-width: none;
  }

  .school-commandbar__titles span {
    font-size: 11px;
  }

  .school-commandbar__titles strong {
    font-size: 9px;
  }

  .school-commandbar__actions {
    width: 100%;
    justify-content: space-between;
  }

  .school-commandbar__subscription {
    flex: 1 1 auto;
  }

  .student-registry__intro,
  .student-profile__hero {
    padding: 20px 16px;
  }

  .student-registry__panel-head,
  .student-registry__table-head,
  .student-profile__panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-registry__filter-actions,
  .student-registry__filter-actions .btn,
  .student-registry__intro-actions,
  .student-registry__intro-actions .btn,
  .student-profile__hero-actions,
  .student-profile__hero-actions .btn {
    width: 100%;
  }

  .student-profile__identity {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .student-profile__avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 22px;
  }

  .student-profile__details {
    grid-template-columns: 1fr;
  }
}

/* Attendance and absence entry */
.attendance-entry {
  display: grid;
  gap: 16px;
}

.attendance-entry__intro {
  min-height: 155px;
  padding: 25px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 8% 0%, rgba(199, 155, 75, 0.23), transparent 18rem),
    linear-gradient(135deg, #0d3157, #081d35);
  box-shadow: var(--shadow-md);
}

.attendance-entry__intro h2 {
  color: #fff;
}

.attendance-entry__intro p {
  margin: 8px 0 0;
  color: #c3d3e2;
}

.attendance-entry__intro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.attendance-entry__intro-actions .btn-muted {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.attendance-entry__date {
  padding: 9px 12px;
  color: #dbe8f3;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 800;
}

.attendance-entry__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
  gap: 14px;
  align-items: start;
}

.attendance-entry__panel,
.attendance-entry__guide,
.attendance-entry__notice {
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.attendance-entry__panel {
  padding: 20px;
}

.attendance-entry__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.attendance-entry__panel-head span:first-child {
  color: var(--brand);
  font-size: 9px;
  font-weight: 900;
}

.attendance-entry__panel-head h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.attendance-entry__step {
  padding: 6px 10px;
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 9px;
  font-weight: 900;
}

.attendance-entry__section {
  min-width: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.attendance-entry__section legend {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.attendance-entry__section legend > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--school-blue), #155a91);
  font-size: 10px;
}

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

.attendance-entry__kind > label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 77px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  cursor: pointer;
  transition: 0.16s ease;
}

.attendance-entry__kind > label:hover,
.attendance-entry__kind > label.is-active {
  border-color: color-mix(in srgb, var(--school-blue) 52%, var(--border));
  background: color-mix(in srgb, var(--school-blue) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--school-blue) 8%, transparent);
}

.attendance-entry__kind input {
  width: 18px;
  height: 18px;
}

.attendance-entry__kind strong,
.attendance-entry__kind small {
  display: block;
}

.attendance-entry__kind strong {
  font-size: 12px;
}

.attendance-entry__kind small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

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

.attendance-entry__fields label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.attendance-entry__fields label > span small {
  font-weight: 500;
}

.attendance-entry__student-select {
  grid-column: 1 / -1;
}

.attendance-entry__student-card {
  display: grid;
  grid-template-columns: 48px minmax(180px, 1fr) minmax(240px, 0.8fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  background: var(--surface-soft);
}

.attendance-entry__student-card.has-student {
  border-style: solid;
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
}

.attendance-entry__student-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--avatar-text);
  border-radius: 14px;
  background: var(--avatar-bg);
  font-size: 17px;
  font-weight: 900;
}

.attendance-entry__student-main span,
.attendance-entry__student-main strong,
.attendance-entry__student-main small {
  display: block;
}

.attendance-entry__student-main span,
.attendance-entry__student-main small {
  color: var(--muted);
  font-size: 9px;
}

.attendance-entry__student-main strong {
  margin: 4px 0;
  font-size: 13px;
}

.attendance-entry__student-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.attendance-entry__student-card dl > div {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.attendance-entry__student-card dt {
  color: var(--muted);
  font-size: 8px;
}

.attendance-entry__student-card dd {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 900;
}

.attendance-entry__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 19px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

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

.attendance-entry__guide,
.attendance-entry__notice {
  padding: 19px;
}

.attendance-entry__guide-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(145deg, #26936d, #116c4c);
  font-size: 19px;
  font-weight: 900;
}

.attendance-entry__guide h3 {
  margin: 14px 0 7px;
}

.attendance-entry__guide p,
.attendance-entry__guide li,
.attendance-entry__notice p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.75;
}

.attendance-entry__guide ul {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding-inline-start: 18px;
}

.attendance-entry__notice {
  border-inline-start: 4px solid var(--border-strong);
}

.attendance-entry__notice.is-enabled {
  border-inline-start-color: var(--success);
}

.attendance-entry__notice span,
.attendance-entry__notice strong {
  display: block;
}

.attendance-entry__notice span {
  color: var(--muted);
  font-size: 9px;
}

.attendance-entry__notice strong {
  margin-top: 5px;
  font-size: 14px;
}

@media (max-width: 980px) {
  .attendance-entry__layout {
    grid-template-columns: 1fr;
  }

  .attendance-entry__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .attendance-entry__intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .attendance-entry__intro-actions,
  .attendance-entry__intro-actions .btn {
    width: 100%;
  }

  .attendance-entry__kind,
  .attendance-entry__fields,
  .attendance-entry__aside,
  .attendance-entry__student-card {
    grid-template-columns: 1fr;
  }

  .attendance-entry__student-avatar {
    width: 42px;
    height: 42px;
  }

  .attendance-entry__actions,
  .attendance-entry__actions .btn {
    width: 100%;
  }
}

/* Shared tools for the operational attendance pages */
.school-standalone .student-live-search {
  display: grid;
  grid-template-columns: auto minmax(190px, 320px);
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 5px 7px 5px 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 900;
}

.school-standalone .student-live-search input {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--input-bg);
}

.school-standalone :is(.students-shell, .table-shell, .table-wrap) {
  border-color: var(--border) !important;
  border-radius: 15px !important;
  background: var(--surface) !important;
}

.school-standalone :is(.students-table, .table-shell table, .table-wrap table) th {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-muted);
}

.school-standalone :is(.students-table, .table-shell table, .table-wrap table) td {
  color: var(--text);
  border-color: var(--border);
}

.school-standalone tr[data-student-row][hidden] {
  display: none;
}

.school-operation-scope {
  margin-bottom: 14px;
  padding: 13px 15px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--school-blue);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  line-height: 1.7;
}

.school-operation-scope strong {
  color: var(--text);
}

@media (max-width: 720px) {
  .school-standalone .student-live-search {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .school-standalone .student-live-search input {
    width: 100%;
    max-width: none;
  }

  .school-standalone .select-tools,
  .school-standalone .toolbar {
    align-items: stretch;
  }
}

/* Academic-first student, pledge, and live-support acceptance */
.student-class-hub,.all-students-page,.pledge-records-hub{display:grid;gap:16px}.student-class-hub__intro-actions,.student-class-hub__actions,.all-students-page__actions,.pledge-records-hub .school-page-intro>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.student-quick-search{position:relative;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(320px,1.3fr);gap:16px;align-items:center;padding:18px 20px;color:#fff;border:1px solid rgba(255,255,255,.12);border-block-start:4px solid var(--school-gold);border-radius:18px;background:linear-gradient(135deg,#103b63,#071f39);box-shadow:var(--shadow-md)}.student-quick-search__copy span{color:#e4c77d;font-size:9px;font-weight:1000}.student-quick-search__copy h3{margin:3px 0;font-size:17px}.student-quick-search__copy p{margin:0;color:#c4d4e3;font-size:10px}.student-quick-search__field{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.08)}.student-quick-search__field input{min-width:0;color:#fff;border:0;outline:0;background:transparent}.student-quick-search__field input::placeholder{color:#aec0d2}.student-quick-search__field>span{color:#aec0d2;font-size:9px;white-space:nowrap}.student-quick-search__results{position:absolute;z-index:30;inset-block-start:calc(100% - 4px);inset-inline-end:20px;width:min(620px,calc(100% - 40px));overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg)}.student-quick-search__results a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;color:var(--text);border-bottom:1px solid var(--border);text-decoration:none}.student-quick-search__results a:hover{background:var(--surface-soft)}.student-quick-search__results a>span:nth-child(2){display:grid}.student-quick-search__results small{color:var(--muted);font-size:9px}.student-quick-search__results b{color:var(--brand);font-size:9px}.student-quick-search__avatar{display:grid;width:34px;height:34px;place-items:center;color:#fff;border-radius:10px;background:var(--brand);font-weight:900}.student-quick-search__empty{padding:22px;color:var(--muted);text-align:center}.student-class-hub__summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.student-class-hub__summary article{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}.student-class-hub__summary span,.student-class-hub__summary strong{display:block}.student-class-hub__summary span{color:var(--muted);font-size:9px}.student-class-hub__summary strong{margin-top:3px;font-size:20px}.student-academic-directory,.pledge-class-directory{display:grid;gap:16px}.student-academic-directory>header{padding:14px 17px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.student-academic-directory>header span{color:var(--brand);font-size:9px;font-weight:1000}.student-academic-directory>header h3{margin:3px 0 0}.student-stage-group{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.student-stage-group__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;color:#fff;background:linear-gradient(135deg,#123f68,#0b2a49)}.student-stage-group__head>div{display:flex;align-items:center;gap:11px}.student-stage-group__head>div>span{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.08);font-weight:900}.student-stage-group__head h3{margin:0;font-size:15px}.student-stage-group__head small{color:#c5d7e6;font-size:9px}.student-stage-group__head>strong{font-size:10px}.student-level-groups{display:grid;gap:13px;padding:14px}.student-level-group{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.student-level-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.student-level-group h4{margin:0;font-size:12px}.student-level-group>header span{color:var(--muted);font-size:9px}.student-class-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.student-class-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;color:var(--text);border:1px solid var(--border);border-radius:12px;background:var(--surface);text-decoration:none;transition:.18s ease}.student-class-card:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.student-class-card__mark{display:grid;width:32px;height:32px;place-items:center;color:var(--brand);border-radius:9px;background:color-mix(in srgb,var(--brand) 10%,var(--surface));font-weight:900}.student-class-card__copy{display:grid;min-width:0}.student-class-card__copy strong{font-size:11px}.student-class-card__copy small{overflow:hidden;color:var(--muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.student-class-card__count{display:grid;color:var(--muted);font-size:8px;text-align:center}.student-class-card__count b{color:var(--text);font-size:14px}.student-class-roster,.all-students-table-card,.pledge-record-list{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.student-class-roster__head,.pledge-record-list>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border)}.student-class-roster__head span,.pledge-record-list>header span{color:var(--brand);font-size:9px;font-weight:1000}.student-class-roster__head h3,.pledge-record-list>header h3{margin:2px 0}.student-class-roster__head p,.pledge-record-list>header p{margin:0;color:var(--muted);font-size:9px}.student-class-roster__head>div:last-child{display:flex;gap:7px}.student-class-roster__table-wrap,.all-students-table-wrap,.pledge-record-table-wrap{overflow:auto}.student-class-roster__table,.all-students-table,.pledge-record-table{width:100%;min-width:850px;border-collapse:collapse}.student-class-roster__table th,.student-class-roster__table td,.all-students-table th,.all-students-table td,.pledge-record-table th,.pledge-record-table td{padding:10px;border-bottom:1px solid var(--border);text-align:start;font-size:10px}.student-class-roster__table th,.all-students-table th,.pledge-record-table th{color:var(--muted);background:var(--surface-soft);font-size:9px}.all-students-toolbar,.pledge-record-search{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.all-students-toolbar form,.pledge-record-search form{display:flex;flex:1;align-items:end;gap:8px}.all-students-toolbar label,.pledge-record-search label{display:grid;flex:1;gap:5px;color:var(--muted);font-size:9px}.all-students-toolbar input,.pledge-record-search input{width:100%;min-height:42px;padding:9px 11px;color:var(--text);border:1px solid var(--border);border-radius:10px;background:var(--input-bg)}.pledge-class-card-shell{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.pledge-class-card-shell.is-selected{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 12%,transparent)}.pledge-class-card-shell .pledge-class-card{border:0;border-radius:0;box-shadow:none}.pledge-class-settings{border-top:1px solid var(--border);background:var(--surface-soft)}.pledge-class-settings summary{padding:9px 12px;color:var(--brand);font-size:9px;font-weight:900;cursor:pointer}.pledge-class-settings form{display:grid;gap:8px;padding:0 12px 12px}.pledge-class-settings label{display:grid;gap:4px;color:var(--muted);font-size:8px}.pledge-class-settings input,.pledge-class-settings select{min-height:38px;padding:7px 9px;color:var(--text);border:1px solid var(--border);border-radius:9px;background:var(--input-bg)}.pledge-class-settings__confirm{grid-template-columns:18px 1fr!important;align-items:start}.pledge-class-settings__confirm input{min-height:0}.pledge-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.pledge-stage-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px;color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);text-decoration:none}.pledge-stage-card:hover,.pledge-stage-card.is-selected{border-color:var(--brand);box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 12%,transparent)}.pledge-stage-card.is-selected{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}.pledge-stage-card__number{display:grid;width:36px;height:36px;place-items:center;color:#fff;border-radius:10px;background:var(--brand);font-weight:900}.pledge-stage-card>span:nth-child(2){display:grid}.pledge-stage-card small{color:var(--muted);font-size:8px}.pledge-stage-card>b{font-size:9px}.pledge-class-grid--academic{align-items:start}

.support-live-toasts{position:fixed;z-index:6200;inset-block-start:82px;inset-inline-end:18px;display:grid;width:min(390px,calc(100vw - 28px));gap:10px;pointer-events:none}.support-live-toast{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;padding:13px;color:var(--text);border:1px solid var(--border);border-inline-start:4px solid var(--brand);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg);text-decoration:none;opacity:0;transform:translateY(-10px);transition:.2s ease;pointer-events:auto}.support-live-toast.is-visible{opacity:1;transform:none}.support-live-toast__mark{display:grid;width:36px;height:36px;place-items:center;color:#fff;border-radius:11px;background:var(--brand);font-weight:900}.support-live-toast>span:last-child{display:grid;gap:3px}.support-live-toast strong{font-size:11px}.support-live-toast small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}

html[data-theme="dark"] :is(.student-stage-group,.student-level-group,.student-class-card,.student-class-roster,.all-students-table-card,.pledge-record-list,.all-students-toolbar,.pledge-record-search,.pledge-class-card-shell,.pledge-stage-card,.support-live-toast){border-color:#40566b;background:#0f2235}html[data-theme="dark"] :is(.student-level-group,.student-class-roster__table th,.all-students-table th,.pledge-record-table th,.pledge-class-settings){background:#142a3f}html[data-theme="dark"] :is(.all-students-toolbar input,.pledge-record-search input,.pledge-class-settings input,.pledge-class-settings select){color:#eef5fb;border-color:#40566b;background:#0b1d2e;color-scheme:dark}

@media(max-width:900px){.student-quick-search{grid-template-columns:1fr}.student-quick-search__results{inset-inline:16px;width:auto}.student-class-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pledge-stage-grid{grid-template-columns:1fr}.student-class-hub__summary{grid-template-columns:1fr}.all-students-toolbar,.pledge-record-search,.all-students-toolbar form,.pledge-record-search form,.student-class-roster__head{align-items:stretch;flex-direction:column}.support-live-toasts{inset-block-start:72px;inset-inline:14px;width:auto}}
@media(max-width:560px){.student-class-cards{grid-template-columns:1fr}.student-quick-search__field{grid-template-columns:22px 1fr}.student-quick-search__field>span{grid-column:2}.student-stage-group__head{align-items:flex-start}.student-class-hub__actions>*{width:100%}}

/* Precision sprint: student, pledge, and final-exam institutional surfaces */
.academic-selector,
.student-information-page,
.pledge-registry-page,
.final-exam-page {
  display: grid;
  gap: 18px;
}

.academic-selector__intro,
.student-information-page__intro,
.pledge-registry-page__intro,
.final-exam-page__intro {
  margin-bottom: 0;
  border-block-start: 4px solid var(--school-gold);
}

.academic-selector__header-actions,
.student-information-page__actions,
.pledge-registry-page__actions,
.final-exam-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.academic-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.academic-flow__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px 15px;
  color: var(--muted);
  border-inline-end: 1px solid var(--border);
  text-decoration: none;
}

.academic-flow__step:last-child { border-inline-end: 0; }
.academic-flow__step > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 900;
}

.academic-flow__step > span:last-child { display: grid; min-width: 0; gap: 2px; }
.academic-flow__step strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.academic-flow__step small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.academic-flow__step.is-active { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.academic-flow__step.is-active > span:first-child { color: #fff; border-color: var(--brand); background: var(--brand); }
.academic-flow__step.is-complete > span:first-child { color: var(--success); border-color: color-mix(in srgb, var(--success) 36%, var(--border)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }

.academic-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.academic-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.academic-panel__head > div:first-child > span,
.student-roster-panel__head > div > span,
.pledge-record-panel__head > div > span,
.final-subject-panel__eyebrow {
  color: var(--brand);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
}

.academic-panel__head h3,
.student-roster-panel__head h3,
.pledge-record-panel__head h3 {
  margin: 4px 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.academic-panel__head p,
.student-roster-panel__head p,
.pledge-record-panel__head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.academic-panel__status,
.academic-panel__context {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  font-size: 9px;
  font-weight: 900;
}

.academic-panel__context { display: grid; gap: 2px; text-align: center; }
.academic-panel__context strong { color: var(--text); font-size: 11px; }
.academic-panel__context a { font-size: 9px; }

.academic-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 20px;
}

.academic-stage-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "mark copy metrics" "state state state";
  gap: 10px 12px;
  align-items: center;
  min-height: 112px;
  padding: 15px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.academic-stage-card:hover,
.academic-stage-card:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--border));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.academic-stage-card.is-selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
}

.academic-stage-card__mark {
  grid-area: mark;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(145deg, #123e6d, #21699f);
  font-size: 11px;
  font-weight: 900;
}

.academic-stage-card__copy { grid-area: copy; display: grid; min-width: 0; gap: 3px; }
.academic-stage-card__copy strong { font-size: 14px; }
.academic-stage-card__copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.academic-stage-card__metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(2, auto); gap: 8px; }
.academic-stage-card__metrics > span { display: grid; min-width: 42px; color: var(--muted); font-size: 8px; text-align: center; }
.academic-stage-card__metrics b { color: var(--text); font-size: 15px; }
.academic-stage-card__state { grid-area: state; padding-top: 8px; color: var(--brand); border-top: 1px solid var(--border); font-size: 9px; font-weight: 900; text-align: end; }

.academic-level-directory,
.student-academic-directory { display: grid; gap: 14px; padding: 18px 20px 20px; }
.academic-level-block { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.academic-level-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface));
}

.academic-level-block__head > div { display: flex; align-items: center; gap: 10px; }
.academic-level-block__head > div > span { display: grid; width: 32px; height: 32px; place-items: center; color: var(--brand); border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 9px; font-weight: 900; }
.academic-level-block__head h4 { margin: 0; color: var(--text); font-size: 13px; }
.academic-level-block__head small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.academic-level-block__head > strong { color: var(--muted); font-size: 9px; }
.academic-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.academic-class-shell { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.academic-class-shell.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent); }
.academic-class-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "mark copy count" "action action action";
  gap: 9px 10px;
  align-items: center;
  min-height: 104px;
  padding: 12px;
  color: var(--text);
  text-decoration: none;
}

.academic-class-card:hover { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.academic-class-card__mark { grid-area: mark; display: grid; width: 34px; height: 34px; place-items: center; color: var(--brand); border-radius: 9px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-size: 10px; font-weight: 900; }
.academic-class-card__copy { grid-area: copy; display: grid; min-width: 0; gap: 3px; }
.academic-class-card__copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.academic-class-card__copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.academic-class-card__count { grid-area: count; display: grid; color: var(--muted); font-size: 8px; text-align: center; }
.academic-class-card__count b { color: var(--text); font-size: 16px; }
.academic-class-card__action { grid-area: action; padding-top: 8px; color: var(--brand); border-top: 1px solid var(--border); font-size: 9px; font-weight: 900; text-align: end; }

.academic-class-settings { border-top: 1px solid var(--border); background: var(--surface-soft); }
.academic-class-settings summary { padding: 10px 12px; color: var(--brand); font-size: 9px; font-weight: 900; cursor: pointer; }
.academic-class-settings form { display: grid; gap: 9px; padding: 2px 12px 12px; }
.academic-class-settings label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.academic-class-settings :is(input, select) { width: 100%; min-height: 38px; padding: 8px 9px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); }
.academic-class-settings__confirm { grid-template-columns: 18px 1fr !important; align-items: start; }
.academic-class-settings__confirm input { min-height: 0; }

/* Reached as #pledge-students straight from "عرض الطلاب"; keep the panel head
   clear of the viewport edge when the browser jumps to it. */
.academic-student-panel { scroll-margin-top: 16px; }
.academic-student-panel:focus { outline: none; }
.academic-student-panel__context { border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.academic-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 11px 20px; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 9px; }
.academic-breadcrumb a { font-weight: 800; }
.academic-breadcrumb strong { color: var(--text); }
.academic-student-panel__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 20px; }
.academic-student-panel__title > div > span { color: var(--brand); font-size: 9px; font-weight: 900; }
.academic-student-panel__title h3 { margin: 4px 0; font-size: 18px; }
.academic-student-panel__title p { margin: 0; color: var(--muted); font-size: 10px; }
.academic-student-panel__title > span { padding: 7px 10px; color: var(--brand); border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 9px; font-weight: 900; }

.academic-student-search,
.pledge-registry-search {
  display: flex;
  align-items: end;
  gap: 9px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.academic-student-search label,
.pledge-registry-search form label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  flex: 1 1 420px;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
}

.academic-student-search label > span,
.pledge-registry-search form label > span { display: grid; min-width: 0; gap: 1px; }
.academic-student-search label b,
.pledge-registry-search form label b { color: var(--muted); font-size: 8px; }
.academic-student-search input,
.pledge-registry-search input { width: 100%; min-width: 0; padding: 0; color: var(--text); border: 0; outline: 0; background: transparent; font-size: 11px; }
.academic-student-search .school-icon,
.pledge-registry-search .school-icon { width: 18px; height: 18px; color: var(--muted); }

.academic-student-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; }
.academic-student-card,
.student-roster-card { display: grid; min-width: 0; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.academic-student-card:hover,
.student-roster-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.academic-student-card__identity,
.student-roster-card__identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.academic-student-card__avatar { display: grid; width: 44px; height: 44px; overflow: hidden; place-items: center; color: var(--avatar-text); border-radius: 11px; background: var(--avatar-bg); font-weight: 900; }
.academic-student-card__avatar img,
.pledge-student-summary__avatar img { width: 100%; height: 100%; object-fit: cover; }
.academic-student-card__identity > span:last-child,
.student-roster-card__identity > span:last-child { display: grid; min-width: 0; gap: 3px; }
.academic-student-card__identity strong,
.student-roster-card__identity strong { overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.academic-student-card__identity small,
.student-roster-card__identity small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.academic-student-card dl,
.student-roster-card dl { display: grid; gap: 6px; margin: 0; }
.academic-student-card dl > div,
.student-roster-card dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border-radius: 9px; background: var(--surface); }
.academic-student-card :is(dt, dd),
.student-roster-card :is(dt, dd) { margin: 0; font-size: 9px; }
.academic-student-card dt,
.student-roster-card dt { color: var(--muted); }
.academic-student-card dd,
.student-roster-card dd { overflow: hidden; color: var(--text); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.academic-student-card__action { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 39px; padding: 8px 11px; color: #fff; border-radius: 9px; background: linear-gradient(135deg, #1767a8, #124b7e); font-size: 9px; font-weight: 900; }
html[dir="ltr"] .academic-student-card__action > span:last-child { transform: scaleX(-1); }
.academic-empty-state { margin: 18px 20px 20px; }

/* Student information hub */
.student-information-summary,
.pledge-registry-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.student-information-summary article,
.pledge-registry-summary article { position: relative; min-width: 0; overflow: hidden; padding: 14px 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.student-information-summary article::before,
.pledge-registry-summary article::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--border-strong); }
.student-information-summary article.is-primary::before,
.pledge-registry-summary article.is-primary::before { background: var(--school-gold); }
.student-information-summary :is(span, strong, small),
.pledge-registry-summary :is(span, strong, small) { display: block; }
.student-information-summary span,
.pledge-registry-summary span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.student-information-summary strong,
.pledge-registry-summary strong { margin-top: 4px; color: var(--text); font-size: 22px; line-height: 1; }
.student-information-summary small,
.pledge-registry-summary small { margin-top: 5px; color: var(--muted); font-size: 8px; }

.student-quick-search { grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr); padding: 17px 19px; border-radius: 16px; }
.student-quick-search__copy h3 { font-size: 16px; }
.student-quick-search__copy p { font-size: 10px; line-height: 1.65; }
.student-quick-search__results { max-height: min(520px, 70vh); overflow-y: auto; }
.student-quick-search__results a { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 60px; padding: 9px 12px; }
.student-quick-search__results strong { font-size: 11px; }
.student-quick-search__results small { margin-top: 3px; font-size: 8.5px; line-height: 1.55; white-space: normal; }
.student-quick-search__avatar { width: 40px; height: 40px; overflow: hidden; border-radius: 10px; }
.student-quick-search__avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-quick-search__field > svg.school-icon {
  width: 19px;
  height: 19px;
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
  opacity: 1 !important;
}

.student-quick-search__field > svg.school-icon use {
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
  opacity: 1 !important;
}

.student-quick-search__field:hover > svg.school-icon,
.student-quick-search__field:focus-within > svg.school-icon {
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
  opacity: 1 !important;
}

.student-stage-section { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.student-stage-section__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #123f68, #0a2948); }
.student-stage-section__head > div:first-child { display: flex; align-items: center; gap: 11px; }
.student-stage-section__head > div:first-child > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(255,255,255,.08); font-size: 9px; font-weight: 900; }
.student-stage-section__head h3 { margin: 0; color: #fff; font-size: 15px; }
.student-stage-section__head small { display: block; margin-top: 2px; color: #c2d4e5; font-size: 9px; }
.student-stage-section__head > div:last-child { display: grid; grid-template-columns: auto auto auto auto; gap: 5px 8px; align-items: baseline; }
.student-stage-section__head > div:last-child strong { font-size: 15px; }
.student-stage-section__head > div:last-child span { color: #c2d4e5; font-size: 8px; }
.student-stage-section__levels { display: grid; gap: 12px; padding: 13px; }
.student-level-section { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.student-level-section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.student-level-section > header > div { display: flex; align-items: baseline; gap: 8px; }
.student-level-section h4 { margin: 0; font-size: 12px; }
.student-level-section header span { color: var(--muted); font-size: 8.5px; }
.student-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.student-class-tile { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "mark copy count" "action action action"; gap: 8px 9px; align-items: center; min-width: 0; min-height: 96px; padding: 11px; color: var(--text); border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.student-class-tile:hover { border-color: color-mix(in srgb, var(--brand) 48%, var(--border)); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.student-class-tile__mark { grid-area: mark; display: grid; width: 32px; height: 32px; place-items: center; color: var(--brand); border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-size: 9px; font-weight: 900; }
.student-class-tile__copy { grid-area: copy; display: grid; min-width: 0; gap: 2px; }
.student-class-tile__copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.student-class-tile__copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.student-class-tile__count { grid-area: count; display: grid; color: var(--muted); font-size: 8px; text-align: center; }
.student-class-tile__count b { color: var(--text); font-size: 15px; }
.student-class-tile__action { grid-area: action; padding-top: 7px; color: var(--brand); border-top: 1px solid var(--border); font-size: 8.5px; font-weight: 900; text-align: end; }

.student-roster-panel__head,
.pledge-record-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.student-roster-panel__head > div:last-child,
.pledge-record-panel__head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.student-roster-panel__head .academic-breadcrumb,
.pledge-record-panel__head .academic-breadcrumb { margin: -16px -20px 14px; }
.student-roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 18px 20px 20px; }
.student-roster-card__actions,
.pledge-record-table__actions { display: flex; flex-wrap: wrap; gap: 7px; }
.student-roster-card__actions .student-registry__action { flex: 1 1 90px; }

/* Pledge records */
.pledge-registry-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pledge-registry-search { justify-content: space-between; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pledge-registry-search form { display: flex; flex: 1 1 620px; align-items: end; gap: 9px; }
.pledge-registry-search__scope { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.pledge-registry-search__scope strong { color: var(--text); }
.pledge-registry-empty { min-height: 280px; }
.pledge-registry-empty > div { display: grid; justify-items: center; gap: 8px; }
.pledge-registry-empty p { margin: 0 0 7px; }
.pledge-record-table-wrap { overflow: auto; }
.pledge-record-table { width: 100%; min-width: 1040px; border-collapse: collapse; }
.pledge-record-table th,
.pledge-record-table td { padding: 11px 12px; color: var(--text); border-bottom: 1px solid var(--border); font-size: 9.5px; text-align: start; vertical-align: middle; }
.pledge-record-table th { position: sticky; z-index: 2; top: 0; color: var(--muted); background: var(--surface-muted); font-size: 8.5px; font-weight: 900; }
.pledge-record-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.pledge-record-table__class { display: inline-flex; padding: 5px 8px; color: var(--pill-text); border: 1px solid var(--pill-border); border-radius: 999px; background: var(--pill-bg); font-weight: 800; }
.pledge-record-table__violation { display: -webkit-box; max-width: 300px; overflow: hidden; line-height: 1.6; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Final examination academic hierarchy */
.final-exam-page .ops-grid { margin-top: 0; }
.final-academic-navigation { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.final-academic-navigation__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #123f68, #0a2948); }
.final-academic-navigation__head > div > span { color: #e0c17a; font-size: 8px; font-weight: 900; }
.final-academic-navigation__head h3 { margin: 3px 0; color: #fff; font-size: 15px; }
.final-academic-navigation__head p { margin: 0; color: #c5d6e6; font-size: 9px; }
.final-academic-navigation__head ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.final-academic-navigation__head li { display: grid; width: 29px; height: 29px; place-items: center; color: #c5d6e6; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; font-size: 9px; font-weight: 900; }
.final-academic-navigation__head li.is-current { color: #173f70; border-color: #e0c17a; background: #e0c17a; }
.final-academic-step { display: grid; gap: 11px; padding: 14px 16px; border-top: 1px solid var(--border); }
.final-academic-step[hidden],
.final-academic-choice[hidden],
.final-subject-panel[hidden],
.ops-subject-block:not(.is-active) { display: none !important; }
.final-academic-step__label { display: flex; align-items: center; gap: 9px; }
.final-academic-step__label > span { display: grid; width: 31px; height: 31px; place-items: center; color: var(--brand); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 9px; font-weight: 900; }
.final-academic-step__label > div { display: grid; gap: 1px; }
.final-academic-step__label strong { font-size: 11px; }
.final-academic-step__label small { color: var(--muted); font-size: 8px; }
.final-stage-cards,
.final-level-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.final-academic-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 66px; padding: 10px 11px; color: var(--text); border: 1px solid var(--border); border-radius: 11px; background: var(--surface); font: inherit; text-align: start; cursor: pointer; }
.final-academic-choice > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.final-academic-choice strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.final-academic-choice small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.final-academic-choice__mark { display: grid; width: 32px; height: 32px; place-items: center; color: var(--brand); border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-size: 9px; font-weight: 900; }
.final-academic-choice__state { color: var(--brand); font-size: 8px; font-weight: 900; }
.final-academic-choice:hover,
.final-academic-choice:focus-visible { border-color: color-mix(in srgb, var(--brand) 58%, var(--border)); outline: none; }
.final-academic-choice.is-active { color: #fff; border-color: #1767a8; background: linear-gradient(135deg, #1767a8, #123e68); box-shadow: 0 8px 18px rgba(16, 66, 105, .18); }
.final-academic-choice.is-active small { color: #d4e4f1; }
.final-academic-choice.is-active .final-academic-choice__mark { color: #fff; background: rgba(255,255,255,.13); }
.final-academic-choice.is-active .final-academic-choice__state { color: #fff; }
.final-subject-panel__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.final-subject-panel__status > strong { color: var(--text); font-size: 10px; }

html[data-theme="dark"] :is(
  .academic-panel,
  .academic-flow,
  .academic-stage-card,
  .academic-level-block,
  .academic-class-shell,
  .academic-class-settings,
  .academic-student-card,
  .student-roster-card,
  .student-information-summary article,
  .pledge-registry-summary article,
  .student-stage-section,
  .student-level-section,
  .student-class-tile,
  .pledge-registry-search,
  .final-academic-navigation,
  .final-academic-choice
) { border-color: #334b61; }

html[data-theme="dark"] :is(
  .academic-level-block,
  .academic-student-card,
  .student-roster-card,
  .student-stage-section,
  .student-class-tile,
  .final-academic-navigation
) { background: #102337; }

html[data-theme="dark"] :is(
  .academic-level-block__head,
  .academic-student-panel__context,
  .student-roster-panel__head,
  .pledge-record-panel__head,
  .academic-class-settings,
  .final-academic-step
) { background: #142b40; }

html[data-theme="dark"] :is(.academic-class-settings input, .academic-class-settings select, .academic-student-search label, .pledge-registry-search form label) { color: #eef5fb; border-color: #40566b; background: #0a1b2b; color-scheme: dark; }
html[data-theme="dark"] .final-academic-choice.is-active { border-color: #69aee0; background: linear-gradient(135deg, #1d668f, #123d60); }

@media (max-width: 1120px) {
  .academic-stage-grid,
  .academic-class-grid,
  .academic-student-grid,
  .student-class-grid,
  .student-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-information-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pledge-registry-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .academic-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academic-flow__step:nth-child(2) { border-inline-end: 0; }
  .academic-flow__step:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .student-quick-search { grid-template-columns: 1fr; }
  .pledge-registry-search,
  .pledge-registry-search form,
  .academic-student-search,
  .academic-panel__head,
  .student-roster-panel__head,
  .pledge-record-panel__head { align-items: stretch; flex-direction: column; }
  .pledge-registry-search__scope { align-self: flex-start; }
  .final-stage-cards,
  .final-level-cards { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .academic-selector,
  .student-information-page,
  .pledge-registry-page,
  .final-exam-page { gap: 13px; }
  .academic-selector__header-actions,
  .student-information-page__actions,
  .pledge-registry-page__actions,
  .final-exam-page__actions { align-items: stretch; width: 100%; flex-direction: column; }
  .academic-selector__header-actions > *,
  .student-information-page__actions > *,
  .pledge-registry-page__actions > *,
  .final-exam-page__actions > * { width: 100%; }
  .academic-flow { grid-template-columns: 1fr; }
  .academic-flow__step,
  .academic-flow__step:nth-child(2) { border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .academic-flow__step:last-child { border-bottom: 0; }
  .academic-stage-grid,
  .academic-class-grid,
  .academic-student-grid,
  .student-class-grid,
  .student-roster-grid,
  .student-information-summary,
  .pledge-registry-summary { grid-template-columns: 1fr; }
  .academic-panel__head,
  .academic-stage-grid,
  .academic-level-directory,
  .student-academic-directory,
  .academic-student-grid,
  .student-roster-grid { padding-inline: 13px; }
  .academic-panel__status,
  .academic-panel__context { align-self: flex-start; }
  .academic-student-panel__title { align-items: stretch; flex-direction: column; }
  .academic-student-search,
  .pledge-registry-search form { align-items: stretch; flex-direction: column; }
  .academic-student-search > *,
  .pledge-registry-search form > * { width: 100%; }
  .student-stage-section__head { align-items: flex-start; flex-direction: column; }
  .student-stage-section__head > div:last-child { align-self: stretch; justify-content: start; }
  .student-level-section > header,
  .student-level-section > header > div { align-items: flex-start; flex-direction: column; }
  .final-academic-navigation__head { align-items: stretch; flex-direction: column; }
  .final-academic-navigation__head ol { align-self: flex-start; }
  .pledge-record-table-wrap { overflow: visible; }
  .pledge-record-table { display: block; min-width: 0; }
  .pledge-record-table thead { display: none; }
  .pledge-record-table tbody { display: grid; gap: 10px; padding: 13px; }
  .pledge-record-table tr { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
  .pledge-record-table td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 11px; border-bottom: 1px solid var(--border); }
  .pledge-record-table td:last-child { border-bottom: 0; }
  .pledge-record-table td::before { content: attr(data-label); color: var(--muted); font-size: 8px; font-weight: 900; }
  .pledge-record-table__violation { max-width: none; }
}

/* Official Student Pledge paper - screen, PDF, and browser print */
.pledge-preview-shell { background: var(--surface-muted); }
.pledge-document {
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 296.5mm;
  padding: 9.5mm 11mm 8.5mm;
  overflow: visible;
  color: #182433;
  background: #fff;
  box-shadow: 0 8mm 20mm rgba(8, 25, 44, .16);
}

.pledge-document__header { grid-template-columns: 23mm minmax(0, 1fr) 23mm; gap: 4mm; padding-bottom: 3.3mm; border-bottom: .65mm solid #173f70; }
.pledge-document__logo,
.pledge-document__school-logo { width: 23mm; height: 20mm; }
.pledge-document__identity { display: grid; justify-items: center; gap: .4mm; }
.pledge-document__identity span { color: #44566b; font-size: 7pt; font-weight: 800; }
.pledge-document__identity > strong { color: #173f70; font-size: 8pt; }
.pledge-document__identity h1 { margin: .8mm 0 .4mm; font-size: 15pt; line-height: 1.1; }
.pledge-document__identity p { font-size: 7.2pt; }
.pledge-document__reference { margin-top: 3.2mm; border-radius: 1.8mm; }
.pledge-document__reference > div { padding: 2mm 2.5mm; }
.pledge-document__reference span { font-size: 6.3pt; }
.pledge-document__reference strong { margin-top: .7mm; font-size: 7.5pt; line-height: 1.35; }
.pledge-document__section { margin-top: 3.2mm; break-inside: auto; page-break-inside: auto; }
.pledge-document__section > h2 { gap: 1.6mm; margin-bottom: 1.6mm; font-size: 8.2pt; }
.pledge-document__section > h2 > span { width: 6mm; height: 6mm; border-radius: 1.5mm; font-size: 6pt; }
.pledge-document__section > h2 > b { font: inherit; }
.pledge-document__grid { gap: 1.5mm; overflow: visible; border: 0; border-radius: 0; }
.pledge-document__grid--student { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pledge-document__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pledge-document__grid > div,
.pledge-document__grid > div:nth-child(even),
.pledge-document__grid--three > div:nth-child(3n),
.pledge-document__grid > div:nth-last-child(-n + 2),
.pledge-document__grid--three > div:nth-last-child(-n + 3) { min-width: 0; padding: 1.8mm 2.2mm; border: .28mm solid #d4dde7; border-radius: 1.4mm; background: #fbfcfe; }
.pledge-document__field--wide,
.pledge-document__field--class { grid-column: span 2; }
.pledge-document__grid dt { font-size: 6.2pt; }
.pledge-document__grid dd { margin-top: .6mm; font-size: 7.5pt; line-height: 1.45; overflow-wrap: anywhere; }
.pledge-document__violations { padding: 2.2mm 2.7mm; border-inline-start-width: 1mm; border-radius: 1.6mm; }
.pledge-document__violations h3 { margin-bottom: .8mm; font-size: 7pt; }
.pledge-document__violations ol { padding-inline-start: 4.5mm; font-size: 7.2pt; line-height: 1.5; }
.pledge-document__violations li { overflow-wrap: anywhere; }
.pledge-document__terms { padding: 2.4mm 2.7mm; font-size: 7.4pt; line-height: 1.68; overflow-wrap: anywhere; }
.pledge-document__ack { margin-top: 1.5mm; padding: 1.6mm 2.5mm; font-size: 6.8pt; line-height: 1.55; }
.pledge-document__signatures { gap: 2mm; margin-top: 3.2mm; }
.pledge-document__signatures > div { grid-template-rows: auto 17mm auto; padding: 2mm; border-radius: 1.5mm; }
.pledge-document__signatures strong { font-size: 6.8pt; }
.pledge-document__signatures small { font-size: 6pt; line-height: 1.4; }
.pledge-document__signature-image img,
.pledge-document__stamp img { max-height: 15mm; }
.pledge-document__signature-image img:not([src]) { display: none; }
.pledge-document__signature-image em,
.pledge-document__admin-sign { font-size: 6pt; }
.pledge-document__footer { margin-top: auto; padding-top: 1.8mm; font-size: 5.8pt; }
.pledge-document[dir="ltr"] .pledge-document__terms { text-align: start; }

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html,
  body,
  .school-shell,
  .school-main,
  .school-content,
  .school-content__body {
    height: auto !important;
    min-height: 0 !important;
  }

  .school-app > svg[width="0"][height="0"] {
    display: none !important;
  }

  .pledge-preview-shell { overflow: visible !important; background: #fff !important; }
  .pledge-document {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto auto 45mm auto !important;
    align-content: space-between !important;
    width: 210mm !important;
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #182433 !important;
    background: #fff !important;
    box-shadow: none !important;
    break-before: avoid-page !important;
    break-after: avoid-page !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
  }

  .pledge-document__reference,
  .pledge-document__section,
  .pledge-document__signatures,
  .pledge-document__footer {
    margin-top: 0 !important;
  }

  .pledge-document__signatures strong {
    overflow-wrap: anywhere;
    font-size: 6.2pt !important;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Official pledge instrument — ministerial presentation.
   These rules deliberately come last so the same element that the school sees
   on screen is the element html2pdf renders, and both read as one issued
   document: ruled frame, guilloche ground, sealed footer.
   ========================================================================== */
.pledge-document {
  --doc-navy: #0d2f56;
  --doc-navy-soft: #1d4d80;
  --doc-gold: #b3903f;
  --doc-ink: #16202e;
  --doc-muted: #5b6b7d;
  --doc-rule: #c3cfdc;
  position: relative;
  padding: 9mm 9mm 8mm;
  color: var(--doc-ink);
  background:
    repeating-linear-gradient(135deg, rgba(13, 47, 86, .017) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 46%, rgba(13, 47, 86, .05) 0 34mm, transparent 34mm),
    #fff;
  box-shadow: 0 0 0 0.35mm var(--doc-navy) inset, 0 0 0 1.1mm #fff inset,
              0 0 0 1.45mm var(--doc-gold) inset;
}

/* Corner marks: the small square registrations found on issued forms. */
.pledge-document::before,
.pledge-document::after {
  position: absolute;
  width: 7mm;
  height: 7mm;
  content: "";
  pointer-events: none;
}
.pledge-document::before {
  inset-block-start: 3.4mm;
  inset-inline-start: 3.4mm;
  border-block-start: 0.5mm solid var(--doc-gold);
  border-inline-start: 0.5mm solid var(--doc-gold);
}
.pledge-document::after {
  inset-block-end: 3.4mm;
  inset-inline-end: 3.4mm;
  border-block-end: 0.5mm solid var(--doc-gold);
  border-inline-end: 0.5mm solid var(--doc-gold);
}

.pledge-document__header {
  position: relative;
  align-items: center;
  padding-bottom: 3.5mm;
  border-bottom: 0;
}
.pledge-document__header::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1.1mm;
  background: linear-gradient(90deg, var(--doc-navy) 0 38%, var(--doc-gold) 38% 62%, var(--doc-navy) 62% 100%);
  content: "";
}

.pledge-document__identity span {
  display: block;
  color: var(--doc-navy-soft);
  font-size: 7.6pt;
  font-weight: 800;
  letter-spacing: .06em;
}
.pledge-document__identity h1 {
  margin: 1.6mm 0 1.2mm;
  color: var(--doc-navy);
  font-size: 18pt;
  font-weight: 900;
  letter-spacing: .01em;
}
.pledge-document__identity p {
  display: inline-block;
  padding: 0.7mm 3.4mm;
  color: var(--doc-navy);
  border: 0.25mm solid var(--doc-gold);
  border-radius: 999px;
  background: rgba(179, 144, 63, .07);
  font-size: 7.6pt;
  font-weight: 800;
}

.pledge-document__logo,
.pledge-document__school-logo {
  height: 21mm;
  padding: 1.2mm;
  border: 0.25mm solid rgba(13, 47, 86, .16);
  border-radius: 1.6mm;
  background: #fff;
}

.pledge-document__reference {
  margin-top: 3.6mm;
  overflow: hidden;
  border: 0.35mm solid var(--doc-navy);
  border-radius: 1.5mm;
  background: linear-gradient(180deg, rgba(13, 47, 86, .05), rgba(13, 47, 86, .015));
}
.pledge-document__reference > div + div { border-inline-start: 0.25mm solid rgba(13, 47, 86, .22); }
.pledge-document__reference span {
  color: var(--doc-navy-soft);
  font-size: 6.6pt;
  font-weight: 900;
  letter-spacing: .04em;
}
.pledge-document__reference strong {
  color: var(--doc-navy);
  font-size: 9.4pt;
  font-weight: 900;
  letter-spacing: .04em;
}

.pledge-document__section { margin-top: 4mm; break-inside: avoid; page-break-inside: avoid; }
.pledge-document__section > h2 {
  display: flex;
  align-items: center;
  gap: 2.4mm;
  margin: 0 0 2.4mm;
  padding: 0 0 1.4mm;
  color: var(--doc-navy);
  border-bottom: 0.25mm solid var(--doc-rule);
  font-size: 10pt;
  font-weight: 900;
  letter-spacing: .01em;
}
.pledge-document__section > h2 > span {
  display: inline-grid;
  place-items: center;
  width: 5.6mm;
  height: 5.6mm;
  color: #fff;
  border-radius: 1.2mm;
  background: linear-gradient(135deg, var(--doc-navy), var(--doc-navy-soft));
  font-size: 7.4pt;
  font-weight: 900;
}

.pledge-document__grid { border: 0.25mm solid var(--doc-rule); border-radius: 1.5mm; overflow: hidden; }
.pledge-document__grid > div { padding: 2.2mm 3mm; background: #fff; }
.pledge-document__grid > div:nth-child(even) { background: rgba(13, 47, 86, .022); }
.pledge-document__grid dt {
  color: var(--doc-muted);
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: .02em;
}
.pledge-document__grid dd {
  margin: 0.7mm 0 0;
  color: var(--doc-ink);
  font-size: 9.4pt;
  font-weight: 800;
}

.pledge-document__violations { border: 0.25mm solid var(--doc-rule); border-radius: 1.5mm; }
.pledge-document__violations > div { padding: 2.4mm 3mm; }
.pledge-document__violations > div + div { border-top: 0.25mm solid var(--doc-rule); }
.pledge-document__violations h3 {
  margin: 0 0 1.4mm;
  color: var(--doc-navy);
  font-size: 8pt;
  font-weight: 900;
}
.pledge-document__violations ol { margin: 0; padding-inline-start: 5mm; }
.pledge-document__violations li { margin-bottom: 0.9mm; font-size: 8.8pt; line-height: 1.65; }

.pledge-document__terms {
  padding: 3mm 3.4mm;
  border: 0.25mm solid var(--doc-rule);
  border-inline-start: 1mm solid var(--doc-gold);
  border-radius: 1.5mm;
  background: rgba(179, 144, 63, .035);
  font-size: 9pt;
  line-height: 1.95;
}
.pledge-document__ack {
  margin-top: 2.4mm;
  padding: 2.2mm 3mm;
  color: var(--doc-navy);
  border: 0.25mm dashed var(--doc-navy-soft);
  border-radius: 1.5mm;
  font-size: 8.4pt;
  font-weight: 800;
  line-height: 1.7;
}

.pledge-document__signatures {
  margin-top: 5mm;
  padding-top: 3.4mm;
  border-top: 0.7mm double var(--doc-navy);
  break-inside: avoid;
  page-break-inside: avoid;
}
.pledge-document__signatures > div {
  padding: 2.4mm;
  border: 0.25mm solid var(--doc-rule);
  border-radius: 1.5mm;
  background: #fff;
  text-align: center;
}
.pledge-document__signatures strong {
  color: var(--doc-navy);
  font-size: 7.6pt;
  font-weight: 900;
}
.pledge-document__signature-image,
.pledge-document__admin-sign,
.pledge-document__stamp {
  min-height: 17mm;
  border-bottom: 0.35mm solid var(--doc-navy-soft);
}
.pledge-document__stamp img { max-height: 21mm; opacity: .95; }

.pledge-document__footer {
  position: relative;
  margin-top: 4mm;
  padding-top: 2.4mm;
  color: var(--doc-muted);
  border-top: 0;
  font-size: 6.2pt;
}
.pledge-document__footer::before {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 0.7mm;
  background: linear-gradient(90deg, var(--doc-navy) 0 22%, var(--doc-gold) 22% 30%, var(--doc-rule) 30% 100%);
  content: "";
}

@media print {
  .pledge-document {
    box-shadow: 0 0 0 0.35mm var(--doc-navy) inset, 0 0 0 1.1mm #fff inset,
                0 0 0 1.45mm var(--doc-gold) inset;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pledge-document__section,
  .pledge-document__signatures { break-inside: avoid; page-break-inside: avoid; }
}

/* Pledge instrument — title cartouche, four-cell reference bar, legal clause
   and a verification footer. Same element on screen and inside the PDF. */
.pledge-document__header { grid-template-columns: 24mm minmax(0, 1fr) 24mm; padding-bottom: 3mm; }
.pledge-document__header::after { display: none; }
.pledge-document__identity strong {
  display: block;
  margin-top: 0.8mm;
  color: var(--doc-navy);
  font-size: 12pt;
  font-weight: 900;
  letter-spacing: .01em;
}
.pledge-document__identity p {
  margin-top: 1.4mm;
  padding: 0.6mm 3mm;
  font-size: 7.2pt;
}

.pledge-document__cartouche {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left title right" "left sub right";
  gap: 0 3.5mm;
  align-items: center;
  margin-top: 2.6mm;
  text-align: center;
}
.pledge-document__cartouche i {
  height: 0.4mm;
  background: linear-gradient(90deg, transparent, var(--doc-gold) 40%, var(--doc-navy));
}
.pledge-document__cartouche i:first-of-type { grid-area: left; }
.pledge-document__cartouche i:last-of-type { grid-area: right; background: linear-gradient(90deg, var(--doc-navy), var(--doc-gold) 60%, transparent); }
.pledge-document__cartouche h1 {
  grid-area: title;
  margin: 0;
  padding: 1.4mm 7mm 0.6mm;
  color: var(--doc-navy);
  font-size: 19pt;
  font-weight: 900;
  letter-spacing: .02em;
}
.pledge-document__cartouche small {
  grid-area: sub;
  padding-bottom: 1.2mm;
  color: var(--doc-muted);
  font-size: 7pt;
  font-weight: 800;
}

.pledge-document__reference { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pledge-document__reference > div:last-child { border-inline-start: 0.25mm solid rgba(13, 47, 86, .22); }

.pledge-document__clause {
  margin: 3.4mm 0 0;
  padding: 2.4mm 3.2mm;
  color: var(--doc-muted);
  border: 0.25mm solid var(--doc-rule);
  border-radius: 1.5mm;
  background: rgba(13, 47, 86, .022);
  font-size: 7.2pt;
  line-height: 1.75;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pledge-document__footer { justify-content: space-between; align-items: center; }
.pledge-document__verify {
  padding: 0.6mm 2.4mm;
  color: var(--doc-navy);
  border: 0.25mm solid var(--doc-rule);
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}
.pledge-document__verify b { letter-spacing: .03em; }

/* The school's own seal carries the document. A real <img> is used rather than a
   background layer because html2pdf rasterises the element, and an element it
   can see is an element it reproduces in the saved PDF. */
.pledge-document__watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 0;
  width: 108mm;
  height: 108mm;
  object-fit: contain;
  opacity: .055;
  transform: translate(50%, -50%);
  pointer-events: none;
  user-select: none;
}
html[dir="ltr"] .pledge-document__watermark { transform: translate(-50%, -50%); }

/* Everything the reader reads sits above the seal. */
.pledge-document > *:not(.pledge-document__watermark) { position: relative; z-index: 1; }

.pledge-document__ribbon {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-bottom: 3mm;
}
.pledge-document__ribbon::before,
.pledge-document__ribbon::after {
  height: 0.3mm;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--doc-gold));
  content: "";
}
.pledge-document__ribbon::after { background: linear-gradient(90deg, var(--doc-gold), transparent); }
.pledge-document__ribbon span {
  padding: 1mm 5mm;
  color: var(--doc-navy);
  border: 0.25mm solid var(--doc-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(179, 144, 63, .12), rgba(179, 144, 63, .04));
  font-size: 8.4pt;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* The school's crest is the anchor of the header, so it is framed and sealed. */
.pledge-document__school-logo {
  position: relative;
  height: 24mm;
  padding: 1.6mm;
  border: 0.4mm solid var(--doc-gold);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 62%, rgba(179, 144, 63, .1));
  box-shadow: 0 0 0 0.7mm #fff, 0 0 0 0.85mm rgba(13, 47, 86, .18);
}
.pledge-document__logo { height: 24mm; }

.pledge-document__cartouche h1 {
  position: relative;
  padding-inline: 9mm;
}
.pledge-document__cartouche h1::before,
.pledge-document__cartouche h1::after {
  position: absolute;
  inset-block-start: 50%;
  width: 3.6mm;
  height: 3.6mm;
  border: 0.35mm solid var(--doc-gold);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
.pledge-document__cartouche h1::before { inset-inline-start: 1.4mm; }
.pledge-document__cartouche h1::after { inset-inline-end: 1.4mm; }

/* A sealed instrument reads better on a warm ground than on flat white. */
.pledge-document {
  background:
    repeating-linear-gradient(135deg, rgba(13, 47, 86, .015) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(179, 144, 63, .035), transparent 45mm),
    #fffdf9;
}

@media print {
  .pledge-document__watermark { opacity: .05 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}