:root {
  --app-navy: #202342;
  --app-indigo: #5146e5;
  --app-indigo-dark: #4037bd;
  --app-indigo-soft: #eeedff;
  --app-blue: #2f80ed;
  --app-purple: #8b5cf6;
  --app-orange: #f59e42;
  --app-red: #ef5b68;
  --app-green: #33b892;
  --app-teal: #2ca6a4;
  --app-bg: #f4f6fa;
  --app-card: #ffffff;
  --app-text: #292d45;
  --app-muted: #7a8197;
  --app-border: #e7e9f2;
  --app-sidebar-width: 278px;
  --app-topbar-height: 76px;
  --app-radius: 14px;
  --app-shadow: 0 5px 22px rgba(35, 39, 73, 0.055);
}

html {
  position: relative;
  min-height: 100%;
  font-size: 15px;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--app-text);
  background:
    radial-gradient(circle at 12% 5%, rgba(81, 70, 229, 0.045), transparent 24rem),
    linear-gradient(180deg, #f7f8fc 0, var(--app-bg) 19rem);
  font-family: Tahoma, Arial, sans-serif;
  text-align: right;
}

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

a:hover {
  color: var(--app-indigo-dark);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-icon,
.nav-icon,
.summary-arrow,
.system-arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1045;
  width: var(--app-sidebar-width);
  overflow-y: auto;
  background: #fff;
  border-inline-end: 1px solid var(--app-border);
  box-shadow: 4px 0 18px rgba(39, 42, 75, 0.035);
}

.sidebar-brand {
  height: var(--app-topbar-height);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.35rem;
  color: var(--app-navy);
  border-bottom: 1px solid var(--app-border);
}

.sidebar-brand:hover {
  color: var(--app-indigo);
}

.brand-icon {
  width: 55px;
  height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, var(--app-indigo), var(--app-purple));
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(81, 70, 229, 0.25);
}

.brand-icon .app-icon {
  width: 31px;
  height: 31px;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  color: var(--app-navy);
  font-size: 0.98rem;
  white-space: nowrap;
}

.brand-copy small {
  margin-top: 0.12rem;
  color: var(--app-muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.sidebar-nav {
  padding: 1rem 0.85rem 2rem;
}

.nav-group {
  margin-bottom: 0.38rem;
}

.nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.62rem 0.72rem;
  color: #555d75;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.nav-group-toggle > span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.nav-group-toggle:hover,
.nav-group-toggle:not(.collapsed) {
  color: var(--app-indigo);
  background: #f7f6ff;
}

.nav-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.nav-group-toggle:not(.collapsed) .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-links {
  position: relative;
  margin: 0.18rem 1rem 0.45rem 0;
  padding-inline-start: 0.8rem;
  border-inline-start: 1px solid #e5e6ef;
}

.nav-group-links.collapsing {
  transition: height 0.2s ease;
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 37px;
  margin-bottom: 0.15rem;
  padding: 0.48rem 0.72rem;
  color: #656c82;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.sidebar-link:hover {
  color: var(--app-indigo);
  background: #f6f5ff;
  transform: translateX(-2px);
}

.sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-indigo), #6258ea);
  box-shadow: 0 7px 15px rgba(81, 70, 229, 0.19);
}

.sidebar-link.active::after {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-end: -0.82rem;
  width: 3px;
  background: var(--app-indigo);
  border-radius: 3px;
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.app-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: var(--app-sidebar-width) 0;
  z-index: 1040;
  height: var(--app-topbar-height);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(10px);
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.6rem;
}

.topbar-start,
.topbar-user {
  display: flex;
  align-items: center;
}

.topbar-start {
  gap: 0.8rem;
}

.topbar-page span,
.topbar-page strong {
  display: block;
}

.topbar-eyebrow {
  margin-bottom: 0.12rem;
  color: var(--app-muted);
  font-size: 0.7rem;
}

.topbar-page strong {
  color: var(--app-navy);
  font-size: 1rem;
}

.topbar-user {
  gap: 0.65rem;
}

.user-avatar {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--app-indigo);
  background: var(--app-indigo-soft);
  border: 1px solid #dedbff;
  border-radius: 50%;
  font-weight: 700;
}

.user-details strong,
.user-details span {
  display: block;
}

.user-details strong {
  color: var(--app-navy);
  font-size: 0.82rem;
}

.user-details span {
  margin-top: 0.1rem;
  color: var(--app-muted);
  font-size: 0.68rem;
}

.logout-button,
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  color: #6e7488;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 600;
}

.logout-button:hover {
  color: var(--app-red);
  background: #fff5f6;
  border-color: #ffd4d8;
}

.sidebar-toggle {
  width: 39px;
  padding: 0;
  color: var(--app-indigo);
}

.app-content {
  min-height: 100vh;
  margin-inline-start: var(--app-sidebar-width);
  padding-top: var(--app-topbar-height);
  display: flex;
  flex-direction: column;
}

.content-container {
  width: 100%;
  max-width: 1640px;
  margin-inline: auto;
  padding: 1.55rem;
  flex: 1;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.55rem;
  color: var(--app-muted);
  background: #fff;
  border-top: 1px solid var(--app-border);
  font-size: 0.75rem;
}

.auth-body {
  background: linear-gradient(145deg, #f0f1ff, #f8f9fc);
}

.auth-content {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-content > .row {
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--app-navy);
  font-weight: 700;
}

.text-muted {
  color: var(--app-muted) !important;
}

.card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.card-header {
  padding: 0.95rem 1.1rem;
  background: #fff;
  border-bottom: 1px solid var(--app-border);
  font-weight: 700;
}

.card-body {
  padding: 1.15rem;
}

.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary {
  background: var(--app-indigo);
  border-color: var(--app-indigo);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--app-indigo-dark);
  border-color: var(--app-indigo-dark);
}

.btn-success {
  background: var(--app-green);
  border-color: var(--app-green);
}

.btn-outline-primary {
  color: var(--app-indigo);
  border-color: var(--app-indigo);
}

.btn-outline-primary:hover {
  background: var(--app-indigo);
  border-color: var(--app-indigo);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(81, 70, 229, 0.15);
}

.form-label {
  margin-bottom: 0.4rem;
  color: #555c72;
  font-size: 0.84rem;
  font-weight: 600;
}

.form-control,
.form-select {
  min-height: 42px;
  color: var(--app-text);
  background-color: #fff;
  border-color: #dfe2ec;
  border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
  border-color: #aaa4fa;
}

textarea.form-control {
  min-height: auto;
}

.table-responsive {
  border-radius: inherit;
}

.table {
  margin-bottom: 0;
  color: var(--app-text);
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: 0.82rem 0.75rem;
  border-bottom-color: var(--app-border);
}

.table thead th,
.table-light th {
  color: #596078;
  background: #f7f8fc;
  border-bottom-width: 1px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
  background: #fafaff;
}

.badge {
  padding: 0.42em 0.72em;
  border-radius: 50rem;
  font-weight: 600;
}

.alert {
  border: 0;
  border-radius: 10px;
}

.pagination {
  gap: 0.25rem;
}

.page-link {
  color: var(--app-indigo);
  border-color: var(--app-border);
  border-radius: 7px !important;
}

.dashboard-page {
  max-width: 1460px;
  margin-inline: auto;
}

.dashboard-section-block {
  margin-bottom: 1.25rem;
}

.dashboard-welcome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 142px;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.7rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.17), transparent 22%),
    linear-gradient(120deg, #3f3bb8, #5b4de3 58%, #7457ea);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(71, 62, 194, 0.2);
}

.dashboard-welcome::after {
  content: "";
  position: absolute;
  inset-inline-end: -45px;
  inset-block-end: -70px;
  width: 220px;
  height: 220px;
  border: 35px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.welcome-copy,
.welcome-year {
  position: relative;
  z-index: 1;
}

.welcome-kicker {
  color: #dcd9ff;
  font-size: 0.74rem;
}

.welcome-copy h1 {
  margin: 0.35rem 0;
  color: #fff;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.welcome-copy p {
  margin: 0;
  color: #e9e7ff;
  font-size: 0.86rem;
}

.welcome-year {
  min-width: 190px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.welcome-year span,
.welcome-year strong {
  display: block;
}

.welcome-year span {
  color: #dfddff;
  font-size: 0.7rem;
}

.welcome-year strong {
  margin-top: 0.3rem;
  color: #fff;
  font-size: 1rem;
}

.dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 126px;
  padding: 1.1rem;
  overflow: hidden;
  color: var(--app-text);
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.summary-card:hover {
  color: var(--app-text);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(39, 42, 75, 0.09);
}

.summary-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -34px;
  inset-block-end: -42px;
  width: 108px;
  height: 108px;
  background: var(--summary-soft);
  border-radius: 50%;
  opacity: 0.75;
}

.summary-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--summary-color);
  background: var(--summary-soft);
  border-radius: 14px;
}

.summary-icon .app-icon {
  width: 25px;
  height: 25px;
}

.summary-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.summary-copy small,
.summary-copy strong,
.summary-copy em {
  display: block;
}

