/*
 * Sukud design system - reports
 * Report cards and class reports: a sheet that reads on screen and
 * prints cleanly on A4.
 */

.sk-report {
  display: flex; flex-direction: column; gap: 28px;
  width: 100%; max-width: 860px;
  margin-inline: auto;
  padding: clamp(18px, 4vw, 40px);
  border: 1px solid var(--sk-border-subtle);
  border-radius: 24px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-md);
  container-type: inline-size;
}
[data-theme="dark"] .sk-report { border-color: var(--sk-border); }

.sk-report__header { display: flex; flex-direction: column; gap: 18px; }
.sk-report__brand { display: flex; align-items: center; gap: 10px; }
.sk-report__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--sk-brand-9), var(--sk-violet-9)); color: #fff; }
.sk-report__school { font-family: var(--sk-font-display); font-weight: var(--sk-weight-bold); letter-spacing: -0.01em; }
.sk-report__brand { flex-wrap: wrap; }
.sk-report__actions { display: flex; gap: 6px; margin-inline-start: auto; }
@container (max-width: 520px) { .sk-report__actions { order: 3; width: 100%; margin: 4px 0 0; } }
.sk-report__title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sk-report__title { font-family: var(--sk-font-display); font-size: var(--sk-display-md); font-weight: var(--sk-weight-black); letter-spacing: var(--sk-tracking-display); line-height: 1.05; text-wrap: balance; }
.sk-report__subtitle { margin-top: 6px; color: var(--sk-fg-muted); }
.sk-report__person { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: var(--sk-radius-full); background: var(--sk-surface-sunken); }
.sk-report__person-text { display: flex; flex-direction: column; line-height: 1.25; }
.sk-report__person small { font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }
.sk-report__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 0; padding: 12px 0; border-block: 1px solid var(--sk-border-subtle); }
.sk-report__details > div { display: flex; flex-direction: column; gap: 1px; padding: 2px 14px 2px 0; }
.sk-report__details dt { font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-caps); text-transform: uppercase; color: var(--sk-fg-subtle); }
.sk-report__details dd { margin: 0; font-weight: var(--sk-weight-semibold); }

.sk-report__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sk-report-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, var(--t-subtle), var(--sk-surface-sunken)); }
.sk-report-stat__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); color: var(--sk-fg-muted); }
.sk-report-stat__label .sk-icon { color: var(--t-text); }
.sk-report-stat__value { display: flex; align-items: baseline; gap: 3px; font-family: var(--sk-font-display); font-size: var(--sk-text-2xl); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--t-text-strong, var(--sk-fg)); }
.sk-report-stat__value small { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-bold); color: var(--sk-fg-muted); letter-spacing: 0; }
.sk-report-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); }
.sk-report-stat__delta.is-up { color: var(--sk-green-11); }
.sk-report-stat__delta.is-down { color: var(--sk-red-11); }
.sk-report-stat__delta.is-flat { color: var(--sk-fg-subtle); }
.sk-report-stat__note { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }

.sk-report__section { display: flex; flex-direction: column; gap: 14px; break-inside: avoid; }
.sk-report__section-head { display: flex; align-items: flex-start; gap: 12px; }
.sk-report__section-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--sk-fg); color: var(--sk-fg-inverse); font-size: var(--sk-text-xs); font-weight: var(--sk-weight-bold); }
.sk-report__section-title { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); font-weight: var(--sk-weight-bold); letter-spacing: -0.02em; }
.sk-report__section-desc { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); margin-top: 2px; }

