[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1c1917;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
.page-item.sortable-ghost { opacity: 0.4; background-color: #f3f4f6; }
.page-item.sortable-drag { cursor: grabbing !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.thumbnail-container {
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .sidebar-mobile {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
  }
  .sidebar-mobile.open {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
  }
  .sidebar-overlay.open {
    display: block;
  }
}
.page-item.selected {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}
.page-item.selected .selection-indicator {
  display: flex;
}

.insert-indicator {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.page-item:hover .insert-indicator,
.insert-indicator:hover {
  opacity: 1;
  pointer-events: auto;
  right: -24px;
}

.insert-indicator button {
  transform: scale(0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.insert-indicator button:hover {
  transform: scale(1.1);
  z-index: 50;
}

.pages-grid-container {
  display: grid;
  gap: 48px; /* Increased gap for insert buttons to be clearly "between" */
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
.animate-pulse-fast {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom styles for the tool */
#propdfworks-organize-pdf-root {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}