/* Organize Pages — full-screen visual page manager (drag-to-reorder grid).
   Part of the editor-shell family (redact/sign/annotate/compare/extract):
   reuses the global editorOverlayIn / editorBoxIn keyframes from app.css so
   it opens and closes exactly like its siblings. Colors come from the shared
   token set (main.css) so dark mode is automatic. */

.organize-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: editorOverlayIn 0.2s ease;
}
.organize-overlay.closing {
  animation: editorOverlayOut 0.2s ease forwards;
  pointer-events: none;
}

.organize-editor {
  /* Full-window edge-to-edge — no centered card, no max-width cap. */
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  animation: editorBoxIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.organize-overlay.closing .organize-editor {
  animation: editorBoxOut 0.2s ease forwards;
}

/* ---- Toolbar (two rows: meta + actions) ---- */
.organize-toolbar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.organize-toolbar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.organize-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.organize-title strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.organize-title .organize-sub {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organize-title .organize-sub .organize-selcount {
  color: var(--primary);
  font-weight: 600;
}
.organize-meta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.organize-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.organize-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.organize-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 2px 4px;
}

/* Overflow ("more") menu. On desktop this is invisible plumbing: the trigger is
   hidden and the wrapper + menu are display:contents, so the secondary action
   groups flow inline in the toolbar exactly like any other group. On phones (see
   the responsive block) the trigger appears and the groups collapse into a
   dropdown so the header stays two rows. */
.organize-more { display: contents; }
.organize-more-btn { display: none; }
.organize-more-menu { display: contents; }

/* Action buttons use the shared .btn system; this keeps them tidy + icon-first. */
.organize-toolbar .btn .organize-ico {
  display: inline-flex;
  vertical-align: -2px;
}
.organize-toolbar .btn .organize-ico + span {
  margin-left: 6px;
}

/* ---- Body / grid ---- */
.organize-body {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--bg-soft);
  padding: 18px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.organize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  align-content: start;
}

