/*
 * OSMS master stylesheet
 * Link this file from application pages; it composes the complete design system.
 */
@import url("variables.css");
@import url("reset.css");
@import url("layout.css");
@import url("components.css");
@import url("responsive.css");
@import url("print.css");

/* Shared page refinements and restrained utility classes */

html,
body,
.sidebar,
.topbar,
.panel,
.card,
.stat-card,
.input,
.select,
.textarea {
  transition-property: background-color, border-color, color;
  transition-duration: var(--duration-normal);
  transition-timing-function: ease;
}

body::after {
  position: fixed;
  z-index: -1;
  inset: var(--header-height) 0 auto var(--sidebar-width);
  height: 18rem;
  background: linear-gradient(180deg, rgb(18 185 139 / 0.025), transparent);
  content: "";
  pointer-events: none;
}

.sidebar-collapsed body::after,
body.sidebar-collapsed::after { left: var(--sidebar-collapsed-width); }

/* Dashboard and module layouts */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.65fr);
  gap: var(--space-6);
  align-items: start;
}

.module-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.module-toolbar-start,
.module-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.attendance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.attendance-choice {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.attendance-choice:has(input:checked) {
  border-color: var(--choice-color, var(--success));
  background: color-mix(in srgb, var(--choice-color, var(--success)) 13%, var(--surface));
  color: var(--choice-color, var(--success));
}

.attendance-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attendance-choice.absent { --choice-color: var(--danger); }
.attendance-choice.late { --choice-color: var(--warning); }
.attendance-choice.excused { --choice-color: var(--info); }
.attendance-choice.sick { --choice-color: #9333ea; }

.mark-input {
  width: 5.5rem !important;
  min-height: 2.25rem !important;
  padding: 0.35rem 0.55rem !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grade-chip {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--grade-color, var(--primary-soft));
  color: var(--grade-text, var(--primary));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.fee-amount,
.money {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.amount-positive { color: var(--success); }
.amount-negative { color: var(--danger); }

.invoice-progress { min-width: 8rem; }
.invoice-progress .progress { height: 0.35rem; margin-top: var(--space-2); }

.verification-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(circle at top, rgb(18 185 139 / 0.12), transparent 30rem),
    var(--background);
}

.verification-card {
  width: min(32rem, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.verification-header { padding: var(--space-6); background: linear-gradient(130deg, var(--color-primary-900), var(--color-primary-600)); color: #fff; }
.verification-header h1 { margin-top: var(--space-3); color: #fff; font-size: var(--font-size-xl); }
.verification-status { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6); }
.verification-status-icon { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 50%; background: var(--color-success-light); color: var(--success); font-size: 1.6rem; }
.verification-card .key-value-list { padding: 0 var(--space-6) var(--space-6); text-align: left; }
.verification-privacy-note { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-muted); font-size: var(--font-size-xs); }

.settings-nav {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.settings-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.settings-nav a:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.settings-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: var(--font-weight-semibold); }

/* Text and spacing utilities kept intentionally small */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.numeric { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.p-0 { padding: 0 !important; }
.w-full { width: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.overflow-auto { overflow: auto !important; }
.position-relative { position: relative !important; }
.mobile-only { display: none !important; }

@media (max-width: 63.9375rem) {
  body::after { left: 0; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .mobile-only { display: inline-flex !important; }
  .desktop-only { display: none !important; }
}

@media (max-width: 42rem) {
  .verification-shell { padding: var(--space-3); }
  .verification-header,
  .verification-status { padding: var(--space-5); }
  .verification-card .key-value-list { padding-inline: var(--space-5); }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .module-toolbar-start,
  .module-toolbar-end { width: 100%; }
  .module-toolbar .btn { flex: 1 1 auto; }
}

@media (forced-colors: active) {
  .badge,
  .btn,
  .stat-card,
  .panel,
  .card,
  .input,
  .select,
  .textarea {
    border: 1px solid CanvasText;
  }

  .nav-link.active,
  .nav-link[aria-current="page"] {
    outline: 2px solid Highlight;
  }
}

/* ========================================================================== 
   Runtime markup compatibility layer
   These rules intentionally follow the class names emitted by assets/js.
   ========================================================================== */

:root {
  --accent: var(--secondary);
  --border-color: var(--border);
  --tone-violet: #7656d6;
  --tone-violet-soft: #f0edff;
  --tone-blue: #3b82f6;
  --tone-blue-soft: #eaf2ff;
  --tone-cyan: #0891b2;
  --tone-cyan-soft: #e7f9fd;
  --tone-slate: #64748b;
  --tone-slate-soft: #eef2f6;
}

html[data-theme="dark"],
body.dark-mode,
.theme-dark {
  --tone-violet-soft: rgb(118 86 214 / 0.16);
  --tone-blue-soft: rgb(59 130 246 / 0.16);
  --tone-cyan-soft: rgb(8 145 178 / 0.16);
  --tone-slate-soft: rgb(100 116 139 / 0.16);
}

.app-root {
  min-width: 0;
  min-height: 100vh;
}

.noscript-message {
  position: fixed;
  z-index: calc(var(--z-toast) + 2);
  inset: auto var(--space-4) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-light);
  color: var(--color-warning-text);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.muted { color: var(--text-muted) !important; }
.eyebrow {
  color: var(--primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Shell structure emitted by ui.shell() */
.workspace {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  flex-direction: column;
  transition: margin-left var(--duration-normal) var(--ease-standard);
}

.app-shell .main {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - var(--header-height) - 4rem);
  margin-left: 0;
  flex: 1 0 auto;
  padding: var(--space-6) var(--content-gutter) var(--space-10);
}

.workspace > .app-footer {
  min-height: 4rem;
  margin: 0;
  padding: var(--space-4) var(--content-gutter);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.app-shell.sidebar-collapsed .workspace,
body.sidebar-collapsed .workspace {
  margin-left: var(--sidebar-collapsed-width);
}

.sidebar > .brand {
  display: flex;
  min-width: 0;
  min-height: var(--header-height);
  flex: 0 0 var(--header-height);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  color: #fff;
}

.sidebar > .brand:hover { text-decoration: none; }

.sidebar > .brand > img {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  padding: 0.2rem;
  border-radius: var(--radius-md);
  background: #fff;
  object-fit: contain;
}

.sidebar > .brand > span {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sidebar > .brand strong {
  overflow: hidden;
  color: #fff;
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar > .brand small {
  overflow: hidden;
  margin-top: 0.15rem;
  color: var(--sidebar-muted);
  font-size: var(--font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar > .sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
  scrollbar-width: thin;
}

.sidebar-nav > ul {
  display: grid;
  gap: var(--space-1);
}

.sidebar .nav-link > span,
.sidebar .nav-group-toggle > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .nav-link.is-active,
.sidebar .nav-link[aria-current="page"] {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.sidebar .nav-link.is-active::before {
  position: absolute;
  inset: 0 auto 0 -0.75rem;
  width: 0.22rem;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--color-primary-400);
  content: "";
}

.nav-group.is-open > .nav-submenu {
  max-height: 32rem;
  padding: var(--space-1) 0 var(--space-2);
  opacity: 1;
}

.nav-group.is-open > .nav-group-toggle > .fa-chevron-down {
  transform: rotate(180deg);
}

.nav-group-toggle > .fa-chevron-down {
  margin-left: auto;
  color: var(--sidebar-muted);
  font-size: 0.7rem;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.nav-dot {
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 0.38rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
}

.sidebar-collapse > .fa-angles-left {
  transition: transform var(--duration-normal) var(--ease-standard);
}

.app-shell.sidebar-collapsed .sidebar > .brand,
body.sidebar-collapsed .sidebar > .brand {
  justify-content: center;
  padding-inline: var(--space-2);
}

.app-shell.sidebar-collapsed .sidebar > .brand > span,
.app-shell.sidebar-collapsed .sidebar .nav-link > span,
.app-shell.sidebar-collapsed .sidebar .nav-group-toggle > span,
.app-shell.sidebar-collapsed .sidebar .nav-group-toggle > .fa-chevron-down,
body.sidebar-collapsed .sidebar > .brand > span,
body.sidebar-collapsed .sidebar .nav-link > span,
body.sidebar-collapsed .sidebar .nav-group-toggle > span,
body.sidebar-collapsed .sidebar .nav-group-toggle > .fa-chevron-down {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar > .sidebar-nav,
body.sidebar-collapsed .sidebar > .sidebar-nav {
  padding-inline: var(--space-2);
}

.app-shell.sidebar-collapsed .sidebar .nav-link,
.app-shell.sidebar-collapsed .sidebar .nav-group-toggle,
body.sidebar-collapsed .sidebar .nav-link,
body.sidebar-collapsed .sidebar .nav-group-toggle {
  justify-content: center;
  padding-inline: var(--space-2);
}

.app-shell.sidebar-collapsed .sidebar .nav-submenu,
body.sidebar-collapsed .sidebar .nav-submenu {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse > .fa-angles-left,
body.sidebar-collapsed .sidebar-collapse > .fa-angles-left {
  transform: rotate(180deg);
}

.sidebar-scrim {
  position: fixed;
  z-index: calc(var(--z-sidebar) - 1);
  inset: 0;
  visibility: hidden;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
}

/* Real topbar composition */
.workspace > .topbar {
  flex: 0 0 var(--header-height);
}

.topbar-leading {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-toggle { display: none; }

.topbar-title {
  display: grid;
  min-width: 0;
  line-height: 1.22;
}

.topbar-title small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-title strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-search {
  position: relative;
  width: min(28rem, 35vw);
  min-width: 11rem;
  margin-left: auto;
}

.search-field {
  position: relative;
  display: block;
  min-width: 0;
}

.search-field > i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.search-field > input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.58rem 0.85rem 0.58rem 2.45rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-sm);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.topbar-search .search-field > input {
  border-color: var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
}

.search-field > input:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.global-search-results {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-2));
  left: 0;
  display: grid;
  width: min(34rem, calc(100vw - 2rem));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.global-search-results[hidden] { display: none !important; }

.search-result-group {
  min-width: 0;
  padding: var(--space-2);
}

.search-result-group > small {
  display: block;
  padding: var(--space-1) var(--space-2) var(--space-2);
  color: var(--text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-result-group > a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.search-result-group > a:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.search-result-group > a > i {
  width: 2rem;
  color: var(--primary);
  text-align: center;
}

.search-result-group > a > span { display: grid; min-width: 0; }
.search-result-group > a strong { overflow: hidden; font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.search-result-group > a small,
.search-result-group > p { color: var(--text-muted); font-size: var(--font-size-2xs); }

.term-context {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
  padding-block: 0.35rem;
}

.term-context > span {
  display: grid;
  min-width: 4.5rem;
  line-height: 1.2;
}

.term-context > span + span {
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.term-context small { color: var(--text-subtle); font-size: 0.625rem; }
.term-context strong { color: var(--text); font-size: var(--font-size-xs); }

.profile-trigger {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

.profile-trigger:hover { background: var(--surface-muted); }
.profile-trigger > span { display: grid; min-width: 0; text-align: left; line-height: 1.25; }
.profile-trigger > span strong { overflow: hidden; max-width: 8rem; font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger > span small { color: var(--text-muted); font-size: 0.625rem; }
.profile-trigger > .fa-chevron-down { color: var(--text-subtle); font-size: 0.65rem; }

.has-indicator .indicator {
  position: absolute;
  top: 0.2rem;
  right: 0.1rem;
  display: grid;
  min-width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  padding-inline: 0.2rem;
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.55rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.dropdown-menu.show,
.dropdown.is-open > .dropdown-menu {
  display: block;
}

.dropdown-menu > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.dropdown-menu > a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-size-sm);
}

.dropdown-menu > a:hover { background: var(--surface-muted); text-decoration: none; }
.dropdown-menu > a > span:not(.avatar):not(.notification-icon) { display: grid; min-width: 0; flex: 1; }
.dropdown-menu > a strong { font-size: var(--font-size-xs); }
.dropdown-menu > a small { color: var(--text-muted); font-size: var(--font-size-2xs); }
.dropdown-menu > hr { margin: var(--space-2) 0; }

.notification-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.notification-icon.success { background: var(--color-success-light); color: var(--success); }
.notification-icon.warning { background: var(--color-warning-light); color: var(--warning); }
.notification-icon.danger { background: var(--color-danger-light); color: var(--danger); }

/* Page chrome generated by shared components */
.app-shell .page-header > div:first-child { min-width: 0; }

.breadcrumb { display: block; margin-bottom: var(--space-3); }

.breadcrumb > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li { display: inline-flex; align-items: center; }

.page-header > div:first-child > h1 {
  color: var(--text);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  letter-spacing: -0.025em;
}

.page-header > div:first-child > .eyebrow + h1 { margin-top: var(--space-2); }

.page-header > div:first-child > h1 + p {
  max-width: 52rem;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.panel-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
}

.panel-header h2 > i { color: var(--primary); }

.panel-header h2 + p {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.page-loading {
  display: grid;
  min-height: 55vh;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

.page-loading > i {
  color: var(--primary);
  font-size: 1.75rem;
  animation: spin 0.8s linear infinite;
}

.global-loading {
  position: fixed;
  z-index: calc(var(--z-toast) + 1);
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--background) 72%, transparent);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  backdrop-filter: blur(5px);
}

.global-loading[hidden] { display: none !important; }

.text-button,
.text-link,
.icon-text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.text-button:hover,
.text-link:hover,
.icon-text-button:hover { color: var(--primary-hover); text-decoration: underline; }

.icon-text-button {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.icon-text-button:hover { background: var(--surface-muted); text-decoration: none; }

/* Controls emitted by ui.filters()/ui.selectField() */
.compact-field {
  display: grid;
  min-width: 10rem;
  align-content: end;
  gap: var(--space-2);
}

.compact-field > span {
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.compact-field > select,
.compact-field > input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.58rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-sm);
}

.compact-field > select:focus,
.compact-field > input:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.filter-bar > .search-field { flex: 1 1 18rem; }
.filter-bar > .compact-field { flex: 0 1 12rem; }

.field-span-2 { grid-column: span 2; }

.input-prefix,
.input-action {
  display: flex;
  min-width: 0;
  align-items: stretch;
}

.input-prefix > span {
  display: grid;
  min-width: 2.5rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.input-prefix > input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.input-action > input { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }

.input-action > button {
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-muted);
  color: var(--primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.check-row,
.checkbox-control {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.check-row > input,
.checkbox-control > input {
  margin-top: 0.2rem;
  accent-color: var(--primary);
}

.check-row > span { display: grid; min-width: 0; }
.check-row strong { font-size: var(--font-size-sm); }
.check-row small { color: var(--text-muted); font-size: var(--font-size-xs); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.13) !important;
}

.field-error-block {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--color-danger-light);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

/* Pagination structure returned by ui.pagination() */
.pagination {
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
}

.pagination > p { color: var(--text-muted); font-size: var(--font-size-xs); }
.pagination > div { display: flex; align-items: center; gap: var(--space-1); }

.btn-page {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  color: var(--text-muted);
}

.btn-page:hover { background: var(--surface-muted); color: var(--text); }
.btn-page.is-active,
.btn-page[aria-current="page"] { background: var(--primary); color: var(--text-inverse); }

/* Statistics and status compatibility */
.stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.stat-body { min-width: 0; }
.stat-body > p { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.stat-body > strong { display: block; margin-top: var(--space-2); color: var(--text); font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.035em; line-height: 1.12; }

.trend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--success);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
}

.trend-down { color: var(--danger); }
.trend > span { color: var(--text-muted); font-weight: var(--font-weight-regular); }

.stat-primary { --stat-color: var(--primary); --stat-soft: var(--primary-soft); }
.stat-success { --stat-color: var(--success); --stat-soft: var(--color-success-light); }
.stat-warning { --stat-color: var(--warning); --stat-soft: var(--color-warning-light); }
.stat-danger { --stat-color: var(--danger); --stat-soft: var(--color-danger-light); }
.stat-violet { --stat-color: var(--tone-violet); --stat-soft: var(--tone-violet-soft); }
.stat-blue { --stat-color: var(--tone-blue); --stat-soft: var(--tone-blue-soft); }
.stat-cyan { --stat-color: var(--tone-cyan); --stat-soft: var(--tone-cyan-soft); }

.badge-active,
.badge-valid,
.badge-paid,
.badge-approved,
.badge-present,
.badge-completed,
.badge-success,
.badge-pass,
.badge-generated,
.badge-allowed,
.badge-reviewed {
  --badge-bg: var(--color-success-light);
  --badge-color: var(--color-success-text);
}

.badge-processing,
.badge-submitted,
.badge-replaced,
.badge-draft,
.badge-in-progress,
.badge-not-enrolled {
  --badge-bg: var(--color-info-light);
  --badge-color: var(--color-info-text);
}

.badge-pending,
.badge-partially-paid,
.badge-late,
.badge-returned,
.badge-pending-invitation,
.badge-on-leave {
  --badge-bg: var(--color-warning-light);
  --badge-color: var(--color-warning-text);
}

.badge-inactive,
.badge-invalid,
.badge-overdue,
.badge-rejected,
.badge-absent,
.badge-lost,
.badge-suspended,
.badge-expired,
.badge-failed,
.badge-fail,
.badge-locked {
  --badge-bg: var(--color-danger-light);
  --badge-color: var(--color-danger-text);
}

.badge-cancelled,
.badge-unpaid,
.badge-excused,
.badge-archived,
.badge-unknown,
.badge-contract,
.badge-permanent,
.badge-not-allowed {
  --badge-bg: var(--color-neutral-light);
  --badge-color: var(--color-neutral-text);
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--color-primary-400));
  transition: width var(--duration-slow) var(--ease-standard);
}

.progress > span.success { background: var(--success); }
.progress > span.warning { background: var(--warning); }
.progress > span.violet { background: var(--tone-violet); }
.progress > span.slate { background: var(--tone-slate); }

.progress-block { display: grid; gap: var(--space-2); }
.progress-block > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-muted); font-size: var(--font-size-xs); }
.progress-block > div:first-child strong { color: var(--text); }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.mini-stats > article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.mini-stat-icon,
.list-icon,
.context-icon,
.settings-icon,
.identity-summary-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.mini-stat-icon.success,
.list-icon.success { background: var(--color-success-light); color: var(--success); }
.mini-stat-icon.warning,
.list-icon.warning { background: var(--color-warning-light); color: var(--warning); }
.mini-stat-icon.danger,
.list-icon.danger { background: var(--color-danger-light); color: var(--danger); }
.mini-stat-icon.violet,
.list-icon.violet { background: var(--tone-violet-soft); color: var(--tone-violet); }
.mini-stat-icon.blue,
.list-icon.blue { background: var(--tone-blue-soft); color: var(--tone-blue); }

.mini-stats > article > div { display: grid; min-width: 0; }
.mini-stats > article strong { color: var(--text); font-size: var(--font-size-xl); line-height: 1.15; }
.mini-stats > article div > span { color: var(--text-muted); font-size: var(--font-size-xs); }

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border));
  border-radius: var(--radius-md);
  background: var(--color-info-light);
  color: var(--color-info-text);
  font-size: var(--font-size-sm);
}

.notice > i { margin-top: 0.15rem; }
.notice > div { min-width: 0; flex: 1; }
.notice p { margin-top: var(--space-1); color: inherit; opacity: 0.86; font-size: var(--font-size-xs); }
.notice > a { margin-left: auto; color: inherit; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.notice-success { border-color: color-mix(in srgb, var(--success) 22%, var(--border)); background: var(--color-success-light); color: var(--color-success-text); }
.notice-warning { border-color: color-mix(in srgb, var(--warning) 22%, var(--border)); background: var(--color-warning-light); color: var(--color-warning-text); }
.notice.compact { padding: var(--space-3); }

/* Modal, toast, empty state, and action structures */
.modal-backdrop.show { display: grid; }
.modal-profile,
.request-summary,
.invoice-modal-head,
.payment-context,
.selected-student-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.modal-profile > div,
.request-summary > div,
.invoice-modal-head > div,
.payment-context > div,
.selected-student-summary > div { display: grid; min-width: 0; flex: 1; }

.modal-profile p,
.request-summary p,
.payment-context small,
.selected-student-summary small { color: var(--text-muted); font-size: var(--font-size-xs); }

.request-summary > span,
.payment-context > span {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.action-list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.action-list > button,
.action-list > a {
  display: grid;
  width: 100%;
  min-height: 3.5rem;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.action-list > button:hover,
.action-list > a:hover { background: var(--surface-muted); color: var(--primary); text-decoration: none; }
.action-list > button > span,
.action-list > a > span { display: grid; min-width: 0; }
.action-list small { color: var(--text-muted); font-size: var(--font-size-2xs); }
.action-list .danger { color: var(--danger); }
.action-list.compact > button,
.action-list.compact > a { min-height: 2.75rem; }

.confirmation-content { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.confirmation-icon.danger { background: var(--color-danger-light); color: var(--danger); }

.toast {
  opacity: 0;
  transform: translateX(1.25rem);
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) var(--ease-standard);
}

.toast.is-visible { opacity: 1; transform: translateX(0); }
.toast > span:first-child { color: var(--toast-color); font-size: 1.05rem; }
.toast > div { min-width: 0; }
.toast > div > strong { display: block; font-size: var(--font-size-sm); }
.toast > div > p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.toast > button { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: var(--radius-xs); background: transparent; color: var(--text-subtle); }
.toast > button:hover { background: var(--surface-muted); color: var(--text); }
.toast-success { --toast-color: var(--success); }
.toast-warning { --toast-color: var(--warning); }
.toast-error { --toast-color: var(--danger); }
.toast-info { --toast-color: var(--info); }

.empty-state > .empty-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.6rem;
}

.empty-state > h3 { font-size: var(--font-size-lg); }
.empty-state > p { max-width: 28rem; color: var(--text-muted); font-size: var(--font-size-sm); }

/* Dashboard composition */
.context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--secondary) 28%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--color-secondary-50), var(--surface));
  box-shadow: var(--shadow-xs);
}

html[data-theme="dark"] .context-banner { background: linear-gradient(100deg, rgb(232 153 18 / 0.12), var(--surface)); }
.context-banner > div { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.context-banner .context-icon { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.context-banner p { color: var(--text-muted); font-size: var(--font-size-xs); }
.context-banner > a { flex: 0 0 auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }

section.quick-actions {
  display: block;
  margin-top: var(--space-6);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-heading h2 { margin-top: var(--space-1); font-size: var(--font-size-lg); }
.section-heading > span { color: var(--text-muted); font-size: var(--font-size-xs); }
.section-heading kbd { padding: 0.1rem 0.35rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--shadow-xs); font-family: var(--font-sans); font-size: 0.65rem; }

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.quick-action-grid .quick-action {
  position: relative;
  min-height: 7rem;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-4);
}

.quick-action > span:first-child {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.quick-action > strong { margin-top: auto; }
.quick-action > .fa-arrow-right { position: absolute; right: var(--space-3); bottom: var(--space-3); color: var(--text-subtle); }
.quick-success > span:first-child { background: var(--color-success-light); color: var(--success); }
.quick-warning > span:first-child { background: var(--color-warning-light); color: var(--warning); }
.quick-violet > span:first-child { background: var(--tone-violet-soft); color: var(--tone-violet); }
.quick-blue > span:first-child { background: var(--tone-blue-soft); color: var(--tone-blue); }
.quick-slate > span:first-child { background: var(--tone-slate-soft); color: var(--tone-slate); }

.dashboard-charts { margin-top: var(--space-6); }
.chart-span-2 { grid-column: span 2; }
.chart-card .panel-body { min-height: 0; }
.chart-card .chart-box { min-height: 17rem; padding: 0; border: 0; box-shadow: none; }
.chart-card .chart-wide { min-height: 19rem; }
.chart-summary { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-3); color: var(--text-muted); font-size: var(--font-size-xs); }
.chart-summary > span { display: flex; align-items: center; gap: var(--space-2); }

.dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--tone-slate);
}

.dot.primary { background: var(--primary); }
.dot.amber,
.dot.warning { background: var(--warning); }
.dot.success { background: var(--success); }
.dot.violet { background: var(--tone-violet); }
.dot.slate { background: var(--tone-slate); }

.dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.7fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

.dashboard-main-column,
.dashboard-side-column { display: grid; min-width: 0; gap: var(--space-6); }

.person-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
}

a.person-cell:hover { color: var(--primary); text-decoration: none; }
.person-cell > span:not(.avatar) { display: grid; min-width: 0; }
.person-cell strong,
.person-cell > strong { overflow: hidden; font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.person-cell small { overflow: hidden; color: var(--text-muted); font-size: var(--font-size-2xs); text-overflow: ellipsis; white-space: nowrap; }

.stacked-cell { display: grid; min-width: 0; }
.stacked-cell small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.compact-list,
.event-list,
.announcement-list,
.activity-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-list > a,
.event-list > article,
.announcement-list > article,
.activity-timeline > li {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  color: var(--text);
}

.compact-list > a + a,
.event-list > article + article,
.announcement-list > article + article,
.activity-timeline > li + li { border-top: 1px solid var(--border); }
.compact-list > a:hover { color: var(--primary); text-decoration: none; }
.compact-list > a > span:nth-child(2),
.announcement-list article > div,
.event-list article > div,
.activity-timeline li > div { display: grid; min-width: 0; }
.compact-list small,
.event-list small,
.announcement-list p,
.announcement-list small,
.activity-timeline p,
.activity-timeline time { color: var(--text-muted); font-size: var(--font-size-2xs); }

.event-list time {
  display: grid;
  width: 2.75rem;
  height: 3rem;
  place-items: center;
  align-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  line-height: 1;
}

.event-list time strong { font-size: var(--font-size-lg); }
.event-list time span { margin-top: 0.15rem; font-size: 0.6rem; text-transform: uppercase; }

.activity-timeline > li { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.activity-timeline > li > span {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--font-size-xs);
}

.activity-timeline > li > span.success { background: var(--color-success-light); color: var(--success); }
.activity-timeline > li > span.warning { background: var(--color-warning-light); color: var(--warning); }
.activity-timeline > li > span.violet { background: var(--tone-violet-soft); color: var(--tone-violet); }

/* User management, approvals, and permissions */
.role-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.role-label > i { color: var(--primary); }
.truncate-text { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-actions { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

.btn-danger-soft {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
  background: var(--color-danger-light);
  color: var(--color-danger-text);
}

.btn-danger-soft:hover { border-color: var(--danger); background: var(--danger); color: #fff; }

.form-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.form-aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: grid;
  gap: var(--space-4);
}

.form-main { display: grid; min-width: 0; gap: var(--space-6); }

.photo-uploader {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.photo-uploader > small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.avatar-preview {
  display: grid;
  width: 7rem;
  height: 7rem;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
  color: var(--primary);
  font-size: 2rem;
}

.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.form-help-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}

.form-help-card > span { flex: 0 0 auto; }
.form-help-card p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }

.role-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.role-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.role-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.role-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.15rem;
}

.role-icon.success { background: var(--color-success-light); color: var(--success); }
.role-icon.warning { background: var(--color-warning-light); color: var(--warning); }
.role-icon.violet { background: var(--tone-violet-soft); color: var(--tone-violet); }
.role-icon.blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.role-card > h2 { margin-top: var(--space-4); font-size: var(--font-size-lg); }
.role-card > p { min-height: 2.8rem; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }

.role-metrics {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.role-metrics strong { color: var(--text); }
.role-avatars { display: flex; min-height: 2.4rem; align-items: center; margin: var(--space-4) 0; }
.role-avatars .avatar + .avatar { margin-left: -0.55rem; }
.role-avatars small { margin-left: var(--space-2); color: var(--text-muted); font-size: var(--font-size-2xs); }

.guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.guidance-grid > article {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.guidance-grid > article > i { margin-top: 0.15rem; color: var(--primary); }
.guidance-grid p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }

.status-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  scrollbar-width: none;
}

.status-tabs::-webkit-scrollbar { display: none; }
.status-tabs > button { display: inline-flex; min-height: 2.35rem; flex: 0 0 auto; align-items: center; gap: var(--space-2); padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.status-tabs > button:hover { background: var(--surface-muted); color: var(--text); }
.status-tabs > button.is-active { background: var(--primary-soft); color: var(--primary); }
.status-tabs > button span { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; padding-inline: 0.25rem; border-radius: var(--radius-pill); background: var(--surface-muted); font-size: 0.6rem; }

.permission-toolbar .panel-body {
  display: flex;
  align-items: end;
  gap: var(--space-5);
}

.permission-toolbar .panel-body > div:first-child { display: grid; min-width: 13rem; gap: var(--space-2); }
.permission-toolbar label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.permission-toolbar select { min-height: var(--control-height); padding: 0.55rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }

.permission-summary { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-3); }
.permission-summary > span { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: var(--radius-sm); background: var(--color-success-light); color: var(--success); }
.permission-summary > div { display: grid; min-width: 0; }
.permission-summary small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.permission-matrix thead label { display: grid; justify-items: center; gap: var(--space-1); cursor: pointer; }
.module-name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.module-name > i { width: 1.2rem; color: var(--primary); text-align: center; }

.matrix-check {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  cursor: pointer;
}

.matrix-check > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.matrix-check > span:not(.sr-only) { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border: 1px solid var(--border-strong); border-radius: 0.3rem; background: var(--surface); color: transparent; font-size: 0.65rem; }
.matrix-check > input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.matrix-check > input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* Student directory, registration, profile, and attendance */
.student-card-banner {
  display: flex;
  height: 4.5rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3);
  background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-500));
}

.student-card-profile {
  display: grid;
  justify-items: center;
  margin-top: -2.4rem;
  padding-inline: var(--space-4);
  text-align: center;
}

.student-card-profile .avatar { margin-top: 0; }
.student-card-profile h2 { margin-top: var(--space-3); font-size: var(--font-size-md); }
.student-card-profile p { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); }

.student-card > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-top: 1px solid var(--border);
}

.student-card > dl div { min-width: 0; }
.student-card > dl dt { color: var(--text-subtle); font-size: var(--font-size-2xs); text-transform: uppercase; }
.student-card > dl dd { overflow: hidden; margin: var(--space-1) 0 0; color: var(--text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.student-card > .btn { width: calc(100% - var(--space-8)); margin: 0 var(--space-4) var(--space-4); }

.form-progress-label { display: grid; justify-items: end; line-height: 1.25; }
.form-progress-label strong { color: var(--primary); font-size: var(--font-size-xs); }
.form-progress-label small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.form-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--space-6);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.form-stepper > button {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.form-stepper > button:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(50% + 2.2rem);
  width: calc(100% - 4.4rem);
  height: 1px;
  background: var(--border);
  content: "";
}

.form-stepper > button > span { position: relative; z-index: 1; display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: 0.65rem; font-weight: var(--font-weight-bold); }
.form-stepper > button.is-active { color: var(--primary); }
.form-stepper > button.is-active > span { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.form-stepper > button.is-complete > span { border-color: var(--success); background: var(--success); color: #fff; }

.form-step { animation: form-step-in var(--duration-normal) ease; }
@keyframes form-step-in { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: none; } }

.registration-photo-row { display: flex; align-items: flex-start; gap: var(--space-6); }
.registration-photo-row > .photo-uploader { width: 14rem; flex: 0 0 14rem; }
.registration-photo-row > .form-grid { min-width: 0; }

.drop-zone-compact {
  min-height: 7rem;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
  gap: var(--space-2) var(--space-3);
  text-align: left;
}

.drop-zone-compact > span { grid-row: 1 / span 3; color: var(--primary); font-size: 1.35rem; }
.review-card { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); border-radius: var(--radius-md); background: var(--color-success-light); color: var(--color-success-text); }
.review-card p { margin-top: var(--space-1); color: inherit; opacity: 0.85; font-size: var(--font-size-xs); }

.sticky-actions {
  position: sticky;
  z-index: 15;
  bottom: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.sticky-actions > span:first-child { margin-right: auto; color: var(--text-muted); font-size: var(--font-size-xs); }
.save-state { display: inline-flex; align-items: center; gap: var(--space-2); }
.save-state > i { color: var(--success); }

.student-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--surface), var(--primary-soft));
  box-shadow: var(--shadow-card);
}

.student-identity { display: flex; min-width: 0; align-items: center; gap: var(--space-5); }
.avatar-xxl { width: 6.5rem; height: 6.5rem; flex-basis: 6.5rem; font-size: var(--font-size-xl); }
.title-with-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.title-with-badge h1 { font-size: var(--font-size-2xl); }
.student-identity > div > p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-sm); }
.profile-contact { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); color: var(--text-muted); font-size: var(--font-size-xs); }
.profile-contact span { display: inline-flex; align-items: center; gap: var(--space-1); }

.profile-health { display: grid; grid-template-columns: repeat(3, minmax(7rem, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); gap: 1px; }
.profile-health > article { min-width: 0; padding: var(--space-4); background: var(--surface); text-align: center; }
.profile-health span,
.profile-health small { display: block; color: var(--text-muted); font-size: var(--font-size-2xs); }
.profile-health strong { display: block; margin-block: var(--space-1); color: var(--text); font-size: var(--font-size-lg); }

.profile-tab-content { min-height: 18rem; padding-top: var(--space-5); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.detail-grid > div { display: grid; grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.detail-grid dt { color: var(--text-muted); font-size: var(--font-size-xs); }
.detail-grid dd { margin: 0; color: var(--text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.profile-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.profile-metric-row article { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.profile-metric-row strong { display: block; color: var(--text); font-size: var(--font-size-xl); }
.profile-metric-row span { color: var(--text-muted); font-size: var(--font-size-xs); }

.identity-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.identity-summary p { color: var(--text-muted); font-size: var(--font-size-xs); }
.document-list { display: grid; }
.document-list > article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; }
.document-list > article + article { border-top: 1px solid var(--border); }
.document-list > article > i { color: var(--primary); font-size: 1.2rem; }
.document-list > article > span { display: grid; min-width: 0; }
.document-list small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.attendance-toolbar .panel-body,
.selection-panel .panel-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.attendance-toolbar .compact-field,
.selection-panel .compact-field { flex: 1 1 9rem; }

.attendance-session { display: flex; min-width: 12rem; align-items: center; gap: var(--space-2); padding: 0.45rem var(--space-3); border-radius: var(--radius-sm); background: var(--color-success-light); color: var(--color-success-text); }
.attendance-session > span { flex: 0 0 auto; }
.attendance-session > div { display: grid; }
.attendance-session strong { font-size: var(--font-size-xs); }
.attendance-session small { font-size: 0.625rem; }

.attendance-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(13rem, 1.5fr);
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.attendance-summary > article { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.attendance-summary > article > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-sm); background: var(--summary-soft, var(--primary-soft)); color: var(--summary-color, var(--primary)); }
.attendance-summary > article > div { display: grid; }
.attendance-summary article strong { font-size: var(--font-size-lg); line-height: 1; }
.attendance-summary article small { color: var(--text-muted); font-size: var(--font-size-2xs); }
.attendance-present { --summary-soft: var(--color-success-light); --summary-color: var(--success); }
.attendance-absent { --summary-soft: var(--color-danger-light); --summary-color: var(--danger); }
.attendance-late { --summary-soft: var(--color-warning-light); --summary-color: var(--warning); }
.attendance-excused { --summary-soft: var(--color-info-light); --summary-color: var(--info); }
.attendance-sick { --summary-soft: var(--tone-violet-soft); --summary-color: var(--tone-violet); }
.attendance-summary > #attendance-progress { display: grid; align-content: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }

.bulk-attendance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.bulk-attendance > span { margin-right: var(--space-1); color: var(--text-muted); font-size: var(--font-size-2xs); }

.attendance-choice.choice-present { --choice-color: var(--success); }
.attendance-choice.choice-absent { --choice-color: var(--danger); }
.attendance-choice.choice-late { --choice-color: var(--warning); }
.attendance-choice.choice-excused { --choice-color: var(--info); }
.attendance-choice.choice-sick { --choice-color: var(--tone-violet); }
.attendance-choice > span { display: grid; place-items: center; }

.table-input {
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-xs);
}

.table-input:focus { border-color: var(--primary); outline: 0; box-shadow: var(--shadow-focus); }
.remark-input { width: 9rem; }

/* Academic module */
.mark-sheet-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(12rem, 1.2fr);
  gap: 1px;
  overflow: hidden;
  margin: var(--space-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
}

.mark-sheet-summary > article,
.sheet-status { padding: var(--space-4); background: var(--surface); }
.mark-sheet-summary > article span { display: block; color: var(--text-muted); font-size: var(--font-size-2xs); }
.mark-sheet-summary > article strong { display: block; margin-top: var(--space-1); font-size: var(--font-size-lg); }
.sheet-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); }
.sheet-status small { color: var(--text-muted); font-size: var(--font-size-2xs); }
.autosave-state { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); font-size: var(--font-size-xs); }
.max-mark { display: inline-grid; min-width: 2.5rem; height: 2rem; place-items: center; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); font-size: var(--font-size-xs); }
.marks-table .mark-input { width: 5rem !important; }

.import-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.import-steps > article { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); }
.import-steps > article > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 50%; background: var(--surface-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.import-steps > article > div { display: grid; }
.import-steps strong { color: var(--text); font-size: var(--font-size-sm); }
.import-steps small { font-size: var(--font-size-2xs); }
.import-steps > article.is-active { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); color: var(--primary); }
.import-steps > article.is-active > span { background: var(--primary); color: var(--text-inverse); }

