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

@layer base {
  body {
    @apply text-gray-900 bg-gray-50;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-medium;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-teal-600 text-white hover:bg-teal-700;
  }
  
  .btn-secondary {
    @apply bg-white border border-gray-300 text-gray-700 hover:bg-gray-50;
  }
  
  .btn-amber {
    @apply bg-amber-300 text-gray-900 hover:bg-amber-400;
  }
  
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .card {
    @apply bg-white rounded-lg shadow p-6;
  }
  
  .badge {
    @apply px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full;
  }
  
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-danger {
    @apply bg-red-100 text-red-800;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* Phone input styling */
.iti {
    width: 100%;
  }
  
  .iti__flag-container {
    z-index: 10;
  }
  
  .iti__country-list {
    max-height: 200px;
    z-index: 11;
  }
  
  /* Fix for Tailwind conflicts */
  .iti__selected-flag {
    padding: 0 6px 0 8px;
  }
  
  .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0.05);
  }