/* crop-pdf.css — page-specific styles for /crop-pdf, loaded after styles.css & mobile-header.css.
   Reuses existing .btn, .files-section, .action-buttons etc. from styles.css; only adds
   the crop-tool-specific pieces (toolbar, canvas, selection box) that don't exist yet. */

.crop-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.crop-toolbar-left,.crop-toolbar-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.crop-pagepos{ font-size:.85rem; color:#718096; font-weight:600; }

.crop-check{ display:flex; align-items:center; gap:6px; font-size:.88rem; color:#4a5568; font-weight:600; cursor:pointer; }

.btn-small{ padding:6px 12px; font-size:.82rem; }

.crop-canvas-wrap{
  position:relative;
  max-width:100%;
  overflow:auto;
  background:repeating-conic-gradient(#e2e8f0 0% 25%, transparent 0% 50%) 0 / 16px 16px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  touch-action:none;
}
.crop-canvas-wrap canvas{ display:block; max-width:100%; height:auto; }

.crop-selbox{
  position:absolute;
  border:2px solid #4299e1;
  background:rgba(66,153,225,.15);
  pointer-events:none;
  display:none;
}
.crop-selbox::after{
  content:attr(data-dim);
  position:absolute; bottom:-24px; left:0;
  background:#4299e1; color:#fff;
  font-size:.72rem; font-weight:700;
  padding:2px 6px; border-radius:5px;
  white-space:nowrap;
}

@media (max-width:520px){
  .crop-toolbar{ flex-direction:column; align-items:stretch; }
  .crop-toolbar-left,.crop-toolbar-right{ justify-content:center; }
}