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

/* FlashMarge Custom Components - Charte Graphique */

@layer base {
  /* Typographie de base */
  body {
    @apply font-sans text-base text-flashmarge-gray-dark leading-relaxed;
  }
  
  h1 {
    @apply font-bold text-[32px] leading-tight text-flashmarge-gray-dark;
  }
  
  h2 {
    @apply font-bold text-2xl leading-snug text-flashmarge-gray-dark;
  }
  
  h3 {
    @apply font-semibold text-lg text-flashmarge-gray-dark;
  }
  
  small {
    @apply text-sm text-flashmarge-gray;
  }
  
  strong {
    @apply font-bold text-flashmarge-blue;
  }
}

@layer components {
  /* Boutons */
  .btn-primary {
    @apply bg-flashmarge-blue text-white rounded-input px-6 py-3 
           font-medium text-base hover:bg-flashmarge-blue-dark 
           transition-colors duration-200 inline-flex items-center justify-center
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-secondary {
    @apply bg-transparent text-flashmarge-blue border-2 border-flashmarge-blue 
           rounded-input px-6 py-3 font-medium text-base 
           hover:bg-flashmarge-blue-pale transition-colors duration-200
           inline-flex items-center justify-center;
  }
  
  .btn-danger {
    @apply bg-fm-danger text-white rounded-input px-6 py-3 
           font-medium text-base hover:bg-red-700 
           transition-colors duration-200 inline-flex items-center justify-center;
  }
  
  .btn-small {
    @apply px-4 py-2 text-sm;
  }
  
  /* Cards */
  .card {
    @apply bg-white border border-flashmarge-gray-light rounded-card 
           p-lg shadow-card hover:shadow-card-hover transition-shadow duration-200;
  }
  
  .card-header {
    @apply font-bold text-lg text-flashmarge-gray-dark mb-md;
  }
  
  /* Inputs */
  .input-field {
    @apply bg-white border border-flashmarge-gray-light rounded-input 
           px-4 py-3 text-base text-flashmarge-gray-dark 
           focus:outline-none focus:border-flashmarge-blue focus:ring-2 
           focus:ring-flashmarge-blue-pale transition-colors duration-200
           placeholder:text-flashmarge-gray;
  }
  
  .input-label {
    @apply font-medium text-sm text-flashmarge-gray-dark mb-2 block;
  }
  
  .input-error {
    @apply border-fm-danger focus:border-fm-danger focus:ring-red-100;
  }
  
  .input-success {
    @apply border-fm-success focus:border-fm-success focus:ring-green-100;
  }
  
  /* Tableaux */
  .table-header {
    @apply bg-flashmarge-gray-pale border-b-2 border-flashmarge-gray-light 
           p-4 font-bold text-sm text-flashmarge-gray-dark;
  }
  
  .table-row {
    @apply border-b border-flashmarge-gray-light p-4 
           text-sm text-flashmarge-gray-dark hover:bg-flashmarge-gray-pale 
           transition-colors duration-150;
  }
  
  .table-cell {
    @apply p-4;
  }
  
  /* Badges / États */
  .badge {
    @apply rounded-badge px-3 py-1 text-xs font-medium inline-flex items-center;
  }
  
  .badge-realized {
    @apply bg-status-realized text-white;
  }
  
  .badge-in-progress {
    @apply bg-status-in-progress text-white;
  }
  
  .badge-quote {
    @apply bg-status-quote text-white;
  }
  
  .badge-lost {
    @apply bg-status-lost text-white;
  }
  
  .badge-success {
    @apply bg-fm-success text-white;
  }
  
  .badge-warning {
    @apply bg-fm-warning text-white;
  }
  
  .badge-danger {
    @apply bg-fm-danger text-white;
  }
  
  .badge-info {
    @apply bg-fm-info text-white;
  }
  
  /* Navigation */
  .nav-link {
    @apply text-base text-flashmarge-gray-dark font-normal 
           hover:text-flashmarge-blue transition-colors duration-200
           px-4 py-2 rounded-input;
  }
  
  .nav-link-active {
    @apply font-bold text-flashmarge-blue bg-flashmarge-blue-pale;
  }
  
  /* Liens */
  .link {
    @apply text-flashmarge-blue hover:text-flashmarge-blue-dark 
           underline transition-colors duration-200;
  }
  
  /* Containers */
  .container-page {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Formulaires */
  .form-group {
    @apply mb-md;
  }
  
  .form-error {
    @apply text-fm-danger text-sm mt-1;
  }
  
  .form-help {
    @apply text-flashmarge-gray text-sm mt-1;
  }
  
  /* Messages d'alerte */
  .alert {
    @apply p-4 rounded-input mb-md border-l-4;
  }
  
  .alert-success {
    @apply bg-green-50 border-fm-success text-green-800;
  }
  
  .alert-warning {
    @apply bg-orange-50 border-fm-warning text-orange-800;
  }
  
  .alert-danger {
    @apply bg-red-50 border-fm-danger text-red-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-fm-info text-blue-800;
  }
  
  /* Sidebar Navigation */
  .sidebar {
    @apply w-64 bg-white border-r border-flashmarge-gray-light min-h-screen;
  }
  
  .sidebar-link {
    @apply flex items-center px-6 py-3 text-flashmarge-gray-dark 
           hover:bg-flashmarge-blue-pale hover:text-flashmarge-blue 
           transition-colors duration-200;
  }
  
  button.sidebar-link {
    @apply bg-transparent border-0 w-full text-left cursor-pointer;
  }
  
  .sidebar-footer form {
    @apply w-full;
  }
  
  .sidebar-link-active {
    @apply bg-flashmarge-blue-pale text-flashmarge-blue font-bold;
  }
  
  /* Dashboard Stats */
  .stat-card {
    @apply card;
  }
  
  .stat-label {
    @apply text-sm text-flashmarge-gray mb-2;
  }
  
  .stat-value {
    @apply text-[32px] font-bold text-flashmarge-blue;
  }
  
  /* Modals */
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
  }
  
  .modal-content {
    @apply bg-white rounded-card p-2xl max-w-2xl w-full mx-4 shadow-card-hover;
  }
  
  .modal-header {
    @apply text-2xl font-bold text-flashmarge-gray-dark mb-lg;
  }
  
  .modal-footer {
    @apply flex justify-end space-x-4 mt-lg pt-lg border-t border-flashmarge-gray-light;
  }
  
  /* Responsive Utilities */
  @media (max-width: 767px) {
    .container-page {
      @apply px-md;
    }
    
    body {
      @apply text-sm;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1023px) {
    .container-page {
      @apply px-lg;
    }
    
    body {
      @apply text-[15px];
    }
  }
  
  @media (min-width: 1024px) {
    .container-page {
      @apply px-xl;
    }
  }
}

@layer utilities {
  /* Espacements personnalisés */
  .spacing-xs {
    @apply p-xs;
  }
  
  .spacing-sm {
    @apply p-sm;
  }
  
  .spacing-md {
    @apply p-md;
  }
  
  .spacing-lg {
    @apply p-lg;
  }
  
  .spacing-xl {
    @apply p-xl;
  }
  
  .spacing-2xl {
    @apply p-2xl;
  }
}