/* Credipro — feuille de style de la GED (arborescence de dossiers).
  Fichier NOUVEAU et strictement isole : app.css et vitrine.css ne sont pas modifies.
   Toutes les valeurs s'appuient sur les memes variables que le reste de l'application,
   afin que le rendu soit identique en theme clair et sombre. */

/* ---------- Disposition generale ---------- */
.ged-corps {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ---------- Colonne arborescence ---------- */
.ged-arbre {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--ombre-1);
  max-height: calc(100vh - 150px);
}

.ged-arbre-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.ged-arbre-liste {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
}

.ged-legende {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}

.ged-separateur {
  margin: 10px 6px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: .75;
}

/* ---------- Noeud de dossier ---------- */
.ged-noeud {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  transition: background var(--transition), border-color var(--transition);
}
.ged-noeud:hover { background: var(--surface-2); }
.ged-noeud.actif {
  background: color-mix(in srgb, var(--c, var(--brand)) 12%, transparent);
  border-color: color-mix(in srgb, var(--c, var(--brand)) 35%, transparent);
  font-weight: 600;
}
.ged-noeud > .icone { flex: none; color: var(--c, var(--brand)); width: 16px; height: 16px; }

.ged-plier {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.ged-plier:hover { background: var(--border); color: var(--text); }
.ged-plier .icone { width: 13px; height: 13px; }
.ged-plier.vide { visibility: hidden; }

.ged-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ged-compte {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  color: var(--text-2);
}
.ged-noeud.actif .ged-compte {
  background: color-mix(in srgb, var(--c, var(--brand)) 18%, transparent);
  border-color: transparent;
  color: var(--text);
}

.ged-plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}
.ged-noeud:hover .ged-plus { opacity: 1; }
.ged-plus:hover { background: var(--border); color: var(--text); }
.ged-plus .icone { width: 14px; height: 14px; }

/* Cadenas : le dossier a une confidentialite plus forte que « boutique ». */
.ged-verrou {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  opacity: .65;
}
.ged-verrou .icone { width: 12px; height: 12px; }
.ged-noeud:hover .ged-verrou { opacity: 1; }

/* ---------- Fil d'Ariane ---------- */
.ged-fil-ariane {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 2px 2px;
  color: var(--text-2);
  font-size: 12.5px;
}
.ged-fil-ariane > .icone { width: 15px; height: 15px; }
.ged-fil-ariane .btn.gras { font-weight: 700; color: var(--text); }

.ged-fil { min-height: 0; }

/* ---------- Cartes deplacables ---------- */
.ged-vues .carte[data-id][draggable="true"] { cursor: grab; }
.ged-vues .carte[data-id][draggable="true"]:active { cursor: grabbing; }

.ged-noeud.cible {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

/* ---------- Champ fichier (bouton custom) ---------- */
input[type="file"].saisie {
  padding: .35rem .5rem;
  font-size: 13px;
  cursor: pointer;
}
input[type="file"].saisie::file-selector-button {
  margin-right: 8px;
  padding: .3rem .6rem;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- Interrupteur compact ---------- */
.ged-legende .interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.ged-legende .interrupteur input { margin: 0; cursor: pointer; }

/* ---------- Adaptation petit ecran ---------- */
@media (max-width: 900px) {
  .ged-corps { grid-template-columns: minmax(0, 1fr); }
  .ged-arbre { position: static; max-height: 340px; }
}

/* ---------- Impression : l'arborescence n'est pas utile sur papier ---------- */
@media print {
  .ged-arbre, .ged-legende { display: none !important; }
  .ged-corps { grid-template-columns: minmax(0, 1fr); }
}