/* =============================================================================
   KARL PSM — Theme modernisé (avril 2026)
   Surcouche au styles.css original : design plus fluide + composants OCR/import
   ============================================================================= */

:root {
  /* Nouvelle palette : contraste doux + touches d'accent vif */
  --k-primary:       #3b82f6;
  --k-primary-dark:  #1d4ed8;
  --k-primary-soft:  rgba(59, 130, 246, 0.12);

  --k-success:       #10b981;
  --k-success-dark:  #059669;
  --k-success-soft:  rgba(16, 185, 129, 0.12);

  --k-warning:       #f59e0b;
  --k-danger:        #ef4444;
  --k-info:          #06b6d4;

  --k-violet:        #8b5cf6;
  --k-pink:          #ec4899;

  /* Surfaces */
  --k-bg-deep:       #1e293b;
  --k-bg:            #2a3544;
  --k-surface:       #334155;
  --k-surface-2:     #3f4b5c;
  --k-border:        rgba(148, 163, 184, 0.2);
  --k-border-strong: rgba(148, 163, 184, 0.35);

  /* Texte */
  --k-text:          #f1f5f9;
  --k-text-muted:    #cbd5e1;
  --k-text-faint:    #94a3b8;

  /* Espacements et rayons */
  --k-radius-sm: 8px;
  --k-radius:    12px;
  --k-radius-lg: 16px;
  --k-radius-xl: 20px;

  /* Ombres */
  --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --k-shadow:    0 4px 12px rgba(0, 0, 0, 0.25);
  --k-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --k-tx-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --k-tx:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --k-tx-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   COMPOSANT : Quick-import grid (gros boutons email / OCR sur "Nouveau Lead")
   ============================================================================= */

.quick-import-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.btn-quick-import {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem 0.75rem;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  color: var(--k-text);
  cursor: pointer;
  transition: transform var(--k-tx), border-color var(--k-tx), box-shadow var(--k-tx), background var(--k-tx);
  text-align: center;
  min-height: 120px;
}

.btn-quick-import:hover,
.btn-quick-import:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--k-shadow);
  outline: none;
}

.btn-quick-import i {
  font-size: 1.75rem;
  margin-bottom: 0.15rem;
}

.btn-quick-import span {
  font-weight: 600;
  font-size: 0.95rem;
}

.btn-quick-import small {
  color: var(--k-text-faint);
  font-size: 0.75rem;
  line-height: 1.3;
}

.btn-quick-email {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.05));
}
.btn-quick-email:hover {
  border-color: var(--k-primary);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.08));
}
.btn-quick-email i { color: var(--k-primary); }

.btn-quick-ocr {
  border-color: rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.05));
}
.btn-quick-ocr:hover {
  border-color: var(--k-violet);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(236, 72, 153, 0.1));
}
.btn-quick-ocr i { color: var(--k-violet); }

/* =============================================================================
   DIVIDER "OU remplir à la main"
   ============================================================================= */

.form-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  color: var(--k-text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--k-border);
}

/* =============================================================================
   COMPOSANT : Modale OCR
   ============================================================================= */

.ocr-header {
  background: linear-gradient(135deg, var(--k-violet) 0%, var(--k-pink) 100%) !important;
  color: white !important;
}
.ocr-header h3 { color: white !important; }
.ocr-header .modal-close { color: white !important; opacity: 0.9; }

.ocr-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--k-radius);
  color: var(--k-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}

.ocr-hint i {
  color: var(--k-warning);
  font-size: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.ocr-hint strong { color: var(--k-text); }

.ocr-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.ocr-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 0.75rem;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  cursor: pointer;
  transition: transform var(--k-tx), border-color var(--k-tx), background var(--k-tx);
  text-align: center;
  color: var(--k-text);
  min-height: 140px;
}

.ocr-btn:hover { transform: translateY(-2px); }

.ocr-btn-primary {
  background: linear-gradient(135deg, var(--k-violet) 0%, var(--k-pink) 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
}
.ocr-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5);
}

.ocr-btn-secondary {
  background: var(--k-surface);
  border-color: var(--k-border-strong);
}
.ocr-btn-secondary:hover {
  border-color: var(--k-primary);
  background: var(--k-surface-2);
}

.ocr-btn span {
  font-weight: 600;
  font-size: 0.95rem;
}

