/* ============================================
   Page-Specific Styles
   ============================================ */

/* ---- Dashboard ---- */
.dashboard-kpis,
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

.dashboard-chart-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.dashboard-chart-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  margin-bottom: var(--space-4);
  color: var(--slate-900);
}

.chart-container {
  position: relative;
  height: 280px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.activity-item:hover { background: var(--slate-50); }

.activity-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.activity-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--slate-700);
}
.activity-time {
  font-size: var(--text-xs);
  color: var(--slate-400);
  white-space: nowrap;
}

/* ---- Dossier Detail ---- */
.dossier-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.dossier-info h2 {
  margin-bottom: var(--space-1);
}

.dossier-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--slate-500);
}
.dossier-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.dossier-tabs-content {
  animation: fadeIn 0.2s ease-out;
}

/* ---- Contact Detail ---- */
.contact-header {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.contact-avatar-lg {
  width: 80px; height: 80px;
  border-radius: var(--radius-full);
  background: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  flex-shrink: 0;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-info-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--slate-400);
  letter-spacing: 0.05em;
}
.contact-info-value {
  font-size: var(--text-sm);
  color: var(--slate-900);
}

/* Conflict Alert */
.conflict-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--error-50);
  border: 1px solid var(--error-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.conflict-alert.clear {
  background: var(--success-50);
  border-color: var(--success-100);
}

/* ---- Calendar / Agenda ---- */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calendar-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}

.calendar-month {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.calendar-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.calendar-day-header {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--slate-500);
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-color);
}

.calendar-day {
  min-height: 100px;
  padding: var(--space-1);
  border-right: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.calendar-day:hover { background: var(--slate-50); }
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day.today { background: var(--navy-50); }
.calendar-day.other-month { opacity: 0.4; }

.calendar-day-number {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 2px var(--space-1);
  color: var(--slate-600);
}
.calendar-day.today .calendar-day-number {
  background: var(--navy-700);
  color: var(--white);
  border-radius: var(--radius-full);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}

.calendar-event {
  font-size: var(--text-xs);
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.calendar-event.audience, .calendar-event-audience { background: var(--error-100); color: var(--error-700); }
.calendar-event.rdv, .calendar-event-rdv { background: var(--navy-100); color: var(--navy-700); }
.calendar-event.echeance, .calendar-event-echeance { background: var(--amber-100); color: var(--amber-700); }
.calendar-event.tache, .calendar-event-tache { background: var(--success-100); color: var(--success-700); }

/* Week View */
.calendar-week,
.week-grid {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.week-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border-bottom: 1px solid var(--border-color);
}
.week-day-header {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--slate-600);
  background: var(--slate-50);
}
.week-day-header.today { background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.week-body {
  max-height: 600px;
  overflow-y: auto;
}
.week-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
}
.week-time-col {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--slate-400);
  text-align: right;
  border-right: 1px solid var(--slate-100);
  height: 48px;
  font-family: var(--font-mono);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.week-time-label {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--slate-400);
  text-align: right;
  border-right: 1px solid var(--slate-100);
  height: 48px;
  font-family: var(--font-mono);
}
.week-cell {
  border-right: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  height: 48px;
  position: relative;
  cursor: pointer;
  padding: 2px;
}
.week-cell:hover { background: var(--slate-50); }

/* ---- Kanban (Taches) ---- */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  min-height: 400px;
}

.kanban-column {
  background: var(--slate-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-3);
}
.kanban-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--slate-700);
}
.kanban-count {
  font-size: var(--text-xs);
  background: var(--slate-300);
  color: var(--slate-600);
  padding: 0 6px;
  border-radius: var(--radius-full);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100px;
}

.kanban-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: grab;
  transition: all var(--transition-fast);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--slate-900);
  margin-bottom: var(--space-1);
}
.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--slate-400);
}

/* ---- Facturation ---- */
.invoice-preview {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}
.invoice-header-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}
.invoice-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--slate-500);
}

/* ---- AI Panel Content ---- */
.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.ai-panel-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--violet-700);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ai-message {
  max-width: 90%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ai-message.user {
  align-self: flex-end;
  background: var(--navy-800);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.ai-message.assistant {
  align-self: flex-start;
  background: var(--violet-50);
  color: var(--slate-800);
  border-bottom-left-radius: 4px;
}

.ai-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--info-100);
  color: var(--info-600);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.ai-confidence {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
  display: inline-block;
}
.ai-confidence.high { background: var(--success-100); color: var(--success-700); }
.ai-confidence.medium { background: var(--amber-100); color: var(--amber-700); }

.ai-input-area {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ai-input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.ai-input:focus { border-color: var(--violet-500); outline: none; }

/* ---- RPVA ---- */
.rpva-message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--white);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.rpva-message:hover { border-color: var(--navy-300); }
.rpva-message.unread { border-left: 3px solid var(--navy-700); }

/* ---- Messages ---- */
.message-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.message-bubble {
  max-width: 75%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.message-bubble.sent {
  align-self: flex-end;
  background: var(--navy-800);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.message-bubble.received {
  align-self: flex-start;
  background: var(--slate-100);
  color: var(--slate-800);
  border-bottom-left-radius: 4px;
}

/* ---- Documents Tree ---- */
.doc-tree {
  padding: var(--space-2);
}
.doc-folder, .doc-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.doc-folder:hover, .doc-file:hover { background: var(--slate-100); }
.doc-folder { font-weight: 600; color: var(--slate-700); }
.doc-file { color: var(--slate-600); }
.doc-children { padding-left: var(--space-6); }
.doc-size { font-size: var(--text-xs); color: var(--slate-400); margin-left: auto; }

/* ---- Settings ---- */
.settings-section {
  margin-bottom: var(--space-8);
}
.settings-section h3 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.settings-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.settings-sidebar {
  position: sticky;
  top: 0;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--slate-600);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.settings-nav-item:hover { background: var(--slate-100); }
.settings-nav-item.active {
  background: var(--navy-50);
  color: var(--navy-800);
  font-weight: 600;
}

/* Team member card */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.team-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* Document tree */
.doc-tree-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.doc-tree-item:hover { background: var(--slate-50); }
.doc-tree-item.active {
  background: var(--navy-50);
  border-left-color: var(--navy-600);
  font-weight: 600;
}

/* Message conversation item */
.message-conv-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s ease;
}
.message-conv-item:hover { background: var(--slate-50); }
.message-conv-item.active {
  background: var(--navy-50);
  border-left: 3px solid var(--navy-600);
}

/* Contact info row */
.info-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}
.info-row:last-child { border-bottom: none; }

/* Conflict alert */
.conflict-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--error-50);
  border: 1px solid var(--error-200);
  border-radius: var(--radius);
  color: var(--error-700);
  font-size: var(--text-sm);
}

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
}