@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom highlight effect for form sections */
@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.highlight-section {
  animation: highlight-pulse 2s ease-out;
  @apply border-green-500 transition-all duration-300;
}

/* Ensure form sections have consistent spacing */
.form-section-wrapper {
  margin-bottom: 2rem !important;
}

@layer components {
  .notification-dropdown-width {
    width: 650px;
  }

  .required-field-label::after {
    content: " *";
    color: theme('colors.red.500');
  }

  /* Attachment Preview Modal Styles */
  .attachment-preview-modal {
    backdrop-filter: blur(4px);
  }

  .attachment-preview-modal .modal-content {
    max-height: 95vh;
    animation: modalFadeIn 0.2s ease-out;
  }

  @keyframes modalFadeIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-20px);
    }

    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* PDF Viewer Styles */
  .pdf-viewer-container {
    @apply bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800;
  }

  .pdf-viewer-canvas {
    @apply shadow-2xl rounded-lg;
  }

  .pdf-controls {
    @apply bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm rounded-xl shadow-lg;
  }

  .pdf-control-button {
    @apply transition-all duration-150;
  }

  .pdf-control-button:hover:not(:disabled) {
    @apply -translate-y-0.5 shadow-lg;
  }

  /* Image Preview Styles */
  .image-preview-container {
    @apply flex items-center justify-center min-h-[300px];
  }

  .image-viewer-container {
    @apply relative overflow-auto;
  }

  /* Office Document Styles */
  .office-viewer {
    @apply rounded-xl overflow-hidden shadow-xl;
  }

  /* Contract Documents Section Styling */
  .contract-documents-section {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6;
  }

  .contract-documents-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50;
  }

  .contract-documents-content {
    @apply px-6 py-4;
  }

  .document-upload-zone {
    @apply text-center py-8;
  }

  .document-upload-icon {
    @apply mx-auto w-16 h-16 bg-blue-50 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4;
  }

  /* ActionText embedded image styling for social posts (larger) */
  .social-content .trix-content action-text-attachment {
    @apply block my-4;
  }

  .social-content .trix-content action-text-attachment figure {
    @apply my-0 mx-auto max-w-full;
  }

  .social-content .trix-content action-text-attachment figure img {
    @apply cursor-pointer rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200;
    max-width: 600px !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* ActionText embedded image styling for negotiations (smaller, more compact) */
  .negotiation-messaging .trix-content action-text-attachment {
    @apply block my-2;
  }

  .negotiation-messaging .trix-content action-text-attachment figure {
    @apply my-0 mx-auto max-w-full;
  }

  .negotiation-messaging .trix-content action-text-attachment figure img {
    @apply cursor-pointer rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
    max-width: 200px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
  }

  .negotiation-messaging .trix-content action-text-attachment figure img:hover {
    @apply shadow-lg;
    transform: scale(1.05) !important;
  }

  /* Override ActionText default styles for both contexts */
  .trix-content .attachment--preview {
    @apply text-center;
  }

  .trix-content .attachment__caption {
    @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
  }

  /* Ensure images don't overflow message bubbles in negotiations */
  .negotiation-messaging .message-bubble .trix-content action-text-attachment figure {
    @apply max-w-full overflow-hidden;
  }

  .negotiation-messaging .message-bubble .trix-content action-text-attachment figure img {
    max-width: 180px !important;
    max-height: 180px !important;
  }
}