/* ============================================
   SAHIOYE PDF TOOLS — Shared Components
   Extracted from per-tool inline <style> blocks.
   Link this from ALL PDF tool pages:
     <link href="css/tool-common.css" rel="stylesheet"/>
   ============================================ */

/* ── Workspace Sidebar ── */
.merge-sidebar { background:var(--bg-card); border-radius:20px; box-shadow:var(--shadow-card); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.merge-sidebar__header { padding:24px 20px; border-bottom:1px solid var(--border); }
.merge-sidebar__title { font-size:1.1rem; font-weight:700; color:var(--text-primary); text-transform:uppercase; letter-spacing:1px; }
.merge-sidebar__body { padding:24px 20px; }
.merge-sidebar__footer { padding:20px; border-top:1px solid var(--border); background:var(--bg-surface); }

/* ── Upload Actions ── */
.merge-select-btn { background:var(--gradient-primary); color:#fff; padding:16px 36px; font-size:1.15rem; font-weight:700; font-family:inherit; border-radius:var(--radius-md); cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; border:none; }
.merge-select-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(239,68,68,0.35); }
.merge-upload-actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }

/* ── Result Row ── */
.merge-result-row { display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.merge-result-row .download-btn { margin:0; font-size:1.1rem; padding:16px 36px; }
.merge-post-icons { display:flex; align-items:center; gap:10px; }
.merge-post-btn { width:42px; height:42px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); font-size:1rem; }
.merge-post-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-3px); box-shadow:0 4px 16px rgba(239,68,68,0.25); }
.merge-post-btn--danger:hover { background:var(--primary-dark); }

/* ── Workflow Continuity ── */
.merge-continue { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; max-width:600px; margin:0 auto; text-align:center; }
.merge-continue__label { font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px; }
.merge-continue__btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.merge-workflow-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); font-family:inherit; font-size:0.88rem; font-weight:600; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.merge-workflow-btn:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--bg-card-hover); transform:translateY(-2px); box-shadow:var(--shadow-card); }

/* ── Form Elements ── */
.form-group { margin:16px 0; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.tool-input { width:100%; padding:12px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:Inter,sans-serif; font-size:0.95rem; outline:none; transition:border .2s; box-sizing:border-box; }
.tool-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,0.2); }
.info-box { padding:14px 16px; background:rgba(99,102,241,.06); border:1px solid rgba(99,102,241,.15); border-radius:10px; margin:16px 0; font-size:0.82rem; line-height:1.5; color:var(--text-secondary); }

/* ── Mode Selection Cards ── */
.comp-option { padding:16px; border:2px solid transparent; border-radius:var(--radius-sm); background:var(--bg-surface); margin-bottom:12px; cursor:pointer; transition:var(--transition); }
.comp-option:hover { background:var(--bg-card-hover); border-color:var(--border-hover); }
.comp-option.active { border-color:var(--primary); background:rgba(239,68,68,0.05); }
.comp-option__header { font-size:0.95rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.comp-option__desc { font-size:0.8rem; color:var(--text-secondary); line-height:1.4; }

/* ── Thumbnail Grid ── */
.thumbnail-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:20px; max-height:600px; overflow-y:auto; padding-right:10px; }
.thumbnail-grid::-webkit-scrollbar { width:8px; }
.thumbnail-grid::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* ── Page Grid (Thumbnails variant) ── */
.page-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:20px; width:100%; }
.page-thumb { position:relative; border:2px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:var(--transition); background:var(--bg-surface); box-shadow:var(--shadow-card); }
.page-thumb:hover { transform:translateY(-2px); border-color:var(--border-hover); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.page-thumb.selected { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.page-thumb canvas { width:100%; display:block; background:#fff; border-bottom:1px solid var(--border); }
.page-thumb__label { text-align:center; padding:10px; font-size:.85rem; font-weight:600; color:var(--text-secondary); }
.page-thumb.selected .page-thumb__label { color:var(--primary); font-weight:700; }

/* ── PDF Card (Merge style) ── */
.pdf-card { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:var(--transition); }
.pdf-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.pdf-card__preview { width:100%; display:block; background:#fff; }
.pdf-card__name { padding:8px 10px; font-size:.78rem; font-weight:600; color:var(--text-secondary); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Custom Filename Input ── */
.custom-filename-row { display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-surface); transition:border .2s; }
.custom-filename-row:focus-within { border-color:var(--primary); }
.custom-filename-input { flex:1; padding:10px 14px; background:transparent; border:none; outline:none; color:var(--text-primary); font-family:inherit; font-size:.88rem; }
.custom-filename-ext { padding:10px 14px; background:rgba(239,68,68,.06); color:var(--text-muted); font-size:.85rem; font-weight:600; border-left:1px solid var(--border); }

/* ── Related Tools Section ── */
.related-tool-card { display:block; padding:14px 18px; background:var(--card,#1e293b); border:1px solid var(--border,#334155); border-radius:10px; color:var(--text,#e2e8f0); text-decoration:none; font-size:.9rem; font-weight:500; text-align:center; transition:all .2s; }
.related-tool-card:hover { background:var(--primary,#6366f1); color:#fff; transform:translateY(-2px); }

/* ── Setting Label (used in various tools) ── */
.setting-label { font-size:.9rem; font-weight:600; color:var(--text-primary); margin-bottom:8px; display:block; }

/* ── Spinner ── */
@keyframes spin { 100% { transform:rotate(360deg); } }

/* ── Responsive ── */
@media(max-width:900px) {
  .merge-sidebar { width:100% !important; }
}
@media(max-width:600px) {
  .merge-continue__btns { flex-direction:column; align-items:center; }
}