.summary-copy small {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.summary-copy strong {
  margin: 0.25rem 0 0.2rem;
  color: var(--app-navy);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  line-height: 1.2;
}

.summary-copy em {
  color: var(--summary-color);
  font-size: 0.68rem;
  font-style: normal;
}

.summary-arrow {
  position: absolute;
  inset-inline-end: 0.8rem;
  inset-block-start: 0.8rem;
  width: 16px;
  height: 16px;
  color: #c1c5d2;
  transform: scaleX(-1);
}

.summary-indigo { --summary-color: var(--app-indigo); --summary-soft: #eeedff; }
.summary-blue { --summary-color: var(--app-blue); --summary-soft: #eaf4ff; }
.summary-orange { --summary-color: #e98924; --summary-soft: #fff3e4; }
.summary-purple { --summary-color: var(--app-purple); --summary-soft: #f3edff; }

.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.dashboard-main-column,
.dashboard-side-column {
  display: grid;
  gap: 1rem;
}

.dashboard-panel {
  padding: 1.15rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.quick-links-panel {
  margin-bottom: 1.25rem;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-kicker {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--app-indigo);
  font-size: 0.68rem;
  font-weight: 700;
}

.panel-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.panel-heading > a {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.panel-heading > a:hover {
  color: var(--app-indigo);
}

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.dashboard-quick-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 68px;
  padding: 0.78rem;
  color: var(--app-text);
  background: #fbfbfd;
  border: 1px solid #eff0f5;
  border-radius: 10px;
}

.dashboard-quick-link:hover {
  color: var(--app-text);
  background: #fff;
  border-color: #dcd9ff;
  box-shadow: 0 5px 14px rgba(43, 45, 80, 0.06);
}

.dashboard-quick-link > span:last-child {
  min-width: 0;
}

.dashboard-quick-link strong,
.dashboard-quick-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-link strong {
  font-size: 0.8rem;
}

.dashboard-quick-link small {
  margin-top: 0.12rem;
  color: var(--app-muted);
  font-size: 0.64rem;
}

.quick-icon,
.compact-icon,
.payroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
}

.quick-icon {
  width: 40px;
  height: 40px;
}

.quick-icon .app-icon {
  width: 19px;
  height: 19px;
}

.quick-indigo { color: var(--app-indigo); background: #eeedff; }
.quick-red { color: var(--app-red); background: #fff0f2; }
.quick-blue { color: var(--app-blue); background: #eaf4ff; }
.quick-orange { color: #e98924; background: #fff3e4; }
.quick-teal { color: var(--app-teal); background: #e8f8f7; }
.quick-purple { color: var(--app-purple); background: #f3edff; }
.quick-green { color: var(--app-green); background: #eaf9f4; }

.compact-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.financial-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.financial-overview-card {
  position: relative;
  min-height: 130px;
  padding: 1rem;
  overflow: hidden;
  background: #fbfbfd;
  border: 1px solid #eff0f5;
  border-radius: 12px;
}

.financial-overview-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -25px;
  inset-block-end: -35px;
  width: 90px;
  height: 90px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.055;
}

.financial-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  color: currentColor;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 10px;
}

.financial-overview-card small,
.financial-overview-card strong {
  position: relative;
  z-index: 1;
  display: block;
}

.financial-overview-card small {
  color: var(--app-muted);
  font-size: 0.68rem;
}

.financial-overview-card strong {
  margin-top: 0.28rem;
  color: var(--app-navy);
  font-size: 1.22rem;
}

.accent-red { color: var(--app-red); }
.accent-orange { color: #e98924; }
.accent-purple { color: var(--app-purple); }
.accent-green { color: var(--app-green); }

.student-overview {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.5fr);
  gap: 1rem;
}

.student-total {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #3f3bb8, #6258ea);
  border-radius: 13px;
}

.student-total-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 13px;
}

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

.student-total small {
  color: #dcd9ff;
  font-size: 0.68rem;
}

.student-total strong {
  margin: 0.2rem 0;
  color: #fff;
  font-size: 1.65rem;
}

.student-total div > span {
  color: #e9e7ff;
  font-size: 0.65rem;
}

.student-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.student-links a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.78rem;
  color: #555c72;
  background: #fafafd;
  border: 1px solid #eff0f5;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 600;
}

.student-links a:hover {
  color: var(--app-indigo);
  background: #fff;
  border-color: #dcd9ff;
}

.student-links .app-icon {
  width: 19px;
  height: 19px;
  color: var(--app-indigo);
}

.dashboard-lower-columns {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  margin-bottom: 1.25rem;
}

.compact-metric {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  color: var(--app-text);
  background: #fafafd;
  border: 1px solid #eff0f5;
  border-radius: 11px;
}

.compact-metric:hover {
  color: var(--app-text);
  border-color: #dddafc;
}

.compact-icon,
.payroll-icon {
  width: 42px;
  height: 42px;
}

.compact-metric small,
.compact-metric strong {
  display: block;
}

.compact-metric small {
  color: var(--app-muted);
  font-size: 0.68rem;
}

.compact-metric strong {
  margin-top: 0.15rem;
  color: var(--app-navy);
  font-size: 1.3rem;
}

.bg-soft-indigo { color: var(--app-indigo); background: #eeedff; }
.bg-soft-blue { color: var(--app-blue); background: #eaf4ff; }
.bg-soft-orange { color: #e98924; background: #fff3e4; }
.bg-soft-teal { color: var(--app-teal); background: #e8f8f7; }
.bg-soft-red { color: var(--app-red); background: #fff0f2; }
.bg-soft-purple { color: var(--app-purple); background: #f3edff; }
.bg-soft-green { color: var(--app-green); background: #eaf9f4; }

.finance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #eff0f5;
  border-radius: 11px;
}

.finance-metric {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 1rem;
}

.finance-metric + .finance-metric {
  border-inline-start: 1px solid #eff0f5;
}

.finance-dot {
  width: 10px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 5px;
}

.dot-red { background: var(--app-red); }
.dot-orange { background: var(--app-orange); }
.dot-indigo { background: var(--app-indigo); }

.finance-metric small,
.finance-metric strong {
  display: block;
}

.finance-metric small {
  color: var(--app-muted);
  font-size: 0.67rem;
}

.finance-metric strong {
  margin-top: 0.25rem;
  color: var(--app-navy);
  font-size: 1.15rem;
}

.payroll-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.payroll-item {
  padding: 0.85rem;
  background: #fafafd;
  border: 1px solid #eff0f5;
  border-radius: 11px;
}

.payroll-item small,
.payroll-item strong,
.payroll-item em {
  display: block;
}

.payroll-item small {
  margin-top: 0.65rem;
  color: var(--app-muted);
  font-size: 0.65rem;
}

.payroll-item strong {
  margin-top: 0.22rem;
  color: var(--app-navy);
  font-size: 1.08rem;
}

.payroll-item em {
  margin-top: 0.2rem;
  color: var(--app-muted);
  font-size: 0.61rem;
  font-style: normal;
}

.system-links {
  display: grid;
}

.system-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.78rem 0;
  color: #555c72;
  border-bottom: 1px solid #eff0f5;
  font-size: 0.76rem;
  font-weight: 600;
}

.system-links a:last-child {
  border-bottom: 0;
}

.system-links a:hover {
  color: var(--app-indigo);
}

.system-links a > span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.system-links .app-icon {
  width: 18px;
  height: 18px;
  color: var(--app-indigo);
}

.system-arrow {
  width: 14px;
  height: 14px;
  color: #b7bbc8;
  transform: scaleX(-1);
}

.school-status-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: #fff;
  background: linear-gradient(145deg, #202342, #343866);
  border: 0;
}

.status-icon {
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 11px;
}

.school-status-panel small,
.school-status-panel strong,
.school-status-panel div > span {
  display: block;
}

.school-status-panel small {
  color: #bfc3dd;
  font-size: 0.65rem;
}

.school-status-panel strong {
  margin: 0.25rem 0 0.4rem;
  color: #fff;
  font-size: 0.9rem;
}

.school-status-panel div > span {
  color: #cfd2e5;
  font-size: 0.65rem;
  line-height: 1.6;
}

@media (max-width: 1279.98px) {
  .dashboard-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 991.98px) {
  .app-topbar {
    inset-inline: 0;
    height: 66px;
  }

  .app-sidebar {
    width: min(86vw, 300px);
    box-shadow: -10px 0 30px rgba(32, 35, 66, 0.18);
  }

  .app-sidebar.collapsing {
    height: 100vh;
    transition: width 0.2s ease;
  }

  .app-content {
    margin-inline-start: 0;
    padding-top: 66px;
  }

  .content-container {
    padding: 1rem;
  }

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

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

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

@media (max-width: 767.98px) {
  .topbar-inner {
    padding: 0 0.85rem;
  }

  .topbar-eyebrow,
  .user-details {
    display: none;
  }

  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .welcome-year {
    width: 100%;
  }

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

  .compact-metrics,
  .finance-metrics,
  .student-overview {
    grid-template-columns: 1fr;
  }

  .finance-metric + .finance-metric {
    border-inline-start: 0;
    border-top: 1px solid #eff0f5;
  }
}

@media (max-width: 575.98px) {
  .topbar-page strong {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .logout-button span {
    display: none;
  }

  .content-container {
    padding: 0.75rem;
  }

  .dashboard-welcome {
    min-height: 0;
    padding: 1.15rem;
    border-radius: 14px;
  }

  .dashboard-summary-grid,
  .dashboard-quick-grid,
  .payroll-grid,
  .financial-overview-grid,
  .student-links {
    grid-template-columns: 1fr;
  }

  .summary-card {
    min-height: 105px;
  }

  .dashboard-panel {
    padding: 0.9rem;
  }

  .panel-heading {
    align-items: flex-start;
  }

  .table > :not(caption) > * > * {
    padding: 0.68rem 0.55rem;
  }

  .app-footer {
    padding-inline: 0.75rem;
  }
}

@media print {
  .app-topbar,
  .app-sidebar,
  .app-footer {
    display: none !important;
  }

  .app-content {
    margin: 0;
    padding: 0;
  }

  .content-container {
    max-width: none;
    padding: 0;
  }

  .card,
  .dashboard-panel {
    box-shadow: none !important;
  }
}

/* Students and payments */
.module-page {
  display: grid;
  gap: 1.25rem;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.35rem 0 0.25rem;
}

.page-header h1 {
  margin: 0.2rem 0 0.35rem;
  color: var(--app-navy);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.page-header p {
  max-width: 720px;
  margin: 0;
  color: var(--app-muted);
  font-size: 0.83rem;
  line-height: 1.7;
}

.page-eyebrow {
  color: var(--app-indigo);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.page-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.action-plus {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.filter-card,
.data-table-card,
.form-section-card,
.detail-card,
.confirmation-card,
.statement-student-card {
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(32, 35, 66, 0.045);
}

.filter-card,
.form-section-card,
.detail-card,
.confirmation-card {
  padding: 1.2rem;
}

.card-section-heading,
.form-section-heading,
.data-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-section-heading,
.form-section-heading {
  margin-bottom: 1.15rem;
}

.card-section-heading > div,
.form-section-heading {
  display: flex;
  align-items: center;
}

.card-section-heading > div,
.form-section-heading {
  gap: 0.75rem;
}

.card-section-heading h2,
.form-section-heading h2,
.data-table-header h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 0.92rem;
  font-weight: 800;
}

.card-section-heading p,
.form-section-heading p,
.data-table-header p {
  margin: 0.2rem 0 0;
  color: var(--app-muted);
  font-size: 0.69rem;
}

.section-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
}

.section-icon .app-icon {
  width: 19px;
  height: 19px;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.data-table-card {
  min-width: 0;
  overflow: hidden;
}

.data-table-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #eceef4;
}

.module-table {
  min-width: 1080px;
}

.module-table thead th {
  padding: 0.8rem 0.75rem;
  color: #697087;
  background: #f8f9fc;
  border-bottom: 1px solid #e9ebf2;
  font-size: 0.67rem;
  font-weight: 800;
  white-space: nowrap;
}

.module-table tbody td {
  padding: 0.82rem 0.75rem;
  color: #454b60;
  border-color: #eff0f5;
  font-size: 0.72rem;
  vertical-align: middle;
}

.module-table tbody tr:hover {
  background: #fbfbfe;
}

.student-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 155px;
}

.student-cell strong {
  color: var(--app-navy);
  font-weight: 700;
}

.student-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--app-indigo);
  background: #eeedff;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 800;
}

.gender-badge,
.status-badge,
.section-chip,
.payment-method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.gender-male { color: #2878c7; background: #eaf4ff; }
.gender-female { color: #8a58c7; background: #f4edff; }
.status-active { color: #128064; background: #e8f8f2; }
.status-suspended { color: #c37318; background: #fff4e4; }
.status-archived { color: #687086; background: #eef0f4; }
.status-withdrawn { color: #bd4355; background: #fff0f2; }
.section-chip { min-width: 31px; color: var(--app-indigo); background: #f0efff; }
.payment-method-badge { color: #3c668f; background: #edf5fc; }

.money-cell {
  color: var(--app-navy) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.money-paid { color: var(--app-green) !important; }
.money-due { color: var(--app-red) !important; }
.money-settled { color: var(--app-green) !important; }

.table-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  white-space: nowrap;
}

.table-actions .btn {
  padding: 0.31rem 0.52rem;
  font-size: 0.63rem;
}

.empty-state {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 180px;
  color: var(--app-muted);
  text-align: center;
}

.empty-state strong {
  color: var(--app-navy);
  font-size: 0.86rem;
}

.empty-state span:last-child {
  font-size: 0.7rem;
}

.empty-state-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  color: var(--app-indigo);
  background: #eeedff;
  border-radius: 13px;
}

.empty-state-icon .app-icon {
  width: 22px;
  height: 22px;
}

.form-page {
  max-width: 1100px;
  margin-inline: auto;
}

.form-section-card + .form-section-card {
  margin-top: 1rem;
}

.form-section-card .form-label {
  color: #464d61;
  font-size: 0.71rem;
  font-weight: 700;
}

.form-section-card .form-control,
.form-section-card .form-select {
  min-height: 43px;
}

.form-section-card textarea.form-control {
  min-height: 108px;
}

.form-submit-bar {
  position: sticky;
  z-index: 5;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e4e6ef;
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(32, 35, 66, 0.1);
  backdrop-filter: blur(10px);
}

.form-submit-bar strong,
.form-submit-bar span {
  display: block;
}

.form-submit-bar strong {
  color: var(--app-navy);
  font-size: 0.79rem;
}

.form-submit-bar span {
  margin-top: 0.15rem;
  color: var(--app-muted);
  font-size: 0.64rem;
}

.readonly-field {
  color: #5c6378;
  background: #f8f9fc;
  border-style: dashed;
}

.receipt-number-field,
.receipt-code {
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.form-hint {
  margin-top: 0.35rem;
  color: var(--app-muted);
  font-size: 0.64rem;
}

.generated-receipt-note {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  color: #4d5670;
  background: #f8f8fd;
  border: 1px dashed #cfd0e6;
  border-radius: 8px;
  font-size: 0.69rem;
}

.generated-receipt-note .app-icon {
  width: 18px;
  height: 18px;
  color: var(--app-indigo);
}

.student-profile-hero,
.statement-student-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 8% 20%, rgba(109, 94, 252, 0.1), transparent 30%),
    #fff;
}

.student-profile-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.profile-avatar {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, var(--app-indigo), #8d7dfc);
  border-radius: 17px;
  box-shadow: 0 10px 20px rgba(109, 94, 252, 0.2);
  font-size: 1.4rem;
  font-weight: 800;
}

.profile-kicker {
  color: var(--app-muted);
  font-size: 0.65rem;
}

.student-profile-main h2 {
  margin: 0.15rem 0 0.35rem;
  color: var(--app-navy);
  font-size: 1.25rem;
  font-weight: 800;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.profile-meta span {
  padding: 0.22rem 0.5rem;
  color: #62697d;
  background: #f4f5f9;
  border-radius: 6px;
  font-size: 0.63rem;
  font-weight: 700;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.detail-list > div {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eff0f5;
}

.detail-list > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.detail-list .detail-wide {
  grid-column: 1 / -1;
}

.detail-list dt,
.detail-list dd {
  margin: 0;
}

.detail-list dt {
  color: var(--app-muted);
  font-size: 0.64rem;
  font-weight: 600;
}

.detail-list dd {
  margin-top: 0.28rem;
  color: var(--app-navy);
  font-size: 0.77rem;
  font-weight: 700;
}

.detail-card-financial {
  display: flex;
  flex-direction: column;
}

.financial-highlight {
  flex: 1;
  margin-bottom: 1rem;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #1a9277, #35b89a);
  border-radius: 11px;
}

.financial-highlight span,
.financial-highlight strong,
.financial-highlight small {
  display: block;
}

.financial-highlight span,
.financial-highlight small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.65rem;
}

.financial-highlight strong {
  margin: 0.25rem 0;
  font-size: 1.65rem;
}

.notes-box {
  min-height: 70px;
  padding: 0.85rem;
  color: #555d71;
  background: #fafafd;
  border: 1px solid #eff0f5;
  border-radius: 9px;
  font-size: 0.73rem;
  line-height: 1.8;
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.85rem;
  color: var(--app-muted);
  font-size: 0.62rem;
}

.narrow-page {
  max-width: 820px;
  margin-inline: auto;
}

.confirmation-profile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eff0f5;
}

.confirmation-profile span,
.confirmation-profile strong,
.confirmation-profile small {
  display: block;
}

.confirmation-profile div > span,
.confirmation-profile small {
  color: var(--app-muted);
  font-size: 0.65rem;
}

.confirmation-profile strong {
  margin: 0.2rem 0;
  color: var(--app-navy);
  font-size: 1rem;
}

.status-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.status-choice-grid form {
  display: flex;
}

.status-choice {
  width: 100%;
  padding: 0.9rem;
  text-align: start;
  background: #fff;
  border: 1px solid #e3e5ee;
  border-radius: 10px;
  transition: 0.15s ease;
}

.status-choice:hover:not(:disabled) {
  border-color: var(--app-indigo);
  box-shadow: 0 5px 15px rgba(109, 94, 252, 0.08);
}

.status-choice.current {
  background: #f4f3ff;
  border-color: #cfcbff;
}

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

.status-choice strong {
  color: var(--app-navy);
  font-size: 0.75rem;
}

.status-choice span {
  margin-top: 0.2rem;
  color: var(--app-muted);
  font-size: 0.62rem;
}

.confirmation-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  color: #78414b;
  background: #fff5f6;
  border: 1px solid #f4d7dc;
  border-radius: 10px;
}

.confirmation-alert-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--app-red);
  border-radius: 50%;
  font-weight: 800;
}

.confirmation-alert strong {
  display: block;
  font-size: 0.76rem;
}

.confirmation-alert p {
  margin: 0.25rem 0 0;
  font-size: 0.66rem;
  line-height: 1.7;
}

.confirmation-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
}

.confirmation-details div {
  padding: 0.75rem;
  background: #fafafd;
  border: 1px solid #eff0f5;
  border-radius: 9px;
}

.confirmation-details dt,
.confirmation-details dd {
  margin: 0;
}

.confirmation-details dt {
  color: var(--app-muted);
  font-size: 0.62rem;
}

.confirmation-details dd {
  margin-top: 0.25rem;
  color: var(--app-navy);
  font-size: 0.75rem;
  font-weight: 800;
}

.statement-reference {
  min-width: 150px;
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid #e9eaf1;
}

.statement-reference span,
.statement-reference strong {
  display: block;
}

.statement-reference span {
  color: var(--app-muted);
  font-size: 0.63rem;
}

.statement-reference strong {
  margin-top: 0.2rem;
  color: var(--app-navy);
  font-size: 0.82rem;
}

.financial-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.financial-summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 118px;
  padding: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(32, 35, 66, 0.045);
}

.financial-summary-card::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
}

.financial-summary-card.annual-fee::after { background: var(--app-indigo); }
.financial-summary-card.total-paid::after { background: var(--app-green); }
.financial-summary-card.remaining-balance::after { background: var(--app-orange); }

.financial-card-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
}

.annual-fee .financial-card-icon { color: var(--app-indigo); background: #eeedff; }
.total-paid .financial-card-icon { color: var(--app-green); background: #e8f8f2; }
.remaining-balance .financial-card-icon { color: var(--app-orange); background: #fff4e7; }

.financial-card-icon .app-icon {
  width: 22px;
  height: 22px;
}

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

.financial-summary-card div > span,
.financial-summary-card small {
  color: var(--app-muted);
  font-size: 0.64rem;
}

.financial-summary-card strong {
  margin: 0.2rem 0;
  color: var(--app-navy);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.notes-cell {
  min-width: 170px;
  max-width: 260px;
  white-space: normal;
}

.overdue-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.report-summary-card {
  position: relative;
  min-height: 116px;
  padding: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(32, 35, 66, 0.045);
}

.report-summary-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
}

.report-summary-card.accent-indigo::before { background: var(--app-indigo); }
.report-summary-card.accent-blue::before { background: var(--app-blue); }
.report-summary-card.accent-green::before { background: var(--app-green); }
.report-summary-card.accent-red::before { background: var(--app-red); }

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

.report-summary-card span,
.report-summary-card small {
  color: var(--app-muted);
  font-size: 0.64rem;
}

.report-summary-card strong {
  margin: 0.45rem 0 0.25rem;
  color: var(--app-navy);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

/* Standalone printable receipt */
.receipt-body {
  min-height: 100vh;
  padding: 2.5rem 1rem;
  background: #f3f5f9;
  font-family: Arial, sans-serif;
}

.official-receipt {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe2eb;
  border-radius: 4px;
  box-shadow: 0 18px 45px rgba(32, 35, 66, 0.1);
}

.receipt-brand-bar {
  height: 7px;
  background: linear-gradient(90deg, #2f3568, #6d5efc, #4ea3f1);
}

.official-receipt-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 2rem 2.25rem 1.5rem;
  border-bottom: 1px solid #e8eaf0;
}

.receipt-school-mark {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #2f3568, #6d5efc);
  border-radius: 14px;
  font-size: 1.35rem;
  font-weight: 800;
}

.official-receipt-header span,
.official-receipt-header p,
.receipt-number-block span {
  color: #7a8091;
  font-size: 0.72rem;
}

.official-receipt-header h1 {
  margin: 0.18rem 0;
  color: #202342;
  font-size: 1.35rem;
  font-weight: 800;
}

.official-receipt-header p {
  margin: 0;
}

.receipt-number-block {
  padding: 0.7rem 0.9rem;
  text-align: center;
  background: #f7f7fc;
  border: 1px solid #e5e6ef;
  border-radius: 9px;
}

.receipt-number-block span,
.receipt-number-block strong {
  display: block;
}

.receipt-number-block strong {
  margin-top: 0.2rem;
  color: #383e6e;
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
}

.receipt-amount-panel {
  margin: 1.5rem 2.25rem;
  padding: 1.2rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #2f3568, #484f8c);
  border-radius: 11px;
}

.receipt-amount-panel span,
.receipt-amount-panel strong,
.receipt-amount-panel small {
  display: block;
}

.receipt-amount-panel span,
.receipt-amount-panel small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
}

.receipt-amount-panel strong {
  margin: 0.2rem 0;
  font-size: 2rem;
}

.receipt-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 2.25rem;
}

.receipt-information > div {
  padding: 1rem 0;
  border-bottom: 1px solid #eceef3;
}

.receipt-information > div:nth-child(odd) {
  padding-inline-end: 1.25rem;
}

.receipt-information > div:nth-child(even) {
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid #eceef3;
}

.receipt-information .receipt-notes {
  grid-column: 1 / -1;
  padding-inline: 0;
  border-inline-start: 0;
}

.receipt-information span,
.receipt-information strong {
  display: block;
}

.receipt-information span {
  color: #858a9b;
  font-size: 0.68rem;
}

.receipt-information strong {
  margin-top: 0.3rem;
  color: #292e4d;
  font-size: 0.84rem;
}

.official-receipt-footer {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: end;
  gap: 1.5rem;
  padding: 2.2rem 2.25rem 1.6rem;
}

.official-receipt-footer div {
  color: #6e7486;
  text-align: center;
  font-size: 0.67rem;
}

.official-receipt-footer i {
  display: block;
  height: 1px;
  margin-top: 2.2rem;
  background: #aeb2bf;
}

.official-receipt-footer p {
  margin: 0;
  color: #999eac;
  font-size: 0.61rem;
  text-align: center;
}

.receipt-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  background: #f8f9fc;
  border-top: 1px solid #e8eaf0;
}

@media (max-width: 1199.98px) {
  .overdue-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-header,
  .student-profile-hero,
  .statement-student-card,
  .form-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .page-actions,
  .page-header > .btn,
  .page-header > a {
    width: 100%;
  }

  .page-actions .btn,
  .page-actions a {
    flex: 1 1 auto;
  }

  .details-grid,
  .financial-summary-grid {
    grid-template-columns: 1fr;
  }

  .statement-reference {
    padding: 0.8rem 0 0;
    border-inline-start: 0;
    border-top: 1px solid #e9eaf1;
  }

  .form-submit-bar {
    position: static;
  }

  .form-submit-bar > div:last-child,
  .form-submit-bar .btn {
    width: 100%;
  }

  .confirmation-details {
    grid-template-columns: 1fr;
  }

  .official-receipt-header {
    grid-template-columns: auto 1fr;
    padding: 1.25rem;
  }

  .receipt-number-block {
    grid-column: 1 / -1;
  }

  .receipt-amount-panel {
    margin: 1rem 1.25rem;
  }

  .receipt-information {
    grid-template-columns: 1fr;
    padding: 0 1.25rem;
  }

  .receipt-information > div:nth-child(odd),
  .receipt-information > div:nth-child(even) {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .receipt-information .receipt-notes {
    grid-column: auto;
  }

  .official-receipt-footer {
    grid-template-columns: repeat(2, 1fr);
    padding: 1.5rem 1.25rem;
  }

  .official-receipt-footer p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 575.98px) {
  .filter-card,
  .form-section-card,
  .detail-card,
  .confirmation-card {
    padding: 0.9rem;
  }

  .data-table-header {
    padding: 0.9rem;
  }

  .student-profile-main {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }

  .detail-list,
  .status-choice-grid,
  .overdue-summary-grid {
    grid-template-columns: 1fr;
  }

  .detail-list > div,
  .detail-list > div:nth-last-child(-n + 2) {
    border-bottom: 1px solid #eff0f5;
  }

  .detail-list > div:last-child {
    border-bottom: 0;
  }

  .receipt-body {
    padding: 0;
  }

  .official-receipt {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .receipt-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media print {
  .no-print,
  .form-submit-bar,
  .page-actions {
    display: none !important;
  }

  .module-page,
  .print-page {
    display: block;
  }

  .print-page .page-header {
    margin-bottom: 14px;
  }

  .print-page .statement-student-card,
  .print-page .financial-summary-card,
  .print-page .data-table-card {
    break-inside: avoid;
    box-shadow: none !important;
  }

  .print-page .financial-summary-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 14px;
  }

  .print-page .module-table {
    min-width: 0;
  }

  .print-page .module-table th,
  .print-page .module-table td {
    padding: 7px;
    font-size: 10.5pt;
  }

  .receipt-body {
    min-height: 0;
    padding: 0;
    background: #fff;
  }

  .official-receipt {
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .receipt-brand-bar {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .receipt-amount-panel,
  .receipt-school-mark {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  @page {
    size: A4;
    margin: 12mm;
  }
}

/* Formal A4 documents */
.receipt-reference-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #dfe2e8;
}

.receipt-reference-row > div {
  padding: 1rem 2.25rem;
}

.receipt-reference-row > div + div {
  border-inline-start: 1px solid #dfe2e8;
}

.receipt-reference-row span,
.receipt-reference-row strong {
  display: block;
}

.receipt-reference-row span {
  color: #707687;
  font-size: 0.78rem;
}

.receipt-reference-row strong {
  margin-top: 0.3rem;
  color: var(--app-navy);
  font-size: 0.95rem;
}

.statement-signatures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding: 3rem 1.5rem 1rem;
  text-align: center;
}

.statement-signatures span {
  color: #4e5360;
  font-size: 0.82rem;
}

.statement-signatures i {
  display: block;
  height: 1px;
  margin-top: 2.5rem;
  background: #8e939e;
}

@media (max-width: 575.98px) {
  .receipt-reference-row,
  .statement-signatures {
    grid-template-columns: 1fr;
  }

  .receipt-reference-row > div {
    padding: 0.9rem 1.25rem;
  }

  .receipt-reference-row > div + div {
    border-inline-start: 0;
    border-top: 1px solid #dfe2e8;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #000 !important;
    background: #fff !important;
    font-size: 12pt !important;
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }

  .app-content,
  .content-container,
  main,
  .module-page,
  .print-page,
  .statement-page,
  .payroll-details-page,
  .centralized-report,
  .professional-report,
  .report-card,
  .official-receipt,
  .expense-voucher {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
    color: #000 !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .official-receipt,
  .expense-voucher {
    min-height: 273mm !important;
  }

  .statement-page {
    min-height: 273mm;
  }

  .app-topbar,
  .app-sidebar,
  .app-footer,
  nav,
  .navbar,
  .sidebar-toggle,
  .page-header.no-print,
  .no-print,
  .filter-card,
  .page-actions,
  .table-actions,
  .receipt-actions,
  .voucher-actions,
  button {
    display: none !important;
  }

  .print-header,
  .print-brand-header {
    display: grid !important;
    grid-template-columns: 31mm minmax(0, 1fr) 34mm;
    align-items: center;
    gap: 5mm;
    width: 100% !important;
    min-height: 30mm;
    padding: 0 0 6mm !important;
    margin: 0 0 7mm !important;
    color: #000 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1.5px solid #000 !important;
    break-inside: avoid;
  }

  .print-logo,
  .print-brand-logo,
  .receipt-school-logo {
    width: 28.6mm !important;
    height: 28.6mm !important;
    object-fit: contain;
  }

  .print-title,
  .print-brand-copy {
    text-align: center;
  }

  .print-brand-copy span {
    font-size: 9pt !important;
  }

  .print-brand-copy h2 {
    margin: 1mm 0 !important;
    color: #000 !important;
    font-size: 18pt !important;
    line-height: 1.35;
  }

  .print-brand-copy p {
    color: #000 !important;
    font-size: 14pt !important;
  }

  .print-brand-copy small,
  .print-date-block span,
  .print-date-block small {
    color: #000 !important;
    font-size: 8.5pt !important;
  }

  .print-date-block {
    min-width: 0 !important;
    padding: 3mm !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
  }

  .print-date-block strong {
    color: #000 !important;
    font-size: 9pt !important;
  }

  .print-section,
  .statement-student-card,
  .financial-summary-card,
  .data-table-card,
  .receipt-reference-row,
  .receipt-information,
  .receipt-amount-panel,
  .voucher-reference-row,
  .voucher-amount,
  .voucher-details {
    break-inside: avoid;
  }

  .statement-student-card {
    width: 100% !important;
    margin-bottom: 5mm !important;
    padding: 5mm !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
  }

  .financial-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4mm !important;
    width: 100% !important;
    margin-bottom: 6mm !important;
  }

  .financial-summary-card {
    min-height: 0 !important;
    padding: 4mm !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
  }

  .financial-summary-card *,
  .statement-student-card *,
  .receipt-information *,
  .receipt-reference-row *,
  .voucher-reference-row *,
  .voucher-details *,
  .voucher-amount * {
    color: #000 !important;
  }

  .financial-card-icon,
  .profile-avatar,
  .receipt-brand-bar {
    display: none !important;
  }

  .data-table-card,
  .statement-table-card,
  .report-table-section {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
  }

  .data-table-header {
    padding: 4mm !important;
    color: #000 !important;
    background: #fff !important;
    border-bottom: 1px solid #000 !important;
  }

  .data-table-header h2 {
    color: #000 !important;
    font-size: 13pt !important;
  }

  .data-table-header p {
    color: #000 !important;
    font-size: 9pt !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow: visible !important;
  }

  .print-table,
  .module-table,
  .report-table,
  .table {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #000 !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 10.5pt !important;
  }

  .print-table th,
  .print-table td,
  .module-table th,
  .module-table td,
  .report-table th,
  .report-table td,
  .table th,
  .table td {
    padding: 3mm 2.5mm !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #000 !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .receipt-reference-row,
  .voucher-reference-row {
    width: 100%;
    margin-bottom: 6mm;
    border: 1px solid #000 !important;
  }

  .receipt-reference-row > div,
  .voucher-reference-row > div {
    padding: 5mm !important;
  }

  .receipt-reference-row > div + div,
  .voucher-reference-row > div + div {
    border-inline-start: 1px solid #000 !important;
  }

  .receipt-amount-panel,
  .voucher-amount {
    margin: 0 0 7mm !important;
    padding: 7mm !important;
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
  }

  .receipt-amount-panel strong,
  .voucher-amount strong {
    color: #000 !important;
    font-size: 24pt !important;
  }

  .receipt-information,
  .voucher-details {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
  }

  .receipt-information > div,
  .voucher-details > div {
    min-height: 20mm;
    padding: 5mm !important;
    border-color: #000 !important;
  }

  .receipt-information span,
  .voucher-details span {
    font-size: 9pt !important;
  }

  .receipt-information strong,
  .voucher-details strong {
    font-size: 11pt !important;
  }

  .official-receipt-footer,
  .voucher-signatures,
  .statement-signatures {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12mm !important;
    width: 100% !important;
    padding: 18mm 0 0 !important;
    color: #000 !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .official-receipt-footer {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .official-receipt-footer p {
    display: none !important;
  }

  .official-receipt-footer div,
  .voucher-signatures span,
  .statement-signatures span {
    color: #000 !important;
    font-size: 10pt !important;
  }

  .official-receipt-footer i,
  .voucher-signatures i,
  .statement-signatures i {
    margin-top: 14mm !important;
    background: #000 !important;
  }
}

/* Global typography and readability */
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.65;
}

.brand-copy strong {
  font-size: 1.05rem;
}

.brand-copy small {
  font-size: 0.76rem;
}

.nav-group-toggle {
  min-height: 46px;
  font-size: 0.92rem;
}

.sidebar-link {
  min-height: 40px;
  padding-block: 0.55rem;
  font-size: 0.88rem;
}

.topbar-eyebrow {
  font-size: 0.78rem;
}

.topbar-page strong {
  font-size: 1.08rem;
}

.user-details strong {
  font-size: 0.9rem;
}

.user-details span,
.logout-button,
.sidebar-toggle {
  font-size: 0.78rem;
}

.app-footer {
  font-size: 0.82rem;
}

.btn {
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.btn-sm {
  padding: 0.38rem 0.65rem;
  font-size: 0.78rem;
}

.form-label,
.form-section-card .form-label {
  font-size: 0.88rem;
}

.form-control,
.form-select,
.input-group-text {
  min-height: 44px;
  font-size: 0.93rem;
}

.form-text,
.form-hint,
.text-danger {
  font-size: 0.78rem;
}

.table > :not(caption) > * > * {
  padding: 0.9rem 0.85rem;
}

.table,
.module-table tbody td {
  font-size: 0.86rem;
}

.table thead th,
.table-light th,
.module-table thead th {
  padding: 0.88rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
}

.badge,
.gender-badge,
.status-badge,
.section-chip,
.payment-method-badge {
  font-size: 0.74rem;
}

.table-actions .btn {
  padding: 0.38rem 0.58rem;
  font-size: 0.74rem;
}

.welcome-kicker {
  font-size: 0.84rem;
}

.welcome-copy h1 {
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
}

.welcome-copy p {
  font-size: 0.98rem;
}

.welcome-year span {
  font-size: 0.8rem;
}

.welcome-year strong {
  font-size: 1.1rem;
}

.summary-copy small {
  font-size: 0.82rem;
}

.summary-copy strong {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.summary-copy em {
  font-size: 0.78rem;
}

.section-kicker {
  font-size: 0.78rem;
}

.panel-heading h2 {
  font-size: 1.08rem;
}

.panel-heading > a {
  font-size: 0.82rem;
}

.dashboard-quick-link strong {
  font-size: 0.9rem;
}

.dashboard-quick-link small {
  font-size: 0.75rem;
}

.financial-overview-card small,
.compact-metric small,
.finance-metric small,
.payroll-item small,
.student-total div > span,
.school-status-panel small,
.school-status-panel div > span {
  font-size: 0.76rem;
}

.financial-overview-card strong {
  font-size: 1.35rem;
}

.compact-metric strong {
  font-size: 1.42rem;
}

.finance-metric strong {
  font-size: 1.28rem;
}

.payroll-item strong {
  font-size: 1.2rem;
}

.payroll-item em {
  font-size: 0.72rem;
}

.student-links a,
.system-links a {
  font-size: 0.86rem;
}

.school-status-panel strong {
  font-size: 1rem;
}

.page-header h1 {
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.page-header p {
  font-size: 0.92rem;
}

.page-eyebrow {
  font-size: 0.78rem;
}

.card-section-heading h2,
.form-section-heading h2,
.data-table-header h2 {
  font-size: 1.02rem;
}

.card-section-heading p,
.form-section-heading p,
.data-table-header p {
  font-size: 0.8rem;
}

.student-cell strong {
  font-size: 0.88rem;
}

.empty-state strong {
  font-size: 0.96rem;
}

.empty-state span:last-child {
  font-size: 0.8rem;
}

.form-submit-bar strong {
  font-size: 0.9rem;
}

.form-submit-bar span,
.generated-receipt-note {
  font-size: 0.76rem;
}

.profile-kicker,
.profile-meta span,
.detail-list dt,
.financial-highlight span,
.financial-highlight small,
.record-meta,
.confirmation-profile div > span,
.confirmation-profile small,
.status-choice span,
.confirmation-alert p,
.confirmation-details dt,
.statement-reference span,
.financial-summary-card div > span,
.financial-summary-card small,
.report-summary-card span,
.report-summary-card small {
  font-size: 0.75rem;
}

.student-profile-main h2 {
  font-size: 1.38rem;
}

.detail-list dd,
.notes-box,
.status-choice strong,
.confirmation-alert strong,
.confirmation-details dd,
.statement-reference strong {
  font-size: 0.87rem;
}

.financial-highlight strong {
  font-size: 1.8rem;
}

.financial-summary-card strong,
.report-summary-card strong {
  font-size: 1.6rem;
}

@media (max-width: 575.98px) {
  html {
    font-size: 15px;
  }

  .page-header h1 {
    font-size: 1.55rem;
  }

  .table,
  .module-table tbody td {
    font-size: 0.84rem;
  }

  .table thead th,
  .table-light th,
  .module-table thead th {
    font-size: 0.78rem;
  }
}

@media print {
  html,
  body {
    font-size: 12px;
  }
}

/* Expenses, employees, attendance, and payroll */
.single-summary-row {
  display: grid;
  grid-template-columns: minmax(280px, 430px);
}

.single-summary-row .report-summary-card {
  min-height: 120px;
}

.type-badge,
.period-chip,
.duration-value,
.view-only-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.expense-type-badge {
  color: #b46b17;
  background: #fff3e4;
}

.attendance-delay {
  color: #c27618;
  background: #fff4e4;
}

.attendance-absence {
  color: #c64255;
  background: #fff0f2;
}

.attendance-leave {
  color: #7651be;
  background: #f3edff;
}

.attendance-other {
  color: #327a99;
  background: #eaf6fb;
}

.period-chip {
  color: var(--app-indigo);
  background: #f0efff;
  font-variant-numeric: tabular-nums;
}

.duration-value {
  color: #a35f17;
  background: #fff5e8;
  font-variant-numeric: tabular-nums;
}

.view-only-label {
  color: var(--app-muted);
  background: #f2f3f6;
}

.payroll-draft {
  color: #6558c9;
  background: #efedff;
}

.compact-module-table {
  min-width: 720px;
}

.compact-empty {
  min-height: 120px;
}

.employee-avatar {
  color: #2f80ed;
  background: #eaf4ff;
}

.employee-profile-avatar {
  background: linear-gradient(145deg, #2f80ed, #6558df);
}

.employee-profile-hero {
  background:
    radial-gradient(circle at 8% 20%, rgba(47, 128, 237, 0.1), transparent 30%),
    #fff;
}

.module-info-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  color: #4b5470;
  background: #f1f4ff;
  border: 1px solid #dfe4fa;
  border-radius: 11px;
  font-size: 0.86rem;
}

.module-info-banner .app-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--app-indigo);
}

.module-info-banner strong,
.module-info-banner span {
  display: block;
}

.module-info-banner strong {
  color: var(--app-navy);
  font-size: 0.92rem;
}

.module-info-banner div > span {
  margin-top: 0.18rem;
  color: var(--app-muted);
  font-size: 0.8rem;
}

.calculation-formula {
  margin-top: 1rem;
  padding: 0.85rem;
  color: #565d73;
  background: #fafafd;
  border: 1px dashed #d9dbe7;
  border-radius: 9px;
}

.calculation-formula span,
.calculation-formula strong {
  display: block;
}

.calculation-formula span {
  color: var(--app-muted);
  font-size: 0.76rem;
}

.calculation-formula strong {
  margin-top: 0.25rem;
  color: var(--app-navy);
  font-size: 0.88rem;
}

.net-salary-value {
  font-size: 0.94rem;
}

.professional-report {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e3eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(32, 35, 66, 0.06);
}

.report-document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 10% 15%, rgba(81, 70, 229, 0.08), transparent 32%),
    #fbfbfe;
  border-bottom: 1px solid #e8eaf1;
}

.report-document-header span,
.report-document-header h2,
.report-document-header p {
  display: block;
}

.report-document-header > div:first-child > span {
  color: var(--app-indigo);
  font-size: 0.76rem;
  font-weight: 800;
}

.report-document-header h2 {
  margin: 0.2rem 0;
  color: var(--app-navy);
  font-size: 1.4rem;
  font-weight: 800;
}

.report-document-header p {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.84rem;
}

.report-total-stamp {
  min-width: 180px;
  padding: 0.8rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e1e3ee;
  border-radius: 10px;
}

.report-total-stamp span,
.report-total-stamp strong {
  display: block;
}

.report-total-stamp span {
  color: var(--app-muted);
  font-size: 0.76rem;
}

.report-total-stamp strong {
  margin-top: 0.2rem;
  color: var(--app-navy);
  font-size: 1.2rem;
}

.report-table {
  min-width: 720px;
}

.report-table thead th {
  padding: 0.9rem;
  color: #5a6176;
  background: #f7f8fc;
  border-color: #e7e9f1;
  font-size: 0.8rem;
  font-weight: 800;
}

.report-table tbody td,
.report-table tfoot th {
  padding: 0.9rem;
  border-color: #eceef4;
  font-size: 0.86rem;
}

.report-table tfoot th {
  color: #fff;
  background: #2f345f;
}

.report-document-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  padding: 2.5rem 2rem 1.25rem;
  color: var(--app-muted);
  font-size: 0.76rem;
  text-align: center;
}

.report-document-footer span::after {
  display: block;
  height: 1px;
  margin-top: 2rem;
  background: #b8bcc8;
  content: "";
}

.report-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.report-summary-strip article {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e7e9f1;
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.report-summary-strip span,
.report-summary-strip strong {
  display: block;
}

.report-summary-strip span {
  color: var(--app-muted);
  font-size: 0.78rem;
}

.report-summary-strip strong {
  margin-top: 0.3rem;
  color: var(--app-navy);
  font-size: 1.35rem;
}

.report-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #eceef4;
}

.payslip-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
}

.payroll-value-card {
  position: relative;
  padding: 1rem;
  overflow: hidden;
  background: #fafafd;
  border: 1px solid #e9ebf2;
  border-radius: 11px;
}

.payroll-value-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
}

.payroll-value-card.base-value::before { background: var(--app-indigo); }
.payroll-value-card.hours-value::before { background: var(--app-orange); }
.payroll-value-card.deduction-value::before { background: var(--app-red); }
.payroll-value-card.net-value::before { background: var(--app-green); }

.payroll-value-card span,
.payroll-value-card strong,
.payroll-value-card small {
  display: block;
}

.payroll-value-card span,
.payroll-value-card small {
  color: var(--app-muted);
  font-size: 0.76rem;
}

.payroll-value-card strong {
  margin: 0.28rem 0;
  color: var(--app-navy);
  font-size: 1.35rem;
}

.report-table-section {
  margin: 0 1.5rem;
  overflow: hidden;
  border: 1px solid #e7e9f1;
  border-radius: 11px;
}

.document-status-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 1.25rem 1.5rem 0;
  padding: 0.85rem;
  border-radius: 9px;
  font-size: 0.82rem;
}

.approved-note {
  color: #176d58;
  background: #eaf8f3;
  border: 1px solid #cdeee3;
}

.cancelled-note {
  color: #9f3949;
  background: #fff1f3;
  border: 1px solid #f4d4d9;
}

@media (max-width: 991.98px) {
  .payslip-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .single-summary-row,
  .report-summary-strip {
    grid-template-columns: 1fr;
  }

  .report-document-header,
  .report-identity-row {
    align-items: stretch;
    flex-direction: column;
  }

  .report-total-stamp {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .payslip-summary-grid {
    grid-template-columns: 1fr;
    padding: 0.9rem;
  }

  .report-document-header,
  .report-identity-row {
    padding: 1rem;
  }

  .report-table-section {
    margin: 0 0.9rem;
  }

  .report-document-footer {
    gap: 1.5rem;
    padding-inline: 1rem;
  }
}

@media print {
  .professional-report {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }

  .report-document-header,
  .payroll-value-card,
  .report-total-stamp,
  .report-table tfoot th {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .report-document-header {
    padding: 12px;
  }

  .report-table,
  .compact-module-table {
    min-width: 0;
  }

  .report-summary-strip {
    display: none;
  }

  .landscape-report {
    width: 100%;
  }

  .landscape-report .report-table th,
  .landscape-report .report-table td {
    padding: 6px;
    font-size: 10px;
  }

  .payslip-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Reports and administration */
.school-settings-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #292e5b, #5146e5);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(45, 49, 101, 0.18);
}

.school-settings-hero .profile-avatar {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.school-settings-hero .profile-avatar .app-icon {
  width: 28px;
  height: 28px;
}

.school-settings-hero > div {
  flex: 1;
}

.school-settings-hero span,
.school-settings-hero h2,
.school-settings-hero p {
  color: #fff;
}

.school-settings-hero > div > span,
.school-settings-hero p {
  color: #d9dcf2;
  font-size: 0.8rem;
}

.school-settings-hero h2 {
  margin: 0.2rem 0;
  font-size: 1.35rem;
}

.school-settings-hero p {
  margin: 0;
}

.order-chip,
.role-badge,
.audit-action-badge,
.entity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.order-chip {
  min-width: 34px;
  color: var(--app-indigo);
  background: #efedff;
}

.role-admin { color: #6c46bd; background: #f2ebff; }
.role-viewer { color: #32749a; background: #eaf5fb; }
.audit-action-badge { color: #6558c9; background: #efedff; }
.entity-badge { color: #37728d; background: #edf6fa; }

.username-code {
  direction: ltr;
  color: #40465d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
}

.user-avatar-cell {
  color: #7651be;
  background: #f2ebff;
}

.user-profile-avatar {
  background: linear-gradient(145deg, #7651be, #5146e5);
}

.module-warning {
  padding: 0.85rem 1rem;
  color: #875f19;
  background: #fff8e9;
  border: 1px solid #f1dfb8;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.7;
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.export-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 210px;
  padding: 1.15rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow);
}

.export-card::after {
  position: absolute;
  inset-inline-end: -28px;
  inset-block-end: -32px;
  width: 100px;
  height: 100px;
  background: currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.055;
}

.export-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  border-radius: 12px;
}

.export-icon .app-icon {
  width: 23px;
  height: 23px;
  color: #fff;
}

.export-card h2 {
  margin: 0;
  font-size: 1rem;
}

.export-card p {
  margin: 0.3rem 0 0;
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

.export-card .btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.export-indigo { color: var(--app-indigo); }
.export-green { color: var(--app-green); }
.export-red { color: var(--app-red); }
.export-blue { color: var(--app-blue); }
.export-orange { color: var(--app-orange); }
.export-purple { color: var(--app-purple); }

.audit-table {
  min-width: 1180px;
}

.audit-time {
  direction: ltr;
  color: #596078;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audit-metadata-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.audit-metadata-grid article {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.audit-metadata-grid span,
.audit-metadata-grid strong,
.audit-metadata-grid small {
  display: block;
}

.audit-metadata-grid article > span,
.audit-metadata-grid small {
  color: var(--app-muted);
  font-size: 0.75rem;
}

.audit-metadata-grid strong {
  margin-top: 0.28rem;
  color: var(--app-navy);
  font-size: 0.88rem;
}

.audit-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.audit-values-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.audit-values-card header {
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  font-weight: 800;
}

.old-values header { color: #a35f17; background: #fff6e9; }
.new-values header { color: #176d58; background: #eaf8f3; }

.audit-values-card pre {
  max-height: 480px;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  color: #31364d;
  background: #fafafd;
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-comparison-card {
  margin-top: 1rem;
}

.audit-old-value {
  color: #8a571e;
  background: #fffaf2 !important;
}

.audit-new-value {
  color: #176d58;
  background: #f3fbf8 !important;
}

.audit-raw-details {
  margin-top: 1rem;
}

.audit-raw-details > summary {
  width: max-content;
  padding: 0.65rem 0.9rem;
  color: var(--app-indigo);
  background: #f3f1ff;
  border: 1px solid #ded9ff;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.audit-raw-details[open] > summary {
  margin-bottom: 1rem;
}

.report-category {
  padding: 1.15rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow);
}

.report-category-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.report-category-heading h2 {
  margin: 0;
  font-size: 1.05rem;
}

.report-category-heading p {
  margin: 0.18rem 0 0;
  color: var(--app-muted);
  font-size: 0.8rem;
}

.reports-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.report-navigation-card {
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: 1rem;
  color: var(--app-text);
  background: #fafafd;
  border: 1px solid #eceef4;
  border-radius: 11px;
  transition: 0.16s ease;
}

.report-navigation-card:hover {
  color: var(--app-text);
  background: #fff;
  border-color: #d5d1ff;
  box-shadow: 0 8px 20px rgba(45, 49, 86, 0.07);
  transform: translateY(-2px);
}

.report-navigation-card h3 {
  margin: 0;
  font-size: 0.96rem;
}

.report-navigation-card p {
  margin: 0.45rem 0;
  color: var(--app-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.report-navigation-card span {
  margin-top: auto;
  color: var(--app-indigo);
  font-size: 0.82rem;
  font-weight: 800;
}

.featured-report-card {
  color: #fff;
  background: linear-gradient(135deg, #292e5b, #5146e5);
  border: 0;
}

.featured-report-card h3,
.featured-report-card span {
  color: #fff;
}

.featured-report-card p {
  color: #dfe0f3;
}

.centralized-report .filter-card {
  padding: 1.15rem;
}

.centralized-report .report-card > .card-body > .text-center {
  padding: 1rem;
  background: #fafafd;
  border-bottom: 1px solid #eceef4;
}

.centralized-report .report-card table {
  min-width: 760px;
}

.financial-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.financial-report-metrics > div {
  width: auto;
}

.financial-report-metrics > div > div {
  height: 100%;
  background: #fafafd;
  border-color: #e8eaf1 !important;
  border-radius: 11px !important;
}

.financial-report-metrics small {
  color: var(--app-muted);
  font-size: 0.78rem;
}

.financial-report-metrics .h5 {
  margin: 0.35rem 0 0;
  color: var(--app-navy);
  font-size: 1.3rem;
  font-weight: 800;
}

.financial-breakdown-card {
  height: 100%;
  padding: 0.9rem;
  background: #fafafd;
  border: 1px solid #e8eaf1;
  border-radius: 11px;
}

.financial-breakdown-card h3 {
  margin: 0 0 0.75rem;
  color: var(--app-navy);
  font-size: 0.92rem;
  font-weight: 800;
}

.financial-breakdown-card .table {
  min-width: 340px;
  background: #fff;
}

@media (max-width: 1199.98px) {
  .export-grid,
  .audit-metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financial-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .reports-card-grid,
  .export-grid,
  .audit-metadata-grid,
  .audit-values-grid,
  .financial-report-metrics {
    grid-template-columns: 1fr;
  }

  .school-settings-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  .centralized-report .report-card > .card-body {
    padding: 0;
  }

  .centralized-report .report-card table {
    min-width: 0;
  }

  .financial-report-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Final cross-system consistency */
.page-header > .btn,
.page-header > a,
.page-actions > .btn,
.page-actions > a,
.page-actions > form > .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-actions > form {
  display: flex;
  margin: 0;
}

.filter-card form {
  align-items: end;
}

.filter-card .form-label {
  min-height: 1.45rem;
  display: flex;
  align-items: flex-end;
}

.filter-card .btn {
  min-height: 44px;
}

.filter-card .filter-actions,
.filter-card form > [class*="col-"]:has(> .btn) {
  align-items: center;
}

.data-table-card .table-responsive,
.professional-report .table-responsive {
  width: 100%;
}

.data-table-card .table,
.professional-report .table {
  margin-bottom: 0;
}

.table-actions > form {
  display: inline-flex;
  margin: 0;
}

.table-actions .btn {
  min-height: 32px;
}

.status-badge,
.gender-badge,
.payment-method-badge,
.type-badge,
.role-badge,
.audit-action-badge,
.entity-badge {
  line-height: 1.25;
}

.form-section-card .text-danger {
  display: block;
  margin-top: 0.3rem;
}

.form-section-card .form-check {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-submit-bar .btn {
  min-height: 42px;
}

.report-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.report-summary-strip article {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-summary-card,
.financial-summary-card,
.summary-card {
  font-variant-numeric: tabular-nums;
}

.centralized-report .professional-report {
  min-width: 0;
}

.centralized-report .professional-report .table th {
  color: #596078;
  background: #f7f8fc;
  font-weight: 800;
  white-space: nowrap;
}

.centralized-report .professional-report .table td {
  border-color: #eceef4;
  vertical-align: middle;
}

.centralized-report .professional-report .table tfoot th {
  color: #fff;
  background: #2f345f;
}

.centralized-report .professional-report .card-body {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-actions > .btn,
  .page-actions > a,
  .page-actions > form {
    flex: 1 1 auto;
  }

  .page-actions > form > .btn {
    width: 100%;
  }

  .filter-card form > [class*="col-"]:has(> .btn),
  .filter-card .filter-actions {
    width: 100%;
  }

  .filter-card form > [class*="col-"] > .btn,
  .filter-card .filter-actions .btn,
  .filter-card .filter-actions a {
    flex: 1 1 auto;
  }

  .form-submit-bar > div:last-child {
    width: 100%;
  }
}

@media print {
  .table-responsive {
    overflow: visible !important;
  }

  .professional-report,
  .report-card,
  .print-page {
    color: #202342;
    background: #fff !important;
  }

  .professional-report .table th,
  .professional-report .table td {
    break-inside: avoid;
  }

  .report-summary-strip.no-print,
  .filter-card.no-print,
  .page-header.no-print {
    display: none !important;
  }
}

/* Branding and printable documents */
.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}

.brand-logo-fallback {
  display: none;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.7rem;
  color: var(--app-navy);
}

.login-brand img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
}

.login-brand-fallback {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: #3157d5;
  font-size: 0.75rem;
  font-weight: 900;
}

.login-brand > div { display: grid; }
.login-brand > div strong { color: #2d3a55; font-size: 1rem; }
.login-brand > div span { color: #818b9d; font-size: .8rem; }

.print-brand-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #fbfbfe;
  border-bottom: 1px solid #e4e6ee;
}

.print-brand-logo,
.receipt-school-logo {
  width: 75px;
  height: 75px;
  flex: 0 0 auto;
  object-fit: contain;
}

.print-brand-copy {
  flex: 1;
  min-width: 0;
}

.print-brand-copy span,
.print-brand-copy h2,
.print-brand-copy p,
.print-brand-copy small,
.print-date-block span,
.print-date-block strong,
.print-date-block small {
  display: block;
}

.print-brand-copy span {
  color: var(--app-indigo);
  font-size: 0.76rem;
  font-weight: 800;
}

.print-brand-copy h2 {
  margin: 0.15rem 0;
  color: var(--app-navy);
  font-size: 1.2rem;
  font-weight: 800;
}

.print-brand-copy p {
  margin: 0;
  color: #4d546c;
  font-size: 0.9rem;
  font-weight: 700;
}

.print-brand-copy small,
.print-date-block span,
.print-date-block small {
  color: var(--app-muted);
  font-size: 0.72rem;
}

.print-date-block {
  min-width: 128px;
  padding: 0.65rem 0.8rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e0e3ec;
  border-radius: 9px;
}

.print-date-block strong {
  margin: 0.15rem 0;
  color: var(--app-navy);
  direction: ltr;
  font-size: 0.86rem;
}

.document-status-strip {
  display: flex;
  justify-content: flex-end;
  padding: 0.8rem 1.5rem 0;
}

.voucher-body {
  min-height: 100vh;
  padding: 2rem 1rem;
  color: #202124;
  background: #f3f5f9;
}

.expense-voucher {
  max-width: 820px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(32, 35, 66, 0.1);
}

.voucher-reference-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #dfe2e8;
}

.voucher-reference-row > div,
.voucher-details > div {
  padding: 1rem 1.5rem;
}

.voucher-reference-row > div + div {
  border-inline-start: 1px solid #dfe2e8;
}

.voucher-reference-row span,
.voucher-reference-row strong,
.voucher-details span,
.voucher-details strong,
.voucher-amount span,
.voucher-amount strong,
.voucher-amount small {
  display: block;
}

.voucher-reference-row span,
.voucher-details span,
.voucher-amount span,
.voucher-amount small {
  color: #656b78;
  font-size: 0.76rem;
}

.voucher-reference-row strong,
.voucher-details strong {
  margin-top: 0.3rem;
  color: #202124;
  font-size: 0.94rem;
}

.document-code {
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.voucher-amount {
  margin: 1.4rem 1.5rem;
  padding: 1.2rem;
  text-align: center;
  border: 2px solid #262a35;
}

.voucher-amount strong {
  margin: 0.15rem 0;
  color: #111;
  font-size: 2rem;
}

.voucher-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 1.5rem;
  border: 1px solid #dfe2e8;
}

.voucher-details > div {
  border-bottom: 1px solid #dfe2e8;
}

.voucher-details > div:nth-child(even) {
  border-inline-start: 1px solid #dfe2e8;
}

.voucher-details .voucher-notes {
  grid-column: 1 / -1;
  min-height: 96px;
  border-bottom: 0;
  border-inline-start: 0;
}

.voucher-signatures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding: 3rem 1.5rem 1.5rem;
  text-align: center;
}

.voucher-signatures span {
  color: #4e5360;
  font-size: 0.8rem;
}

.voucher-signatures i {
  display: block;
  height: 1px;
  margin-top: 2.4rem;
  background: #8e939e;
}

.voucher-actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  background: #f8f9fb;
  border-top: 1px solid #e1e3e9;
}

@media (max-width: 575.98px) {
  .auth-content {
    padding: 0.75rem;
  }

  .auth-content > .row {
    margin-top: 0 !important;
  }

  .login-brand img {
    width: 83px;
    height: 83px;
  }

  .login-brand-fallback {
    width: 83px;
    height: 83px;
  }

  .print-brand-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1rem;
  }

  .print-date-block {
    width: 100%;
  }

  .voucher-body {
    padding: 0;
  }

  .expense-voucher {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .voucher-reference-row,
  .voucher-details,
  .voucher-signatures {
    grid-template-columns: 1fr;
  }

  .voucher-reference-row > div + div,
  .voucher-details > div:nth-child(even) {
    border-inline-start: 0;
  }

  .voucher-reference-row > div + div {
    border-top: 1px solid #dfe2e8;
  }

  .voucher-details .voucher-notes {
    grid-column: auto;
  }

  .voucher-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media print {
  body,
  .receipt-body,
  .voucher-body {
    padding: 0 !important;
    color: #000 !important;
    background: #fff !important;
  }

  .app-topbar,
  .app-sidebar,
  .app-footer,
  .sidebar-toggle,
  .no-print,
  .page-actions,
  .filter-card,
  .voucher-actions,
  .receipt-actions,
  button {
    display: none !important;
  }

  .print-brand-header {
    padding: 8mm 0 5mm;
    color: #000;
    background: #fff !important;
    border-bottom: 1px solid #000;
    break-inside: avoid;
  }

  .print-brand-logo,
  .receipt-school-logo {
    width: 23.4mm;
    height: 23.4mm;
    object-fit: contain;
  }

  .print-brand-copy span,
  .print-brand-copy h2,
  .print-brand-copy p,
  .print-brand-copy small,
  .print-date-block span,
  .print-date-block strong,
  .print-date-block small {
    color: #000 !important;
  }

  .print-date-block {
    background: #fff !important;
    border-color: #000;
  }

  .expense-voucher,
  .official-receipt {
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none !important;
  }

  .voucher-reference-row,
  .voucher-details,
  .voucher-reference-row > div + div,
  .voucher-details > div,
  .voucher-details > div:nth-child(even) {
    border-color: #000;
  }

  .voucher-amount {
    border-color: #000;
  }

  .voucher-amount *,
  .voucher-reference-row *,
  .voucher-details *,
  .voucher-signatures * {
    color: #000 !important;
  }

  .professional-report,
  .report-card,
  .print-page {
    box-shadow: none !important;
  }

  @page {
    size: A4;
    margin: 12mm;
  }
}

/* Final Chrome print alignment override */
@media print {
  .app-body,
  .app-content,
  .content-container,
  body > main,
  main[role="main"],
  .module-page {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  .app-content {
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  .content-container {
    flex: none !important;
  }

  .print-page,
  .official-receipt.print-page,
  .statement-page.print-page,
  .expense-voucher.print-page {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 186mm !important;
    min-width: 186mm !important;
    max-width: 186mm !important;
    margin: 0 auto !important;
    margin-inline: auto !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  .app-topbar,
  .app-sidebar,
  .app-footer,
  .sidebar-toggle,
  .navbar,
  .no-print,
  .page-actions,
  .filter-card,
  .table-actions,
  .receipt-actions,
  .voucher-actions {
    display: none !important;
  }
}
.portal-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1180px;
}

.portal-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  min-height: 164px;
  padding: 1.25rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #202342, #4f46d7 58%, #2ca6a4);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(39, 42, 75, 0.16);
}

.teacher-portal-hero {
  background: linear-gradient(135deg, #202342, #3157b8 58%, #33b892);
}

.portal-hero-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.portal-avatar {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  font-size: 1.8rem;
  font-weight: 800;
}

.portal-kicker,
.portal-card-header span,
.portal-summary-card span {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.portal-hero .portal-kicker,
.portal-hero-side span {
  color: rgba(255, 255, 255, 0.78);
}

.portal-hero h1 {
  margin: 0.25rem 0 0.5rem;
  color: #fff;
  font-size: clamp(1.45rem, 4.5vw, 2.2rem);
  line-height: 1.25;
}

.portal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portal-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.78rem;
}

.portal-hero-side {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 190px;
  text-align: start;
}

.portal-hero-button {
  align-self: center;
  min-height: 44px;
  font-weight: 800;
}

.portal-summary-grid,
.portal-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.portal-action-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.portal-summary-card,
.portal-action-card,
.portal-card {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.portal-summary-card {
  min-height: 112px;
  padding: 1rem;
}

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

.portal-summary-card strong {
  margin: 0.25rem 0;
  color: var(--app-navy);
  font-size: 1.45rem;
  line-height: 1.2;
}

.portal-summary-card small {
  color: var(--app-muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

.portal-money-card {
  background: linear-gradient(145deg, #fff, #f5fbf9);
  border-color: #d8f1e9;
}

.portal-action-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 86px;
  padding: 0.9rem;
  color: var(--app-text);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.portal-action-card:hover {
  color: var(--app-text);
  border-color: #cfd3f9;
  box-shadow: 0 12px 26px rgba(39, 42, 75, 0.1);
  transform: translateY(-2px);
}

.portal-action-card strong {
  color: var(--app-navy);
  font-size: 0.92rem;
}

.portal-action-card span {
  margin-top: 0.35rem;
  color: var(--app-muted);
  font-size: 0.72rem;
}

.portal-action-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--app-indigo), var(--app-blue));
  border-color: transparent;
}

.portal-action-primary strong,
.portal-action-primary span,
.portal-action-primary:hover {
  color: #fff;
}

.portal-card {
  padding: 1rem;
}

.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.portal-card-header h2 {
  margin: 0.2rem 0 0;
  color: var(--app-navy);
  font-size: 1.05rem;
}

.portal-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.portal-badge-soft {
  color: #464d68;
  background: #f2f4fa;
}

.portal-badge-success {
  color: #08775e;
  background: #e6f8f2;
}

.portal-badge-warning {
  color: #9a5d07;
  background: #fff3df;
}

.portal-badge-info {
  color: #2459a6;
  background: #e9f1ff;
}

.portal-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.portal-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem;
  background: #fbfcff;
  border: 1px solid #edf0f7;
  border-radius: 10px;
}

.portal-list-row strong,
.portal-list-row span,
.portal-list-row small {
  display: block;
}

.portal-list-row strong {
  color: var(--app-navy);
  font-size: 0.9rem;
}

.portal-list-row span,
.portal-list-row small {
  color: var(--app-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.portal-row-metric {
  min-width: 120px;
  text-align: end;
}

.portal-row-metric strong {
  font-size: 0.84rem;
}

.portal-finance-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.portal-finance-strip div {
  padding: 0.85rem;
  background: #f7f8fc;
  border: 1px solid var(--app-border);
  border-radius: 10px;
}

.portal-finance-strip span,
.portal-finance-strip strong {
  display: block;
}

.portal-finance-strip span {
  color: var(--app-muted);
  font-size: 0.72rem;
}

.portal-finance-strip strong {
  margin-top: 0.25rem;
  color: var(--app-navy);
}

.teacher-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.teacher-assignment-card {
  padding: 1rem;
  background: #fbfcff;
  border: 1px solid #e8ebf4;
  border-radius: 12px;
}

.teacher-assignment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.teacher-assignment-head h3 {
  margin: 0.15rem 0;
  color: var(--app-navy);
  font-size: 1.05rem;
}

.teacher-assignment-head p,
.portal-subjects-line {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.78rem;
}

.portal-subjects-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.portal-subjects-line span {
  padding: 0.2rem 0.45rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 999px;
}

.portal-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.portal-button-row .btn {
  min-height: 34px;
}

.portal-warning {
  margin-bottom: 0.7rem;
  padding: 0.65rem 0.75rem;
  color: #925d10;
  background: #fff7e8;
  border: 1px solid #f7ddb1;
  border-radius: 10px;
  font-size: 0.76rem;
}

.portal-empty {
  padding: 1rem;
  color: var(--app-muted);
  background: #f8f9fd;
  border: 1px dashed #d9deeb;
  border-radius: 10px;
  text-align: center;
}

.teacher-student-row {
  align-items: flex-start;
}

.portal-student-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.45rem;
}

@media (max-width: 1199.98px) {
  .portal-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 767.98px) {
  .portal-page {
    gap: 0.8rem;
  }

  .portal-hero,
  .portal-hero-main,
  .teacher-assignment-head,
  .portal-card-header,
  .portal-list-row {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-hero {
    min-height: 0;
    padding: 1rem;
    border-radius: 14px;
  }

  .portal-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    font-size: 1.45rem;
  }

  .portal-hero-side,
  .portal-row-metric,
  .portal-student-actions {
    align-items: stretch;
    min-width: 0;
    text-align: start;
  }

  .portal-summary-grid,
  .portal-action-grid,
  .teacher-assignment-grid,
  .portal-finance-strip {
    grid-template-columns: 1fr;
  }

  .portal-action-card,
  .portal-summary-card {
    min-height: 78px;
  }

  .portal-card {
    padding: 0.8rem;
    border-radius: 10px;
  }

  .portal-button-row .btn,
  .portal-card-header .btn,
  .portal-hero-button {
    width: 100%;
  }
}

.portal-v2 { --portal-blue:#3157d5;--portal-teal:#0f9f8f;--portal-amber:#e69b22;--portal-green:#15966f;--portal-purple:#7655d9;gap:1.15rem; }
.portal-v2 .portal-hero { position:relative;min-height:210px;padding:1.75rem;border:0;border-radius:26px;box-shadow:0 24px 55px rgba(38,54,116,.2); }
.portal-v2 .teacher-portal-hero { background:linear-gradient(125deg,#163153 0%,#2760ad 56%,#20a47d 100%); }
.portal-hero-decoration { position:absolute;inset:auto auto -90px -50px;width:260px;height:260px;border:44px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none; }
.portal-v2 .portal-avatar { width:90px;height:90px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 16px 28px rgba(14,28,80,.2);font-size:2.25rem; }
.portal-hero-message { max-width:590px;margin:-.1rem 0 .85rem;color:rgba(255,255,255,.82);font-size:.9rem; }
.portal-identity-card { position:relative;z-index:1;min-width:230px;align-self:center;padding:1rem 1.15rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;backdrop-filter:blur(8px); }
.portal-identity-card>div { display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem; }.portal-identity-card small,.portal-identity-card strong{color:#fff;font-size:.75rem}.portal-identity-card small{opacity:.72}
.portal-section-nav { position:sticky;top:76px;z-index:12;display:flex;gap:.35rem;padding:.45rem;overflow-x:auto;background:rgba(255,255,255,.94);border:1px solid #e7ebf4;border-radius:14px;box-shadow:0 10px 25px rgba(31,49,94,.08);scrollbar-width:none; }
.portal-section-nav a { flex:0 0 auto;padding:.6rem .85rem;color:#56617a;border-radius:10px;font-size:.78rem;font-weight:800; }.portal-section-nav a:hover{color:var(--portal-blue);background:#f0f4ff}.portal-section-nav .portal-section-nav-primary{margin-inline-start:auto;color:#fff;background:var(--portal-blue)}
.portal-v2 .portal-summary-grid{gap:.9rem}.portal-v2 .portal-summary-card{display:flex;align-items:center;gap:.8rem;min-height:126px;padding:1rem;overflow:hidden;border:0;border-radius:18px;box-shadow:0 12px 30px rgba(32,49,91,.08)}.portal-v2 .portal-summary-card div{min-width:0}.portal-v2 .portal-summary-card small,.portal-v2 .portal-summary-card p{display:block;margin:0;color:#748097;font-size:.72rem}.portal-v2 .portal-summary-card strong{margin:.2rem 0;font-size:1.5rem}.portal-v2 .portal-summary-card strong em{margin-inline-start:.1rem;font-size:.75rem;font-style:normal}
.portal-stat-icon{display:grid!important;width:45px;height:45px;flex:0 0 45px;place-items:center;border-radius:14px;color:var(--portal-blue)!important;background:#edf2ff;font-size:.95rem!important;font-weight:900}.accent-teal .portal-stat-icon{color:var(--portal-teal)!important;background:#e8faf7}.accent-amber .portal-stat-icon{color:#b66c08!important;background:#fff4df}.accent-green .portal-stat-icon{color:var(--portal-green)!important;background:#e9f9f3}.accent-purple .portal-stat-icon{color:var(--portal-purple)!important;background:#f2edff}
.portal-overview-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:1rem}.portal-v2 .portal-card{padding:1.25rem;border:0;border-radius:20px;box-shadow:0 12px 32px rgba(32,49,91,.075)}.portal-v2 .portal-card-header h2{font-size:1.18rem}.portal-v2 .portal-card-header p{margin:.25rem 0 0;color:#79849a;font-size:.76rem}.portal-count-pill{display:grid;min-width:38px;height:38px;place-items:center;color:var(--portal-blue);background:#edf2ff;border-radius:12px}
.portal-subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.portal-subject-tile{display:flex;align-items:center;gap:.6rem;padding:.75rem;background:#f8faff;border:1px solid #edf0f7;border-radius:13px}.portal-subject-tile span{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;color:var(--portal-blue);background:#e9efff;border-radius:10px;font-weight:900}.portal-subject-tile strong{color:#263454;font-size:.78rem}
.portal-glance-list{display:grid;gap:.25rem}.portal-glance-list>div{display:grid;grid-template-columns:10px 1fr;gap:.65rem;padding:.6rem 0;border-bottom:1px solid #eef1f6}.portal-glance-list>div:last-child{border:0}.portal-glance-list p{display:grid;grid-template-columns:1fr auto;margin:0}.portal-glance-list small{grid-column:1/-1;color:#8a94a8;font-size:.68rem}.portal-glance-list strong,.portal-glance-list em{color:#33405e;font-size:.76rem;font-style:normal}.glance-dot{width:8px;height:8px;margin-top:.35rem;border-radius:50%;background:var(--portal-blue)}.dot-amber{background:var(--portal-amber)}.dot-green{background:var(--portal-green)}.dot-purple{background:var(--portal-purple)}
.portal-section-card{scroll-margin-top:145px}.portal-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}.portal-mini-stats>div{padding:.75rem .85rem;background:#f8faff;border:1px solid #edf0f7;border-radius:12px}.portal-mini-stats span,.portal-mini-stats strong{display:block}.portal-mini-stats span{color:#78839a;font-size:.7rem}.portal-mini-stats strong{margin-top:.15rem;color:#273552;font-size:1.05rem}
.portal-table-wrap{overflow-x:auto;border:1px solid #edf0f7;border-radius:14px}.portal-table{width:100%;min-width:720px;border-collapse:collapse}.portal-table th{padding:.8rem;color:#68738b;background:#f7f9fd;font-size:.72rem}.portal-table td{padding:.85rem;color:#58637a;border-top:1px solid #edf0f7;font-size:.76rem}.portal-table td small{display:block;margin-top:.15rem;color:#929bad}.portal-score{display:inline-flex;min-width:58px;justify-content:center;padding:.3rem .55rem;border-radius:999px;font-weight:900}.score-high{color:#08775e;background:#e7f8f2}.score-mid{color:#a0640d;background:#fff3df}.score-low{color:#b53838;background:#ffeded}
.portal-event-list{display:grid;gap:.55rem}.portal-event-list article{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:.85rem;padding:.75rem;background:#fbfcff;border:1px solid #edf0f7;border-radius:13px}.portal-event-list time{display:grid;place-items:center;padding:.4rem;color:#3b4a68;background:#f0f4fb;border-radius:10px}.portal-event-list time strong{font-size:1.1rem}.portal-event-list time span,.portal-event-list article>div span{color:#8993a6;font-size:.68rem}.portal-event-list article>div strong{display:block;color:#2c3956;font-size:.82rem}.portal-badge-danger{color:#b53838;background:#ffeded}.portal-empty strong,.portal-empty span{display:block}.portal-empty strong{color:#48536b}.portal-empty span{margin-top:.25rem;font-size:.75rem}.portal-empty-success{color:#187b63;background:#f1fbf7;border-color:#cceee2}
.portal-note-timeline{position:relative;margin-inline-start:.4rem;padding-inline-start:1.35rem}.portal-note-timeline::before{position:absolute;inset-block:.4rem;inset-inline-start:.25rem;width:2px;content:"";background:#e4e8f1}.portal-note-timeline article{position:relative;padding:.2rem 0 1.15rem}.note-timeline-dot{position:absolute;inset-inline-start:-1.4rem;top:.35rem;width:12px;height:12px;background:var(--portal-purple);border:3px solid #eee9ff;border-radius:50%}.portal-note-timeline time{color:#8993a7;font-size:.68rem}.portal-note-timeline h3{margin:.2rem 0;color:#2b3855;font-size:.9rem}.portal-note-timeline p{margin:0;color:#5e6980;font-size:.78rem;line-height:1.8}.portal-note-timeline small{color:#98a0b0;font-size:.66rem}
.portal-finance-card{background:linear-gradient(145deg,#fff 60%,#f3fbf8)!important}.portal-finance-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.portal-finance-summary>div{padding:.95rem;background:rgba(255,255,255,.9);border:1px solid #e7edf0;border-radius:13px}.portal-finance-summary small,.portal-finance-summary strong{display:block}.portal-finance-summary small{color:#7d889c;font-size:.7rem}.portal-finance-summary strong{margin-top:.2rem;color:#263552;font-size:1.2rem}.portal-finance-summary .is-due strong{color:#b85c39}.portal-progress-block{margin:1rem 0}.portal-progress-block>div:first-child{display:flex;justify-content:space-between;color:#69758c;font-size:.73rem}.portal-progress{height:10px;margin-top:.45rem;overflow:hidden;background:#e7ecef;border-radius:999px}.portal-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--portal-teal),#44c59e);border-radius:inherit}.portal-subheading{margin:1.25rem 0 .7rem;color:#2a3855;font-size:.9rem}
.portal-payment-list{display:grid;gap:.5rem}.portal-payment-list article{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:.65rem;padding:.7rem;border:1px solid #e9eef1;border-radius:12px;background:#fff}.payment-icon{display:grid;width:34px;height:34px;place-items:center;color:#168566;background:#e9f8f2;border-radius:10px;font-weight:900}.portal-payment-list strong{color:#2c3955;font-size:.8rem}.portal-payment-list small{color:#8792a5;font-size:.68rem}
.portal-action-icon{display:grid;width:34px;height:34px;place-items:center;color:var(--portal-blue)!important;background:#edf2ff;border-radius:10px;font-weight:900}.portal-action-primary .portal-action-icon{color:#fff!important;background:rgba(255,255,255,.18)}.teacher-action-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.teacher-student-identity{display:flex;align-items:center;gap:.7rem}.student-mini-avatar,.entry-student-cell>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;color:var(--portal-blue);background:#eaf0ff;border-radius:11px;font-weight:900}.teacher-student-identity div{min-width:0}
.workspace-actions-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;background:#fff;border:1px solid var(--app-border);border-radius:14px;box-shadow:var(--app-shadow)}.workspace-actions-label span,.workspace-actions-label small{display:block}.workspace-actions-label span{color:var(--app-navy);font-weight:800}.workspace-actions-label small{margin-top:.2rem;color:var(--app-muted);font-size:.72rem}.workspace-actions-card>.d-flex{justify-content:flex-end}
.academic-entry-page{max-width:1400px}.entry-table-card{overflow:hidden}.entry-table-scroll{max-height:65vh}.academic-entry-table thead{position:sticky;top:0;z-index:3}.academic-entry-table th{white-space:nowrap;background:#f4f7fc!important;box-shadow:inset 0 -1px #dfe5ef}.academic-entry-table td{vertical-align:middle}.academic-entry-table .form-control,.academic-entry-table .form-select{min-width:88px}.entry-student-cell{display:flex;align-items:center;gap:.55rem;min-width:150px}.entry-save-bar{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;color:#5f6b82;background:rgba(255,255,255,.96);border-top:1px solid #e6eaf1;box-shadow:0 -10px 25px rgba(32,49,91,.06);font-size:.76rem}.entry-save-bar .btn{min-width:150px}
@media(max-width:991.98px){.portal-overview-grid{grid-template-columns:1fr}.portal-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.workspace-actions-card{align-items:stretch;flex-direction:column}.workspace-actions-card>.d-flex{justify-content:flex-start}}
@media(max-width:767.98px){.portal-v2 .portal-hero{padding:1.2rem;border-radius:20px}.portal-v2 .portal-avatar{width:64px;height:64px;border-radius:17px;font-size:1.55rem}.portal-identity-card{width:100%;min-width:0}.portal-section-nav{top:62px}.portal-v2 .portal-summary-card{min-height:104px;padding:.8rem}.portal-stat-icon{width:38px;height:38px;flex-basis:38px}.portal-subject-grid,.portal-mini-stats,.portal-finance-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.portal-event-list article{grid-template-columns:52px 1fr}.portal-event-list article>.portal-badge{grid-column:2;justify-self:start}.portal-payment-list article{grid-template-columns:34px 1fr}.portal-payment-list article>strong:last-child{grid-column:2}.entry-save-bar{align-items:stretch;flex-direction:column}.entry-save-bar .btn{width:100%}}
@media(max-width:479.98px){.portal-subject-grid,.portal-mini-stats,.portal-finance-summary{grid-template-columns:1fr!important}.portal-v2 .portal-card{padding:.9rem;border-radius:15px}.portal-v2 .portal-card-header{align-items:stretch}.portal-section-nav .portal-section-nav-primary{margin-inline-start:0}}

.teacher-portal-page.portal-v2{width:100%;max-width:1360px;margin-inline:auto;gap:14px}.teacher-portal-page .teacher-portal-hero{min-height:150px;padding:22px 26px}.teacher-portal-page .portal-avatar{width:68px;height:68px;font-size:1.65rem}.teacher-portal-page .portal-hero h1{font-size:1.7rem}.teacher-portal-page .portal-hero-message{margin-bottom:.45rem}.portal-hero-inline-cta{display:inline-flex;margin-top:.65rem;padding:.48rem .75rem;color:#244e93!important;background:#fff;border-radius:9px;font-size:.7rem;font-weight:900}
.teacher-action-strip{display:flex;flex-wrap:wrap;gap:7px;padding:7px;background:#fff;border:1px solid #e7eaf1;border-radius:13px;box-shadow:0 5px 15px rgba(36,51,86,.04)}.teacher-action-strip .portal-action-card{display:flex;align-items:center;justify-content:flex-start;flex:1 1 150px;min-height:48px;padding:7px 10px;flex-direction:row;gap:8px;border:0;border-radius:9px;box-shadow:none}.teacher-action-strip .portal-action-card:hover{background:#f2f5fc;transform:none}.teacher-action-strip .portal-action-card strong{font-size:.72rem}.teacher-action-strip .portal-action-primary{background:#edf2ff}.teacher-action-strip .portal-action-primary strong{color:#3157b8}.teacher-action-strip .portal-action-icon{width:32px;height:32px;flex:0 0 32px}
.teacher-portal-page>.portal-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.teacher-portal-page .portal-summary-card{min-height:94px;padding:13px;border-radius:13px}.teacher-scope-section{border-top:3px solid #3157d5!important;box-shadow:0 9px 24px rgba(38,73,165,.08)!important}.teacher-scope-section .teacher-assignment-grid{gap:10px}.teacher-scope-section .teacher-assignment-card{padding:13px;border-radius:11px}.teacher-scope-section .teacher-assignment-head{margin-bottom:8px}.teacher-scope-section .portal-button-row{margin-top:8px}
@media(max-width:991.98px){.teacher-portal-page>.portal-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-action-strip .portal-action-card{flex-basis:calc(50% - 7px)}}
@media(max-width:575.98px){.teacher-portal-page>.portal-summary-grid{grid-template-columns:1fr}.teacher-action-strip{display:grid;grid-template-columns:1fr 1fr}.teacher-action-strip .portal-action-card{width:100%}}

/* Teacher assignments admin page */
/* Student portal commercial typography and academic cards */
.student-portal-welcome h1{font-size:clamp(2rem,1.75rem + .65vw,2.3rem);line-height:1.25}.student-portal-welcome>p{font-size:clamp(.95rem,.9rem + .12vw,1rem);line-height:1.65}.student-portal-eyebrow{font-size:.875rem}.student-portal-badges span{font-size:.8125rem}.student-portal-contact{font-size:.8125rem;line-height:1.55}.student-portal-hero-action{padding:.65rem 1rem;font-size:.9rem}.student-portal-nav a{padding:.58rem .9rem;font-size:.875rem}
.student-portal-kpi small{font-size:.875rem;line-height:1.45}.student-portal-kpi strong{font-size:clamp(1.5rem,1.4rem + .3vw,1.8rem);line-height:1.25}.student-portal-kpi p{font-size:.8rem;line-height:1.45}.student-portal-card-header span{font-size:.8rem}.student-portal-card-header h2{font-size:clamp(1.25rem,1.15rem + .25vw,1.45rem);line-height:1.35}.student-portal-card-header a{font-size:.875rem}.student-portal-result strong,.student-portal-activity-list strong{font-size:.95rem;line-height:1.45}.student-portal-result small,.student-portal-activity-list small,.student-portal-activity-list time,.student-portal-activity-list p{font-size:.8125rem;line-height:1.5}.student-portal-score,.student-portal-tag{font-size:.8rem}.student-portal-finance-totals small,.student-portal-exception-counts span{font-size:.8125rem}.student-portal-finance-totals strong,.student-portal-exception-counts strong{font-size:1.15rem}.student-portal-progress-label{font-size:.8125rem}.student-portal-payment-list strong,.student-portal-exception-list>div>div strong{font-size:.9rem}.student-portal-payment-list small,.student-portal-exception-list>div>div small{font-size:.78rem;line-height:1.45}.student-portal-note-list h3{font-size:1rem}.student-portal-note-list p{font-size:.9rem}.student-portal-note-list time,.student-portal-note-list small{font-size:.8rem}.student-portal-profile small,.student-portal-profile dt{font-size:.78rem}.student-portal-profile strong{font-size:1rem}.student-portal-profile p,.student-portal-profile dd,.student-portal-profile>a{font-size:.875rem}
.student-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.student-subject-card{min-width:0;padding:18px;background:#fff;border:1px solid #e5e9f0;border-radius:15px}.student-subject-card header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px}.student-subject-icon{display:grid;width:42px;height:42px;place-items:center;color:#3157d5;background:#edf2ff;border-radius:11px;font-size:.95rem;font-weight:900}.student-subject-card h3,.student-subject-card p{margin:0}.student-subject-card h3{color:#2e3b56;font-size:1.05rem}.student-subject-card p{margin-top:.15rem;color:#818b9e;font-size:.82rem}.student-subject-percentage{padding:.35rem .6rem;color:#3157d5;background:#edf2ff;border-radius:999px;font-size:.9rem;font-weight:900}.student-subject-components{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.student-subject-components>div{padding:10px;text-align:center;background:#f8fafc;border-radius:10px}.student-subject-components span,.student-subject-components strong{display:block}.student-subject-components span{color:#828c9f;font-size:.78rem}.student-subject-components strong{margin-top:.25rem;color:#303d57;font-size:1rem}.student-subject-components small{color:#8c95a6;font-size:.72rem;font-weight:500}.student-subject-progress{height:7px;overflow:hidden;background:#e9edf2;border-radius:999px}.student-subject-progress span{display:block;height:100%;background:#3157d5;border-radius:inherit}.student-subject-card footer{display:flex;justify-content:space-between;gap:12px;margin-top:11px;color:#727d92;font-size:.82rem}.student-subject-card footer strong{margin-inline-start:.25rem;color:#34415b}.student-subject-card.is-excellent .student-subject-percentage{color:#147254;background:#e7f7f0}.student-subject-card.is-excellent .student-subject-progress span{background:#178d69}.student-subject-card.is-very-good .student-subject-percentage{color:#08776c;background:#e5f7f4}.student-subject-card.is-very-good .student-subject-progress span{background:#109989}.student-subject-card.is-good .student-subject-percentage{color:#285aa8;background:#eaf1ff}.student-subject-card.is-fair .student-subject-percentage{color:#96600e;background:#fff3df}.student-subject-card.is-fair .student-subject-progress span{background:#c98217}.student-subject-card.is-watch .student-subject-percentage{color:#a74444;background:#ffeded}.student-subject-card.is-watch .student-subject-progress span{background:#b84b4b}
.profile-print-only { display: none; }

.academic-profile {
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
  padding-block: 4px 28px;
  color: #26334a;
}

.academic-profile-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 164px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(38, 54, 86, .06);
}

.academic-profile-avatar {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  color: #fff;
  background: #3157d5;
  border-radius: 18px;
  font-size: 1.75rem;
  font-weight: 900;
}

.academic-profile-hero-copy { min-width: 0; }
.academic-profile-eyebrow { color: #65738b; font-size: .875rem; font-weight: 700; }
.academic-profile-hero h1 { margin: 3px 0 10px; color: #1f2d46; font-size: clamp(1.5rem, 1.25rem + .65vw, 1.8rem); font-weight: 900; }
.academic-profile-badges, .academic-profile-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.academic-profile-badges span, .academic-profile-badges strong { padding: 5px 10px; border-radius: 999px; font-size: .82rem; line-height: 1.4; }
.academic-profile-badges span { color: #43526c; background: #f3f6fa; border: 1px solid #e1e7ef; }
.academic-profile-badges strong { color: #176b52; background: #eaf8f2; border: 1px solid #cdeade; }
.academic-profile-badges strong.is-suspended { color: #8a5a0a; background: #fff7df; border-color: #eedca9; }
.academic-profile-badges strong.is-inactive { color: #6b5360; background: #f5f1f3; border-color: #e3d8de; }
.academic-profile-contact { margin-top: 12px; color: #34435c; font-size: .9rem; }
.academic-profile-contact span { display: flex; gap: 6px; align-items: baseline; }
.academic-profile-contact span + span { padding-inline-start: 14px; border-inline-start: 1px solid #dfe5ed; }
.academic-profile-contact small { color: #758197; font-size: .82rem; }
.academic-profile-actions { display: flex; gap: 9px; align-self: start; }
.academic-profile-actions .btn { min-height: 42px; padding-inline: 17px; font-size: .9rem; }

.academic-profile-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.academic-profile-summary article, .academic-profile-finance-grid article {
  display: flex;
  min-width: 0;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 19px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
}

.academic-profile-summary article > span, .academic-profile-finance-grid article > span { color: #68758b; font-size: .9rem; font-weight: 700; }
.academic-profile-summary article > strong, .academic-profile-finance-grid article > strong { margin-block: 3px; color: #24334d; font-size: clamp(1.35rem, 1.15rem + .45vw, 1.65rem); font-weight: 900; }
.academic-profile-summary article > small { color: #7d889a; font-size: .8rem; line-height: 1.55; }
.academic-profile-summary em, .academic-profile-finance-grid em { font-size: .78rem; font-style: normal; font-weight: 700; }
.academic-profile-summary .is-settled > strong, .academic-profile-finance-grid .is-settled > strong { color: #147254; }

.academic-profile-section {
  margin-top: 22px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 18px;
  box-shadow: 0 7px 22px rgba(38, 54, 86, .045);
}

.academic-profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.academic-profile-section-heading > div > span { display: block; margin-bottom: 2px; color: #647baf; font-size: .8rem; font-weight: 800; }
.academic-profile-section-heading h2 { margin: 0; color: #22314a; font-size: clamp(1.2rem, 1.1rem + .25vw, 1.38rem); font-weight: 900; }
.academic-profile-section-heading > small { color: #768399; font-size: .84rem; }
.academic-profile-year + .academic-profile-year { margin-top: 24px; padding-top: 21px; border-top: 1px solid #e7ebf1; }
.academic-profile-year-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.academic-profile-year-heading h3 { margin: 0; color: #34435c; font-size: 1rem; font-weight: 900; }
.academic-profile-year-heading span { color: #78859a; font-size: .82rem; }
.academic-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.academic-profile-subject { padding: 18px; border: 1px solid #e1e7ef; border-radius: 16px; background: #fff; }
.academic-profile-subject > header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.academic-profile-subject-icon { display: grid; width: 44px; height: 44px; place-items: center; color: #3157d5; background: #edf2ff; border-radius: 12px; font-size: 1.05rem; font-weight: 900; }
.academic-profile-subject h3 { margin: 0 0 2px; color: #25344e; font-size: 1.05rem; font-weight: 900; }
.academic-profile-subject header p { margin: 0; color: #778398; font-size: .82rem; line-height: 1.55; }
.academic-profile-score { text-align: end; }
.academic-profile-score strong { display: block; color: #3157d5; font-size: 1.2rem; }
.academic-profile-score span { display: inline-block; margin-top: 2px; color: #3157d5; font-size: .78rem; font-weight: 800; }
.academic-profile-components { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 16px 13px; }
.academic-profile-components > div { min-width: 0; padding: 10px; background: #f7f9fc; border-radius: 10px; text-align: center; }
.academic-profile-components span { display: block; color: #758197; font-size: .78rem; }
.academic-profile-components strong { display: block; margin-top: 3px; color: #34435b; font-size: .95rem; }
.academic-profile-components small { color: #7b8799; font-size: .75rem; }
.academic-profile-progress, .academic-profile-payment-progress > div:last-child { height: 7px; overflow: hidden; background: #e9edf3; border-radius: 999px; }
.academic-profile-progress > span, .academic-profile-payment-progress > div:last-child > span { display: block; height: 100%; background: #3157d5; border-radius: inherit; }
.academic-profile-subject footer { display: flex; justify-content: space-between; margin-top: 10px; color: #748097; font-size: .84rem; }
.academic-profile-subject footer strong { color: #34435c; }
.academic-profile-subject.is-excellent .academic-profile-score strong, .academic-profile-subject.is-excellent .academic-profile-score span { color: #147254; }
.academic-profile-subject.is-excellent .academic-profile-progress > span { background: #23936e; }
.academic-profile-subject.is-very-good .academic-profile-score strong, .academic-profile-subject.is-very-good .academic-profile-score span { color: #08776c; }
.academic-profile-subject.is-very-good .academic-profile-progress > span { background: #239c90; }
.academic-profile-subject.is-fair .academic-profile-score strong, .academic-profile-subject.is-fair .academic-profile-score span { color: #96600e; }
.academic-profile-subject.is-fair .academic-profile-progress > span { background: #d39831; }
.academic-profile-subject.is-watch .academic-profile-score strong, .academic-profile-subject.is-watch .academic-profile-score span { color: #a74444; }
.academic-profile-subject.is-watch .academic-profile-progress > span { background: #c85d5d; }

.academic-profile-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.academic-profile-attendance-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.academic-profile-attendance-counts span { padding: 9px; color: #6f7c90; background: #f7f9fc; border-radius: 10px; text-align: center; font-size: .82rem; }
.academic-profile-attendance-counts strong { display: block; color: #2d3c56; font-size: 1.15rem; }
.academic-profile-activity article { display: grid; grid-template-columns: 94px 74px minmax(0, 1fr); gap: 10px; align-items: start; padding-block: 11px; border-top: 1px solid #e7ebf1; }
.academic-profile-activity time, .academic-profile-note time { color: #778398; font-size: .82rem; }
.academic-profile-activity strong { color: #37465e; font-size: .88rem; }
.academic-profile-activity p { margin: 0; color: #66738a; font-size: .88rem; line-height: 1.6; }
.academic-profile-notes { position: relative; }
.academic-profile-note { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 11px; padding-block: 12px; }
.academic-profile-note + .academic-profile-note { border-top: 1px solid #e7ebf1; }
.academic-profile-note > span { width: 9px; height: 9px; margin-top: 7px; background: #4f6fce; border: 3px solid #e7edff; border-radius: 50%; box-sizing: content-box; }
.academic-profile-note header { display: flex; justify-content: space-between; gap: 10px; }
.academic-profile-note h3 { margin: 0; color: #2d3b55; font-size: .95rem; font-weight: 900; }
.academic-profile-note p { margin: 5px 0; color: #5e6b81; font-size: .9rem; line-height: 1.7; }
.academic-profile-note small { color: #758299; font-size: .78rem; }

.academic-profile-empty { display: flex; min-height: 104px; align-items: center; justify-content: center; gap: 13px; padding: 16px; color: #66748b; background: #f8fafc; border: 1px dashed #dbe2ec; border-radius: 14px; text-align: start; }
.academic-profile-empty > span { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; color: #5870ae; background: #edf2ff; border-radius: 50%; font-size: 1.05rem; font-weight: 900; }
.academic-profile-empty strong { display: block; color: #34435c; font-size: .93rem; }
.academic-profile-empty p { margin: 2px 0 0; font-size: .84rem; }
.academic-profile-empty.is-success > span { color: #147254; background: #e9f7f1; }

.academic-profile-finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.academic-profile-finance-grid article { min-height: 92px; background: #f9fbfd; }
.academic-profile-payment-progress { margin-top: 15px; padding: 12px 14px; background: #f7f9fc; border-radius: 12px; }
.academic-profile-payment-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: #657289; font-size: .84rem; }
.academic-profile-payment-progress > div:last-child > span { background: #23936e; }
.academic-profile-subheading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 22px 0 10px; }
.academic-profile-subheading h3 { margin: 0; color: #2d3c56; font-size: 1.05rem; font-weight: 900; }
.academic-profile-subheading span { color: #78859a; font-size: .82rem; }
.academic-profile-payment-table { min-width: 680px; font-size: .88rem; }
.academic-profile-payment-table th { padding: 10px 12px; color: #59677e; background: #f4f7fa; border-bottom: 1px solid #dde4ed; font-weight: 800; }
.academic-profile-payment-table td { padding: 11px 12px; color: #45536a; border-color: #e7ebf1; vertical-align: middle; }
.academic-profile-payment-table code { color: #334e88; font-family: inherit; font-size: .85rem; font-weight: 800; }
.academic-profile-method { display: inline-flex; padding: 4px 9px; color: #405d95; background: #edf2fb; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.academic-profile-details-section dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.academic-profile-details-section dl > div { min-width: 0; padding: 12px 14px; background: #f8fafc; border-radius: 11px; }
.academic-profile-details-section dt { color: #778398; font-size: .78rem; font-weight: 700; }
.academic-profile-details-section dd { margin: 3px 0 0; color: #34435c; font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .academic-profile-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academic-profile-grid, .academic-profile-split { grid-template-columns: 1fr; }
  .academic-profile-details-section dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .student-subject-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .academic-profile-hero { grid-template-columns: 58px minmax(0, 1fr); min-height: 0; padding: 20px; }
  .academic-profile-avatar { width: 56px; height: 56px; border-radius: 15px; font-size: 1.4rem; }
  .academic-profile-actions { grid-column: 1 / -1; width: 100%; }
  .academic-profile-actions .btn { flex: 1; }
  .academic-profile-contact span + span { padding-inline-start: 0; border-inline-start: 0; }
  .academic-profile-section { padding: 18px; }
  .academic-profile-finance-grid { grid-template-columns: 1fr; }
  .academic-profile-finance-grid article { min-height: 82px; }
  .academic-profile-details-section dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .student-portal-welcome h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem); }
  .student-portal-kpi small { font-size: .82rem; }
  .student-portal-kpi p { font-size: .75rem; }
  .student-subject-card { padding: 14px; }
  .student-subject-components { gap: 5px; }
  .student-subject-components > div { padding: 8px 4px; }
  .student-subject-components span { font-size: .7rem; }
  .student-subject-card footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .academic-profile-hero { grid-template-columns: 1fr; padding: 18px; }
  .academic-profile-avatar { width: 52px; height: 52px; }
  .academic-profile-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
  .academic-profile-summary article { min-height: 104px; padding: 13px; }
  .academic-profile-summary article > strong { font-size: 1.25rem; }
  .academic-profile-section-heading { align-items: flex-end; }
  .academic-profile-subject { padding: 14px; }
  .academic-profile-subject > header { grid-template-columns: 40px minmax(0, 1fr); }
  .academic-profile-score { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; text-align: start; }
  .academic-profile-components { gap: 5px; }
  .academic-profile-components > div { padding: 8px 4px; }
  .academic-profile-components span, .academic-profile-components small { font-size: .7rem; }
  .academic-profile-activity article { grid-template-columns: 1fr auto; }
  .academic-profile-activity p { grid-column: 1 / -1; }
  .academic-profile-details-section dl { grid-template-columns: 1fr; }
}

@media print {
  .profile-print-only { display: block !important; }
  .profile-screen-only { display: none !important; }
  .academic-profile { max-width: none; padding: 0; color: #000; }
  .academic-profile-hero { display: block; min-height: 0; margin-bottom: 12px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #999; border-radius: 0; box-shadow: none; }
  .academic-profile-avatar, .academic-profile-actions, .academic-profile-eyebrow { display: none !important; }
  .academic-profile-hero h1 { margin: 0 0 5px; color: #000; font-size: 18px; }
  .academic-profile-badges, .academic-profile-contact { gap: 8px; margin-top: 4px; }
  .academic-profile-badges span, .academic-profile-badges strong { padding: 0; color: #000; background: none; border: 0; font-size: 10px; }
  .academic-profile-contact { color: #000; font-size: 10px; }
  .academic-profile-contact small { color: #333; }
  .academic-profile-section, .academic-profile-finance { margin-top: 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; break-inside: auto; }
  .academic-profile-section-heading { margin-bottom: 6px; }
  .academic-profile-section-heading > div > span, .academic-profile-section-heading > small { display: none; }
  .academic-profile-section-heading h2 { color: #000; font-size: 14px; }
  .academic-profile-split { display: block; }
  .academic-profile-finance-grid { grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 8px; border: 1px solid #aaa; }
  .academic-profile-finance-grid article { min-height: 0; padding: 6px 8px; background: none; border: 0; border-radius: 0; }
  .academic-profile-finance-grid article + article { border-inline-start: 1px solid #aaa; }
  .academic-profile-finance-grid article > span { color: #333; font-size: 9px; }
  .academic-profile-finance-grid article > strong { color: #000; font-size: 12px; }
  .academic-profile-subheading { margin: 8px 0 4px; }
  .academic-profile-subheading h3 { color: #000; font-size: 12px; }
  .academic-profile-subheading span { display: none; }
  .academic-profile-details-section dl { grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid #aaa; }
  .academic-profile-details-section dl > div { padding: 5px; background: none; border-radius: 0; }
  .academic-profile-details-section dl > div + div { border-inline-start: 1px solid #aaa; }
  .academic-profile-details-section dt { color: #333; font-size: 8px; }
  .academic-profile-details-section dd { color: #000; font-size: 10px; }
  .profile-report-table { table-layout: fixed; font-size: 9px; }
  .profile-report-table th, .profile-report-table td { word-break: break-word; }
}


/* Teacher assignments admin page */
.student-app .app-topbar { inset-inline:0; }
.student-app .app-content { margin-inline-start:0; }
.student-app .content-container { max-width:none;padding:1.25rem clamp(1rem,3vw,2.5rem); }
.student-shell-brand-icon { display:grid;width:44px;height:44px;place-items:center;overflow:hidden;color:#3157d5;background:#edf2ff;border-radius:12px; }
.student-shell-brand-icon img { width:100%;height:100%;object-fit:contain;padding:.25rem; }.student-shell-brand-icon svg{display:none}

.student-portal { --student-blue:#3157d5;--student-indigo:#4d46c8;--student-teal:#109989;--student-green:#178d69;--student-amber:#c98217;--student-red:#b84b4b;display:grid;width:100%;max-width:1440px;margin-inline:auto;gap:22px; }
.student-portal-hero { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;min-height:158px;padding:24px 28px;color:#fff;background:linear-gradient(125deg,#172d65 0%,#315bd0 56%,#119a8b 100%);border-radius:18px;box-shadow:0 12px 30px rgba(32,59,130,.14); }
.student-portal-identity { display:flex;align-items:center;gap:18px;min-width:0; }.student-portal-avatar { display:grid;width:72px;height:72px;flex:0 0 72px;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:18px;font-size:1.8rem;font-weight:900; }
.student-portal-welcome{min-width:0}.student-portal-eyebrow{color:rgba(255,255,255,.7);font-size:.7rem;font-weight:800}.student-portal-welcome h1{margin:.15rem 0 .2rem;color:#fff;font-size:clamp(1.4rem,2.4vw,2rem)}.student-portal-welcome>p{margin:0 0 .55rem;color:rgba(255,255,255,.78);font-size:.8rem}
.student-portal-badges,.student-portal-contact{display:flex;flex-wrap:wrap;gap:.4rem}.student-portal-badges span{padding:.25rem .62rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);border-radius:999px;font-size:.7rem;font-weight:700}.student-portal-badges .is-status{color:#d7fff2;background:rgba(4,105,78,.32)}.student-portal-contact{gap:1rem;margin-top:.55rem;color:rgba(255,255,255,.68);font-size:.67rem}.student-portal-contact strong{margin-inline-start:.25rem;color:#fff}
.student-portal-hero-action { display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.55rem .9rem;color:#234995;background:#fff;border-radius:11px;font-size:.75rem;font-weight:900;box-shadow:0 7px 18px rgba(11,34,86,.12)}.student-portal-hero-action:hover{color:#183678;background:#f7f9ff}
.student-portal-nav { position:sticky;top:76px;z-index:20;display:flex;gap:4px;padding:5px;overflow-x:auto;background:rgba(255,255,255,.96);border:1px solid #e5e9f1;border-radius:13px;box-shadow:0 5px 16px rgba(38,53,89,.05);scrollbar-width:none}.student-portal-nav a{flex:0 0 auto;padding:.48rem .78rem;color:#657087;border-radius:9px;font-size:.72rem;font-weight:800}.student-portal-nav a:hover{color:var(--student-blue);background:#eef3ff}
.student-portal-kpis { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;scroll-margin-top:140px}.student-portal-kpi{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;min-height:96px;padding:16px;background:#fff;border:1px solid #e7eaf1;border-radius:15px;box-shadow:0 5px 15px rgba(36,51,86,.04)}.student-portal-kpi-icon{display:grid;width:42px;height:42px;place-items:center;color:var(--student-blue);background:#edf2ff;border-radius:12px;font-size:.85rem;font-weight:900}.student-portal-kpi small,.student-portal-kpi strong,.student-portal-kpi p{display:block;margin:0}.student-portal-kpi small{color:#7b8599;font-size:.68rem}.student-portal-kpi strong{margin:.12rem 0;color:#26344f;font-size:1.25rem}.student-portal-kpi p{overflow:hidden;color:#9199aa;font-size:.63rem;text-overflow:ellipsis;white-space:nowrap}.student-portal-kpi.is-teal .student-portal-kpi-icon{color:var(--student-teal);background:#e7f8f5}.student-portal-kpi.is-amber .student-portal-kpi-icon{color:var(--student-amber);background:#fff3df}.student-portal-kpi.is-green .student-portal-kpi-icon{color:var(--student-green);background:#eaf8f2}.student-portal-kpi.is-purple .student-portal-kpi-icon{color:#7655ca;background:#f1edff}
.student-portal-dashboard { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:18px}.student-portal-card{min-width:0;padding:20px;background:#fff;border:1px solid #e6eaf1;border-radius:16px;box-shadow:0 6px 18px rgba(38,53,89,.045)}.student-portal-card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.student-portal-card-header span{color:#8a93a5;font-size:.66rem;font-weight:800}.student-portal-card-header h2{margin:.15rem 0 0;color:#26344f;font-size:1rem}.student-portal-card-header a{flex:0 0 auto;color:var(--student-blue);font-size:.7rem;font-weight:800}
.student-portal-result-list,.student-portal-activity-list{display:grid;gap:2px}.student-portal-result{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid #eef1f5}.student-portal-result:last-child{border:0}.student-portal-subject-icon{display:grid;width:34px;height:34px;place-items:center;color:var(--student-blue);background:#edf2ff;border-radius:10px;font-size:.72rem;font-weight:900}.student-portal-result strong,.student-portal-result small{display:block}.student-portal-result strong{color:#303d57;font-size:.76rem}.student-portal-result small{margin-top:.1rem;color:#929aaa;font-size:.63rem}.student-portal-score,.student-portal-tag{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .55rem;border-radius:999px;font-size:.66rem;font-weight:900;white-space:nowrap}.student-portal-score.is-good{color:#087459;background:#e7f7f1}.student-portal-score.is-fair{color:#9a620f;background:#fff3df}.student-portal-score.is-watch{color:#a74444;background:#ffeded}
.student-portal-activity-list>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:10px;padding:9px 2px;border-bottom:1px solid #eef1f5}.student-portal-activity-list>div:last-child{border:0}.activity-marker{width:8px;height:8px;margin-top:.35rem;background:var(--student-blue);border-radius:50%}.activity-marker.is-purple{background:#7655ca}.activity-marker.is-amber{background:var(--student-amber)}.activity-marker.is-green{background:var(--student-green)}.student-portal-activity-list small,.student-portal-activity-list strong,.student-portal-activity-list p{display:block;margin:0}.student-portal-activity-list small{color:#929aaa;font-size:.62rem}.student-portal-activity-list strong{margin:.08rem 0;color:#303d57;font-size:.74rem}.student-portal-activity-list p{overflow:hidden;color:#7e8799;font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.student-portal-activity-list time{color:#98a0af;font-size:.62rem;white-space:nowrap}
.student-portal-split-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.student-portal-section{scroll-margin-top:140px}.student-portal-finance-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.student-portal-finance-totals>div{padding:10px 12px;background:#f8fafc;border:1px solid #edf0f4;border-radius:11px}.student-portal-finance-totals small,.student-portal-finance-totals strong{display:block}.student-portal-finance-totals small{color:#8992a3;font-size:.63rem}.student-portal-finance-totals strong{margin-top:.15rem;color:#283650;font-size:.92rem}.student-portal-finance-totals .is-due strong{color:#ae543d}.student-portal-progress-label{display:flex;justify-content:space-between;margin-top:12px;color:#778196;font-size:.66rem}.student-portal-progress{height:8px;margin:6px 0 10px;overflow:hidden;background:#e7ecef;border-radius:999px}.student-portal-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--student-teal),#43bea0);border-radius:inherit}
.student-portal-payment-list,.student-portal-exception-list{display:grid;gap:3px}.student-portal-payment-list>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid #eef1f5}.student-portal-payment-list>div:last-child{border:0}.student-portal-payment-icon{display:grid;width:32px;height:32px;place-items:center;color:var(--student-green);background:#e9f7f1;border-radius:9px;font-weight:900}.student-portal-payment-list strong,.student-portal-payment-list small{display:block}.student-portal-payment-list strong{color:#303d57;font-size:.72rem}.student-portal-payment-list small{color:#929aaa;font-size:.61rem}.student-portal-exception-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}.student-portal-exception-counts>div{padding:9px;text-align:center;background:#f8fafc;border:1px solid #edf0f4;border-radius:10px}.student-portal-exception-counts span,.student-portal-exception-counts strong{display:block}.student-portal-exception-counts span{color:#8992a3;font-size:.62rem}.student-portal-exception-counts strong{color:#2f3c56;font-size:1rem}
.student-portal-exception-list>div{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid #eef1f5}.student-portal-exception-list>div:last-child{border:0}.student-portal-exception-list time{display:grid;place-items:center;padding:4px;color:#44516a;background:#f1f4f8;border-radius:8px}.student-portal-exception-list time strong,.student-portal-exception-list time span{display:block}.student-portal-exception-list time strong{font-size:.85rem}.student-portal-exception-list time span{font-size:.55rem}.student-portal-exception-list>div>div strong,.student-portal-exception-list>div>div small{display:block}.student-portal-exception-list>div>div strong{color:#303d57;font-size:.72rem}.student-portal-exception-list>div>div small{color:#929aaa;font-size:.61rem}.student-portal-tag.is-danger{color:#a74444;background:#ffeded}.student-portal-tag.is-warning{color:#94600f;background:#fff3df}.student-portal-tag.is-info{color:#265ca5;background:#eaf2ff}
.student-portal-empty{padding:18px;color:#778196;background:#fafbfc;border:1px dashed #dce1e9;border-radius:11px;text-align:center}.student-portal-empty strong,.student-portal-empty span{display:block}.student-portal-empty strong{color:#46516a;font-size:.78rem}.student-portal-empty span{margin-top:.2rem;font-size:.66rem}.student-portal-empty.is-positive{color:#17765e;background:#f1faf7;border-color:#cdebe2}
.student-portal-marks-table-wrap{overflow-x:auto;border:1px solid #eaedf2;border-radius:12px}.student-portal-marks-table{width:100%;min-width:900px;border-collapse:collapse}.student-portal-marks-table th{padding:10px;color:#707b90;background:#f7f9fc;font-size:.66rem;text-align:right}.student-portal-marks-table td{padding:11px 10px;color:#59647a;border-top:1px solid #edf0f4;font-size:.7rem}.student-portal-marks-table td strong{color:#2f3c56}.student-portal-note-list{display:grid;gap:10px}.student-portal-note-list article{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;padding:12px;background:#fafbfc;border:1px solid #edf0f4;border-radius:12px}.student-portal-note-list time{color:#818b9e;font-size:.67rem}.student-portal-note-list h3{margin:0;color:#2f3c56;font-size:.82rem}.student-portal-note-list p{margin:.25rem 0;color:#687389;font-size:.72rem;line-height:1.7}.student-portal-note-list small{color:#969eae;font-size:.62rem}
.student-portal-profile{display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.2fr) auto;align-items:center;gap:20px;padding:18px 20px;background:#f8faff;border:1px solid #e1e7f4;border-radius:16px}.student-portal-profile>div:first-child{display:flex;align-items:center;gap:11px}.student-portal-profile-avatar{display:grid;width:44px;height:44px;place-items:center;color:var(--student-blue);background:#e8efff;border-radius:12px;font-weight:900}.student-portal-profile small,.student-portal-profile strong,.student-portal-profile p{display:block;margin:0}.student-portal-profile small,.student-portal-profile dt{color:#8b94a5;font-size:.61rem}.student-portal-profile strong{color:#2f3c56;font-size:.8rem}.student-portal-profile p{margin-top:.15rem;color:#778196;font-size:.65rem}.student-portal-profile dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.student-portal-profile dl div{padding-inline-start:10px;border-inline-start:1px solid #dfe5ef}.student-portal-profile dd{margin:.15rem 0 0;color:#3f4b64;font-size:.7rem}.student-portal-profile>a{padding:.5rem .7rem;color:var(--student-blue);background:#fff;border:1px solid #d7dff0;border-radius:9px;font-size:.68rem;font-weight:800;white-space:nowrap}

@media(max-width:1100px){.student-portal-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.student-portal-dashboard,.student-portal-split-row{grid-template-columns:1fr}.student-portal-profile{grid-template-columns:1fr 1fr}.student-portal-profile>a{justify-self:start}.student-portal-profile dl{grid-template-columns:1fr}}
@media(max-width:767.98px){.student-app .content-container{padding:12px}.student-app .topbar-inner{padding-inline:12px}.student-shell-brand-icon{width:38px;height:38px}.student-app .topbar-page .topbar-eyebrow{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-app .user-details{display:none}.student-portal{gap:14px}.student-portal-hero{grid-template-columns:1fr;min-height:0;padding:20px;border-radius:15px}.student-portal-identity{align-items:flex-start}.student-portal-avatar{width:58px;height:58px;flex-basis:58px;border-radius:15px;font-size:1.4rem}.student-portal-welcome>p{display:none}.student-portal-contact{flex-direction:column;gap:.2rem}.student-portal-hero-action{justify-self:start}.student-portal-nav{top:66px}.student-portal-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.student-portal-kpi{grid-template-columns:36px minmax(0,1fr);min-height:86px;padding:12px}.student-portal-kpi-icon{width:36px;height:36px}.student-portal-card{padding:15px;border-radius:14px}.student-portal-card-header{align-items:flex-start}.student-portal-finance-totals{grid-template-columns:1fr 1fr}.student-portal-profile{grid-template-columns:1fr}.student-portal-profile dl{grid-template-columns:repeat(2,minmax(0,1fr))}.student-portal-profile>a{white-space:normal}.student-portal-marks-table{min-width:0}.student-portal-marks-table thead{display:none}.student-portal-marks-table,.student-portal-marks-table tbody,.student-portal-marks-table tr,.student-portal-marks-table td{display:block;width:100%}.student-portal-marks-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px;border-bottom:1px solid #e7ebf1}.student-portal-marks-table tr:last-child{border:0}.student-portal-marks-table td{padding:0;border:0}.student-portal-marks-table td::before{display:block;margin-bottom:2px;color:#929aaa;content:attr(data-label);font-size:.58rem}}
@media(max-width:430px){.student-portal-kpis{grid-template-columns:1fr}.student-portal-identity{gap:11px}.student-portal-welcome h1{font-size:1.2rem}.student-portal-badges{gap:.25rem}.student-portal-badges span{padding:.2rem .45rem}.student-portal-result{grid-template-columns:32px minmax(0,1fr) auto}.student-portal-activity-list>div{grid-template-columns:8px minmax(0,1fr)}.student-portal-activity-list time{grid-column:2}.student-portal-finance-totals,.student-portal-profile dl{grid-template-columns:1fr}.student-portal-exception-list>div{grid-template-columns:44px minmax(0,1fr)}.student-portal-exception-list .student-portal-tag{grid-column:2;justify-self:start}.student-portal-note-list article{grid-template-columns:1fr;gap:5px}.student-portal-marks-table tr{grid-template-columns:1fr}}

/* Teacher assignments admin page */
.teacher-assignments-page {
  max-width: 1180px;
}

.teacher-assignments-page .page-header {
  gap: 1rem;
}

.teacher-assignment-profile,
.teacher-assignment-form-card,
.teacher-assignment-list-section {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.teacher-assignment-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.teacher-assignment-profile > div:nth-child(2) {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.teacher-assignment-profile span,
.teacher-assignment-section-heading span,
.teacher-assignment-card-head span:first-child,
.teacher-assignment-permissions-title span {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
}

.teacher-assignment-profile strong {
  color: #0f172a;
  font-size: 1.2rem;
}

.teacher-assignment-profile small {
  color: #64748b;
  word-break: break-word;
}

.teacher-assignment-avatar {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
}

.teacher-assignment-form-card,
.teacher-assignment-list-section {
  padding: 1rem;
}

.teacher-assignment-section-heading,
.teacher-assignment-list-section .data-table-header,
.teacher-assignment-card-head,
.teacher-assignment-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.teacher-assignment-section-heading h2,
.teacher-assignment-list-section h2,
.teacher-assignment-card h3 {
  margin: 0;
  color: #0f172a;
}

.teacher-assignment-section-heading p,
.teacher-assignment-list-section p {
  margin: 0;
  color: #64748b;
}

.teacher-assignment-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.teacher-assignment-scope-grid,
.teacher-assignment-permissions,
.teacher-assignment-card-grid,
.teacher-assignment-edit-form {
  display: grid;
  gap: 0.8rem;
}

.teacher-assignment-scope-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-assignment-permissions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #f8fafc;
}

.teacher-assignment-permissions-title {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.2rem;
}

.teacher-permission-option,
.teacher-permission-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
}

.teacher-permission-option {
  padding: 0.85rem;
  min-height: 92px;
}

.teacher-permission-option span {
  display: grid;
  gap: 0.2rem;
}

.teacher-permission-option strong,
.teacher-permission-toggle span {
  color: #0f172a;
  font-weight: 800;
}

.teacher-permission-option small {
  color: #64748b;
  line-height: 1.7;
}

.teacher-assignment-form-actions {
  display: flex;
  justify-content: flex-end;
}

.teacher-assignment-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-assignments-page .teacher-assignment-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
}

.teacher-assignment-card-muted {
  opacity: 0.7;
  background: #f8fafc;
}

.teacher-assignment-card-head > div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.teacher-assignment-scope-line,
.teacher-assignment-permission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.teacher-assignment-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
}

.teacher-assignment-badge-active {
  background: #dcfce7;
  color: #166534;
}

.teacher-assignment-badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.teacher-assignment-badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.teacher-assignment-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.teacher-permission-toggle {
  align-items: center;
  min-height: 48px;
  padding: 0.65rem 0.75rem;
}

.teacher-assignment-card-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.teacher-assignment-empty {
  display: grid;
  gap: 0.25rem;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 991.98px) {
  .teacher-assignment-scope-grid,
  .teacher-assignment-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .teacher-assignments-page .page-header,
  .teacher-assignment-profile,
  .teacher-assignment-section-heading,
  .teacher-assignment-list-section .data-table-header,
  .teacher-assignment-card-head,
  .teacher-assignment-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-assignment-permissions,
  .teacher-assignment-edit-form {
    grid-template-columns: 1fr;
  }

  .teacher-assignment-profile {
    text-align: start;
  }

  .teacher-assignment-form-actions,
  .teacher-assignment-card-actions {
    justify-content: stretch;
  }

  .teacher-assignments-page .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* Academic dashboard */
.academic-dashboard-page {
  max-width: 1180px;
}

.academic-dashboard-hero {
  padding: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(29, 78, 216, 0.08)),
    #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.academic-dashboard-hero h1 {
  margin: 0.2rem 0 0.45rem;
  color: #0f172a;
  font-size: 1.7rem;
  font-weight: 900;
}

.academic-dashboard-hero p,
.academic-dashboard-meta,
.academic-dashboard-section-head span,
.academic-dashboard-list-row span,
.academic-dashboard-grade-row span {
  color: #64748b;
}

.academic-dashboard-hero p {
  margin: 0;
}

.academic-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.9rem;
}

.academic-dashboard-meta span,
.academic-dashboard-mini-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #334155;
  font-weight: 800;
}

.academic-dashboard-grid {
  display: grid;
  gap: 0.85rem;
}

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

.academic-dashboard-main-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.academic-dashboard-card,
.academic-dashboard-section {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.academic-dashboard-stat {
  display: grid;
  gap: 0.35rem;
  min-height: 112px;
  padding: 1rem;
}

.academic-dashboard-stat span {
  color: #64748b;
  font-weight: 800;
}

.academic-dashboard-stat strong {
  color: #0f172a;
  font-size: 2rem;
  line-height: 1;
}

.academic-dashboard-stat-primary {
  border-top: 4px solid #0f766e;
}

.academic-dashboard-stat-success {
  border-top: 4px solid #16a34a;
}

.academic-dashboard-stat-danger {
  border-top: 4px solid #dc2626;
}

.academic-dashboard-stat-warning {
  border-top: 4px solid #d97706;
}

.academic-dashboard-stat-info {
  border-top: 4px solid #2563eb;
}

.academic-dashboard-stat-neutral {
  border-top: 4px solid #64748b;
}

.academic-dashboard-section {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1rem;
}

.academic-dashboard-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.academic-dashboard-section-head h2 {
  margin: 0.1rem 0 0;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 900;
}

.academic-dashboard-section-head > strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  white-space: nowrap;
}

.academic-dashboard-mini-stats,
.academic-dashboard-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.academic-dashboard-mini-stats span {
  background: #f8fafc;
}

.academic-dashboard-list,
.academic-dashboard-grade-list {
  display: grid;
  gap: 0.55rem;
}

.academic-dashboard-list-row,
.academic-dashboard-grade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 58px;
  padding: 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #f8fafc;
}

.academic-dashboard-list-row > div,
.academic-dashboard-grade-row > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.academic-dashboard-list-row strong,
.academic-dashboard-grade-row strong {
  color: #0f172a;
}

.academic-dashboard-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.academic-dashboard-badge-success {
  background: #dcfce7;
  color: #166534;
}

.academic-dashboard-badge-muted {
  background: #f1f5f9;
  color: #475569;
}

.academic-dashboard-empty {
  padding: 1.1rem;
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 12px;
  color: #64748b;
  text-align: center;
}

.academic-dashboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
  text-decoration: none;
}

.academic-dashboard-link:hover {
  border-color: rgba(15, 118, 110, 0.35);
  background: #ecfdf5;
  color: #0f766e;
}

@media (max-width: 991.98px) {
  .academic-dashboard-summary-grid,
  .academic-dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .academic-dashboard-hero {
    padding: 1rem;
    border-radius: 14px;
  }

  .academic-dashboard-hero h1 {
    font-size: 1.35rem;
  }

  .academic-dashboard-section-head,
  .academic-dashboard-list-row,
  .academic-dashboard-grade-row {
    align-items: stretch;
    flex-direction: column;
  }

  .academic-dashboard-stat {
    min-height: 92px;
  }

  .academic-dashboard-link {
    width: 100%;
  }
}

/* Student CSV import */
.student-import-page {
  max-width: 980px;
}

.student-import-card {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.student-import-card h2 {
  margin: 0 0 0.55rem;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 900;
}

.student-import-card p {
  margin: 0 0 0.45rem;
  color: #64748b;
}

.student-import-form {
  display: grid;
  gap: 1rem;
}

.student-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.student-import-sample {
  margin: 0.85rem 0 0;
  padding: 0.85rem;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
}

.student-import-errors {
  border-color: rgba(220, 38, 38, 0.18);
}

@media (max-width: 767.98px) {
  .student-import-actions {
    flex-direction: column;
  }

  .student-import-actions .btn {
    width: 100%;
  }
}
.onboarding-panel {
    border-inline-start: 4px solid #4f46e5;
}

.dashboard-school-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    padding: .4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
}

.onboarding-panel .panel-heading p {
    margin: .35rem 0 0;
    color: var(--muted, #64748b);
}

.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}

.onboarding-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    color: #334155;
    background: #fff;
    text-decoration: none;
}

.onboarding-item:hover { border-color: #818cf8; color: #3730a3; }
.onboarding-item.is-complete { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.onboarding-check { font-size: 1.15rem; font-weight: 800; }

/* Production consistency pass */
.validation-summary-valid,
.field-validation-valid { display: none; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible { outline: 3px solid rgba(49, 87, 213, .24); outline-offset: 2px; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }

/* Academic promotion workflow */
.academic-promotion-page { max-width: 1440px; margin-inline: auto; }
.promotion-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 8px; overflow: hidden; background: #fff; border: 1px solid #e3e8f1; border-radius: 14px; box-shadow: 0 5px 18px rgba(33, 48, 82, .04); }
.promotion-steps span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; color: #778197; border-radius: 9px; font-size: .875rem; font-weight: 750; }
.promotion-steps b { display: grid; width: 25px; height: 25px; place-items: center; color: #778197; background: #eef1f5; border-radius: 50%; font-size: .75rem; }
.promotion-steps .is-current { color: #2e51b5; background: #edf2ff; }
.promotion-steps .is-current b { color: #fff; background: #3157d5; }
.promotion-steps .is-complete { color: #19765c; }
.promotion-steps .is-complete b { color: #fff; background: #229273; }
.promotion-start-card { max-width: 900px; margin-inline: auto; }
.promotion-history-note { display: flex; gap: .65rem; margin-top: 1rem; padding: .8rem 1rem; color: #526077; background: #f7f9fc; border-radius: 10px; }
.promotion-history-note strong { color: #2f3d58; }
.promotion-history-note span { font-size: .875rem; }
.promotion-route { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .85rem 1rem; color: #34415b; background: linear-gradient(135deg, #f3f6ff, #f2faf8); border: 1px solid #e0e7f1; border-radius: 12px; font-weight: 850; }
.promotion-route > span { display: grid; gap: .1rem; min-width: 0; }
.promotion-route small { color: #7b8598; font-size: .8rem; font-weight: 700; }
.promotion-route strong { overflow-wrap: anywhere; }
.promotion-route b { color: #3157d5; font-size: 1.2rem; }
.promotion-selection-counter { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; color: #546078; background: #f1f4f9; border-radius: 999px; font-size: .8125rem; }
.promotion-selection-counter strong { color: #3157d5; font-size: 1rem; }
.promotion-select-column { width: 54px; text-align: center; }
.promotion-table input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: #3157d5; }
.promotion-bulk-option { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; }
.promotion-bulk-option label { display: grid; gap: .15rem; cursor: pointer; }
.promotion-bulk-option label strong { color: #35425c; font-size: .9rem; }
.promotion-bulk-option label span { color: #788297; font-size: .8125rem; }
.promotion-config-table .form-select,
.promotion-config-table .form-control { min-width: 150px; }
.promotion-current-placement { white-space: nowrap; color: #5f6c83; }
.promotion-current-placement b { color: #a1a9b7; }
.promotion-money-input { position: relative; min-width: 150px; }
.promotion-money-input .form-control { padding-inline-end: 3rem; }
.promotion-money-input span { position: absolute; inset-block-start: 50%; inset-inline-end: .75rem; color: #8b94a5; transform: translateY(-50%); font-size: .8rem; }
.promotion-actions { position: sticky; bottom: 12px; z-index: 8; display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1rem; padding: .8rem; background: rgba(255, 255, 255, .94); border: 1px solid #e1e6ef; border-radius: 12px; box-shadow: 0 10px 30px rgba(35, 49, 79, .1); backdrop-filter: blur(10px); }
.promotion-actions form { margin: 0; }
.promotion-metrics,
.promotion-fee-summary,
.promotion-result-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.promotion-metrics article,
.promotion-fee-summary article,
.promotion-result-metrics > div { padding: 1rem; background: #fff; border: 1px solid #e3e8f1; border-radius: 13px; }
.promotion-metrics span,
.promotion-fee-summary span,
.promotion-result-metrics span { display: block; color: #7b8599; font-size: .8125rem; }
.promotion-metrics strong,
.promotion-fee-summary strong,
.promotion-result-metrics strong { display: block; margin-top: .25rem; color: #2d3b56; font-size: 1.45rem; }
.promotion-metrics .is-success { border-color: #ccebe1; background: #f4fbf8; }
.promotion-metrics .is-success strong { color: #19765c; }
.promotion-metrics .is-danger { border-color: #f1cccc; background: #fff7f7; }
.promotion-metrics .is-danger strong { color: #aa3f3f; }
.promotion-target-placement { color: #3157b8; }
.promotion-safety-notice { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; color: #734535; background: #fff8f4; border: 1px solid #f0d6c9; border-radius: 13px; }
.promotion-safety-notice > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; color: #fff; background: #ba5a3d; border-radius: 9px; font-weight: 900; }
.promotion-safety-notice strong { color: #743d2b; }
.promotion-safety-notice p { margin: .2rem 0 0; line-height: 1.6; }
.promotion-result-card { max-width: 900px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center; background: #fff; border: 1px solid #dfe7ed; border-radius: 18px; box-shadow: 0 14px 40px rgba(30, 52, 79, .08); }
.promotion-result-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 1rem; place-items: center; color: #fff; background: #229273; border-radius: 18px; font-size: 1.7rem; font-weight: 900; }
.promotion-result-icon.has-conflicts { background: #b96b22; }
.promotion-result-card h1 { margin: .3rem 0 1rem; color: #263650; font-size: clamp(1.65rem, 1.35rem + .8vw, 2.2rem); }
.promotion-result-card .promotion-route { max-width: 480px; margin-inline: auto; }
.promotion-result-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1.25rem 0; text-align: start; }
.promotion-completed-at { margin: -.45rem 0 1rem; color: #788297; font-size: .8125rem; }
.promotion-operation-id { color: #758095; font-size: .8125rem; }
.promotion-operation-id code { direction: ltr; display: inline-block; color: #42506a; }
.promotion-result-actions { justify-content: center; }

/* Authentication and safe system states */
.login-page,
.system-state-page { display: grid; min-height: calc(100vh - 150px); padding: clamp(1rem, 4vw, 3rem); place-items: center; }
.login-card { width: min(100%, 470px); padding: clamp(1.4rem, 3vw, 2.25rem); background: #fff; border: 1px solid #dfe5ef; border-radius: 20px; box-shadow: 0 18px 55px rgba(29, 45, 80, .11); }
.login-heading { margin-bottom: 1.35rem; }
.login-heading h1 { margin: .25rem 0; color: #263650; font-size: clamp(1.65rem, 1.45rem + .5vw, 2rem); }
.login-heading p { margin: 0; color: #738096; }
.login-form { display: grid; gap: 1rem; }
.login-form .form-control { min-height: 48px; }
.login-help { margin: -.25rem 0 0; color: #7b8699; font-size: .8125rem; line-height: 1.65; }
.login-footer { margin-top: 1.25rem; padding-top: 1rem; color: #8992a4; border-top: 1px solid #edf0f4; text-align: center; font-size: .78rem; }
.system-state-card { width: min(100%, 620px); padding: clamp(1.5rem, 4vw, 3rem); text-align: center; background: #fff; border: 1px solid #e1e6ee; border-radius: 20px; box-shadow: 0 18px 55px rgba(29, 45, 80, .1); }
.system-state-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 1rem; place-items: center; color: #a74a42; background: #fff0ee; border-radius: 18px; font-size: 1.8rem; font-weight: 900; }
.system-state-card h1 { margin: .35rem 0 .65rem; color: #293851; font-size: clamp(1.6rem, 1.35rem + .7vw, 2rem); }
.system-state-card > p { max-width: 52ch; margin: 0 auto; color: #68758b; line-height: 1.8; }
.request-reference { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.25rem 0; padding: .65rem; color: #69758a; background: #f7f9fc; border-radius: 10px; font-size: .8rem; }
.request-reference code { direction: ltr; color: #3e4c66; }
.system-state-actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; }

@media (max-width: 1199.98px) {
    .promotion-result-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .promotion-steps { display: flex; overflow-x: auto; scroll-snap-type: inline mandatory; }
    .promotion-steps span { min-width: 126px; scroll-snap-align: start; }
    .promotion-history-note { flex-direction: column; }
    .promotion-metrics,
    .promotion-fee-summary,
    .promotion-result-metrics { grid-template-columns: 1fr; }
    .promotion-actions { position: static; align-items: stretch; flex-direction: column-reverse; }
    .promotion-actions .btn,
    .promotion-actions form,
    .promotion-actions form .btn { width: 100%; }
    .promotion-result-actions { align-items: stretch; flex-direction: column; }
    .promotion-result-actions .btn { width: 100%; }
    .system-state-actions { align-items: stretch; flex-direction: column-reverse; }
}

/* Public product and policy screens */
.public-product-page { display: grid; min-height: calc(100vh - 150px); padding: clamp(1rem, 5vw, 4rem); place-items: center; }
.public-product-card { width: min(100%, 760px); padding: clamp(1.5rem, 5vw, 3.5rem); text-align: center; background: linear-gradient(145deg, #fff, #f7f9ff); border: 1px solid #dfe5ef; border-radius: 22px; box-shadow: 0 20px 60px rgba(29, 45, 80, .1); }
.public-product-mark { display: grid; width: 68px; height: 68px; margin: 0 auto 1rem; place-items: center; color: #fff; background: #3157d5; border-radius: 19px; }
.public-product-mark .app-icon { width: 34px; height: 34px; }
.public-product-card h1 { margin: .4rem 0 .7rem; color: #263650; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); }
.public-product-card > p { max-width: 60ch; margin: 0 auto; color: #66748c; line-height: 1.8; }
.public-product-features { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.4rem 0; }
.public-product-features span { padding: .45rem .75rem; color: #445574; background: #eef2fa; border-radius: 999px; font-size: .8125rem; font-weight: 750; }
.public-policy-page { max-width: 950px; margin-inline: auto; }
.policy-copy { margin: 0; color: #5e6b82; line-height: 1.9; }

/* Student portal readability pass: keep operational metadata legible on every viewport. */
.student-portal-page .student-portal-payment-list strong,
.student-portal-page .student-portal-exception-list>div>div strong { font-size: .9rem; }
.student-portal-page .student-portal-payment-list small,
.student-portal-page .student-portal-exception-list>div>div small,
.student-portal-page .student-portal-profile small,
.student-portal-page .student-portal-profile dt { font-size: .8125rem; line-height: 1.5; }
.student-portal-page .student-portal-exception-counts span,
.student-portal-page .student-subject-components span { font-size: .8125rem; }
.student-portal-page .student-subject-components small { font-size: .78rem; }

@media (max-width: 575.98px) {
    .student-portal-page .student-portal-kpi p,
    .student-portal-page .student-subject-components span { font-size: .8rem; }
}