/**
 * PDF Annotation Module Styles
 * TailwindCSS compatible
 */

/* PDF Viewer Container */
#viewer,
.pdf-viewer-container {
  @apply w-full p-4 bg-gray-100 rounded-lg overflow-y-auto;
  max-height: calc(100vh - 200px);
}

/* Single Page */
.pdf-page {
  @apply relative mx-auto mb-4 shadow-lg;
  background: white;
  isolation: isolate; /* Scope blend modes per page */
}

/* PDF Canvas - the rendered PDF content */
.pdf-canvas {
  @apply block mx-auto;
  display: block;
  margin: 0 auto;
}

/* Text Layer - invisible text for selection */
.pdf-text-layer {
  @apply absolute inset-0;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  /* z-index removed to allow mix-blend-mode to cross layer boundaries */
  transform-origin: 0 0;
}

.pdf-text-layer span,
.pdf-text-layer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.pdf-text-layer ::selection {
  @apply bg-blue-200;
  background: rgba(0, 123, 255, 0.3);
}

/* Annotation Layer - SVG overlay */
.pdf-annotation-layer {
  @apply absolute inset-0 cursor-default;
  pointer-events: none;
  /* z-index removed to allow mix-blend-mode on highlights to blend with the PDF canvas below */
}

/* Highlight annotations always use multiply blend to keep text readable */
.pdf-annotation-layer [data-annotation-type="highlight"] rect {
  mix-blend-mode: multiply;
}

/* When a drawing tool is active, enable pointer events on SVG */
.pdf-annotation-layer.drawing-active {
  pointer-events: all;
  cursor: crosshair;
}

/* Toolbar Container */
#toolbar,
.pdf-toolbar {
  @apply flex flex-wrap items-center gap-2 p-3 bg-white border-b border-gray-300 shadow;
}

/* Toolbar Groups */
.toolbar-group {
  @apply flex items-center gap-1 px-2 py-1 border-r border-gray-300;
}

.toolbar-group:last-child {
  @apply border-r-0;
}

/* Buttons */
.toolbar-btn,
[data-action],
[data-action="zoom-in"],
[data-action="zoom-out"],
[data-action="next-page"],
[data-action="prev-page"],
[data-action="first-page"],
[data-action="last-page"] {
  @apply px-3 py-2 rounded bg-blue-500 text-white font-medium transition-colors duration-200;
  cursor: pointer;
}

.toolbar-btn:hover,
[data-action]:hover {
  @apply bg-blue-600;
}

.toolbar-btn:active,
[data-action]:active {
  @apply bg-blue-700;
}

.toolbar-btn:disabled,
[data-action]:disabled {
  @apply bg-gray-400 cursor-not-allowed;
}

/* Button - Secondary */
.toolbar-btn-secondary,
.toolbar-btn.secondary {
  @apply bg-gray-500;
}

.toolbar-btn-secondary:hover,
.toolbar-btn.secondary:hover {
  @apply bg-gray-600;
}

/* Button - Danger */
.toolbar-btn-danger,
.toolbar-btn.danger {
  @apply bg-red-500;
}

.toolbar-btn-danger:hover,
.toolbar-btn.danger:hover {
  @apply bg-red-600;
}

/* Inputs */
[data-input="page-number"],
[data-select="zoom"] {
  @apply px-2 py-1 border border-gray-300 rounded font-medium;
  font-size: 0.875rem;
}

/* Page Indicator */
[data-component="page-indicator"] {
  @apply flex items-center gap-2 text-sm font-medium;
}

[data-component="page-indicator"] input {
  @apply w-12 px-2 py-1 border border-gray-300 rounded text-center;
  font-size: 0.875rem;
}

/* Zoom Indicator */
[data-component="zoom-indicator"] {
  @apply px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded;
  min-width: 50px;
  text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #viewer,
  .pdf-viewer-container {
    @apply max-h-96;
  }

  #toolbar,
  .pdf-toolbar {
    @apply flex-col items-stretch gap-1;
  }

  .toolbar-group {
    @apply flex-1 border-r-0 border-b border-gray-300;
  }

  .toolbar-group:last-child {
    @apply border-b-0;
  }

  .toolbar-btn,
  [data-action],
  [data-select="zoom"],
  [data-input="page-number"] {
    @apply w-full;
  }

  .pdf-page {
    @apply max-w-full;
  }
}

/* Annotation Elements (will be used in Phase 3+) */
.annotation {
  @apply transition-all duration-200;
}

.annotation.selected {
  @apply opacity-75;
}

.annotation-handle {
  @apply bg-blue-500 rounded cursor-move;
  width: 8px;
  height: 8px;
  pointer-events: all;
}

.annotation-handle.resize {
  @apply cursor-nwse-resize;
}

.annotation-handle.rotate {
  @apply cursor-grab;
}

.annotation-toolbar {
  @apply absolute bottom-full mb-2 flex gap-1 p-2 bg-white rounded shadow-lg border border-gray-300;
  z-index: 100;
  pointer-events: all;
}

.annotation-toolbar button {
  @apply px-2 py-1 text-xs font-medium bg-blue-500 text-white rounded hover:bg-blue-600;
  cursor: pointer;
}

/* Loading State */
.loading {
  @apply opacity-50 pointer-events-none;
}

/* Error State */
.error {
  @apply border-2 border-red-500 rounded p-4 bg-red-50 text-red-700;
}

/* Print Styles */
@media print {
  #toolbar,
  .pdf-toolbar,
  .annotation-toolbar {
    @apply hidden;
  }

  #viewer,
  .pdf-viewer-container {
    @apply max-h-none p-0;
  }

  .pdf-page {
    @apply mb-0 shadow-none;
    page-break-after: always;
  }
}

/* Toast Notification */
#pdf-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.pdf-toast {
  background: white;
  color: #1e293b;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  items-center: center;
  gap: 10px;
  min-width: 250px;
  max-width: 400px;
  border-left: 4px solid #3b82f6;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.pdf-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.pdf-toast.success { border-left-color: #10b981; }
.pdf-toast.error { border-left-color: #ef4444; }
.pdf-toast.info { border-left-color: #3b82f6; }
.pdf-toast.warning { border-left-color: #f59e0b; }

.pdf-toast-icon {
  font-size: 18px;
}