/* =========================================================================
   Nova School Management — production additions on top of base.css
   (base.css = the approved prototype design system)
   No build step: these small utilities replace the Tailwind CDN used in the prototype.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html, body { margin: 0; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
table { border-collapse: collapse; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display, h1, h2, h3 { font-family: Manrope, Inter, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Utilities */
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .block { display: block; } .hidden { display: none !important; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .self-start { align-self: flex-start; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }
.p-4 { padding: 16px; } .p-5 { padding: 20px; } .px-5 { padding-left: 20px; padding-right: 20px; } .py-3 { padding-top: 12px; padding-bottom: 12px; }
.w-full { width: 100%; } .min-w-0 { min-width: 0; } .max-w-md { max-width: 480px; } .max-w-xl { max-width: 640px; } .max-w-3xl { max-width: 860px; }
.space-y-3 > * + * { margin-top: 12px; } .space-y-4 > * + * { margin-top: 16px; } .space-y-5 > * + * { margin-top: 20px; }
.text-xs { font-size: 12px; } .text-sm { font-size: 13px; } .text-base { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; }
.text-right { text-align: right; } .text-center { text-align: center; }
.text-muted { color: rgb(var(--muted)); } .text-ink { color: rgb(var(--ink)); } .text-ink2 { color: rgb(var(--ink-2)); }
.text-brand { color: rgb(var(--brand)); } .text-success { color: rgb(var(--success)); } .text-warning { color: rgb(var(--warning)); } .text-danger { color: rgb(var(--danger)); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } .break-words { overflow-wrap: anywhere; }
.overflow-hidden { overflow: hidden; } .relative { position: relative; } .border-t { border-top: 1px solid rgb(var(--line)); } .border-b { border-bottom: 1px solid rgb(var(--line)); }
.rounded { border-radius: var(--radius); } .bg-subtle { background: rgb(var(--subtle)); }
.cols-2, .cols-3, .cols-4 { display: grid; gap: 20px; }
@media (min-width: 1024px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span-2 { grid-column: span 2; } }
@media (min-width: 768px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .full { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .lg-only { display: none !important; } }
@media (min-width: 1024px) { .mobile-only { display: none !important; } }
@media (max-width: 639px) { .sm-up { display: none !important; } }
@media (min-width: 1280px) { .xl-flex { display: flex !important; } }
.icon-sm svg, svg.icon-sm { width: 14px; height: 14px; }

/* Field errors rendered by the server */
.field.is-invalid .field-error { display: flex; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgb(var(--ink-2)); cursor: pointer; }
.checkbox-row input { margin-top: 2px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; display: grid; place-items: center; color: rgb(var(--muted)); border-radius: 6px; }
.pw-toggle:hover { color: rgb(var(--ink)); background: rgb(var(--subtle)); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-meter { display: flex; gap: 4px; margin-top: 2px; }
.pw-meter span { flex: 1; height: 4px; border-radius: 4px; background: rgb(var(--line)); transition: background .2s; }
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: rgb(var(--danger)); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: rgb(var(--warning)); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: rgb(var(--brand)); }
.pw-meter[data-score="4"] span { background: rgb(var(--success)); }

/* Sidebar: modules scheduled for later phases */
.nav-soon { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; color: rgb(var(--muted)); background: rgb(var(--subtle)); border: 1px solid rgb(var(--line)); }
.nav-link.active .nav-soon { color: rgb(var(--brand)); border-color: rgb(var(--brand) / .25); background: rgb(var(--surface)); }
@media (min-width: 1024px) { .sb-collapsed .nav-soon { display: none; } }
.sb-footer form { margin: 0; }

/* Native <dialog> using the prototype's modal look */
dialog.modal { padding: 0; color: rgb(var(--ink)); }
dialog.modal::backdrop { background: rgb(2 6 23 / .5); backdrop-filter: blur(3px); }
dialog.modal[open] { display: flex; }
dialog.modal:not([open]) { display: none; }
@media (max-width: 639px) { dialog.modal { margin: auto 0 0; width: 100%; max-width: none; } }

/* Flash messages */
.toast-root .toast { margin: 0; }
.toast.tone-success .toast-ico { background: rgb(var(--success)); }

/* Login */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: rgb(var(--surface)); }
@media (max-width: 959px) { .auth-shell { grid-template-columns: 1fr; } .auth-art { display: none !important; } }
.auth-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #fff;
  background: radial-gradient(700px 360px at 85% 0%, rgb(14 165 233 / .45), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgb(37 99 235 / .55), transparent 60%), rgb(23 37 84); }
