@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Regular.de49240b80d6.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Formal semester certificate: a dedicated landscape document, separate from the editing workspace. */
.certificate-layout {
  align-items: start;
}

.academic-certificate-print {
  position: relative;
  box-sizing: border-box;
  min-height: 720px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  color: #172b3a;
  background: #fff;
  box-shadow: 0 12px 32px rgba(23, 61, 87, 0.12);
  font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
}

.academic-certificate-frame {
  display: flex;
  min-height: 698px;
  padding: 24px 28px 18px;
  border: 1px solid #8fb0c1;
  flex-direction: column;
}

.academic-certificate-letterhead {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 126px;
  align-items: center;
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid #173d57;
}

.academic-certificate-logo {
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
}

.academic-certificate-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.academic-certificate-school {
  text-align: center;
}

.academic-certificate-school h1 {
  margin: 0;
  color: #173d57;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.35;
}

.academic-certificate-school p {
  margin: 5px 0 0;
  color: #57717f;
  font-size: 0.95rem;
  font-weight: 700;
}

.academic-certificate-document {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #a9c0cc;
  border-top: 4px solid #23688b;
  background: #eef4f8;
}

.academic-certificate-document span,
.academic-certificate-meta span,
.academic-certificate-student > span,
.academic-certificate-footer-meta span {
  color: #627984;
  font-size: 0.78rem;
  font-weight: 800;
}

.academic-certificate-document strong {
  color: #173d57;
  font-size: 0.92rem;
  font-weight: 700;
}

.academic-certificate-heading {
  padding: 18px 0 12px;
  text-align: center;
}

.academic-certificate-heading > span {
  color: #23688b;
  font-size: 0.9rem;
  font-weight: 800;
}

.academic-certificate-heading h2 {
  margin: 3px 0;
  color: #173d57;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
}

.academic-certificate-heading p {
  margin: 0;
  color: #586f7b;
  font-size: 0.9rem;
  line-height: 1.65;
}

.academic-certificate-student {
  padding: 11px 18px 12px;
  border-block: 1px solid #bad0da;
  background: #f4f8fa;
  text-align: center;
}

.academic-certificate-student h3 {
  margin: 3px 0 0;
  color: #173d57;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.4;
}

.academic-certificate-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid #b9cbd4;
  border-inline-start: 1px solid #b9cbd4;
}

.academic-certificate-meta > div {
  display: grid;
  grid-template-columns: minmax(82px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border-inline-end: 1px solid #b9cbd4;
  border-bottom: 1px solid #b9cbd4;
}

.academic-certificate-meta strong {
  min-width: 0;
  color: #173d57;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.academic-certificate-results {
  margin-top: 18px;
}

.academic-certificate-results > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.academic-certificate-results > header > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #23688b;
  font-size: 0.75rem;
  font-weight: 800;
}

.academic-certificate-results h3 {
  margin: 0;
  color: #173d57;
  font-size: 1rem;
  font-weight: 800;
}

.academic-certificate-results header p {
  margin: 2px 0 0;
  color: #667b85;
  font-size: 0.76rem;
}

.academic-certificate-domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #b9cbd4;
  border-inline-start: 1px solid #b9cbd4;
}

.academic-certificate-domains > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-inline-end: 1px solid #b9cbd4;
  border-bottom: 1px solid #b9cbd4;
}

.academic-certificate-domains > div:nth-child(even) {
  background: #f7f9fa;
}

.academic-certificate-domains strong {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.academic-certificate-mastery {
  display: inline-grid;
  min-width: 86px;
  min-height: 30px;
  padding: 5px 9px;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.academic-certificate-mastery.is-mastered {
  color: #174f6d;
  background: #e4f0f6;
}

.academic-certificate-mastery.is-partial {
  color: #345f72;
  background: #edf3f6;
}

.academic-certificate-mastery.is-support {
  color: #76561f;
  background: #fff4dc;
}

.academic-certificate-mastery.is-unrated {
  color: #667982;
  background: #eef1f2;
}

.academic-certificate-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border-inline-end: 1px solid #b9cbd4;
  border-bottom: 1px solid #b9cbd4;
  color: #627984;
  text-align: center;
}

.academic-certificate-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1px solid #b9cbd4;
  border-inline-start: 1px solid #b9cbd4;
}

.academic-certificate-notes article {
  min-width: 0;
  min-height: 78px;
  padding: 9px 11px;
  border-inline-end: 1px solid #b9cbd4;
  border-bottom: 1px solid #b9cbd4;
}

.academic-certificate-notes strong {
  color: #23688b;
  font-size: 0.78rem;
  font-weight: 800;
}

.academic-certificate-notes p {
  margin: 5px 0 0;
  color: #2c414e;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.academic-certificate-footer {
  margin-top: auto;
  padding-top: 18px;
}

.academic-certificate-footer-meta {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 0.85fr 0.75fr;
  border-block: 1px solid #b9cbd4;
}

.academic-certificate-footer-meta > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-inline-end: 1px solid #b9cbd4;
}

.academic-certificate-footer-meta > div:last-child {
  border-inline-end: 0;
}

.academic-certificate-footer-meta strong {
  color: #173d57;
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.academic-certificate-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
  margin: 13px 42px 9px;
}

.academic-certificate-signatures > div {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  align-items: end;
  gap: 12px;
  color: #435e6c;
  font-size: 0.8rem;
  font-weight: 800;
}

.academic-certificate-signatures i {
  display: block;
  height: 20px;
  border-bottom: 1px solid #78909c;
}

.academic-certificate-footer > p {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #d1dde2;
  color: #617782;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

.academic-certificate-page-number {
  display: none;
}

@media (max-width: 720px) {
  .academic-certificate-letterhead {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .academic-certificate-document {
    grid-column: 1 / -1;
  }

  .academic-certificate-logo {
    width: 76px;
    height: 76px;
  }

  .academic-certificate-meta,
  .academic-certificate-domains,
  .academic-certificate-notes,
  .academic-certificate-footer-meta {
    grid-template-columns: 1fr;
  }
}

@page academic-certificate {
  size: A4 landscape;
  margin: 0;

  @bottom-left {
    content: none;
  }
}

@media print {
  body.print-academic-certificate .report-print-header,
  body.print-academic-certificate .report-print-footer,
  body.print-academic-certificate .skip-link {
    display: none !important;
  }

  body.print-academic-certificate,
  body.print-academic-certificate .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-academic-certificate .print-section-host {
    width: 297mm;
    margin-inline: auto !important;
  }

  body.print-academic-certificate .academic-certificate-print {
    display: block !important;
  }

  .academic-certificate-print {
    page: academic-certificate;
    box-sizing: border-box;
    width: 297mm;
    min-height: 210mm;
    padding: 4mm;
    border: 0 !important;
    border-radius: 0;
    color: #172b3a !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .academic-certificate-frame {
    min-height: 199mm;
    padding: 4mm 9mm 2mm;
    border: 0.3mm solid #8fb0c1;
  }

  .academic-certificate-letterhead {
    grid-template-columns: 34mm minmax(0, 1fr) 39mm;
    gap: 6mm;
    min-height: 28mm;
    padding-bottom: 3.2mm;
    border-bottom: 0.7mm solid #173d57;
  }

  .academic-certificate-logo {
    width: 31mm;
    height: 31mm;
  }

  .academic-certificate-school h1 {
    font-size: 18pt;
  }

  .academic-certificate-school p {
    margin-top: 0.8mm;
    font-size: 9.5pt;
  }

  .academic-certificate-document {
    gap: 0.8mm;
    padding: 2.2mm 3mm;
    border: 0.25mm solid #a9c0cc;
    border-top: 1mm solid #23688b;
  }

  .academic-certificate-document span,
  .academic-certificate-meta span,
  .academic-certificate-student > span,
  .academic-certificate-footer-meta span {
    font-size: 7pt;
  }

  .academic-certificate-document strong {
    font-size: 9pt;
  }

  .academic-certificate-heading {
    padding: 2.5mm 0 1.5mm;
  }

  .academic-certificate-heading > span {
    font-size: 9pt;
  }

  .academic-certificate-heading h2 {
    margin: 0.3mm 0;
    font-size: 20pt;
  }

  .academic-certificate-heading p {
    font-size: 8.7pt;
    line-height: 1.5;
  }

  .academic-certificate-student {
    padding: 1.7mm 4mm 2mm;
    border-block: 0.25mm solid #bad0da;
  }

  .academic-certificate-student h3 {
    margin-top: 0.4mm;
    font-size: 17pt;
  }

  .academic-certificate-meta {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2.5mm;
    border-width: 0.25mm;
  }

  .academic-certificate-meta > div {
    display: block;
    min-height: 12mm;
    padding: 1.5mm 2mm;
    border-width: 0.25mm;
  }

  .academic-certificate-meta span,
  .academic-certificate-meta strong {
    display: block;
  }

  .academic-certificate-meta strong {
    margin-top: 0.7mm;
    font-size: 8.4pt;
  }

  .academic-certificate-results {
    margin-top: 3mm;
  }

  .academic-certificate-results > header {
    gap: 2.5mm;
    margin-bottom: 1.5mm;
  }

  .academic-certificate-results > header > span {
    flex-basis: 8mm;
    width: 8mm;
    height: 8mm;
    font-size: 7.5pt;
  }

  .academic-certificate-results h3 {
    font-size: 10.5pt;
  }

  .academic-certificate-results header p {
    margin-top: 0.3mm;
    font-size: 7.4pt;
  }

  .academic-certificate-domains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-width: 0.25mm;
  }

  .academic-certificate-domains > div {
    gap: 2mm;
    min-height: 9.5mm;
    padding: 1.3mm 2.2mm;
    border-width: 0.25mm;
  }

  .academic-certificate-domains strong {
    font-size: 8.2pt;
  }

  .academic-certificate-mastery {
    min-width: 22mm;
    min-height: 5.7mm;
    padding: 0.8mm 1.7mm;
    font-size: 7.5pt;
  }

  .academic-certificate-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2.5mm;
    border-width: 0.25mm;
  }

  .academic-certificate-notes article {
    min-height: 16mm;
    padding: 1.4mm 2.2mm;
    border-width: 0.25mm;
  }

  .academic-certificate-notes strong {
    font-size: 7.6pt;
  }

  .academic-certificate-notes p {
    margin-top: 0.7mm;
    font-size: 7.8pt;
    line-height: 1.45;
  }

  .academic-certificate-footer {
    padding-top: 2.8mm;
  }

  .academic-certificate-footer-meta {
    grid-template-columns: 1.7fr 0.7fr 0.85fr 0.75fr;
    border-width: 0.25mm;
  }

  .academic-certificate-footer-meta > div {
    gap: 0.3mm;
    padding: 1mm 1.8mm;
    border-width: 0.25mm;
  }

  .academic-certificate-footer-meta strong {
    font-size: 7.2pt;
  }

  .academic-certificate-signatures {
    gap: 18mm;
    margin: 2mm 17mm 1.5mm;
  }

  .academic-certificate-signatures > div {
    grid-template-columns: auto minmax(25mm, 1fr);
    gap: 3mm;
    font-size: 7.8pt;
  }

  .academic-certificate-signatures i {
    height: 3.8mm;
    border-width: 0.25mm;
  }

  .academic-certificate-footer > p {
    padding-top: 1.4mm;
    border-width: 0.25mm;
    font-size: 7.3pt;
  }

  .academic-certificate-page-number {
    position: absolute;
    bottom: 2.5mm;
    left: 12mm;
    display: block;
    color: #315a73;
    font-size: 8.5pt;
    font-weight: 700;
    direction: ltr;
  }
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Regular.de49240b80d6.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Bold.669a8c3a7bf8.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Bold.669a8c3a7bf8.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Marah Arabic Fallback";
  src: url("../fonts/DejaVuSans.be189a7e2711.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Marah Arabic Fallback";
  src: url("../fonts/DejaVuSans-Bold.132839e7a052.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #f6fbff;
  --panel: #ffffff;
  --panel-soft: #f7fbf9;
  --border: #dde9ee;
  --text: #182338;
  --muted: #748398;
  --primary: #2f80ed;
  --primary-2: #31c6a4;
  --accent-coral: #ff7b7b;
  --accent-sun: #f7c948;
  --accent-lavender: #9b8cff;
  --accent-mint: #61d6a7;
  --accent-sky: #72c7ff;
  --danger: #ef4444;
  --success: #22a06b;
  --warning: #f59e0b;
  --sidebar: #17345c;
  --sidebar-2: #102944;
  --shadow: 0 18px 42px rgba(38, 78, 118, 0.10);
  --soft-shadow: 0 10px 26px rgba(38, 78, 118, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: hidden; }
body {
  font-family: "Tajawal", "Marah Arabic Fallback", "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 8%, rgba(114, 199, 255, 0.22), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(97, 214, 167, 0.20), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 46%, #f7fbf9 100%);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
table { width: 100%; }
button, input, select, textarea {
  font: inherit;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 0.9rem 1rem;
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(47, 128, 237, 0.45);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.09);
}
textarea { resize: vertical; }

.app-shell {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background:
    radial-gradient(circle at 20% 6%, rgba(247, 201, 72, 0.20), transparent 22%),
    radial-gradient(circle at 85% 18%, rgba(97, 214, 167, 0.18), transparent 24%),
    radial-gradient(circle at 35% 96%, rgba(114, 199, 255, 0.16), transparent 28%),
    linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
  color: #fff;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.sidebar-backdrop, .sidebar-close, .mobile-nav-toggle { display: none; }

.brand-card, .nav-item, .support-button, .profile-pill, .panel, .hero-alert {
  border: 1px solid rgba(221, 233, 238, 0.82);
  box-shadow: var(--shadow);
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 1rem;
}
.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-sun), var(--accent-sky) 52%, var(--accent-mint));
  font-size: 1.5rem;
}
.brand-logo img, .login-brand > span img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: #fff;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.brand-text strong { font-size: 1.06rem; }
.brand-text span, .muted { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  transition: 0.2s ease;
}
.nav-item.active, .nav-item:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(-2px);
}
.nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-support {
  margin-top: auto;
  display: grid;
  gap: 1rem;
}
.support-illustration {
  height: 140px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 30%, rgba(79, 70, 229, 0.30), transparent 26%),
    radial-gradient(circle at 80% 10%, rgba(34, 197, 94, 0.28), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  position: relative;
  overflow: hidden;
}
.support-illustration span {
  position: absolute;
  bottom: 0;
  border-radius: 999px 999px 0 0;
}
.support-illustration span:nth-child(1) { left: 12%; width: 42px; height: 55px; background: #9f7aea; }
.support-illustration span:nth-child(2) { left: 38%; width: 78px; height: 60px; background: #60a5fa; }
.support-illustration span:nth-child(3) { left: 62%; width: 70px; height: 38px; background: #f59e0b; }
.support-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  text-align: center;
  color: #fff;
}

.main-column { min-width: 0; }
.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 253, 255, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(221, 233, 238, 0.86);
}
.profile-pill {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--panel);
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  text-align: right;
}
.profile-pill:hover, .profile-pill[aria-expanded="true"] { border-color: rgba(47, 128, 237, 0.28); box-shadow: var(--soft-shadow); }
.profile-pill img.avatar { object-fit: cover; }
.menu-chevron { color: var(--muted); font-size: 0.85rem; }
.profile-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.profile-meta span { color: var(--muted); font-size: 0.9rem; }
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffe4ba, #baf3e6);
  color: #245269;
  font-weight: 700;
  flex: none;
}
.topbar-tools {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}
.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  cursor: pointer;
}
.tool-icon:hover, .tool-icon[aria-expanded="true"] { border-color: rgba(47, 128, 237, 0.32); background: #f3fbff; }
.badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.3rem 0.4rem;
}
.search-bar input {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.7rem 0.85rem;
}
.search-bar input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9aa3b2;
}
.search-bar button, .ghost-button, .primary-button, .secondary-button, .page-chip {
  border: 0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  cursor: pointer;
}
.search-bar button, .ghost-button, .page-chip {
  background: #eef8fb;
  color: var(--text);
}