.ocr-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--k-radius);
  color: var(--k-text);
}

.ocr-status small {
  display: block;
  color: var(--k-text-faint);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.ocr-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--k-primary);
  border-radius: 50%;
  animation: ocr-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

/* =============================================================================
   AMÉLIORATIONS VISUELLES GLOBALES
   ============================================================================= */

/* Animations d'apparition pour les modales */
.modal-backdrop {
  animation: k-fade-in var(--k-tx) both;
}
.modal-content {
  animation: k-pop-in var(--k-tx-slow) both;
}

@keyframes k-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes k-pop-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Boutons plus doux au hover */
.btn {
  transition: transform var(--k-tx-fast), box-shadow var(--k-tx), background var(--k-tx), border-color var(--k-tx);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Inputs : focus plus net */
.input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--k-primary) !important;
  box-shadow: 0 0 0 3px var(--k-primary-soft) !important;
  transition: border-color var(--k-tx-fast), box-shadow var(--k-tx-fast);
}

/* Cards Kanban : effet de lift au hover */
.kanban-card,
.client-card,
.deal-card {
  transition: transform var(--k-tx), box-shadow var(--k-tx), border-color var(--k-tx);
}

.kanban-card:hover,
.client-card:hover,
.deal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--k-shadow);
  border-color: var(--k-border-strong);
}

/* =============================================================================
   RESPONSIVE — Mobile First
   ============================================================================= */

/* Très petits mobiles (< 360px) */
@media (max-width: 359px) {
  .quick-import-grid {
    grid-template-columns: 1fr;
  }
  .ocr-options {
    grid-template-columns: 1fr;
  }
  .btn-quick-import {
    min-height: 90px;
    padding: 0.9rem;
  }
}

/* Mobile standard (360-767px) */
@media (max-width: 767px) {
  .modal-content {
    max-width: 96vw !important;
    margin: 0.5rem auto;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-header {
    padding: 0.9rem 1rem;
  }
  .modal-body {
    padding: 1rem;
  }
  .modal-footer {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }
  /* Espace pour la tab bar du bas */
  body {
    padding-bottom: 70px;
  }
  /* Grilles 2 colonnes qui deviennent 1 colonne sur mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  /* Header plus compact */
  header h1, .app-header h1 {
    font-size: 1.1rem !important;
  }
  /* Boutons plus gros au toucher */
  .btn {
    min-height: 44px;
  }
  .input {
    min-height: 44px;
    font-size: 16px; /* évite le zoom iOS sur focus */
  }
}

/* Tablette (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal-content {
    max-width: 90vw !important;
  }
  .quick-import-grid {
    gap: 1rem;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .modal-content {
    max-width: 700px;
  }
  .btn-quick-import {
    min-height: 140px;
  }
  .btn-quick-import i {
    font-size: 2rem;
  }
  .btn-quick-import span {
    font-size: 1.05rem;
  }
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.toast-container {
  position: fixed;
  bottom: 90px; /* au-dessus de la tab bar mobile */
  right: 1rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .toast-container {
    left: auto;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 400px;
  }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--k-surface);
  color: var(--k-text);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-lg);
  border-left: 4px solid var(--k-primary);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity var(--k-tx), transform var(--k-tx);
  font-size: 0.95rem;
  line-height: 1.4;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}

.toast-content {
  flex: 1;
}

.toast-close {
  background: none;
  border: none;
  color: var(--k-text-faint);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color var(--k-tx-fast);
}
.toast-close:hover { color: var(--k-text); }

.toast-success {
  border-left-color: var(--k-success);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), var(--k-surface) 30%);
}
.toast-danger {
  border-left-color: var(--k-danger);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), var(--k-surface) 30%);
}
.toast-warning {
  border-left-color: var(--k-warning);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), var(--k-surface) 30%);
}
.toast-info {
  border-left-color: var(--k-info);
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), var(--k-surface) 30%);
}

/* =============================================================================
   ACCESSIBILITÉ
   ============================================================================= */

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

/* Focus visible pour navigation clavier */
.btn:focus-visible,
.input:focus-visible,
.btn-quick-import:focus-visible,
.ocr-btn:focus-visible {
  outline: 3px solid var(--k-primary);
  outline-offset: 2px;
}