.auth-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); pointer-events: none; }
.auth-art > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .n { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.auth-brand .s { font-size: 12px; color: rgb(186 230 253 / .85); }
.auth-art h1 { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; max-width: 460px; }
.auth-art p.lead { color: rgb(219 234 254 / .85); font-size: 15px; margin-top: 14px; max-width: 440px; line-height: 1.6; }
.auth-points { display: grid; gap: 12px; margin-top: 28px; max-width: 440px; }
.auth-point { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); }
.auth-point .i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgb(255 255 255 / .12); flex-shrink: 0; }
.auth-point .i svg { width: 17px; height: 17px; }
.auth-point b { display: block; font-size: 13.5px; }
.auth-point span { font-size: 12.5px; color: rgb(219 234 254 / .8); }
.auth-foot { font-size: 12px; color: rgb(191 219 254 / .7); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; background: rgb(var(--canvas)); }
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-card .mobile-brand { display: none; }
@media (max-width: 959px) { .auth-card .mobile-brand { display: flex; } }
.auth-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.demo-box { margin-top: 20px; padding: 14px; border-radius: 12px; border: 1px dashed rgb(var(--warning) / .45); background: rgb(var(--warning) / .06); font-size: 12.5px; color: rgb(var(--ink-2)); }
.demo-box code { font-family: ui-monospace, monospace; font-size: 12px; }
.demo-pick { display: inline-flex; padding: 2px 8px; margin: 3px 4px 0 0; border-radius: 999px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); font-size: 12px; cursor: pointer; }
.demo-pick:hover { border-color: rgb(var(--brand)); color: rgb(var(--brand)); }

/* Error pages */
.error-code { font-family: Manrope, Inter, sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: rgb(var(--brand) / .2); line-height: 1; }

/* Permission matrix */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix .yes { color: rgb(var(--success)); }
.matrix .no { color: rgb(var(--line-strong)); }
.matrix .yes svg, .matrix .no svg { width: 17px; height: 17px; margin: 0 auto; }
.matrix tr.grp td { background: rgb(var(--subtle) / .7); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--muted)); padding-top: 8px; padding-bottom: 8px; }

