/* =====================================================================
   admin-components.css - Styles de la page admin-components.html
   (création/édition des composants + éditeur visuel de connecteurs)
   Réutilise les variables de thème définies dans style.css.
   ===================================================================== */

.admin-shell {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.admin-header h1 {
  margin: 0;
}

.admin-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  backdrop-filter: blur(6px);
}

/* Le panneau "Composants existants" grandit avec le nombre de composants
   et defile avec le reste de la page (pas de scroll interne) : un
   backdrop-filter doit recapturer + reflouter son arriere-plan a chaque
   frame en fonction de sa position ecran, ce qui cause un lag de
   defilement perceptible sur un panneau haut. On desactive donc le flou
   pour ce panneau precis (les deux panneaux courts au-dessus gardent
   l'effet, leur cout est negligeable). */
.admin-panel--list {
  backdrop-filter: none;
}

.admin-panel h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

.admin-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 4px 0 12px;
  cursor: pointer;
}

.admin-subfields {
  border-left: 2px solid var(--line);
  padding-left: 14px;
  margin-bottom: 12px;
}

.admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.admin-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 14px;
}

/* ---------- Éditeur visuel des points de connexion ---------- */

.editor-zoom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.editor-zoom-bar .btn {
  padding: 4px 12px;
  min-width: 36px;
}

.editor-zoom-level {
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
}

.connector-editor-wrap {
  overflow: auto;
  padding: 20px;
  border-radius: 10px;
  background: var(--board-inner-bg);
  border: 1px dashed var(--line);
  margin-bottom: 16px;
  display: flex;
  max-height: 70vh;
}

.connector-editor {
  position: relative;
  cursor: crosshair;
  /* margin auto (et non justify-content:center sur le parent) : centre
     l'éditeur quand il est plus petit que le cadre, mais laisse le début
     du contenu accessible au défilement quand le zoom le fait déborder
     (un flex centré qui déborde devient inaccessible côté gauche/haut). */
  margin: auto;
  flex-shrink: 0;
}

/* Boîte réelle du composant, dessinée à l'intérieur de la zone étendue de
   placement (l'éditeur = composant + marge, positionné via --box-* depuis
   js/admin/connector-editor.js). Les ports peuvent être posés autour. */
.connector-editor::before {
  content: '';
  position: absolute;
  left: var(--box-left, 0);
  top: var(--box-top, 0);
  width: var(--box-width, 100%);
  height: var(--box-height, 100%);
  background: var(--canvas-bg);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  pointer-events: none;
}

.connector-editor__image {
  position: absolute;
  left: var(--box-left, 0);
  top: var(--box-top, 0);
  width: var(--box-width, 100%);
  height: var(--box-height, 100%);
  object-fit: contain;
  pointer-events: none;
}

.connector-editor .Connector {
  /* Dans style.css, .Connector est caché (opacity:0) tant que #board n'a
     pas la classe is-link-tool-armed (voir js/canvas/link-tool.js) - cette
     page n'a pas de #board, donc sans cette règle les points ne seraient
     jamais visibles ici. Toujours visibles dans l'éditeur admin. */
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.connector-editor .Connector:active {
  cursor: grabbing;
}

.connector-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.connector-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.82rem;
}

.connector-card__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.connector-card__row--meta {
  grid-template-columns: 1fr 1fr 1fr;
}

.connector-list input,
.connector-list select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.connector-list button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}

.connector-list button:hover {
  color: var(--text);
}

/* ---------- Table des composants existants ---------- */

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}

.admin-table img {
  width: 48px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-table .btn {
  padding: 6px 10px;
  font-size: 0.78rem;
  margin-right: 6px;
}

/* ---------- Dossiers par marque ---------- */

.brand-folders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-folder {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 12px;
}

.brand-folder summary {
  cursor: pointer;
  padding: 10px 4px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-folder summary::-webkit-details-marker {
  display: none;
}

.brand-folder-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.brand-folder .admin-table {
  margin-bottom: 10px;
}

@media (max-width: 860px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}