/* ============================================================
   Providers (shared directory) 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) and participants (citizen dark) render the
   same markup. 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 {
  /* Page header: heading on the left, optional add action on the right. */
  .providers__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                      justify-content: space-between; gap: var(--mea-space-3); }
  .providers__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .providers__title, .providers__subtitle { margin: 0; }
  .providers__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }

  /* Utilization region (staff only). */
  .providers-utilization { display: grid; gap: var(--mea-space-3); }
  .providers-utilization__alert { margin: 0; padding: var(--mea-space-3) var(--mea-space-4);
                                  border-radius: var(--mea-radius-lg); }
  .utilization-stats { display: grid; grid-template-columns: repeat(4, 1fr);
                       gap: var(--mea-space-3); margin: 0; }
  .utilization-stat { display: grid; gap: var(--mea-space-1); align-content: start;
                      padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); }
  .utilization-stat__label, .utilization-stat__value, .utilization-stat__sub { margin: 0; }
  @container (max-width: 48rem) { .utilization-stats { grid-template-columns: repeat(2, 1fr); } }
  @container (max-width: 26rem) { .utilization-stats { grid-template-columns: 1fr; } }

  /* Controls: filter chip row + sort bar. */
  .providers-controls { display: grid; gap: var(--mea-space-3); }
  .providers-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-2); }
  .providers-filters__divider { inline-size: 1px; align-self: stretch; min-block-size: 1.5rem; }
  .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; }

  .providers-search { 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); }
  .providers-search__input { flex: 1; min-height: var(--t-target-min, 44px);
                             border: 0; background: transparent; padding: 0; }

  .providers-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .providers-sort__label { margin: 0; white-space: nowrap; }
  .providers-sort__select { min-height: var(--t-target-min, 44px);
                            padding: var(--mea-space-2) var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .providers-sort__dir { min-height: auto; padding: var(--mea-space-2) var(--mea-space-3); }

  /* Bulk action bar (admin only). */
  .providers-bulk { 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); }
  .providers-bulk__count { margin: 0; margin-inline-end: auto; }
  .providers-bulk__action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }

  /* Results region + empty state. */
  .providers-results { display: grid; gap: var(--mea-space-4); }
  .providers-empty { display: grid; gap: var(--mea-space-3); justify-items: center; text-align: center;
                     padding: var(--mea-space-8) var(--mea-space-4); border-radius: var(--mea-radius-2xl); }
  .providers-empty__icon, .providers-empty__text { margin: 0; }

  /* Provider list: responsive card grid. */
  .provider-list { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none;
                   grid-template-columns: 1fr; }
  @container (min-width: 38rem) { .provider-list { grid-template-columns: repeat(2, 1fr); } }
  @container (min-width: 60rem) { .provider-list { grid-template-columns: repeat(3, 1fr); } }

  .provider-card { display: grid; gap: var(--mea-space-2); align-content: start;
                   padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); }
  .provider-card__name, .provider-card__service, .provider-card__address,
  .provider-card__phone, .provider-card__contact { margin: 0; }
  .provider-card__row { display: flex; align-items: flex-start; gap: var(--mea-space-3); }
  .provider-card__select { flex-shrink: 0; min-height: var(--t-target-min, 44px); inline-size: 1.25rem; }
  .provider-card__main { flex: 1; display: grid; gap: var(--mea-space-2); align-content: start; min-inline-size: 0; }

  .provider-badges { display: flex; flex-wrap: wrap; gap: var(--mea-space-1);
                     margin: 0; padding: 0; list-style: none; }
  .provider-card__badge { display: inline-flex; align-items: center;
                          padding: var(--mea-space-1) var(--mea-space-2); border-radius: var(--mea-radius-pill); }

  .provider-card__footer { display: flex; flex-wrap: wrap; align-items: center;
                           gap: var(--mea-space-2); margin-block-start: var(--mea-space-1); }
  .provider-card__btn { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }
  .provider-card__btn.prov-detail-btn { margin-inline-start: auto; }

  .provider-card__capacity-meta { display: flex; align-items: center; justify-content: space-between;
                                  gap: var(--mea-space-2); margin: 0; margin-block-start: var(--mea-space-1); }

  /* Capacity meter — width set via data-width (CSSOM exception). */
  .capacity-bar { block-size: 0.5rem; border-radius: var(--mea-radius-pill); overflow: hidden; }
  .capacity-bar__fill { block-size: 100%; inline-size: 0; border-radius: inherit; }
  .provider-card__capacity { margin-block-start: var(--mea-space-2); }

  .provider-status { display: inline-flex; align-items: center;
                     padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill); }

  /* Pagination. */
  .providers-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-2); }
  .providers-pagination__btn { min-height: auto; padding: var(--mea-space-2) var(--mea-space-3); }
  .providers-pagination__count { margin-inline-start: var(--mea-space-3); }
  .providers-pagination__gap { padding-inline: var(--mea-space-1); }

  /* Modal overlay centring a constrained card. */
  .provider-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                            padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .provider-modal { inline-size: 100%; max-inline-size: 33rem; max-block-size: 90vh; display: grid;
                    grid-template-rows: auto 1fr; border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .provider-modal--form { max-inline-size: 35rem; }
  .provider-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); }
  .provider-modal__title { margin: 0; min-inline-size: 0; }
  .provider-modal__close { display: inline-flex; align-items: center; justify-content: center;
                           min-height: var(--t-target-min, 44px); min-inline-size: var(--t-target-min, 44px);
                           padding: 0; border: 0; background: transparent; cursor: pointer; }
  .provider-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                          padding: var(--mea-space-5); overflow-y: auto; }

  .provider-detail__facts { display: grid; grid-template-columns: repeat(2, 1fr);
                            gap: var(--mea-space-3); margin: 0; }
  .provider-detail__fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .provider-detail__label, .provider-detail__value { margin: 0; }
  @container (max-width: 28rem) { .provider-detail__facts { grid-template-columns: 1fr; } }

  .provider-capacity, .provider-programs { display: grid; gap: var(--mea-space-2); }
  .provider-capacity__label, .provider-programs__label, .provider-programs__item { margin: 0; }
  .provider-capacity__meta { display: flex; align-items: center; justify-content: space-between;
                             gap: var(--mea-space-2); margin: 0; }
  .provider-detail__status { margin: 0; }

  /* Provider form. */
  .provider-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mea-space-3); margin: 0; }
  .provider-form__field { display: grid; gap: var(--mea-space-1); margin: 0; }
  .provider-form__field--full { grid-column: 1 / -1; }
  .provider-form__label { margin: 0; }
  .provider-form__input { min-height: var(--t-target-min, 44px);
                          padding: var(--mea-space-2) var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .provider-form__error { margin: 0; }
  .provider-form__actions { display: flex; flex-wrap: wrap; align-items: center;
                            justify-content: flex-end; gap: var(--mea-space-3); margin-block-start: var(--mea-space-2); }
  @container (max-width: 30rem) { .provider-form { grid-template-columns: 1fr; } }
}

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

  /* Utilization region. */
  .providers-utilization__alert--error { background: var(--t-card-bg); border: 1px solid var(--t-warning);
                                         color: var(--t-warning-text); font-size: var(--mea-text-md); }
  .utilization-stat { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .utilization-stat__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); }
  .utilization-stat__value { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold);
                             line-height: var(--mea-lh-tight); color: var(--t-text); }
  .utilization-stat__value--providers { color: var(--t-accent); }
  .utilization-stat__value--appointments { color: var(--t-warning); }
  .utilization-stat__value--completed { color: var(--t-success); }
  .utilization-stat--loading .utilization-stat__value { color: var(--t-text-muted); }
  .utilization-stat__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Filter chips + dividers. */
  .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); }
  .providers-filters__divider { background: var(--t-border); }

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

  .providers-sort__label { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .providers-sort__select { background: var(--t-bg-elevated); color: var(--t-text);
                            border: 1px solid var(--t-border); font-size: var(--mea-text-sm); }
  .providers-sort__select:focus { outline: none; border-color: var(--t-border-focus); }

  /* Bulk bar. */
  .providers-bulk { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .providers-bulk__count { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }

  /* Empty state. */
  .providers-empty { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                     box-shadow: var(--mea-shadow-sm); }
  .providers-empty__icon { font-size: var(--mea-text-3xl); line-height: 1; }
  .providers-empty__text { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                           color: var(--t-text-secondary); }

  /* Provider cards. */
  .provider-card { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); transition: box-shadow var(--mea-dur-fast); }
  .provider-card:hover { box-shadow: var(--mea-shadow-md); }
  .provider-card__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                         font-weight: var(--mea-w-bold); color: var(--t-text); }
  .provider-card__service { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .provider-card__address, .provider-card__contact { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .provider-card__phone { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .provider-card__select { accent-color: var(--t-accent); }

  .provider-card__badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .provider-card__badge--service { background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .provider-card__badge--reviewed { background: var(--t-bg-recessed); color: var(--t-success-text); }

  .provider-card__capacity-meta { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .provider-card__capacity-value { font-weight: var(--mea-w-semibold); color: var(--t-text-secondary); }

  .capacity-bar { background: var(--t-bg-recessed); }
  .capacity-bar__fill { background: var(--t-success); }
  .capacity-bar__fill--high { background: var(--t-error); }

  .provider-status { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .provider-status--active { background: var(--t-bg-recessed); color: var(--t-success-text); }
  .provider-status--inactive { background: var(--t-bg-recessed); color: var(--t-error-text); }

  /* Pagination. */
  .providers-pagination__btn.is-current { background: var(--t-accent); color: var(--t-accent-text);
                                          border-color: var(--t-accent); }
  .providers-pagination__count { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .providers-pagination__gap { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Modal. */
  .provider-modal-overlay { background: var(--t-bg-active); }
  .provider-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                    box-shadow: var(--mea-shadow-lg); }
  .provider-modal__header { border-block-end: 1px solid var(--t-border); }
  .provider-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                           font-weight: var(--mea-w-bold); color: var(--t-text); }
  .provider-modal__close { color: var(--t-text-muted); font-size: var(--mea-text-xl);
                           transition: color var(--mea-dur-fast); }
  .provider-modal__close:hover { color: var(--t-text); }

  .provider-detail__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); }
  .provider-detail__value { font-size: var(--mea-text-base); color: var(--t-text); }

  .provider-capacity__label, .provider-programs__label { font-size: var(--mea-text-sm);
                            font-weight: var(--mea-w-semibold); color: var(--t-text-muted); }
  .provider-capacity__meta { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .provider-capacity__slots { color: var(--t-text-secondary); }
  .provider-capacity__pct { font-weight: var(--mea-w-semibold); color: var(--t-text-secondary); }
  .provider-capacity__pct--high { color: var(--t-error-text); }
  .provider-programs__item { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Provider form. */
  .provider-form__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .provider-form__input { background: var(--t-bg-elevated); color: var(--t-text);
                          border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .provider-form__input:focus { outline: none; border-color: var(--t-border-focus); }
  .provider-form__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
}