body {
  background: #f4f6f9;
}

/* Optional portal background image (Admin → Settings), applied to admin and
   teacher screens only. A light, mostly-opaque overlay of the normal page
   color sits between the image and the content so the picture reads as a
   subtle backdrop rather than competing with text/cards — the image only
   really shows through the empty margins around the white cards. The URL
   itself is set inline (see partials/nav.ejs) since it's a per-school value
   from settings, not something that belongs in this static stylesheet. */
body.has-portal-bg {
  background-image: linear-gradient(rgba(244, 246, 249, 0.86), rgba(244, 246, 249, 0.86)), var(--portal-bg-url);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  /* background-attachment: fixed renders unreliably on some mobile browsers
     (notably iOS Safari) — fall back to a normal scrolling background there. */
  body.has-portal-bg {
    background-attachment: scroll;
  }
}
@media print {
  body.has-portal-bg {
    background-image: none !important;
  }
}
.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: none;
}
.stat-card {
  border-radius: 10px;
}
table input.form-control {
  min-width: 70px;
}

/*
 * The report card is deliberately styled the SAME on screen as it will be
 * printed (a "paper preview" look, fixed to A4-portrait proportions)
 * rather than a spacious desktop layout that gets squeezed at print time.
 * That keeps the on-screen view an honest preview of what will come out
 * of the printer, and lets the auto-fit script in report_card.ejs measure
 * it reliably (a browser only swaps to the @media print rules at the
 * moment it's actually rendering the print output, not just before — so
 * anything that only differs "at print time" can't be trusted for
 * measurement).
 */
.report-card {
  background: #fff;
  border: 1px solid #333;
  width: 733px;   /* ~ A4 portrait usable width: 210mm - 2x8mm margin, at 96 CSS px/in */
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 18px;
  font-size: 0.74rem;
}
.report-card table {
  width: 100%;
}
.report-card h3 { font-size: 1.15rem; }
/*
 * Subject/marks table: sized a notch larger than the rest of the card so
 * it stays the most legible section on a printed page (this is what a
 * parent squints at hardest). The graduated .rc-shrink-1/2/3 tiers below
 * still take over and shrink it back down automatically for classes with
 * enough subjects that this larger sizing would spill onto a 2nd page.
 */
.rc-table {
  table-layout: fixed;
  width: 100%;
}
.rc-table th, .rc-table td {
  font-size: 0.78rem !important;
  padding: 5px 7px !important;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
}
/* Only the free-text teacher's comment column needs a hard break-word
   fallback (a long unbroken word could otherwise overflow the fixed
   column width); every other column is sized generously enough that
   plain word-wrapping (breaking at spaces / the <br/> in header labels)
   is enough and looks cleaner than mid-word hyphenation. */
