/**
 * Visuels Immo - Design System
 * =================================
 * Variables CSS + classes utilitaires pour cohérence UI
 */

/* ========================================
   1. CSS Variables (Dark Mode Ready)
   ======================================== */

:root {
  /* Colors - Brand */
  --color-primary: 59 130 246;      /* blue-500 */
  --color-primary-hover: 37 99 235; /* blue-600 */
  --color-secondary: 147 51 234;    /* purple-600 */
  
  /* Colors - Semantic */
  --color-success: 34 197 94;       /* green-500 */
  --color-warning: 234 179 8;       /* yellow-500 */
  --color-danger: 239 68 68;        /* red-500 */
  
  /* Colors - Neutral (Light Mode) */
  --color-bg-primary: 249 250 251;   /* gray-50 */
  --color-bg-secondary: 255 255 255; /* white */
  --color-bg-tertiary: 243 244 246;  /* gray-100 */
  
  --color-border: 229 231 235;       /* gray-200 */
  --color-border-light: 243 244 246; /* gray-100 */
  
  --color-text-primary: 17 24 39;    /* gray-900 */
  --color-text-secondary: 75 85 99;  /* gray-600 */
  --color-text-muted: 107 114 128;   /* gray-500 */
  --color-text-disabled: 156 163 175;/* gray-400 */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Radius Scale */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
  :root.dark-mode,
  .dark {
    --color-bg-primary: 17 24 39;      /* gray-900 */
    --color-bg-secondary: 31 41 55;    /* gray-800 */
    --color-bg-tertiary: 55 65 81;     /* gray-700 */
    
    --color-border: 75 85 99;          /* gray-600 */
    --color-border-light: 55 65 81;    /* gray-700 */
    
    --color-text-primary: 249 250 251; /* gray-50 */
    --color-text-secondary: 209 213 219;/* gray-300 */
    --color-text-muted: 156 163 175;   /* gray-400 */
    --color-text-disabled: 107 114 128;/* gray-500 */
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  }
}


/* ========================================
   2. Base Component Styles
   ======================================== */

/* Cards - Consistent styling */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6;
  @apply transition-shadow duration-200;
}

.card:hover {
  @apply shadow-md;
}

.card-compact {
  @apply p-4;
}

.card-large {
  @apply p-8;
}

/* Dark mode cards */
.dark .card {
  @apply bg-gray-800 border-gray-700;
}


/* ========================================
   3. Buttons - Complete States
   ======================================== */

.btn {
  @apply inline-flex items-center justify-center;
  @apply px-4 py-2.5 rounded-lg font-medium text-sm;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
}

/* Primary Button */
.btn-primary {
  @apply bg-blue-600 text-white;
  @apply hover:bg-blue-700;
  @apply focus:ring-blue-500;
  @apply active:bg-blue-800 active:scale-[0.98];
}

/* Secondary Button */
.btn-secondary {
  @apply bg-gray-100 text-gray-700;
  @apply hover:bg-gray-200;
  @apply focus:ring-gray-400;
  @apply active:bg-gray-300;
}

/* Success Button */
.btn-success {
  @apply bg-green-600 text-white;
  @apply hover:bg-green-700;
  @apply focus:ring-green-500;
  @apply active:bg-green-800;
}

/* Danger Button */
.btn-danger {
  @apply bg-red-50 text-red-600;
  @apply hover:bg-red-100;
  @apply focus:ring-red-400;
  @apply active:bg-red-200;
}

/* Danger Solid */
.btn-danger-solid {
  @apply bg-red-600 text-white;
  @apply hover:bg-red-700;
  @apply focus:ring-red-500;
}

/* Outline Button */
.btn-outline {
  @apply border-2 border-gray-200 text-gray-700 bg-transparent;
  @apply hover:border-gray-300 hover:bg-gray-50;
  @apply focus:ring-gray-400;
}

/* Ghost Button */
.btn-ghost {
  @apply text-gray-600 bg-transparent;
  @apply hover:bg-gray-100;
  @apply focus:ring-gray-400;
}

/* Icon Button */
.btn-icon {
  @apply p-2 rounded-lg;
  @apply hover:bg-gray-100;
  @apply focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2;
}

/* Size variants */
.btn-sm {
  @apply px-3 py-1.5 text-xs;
}

.btn-lg {
  @apply px-6 py-3 text-base;
}

