/* One-off admin and user-management pages whose styles used to live in inline \3c style>
   blocks (#1291). Scoped to each page's root class so nothing leaks. */
@layer components {
  /* Admin > Leads > show */
  .lead-show {
    .submission-details,
    .reply-panel {
      background: var(--color-surface-sunken);
      border-radius: var(--radius-md);
      margin-block: calc(var(--space-12) + var(--space-4));
      margin-inline: 0;
      padding-block: var(--space-12);
      padding-inline: calc(var(--space-12) + var(--space-4));
    }

    .detail-group { margin-block-end: var(--space-12); }

    .label {
      color: var(--color-text);
      display: block;
      font-weight: 600;
      margin-block-end: var(--space-4);
    }

    .value {
      color: var(--color-text-secondary);
      margin: 0;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .reply-status {
      color: var(--color-text-secondary);
      margin: 0 0 var(--space-12);
    }

    .reply-body {
      white-space: normal;

      p { margin: 0 0 var(--space-6); }
      :last-child { margin-block-end: 0; }
    }

    .reply-input {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font: inherit;
      inline-size: 100%;
      padding: var(--space-5);
    }

    .actions { margin-block-start: 2rem; }
  }

  /* Permission and responsibility matrices */
  .matrix-page {
    max-inline-size: 1200px;

    .subtitle {
      color: var(--color-text-secondary);
      margin-block-end: 2rem;
    }

    table { margin-block-start: 2rem; }

    th, td {
      border: 1px solid var(--color-border);
      text-align: start;
    }

    thead { background: var(--color-surface-sunken); }
    .permission-cell, .responsibility-cell { text-align: center; }
    .form-actions { margin-block-start: 2rem; }
  }

  /* Staff > Users > edit */
  .user-edit {
    .form-container { max-inline-size: 600px; }

    fieldset {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      margin-block-end: var(--space-12);
      padding: var(--space-12);
    }

    legend {
      font-weight: 600;
      padding-block: 0;
      padding-inline: var(--space-4);
    }

    .help-text {
      color: var(--color-text-muted);
      font-size: 0.875rem;
      margin-block-end: var(--space-8);
    }

    .role-table {
      margin-block-end: var(--space-8);

      input[type="checkbox"] { cursor: pointer; }
    }

    .info-box {
      background: var(--color-primary-tint);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      margin-block-end: var(--space-8);
      padding-block: var(--space-6);
      padding-inline: var(--space-8);
    }

    .empty-state { margin-block-end: var(--space-8); }

    .form-actions {
      display: flex;
      gap: var(--space-4);
      margin-block-start: 2rem;
    }
  }
}