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

@layer base {
  /* Base theme classes */
  .theme-dark {
    --bg-color: #000000;
    --surface-color: rgb(29, 30, 35); /* app-dark color */
    --card-color: #141414;  /* app-darker color */
    --secondary-color: #2C2C2C;
    --border-color: #424242;
    --text-primary: #FFFFFF;
    --text-secondary: #A8B3BE;
  }

  .theme-light {
    --bg-color: #F3F2EF;
    --surface-color: #FFFFFF;
    --card-color: #FFFFFF;
    --secondary-color: #EEF3F8;
    --border-color: #E0E0E0;
    --text-primary: #000000;
    --text-secondary: #666666;
  }

  /* Theme-specific background overrides */
  .theme-light .bg-app-darker {
    background-color: var(--card-color);
  }
  
  .theme-light .bg-app-dark {
    background-color: var(--surface-color);
  }
}

@layer components {
  /* TipTap Editor Styles */
  .editor-container {
    @apply relative bg-transparent min-h-[300px] w-full; /* Increased height */
  }

  .ProseMirror {
    @apply absolute inset-0 min-h-[300px] h-full w-full p-4; /* Increased height */
    min-height: calc(1.5rem * 10); /* Minimum 10 lines (assuming 1.5rem line height) */
    color: var(--text-primary);
    cursor: text;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, Oxygen, 'Oxygen Sans', Cantarell;
  }

  .ProseMirror:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .ProseMirror p.is-empty::before {
    color: var(--text-secondary);
    content: "De quoi souhaitez-vous parler aujourd'hui ?";
    float: left;
    height: 0;
    pointer-events: none;
  }

  .ProseMirror ul {
    @apply list-disc pl-4;
  }

  .ProseMirror ol {
    @apply list-decimal pl-4;
  }

  /* Theme utility classes */
  .bg-theme {
    @apply transition-colors duration-200;
    background-color: var(--bg-color);
  }

  .bg-theme-surface {
    @apply transition-colors duration-200;
    background-color: var(--surface-color);
  }

  .bg-theme-card {
    @apply transition-colors duration-200;
    background-color: var(--card-color);
  }

  .bg-theme-secondary {
    @apply transition-colors duration-200;
    background-color: var(--secondary-color);
  }

  .border-theme {
    @apply transition-colors duration-200;
    border-color: var(--border-color);
  }

  .text-theme-primary {
    @apply transition-colors duration-200;
    color: var(--text-primary);
  }

  .text-theme-secondary {
    @apply transition-colors duration-200;
    color: var(--text-secondary);
  }

  /* LinkedIn-style media preview components */
  .media-preview-container {
    @apply relative w-full mb-4;
  }

  .media-preview-card {
    @apply rounded-lg overflow-hidden bg-theme-surface border border-theme shadow-sm;
  }

  /* Image preview */
  .media-image-container {
    @apply relative max-h-[500px] overflow-hidden;
  }

  .media-image {
    @apply w-full h-auto object-contain mx-auto;
  }

  /* PDF Carousel */
  .pdf-carousel {
    @apply relative bg-gray-100 dark:bg-gray-900;
  }

  .pdf-pages {
    @apply flex transition-transform duration-300 ease-in-out;
  }

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

  .pdf-loading {
    @apply flex items-center justify-center h-64 w-full;
  }

  .pdf-nav-button {
    @apply absolute top-1/2 -translate-y-1/2 p-2 bg-gray-900/75 hover:bg-gray-900 text-white rounded-full 
           transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .pdf-prev {
    @apply left-2;
  }

  .pdf-next {
    @apply right-2;
  }

  .pdf-indicator {
    @apply absolute bottom-2 left-1/2 -translate-x-1/2 bg-gray-900/75 text-white text-sm px-3 py-1 rounded-full;
  }

  /* Document preview */
  .document-preview {
    @apply p-4;
  }

  .document-info {
    @apply flex items-center;
  }

  .document-icon {
    @apply flex-shrink-0 w-12 h-12 mr-4;
  }

  .document-details {
    @apply flex-1 min-w-0;
  }

  .document-title {
    @apply text-base font-medium text-theme-primary truncate;
  }

  .document-size {
    @apply text-sm text-theme-secondary;
  }

  /* Video preview */
  .video-preview {
    @apply relative max-h-[500px];
  }

  .video-player {
    @apply w-full h-full bg-black;
  }

  /* Remove button */
  .media-remove-button {
    @apply absolute top-2 right-2 p-2 bg-gray-900/75 hover:bg-gray-900 text-white rounded-full 
           opacity-0 transition-opacity duration-200;
  }
}