/* Phase roadmap */
.phase-list { display: flex; flex-direction: column; }
.phase { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 13px; }
.phase + .phase { border-top: 1px solid rgb(var(--line)); }
.phase .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgb(var(--subtle)); color: rgb(var(--muted)); flex-shrink: 0; }
.phase.done .dot { background: rgb(var(--success)); color: #fff; }
.phase.now .dot { background: rgb(var(--brand)); color: #fff; }
.phase.done .dot svg { width: 13px; height: 13px; stroke-width: 3; }

pre.json { margin: 0; font: 12.5px/1.55 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; color: rgb(var(--ink-2)); }
@media (min-width: 768px) { .md-down { display: none !important; } }

/* Bell schedule */
.bell-table td { vertical-align: top; }
.bell-table .bell-idx, .bell-table .bell-dur { padding-top: 15px; }
.bell-table .field { gap: 3px; }
.bell-block { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-bottom: 4px; border-left: 3px solid rgb(var(--tone)); background: rgb(var(--tone) / .08); border-radius: 0 8px 8px 0; font-size: 12.5px; color: rgb(var(--ink)); }
.dark .bell-block { background: rgb(var(--tone) / .15); }
.bell-gap { font-size: 11px; color: rgb(var(--muted)); text-align: center; border: 1px dashed rgb(var(--line-strong)); border-radius: 6px; margin: 2px 0 6px; padding: 1px 0; }
.bell-gap.bad { color: rgb(var(--danger)); border-color: rgb(var(--danger) / .5); background: rgb(var(--danger) / .06); font-weight: 600; }
.segmented a { color: rgb(var(--muted)); height: 28px; padding: 0 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.segmented a:hover { color: rgb(var(--ink)); }
.segmented a.active { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: var(--shadow-sm); }
.dark .segmented a.active { background: rgb(var(--line)); }
.bell-table { min-width: 780px; }

/* Settings layout */
.settings-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .settings-grid { grid-template-columns: 230px minmax(0, 1fr); align-items: start; } }
.set-link { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--radius); font-size: 13.5px; font-weight: 500; color: rgb(var(--ink-2)); white-space: nowrap; border: 1px solid transparent; }
.set-link svg { width: 17px; height: 17px; color: rgb(var(--muted)); }
.set-link:hover { background: rgb(var(--subtle)); }
.set-link.active { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: var(--shadow-sm); border-color: rgb(var(--line)); }
.set-link.active svg { color: rgb(var(--brand)); }
.ta-c { text-align: center; }
.color-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
input[type=color].input { padding: 4px; height: 38px; width: 64px; cursor: pointer; }
.class-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.class-card.is-archived { opacity: .65; }

/* Timetable */
.tt-grid { min-width: 820px; table-layout: fixed; }
.tt-grid th.is-today { color: rgb(var(--brand)); }
.tt-grid td { padding: 6px !important; vertical-align: top; border-left: 1px solid rgb(var(--line)); white-space: normal; }
.tt-grid td.tt-time { border-left: 0; padding: 10px 12px 10px 20px !important; }
.tt-time b { display: block; font-size: 12.5px; color: rgb(var(--ink)); }
.tt-time span { font-size: 11.5px; color: rgb(var(--muted)); }
.tt-slot { display: flex; flex-direction: column; gap: 1px; min-height: 54px; padding: 7px 9px; border-radius: 8px; border-left: 3px solid var(--c, rgb(var(--brand))); background: color-mix(in srgb, var(--c, #2563EB) 9%, transparent); font-size: 12px; line-height: 1.3; }
.tt-slot b { font-size: 12.5px; color: rgb(var(--ink)); }
.tt-slot span { color: rgb(var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-slot.is-free { border: 1px dashed rgb(var(--line-strong)); background: none; color: rgb(var(--muted)); align-items: center; justify-content: center; flex-direction: row; gap: 4px; }
.tt-slot[data-cell] { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tt-slot[data-cell]:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tt-none { display: block; text-align: center; color: rgb(var(--line-strong)); padding-top: 16px; }
.tt-week { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tt-day.is-today { box-shadow: 0 0 0 2px rgb(var(--brand) / .35); }
.tt-day-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 12px 14px; font-weight: 700; font-family: Manrope, Inter, sans-serif; border-bottom: 1px solid rgb(var(--line)); }
.tt-lesson { display: flex; flex-direction: column; gap: 1px; margin: 8px 10px; padding: 7px 10px; border-radius: 8px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); font-size: 12.5px; color: rgb(var(--ink-2)); }
.tt-lesson b { color: rgb(var(--ink)); }
.tt-lesson:hover { box-shadow: var(--shadow-sm); }

/* Attendance register toggles (real radio buttons) */
.att-toggle { display: inline-flex; gap: 4px; }
.att-opt { position: relative; cursor: pointer; }
.att-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att-opt > span:first-of-type { display: grid; place-items: center; width: 36px; height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: rgb(var(--muted)); border: 1px solid rgb(var(--line-strong)); background: rgb(var(--surface)); transition: all .12s; }
.att-opt:hover > span:first-of-type { border-color: rgb(var(--tone)); color: rgb(var(--tone)); }
.att-opt input:checked + span { background: rgb(var(--tone)); border-color: rgb(var(--tone)); color: #fff; }
.att-opt input:focus-visible + span { box-shadow: var(--ring); }
.att-opt input:disabled + span { cursor: default; opacity: .75; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 460px; }
.cal-h { font-size: 11px; color: rgb(var(--muted)); text-align: center; font-weight: 600; }
.cal-d { height: 38px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: rgb(var(--ink-2)); background: rgb(var(--subtle)); }
.cal-d.present { background: rgb(var(--success) / .15); color: rgb(var(--success)); }
.cal-d.late { background: rgb(var(--warning) / .85); color: #fff; }
.cal-d.absent { background: rgb(var(--danger) / .9); color: #fff; }
.cal-d.excused { background: rgb(var(--neutral) / .35); color: rgb(var(--ink)); }
.cal-d.off { background: transparent; color: rgb(var(--muted) / .5); }
.cal-d.today { box-shadow: inset 0 0 0 2px rgb(var(--brand)); }

/* Grade distribution (CSS bars, no chart library) */
.grade-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 8px; }
.grade-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.grade-bar .n { font-size: 11.5px; color: rgb(var(--muted)); font-weight: 600; }
.grade-bar .trk { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.grade-bar .b { width: 100%; max-width: 38px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: rgb(var(--tone)); transition: height .2s; }
.grade-bar .g { font-size: 12px; font-weight: 700; color: rgb(var(--ink)); }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 48px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.hbar .t { height: 10px; border-radius: 99px; background: rgb(var(--subtle)); overflow: hidden; }
.hbar .t span { display: block; height: 100%; border-radius: 99px; }
/* Report card */
.report-card { max-width: 860px; margin: 0 auto; }
.report-head { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid rgb(var(--line)); }
.report-head img { width: 52px; height: 52px; }
.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; padding: 18px 24px; border-bottom: 1px solid rgb(var(--line)); }
.report-facts .l { font-size: 11.5px; color: rgb(var(--muted)); }
.report-facts .v { font-weight: 700; color: rgb(var(--ink)); }
.report-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 24px 22px; }
.report-sign div { border-top: 1px solid rgb(var(--line-strong)); padding-top: 6px; font-size: 12px; color: rgb(var(--muted)); }
@media print {
  .report-card { max-width: none; box-shadow: none !important; border: 0 !important; }
  .report-card .badge { border: 1px solid #ccc; }
}
.print-only { display: none; }
@media print { .no-print { display: none !important; } .print-only { display: block !important; } }

/* Fees: status filter cards */
.status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.status-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(var(--line)); transition: border-color .12s, background .12s; }
.status-card:hover { border-color: rgb(var(--tone) / .5); background: rgb(var(--subtle) / .5); }
.status-card.is-on { border-color: rgb(var(--tone)); box-shadow: 0 0 0 3px rgb(var(--tone) / .15); }
.status-card .dot { width: 9px; height: 9px; border-radius: 99px; background: rgb(var(--tone)); }
.inst-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid rgb(var(--line)); }
.inst-ico { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: rgb(var(--tone) / .12); color: rgb(var(--tone)); flex: none; }
.inst-ico svg { width: 16px; height: 16px; }
.receipt { max-width: 560px; margin: 0 auto; }
.receipt-amount { font-family: var(--font-display, inherit); font-weight: 800; font-size: 34px; color: rgb(var(--ink)); }
.voided-stamp { display: inline-block; border: 2px solid rgb(var(--danger)); color: rgb(var(--danger)); font-weight: 800; letter-spacing: .12em; padding: 2px 10px; border-radius: 6px; transform: rotate(-4deg); }

/* School calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid .cal-h { font-size: 11.5px; color: rgb(var(--muted)); text-align: center; font-weight: 600; padding-bottom: 2px; }
.cal-cell { min-height: 92px; border: 1px solid rgb(var(--line)); border-radius: 10px; padding: 5px 5px 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; background: rgb(var(--surface)); }
.cal-cell.off { background: rgb(var(--subtle)); }
.cal-cell.today { border-color: rgb(var(--brand)); box-shadow: inset 0 0 0 1px rgb(var(--brand)); }
.cal-num { font-size: 12px; font-weight: 700; color: rgb(var(--ink-2)); padding-left: 2px; }
.cal-cell.today .cal-num { color: rgb(var(--brand)); }
.cal-pill { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: rgb(var(--tone) / .14); color: rgb(var(--tone)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-more { font-size: 10.5px; color: rgb(var(--muted)); padding-left: 3px; }
@media (max-width: 640px) { .cal-cell { min-height: 58px; } .cal-pill { font-size: 0; padding: 0; height: 6px; border-radius: 99px; background: rgb(var(--tone)); } }

/* Reports: server-drawn charts */
.ch-line .ch-grid { stroke: rgb(var(--line)); stroke-width: 1; }
.ch-line .ch-axis { fill: rgb(var(--muted)); font-size: 10.5px; }
.ch-line .ch-path { fill: none; stroke: rgb(var(--brand)); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch-line .ch-area { fill: rgb(var(--brand) / .08); stroke: none; }
.ch-line .ch-dot { fill: rgb(var(--surface)); stroke: rgb(var(--brand)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stack-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: rgb(var(--subtle)); }
.stack-bar > span { background: rgb(var(--tone)); }
.stack-bar > span + span { margin-left: 2px; }
.report-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.kpi-note { font-size: 12px; color: rgb(var(--muted)); }
.print-head { display: none; }
@media print {
  .print-head { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid #ccc; margin-bottom: 14px; }
  .print-head img { width: 36px; height: 36px; }
  .print-area .card { box-shadow: none !important; break-inside: avoid; }
  .print-area .table-wrap { overflow: visible !important; max-height: none !important; }
  .print-area .stat-strip, .print-area .stat-grid { break-inside: avoid; }
}
.grade-bars.dense { gap: 3px; } .grade-bars.dense .n, .grade-bars.dense .g { font-size: 9.5px !important; }

/* School banner (letterhead): flush with the top and stretched edge to edge */
.letterhead { margin: 0; padding: 0; line-height: 0; background: #fff; }
.letterhead img { display: block; width: 100%; height: auto; max-width: none; }
.banner-preview { border: 1px solid rgb(var(--line)); border-radius: 12px; overflow: hidden; background: #fff; }
.banner-preview img { display: block; width: 100%; height: auto; }
.banner-empty { display: flex; align-items: center; gap: 12px; border: 1px dashed rgb(var(--line-strong)); border-radius: 12px; padding: 18px; color: rgb(var(--muted)); }
.banner-empty svg { width: 28px; height: 28px; flex: none; }
.report-head.has-banner { border-bottom: 0; padding-top: 14px; }
@media print {
  @page { margin: 8mm; }
  .letterhead { padding: 0; margin: 0 0 10px; }
  .letterhead.print-only { display: block !important; }
  .letterhead img { width: 100%; height: auto; }
  .print-area .letterhead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Class results sheet: every column must fit on the printed page (landscape, compact) */
@media print {
  @page sheet { size: A4 landscape; margin: 8mm; }
  .class-sheet { page: sheet; }
  .class-sheet .table-wrap, .class-sheet .thin-scroll { overflow: visible !important; max-height: none !important; }
  .class-sheet table { width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: collapse; }
  .class-sheet th, .class-sheet td { padding: 3px 4px !important; font-size: 9.5px !important; line-height: 1.25 !important; border-bottom: 1px solid #ddd; }
  .class-sheet th { white-space: nowrap; color: #333 !important; }
  .class-sheet td { white-space: nowrap; }
  .class-sheet .person { gap: 0; }
  .class-sheet .person .avatar, .class-sheet .person [class*="avatar"] { display: none !important; }
  .class-sheet .person span { max-width: none !important; white-space: normal !important; }
  .class-sheet .badge { font-size: 8.5px !important; padding: 0 4px !important; border: 1px solid #ccc; }
  .class-sheet .color-dot { width: 6px !important; height: 6px !important; }
}

/* Dashboard stat rows: exactly three cards per line; a short last row stretches so no slot is left empty */
.stat-grid.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .stat-grid.stat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-grid-3 > :last-child:nth-child(odd) { grid-column: span 2; } }
@media (max-width: 479px) { .stat-grid.stat-grid-3 { grid-template-columns: 1fr; } .stat-grid-3 > :last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 900px) {
  .stat-grid-3 > :last-child:nth-child(3n+1) { grid-column: span 3; }
  .stat-grid-3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
}

.demo-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: rgb(var(--warning) / .18); color: rgb(var(--warning)); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.demo-card { text-align: left; padding: 9px 11px; border-radius: 10px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.demo-card b { font-size: 13px; color: rgb(var(--ink)); text-transform: capitalize; }
.demo-card span { font-size: 11px; color: rgb(var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-card:hover { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }