/* Aplicaciones cliente de un tenant y los dialogos de una aplicacion
   (client-app-dialogs.js), pantallas 3.1 a 3.10. El cajon de
   client-app-dialogs.js tambien usa esta hoja: el producto de solo lectura
   cuando no hay select, la fila del secreto que arma secret-reveal.js y el
   modal "Configuracion de Integra".
   Solo lo que es propio de estas pantallas: los componentes salen de
   components.css y las medidas, de tokens.css. */

/* Producto de solo lectura: quien abre el formulario no paso opciones, asi
   que no es un select. Misma composicion etiqueta + valor sin caja que el
   Tipo del tenant. */
.tenant-apps__static-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tenant-apps__static-label {
  color: var(--color-text-secondary);
  font: var(--nb-font-label-sm);
}

.tenant-apps__static-value {
  color: var(--color-text-primary);
  font: var(--nb-font-body-md);
}

.tenant-apps__static-help {
  color: var(--color-text-tertiary);
  font: var(--nb-font-body-sm);
}

/* Fila "Client secret" + boton Copiar del modal de secret-reveal.js (3.4,
   3.7): el campo crece, el boton se alinea con el borde inferior de la caja
   (no con el rotulo de arriba), igual que en la pantalla. */
.secret-reveal__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.secret-reveal__row > .nb-text-field {
  flex: 1;
  min-width: 0;
}

/* Modal "Configuracion de Integra" (client-app-dialogs.js): tabla Variable |
   Valor | Copiar. Los nombres y los valores van en el estilo de codigo y parten
   la linea en cualquier punto (un secreto o una URL no tienen espacios), asi se
   leen enteros; la fila crece y el relleno vertical los separa del borde. */
.integra-config__name,
.integra-config__value {
  display: block;
  padding-block: var(--space-2);
  color: var(--color-text-primary);
  font: var(--typography-code-md-font-weight) var(--typography-code-md-font-size)/var(--typography-code-md-line-height) var(--typography-code-md-font-family);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Lo que la consola no tiene (el secreto fuera del alta y la rotacion, o un
   callback que no calza): dice que hacer, en la voz secundaria del texto. */
.integra-config__missing {
  padding-block: var(--space-2);
  color: var(--color-text-secondary);
  font: var(--nb-font-body-sm);
}

.integra-config__inline-code {
  font: var(--typography-code-md-font-weight) var(--typography-code-md-font-size)/var(--typography-code-md-line-height) var(--typography-code-md-font-family);
  font-size: inherit;
  overflow-wrap: anywhere;
}