/* ============================================================
   Reports & Analytics (desk/staff) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--outline from elements.css.

   DESK page: renders under the default .app-screen light palette. This
   stylesheet references only --t-* / --mea-* tokens (rebound per theme
   in app/theme.css), so the same markup reskins without role-specific
   color rules here. See docs/FRONTEND-ARCHITECTURE.md.

   The genuinely dynamic per-segment bar widths and SVG swatch colours
   are written by the controller's _applyDynamicStyles (the documented
   CSSOM exception); their values are --mea-* tokens, not paint authored
   here.
   ============================================================ */

@layer layout {
  .reports__intro { display: grid; gap: var(--mea-space-1); }
  .reports__content { display: grid; gap: var(--mea-space-5); }

  /* Two-up panels that stack when the page column is narrow. */
  .reports__pair { display: grid; gap: var(--mea-space-5); grid-template-columns: 1fr; }
  @container (min-width: 44rem) { .reports__pair { grid-template-columns: repeat(2, 1fr); } }

  /* Alerts (load error, partial warning). */
  .reports-alert { display: grid; gap: var(--mea-space-2); justify-items: start;
                   padding: var(--mea-space-4) var(--mea-space-5); border-radius: var(--mea-radius-lg); }
  .reports-alert__title, .reports-alert__detail { margin: 0; }

  .reports-empty { padding: var(--mea-space-6); border-radius: var(--mea-radius-xl); }
  .reports-empty__text { margin: 0; }

  /* Generic panel: titled card with a body. */
  .reports-panel { display: grid; gap: var(--mea-space-4); align-content: start;
                   padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .reports-panel__title { margin: 0; }
  .reports-panel__body { display: grid; gap: var(--mea-space-3); align-content: start; }
  .reports-panel__summary, .reports-panel__empty { margin: 0; }

  /* Savings hero. */
  .reports-savings { display: grid; gap: var(--mea-space-1); justify-items: center;
                     text-align: center; padding: var(--mea-space-8) var(--mea-space-5);
                     border-radius: var(--mea-radius-2xl); }
  .reports-savings__value, .reports-savings__caption, .reports-savings__basis { margin: 0; }

  /* KPI row: four figures, wrapping down to one column. */
  .reports-kpis { display: grid; grid-template-columns: repeat(4, 1fr);
                  gap: var(--mea-space-4); margin: 0; }
  .reports-kpi { display: grid; gap: var(--mea-space-1); align-content: start;
                 padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); }
  .reports-kpi__label, .reports-kpi__value, .reports-kpi__sub { margin: 0; }
  @container (max-width: 52rem) { .reports-kpis { grid-template-columns: repeat(2, 1fr); } }
  @container (max-width: 26rem) { .reports-kpis { grid-template-columns: 1fr; } }

  /* Language distribution rows: code+label, value, then a progress track. */
  .lang-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .lang-row { display: grid; grid-template-columns: 1fr auto; gap: var(--mea-space-1) var(--mea-space-3);
              align-items: center; }
  .lang-row__main { display: flex; align-items: baseline; gap: var(--mea-space-2); min-inline-size: 0; }
  .lang-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lang-row__value { justify-self: end; white-space: nowrap; }
  .lang-row__track { grid-column: 1 / -1; block-size: var(--mea-space-2);
                     border-radius: var(--mea-radius-pill); overflow: hidden; }
  .lang-row__fill { display: block; block-size: 100%; border-radius: var(--mea-radius-pill); }

  /* Deal failure: two headline figures, then a small stat list. */
  .failure-headline { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mea-space-4); }
  .failure-figure { display: grid; gap: var(--mea-space-1); }
  .failure-figure__value, .failure-figure__label { margin: 0; }
  .failure-list { display: grid; gap: var(--mea-space-2); margin: 0; }
  .failure-stat { display: flex; align-items: baseline; justify-content: space-between;
                  gap: var(--mea-space-3); margin: 0; }
  .failure-stat__label, .failure-stat__value { margin: 0; }

  /* Donut: chart beside a legend, stacking when cramped. */
  .donut { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-4);
           align-items: center; }
  @container (max-width: 28rem) { .donut { grid-template-columns: 1fr; justify-items: center; } }
  .donut__chart { position: relative; display: grid; place-items: center; margin: 0;
                  inline-size: 180px; block-size: 180px; }
  .donut__center { position: absolute; inset: 0; display: grid; place-content: center;
                   gap: var(--mea-space-1); text-align: center; }
  .donut__value, .donut__caption { display: block; }
  .donut-legend { display: grid; gap: var(--mea-space-2); margin: 0; padding: 0; list-style: none; }
  .donut-legend__item { display: grid; grid-template-columns: auto 1fr auto;
                        gap: var(--mea-space-2); align-items: center; }
  .donut-legend__swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--mea-radius-sm); }
  .donut-legend__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .donut-legend__count { justify-self: end; }

  /* Completion timeline: stacked horizontal bars + a legend. */
  .timeline { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .timeline-bar { display: grid; gap: var(--mea-space-1); }
  .timeline-bar__head { display: flex; align-items: baseline; justify-content: space-between;
                        gap: var(--mea-space-2); }
  .timeline-bar__label, .timeline-bar__total { margin: 0; }
  .timeline-bar__track { display: flex; block-size: 1.5rem; border-radius: var(--mea-radius-sm);
                         overflow: hidden; }
  .timeline-bar__fill { display: inline-flex; align-items: center; justify-content: center;
                        min-inline-size: 0; }
  .timeline-legend { display: flex; flex-wrap: wrap; gap: var(--mea-space-4);
                     margin: 0; padding: 0; list-style: none; }
  .timeline-legend__item { display: inline-flex; align-items: center; gap: var(--mea-space-2); }
  .timeline-legend__dot { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--mea-radius-circle); }

  /* Cost savings: icon + label rows with a right-aligned figure. */
  .cost-list { display: grid; gap: var(--mea-space-3); margin: 0; }
  .cost-row { display: flex; align-items: center; justify-content: space-between;
              gap: var(--mea-space-3); margin: 0; }
  .cost-row__label { display: inline-flex; align-items: center; gap: var(--mea-space-3); margin: 0; }
  .cost-row__icon { display: inline-flex; }
  .cost-row__value { margin: 0; white-space: nowrap; }

  /* Staff hours: three figures side by side. */
  .staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-4); margin: 0; }
  .staff-stat { display: grid; gap: var(--mea-space-1); justify-items: center; text-align: center;
                padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); }
  .staff-stat__label, .staff-stat__value, .staff-stat__sub { margin: 0; }
  @container (max-width: 30rem) { .staff-grid { grid-template-columns: 1fr; } }

  /* Jail impact: header, then a dense grid of bed-day blocks. */
  .jail { display: grid; gap: var(--mea-space-3); }
  .jail__header { display: grid; gap: var(--mea-space-1); }
  .jail__title, .jail__subtitle { margin: 0; }
  .jail__grid { display: flex; flex-wrap: wrap; gap: var(--mea-space-1); }
  .jail-block { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--mea-radius-sm); }
  .jail__footnote, .jail__none { margin: 0; }
}

