/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Création et reprise d’un projet dans une modale depuis la fiche client.
 * Chargement : private/view.php.
 * Interactions : public/project-create-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.
 */

.project-create-modal {
  width:90vw;
  max-width:1250px;
  height:85dvh;
  max-height:90dvh;
  box-sizing:border-box;
  padding:12px;
  border:1px solid var(--app-primary-border,#bdd6e9);
  border-radius:10px;
  background:#fff;
  overflow:hidden
}

.project-create-modal[open] {
  display:flex;
  flex-direction:column;
  gap:8px
}

.project-create-modal::backdrop {
  background:#142c4866
}

.project-create-modal>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:none
}

.project-create-modal>header h2 {
  margin:0;
  font-size:calc(1rem * var(--app-titles-scale,1));
  color:var(--app-primary-color,#227e9d)
}

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

.project-create-modal>p:empty {
  display:none
}

.project-create-modal>iframe {
  width:100%;
  flex:1;
  min-height:0;
  border:0
}

.project-create-root {
  height:100%;
  overflow:hidden
}

body.project-create-embedded {
  display:block;
  background:#fff!important;
  margin:0;
  min-width:0;
  height:100dvh;
  overflow:auto
}

.project-create-embedded>aside,.project-create-embedded .top,.project-create-embedded>.navigation-toggle {
  display:none!important
}

.project-create-embedded main {
  margin:0!important;
  width:100%!important;
  min-height:0;
  padding:0!important
}

.project-create-embedded .content {
  padding:8px;
  max-width:none
}

.project-create-embedded .client-project-choice {
  width:calc(100% - 16px);
  max-width:none;
  max-height:calc(100dvh - 16px);
  padding:10px
}

.project-create-modal>p[data-state=saved] {
  color:#207147
}

.project-create-modal>p[data-state=error] {
  color:#b42318;
  font-weight:600
}

@media(max-width:700px) {
  .project-create-modal {
    width:97vw;
    height:92dvh;
    max-height:94dvh;
    padding:8px
  }

  .project-create-embedded .watch-mode-grid {
    grid-template-columns:1fr
  }

}

/* Project lists and client project tabs: compact three-way creation menu. */
.project-create-menu{position:relative;margin:0;flex:none}
.project-create-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.project-create-menu>summary::-webkit-details-marker{display:none}
.project-create-menu>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(310px,calc(100vw - 40px));padding:6px;background:#fff;border:1px solid #d6dfe5;border-radius:10px;box-shadow:0 10px 30px #12212f26}
.project-create-menu>nav>a,.project-create-menu>nav>.project-create-unavailable{display:flex;flex-direction:column;gap:4px;padding:10px 12px;text-decoration:none;border-radius:6px;line-height:1.35;white-space:normal}
.project-create-menu>nav>a{color:var(--app-primary-color,#227e9d)}
.project-create-menu>nav>a:hover,.project-create-menu>nav>a:focus-visible{background:color-mix(in srgb,var(--app-primary-color,#227e9d) 10%,white)}
.project-create-menu>nav strong{font-size:calc(13px * var(--app-text-scale,1));font-weight:600}
.project-create-menu>nav small{font-size:calc(11px * var(--app-text-scale,1));color:#62717e}
.project-create-menu .project-create-unavailable{opacity:.6}
@media(max-width:600px){.project-create-menu>nav{right:auto;left:0}}

body.platform-appearance .project-create-menu>summary{min-height:var(--app-control-height,26px);padding:4px 10px;font-size:calc(11px * var(--app-buttons-scale,1));line-height:1.25}