.page-wrap {
  padding: 1.25rem 1.5rem 2rem;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
.home-hero-copy {
  display: grid;
  align-content: center;
  gap: 0.45rem;
  min-height: 180px;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 12%, rgba(247, 201, 72, 0.20), transparent 24%),
    radial-gradient(circle at 90% 20%, rgba(97, 214, 167, 0.18), transparent 24%),
    linear-gradient(145deg, #fff, #f6fcff);
  box-shadow: var(--soft-shadow);
}
.home-hero-copy h1 {
  margin: 0;
  color: #17345c;
  font-size: 2.15rem;
}
.home-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.home-quick-actions a {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  min-height: 180px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--soft-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.home-quick-actions a:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 128, 237, 0.34);
  box-shadow: 0 18px 40px rgba(38, 78, 118, 0.12);
}
.home-quick-actions span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #eaf8ff, #eefdf7);
  color: var(--primary);
  font-weight: 900;
}
.home-quick-actions a:nth-child(2) span { background: linear-gradient(145deg, #fff8dc, #f5fbff); color: #b77900; }
.home-quick-actions a:nth-child(3) span { background: linear-gradient(145deg, #fff0f0, #f7f3ff); color: #d84d67; }
.home-quick-actions strong {
  font-size: 1.05rem;
}
.home-quick-actions small {
  color: var(--muted);
}
.home-start-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dcecef;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
}
.home-start-strip div {
  display: grid;
  gap: 0.18rem;
}
.home-start-strip span {
  color: var(--muted);
}

.hero-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(90deg, var(--accent-coral), #ef5d75);
  color: #fff;
  border-radius: 16px;
  margin-bottom: 1rem;
}
.hero-alert span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 800;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.kpi-card, .panel, .subpanel, .empty-panel {
  background: var(--panel);
  border-radius: var(--radius);
}
.kpi-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid rgba(221, 233, 238, 0.92);
  box-shadow: var(--soft-shadow);
}
.kpi-card p { margin: 0 0 0.3rem; color: var(--muted); }
.kpi-card strong { font-size: 1.7rem; display: block; }
.kpi-card span { color: var(--muted); font-size: 0.92rem; }
.kpi-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: linear-gradient(145deg, #eff8ff, #eefdf7);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  flex: none;
}
.kpi-card:nth-child(2n) .kpi-icon { background: linear-gradient(145deg, #fff8dc, #eef8ff); color: #c07b00; }
.kpi-card:nth-child(3n) .kpi-icon { background: linear-gradient(145deg, #fff0f0, #f7f3ff); color: #d84d67; }
.kpi-card:nth-child(4n) .kpi-icon { background: linear-gradient(145deg, #effdf5, #eef8ff); color: #12805f; }
.kpi-card.state-empty {
  border-color: #dbe7f0;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
}
.kpi-card.state-empty .kpi-icon {
  background: linear-gradient(145deg, #f1f5f9, #eaf2f8);
  color: #64748b;
}
.kpi-card.state-empty strong { font-size: 1.25rem; color: #475569; }
.kpi-card.state-warning .kpi-icon { background: linear-gradient(145deg, #fff8dc, #fff1d4); color: #b7791f; }
.kpi-card.state-danger .kpi-icon { background: linear-gradient(145deg, #fff0f0, #ffe4e6); color: #dc2626; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  gap: 1rem;
}
.stack {
  display: grid;
  gap: 1rem;
}
.panel {
  padding: 1rem;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.panel-head.compact { margin-bottom: 0.6rem; }
.panel-head h1, .panel-head h2, .panel-head h3, .page-header h1 { margin: 0; }
.panel-title-block { display: grid; gap: 0.2rem; }
.muted { color: var(--muted); }
.mini-panel { min-height: 220px; }
.ring-stat, .donut-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ring, .donut {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(#22c55e 0 292deg, #f59e0b 292deg 325deg, #f43f5e 325deg 360deg);
}
.ring-green { background:
  radial-gradient(circle at center, #fff 56%, transparent 57%),
  conic-gradient(#22c55e 0 330deg, #e5e7eb 330deg 360deg);
}
.ring-good { background:
  radial-gradient(circle at center, #fff 56%, transparent 57%),
  conic-gradient(#22c55e 0 330deg, #e5e7eb 330deg 360deg);
}
.ring-warning { background:
  radial-gradient(circle at center, #fff 56%, transparent 57%),
  conic-gradient(#f59e0b 0 260deg, #e5e7eb 260deg 360deg);
}
.ring-danger { background:
  radial-gradient(circle at center, #fff 56%, transparent 57%),
  conic-gradient(#ef4444 0 210deg, #e5e7eb 210deg 360deg);
}
.ring-empty {
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(#cbd5e1 0 360deg);
}
.ring strong, .donut strong { font-size: 1.6rem; display: block; text-align: center; }
.ring span, .donut span { color: var(--muted); font-size: 0.9rem; }
.attendance-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  max-width: 9rem;
}
.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  color: var(--text);
}
.dot, .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 0.45rem;
}
.green { background: #22c55e; }
.amber { background: #f59e0b; }
.red { background: #ef4444; }
.violet { background: #6d5efc; }
.pink { background: #fb7185; }
.line-chart {
  height: 120px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fafcff);
  overflow: hidden;
}
.line-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0, transparent 73%, rgba(79, 70, 229, 0.06) 74%, transparent 75%);
  background-size: 100% 24px;
}
.line-chart span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f472b6;
  box-shadow: 0 0 0 6px rgba(244, 114, 182, 0.12);
}
.event-list, .notification-list, .progress-list, .timeline {
  display: grid;
  gap: 0.9rem;
}
.event-list { list-style: none; padding: 0; margin: 0; }
.event-list li, .timeline div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: var(--panel-soft);
  border-radius: 16px;
}
.notification-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
}
.notification-item p { margin: 0.25rem 0 0; color: var(--muted); }
.notification-item strong { display: block; }
.notification-item.read { opacity: 0.68; background: #f8fafc; }
.notification-item.danger:not(.read) { border-color: #fecaca; background: #fff7f7; }
.status-pill, .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  background: #f1f5f9;
}
.status-pill.success, .chip.active { background: #e8f8ef; color: #12805f; }
.status-pill.warning { background: #fff3e2; color: #a05b00; }
.status-pill.danger { background: #fee2e2; color: #b91c1c; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.chip-row.compact { margin: 0.5rem 0 0; }
.chip.active { border: 1px solid rgba(79, 70, 229, 0.2); background: #efecff; color: var(--primary); }
.compact-cards, .status-cards, .mini-stats, .document-grid, .guardian-grid {
  display: grid;
  gap: 0.8rem;
}
.compact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-cards article, .status-cards article, .mini-stats article, .doc-card, .mini-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: #fff;
}
.compact-cards strong, .doc-card strong, .mini-card strong {
  display: block;
  margin-bottom: 0.25rem;
}
.status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-cards strong, .mini-stats strong { font-size: 1.3rem; }
.status-cards span, .mini-stats span, .doc-card span, .mini-card span { color: var(--muted); font-size: 0.92rem; }

.workspace-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 1rem;
}
.list-panel { padding: 1rem; }
.large { min-height: 560px; }
.inline-tools {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 1rem;
}
.inline-tools.compact { margin-bottom: 0; }
.inline-tools input, .inline-tools select {
  min-width: 0;
}
.primary-button {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 128, 237, 0.22);
}
.secondary-button {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}
.primary-button:hover, .secondary-button:hover, .ghost-button:hover {
  transform: translateY(-1px);
}
.small { padding: 0.7rem 0.9rem; border-radius: 12px; }
.student-list, .staff-list {
  display: grid;
  gap: 0.7rem;
}
.list-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  transition: 0.2s ease;
}
.list-card:hover, .list-card.active {
  transform: translateY(-1px);
  border-color: rgba(47, 128, 237, 0.28);
  box-shadow: var(--soft-shadow);
}
.thumb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.thumb.small { width: 34px; height: 34px; }
.list-copy { min-width: 0; display: grid; gap: 0.15rem; }
.list-copy span, .empty-state { color: var(--muted); font-size: 0.93rem; }
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  color: var(--muted);
}
.page-chip {
  width: 42px;
  height: 42px;
  padding: 0;
}

.detail-panel {
  padding: 1rem;
  min-width: 0;
}
.detail-hero {
  padding: 1.15rem;
  border-radius: 17px;
  background:
    radial-gradient(circle at 10% 18%, rgba(247, 201, 72, 0.12), transparent 20%),
    linear-gradient(180deg, #fff, #f8fcff);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.detail-hero-main, .profile-stack, .summary-strip, .mini-stats, .button-row, .field-grid, .form-grid, .finance-layout, .transport-layout, .academics-layout {
  display: grid;
  gap: 0.9rem;
}
.profile-stack {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.profile-stack h1 { margin: 0; font-size: 2rem; }
.profile-stack p { margin: 0.35rem 0 0; color: var(--muted); }
.portrait {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}
.summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}
.summary-strip article {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
  min-height: 84px;
}
.summary-strip span { color: var(--muted); font-size: 0.9rem; }
.summary-strip strong { display: block; margin-top: 0.35rem; }

.tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tabs a {
  padding: 0.85rem 0.4rem 1rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subpanel {
  padding: 1rem;
  border: 1px solid var(--border);
}
.field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid label, .field-stack label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.93rem;
}
.field-stack {
  display: grid;
  gap: 0.8rem;
}
.span-2 { grid-column: span 2; }
.button-row {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
}
.empty-panel {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.72);
}
.empty-panel strong { font-size: 1.25rem; }
.empty-panel p { color: var(--muted); }

.message-stack {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.app-message {
  padding: 0.9rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}
.app-message.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
.app-message.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}
.student-record { display: grid; gap: 1rem; }
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}
.record-header h1 { margin: 0.25rem 0; font-size: 1.8rem; }
.eyebrow { color: var(--primary); font-size: 0.85rem; font-weight: 800; }
.avatar-fallback {
  display: grid;
  place-items: center;
  background: #eaf8ff;
  color: var(--primary);
  font-weight: 800;
}
.large-avatar { font-size: 2rem; }
.medical-warning {
  padding: 0.9rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fef2f2;
  color: #b91c1c;
}
.record-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
.record-nav a {
  padding: 0.65rem 0.8rem;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 700;
}
.record-nav a:hover { background: var(--panel-soft); color: var(--primary); }
.student-record-form { display: grid; gap: 1rem; }
.record-section {
  scroll-margin-top: 90px;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.section-heading {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1rem;
}
.section-heading h2, .section-heading p { margin: 0; }
.section-heading p { margin-top: 0.2rem; color: var(--muted); }
.section-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf8ff;
  color: var(--primary);
  font-weight: 900;
}
.parent-columns, .consent-grid, .upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.soft-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}
.soft-card h3 { margin-top: 0; }
.field-note {
  align-self: end;
  margin: 0;
  padding: 0.8rem;
  border-radius: 12px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.88rem;
}
.danger-field textarea { border-color: #fca5a5; background: #fff7f7; }
.consent-grid { margin-top: 1rem; }
.check-card {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 0.7rem !important;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}
.check-card input { width: 20px; height: 20px; flex: none; }
.check-card span { display: grid; gap: 0.2rem; }
.upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.upload-card {
  display: grid;
  gap: 0.55rem;
  min-height: 145px;
  padding: 1rem;
  border: 1px dashed rgba(47, 128, 237, 0.42);
  border-radius: 14px;
  background: #f8fcff;
  color: var(--text);
}
.upload-card span { font-weight: 800; }
.upload-card small { color: var(--muted); }
.upload-card input { padding: 0; border: 0; background: transparent; }
.document-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.document-list a {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.document-list span { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 1rem 0;
}
.archive-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #fecaca;
  border-radius: 16px;
  background: #fff7f7;
}
.archive-box div { display: grid; gap: 0.25rem; }
.archive-box span { color: #991b1b; font-size: 0.9rem; }
.role-grid, .hr-action-grid, .hr-history-grid {
  display: grid;
  gap: 0.9rem;
}
.topbar-menu-wrap { position: relative; }
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 30;
  width: min(390px, calc(100vw - 2rem));
  display: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.topbar-dropdown.open { display: block; animation: dropdown-in 0.16s ease-out; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-dropdown { width: 300px; padding: 1rem; }
.profile-dropdown-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
.profile-dropdown-head div { display: grid; gap: 0.2rem; }
.profile-dropdown-head span, .profile-detail span { color: var(--muted); font-size: 0.86rem; }
.profile-detail { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; }
.dropdown-title { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border); background: #fafaff; }
.dropdown-title div { display: grid; gap: 0.15rem; }
.dropdown-title span { color: var(--muted); font-size: 0.84rem; }
.topbar-notification-list { display: grid; max-height: 430px; overflow: auto; }
.topbar-notification-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.topbar-notification-list a:hover { background: #fafaff; }
.topbar-notification-list a.read { opacity: 0.62; background: #f8fafc; }
.topbar-notification-list a.read .notification-mark { background: #94a3b8; }
.topbar-notification-list a div { display: grid; gap: 0.25rem; }
.topbar-notification-list small { color: var(--muted); line-height: 1.45; }
.notification-mark { width: 10px; height: 10px; margin-top: 0.35rem; border-radius: 50%; background: #8b5cf6; }
.topbar-notification-list a.warning .notification-mark { background: #f59e0b; }
.topbar-notification-list a.danger .notification-mark { background: #ef4444; }
.dropdown-empty { min-height: 150px; display: grid; place-content: center; gap: 0.3rem; padding: 1rem; color: #166534; text-align: center; }
.dropdown-empty span { color: var(--muted); font-size: 0.9rem; }
.search-page { max-width: 980px; margin: 0 auto; }
.search-result-count {
  min-width: 90px;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: #ede9fe;
  color: var(--primary);
  font-weight: 800;
  text-align: center;
}
.global-search-large {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.65rem;
  border: 1px solid #c4b5fd;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(79, 70, 229, 0.08);
}
.global-search-large input { border: 0; box-shadow: none; font-size: 1rem; }
.global-search-results { display: grid; gap: 0.65rem; }
.global-search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  transition: 0.16s ease;
}
.global-search-result:hover { transform: translateY(-1px); border-color: #a78bfa; box-shadow: 0 12px 28px rgba(79, 70, 229, 0.08); }
.search-result-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #ede9fe;
  color: var(--primary);
  font-weight: 900;
}
.global-search-result div { display: grid; gap: 0.15rem; }
.global-search-result div > span, .global-search-result small { color: var(--muted); font-size: 0.84rem; }
.global-search-result > b { color: var(--primary); font-size: 1.2rem; }
.search-category-filters {
  display: flex;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
}
.search-category-filters a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
  font-weight: 750;
}
.search-category-filters a.active { border-color: #a78bfa; background: #f5f3ff; color: var(--primary); }
.search-category-filters b {
  min-width: 24px;
  padding: 0.15rem 0.4rem;
  border-radius: 99px;
  background: var(--panel-soft);
  color: inherit;
  text-align: center;
  font-size: 0.75rem;
}
.search-results-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.search-results-heading div { display: grid; gap: 0.2rem; }
.search-results-heading span, .search-limit-note { color: var(--muted); font-size: 0.85rem; }
.search-help-panel {
  display: grid;
  gap: 0.65rem;
  padding: 1.25rem;
  border: 1px solid #c4b5fd;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f8f7ff);
}
.search-help-panel p { margin: 0; color: var(--muted); }
.search-help-panel div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-help-panel span { padding: 0.4rem 0.6rem; border-radius: 9px; background: #ede9fe; color: #5b21b6; font-size: 0.82rem; }
.search-limit-note { margin: 0.8rem 0 0; text-align: center; }
.export-actions, .panel-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.export-actions { margin: 0.65rem 0; }
.export-actions > span { color: var(--muted); font-size: 0.82rem; font-weight: 800; }
.export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.4rem 0.65rem;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 850;
}
.export-button.excel { background: #ecfdf5; color: #047857; }
.export-button.pdf { background: #fff1f2; color: #be123c; }
.attendance-export-wrap { align-self: end; }
.data-exchange {
  margin: 0.7rem 0;
  border: 1px solid #ddd6fe;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #faf8ff);
  overflow: hidden;
}
.data-exchange summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  cursor: pointer;
  list-style: none;
}
.data-exchange summary::-webkit-details-marker { display: none; }
.data-exchange summary > span:nth-child(2) { display: grid; gap: 0.1rem; }
.data-exchange summary small { color: var(--muted); }
.data-exchange summary > b { color: var(--primary); font-size: 0.8rem; }
.data-exchange[open] summary { border-bottom: 1px solid #ede9fe; }
.data-exchange-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ede9fe;
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 900;
}
.data-exchange-body { display: grid; gap: 0.8rem; padding: 0.85rem; }
.data-exchange-copy p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.data-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.data-format-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.data-format-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(30, 41, 59, 0.07); }
.data-format-card div { display: grid; gap: 0.15rem; }
.data-format-card small { color: var(--muted); font-size: 0.78rem; }
.format-mark { display: grid; place-items: center; min-height: 42px; border-radius: 9px; font-size: 0.72rem; font-weight: 900; }
.data-format-card.excel .format-mark { background: #dcfce7; color: #047857; }
.data-format-card.pdf .format-mark { background: #fee2e2; color: #be123c; }
.data-import-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px dashed #a78bfa;
  border-radius: 12px;
  background: #f5f3ff;
}
.data-import-panel > div { display: grid; grid-column: 1 / -1; gap: 0.2rem; }
.data-import-panel > button { grid-column: 1 / -1; }
.data-import-panel small { color: var(--muted); }
.data-file-picker { position: relative; overflow: hidden; }
.data-file-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.data-file-picker span { display: block; padding: 0.65rem; border: 1px solid #c4b5fd; border-radius: 9px; background: #fff; text-align: center; font-weight: 800; }
.list-panel .data-format-grid { grid-template-columns: 1fr; }
.role-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}
.role-grid article {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}
.role-grid span { color: var(--muted); font-size: 0.9rem; }
.hr-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payslip-card { background: #f5f3ff; border-color: #c4b5fd; }
.required-upload { border-color: #fca5a5; background: #fff7f7; }
.class-capacity-badge {
  display: grid;
  min-width: 130px;
  padding: 0.8rem 1rem;
  border: 1px solid #c4b5fd;
  border-radius: 16px;
  background: #f5f3ff;
  color: var(--primary);
  text-align: center;
}
.class-capacity-badge strong { font-size: 1.35rem; }
.class-capacity-badge.full { border-color: #fca5a5; background: #fff1f2; color: #b91c1c; }
.academic-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.academic-nav a { padding: 0.75rem 1rem; border-radius: 11px; color: var(--muted); font-weight: 800; }
.academic-nav a.active { background: #ede9fe; color: var(--primary); }
.year-picker { min-width: 230px; }
.year-picker label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; }
.closed-year-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #fbbf24;
  border-radius: 14px;
  background: #fffbeb;
  color: #92400e;
}
.year-end-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 0.7fr); gap: 1rem; }
.year-end-form { display: grid; gap: 1rem; margin-top: 1rem; }
.year-source-banner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #86efac;
  border-radius: 16px;
  background: #f0fdf4;
}
.year-source-banner > div, .year-source-banner label { display: grid; gap: 0.3rem; }
.year-source-banner strong { color: #047857; font-size: 1.15rem; }
.year-source-banner span, .year-source-banner small { color: var(--muted); }
.year-end-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.year-end-toolbar label { display: grid; gap: 0.4rem; color: var(--muted); }
.promotion-default-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(240px, 1.4fr);
  gap: 0.75rem;
}
.promotion-default-summary article, .promotion-default-summary p {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
}
.promotion-default-summary strong { color: #047857; font-size: 1.4rem; }
.promotion-default-summary small, .promotion-default-summary p { color: var(--muted); }
.promotion-default-summary p { align-content: center; border-color: #bfdbfe; background: #eff6ff; }
.year-end-table-wrap { overflow-x: auto; }
.year-end-table { min-width: 760px; }
.year-end-table .student-identity, .year-end-table td:nth-child(3) { display: grid; gap: 0.2rem; }
.year-end-table td small { color: var(--muted); }
.year-end-table select { min-width: 145px; }
.year-end-table .selection-column { width: 42px; min-width: 42px; text-align: center; }
.year-end-table .selection-column input { width: 18px; height: 18px; accent-color: var(--primary); }
.year-end-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
}
.year-end-confirm p { margin: 0; color: #991b1b; }
.danger-action { background: #b91c1c; box-shadow: none; }
.closure-history { display: grid; gap: 0.7rem; margin-top: 1rem; }
.closure-history article, .closure-summary {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fafafa;
}
.closure-history span, .closure-history small, .closure-summary span { color: var(--muted); }
.year-end-empty { display: grid; gap: 0.35rem; padding: 2rem; }
.next-year-creator, .bulk-promotion-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #c4b5fd;
  border-radius: 16px;
  background: #faf8ff;
}
.next-year-creator > div, .bulk-promotion-tools > div { display: grid; gap: 0.3rem; }
.next-year-creator span, .bulk-promotion-tools span { color: var(--muted); font-size: 0.88rem; }
.next-year-creator label, .bulk-promotion-tools label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.88rem; }
.bulk-promotion-tools { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)) minmax(180px, auto); align-items:start; border-color: #bae6fd; background: #f0f9ff; }
.bulk-selection-actions {
  display:grid !important;
  width:190px;
  max-width:100%;
  grid-template-columns:1fr;
  gap:.35rem !important;
  justify-self:center;
}
.bulk-selection-actions button {
  width:100%;
  height:40px;
  min-height:40px;
  padding:.4rem .65rem;
  font-size:.8rem;
  white-space:nowrap;
}
.academic-guide, .current-year-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.current-year-guide {
  margin: 0 0 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid #a7f3d0;
  border-radius: 16px;
  background: #ecfdf5;
}
.current-year-guide h2, .current-year-guide p { margin: 0.2rem 0 0; }
.classroom-card-grid, .transfer-list, .mastery-form, .certificate-domains, .certificate-comments {
  display: grid;
  gap: 0.75rem;
}
.classroom-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.classroom-card {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.classroom-card.active { border-color: #a78bfa; background: #faf8ff; box-shadow: 0 10px 24px rgba(79, 70, 229, 0.08); }
.classroom-card span, .classroom-card small { color: var(--muted); }
.promotion-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: end; margin-top: 1rem; }
.promotion-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.7rem;
  align-items: end;
}
.academic-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.academic-filter label, .promotion-form label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.distribution-grid, .evaluation-layout, .certificate-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.distribution-grid .call-sheet { grid-column: 1 / -1; }
.age-rule-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: start;
}
.transfer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.age-exception-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.age-exception-card > div,
.age-exception-card button {
  grid-column: 1 / -1;
}
.transfer-card div { display: grid; gap: 0.2rem; }
.transfer-card span { color: var(--muted); font-size: 0.88rem; }
.capacity-meter { height: 10px; overflow: hidden; border-radius: 99px; background: #e5e7eb; }
.capacity-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #8b5cf6); }
.capacity-count { display: block; margin: 0.5rem 0 1rem; color: var(--primary); }
.unit-toolbar { display: flex; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.evaluation-mode-nav { margin-bottom: 1rem; }
.evaluation-domain-group {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.evaluation-domain-group h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}
.mastery-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.item-mastery-row { grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.4fr) minmax(180px, 0.8fr); }
.mastery-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.mastery-options label { cursor: pointer; }
.mastery-options input { position: absolute; opacity: 0; }
.mastery-options span {
  display: block;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
}
.mastery-options input:checked + span { border-color: #8b5cf6; background: #ede9fe; color: var(--primary); font-weight: 800; }
.item-note-field {
  display: grid;
  gap: 0.25rem;
}
.item-note-field span {
  color: var(--muted);
  font-size: 0.78rem;
}
.student-evaluation-file { display: grid; gap: 1rem; }
.evaluation-file-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.evaluation-file-summary article,
.evaluation-final-grid article,
.evaluation-file-item {
  display: grid;
  gap: 0.28rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.evaluation-file-summary span,
.evaluation-unit-card header span,
.section-title span,
.evaluation-file-item small {
  color: var(--muted);
}
.evaluation-file-section {
  display: grid;
  gap: 0.8rem;
}
.section-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.section-title h3,
.evaluation-file-domain h4 {
  margin: 0;
}
.evaluation-unit-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}
.evaluation-unit-card header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.evaluation-file-domain {
  display: grid;
  gap: 0.55rem;
}
.evaluation-file-items,
.evaluation-final-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}
.evaluation-final-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.evaluation-file-item span,
.evaluation-final-grid span {
  color: var(--primary);
  font-weight: 800;
}
.narrative-timeline { margin-top: 1rem; }
.certificate-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.certificate-card {
  min-height: 720px;
  padding: 2rem;
  border: 8px double #7c3aed;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #faf7ff);
}
.certificate-card header, .certificate-student, .certificate-attendance, .certificate-card footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.certificate-card header { padding-bottom: 1rem; border-bottom: 1px solid #ddd6fe; }
.certificate-card header h1 { margin: 0.3rem 0 0; color: #5b21b6; }
.certificate-student { padding: 1.5rem 0; }
.certificate-student h2 { margin: 0; }
.certificate-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.certificate-domains div, .certificate-comments article {
  padding: 1rem;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
}
.certificate-domains span { display: block; margin-top: 0.35rem; color: #6d28d9; font-weight: 800; }
.certificate-attendance { margin: 1rem 0; padding: 1rem; border-radius: 14px; background: #f5f3ff; }
.certificate-attendance strong { font-size: 1.5rem; color: #6d28d9; }
.certificate-comments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.certificate-comments p { color: var(--muted); }
.certificate-card footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ddd6fe; }
.classroom-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}
.classroom-picker { width: min(520px, 100%); padding: 1.5rem; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22); }
.picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.picker-grid a { padding: 1rem; border: 1px solid #c4b5fd; border-radius: 14px; background: #faf8ff; color: var(--primary); font-weight: 800; text-align: center; }
.attendance-date-card {
  display: grid;
  min-width: 150px;
  padding: 0.8rem 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  text-align: center;
}
.attendance-date-card strong { font-size: 1.25rem; }
.attendance-toolbar {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.attendance-toolbar label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.daily-attendance-panel { padding: 1rem; }
.daily-attendance-form { display: grid; gap: 0.65rem; }
.attendance-table-head, .student-attendance-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(440px, 1.8fr) minmax(220px, 1fr);
  gap: 0.85rem;
  align-items: center;
}
.attendance-table-head {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}
.hero-alert div { display: grid; gap: 0.25rem; }
.hero-alert small { color: rgba(255, 255, 255, 0.86); font-weight: 600; }
.hero-alert.read { background: linear-gradient(90deg, #64748b, #475569); opacity: 0.86; }
.student-attendance-row {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.attendance-student { display: flex; align-items: center; gap: 0.7rem; }
.attendance-student div { display: grid; gap: 0.2rem; }
.attendance-student span { color: var(--muted); font-size: 0.85rem; }
.attendance-status-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.attendance-choice { cursor: pointer; }
.attendance-choice input { position: absolute; opacity: 0; }
.attendance-choice span {
  display: block;
  padding: 0.65rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  text-align: center;
  font-size: 0.88rem;
  transition: 0.15s ease;
}
.attendance-choice.present input:checked + span { border-color: #86efac; background: #dcfce7; color: #166534; font-weight: 800; }
.attendance-choice.absent input:checked + span { border-color: #fca5a5; background: #fee2e2; color: #b91c1c; font-weight: 800; }
.attendance-choice.late input:checked + span { border-color: #fcd34d; background: #fef3c7; color: #92400e; font-weight: 800; }
.attendance-choice.excused input:checked + span { border-color: #93c5fd; background: #dbeafe; color: #1d4ed8; font-weight: 800; }
.attendance-reason { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.attendance-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid #c4b5fd;
  border-radius: 16px;
  background: rgba(250, 248, 255, 0.96);
  backdrop-filter: blur(8px);
}
.attendance-save-bar div { display: grid; gap: 0.2rem; }
.attendance-save-bar span { color: var(--muted); font-size: 0.9rem; }
.attendance-filter { grid-template-columns: 260px auto; justify-content: start; }
.class-attendance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.class-attendance-card { padding: 1rem; }
.class-attendance-card header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.class-attendance-card header h2 { margin: 0.2rem 0; }
.class-attendance-card header span { color: var(--muted); }
.class-attendance-card header > strong { font-size: 1.5rem; color: #15803d; }
.attendance-summary-bar { height: 9px; overflow: hidden; margin: 0.8rem 0; border-radius: 99px; background: #fee2e2; }
.attendance-summary-bar span { display: block; height: 100%; background: #22c55e; }
.attendance-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.9rem; }
.attendance-counts span { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.88rem; }
.attendance-dot { width: 8px; height: 8px; border-radius: 50%; }
.attendance-dot.present { background: #22c55e; }
.attendance-dot.absent { background: #ef4444; }
.attendance-dot.late { background: #f59e0b; }
.attendance-dot.excused { background: #3b82f6; }
.repeated-alert-panel { padding: 1rem; border-color: #fecaca; }
.alert-count {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
}
.absence-alert-list { display: grid; gap: 0.7rem; }
.absence-alert-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
}
.absence-alert-list p { margin: 0.2rem 0 0; color: #991b1b; }
.alert-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-weight: 900;
}
.absence-dates { display: flex; gap: 0.35rem; }
.absence-dates span { padding: 0.35rem 0.5rem; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 0.8rem; }
.all-clear { display: grid; place-items: center; gap: 0.3rem; min-height: 120px; color: #166534; text-align: center; }
.all-clear span { color: var(--muted); }
.finance-security-badge {
  display: grid;
  padding: 0.8rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: #f0fdf4;
  color: #166534;
  text-align: center;
}
.finance-account-layout, .finance-form-report-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1rem;
}
.finance-account-search-mode,
.finance-account-detail-mode {
  display: grid;
  gap: 1rem;
}
.finance-account-list, .student-finance-account { padding: 1rem; }
.account-mini-list { display: grid; gap: 0.55rem; margin-top: 1rem; max-height: 560px; overflow: auto; }
.account-mini-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 13px;
}
.account-mini-list a.active { border-color: #a78bfa; background: #faf8ff; }
.account-mini-list div { display: grid; gap: 0.15rem; }
.account-mini-list span { color: var(--muted); font-size: 0.82rem; }
.account-mini-list b { color: #b45309; }
.finance-account-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.finance-account-header h2 { margin: 0.3rem 0 0; }
.finance-calculation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.finance-calculation-grid article {
  min-height: 110px;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.finance-calculation-grid span, .finance-calculation-grid small { color: var(--muted); font-size: 0.84rem; }
.finance-calculation-grid strong { font-size: 1.35rem; }
.finance-calculation-grid .calculated { border-color: #bfdbfe; background: #eff6ff; }
.finance-calculation-grid .balance-card { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.finance-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.finance-entry-grid form { display: grid; align-content: start; gap: 0.7rem; }
.finance-entry-grid label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.finance-action-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: 1rem 0;
}
.finance-charge-form,
.finance-base-fee-form {
  display: grid;
  gap: 0.8rem;
}
.finance-charge-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr);
  gap: 0.75rem;
}
.finance-charge-fields label,
.finance-base-fee-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.finance-discount-section {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0;
}
.finance-discount-card {
  display: grid;
  gap: 0.55rem;
}
.finance-simple-discount-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.finance-simple-discount-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.finance-selected-account {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}
.finance-selected-account span { color: var(--muted); font-size: 0.86rem; }
.finance-inline-action summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  cursor: pointer;
}
.finance-inline-action form {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.financial-table { display: grid; gap: 0.55rem; }
.financial-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
}
.financial-row.head { background: var(--panel-soft); color: var(--muted); font-size: 0.86rem; font-weight: 800; }
.financial-row a { color: #2563eb; direction: ltr; text-align: right; }
.individual-fee-table .individual-fee-row {
  grid-template-columns:
    minmax(140px, 1.1fr)
    minmax(96px, 0.72fr)
    minmax(110px, 0.86fr)
    minmax(120px, 0.92fr)
    minmax(110px, 0.86fr)
    minmax(110px, 0.84fr)
    minmax(190px, 1.35fr);
}
.individual-fee-history-table .individual-fee-history-row {
  grid-template-columns:
    minmax(120px, 1fr)
    minmax(92px, 0.7fr)
    minmax(92px, 0.7fr)
    minmax(88px, 0.65fr)
    minmax(88px, 0.65fr)
    minmax(82px, 0.6fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(170px, 1.2fr);
}
.individual-fee-actions {
  display: grid;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}
.individual-fee-messages {
  margin: 0;
}
.detailed-statement, .arrears-report { padding: 1.2rem; }
.detailed-statement > header, .report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detailed-statement header div { display: grid; gap: 0.2rem; }
.detailed-statement header h2 { margin: 0; }
.detailed-statement footer { display: flex; justify-content: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; padding: 1rem; border-radius: 13px; background: #f5f3ff; }
.danger-button {
  border: 0;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.compact-actions form { display: inline; }
.primary-button.small, .secondary-button.small, .danger-button.small {
  padding: 0.45rem 0.65rem;
  min-height: 34px;
  font-size: 0.82rem;
}
.muted-row {
  opacity: 0.72;
  background: #f8fafc;
}
.receipt-print-card { display: none; }
.receipt-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.receipt-print-grid div, .receipt-print-notes {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.receipt-print-grid span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.84rem;
}
.receipt-print-amount {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
}
.receipt-print-amount strong { font-size: 1.25rem; color: #166534; }
.finance-admin-tools {
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid #d8d3ff;
  border-radius: 12px;
  background: #fbfaff;
}
.finance-admin-tools summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 66px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  list-style: none;
  background: #f7f5ff;
}
.finance-admin-tools summary::-webkit-details-marker {
  display: none;
}
.finance-admin-tools-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: var(--primary);
  background: #ebe8ff;
  font-size: 1.05rem;
  font-weight: 900;
}
.finance-admin-tools-copy {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}
.finance-admin-tools-copy strong {
  color: var(--text);
  font-size: 0.92rem;
}
.finance-admin-tools-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}
.finance-admin-tools-chevron {
  color: var(--primary);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.finance-admin-tools[open] > summary {
  border-bottom: 1px solid #dedaff;
  background: #f1efff;
}
.finance-admin-tools[open] .finance-admin-tools-chevron {
  transform: rotate(180deg);
}
.finance-admin-tools > .finance-entry-grid {
  padding: 0.9rem;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 1rem;
  align-items: start;
}
.support-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  background: #fff;
}
.support-hero h2 {
  margin: 0.2rem 0 0.45rem;
  font-size: 1.55rem;
}
.support-hero p { margin: 0; color: var(--muted); }
.support-kicker {
  color: var(--primary);
  font-weight: 900;
  font-size: 0.86rem;
}
.support-contact-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: #f8f7ff;
}
.support-contact-card span,
.support-topic-grid span,
.support-info-list span {
  color: var(--muted);
}
.support-contact-card strong {
  direction: ltr;
  text-align: left;
  font-size: 1.05rem;
}
.support-topics,
.support-system-card { padding: 1rem; }
.support-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.support-topic-grid article {
  display: grid;
  gap: 0.35rem;
  min-height: 86px;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}
.support-info-list {
  display: grid;
  gap: 0.55rem;
}
.support-info-list div {
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.settings-security-badge {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid #c4b5fd;
  border-radius: 15px;
  background: #f5f3ff;
  color: #5b21b6;
}
.settings-security-badge span { font-size: 0.82rem; color: var(--muted); }
.settings-section-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.settings-section-switcher a {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-height: 92px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}
.settings-section-switcher a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: transparent;
}
.settings-section-switcher a:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 128, 237, 0.35);
}
.settings-section-switcher a.active {
  background: linear-gradient(145deg, #ffffff, #f1fbff);
  border-color: rgba(47, 128, 237, 0.42);
}
.settings-section-switcher a.active::before {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
}
.settings-section-switcher strong {
  color: var(--text);
  font-size: 1rem;
}
.settings-section-switcher span {
  color: var(--muted);
  font-size: 0.86rem;
}
.settings-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-tool-card { padding: 1rem; }
.currency-preview {
  display: grid;
  min-width: 52px;
  min-height: 52px;
  place-items: center;
  border-radius: 14px;
  background: #ede9fe;
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
}
.backup-list { display: grid; gap: 0.55rem; margin-top: 1rem; }
.backup-schedule-form { margin-bottom: 1rem; }
.manual-backup-form { padding-top: 1rem; border-top: 1px solid var(--border); }
.backup-schedule-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  padding: 0.75rem;
  border-radius: 11px;
  background: var(--panel-soft);
}
.backup-schedule-status span { color: var(--muted); font-size: 0.82rem; }
.backup-error { margin: 0; padding: 0.7rem; border-radius: 10px; background: #fff1f2; color: #be123c; }
.backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 11px;
}
.backup-row div { display: grid; gap: 0.15rem; }
.backup-row span { color: var(--muted); font-size: 0.8rem; }
.report-settings-card { grid-column: span 2; }
.report-print-header, .report-print-footer { display: none; }
.print-section-host { display: none; }
.report-layout-editor, .report-footer-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.report-logo-editor { display: grid; gap: 0.55rem; color: var(--muted); font-size: 0.93rem; }
.report-logo-editor img { width: 90px; height: 90px; margin: auto; object-fit: contain; }
.report-layout-preview {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}
.preview-label { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.preview-header, .preview-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem;
  background: #fff;
  font-size: 0.75rem;
}
.preview-header { border-bottom: 2px solid #64748b; }
.preview-footer { border-top: 1px solid #94a3b8; text-align: center; }
.preview-header > div:first-child { text-align: right; }
.preview-header > div:last-child { text-align: left; }
.preview-center { display: grid; place-items: center; gap: 0.25rem; text-align: center; }
.preview-center img { width: 48px; height: 48px; object-fit: contain; }
.preview-paper { min-height: 90px; display: grid; place-items: center; align-content: center; gap: 0.25rem; background: #fff; color: var(--muted); }
.settings-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  scroll-margin-top: 1rem;
}
.settings-navigation { padding: 1rem; position: sticky; top: 1rem; }
.settings-nav-group + .settings-nav-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.settings-nav-group h2 { margin: 0 0 0.55rem; font-size: 0.92rem; color: var(--muted); }
.settings-nav-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 11px;
  font-weight: 750;
}
.settings-nav-group a:hover, .settings-nav-group a.active { background: #f0edff; color: var(--primary); }
.settings-nav-group b { min-width: 28px; padding: 0.2rem 0.45rem; border-radius: 99px; background: #fff; text-align: center; font-size: 0.78rem; }
.settings-content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 1rem; align-items: start; }
.settings-register, .settings-editor { padding: 1rem; }
.settings-editor { position: sticky; top: 1rem; }
.reference-list { display: grid; gap: 0.6rem; }
.reference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
}
.reference-row > a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-width: 0; }
.reference-row > a div { display: grid; gap: 0.2rem; min-width: 0; }
.reference-row span { color: var(--muted); font-size: 0.82rem; }
.reference-row code { padding: 0.25rem 0.45rem; border-radius: 7px; background: var(--panel-soft); direction: ltr; }
.reference-row.archived { opacity: 0.62; background: #f8fafc; }
.archive-reference, .restore-reference {
  border: 0;
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-weight: 800;
}
.archive-reference { background: #fff1f2; color: #be123c; }
.restore-reference { background: #ecfdf5; color: #047857; }
.check-line { display: flex !important; align-items: center; gap: 0.6rem !important; }
.check-line input { width: 18px; height: 18px; }
.settings-form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.field-help { color: #b45309; }
.profile-login-link {
  display: block;
  margin-top: 0.65rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: #eaf8ff;
  color: var(--primary);
  text-align: center;
  font-weight: 800;
}
.profile-logout-button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
  font-weight: 800;
  cursor: pointer;
}
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at top right, rgba(114, 199, 255, 0.28), transparent 36%),
    radial-gradient(circle at bottom left, rgba(97, 214, 167, 0.22), transparent 34%),
    #f8fcff;
}
.login-card {
  width: min(440px, 100%);
  display: grid;
  gap: 1.25rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(38, 78, 118, 0.13);
}
.login-brand { display: flex; align-items: center; gap: 0.75rem; }
.login-brand > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: #eaf8ff; color: var(--primary); font-size: 1.35rem; }
.login-brand div { display: grid; gap: 0.15rem; }
.login-brand small, .login-heading p { color: var(--muted); }
.login-heading h1 { margin: 0.25rem 0; }
.login-heading p { margin: 0; }
.login-error { padding: 0.75rem; border-radius: 11px; background: #fff1f2; color: #be123c; font-weight: 700; }
.role-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.role-dashboard-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.role-dashboard-grid > .panel { padding: 1rem; }
.dashboard-student-list { display: grid; gap: 0.55rem; }
.dashboard-student-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dashboard-student-list a:hover { border-color: rgba(47, 128, 237, 0.32); background: #f3fbff; }
.dashboard-student-list div { display: grid; gap: 0.15rem; }
.dashboard-student-list small { color: var(--muted); }
.dashboard-finance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.dashboard-finance-row div { display: grid; gap: 0.15rem; }
.dashboard-finance-row span { color: var(--muted); font-size: 0.82rem; }
.dashboard-finance-row b { color: var(--primary); }

.finance-layout, .transport-layout, .academics-layout {
  grid-template-columns: minmax(0, 1.4fr) 430px;
}
.finance-card .kpi-icon { background: #eaf8ff; color: var(--primary); }
.table-shell, .eval-table {
  display: grid;
  gap: 0.7rem;
}
.finance-row, .eval-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.finance-row.head, .eval-row.head {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.finance-row, .eval-row {
  box-shadow: 0 8px 24px rgba(38, 78, 118, 0.04);
}
.finance-row span, .eval-row span { min-width: 0; }
.eval-row {
  grid-template-columns: 220px repeat(4, minmax(0, 1fr)) 1.4fr auto;
}
.student-compact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.student-compact strong { display: block; }
.student-compact span { color: var(--muted); font-size: 0.9rem; }
.bus-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff5d6;
}
.bus-avatar {
  width: 72px;
  height: 72px;
  background: linear-gradient(145deg, #dff5ff, #e5fff4);
}

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding: 0.35rem 0 0.65rem;
  margin-bottom: 1rem;
}
.page-header p { margin: 0.35rem 0 0; }
.page-header h1 {
  color: #17345c;
  letter-spacing: 0;
}

@media (max-width: 1440px) {
  .dashboard-grid, .finance-layout, .transport-layout, .academics-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-hero {
    grid-template-columns: 1fr;
  }
  .home-quick-actions a {
    min-height: 132px;
  }
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    width: min(330px, calc(100vw - 3rem));
    height: 100dvh;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.25s ease;
    box-shadow: -24px 0 60px rgba(9, 18, 45, 0.28);
  }
  .sidebar-open {
    overflow: hidden;
  }
  .sidebar-open .sidebar {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0;
    background: rgba(9, 18, 45, 0.48);
    backdrop-filter: blur(2px);
  }
  .sidebar-open .sidebar-backdrop {
    display: block;
  }
  .sidebar-close {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .mobile-nav-toggle {
    grid-area: menu;
    width: 44px;
    height: 44px;
    padding: 10px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    cursor: pointer;
  }
  .mobile-nav-toggle, .sidebar-close {
    display: grid;
  }
  .mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: var(--text);
  }
  .topbar {
    grid-template-areas:
      "menu profile tools"
      "search search search";
    grid-template-columns: auto minmax(0, 1fr) auto;
    z-index: 40;
  }
  .topbar > .topbar-menu-wrap { grid-area: profile; min-width: 0; }
  .topbar-tools { grid-area: tools; justify-content: flex-start; }
  .search-bar { grid-area: search; min-width: 0; }
  .profile-pill { max-width: 100%; }
  .profile-meta { min-width: 0; }
  .profile-meta strong, .profile-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-dropdown { right: 0; }
  .kpi-grid, .summary-strip, .form-grid, .field-grid, .finance-mini, .compact-cards, .status-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-grid, .hr-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-panel, .distribution-grid, .evaluation-layout, .certificate-layout, .year-end-layout, .age-rule-layout { grid-template-columns: 1fr; }
  .promotion-form, .academic-filter, .next-year-creator, .bulk-promotion-tools, .promotion-default-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-attendance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-table-head { display: none; }
  .student-attendance-row { grid-template-columns: 1fr; }
  .finance-account-layout, .finance-form-report-layout { grid-template-columns: 1fr; }
  .settings-section-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-tools-grid, .settings-layout, .settings-content { grid-template-columns: 1fr; }
  .support-layout, .support-hero { grid-template-columns: 1fr; }
  .report-settings-card { grid-column: auto; }
  .report-layout-editor, .report-footer-editor { grid-template-columns: 1fr; }
  .role-dashboard-grid, .role-dashboard-grid.two-columns { grid-template-columns: 1fr; }
  .home-quick-actions { grid-template-columns: 1fr; }
  .home-start-strip { align-items: stretch; flex-direction: column; }
  .settings-navigation, .settings-editor { position: static; }
  .finance-calculation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-row, .eval-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table-shell, .eval-table, .year-end-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (min-width: 1101px) and (max-height: 940px) {
  .sidebar {
    gap: 0.75rem;
    padding-block: 1rem;
  }
  .brand-card { padding: 0.85rem; }
  .nav-item { padding: 0.75rem 0.9rem; }
  .sidebar-support { gap: 0.75rem; }
  .support-illustration { display: none; }
  .support-button { padding: 0.85rem 1rem; }
}

@media (max-width: 720px) {
  :root { --radius: 18px; }
  .page-wrap, .topbar, .sidebar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .page-wrap { padding-top: 0.85rem; }
  .topbar { gap: 0.65rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .profile-pill { gap: 0.55rem; padding: 0.45rem 0.55rem; }
  .profile-pill .avatar { width: 38px; height: 38px; }
  .profile-pill .profile-meta span, .profile-pill .menu-chevron { display: none; }
  .profile-pill .profile-meta strong { font-size: 0.9rem; }
  .search-bar input { min-width: 0; padding: 0.6rem; }
  .panel, .detail-panel, .list-panel, .record-section, .subpanel { padding: 0.8rem; }
  .panel-head, .hero-alert, .event-list li, .timeline div, .backup-row, .dashboard-finance-row {
    align-items: stretch;
    flex-direction: column;
  }
  .panel-head { display: flex; }
  .panel-head > a, .panel-head > button { align-self: start; }
  .hero-alert span { flex: none; }
  .home-hero-copy { min-height: auto; padding: 1rem; }
  .home-hero-copy h1 { font-size: 1.55rem; }
  .home-quick-actions a { min-height: auto; }
  .kpi-grid, .summary-strip, .form-grid, .field-grid, .compact-cards, .status-cards, .finance-mini {
    grid-template-columns: 1fr;
  }
  .settings-section-switcher, .support-topic-grid { grid-template-columns: 1fr; }
  .parent-columns, .consent-grid, .upload-grid, .document-list { grid-template-columns: 1fr; }
  .role-grid, .hr-action-grid, .hr-history-grid { grid-template-columns: 1fr; }
  .academic-nav { overflow-x: auto; }
  .classroom-card-grid, .promotion-form, .academic-filter, .mastery-row, .item-mastery-row, .mastery-options, .certificate-domains, .certificate-comments, .picker-grid, .year-end-toolbar, .next-year-creator, .bulk-promotion-tools, .promotion-default-summary, .evaluation-file-summary, .evaluation-file-items, .evaluation-final-grid { grid-template-columns: 1fr; }
  .closed-year-banner, .year-end-confirm, .academic-guide, .current-year-guide, .year-source-banner { align-items: stretch; flex-direction: column; }
  .attendance-toolbar, .attendance-save-bar { align-items: stretch; flex-direction: column; }
  .attendance-status-options, .attendance-reason, .class-attendance-grid { grid-template-columns: 1fr 1fr; }
  .finance-calculation-grid, .finance-entry-grid { grid-template-columns: 1fr; }
  .age-exception-card { grid-template-columns: 1fr; }
  .financial-row { grid-template-columns: 1fr 1fr; }
  .individual-fee-table .individual-fee-row { grid-template-columns: 1fr 1fr; }
  .individual-fee-history-table .individual-fee-history-row { grid-template-columns: 1fr 1fr; }
  .financial-row.head { display: none; }
  .global-search-large { grid-template-columns: 1fr; }
  .record-header, .archive-box { align-items: stretch; flex-direction: column; }
  .profile-stack, .ring-stat, .donut-wrap, .page-header {
    grid-template-columns: 1fr;
    display: grid;
  }
  .profile-stack { text-align: center; }
  .profile-stack .portrait, .profile-stack .large-avatar { margin-inline: auto; }
  .profile-stack h1, .record-header h1 { font-size: 1.45rem; overflow-wrap: anywhere; }
  .record-nav {
    top: 118px;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
  }
  .button-row, .inline-tools {
    grid-auto-flow: row;
    display: grid;
  }
  .button-row > *, .inline-tools > *, .record-actions > *, .settings-form-actions > * {
    width: 100%;
  }
  .list-card, .notification-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .list-card > :last-child, .notification-item > :last-child { grid-column: 2; }
  .pagination-bar { gap: 0.6rem; flex-wrap: wrap; }
  .data-format-grid, .data-import-panel { grid-template-columns: 1fr; }
  .finance-row, .eval-row, .financial-row { grid-template-columns: 1fr; }
  .individual-fee-table .individual-fee-row { grid-template-columns: 1fr; }
  .individual-fee-history-table .individual-fee-history-row { grid-template-columns: 1fr; }
  .finance-row.head, .eval-row.head { display: none; }
  .topbar-dropdown {
    position: fixed;
    top: 126px;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: calc(100dvh - 140px);
  }
  .topbar-notification-list { max-height: calc(100dvh - 220px); }
}

@media (max-width: 390px) {
  .profile-pill .profile-meta { display: none; }
  .sidebar { width: calc(100vw - 1.5rem); }
  .attendance-status-options, .attendance-reason, .class-attendance-grid { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 12mm 10mm 18mm; }
  .no-print, .sidebar, .topbar { display: none !important; }
  body.print-element .app-shell { display: none !important; }
  body.print-element .print-section-host {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.print-element .print-section-host .no-print { display: none !important; }
  body.print-element .print-section-host .panel,
  body.print-element .print-section-host .record-section,
  body.print-element .print-section-host .student-record,
  body.print-element .print-section-host .staff-record {
    box-shadow: none !important;
    border-color: #cbd5e1 !important;
  }
  body.print-element .print-section-host .detailed-statement {
    padding: 0 !important;
    border: 0 !important;
  }
  body.print-element .print-section-host .detailed-statement > header {
    margin: 0 0 7mm;
    padding: 0 0 4mm;
    border-bottom: 0.4mm solid #334155;
  }
  body.print-element .print-section-host .detailed-statement > header h2 {
    margin: 0;
    font-size: 16pt;
  }
  body.print-element .print-section-host .statement-table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
  }
  body.print-element .print-section-host .statement-table .financial-row {
    display: table-row !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.print-element .print-section-host .statement-table .financial-row > * {
    display: table-cell !important;
    padding: 2.5mm 2mm !important;
    border-bottom: 0.2mm solid #cbd5e1 !important;
    vertical-align: top;
  }
  body.print-element .print-section-host .statement-table .financial-row.head > * {
    border-top: 0.35mm solid #64748b !important;
    border-bottom: 0.35mm solid #64748b !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 900;
  }
  body.print-element .print-section-host .statement-table .financial-row > *:first-child {
    white-space: nowrap;
    width: 24mm;
  }
  body.print-element .print-section-host .statement-table .financial-row > *:nth-child(2) {
    white-space: nowrap;
    width: 24mm;
  }
  body.print-element .print-section-host .statement-table .financial-row > *:nth-last-child(-n+2) {
    width: 24mm;
    text-align: left;
    direction: ltr;
    font-weight: 900;
  }
  body.print-element .print-section-host .receipt-print-card { display: none !important; }
  .report-print-header, .report-print-footer {
    display: grid !important;
    right: 0;
    left: 0;
    z-index: 1000;
    color: #1f2937;
    background: #fff;
    white-space: normal;
  }
  .report-print-header {
    position: static;
    grid-template-areas: "right center left";
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 5mm;
    min-height: 24mm;
    margin-bottom: 6mm;
    padding: 0 2mm 3mm;
    border-bottom: 0.4mm solid #64748b;
    direction: ltr;
    font-size: 9pt;
    font-weight: 800;
    line-height: 1.35;
  }
  .report-header-side { direction: rtl; min-width: 0; overflow-wrap: anywhere; }
  .report-header-right { grid-area: right; text-align: right; }
  .report-header-left { grid-area: left; text-align: left; }
  .report-header-center { grid-area: center; display: grid; place-items: center; gap: 0.5mm; direction: rtl; text-align: center; }
  .report-header-center img { width: auto; height: auto; max-width: 18mm; max-height: 12mm; object-fit: contain; }
  .report-header-center div { max-width: 75mm; font-size: 9.5pt; }
  .report-print-footer {
    position: fixed;
    bottom: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4mm;
    height: 10mm;
    padding: 2.5mm 2mm 0;
    border-top: 0.3mm solid #94a3b8;
    text-align: center;
    font-size: 7.5pt;
    line-height: 1.3;
  }
  .report-print-footer > div:first-child { text-align: right; }
  .report-print-footer > div:last-child { text-align: left; }
  .finance-print-individual-fees {
    break-inside: avoid;
  }
  .finance-print-note {
    margin: 0 0 3mm;
    padding: 2mm 2.5mm;
    border: 0.2mm solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 8pt;
    line-height: 1.5;
  }
  .finance-print-history-block {
    margin-top: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .finance-print-history-block h4 {
    margin: 0 0 2mm;
    font-size: 10pt;
    color: #0f172a;
    break-after: avoid;
    page-break-after: avoid;
  }
  .finance-print-history-table {
    width: 100%;
    table-layout: fixed;
  }
  .finance-print-history-table th:nth-child(1),
  .finance-print-history-table td:nth-child(1) { width: 14%; }
  .finance-print-history-table th:nth-child(2),
  .finance-print-history-table td:nth-child(2) { width: 11%; }
  .finance-print-history-table th:nth-child(3),
  .finance-print-history-table td:nth-child(3) { width: 10%; }
  .finance-print-history-table th:nth-child(4),
  .finance-print-history-table td:nth-child(4),
  .finance-print-history-table th:nth-child(5),
  .finance-print-history-table td:nth-child(5) { width: 10%; }
  .finance-print-history-table th:nth-child(6),
  .finance-print-history-table td:nth-child(6) { width: 9%; }
  .finance-print-history-table th:nth-child(7),
  .finance-print-history-table td:nth-child(7),
  .finance-print-history-table th:nth-child(8),
  .finance-print-history-table td:nth-child(8) { width: 18%; }
  .finance-print-history-block thead,
  .finance-print-history-block tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .finance-print-compact-table th,
  .finance-print-compact-table td {
    padding: 1.6mm 1.8mm;
    font-size: 7.5pt;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .app-shell, .main-column, .workspace-grid { display: block; }
  .page-wrap { padding: 0; }
  .panel, .record-section { box-shadow: none; border-color: #cbd5e1; }
  .student-record { padding: 0; }
  .record-section { break-inside: avoid; }
  html, body { background: #fff; font-size: 9pt; }
  .detailed-statement, .arrears-report, .receipt-register, .expense-register {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .detailed-statement > header {
    margin: 0 0 5mm;
    padding: 0 0 3mm;
    border-bottom: 0.4mm solid #334155;
  }
  .detailed-statement > header h2 { margin: 0; font-size: 15pt; }
  .detailed-statement > header > div:first-child > span { display: none; }
  .financial-table { gap: 0 !important; }
  .financial-row {
    min-height: 0 !important;
    padding: 2.2mm 1.5mm !important;
    border: 0 !important;
    border-bottom: 0.2mm solid #cbd5e1 !important;
    border-radius: 0 !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .financial-row.head {
    display: grid !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 900;
    border-top: 0.3mm solid #64748b !important;
    border-bottom: 0.3mm solid #64748b !important;
  }
  .detailed-statement > footer {
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 0.4mm solid #334155;
    break-inside: avoid;
  }
  body.print-certificate .page-wrap > * { display: none !important; }
  body.print-certificate .certificate-layout { display: block !important; }
  body.print-certificate .certificate-layout > * { display: none !important; }
  body.print-certificate .certificate-card { display: block !important; border-color: #555; }
  body.print-call .page-wrap > * { display: none !important; }
  body.print-call .distribution-grid { display: block !important; }
  body.print-call .distribution-grid > * { display: none !important; }
  body.print-call .print-call-sheet { display: block !important; }
  body.print-receipt .page-wrap > * { display: none !important; }
  body.print-receipt .finance-form-report-layout,
  body.print-receipt .receipt-register,
  body.print-receipt .receipt-register .financial-table {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.print-receipt .finance-form-report-layout > *,
  body.print-receipt .receipt-register > *,
  body.print-receipt .receipt-register .financial-table > * {
    display: none !important;
  }
  body.print-receipt .finance-form-report-layout > .receipt-register,
  body.print-receipt .receipt-register > .financial-table,
  body.print-receipt .receipt-register .financial-table {
    display: block !important;
  }
  body.print-receipt .receipt-print-card.is-printing {
    display: block !important;
    max-width: 170mm;
    margin: 0 auto;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .receipt-print-card header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8mm;
    margin-bottom: 7mm;
    padding-bottom: 4mm;
    border-bottom: 0.4mm solid #334155;
  }
  .receipt-print-card header span { color: #64748b; font-size: 10pt; font-weight: 800; }
  .receipt-print-card header h2 { margin: 0; font-size: 18pt; color: #0f172a; direction: ltr; }
  .receipt-print-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3mm;
  }
  .receipt-print-grid div, .receipt-print-notes {
    padding: 3mm;
    border: 0.25mm solid #cbd5e1;
    border-radius: 2mm;
    background: #fff;
    min-height: 16mm;
  }
  .receipt-print-grid span {
    display: block;
    margin-bottom: 1.2mm;
    color: #64748b;
    font-size: 8pt;
    font-weight: 800;
  }
  .receipt-print-grid strong { font-size: 10pt; color: #0f172a; }
  .receipt-print-amount {
    grid-column: 1 / -1;
    background: #ecfdf5 !important;
    border-color: #86efac !important;
  }
  .receipt-print-amount strong { font-size: 16pt; color: #166534; }
  .receipt-print-notes { margin-top: 3mm; }
  .receipt-print-card footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14mm;
    margin-top: 14mm;
  }
  .receipt-print-card footer div {
    height: 18mm;
    border-top: 0.3mm solid #64748b;
    display: flex;
    align-items: end;
    justify-content: center;
    color: #64748b;
    font-weight: 800;
  }
  .finance-nav, .finance-security-badge, .finance-form-report-layout > article:first-child { display: none !important; }
  .finance-form-report-layout { display: block; }
  .receipt-register, .expense-register, .detailed-statement, .arrears-report { box-shadow: none; border-color: #bbb; }
}

/* Homepage card system: stable modules and useful zero-data states. */
.dashboard-grid {
  grid-template-columns:minmax(230px,260px) minmax(420px,1fr) minmax(230px,260px);
  align-items:start;
  gap:1rem;
}
.dashboard-grid > .stack {
  align-content:start;
  gap:1rem;
}
.dashboard-grid .mini-panel {
  min-height:0;
}
.dashboard-grid .center-panel {
  min-height:340px;
}
.dashboard-grid .center-panel .notification-list {
  max-height:430px;
  overflow:auto;
  padding-inline-end:.15rem;
}
.role-dashboard-grid > .panel {
  min-width:0;
  min-height:290px;
}
.classroom-card-grid,
.dashboard-student-list,
.financial-table,
.notification-list {
  min-width:0;
}
.role-dashboard-grid .classroom-card-grid,
.role-dashboard-grid .dashboard-student-list,
.role-dashboard-grid .financial-table,
.role-dashboard-grid .notification-list {
  max-height:430px;
  overflow:auto;
  padding-inline-end:.15rem;
}
.dashboard-empty {
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  width:100%;
  margin:0;
  padding:1.25rem 1rem;
  border:1px dashed #dfe1e9;
  border-radius:10px;
  color:var(--text);
  background:#fbfcfe;
  text-align:center;
  list-style:none;
}
.dashboard-empty strong {
  font-size:.95rem;
  line-height:1.5;
}
.dashboard-empty p {
  max-width:32ch;
  margin:0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.65;
}
.dashboard-empty .secondary-button {
  margin-top:.28rem;
}
.dashboard-empty-icon,
.calendar-empty-icon {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--primary);
  border-radius:9px;
  background:var(--primary-soft);
}
.dashboard-empty-icon.success {
  color:#258a50;
  background:var(--success-soft);
}
.dashboard-empty-icon svg,
.calendar-empty-icon svg {
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-empty-wide {
  min-height:230px;
}
.attendance-empty {
  min-height:178px;
  padding-block:1rem;
}
.calendar-empty-icon {
  width:46px;
  height:46px;
  color:#6d647f;
  background:#f0eff5;
}
.progress-list {
  margin:0;
  padding:0;
  list-style:none;
}
.progress-list > li:not(.dashboard-empty) {
  display:grid;
  gap:.45rem;
}
.progress-list .dashboard-empty {
  min-height:170px;
}
.financial-status-cards article {
  min-width:0;
  display:grid;
  align-content:center;
  gap:.25rem;
  min-height:96px;
}
.financial-status-cards strong {
  display:block;
  color:var(--text);
  font-size:1.14rem;
  line-height:1.35;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}
.financial-status-cards span {
  display:block;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
}
.dashboard-finance-row {
  min-height:58px;
  padding:.62rem .2rem;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
}
.dashboard-finance-row:last-child {
  border-bottom:0;
}
.dashboard-finance-row b {
  flex:none;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}

@media (min-width:1101px) and (max-width:1440px) {
  .dashboard-grid {
    grid-template-columns:minmax(210px,240px) minmax(360px,1fr) minmax(210px,240px);
  }
}

@media (max-width:1100px) {
  .dashboard-grid {
    grid-template-columns:1fr;
  }
  .dashboard-grid .center-panel {
    min-height:0;
  }
}

@media (max-width:720px) {
  .role-dashboard-grid > .panel {
    min-height:0;
  }
  .role-dashboard-grid .classroom-card-grid,
  .role-dashboard-grid .dashboard-student-list,
  .role-dashboard-grid .financial-table,
  .role-dashboard-grid .notification-list,
  .dashboard-grid .center-panel .notification-list {
    max-height:none;
    overflow:visible;
  }
  .dashboard-empty,
  .dashboard-empty-wide,
  .progress-list .dashboard-empty {
    min-height:145px;
  }
  .financial-status-cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Students workspace final pass: bounded navigator and one-section dossier flow. */
.student-workspace {
  grid-template-columns:minmax(290px,320px) minmax(0,1fr);
  align-items:start;
  gap:1rem;
}
.student-navigator {
  position:sticky;
  top:84px;
  max-height:calc(100vh - 104px);
  padding:.9rem;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.student-navigator .panel-head { margin-bottom:.7rem; }
.student-navigator .panel-title-block p { margin-top:.18rem; line-height:1.5; }
.student-picker { min-width:0; }
.student-picker > summary {
  display:none;
  list-style:none;
}
.student-picker > summary::-webkit-details-marker { display:none; }
.student-picker-body {
  display:flex;
  min-height:0;
  flex-direction:column;
}
.student-navigator .data-exchange { margin:0; }
.student-navigator .inline-tools {
  grid-template-columns:minmax(0,1fr) auto;
  margin:.7rem 0 .55rem;
}
.student-navigator .inline-tools select { grid-column:1 / -1; }
.student-navigator .student-list {
  max-height:calc(100vh - 370px);
  min-height:132px;
  padding-inline-end:.2rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.student-navigator .list-card {
  min-height:58px;
  border-radius:8px;
}
.student-navigator .list-card.active {
  border-color:#9b92ee;
  border-inline-start:3px solid #4938df;
  background:#f2f0ff;
}
.student-navigator .list-copy { min-width:0; }
.student-navigator .list-copy strong,
.student-navigator .list-copy span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.student-record {
  min-width:0;
  gap:.85rem;
  padding:1rem;
  border-radius:10px;
  background:#fff;
}
.student-record-header {
  align-items:center;
  min-height:88px;
  padding:0 0 .85rem;
  border-bottom:1px solid #e6e8ef;
}
.student-record-identity h1 { margin:.18rem 0; color:#16182d; }
.student-record .summary-strip {
  overflow:hidden;
  border-color:#e6e8ef;
  border-radius:8px;
  background:#f8f9fc;
}
.student-record .summary-strip article { border-color:#e6e8ef; }
.student-record .summary-strip article.is-empty strong {
  color:#7b8192;
  font-size:.87rem;
  font-weight:600;
}
.student-record .record-nav {
  position:sticky;
  top:68px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:.25rem .3rem 0;
  overflow-x:auto;
  border:1px solid #e6e8ef;
  border-radius:8px 8px 0 0;
  background:rgba(255,255,255,.97);
  scrollbar-width:thin;
}
.student-record .record-nav button {
  width:100%;
  min-height:42px;
  padding:.62rem .85rem;
  border:0;
  border-inline-start:1px solid #e6e8ef;
  border-bottom:2px solid transparent;
  color:#676d7d;
  background:transparent;
  font:inherit;
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.student-record .record-nav button:first-child { border-inline-start:0; }
.student-record .record-nav button:hover { color:#4938df; background:#f8f7ff; }
.student-record .record-nav button[aria-selected="true"] {
  color:#4938df;
  border-bottom-color:#4938df;
  background:#f8f7ff;
}
.student-tabs-ready .student-section[hidden] { display:none !important; }
.student-record-form { gap:.75rem; }
.student-section {
  min-height:0;
  padding:1rem;
  border:1px solid #e6e8ef;
  border-inline-start:3px solid #4938df;
  border-radius:8px;
  background:#fff;
}
.student-section .section-number { color:#4938df; background:#efedff; }
.student-section .parent-card,
.student-section .check-card,
.student-section .upload-card {
  border-color:#e6e8ef;
  border-radius:8px;
  background:#f8f9fc;
}
.student-section .parent-card { border-top:2px solid #4938df; }
.student-section .parent-card h3 { border-color:#e6e8ef; color:#16182d; }
.student-section-empty { margin:0 0 .75rem; }
.student-section .upload-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.student-section .upload-card {
  min-width:0;
  min-height:118px;
}
.student-section .upload-card input[type="file"] {
  width:100%;
  min-width:0;
  padding:.28rem;
  overflow:hidden;
  color:#7b8192;
  background:#fff;
}
.student-section input[type="file"]::file-selector-button {
  margin-inline-end:.55rem;
  padding:.48rem .65rem;
  border:1px solid #d7d2ff;
  border-radius:7px;
  color:#4938df;
  background:#efedff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.student-section input[type="file"]::file-selector-button:hover { background:#e4e0ff; }
.student-record .record-actions {
  margin:0 -1rem;
  padding:.72rem 1rem;
  border-color:#e6e8ef;
  background:rgba(255,255,255,.97);
}
.student-inline-empty,
.student-onboarding-strip {
  border-color:#dfe2eb;
  border-radius:8px;
  color:#7b8192;
  background:#f8f9fc;
}
.student-empty-icon {
  border-color:#d7d2ff;
  border-radius:8px;
  color:#4938df;
  background:#efedff;
}
.student-detail-empty {
  display:flex;
  min-height:520px;
  max-width:620px;
  margin:auto;
  padding:2rem;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
.student-detail-empty .student-empty-icon { width:52px; height:52px; margin-bottom:.85rem; }
.student-detail-empty .student-empty-icon svg { width:26px; height:26px; }
.student-detail-empty h1 { margin:.28rem 0 .5rem; color:#16182d; font-size:1.45rem; }
.student-detail-empty p { max-width:52ch; margin:0 0 1.1rem; color:#7b8192; line-height:1.75; }
.student-first-empty .student-empty-icon { color:#2faf67; border-color:#ccefd9; background:#ecfbf1; }

@media (min-width:901px) {
  .student-picker:not([open]) > .student-picker-body { display:flex !important; }
}

@media (max-width:1100px) and (min-width:901px) {
  .student-workspace { grid-template-columns:minmax(270px,290px) minmax(0,1fr); }
  .student-record .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .student-record .summary-strip article:nth-child(odd) { border-inline-start:0; }
  .student-record .summary-strip article:nth-child(-n+2) { border-bottom:1px solid #e6e8ef; }
}

@media (max-width:900px) {
  .student-workspace { grid-template-columns:1fr; gap:.75rem; }
  .student-navigator {
    position:static;
    max-height:none;
    padding:.8rem;
  }
  .student-picker > summary {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.08rem .6rem;
    padding:.7rem .75rem;
    border:1px solid #e6e8ef;
    border-radius:8px;
    color:#16182d;
    background:#f8f9fc;
    cursor:pointer;
  }
  .student-picker-label { color:#7b8192; font-size:.74rem; font-weight:600; }
  .student-picker > summary strong { grid-column:1; font-size:.9rem; }
  .student-picker-chevron {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    color:#4938df;
    font-size:1.1rem;
    transition:transform .18s ease;
  }
  .student-picker[open] .student-picker-chevron { transform:rotate(180deg); }
  .student-picker[open] > summary { border-color:#aaa2ef; border-radius:8px 8px 0 0; }
  .student-picker-body {
    padding:.7rem .15rem 0;
    border-top:0;
  }
  .student-navigator .student-list {
    max-height:270px;
    min-height:0;
  }
  .student-record { padding:.85rem; }
  .student-record .record-nav { top:64px; }
  .student-record .record-actions { margin:0 -.85rem; padding:.68rem .85rem; }
  .student-detail-empty { min-height:390px; padding:1.25rem; }
}

@media (max-width:560px) {
  .student-navigator .panel-head { align-items:center; }
  .student-navigator .panel-title-block p { font-size:.72rem; }
  .student-record-header { align-items:flex-start; flex-wrap:nowrap; }
  .student-record-header .portrait { width:54px; height:54px; }
  .student-record-identity h1 { font-size:1.2rem; }
  .student-record-identity p { font-size:.8rem; }
  .student-record .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .student-record .summary-strip article { padding:.62rem .7rem; }
  .student-record .summary-strip article:nth-child(odd) { border-inline-start:0; }
  .student-record .summary-strip article:nth-child(-n+2) { border-bottom:1px solid #e6e8ef; }
  .student-record .record-nav { margin-inline:-.1rem; }
  .student-section { padding:.8rem; }
  .student-section .field-grid,
  .student-section .parent-columns,
  .student-section .consent-grid,
  .student-section .upload-grid { grid-template-columns:1fr; }
  .student-section .span-2 { grid-column:auto; }
  .student-record .record-actions { display:grid; grid-template-columns:1fr; }
  .student-record .record-actions > * { width:100%; }
  .student-archive-box { align-items:stretch; flex-direction:column; }
  .student-archive-box .danger-button { width:100%; }
}

/* Academic operations workspace */
.academics-page { --academic-ink:#17182b; --academic-muted:#73798c; --academic-line:#e4e6ee; --academic-soft:#f8f9fc; --academic-accent:#4d3ce6; display:grid; gap:.85rem; color:var(--academic-ink); }
.academics-page .panel,.academics-page .subpanel { border-color:var(--academic-line); border-radius:9px; box-shadow:0 5px 18px rgba(31,35,58,.035); }
.academics-page .workspace-hero { min-height:0; padding:1rem 1.1rem; border-inline-start:3px solid var(--academic-accent); background:linear-gradient(110deg,#fff 30%,#f5f3ff); }
.academics-page .workspace-hero h1 { margin:.12rem 0; font-size:1.42rem; }
.academics-page .workspace-hero p { margin:.2rem 0 0; color:var(--academic-muted); }
.academics-page .year-picker { min-width:210px; }
.academics-page .academic-kpis { gap:.65rem; }
.academics-page .academic-kpis article { min-height:76px; padding:.75rem .85rem; border-color:var(--academic-line); border-radius:8px; background:#fff; }
.academics-page .academic-kpis article svg { width:19px; height:19px; color:var(--academic-accent); }
.academics-page .academic-kpis strong { font-size:1.25rem; }
.academics-page > .academic-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:0; overflow:hidden; border:1px solid var(--academic-line); border-radius:9px; background:#fff; }
.academics-page > .academic-nav .academic-nav-group { display:grid; grid-template-rows:auto 1fr; border-inline-start:1px solid var(--academic-line); }
.academics-page > .academic-nav .academic-nav-group:first-child { border-inline-start:0; }
.academics-page > .academic-nav .academic-nav-group > span { padding:.38rem .65rem; color:#898e9e; background:var(--academic-soft); font-size:.68rem; font-weight:750; }
.academics-page > .academic-nav .academic-nav-group > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.academics-page > .academic-nav a { display:grid; place-items:center; min-height:52px; padding:.55rem; border:0; border-inline-start:1px solid var(--academic-line); border-radius:0; color:#5d6375; font-size:.8rem; font-weight:750; text-align:center; }
.academics-page > .academic-nav a:first-of-type { border-inline-start:0; }
.academics-page > .academic-nav a.active,.academics-page > .academic-nav a[aria-current="page"] { color:var(--academic-accent); background:#f0eeff; box-shadow:inset 0 -3px var(--academic-accent); }
.academics-page .academic-filter { align-items:end; gap:.65rem; padding:.75rem; border:1px solid var(--academic-line); border-radius:9px; background:#fff; }
.academics-page .academic-filter label { min-width:150px; flex:1 1 160px; }
.academics-page .academic-filter select,.academics-page .academic-filter input { min-height:39px; }
.academics-page .academic-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:.85rem; align-items:start; }
.academics-page .academic-layout > .panel { padding:.9rem; }
.academics-page .classroom-card-grid { max-height:390px; overflow:auto; padding-inline-end:.2rem; }
.academics-page .classroom-card { border-color:var(--academic-line); border-radius:8px; background:var(--academic-soft); }
.academics-page .classroom-card.active { border-color:#a79ff5; color:var(--academic-accent); background:#f1efff; }
.academics-page .academic-class-editor { position:sticky; top:76px; }
.academics-page .academic-guide,.academics-page .current-year-guide { padding:.85rem 1rem; border:1px solid #dcd8ff; border-inline-start:3px solid var(--academic-accent); border-radius:9px; background:#f8f7ff; }
.academics-page .academic-advanced { padding:0; overflow:hidden; }
.academics-page .academic-advanced > summary { display:grid; gap:.12rem; padding:.85rem 1rem; color:var(--academic-muted); cursor:pointer; list-style:none; }
.academics-page .academic-advanced > summary::-webkit-details-marker { display:none; }
.academics-page .academic-advanced > summary strong { color:var(--academic-ink); }
.academics-page .academic-advanced[open] > summary { border-bottom:1px solid var(--academic-line); background:var(--academic-soft); }
.academics-page .academic-advanced > .panel-head,.academics-page .academic-advanced > .age-rule-layout { margin:.9rem; }
.academics-page .distribution-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; align-items:start; }
.academics-page .distribution-grid .call-sheet { grid-column:1 / -1; }
.academics-page .transfer-list { max-height:420px; overflow:auto; }
.academics-page .transfer-card { border-color:var(--academic-line); border-radius:8px; background:var(--academic-soft); }
.academics-page .age-exception-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.academics-page .age-exception-card > div,.academics-page .age-exception-card > button { grid-column:1 / -1; }
.academics-page .evaluation-mode-nav { width:max-content; min-width:320px; grid-template-columns:repeat(2,minmax(150px,1fr)) !important; }
.academics-page .evaluation-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr); gap:.85rem; align-items:start; }
.academics-page .mastery-row,.academics-page .evaluation-domain-group,.academics-page .evaluation-unit-card { border-color:var(--academic-line); border-radius:8px; }
.academics-page .student-evaluation-file { max-width:1080px; width:100%; margin-inline:auto; }
.academics-page .academic-empty-panel { display:grid; justify-items:center; align-content:center; min-height:270px; padding:2rem; border:1px dashed #d7d9e3; border-radius:9px; color:var(--academic-muted); background:var(--academic-soft); text-align:center; }
.academics-page .academic-empty-panel h2 { margin:.65rem 0 .25rem; color:var(--academic-ink); }
.academics-page .academic-empty-panel p { max-width:52ch; margin:0 0 1rem; line-height:1.7; }
.academics-page .academic-empty-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #d7d2ff; border-radius:10px; color:var(--academic-accent); background:#efedff; font-size:1.45rem; }
.academics-page .no-year { min-height:400px; }
.academics-page .year-end-table,.academics-page .table-wrap { overflow:auto; }
.academics-page .closure-history { max-height:440px; overflow:auto; }

@media (max-width:900px) {
  .academics-page > .academic-nav { grid-template-columns:1fr; }
  .academics-page > .academic-nav .academic-nav-group { border-inline-start:0; border-top:1px solid var(--academic-line); }
  .academics-page > .academic-nav .academic-nav-group:first-child { border-top:0; }
  .academics-page > .academic-nav .academic-nav-group > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .academics-page > .academic-nav a { border-bottom:1px solid var(--academic-line); }
  .academics-page .academic-layout,.academics-page .evaluation-layout,.academics-page .distribution-grid { grid-template-columns:1fr; }
  .academics-page .distribution-grid .call-sheet { grid-column:auto; }
  .academics-page .academic-class-editor { position:static; }
  .academics-page .age-rule-layout { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .academics-page { gap:.6rem; }
  .academics-page .workspace-hero { padding:.75rem; }
  .academics-page .workspace-hero h1 { font-size:1.15rem; }
  .academics-page > .academic-nav a { min-height:46px; padding:.4rem; font-size:.74rem; }
  .academics-page .academic-filter { display:grid; grid-template-columns:1fr; }
  .academics-page .academic-filter label,.academics-page .academic-filter button { width:100%; min-width:0; }
  .academics-page .age-exception-card { grid-template-columns:1fr; }
  .academics-page .age-exception-card > * { grid-column:auto; }
  .academics-page .evaluation-mode-nav { width:100%; min-width:0; }
}

@media print {
  .dashboard-grid .center-panel .notification-list,
  .role-dashboard-grid .classroom-card-grid,
  .role-dashboard-grid .dashboard-student-list,
  .role-dashboard-grid .financial-table,
  .role-dashboard-grid .notification-list {
    max-height:none;
    overflow:visible;
  }
}

/* 2026 quality pass: calm, high-clarity RTL operations workspace */
:root {
  --bg: #f4f7f8;
  --panel: #ffffff;
  --panel-soft: #f7faf9;
  --border: #d9e3e5;
  --text: #172b3a;
  --muted: #657786;
  --primary: #087f7b;
  --primary-2: #116b86;
  --sidebar: #112a46;
  --sidebar-2: #0a2038;
  --success: #16795f;
  --warning: #b66a10;
  --danger: #ba3c45;
  --radius: 14px;
  --shadow: 0 18px 45px rgba(23, 43, 58, .10);
  --soft-shadow: 0 7px 22px rgba(23, 43, 58, .07);
}

body.app-body {
  background: radial-gradient(circle at 100% 0, rgba(21, 127, 123, .07), transparent 30rem), linear-gradient(130deg, #f8faf9 0%, var(--bg) 62%, #eef4f4 100%);
  line-height: 1.55;
}
body { text-rendering: optimizeLegibility; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(8, 127, 123, .44) !important; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: -4rem; right: 1rem; padding: .65rem 1rem; border-radius: 0 0 10px 10px; background: #fff; color: var(--sidebar); box-shadow: var(--shadow); font-weight: 800; }
.skip-link:focus { top: 0; }
input, select, textarea { min-height: 45px; border-radius: 10px; border-color: #cfdcdf; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
input:hover, select:hover, textarea:hover { border-color: #aebfc3; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 127, 123, .12); }
input:invalid:not(:placeholder-shown) { border-color: #c74b53; background: #fff9f9; }

.sidebar { padding: 1rem; border-left: 1px solid rgba(255,255,255,.08); background: linear-gradient(165deg, var(--sidebar) 0%, var(--sidebar-2) 70%); }
.sidebar::before { content: ""; position: absolute; width: 15rem; height: 15rem; top: -8rem; left: -8rem; border: 1px solid rgba(132, 208, 198, .16); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(132,208,198,.025), 0 0 0 4rem rgba(132,208,198,.02); pointer-events: none; }
.sidebar > * { position: relative; }
.brand-card { padding: 1rem; border-radius: 12px; border-color: rgba(255,255,255,.13); box-shadow: none; background: rgba(255,255,255,.075); }
.brand-logo { width: 48px; height: 48px; border-radius: 11px; background: #e6b75b; color: #112a46; }
.nav-item { position: relative; min-height: 48px; border: 0; border-radius: 9px; box-shadow: none; color: rgba(245,250,252,.78); font-weight: 500; }
.nav-item::before { content: ""; position: absolute; right: 0; height: 22px; width: 3px; border-radius: 3px; background: transparent; }
.nav-item.active, .nav-item:hover { transform: none; background: rgba(126, 204, 193, .13); color: #fff; }
.nav-item.active::before { background: #e8bd69; }
.nav-icon { width: 29px; height: 29px; border-radius: 8px; background: rgba(255,255,255,.09); }
.nav-item.active .nav-icon { color: #082b3f; background: #d9f0ea; }
.support-button { border-radius: 10px; box-shadow: none; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }

.topbar { min-height: 76px; padding: .9rem 1.75rem; background: rgba(248,250,249,.93); border-bottom-color: rgba(208,220,220,.9); backdrop-filter: blur(18px); }
.search-bar { max-width: 620px; justify-self: stretch; border-radius: 10px; border-color: #d3dfdf; background: #fff; }
.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,127,123,.10); }
.search-bar button { background: #e7f3f1; color: #075e60; border-radius: 8px; }
.tool-icon, .profile-pill { border-radius: 10px; box-shadow: none; border-color: #d6e1e1; }
.tool-icon:hover, .tool-icon[aria-expanded=true], .profile-pill:hover, .profile-pill[aria-expanded=true] { border-color: rgba(8,127,123,.5); background: #fbfefd; }
.avatar { background: #dceeea; color: #075d60; }
.page-wrap { max-width: 1740px; width: 100%; margin: 0 auto; padding: 1.6rem 2rem 2.5rem; }
.page-header { position: relative; padding: .25rem 0 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #dbe5e4; }
.page-header h1, .home-hero-copy h1 { color: #112d47; font-size: clamp(1.55rem, 2.3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; }
.page-header .eyebrow, .eyebrow { color: #08736f; letter-spacing: .025em; }
.muted { color: var(--muted) !important; }

.panel, .kpi-card, .home-hero-copy, .home-quick-actions a, .home-start-strip { border-radius: var(--radius); border-color: #d9e4e3; box-shadow: var(--soft-shadow); }
.panel { padding: 1.2rem; }
.panel-head { padding-bottom: .8rem; border-bottom: 1px solid #e4eceb; }
.panel-head h2 { font-size: 1.12rem; color: #17354a; }
.primary-button { border-radius: 9px; background: #087f7b; box-shadow: 0 8px 17px rgba(8,127,123,.18); font-weight: 800; }
.primary-button:hover { background: #056d6a; }
.secondary-button, .ghost-button { border-radius: 9px; border-color: #cad9d8; background: #fff; color: #164354; font-weight: 700; }
.secondary-button:hover, .ghost-button:hover { background: #f1f8f6; border-color: #79aaa5; }
.danger-action { background: #b23b45; }
.status-pill, .chip { border-radius: 7px; font-weight: 700; }
.status-pill.success { background: #e7f5ed; color: #126b53; }.status-pill.warning { background: #fff3df; color: #945307; }.status-pill.danger { background: #fdeced; color: #a6323d; }

.home-hero-copy { min-height: 205px; padding: 1.7rem; background: radial-gradient(circle at 10% 12%, rgba(231,183,91,.22), transparent 21%), radial-gradient(circle at 87% 90%, rgba(8,127,123,.13), transparent 32%), #fff; }
.home-hero-copy p { font-size: 1rem; max-width: 62ch; }
.home-quick-actions { gap: .7rem; }
.home-quick-actions a { min-height: 205px; border-top: 3px solid #d9ebe7; }
.home-quick-actions a:hover { transform: translateY(-2px); border-color: #79aaa5; }
.home-quick-actions span, .kpi-icon { border-radius: 10px; background: #e6f3f1; color: #087f7b; }
.home-start-strip { border-right: 4px solid #e3b75b; background: #fffdf8; }
.hero-alert { border-radius: 12px; background: #a93d45; box-shadow: var(--soft-shadow); }
.kpi-grid { gap: .85rem; }
.kpi-card { position: relative; padding: 1.15rem; overflow: hidden; }
.kpi-card::after { content: ""; position:absolute; width:70px; height:3px; bottom:0; right:1.15rem; background:#83c5bc; }
.kpi-card strong { font-variant-numeric: tabular-nums; color: #15374a; }
.kpi-icon { width: 58px; height: 58px; font-size: 1.35rem; }

.record-section, .subpanel, .soft-card, .compact-cards article, .status-cards article, .mini-stats article, .doc-card, .mini-card { border-radius: 12px; border-color: #dce6e5; }
.record-section { box-shadow: 0 4px 15px rgba(23,43,58,.035); }
.record-nav, .academic-nav, .finance-nav { border-radius: 10px; box-shadow: 0 7px 18px rgba(23,43,58,.06); }
.record-nav a, .academic-nav a { border-radius: 7px; }
.record-nav a:hover, .academic-nav a.active { color: #075e60; background: #e8f4f1; }
.list-card, .notification-item, .global-search-result, .data-format-card { border-radius: 10px; border-color: #dce6e5; }
.list-card:hover, .list-card.active, .global-search-result:hover { border-color: #79aaa5; box-shadow: 0 8px 18px rgba(23,43,58,.08); }
.empty-panel { min-height: 280px; border-radius: var(--radius); border-color: #b8ceca; background: repeating-linear-gradient(-45deg, #fbfdfc, #fbfdfc 12px, #f7faf9 12px, #f7faf9 24px); }
.empty-panel::before { content: "◇"; display:grid; place-items:center; width:48px; height:48px; margin:auto; border:1px solid #aacac4; border-radius:50%; color:#087f7b; font-size:1.4rem; }
.app-message { border-radius: 10px; box-shadow: 0 4px 12px rgba(23,43,58,.05); }

.financial-table, .table-wrap, .year-end-table-wrap { scrollbar-color: #80aaa5 #eaf1f0; scrollbar-width: thin; }
table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
th { color: #41606b; background: #f1f7f6; font-size: .86rem; letter-spacing: .015em; }
tr { transition: background .15s ease; } tbody tr:hover { background: #f4faf8; }
.financial-row:not(.head):hover, .eval-row:not(.head):hover { background: #f4faf8; }
.data-exchange, .search-help-panel { border-radius: 12px; border-color: #b9d7d2; background: #f9fcfb; }
.data-exchange-icon, .search-result-icon { border-radius: 9px; background: #e2f2ef; color: #087f7b; }
.search-category-filters a { border-radius: 8px; }.search-category-filters a.active { border-color: #65a8a0; background: #e8f4f1; color: #075e60; }

.login-body { padding: 1.25rem; background: linear-gradient(135deg, #0c2944 0%, #123b54 48%, #0b6f70 130%); }
.login-layout { width: min(100%, 1030px); min-height: min(640px, calc(100vh - 2.5rem)); display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 32px 90px rgba(0,16,31,.32); }
.login-welcome { display: grid; align-content: center; gap: 1.05rem; padding: clamp(2rem, 6vw, 5rem); color: #f7fbfb; background: radial-gradient(circle at 80% 15%, rgba(229,183,91,.36), transparent 20%), radial-gradient(circle at 20% 82%, rgba(89,196,182,.18), transparent 33%), #112f49; }
.login-welcome-mark { display:grid; place-items:center; width:58px; height:58px; border-radius:12px; background:#e6b75b; color:#14334c; font-size:1.7rem; }.login-welcome .eyebrow{ color:#a8ddd4; }.login-welcome h1{ margin:0; max-width:12ch; font-size:clamp(2rem,4vw,3.15rem); line-height:1.22; }.login-welcome p{ max-width:40ch; margin:0; color:#c9d9de; line-height:1.9; }.login-welcome-points{ display:grid; gap:.6rem; margin-top:.7rem; color:#e3eeee; font-weight:700; }
.login-card { width: 100%; align-content: center; padding: clamp(2rem, 5vw, 4.5rem); border: 0; border-radius: 0; box-shadow: none; }.login-brand > span { border-radius: 10px; background: #e2f2ef; color: #087f7b; }.login-heading h1 { color:#17354a; font-size:1.75rem; }.login-card .primary-button { margin-top:.35rem; min-height:48px; }

@media (max-width: 900px) { .login-layout { max-width: 600px; grid-template-columns: 1fr; min-height: auto; }.login-welcome { display:none; }.login-card { padding: clamp(2rem, 8vw, 3.5rem); border-radius: 18px; }.page-wrap { padding-inline: 1.15rem; } }
@media (max-width: 720px) { :root{ --radius:12px; }.topbar { padding-inline:.8rem; min-height:64px; }.page-wrap { padding: 1rem .8rem 2rem; }.home-hero-copy { padding:1.15rem; }.home-quick-actions a { min-height:122px; }.kpi-card { padding:1rem; }.panel { padding: .95rem; }.page-header { align-items:start; }.login-body { padding:.75rem; }.login-layout,.login-card { border-radius:14px; }.login-card { padding:2rem 1.35rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media print { .panel, .kpi-card, .home-hero-copy, .home-quick-actions a, .home-start-strip { box-shadow: none !important; } }

/* Institutional editorial reset — deliberately quiet, dense, and dependable. */
:root {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --panel-soft: #f2f4f1;
  --border: #d8ddda;
  --text: #1e2933;
  --muted: #62707a;
  --primary: #176b63;
  --primary-dark: #11554f;
  --clay: #a9604c;
  --sidebar: #223b39;
  --sidebar-2: #1b302f;
  --success: #28725c;
  --warning: #95621f;
  --danger: #a84143;
  --radius: 6px;
  --shadow: 0 8px 22px rgba(30, 41, 51, .055);
  --soft-shadow: 0 2px 7px rgba(30, 41, 51, .045);
}

body.app-body { background: var(--bg); color: var(--text); }
body { letter-spacing: 0; }
input, select, textarea { min-height: 44px; border: 1px solid #cbd3d0; border-radius: 5px; padding: .7rem .8rem; color: var(--text); }
input:invalid, input:invalid:not(:placeholder-shown) { border-color: #cbd3d0; background: #fff; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"], .field-error input, .field-error textarea { border-color: var(--danger); background: #fffafa; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23,107,99,.13); }
:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px; }

.app-shell { grid-template-columns: 268px minmax(0, 1fr); }
.sidebar { gap: 1rem; padding: 1.25rem .75rem; border: 0; background: var(--sidebar); box-shadow: none; }
.sidebar::before { display: none; }
.brand-card { gap: .7rem; padding: .55rem .7rem 1.25rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0; background: transparent; }
.brand-logo { width: 41px; height: 41px; border-radius: 4px; background: #e8e4d9; color: var(--sidebar); font-size: 1.15rem; }
.brand-text strong { color: #fff; font-size: .98rem; }
.brand-text span { color: #b9c6c3; font-size: .78rem; }
.sidebar-nav { gap: .15rem; }
.nav-item { min-height: 42px; gap: .7rem; padding: .65rem .75rem; border-radius: 3px; color: #d5dfdc; font-size: .92rem; }
.nav-icon { width: 24px; height: 24px; border-radius: 0; background: transparent; color: #bbcfca; font-size: .88rem; }
.nav-item::before { right: -.75rem; width: 3px; height: 28px; border-radius: 0; }
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; font-weight: 700; }
.nav-item.active::before { background: #d09a72; }
.nav-item.active .nav-icon { background: transparent; color: #e0b18a; }
.support-button { justify-content: flex-start; padding: .7rem .75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: transparent; color: #d5dfdc; font-size: .86rem; }
.support-button .nav-icon { background: transparent; }

.topbar { min-height: 67px; grid-template-columns: auto auto minmax(240px, 520px); gap: .65rem; padding: .7rem 1.75rem; background: #fff; border-bottom: 1px solid var(--border); backdrop-filter: none; }
.profile-pill { gap: .6rem; padding: .4rem .55rem; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; }
.profile-pill:hover, .profile-pill[aria-expanded="true"] { border-color: var(--border); background: #f6f7f5; box-shadow: none; }
.profile-meta strong { font-size: .88rem; }.profile-meta span { font-size: .76rem; }.avatar { width: 35px; height: 35px; background: #e4ece8; color: var(--primary); }
.tool-icon { width: 36px; height: 36px; border: 0; border-radius: 3px; background: transparent; color: #3d4e55; }.tool-icon:hover, .tool-icon[aria-expanded="true"] { background: #f0f3f0; border: 0; }.badge { top: -2px; left: -2px; background: var(--clay); }
.search-bar { height: 39px; padding: 0 .2rem .0rem .65rem; border-radius: 3px; border-color: #d5dcda; box-shadow: none; background: #fbfcfa; }.search-bar input { min-height: 35px; padding: .35rem .4rem; font-size: .86rem; }.search-bar button { width: 32px; height: 31px; padding: 0; border-radius: 2px; background: transparent; color: var(--primary); }.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(23,107,99,.1); }
.topbar-dropdown { border-radius: 4px; border-color: #d5dcda; box-shadow: 0 12px 25px rgba(30,41,51,.12); }

.page-wrap { max-width: 1600px; padding: 1.55rem 2rem 3rem; }
.page-header { display: flex; align-items: flex-end; padding: 0 0 1.1rem; margin: 0 0 1.25rem; border-bottom: 2px solid #d9dfdc; }.page-header::after { content: ""; position: absolute; right: 0; bottom: -2px; width: 72px; height: 2px; background: var(--primary); }
.page-header h1, .home-hero-copy h1 { color: var(--text); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.35; letter-spacing: -.015em; }.page-header .eyebrow, .eyebrow { color: var(--clay); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.muted { color: var(--muted) !important; }

.panel, .kpi-card, .home-hero-copy, .home-quick-actions a, .home-start-strip, .subpanel { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }.panel { padding: 1.15rem; }.panel-head { margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e3e7e4; }.panel-head h1, .panel-head h2 { color: var(--text); font-size: 1.05rem; }.panel-head h3 { font-size: .95rem; }
.primary-button { min-height: 42px; padding: .65rem 1rem; border-radius: 4px; background: var(--primary); box-shadow: none; font-weight: 700; }.primary-button:hover { background: var(--primary-dark); transform: none; }.secondary-button, .ghost-button { min-height: 40px; border: 1px solid #bfcac6; border-radius: 4px; background: #fff; color: #30434a; box-shadow: none; }.secondary-button:hover, .ghost-button:hover { border-color: var(--primary); background: #f3f7f5; color: var(--primary); }
.danger-button, .danger-action { border-radius: 4px; background: var(--danger); box-shadow: none; }

.home-hero { gap: 1rem; }.home-hero-copy { min-height: 174px; padding: 1.5rem; border-right: 4px solid var(--primary); background: #fff; }.home-hero-copy p { max-width: 62ch; font-size: .94rem; }.home-quick-actions { gap: .55rem; }.home-quick-actions a { min-height: 174px; padding: 1rem; border-top: 0; background: #fff; }.home-quick-actions a:hover { transform: none; border-color: #9bb8b1; box-shadow: inset 0 -3px 0 var(--primary); }.home-quick-actions span, .kpi-icon { width: 42px; height: 42px; border-radius: 3px; background: #eaf1ee; color: var(--primary); }.home-quick-actions a:nth-child(2) span, .home-quick-actions a:nth-child(3) span { background: #f2ece5; color: var(--clay); }.home-start-strip { border-right: 3px solid var(--clay); border-radius: 4px; background: #fffdfa; }.hero-alert { border-radius: 4px; background: var(--danger); box-shadow: none; }
.kpi-grid { gap: .7rem; }.kpi-card { gap: .8rem; padding: 1rem; background: #fff; }.kpi-card::after { display: none; }.kpi-card strong { color: var(--text); font-size: 1.45rem; }.kpi-icon { flex: none; font-size: 1.1rem; }.kpi-card:nth-child(2n) .kpi-icon, .kpi-card:nth-child(3n) .kpi-icon, .kpi-card:nth-child(4n) .kpi-icon { background: #f2ece5; color: var(--clay); }

.record-section, .soft-card, .compact-cards article, .status-cards article, .mini-stats article, .doc-card, .mini-card, .list-card, .notification-item, .global-search-result, .data-format-card { border-color: var(--border); border-radius: 5px; box-shadow: none; }.record-section { border-right: 2px solid #cedbd6; }.record-nav, .academic-nav, .finance-nav { gap: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; border-bottom: 1px solid var(--border); }.record-nav a, .academic-nav a, .finance-nav a { margin-bottom: -1px; padding: .72rem .9rem; border-radius: 0; border-bottom: 2px solid transparent; }.record-nav a:hover, .academic-nav a.active, .finance-nav a.active { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }
.status-pill, .chip { border-radius: 3px; padding: .35rem .55rem; font-size: .8rem; }.status-pill.success, .chip.active { background: #e8f1ec; color: #235f4e; }.status-pill.warning { background: #f7f0e1; color: #80591e; }.status-pill.danger { background: #fae9e8; color: #913b3e; }
.empty-panel { min-height: 220px; border: 1px dashed #b8c5c0; border-radius: 5px; background: #fbfcfa; }.empty-panel::before { width: 40px; height: 40px; border-radius: 50%; border-color: #bdcec8; color: var(--primary); }.app-message { border-radius: 4px; box-shadow: none; }
th { background: #eef2ef; color: #405159; font-size: .8rem; } tbody tr:hover { background: #f5f8f5; }.financial-row:not(.head):hover, .eval-row:not(.head):hover { background: #f5f8f5; }
.class-capacity-badge, .attendance-date-card { border-radius: 4px; border-color: #b9cbc4; background: #edf5f1; color: var(--primary); }.current-year-guide, .year-source-banner { border-radius: 4px; border-color: #bdcec8; background: #f4f8f5; }

/* Login: a paper-and-ink credential screen, not a marketing split hero. */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 2rem; background: #eeeee9; }
.login-layout { width: min(100%, 1000px); min-height: min(590px, calc(100vh - 4rem)); grid-template-columns: minmax(330px, .88fr) minmax(390px, 1.12fr); border: 1px solid #d4dad6; border-radius: 0; background: #fff; box-shadow: 0 16px 42px rgba(30,41,51,.09); }
.login-welcome { position: relative; align-content: center; gap: .8rem; padding: clamp(2rem, 5vw, 4.2rem); color: var(--text); background: #e8ece7; overflow: hidden; }.login-welcome::after { content: ""; position: absolute; inset: 1.5rem; border: 1px solid rgba(23,107,99,.18); pointer-events: none; }.login-welcome > * { position: relative; z-index: 1; }.login-welcome-rule { width: 46px; height: 3px; background: var(--clay); }.login-welcome .eyebrow { color: var(--primary); }.login-welcome h1 { max-width: 13ch; margin: .15rem 0; color: var(--text); font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.32; }.login-welcome p { margin: 0; color: #526067; line-height: 1.9; }.login-welcome-note { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(30,41,51,.16); color: #526067; font-size: .85rem; }
.login-card { align-content: center; padding: clamp(2.25rem, 6vw, 5.2rem); border: 0; border-radius: 0; box-shadow: none; }.login-brand { gap: .65rem; margin-bottom: 2.5rem; }.login-brand > span { width: 40px; height: 40px; border-radius: 3px; background: #e8f0ec; color: var(--primary); font-size: 1rem; }.login-brand strong { font-size: .98rem; color: var(--text); }.login-brand small { font-size: .76rem; }.login-heading { margin-bottom: 1.6rem; }.login-heading h1 { margin: .25rem 0; color: var(--text); font-size: 1.6rem; }.login-heading p { max-width: 34ch; font-size: .9rem; line-height: 1.75; }.field-stack { gap: 1.1rem; }.field-stack label { gap: .4rem; }.field-stack label > span { color: #384950; font-size: .86rem; font-weight: 700; }.login-card .primary-button { width: 100%; min-height: 46px; margin-top: .25rem; }.login-error { border-right: 3px solid var(--danger); border-radius: 0; background: #fff8f7; color: #8e363a; }

@media (max-width: 1100px) { .app-shell { grid-template-columns: 244px minmax(0, 1fr); }.page-wrap { padding-inline: 1.25rem; } }
@media (max-width: 900px) { .login-body { display: block; padding: 1rem; }.login-layout { display: block; max-width: 560px; min-height: 0; margin: 0 auto; }.login-welcome { display: none; }.login-card { min-height: calc(100vh - 2rem); padding: clamp(2rem, 11vw, 4rem); }.page-wrap { padding-inline: 1rem; } }
@media (max-width: 720px) { .topbar { grid-template-columns: auto 1fr auto; padding: .55rem .8rem; }.profile-meta, .menu-chevron { display: none; }.profile-pill { border: 0; padding: .1rem; }.search-bar { grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%; }.page-wrap { padding: 1.1rem .75rem 2rem; }.page-header { align-items: flex-start; gap: .6rem; }.panel { padding: .9rem; }.kpi-grid { gap: .55rem; }.kpi-card { padding: .8rem; }.home-quick-actions a { min-height: 125px; }.login-body { padding: 0; background: #fff; }.login-layout { min-height: 100vh; border: 0; }.login-card { padding: 2.2rem 1.4rem; } }

/* Approved reference language: institutional navy, operational blue, and a quiet blue canvas. */
:root {
  --bg: #e9f2f7;
  --panel: #ffffff;
  --panel-soft: #f5f9fc;
  --border: #d8e5f0;
  --text: #1f2937;
  --muted: #61758a;
  --primary: #004aad;
  --primary-2: #0b3571;
  --primary-dark: #0b3571;
  --sidebar: #0b3571;
  --sidebar-2: #082956;
  --success: #16705b;
  --warning: #a9660b;
  --danger: #c63b3b;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(11, 53, 113, .08);
  --soft-shadow: 0 5px 14px rgba(11, 53, 113, .055);
}

body.app-body { background: var(--bg); color: var(--text); }
:focus-visible { outline: 3px solid rgba(0, 74, 173, .42) !important; outline-offset: 3px; }
input, select, textarea { border-color: #c9d8e6; border-radius: 9px; background: #fff; }
input:hover, select:hover, textarea:hover { border-color: #9fbbd6; }
input:focus, select:focus, textarea:focus { border-color: #004aad; box-shadow: 0 0 0 3px rgba(117, 187, 226, .30); }

.app-shell { grid-template-columns: 276px minmax(0, 1fr); }
.sidebar { padding: 1rem .8rem; background: linear-gradient(165deg, #0b3571 0%, #082956 100%); }
.brand-card { padding: 1rem .75rem 1.25rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: transparent; }
.brand-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; color: #0b3571; }
.brand-text strong { font-size: 1rem; }.brand-text span { color: #c7dbef; }
.sidebar-nav { gap: .28rem; }
.nav-item { min-height: 46px; padding: .68rem .75rem; border-radius: 9px; color: #dbeafa; font-size: .94rem; }
.nav-icon { width: 27px; height: 27px; border-radius: 7px; color: #c8dff3; background: rgba(255,255,255,.08); }
.nav-item::before { right: -.8rem; width: 3px; height: 27px; background: transparent; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-item.active { color: #0b3571; background: #75bbe2; font-weight: 800; }
.nav-item.active::before { background: #fff; }
.nav-item.active .nav-icon { color: #0b3571; background: rgba(255,255,255,.58); }
.support-button { justify-content: flex-start; padding: .72rem; border-radius: 9px; border-color: rgba(255,255,255,.23); background: rgba(255,255,255,.08); color: #fff; }

.topbar { min-height: 72px; grid-template-columns: auto auto minmax(260px, 560px); padding: .8rem 1.7rem; background: #fff; border-bottom-color: #d8e5f0; }
.profile-pill { border-left-color: #d8e5f0; }.profile-pill:hover, .profile-pill[aria-expanded="true"] { background: #f5f9fc; border-color: #d8e5f0; }
.avatar { background: #dcecf8; color: #0b3571; }
.tool-icon { color: #0b3571; }.tool-icon:hover, .tool-icon[aria-expanded="true"] { background: #edf6fc; }
.search-bar { border-radius: 9px; border-color: #c9d8e6; background: #f9fcff; }
.search-bar:focus-within { border-color: #75bbe2; box-shadow: 0 0 0 3px rgba(117,187,226,.25); }
.search-bar button { border-radius: 7px; background: #e7f2fa; color: #004aad; }
.topbar-dropdown { border-color: #d8e5f0; border-radius: 10px; box-shadow: var(--shadow); }

.page-wrap { max-width: 1660px; padding: 1.75rem 2rem 3rem; }
.page-header { border-bottom: 1px solid #d8e5f0; }.page-header::after { background: #004aad; height: 3px; }
.page-header h1, .home-hero-copy h1 { color: #0b3571; font-size: clamp(1.55rem, 2.2vw, 2rem); }
.eyebrow, .page-header .eyebrow { color: #004aad; }
.panel, .kpi-card, .home-hero-copy, .home-quick-actions a, .home-start-strip, .subpanel { border-color: #d8e5f0; border-radius: var(--radius); box-shadow: var(--soft-shadow); }
.panel { padding: 1.25rem; }.panel-head { border-bottom-color: #e6eef5; }.panel-head h1, .panel-head h2 { color: #0b3571; }
.primary-button { border-radius: 9px; background: linear-gradient(135deg, #0b3571, #004aad); box-shadow: 0 8px 18px rgba(0,74,173,.18); }
.primary-button:hover { background: #0b3571; }
.secondary-button, .ghost-button { border-color: #a9c7df; border-radius: 9px; color: #004aad; }
.secondary-button:hover, .ghost-button:hover { border-color: #004aad; background: #edf6fc; color: #0b3571; }

.home-hero-copy { min-height: 195px; border-right: 4px solid #004aad; background: linear-gradient(140deg, #fff 0%, #f5faff 100%); }
.home-hero-copy p { color: #61758a; }
.home-quick-actions a { min-height: 195px; border-top: 3px solid #d8e9f6; }
.home-quick-actions a:hover { border-color: #75bbe2; box-shadow: 0 10px 24px rgba(11,53,113,.10); }
.home-quick-actions span, .kpi-icon { background: #eaf4fb; color: #004aad; }
.home-action-icon svg { width: 21px; height: 21px; display: block; }
.home-quick-actions a:nth-child(2) span, .home-quick-actions a:nth-child(3) span, .kpi-card:nth-child(2n) .kpi-icon, .kpi-card:nth-child(3n) .kpi-icon, .kpi-card:nth-child(4n) .kpi-icon { background: #f1f7fc; color: #0b3571; }
.home-start-strip { border-right-color: #75bbe2; background: #f9fcff; }
.hero-alert { background: #c63b3b; }.kpi-card strong { color: #0b3571; }

.record-section, .soft-card, .compact-cards article, .status-cards article, .mini-stats article, .doc-card, .mini-card, .list-card, .notification-item, .global-search-result, .data-format-card { border-color: #d8e5f0; border-radius: 10px; }
.record-section { border-right-color: #75bbe2; }
.record-nav, .academic-nav, .finance-nav { border-bottom-color: #d8e5f0; }
.record-nav a:hover, .academic-nav a.active, .finance-nav a.active { color: #004aad; border-bottom-color: #004aad; }
.list-card:hover, .list-card.active, .global-search-result:hover { border-color: #75bbe2; box-shadow: var(--soft-shadow); }
.status-pill.success, .chip.active { background: #eaf6f1; color: #126850; }.status-pill.warning { background: #fff4df; color: #9a5e09; }.status-pill.danger { background: #fff0f0; color: #b82f2f; }
.empty-panel { border-color: #b7d0e4; background: #f9fcff; }.empty-panel::before { border-color: #9fc3df; color: #004aad; }
th { background: #eef6fb; color: #36546e; } tbody tr:hover, .financial-row:not(.head):hover, .eval-row:not(.head):hover { background: #f5faff; }
.class-capacity-badge, .attendance-date-card { border-color: #b9d4e8; background: #edf6fc; color: #004aad; }
.attendance-page-header { justify-content: flex-start; align-items: center; gap: 1.25rem; padding-block: .35rem 1.15rem; }
.attendance-header-copy { display: grid; gap: .15rem; }
.attendance-page-header .attendance-date-card { min-width: 132px; padding: .7rem .85rem; text-align: center; }
.attendance-page-header .attendance-date-card span { color: #61758a; font-size: .83rem; }
.attendance-page-header .attendance-date-card strong { display: block; margin-top: .15rem; color: #004aad; font-size: 1.1rem; direction: ltr; }

/* The manager dashboard is content-led: alerts must not stretch to match the two side stacks. */
.dashboard-grid { align-items: start; grid-auto-rows: min-content; }
.dashboard-grid > .stack, .dashboard-grid > .center-panel { align-self: start; }
.dashboard-grid .center-panel { min-height: 0; }
.dashboard-grid .notification-list { align-content: start; }

/* Keep the employee picker useful while the long staff record is being edited. */
.staff-workspace { align-items: start; }
.staff-workspace > .list-panel {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Attendance, leave, and payroll are separate tasks—not equal-height empty boxes. */
.hr-action-grid { align-items: stretch; }
.hr-action-grid > .soft-card {
  align-self: stretch;
  min-height: 470px;
  border: 1px solid #d8e5f0;
  border-top: 3px solid #75bbe2;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.hr-action-grid > .payslip-card { background: #f8fbff; border-color: #cfe0ee; }
.hr-card-heading { display: flex; align-items: center; gap: .65rem; min-height: 42px; margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e3edf5; }
.hr-card-heading > span { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 8px; background: #eaf4fb; color: #004aad; }
.hr-card-heading svg { width: 18px; height: 18px; }
.hr-action-grid > .soft-card h3 { color: #0b3571; margin: 0; font-size: 1.05rem; }
.hr-action-grid > .soft-card .field-stack { gap: .7rem; }
.hr-action-grid > .soft-card .field-stack label > span { color: #36546e; font-size: .83rem; font-weight: 700; }
.hr-action-grid > .soft-card input, .hr-action-grid > .soft-card select { min-height: 46px; }
.hr-action-grid > .soft-card .field-stack { flex: 1; display: flex; flex-direction: column; }
.hr-action-grid > .soft-card .field-stack .primary-button { margin-top: auto; }
.current-year-guide, .year-source-banner, .data-exchange, .search-help-panel { border-color: #c5dbea; background: #f7fbfe; }
.data-exchange-icon, .search-result-icon { background: #eaf4fb; color: #004aad; }
.search-category-filters a.active { border-color: #75bbe2; background: #eaf4fb; color: #004aad; }

/* Authentication has the same navy/blue identity without borrowing the app sidebar. */
.login-body { background: #e9f2f7; }
.login-layout { border-color: #c9d8e6; border-radius: 18px; box-shadow: 0 18px 44px rgba(11,53,113,.14); }
.login-welcome { color: #fff; background: linear-gradient(145deg, #0b3571 0%, #004aad 100%); }
.login-welcome::after { border-color: rgba(255,255,255,.20); }.login-welcome-rule { background: #75bbe2; }
.login-welcome .eyebrow { color: #bde0f5; }.login-welcome h1 { color: #fff; }.login-welcome p, .login-welcome-note { color: #d9eafa; }
.login-welcome-note { border-top-color: rgba(255,255,255,.25); }.login-card { background: #fff; }
.login-brand > span { background: #eaf4fb; color: #004aad; }.login-brand strong, .login-heading h1 { color: #0b3571; }.login-heading p { color: #61758a; }
.login-card .primary-button { background: linear-gradient(135deg, #0b3571, #004aad); }

@media (max-width: 1100px) { .app-shell { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .sidebar { padding: 1rem .8rem; }.brand-card { padding-top: .5rem; }
  .topbar { background: #fff; }.page-wrap { padding: 1.15rem .8rem 2.5rem; }
  .page-header h1 { font-size: 1.45rem; }.home-hero-copy, .home-quick-actions a { min-height: auto; }
  .login-body { background: #e9f2f7; }.login-layout { border-radius: 0; }.login-card { background: #fff; }
  .attendance-page-header { align-items: flex-start; gap: .85rem; }.attendance-page-header .attendance-date-card { min-width: 112px; padding: .6rem; }
  .staff-workspace > .list-panel { position: static; max-height: none; overflow: visible; }
}

/* Keep the operational workspace usable between desktop and phone breakpoints. */
@media (min-width: 1101px) {
  .home-quick-actions a { min-height: 126px; padding: .95rem; }
  .home-quick-actions { align-items: stretch; }
}

.home-start-strip {
  margin-top: 1rem;
  border-right: 4px solid #004aad;
  background: linear-gradient(90deg, #f4f9fd 0%, #ffffff 72%);
}
.home-start-strip strong { color: #0b3571; }
.home-start-strip .secondary-button { white-space: nowrap; }

@media (max-width: 900px) {
  .app-shell { display: block; min-width: 0; }
  .main-column, .page-wrap, .home-hero, .home-quick-actions, .dashboard-grid, .workspace-grid { min-width: 0; }
  .topbar { grid-template-columns: auto auto minmax(0, 1fr); }
  .search-bar { min-width: 0; max-width: none; }
  .home-quick-actions a { min-height: 102px; padding: .9rem 1rem; }
  .home-start-strip { margin-bottom: 1rem; }
  .table-shell, .table-wrap, .eval-table, .year-end-table-wrap { max-width: 100%; overflow-x: auto; }
}

/* Warm editorial operations console — final shared visual language. */
:root { --bg:#f3f0e8; --panel:#fffdf8; --panel-soft:#f6f3eb; --border:#d9d3c7; --text:#182b37; --muted:#66716f; --primary:#486b5a; --primary-dark:#315144; --primary-2:#203a4a; --sidebar:#172c3a; --sidebar-2:#112530; --success:#4f765c; --warning:#aa741c; --danger:#a84c47; --clay:#b37721; --radius:5px; --shadow:0 9px 24px rgba(29,43,47,.06); --soft-shadow:0 2px 8px rgba(29,43,47,.045); }
body.app-body { background:var(--bg); color:var(--text); } body.app-body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45; background-image:radial-gradient(rgba(32,58,74,.09) .55px,transparent .7px); background-size:8px 8px; }
:focus-visible { outline-color:var(--clay) !important; } input,select,textarea { border-color:#cbc4b7; border-radius:4px; background:#fffefb; } input:hover,select:hover,textarea:hover { border-color:#a9a493; } input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(72,107,90,.14); }
.app-shell { grid-template-columns:246px minmax(0,1fr); }.sidebar { padding:1.15rem .7rem; background:linear-gradient(160deg,var(--sidebar),var(--sidebar-2)); }.brand-card { padding:.65rem .6rem 1.15rem; }.brand-logo { background:#e8d5a7; color:var(--sidebar); border-radius:3px; }.nav-item { border-radius:3px; min-height:43px; }.nav-item.active { color:#fff; background:rgba(232,213,167,.14); }.nav-item.active::before { background:#d4a448; }.nav-item.active .nav-icon { color:#e8d5a7; }.nav-icon,.support-button { border-radius:3px; }
.topbar { min-height:64px; padding:.65rem 1.6rem; background:rgba(255,253,248,.96); border-bottom-color:var(--border); }.search-bar { border-radius:3px; background:#f8f6f0; border-color:var(--border); }.search-bar button { background:#e9eee7; color:var(--primary); border-radius:2px; }.tool-icon,.profile-pill { border-radius:3px; }.avatar { background:#e2ebe2; color:var(--primary-dark); }.page-wrap { max-width:1640px; padding:1.1rem 2rem 3rem; }
.page-header { border-bottom-color:#d4cec1; }.page-header::after { width:54px; height:3px; background:var(--clay); }.page-header h1,.home-hero-copy h1,.panel-head h1,.panel-head h2 { color:var(--text); }.eyebrow,.page-header .eyebrow { color:var(--clay); }.panel,.kpi-card,.home-hero-copy,.home-quick-actions a,.home-start-strip,.subpanel { background:var(--panel); border-color:var(--border); border-radius:var(--radius); box-shadow:none; }.panel-head { border-bottom-color:#e7e1d6; }.primary-button { border-radius:3px; background:var(--primary); box-shadow:none; }.primary-button:hover { background:var(--primary-dark); }.secondary-button,.ghost-button { border-color:#c5c0b4; border-radius:3px; color:#364c48; }.secondary-button:hover,.ghost-button:hover { border-color:var(--primary); background:#f0f4ef; color:var(--primary-dark); }.danger-button,.danger-action { background:var(--danger); border-radius:3px; }
.home-hero-copy { border-right-color:var(--primary); background:linear-gradient(135deg,#fffdf8 0%,#f6f1e5 100%); }.home-quick-actions a { border-top-color:#e6dfd1; }.home-quick-actions a:hover { border-color:#b1c3b1; box-shadow:inset 0 -3px 0 var(--primary); }.home-quick-actions span,.kpi-icon { background:#e7eee5; color:var(--primary); border-radius:3px; }.home-quick-actions a:nth-child(2) span,.home-quick-actions a:nth-child(3) span,.kpi-card:nth-child(2n) .kpi-icon,.kpi-card:nth-child(3n) .kpi-icon,.kpi-card:nth-child(4n) .kpi-icon { background:#f4ead4; color:#9b681a; }.home-start-strip { border-right-color:var(--clay); background:#fffaf0; }.hero-alert { background:var(--danger); }.kpi-card { background:#fffdf8; }.kpi-card strong { color:var(--text); }
.record-section,.soft-card,.compact-cards article,.status-cards article,.mini-stats article,.doc-card,.mini-card,.list-card,.notification-item,.global-search-result,.data-format-card { border-color:var(--border); border-radius:4px; box-shadow:none; }.record-section { border-right-color:#b8c8ba; }.record-nav,.academic-nav,.finance-nav { border-bottom-color:var(--border); }.record-nav a:hover,.academic-nav a.active,.finance-nav a.active { color:var(--primary-dark); border-bottom-color:var(--primary); }.status-pill.success,.chip.active { background:#e6eee6; color:#416b50; }.status-pill.warning { background:#f8edd8; color:#89601c; }.status-pill.danger { background:#f7e7e4; color:#93423e; } th { background:#eeeae0; color:#495858; } tbody tr:hover,.financial-row:not(.head):hover,.eval-row:not(.head):hover { background:#f7f5ef; }.empty-panel { border-color:#c9c3b6; background:#faf8f2; }.empty-panel::before { color:var(--primary); border-color:#b7c5b7; }.data-exchange,.search-help-panel,.current-year-guide,.year-source-banner { border-color:#d5d0c4; background:#faf8f2; }.data-exchange-icon,.search-result-icon { background:#e7eee5; color:var(--primary); }
.login-body { background:#e9e4d9; }.login-layout { border-radius:0; border-color:#cfc7b8; box-shadow:0 16px 38px rgba(24,43,55,.11); }.login-welcome { color:#f9f5eb; background:linear-gradient(145deg,#183441,#214b4b); }.login-welcome::after { border-color:rgba(232,213,167,.35); }.login-welcome-rule { background:#d6a84b; }.login-welcome .eyebrow { color:#efd49b; }.login-welcome h1 { color:#fffaf0; }.login-welcome p,.login-welcome-note { color:#d3dfd8; }.login-welcome-note { border-top-color:rgba(255,255,255,.2); }.login-brand > span { background:#e7eee5; color:var(--primary); }.login-brand strong,.login-heading h1 { color:var(--text); }.login-card .primary-button { background:var(--primary); }
@media (max-width:1100px) { .app-shell { grid-template-columns:1fr; } } @media (max-width:720px) { .page-wrap { padding:.9rem .75rem 2rem; }.topbar { background:#fffdf8; }.login-body { background:#fffdf8; } }

/* Palette lock: parchment, linen, deep ink, olive, copper and brick only. */
:root { --bg:#f4f0e8; --panel:#fffdf8; --panel-soft:#f7f3ea; --border:#ded6ca; --text:#17212b; --muted:#68706a; --primary:#617052; --primary-dark:#4d5b41; --primary-2:#17212b; --sidebar:#17212b; --sidebar-2:#17212b; --success:#617052; --warning:#b56b3f; --danger:#aa4a42; --clay:#b56b3f; --shadow:0 8px 20px rgba(23,33,43,.055); --soft-shadow:0 2px 6px rgba(23,33,43,.04); }
body.app-body, .login-body { background:#f4f0e8; } body.app-body::before { opacity:.28; background-image:radial-gradient(rgba(23,33,43,.1) .5px,transparent .65px); }
.sidebar { background:#17212b; }.brand-logo { background:#e7d4aa; color:#17212b; }.nav-item.active { background:rgba(231,212,170,.12); }.nav-item.active::before { background:#b56b3f; }.nav-item.active .nav-icon { color:#e7d4aa; }
.topbar { background:#fffdf8; }.search-bar { background:#f7f3ea; }.search-bar button { background:#ece9de; color:#617052; }.avatar { background:#e5e7dc; color:#4d5b41; }
.page-header { border-bottom-color:#ded6ca; }.page-header::after { background:#b56b3f; }.eyebrow,.page-header .eyebrow { color:#b56b3f; }
.panel,.kpi-card,.home-hero-copy,.home-quick-actions a,.home-start-strip,.subpanel,.soft-card,.record-section { background:#fffdf8; border-color:#ded6ca; }.home-hero-copy { background:#fffdf8; border-right-color:#617052; }.home-start-strip { background:#fff9ef; border-right-color:#b56b3f; }.home-quick-actions a { border-top-color:#e5ddd0; }.home-quick-actions span,.kpi-icon,.data-exchange-icon,.search-result-icon,.hr-card-heading > span { background:#e9ede3; color:#617052; }.home-quick-actions a:nth-child(2) span,.home-quick-actions a:nth-child(3) span,.kpi-card:nth-child(2n) .kpi-icon,.kpi-card:nth-child(3n) .kpi-icon,.kpi-card:nth-child(4n) .kpi-icon { background:#f3e6d1; color:#a65f35; }
.primary-button,.login-card .primary-button { background:#617052; }.primary-button:hover { background:#4d5b41; }.secondary-button,.ghost-button { color:#3e4c42; border-color:#cfc7ba; }.danger-button,.danger-action,.hero-alert { background:#aa4a42; }.status-pill.success,.chip.active { background:#e7ecdf; color:#4d5b41; }.status-pill.warning { background:#f5e6d5; color:#94542f; }.status-pill.danger { background:#f4e3e0; color:#8e3e39; }
th { background:#eee9df; color:#46504e; } tbody tr:hover,.financial-row:not(.head):hover,.eval-row:not(.head):hover { background:#faf7f0; }.class-capacity-badge,.attendance-date-card { border-color:#d6d0c2; background:#f2f0e8; color:#4d5b41; }.attendance-page-header .attendance-date-card strong { color:#17212b; }.current-year-guide,.year-source-banner,.data-exchange,.search-help-panel { border-color:#ded6ca; background:#faf7f0; }.search-category-filters a.active { border-color:#9aa58d; background:#e9ede3; color:#4d5b41; }
.hr-action-grid > .soft-card { border-color:#ded6ca; border-top-color:#b56b3f; background:#fffdf8; }.hr-action-grid > .payslip-card { background:#faf7f0; border-color:#ded6ca; }.hr-card-heading { border-bottom-color:#e5ddd0; }.hr-action-grid > .soft-card h3 { color:#17212b; }
.empty-panel { border-color:#cfc7ba; background:#faf7f0; }.empty-panel::before { border-color:#bbc3b1; color:#617052; }.record-nav,.academic-nav,.finance-nav { border-bottom-color:#ded6ca; }.record-nav a:hover,.academic-nav a.active,.finance-nav a.active { color:#4d5b41; border-bottom-color:#617052; }.list-card:hover,.list-card.active,.global-search-result:hover { border-color:#a9b59e; box-shadow:none; }
.login-layout { border-color:#d7cebf; box-shadow:0 14px 32px rgba(23,33,43,.10); }.login-welcome { background:#17212b; }.login-welcome::after { border-color:rgba(231,212,170,.34); }.login-welcome-rule { background:#b56b3f; }.login-welcome .eyebrow { color:#e7d4aa; }.login-welcome p,.login-welcome-note { color:#d6d8ce; }.login-brand > span { background:#e9ede3; color:#617052; }
.capacity-meter span { background:#617052; }.summary-ring,.attendance-ring,.completion-ring { background-color:#f0ece3; }.summary-ring::after,.attendance-ring::after,.completion-ring::after { background:#fffdf8; }.hero-alert.read { background:#68706a; }

/* Profile control: a compact identity block, not a floating card. */
.profile-pill {
  position: relative;
  min-width: 218px;
  min-height: 48px;
  gap: .72rem;
  padding: .35rem 0 .35rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.profile-pill::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1px;
  height: 30px;
  transform: translateY(-50%);
  background: #ded6ca;
}
.profile-pill:hover,
.profile-pill[aria-expanded="true"] {
  border-color: #ded6ca;
  background: #f7f3ea;
}
.profile-pill:focus-visible { outline-offset: 2px; }
.profile-meta { gap: .08rem; line-height: 1.25; }
.profile-meta strong { color: #17212b; font-size: .9rem; font-weight: 800; }
.profile-meta span { color: #68706a; font-size: .73rem; }
.profile-pill .avatar { width: 36px; height: 36px; font-size: .88rem; background: #e8eadf; }
.profile-pill .menu-chevron { margin-inline-start: .15rem; color: #8c9187; font-size: .9rem; transition: transform .16s ease, color .16s ease; }
.profile-pill[aria-expanded="true"] .menu-chevron { color: #617052; transform: rotate(180deg); }

/* Sidebar navigation uses one crisp line-icon family; labels remain the accessible names. */
.sidebar .nav-icon { display:grid; place-items:center; flex:none; color:#bfc8bd; background:rgba(255,255,255,.045); }
.sidebar .nav-icon svg { width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.sidebar .nav-item:hover .nav-icon { color:#e9e6dc; background:rgba(255,255,255,.09); }
.sidebar .nav-item.active .nav-icon { color:#e7d4aa; background:rgba(231,212,170,.10); }
.sidebar .support-button .nav-icon { color:#d9d8cc; background:rgba(255,255,255,.055); }
.sidebar .support-button:hover .nav-icon { color:#e7d4aa; background:rgba(231,212,170,.10); }

/* Home uses the same accessible 24px line language as navigation, never emoji glyphs. */
.home-line-icon, .kpi-icon { display:grid; place-items:center; flex:none; }
.home-line-icon svg, .kpi-icon svg { width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.home-quick-actions .home-line-icon svg { width:21px; height:21px; }
.kpi-icon svg { width:20px; height:20px; }
.panel-icon.home-line-icon { color:#617052; }
.item-icon.home-line-icon svg { width:17px; height:17px; }

/* Staff workspace: compact navigator and operational record, scoped to /staff/. */
.staff-workspace { grid-template-columns: minmax(285px, 320px) minmax(0, 1fr); gap:1.25rem; }
.staff-navigator { padding:.85rem; background:#fffdf8; }
.staff-navigator .panel-head { align-items:flex-start; margin-bottom:.8rem; }
.staff-navigator .panel-title-block h2 { font-size:1.08rem; }
.staff-navigator .panel-title-block p { font-size:.79rem; }
.staff-navigator .primary-button.small { white-space:nowrap; }
.staff-navigator .inline-tools { gap:.45rem; margin:.75rem 0; }
.staff-navigator .inline-tools input { min-height:42px; font-size:.84rem; }
.staff-navigator .inline-tools .ghost-button { min-height:42px; padding-inline:.7rem; }
.staff-navigator .staff-list { gap:.25rem; }
.staff-navigator .list-card { min-height:58px; padding:.5rem; border-color:transparent; border-radius:3px; background:transparent; }
.staff-navigator .list-card:hover { transform:none; border-color:#ded6ca; background:#faf7f0; }
.staff-navigator .list-card.active { transform:none; border-color:#c7d0bf; border-right:3px solid #617052; background:#edf1e9; box-shadow:none; }
.staff-navigator .thumb { width:34px; height:34px; }
.staff-navigator .list-copy strong { font-size:.87rem; }.staff-navigator .list-copy span { font-size:.76rem; }
.staff-navigator .dot { width:7px; height:7px; }

.staff-record { gap:1.1rem; padding:1.15rem; background:#fffdf8; }
.staff-record-header { align-items:flex-start; padding:0 0 1rem; border-bottom:1px solid #e6e8ef; }
.staff-record-identity { min-width:0; }.staff-record-identity h1 { font-size:1.55rem; line-height:1.35; }.staff-record-identity p { max-width:64ch; font-size:.9rem; }
.staff-record-actions { display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; padding-top:.2rem; }
.staff-record-header .portrait { width:72px; height:72px; margin-inline-start:.25rem; border:2px solid #fffdf8; box-shadow:none; }
.staff-record .summary-strip { margin-top:1rem; gap:0; border:1px solid #ded6ca; background:#faf7f0; }
.staff-record .summary-strip article { min-height:0; padding:.7rem .85rem; border:0; border-radius:0; border-inline-start:1px solid #ded6ca; background:transparent; }.staff-record .summary-strip article:first-child { border-inline-start:0; }
.staff-record .summary-strip span { font-size:.76rem; }.staff-record .summary-strip strong { margin-top:.2rem; color:#17212b; font-size:.98rem; }
.staff-record .record-nav { position:sticky; top:72px; margin-top:1rem; padding:0; gap:0; border:0; border-bottom:1px solid #ded6ca; border-radius:0; background:#fffdf8; backdrop-filter:none; }.staff-record .record-nav a { padding:.65rem .8rem; border-radius:0; font-size:.84rem; }.staff-record .record-nav a:hover { background:#faf7f0; color:#4d5b41; }
.staff-section { padding:1rem; border-right:3px solid #c9d3c1; border-radius:4px; }.staff-section .section-heading { margin-bottom:.85rem; }.staff-section .section-number { width:30px; height:30px; border-radius:3px; background:#e9ede3; color:#4d5b41; font-size:.82rem; }.staff-section .section-heading h2 { font-size:1rem; }.staff-section .section-heading p { font-size:.82rem; }
.staff-section .field-grid { gap:.75rem 1rem; }.staff-section .role-grid { gap:.5rem; margin-top:.85rem; }.staff-section .role-grid article { padding:.7rem; border-radius:3px; background:#faf7f0; }.staff-section .role-grid strong { font-size:.85rem; }.staff-section .role-grid span { font-size:.77rem; line-height:1.55; }
.staff-section .upload-grid { gap:.65rem; }.staff-section .upload-card { min-height:112px; padding:.75rem; border-color:#cfc7ba; border-radius:3px; background:#faf7f0; }.staff-section .required-upload { border-color:#d9b6b0; background:#fff8f6; }
.staff-record .record-actions { position:sticky; bottom:0; z-index:4; margin:0 -1.15rem; padding:.8rem 1.15rem; border-top:1px solid #ded6ca; background:rgba(255,253,248,.96); }
.staff-operations .hr-action-grid { align-items:start; gap:.75rem; }.staff-operations .hr-action-grid > .soft-card { min-height:0; padding:.9rem; border-top:2px solid #b56b3f; border-radius:4px; background:#fffdf8; }.staff-operations .hr-action-grid > .payslip-card { background:#faf7f0; border-color:#ded6ca; border-top-color:#617052; }.staff-operations .hr-card-heading { min-height:0; margin-bottom:.75rem; padding-bottom:.65rem; }.staff-operations .hr-card-heading > span { width:30px; height:30px; border-radius:3px; }.staff-operations .field-stack { gap:.6rem; }.staff-operations .field-stack label > span { font-size:.79rem; }.staff-operations input,.staff-operations select { min-height:44px; }.staff-operations .primary-button { margin-top:.15rem !important; }
.staff-history-grid { gap:.75rem; }.staff-history-panel { padding:.9rem; border-right:3px solid #c9d3c1; }.staff-history-panel > header { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.7rem; padding-bottom:.6rem; border-bottom:1px solid #e5ddd0; }.staff-history-panel h3 { margin:0; color:#17212b; font-size:.96rem; }.staff-history-panel > header span { color:#68706a; font-size:.75rem; }.staff-history-panel .timeline { gap:.55rem; }.staff-history-panel .timeline > div { padding:.55rem .65rem; border-right:2px solid #b9c7b5; background:#faf7f0; }.staff-history-panel .timeline strong { font-size:.83rem; }.staff-history-panel .timeline span { font-size:.77rem; }
.staff-archive-box { margin-top:.15rem; padding:.85rem 1rem; border-color:#ddb9b4; border-radius:4px; background:#fff8f6; }.staff-archive-box strong { color:#843f3a; }.staff-archive-box span { color:#8e5b55; font-size:.82rem; }.staff-archive-box .danger-button { border-radius:3px; }
@media (max-width:1100px) { .staff-workspace { grid-template-columns:280px minmax(0,1fr); } }
@media (max-width:720px) { .staff-workspace { display:grid; grid-template-columns:1fr; gap:.8rem; }.staff-navigator { position:static !important; max-height:none !important; }.staff-record { padding:.85rem; }.staff-record-header { flex-wrap:wrap; }.staff-record-actions { order:3; width:100%; margin:0; }.staff-record-header .portrait { order:2; }.staff-record .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.staff-record .summary-strip article:nth-child(odd) { border-inline-start:0; }.staff-record .summary-strip article:nth-child(-n+2) { border-bottom:1px solid #ded6ca; }.staff-record .record-nav { top:64px; overflow-x:auto; white-space:nowrap; }.staff-section { padding:.85rem; }.staff-section .field-grid,.staff-section .upload-grid { grid-template-columns:1fr; }.staff-section .span-2 { grid-column:auto; }.staff-record .record-actions { margin:0 -.85rem; padding:.7rem .85rem; }.staff-operations .hr-action-grid,.staff-history-grid { grid-template-columns:1fr; }.staff-archive-box { align-items:flex-start; flex-direction:column; }.staff-archive-box .danger-button { width:100%; } }
@media (max-width: 720px) {
  .profile-pill { min-width: auto; padding: .2rem; }
  .profile-pill::after { display: none; }
}

/* Staff operations are one uniform task group: content differs, component does not. */
.staff-operations .hr-action-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:stretch; }
.staff-operations .hr-action-grid > .soft-card,
.staff-operations .hr-action-grid > .payslip-card {
  min-height:390px;
  display:flex;
  flex-direction:column;
  padding:.9rem;
  border:1px solid #ded6ca;
  border-top:2px solid #b56b3f;
  border-radius:4px;
  background:#fffdf8;
  box-shadow:none;
}
.staff-operations .hr-action-grid > .soft-card .hr-card-heading,
.staff-operations .hr-action-grid > .payslip-card .hr-card-heading {
  min-height:43px;
  margin:0 0 .75rem;
  padding:0 0 .65rem;
  border-bottom:1px solid #e5ddd0;
}
.staff-operations .hr-action-grid > .soft-card .hr-card-heading > span,
.staff-operations .hr-action-grid > .payslip-card .hr-card-heading > span {
  width:30px;
  height:30px;
  border-radius:3px;
  background:#e9ede3;
  color:#617052;
}
.staff-operations .hr-action-grid > .soft-card .field-stack,
.staff-operations .hr-action-grid > .payslip-card .field-stack {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:.6rem;
}
.staff-operations .hr-action-grid > .soft-card .primary-button,
.staff-operations .hr-action-grid > .payslip-card .primary-button { margin-top:auto !important; }
@media (max-width:720px) {
  .staff-operations .hr-action-grid { grid-template-columns:1fr; }
  .staff-operations .hr-action-grid > .soft-card,
  .staff-operations .hr-action-grid > .payslip-card { min-height:0; }
}

/* Student workspace: the same calm record language, tailored to student data. */
.student-workspace { grid-template-columns:minmax(285px,320px) minmax(0,1fr); gap:1.25rem; }
.student-navigator { padding:.85rem; background:#fffdf8; }.student-navigator .panel-head { align-items:flex-start; margin-bottom:.8rem; }.student-navigator .panel-title-block h2 { font-size:1.08rem; }.student-navigator .panel-title-block p { font-size:.79rem; }.student-navigator .primary-button.small { white-space:nowrap; }
.student-navigator .inline-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; margin:.75rem 0; }.student-navigator .inline-tools select { grid-column:1 / -1; }.student-navigator .inline-tools input,.student-navigator .inline-tools select,.student-navigator .inline-tools .ghost-button { min-height:42px; font-size:.84rem; }.student-navigator .inline-tools .ghost-button { padding-inline:.7rem; }
.student-navigator .student-list { gap:.25rem; }.student-navigator .list-card { min-height:58px; padding:.5rem; border-color:transparent; border-radius:3px; background:transparent; }.student-navigator .list-card:hover { transform:none; border-color:#ded6ca; background:#faf7f0; }.student-navigator .list-card.active { transform:none; border-color:#c7d0bf; border-right:3px solid #617052; background:#edf1e9; box-shadow:none; }.student-navigator .thumb { width:34px; height:34px; }.student-navigator .list-copy strong { font-size:.87rem; }.student-navigator .list-copy span { font-size:.76rem; }.student-navigator .dot { width:7px; height:7px; }
.student-record { gap:1.1rem; padding:1.15rem; background:#fffdf8; }.student-record-header { align-items:center; padding:0 0 1rem; border-bottom:1px solid #e5ddd0; }.student-record-identity { min-width:0; }.student-record-identity h1 { font-size:1.55rem; line-height:1.35; }.student-record-identity p { max-width:64ch; font-size:.9rem; }.student-record-actions { display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; padding-top:.2rem; }.student-record-header .portrait { width:72px; height:72px; margin-inline-start:.25rem; border:2px solid #fffdf8; box-shadow:none; }
.student-record .summary-strip { gap:0; margin-top:-.25rem; border:1px solid #ded6ca; background:#faf7f0; }.student-record .summary-strip article { min-height:0; padding:.7rem .85rem; border:0; border-inline-start:1px solid #ded6ca; border-radius:0; background:transparent; }.student-record .summary-strip article:first-child { border-inline-start:0; }.student-record .summary-strip span { font-size:.76rem; }.student-record .summary-strip strong { margin-top:.2rem; color:#17212b; font-size:.98rem; }
.student-record .medical-warning { display:flex; align-items:baseline; gap:.35rem; padding:.7rem .85rem; border:1px solid #dec2a6; border-right:3px solid #b56b3f; border-radius:4px; background:#fff8ed; color:#754a2d; font-size:.86rem; }.student-record .medical-warning strong { color:#834522; }
.student-record .record-nav { position:sticky; top:72px; z-index:5; gap:0; padding:0; border:0; border-bottom:1px solid #ded6ca; border-radius:0; background:#fffdf8; backdrop-filter:none; }.student-record .record-nav a { padding:.65rem .8rem; border-radius:0; font-size:.84rem; }.student-record .record-nav a:hover { background:#faf7f0; color:#4d5b41; }
.student-section { padding:1rem; border-right:3px solid #c9d3c1; border-radius:4px; }.student-section .section-heading { margin-bottom:.85rem; }.student-section .section-number { width:30px; height:30px; border-radius:3px; background:#e9ede3; color:#4d5b41; font-size:.82rem; }.student-section .section-heading h2 { font-size:1rem; }.student-section .section-heading p { font-size:.82rem; }.student-section .field-grid { gap:.75rem 1rem; }
.student-section .parent-columns { gap:.75rem; }.student-section .parent-card { min-height:238px; display:flex; flex-direction:column; padding:.85rem; border-color:#ded6ca; border-top:2px solid #617052; border-radius:4px; background:#faf7f0; }.student-section .parent-card h3 { margin:0 0 .75rem; padding-bottom:.6rem; border-bottom:1px solid #e5ddd0; color:#17212b; font-size:.94rem; }.student-section .parent-card .field-stack { flex:1; gap:.6rem; }
.student-section .consent-grid { gap:.75rem; }.student-section .check-card { min-height:94px; padding:.8rem; border-color:#ded6ca; border-radius:4px; background:#faf7f0; }.student-section .check-card strong { color:#17212b; font-size:.88rem; }.student-section .check-card span { font-size:.8rem; line-height:1.55; }
.student-section .upload-grid { gap:.65rem; }.student-section .upload-card { min-height:112px; padding:.75rem; border-color:#cfc7ba; border-radius:3px; background:#faf7f0; }.student-section .document-list { gap:.55rem; }.student-section .document-list a { padding:.7rem; border-radius:3px; border-color:#ded6ca; background:#faf7f0; }
.student-record .record-actions { position:sticky; bottom:0; z-index:4; margin:0 -1.15rem; padding:.8rem 1.15rem; border-top:1px solid #ded6ca; background:rgba(255,253,248,.96); }.student-archive-box { margin-top:.15rem; padding:.85rem 1rem; border-color:#ddb9b4; border-radius:4px; background:#fff8f6; }.student-archive-box strong { color:#843f3a; }.student-archive-box span { color:#8e5b55; font-size:.82rem; }.student-archive-box .danger-button { border-radius:3px; }
@media (max-width:1100px) { .student-workspace { grid-template-columns:280px minmax(0,1fr); } }
@media (max-width:720px) { .student-workspace { display:grid; grid-template-columns:1fr; gap:.8rem; }.student-navigator { position:static !important; max-height:none !important; }.student-record { padding:.85rem; }.student-record-header { flex-wrap:wrap; }.student-record-actions { order:3; width:100%; margin:0; }.student-record-header .portrait { order:2; }.student-record .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.student-record .summary-strip article:nth-child(odd) { border-inline-start:0; }.student-record .summary-strip article:nth-child(-n+2) { border-bottom:1px solid #ded6ca; }.student-record .record-nav { top:64px; overflow-x:auto; white-space:nowrap; }.student-section { padding:.85rem; }.student-section .field-grid,.student-section .parent-columns,.student-section .consent-grid,.student-section .upload-grid { grid-template-columns:1fr; }.student-section .span-2 { grid-column:auto; }.student-section .parent-card { min-height:0; }.student-record .record-actions { margin:0 -.85rem; padding:.7rem .85rem; }.student-archive-box { align-items:flex-start; flex-direction:column; }.student-archive-box .danger-button { width:100%; } }

/* Student empty data is a purposeful local state, not a blank panel. */
.student-list-empty { display:grid; gap:.65rem; justify-items:start; padding:1rem .35rem .45rem; color:#17212b; }.student-list-empty strong { font-size:.9rem; }.student-list-empty p { margin:.15rem 0 0; color:#68706a; font-size:.8rem; line-height:1.55; }.student-list-empty .small { margin-top:.1rem; }
.student-empty-icon { width:32px; height:32px; display:grid; place-items:center; flex:none; border:1px solid #cbd4c4; border-radius:3px; background:#e9ede3; color:#617052; }.student-empty-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.student-onboarding-strip { display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border:1px solid #d7d0c3; border-right:3px solid #b56b3f; border-radius:4px; background:#faf7f0; }.student-onboarding-strip .student-empty-icon { width:30px; height:30px; background:#f2e6d2; border-color:#dfc9a9; color:#9b6132; }.student-onboarding-strip div { display:grid; gap:.12rem; }.student-onboarding-strip strong { color:#17212b; font-size:.86rem; }.student-onboarding-strip span { color:#68706a; font-size:.79rem; line-height:1.5; }
.student-inline-empty { display:flex; align-items:center; gap:.55rem; margin-top:.7rem; padding:.65rem .7rem; border:1px dashed #cfc7ba; border-radius:3px; background:#faf7f0; color:#68706a; font-size:.8rem; }.student-inline-empty .student-empty-icon { width:26px; height:26px; background:transparent; border-color:#cfc7ba; }.student-inline-empty .student-empty-icon svg { width:15px; height:15px; }
@media (max-width:720px) { .student-list-empty { padding-inline:.2rem; }.student-onboarding-strip { align-items:flex-start; } }

/* Reference-aligned final visual system: navy, indigo, white and cool gray. */
:root {
  --bg:#fafbfd;
  --panel:#ffffff;
  --panel-soft:#f8f9fc;
  --border:#e6e8ef;
  --text:#16182d;
  --muted:#7b8192;
  --primary:#4938df;
  --primary-dark:#3828c8;
  --primary-2:#5746e8;
  --sidebar:#081646;
  --sidebar-2:#101d53;
  --success:#2faf67;
  --warning:#e6a21b;
  --danger:#df3f52;
  --clay:#4938df;
  --radius:10px;
  --shadow:0 10px 26px rgba(20,27,70,.065);
  --soft-shadow:0 3px 12px rgba(20,27,70,.045);
  --primary-soft:#efedff;
  --primary-softer:#f7f6ff;
  --success-soft:#ecfbf1;
  --warning-soft:#fff8e7;
  --danger-soft:#fff0f2;
  --focus-ring:rgba(73,56,223,.16);
}

body.app-body,
.login-body { color:var(--text); background:var(--bg); }
body.app-body::before { display:none; }
::selection { color:#fff; background:var(--primary); }
::placeholder { color:#9ba0ae; opacity:1; }
:focus-visible { outline:2px solid var(--primary) !important; outline-offset:3px; }
.skip-link { color:#fff; background:var(--sidebar); border-radius:0 0 8px 8px; box-shadow:var(--soft-shadow); }

input,
select,
textarea,
.global-search-large,
.data-file-picker span {
  border-color:#dfe2eb;
  border-radius:8px;
  color:var(--text);
  background:#fff;
  box-shadow:none;
}
input:hover,
select:hover,
textarea:hover,
.data-file-picker:hover span { border-color:#bbb6f1; }
input:focus,
select:focus,
textarea:focus,
.global-search-large:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.field-error input,
.field-error textarea,
.danger-field textarea { border-color:#e78b96; background:#fffafb; }
input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.primary-button:disabled,
.secondary-button:disabled { cursor:not-allowed; opacity:.58; color:#7b8192; border-color:#e6e8ef; background:#f0f1f5; box-shadow:none; }

.app-shell { grid-template-columns:246px minmax(0,1fr); }
.sidebar { border:0; background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%); box-shadow:none; }
.sidebar::before { display:none; }
.brand-card { border-color:rgba(255,255,255,.1); background:transparent; }
.brand-logo { color:var(--primary); background:#fff; border-radius:10px; }
.brand-text strong { color:#fff; }
.brand-text span { color:#aeb7d7; }
.nav-item { color:#d8def1; border-radius:8px; }
.nav-item:hover { color:#fff; background:rgba(87,70,232,.22); }
.nav-item.active { color:#fff; background:linear-gradient(135deg,#3d2fc7,#5746e8); box-shadow:0 7px 18px rgba(28,20,115,.24); }
.nav-item.active::before { display:none; }
.sidebar .nav-icon { color:#d8def1; background:transparent; }
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item.active .nav-icon { color:#fff; background:rgba(255,255,255,.09); }
.support-button { color:#fff; border-color:rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.035); }
.support-button:hover { border-color:rgba(137,126,255,.55); background:rgba(87,70,232,.18); }
.support-illustration { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.support-illustration span:nth-child(1) { background:#5746e8; }
.support-illustration span:nth-child(2) { background:#36b97b; }
.support-illustration span:nth-child(3) { background:#f1ad28; }

.topbar { min-height:68px; border-bottom-color:#edf0f5; background:#fff; }
.search-bar { border-color:#e2e5ed; border-radius:8px; background:#fff; }
.search-bar:focus-within { border-color:#a9a1ef; box-shadow:0 0 0 3px var(--focus-ring); }
.search-bar button { color:#697083; border-radius:7px; background:transparent; }
.search-bar button:hover { color:var(--primary); background:var(--primary-soft); }
.tool-icon { color:#4b5162; border-radius:8px; }
.tool-icon:hover,
.tool-icon[aria-expanded="true"],
.profile-pill:hover,
.profile-pill[aria-expanded="true"] { color:var(--primary); border-color:#e1defe; background:var(--primary-softer); }
.profile-pill { border-radius:8px; }
.profile-meta strong { color:var(--text); }
.profile-meta span { color:var(--muted); }
.profile-pill .avatar,
.avatar { color:var(--primary); background:#efedff; }
.badge { background:var(--danger); }
.topbar-dropdown { border-color:var(--border); border-radius:10px; background:#fff; box-shadow:0 14px 34px rgba(20,27,70,.13); }
.dropdown-title { border-color:var(--border); background:#fafbfe; }
.topbar-notification-list a:hover { background:#f8f7ff; }
.topbar-notification-list a.read,
.notification-item.read,
.reference-row.archived,
.muted-row { background:#f8f9fc; }
.notification-mark { background:var(--primary); }
.topbar-notification-list a.read .notification-mark { background:#a5a9b5; }
.topbar-notification-list a.warning .notification-mark { background:var(--warning); }
.topbar-notification-list a.danger .notification-mark { background:var(--danger); }
.dropdown-empty,
.all-clear { color:#238a51; }

.page-wrap { background:transparent; }
.page-header { border-bottom-color:var(--border); }
.page-header::after { height:2px; background:var(--primary); }
.page-header h1,
.home-hero-copy h1,
.panel-head h1,
.panel-head h2,
.panel-head h3 { color:var(--text); }
.eyebrow,
.page-header .eyebrow { color:var(--primary); }
.muted { color:var(--muted) !important; }

.panel,
.subpanel,
.soft-card,
.record-section,
.kpi-card,
.home-hero-copy,
.home-quick-actions a,
.home-start-strip,
.mini-card,
.doc-card,
.compact-cards article,
.status-cards article,
.mini-stats article,
.list-card,
.notification-item,
.global-search-result,
.data-format-card,
.classroom-card,
.transfer-card,
.age-exception-card,
.evaluation-domain-group,
.evaluation-file-item,
.evaluation-file-section,
.evaluation-unit-card,
.class-attendance-card,
.absence-alert-list article,
.account-mini-list a,
.finance-calculation-grid article,
.financial-row,
.support-topic-grid article,
.support-contact-card,
.support-info-list div,
.settings-tool-card,
.backup-row,
.reference-row,
.dashboard-student-list a,
.dashboard-finance-row,
.finance-row,
.eval-row {
  border-color:var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--soft-shadow);
}
.panel-head,
.hr-card-heading,
.profile-dropdown-head,
.staff-record-header,
.student-record-header { border-color:#eceef3; }
.record-section,
.student-section,
.staff-section,
.staff-history-panel { border-right-color:#d9d5ff; }
.list-card:hover,
.global-search-result:hover,
.account-mini-list a:hover,
.dashboard-student-list a:hover,
.classroom-card:hover,
.reference-row:hover { transform:none; border-color:#beb8f3; background:#faf9ff; box-shadow:0 5px 14px rgba(73,56,223,.06); }
.list-card.active,
.account-mini-list a.active,
.classroom-card.active,
.student-navigator .list-card.active,
.staff-navigator .list-card.active { border-color:#9b92ee; border-right-color:var(--primary); background:#f2f0ff; box-shadow:none; }

.primary-button,
.login-card .primary-button { color:#fff; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 6px 15px rgba(73,56,223,.18); }
.primary-button:hover,
.login-card .primary-button:hover { color:#fff; background:var(--primary-dark); box-shadow:0 7px 17px rgba(73,56,223,.22); }
.secondary-button,
.ghost-button,
.page-chip,
.export-button,
.archive-reference,
.restore-reference,
.profile-login-link,
.profile-logout-button { border-color:#dfe2eb; border-radius:8px; color:#3d4355; background:#fff; box-shadow:none; }
.secondary-button:hover,
.ghost-button:hover,
.page-chip:hover,
.export-button:hover,
.profile-login-link:hover { border-color:#aaa2ef; color:var(--primary); background:#f7f6ff; }
.danger-button,
.danger-action,
.profile-logout-button { color:#fff; border-color:var(--danger); background:var(--danger); box-shadow:none; }
.danger-button:hover,
.danger-action:hover,
.profile-logout-button:hover { color:#fff; background:#c62f43; }

.system-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 1.5rem auto 0;
  padding: 0.85rem 1rem;
  color: var(--muted);
  text-align: center;
}

.system-footer-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.system-footer-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.system-footer-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.7;
}

.system-footer-copy strong {
  color: var(--text);
  font-weight: 700;
}

.transport-passenger-panel {
  margin-bottom: 1rem;
}

.transport-passenger-table th,
.transport-passenger-table td {
  white-space: nowrap;
}
.small,
.primary-button.small,
.secondary-button.small,
.danger-button.small { border-radius:7px; }

.home-hero-copy { border-right-color:var(--primary); background:linear-gradient(135deg,#fff 0%,#f8f7ff 100%); }
.home-quick-actions a { border-top-color:#e2dfff; }
.home-quick-actions a:hover { border-color:#aaa2ef; box-shadow:inset 0 -3px 0 var(--primary); }
.home-quick-actions span,
.kpi-icon,
.data-exchange-icon,
.search-result-icon,
.hr-card-heading > span,
.section-number,
.student-empty-icon,
.login-brand > span { color:var(--primary); border-radius:8px; background:#efedff; }
.home-quick-actions a:nth-child(2) span,
.kpi-card:nth-child(2n) .kpi-icon { color:#d88a00; background:#fff6df; }
.home-quick-actions a:nth-child(3) span,
.kpi-card:nth-child(3n) .kpi-icon { color:#df3f68; background:#fff0f4; }
.kpi-card:nth-child(4n) .kpi-icon { color:#25a966; background:#ecfbf2; }
.home-start-strip { border-right-color:var(--primary); background:#f8f7ff; }
.hero-alert { border-radius:10px; background:var(--danger); }
.hero-alert.read { background:#74798b; }
.kpi-card.state-empty { border-color:var(--border); background:#fbfcfe; }
.kpi-card.state-empty .kpi-icon { color:#7b8192; background:#f0f1f5; }
.kpi-card.state-empty strong { color:#555b6d; }
.kpi-card.state-warning .kpi-icon { color:#b77b00; background:var(--warning-soft); }
.kpi-card.state-danger .kpi-icon { color:var(--danger); background:var(--danger-soft); }

.status-pill,
.chip,
.attendance-choice span,
.mastery-options span,
.search-category-filters a,
.academic-nav a,
.settings-section-switcher a { border-radius:7px; }
.status-pill.success,
.chip.active,
.restore-reference { border-color:#ccefd9; color:#258a50; background:var(--success-soft); }
.status-pill.warning,
.field-note { color:#a86f00; background:var(--warning-soft); }
.status-pill.danger,
.archive-reference { color:#c52e43; background:var(--danger-soft); }
.chip.active { border-color:#d7d2ff; color:var(--primary); background:var(--primary-soft); }
.green,
.attendance-dot.present,
.attendance-summary-bar span,
.progress-track i { background:var(--success); }
.amber,
.attendance-dot.late { background:var(--warning); }
.red,
.pink,
.attendance-dot.absent { background:var(--danger); }
.violet,
.attendance-dot.excused { background:var(--primary); }

.ring,
.donut,
.ring-green,
.ring-good { background:radial-gradient(circle at center,#fff 56%,transparent 57%),conic-gradient(var(--success) 0 330deg,#edf0f4 330deg 360deg); }
.ring-warning { background:radial-gradient(circle at center,#fff 56%,transparent 57%),conic-gradient(var(--warning) 0 260deg,#edf0f4 260deg 360deg); }
.ring-danger { background:radial-gradient(circle at center,#fff 56%,transparent 57%),conic-gradient(var(--danger) 0 210deg,#edf0f4 210deg 360deg); }
.ring-empty { background:radial-gradient(circle at center,#fff 56%,transparent 57%),conic-gradient(#d8dbe3 0 360deg); }
.line-chart { border-color:var(--border); background:#fff; }
.line-chart::before { background:linear-gradient(180deg,transparent 0,transparent 73%,rgba(73,56,223,.07) 74%,transparent 75%); }
.line-chart span { background:#e64c72; }

.app-message { border-color:#ccefd9; color:#258a50; background:var(--success-soft); }
.app-message.warning,
.closed-year-banner,
.medical-warning { border-color:#f0d596; color:#9b6800; background:var(--warning-soft); }
.app-message.error,
.login-error,
.backup-error,
.notification-item.danger:not(.read),
.required-upload,
.archive-box,
.year-end-confirm,
.repeated-alert-panel,
.absence-alert-list article { border-color:#f1c2c9; color:#b92b3f; background:#fff7f8; }
.absence-alert-list p,
.absence-dates span,
.archive-box span,
.year-end-confirm p { color:#b92b3f; }
.absence-dates span,
.alert-count { background:var(--danger-soft); }
.alert-icon { color:#fff; background:var(--danger); }
.all-clear { color:#258a50; }

.search-result-count,
.search-result-icon,
.data-exchange-icon,
.format-mark,
.bus-icon,
.bus-avatar,
.avatar-fallback,
.currency-preview { color:var(--primary); border-radius:8px; background:var(--primary-soft); }
.search-help-panel span,
.data-import-panel,
.payslip-card,
.promotion-default-summary article,
.next-year-creator,
.current-year-guide,
.year-source-banner,
.data-exchange,
.search-help-panel { border-color:#dfdcff; border-radius:10px; color:var(--text); background:#faf9ff; }
.search-help-panel span { color:var(--primary); background:var(--primary-soft); }
.data-exchange[open] summary { border-color:#e4e1ff; }
.data-import-panel { border-style:dashed; }
.data-format-card.excel .format-mark,
.export-button.excel { color:#258a50; background:var(--success-soft); }
.data-format-card.pdf .format-mark,
.export-button.pdf { color:#c52e43; background:var(--danger-soft); }

.record-nav,
.academic-nav,
.finance-nav,
.tabs { border-color:var(--border); background:#fff; box-shadow:none; }
.record-nav a,
.academic-nav a,
.finance-nav a,
.tabs a { border-radius:7px 7px 0 0; }
.record-nav a:hover,
.academic-nav a:hover,
.academic-nav a.active,
.finance-nav a:hover,
.finance-nav a.active,
.tabs a:hover,
.tabs a.active { color:var(--primary); border-bottom-color:var(--primary); background:#f8f7ff; }

.class-capacity-badge,
.attendance-date-card,
.finance-security-badge,
.settings-security-badge,
.backup-schedule-status { border-color:#d9d5ff; border-radius:9px; color:var(--primary); background:#f7f6ff; }
.class-capacity-badge.full { border-color:#f1c2c9; color:#c52e43; background:var(--danger-soft); }
.year-source-banner strong,
.promotion-default-summary strong,
.class-attendance-card header > strong,
.receipt-print-amount strong { color:#258a50; }
.promotion-default-summary p,
.bulk-promotion-tools,
.finance-calculation-grid .calculated { border-color:#dedaff; background:#f7f6ff; }
.finance-calculation-grid .balance-card { border-color:#f0d596; color:#a86f00; background:var(--warning-soft); }
.financial-row a { color:var(--primary); }
.detailed-statement footer { border-radius:9px; background:#f7f6ff; }

.capacity-meter,
.attendance-summary-bar,
.progress-track { background:#edf0f4; }
.capacity-meter span { background:linear-gradient(90deg,#4938df,#7669ef); }
.attendance-choice.present input:checked + span { border-color:#9cddb5; color:#258a50; background:var(--success-soft); }
.attendance-choice.absent input:checked + span { border-color:#efabb5; color:#c52e43; background:var(--danger-soft); }
.attendance-choice.late input:checked + span { border-color:#f0d596; color:#a86f00; background:var(--warning-soft); }
.attendance-choice.excused input:checked + span,
.mastery-options input:checked + span { border-color:#aaa2ef; color:var(--primary); background:var(--primary-soft); }
.attendance-save-bar { border-color:var(--border); border-radius:10px; background:#fff; box-shadow:0 -5px 18px rgba(20,27,70,.06); }

.certificate-card { border:6px double #7669ef; border-radius:8px; color:var(--text); background:#fff; box-shadow:var(--soft-shadow); }
.certificate-card header,
.certificate-card footer,
.certificate-domains div,
.certificate-comments article { border-color:#dedaff; }
.certificate-card header h1,
.certificate-domains span,
.certificate-attendance strong { color:var(--primary); }
.certificate-attendance { border-radius:9px; background:#f7f6ff; }
.classroom-picker-overlay { background:rgba(8,22,70,.62); }
.classroom-picker { border:1px solid var(--border); border-radius:12px; color:var(--text); background:#fff; box-shadow:0 22px 60px rgba(8,22,70,.2); }
.picker-grid a { border-color:#dedaff; border-radius:9px; color:var(--primary); background:#faf9ff; }
.picker-grid a:hover { border-color:#aaa2ef; background:var(--primary-soft); }

.support-hero { border-color:var(--border); border-radius:10px; background:#fff; }
.support-kicker { color:var(--primary); background:var(--primary-soft); }
.settings-section-switcher,
.settings-navigation { border-color:var(--border); background:#fff; }
.settings-section-switcher a,
.settings-nav-group a { border-radius:8px; }
.settings-section-switcher a:hover,
.settings-section-switcher a.active,
.settings-nav-group a:hover,
.settings-nav-group a.active { color:var(--primary); background:var(--primary-soft); }
.settings-section-switcher a.active::before { background:var(--primary); }
.settings-nav-group b { color:var(--muted); background:#f4f5f8; }
.field-help { color:#a86f00; }
.report-layout-preview { border-color:#dfe2eb; border-radius:10px; background:#f8f9fc; }
.preview-header,
.preview-footer { border-color:#74798b; background:#fff; }
.preview-paper { color:var(--muted); background:#fff; }

.student-navigator,
.staff-navigator,
.student-record,
.staff-record { background:#fff; }
.student-record .summary-strip,
.staff-record .summary-strip,
.student-section .parent-card,
.student-section .check-card,
.student-section .upload-card,
.staff-section .role-grid article,
.staff-section .upload-card,
.student-inline-empty,
.student-onboarding-strip,
.staff-history-panel .timeline > div { border-color:var(--border); background:#f8f9fc; }
.student-record .record-nav,
.staff-record .record-nav,
.student-record .record-actions,
.staff-record .record-actions { border-color:var(--border); background:rgba(255,255,255,.97); }
.student-record .medical-warning { border-color:#f0d596; border-right-color:var(--warning); color:#9b6800; background:var(--warning-soft); }
.student-archive-box,
.staff-archive-box { border-color:#f1c2c9; background:#fff7f8; }
.student-archive-box strong,
.student-archive-box span,
.staff-archive-box strong,
.staff-archive-box span { color:#b92b3f; }

.login-body { background:#f5f6fb; }
.login-layout { border-color:#e2e5ed; border-radius:12px; background:#fff; box-shadow:0 20px 50px rgba(8,22,70,.13); }
.login-welcome { color:#fff; background:linear-gradient(150deg,#081646 0%,#151f63 100%); }
.login-welcome::after { border-color:rgba(137,126,255,.32); }
.login-welcome-rule { background:#7669ef; }
.login-welcome .eyebrow { color:#bcb5ff; }
.login-welcome h1 { color:#fff; }
.login-welcome p,
.login-welcome-note { color:#ccd2e8; }
.login-welcome-note { border-color:rgba(255,255,255,.16); }
.login-card { background:#fff; }
.login-brand > span { color:var(--primary); background:var(--primary-soft); }
.login-brand strong,
.login-heading h1 { color:var(--text); }

@media (max-width:1100px) {
  .app-shell { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  :root { --radius:9px; }
  .sidebar { background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2)); }
  .topbar,
  .login-card { background:#fff; }
  .login-body { background:#f5f6fb; }
  .panel,
  .detail-panel,
  .list-panel,
  .record-section,
  .subpanel,
  .topbar-dropdown { border-radius:9px; }
}

@media print {
  html,
  body,
  .certificate-card,
  .receipt-print-card,
  .detailed-statement,
  .financial-row,
  .preview-header,
  .preview-footer,
  .preview-paper { color:#111 !important; background:#fff !important; box-shadow:none !important; }
  .certificate-card { border-color:#555 !important; }
  .certificate-card header h1,
  .certificate-domains span,
  .certificate-attendance strong,
  .receipt-print-amount strong { color:#111 !important; }
}

/* Homepage final cascade adjustments (kept after the reference-aligned layer). */
.dashboard-grid {
  grid-template-columns:minmax(230px,260px) minmax(420px,1fr) minmax(230px,260px);
}
.dashboard-finance-row {
  min-height:58px;
  padding:.62rem .2rem;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.dashboard-finance-row:last-child { border-bottom:0; }

@media (min-width:1101px) and (max-width:1440px) {
  .dashboard-grid {
    grid-template-columns:minmax(210px,240px) minmax(360px,1fr) minmax(210px,240px);
  }
}

@media (max-width:1100px) {
  .dashboard-grid { grid-template-columns:1fr; }
}

/* Homepage refinement: compact rhythm and space-aware manager composition. */
.home-hero-copy,
.home-quick-actions a {
  min-height:156px;
}
.home-hero-copy { padding-block:1.2rem; }
.home-all-clear { gap:.42rem; }
.home-all-clear svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Dedicated A4 student file. It intentionally does not reuse the editable workspace UI. */
@page student-profile {
  size: A4 portrait;
  margin: 0 0 14mm;

  @bottom-left {
    content: counter(page) "/" counter(pages);
    padding: 1.5mm 0 0 14mm;
    color: #315a73;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
  }
}

@page academic-profile {
  size: A4 portrait;
  margin: 0 0 14mm;

  @bottom-left {
    content: counter(page) "/" counter(pages);
    padding: 1.5mm 0 0 14mm;
    color: #315a73;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
  }
}

@page academic-call-sheet {
  size: A4 portrait;
  margin: 0 0 14mm;

  @bottom-left {
    content: counter(page) "/" counter(pages);
    padding: 1.5mm 0 0 14mm;
    color: #315a73;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
  }
}

@page finance-document {
  size: A4 portrait;
  margin: 0 0 14mm;

  @bottom-left {
    content: counter(page) "/" counter(pages);
    padding: 1.5mm 0 0 14mm;
    color: #315a73;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
  }
}

@page attendance-document {
  size: A4 portrait;
  margin: 0 0 14mm;

  @bottom-left {
    content: counter(page) "/" counter(pages);
    padding: 1.5mm 0 0 14mm;
    color: #315a73;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
  }
}

.student-print-profile,
.academic-print-profile {
  display: none;
}

@media print {
  body.print-student-profile .report-print-header,
  body.print-student-profile .report-print-footer,
  body.print-student-profile .skip-link {
    display: none !important;
  }

  body.print-student-profile,
  body.print-student-profile .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-student-profile .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-student-profile .student-print-profile {
    display: flex !important;
  }

  body.print-staff-profile .report-print-header,
  body.print-staff-profile .report-print-footer,
  body.print-staff-profile .skip-link {
    display: none !important;
  }

  body.print-staff-profile,
  body.print-staff-profile .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-staff-profile .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-staff-profile .staff-print-profile {
    display: flex !important;
  }

  body.print-academic-profile .report-print-header,
  body.print-academic-profile .report-print-footer,
  body.print-academic-profile .skip-link {
    display: none !important;
  }

  body.print-academic-profile,
  body.print-academic-profile .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-academic-profile .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-academic-profile .academic-print-profile {
    display: flex !important;
  }

  body.print-academic-call-sheet .report-print-header,
  body.print-academic-call-sheet .report-print-footer,
  body.print-academic-call-sheet .skip-link {
    display: none !important;
  }

  body.print-academic-call-sheet,
  body.print-academic-call-sheet .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-academic-call-sheet .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-academic-call-sheet .academic-call-sheet-print {
    display: flex !important;
  }

  body.print-finance-document .report-print-header,
  body.print-finance-document .report-print-footer,
  body.print-finance-document .skip-link {
    display: none !important;
  }

  body.print-finance-document,
  body.print-finance-document .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-finance-document .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-finance-document .finance-print-document {
    display: flex !important;
  }

  body.print-attendance-daily .report-print-header,
  body.print-attendance-daily .report-print-footer,
  body.print-attendance-daily .skip-link,
  body.print-attendance-monthly .report-print-header,
  body.print-attendance-monthly .report-print-footer,
  body.print-attendance-monthly .skip-link {
    display: none !important;
  }

  body.print-attendance-daily,
  body.print-attendance-daily .print-section-host,
  body.print-attendance-monthly,
  body.print-attendance-monthly .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-attendance-daily .print-section-host,
  body.print-attendance-monthly .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-attendance-daily .attendance-daily-print,
  body.print-attendance-monthly .attendance-monthly-print {
    display: flex !important;
  }

  body.print-transport-document .report-print-header,
  body.print-transport-document .report-print-footer,
  body.print-transport-document .skip-link {
    display: none !important;
  }

  body.print-transport-document,
  body.print-transport-document .print-section-host {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.print-transport-document .print-section-host {
    width: 210mm;
    margin-inline: auto !important;
  }

  body.print-transport-document .transport-print-document {
    display: flex !important;
  }

  .student-print-profile {
    --print-page-padding-top: 12mm;
    --print-page-padding-bottom: 4mm;
    page: student-profile;
    box-sizing: border-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    flex-direction: column;
    width: 210mm;
    min-height: 283mm;
    padding: 12mm 14mm 4mm;
    overflow: visible;
    color: #172b3a;
    background: #fff;
    font-family: "Tajawal", "Marah Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.62;
    direction: rtl;
    letter-spacing: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .student-print-profile *,
  .student-print-profile *::before,
  .student-print-profile *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .student-print-letterhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10mm;
    min-height: 35mm;
    padding-bottom: 4mm;
    border-bottom: 0.7mm solid #173d57;
    break-inside: avoid;
  }

  .student-print-school {
    display: flex;
    align-items: center;
    gap: 5mm;
    min-width: 0;
  }

  .student-print-logo {
    display: grid;
    flex: 0 0 34mm;
    width: 34mm;
    height: 34mm;
    place-items: center;
  }

  .student-print-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .student-print-school-copy {
    min-width: 0;
  }

  .student-print-school-copy h1 {
    margin: 0;
    color: #173d57;
    font-size: 17pt;
    font-weight: 800;
    line-height: 1.25;
  }

  .student-print-school-copy p {
    margin: 1.2mm 0 0;
    color: #5f707b;
    font-size: 9pt;
  }

  .print-branding-header-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2mm 5mm;
    margin-top: 1.4mm;
    color: #5f707b;
    font-size: 8pt;
    font-weight: 700;
    line-height: 1.45;
  }

  .student-print-document-id {
    display: grid;
    min-width: 38mm;
    gap: 1.5mm;
    padding: 3.2mm 4mm;
    border-inline-start: 1.1mm solid #23688b;
    background: #eef4f8;
  }

  .student-print-document-id span {
    color: #1f5d7d;
    font-size: 12pt;
    font-weight: 800;
  }

  .student-print-document-id strong {
    color: #49616f;
    font-size: 8.5pt;
    font-weight: 700;
  }

  .student-print-identity {
    display: block;
    margin: 5mm 0 2.5mm;
    padding: 4.5mm 0;
    border-bottom: 0.25mm solid #cbd8dc;
  }

  .student-print-identity.has-photo {
    display: grid;
    grid-template-columns: 28mm minmax(0, 1fr);
    align-items: center;
    gap: 6mm;
  }

  .student-print-identity.has-photo .student-print-identity-meta {
    grid-column: 1 / -1;
  }

  .student-print-identity > img {
    display: block;
    width: 28mm;
    height: 33mm;
    padding: 0.8mm;
    border: 0.35mm solid #9fb6c4;
    background: #f5f8fa;
    object-fit: cover;
  }

  .student-print-identity-copy > span {
    display: block;
    margin-bottom: 1mm;
    color: #48616e;
    font-size: 9pt;
    font-weight: 800;
  }

  .student-print-identity-copy h2 {
    margin: 0;
    color: #172b3a;
    font-size: 17pt;
    font-weight: 500;
    line-height: 1.3;
  }

  .student-print-identity-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3mm;
    margin-top: 4.5mm;
  }

  .student-print-identity-meta p {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1mm;
    margin: 0;
    min-height: 15mm;
    min-width: 0;
    padding: 2.4mm 3.3mm;
    border: 0.25mm solid #b9ccda;
    border-top: 0.8mm solid #23688b;
    background: #eef4f8;
  }

  .student-print-identity-meta strong {
    color: #60757f;
    font-size: 8.4pt;
    font-weight: 800;
  }

  .student-print-identity-meta span {
    min-width: 0;
    color: #172b3a;
    font-size: 10.2pt;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .student-print-section {
    margin-top: 10mm;
    break-inside: auto;
  }

  .student-print-identity + .student-print-section {
    margin-top: 10mm;
  }

  .student-print-section > header {
    display: flex;
    align-items: flex-start;
    gap: 3mm;
    margin-bottom: 4.2mm;
    break-after: avoid;
    break-inside: avoid;
  }

  .student-print-section > header > span {
    display: grid;
    flex: 0 0 7.5mm;
    width: 7.5mm;
    height: 7.5mm;
    place-items: center;
    color: #fff;
    background: #173d57;
    font-size: 7.5pt;
    font-weight: 800;
  }

  .student-print-section h3 {
    margin: 0;
    color: #173d57;
    font-size: 12pt;
    font-weight: 800;
  }

  .student-print-section-title {
    display: grid;
    flex: 0 1 auto;
    gap: 0.5mm;
    min-width: 0;
  }

  .student-print-section-title p {
    margin: 0;
    color: #627680;
    font-size: 8.8pt;
    font-weight: 400;
    line-height: 1.5;
  }

  .student-print-fields {
    display: grid;
    margin: 0;
    border-top: 0.25mm solid #d9e2e5;
    border-inline-start: 0.25mm solid #d9e2e5;
  }

  .student-print-fields.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .student-print-fields.one-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-print-fields > div {
    display: grid;
    grid-template-columns: 36mm minmax(0, 1fr);
    align-items: start;
    gap: 1.5mm;
    min-width: 0;
    min-height: 12.5mm;
    padding: 3.2mm 3.6mm;
    border-inline-end: 0.25mm solid #d9e2e5;
    border-bottom: 0.25mm solid #d9e2e5;
    background: #fff;
    break-inside: avoid;
  }

  .student-print-fields > div.span-3 {
    grid-column: span 3;
  }

  .student-print-fields > div.span-2 {
    grid-column: span 2;
    grid-template-columns: 36mm minmax(0, 1fr);
  }

  .student-print-fields dt {
    min-width: 0;
    color: #355362;
    font-size: 9.5pt;
    font-weight: 800;
    line-height: 1.62;
  }

  .student-print-fields dd {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding-inline-start: 2.2mm;
    border-inline-start: 0.3mm solid #b8cad5;
    color: #172b3a;
    font-size: 10.2pt;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .student-print-fields > .student-print-explicit-separator dd {
    border-inline-start: 0.4mm solid #9fb6c4 !important;
  }

  .student-print-group-heading {
    min-height: 9mm !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding-block: 1.8mm !important;
    background: #f1f5f8 !important;
    break-after: avoid;
  }

  .student-print-group-heading dt {
    color: #173d57;
    font-size: 10pt;
  }

  .student-print-group-heading dd {
    min-height: auto;
    padding-inline-start: 0;
    border-inline-start: 0;
    color: #71838b;
    font-size: 8.2pt;
  }

  .student-print-parent-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
    margin-bottom: 4mm;
  }

  .student-print-parent-groups > section {
    break-inside: avoid;
  }

  .student-print-parent-groups h4 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 3mm;
    margin: 0;
    padding: 2.8mm 3.6mm;
    border: 0.25mm solid #d9e2e5;
    border-bottom: 0;
    color: #173d57;
    background: #f1f5f8;
    font-size: 10pt;
  }

  .student-print-parent-groups h4 small {
    color: #71838b;
    font-size: 8.2pt;
    font-weight: 400;
  }

  .student-print-contact-fields {
    margin-top: 0;
  }

  .student-print-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2mm 5mm;
  }

  .student-print-multiline {
    white-space: pre-wrap;
  }

  .student-print-inline-list span + span::before {
    content: "-";
    margin-inline-end: 5mm;
    color: #23688b;
  }

  .student-print-consents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4mm;
    border-top: 0.25mm solid #d9e2e5;
    border-inline-start: 0.25mm solid #d9e2e5;
  }

  .student-print-consents > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1mm 3mm;
    min-height: 21mm;
    padding: 3.5mm 3.6mm;
    border-inline-end: 0.25mm solid #d9e2e5;
    border-bottom: 0.25mm solid #d9e2e5;
    break-inside: avoid;
  }

  .student-print-consents strong {
    color: #355362;
    font-size: 9.2pt;
  }

  .student-print-consents span {
    min-width: 23mm;
    padding: 1.2mm 2.5mm;
    font-size: 8.2pt;
    font-weight: 800;
    text-align: center;
  }

  .student-print-consents .is-allowed {
    color: #1f5d7d;
    background: #eaf3f8;
  }

  .student-print-consents .is-denied {
    color: #7a5a23;
    background: #fff7e7;
  }

  .student-print-consents p {
    grid-column: 1 / -1;
    margin: 0;
    color: #687b84;
    font-size: 8.6pt;
    line-height: 1.55;
  }

  .student-print-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .student-print-history-table thead {
    display: table-header-group;
  }

  .student-print-history-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .student-print-history-table th,
  .student-print-history-table td {
    padding: 2.2mm 2.4mm;
    border: 0.25mm solid #d9e2e5;
    color: #172b3a;
    font-size: 8.5pt;
    line-height: 1.55;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .student-print-history-table th {
    color: #173d57;
    background: #f1f5f8;
    font-weight: 800;
  }

  .student-print-footer {
    display: block;
    margin-top: auto;
    padding-top: 14mm;
    border-top: 0.35mm solid #9db0b6;
    break-inside: avoid;
  }

  .print-branding-footer-lines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4mm;
    margin-bottom: 4mm;
    padding-bottom: 3mm;
    border-bottom: 0.25mm solid #d8e2e6;
    color: #4f6571;
    font-size: 8pt;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .print-branding-footer-right { text-align: right; }
  .print-branding-footer-left { text-align: left; }

  .print-footer-spacer {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    pointer-events: none;
  }

  .print-measure-ruler {
    position: absolute;
    width: 100mm;
    height: 100mm;
    visibility: hidden;
    pointer-events: none;
  }

  .student-print-footer-meta {
    display: grid;
    grid-template-columns: 1.55fr 0.55fr 0.78fr 0.58fr;
    border: 0.25mm solid #d5dfe2;
    background: #f5f8f8;
  }

  .student-print-footer-meta > div {
    display: grid;
    gap: 0.6mm;
    min-height: 11mm;
    padding: 1.7mm 3mm;
  }

  .student-print-footer-meta > div + div {
    border-inline-start: 0.25mm solid #d5dfe2;
  }

  .student-print-footer-meta span {
    color: #687b84;
    font-size: 7.4pt;
    font-weight: 700;
  }

  .student-print-footer-meta strong {
    color: #173d57;
    font-size: 8.8pt;
    font-weight: 600;
  }

  .student-print-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22mm;
    margin: 4mm 13mm 6mm;
  }

  .student-print-electronic-note {
    margin: 0;
    padding-top: 2mm;
    border-top: 0.2mm solid #d5dfe2;
    color: #405966;
    font-size: 8pt;
    font-weight: 500;
    text-align: center;
  }

  .student-print-signature span {
    display: block;
    color: #4d6470;
    font-size: 8.5pt;
    font-weight: 800;
    text-align: center;
  }

  .student-print-signature i {
    display: block;
    height: 6mm;
    border-bottom: 0.25mm solid #71858d;
  }

  .staff-print-profile {
    --print-page-padding-top: 9mm;
    padding-top: 9mm;
  }

  .staff-print-profile .student-print-letterhead {
    min-height: 33mm;
  }

  .staff-print-profile .student-print-identity {
    margin-top: 3mm;
    padding-block: 3mm;
  }

  .staff-print-profile .student-print-identity-meta {
    margin-top: 3mm;
  }

  .staff-print-profile .student-print-identity-meta p {
    min-height: 13mm;
    padding-block: 1.8mm;
  }

  .staff-print-profile .student-print-section {
    margin-top: 6mm;
  }

  .staff-print-profile .student-print-section > header {
    margin-bottom: 3mm;
  }

  .staff-print-profile .student-print-fields > div {
    min-height: 10.5mm;
    padding-block: 2.2mm;
  }

  .staff-print-employment {
    break-inside: avoid;
  }

  .staff-print-profile .student-print-footer {
    margin-top: auto;
    padding-top: 7mm;
  }

  .staff-print-profile .student-print-signatures {
    margin-block: 3mm 4mm;
  }

  .academic-print-profile {
    --print-page-padding-top: 9mm;
    page: academic-profile;
    padding-top: 9mm;
  }

  .academic-print-profile .student-print-letterhead {
    min-height: 33mm;
  }

  .academic-print-profile .student-print-identity {
    margin-top: 4mm;
    padding-block: 3.5mm;
  }

  .academic-print-profile .student-print-identity-meta {
    margin-top: 3.5mm;
  }

  .academic-print-profile .student-print-identity-meta p {
    min-height: 13mm;
    padding-block: 2mm;
  }

  .academic-print-profile .student-print-section {
    margin-top: 8mm;
  }

  .academic-print-profile .student-print-section > header {
    margin-bottom: 3.5mm;
  }

  .academic-print-summary .student-print-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8mm;
    min-height: 13mm;
    padding: 2.5mm 3mm;
  }

  .academic-print-summary .student-print-fields dd {
    min-height: auto;
    padding-inline-start: 0;
    border-inline-start: 0;
    font-size: 9.8pt;
  }

  .academic-print-unit {
    margin-bottom: 5.5mm;
    break-inside: auto;
  }

  .academic-print-unit > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5mm;
    min-height: 11mm;
    padding: 2.4mm 3.5mm;
    border: 0.25mm solid #b8cbd7;
    border-bottom: 0;
    background: #edf4f8;
    break-after: avoid;
  }

  .academic-print-unit > header h4 {
    margin: 0;
    color: #173d57;
    font-size: 10.5pt;
    font-weight: 800;
  }

  .academic-print-unit > header span {
    color: #5d7480;
    font-size: 8.5pt;
    font-weight: 700;
  }

  .academic-print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #172b3a;
    font-size: 9.3pt;
    line-height: 1.6;
  }

  .academic-print-table thead {
    display: table-header-group;
  }

  .academic-print-table tr {
    break-inside: avoid;
  }

  .academic-print-table th,
  .academic-print-table td {
    padding: 2.6mm 3.2mm;
    border: 0.25mm solid #c8d6dd;
    vertical-align: top;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .academic-print-table thead th {
    color: #fff;
    background: #173d57;
    font-size: 9pt;
    font-weight: 800;
  }

  .academic-print-table th:nth-child(1) {
    width: 42%;
  }

  .academic-print-table th:nth-child(2) {
    width: 23%;
  }

  .academic-print-table th:nth-child(3) {
    width: 35%;
  }

  .academic-print-domain-row th {
    width: auto !important;
    padding-block: 1.8mm;
    color: #1d5876;
    background: #edf4f8;
    font-size: 9pt;
    font-weight: 800;
  }

  .academic-print-mastery {
    display: inline-block;
    min-width: 25mm;
    padding: 1mm 2.2mm;
    font-size: 8.2pt;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
  }

  .academic-print-mastery.is-mastered {
    color: #174f6d;
    background: #e4f0f6;
  }

  .academic-print-mastery.is-partial {
    color: #345f72;
    background: #edf3f6;
  }

  .academic-print-mastery.is-support {
    color: #76561f;
    background: #fff4dc;
  }

  .academic-print-mastery.is-unrated {
    color: #667982;
    background: #eef1f2;
  }

  .academic-print-note,
  .academic-print-multiline {
    white-space: pre-wrap;
  }

  .academic-print-final-table th,
  .academic-print-final-table td {
    width: 50% !important;
  }

  .academic-print-narrative-table th:first-child,
  .academic-print-narrative-table td:first-child {
    width: 28%;
  }

  .academic-print-narrative-table th:last-child,
  .academic-print-narrative-table td:last-child {
    width: 72%;
  }

  .academic-print-table-empty,
  .academic-print-empty {
    padding: 5mm !important;
    color: #627680;
    background: #f7f9fa;
    font-size: 9pt;
    text-align: center !important;
  }

  .academic-print-empty {
    border: 0.25mm solid #d4dfe4;
  }

  .academic-print-footer {
    margin-top: 10mm;
    padding-top: 8mm;
  }

  .academic-call-sheet-print {
    --print-page-padding-top: 9mm;
    page: academic-call-sheet;
    padding-top: 9mm;
    font-size: 10pt;
  }

  .academic-call-sheet-print .academic-call-sheet-letterhead {
    min-height: 33mm;
    gap: 7mm;
  }

  .academic-call-sheet-print .student-print-school-copy h1 {
    font-size: 16.5pt;
  }

  .academic-call-sheet-print .student-print-document-id {
    min-width: 43mm;
  }

  .academic-call-sheet-print .student-print-document-id span {
    font-size: 12pt;
  }

  .academic-call-sheet-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38mm;
    align-items: end;
    gap: 7mm;
    margin-top: 4mm;
    padding-bottom: 3mm;
    border-bottom: 0.25mm solid #c6d5dd;
    break-inside: avoid;
  }

  .academic-call-sheet-heading > div:first-child > span {
    display: block;
    margin-bottom: 0.8mm;
    color: #23688b;
    font-size: 8.5pt;
    font-weight: 800;
  }

  .academic-call-sheet-heading h2 {
    margin: 0;
    color: #173d57;
    font-size: 17pt;
    font-weight: 800;
    line-height: 1.3;
  }

  .academic-call-sheet-heading p {
    margin: 1mm 0 0;
    color: #5d717d;
    font-size: 8.7pt;
    line-height: 1.5;
  }

  .academic-call-sheet-date {
    display: grid;
    gap: 1mm;
    min-height: 15mm;
    padding: 2.5mm 3.2mm;
    border: 0.25mm solid #b7cad6;
    border-top: 0.9mm solid #23688b;
    background: #eef4f8;
  }

  .academic-call-sheet-date span {
    color: #607680;
    font-size: 8pt;
    font-weight: 800;
  }

  .academic-call-sheet-date strong {
    color: #173d57;
    font-size: 11pt;
    font-weight: 700;
  }

  .academic-call-sheet-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 3mm;
    border-top: 0.25mm solid #b9cbd4;
    border-inline-start: 0.25mm solid #b9cbd4;
    break-inside: avoid;
  }

  .academic-call-sheet-meta > div {
    display: grid;
    grid-template-columns: 22mm minmax(0, 1fr);
    align-items: center;
    min-height: 9mm;
    padding: 1.3mm 2.5mm;
    border-inline-end: 0.25mm solid #b9cbd4;
    border-bottom: 0.25mm solid #b9cbd4;
  }

  .academic-call-sheet-meta span {
    color: #617680;
    font-size: 7.7pt;
    font-weight: 800;
  }

  .academic-call-sheet-meta strong {
    min-width: 0;
    color: #173d57;
    font-size: 9.3pt;
    font-weight: 600;
    overflow-wrap: break-word;
  }

  .academic-call-sheet-roster {
    margin-top: 5mm;
  }

  .academic-call-sheet-roster > header {
    margin-bottom: 3mm;
    break-after: avoid;
  }

  .academic-call-sheet-roster > header > div {
    display: flex;
    align-items: center;
    gap: 3mm;
  }

  .academic-call-sheet-roster > header > div > span {
    display: grid;
    flex: 0 0 9mm;
    width: 9mm;
    height: 9mm;
    place-items: center;
    color: #fff;
    background: #23688b;
    font-size: 8pt;
    font-weight: 800;
  }

  .academic-call-sheet-roster h3 {
    margin: 0;
    color: #173d57;
    font-size: 12pt;
    font-weight: 800;
  }

  .academic-call-sheet-roster header p {
    margin: 0.4mm 0 0;
    color: #667a84;
    font-size: 8.2pt;
  }

  .academic-call-sheet-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #172b3a;
    font-size: 9.2pt;
    line-height: 1.45;
  }

  .academic-call-sheet-table thead {
    display: table-header-group;
  }

  .academic-call-sheet-table tr {
    break-inside: avoid;
  }

  .academic-call-sheet-table th,
  .academic-call-sheet-table td {
    padding: 1.5mm 2.3mm;
    border: 0.25mm solid #becfd8;
    vertical-align: middle;
  }

  .academic-call-sheet-table th {
    color: #fff;
    background: #173d57;
    font-size: 8.4pt;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  .academic-call-sheet-table tbody tr {
    height: 9.2mm;
  }

  .academic-call-sheet-table tbody tr:nth-child(even) td {
    background: #f5f8fa;
  }

  .academic-call-sheet-table th:nth-child(1),
  .academic-call-sheet-table td:nth-child(1) {
    width: 10mm;
    text-align: center;
  }

  .academic-call-sheet-table th:nth-child(2),
  .academic-call-sheet-table td:nth-child(2) {
    width: 24mm;
    text-align: center;
  }

  .academic-call-sheet-table th:nth-child(3),
  .academic-call-sheet-table td:nth-child(3) {
    width: 50mm;
    font-weight: 700;
    text-align: right;
  }

  .academic-call-sheet-table th:nth-child(4),
  .academic-call-sheet-table td:nth-child(4),
  .academic-call-sheet-table th:nth-child(5),
  .academic-call-sheet-table td:nth-child(5),
  .academic-call-sheet-table th:nth-child(6),
  .academic-call-sheet-table td:nth-child(6) {
    width: 15mm;
    text-align: center;
  }

  .academic-call-sheet-table th:nth-child(7),
  .academic-call-sheet-table td:nth-child(7) {
    text-align: right;
  }

  .academic-call-sheet-check {
    display: inline-block;
    width: 4.8mm;
    height: 4.8mm;
    border: 0.35mm solid #54717f;
    background: #fff;
    vertical-align: middle;
  }

  .academic-call-sheet-notes {
    background-image: linear-gradient(to bottom, transparent calc(100% - 0.25mm), #d8e2e7 0);
  }

  .academic-call-sheet-empty {
    height: 24mm !important;
    color: #617680;
    background: #f5f8fa;
    font-weight: 700;
    text-align: center !important;
  }

  .academic-call-sheet-footer {
    margin-top: 3mm;
    padding-top: 3mm;
  }

  .academic-call-sheet-footer .student-print-footer-meta > div {
    min-height: 9mm;
    padding-block: 1.2mm;
  }

  .academic-call-sheet-footer .student-print-signatures {
    margin-block: 2mm 3mm;
  }

  .academic-call-sheet-footer .student-print-signature i {
    height: 4mm;
  }

  .attendance-print-document {
    --print-page-padding-top: 9mm;
    page: attendance-document;
    padding-top: 9mm;
    font-size: 10pt;
  }

  .attendance-print-document .student-print-letterhead {
    min-height: 31mm;
  }

  .attendance-print-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .attendance-print-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 5mm;
    border-top: 0.25mm solid #b9cbd4;
    border-inline-start: 0.25mm solid #b9cbd4;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .attendance-print-summary > div {
    display: grid;
    gap: 0.8mm;
    min-height: 13mm;
    padding: 2mm 2.5mm;
    border-inline-end: 0.25mm solid #b9cbd4;
    border-bottom: 0.25mm solid #b9cbd4;
    background: #f5f8fa;
    text-align: center;
  }

  .attendance-print-summary span {
    color: #526b78;
    font-size: 7.6pt;
    font-weight: 800;
  }

  .attendance-print-summary strong {
    color: #173d57;
    font-size: 13pt;
    font-weight: 800;
  }

  .attendance-print-section {
    margin-top: 6mm;
  }

  .attendance-print-section > header {
    margin-bottom: 3mm;
    break-after: avoid;
    page-break-after: avoid;
  }

  .attendance-print-section h2 {
    margin: 0;
    color: #173d57;
    font-size: 13pt;
    font-weight: 800;
  }

  .attendance-print-section p {
    margin: 0.6mm 0 0;
    color: #607680;
    font-size: 8.2pt;
  }

  .attendance-print-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: #172b3a;
    font-size: 9.1pt;
    line-height: 1.45;
  }

  .attendance-print-table thead {
    display: table-header-group;
  }

  .attendance-print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .attendance-print-table th,
  .attendance-print-table td {
    padding: 1.5mm 2.2mm;
    border: 0.25mm solid #becfd8;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  .attendance-print-table th {
    color: #fff;
    background: #173d57;
    font-size: 8.2pt;
    font-weight: 800;
    text-align: center;
  }

  .attendance-print-table tbody tr:nth-child(even) td {
    background: #f5f8fa;
  }

  .attendance-print-table th:nth-child(1),
  .attendance-print-table td:nth-child(1) {
    width: 10mm;
    text-align: center;
  }

  .attendance-print-table th:nth-child(2),
  .attendance-print-table td:nth-child(2) {
    width: 24mm;
    text-align: center;
  }

  .attendance-print-table th:nth-child(3),
  .attendance-print-table td:nth-child(3) {
    width: 58mm;
    font-weight: 700;
    text-align: right;
  }

  .attendance-print-table th:nth-child(4),
  .attendance-print-table td:nth-child(4) {
    width: 24mm;
    text-align: center;
  }

  .attendance-monthly-table th:nth-child(n+4),
  .attendance-monthly-table td:nth-child(n+4) {
    width: 17mm;
    text-align: center;
  }

  .attendance-monthly-table th:nth-child(3),
  .attendance-monthly-table td:nth-child(3) {
    width: 50mm;
  }

  .attendance-print-empty {
    height: 24mm;
    color: #617680;
    background: #f5f8fa;
    font-weight: 700;
    text-align: center !important;
  }

  .transport-print-document {
    --print-page-padding-top: 9mm;
    page: transport-document;
    padding-top: 9mm;
    font-size: 9.4pt;
  }

  .transport-print-document .student-print-letterhead {
    min-height: 32mm;
    gap: 7mm;
  }

  .transport-print-document .student-print-school-copy h1 {
    font-size: 15.5pt;
  }

  .transport-print-document .student-print-document-id {
    min-width: 42mm;
  }

  .transport-print-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 6mm;
    border-top: 0.25mm solid #c7d6de;
    border-inline-start: 0.25mm solid #c7d6de;
    break-inside: avoid;
  }

  .transport-print-summary > div {
    display: grid;
    align-content: center;
    gap: 0.8mm;
    min-width: 0;
    min-height: 13mm;
    padding: 2.2mm 2.6mm;
    border-inline-end: 0.25mm solid #c7d6de;
    border-bottom: 0.25mm solid #c7d6de;
    background: #f6fafb;
  }

  .transport-print-summary span {
    color: #5c727d;
    font-size: 7.6pt;
    font-weight: 800;
  }

  .transport-print-summary strong {
    color: #173d57;
    font-size: 9.2pt;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .transport-print-note {
    margin: 4mm 0 0;
    padding: 2.2mm 3mm;
    border: 0.25mm solid #c7d6de;
    background: #f6fafb;
    color: #526b78;
    font-size: 8.4pt;
    font-weight: 700;
    break-inside: avoid;
  }

  .transport-print-section {
    margin-top: 6mm;
  }

  .transport-print-section > header {
    margin-bottom: 3mm;
    break-after: avoid;
    page-break-after: avoid;
  }

  .transport-print-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: #172b3a;
    font-size: 7.8pt;
    line-height: 1.42;
  }

  .transport-print-table thead {
    display: table-header-group;
  }

  .transport-print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .transport-print-table th,
  .transport-print-table td {
    min-width: 0;
    padding: 1.35mm 1.4mm;
    border: 0.25mm solid #becfd8;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .transport-print-table th {
    color: #fff;
    background: #173d57;
    font-size: 7.4pt;
    font-weight: 800;
    text-align: center;
  }

  .transport-print-table tbody tr:nth-child(even) td {
    background: #f5f8fa;
  }

  .transport-print-table th:nth-child(1),
  .transport-print-table td:nth-child(1) {
    width: 8mm;
    text-align: center;
  }

  .transport-print-table th:nth-child(2),
  .transport-print-table td:nth-child(2) {
    width: 18mm;
    text-align: center;
  }

  .transport-print-table th:nth-child(3),
  .transport-print-table td:nth-child(3) {
    width: 32mm;
    font-weight: 700;
  }

  .transport-print-table th:nth-last-child(-n+2),
  .transport-print-table td:nth-last-child(-n+2) {
    width: 27mm;
  }

  .transport-print-table td strong,
  .transport-print-table td span,
  .transport-print-table td small {
    display: block;
    min-width: 0;
    line-height: 1.38;
    overflow-wrap: anywhere;
  }

  .transport-print-table td small {
    color: #526b78;
    font-size: 7.2pt;
  }

  .transport-route-print-table th:nth-child(2),
  .transport-route-print-table td:nth-child(2) {
    width: 55mm;
    font-weight: 700;
  }

  .transport-route-print-table th:nth-child(3),
  .transport-route-print-table td:nth-child(3) {
    width: auto;
    text-align: right;
  }

  .transport-print-empty {
    height: 22mm;
    color: #617680;
    background: #f5f8fa;
    font-weight: 700;
    text-align: center !important;
  }

  .finance-print-document {
    --print-page-padding-top: 9mm;
    page: finance-document;
    padding-top: 9mm;
    font-size: 10pt;
  }

  .finance-print-document .finance-print-letterhead {
    min-height: 33mm;
    gap: 7mm;
  }

  .finance-print-document .student-print-school-copy h1 {
    font-size: 16pt;
  }

  .finance-print-document .student-print-document-id {
    min-width: 45mm;
  }

  .finance-print-document .student-print-document-id span {
    font-size: 11.5pt;
  }

  .finance-print-document .student-print-identity {
    margin-top: 4mm;
    padding-block: 3.5mm;
  }

  .finance-print-document .student-print-identity-meta {
    margin-top: 3.5mm;
  }

  .finance-print-document .student-print-identity-meta p {
    min-height: 13mm;
    padding-block: 2mm;
  }

  .finance-print-document .student-print-section {
    margin-top: 8mm;
  }

  .finance-print-document .student-print-section > header {
    margin-bottom: 3.5mm;
  }

  .finance-print-summary-grid,
  .finance-print-report-intro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0.25mm solid #c7d6de;
    border-inline-start: 0.25mm solid #c7d6de;
    break-inside: avoid;
  }

  .finance-print-summary-grid.five-columns,
  .finance-print-summary-grid.six-columns,
  .finance-print-report-intro.six-columns {
    grid-template-columns: repeat(auto-fit, minmax(28mm, 1fr));
  }

  .finance-print-summary-grid.three-columns,
  .finance-print-report-intro.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-print-report-intro.four-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .finance-print-summary-grid > div,
  .finance-print-report-intro > div {
    display: grid;
    align-content: center;
    gap: 1mm;
    min-width: 0;
    min-height: 17mm;
    padding: 3mm;
    border-inline-end: 0.25mm solid #c7d6de;
    border-bottom: 0.25mm solid #c7d6de;
    background: #f7fafb;
  }

  .finance-print-report-intro {
    margin-top: 7mm;
  }

  .finance-print-summary-grid span,
  .finance-print-report-intro span {
    color: #5c727d;
    font-size: 8pt;
    font-weight: 800;
    line-height: 1.4;
  }

  .finance-print-summary-grid strong,
  .finance-print-report-intro strong {
    color: #173d57;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .finance-print-summary-grid .is-balance,
  .finance-print-report-intro .is-balance {
    background: #e9f2f7;
  }

  .finance-print-summary-grid .is-balance strong,
  .finance-print-report-intro .is-balance strong {
    color: #154f6c;
    font-size: 11pt;
    font-weight: 800;
  }

  .finance-print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #172b3a;
    font-size: 8.7pt;
    line-height: 1.55;
  }

  .finance-print-table thead {
    display: table-header-group;
  }

  .finance-print-table tfoot {
    display: table-footer-group;
  }

  .finance-print-table tr {
    break-inside: avoid;
  }

  .finance-print-table th,
  .finance-print-table td {
    padding: 2.5mm 2.6mm;
    border: 0.25mm solid #c8d6dd;
    vertical-align: top;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .finance-print-table thead th {
    color: #fff;
    background: #173d57;
    font-size: 8.3pt;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
  }

  .finance-print-table tbody tr:nth-child(even) td {
    background: #f7fafb;
  }

  .finance-print-table tfoot th,
  .finance-print-table tfoot td {
    color: #173d57;
    background: #edf4f8;
    font-weight: 800;
  }

  .finance-print-table td small {
    display: block;
    margin-top: 0.5mm;
    color: #5f7580;
    font-size: 7.6pt;
    font-weight: 600;
  }

  .finance-print-register-table,
  .finance-print-expenses-table,
  .finance-print-report-table {
    font-size: 8pt;
  }

  .finance-print-register-table th,
  .finance-print-register-table td,
  .finance-print-expenses-table th,
  .finance-print-expenses-table td,
  .finance-print-report-table th,
  .finance-print-report-table td {
    padding: 2.2mm 1.8mm;
  }

  .finance-print-empty-cell {
    padding: 6mm !important;
    color: #617680;
    background: #f7f9fa !important;
    text-align: center !important;
  }

  .finance-print-closing-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8mm;
    margin-top: 4mm;
    padding: 3.5mm 4mm;
    border-inline-start: 1mm solid #23688b;
    background: #eaf3f8;
    break-inside: avoid;
  }

  .finance-print-closing-balance span {
    color: #355563;
    font-size: 9pt;
    font-weight: 800;
  }

  .finance-print-closing-balance strong {
    color: #173d57;
    font-size: 13pt;
    font-weight: 800;
  }

  .finance-print-status {
    display: inline-block;
    min-width: 18mm;
    padding: 0.8mm 1.4mm;
    font-size: 7.5pt;
    font-weight: 800;
    text-align: center;
  }

  .finance-print-status.is-active {
    color: #1f5d7d;
    background: #e5f0f6;
  }

  .finance-print-status.is-cancelled,
  .finance-print-status.is-due {
    color: #76561f;
    background: #fff3d9;
  }

  .finance-print-receipt-amount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1mm 7mm;
    margin-top: 8mm;
    padding: 5mm 6mm;
    border-inline-start: 1.2mm solid #23688b;
    background: #eaf3f8;
    break-inside: avoid;
  }

  .finance-print-receipt-amount span {
    color: #355563;
    font-size: 10pt;
    font-weight: 800;
  }

  .finance-print-receipt-amount strong {
    grid-row: span 2;
    color: #173d57;
    font-size: 20pt;
    font-weight: 800;
    white-space: nowrap;
  }

  .finance-print-receipt-amount small {
    color: #637883;
    font-size: 8.5pt;
  }

  .finance-print-fields > div {
    min-height: 12mm;
  }

  .finance-print-cancelled {
    background: #fff7e7 !important;
  }

  .finance-print-report-identity + .finance-print-report-intro {
    margin-top: 4mm;
  }

  .finance-receipt-print .finance-print-footer {
    margin-top: auto;
    padding-top: 12mm;
  }

  .finance-print-footer {
    margin-top: 10mm;
    padding-top: 8mm;
  }

  .student-print-footer.print-footer-page-bottom {
    position: absolute;
    inset-inline: 14mm;
    bottom: var(--print-page-padding-bottom, 4mm);
    width: auto;
    margin-top: 0 !important;
  }

}

.finance-student-cell {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.finance-student-cell span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-student-cell small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.finance-accounts-table > .financial-row.head {
  display: none;
}

.finance-accounts-table .finance-account-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.5rem;
  padding: 0.9rem;
  border-radius: 12px;
}

.finance-account-row .finance-student-cell {
  grid-column: 1 / -1;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.finance-account-row .finance-student-cell span {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
}

.finance-account-metric {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  align-content: center;
  padding: 0.55rem 0.3rem;
  border-radius: 8px;
  background: #f7f8fc;
  text-align: center;
}

.finance-account-metric::before {
  content: attr(data-label);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.finance-account-metric strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finance-account-metric.balance {
  background: #f3f1ff;
}

.finance-account-metric.balance strong {
  color: var(--primary);
}

.finance-account-footer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

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

.finance-account-actions .secondary-button {
  display: grid;
  min-width: 0;
  min-height: 38px;
  place-items: center;
  padding: 0.35rem 0.45rem;
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: center;
}
.receipts-panel .financial-table {
  max-height:196px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-inline-end:.2rem;
  scrollbar-width:thin;
}
.receipts-panel .dashboard-finance-row strong {
  display:block;
  max-width:15ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.financial-status-cards strong {
  min-width:0;
  max-width:100%;
  font-size:1.04rem;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media (min-width:1500px) {
  .dashboard-grid {
    grid-template-columns:minmax(250px,280px) minmax(440px,1fr) minmax(250px,280px);
  }
  .dashboard-grid .center-panel { min-height:450px; }
  .financial-status-cards { grid-template-columns:1fr; }
  .financial-status-cards article { min-height:76px; }
}

@media (min-width:760px) and (max-width:1499px) {
  .dashboard-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .dashboard-grid > .center-panel {
    order:-1;
    grid-column:1 / -1;
    min-height:0;
  }
  .dashboard-grid > .stack {
    align-self:start;
  }
  .dashboard-grid > .stack .mini-panel { min-height:0; }
  .financial-status-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:721px) and (max-width:1499px) {
  .home-hero-copy {
    min-height:128px;
    padding:1.1rem 1.25rem;
  }
  .home-quick-actions {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .home-quick-actions a {
    min-height:104px;
    padding:.85rem 1rem;
  }
}

@media (max-width:759px) {
  .dashboard-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .home-hero-copy {
    min-height:auto;
    padding:1rem;
  }
  .home-quick-actions { grid-template-columns:1fr; }
  .home-quick-actions a {
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:.75rem;
    row-gap:.08rem;
    min-height:76px;
    padding:.72rem .85rem;
  }
  .home-quick-actions a > span {
    grid-row:1 / 3;
    align-self:center;
  }
  .home-quick-actions a > strong,
  .home-quick-actions a > small { grid-column:2; }
  .receipts-panel .financial-table {
    max-height:none;
    overflow:visible;
  }
}

/* Students responsive revision: final cascade overrides. */
.student-secondary-fields {
  margin-top:.8rem;
  border:0;
}
.student-secondary-fields > summary {
  display:none;
  list-style:none;
}
.student-secondary-fields > summary::-webkit-details-marker { display:none; }
.student-secondary-grid { margin-top:0; }
.student-secondary-grid > .student-family-control {
  grid-template-rows:auto 132px;
  align-self:start;
}
.student-secondary-grid > .student-family-control > input,
.student-secondary-grid > .student-family-control > select {
  height:132px;
  min-height:132px;
}

@media (max-width:900px) {
  .student-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) !important;
    gap:.75rem;
  }
  .student-navigator {
    position:static !important;
    top:auto;
    max-height:none !important;
  }
  .student-picker > summary { display:grid; }
  .student-picker:not([open]) > .student-picker-body { display:none !important; }
  .student-picker[open] > .student-picker-body { display:flex !important; }
  .student-navigator .student-list {
    max-height:270px;
    min-height:0;
  }
  .student-record { width:100%; min-width:0; }
  .student-section .upload-grid { grid-template-columns:minmax(0,1fr) !important; }
  .student-section .upload-card,
  .student-section .upload-card input[type="file"] {
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .student-section .upload-card input[type="file"] {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .student-section input[type="file"]::file-selector-button {
    max-width:48%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Students navigator filter controls: one consistent compact control height. */
.student-navigator .inline-tools input[type="search"],
.student-navigator .inline-tools select,
.student-navigator .inline-tools .ghost-button {
  height:44px;
  min-height:44px;
  box-sizing:border-box;
  line-height:normal;
}
.student-navigator .inline-tools .ghost-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:560px) {
  .student-record {
    gap:.5rem;
    padding:.62rem;
  }
  .student-record-header {
    min-height:0;
    padding:0 0 .55rem;
  }
  .student-record-header .portrait {
    width:44px;
    height:44px;
  }
  .student-record-identity .eyebrow { font-size:.7rem; }
  .student-record-identity h1 {
    margin:.08rem 0 0;
    font-size:1.08rem;
  }
  .student-record-identity p { display:none; }
  .student-record .summary-strip article { padding:.42rem .52rem; }
  .student-record .summary-strip span { font-size:.68rem; }
  .student-record .summary-strip strong {
    margin-top:.08rem;
    font-size:.82rem;
    line-height:1.35;
  }
  .student-record .summary-strip article.is-empty strong { font-size:.74rem; }
  .student-record .record-nav {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    padding:0;
    overflow:visible;
    white-space:normal;
  }
  .student-record .record-nav button {
    width:100%;
    min-width:0;
    min-height:36px;
    padding:.42rem .25rem;
    font-size:.74rem;
    text-align:center;
    white-space:normal;
  }
  .student-section {
    padding:.62rem;
    border-inline-start-width:2px;
  }
  .student-section .section-heading { margin-bottom:.55rem; }
  .student-section .section-number { width:26px; height:26px; }
  .student-section .section-heading h2 { font-size:.9rem; }
  .student-section .section-heading p { font-size:.72rem; }
  #basic-data > .field-grid.two {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.48rem .5rem;
  }
  #basic-data > .field-grid.two label { min-width:0; }
  #basic-data > .field-grid.two label > span {
    margin-bottom:.22rem;
    font-size:.72rem;
  }
  #basic-data > .field-grid.two input,
  #basic-data > .field-grid.two select {
    width:100%;
    min-width:0;
    min-height:38px;
    padding:.45rem .5rem;
    font-size:.78rem;
  }
  .student-secondary-fields {
    margin-top:.58rem;
    border:1px solid #e6e8ef;
    border-radius:8px;
    background:#f8f9fc;
  }
  .student-secondary-fields > summary {
    display:flex;
    min-height:48px;
    padding:.55rem .65rem;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    color:#16182d;
    cursor:pointer;
  }
  .student-secondary-fields > summary > span:first-child { display:grid; gap:.06rem; }
  .student-secondary-fields > summary strong { font-size:.8rem; }
  .student-secondary-fields > summary small { color:#7b8192; font-size:.68rem; }
  .student-secondary-fields > summary > span:last-child {
    color:#4938df;
    transition:transform .18s ease;
  }
  .student-secondary-fields[open] > summary > span:last-child { transform:rotate(180deg); }
  .student-secondary-fields[open] > summary { border-bottom:1px solid #e6e8ef; }
  .student-secondary-grid {
    grid-template-columns:1fr !important;
    margin:0;
    padding:.62rem;
  }
  .student-record .record-actions {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.45rem;
    margin:0 -.62rem;
    padding:.55rem .62rem;
  }
  .student-record .record-actions .primary-button { grid-column:1 / -1; }
  .student-record .record-actions > * {
    min-height:38px;
    padding:.45rem .5rem;
    font-size:.76rem;
  }
  .student-archive-box {
    gap:.55rem;
    margin-top:0;
    padding:.65rem;
  }
  .student-archive-box span { font-size:.72rem; }
  .student-archive-box .danger-button { min-height:38px; padding:.45rem .6rem; }
}

@media (max-width:360px) {
  #basic-data > .field-grid.two { grid-template-columns:1fr; }
}

/* Students defect fixes: complete navigator reach and normal-height blood type. */
.student-navigator .student-list {
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#aaa2ef #f0f1f5;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}
.student-navigator .student-list::-webkit-scrollbar { width:9px; }
.student-navigator .student-list::-webkit-scrollbar-track {
  border-radius:8px;
  background:#f0f1f5;
}
.student-navigator .student-list::-webkit-scrollbar-thumb {
  min-height:34px;
  border:2px solid #f0f1f5;
  border-radius:8px;
  background:#aaa2ef;
}
.student-navigator .student-list::-webkit-scrollbar-thumb:hover { background:#7669ef; }
.student-section .blood-type-field {
  align-self:start;
  align-content:start;
  min-width:0;
}
.student-section .blood-type-field select {
  width:100%;
  min-height:42px;
  height:42px;
  align-self:start;
}

@media (max-width:560px) {
  .student-section .blood-type-field select {
    min-height:38px;
    height:38px;
  }
}

/* Students navigator height contract: the list owns only the remaining panel space. */
@media (min-width:901px) {
  .student-navigator {
    display:flex;
    height:calc(100vh - 104px);
    flex-direction:column;
  }
  .student-picker {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    overflow:hidden;
  }
  .student-picker > .student-picker-body {
    display:flex !important;
    min-height:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  .student-picker-summary { display:none; }
  .student-navigator .student-list {
    min-height:0;
    max-height:none;
    flex:1 1 0;
    padding-bottom:.35rem;
  }
}

@media (max-width:900px) {
  .student-navigator { display:block; }
  .student-picker {
    display:block;
    overflow:visible;
  }
  .student-picker-summary {
    display:grid;
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.08rem .6rem;
    padding:.7rem .75rem;
    border:1px solid #e6e8ef;
    border-radius:8px;
    color:#16182d;
    background:#f8f9fc;
    font:inherit;
    text-align:start;
    cursor:pointer;
  }
  .student-picker-summary strong { grid-column:1; font-size:.9rem; }
  .student-picker-summary .student-picker-chevron {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    color:#4938df;
    font-size:1.1rem;
    transition:transform .18s ease;
  }
  .student-picker.is-open .student-picker-summary {
    border-color:#aaa2ef;
    border-radius:8px 8px 0 0;
  }
  .student-picker.is-open .student-picker-chevron { transform:rotate(180deg); }
  .student-picker:not(.is-open) > .student-picker-body { display:none !important; }
  .student-picker.is-open > .student-picker-body {
    display:flex !important;
    min-height:auto;
    overflow:visible;
  }
  .student-navigator .student-list {
    max-height:270px;
    flex:none;
    padding-bottom:.3rem;
  }
}

/* Students status filter alignment: identical logical width and edges. */
.student-navigator .inline-tools {
  grid-template-columns:minmax(0,1fr);
}
.student-navigator .inline-tools > input[type="search"],
.student-navigator .inline-tools > select,
.student-navigator .inline-tools > .ghost-button {
  grid-column:1 / -1;
  inline-size:100%;
  width:100%;
  min-width:0;
  margin-inline:0;
}

/* Staff workspace final dossier pass: state-safe navigator and true tabs. */
.staff-workspace {
  grid-template-columns:minmax(290px,320px) minmax(0,1fr);
  align-items:start;
  gap:1rem;
}
.staff-navigator {
  position:sticky;
  top:84px;
  display:flex;
  height:calc(100vh - 104px);
  max-height:calc(100vh - 104px);
  padding:.9rem;
  flex-direction:column;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.staff-navigator .panel-head { margin-bottom:.7rem; }
.staff-navigator .panel-title-block p { margin-top:.18rem; line-height:1.5; }
.staff-picker {
  display:flex;
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
  overflow:hidden;
}
.staff-picker-summary { display:none; }
.staff-picker-body {
  display:flex;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
  overflow:hidden;
}
.staff-navigator .data-exchange { margin:0; flex:none; }
.staff-navigator .inline-tools {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.45rem;
  margin:.7rem 0 .55rem;
  flex:none;
}
.staff-navigator .inline-tools > input[type="search"],
.staff-navigator .inline-tools > .ghost-button {
  width:100%;
  min-width:0;
  height:44px;
  min-height:44px;
  margin:0;
  box-sizing:border-box;
}
.staff-navigator .inline-tools > .ghost-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.staff-navigator .staff-list {
  min-height:0;
  max-height:none;
  flex:1 1 0;
  gap:.25rem;
  padding:0 0 .35rem .2rem;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#aaa2ef #f0f1f5;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}
.staff-navigator .staff-list::-webkit-scrollbar { width:9px; }
.staff-navigator .staff-list::-webkit-scrollbar-track { border-radius:8px; background:#f0f1f5; }
.staff-navigator .staff-list::-webkit-scrollbar-thumb { min-height:34px; border:2px solid #f0f1f5; border-radius:8px; background:#aaa2ef; }
.staff-navigator .list-card { min-height:58px; padding:.5rem; border-radius:8px; }
.staff-navigator .list-card.active { border-color:#9b92ee; border-inline-start:3px solid #4938df; background:#f2f0ff; }
.staff-navigator .list-copy { min-width:0; }
.staff-navigator .list-copy strong,
.staff-navigator .list-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-record {
  min-width:0;
  gap:.85rem;
  padding:1rem;
  border-radius:10px;
  background:#fff;
}
.staff-record-header { align-items:center; min-height:88px; padding:0 0 .85rem; border-color:#e6e8ef; }
.staff-record-identity h1 { margin:.18rem 0; color:#16182d; }
.staff-record-header .portrait { border-color:#fff; }
.staff-record .summary-strip { overflow:hidden; border-color:#e6e8ef; border-radius:8px; background:#f8f9fc; }
.staff-record .summary-strip article { border-color:#e6e8ef; }
.staff-record .summary-strip article.is-empty strong { color:#7b8192; font-size:.87rem; font-weight:600; }
.staff-record .record-nav {
  position:sticky;
  top:68px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:.25rem .3rem 0;
  overflow-x:auto;
  border:1px solid #e6e8ef;
  border-radius:8px 8px 0 0;
  background:rgba(255,255,255,.97);
  scrollbar-width:thin;
}
.staff-record .record-nav button {
  width:100%;
  min-height:42px;
  padding:.62rem .85rem;
  border:0;
  border-inline-start:1px solid #e6e8ef;
  border-bottom:2px solid transparent;
  color:#676d7d;
  background:transparent;
  font:inherit;
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.staff-record .record-nav button:first-child { border-inline-start:0; }
.staff-record .record-nav button:hover { color:#4938df; background:#f8f7ff; }
.staff-record .record-nav button[aria-selected="true"] { color:#4938df; border-bottom-color:#4938df; background:#f8f7ff; }
.staff-tabs-ready .staff-tab-panel[hidden],
.staff-record-form[hidden] { display:none !important; }
.staff-record-form { gap:.75rem; }
.staff-section {
  min-height:0;
  padding:1rem;
  border:1px solid #e6e8ef;
  border-inline-start:3px solid #4938df;
  border-radius:8px;
  background:#fff;
}
.staff-section .section-number { color:#4938df; background:#efedff; }
.staff-access-choice {
  display:flex;
  align-items:flex-start;
  gap:.4rem 1rem;
  margin-bottom:.8rem;
  padding:.7rem .8rem;
  border:1px solid #d7d2ff;
  border-radius:8px;
  flex-wrap:wrap;
  background:#f8f7ff;
}
.staff-access-choice strong { color:#4938df; font-size:.84rem; }
.staff-access-choice span { color:#676d7d; font-size:.8rem; line-height:1.55; }
.staff-section .role-grid article,
.staff-section .upload-card,
.staff-operations .soft-card,
.staff-history-panel,
.staff-history-panel .timeline > div { border-color:#e6e8ef; border-radius:8px; background:#f8f9fc; }
.staff-section .upload-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.staff-section .upload-card { min-width:0; min-height:118px; padding:.75rem; }
.staff-section .upload-card input[type="file"] { display:block; width:100%; min-width:0; max-width:100%; padding:.28rem; overflow:hidden; box-sizing:border-box; color:#7b8192; background:#fff; }
.staff-section input[type="file"]::file-selector-button { max-width:48%; margin-inline-end:.55rem; padding:.48rem .65rem; overflow:hidden; border:1px solid #d7d2ff; border-radius:7px; color:#4938df; background:#efedff; font:inherit; font-weight:700; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.staff-section .required-upload { border-color:#f0d596; background:#fffaf0; }
.staff-record .record-actions { margin:0 -1rem; padding:.72rem 1rem; border-color:#e6e8ef; background:rgba(255,255,255,.97); }
.staff-attendance-panel { display:grid; gap:.75rem; }
.staff-operations .hr-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.staff-operations .hr-action-grid > .soft-card { border-top:2px solid #4938df; border-radius:8px; background:#f8f9fc; }
.staff-history-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.staff-history-panel { padding:.85rem; border-inline-start:2px solid #d9d5ff; }
.staff-history-panel > header { border-color:#e6e8ef; }
.staff-history-panel h3 { color:#16182d; }
.staff-history-panel .timeline > div { border-inline-start:2px solid #aaa2ef; }
.staff-history-empty { border-style:dashed !important; }
.staff-history-empty strong { color:#555b6d; }
.staff-history-empty span { color:#7b8192; }
.staff-inline-empty { display:flex; align-items:center; gap:.55rem; margin-top:.7rem; padding:.65rem .7rem; border:1px dashed #dfe2eb; border-radius:8px; color:#7b8192; background:#f8f9fc; font-size:.8rem; }
.staff-empty-icon { width:32px; height:32px; display:grid; place-items:center; flex:none; border:1px solid #d7d2ff; border-radius:8px; color:#4938df; background:#efedff; }
.staff-empty-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.staff-list-empty { display:grid; gap:.65rem; justify-items:start; padding:1rem .35rem .45rem; }
.staff-list-empty strong { color:#16182d; font-size:.9rem; }
.staff-list-empty p { margin:.15rem 0 0; color:#7b8192; font-size:.8rem; line-height:1.55; }
.staff-detail-empty { display:flex; min-height:520px; max-width:620px; margin:auto; padding:2rem; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.staff-detail-empty .staff-empty-icon { width:52px; height:52px; margin-bottom:.85rem; }
.staff-detail-empty h1 { margin:.28rem 0 .5rem; color:#16182d; font-size:1.45rem; }
.staff-detail-empty p { max-width:52ch; margin:0 0 1.1rem; color:#7b8192; line-height:1.75; }
.staff-first-empty .staff-empty-icon { color:#2faf67; border-color:#ccefd9; background:#ecfbf1; }
.staff-archive-box { border-color:#f1c2c9; border-radius:8px; background:#fff7f8; }

@media (max-width:900px) {
  .staff-workspace { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:.75rem; }
  .staff-navigator { position:static !important; display:block; height:auto; max-height:none !important; padding:.8rem; }
  .staff-picker { display:block; overflow:visible; }
  .staff-picker-summary { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto; gap:.08rem .6rem; padding:.7rem .75rem; border:1px solid #e6e8ef; border-radius:8px; color:#16182d; background:#f8f9fc; font:inherit; text-align:start; cursor:pointer; }
  .staff-picker-label { color:#7b8192; font-size:.74rem; font-weight:600; }
  .staff-picker-summary strong { grid-column:1; font-size:.9rem; }
  .staff-picker-chevron { grid-column:2; grid-row:1 / 3; align-self:center; color:#4938df; font-size:1.1rem; transition:transform .18s ease; }
  .staff-picker.is-open .staff-picker-summary { border-color:#aaa2ef; border-radius:8px 8px 0 0; }
  .staff-picker.is-open .staff-picker-chevron { transform:rotate(180deg); }
  .staff-picker:not(.is-open) > .staff-picker-body { display:none !important; }
  .staff-picker.is-open > .staff-picker-body { display:flex !important; min-height:auto; padding:.7rem .15rem 0; overflow:visible; }
  .staff-navigator .staff-list { max-height:270px; min-height:0; flex:none; padding-bottom:.3rem; }
  .staff-record { width:100%; min-width:0; padding:.85rem; }
  .staff-record .record-nav { top:64px; }
  .staff-section .upload-grid { grid-template-columns:1fr; }
  .staff-operations .hr-action-grid,
  .staff-history-grid { grid-template-columns:1fr; }
  .staff-record .record-actions { margin:0 -.85rem; padding:.68rem .85rem; }
  .staff-detail-empty { min-height:390px; padding:1.25rem; }
}

@media (max-width:560px) {
  .staff-record { gap:.5rem; padding:.62rem; }
  .staff-record-header { min-height:0; padding:0 0 .55rem; flex-wrap:nowrap; }
  .staff-record-header .portrait { width:44px; height:44px; }
  .staff-record-identity .eyebrow { font-size:.7rem; }
  .staff-record-identity h1 { margin:.08rem 0 0; font-size:1.08rem; }
  .staff-record-identity p { display:none; }
  .staff-record-actions { order:3; width:100%; margin:0; }
  .staff-record .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .staff-record .summary-strip article { padding:.42rem .52rem; }
  .staff-record .summary-strip article:nth-child(odd) { border-inline-start:0; }
  .staff-record .summary-strip article:nth-child(-n+2) { border-bottom:1px solid #e6e8ef; }
  .staff-record .record-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:0; overflow:visible; white-space:normal; }
  .staff-record .record-nav button { width:100%; min-width:0; min-height:36px; padding:.42rem .25rem; font-size:.74rem; text-align:center; white-space:normal; }
  .staff-section { padding:.62rem; border-inline-start-width:2px; }
  .staff-section .field-grid { grid-template-columns:1fr; gap:.55rem; }
  .staff-section .span-2 { grid-column:auto; }
  .staff-record .record-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; margin:0 -.62rem; padding:.55rem .62rem; }
  .staff-record .record-actions .primary-button { grid-column:1 / -1; }
  .staff-archive-box { align-items:stretch; flex-direction:column; }
  .staff-archive-box .danger-button { width:100%; }
}

/* Keep academic grids shrinkable inside the narrow dashboard canvas. */
.academics-page,
.academics-page *,
.academics-page *::before,
.academics-page *::after { box-sizing:border-box; }
.academics-page { width:100%; min-width:0; max-width:100%; }
.academics-page > *,
.academics-page .page-header > *,
.academics-page .kpi-grid > *,
.academics-page .academic-nav-group,
.academics-page .academic-nav-group > div,
.academics-page .academic-layout > *,
.academics-page .distribution-grid > *,
.academics-page .evaluation-layout > *,
.academics-page .certificate-layout > * { min-width:0; max-width:100%; }
.academics-page input,
.academics-page select,
.academics-page textarea { max-width:100%; }
.academics-page .year-end-table thead th {
  border-color:var(--academic-line);
  color:#4740b8;
  background:#f2f3f8;
}
.academics-page .year-end-table tbody .year-end-student-row { position:relative; }
.academics-page .year-end-table tbody .year-end-student-row:not(:last-child)::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--academic-line);
  pointer-events:none;
}
.academics-page .year-end-table thead input:focus-visible {
  outline:2px solid var(--academic-accent);
  outline-offset:2px;
}
.academics-page .page-header {
  width:100%;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
}
.academics-page .page-header > div:first-child { flex:1 1 auto; }
.academics-page .page-header .year-picker {
  width:min(360px,40%);
  min-width:280px;
  margin-inline-start:auto;
}
.academics-page > .academic-nav a,
.academics-page > .academic-nav a.active:not([aria-current="page"]) {
  color:#5d6375;
  background:#fff;
  box-shadow:none;
}
.academics-page > .academic-nav a[aria-current="page"] {
  color:var(--academic-accent);
  background:#f0eeff;
  box-shadow:inset 0 -3px var(--academic-accent);
}
.academics-page .academic-advanced > summary:focus-visible {
  outline:2px solid var(--academic-accent);
  outline-offset:-3px;
}
.academics-page .academic-advanced > .panel-head h2 { display:none; }
.academics-page .academic-advanced > .panel-head { margin-bottom:.45rem; padding-bottom:.55rem; }
.academics-page .academic-advanced > .age-rule-layout { margin-top:.45rem; }
.academics-page .age-rule-layout { align-items:stretch; }
.academics-page .age-rule-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:.65rem;
  padding:.8rem;
}
.academics-page .age-rule-form .age-rule-span { grid-column:1 / -1; }
.academics-page .age-rule-form .check-line { align-self:center; margin:0; }
.academics-page .age-rule-form > .primary-button { align-self:end; }
.academics-page .reference-list { min-width:0; }
.academics-page .academic-compact-empty {
  display:flex;
  align-items:center;
  gap:.7rem;
  width:100%;
  min-height:78px;
  padding:.7rem .8rem;
  border:1px dashed #d8dbe5;
  border-radius:8px;
  color:var(--academic-muted);
  background:var(--academic-soft);
}
.academics-page .compact-empty-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  border:1px solid #d7d2ff;
  border-radius:8px;
  color:var(--academic-accent);
  background:#efedff;
  font-weight:800;
}
.academics-page .academic-compact-empty strong { display:block; color:var(--academic-ink); font-size:.84rem; }
.academics-page .academic-compact-empty p { margin:.16rem 0 0; font-size:.76rem; line-height:1.5; }
.academics-page .age-rules-empty { align-self:start; }
.academics-page .distribution-grid > .is-empty { padding:.75rem; }
.academics-page .distribution-grid > .is-empty .panel-head { margin-bottom:.55rem; padding-bottom:.55rem; }
.academics-page .distribution-grid > .is-empty .transfer-list { max-height:none; overflow:visible; }
.academics-page .age-rule-warning { margin:.45rem 0 .6rem; padding:.55rem .65rem; font-size:.76rem; line-height:1.55; }
.academics-page .evaluation-file-empty { min-height:70px; }
.academics-page .evaluation-final-grid > .evaluation-file-empty { grid-column:1 / -1; }
.academics-page .narrative-timeline > .evaluation-file-empty {
  align-items:center;
  justify-content:flex-start;
  flex-direction:row;
  gap:.7rem;
  border-inline-start:1px dashed #d8dbe5;
}
.academics-page .narrative-timeline > .evaluation-file-empty > div {
  display:grid;
  gap:.08rem;
  padding:0;
  border-radius:0;
  background:transparent;
}

/* Finance sections use the same full-width, evenly divided navigation language. */
.finance-nav {
  display:grid;
  width:100%;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--academic-line);
  border-radius:9px;
  background:#fff;
}
.finance-nav a {
  display:grid;
  min-width:0;
  min-height:52px;
  margin:0;
  padding:.55rem;
  place-items:center;
  border:0;
  border-inline-start:1px solid var(--academic-line);
  border-bottom:2px solid transparent;
  border-radius:0;
  font-size:.8rem;
  font-weight:750;
  line-height:1.45;
  text-align:center;
  white-space:normal;
}
.finance-nav a:first-child { border-inline-start:0; }

@media (max-width:1100px) {
  .finance-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .finance-nav a:nth-child(3n+1) { border-inline-start:0; }
  .finance-nav a:nth-child(n+4) { border-top:1px solid var(--academic-line); }
}

@media (max-width:720px) {
  .finance-nav { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; }
  .finance-nav a { border-inline-start:1px solid var(--academic-line); }
  .finance-nav a:nth-child(odd) { border-inline-start:0; }
  .finance-nav a:nth-child(n+3) { border-top:1px solid var(--academic-line); }
}

@media (max-width:560px) {
  .academics-page .page-header { width:100%; min-width:0; align-items:stretch; flex-wrap:wrap; }
  .academics-page .page-header .year-picker { width:100%; min-width:0; max-width:100%; margin-inline-start:0; }
  .academics-page .age-rule-form { grid-template-columns:1fr; }
  .academics-page .age-rule-form .age-rule-span { grid-column:auto; }
}

@media (min-width:561px) and (max-width:900px) {
  .academics-page .page-header .year-picker { width:min(330px,46%); min-width:250px; }
  .academics-page .age-rule-form { grid-template-columns:1fr; }
  .academics-page .age-rule-form .age-rule-span { grid-column:auto; }
}

/* Keep the certificate authoritative over the legacy certificate preview rules above. */
.certificate-card.academic-certificate-print {
  min-height:720px;
  padding:10px;
  border:0;
  border-radius:8px;
  color:#172b3a;
  background:#fff;
  box-shadow:0 12px 32px rgba(23,61,87,.12);
}
.certificate-card .academic-certificate-letterhead {
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 126px;
  justify-content:normal;
  gap:22px;
  padding-bottom:16px;
  border-bottom:2px solid #173d57;
}
.certificate-card .academic-certificate-school h1 { color:#173d57; }
.certificate-card .academic-certificate-results > header {
  display:flex;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding-bottom:0;
  border-bottom:0;
}
.certificate-card .academic-certificate-footer {
  display:block;
  margin-top:auto;
  padding-top:18px;
  border-top:0;
}

@media (max-width:720px) {
  .certificate-card .academic-certificate-letterhead {
    grid-template-columns:82px minmax(0,1fr);
  }
}

@media print {
  body.print-academic-certificate .certificate-card.academic-certificate-print {
    min-height:210mm;
    padding:4mm;
    border:0 !important;
    border-radius:0;
    color:#172b3a !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  body.print-academic-certificate .certificate-card .academic-certificate-letterhead {
    grid-template-columns:34mm minmax(0,1fr) 39mm;
    gap:6mm;
    min-height:28mm;
    padding-bottom:3.2mm;
    border-bottom:0.7mm solid #173d57;
  }
  body.print-academic-certificate .certificate-card .academic-certificate-school h1 {
    color:#173d57 !important;
  }
  body.print-academic-certificate .certificate-card .academic-certificate-results > header {
    justify-content:flex-start;
    gap:2.5mm;
    margin-bottom:1.5mm;
    padding-bottom:0;
    border-bottom:0;
  }
  body.print-academic-certificate .certificate-card .academic-certificate-footer {
    margin-top:auto;
    padding-top:2.8mm;
    border-top:0;
  }
}

/* Attendance header and section switcher: full-width, balanced layout. */
.attendance-page-header {
  width:100%;
  justify-content:space-between;
}

.attendance-view-nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  padding:0;
  overflow:hidden;
  border-radius:9px;
}

.attendance-view-nav a {
  display:grid;
  min-width:0;
  min-height:56px;
  place-items:center;
  padding:.65rem;
  border-radius:0;
  text-align:center;
}

.attendance-view-nav a + a {
  border-inline-start:1px solid var(--border);
}

@media (max-width:560px) {
  .attendance-page-header {
    align-items:stretch;
    flex-direction:column;
  }

  .attendance-page-header .attendance-date-card {
    width:100%;
  }
}