/* ============================================================
   Encounters / Referral Queue (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--primary/.btn--outline from elements.css.

   DESK page: officers, prosecutors, and case managers read this under the
   default light .app-screen palette. 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. The controller toggles
   .is-active (filter chips) and .th--sortable (sortable headers) and reveals
   the bulk bar / modal via [hidden]; those states are restyled here only.
   See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page intro: title block on the left, officer-only action on the right. */
  .encounters__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                       justify-content: space-between; gap: var(--mea-space-3); }
  .encounters__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .encounters__title, .encounters__subtitle { margin: 0; }
  .encounters__new { flex-shrink: 0; white-space: nowrap; }

  /* Controls: filter chips on one row, search box beside/below them. */
  .encounters-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); margin: 0; padding: 0; }
  .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 { flex: 1; min-inline-size: 12rem; 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; }

  /* Bulk-action bar: count, status select, then apply/clear, wrapping when cramped. */
  .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3);
              padding: var(--mea-space-3) var(--mea-space-4); border-radius: var(--mea-radius-lg); }
  .bulk-bar__count { margin-inline-end: auto; }
  .bulk-bar__select { min-height: var(--t-target-min, 44px); padding: var(--mea-space-2) var(--mea-space-3);
                      border-radius: var(--mea-radius-md); }
  .bulk-bar__apply, .bulk-bar__clear { padding-block: var(--mea-space-2); }

  /* Referral queue: a scrollable real table plus pagination beneath. */
  .encounters-queue { border-radius: var(--mea-radius-xl); overflow: hidden; }
  .card__body { display: grid; gap: var(--mea-space-4); align-content: start; }
  .enc-table__scroll { overflow-x: auto; }

  .enc-table { inline-size: 100%; border-collapse: collapse; }
  .enc-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-4);
                   white-space: nowrap; }
  .th--sortable, .sortable-header { cursor: pointer; user-select: none; }
  .enc-table__th--select { inline-size: var(--mea-space-12); }
  .enc-table__cell { padding: var(--mea-space-3) var(--mea-space-4); vertical-align: top; }
  .enc-table__cell--date { white-space: nowrap; }
  .enc-table__cell--select { inline-size: var(--mea-space-12); }
  .enc-table__row { cursor: pointer; }
  .sort-indicator { display: inline-block; margin-inline-start: var(--mea-space-1); }

  /* Pagination: prev / info / next on one row. */
  .pagination { display: flex; flex-wrap: wrap; align-items: center;
                justify-content: center; gap: var(--mea-space-4);
                padding: var(--mea-space-3) var(--mea-space-4); }
  .pagination__info { margin: 0; }

  /* Detail modal: a centred surface over a dimming backdrop. */
  .modal-backdrop { position: fixed; inset: 0; z-index: var(--mea-z-modal, 1000);
                    display: grid; place-items: center; padding: var(--mea-space-4); }
  .modal-backdrop[hidden] { display: none; }
  .modal { inline-size: 100%; max-inline-size: 40rem; max-block-size: 90vh;
           display: grid; grid-template-rows: auto 1fr; min-block-size: 0;
           border-radius: var(--mea-radius-xl); overflow: hidden; }
  .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); }
  .modal__title { margin: 0; min-inline-size: 0; }
  .modal__close { display: inline-flex; align-items: center; justify-content: center;
                  inline-size: 2rem; block-size: 2rem; border: 0; background: transparent;
                  cursor: pointer; border-radius: var(--mea-radius-md); }
  .modal__body { padding: var(--mea-space-5); overflow-y: auto; min-block-size: 0; }

  /* Detail content: header, fact grids, screening list, statement. */
  .enc-detail { display: grid; gap: var(--mea-space-5); }
  .enc-detail__header { display: flex; flex-wrap: wrap; align-items: center;
                        justify-content: space-between; gap: var(--mea-space-3); }
  .enc-detail__offense, .enc-detail__status { margin: 0; }
  .enc-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       gap: var(--mea-space-3) var(--mea-space-4); margin: 0; }
  .enc-fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .enc-fact--full { grid-column: 1 / -1; }
  .enc-fact__label, .enc-fact__value { margin: 0; }
  .enc-detail__section { display: grid; gap: var(--mea-space-3); }
  .enc-detail__section-title { margin: 0; }
  .enc-screening { display: grid; gap: var(--mea-space-2); margin: 0; padding: 0; list-style: none; }
  .enc-screening__item { display: flex; flex-wrap: wrap; align-items: baseline;
                         justify-content: space-between; gap: var(--mea-space-3); }
  .enc-detail__statement { margin: 0; white-space: pre-wrap; }
  @container (max-width: 32rem) {
    .enc-detail__facts { grid-template-columns: 1fr; }
  }
}

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

  /* Filter chips. .is-active is toggled by the controller. */
  .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); }

  /* Bulk-action bar. */
  .bulk-bar { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-sm); }
  .bulk-bar__count { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                     color: var(--t-text); }
  .bulk-bar__select { background: var(--t-bg-elevated); border: 1px solid var(--t-border);
                      color: var(--t-text); font-size: var(--mea-text-sm); }
  .bulk-bar__select:focus-within { border-color: var(--t-border-focus); }

  /* Referral queue panel + table. */
  .encounters-queue { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .enc-table__th { 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); }
  .th--sortable:hover, .sortable-header:hover { color: var(--t-text); }
  .sort-indicator--inactive { color: var(--t-text-muted); }
  .sort-indicator--active { color: var(--t-accent); }
  .enc-table__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                     border-block-end: 1px solid var(--t-border); }
  .enc-table__row:last-child .enc-table__cell { border-block-end: 0; }
  .enc-table__row:hover .enc-table__cell { background: var(--t-bg-recessed); }
  .enc-table__cell--subject { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .enc-table__cell--date { color: var(--t-text-muted); }

  .pagination { border-block-start: 1px solid var(--t-border); }
  .pagination__info { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Detail modal. Backdrop scrim is a token-derived translucency (no scrim
     token exists yet) so it dims correctly under any theme without raw color. */
  .modal-backdrop { background: color-mix(in srgb, var(--t-text) 55%, transparent); }
  .modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
           box-shadow: var(--mea-shadow-lg); }
  .modal__header { border-block-end: 1px solid var(--t-border); }
  .modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                  font-weight: var(--mea-w-bold); color: var(--t-text); }
  .modal__close { color: var(--t-text-muted); font-size: var(--mea-text-xl); line-height: 1; }
  .modal__close:hover { color: var(--t-text); background: var(--t-bg-active); }

  /* Detail content. */
  .enc-detail__offense { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                         font-weight: var(--mea-w-bold); color: var(--t-text); }
  .enc-detail__section-title { 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); }
  .enc-fact__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                     color: var(--t-text-muted); }
  .enc-fact__value { font-size: var(--mea-text-md); color: var(--t-text); }
  .enc-fact__value--strong { font-weight: var(--mea-w-semibold); }
  .enc-screening__label { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .enc-screening__value { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                          color: var(--t-text); }
  .enc-detail__statement { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                           line-height: var(--mea-lh-relaxed); }
}