/*
 * lambique-cad.css — contrat 92 : layouts majeurs + overrides métier
 * indispensables uniquement. Tout ce qui est générique (boutons, champs,
 * cartes, toolbar, badges, modal, messages...) vient de /lambique.css.
 */

html, body {
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color: #202a36;
}

/* <button> n'hérite pas de la police du body par défaut (contrairement à
   <a>/<label>) : lbq-button appliqué à un <button> rend donc dans une
   police différente (plus fine) qu'appliqué à un <a> ou <label>, ce qui
   casse l'homogénéité de la toolbar. */
.lbq-button {
  font-family: inherit;
}

/* ---- Identité produit (pas de composant Core équivalent) ---- */

.lca-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e5b04e;
  color: #18232f;
  font-weight: 800;
  font-size: 18px;
}

/* ---- Wrapper métier du contenu applicatif (contrat 92 §10.1) ---- */

.lca-app-content {
  height: 100%;
  overflow: hidden;
}

.lca-app-content__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) clamp(420px, calc(34vw - 20px), 720px) clamp(420px, calc(34vw - 20px), 720px);
  gap: 20px;
  height: 100%;
  min-height: 0;
  margin: auto;
  padding: 20px;
}

.lca-app-content__editor,
.lca-app-content__viewer,
.lca-app-content__welding {
  min-width: 0;
  min-height: 0;
}

.lca-app-content__viewer {
  order: -2;
}

.lca-app-content__welding {
  order: -1;
}

.lca-app-content__editor form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Wrapper regroupant l'entête, l'ajout de pièce et l'arbre dans une même
   carte, au même titre que le panneau projet et le visualiseur 3D. */
.lca-project-panel {
  flex: 0 0 auto;
}

.lca-composition-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 20px;
}

/* Même empattement que .lca-viewer__head (padding propre, en plus du
   padding par défaut de .lbq-card) : les trois cartes de la colonne
   gauche/droite partagent ainsi la même hauteur d'entête. */
.lca-app-content__section-heading {
  margin: 0;
  padding: 19px 21px;
}

/* Le contenu (hors entête) reprend le même empattement horizontal que
   l'entête, pour rester aligné avec elle plutôt qu'avec le padding
   réduit de .lbq-card. */
.lca-project-panel > *:not(header),
.lca-composition-panel > *:not(header) {
  margin-left: 21px;
  margin-right: 21px;
}

.lca-project-panel > *:last-child,
.lca-composition-panel > *:last-child {
  margin-bottom: 21px;
}

.lca-add-parts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed #c9d2d9;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
}

.lca-add-parts .lbq-actions {
  flex-wrap: wrap;
}

/* ---- Viewer 3D (spécifique métier) ---- */

.lca-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lca-viewer__head {
  padding: 19px 21px;
  flex-wrap: wrap;
}

.lca-viewer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.lca-viewer__actions .lbq-button {
  white-space: nowrap;
}

.lca-viewer__status {
  font-size: 11px;
  color: #82909b;
  white-space: nowrap;
}

.lca-viewer__status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9c3c9;
  margin-right: 6px;
  vertical-align: middle;
}

.lca-viewer__status--ready::before {
  background: #4fa875;
}

.lca-viewer__canvas {
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  position: relative;
}

.lca-viewer__canvas #preview {
  height: 100%;
  width: 100%;
  display: block;
  touch-action: none;
}

.lca-viewer__canvas--scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

.lca-viewer__canvas--scroll #welding-canvas {
  width: 100%;
  display: block;
}

.lca-welding-hover {
  position: absolute;
  left: 6px;
  right: 6px;
  background: rgba(59, 70, 82, 0.06);
  border-radius: 8px;
  pointer-events: none;
}

.lca-viewer__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #526273;
  pointer-events: none;
}

.lca-viewer__empty-icon {
  font-size: 52px;
  line-height: 1;
  color: #c39351;
  margin-bottom: 11px;
}

.lca-viewer__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: #526273;
  font-size: 14px;
}

.lca-viewer__hint {
  margin: 0;
  padding: 10px 18px 0;
  border-top: 1px solid #edf0f2;
}

/* ---- Arbre des pièces (composant métier, pas d'équivalent lbq-*) ---- */

