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

@layer base {
  body {
    @apply bg-black text-[#e7e9ea] font-sans;
  }
}

@layer components {
  /* Navbar */
  .navbar {
    @apply bg-black border-b border-twitter-border;
  }

  .nav-link {
    @apply text-[#e7e9ea] hover:text-twitter-blue transition-colors;
  }

  /* Cards */
  .card {
    @apply bg-twitter-dark border-none text-[#e7e9ea];
  }

  /* Buttons */
  .btn {
    @apply rounded-custom font-medium px-4 py-2 shadow-none transition-opacity hover:opacity-90;
  }

  .btn-primary {
    @apply bg-twitter-blue text-white border-none hover:bg-twitter-blue-hover;
  }

  .btn-outline-primary {
    @apply text-twitter-blue border border-twitter-blue hover:bg-twitter-blue hover:text-white;
  }

  .btn-sm {
    @apply px-2.5 py-1 text-sm rounded;
  }

  /* Badges */
  .badge {
    @apply rounded-[15px] font-medium text-xs px-2.5 py-1.5 capitalize;
  }

  .badge-success {
    @apply bg-twitter-green text-white;
  }

  .badge-danger {
    @apply bg-twitter-red text-white;
  }

  .badge-secondary {
    @apply bg-twitter-gray text-white;
  }

  /* Forms */
  .form-control {
    @apply bg-twitter-darker text-[#e7e9ea] border border-twitter-border rounded-lg;
  }

  .form-control:focus {
    @apply bg-twitter-darker text-[#e7e9ea] border-twitter-blue ring-2 ring-twitter-blue/25;
  }

  /* Tables */
  .table {
    @apply text-[#e7e9ea] bg-twitter-dark;
  }

  .table th,
  .table td {
    @apply border-twitter-border;
  }

  /* Links */
  a {
    @apply text-twitter-blue hover:text-twitter-blue-hover;
  }

  /* Profile Card */
  .profile-card {
    @apply bg-gradient-to-br from-[#0A1A2B] to-[#1C2D44] text-white;
  }

  .claimed-status {
    @apply bg-twitter-green text-white;
  }

  .unclaimed-status {
    @apply bg-twitter-gray text-white;
  }

  .view-profile-btn {
    @apply bg-twitter-blue text-white hover:bg-twitter-blue-hover transition-colors;
  }
  
  /* Toast */
  .toast {
    @apply opacity-0 transition-opacity duration-300;
  }
  
  .toast.show {
    @apply opacity-100;
  }
  
  /* X-style Components */
  .x-card {
    @apply bg-twitter-dark border border-twitter-border rounded-xl p-4 hover:bg-twitter-darker/80 transition-colors;
  }
  
  .x-button {
    @apply bg-twitter-blue text-white font-bold py-2 px-4 rounded-full hover:bg-twitter-blue-hover transition-colors;
  }
  
  .x-button-outline {
    @apply border border-twitter-border text-white font-bold py-2 px-4 rounded-full hover:bg-twitter-darker transition-colors;
  }
  
  .x-input {
    @apply bg-twitter-darker text-white border border-twitter-border rounded-full px-4 py-2 focus:border-twitter-blue focus:ring-1 focus:ring-twitter-blue outline-none;
  }
  
  .x-icon-button {
    @apply p-2 rounded-full hover:bg-twitter-darker transition-colors;
  }
  
  .x-divider {
    @apply border-t border-twitter-border my-4;
  }
  
  .x-avatar {
    @apply rounded-full overflow-hidden;
  }
  
  .x-avatar-sm {
    @apply w-10 h-10;
  }
  
  .x-avatar-md {
    @apply w-12 h-12;
  }
  
  .x-avatar-lg {
    @apply w-16 h-16;
  }

  /* Form Elements */
  select {
    @apply bg-white/5 border border-white/10 rounded-lg text-white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
  }
  
  select option {
    @apply bg-gray-800 text-white;
  }
}