/* ---- Page card ---- */
.organize-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px 8px;
  cursor: grab;
  user-select: none;
  /* The browser must never claim a touch that starts on a card for native
     scroll — otherwise (esp. on mobile) it cancels a lifted drag. The dnd
     controller scrolls the grid manually while the finger pans pre-lift. */
  touch-action: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s, opacity 0.15s;
}
.organize-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}
.organize-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft), 0 6px 18px rgba(15, 23, 42, 0.12);
}
.organize-card.focused {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.organize-card.is-dragging {
  opacity: 0.35;
  border-style: dashed;
}
.organize-card.lifting {
  transform: scale(0.97);
}

.organize-thumb {
  position: relative;
  height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: repeating-conic-gradient(var(--bg-soft) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.organize-thumb-rot {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  transform-origin: center center;
}
.organize-thumb img {
  display: block;
  max-width: 100%;
  max-height: 188px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  background: #fff;
  /* Keep the page image inert: a native image-drag would fire pointercancel and
     kill an in-progress reorder gesture. The card itself is the drag handle. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.organize-thumb-skel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  height: 88%;
  border-radius: 4px;
  background: linear-gradient(100deg, var(--bg-soft) 30%, var(--border) 50%, var(--bg-soft) 70%);
  background-size: 200% 100%;
  animation: organizeShimmer 1.3s linear infinite;
}
@keyframes organizeShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.organize-card.is-blank .organize-thumb {
  background: none;
}
.organize-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 78%;
  height: 88%;
  border: 2px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 12px;
  background: var(--bg);
}

/* Footer row: position number (left) + provenance tag (right) */
.organize-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 6px;
}
.organize-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.organize-meta-r {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.organize-tag {
  font-size: 11px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organize-rot-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

/* Selection toggle (top-left) — always tappable, prominent when selected */
.organize-sel {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 2;
}
.organize-card:hover .organize-sel,
.organize-card.selected .organize-sel,
.organize-card.focused .organize-sel { opacity: 1; }
.organize-card.selected .organize-sel {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Per-card hover tools (top-right cluster): rotate L/R, duplicate, delete */
.organize-card-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 2;
}
.organize-card:hover .organize-card-tools,
.organize-card.focused .organize-card-tools { opacity: 1; transform: none; }
.organize-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.organize-mini:hover { background: var(--bg-soft); color: var(--text); }
.organize-mini.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.organize-mini svg { width: 15px; height: 15px; }

/* Drop marker shown while dragging — a thin insertion bar positioned absolutely
   in the scroll body, so it never reflows the grid (keeps the hit-test stable). */
.organize-drop-marker {
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  pointer-events: none;
  z-index: 3;
  animation: organizeMarkerPulse 1s ease-in-out infinite;
}
@keyframes organizeMarkerPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Floating drag ghost (appended to body) */
.organize-ghost {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.4);
  transform: rotate(-3deg);
  opacity: 0.95;
}
.organize-ghost img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.organize-ghost-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

/* A page being removed: a detached clone parked over its vacated slot that fades
   + shrinks away (WAAPI, see flipPlay) while the grid rebuilds beneath it. The
   ghost deliberately drops the .organize-card class (so it's never counted as a
   real page), so it carries the card-box look itself. */
.organize-leaving {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px 8px;
}
.organize-leaving.is-blank .organize-thumb { background: none; }

/* Empty state when every page has been removed */
.organize-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-mute);
  padding: 60px 20px;
  font-size: 14px;
}

/* Footer hint strip */
.organize-hint {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-mute);
  font-size: 12px;
  padding: 8px 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.organize-hint kbd {
  font-family: inherit;
  font-size: 11px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  color: var(--text-soft);
}

/* ---- Config surface (the lighter post-cancel / post-apply layer) ---- */
.organize-config-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  /* Size to the *visible* viewport (dvh), not the tall layout viewport (vh).
     With 100vh the editor is as tall as the screen with the URL bar hidden, so
     when the browser's bottom URL/nav bar is showing (Samsung Internet, Chrome
     Android) the grid's last rows sit below the fold, behind the chrome, and
     the inner scroll can't reach them. dvh tracks the area actually on screen. */
  .organize-overlay { height: 100vh; height: 100dvh; }
  .organize-editor {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .organize-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
  .organize-thumb { height: 150px; }
  .organize-thumb img { max-height: 150px; }
  .organize-drop-marker { min-height: 150px; }

  /* Header stays TWO rows: the primary actions + a dots menu fit one row, and
     the secondary actions collapse into the dropdown instead of wrapping onto a
     third row. */
  /* Stack the title above the count so "Organize Pages" keeps its own line.
     Inline, the count sat beside the title and crowded it onto two wrapped
     lines ("Organize / Pages"). Stacking also frees row-1 width, so the title
     no longer wraps. Cancel/Done stay top-right beside the title; the count
     tucks underneath it. */
  /* Desktop moved the toolbar's padding+gap onto the container (matching the
     redact/extract/sign/compare shell). On mobile the two rows pad themselves
     with notch-aware values below, so zero the container to avoid doubling the
     inset. */
  .organize-toolbar { padding: 0; gap: 0; }
  /* Top padding clears the iPhone notch / Dynamic Island when the page goes
     edge-to-edge (viewport-fit=cover); a no-op otherwise. */
  .organize-toolbar-meta { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; align-items: flex-start; }
  .organize-title {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .organize-title strong { white-space: nowrap; }
  .organize-toolbar-actions {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px 12px 8px;
    overflow: visible; /* let the dropdown escape the bar */
  }
  .organize-group { gap: 4px; }
  .organize-divider { margin: 2px; }
  /* Bar buttons are icon-only; the dropdown rows below re-show their labels. */
  .organize-toolbar-actions > .organize-group .btn .organize-label,
  .organize-more-btn .organize-label { display: none; }
  .organize-toolbar-actions > .organize-group .btn .organize-ico + span,
  .organize-more-btn .organize-ico + span { margin-left: 0; }

  /* Comfortable 44px touch targets, matching the redact editor's mobile toolbar.
     These were inheriting .btn-sm (~32px) — neat but a touch small on a phone. */
  .organize-toolbar-actions > .organize-group .btn,
  .organize-more-btn {
    min-height: 44px;
    min-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .organize-meta-actions .btn { min-height: 44px; }

  /* Dots trigger floats to the far right of the bar; menu drops beneath it. */
  .organize-more { display: inline-flex; position: relative; margin-left: auto; }
  .organize-more-btn { display: inline-flex; }
  .organize-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 208px;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    padding: 6px;
    z-index: 60;
    transform-origin: top right;
    animation: menuIn 0.15s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .organize-more.open .organize-more-menu { display: flex; }
  /* Flatten into a vertical list: hide the inline dividers, stack each group,
     and present full-width rows with their labels. */
  .organize-more-menu .organize-divider { display: none; }
  .organize-more-menu .organize-group { flex-direction: column; gap: 2px; width: 100%; align-items: stretch; }
  .organize-more-menu .btn { width: 100%; justify-content: flex-start; padding: 9px 10px; min-height: 44px; }
  .organize-more-menu .btn .organize-label { display: inline; }
  .organize-more-menu .btn .organize-ico + span { margin-left: 10px; }

  /* Tighter padding + bottom slack so the last row clears any overlapping
     browser chrome / home indicator. */
  .organize-body { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .organize-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .organize-overlay, .organize-editor,
  .organize-overlay.closing, .organize-overlay.closing .organize-editor { animation: none; }
  .organize-thumb-skel, .organize-drop-marker { animation: none; }
  .organize-thumb-rot { transition: none; }
}