/* ============================================================
   Ocleiria Toolbox  styles communs des outils PDF
   Réutilise les tokens de style.css et des classes d'audio.css
   (.drop, .tool-head, .crumb, .field, .select, .btn*, .bar, .mono, .reveal).
   ============================================================ */

.pdf { display:flex; flex-direction:column; gap:20px; }
/* Bloc d'options/action/résultat : espacement vertical cohérent */
.pdf #panel { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.pdf #panel .opts { margin:0; }

/* ---------- Barre d'action (compteur + boutons) ---------- */
.toolbar {
  position:sticky; top:calc(var(--nav-h) + 8px); z-index:20;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
.toolbar__info { font-family:var(--font-mono); font-size:.82rem; color:var(--text-secondary); }
.toolbar__spacer { flex:1 1 auto; }
.toolbar .btn--sm { height:36px; }

/* ---------- Liste de fichiers (fusion, images→pdf) ---------- */
.files { list-style:none; display:flex; flex-direction:column; gap:10px; }
.file-row {
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-card);
  padding:12px 14px;
}
.file-row.dragging { opacity:.5; }
.file-row.drop-target { border-color:var(--accent); }
.file-row__handle { cursor:grab; color:var(--text-secondary); font-size:1.1rem; line-height:1;
  user-select:none; }
.file-row__handle:active { cursor:grabbing; }
.file-row__name { min-width:0; font-weight:600; font-size:.92rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.file-row__meta { font-size:.76rem; color:var(--text-secondary); font-family:var(--font-mono); }
.file-row__actions { display:flex; align-items:center; gap:6px; }

/* ---------- Grille de miniatures de pages ---------- */
.thumbs {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px;
}
.thumb {
  position:relative; display:flex; flex-direction:column; gap:0;
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:10px;
  overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .15s ease, transform .15s ease;
}
.thumb.is-selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.thumb.dragging { opacity:.45; }
.thumb.drop-target { border-color:var(--accent); transform:scale(1.02); }
.thumb__canvas {
  display:flex; align-items:center; justify-content:center; padding:12px;
  background:var(--secondary-bg); min-height:120px;
}
.thumb__canvas canvas {
  display:block; max-width:100%; height:auto; background:#fff;
  box-shadow:0 1px 6px rgba(27,26,23,.18); border-radius:2px;
  transition:transform .2s ease;
}
.thumb__bar {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:8px 10px; border-top:1px solid var(--border-color);
}
.thumb__num { font-family:var(--font-mono); font-size:.76rem; color:var(--text-secondary); }
.thumb__actions { display:flex; align-items:center; gap:4px; }
.thumb__btn {
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-primary);
  border-radius:var(--radius-sm); transition:var(--transition);
}
.thumb__btn:hover { border-color:var(--accent); color:var(--accent); }
.thumb__btn svg { width:15px; height:15px; }
.thumb__handle { position:absolute; inset:0 0 auto 0; height:22px; cursor:grab; }

/* pastille de sélection (coin) */
.thumb__check {
  position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--card-bg); background:var(--card-bg); box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:grid; place-items:center; cursor:pointer; color:transparent;
}
.thumb.is-selected .thumb__check { background:var(--accent); color:#fff; }
.thumb__check svg { width:13px; height:13px; }

/* rotation visuelle appliquée à l'aperçu */
.thumb[data-rot="90"]  .thumb__canvas canvas { transform:rotate(90deg); }
.thumb[data-rot="180"] .thumb__canvas canvas { transform:rotate(180deg); }
.thumb[data-rot="270"] .thumb__canvas canvas { transform:rotate(270deg); }

/* ---------- Options ---------- */
.opts { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.opts .field { margin:0; min-width:180px; }

/* ---------- Chargement ---------- */
.loading { display:flex; align-items:center; gap:10px; color:var(--text-secondary);
  font-size:.9rem; padding:20px 0; justify-content:center; }
.spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-color); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Résultat ---------- */
.result {
  border:1px solid var(--ok); border-radius:var(--radius-card);
  background:color-mix(in srgb, var(--ok) 7%, var(--card-bg)); padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result__head b { font-size:1rem; }
.result__head span { font-size:.82rem; color:var(--text-secondary); font-family:var(--font-mono); }

.pdf-err {
  color:var(--down); font-size:.9rem; padding:12px 14px;
  border:1px solid var(--down); border-radius:var(--radius);
  background:color-mix(in srgb, var(--down) 8%, transparent);
}

@media (max-width:560px) {
  .thumbs { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
  .toolbar { position:static; }
}