/* ============================================================
   Workflow Template Builder (admin) 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/.btn--danger
   from elements.css.

   ADMIN page: system admins / prosecutors build workflow templates 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 / queries the state classes restyled below (the wf-status-badge
   modifiers on each template row, the wf-* row-action buttons, the
   wf-load-error fallback). The step / phase / response dialogs carry the
   .app-screen root class so the same --t-* tokens resolve when they are
   appended to the modal root. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page shell: stacked sections with breathing room. */
  .admin-workflows { display: grid; gap: var(--mea-space-5); align-content: start; }
  .admin-workflows > #wf-root { display: grid; gap: var(--mea-space-5); min-inline-size: 0; }

  /* Page / view intro: heading block on the left, actions on the right. */
  .admin-workflows__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                            justify-content: space-between; gap: var(--mea-space-3); }
  .admin-workflows__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .admin-workflows__title, .admin-workflows__subtitle { margin: 0; min-inline-size: 0; }
  .admin-workflows__create { flex-shrink: 0; white-space: nowrap; }
  .admin-workflows__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); flex-shrink: 0; }

  /* Template list panel wrapping the table / empty / error body. */
  .wf-template-list { display: grid; align-content: start;
                      border-radius: var(--mea-radius-xl); overflow: hidden; }
  .wf-table-scroll { overflow-x: auto; }

  /* Template table is a real table. */
  .wf-template-table { inline-size: 100%; border-collapse: collapse; }
  .wf-template-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                           white-space: nowrap; }
  .wf-template-cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .wf-template-cell--actions { white-space: nowrap; }

  /* Row action button clusters (template / step / phase / response). */
  .wf-row-actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .wf-row-action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }

  /* Status pill on each template row. */
  .wf-status-badge { display: inline-flex; align-items: center;
                     padding: var(--mea-space-1) var(--mea-space-3);
                     border-radius: var(--mea-radius-pill); white-space: nowrap; }

  /* Empty / error states. */
  .wf-empty-templates, .wf-editor-empty, .wf-response-empty, .wf-empty-note {
    margin: 0; padding: var(--mea-space-5); text-align: center; }
  .wf-response-empty, .wf-empty-note { padding: var(--mea-space-3); text-align: start; }
  .wf-load-error { display: grid; gap: var(--mea-space-3); justify-items: start;
                   padding: var(--mea-space-6); }
  .wf-load-error__title, .wf-load-error__body { margin: 0; }

  /* Editor panels (details / steps / phases / responses). */
  .wf-panel { display: grid; align-content: start;
              border-radius: var(--mea-radius-xl); overflow: hidden; }
  .wf-panel__header { display: flex; flex-wrap: wrap; align-items: center;
                      justify-content: space-between; gap: var(--mea-space-3);
                      padding: var(--mea-space-4) var(--mea-space-5); }
  .wf-panel__title { margin: 0; min-inline-size: 0; }
  .wf-panel__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .wf-panel__action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }
  .wf-panel__body { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); }
  .wf-panel__body--flush { padding: 0; gap: 0; }

  .wf-editor-msg:empty { display: none; }

  /* Form fields shared by editor + dialogs. */
  .wf-field-grid { display: grid; gap: var(--mea-space-3);
                   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .wf-field { display: grid; gap: var(--mea-space-2); min-inline-size: 0; }
  .wf-fieldset { border: 0; padding: 0; margin: 0; }
  .wf-field__label { margin: 0; }
  .wf-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                     padding: var(--mea-space-2) var(--mea-space-3);
                     border-radius: var(--mea-radius-md); font: inherit; }
  .wf-field__input--area { min-height: auto; }

  /* Steps table. */
  .wf-step-table { inline-size: 100%; border-collapse: collapse; }
  .wf-step-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                       white-space: nowrap; }
  .wf-step-cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .wf-step-cell--actions { white-space: nowrap; }
  .wf-step-num { inline-size: 1px; white-space: nowrap; }
  .wf-tag { display: inline-block; padding: var(--mea-space-1) var(--mea-space-3);
            border-radius: var(--mea-radius-pill); white-space: nowrap; }

  /* Phases: a list of cards. */
  .wf-phase-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .wf-phase { display: grid; min-inline-size: 0; }
  .wf-phase__card { display: grid; gap: var(--mea-space-3);
                    border-radius: var(--mea-radius-lg); overflow: hidden; }
  .wf-phase__header { display: flex; flex-wrap: wrap; align-items: center;
                      justify-content: space-between; gap: var(--mea-space-3);
                      padding: var(--mea-space-3) var(--mea-space-4); }
  .wf-phase__title { margin: 0; min-inline-size: 0; }
  .wf-phase__facts { display: grid; gap: var(--mea-space-3); margin: 0;
                     padding: 0 var(--mea-space-4);
                     grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .wf-phase__fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .wf-phase__fact-label, .wf-phase__fact-value { margin: 0; }
  .wf-phase__desc { margin: 0; padding: 0 var(--mea-space-4) var(--mea-space-4); }

  /* Graduated responses: side-by-side sanction / reward groups. */
  .wf-responses { display: grid; gap: var(--mea-space-4);
                  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .wf-response-group { display: grid; gap: var(--mea-space-3); align-content: start; min-inline-size: 0; }
  .wf-response-group__header { display: flex; align-items: center;
                               justify-content: space-between; gap: var(--mea-space-3); }
  .wf-response-group__title { margin: 0; min-inline-size: 0; }
  .wf-response-group__action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }
  .wf-response-list { display: grid; gap: var(--mea-space-2); margin: 0; padding: 0; list-style: none; }
  .wf-response-item { display: flex; align-items: center; flex-wrap: wrap;
                      gap: var(--mea-space-3); padding: var(--mea-space-3);
                      border-radius: var(--mea-radius-md); }
  .wf-response-item__detail { flex: 1; min-inline-size: 0; display: grid; gap: var(--mea-space-1); }
  .wf-response-item__name, .wf-response-item__desc { margin: 0; }
  .wf-response-item__desc:empty { display: none; }

  /* Step / phase / response dialogs. */
  .wf-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                      padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .wf-modal { inline-size: 100%; max-inline-size: 36rem; max-block-size: 90vh;
              display: grid; grid-template-rows: auto 1fr;
              border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .wf-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); }
  .wf-modal__title { margin: 0; min-inline-size: 0; }
  .wf-modal__close { min-height: auto; flex-shrink: 0; white-space: nowrap;
                     padding: var(--mea-space-1) var(--mea-space-3); }
  .wf-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                    padding: var(--mea-space-5); overflow-y: auto; }
  .wf-modal__msg:empty { display: none; }
  .wf-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end;
                      gap: var(--mea-space-3); margin-block-start: var(--mea-space-1); }

  /* Phase-step checkbox assignment list. */
  .wf-phase-step-list { display: grid; gap: var(--mea-space-2); }
  .wf-phase-step { display: flex; align-items: center; gap: var(--mea-space-2);
                   min-inline-size: 0; cursor: pointer; }
  .wf-phase-step__label { min-inline-size: 0; }

  @container (max-width: 32rem) {
    .wf-modal__footer { flex-direction: column-reverse; align-items: stretch; }
  }
}

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

  /* Template list panel + table. */
  .wf-template-list { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .wf-template-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); }
  .wf-template-cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                      border-block-end: 1px solid var(--t-border); }
  .wf-template-table__body .wf-template-row:last-child .wf-template-cell { border-block-end: 0; }
  .wf-template-row:hover .wf-template-cell { background: var(--t-bg-recessed); }
  .wf-template-cell--name { font-weight: var(--mea-w-semibold); color: var(--t-text); }

  /* Template status pill — modifiers (set by the controller) recolour it only. */
  .wf-status-badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                     background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .wf-status-badge--active {
    background: var(--t-success-bg, var(--t-bg-recessed)); color: var(--t-success-text); }
  .wf-status-badge--closed { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .wf-status-badge--pending {
    background: var(--t-warning-bg, var(--t-bg-recessed)); color: var(--t-warning-text); }

  /* Empty / error states. */
  .wf-empty-templates, .wf-editor-empty, .wf-response-empty, .wf-empty-note {
    font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .wf-load-error { background: var(--t-card-bg); }
  .wf-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                          color: var(--t-error-text); }
  .wf-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Editor panels. */
  .wf-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-sm); }
  .wf-panel__header { border-block-end: 1px solid var(--t-border); }
  .wf-panel__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                     font-weight: var(--mea-w-bold); color: var(--t-text); }

  /* Editor inline message. */
  .wf-editor-msg-error { margin: 0; font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .wf-editor-msg-success { margin: 0; font-size: var(--mea-text-sm); color: var(--t-success-text); }

  /* Form fields. */
  .wf-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .wf-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                     border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .wf-field__input:focus { outline: none; border-color: var(--t-border-focus); }
  .wf-field__input::placeholder { color: var(--t-text-muted); }
  .wf-field__input:disabled { background: var(--t-bg-recessed); color: var(--t-text-muted); }

  /* Steps table. */
  .wf-step-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); }
  .wf-step-cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                  border-block-end: 1px solid var(--t-border); }
  .wf-step-table__body .wf-step-row:last-child .wf-step-cell { border-block-end: 0; }
  .wf-step-cell--name, .wf-step-num { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .wf-tag { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
            background: var(--t-bg-active); color: var(--t-text); }

  /* Phase cards. */
  .wf-phase__card { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .wf-phase__header { background: var(--t-bg-recessed); border-block-end: 1px solid var(--t-border); }
  .wf-phase__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .wf-phase__fact-label { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .wf-phase__fact-value { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .wf-phase__desc { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Graduated responses. */
  .wf-response-group__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .wf-response-item { background: var(--t-bg-recessed); }
  .wf-response-item__name { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .wf-response-item__desc { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Dialogs. */
  .wf-modal-overlay { background: var(--t-overlay, var(--t-bg-active)); }
  .wf-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-lg); }
  .wf-modal__header { border-block-end: 1px solid var(--t-border); }
  .wf-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                     font-weight: var(--mea-w-bold); color: var(--t-text); }

  /* Phase-step assignment list. */
  .wf-phase-step__label { font-size: var(--mea-text-sm); color: var(--t-text); }
}