/* === PJ Manager UI v2 ===
   Variables CSS de styles.css pour compatibilite mode clair/sombre */

/* Notification badge sur le bouton header */
.pj-notif {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: #d9534f;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.pj-notif[hidden] { display: none; }
#pj-badge { position: relative; }
#pj-badge.active { color: var(--accent); }

/* Vue PJ */
#pj-view { display: none; flex: 1; overflow: hidden; }
#pj-view.active { display: flex; }
#chat-view.hidden { display: none; }

.pj-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }

/* Sidebar PJ */
.pj-sidebar {
  width: 260px; min-width: 220px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  padding: 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}

.pj-sidebar h3 {
  font-size: 0.9rem; margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.pj-filter-group { display: flex; flex-direction: column; gap: 3px; }

.pj-filter-btn {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px;
  border: none; border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s;
  text-align: left;
}
.pj-filter-btn:hover { background: var(--accent-light, rgba(37,99,235,0.1)); }
.pj-filter-btn.active { color: var(--accent); font-weight: 600; background: transparent; }

.pj-count {
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-muted);
  margin-left: auto; flex-shrink: 0;
}

/* Boutons batch sous les categories */
.pj-batch-btn {
  display: none; width: 100%;
  padding: 5px 12px; margin: 2px 0 6px 0;
  border: 1px solid var(--border); border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem; cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.pj-batch-btn.visible { display: block; }
.pj-batch-btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-light, rgba(37,99,235,0.08));
}
.pj-batch-btn.destructive:hover {
  border-color: #d9534f; color: #d9534f; background: rgba(217, 83, 79, 0.08);
}

.pj-actions { display: flex; flex-direction: column; gap: 6px; }

/* Bouton principal -- style identique a "Nouvelle conversation" */
.pj-action-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.pj-action-btn:hover { background: var(--accent); color: #fff; }
.pj-action-btn:disabled { opacity: 0.4; cursor: default; background: transparent; color: var(--accent); }
.pj-action-btn.pj-btn-stop { color: #d9534f; border-color: #d9534f; }
.pj-action-btn.pj-btn-stop:hover { background: #d9534f; color: #fff; }

/* Toggle auto/manuel */
.pj-auto-toggle { margin-top: 4px; }
.pj-toggle-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 0.78rem; color: var(--text-secondary);
  user-select: none;
}
.pj-toggle-label input { display: none; }
.pj-toggle-slider {
  position: relative;
  width: 34px; height: 18px; flex-shrink: 0;
  background: var(--border);
  border-radius: 9px;
  transition: background 0.2s;
}
.pj-toggle-slider::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.pj-toggle-label input:checked + .pj-toggle-slider {
  background: var(--accent);
}
.pj-toggle-label input:checked + .pj-toggle-slider::after {
  transform: translateX(16px);
}

/* Barre de progression */
.pj-progress { margin-top: 6px; }
.pj-progress[hidden] { display: none; }
.pj-progress-bar {
  height: 6px; border-radius: 3px;
  background: var(--bg-secondary); overflow: hidden;
}
.pj-progress-fill {
  height: 100%; border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s;
  width: 0%;
}
.pj-progress-text {
  font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; display: block;
}

/* Zone principale -- cards */
.pj-main {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-primary);
}

.pj-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1; color: var(--text-muted); font-size: 0.95rem;
}

/* Card PJ */
.pj-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s;
}
.pj-card:hover { border-color: var(--accent); }