.two-column-layout,
.grading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.65fr);
  gap: var(--space-6);
  align-items: start;
}

.two-column-layout > div,
.two-column-layout > aside,
.grading-layout > div,
.grading-layout > aside { display: grid; min-width: 0; gap: var(--space-6); }

.upload-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.upload-guidance > article { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.upload-guidance > article > i { color: var(--primary); }
.upload-guidance strong { font-size: var(--font-size-xs); }
.upload-guidance p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-2xs); }

.file-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.file-type-icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius-sm); background: var(--color-success-light); color: var(--success); font-size: 1.2rem; }
.file-summary > div { display: grid; min-width: 0; }
.file-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-summary small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.validation-score { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-success-light); color: var(--color-success-text); }
.validation-score > span { font-size: 1.35rem; }
.validation-score > div { display: grid; }
.validation-score small { font-size: var(--font-size-2xs); }
.validation-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.validation-stats article { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-subtle); text-align: center; }
.validation-stats strong { display: block; font-size: var(--font-size-xl); }
.validation-stats span { color: var(--text-muted); font-size: 0.625rem; }
.validation-stats .success strong { color: var(--success); }
.validation-stats .danger strong { color: var(--danger); }
.validation-stats .warning strong { color: var(--warning); }
.validation-issues { margin-block: var(--space-4); }
.validation-issues h3 { margin-bottom: var(--space-2); font-size: var(--font-size-sm); }
.validation-issues p { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--font-size-xs); }
.validation-issues p span { color: var(--danger); font-weight: var(--font-weight-semibold); }

