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

/* Grid Editor Styles */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  
  /* Excel-like cell styling */
  .grid-cell {
    @apply border border-gray-200 bg-white transition-all duration-150 px-2 py-1;
  }
  
  .grid-cell:focus {
    @apply ring-2 ring-blue-500 ring-opacity-50 outline-none border-blue-300 bg-blue-50;
  }
  
  .grid-cell:hover {
    @apply border-gray-300 bg-gray-50;
  }
  
  /* Modified cell styling */
  .grid-cell.modified {
    @apply bg-yellow-50 border-yellow-300;
  }
  
  .grid-cell.modified:focus {
    @apply bg-yellow-100 border-yellow-400 ring-yellow-200;
  }
  
  /* Save button states */
  .save-button:disabled {
    @apply opacity-50 cursor-not-allowed bg-gray-400 hover:bg-gray-400;
  }
  
  .save-button.loading {
    @apply opacity-75 cursor-wait;
  }
  
  /* Loading spinner */
  .loading-spinner {
    @apply animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full;
  }
  
  /* Sort indicators */
  .sort-indicator {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .sort-indicator:hover {
    @apply scale-110;
  }
  
  /* Sort indicator arrows using CSS pseudo-elements */
  .sort-indicator::before {
    content: "↕";
    @apply opacity-0 transition-opacity duration-200;
  }
  
  .sort-indicator.asc::before {
    content: "↑";
    @apply opacity-100;
  }
  
  .sort-indicator.desc::before {
    content: "↓";
    @apply opacity-100;
  }
  
  .sort-indicator:not(.asc):not(.desc)::before {
    @apply opacity-0 group-hover:opacity-100;
  }
}