/* Shared student statistics fragment — public and admin contexts. */

[data-ui-student-stats] {
  --student-stats-brand: var(--tf-brand-700, #0b665f);
  --student-stats-brand-soft: var(--tf-brand-50, #effcf9);
  --student-stats-success: var(--tf-success-700, #126344);
  --student-stats-success-soft: var(--tf-success-50, #eefbf4);
  --student-stats-warning: var(--tf-warning-700, #82490c);
  --student-stats-warning-soft: var(--tf-warning-50, #fff9eb);
  --student-stats-info: var(--tf-info-700, #245b84);
  --student-stats-info-soft: var(--tf-info-50, #eff8ff);
  --student-stats-surface: var(--tf-surface, #fff);
  --student-stats-surface-soft: var(--tf-surface-soft, #f7f9f8);
  --student-stats-text: var(--tf-text, #12201e);
  --student-stats-muted: var(--tf-text-muted, #6d817d);
  --student-stats-border: var(--tf-border, #dde5e3);

  color: var(--student-stats-text);
  font-family: var(--tf-font-ui, "Cairo", "Segoe UI", Tahoma, Arial, sans-serif);
}

[data-ui-student-stats].ui-stack,
[data-ui-student-stats] .ui-stack {
  display: grid;
  gap: 1.25rem;
}

[data-ui-student-stats] .ui-card {
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--student-stats-border);
  border-radius: var(--tf-radius-md, 1rem);
  background: var(--student-stats-surface);
  box-shadow: var(--tf-shadow-xs, 0 1px 2px rgba(10, 39, 36, .04));
}

[data-ui-student-stats] .student-stats-content {
  display: grid;
  justify-items: center;
  gap: .4rem;
  text-align: center;
}

[data-ui-student-stats] .student-stats-content__eyebrow {
  color: var(--student-stats-brand);
  font-size: .75rem;
  font-weight: 800;
}

[data-ui-student-stats] .student-stats-content h2,
[data-ui-student-stats] .student-stats-section-heading h3 {
  margin: 0;
  color: var(--student-stats-text);
  font-weight: 800;
}

[data-ui-student-stats] .student-stats-content h2 { font-size: clamp(1.25rem, 3vw, 1.65rem); }
[data-ui-student-stats] .student-stats-section-heading h3 { font-size: 1rem; }

[data-ui-student-stats] :where(.ui-status, .ui-badge) {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-block-size: 1.75rem;
  padding: .25rem .65rem;
  border: 1px solid var(--student-stats-border);
  border-radius: 999px;
  background: var(--student-stats-surface-soft);
  color: var(--student-stats-muted);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-ui-student-stats] :where(.ui-status, .ui-badge)[data-tone="success"],
[data-ui-student-stats] .ui-badge--success {
  border-color: var(--tf-success-100, #d8f5e5);
  background: var(--student-stats-success-soft);
  color: var(--student-stats-success);
}

[data-ui-student-stats] :where(.ui-status, .ui-badge)[data-tone="warning"],
[data-ui-student-stats] .ui-badge--warning {
  border-color: var(--tf-warning-100, #fdefc7);
  background: var(--student-stats-warning-soft);
  color: var(--student-stats-warning);
}

[data-ui-student-stats] :where(.ui-status, .ui-badge)[data-tone="info"],
[data-ui-student-stats] .ui-badge--info {
  border-color: var(--tf-info-100, #dbeefe);
  background: var(--student-stats-info-soft);
  color: var(--student-stats-info);
}

[data-ui-student-stats] .student-stats-summary.ui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

[data-ui-student-stats] .student-stats-summary__item {
  display: grid;
  justify-items: center;
  gap: .2rem;
  text-align: center;
}

[data-ui-student-stats] .student-stats-summary__item[data-tone="info"] { background: var(--student-stats-info-soft); }
[data-ui-student-stats] .student-stats-summary__item[data-tone="success"] { background: var(--student-stats-success-soft); }
[data-ui-student-stats] .student-stats-summary__item strong { color: var(--student-stats-brand); font-size: 1.5rem; line-height: 1.25; }
[data-ui-student-stats] .student-stats-summary__item[data-tone="success"] strong { color: var(--student-stats-success); }
[data-ui-student-stats] .student-stats-summary__item span { color: var(--student-stats-muted); font-size: .78rem; font-weight: 700; }

[data-ui-student-stats] .student-stats-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: .65rem;
  border-block-end: 1px solid var(--student-stats-border);
}

[data-ui-student-stats] .student-stats-section-heading span { color: var(--student-stats-muted); font-size: .72rem; }

[data-ui-student-stats] .student-stats-history { display: grid; gap: .65rem; }
[data-ui-student-stats] .student-stats-month { overflow: hidden; border: 1px solid var(--student-stats-border); border-radius: .9rem; background: var(--student-stats-surface); }
[data-ui-student-stats] .student-stats-month .accordion-button { min-block-size: 3.25rem; padding: .8rem 1rem; background: var(--student-stats-surface-soft); color: var(--student-stats-text); box-shadow: none; }
[data-ui-student-stats] .student-stats-month .accordion-button:not(.collapsed) { background: var(--student-stats-brand-soft); color: var(--student-stats-brand); }
[data-ui-student-stats] .student-stats-month .accordion-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--student-stats-brand) 28%, transparent); outline-offset: -3px; box-shadow: none; }
[data-ui-student-stats] .student-stats-month-head { display: flex; inline-size: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding-inline-end: .35rem; }
[data-ui-student-stats] .student-stats-month-head > span:first-child { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; }
[data-ui-student-stats] .student-stats-month__body { display: grid; gap: .55rem; padding: .7rem; background: var(--student-stats-surface-soft); }

[data-ui-student-stats] .student-stat-record { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
[data-ui-student-stats] .student-stat-record__main { display: flex; min-inline-size: 0; align-items: center; gap: .8rem; }
[data-ui-student-stats] .student-stat-record__date { flex: 0 0 auto; padding: .5rem .65rem; border-radius: .65rem; background: var(--student-stats-surface-soft); color: var(--student-stats-muted); }
[data-ui-student-stats] .student-stat-record[data-tone="success"] .student-stat-record__date { background: var(--student-stats-success-soft); color: var(--student-stats-success); }
[data-ui-student-stats] .student-stat-record[data-tone="warning"] .student-stat-record__date { background: var(--student-stats-warning-soft); color: var(--student-stats-warning); }
[data-ui-student-stats] .student-stat-record__date time { font-size: .72rem; font-weight: 800; }
[data-ui-student-stats] .student-stat-record__details { display: grid; min-inline-size: 0; gap: .35rem; }
[data-ui-student-stats] .student-stat-record__notes { display: inline-flex; align-items: flex-start; gap: .35rem; color: var(--student-stats-muted); font-size: .76rem; overflow-wrap: anywhere; }
[data-ui-student-stats] .student-stat-record__notes:empty { display: none; }
[data-ui-student-stats] .student-stat-record__points { flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; }
[data-ui-student-stats] .student-stat-record__points--earned { color: var(--student-stats-brand); }
[data-ui-student-stats] .student-stat-record__points--empty { color: var(--student-stats-muted); opacity: .45; }

[data-ui-student-stats].ui-error-state,
[data-ui-student-stats] .ui-empty {
  display: grid;
  min-block-size: 12rem;
  place-items: center;
  gap: .75rem;
  padding: 1.5rem;
  border: 1px dashed var(--student-stats-border);
  border-radius: 1rem;
  background: var(--student-stats-surface-soft);
  color: var(--student-stats-muted);
  text-align: center;
}

[data-ui-student-stats] :where(.ui-empty__icon, .ui-error-state__icon) {
  display: grid;
  inline-size: 3rem;
  block-size: 3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--student-stats-brand-soft);
  color: var(--student-stats-brand);
  font-size: 1.25rem;
}

[data-ui-student-stats] .ui-error-state__icon { background: var(--tf-danger-50, #fff3f3); color: var(--tf-danger-700, #9b3030); }
[data-ui-student-stats] :where(.ui-empty__title, .ui-error-state__title, .ui-empty__message, .ui-error-state__message) { margin: 0; }
[data-ui-student-stats] :where(.ui-empty__title, .ui-error-state__title) { color: var(--student-stats-text); font-weight: 800; }
[data-ui-student-stats] :where(.ui-empty__message, .ui-error-state__message) { max-inline-size: 36ch; font-size: .85rem; }

@media (max-width: 420px) {
  [data-ui-student-stats] .student-stat-record { align-items: flex-start; }
  [data-ui-student-stats] .student-stat-record__main { align-items: flex-start; }
  [data-ui-student-stats] .student-stat-record__date { padding-inline: .5rem; }
  [data-ui-student-stats] .student-stat-record__date time { font-size: .66rem; }
  [data-ui-student-stats] .student-stats-month-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-student-stats] .student-stats-month .accordion-collapse { transition: none; }
}