/* PDFlyHQ — tools/scan-to-pdf/options.css
   Photo list + reorder controls + enhancement-mode select + actions.
   Matches _Options.cshtml / index.js's renderList(). JS contract:
   .image-item, #img-list, #img-count, #btn-add-more, #opt-mode, #btn-scan,
   #btn-back. Adapted from tools/jpg-to-pdf/options.css — same list markup
   (index/meta/name/size/controls), but every list item here gets exactly
   three .image-btn controls (up/down/remove, no extra modifier class), so
   the "remove" hover color targets the last button by position instead of
   a BEM modifier. */

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

.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);
}

/* ── Photo list (arrange) ── */
.image-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.image-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-primary-500) 6%, var(--color-surface-alt));
  border: 1px solid color-mix(in srgb, var(--color-primary-500) 18%, var(--color-border));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  animation: step-in var(--duration-base) var(--ease-out);
}

.image-item__index {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--color-primary-600);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .image-item__index { color: var(--color-primary-400); }

.image-item__meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.image-item__name { font-weight: var(--font-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-item__size { font-size: var(--text-xs); color: var(--color-text-muted); }

.image-item__controls { display: inline-flex; gap: var(--space-1); flex: none; }

.image-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}
.image-btn:hover:not(:disabled) { color: var(--color-primary-600); background: color-mix(in srgb, var(--color-primary-500) 10%, transparent); }
.image-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.image-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.image-btn svg { width: 16px; height: 16px; }
/* Remove is always the 3rd/last control rendered (up, down, remove). */
.image-item__controls .image-btn:last-child:hover:not(:disabled) { color: var(--color-danger-500); background: var(--color-danger-50); }

.image-count { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); min-height: 1em; }

#btn-add-more { align-self: flex-start; gap: var(--space-2); }

/* ── Select (enhancement mode) ── */
.select {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-focus); }

.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); }

/* ── Actions ── */
.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; }