/* Styles personnalisés pour l'analyse de la Bourse de Tunis */

.loading {
  @apply flex items-center justify-center p-8 text-gray-500;
}

.stock-card {
  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow;
}

.stock-card.positive {
  @apply border-l-4 border-green-500;
}

.stock-card.negative {
  @apply border-l-4 border-red-500;
}

.stock-card.neutral {
  @apply border-l-4 border-gray-400;
}

.price-positive {
  @apply text-green-600 font-semibold;
}

.price-negative {
  @apply text-red-600 font-semibold;
}

.price-neutral {
  @apply text-gray-600 font-semibold;
}

.signal-buy {
  @apply bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium;
}

.signal-sell {
  @apply bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium;
}

.signal-hold {
  @apply bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium;
}

.indicator-card {
  @apply bg-white rounded-lg p-4 shadow-sm border border-gray-100;
}

.metric-value {
  @apply text-2xl font-bold;
}

.metric-label {
  @apply text-sm text-gray-500 uppercase tracking-wide;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

.form-input {
  @apply block w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
}

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

.table-header {
  @apply bg-gray-50 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-cell {
  @apply px-4 py-4 whitespace-nowrap text-sm;
}

.chart-container {
  @apply bg-white rounded-lg shadow-sm p-6 border border-gray-100;
  height: 400px;
}

.tabs {
  @apply flex border-b border-gray-200 mb-6;
}

.tab {
  @apply px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium transition-colors cursor-pointer;
}

.tab.active {
  @apply border-blue-500 text-blue-600;
}

/* Animations */
@keyframes pulse-gentle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse-gentle {
  animation: pulse-gentle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Action buttons compacts */
.action-btn {
  @apply text-xs px-2 py-1 rounded border transition-colors;
}

.action-btn-blue {
  @apply text-blue-600 hover:text-blue-800 border-blue-200 hover:bg-blue-50;
}

.action-btn-green {
  @apply text-green-600 hover:text-green-800 border-green-200 hover:bg-green-50;
}

.action-btn-orange {
  @apply text-orange-600 hover:text-orange-800 border-orange-200 hover:bg-orange-50;
}

.action-btn-red {
  @apply text-red-600 hover:text-red-800 border-red-200 hover:bg-red-50;
}

/* Prix et variations */
.price-up {
  @apply text-green-600;
}

.price-down {
  @apply text-red-600;
}

.confidence-high {
  @apply text-green-600 font-semibold;
}

.confidence-medium {
  @apply text-yellow-600 font-medium;
}

.confidence-low {
  @apply text-red-600;
}

/* Animations pour le tableau */
.table-row-hover {
  @apply hover:bg-gray-50 transition-colors duration-150;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .chart-container {
    height: 300px;
    padding: 1rem;
  }
  
  .stock-card {
    padding: 1rem;
  }
  
  /* Responsive table on mobile */
  .table-cell {
    @apply text-sm;
  }
  
  .action-btn {
    @apply px-1 py-1;
  }
}