.sk-report-grades { display: flex; flex-direction: column; }
.sk-report-grades__row { --subject-rgb: var(--sk-brand-rgb); display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) 56px minmax(140px, 1.6fr); gap: 14px; align-items: center; padding: 11px 4px; }
.sk-report-grades__row + .sk-report-grades__row { border-top: 1px solid var(--sk-border-subtle); }
.sk-report-grades__row.is-head { padding-block: 0 8px; font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-caps); text-transform: uppercase; color: var(--sk-fg-subtle); }
.sk-report-grades__subject { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-report-grades__subject > i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--subject-rgb)); }
.sk-report-grades__subject > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sk-report-grades__subject b { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); }
.sk-report-grades__subject small { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-report-grades__score { display: flex; align-items: center; gap: 10px; }
.sk-report-grades__score b { min-width: 2.2ch; font-variant-numeric: tabular-nums; font-weight: var(--sk-weight-bold); }
.sk-report-grades__bar { flex: 1; height: 7px; border-radius: 99px; background: var(--sk-surface-sunken); overflow: hidden; }
.sk-report-grades__bar i { display: block; height: 100%; border-radius: inherit; background: var(--t-solid); transform-origin: left; animation: sk-bar-across 0.9s var(--sk-ease-glide) both; }
.sk-report-grades__grade { display: grid; place-items: center; width: 40px; height: 30px; border-radius: var(--sk-radius-full); background: var(--t-soft); color: var(--t-text); font-family: var(--sk-font-display); font-weight: var(--sk-weight-black); }
.sk-report-grades__remark { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-report-grades__row.is-head .sk-report-grades__remark { font-size: inherit; color: inherit; }
@container (max-width: 620px) {
  .sk-report-grades__row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .sk-report-grades__row.is-head { display: none; }
  .sk-report-grades__score { grid-column: 1 / -1; grid-row: 2; }
  .sk-report-grades__grade { grid-column: 2; grid-row: 1; }
  .sk-report-grades__remark { grid-column: 1 / -1; }
  .sk-report-grades__remark:empty { display: none; }
}

.sk-report-comment { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--sk-surface-sunken); break-inside: avoid; }
.sk-report-comment__mark { position: absolute; top: -12px; left: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sk-brand-9); color: #fff; box-shadow: 0 0 0 4px var(--sk-surface); }
.sk-report-comment__text { margin: 4px 0 0; font-size: var(--sk-text-md); line-height: 1.65; text-wrap: pretty; }
.sk-report-comment__by { display: flex; align-items: center; gap: 10px; }
.sk-report-comment__who { display: flex; flex-direction: column; line-height: 1.25; }
.sk-report-comment__by b { font-size: var(--sk-text-sm); }
.sk-report-comment__by small { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }

.sk-report-signoff { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding-top: 8px; break-inside: avoid; }
.sk-report-signoff__item { display: flex; flex-direction: column; gap: 2px; }
.sk-report-signoff__line { display: flex; align-items: flex-end; height: 46px; margin-bottom: 6px; border-bottom: 1.5px solid var(--sk-border-strong); }
.sk-report-signoff__sig { font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive; font-size: 1.45rem; color: var(--sk-brand-11); transform: rotate(-3deg); transform-origin: left bottom; padding: 0 0 4px 4px; }
.sk-report-signoff__item b { font-size: var(--sk-text-sm); }
.sk-report-signoff__item small { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-report-signoff__ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-bold); color: var(--sk-green-11); }

@media print {
  .sk-report { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sk-report__actions, .sk-report .sk-btn, .sk-report [data-sk-no-print] { display: none !important; }
  .sk-report * { animation: none !important; transition: none !important; }
  /* Only on a page whose report is print-only (ui.report(print_only=True),
     or SK.printReport) does the report replace everything else. */
  html:has([data-sk-print-only]), body:has([data-sk-print-only]) { background: #fff !important; }
  body:has([data-sk-print-only]) * { visibility: hidden; }
  body:has([data-sk-print-only]) [data-sk-print-only], body:has([data-sk-print-only]) [data-sk-print-only] * { visibility: visible; }
  [data-sk-print-only] { position: absolute; inset: 0 0 auto; max-width: none; padding: 0; border: 0; border-radius: 0; }
}

/* Points on a report (ui.report_points) */
.sk-report-points { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-report-points li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.sk-report-points__mark { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--t-soft); color: var(--t-text); flex-shrink: 0; }
.sk-report-points__mark .sk-icon { stroke-width: 2.6; }
/* Two report sections side by side when there is room (strengths, to work on). */
.sk-report__two { display: grid; gap: 28px; }
@container (min-width: 640px) { .sk-report__two { grid-template-columns: 1fr 1fr; } }