.rc-table .rc-comment-col {
  overflow-wrap: break-word;
  word-break: break-word;
}
.rc-table thead th {
  background: #eaf3fb !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-size: 0.7rem !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rc-table.table-bordered, .rc-table.table-bordered th, .rc-table.table-bordered td { border: 1px solid #6c8fb0 !important; }
.rc-info td { padding: 2px 7px !important; font-size: 0.7rem !important; }
.rc-info .label { font-weight: 700; background: #eaf3fb; width: 22%; }
.band-badge { font-size: 0.95rem; padding: 6px 14px; border-radius: 8px; font-weight: 700; }
.band-Pass-with-Distinction { background: #d7f3df; color: #1a7a37; }
.band-Pass-with-Merit { background: #d9ecfb; color: #145a8a; }
.band-Achieved { background: #fff2cc; color: #8a6d00; }
.band-Yet-to-Achieve { background: #fbdcdc; color: #a3262b; }
.grade-row-A, .grade-row-Pass-with-Distinction { background: #d7f3df; }
.grade-row-B, .grade-row-Pass-with-Merit { background: #d9ecfb; }
.grade-row-C, .grade-row-Achieved { background: #fff2cc; }
.grade-row-D, .grade-row-E, .grade-row-Yet-to-Achieve { background: #fbdcdc; }
/* Achievement Grade badge: colored per letter grade (green=A, blue=B,
   amber=C, orange=D, red=E) via an inline background-color set per-row in
   report_card.ejs, this class just supplies the shared shape/text styling. */
.grade-badge {
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report-card table.table-sm th, .report-card table.table-sm td { padding: 2px 5px !important; font-size: 0.68rem; }
.report-card small { font-size: 0.66rem; }

/* Bar chart legend swatches (gradients set inline per-swatch in the EJS) */
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Authenticity QR code, printed between the two signature lines */
.qr-verify-img {
  width: 82px;
  height: 82px;
  image-rendering: pixelated;
}
.qr-verify-caption {
  font-size: 0.56rem;
  color: #555;
  max-width: 140px;
  margin: 2px auto 0;
  line-height: 1.15;
}

@page {
  size: A4 portrait;
  margin: 8mm;
}
@media print {
  nav, .no-print {
    display: none !important;
  }
  html, body {
    background: #fff;
    height: auto;
  }
  .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .report-card {
    border: none;
    box-shadow: none;
    width: 100% !important;
  }
}

/*
 * Graduated fallback tiers for classes with more subjects than usual, or a
 * long form-teacher comment — anything that pushes the base sizing above
 * one A4 portrait page. report_card.ejs measures actual rendered height
 * and adds these classes one at a time (via real font-size/padding, which
 * genuinely reflows layout) until it fits. NOTE: a CSS `transform: scale()`
 * was tried first and rejected — transforms only affect paint, not the
 * layout box that the print pagination engine measures, so it never
 * actually prevented a second page despite visually looking smaller.
 */
.report-card.rc-shrink-1 { font-size: 0.66rem; padding: 10px 14px; }
.report-card.rc-shrink-1 h3 { font-size: 1.02rem; }
.report-card.rc-shrink-1 .rc-table th, .report-card.rc-shrink-1 .rc-table td { font-size: 0.6rem !important; padding: 1px 3px !important; }
.report-card.rc-shrink-1 .rc-info td { font-size: 0.62rem !important; padding: 1px 5px !important; }
.report-card.rc-shrink-1 table.table-sm th, .report-card.rc-shrink-1 table.table-sm td { font-size: 0.58rem !important; padding: 1px 3px !important; }
.report-card.rc-shrink-1 .mb-2 { margin-bottom: 0.2rem !important; }
.report-card.rc-shrink-1 .mb-3 { margin-bottom: 0.3rem !important; }
.report-card.rc-shrink-1 .p-2 { padding: 0.2rem !important; }
.report-card.rc-shrink-1 .qr-verify-img { width: 66px; height: 66px; }
.report-card.rc-shrink-1 .qr-verify-caption { font-size: 0.48rem; }

.report-card.rc-shrink-2 { font-size: 0.56rem; padding: 8px 12px; }
.report-card.rc-shrink-2 h3 { font-size: 0.9rem; }
.report-card.rc-shrink-2 .rc-table th, .report-card.rc-shrink-2 .rc-table td { font-size: 0.52rem !important; padding: 1px 2px !important; }
.report-card.rc-shrink-2 .rc-info td { font-size: 0.54rem !important; padding: 1px 4px !important; }
.report-card.rc-shrink-2 table.table-sm th, .report-card.rc-shrink-2 table.table-sm td { font-size: 0.5rem !important; padding: 1px 2px !important; }
.report-card.rc-shrink-2 .mb-2 { margin-bottom: 0.12rem !important; }
.report-card.rc-shrink-2 .mb-3 { margin-bottom: 0.18rem !important; }
.report-card.rc-shrink-2 .p-2 { padding: 0.12rem !important; }
.report-card.rc-shrink-2 .qr-verify-img { width: 52px; height: 52px; }
.report-card.rc-shrink-2 .qr-verify-caption { font-size: 0.42rem; }
/* From shrink-2 on, the bar chart is the biggest remaining block for a
   class with many subjects — cap its height directly (JS switches the SVG
   to preserveAspectRatio="none" at this tier so it flattens instead of
   just leaving blank space around a smaller image). */
.report-card.rc-shrink-2 svg { height: 110px !important; }

.report-card.rc-shrink-3 { font-size: 0.48rem; padding: 6px 10px; }
.report-card.rc-shrink-3 h3 { font-size: 0.8rem; }
.report-card.rc-shrink-3 .rc-table th, .report-card.rc-shrink-3 .rc-table td { font-size: 0.44rem !important; padding: 0px 2px !important; }
.report-card.rc-shrink-3 .rc-info td { font-size: 0.46rem !important; padding: 0px 3px !important; }
.report-card.rc-shrink-3 table.table-sm th, .report-card.rc-shrink-3 table.table-sm td { font-size: 0.42rem !important; padding: 0px 2px !important; }
.report-card.rc-shrink-3 .mb-2 { margin-bottom: 0.08rem !important; }
.report-card.rc-shrink-3 .mb-3 { margin-bottom: 0.12rem !important; }
.report-card.rc-shrink-3 .p-2 { padding: 0.08rem !important; }
.report-card.rc-shrink-3 svg { height: 70px !important; }
/* Even at the smallest tier, keep the QR at a size a phone camera can
   still realistically scan on a printed page rather than shrinking it
   in lockstep with everything else. */
.report-card.rc-shrink-3 .qr-verify-img { width: 54px; height: 54px; }
.report-card.rc-shrink-3 .qr-verify-caption { display: none; }

/*
 * Admin left-hand sidebar navigation (desktop/tablet, >= 768px).
 * On narrower screens (see nav.ejs) a normal collapsible top navbar is
 * shown instead and none of this applies, since .admin-sidebar is
 * `d-none d-md-flex`.
 */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background: #212529;
  z-index: 1030;
  padding: 0;
  overflow-y: auto;
}
.admin-sidebar-brand {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  padding: 18px 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.admin-sidebar-brand:hover {
  color: #fff;
}
.admin-sidebar .admin-nav-links {
  padding: 10px 0;
}
.admin-sidebar .admin-nav-links .nav-item {
  width: 100%;
}
/* A small color-coded dot per section (applies in both the desktop sidebar
   and the mobile collapsible bar) so the nav reads as organized groups of
   related tasks at a glance, instead of one long undifferentiated list of
   links. Colors are decorative only — every link keeps identical
   text/behavior, so this doesn't affect accessibility of the nav itself. */
.admin-nav-links a.nav-link {
  --nav-color: #4dabf7;
  --nav-bg: rgba(77, 171, 247, 0.16);
  position: relative;
}
.admin-nav-links a.nav-link::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nav-color);
}
.admin-sidebar .admin-nav-links a.nav-link {
  color: rgba(255, 255, 255, 0.75);
  padding: 10px 18px 10px 34px;
  border-left: 3px solid transparent;
  font-size: 0.92rem;
  white-space: nowrap;
}
.admin-sidebar .admin-nav-links a.nav-link:hover {
  color: #fff;
  background: var(--nav-bg);
}
.admin-sidebar .admin-nav-links a.nav-link.active {
  color: #fff;
  background: var(--nav-bg);
  border-left-color: var(--nav-color);
  font-weight: 600;
}

/* Per-section accent colors, grouped loosely by theme:
   overview (blue), people (teal/violet), academic setup (orange/cyan/pink),
   records (green/amber/red), output (sky), config (neutral gray). */
.admin-nav-links a.nav-link.nav-dashboard   { --nav-color: #4dabf7; --nav-bg: rgba(77, 171, 247, 0.16); }
.admin-nav-links a.nav-link.nav-teachers    { --nav-color: #20c997; --nav-bg: rgba(32, 201, 151, 0.16); }
.admin-nav-links a.nav-link.nav-subjects    { --nav-color: #845ef7; --nav-bg: rgba(132, 94, 247, 0.16); }
.admin-nav-links a.nav-link.nav-classes     { --nav-color: #ff922b; --nav-bg: rgba(255, 146, 43, 0.16); }
.admin-nav-links a.nav-link.nav-assignments { --nav-color: #22b8cf; --nav-bg: rgba(34, 184, 207, 0.16); }
.admin-nav-links a.nav-link.nav-assessments { --nav-color: #f06595; --nav-bg: rgba(240, 101, 149, 0.16); }
.admin-nav-links a.nav-link.nav-students    { --nav-color: #51cf66; --nav-bg: rgba(81, 207, 102, 0.16); }
.admin-nav-links a.nav-link.nav-comments    { --nav-color: #fcc419; --nav-bg: rgba(252, 196, 25, 0.16); }
.admin-nav-links a.nav-link.nav-grades      { --nav-color: #ff6b6b; --nav-bg: rgba(255, 107, 107, 0.16); }
.admin-nav-links a.nav-link.nav-reports     { --nav-color: #339af0; --nav-bg: rgba(51, 154, 240, 0.16); }
.admin-nav-links a.nav-link.nav-settings    { --nav-color: #adb5bd; --nav-bg: rgba(173, 181, 189, 0.16); }

/* Page header banner — gives each admin page a background tint that matches
   its own sidebar nav item's color, so the color-coding in the nav carries
   through onto the page itself instead of stopping at the sidebar. Same
   hex/opacity values as the .nav-* classes above, just applied to a page
   header block instead of a nav link. */
.page-header {
  background: var(--accent-bg, rgba(77, 171, 247, 0.14));
  border-left: 4px solid var(--accent-color, #4dabf7);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 1.25rem;
}
.page-header h3, .page-header h4 {
  margin-bottom: 0.15rem;
}
.page-header p.text-muted {
  margin-bottom: 0;
}
.page-accent-dashboard   { --accent-color: #4dabf7; --accent-bg: rgba(77, 171, 247, 0.14); }
.page-accent-teachers    { --accent-color: #20c997; --accent-bg: rgba(32, 201, 151, 0.14); }
.page-accent-subjects    { --accent-color: #845ef7; --accent-bg: rgba(132, 94, 247, 0.14); }
.page-accent-classes     { --accent-color: #ff922b; --accent-bg: rgba(255, 146, 43, 0.14); }
.page-accent-assignments { --accent-color: #22b8cf; --accent-bg: rgba(34, 184, 207, 0.14); }
.page-accent-assessments { --accent-color: #f06595; --accent-bg: rgba(240, 101, 149, 0.14); }
.page-accent-students    { --accent-color: #51cf66; --accent-bg: rgba(81, 207, 102, 0.14); }
.page-accent-comments    { --accent-color: #fcc419; --accent-bg: rgba(252, 196, 25, 0.14); }
.page-accent-grades      { --accent-color: #ff6b6b; --accent-bg: rgba(255, 107, 107, 0.14); }
.page-accent-reports     { --accent-color: #339af0; --accent-bg: rgba(51, 154, 240, 0.14); }
.page-accent-settings    { --accent-color: #adb5bd; --accent-bg: rgba(173, 181, 189, 0.14); }

/* The mobile top navbar reuses .admin-nav-links but lays links out
   horizontally inside a collapsible bar rather than a vertical list — give
   the dot a touch more breathing room there so it doesn't crowd the text. */
.navbar .admin-nav-links a.nav-link {
  padding-left: 30px;
}
.navbar .admin-nav-links a.nav-link::before {
  left: 12px;
}
.admin-sidebar-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  body.has-admin-sidebar {
    padding-left: 220px;
  }
}

/* The mobile top navbar's own nav-links share the .admin-nav-links class
   for active-link highlighting, but shouldn't pick up the sidebar's
   vertical/dark styling rules above (those are scoped under
   .admin-sidebar so this is automatic) — the mobile bar keeps Bootstrap's
   normal navbar-dark bg-dark look, just with an .active accent added. */
.navbar .admin-nav-links a.nav-link.active {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

@media print {
  .admin-sidebar {
    display: none !important;
  }
  body.has-admin-sidebar {
    padding-left: 0 !important;
  }
}

/* Small "Developed by" credit badge, shown on every logged-in admin/teacher
   page — fixed to a corner so it never pushes page content around, and
   deliberately minimal (a small round photo + name) to stay out of the way. */
.dev-credit {
  position: fixed;
  bottom: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font-size: 0.72rem;
  color: #555;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
  z-index: 1020;
  white-space: nowrap;
}
.dev-credit img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .dev-credit {
    font-size: 0.62rem;
    padding: 3px 9px 3px 3px;
    bottom: 8px;
    right: 8px;
  }
  .dev-credit img {
    width: 18px;
    height: 18px;
  }
}
@media print {
  .dev-credit {
    display: none !important;
  }
}