/* pdf_tools: the six PDF tool pages (/tools/merge-pdf and the rest,
   marketing/office_tools/pdf_tools.html.erb, controllers/pdf_tools_controller.js).
   Prefix .ot-pdf-. Shared pieces are in ../office_tools.css. */

.ot-pdf .ot-container > .ot-pdf-tabs { margin-bottom: 16px; }
.ot-pdf-tabs .ot-pill { white-space: nowrap; }

.ot-pdf-heading { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.ot-section .ot-pdf-heading { font-size: 16px; margin: 0; }
.ot-pdf-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ot-pdf-listhead[hidden], .ot-pdf-filebar[hidden], .ot-pdf-grid[hidden], .ot-pdf-drop[hidden] { display: none; }

.ot-pdf-drop { position: relative; min-height: 260px; justify-content: center; }
.ot-pdf-drop strong { font-size: 18px; color: var(--text); }
.ot-pdf-pick { pointer-events: none; margin-top: 4px; }
.ot-pdf-drop:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.ot-pdf-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ot-pdf-filebar svg { color: var(--danger); flex: none; }
.ot-pdf-filename { font-weight: 600; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.ot-pdf-filemeta { font-size: 14px; color: var(--text-secondary); }
.ot-pdf-another { margin-left: auto; }

.ot-pdf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 14px; }
@media (max-width: 420px) { .ot-pdf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.ot-pdf-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ot-pdf-item[draggable="true"] { cursor: grab; }
.ot-pdf-item.is-dragging { opacity: 0.5; border-color: var(--primary); }
.ot-pdf-item.is-deleted .ot-pdf-thumb { opacity: 0.35; }
.ot-pdf-item.is-deleted .ot-pdf-name { text-decoration: line-through; color: var(--text-secondary); }
.ot-pdf-badge { position: absolute; top: 6px; left: 6px; z-index: 1; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--primary); color: var(--text-inverse); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.is-deleted .ot-pdf-badge { background: var(--gray-400); }

.ot-pdf-thumb { height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); padding: 4px; box-sizing: border-box; width: 100%; font: inherit; }
.ot-pdf-thumb canvas { max-width: 100%; max-height: 140px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; }
.ot-pdf-thumb img { max-width: 100%; max-height: 140px; object-fit: contain; }
button.ot-pdf-thumb { cursor: pointer; }
button.ot-pdf-thumb[aria-pressed="true"] { border: 2px solid var(--primary); background: var(--primary-light); }
button.ot-pdf-thumb[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--primary); color: var(--text-inverse); font-size: 14px; display: flex; align-items: center; justify-content: center; }
button.ot-pdf-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ot-pdf-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-pdf-meta { font-size: 13px; color: var(--text-secondary); min-height: 1.2em; }
.ot-pdf-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ot-pdf-icon { flex: 1 1 0; min-width: 44px; min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }
.ot-pdf-icon:hover:not(:disabled) { border-color: var(--primary); }
.ot-pdf-icon:disabled { opacity: 0.35; cursor: default; }
.ot-pdf-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ot-pdf-restore { font-size: 15px; font-weight: 600; color: var(--primary-dark); }

.ot-pdf-add { min-height: 236px; display: flex; }
.ot-pdf-addbtn { flex: 1; border-radius: var(--radius-lg); border: 2px dashed var(--gray-400); background: var(--surface); color: var(--gray-700); font: inherit; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ot-pdf-addbtn:hover { border-color: var(--primary); color: var(--primary-dark); }

.ot-pdf-summary { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ot-pdf-summary[hidden] { display: none; }
.ot-pdf-summary > div { display: flex; justify-content: space-between; gap: 12px; }
.ot-pdf-summary dt { color: var(--text-secondary); }
.ot-pdf-summary dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }

.ot-pdf-warning { margin: 0; font-size: 14px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: 10px 12px; }
.ot-pdf-tool[aria-busy="true"] .ot-pdf-grid { pointer-events: none; opacity: 0.85; }
.ot-pdf-tool .ot-field[hidden], .ot-pdf-tool .ot-btn[hidden], .ot-pdf-tool .ot-hint[hidden] { display: none; }