/* PDFlyHQ — tools/merge-pdf/options.css
   Toolbar + page thumbnail grid with drag-reorder + rotate/delete overlay,
   pooled across every selected file. Matches _Options.cshtml. JS contract:
   #page-grid, #page-count-label, #file-count-label, #btn-add-more,
   #opt-remove-meta, #btn-merge, #btn-back (PageManager.js / index.js).

   The page-grid rules below are copied from tools/organize-pdf/options.css
   verbatim — same markup shape, same drag-reorder mechanics, so no reason
   for the CSS to diverge. Rotation is NOT a CSS transform on the canvas —
   PageManager.js re-renders each thumbnail via pdf.js with the new
   rotation baked into the viewport, which is why .page-card__canvas-wrap is
   a plain centered square: it fits a canvas of any resulting orientation
   without stretching or clipping. */

.options-wrap.merge-wrap { display: flex; flex-direction: column; gap: var(--space-5); }

/* ── Toolbar ── */
.merge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.merge-toolbar__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.merge-toolbar__hint svg { flex: none; width: 16px; height: 16px; }
.merge-toolbar__count { font-size: var(--text-xs); color: var(--color-text-muted); }
.merge-toolbar__count strong { color: var(--color-text); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }

.merge-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.merge-toolbar__sort .btn--sm { height: 26px; padding: 0 var(--space-2); }

/* ── Page grid ── */
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-4);
  max-height: 560px;
  overflow-y: auto;
  padding: var(--space-1) var(--space-1) var(--space-2);
}
@media (min-width: 640px) { .page-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: grab;
  user-select: none;
}
.page-card:active { cursor: grabbing; }

.page-card__canvas-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);
}
.page-card__canvas-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 0 0 1px var(--color-border);
}
.page-card:hover .page-card__canvas-wrap { border-color: var(--color-primary-400); box-shadow: var(--shadow-md); }

.page-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2);
  opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #000 35%, transparent), transparent 45%);
  transition: opacity var(--duration-base) var(--ease-default);
}
.page-card:hover .page-card__overlay,
.page-card:focus-within .page-card__overlay { opacity: 1; }

.page-card__btn {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  transition: background-color var(--duration-base) var(--ease-default);
}
.page-card__btn svg { width: 13px; height: 13px; }
.page-card__btn:hover { background: color-mix(in srgb, #000 75%, transparent); }
.page-card__btn--delete:hover { background: var(--color-danger-500); }
.page-card__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.page-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-card__btn:disabled:hover { background: color-mix(in srgb, #000 55%, transparent); }

.page-card__number {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Drag states ── */
.page-card.is-dragging { opacity: 0.35; }
.page-card.is-drag-over .page-card__canvas-wrap {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 22%, transparent);
}

.page-card.is-removing { animation: page-card-remove 180ms var(--ease-default) forwards; }
@keyframes page-card-remove { to { opacity: 0; transform: scale(0.82); } }

@media (prefers-reduced-motion: reduce) {
  .page-card.is-removing { animation: none; opacity: 0; }
}

/* ── Add more / options / actions ── */
#btn-add-more { align-self: flex-start; gap: var(--space-2); }

.options-group { display: flex; flex-direction: column; gap: var(--space-3); }
.options-group__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.options-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.options-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--color-text-muted); }

.options-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.options-actions .btn--primary { flex: 1; }