/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

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

@layer base {
  body {
    @apply bg-background text-white antialiased;
  }
}

@layer components {
  .form-section {
    @apply !bg-gray-800 !rounded-xl !shadow-xl !p-8 !w-full !border-2 !border-gray-700;
  }

  .form-group {
    @apply !w-full !mb-6;
  }

  .form-label {
    @apply !block !text-lg !font-medium !text-white !mb-3;
  }

  .form-input {
    @apply !block !w-full !px-4 !py-3 !bg-gray-700 !border-2 !border-gray-600 !rounded-lg !text-white 
           !placeholder-gray-400 !focus:outline-none !focus:ring-2 !focus:ring-primary !focus:border-transparent
           !shadow-lg hover:!shadow-xl !transition-shadow !duration-200 !ease-in-out !text-lg;
  }

  .form-textarea {
    @apply !form-input !min-h-[250px] !resize-y;
  }

  .btn-primary {
    @apply !inline-flex !items-center !px-6 !py-3 !bg-gray-600 hover:!bg-gray-500 !text-white !font-semibold !rounded-lg 
           !shadow-lg hover:!shadow-xl !transition-all !duration-200 !ease-in-out !min-w-[120px] !justify-center;
  }

  .btn-secondary {
    @apply !inline-flex !items-center !px-6 !py-3 !bg-gray-700 hover:!bg-gray-600 !text-white !font-semibold !rounded-lg
           !shadow-lg hover:!shadow-xl !transition-all !duration-200 !ease-in-out !min-w-[120px] !justify-center;
  }

  .tag-pill {
    @apply !inline-flex !items-center !px-4 !py-2 !rounded-full !text-base !font-medium
           !bg-gray-700 !text-white !border-2 !border-gray-600 !shadow-md;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
  
  .search-container {
    @apply relative rounded-lg shadow-sm;
  }

  .search-input {
    @apply block w-full rounded-lg border-0 bg-background-lighter py-4 pl-4 pr-4 text-white placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6;
  }

  .nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-200;
  }

  .nav-tab {
    @apply px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors duration-200 border-b-2 border-transparent;
  }

  .nav-tab.active {
    @apply text-white border-primary;
  }

  .page-title {
    @apply !text-3xl !font-bold !text-white !mb-2;
  }

  .page-description {
    @apply !text-lg !text-gray-300;
  }
}