/* ============================================================
   Provider Connectors (desk/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 from
   app/elements.css.

   DESK/admin page: system admins manage email/SMS provider connectors
   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 the badge state classes restyled below
   (connectors-badge--ready/--not-ready for credential status,
   connectors-badge--enabled/--disabled for the connector status). The
   metadata / credential dialogs carry the .app-screen admin-connectors root
   class so the same --t-* tokens resolve when they are rendered.

   The connector table collapses to stacked cards on a narrow container: each
   <td> becomes a labelled row using its data-label via ::before, the same
   responsive pattern the legacy table used — now scoped to this page's
   container, not the viewport. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page intro: heading block on the left, actions on the right. */
  .admin-connectors__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                             justify-content: space-between; gap: var(--mea-space-3); }
  .admin-connectors__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .admin-connectors__title, .admin-connectors__subtitle { margin: 0; }
  .admin-connectors__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); flex-shrink: 0; }

  /* Connector list: an elevated panel wrapping loading / empty / table body. */
  .connectors-list { display: grid; align-content: start;
                     border-radius: var(--mea-radius-xl); overflow: hidden; }
  .connectors-list__body { display: grid; gap: var(--mea-space-4); min-inline-size: 0; }
  .connectors-table__scroll { overflow-x: auto; }

  /* The connector list is a real table. */
  .connectors-table { inline-size: 100%; border-collapse: collapse; }
  .connectors-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                          white-space: nowrap; }
  .connectors-cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .connectors-cell--actions { white-space: nowrap; }
  .connectors-row__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }

  /* Per-row action buttons are compact relative to the primary .btn. */
  .connectors-row__action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }

  /* Status / credential badge. */
  .connectors-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; }

  /* Load error fallback (D7). */
  .connectors-load-error { display: grid; gap: var(--mea-space-3); justify-items: start;
                           padding: var(--mea-space-6); }
  .connectors-load-error__title { margin: 0; }
  .connectors-inline-error { margin: var(--mea-space-4); }

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

  .connectors-form { display: grid; gap: var(--mea-space-4); }
  .connectors-field { display: grid; gap: var(--mea-space-2); }
  .connectors-field__label { margin: 0; }
  .connectors-field__control { 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; }
  .connectors-form__error { margin: 0; }
  .connectors-credential { display: grid; gap: var(--mea-space-3); margin: 0;
                           padding: var(--mea-space-3); border: 0;
                           border-radius: var(--mea-radius-md); }

  /* Narrow container: the table collapses to stacked, labelled cards. */
  @container (max-width: 48rem) {
    .connectors-table__head {
      position: absolute; inline-size: 1px; block-size: 1px;
      padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }
    .connectors-table, .connectors-table__body, .connectors-row, .connectors-cell {
      display: block; inline-size: 100%;
    }
    .connectors-row { padding: var(--mea-space-3) 0; }
    .connectors-cell {
      display: grid; grid-template-columns: 104px minmax(0, 1fr);
      gap: var(--mea-space-3); align-items: center;
      padding: var(--mea-space-2) var(--mea-space-4);
      overflow-wrap: anywhere; white-space: normal;
    }
    .connectors-cell::before {
      content: attr(data-label);
    }
  }
}

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

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

  /* Status / credential badge. State classes are toggled by the controller. */
  .connectors-badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                      background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .connectors-badge--ready { background: var(--t-success-bg); color: var(--t-success-text); }
  .connectors-badge--not-ready { background: var(--t-warning-bg); color: var(--t-warning-text); }
  .connectors-badge--enabled { background: var(--t-success-bg); color: var(--t-success-text); }
  .connectors-badge--disabled { background: var(--t-bg-active); color: var(--t-text-muted); }

  /* Load error fallback. */
  .connectors-load-error { background: var(--t-card-bg); }
  .connectors-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                                  color: var(--t-error-text); }

  /* Dialogs. */
  .connectors-modal-overlay { background: var(--t-overlay, var(--t-bg-active)); }
  .connectors-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-lg); }
  .connectors-modal__header { border-block-end: 1px solid var(--t-border); }
  .connectors-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                             font-weight: var(--mea-w-bold); color: var(--t-text); }
  .connectors-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .connectors-field__control { background: var(--t-bg-elevated); color: var(--t-text);
                               border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .connectors-field__control:focus { outline: none; border-color: var(--t-border-focus); }
  .connectors-field__control::placeholder { color: var(--t-text-muted); }
  .connectors-field__control:disabled { background: var(--t-bg-recessed); color: var(--t-text-muted); }
  .connectors-credential { background: var(--t-bg-recessed); }
  .connectors-form__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }

  /* Narrow-container card mode: the label pseudo-element paint. */
  @container (max-width: 48rem) {
    .connectors-cell { border-block-end: 1px solid var(--t-border); }
    .connectors-cell::before { font-weight: var(--mea-w-semibold);
                               color: var(--t-text-muted); font-size: var(--mea-text-xs); }
  }
}