.lca-tree-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.lca-tree {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lca-tree__group {
  min-width: 0;
}

.lca-tree__line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lca-tree__line[draggable="true"] {
  cursor: grab;
}

.lca-tree__line[draggable="true"]:active {
  cursor: grabbing;
}

.lca-tree__line--dragging {
  opacity: .4;
}

.lca-tree__line--drag-over-before {
  box-shadow: inset 0 2px 0 0 #bb883b;
}

.lca-tree__line--drag-over-after {
  box-shadow: inset 0 -2px 0 0 #bb883b;
}

.lca-tree__label {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #263442;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 5px 12px;
}

.lca-tree__label:hover,
.lca-tree__label:focus-visible {
  background: #f5f8f9;
  outline: none;
}

.lca-tree__line--level-0 .lca-tree__label {
  padding: 8px 10px;
}

.lca-tree__line--level-1 .lca-tree__label {
  padding-left: 25px;
}

.lca-tree__line--level-2 .lca-tree__label {
  padding-left: 47px;
}

.lca-tree__line--level-3 .lca-tree__label {
  padding-left: 69px;
}

.lca-tree__description {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.lca-tree__description strong {
  font-size: 13px;
  flex: none;
}

.lca-tree__summary {
  font-size: 12px;
  color: #778693;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lca-tree__edit {
  font-size: 11px;
  color: #a47737;
  white-space: nowrap;
  flex: none;
  opacity: 0;
}

.lca-tree__label:hover .lca-tree__edit,
.lca-tree__label:focus-visible .lca-tree__edit {
  opacity: 1;
}

.lca-tree__children {
  padding: 2px 0 4px;
}

.lca-tree__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 150ms ease, opacity 120ms ease;
}

.lca-tree__node:hover > .lca-tree__actions,
.lca-tree__node:focus-within > .lca-tree__actions {
  max-height: 160px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lca-tree__actions--level-0 { padding-left: 10px; }
.lca-tree__actions--level-1 { padding-left: 25px; }
.lca-tree__actions--level-2 { padding-left: 47px; }

.lca-tree__node:hover > .lca-tree__actions,
.lca-tree__node:focus-within > .lca-tree__actions {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---- Dialogue d'édition (élément <dialog> natif) ----
   Habillage visuel lbq-modal__dialog par-dessus <dialog> : le backdrop et
   l'overlay sont fournis nativement par le navigateur (::backdrop,
   showModal()), donc lbq-modal / lbq-modal__backdrop ne sont pas utilisés
   ici — remplacés par le mécanisme natif équivalent. */
.lca-editor-dialog {
  border: 0;
  padding: 0;
  color: inherit;
}

/* lbq-modal__dialog--split force display:flex sans condition sur [open] ;
   ce composant Core est pensé pour un wrapper div piloté par [hidden], pas
   pour un <dialog> natif. On restaure ici le comportement natif "fermé =
   invisible", requis pour que showModal()/close() fonctionnent. */
.lca-editor-dialog:not([open]) {
  display: none;
}

.lca-editor-dialog::backdrop {
  background: rgba(20, 35, 51, 0.66);
  backdrop-filter: blur(3px);
}

/* Alignement du texte d'aide sous le champ (colonne 2) dans les champs
   inline denses du formulaire d'édition. */
#editor-fields .lbq-field--inline > small {
  grid-column: 1 / -1;
}

.lca-standard-field {
  margin-bottom: 13px;
}

@media (max-width: 1050px) {
  .lca-app-content {
    overflow: auto;
  }

  .lca-app-content__grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .lca-app-content__viewer,
  .lca-app-content__welding {
    order: 0;
  }

  .lca-app-content__editor form,
  .lca-viewer {
    height: auto;
  }

  .lca-viewer__canvas--scroll {
    flex: none;
    height: 450px;
    min-height: 360px;
  }

  .lca-composition-panel {
    flex: none;
  }

  .lca-tree-scroll {
    max-height: 50vh;
  }

  .lca-viewer__canvas {
    flex: none;
    height: 450px;
    min-height: 360px;
  }
}

@media (max-width: 680px) {
  .lca-app-content__grid {
    padding: 20px 15px 40px;
    gap: 23px;
  }

  .lca-viewer__head {
    padding: 16px;
  }

  .lca-viewer__canvas {
    height: 360px;
    min-height: 0;
  }

  .lca-tree__description {
    gap: 6px;
  }

  .lca-tree__edit {
    display: none;
  }

  .lca-tree__label {
    padding-right: 10px;
  }
}