/* ============================================================
   Compliance (shared) 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--primary/.btn--outline from
   elements.css.

   SHARED page: desk staff (light) get the session table + anomaly feed;
   participants (citizen dark) get the plain-language "My Tasks" view.
   Both render the same content-named markup, and this stylesheet only
   references --t-* semantic tokens, which app/theme.css rebinds per theme,
   so the page reskins without any role-specific color rules here.
   See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

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

  /* Summary stats: a responsive row of figures, stacking when cramped. */
  .compliance-summary { display: grid; gap: var(--mea-space-3);
                        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .compliance-stat { display: grid; gap: var(--mea-space-1); align-content: start;
                     padding: var(--mea-space-4) var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .compliance-stat__label, .compliance-stat__value, .compliance-stat__sub { margin: 0; }

  /* Participant: "My Tasks" checklist panel. */
  .compliance-tasks { display: grid; gap: var(--mea-space-4);
                      padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .compliance-tasks__header { display: flex; align-items: baseline; }
  .compliance-tasks__title, .compliance-tasks__empty { margin: 0; }
  .compliance-tasks__body { display: grid; gap: var(--mea-space-4); }

  .task-checklist { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .task-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
              gap: var(--mea-space-3); padding: var(--mea-space-3) 0; }
  .task-row__marker { display: inline-flex; align-items: center; justify-content: center;
                      inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--mea-radius-circle); }
  .task-row__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .task-row__name, .task-row__when { margin: 0; }
  .task-row__action { white-space: nowrap; }
  @container (max-width: 30rem) {
    .task-row { grid-template-columns: auto 1fr; }
    .task-row__action { grid-column: 2 / -1; justify-self: start; }
  }

  /* Staff: filter chips + search. */
  .compliance-controls { display: grid; gap: var(--mea-space-3); }
  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                margin: 0; padding: 0; list-style: none; }
  .filter-chip { display: inline-flex; align-items: center; min-height: var(--t-target-min, 44px);
                 padding: var(--mea-space-2) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; }
  .search-box { display: flex; align-items: center; gap: var(--mea-space-2);
                margin: 0; padding: var(--mea-space-2) var(--mea-space-3);
                border-radius: var(--mea-radius-md); }
  .search-box__input { flex: 1; min-height: var(--t-target-min, 44px);
                       border: 0; background: transparent; padding: 0; }

  /* Staff: two-column work area — sessions table beside the anomaly feed. */
  .compliance-grid { display: grid; gap: var(--mea-space-4); align-items: start;
                     grid-template-columns: 1fr; }
  @container (min-width: 52rem) { .compliance-grid { grid-template-columns: 2fr 1fr; } }

  .compliance-sessions, .compliance-anomalies { display: grid; gap: var(--mea-space-4);
                        align-content: start; border-radius: var(--mea-radius-xl); overflow: hidden; }
  .compliance-sessions__header, .compliance-anomalies__header {
                        padding: var(--mea-space-4) var(--mea-space-5) 0; }
  .compliance-sessions__title, .compliance-anomalies__title { margin: 0; }
  .compliance-sessions__body { overflow-x: auto; }
  .compliance-anomalies__body { padding: 0 var(--mea-space-5) var(--mea-space-5); }
  .compliance-sessions__pagination:empty { display: none; }
  .compliance-anomalies__empty { margin: 0; }

  /* Staff: session table. */
  .session-table { inline-size: 100%; border-collapse: collapse; }
  .session-table__head { text-align: start; padding: var(--mea-space-3) var(--mea-space-5); white-space: nowrap; }
  .session-table__head--sortable { cursor: pointer; }
  .session-table__cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .session-table__cell--action { white-space: nowrap; }

  /* Staff: session load failure (D7 visible fallback). */
  .compliance-sessions-load-error { display: grid; gap: var(--mea-space-2);
                        padding: var(--mea-space-5); }
  .compliance-sessions-load-error__title, .compliance-sessions-load-error__body { margin: 0; }
  .compliance-sessions-load-error__retry { justify-self: start; }

  /* Staff: anomaly feed. */
  .anomaly-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .anomaly { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-3);
             border-radius: var(--mea-radius-lg); }
  .anomaly__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-2); }
  .anomaly__type { display: inline-flex; align-items: center;
                   padding: var(--mea-space-1) var(--mea-space-2); border-radius: var(--mea-radius-pill); }
  .anomaly__time, .anomaly__detail { margin: 0; }

  /* Check-in / check-out / mark-missed modals. */
  .compliance-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                              padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .compliance-modal { inline-size: 100%; max-inline-size: 28rem; max-block-size: 90vh;
                      display: grid; grid-template-rows: auto 1fr; border-radius: var(--mea-radius-2xl);
                      overflow: hidden; }
  .compliance-modal__header { display: flex; align-items: center; justify-content: space-between;
                              gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .compliance-modal__title { margin: 0; }
  .compliance-modal__close { border: 0; background: transparent; cursor: pointer; line-height: 1;
                             padding: var(--mea-space-1); }
  .compliance-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                            padding: var(--mea-space-5); overflow-y: auto; }
  .compliance-modal__lead, .compliance-modal__note, .compliance-modal__error { margin: 0; }
  .compliance-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end;
                               gap: var(--mea-space-3); }

  .modal-field { display: grid; gap: var(--mea-space-2); }
  .modal-field__label, .modal-field__location { margin: 0; }
  .modal-field__location { padding: var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .modal-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                        padding: var(--mea-space-3); border-radius: var(--mea-radius-md);
                        font: inherit; resize: vertical; }
}

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

  /* Summary stats. */
  .compliance-stat { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                     box-shadow: var(--mea-shadow-sm); }
  .compliance-stat__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                            color: var(--t-text-muted); }
  .compliance-stat__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                            line-height: var(--mea-lh-tight); color: var(--t-text); }
  .compliance-stat__value--blue { color: var(--t-accent); }
  .compliance-stat__value--green { color: var(--t-success-text); }
  .compliance-stat__value--amber { color: var(--t-warning-text); }
  .compliance-stat__value--red { color: var(--t-error-text); }
  .compliance-stat__value--loading { color: var(--t-text-muted); }
  .compliance-stat__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Participant: "My Tasks" panel. */
  .compliance-tasks { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .compliance-tasks__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                             font-weight: var(--mea-w-bold); color: var(--t-text); }
  .compliance-tasks__empty { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  .task-row { border-block-end: 1px solid var(--t-border); }
  .task-row:last-child { border-block-end: 0; }
  .task-row__marker { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                      color: var(--t-accent-text); }
  .task-row--pending .task-row__marker { background: var(--t-warning); }
  .task-row--done .task-row__marker { background: var(--t-success); }
  .task-row__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .task-row--done .task-row__name { color: var(--t-text-muted); text-decoration: line-through; }
  .task-row__when { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Staff: filter chips + search. */
  .filter-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .filter-chip:hover { background: var(--t-bg-active); }
  .filter-chip.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  .search-box { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .search-box__icon { color: var(--t-text-muted); }
  .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .search-box__input::placeholder { color: var(--t-text-muted); }
  .search-box:focus-within { border-color: var(--t-border-focus); }

  /* Staff: session + anomaly panels. */
  .compliance-sessions, .compliance-anomalies { background: var(--t-card-bg);
                        border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); }
  .compliance-sessions__title, .compliance-anomalies__title { font-family: var(--mea-font-citizen);
                        font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .compliance-anomalies__empty { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Staff: session table. */
  .session-table__head { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                         text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                         color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); }
  .session-table__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                         border-block-end: 1px solid var(--t-border); }
  .session-table__cell--name { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .session-table__row:last-child .session-table__cell { border-block-end: 0; }

  /* Staff: session load failure. */
  .compliance-sessions-load-error { background: var(--t-bg-recessed); border: 1px solid var(--t-error);
                        border-radius: var(--mea-radius-lg); }
  .compliance-sessions-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                        color: var(--t-error-text); }
  .compliance-sessions-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Staff: anomaly feed. */
  .anomaly { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .anomaly__type { background: var(--t-error-bg); color: var(--t-error-text);
                   font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold);
                   text-transform: capitalize; }
  .anomaly__time { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .anomaly__detail { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                     line-height: var(--mea-lh-snug); }

  /* Modals. Scrim must be translucent — var(--t-bg-active) is an opaque
     surface token and blanked the page behind the dialog (reconciliation
     2026-06-09). */
  .compliance-modal-overlay { background: var(--mea-scrim); }
  .compliance-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-lg); }
  .compliance-modal__header { border-block-end: 1px solid var(--t-border); }
  .compliance-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                             font-weight: var(--mea-w-bold); color: var(--t-text); }
  .compliance-modal__close { color: var(--t-text-muted); font-size: var(--mea-text-xl); }
  .compliance-modal__close:hover { color: var(--t-text); }
  .compliance-modal__lead { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                            line-height: var(--mea-lh-normal); }
  .compliance-modal__note { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .compliance-modal__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }

  .modal-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .modal-field__location { background: var(--t-bg-recessed); border: 1px solid var(--t-border);
                           font-size: var(--mea-text-sm); color: var(--t-text); }
  .modal-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                        border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .modal-field__input:focus { outline: none; border-color: var(--t-border-focus); }
}