.grade-chip { --grade-text: var(--grade-color); background: color-mix(in srgb, var(--grade-color) 14%, var(--surface)); }
.color-swatch { display: inline-flex; align-items: center; gap: var(--space-2); }
.color-swatch > i { width: 1rem; height: 1rem; border-radius: 50%; }

.grade-scale { display: flex; min-height: 13rem; align-items: end; gap: var(--space-2); padding-top: var(--space-4); }
.grade-scale > div { display: grid; min-width: 2.5rem; height: calc(var(--size) * 1.8px + 3.5rem); flex: var(--size); align-content: end; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: color-mix(in srgb, var(--color) 16%, var(--surface)); border-bottom: 0.25rem solid var(--color); text-align: center; }
.grade-scale > div span { color: var(--color); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.grade-scale > div strong { font-size: 0.6rem; white-space: nowrap; }

.check-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.check-list i { margin-top: 0.15rem; color: var(--success); }

.teacher-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.teacher-card { display: flex; min-width: 0; flex-direction: column; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.teacher-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.teacher-card > h2 { margin-top: var(--space-4); font-size: var(--font-size-md); }
.teacher-card > p { color: var(--text-muted); font-size: var(--font-size-xs); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.tag-list > span { padding: 0.2rem 0.5rem; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: 0.625rem; font-weight: var(--font-weight-medium); }
.tag-list.compact { margin-top: 0; }
.workload { display: grid; gap: var(--space-2); margin: auto 0 var(--space-4); padding-top: var(--space-4); }
.workload > span { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.workload small { color: var(--text-muted); font-size: 0.625rem; }

/* Accountant module */
.invoice-total-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.invoice-total-grid > article { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-subtle); }
.invoice-total-grid span { display: block; color: var(--text-muted); font-size: var(--font-size-2xs); }
.invoice-total-grid strong { display: block; margin-top: var(--space-1); font-size: var(--font-size-lg); }

.spending-list { display: grid; gap: var(--space-4); }
.spending-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.spending-list > div > span { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.spending-list > div > strong { font-size: var(--font-size-xs); }
.spending-list .progress { grid-column: 1 / -1; height: 0.4rem; }

.fee-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.fee-card { display: flex; min-width: 0; flex-direction: column; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.fee-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.fee-icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
.fee-icon.success { background: var(--color-success-light); color: var(--success); }
.fee-icon.warning { background: var(--color-warning-light); color: var(--warning); }
.fee-icon.violet { background: var(--tone-violet-soft); color: var(--tone-violet); }
.fee-card > p { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--font-size-2xs); }
.fee-card > h2 { margin-top: var(--space-1); font-size: var(--font-size-md); }
.fee-card > strong { margin-top: var(--space-3); color: var(--primary); font-size: var(--font-size-xl); }
.fee-card > dl { display: grid; gap: var(--space-2); margin: var(--space-4) 0; padding-block: var(--space-3); border-block: 1px solid var(--border); }
.fee-card > dl > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-xs); }
.fee-card dt { color: var(--text-muted); }
.fee-card dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }
.fee-card > .btn { margin-top: auto; }

/* Identity-card tools and current CR80 markup */
.identity-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.identity-controls {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: grid;
  gap: var(--space-5);
}

.identity-preview-column { display: grid; min-width: 0; gap: var(--space-5); }

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.preview-toolbar > div:first-child { display: grid; min-width: 0; }
.preview-toolbar strong { font-size: var(--font-size-sm); }
.preview-toolbar small { color: var(--text-muted); font-size: var(--font-size-2xs); }

.side-toggle {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.side-toggle > button { min-height: 2rem; padding: 0.35rem 0.7rem; border-radius: calc(var(--radius-sm) - 0.15rem); background: transparent; color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.side-toggle > button.is-active { background: var(--surface); box-shadow: var(--shadow-xs); color: var(--primary); }

.card-preview-stage {
  display: grid;
  min-width: 0;
  min-height: 19rem;
  place-items: center;
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(45deg, var(--border) 25%, transparent 25%) 0 0 / 1rem 1rem,
    linear-gradient(-45deg, var(--border) 25%, transparent 25%) 0 0 / 1rem 1rem,
    linear-gradient(45deg, transparent 75%, var(--border) 75%) 0 0 / 1rem 1rem,
    linear-gradient(-45deg, transparent 75%, var(--border) 75%) 0 0 / 1rem 1rem,
    var(--surface-muted);
}

.card-preview-stage.compact { min-height: 15rem; padding: var(--space-4); }

.identity-card-pair {
  display: flex;
  width: max-content;
  max-width: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.identity-card-pair[data-preview-side="front"] .card-back,
.identity-card-pair[data-preview-side="back"] .card-front { display: none; }

/* Current front face internals; outer dimensions remain in components.css. */
.identity-card.card-front { grid-template-rows: 12.5mm minmax(0, 1fr) 5mm; }

.id-card-header > img {
  width: 8mm;
  height: 8mm;
  padding: 0.5mm;
  border-radius: 1.2mm;
  background: #fff;
  object-fit: contain;
}

.id-card-header > div { min-width: 0; }
.id-card-header > div > strong { display: block; overflow: hidden; color: #fff; font-size: 2.8mm; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.id-card-header > div > small { display: block; overflow: hidden; margin-top: 0.6mm; color: rgb(255 255 255 / 0.76); font-size: 1.45mm; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.id-card-header > span { padding: 0.9mm 1.3mm; border: 0.2mm solid rgb(255 255 255 / 0.42); border-radius: 5mm; color: #fff; font-size: 1.35mm; font-weight: 800; letter-spacing: 0.08em; }

.card-watermark { position: absolute; z-index: -1; right: 16mm; bottom: 4mm; color: rgb(8 114 90 / 0.045); font-size: 23mm; font-weight: 900; letter-spacing: -0.08em; line-height: 1; transform: rotate(-8deg); }
.id-photo-wrap { position: relative; align-self: center; }
.id-photo { width: 21mm; height: 26mm; border: 0.6mm solid #fff; border-radius: 2mm; box-shadow: 0 0 0 0.3mm #c9d9d5; object-fit: cover; }
.id-status { position: absolute; right: 1mm; bottom: 1mm; padding: 0.7mm 1.2mm; border: 0.25mm solid #fff; border-radius: 4mm; background: #15803d; color: #fff; font-size: 1.25mm; font-weight: 800; text-transform: uppercase; }
.id-status.status-suspended,
.id-status.status-lost,
.id-status.status-invalid,
.id-status.status-expired { background: #dc2626; }

.id-details { min-width: 0; align-self: center; }
.id-details > p { color: #64748b; font-size: 1.35mm; letter-spacing: 0.08em; text-transform: uppercase; }
.id-details > h2 { overflow: hidden; margin-top: 0.4mm; color: #073f34; font-size: 3.05mm; font-weight: 850; line-height: 1.08; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.id-details > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65mm 1.5mm; margin: 1.5mm 0 0; }
.id-details > dl > div { min-width: 0; }
.id-details dt { overflow: hidden; color: #64748b; font-size: 1.2mm; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.id-details dd { overflow: hidden; margin: 0.2mm 0 0; color: #17212b; font-size: 1.55mm; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

.id-verify { display: grid; align-content: center; justify-items: center; gap: 0.7mm; }
.id-verify > small { color: #64748b; font-size: 1.15mm; font-weight: 750; letter-spacing: 0.05em; text-align: center; }
.id-qr { width: 15mm; height: 15mm; overflow: hidden; padding: 0.7mm; background: #fff; }
.id-qr canvas,
.id-qr img { width: 13.6mm !important; height: 13.6mm !important; padding: 0; }
.id-qr .qr-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #073f34; font-size: 8mm; }

.id-card-footer > span { display: grid; line-height: 1.05; }
.id-card-footer > span strong { color: #17483e; font-family: var(--font-mono); font-size: 1.35mm; }
.id-card-footer > span small { color: #52736b; font-size: 1.05mm; }
.id-card-footer .signature { min-width: 18mm; padding-top: 0.5mm; border-top: 0.2mm solid #52736b; text-align: center; }
.id-card-footer .signature i { display: block; color: #17483e; font-family: cursive; font-size: 1.7mm; line-height: 1; }
.id-card-footer .signature span { display: block; color: #52736b; font-size: 1mm; }

/* Current back face has four semantic rows. */
.identity-card.card-back {
  grid-template-rows: 10mm 25mm 13.5mm 5.48mm;
  background: linear-gradient(150deg, #fff, #f1faf7);
}

.identity-card.card-back > header { display: flex; align-items: center; gap: 2mm; padding: 2mm 3mm; background: #073f34; color: #fff; }
.identity-card.card-back > header img { width: 6mm; height: 6mm; padding: 0.4mm; border-radius: 1mm; background: #fff; object-fit: contain; }
.identity-card.card-back > header div { min-width: 0; }
.identity-card.card-back > header strong { display: block; color: #fff; font-size: 2.45mm; line-height: 1.1; }
.identity-card.card-back > header small { display: block; color: rgb(255 255 255 / 0.72); font-size: 1.35mm; }

.back-content { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3mm; padding: 2.2mm 3mm; color: #334155; }
.back-content h3 { margin-bottom: 1mm; color: #073f34; font-size: 1.8mm; }
.back-content p,
.back-content li { margin: 0 0 0.55mm; color: #475569; font-size: 1.35mm; line-height: 1.25; }
.back-content ol { margin: 0; padding-left: 3mm; }
.back-content .terms { padding-left: 2.5mm; border-left: 0.2mm solid #d4e2de; }

.verify-instructions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5mm; align-items: center; padding: 1.5mm 3mm; border-block: 0.2mm solid #d4e2de; background: #eef8f5; color: #17483e; }
.verify-instructions > span { display: grid; width: 5mm; height: 5mm; place-items: center; border-radius: 50%; background: #d1faed; font-size: 2mm; }
.verify-instructions p { font-size: 1.3mm; line-height: 1.25; }
.verify-instructions code { padding: 0.7mm 1mm; border-radius: 0.8mm; background: #fff; color: #073f34; font-size: 1.2mm; font-weight: 700; white-space: nowrap; }
.identity-card.card-back > footer { display: flex; align-items: center; justify-content: space-between; padding: 0 3mm; background: #073f34; color: rgb(255 255 255 / 0.85); font-size: 1.25mm; }

.token-field,
.verification-url-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.token-field { margin-top: var(--space-4); }
.token-field > span,
.verification-url-preview > span { color: var(--primary); }
.token-field > div,
.verification-url-preview > div { display: grid; min-width: 0; }
.token-field small,
.verification-url-preview small { color: var(--text-muted); font-size: var(--font-size-2xs); }
.token-field code,
.verification-url-preview code { overflow: hidden; color: var(--text); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }

.stacked-buttons { display: grid; gap: var(--space-2); }
.print-spec { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--font-size-2xs); text-align: center; }

.lost-card-search .panel-body { display: grid; grid-template-columns: minmax(14rem, 1fr) auto minmax(16rem, 0.8fr); gap: var(--space-3); align-items: center; }
.lost-card-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.65fr); gap: var(--space-6); align-items: start; }
.lost-card-layout > div,
.lost-card-layout > aside { display: grid; min-width: 0; gap: var(--space-5); }

.workflow-list { display: grid; margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: workflow; }
.workflow-list > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: 0 0 var(--space-5); color: var(--text-muted); }
.workflow-list > li:not(:last-child)::after { position: absolute; top: 2rem; bottom: 0.2rem; left: 0.9rem; width: 2px; background: var(--border); content: ""; }
.workflow-list > li > span { position: relative; z-index: 1; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: 0.65rem; font-weight: var(--font-weight-bold); }
.workflow-list > li > div { display: grid; }
.workflow-list strong { color: var(--text); font-size: var(--font-size-xs); }
.workflow-list small { font-size: var(--font-size-2xs); }
.workflow-list > li.is-current > span { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); color: var(--primary); }
.workflow-list > li.is-complete > span { border-color: var(--success); background: var(--success); color: #fff; }
.replacement-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }

.print-layout { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.print-layout > aside { position: sticky; top: calc(var(--header-height) + var(--space-5)); display: grid; gap: var(--space-5); }
.print-preview-wrap { min-width: 0; overflow: auto; padding-bottom: var(--space-3); }
.selection-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-selection-list { display: grid; max-height: 28rem; gap: var(--space-1); overflow-y: auto; }
.card-selection-list > label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.card-selection-list > label:hover { background: var(--surface-muted); }
.card-selection-list > label > input { accent-color: var(--primary); }
.card-selection-list > label > span { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.card-selection-list > label > span > span { display: grid; min-width: 0; }
.card-selection-list strong,
.card-selection-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-selection-list strong { font-size: var(--font-size-xs); }
.card-selection-list small { color: var(--text-muted); font-size: 0.625rem; }

.a4-sheet > .print-card-slot { width: 85.60mm; height: 53.98mm; overflow: hidden; }
.a4-preview-stack.show-cut-guides .print-card-slot { outline: 0.2mm dashed #94a3b8; outline-offset: 1mm; }
.a4-sheet .print-card-slot > .identity-card-pair { display: block; width: 85.60mm; height: 53.98mm; }

@media screen {
  .a4-sheet .print-card-slot .card-back { display: none; }
  .card-preview-stage.compact .identity-card-pair > .card-back { display: none; }
}

/* Public card verification */
body.public-verification { background: var(--background); }

.public-verification .verification-shell {
  display: flex;
  width: 100%;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: 0 0 var(--space-8);
  background: radial-gradient(circle at top, rgb(18 185 139 / 0.13), transparent 32rem), var(--background);
}

.public-verification .verification-header {
  display: flex;
  width: 100%;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) max(var(--content-gutter), calc((100vw - 70rem) / 2));
  background: linear-gradient(120deg, var(--color-primary-950), var(--color-primary-700));
  box-shadow: var(--shadow-md);
  color: #fff;
}

.verification-header > a { display: flex; min-width: 0; align-items: center; gap: var(--space-3); color: #fff; }
.verification-header > a:hover { text-decoration: none; }
.verification-header img { width: 3rem; height: 3rem; padding: 0.2rem; border-radius: var(--radius-sm); background: #fff; object-fit: contain; }
.verification-header a > span { display: grid; min-width: 0; }
.verification-header strong { color: #fff; font-size: var(--font-size-sm); }
.verification-header small { color: rgb(255 255 255 / 0.72); font-size: var(--font-size-2xs); }
.verification-header .btn { color: #fff; }

.public-verification .verification-card {
  width: min(46rem, calc(100% - 2rem));
  overflow: visible;
  text-align: left;
}

.public-verification .verification-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.verification-status > span:first-child { display: grid; width: 3.75rem; height: 3.75rem; place-items: center; border-radius: 50%; background: var(--color-success-light); color: var(--success); font-size: 1.5rem; }
.verification-status.is-invalid > span:first-child { background: var(--color-danger-light); color: var(--danger); }
.verification-status > div > p:first-child { color: var(--text-subtle); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.verification-status h1 { margin-top: var(--space-1); font-size: var(--font-size-xl); }
.verification-status h1 + p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }

.public-student-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--space-6); }
.public-student-profile > div { min-width: 0; }
.public-student-profile > div > p { color: var(--text-subtle); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.public-student-profile h2 { margin-top: var(--space-1); font-size: var(--font-size-xl); }
.public-student-profile dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-5) 0 0; }
.public-student-profile dt { color: var(--text-muted); font-size: var(--font-size-2xs); }
.public-student-profile dd { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.privacy-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-muted); font-size: var(--font-size-xs); }
.privacy-note > i { margin-top: 0.15rem; color: var(--primary); }
.verification-empty { display: grid; min-height: 16rem; justify-items: center; align-content: center; gap: var(--space-3); padding: var(--space-6); text-align: center; }
.verification-empty > i { color: var(--danger); font-size: 2rem; }
.verification-empty p { color: var(--text-muted); font-size: var(--font-size-sm); }

.verify-another { width: min(46rem, calc(100% - 2rem)); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.verify-another h2 { font-size: var(--font-size-md); }
.verify-another form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.verify-another form > label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.verify-another form > div { display: flex; gap: var(--space-2); }
.verify-another input { min-width: 0; min-height: var(--control-height); flex: 1; padding: 0.6rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: var(--font-mono); }

.demo-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-muted); font-size: var(--font-size-2xs); }
.demo-statuses > a { padding: 0.25rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); }
.demo-statuses > a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: var(--font-weight-semibold); }
.verification-footer { display: flex; width: min(46rem, calc(100% - 2rem)); align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--text-muted); font-size: var(--font-size-xs); }
.verification-footer > div { display: grid; }

/* Reports */
.report-filter-panel { margin-bottom: var(--space-5); }
.report-type-select { display: grid; grid-template-columns: minmax(8rem, 0.24fr) minmax(14rem, 1fr); gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--primary-soft); }
.report-type-select label { color: var(--primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.report-type-select select { min-height: var(--control-height); padding: 0.55rem 0.75rem; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }

.report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.report-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.report-preview .report-header > img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.report-preview .report-header > div { min-width: 0; }
.report-preview .report-header h2 { color: #0b3d35; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; }
.report-preview .report-header p { color: #536270; font-size: 0.72rem; }
.report-preview .report-header > span { color: #08725a; font-size: 2rem; }

.report-preview > .report-title { margin: var(--space-6) 0 var(--space-4); text-align: center; }
.report-preview > .report-title > p { color: #08725a; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; }
.report-preview > .report-title > h1 { margin-top: var(--space-1); color: #17212b; font-size: 1.15rem; text-transform: uppercase; }
.report-preview > .report-title > div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); color: #475569; font-size: 0.7rem; }

.report-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: var(--space-5); border: 1px solid #dbe3e8; border-radius: 0.35rem; background: #dbe3e8; }
.report-summary > article { padding: 0.75rem; background: #f7faf9; text-align: center; }
.report-summary strong { display: block; color: #173f37; font-size: 1rem; }
.report-summary span { color: #64748b; font-size: 0.65rem; }
.report-table .table-wrap { overflow: visible; }
.report-table .data-table { min-width: 0; }
.report-signatures > div > span { display: block; height: 2rem; border-bottom: 1px solid #64748b; }
.report-signatures strong,
.report-signatures small { display: block; }
.report-signatures small { color: #64748b; }
.report-footnote { margin-top: var(--space-8); padding-top: var(--space-3); border-top: 1px solid #dbe3e8; color: #64748b; font-size: 0.62rem; text-align: center; }

/* Parent portal */
.linked-student-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.linked-student-bar > label { display: grid; grid-template-columns: auto minmax(11rem, 1fr); align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.linked-student-bar select { min-height: var(--control-height-sm); padding: 0.4rem 0.65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }

.parent-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-600));
  box-shadow: var(--shadow-md);
  color: #fff;
}

.parent-welcome h2 { margin-top: var(--space-2); color: #fff; font-size: var(--font-size-2xl); }
.parent-welcome p:not(.eyebrow) { margin-top: var(--space-2); color: rgb(255 255 255 / 0.75); }
.parent-welcome .eyebrow { color: var(--color-secondary-300); }
.parent-welcome > span { color: rgb(255 255 255 / 0.14); font-size: 5rem; }

.parent-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-6); }
.parent-action-grid > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text); transition: all var(--duration-normal) ease; }
.parent-action-grid > a:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-2px); }
.parent-action-grid > a > span:first-child { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); }
.parent-action-grid > a > span.success { background: var(--color-success-light); color: var(--success); }
.parent-action-grid > a > span.violet { background: var(--tone-violet-soft); color: var(--tone-violet); }
.parent-action-grid p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.parent-action-grid > a > .fa-arrow-right { color: var(--text-subtle); }

.parent-balance-card,
.result-hero {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-600));
  box-shadow: var(--shadow-md);
  color: #fff;
}

.parent-balance-card p,
.result-hero p { color: rgb(255 255 255 / 0.72); font-size: var(--font-size-xs); }
.parent-balance-card > div:first-child > strong { display: block; margin-block: var(--space-1); color: #fff; font-size: var(--font-size-3xl); }
.parent-balance-card > div:first-child > span { color: rgb(255 255 255 / 0.75); font-size: var(--font-size-xs); }
.balance-progress > div:first-child { display: flex; justify-content: space-between; gap: var(--space-3); color: rgb(255 255 255 / 0.76); font-size: var(--font-size-xs); }
.balance-progress .progress { margin-top: var(--space-3); background: rgb(255 255 255 / 0.2); }
.balance-progress .progress > span { background: var(--color-secondary-300); }
.btn-light { border-color: #fff; background: #fff; color: var(--color-primary-800); }
.btn-light:hover { background: var(--color-primary-50); color: var(--color-primary-900); }

.fee-breakdown { display: grid; }
.fee-breakdown > article { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.fee-breakdown > article > div { display: grid; justify-items: start; gap: var(--space-1); }
.fee-breakdown > article > span { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.fee-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-muted); }
.support-card { display: flex; align-items: flex-start; gap: var(--space-3); }
.support-card > span { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.support-card p { color: var(--text-muted); font-size: var(--font-size-xs); }

.calendar-nav { display: flex; align-items: center; gap: var(--space-1); }
.attendance-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--text-muted); font-size: var(--font-size-2xs); }
.attendance-legend > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.attendance-legend i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--text-subtle); }
.attendance-legend .present { background: var(--success); }
.attendance-legend .absent { background: var(--danger); }
.attendance-legend .late { background: var(--warning); }
.attendance-legend .weekend { background: var(--border-strong); }

.calendar-grid > div {
  padding: var(--space-2);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid > span { min-height: 4.5rem; background: var(--surface-subtle); }
.calendar-grid .calendar-day { display: grid; min-height: 4.5rem; place-items: center; align-content: center; gap: var(--space-1); border-radius: 0; background: var(--surface); }
.calendar-grid .calendar-day > i { font-size: 0.65rem; }
.calendar-grid .calendar-day.present { color: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.calendar-grid .calendar-day.absent { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.calendar-grid .calendar-day.late { color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.calendar-grid .calendar-day.weekend { color: var(--text-subtle); background: var(--surface-subtle); }
.calendar-grid .calendar-day.future { color: var(--text-subtle); opacity: 0.55; }

.remark-card { padding: var(--space-3); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.remark-card > p { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--font-size-sm); font-style: italic; }

.result-hero > div:first-child h2 { margin-top: var(--space-1); color: #fff; font-size: var(--font-size-xl); }
.result-hero > div:first-child > span { color: rgb(255 255 255 / 0.72); font-size: var(--font-size-xs); }
.result-rank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.2); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.18); }
.result-rank > article { padding: var(--space-3); background: rgb(255 255 255 / 0.08); text-align: center; }
.result-rank span { display: block; color: rgb(255 255 255 / 0.65); font-size: 0.625rem; }
.result-rank strong { display: block; margin-top: var(--space-1); color: #fff; font-size: var(--font-size-xl); }
.result-rank strong small { color: rgb(255 255 255 / 0.62); font-size: var(--font-size-xs); }
.mark-cell { display: grid; grid-template-columns: 2.25rem minmax(5rem, 1fr); gap: var(--space-2); align-items: center; }
.mark-cell .progress { height: 0.35rem; }
.teacher-comment { margin: 0; padding: var(--space-5); border-left: 4px solid var(--primary); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--text); font-size: var(--font-size-sm); line-height: 1.8; }
.teacher-comment footer { display: grid; margin-top: var(--space-4); color: var(--text-muted); font-size: var(--font-size-xs); }
.result-summary-list { display: grid; margin: 0; }
.result-summary-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.result-summary-list > div:last-child { border-bottom: 0; }
.result-summary-list dt { color: var(--text-muted); font-size: var(--font-size-xs); }
.result-summary-list dd { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: right; }

/* Settings */
.settings-layout {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.settings-layout > .settings-nav { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
.settings-layout > .settings-nav .panel-body { display: grid; justify-items: start; gap: var(--space-3); }
.settings-layout .settings-icon { width: 3.5rem; height: 3.5rem; font-size: 1.35rem; }
.settings-layout .settings-nav h2 { font-size: var(--font-size-lg); }
.settings-layout .settings-nav p { color: var(--text-muted); font-size: var(--font-size-xs); }
.settings-content { display: grid; min-width: 0; gap: var(--space-6); }

.switch-list { display: grid; }
.switch-list > label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0; cursor: pointer; }
.switch-list > label + label { border-top: 1px solid var(--border); }
.switch-list > label > span { display: grid; min-width: 0; }
.switch-list small { color: var(--text-muted); font-size: var(--font-size-xs); }
.switch-list input[role="switch"] { position: relative; width: 2.75rem; height: 1.5rem; flex: 0 0 2.75rem; appearance: none; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background-color var(--duration-fast) ease; }
.switch-list input[role="switch"]::after { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); content: ""; transition: transform var(--duration-normal) ease; }
.switch-list input[role="switch"]:checked { background: var(--primary); }
.switch-list input[role="switch"]:checked::after { transform: translateX(1.25rem); }
.switch-list input[role="switch"]:focus-visible { box-shadow: var(--shadow-focus); }

/* Login markup enhancements */
.login-panel { position: relative; }
.login-theme { position: absolute; top: var(--space-5); right: var(--space-5); }
.login-brand > span:last-child { display: grid; line-height: 1.2; }
.login-brand strong { color: #fff; font-size: var(--font-size-sm); }
.login-brand small { color: rgb(255 255 255 / 0.7); font-size: var(--font-size-2xs); }

.login-highlights { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.login-highlights > span { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.84); font-size: var(--font-size-xs); }
.login-highlights i { color: var(--color-secondary-300); }

.label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.label-row > a { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }

.input-with-icon { position: relative; }
.input-with-icon > i { position: absolute; z-index: 1; top: 50%; left: 0.9rem; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.input-with-icon > input { width: 100%; min-height: var(--control-height-lg); padding: 0.68rem 2.8rem 0.68rem 2.55rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.input-with-icon > input:focus { border-color: var(--primary); outline: 0; box-shadow: var(--shadow-focus); }
.password-toggle { position: absolute; top: 50%; right: 0.4rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; transform: translateY(-50%); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.password-toggle:hover { background: var(--surface-muted); color: var(--primary); }

.login-options > span { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--font-size-2xs); }
.login-options > span i { color: var(--success); }

.demo-credentials { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border)); border-radius: var(--radius-md); background: var(--color-info-light); color: var(--color-info-text); font-size: var(--font-size-xs); }
.demo-credentials > i { margin-top: 0.15rem; }

.login-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-xs); }
.login-alert-success { border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); background: var(--color-success-light); color: var(--color-success-text); }
.login-alert-error { border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); background: var(--color-danger-light); color: var(--color-danger-text); }

.entry-page { display: grid; min-height: 100dvh; place-items: center; align-content: center; gap: var(--space-3); padding: var(--space-6); background: radial-gradient(circle at top, var(--primary-soft), transparent 30rem), var(--background); text-align: center; }
.entry-page p { color: var(--text-muted); }
.logout-link { color: #fecaca !important; }
html.icons-fallback .fa-solid { font-family: inherit; font-style: normal; font-weight: 700; }
html.icons-fallback .fa-solid::before { content: attr(data-fallback); }
html.icons-fallback .fa-solid:not([data-fallback])::before { content: ''; }
html.icons-fallback .fa-moon:not([data-fallback])::before { content: '◐'; }
html.icons-fallback .fa-sun:not([data-fallback])::before { content: '☀'; }
html.icons-fallback .fa-eye:not([data-fallback])::before { content: '◉'; }
html.icons-fallback .fa-eye-slash:not([data-fallback])::before { content: '⊘'; }
html.icons-fallback .fa-check:not([data-fallback])::before,
html.icons-fallback .fa-circle-check:not([data-fallback])::before { content: '✓'; }
html.icons-fallback .fa-xmark:not([data-fallback])::before { content: '×'; }
html.icons-fallback .fa-download:not([data-fallback])::before { content: '↓'; }
html.icons-fallback .fa-chevron-right:not([data-fallback])::before { content: '›'; }
html.icons-fallback .fa-chevron-left:not([data-fallback])::before { content: '‹'; }
html.icons-fallback .fa-chevron-down:not([data-fallback])::before { content: '⌄'; }
.sidebar-footer { display: grid; gap: var(--space-1); }
.sidebar-footer .nav-link,
.sidebar-footer .sidebar-collapse { display: flex; width: 100%; min-height: 2.5rem; height: auto; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.profile-dropdown > .dropdown-menu { min-width: 14rem; }
.chart-fallback { display: grid; min-height: 12rem; place-items: center; padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--text-muted); font-size: var(--font-size-xs); text-align: center; }
.table-check { display: inline-grid; place-items: center; cursor: pointer; }
.table-check > input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.attendance-table th:not(:first-child),
.attendance-table td:not(:first-child):not(:last-child) { text-align: center; }
.notice-info { border-color: color-mix(in srgb, var(--info) 20%, var(--border)); background: var(--color-info-light); color: var(--color-info-text); }

/* Compatibility-layer responsive behavior */
@media (max-width: 80rem) {
  .stats-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teacher-feature-grid,
  .fee-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-summary > #attendance-progress { grid-column: span 1; }
  .topbar-search { width: min(22rem, 29vw); }
  .term-context > span:first-child { display: none; }
  .term-context > span + span { padding-left: 0; border-left: 0; }
}

@media (max-width: 63.9375rem) {
  .workspace,
  .app-shell.sidebar-collapsed .workspace,
  body.sidebar-collapsed .workspace { margin-left: 0; }

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

  body.sidebar-open .sidebar-scrim,
  .app-shell.sidebar-open > .sidebar-scrim,
  .app-shell.is-sidebar-open > .sidebar-scrim {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .app-shell.sidebar-collapsed .sidebar > .brand,
  body.sidebar-collapsed .sidebar > .brand {
    justify-content: flex-start;
    padding-inline: var(--space-4);
  }

  .app-shell.sidebar-collapsed .sidebar > .brand > span,
  .app-shell.sidebar-collapsed .sidebar .nav-link > span,
  .app-shell.sidebar-collapsed .sidebar .nav-group-toggle > span,
  .app-shell.sidebar-collapsed .sidebar .nav-group-toggle > .fa-chevron-down,
  body.sidebar-collapsed .sidebar > .brand > span,
  body.sidebar-collapsed .sidebar .nav-link > span,
  body.sidebar-collapsed .sidebar .nav-group-toggle > span,
  body.sidebar-collapsed .sidebar .nav-group-toggle > .fa-chevron-down {
    display: block;
  }

  .app-shell.sidebar-collapsed .sidebar > .sidebar-nav,
  body.sidebar-collapsed .sidebar > .sidebar-nav { padding-inline: var(--space-3); }

  .app-shell.sidebar-collapsed .sidebar .nav-link,
  .app-shell.sidebar-collapsed .sidebar .nav-group-toggle,
  body.sidebar-collapsed .sidebar .nav-link,
  body.sidebar-collapsed .sidebar .nav-group-toggle {
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }

  .app-shell.sidebar-collapsed .sidebar .nav-submenu,
  body.sidebar-collapsed .sidebar .nav-submenu { display: grid; }

  .app-shell .main { min-height: calc(100vh - var(--header-height)); }
  .workspace > .app-footer { padding-inline: var(--content-gutter); }

  .dashboard-lower-grid,
  .two-column-layout,
  .grading-layout,
  .lost-card-layout,
  .settings-layout { grid-template-columns: 1fr; }

  .form-layout { grid-template-columns: 13rem minmax(0, 1fr); }
  .settings-layout > .settings-nav,
  .identity-controls,
  .print-layout > aside { position: static; }

  .identity-layout,
  .print-layout { grid-template-columns: 1fr; }
  .identity-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity-controls > .panel:first-child { grid-column: 1 / -1; }
  .print-layout > aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .report-preview { min-height: auto; }
  .linked-student-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .linked-student-bar > .badge { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 52rem) {
  .topbar-search { display: none; }
  .topbar-leading { margin-right: auto; }
  .term-context { margin-left: 0; }

  .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; grid-template-columns: minmax(13rem, 0.4fr) minmax(0, 1fr); }
  .guidance-grid { grid-template-columns: 1fr; }

  .registration-photo-row { flex-direction: column; }
  .registration-photo-row > .photo-uploader { width: 100%; flex-basis: auto; }
  .photo-uploader { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
  .photo-uploader .avatar-preview { grid-row: 1 / span 3; }

  .student-profile-hero { grid-template-columns: 1fr; }
  .profile-health { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }

  .mark-sheet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-status { grid-column: 1 / -1; }
  .upload-guidance { grid-template-columns: 1fr; }

  .parent-action-grid { grid-template-columns: 1fr; }
  .parent-balance-card,
  .result-hero { grid-template-columns: 1fr; }
  .parent-balance-card > .btn,
  .result-hero > .btn { justify-self: start; }
  .linked-student-bar { grid-template-columns: 1fr; }
  .linked-student-bar > label { grid-template-columns: 1fr; }

  .public-student-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .public-student-profile dl { width: 100%; text-align: left; }

  .report-preview { padding: var(--space-6); }
  .report-preview .report-header { grid-template-columns: auto minmax(0, 1fr); }
  .report-preview .report-header > span { display: none; }
  .report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
  .app-shell .main { padding: var(--space-4) var(--content-gutter) var(--space-8); }
  .workspace > .app-footer { align-items: flex-start; flex-direction: column; }

  .topbar-actions .topbar-fullscreen { display: none; }
  .profile-trigger > span,
  .profile-trigger > .fa-chevron-down { display: none; }
  .term-context { display: none; }
  .global-search-results { grid-template-columns: 1fr; }

  .stats-grid-4,
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action-grid .quick-action { min-height: 5.5rem; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading > span { display: none; }
  .context-banner { align-items: flex-start; flex-direction: column; }

  .filter-bar > .compact-field,
  .filter-bar > .search-field { flex-basis: 100%; }
  .compact-field { min-width: 0; }
  .field-span-2 { grid-column: 1; }
  .permission-toolbar .panel-body { align-items: stretch; flex-direction: column; }
  .permission-summary { width: 100%; }

  .form-aside { grid-template-columns: 1fr; }
  .photo-uploader { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .photo-uploader .avatar-preview { grid-row: auto; }
  .form-stepper { padding: var(--space-2); }
  .form-stepper > button { flex-direction: column; padding-inline: var(--space-1); }
  .form-stepper > button > strong { font-size: 0.625rem; }
  .form-stepper > button:not(:last-child)::after { top: 1.8rem; left: calc(50% + 1.2rem); width: calc(100% - 2.4rem); }

  .profile-health { grid-template-columns: 1fr; }
  .student-identity { align-items: flex-start; }
  .student-identity .avatar-xxl { width: 5rem; height: 5rem; flex-basis: 5rem; }
  .profile-contact { flex-direction: column; gap: var(--space-1); }
  .identity-summary { grid-template-columns: auto minmax(0, 1fr); }
  .identity-summary > .btn { grid-column: 1 / -1; }

  .attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-summary > #attendance-progress { grid-column: 1 / -1; }
  .bulk-attendance > span { width: 100%; }

  .import-steps > article { justify-content: center; padding: var(--space-3); }
  .import-steps > article > div { display: none; }
  .teacher-feature-grid,
  .fee-card-grid { grid-template-columns: 1fr; }

  .identity-controls,
  .print-layout > aside { grid-template-columns: 1fr; }
  .identity-controls > .panel:first-child { grid-column: auto; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .card-preview-stage { justify-content: flex-start; min-height: 15rem; padding: var(--space-3); }
  .identity-card-pair { justify-content: flex-start; }
  .lost-card-search .panel-body { grid-template-columns: 1fr; }
  .token-field,
  .verification-url-preview { grid-template-columns: auto minmax(0, 1fr); }
  .token-field > .btn,
  .verification-url-preview > .btn { grid-column: 1 / -1; justify-self: end; }

  .verification-status { grid-template-columns: auto minmax(0, 1fr) !important; padding: var(--space-5) !important; }
  .verification-status > .badge { grid-column: 1 / -1; justify-self: start; }
  .public-student-profile dl { grid-template-columns: 1fr; }
  .verify-another form > div { align-items: stretch; flex-direction: column; }
  .verification-footer { align-items: flex-start; flex-direction: column; }

  .report-type-select { grid-template-columns: 1fr; }
  .report-toolbar { align-items: flex-start; flex-direction: column; }
  .report-toolbar > div:last-child { width: 100%; }
  .report-toolbar .btn { flex: 1 1 auto; }
  .report-preview { padding: var(--space-4); }
  .report-preview > .report-title > div { align-items: center; flex-direction: column; }

  .result-rank { grid-template-columns: 1fr; }
  .calendar-grid .calendar-day,
  .calendar-grid > span { min-height: 3.5rem; }
  .calendar-grid .calendar-day > i { display: none; }

  .login-theme { top: var(--space-4); right: var(--space-4); }
  .login-card { padding-top: var(--space-8); }
}

@media (max-width: 30rem) {
  .stats-grid-4,
  .mini-stats,
  .quick-action-grid,
  .attendance-summary,
  .invoice-total-grid,
  .mark-sheet-summary,
  .validation-stats,
  .report-summary { grid-template-columns: 1fr; }

  .quick-action-grid .quick-action { min-height: 4.5rem; }
  .form-stepper > button > strong { display: none; }
  .student-identity { flex-direction: column; }
  .public-verification .verification-header { padding-inline: var(--space-3); }
  .verification-header strong { font-size: var(--font-size-xs); }
  .verification-header small { display: none; }
}

/* Final print routing for actual page markup */
@media print {
  .workspace,
  .app-shell.sidebar-collapsed .workspace,
  body.sidebar-collapsed .workspace { margin: 0 !important; }

  .app-shell .main { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
  .workspace > .app-footer,
  .sidebar-scrim,
  .global-loading { display: none !important; }

  .report-filter-panel,
  .report-toolbar,
  body[data-page$="-reports"] .page-header { display: none !important; }

  body[data-page$="-reports"] #report-preview-host { display: block !important; }
  .report-preview { width: 100% !important; max-width: none !important; }
  .report-preview .report-header > span { display: block !important; }
  .report-table .table-wrap { overflow: visible !important; }

  body.print-front-only .page-header,
  body.print-back-only .page-header,
  body.print-both .page-header,
  body.print-front-only .identity-controls,
  body.print-back-only .identity-controls,
  body.print-both .identity-controls,
  body.print-front-only .preview-toolbar,
  body.print-back-only .preview-toolbar,
  body.print-both .preview-toolbar,
  body.print-front-only .verification-url-preview,
  body.print-back-only .verification-url-preview,
  body.print-both .verification-url-preview,
  body.print-front-only .print-layout > aside,
  body.print-back-only .print-layout > aside,
  body.print-both .print-layout > aside,
  body.print-front-only .identity-preview-column > .panel,
  body.print-back-only .identity-preview-column > .panel,
  body.print-both .identity-preview-column > .panel,
  body[data-page="card-print"] .main > .panel { display: none !important; }

  body.print-front-only .identity-layout,
  body.print-back-only .identity-layout,
  body.print-both .identity-layout,
  body.print-front-only .print-layout,
  body.print-back-only .print-layout,
  body.print-both .print-layout { display: block !important; }

  body.print-front-only .card-preview-stage,
  body.print-back-only .card-preview-stage,
  body.print-both .card-preview-stage { display: block !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; }

  body.print-front-only .card-preview-stage .identity-card-pair,
  body.print-back-only .card-preview-stage .identity-card-pair,
  body.print-both .card-preview-stage .identity-card-pair { display: block; width: 85.60mm; }

  body.print-front-only .card-preview-stage .card-back,
  body.print-front-only .a4-sheet .card-back { display: none !important; }

  body.print-back-only .card-preview-stage .card-front,
  body.print-back-only .a4-sheet .card-front { display: none !important; }

  body.print-back-only .card-preview-stage .card-back,
  body.print-back-only .a4-sheet .card-back { display: grid !important; }

  body.print-both .card-preview-stage .identity-card { display: grid !important; break-after: page; }

  body[data-page="identity-card"] .card-preview-stage .identity-card {
    page: cr80-card;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="card-print"] .print-preview-wrap { overflow: visible !important; }
  body[data-page="card-print"] .a4-sheet > .print-card-slot { width: 85.60mm !important; height: 53.98mm !important; overflow: hidden !important; break-inside: avoid; }
  body[data-page="card-print"] .print-card-slot > .identity-card-pair { display: block; width: 85.60mm; height: 53.98mm; }

  /* For duplex output, flow all fronts first and all backs second across two A4 pages. */
  body.print-both[data-page="card-print"] .a4-sheet {
    height: 594mm !important;
    min-height: 594mm !important;
    grid-template-rows: repeat(8, 53.98mm) !important;
    align-content: space-around !important;
    overflow: visible !important;
    break-inside: auto !important;
  }

  body.print-both[data-page="card-print"] .print-card-slot,
  body.print-both[data-page="card-print"] .print-card-slot > .identity-card-pair { display: contents; }
  body.print-both[data-page="card-print"] .card-front { order: 1; }
  body.print-both[data-page="card-print"] .card-back { order: 2; }
  body.print-both[data-page="card-print"] .print-card-slot:first-child .card-back { break-before: page; }

  .identity-card,
  .identity-card * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}