/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Fenêtres de création, consultation et modification d’une fiche client.
 * Chargement : private/view.php.
 * Interactions : public/client-editor-modal.js.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/* Fenêtre client : titre et onglets fixes, chaque onglet défile séparément. */
html.client-modal-open  {
  overflow: hidden;
}

dialog.client-editor-modal  {
  width: 70vw;
  max-width: none;
  height: 85vh;
  max-height: 85vh;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--app-primary-border, #c8dae2);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

dialog.client-editor-modal[open]  {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-editor-modal::backdrop  {
  background: #142c4866;
}

.client-editor-modal-header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.client-editor-modal-header h2  {
  margin: 0;
  font-size: calc(1rem * var(--app-font-scale, 1));
  color: var(--app-primary-color, #1c75bc);
}

.client-editor-modal > p  {
  margin: 0;
  font-size: calc(.8rem * var(--app-font-scale, 1));
}

.client-editor-modal > p:empty  {
  display: none;
}

.client-editor-modal iframe  {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  border: 0;
}

.client-editor-root  {
  height: 100%;
  overflow: hidden;
}

body.client-editor-embedded  {
  display: block;
  height: 100vh;
  min-height: 0;
  min-width: 0;
  margin: 0;
  background: #fff!important;
  overflow: hidden;
}

.client-editor-embedded > aside, .client-editor-embedded .top, .client-editor-embedded .content > .back, .client-editor-embedded .content > .pagehead  {
  display: none!important;
}

.client-editor-embedded main  {
  display: flex;
  flex-direction: column;
  margin: 0!important;
  padding: 0;
  width: 100%!important;
  height: 100%;
  min-height: 0;
}

.client-editor-embedded .content  {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.client-editor-embedded .client-editor, .client-editor-embedded .client-editor > form, .client-editor-embedded .client-editor .form-body  {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.client-editor-embedded .client-workspace.client-editor .form-body  {
  padding: 0;
}

.client-editor-embedded .client-tab-bar  {
  flex-shrink: 0;
  padding: 0 0 5px;
  gap: 8px;
  align-items: flex-start;
}

.client-editor-embedded .client-tab-bar .tabs  {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 4px;
  margin: 0;
}

.client-editor-embedded .client-top-actions  {
  flex-shrink: 0;
}

.client-editor-embedded .client-workspace [data-field-group]  {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 10px 6px;
  scrollbar-gutter: stable;
}

.client-editor-embedded [data-field-group][hidden]  {
  display: none!important;
}

.client-editor-save-status  {
  margin: 0;
  font-size: calc(.8rem * var(--app-font-scale, 1));
}

.client-editor-save-status:empty  {
  display: none;
}

/* Les fenêtres secondaires (contact, document...) restent utilisables au-dessus de l'onglet. */
.client-editor-embedded dialog  {
  max-width: 95vw;
  max-height: 90vh;
}

@media (max-width: 800px)  {
  dialog.client-editor-modal  {
    width: 96vw;
  }

  .client-editor-embedded .client-tab-bar  {
    flex-wrap: wrap;
  }

}