/* ============================================================  
   RELANCE — Suivi des relances commerciales  
   ============================================================ */

/* ============================================================  
   HEADER STATS RELANCE  
   ============================================================ */  
.relance-stats {  
  display: grid;  
  grid-template-columns: repeat(5, 1fr);  
  gap: 14px;  
  margin-bottom: 20px;  
}

.relance-stat-card {  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 18px 20px;  
  box-shadow: var(--shadow);  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
  border-top: 3px solid transparent;  
  transition: transform var(--transition), box-shadow var(--transition);  
  position: relative;  
  overflow: hidden;  
}

.relance-stat-card:hover {  
  transform: translateY(-2px);  
  box-shadow: var(--shadow-lg);  
}

.relance-stat-card:nth-child(1) { border-top-color: #f59e0b; }  
.relance-stat-card:nth-child(2) { border-top-color: #ef4444; }  
.relance-stat-card:nth-child(3) { border-top-color: #4f46e5; }  
.relance-stat-card:nth-child(4) { border-top-color: #22c55e; }  
.relance-stat-card:nth-child(5) { border-top-color: #64748b; }

/* ============================================================  
   TOOLBAR RELANCE  
   ============================================================ */  
.relance-toolbar {  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 14px 18px;  
  display: flex;  
  flex-wrap: wrap;  
  gap: 10px;  
  align-items: center;  
  box-shadow: var(--shadow);  
  margin-bottom: 18px;  
}

.relance-toolbar input,  
.relance-toolbar select {  
  border: 1px solid var(--border);  
  border-radius: var(--radius-sm);  
  padding: 7px 12px;  
  font-size: .875rem;  
  background: var(--bg);  
  color: var(--text);  
  outline: none;  
  height: 36px;  
  transition: border-color var(--transition), box-shadow var(--transition);  
}

.relance-toolbar input:focus,  
.relance-toolbar select:focus {  
  border-color: var(--primary);  
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);  
}

.relance-toolbar input[type="text"] {  
  min-width: 220px;  
  flex: 1;  
}

/* ============================================================  
   TABLEAU RELANCES  
   ============================================================ */  
.relance-table-wrap {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  overflow: hidden;  
  margin-bottom: 20px;  
}

.relance-table-wrap table {  
  width: 100%;  
  border-collapse: collapse;  
  font-size: .845rem;  
  table-layout: fixed;  
}

.relance-table-wrap colgroup col:nth-child(1) { width: 20%; }  
.relance-table-wrap colgroup col:nth-child(2) { width: 12%; }  
.relance-table-wrap colgroup col:nth-child(3) { width: 11%; }  
.relance-table-wrap colgroup col:nth-child(4) { width: 10%; }  
.relance-table-wrap colgroup col:nth-child(5) { width: 10%; }  
.relance-table-wrap colgroup col:nth-child(6) { width: 10%; }  
.relance-table-wrap colgroup col:nth-child(7) { width: 13%; }  
.relance-table-wrap colgroup col:nth-child(8) { width: 14%; }

/* ============================================================  
   BADGES RELANCE  
   ============================================================ */  
.badge-relance-urgent    { background: #fee2e2; color: #991b1b; }  
.badge-relance-today     { background: #fef3c7; color: #b45309; }  
.badge-relance-soon      { background: #dbeafe; color: #1d4ed8; }  
.badge-relance-scheduled { background: #f1f5f9; color: #475569; }  
.badge-relance-done      { background: #dcfce7; color: #15803d; }  
.badge-relance-converted { background: #ede9fe; color: #6d28d9; }  
.badge-relance-postponed { background: #f1f5f9; color: #475569; }

/* ============================================================  
   MODAL RELANCE  
   ============================================================ */  
.relance-modal-overlay {  
  display: none;  
  position: fixed;  
  inset: 0;  
  background: rgba(15,23,42,.5);  
  z-index: 300;  
  align-items: center;  
  justify-content: center;  
  backdrop-filter: blur(2px);  
}

.relance-modal-overlay.open { display: flex; }

.relance-modal {  
  background: var(--card);  
  border-radius: 16px;  
  padding: 28px 32px;  
  width: 100%;  
  max-width: 560px;  
  box-shadow: 0 24px 64px rgba(0,0,0,.22);  
  position: relative;  
  max-height: 90vh;  
  overflow-y: auto;  
  animation: modalIn .2s ease;  
}

.relance-modal h2 {  
  font-size: 1.1rem;  
  font-weight: 700;  
  margin-bottom: 20px;  
  color: var(--text);  
  display: flex;  
  align-items: center;  
  gap: 10px;  
}

.relance-form-grid {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 14px;  
}

.relance-form-group {  
  display: flex;  
  flex-direction: column;  
  gap: 5px;  
}

.relance-form-group.full { grid-column: 1 / -1; }

.relance-form-group label {  
  font-size: .75rem;  
  font-weight: 700;  
  color: var(--muted);  
  text-transform: uppercase;  
  letter-spacing: .04em;  
}

.relance-form-group input,  
.relance-form-group select,  
.relance-form-group textarea {  
  border: 1px solid var(--border);  
  border-radius: var(--radius-sm);  
  padding: 9px 12px;  
  font-size: .9rem;  
  outline: none;  
  transition: border-color var(--transition), box-shadow var(--transition);  
  font-family: inherit;  
  background: #fff;  
  color: var(--text);  
}

.relance-form-group input:focus,  
.relance-form-group select:focus,  
.relance-form-group textarea:focus {  
  border-color: var(--primary);  
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);  
}

.relance-form-group textarea {  
  resize: vertical;  
  min-height: 72px;  
}

.relance-modal-footer {  
  margin-top: 20px;  
  display: flex;  
  gap: 10px;  
  justify-content: flex-end;  
  padding-top: 14px;  
  border-top: 1px solid var(--border);  
}

/* ============================================================  
   CALENDRIER RELANCES  
   ============================================================ */  
.relance-calendar-wrap {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  padding: 20px;  
  margin-bottom: 20px;  
}

.relance-calendar-header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 16px;  
}

.relance-calendar-title {  
  font-size: 1rem;  
  font-weight: 700;  
  color: var(--text);  
}

.relance-calendar-nav {  
  display: flex;  
  gap: 6px;  
}

.relance-calendar-nav button {  
  background: var(--bg);  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 5px 10px;  
  cursor: pointer;  
  font-size: .85rem;  
  color: var(--text);  
  transition: all var(--transition);  
}

.relance-calendar-nav button:hover {  
  background: var(--primary-lt);  
  border-color: var(--primary);  
  color: var(--primary);  
}

.relance-calendar-grid {  
  display: grid;  
  grid-template-columns: repeat(7, 1fr);  
  gap: 4px;  
}

.relance-cal-day-header {  
  text-align: center;  
  font-size: .72rem;  
  font-weight: 700;  
  color: var(--muted);  
  text-transform: uppercase;  
  padding: 4px 0 8px;  
  letter-spacing: .04em;  
}

.relance-cal-day {  
  min-height: 72px;  
  border-radius: 8px;  
  padding: 6px;  
  background: var(--bg);  
  border: 1px solid transparent;  
  transition: border-color var(--transition), background var(--transition);  
  cursor: default;  
  position: relative;  
}

.relance-cal-day:hover {  
  border-color: var(--border);  
  background: #f8faff;  
}

.relance-cal-day.today {  
  border-color: var(--primary);  
  background: var(--primary-lt);  
}

.relance-cal-day.other-month {  
  opacity: .4;  
}

.relance-cal-day.has-relances {  
  cursor: pointer;  
}

.relance-cal-day-num {  
  font-size: .78rem;  
  font-weight: 700;  
  color: var(--muted);  
  margin-bottom: 4px;  
}

.relance-cal-day.today .relance-cal-day-num {  
  color: var(--primary);  
}

.relance-cal-dot {  
  display: inline-block;  
  width: 6px;  
  height: 6px;  
  border-radius: 50%;  
  margin: 1px;  
}

.relance-cal-dot.urgent    { background: #ef4444; }  
.relance-cal-dot.today     { background: #f59e0b; }  
.relance-cal-dot.scheduled { background: #4f46e5; }  
.relance-cal-dot.done      { background: #22c55e; }

.relance-cal-count {  
  font-size: .68rem;  
  font-weight: 700;  
  color: var(--primary);  
  margin-top: 2px;  
}

/* ============================================================  
   LISTE AGENDA (vue timeline)  
   ============================================================ */  
.relance-agenda {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  overflow: hidden;  
  margin-bottom: 20px;  
}

.relance-agenda-header {  
  padding: 14px 18px;  
  font-size: .88rem;  
  font-weight: 700;  
  color: var(--text);  
  border-bottom: 1px solid var(--border);  
  display: flex;  
  align-items: center;  
  gap: 8px;  
}

.relance-agenda-group {  
  border-bottom: 1px solid var(--border);  
}

.relance-agenda-group:last-child { border-bottom: none; }

.relance-agenda-date-label {  
  padding: 8px 18px;  
  font-size: .75rem;  
  font-weight: 700;  
  text-transform: uppercase;  
  letter-spacing: .06em;  
  background: var(--bg);  
  color: var(--muted);  
  border-bottom: 1px solid var(--border);  
  display: flex;  
  align-items: center;  
  gap: 8px;  
}

.relance-agenda-date-label.urgent-date {  
  background: #fee2e2;  
  color: #991b1b;  
}

.relance-agenda-date-label.today-date {  
  background: #fef3c7;  
  color: #b45309;  
}

.relance-agenda-item {  
  display: flex;  
  align-items: center;  
  gap: 14px;  
  padding: 12px 18px;  
  border-bottom: 1px solid #f1f5f9;  
  transition: background var(--transition);  
  cursor: pointer;  
}

.relance-agenda-item:last-child { border-bottom: none; }  
.relance-agenda-item:hover { background: #f8faff; }

.relance-agenda-item-left {  
  display: flex;  
  flex-direction: column;  
  gap: 2px;  
  flex: 1;  
  min-width: 0;  
}

.relance-agenda-societe {  
  font-weight: 700;  
  color: var(--primary);  
  font-size: .9rem;  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}

.relance-agenda-meta {  
  font-size: .78rem;  
  color: var(--muted);  
  display: flex;  
  gap: 10px;  
  flex-wrap: wrap;  
}

.relance-agenda-note {  
  font-size: .78rem;  
  color: var(--text);  
  font-style: italic;  
  margin-top: 2px;  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}

.relance-agenda-actions {  
  display: flex;  
  gap: 5px;  
  flex-shrink: 0;  
}

/* ============================================================  
   PRIORITÉ  
   ============================================================ */  
.priority-dot {  
  width: 10px;  
  height: 10px;  
  border-radius: 50%;  
  flex-shrink: 0;  
}

.priority-haute   { background: #ef4444; }  
.priority-moyenne { background: #f59e0b; }  
.priority-faible  { background: #22c55e; }

/* ============================================================  
   TABS VUE (tableau / agenda / calendrier)  
   ============================================================ */  
.relance-view-tabs {  
  display: flex;  
  gap: 0;  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  margin-bottom: 18px;  
  overflow: hidden;  
}

.relance-view-tab {  
  flex: 1;  
  padding: 11px 16px;  
  text-align: center;  
  font-size: .875rem;  
  font-weight: 600;  
  color: var(--muted);  
  cursor: pointer;  
  border-bottom: 3px solid transparent;  
  transition: all var(--transition);  
  background: transparent;  
  border-left: none;  
  border-right: none;  
  border-top: none;  
}

.relance-view-tab:hover {  
  color: var(--primary);  
  background: var(--primary-lt);  
}

.relance-view-tab.active {  
  color: var(--primary);  
  border-bottom-color: var(--primary);  
  background: var(--primary-lt);  
}

/* ============================================================  
   EMPTY STATE RELANCE  
   ============================================================ */  
.relance-empty {  
  text-align: center;  
  padding: 60px 20px;  
  color: var(--muted);  
}

.relance-empty svg {  
  width: 56px;  
  height: 56px;  
  margin-bottom: 14px;  
  opacity: .25;  
}

.relance-empty p {  
  font-size: .95rem;  
  line-height: 1.7;  
}

/* ============================================================  
   QUICK ACTION BANNER  
   ============================================================ */  
.relance-quick-banner {  
  background: linear-gradient(135deg, #fef3c7, #fff7ed);  
  border: 1px solid #fbbf24;  
  border-radius: var(--radius);  
  padding: 14px 18px;  
  margin-bottom: 18px;  
  display: flex;  
  align-items: center;  
  gap: 14px;  
}

.relance-quick-banner-icon { font-size: 1.6rem; flex-shrink: 0; }

.relance-quick-banner-text {  
  flex: 1;  
  font-size: .88rem;  
  color: #92400e;  
  line-height: 1.5;  
}

.relance-quick-banner-text strong { color: #78350f; }

/* ============================================================  
   RESPONSIVE  
   ============================================================ */  
@media (max-width: 1200px) {  
  .relance-stats { grid-template-columns: repeat(3, 1fr); }  
}

@media (max-width: 900px) {  
  .relance-stats { grid-template-columns: repeat(2, 1fr); }  
  .relance-calendar-grid { gap: 2px; }  
  .relance-cal-day { min-height: 56px; }  
}

@media (max-width: 600px) {  
  .relance-stats { grid-template-columns: 1fr 1fr; }  
  .relance-form-grid { grid-template-columns: 1fr; }  
}