/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — INTEGRATIONS

   Phase 8, Slice 4. The seventh stylesheet, added for the Enterprise Connectors area —
   which is what the manifest in `index.html` asks a new module to do rather than editing a
   shared blob.

   EVERY SELECTOR IN THIS FILE IS PREFIXED `.mdp-conn-`, and there are only three of them.
   Nothing here matches an element any earlier screen renders, so every screen that shipped
   before Slice 4 paints identically with this file loaded or absent. That is the property
   `developer.css` established in Slice 3 and this file keeps: a new sheet may only add, and
   a sheet that overrode `.mdp-badge` or `.mdp-table` would be a refactor of the component
   library wearing a stylesheet's clothes.

   The Integrations screen is otherwise built entirely from existing components — cards,
   stats, tables, badges, fields, modals and the drawer — so it needs three rules and not a
   design system of its own. Anything more would be a second component library.

   Every value below is a token from `tokens.css`. No hard-coded colour, radius or space:
   the customer's theme choice and the RTL mirror both work through the tokens, and a
   literal `#1a1a1a` here would be a dark-mode defect that only appears in one dialog.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── A two-line table cell ────────────────────────────────────────────────────
   The register and the audit trail both carry an identifier under a name — "Warehouse
   export" over `cnr_…`, an audit action over its raw code. Two lines rather than two
   columns, because the reference is context for the name and not a separate fact, and a
   seventh column would push the health badge off a laptop screen.

   `min-width: 0` so the child `text-overflow` can act: without it a long reference makes
   the flex item refuse to shrink and the table scrolls sideways instead. */
.mdp-conn-lead {
  display: flex;
  flex-direction: column;
  gap: calc(var(--mdp-sp-1) / 2);
  min-width: 0;
}

/* The second line: the machine's version of the first. Dimmer and smaller, because a
   customer reads it only when they are about to quote it in a support ticket. It is a
   reference and never a secret — no credential reference is rendered in any table. */
.mdp-conn-sub {
  color: var(--mdp-text-muted);
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── The one-time credential reference ────────────────────────────────────────
   Shown once, in the dialog that minted it, and never re-read from any endpoint.

   `user-select: all` so one click selects the whole reference: this is the one moment the
   customer has to copy it correctly, and a half-selected reference produces a connector
   that fails to authenticate for a reason nobody can see. It is a REFERENCE — the platform
   holds no key material — but it is still the kind of string that must survive the journey
   to a password manager intact.

   `overflow-wrap: anywhere` because a reference has no spaces to break at, and a dialog
   that scrolls sideways hides the end of the very string it exists to show. */
.mdp-conn-ref {
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  color: var(--mdp-text);
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-sm);
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--mdp-sp-3);
  /* Forced LTR: a reference is a machine token and reads left-to-right in every locale.
     In Arabic the surrounding dialog is RTL, and letting the token inherit that direction
     reorders it on screen — the customer copies the characters back in the wrong order. */
  direction: ltr;
  text-align: start;
  user-select: all;
  white-space: pre-wrap;
}