/* Local styles for PDF Merger / Splitter */

.single-column { max-width: 1000px; margin: 0 auto; }

.subtitle { color: #9aa0a6; margin: 0.25rem 0 0.5rem; }

.tabs { display: inline-flex; background: #151515; border: 1px solid #2a2a2a; border-radius: 10px; padding: 4px; gap: 4px; }
.tab { background: transparent; border: none; color: #ddd; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.tab.active { background: #242424; color: #fff; }

.panel { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 10px; padding: 1rem; }

.drop-zone { border: 2px dashed #3a3a3a; border-radius: 10px; padding: 22px; text-align: center; background: #181818; outline: none; }
.drop-zone.small { padding: 16px; }
.drop-zone:focus { border-color: #4a8cff; }
.drop-zone.dragover { border-color: #7eb5ff; background: #1a1f2a; }
.drop-inner { display: grid; gap: 6px; align-items: center; justify-items: center; }
.drop-icon { font-size: 22px; opacity: 0.9; }
.drop-text { color: #eaeaea; font-weight: 600; }
.or { color: #999; font-size: 0.9rem; }
.btn { display: inline-block; background: #272727; border: 1px solid #333; padding: 8px 12px; border-radius: 8px; cursor: pointer; }

.queue { margin-top: 14px; }
.queue-header { display: grid; grid-template-columns: 24px 1fr 90px 90px; gap: 8px; padding: 6px 8px; color: #aaa; border-bottom: 1px solid #2a2a2a; font-size: 0.9rem; }
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-item { display: grid; grid-template-columns: 24px 1fr 90px 90px; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #242424; }
.queue-item.dragging { outline: 2px dashed #4a8cff; }
.drag-handle { cursor: grab; user-select: none; opacity: 0.8; }
.file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pages { text-align: right; color: #ccc; }
.row.inline { display: flex; align-items: center; gap: 10px; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; margin-top: 10px; }
.row.wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
input[type="text"], select { background: #121212; color: #f5f5f5; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; }
.checkbox input { margin-right: 6px; }

.status-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.status { color: #9aa0a6; }
.muted { color: #9aa0a6; }

.thumbs-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.thumb { position: relative; border: 1px solid #2a2a2a; background: #0e0e0e; border-radius: 8px; padding: 6px; cursor: pointer; user-select: none; }
.thumb .num { position: absolute; top: 6px; left: 6px; background: #111827; color: #cbd5e1; border: 1px solid #30363d; border-radius: 999px; padding: 2px 6px; font-size: 11px; }
.thumb canvas, .thumb img { width: 100%; height: auto; display: block; background: #fff; border-radius: 4px; }
.thumb .overlay { position: absolute; inset: 0; border-radius: 8px; border: 2px solid transparent; }
.thumb.selected .overlay { border-color: #4a8cff; }
.thumb .rot { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.6); color: #d1d5db; font-size: 11px; padding: 2px 6px; border-radius: 999px; }

.reorderable .thumb { cursor: grab; }

@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; }
  .queue-header, .queue-item { grid-template-columns: 20px 1fr 70px 70px; }
}