/* ==========================================================================
   CSS Structure:
   1. Base & Utilities
   2. Layout
   3. Components
   4. Pages
   5. Animations & Keyframes
   ========================================================================== */

/* ==========================================================================
   1. Base & Utilities
   ========================================================================== */
:root {
  --transition-base: 200ms ease-in-out;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Base Styles */
body {
  @apply font-sans text-gray-800 bg-gradient-to-br from-blue-50 to-indigo-100;
  min-height: 100vh;
  line-height: 1.5;
}

/* Typography */
h1 { @apply text-4xl md:text-5xl lg:text-6xl mb-6 font-extrabold; }
h2 { @apply text-3xl md:text-4xl lg:text-5xl mb-5 font-extrabold; }
h3 { @apply text-2xl md:text-3xl lg:text-4xl mb-4 font-extrabold; }
p  { @apply text-base text-gray-700 leading-relaxed; }
a  { @apply text-blue-600 hover:text-blue-800 transition-colors duration-200; }

/* Utility Classes */
.container {
  @apply mx-auto px-4 sm:px-6 lg:px-8;
}

.section {
  @apply py-8 md:py-12;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */
/* Main Layout Components */
.main-content {
  @apply py-8 md:py-12;
}

/* Grid Systems */
.grid-cols-features {
  @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
}

/* ==========================================================================
   3. Components
   ========================================================================== */
/* Buttons */
.btn {
  @apply inline-flex items-center justify-center px-6 py-3 rounded-xl shadow-lg 
         transition-all duration-300 ease-in-out transform hover:-translate-y-1 
         hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-gradient-to-r from-blue-600 to-blue-700 text-white 
         hover:from-blue-700 hover:to-blue-800 focus:ring-blue-500;
}

/* Cards */
.card {
  @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300;
}

.card-hover {
  @apply hover:transform hover:scale-[1.03] hover:shadow-xl;
}

/* Forms */
.form-group {
  @apply mb-4;
}

.form-input {
  @apply mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
         transition-all duration-200 ease-in-out;
}

/* Tables */
.table {
  @apply min-w-full bg-white border border-gray-200 rounded-xl overflow-hidden;
}

.table th {
  @apply bg-gray-100 text-left text-sm font-semibold text-gray-700 uppercase;
}

/* Status Badges */
.badge {
  @apply px-2.5 py-0.5 rounded-full text-xs font-semibold;
}

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

/* Modals */
.modal-overlay {
  @apply fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50;
}

/* ==========================================================================
   4. Pages
   ========================================================================== */
/* Homepage */
.hero-section {
  @apply bg-gradient-to-br from-blue-600 to-indigo-700 text-white py-20 
         text-center rounded-b-3xl shadow-2xl;
}

/* Dashboard */
.stat-card {
  @apply bg-white p-6 rounded-xl shadow-lg flex items-center justify-between;
}

/* ==========================================================================
   5. Animations & Keyframes
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-pulse {
  animation: pulse 2s infinite;
}

<style>
/* Animations pour les toast notifications */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: slideInRight 0.3s ease-out;
}

.toast-exit {
    animation: slideOutRight 0.3s ease-in;
}

/* Styles responsives pour mobile */
@media (max-width: 768px) {
    #toast-container {
        top: 2rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
    
    .toast-mobile {
        margin: 0.5rem;
        width: calc(100% - 1rem);
    }
}

/* Vibration pour les notifications importantes */
@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.toast-vibrate {
    animation: vibrate 0.5s ease;
}
</style>