@layer design {
  .reports__title { font-family: var(--mea-font-heading); font-size: var(--mea-text-2xl);
                    font-weight: var(--mea-w-bold); color: var(--t-text); }
  .reports__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Alerts. */
  .reports-alert--error { background: var(--t-card-bg); border: 1px solid var(--t-error);
                          box-shadow: var(--mea-shadow-sm); }
  .reports-alert--warning { background: var(--t-card-bg); border: 1px solid var(--t-warning);
                            box-shadow: var(--mea-shadow-sm); }
  .reports-alert__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                          color: var(--t-text); }
  .reports-alert--error .reports-alert__title { color: var(--t-error-text); }
  .reports-alert--warning .reports-alert__title { color: var(--t-warning-text); }
  .reports-alert__detail { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  .reports-empty { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); }
  .reports-empty__text { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  /* Panels. */
  .reports-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); }
  .reports-panel__title { font-family: var(--mea-font-heading); font-size: var(--mea-text-lg);
                          font-weight: var(--mea-w-bold); color: var(--t-text); }
  .reports-panel__summary { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .reports-panel__empty { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Savings hero. */
  .reports-savings { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                     box-shadow: var(--mea-shadow-sm); }
  .reports-savings__value { font-family: var(--mea-font-heading); font-size: var(--mea-text-hero);
                            font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight);
                            color: var(--t-success); }
  .reports-savings__caption { font-size: var(--mea-text-lg); font-weight: var(--mea-w-semibold);
                              color: var(--t-text); }
  .reports-savings__basis { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* KPI cards. State variants recolour the value only. */
  .reports-kpi { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .reports-kpi__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                        color: var(--t-text-muted); }
  .reports-kpi__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                        line-height: var(--mea-lh-tight); color: var(--t-text); }
  .reports-kpi--diverted .reports-kpi__value { color: var(--t-success); }
  .reports-kpi--active .reports-kpi__value { color: var(--t-accent); }
  .reports-kpi__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Language distribution. */
  .lang-row__code { font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
                    font-weight: var(--mea-w-bold); color: var(--t-text-muted); }
  .lang-row__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                     color: var(--t-text); }
  .lang-row__value { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .lang-row__track { background: var(--t-bg-recessed); }
  .lang-row--muted .lang-row__label { color: var(--t-text-muted); }

  /* Deal failure. */
  .failure-figure__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                           line-height: var(--mea-lh-tight); color: var(--t-text); }
  .failure-figure__value--rate { color: var(--t-error-text); }
  .failure-figure__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                           color: var(--t-text-muted); text-transform: uppercase;
                           letter-spacing: var(--mea-ls-wide); }
  .failure-stat__label { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .failure-stat__value { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                         color: var(--t-text); }

  /* Donut. */
  .donut__value { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold);
                  color: var(--t-text); }
  .donut__caption { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                    color: var(--t-text-muted); text-transform: uppercase;
                    letter-spacing: var(--mea-ls-wide); }
  .donut-legend__label { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .donut-legend__count { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                         color: var(--t-text); }

  /* Completion timeline. */
  .timeline-bar__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                         color: var(--t-text); }
  .timeline-bar__total { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .timeline-bar__track { background: var(--t-bg-recessed); }
  .timeline-bar__fill { font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold);
                        color: var(--t-accent-text); }
  .timeline-legend__item { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .timeline-legend__dot--completed { background: var(--mea-green); }
  .timeline-legend__dot--active { background: var(--mea-blue); }
  .timeline-legend__dot--failed { background: var(--mea-red); }

  /* Cost savings. */
  .cost-row__icon { font-size: var(--mea-text-lg); }
  .cost-row__label { font-size: var(--mea-text-md); color: var(--t-text-secondary); }
  .cost-row__value { font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold);
                     color: var(--t-success); }

  /* Staff hours. */
  .staff-stat { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .staff-stat__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                       color: var(--t-text-muted); }
  .staff-stat__value { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold);
                       color: var(--t-text); }
  .staff-stat__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Jail impact. */
  .jail__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .jail__subtitle { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .jail-block { background: var(--t-accent); }
  .jail__footnote { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .jail__none { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
}