/* School statistics: shared by the public /statistics page and Admin > School statistics.
   Pure CSS charts. Uses site tokens when present and falls back to its own values (the admin has none). */
.ks {
    --lv-primary: #ffd400; --lv-secondary: #0b4ba3; --lv-university: #4db6e8; --lv-tvet: #1f2937;
    --ks-ink: var(--kku-ink, #1c2430); --ks-muted: var(--kku-muted, #5f6b7a);
    --ks-surface: var(--surface, #fff); --ks-line: var(--line, #dfe5ee); --ks-tint: var(--k-tint, #eef3fa);
    --ks-royal: var(--k-royal, #0b4ba3); --ks-sky: var(--k-sky, #4db6e8);
    --ks-ok: #1f8f5f; --ks-wait: #4db6e8; --ks-pending: #ffd400;
    color: var(--ks-ink);
}
[data-bs-theme="dark"] .ks { --lv-tvet: #9fb0c6; --ks-ink: #e8edf5; --ks-muted: #a3afc0; --ks-tint: #1b2430; }

.ks-lv-primary { --lv: var(--lv-primary); --lv-ink: #14181f; }
.ks-lv-secondary { --lv: var(--lv-secondary); --lv-ink: #fff; }
.ks-lv-university { --lv: var(--lv-university); --lv-ink: #0a1a2a; }
.ks-lv-tvet { --lv: var(--lv-tvet); --lv-ink: #fff; }
i.ks-lv-primary, i.ks-lv-secondary, i.ks-lv-university, i.ks-lv-tvet, .ks-dot.ks-lv-primary, .ks-dot.ks-lv-secondary, .ks-dot.ks-lv-university, .ks-dot.ks-lv-tvet { background: var(--lv); }
.ks-rg-other { background: #9aa7b8; } .ks-rg-central { background: #0b4ba3; } .ks-rg-eastern { background: #e0b400; } .ks-rg-northern { background: #1f2937; } .ks-rg-western { background: #4db6e8; }
[data-bs-theme="dark"] .ks .ks-rg-northern { background: #9fb0c6; }

@keyframes ks-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ks-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Headline numbers */
.ks-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.ks-kpi { padding: 1.2rem 1.3rem; border-radius: 18px; background: linear-gradient(135deg, #0a0a0a 0%, #0b4ba3 70%, #4db6e8 140%); color: #fff; box-shadow: 0 12px 28px rgba(11, 75, 163, .25); }
.ks-kpi strong { display: block; font: 800 2.4rem/1 var(--font-display, 'Poppins', sans-serif); color: #ffd400; }
.ks-kpi span { display: block; margin-top: .4rem; font-size: .85rem; color: #dbe7f7; }
.ks-kpi.sm { background: var(--ks-tint); color: var(--ks-ink); box-shadow: none; }
.ks-kpi.sm strong { color: var(--ks-royal); font-size: 2rem; } [data-bs-theme="dark"] .ks .ks-kpi.sm strong { color: var(--ks-sky); }
.ks-kpi.sm span { color: var(--ks-muted); }

/* One card per level */
.ks-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.ks-level { position: relative; padding: 1.3rem 1.3rem 1.2rem; border-radius: 20px; background: var(--ks-surface); border: 1px solid var(--ks-line); box-shadow: 0 6px 20px rgba(20, 24, 31, .06); overflow: hidden; }
.ks-level::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--lv); }
.ks-level-top { display: flex; align-items: center; gap: .6rem; }
.ks-level-top i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lv); color: var(--lv-ink); font-size: 1.2rem; }
.ks-level-top h3 { margin: 0; font: 700 1.1rem/1.2 var(--font-display, 'Poppins', sans-serif); }
.ks-level-n { margin: .9rem 0 .5rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.ks-level-n strong { font: 800 2.7rem/1 var(--font-display, 'Poppins', sans-serif); }
.ks-level-n span { color: var(--ks-muted); font-size: .85rem; }
.ks-share { height: 10px; border-radius: 99px; background: var(--ks-tint); overflow: hidden; }
.ks-share i { display: block; height: 100%; width: var(--w); background: var(--lv); border-radius: 99px; transform-origin: left; animation: ks-grow 1s cubic-bezier(.2, .7, .2, 1) both; }
.ks-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; margin: .95rem 0 0; }
.ks-mini div { display: flex; justify-content: space-between; gap: .4rem; font-size: .82rem; border-top: 1px solid var(--ks-line); padding-top: .4rem; }
.ks-mini dt { color: var(--ks-muted); font-weight: 500; } .ks-mini dd { margin: 0; font-weight: 800; }
.ks-level.is-empty { background: transparent; border-style: dashed; box-shadow: none; }
.ks-level.is-empty .ks-level-n strong { color: var(--ks-muted); }
.ks-level.is-empty::before { opacity: .45; }
.ks-empty-note { color: var(--ks-muted); font-size: .9rem; margin: .4rem 0 0; }
.ks-cta { display: inline-block; margin-top: .8rem; padding: .45rem .95rem; border-radius: 99px; background: #ffd400; color: #14181f; font-weight: 700; font-size: .85rem; text-decoration: none; }
.ks-cta:hover { background: #ffe34d; color: #000; }

/* Grid of chart cards */
.ks-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.ks-card { padding: 1.5rem; border-radius: 20px; background: var(--ks-surface); border: 1px solid var(--ks-line); box-shadow: 0 6px 20px rgba(20, 24, 31, .06); min-width: 0; }
.ks-span-5 { grid-column: span 5; } .ks-span-6 { grid-column: span 6; } .ks-span-7 { grid-column: span 7; } .ks-span-12 { grid-column: span 12; }
.ks-title { margin: 0 0 1.1rem; font: 700 1.1rem/1.25 var(--font-display, 'Poppins', sans-serif); }
.ks-sub { margin: 0 0 .7rem; font: 700 .95rem/1.3 var(--font-display, 'Poppins', sans-serif); }
.ks-foot { margin: .9rem 0 0; font-size: .8rem; color: var(--ks-muted); }
.ks-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: .5rem; flex: none; }
.ks-dot.a { background: var(--ks-ok); } .ks-dot.u { background: var(--ks-wait); } .ks-dot.p { background: var(--ks-pending); }
.ks-dot.f { background: #4db6e8; } .ks-dot.m { background: #0b4ba3; }
.ks-keys { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1rem 0 0; padding: 0; font-size: .8rem; color: var(--ks-muted); }
.ks-keys li { display: flex; align-items: center; }

/* Donut */
.ks-donut { width: min(250px, 78%); aspect-ratio: 1; border-radius: 50%; margin: .2rem auto 1.3rem; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(20, 24, 31, .14); }
.ks-donut-hole { width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--ks-surface); display: grid; place-content: center; text-align: center; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .12); }
.ks-donut-hole strong { font: 800 2.8rem/1 var(--font-display, 'Poppins', sans-serif); color: var(--ks-royal); } [data-bs-theme="dark"] .ks .ks-donut-hole strong { color: var(--ks-sky); }
.ks-donut-hole span { font-size: .75rem; color: var(--ks-muted); max-width: 8.5em; }
.ks-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; }
.ks-legend li { display: flex; align-items: center; font-size: .9rem; } .ks-legend span { margin-left: auto; font-weight: 800; } .ks-legend small { font-weight: 500; color: var(--ks-muted); }

/* Insights */
.ks-says { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ks-says li { position: relative; padding: .8rem 1rem .8rem 2.6rem; border-radius: 14px; background: var(--ks-tint); line-height: 1.5; font-size: .95rem; }
.ks-says li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 12px; height: 12px; border-radius: 4px; background: #ffd400; box-shadow: 0 0 0 4px rgba(255, 212, 0, .28); }

/* Heat grid */
.ks-heat { display: grid; gap: .45rem; }
.ks-heat-row { display: grid; grid-template-columns: minmax(104px, 1.3fr) repeat(4, 1fr); gap: .45rem; align-items: stretch; }
.ks-heat-head span { font-size: .78rem; font-weight: 700; color: var(--ks-muted); text-align: center; }
.ks-heat-label { display: flex; align-items: center; font-weight: 700; font-size: .9rem; }
.ks-cell { display: grid; place-items: center; min-height: 52px; border-radius: 12px; font: 800 1.1rem/1 var(--font-display, 'Poppins', sans-serif);
    background: color-mix(in srgb, var(--lv) calc(18% + var(--i, 0) * 72%), var(--ks-tint)); color: var(--ks-ink); }
.ks-cell.ks-lv-secondary, .ks-cell.ks-lv-tvet { color: var(--ks-ink); }
.ks-cell.z { background: var(--ks-tint); color: var(--ks-muted); font-weight: 600; }

/* Stacked region bars, progress bars, plain bars */
.ks-stack, .ks-pipe, .ks-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ks-stack li { display: grid; grid-template-columns: 74px 1fr 34px; gap: .7rem; align-items: center; font-size: .9rem; }
.ks-pipe li { display: grid; grid-template-columns: 84px 1fr 54px; gap: .7rem; align-items: center; font-size: .9rem; }
.ks-bars li { display: grid; grid-template-columns: 110px 1fr 42px; gap: .7rem; align-items: center; font-size: .9rem; }
.ks-bars.compact li { grid-template-columns: 92px 1fr 34px; }
.ks-stack-label, .ks-pipe-label, .ks-bar-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-stack-n, .ks-pipe-n, .ks-bar-n { font-weight: 800; text-align: right; }
.ks-stack-track { display: flex; height: 22px; width: var(--w); min-width: 6px; border-radius: 99px; overflow: hidden; transform-origin: left; animation: ks-grow 1s cubic-bezier(.2, .7, .2, 1) both; }
.ks-stack-track i { display: block; height: 100%; }
.ks-pipe-track { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--ks-tint); }
.ks-pipe-track i { display: block; height: 100%; transform-origin: left; animation: ks-grow 1s cubic-bezier(.2, .7, .2, 1) both; }
.ks-pipe-track i.a { background: var(--ks-ok); } .ks-pipe-track i.u { background: var(--ks-wait); } .ks-pipe-track i.p { background: var(--ks-pending); }
.ks-bar-track { height: 14px; border-radius: 99px; background: var(--ks-tint); overflow: hidden; }
.ks-bar-track i { display: block; height: 100%; width: var(--w); min-width: 3px; border-radius: 99px; transform-origin: left; animation: ks-grow 1s cubic-bezier(.2, .7, .2, 1) both; }
.ks-bar-track i.ks-age { background: var(--ks-royal); }

/* Monthly columns */
.ks-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; align-items: end; height: 220px; }
.ks-col { display: grid; grid-template-rows: 18px 1fr 20px; height: 100%; text-align: center; font-size: .72rem; }
.ks-col-n { font-weight: 800; align-self: end; }
.ks-col-bar { align-self: end; height: var(--h); min-height: 2px; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 3px 3px; overflow: hidden; transform-origin: bottom; animation: ks-rise 1s cubic-bezier(.2, .7, .2, 1) both; background: var(--ks-line); }
.ks-col-bar i { display: block; width: 100%; } .ks-col-bar i.ks-other { background: #9aa7b8; }
.ks-col-label { color: var(--ks-muted); align-self: center; }

/* People */
.ks-people { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem; align-items: start; }
.ks-people-kpis { display: grid; gap: .8rem; }
.ks-split { display: flex; height: 38px; border-radius: 99px; overflow: hidden; background: var(--ks-tint); }
.ks-split i { display: grid; place-items: center; font-style: normal; color: #fff; font-size: .85rem; min-width: 34px; }
.ks-split i.f { background: #4db6e8; color: #0a1a2a; } .ks-split i.m { background: #0b4ba3; }

.ks-note { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--ks-tint); font-size: .85rem; color: var(--ks-muted); display: flex; gap: .6rem; align-items: flex-start; }
.ks-note i { color: var(--ks-royal); margin-top: .1rem; }

@media (max-width: 991px) {
    .ks-kpis, .ks-levels { grid-template-columns: repeat(2, 1fr); }
    .ks-span-5, .ks-span-6, .ks-span-7 { grid-column: span 12; }
    .ks-people { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .ks-kpis, .ks-levels { grid-template-columns: 1fr; }
    .ks-heat-row { grid-template-columns: 92px repeat(4, 1fr); gap: .3rem; }
    .ks-cell { min-height: 44px; font-size: .95rem; }
    .ks-bars li { grid-template-columns: 84px 1fr 34px; }
    .ks-legend { grid-template-columns: 1fr; }
    .ks-card { padding: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .ks-share i, .ks-stack-track, .ks-pipe-track i, .ks-bar-track i, .ks-col-bar { animation: none; } }
@media print { .ks-share i, .ks-stack-track, .ks-pipe-track i, .ks-bar-track i, .ks-col-bar { animation: none; } .ks-card, .ks-level { box-shadow: none; break-inside: avoid; } }