/* Couleurs par categorie */
.pj-card.cat-junk { border-color: rgba(217, 83, 79, 0.4); opacity: 0.75; }
.pj-card.cat-junk:hover { border-color: #d9534f; opacity: 1; }
.pj-card.cat-pending { border-left: 3px solid var(--text-muted); }
.pj-card.cat-duplicate { opacity: 0.85; }
.pj-card.cat-awaiting { border-left: 3px solid var(--accent); }
.pj-card.cat-update { border-left: 3px solid #f0ad4e; }
.pj-card.cat-photo { border-left: 3px solid #9b59b6; }
.pj-card.cat-validated { border-left: 3px solid #5cb85c; }
.pj-card.cat-rejected { opacity: 0.6; }

/* Ligne principale */
.pj-card-row {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}

/* IMPORTANT: noms de fichiers JAMAIS tronques */
.pj-card-filename {
  font-weight: 600; font-size: 0.85rem; color: var(--text-primary);
  word-break: break-word; overflow-wrap: anywhere;
}

.pj-card-arrow { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; padding-top: 2px; }

.pj-card-newname {
  font-weight: 600; font-size: 0.85rem; color: var(--accent);
  word-break: break-word; overflow-wrap: anywhere;
}

.pj-card-size {
  font-size: 0.7rem; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}

.pj-card-actions-inline {
  display: flex; gap: 4px; flex-shrink: 0; margin-left: auto;
}

.pj-card-detail {
  font-size: 0.78rem; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 4px;
}

.pj-card-dest { color: var(--text-muted); word-break: break-all; }

.pj-card-reason {
  font-size: 0.75rem; color: var(--text-muted);
  font-style: italic;
}

.pj-card-confidence {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 600;
}
.pj-card-confidence.high { color: #5cb85c; }
.pj-card-confidence.medium { color: #f0ad4e; }
.pj-card-confidence.low { color: #d9534f; }

/* Doublon: presentation jumeau */
.pj-card-twin {
  font-size: 0.8rem; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0;
}
.pj-card-twin-name {
  font-weight: 600; color: var(--text-primary);
  word-break: break-word; overflow-wrap: anywhere;
}
.pj-card-twin-path {
  font-size: 0.72rem; color: var(--text-muted);
  word-break: break-all;
}
.pj-twin-link {
  color: var(--accent); cursor: pointer; text-decoration: underline;
  word-break: break-word; overflow-wrap: anywhere;
}
.pj-twin-link:hover { color: var(--accent-hover); }

/* Boutons card */
.pj-btn {
  padding: 4px 10px; border: none; border-radius: 4px;
  font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.pj-btn-preview { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); }
.pj-btn-preview:hover { border-color: var(--accent); color: var(--accent); }
.pj-btn-validate { background: #5cb85c; color: #fff; }
.pj-btn-validate:hover { background: #4cae4c; }
.pj-btn-modify { background: #f0ad4e; color: #fff; }
.pj-btn-modify:hover { background: #ec971f; }
.pj-btn-reject { background: #d9534f; color: #fff; }
.pj-btn-reject:hover { background: #c9302c; }
.pj-btn-delete { background: none; color: var(--text-muted); padding: 4px 6px; font-size: 0.9rem; }
.pj-btn-delete:hover { color: #d9534f; }
.pj-btn-recover { background: var(--accent); color: #fff; }
.pj-btn-recover:hover { background: var(--accent-hover); }

/* ============================================
   MODALE GENERIQUE (overlay)
   ============================================ */
.pj-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.pj-modal-overlay[hidden] { display: none; }

/* ============================================
   PREVIEW MODALE
   ============================================ */
.pj-preview-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.pj-preview-modal[hidden] { display: none; }

.pj-preview-content {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 90vw; max-width: 900px; height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}

.pj-preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pj-preview-header h3 {
  margin: 0; font-size: 0.9rem; color: var(--text-primary);
  word-break: break-word; overflow-wrap: anywhere;
}

.pj-close-btn {
  background: none; border: none; color: var(--text-primary);
  font-size: 1.8rem; cursor: pointer; padding: 4px 10px;
  line-height: 1; border-radius: 6px; transition: background 0.15s;
  flex-shrink: 0;
}
.pj-close-btn:hover { background: var(--bg-secondary); }

.pj-preview-body { flex: 1; overflow: auto; padding: 0; }
.pj-preview-body iframe, .pj-preview-body img { width: 100%; height: 100%; border: none; object-fit: contain; }
.pj-preview-body .pj-text-preview {
  padding: 16px; white-space: pre-wrap; font-family: monospace;
  font-size: 0.82rem; color: var(--text-primary); line-height: 1.5;
}
.pj-preview-body .pj-preview-download { padding: 16px; text-align: center; }
.pj-preview-body .pj-preview-download a { color: var(--accent); text-decoration: underline; }

/* ============================================
   MODALE NAVIGATION NAS
   ============================================ */
.pj-nas-dialog {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 90vw; max-width: 1100px; height: 80vh;
  min-width: 400px; min-height: 300px;
  display: flex; flex-direction: column; overflow: hidden;
  resize: both;
}

.pj-nas-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pj-nas-header h3 { margin: 0; font-size: 0.95rem; color: var(--text-primary); }

.pj-nas-breadcrumb {
  padding: 6px 16px;
  font-size: 0.75rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-height: 28px;
}
.pj-nas-breadcrumb .crumb {
  cursor: pointer; color: var(--accent);
  text-decoration: none;
}
.pj-nas-breadcrumb .crumb:hover { text-decoration: underline; }
.pj-nas-breadcrumb .crumb-sep { color: var(--text-muted); }

.pj-nas-body {
  flex: 1; display: flex; overflow: hidden;
}

.pj-nas-tree {
  flex: 1; overflow-y: auto; padding: 8px;
  min-width: 160px;
}

.pj-nas-splitter {
  width: 5px; flex-shrink: 0;
  background: var(--border);
  cursor: col-resize;
  transition: background 0.15s;
}
.pj-nas-splitter:hover, .pj-nas-splitter.dragging {
  background: var(--accent);
}

.pj-nas-preview {
  width: 45%; overflow: auto; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  min-width: 120px;
  position: relative;
}
.pj-nas-preview-empty {
  color: var(--text-muted); font-size: 0.8rem; text-align: center;
}
.pj-nas-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pj-nas-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Arbo NAS items */
.pj-nas-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px;
  cursor: pointer; font-size: 0.82rem;
  color: var(--text-primary);
  transition: background 0.1s;
  user-select: none;
}
.pj-nas-item:hover { background: var(--accent-light, rgba(37,99,235,0.08)); }
.pj-nas-item.selected { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.pj-nas-item.is-dir { font-weight: 500; }

.pj-nas-item .nas-icon {
  flex-shrink: 0; width: 16px; text-align: center;
  font-size: 0.75rem; color: var(--text-muted);
}
.pj-nas-item.is-dir .nas-icon { color: var(--accent); }

.pj-nas-item .nas-name {
  word-break: break-word; overflow-wrap: anywhere;
}

.pj-nas-children {
  padding-left: 16px;
}
.pj-nas-children[hidden] { display: none; }

.pj-nas-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.pj-nas-rename {
  display: flex; align-items: center; gap: 8px;
}
.pj-nas-rename label {
  font-size: 0.8rem; color: var(--text-secondary);
  white-space: nowrap;
}
.pj-nas-rename input {
  flex: 1;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem;
}
.pj-nas-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ============================================
   MODALE COMPARAISON COTE A COTE
   ============================================ */
.pj-compare-dialog {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 95vw; max-width: 1200px; height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.pj-compare-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pj-compare-header h3 { margin: 0; font-size: 0.95rem; color: var(--text-primary); }

.pj-compare-body {
  flex: 1; display: flex; overflow: hidden;
}
.pj-compare-pane {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.pj-compare-pane:last-child { border-right: none; }

.pj-compare-label {
  padding: 6px 12px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  text-align: center;
}

.pj-compare-content {
  flex: 1; overflow: auto;
  position: relative;
}
.pj-compare-content img { width: 100%; height: auto; object-fit: contain; }
.pj-compare-content iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Scroll commun synchronise via JS */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .pj-layout { flex-direction: column; }
  .pj-sidebar {
    width: 100%; min-width: 0;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px;
  }
  .pj-sidebar h3 { font-size: 0.8rem; }
  .pj-card-row { flex-wrap: wrap; }

  /* NAS modal: masquer preview + splitter sur mobile */
  .pj-nas-preview { display: none; }
  .pj-nas-splitter { display: none; }
  .pj-nas-tree { border-right: none; }

  /* Compare: empile verticalement */
  .pj-compare-body { flex-direction: column; }
  .pj-compare-pane { border-right: none; border-bottom: 1px solid var(--border); }
  .pj-compare-pane:last-child { border-bottom: none; }
}