@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* Sansation font */
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Light.woff2') format('woff2'),
       url('../fonts/Sansation_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Regular.woff2') format('woff2'),
       url('../fonts/Sansation_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Bold.woff2') format('woff2'),
       url('../fonts/Sansation_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: #F5F6FA;
  color: #000000;
}

.btn-primary {
  @apply bg-eneo-blue text-white font-medium py-2 px-4 rounded-md hover:bg-opacity-90 transition-all;
}

.btn-success {
  @apply bg-success text-white font-medium py-2 px-4 rounded-md hover:bg-success-light transition-all;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.form-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-eneo-blue focus:border-transparent;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.agent-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-lg;
}

.agent-card-header {
  @apply bg-eneo-blue text-white p-4;
}

.agent-card-body {
  @apply p-4;
}

.agent-info-item {
  @apply flex items-start mb-2;
}

.agent-info-label {
  @apply text-gray-600 font-medium w-1/3;
}

.agent-info-value {
  @apply font-medium w-2/3;
}

.badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.badge-active {
  @apply bg-green-100 text-green-800;
}

.badge-inactive {
  @apply bg-gray-100 text-gray-800;
}

.badge-suspended {
  @apply bg-red-100 text-red-800;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .agent-info-item {
    @apply flex-col;
  }
  
  .agent-info-label, .agent-info-value {
    @apply w-full;
  }
}