/* Loading state */
.btn-loading {
  @apply relative text-transparent pointer-events-none;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 m-auto;
  @apply w-5 h-5 border-2 border-current border-t-transparent rounded-full;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ========================================
   4. Form Inputs - Accessible
   ======================================== */

.input {
  @apply w-full px-4 py-2.5 text-sm;
  @apply border border-gray-200 rounded-lg;
  @apply bg-white text-gray-900;
  @apply transition-colors duration-200;
  @apply placeholder:text-gray-400;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  @apply disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed;
}

.input-error {
  @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

.input-success {
  @apply border-green-500 focus:ring-green-500 focus:border-green-500;
}

/* Select */
.select {
  @apply input appearance-none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Checkbox & Radio */
.checkbox,
.radio {
  @apply w-4 h-4 rounded border-gray-300 text-blue-600;
  @apply focus:ring-blue-500 focus:ring-2 focus:ring-offset-2;
}

.radio {
  @apply rounded-full;
}

/* Label */
.label {
  @apply block text-sm font-medium text-gray-700 mb-1.5;
}

/* Dark mode inputs */
.dark .input {
  @apply bg-gray-800 border-gray-600 text-gray-100;
  @apply placeholder:text-gray-500;
}


/* ========================================
   5. Status Badges - Consistent
   ======================================== */

.badge {
  @apply inline-flex items-center px-2.5 py-1 rounded-full;
  @apply text-xs font-medium;
}

.badge-pending {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-generating {
  @apply bg-blue-100 text-blue-800;
}

.badge-review {
  @apply bg-purple-100 text-purple-800;
}

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

.badge-sent {
  @apply bg-blue-100 text-blue-800;
}

.badge-archived {
  @apply bg-gray-100 text-gray-600;
}

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

/* Dark mode badges */
.dark .badge-pending { @apply bg-yellow-900/30 text-yellow-400; }
.dark .badge-review { @apply bg-purple-900/30 text-purple-400; }
.dark .badge-success { @apply bg-green-900/30 text-green-400; }


/* ========================================
   6. Modal Styles
   ======================================== */

.modal-overlay {
  @apply fixed inset-0 bg-black/50 backdrop-blur-sm;
  @apply flex items-center justify-center z-50;
  @apply transition-opacity duration-200;
}

.modal-content {
  @apply bg-white rounded-2xl shadow-xl;
  @apply max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto;
  @apply transform transition-all duration-200;
}

.modal-header {
  @apply px-6 py-4 border-b border-gray-100;
  @apply flex justify-between items-center;
}

.modal-body {
  @apply p-6;
}

.modal-footer {
  @apply px-6 py-4 border-t border-gray-100 bg-gray-50;
  @apply flex justify-end gap-3;
}

/* Dark mode modal */
.dark .modal-content {
  @apply bg-gray-800 border-gray-700;
}


/* ========================================
   7. Loading States
   ======================================== */

/* Skeleton loader */
.skeleton {
  @apply bg-gray-200 rounded animate-pulse;
}

.skeleton-text {
  @apply h-4 skeleton;
}

.skeleton-text-sm {
  @apply h-3 skeleton;
}

.skeleton-avatar {
  @apply w-10 h-10 rounded-full skeleton;
}

.skeleton-card {
  @apply h-32 skeleton rounded-xl;
}

/* Spinner */
.spinner {
  @apply w-5 h-5 border-2 border-current border-t-transparent rounded-full;
  animation: spin 0.6s linear infinite;
}

.spinner-sm { @apply w-4 h-4; }
.spinner-lg { @apply w-8 h-8; }


/* ========================================
   8. Accessibility Improvements
   ======================================== */

/* Focus visible for keyboard navigation */
:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Skip link for screen readers */
.skip-link {
  @apply sr-only focus:not-sr-only;
  @apply focus:absolute focus:top-4 focus:left-4 focus:z-50;
  @apply focus:px-4 focus:py-2 focus:bg-white focus:rounded-lg focus:shadow-lg;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .btn {
    @apply border-2;
  }
  
  .card {
    @apply border-2 border-gray-400;
  }
}


/* ========================================
   9. Usage Bar Component
   ======================================== */

.usage-bar {
  @apply h-2 rounded-full bg-gray-200 overflow-hidden;
}

.usage-fill {
  @apply h-full rounded-full transition-all duration-500 ease-out;
}

.usage-fill-normal { @apply bg-blue-500; }
.usage-fill-warning { @apply bg-yellow-500; }
.usage-fill-danger { @apply bg-red-500; }


/* ========================================
   10. Tab Navigation
   ======================================== */

.tabs {
  @apply flex gap-1 border-b border-gray-200;
}

.tab {
  @apply px-4 py-3 text-sm font-medium text-gray-600;
  @apply border-b-2 border-transparent;
  @apply transition-colors duration-200;
  @apply hover:text-gray-900 hover:bg-gray-50;
  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset;
}

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


/* ========================================
   11. Tooltip
   ======================================== */

[data-tooltip] {
  @apply relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2;
  @apply px-2 py-1 text-xs text-white bg-gray-900 rounded;
  @apply opacity-0 pointer-events-none transition-opacity;
  @apply whitespace-nowrap;
}

[data-tooltip]:hover::after {
  @apply opacity-100;
}