/* ═══════════════════════════════════════════════════════════════════
   PREMIUM V4 — Touche légère, respecte l'existant
   Scope STRICT : Inter + tokens couleurs + KPIs + sparklines + count-up
   Aucun override global agressif. Ne casse pas le thème existant.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Couleurs sémantiques additionnelles (les anciennes restent intactes) */
  --c-action:   #22d3ee;
  --c-creation: #a855f7;
  --c-todo:     #f59e0b;
  --c-done:     #10b981;
  --c-critical: #ef4444;
  --c-info:     #3b82f6;
  --c-action-soft:   rgba(34, 211, 238, 0.10);
  --c-creation-soft: rgba(168, 85, 247, 0.10);
  --c-todo-soft:     rgba(245, 158, 11, 0.10);
  --c-done-soft:     rgba(16, 185, 129, 0.10);
  --c-critical-soft: rgba(239, 68, 68, 0.10);
  --c-info-soft:     rgba(59, 130, 246, 0.10);
}

/* Inter uniquement sur body — laisse les overrides locaux intacts */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tabular numbers sur les chiffres (KPI seulement) */
.dp-kpi-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

/* ─── HERO : compact et discret ─── */
.dp-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 14px;
  animation: pv4Fade .25s ease-out;
}
.dp-hero-left { flex: 1; min-width: 240px; }
.dp-hero-greeting {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.dp-hero-date {
  font-size: 12px;
  color: var(--text2);
  text-transform: capitalize;
}
.dp-hero-cta {
  background: var(--cyan);
  color: #001016;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, transform .12s;
}
.dp-hero-cta:hover { background: #67e8f9; }
.dp-hero-cta:active { transform: scale(0.97); }

/* ─── KPIs : 4 cards égales, sobres ─── */
.dp-kpis,
.dp-kpis.pv2-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.dp-kpis.pv2-bento .dp-kpi,
.dp-kpis.pv2-bento .dp-kpi.pv2-wide { grid-column: span 1; }
@media (max-width: 900px) {
  .dp-kpis, .dp-kpis.pv2-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .dp-kpis, .dp-kpis.pv2-bento { grid-template-columns: 1fr; }
}

.dp-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--kpi-accent, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dp-kpi:hover {
  border-color: var(--kpi-accent, rgba(255,255,255,0.15));
  background: var(--card-hover);
}
.dp-kpi-icon {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  opacity: 0.85;
}
.dp-kpi-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.dp-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.dp-kpi.is-success { --kpi-accent: var(--c-done); }
.dp-kpi.is-warning { --kpi-accent: var(--c-todo); }
.dp-kpi.is-danger  { --kpi-accent: var(--c-critical); }
.dp-kpi.is-cyan    { --kpi-accent: var(--c-action); }
.dp-kpi.is-purple  { --kpi-accent: var(--c-creation); }

/* Sparklines : très discrètes */
.pv2-sparkline {
  width: 100%;
  height: 24px;
  margin-top: 6px;
  opacity: 0.6;
  display: block;
}
.pv2-sparkline path.line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv2-sparkline path.area { fill-opacity: 0.12; stroke: none; }

/* Lucide icons sizing */
.pv2-icon { width: 18px; height: 18px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pv2-icon-lg { width: 22px; height: 22px; }

/* Empty state */
.dp-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text3);
}
.dp-empty-icon { font-size: 36px; opacity: 0.5; margin-bottom: 10px; }
.dp-empty-title { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.dp-empty-hint { font-size: 11px; color: var(--text3); }

/* Animation fade sobre */
@keyframes pv4Fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dp-stagger > * { animation: pv4Fade .25s ease-out backwards; }
.dp-stagger > *:nth-child(1) { animation-delay: 0ms; }
.dp-stagger > *:nth-child(2) { animation-delay: 30ms; }
.dp-stagger > *:nth-child(3) { animation-delay: 60ms; }
.dp-stagger > *:nth-child(4) { animation-delay: 90ms; }
.dp-stagger > *:nth-child(5) { animation-delay: 120ms; }

/* Mode Focus (bouton flottant existe déjà) */
body.dp-focus .dp-hideable { display: none !important; }
.dp-focus-toggle {
  position: fixed;
  bottom: 80px; right: 16px;
  width: 44px; height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  z-index: 90;
  transition: all .15s;
}
.dp-focus-toggle:hover { background: var(--card-hover); color: var(--text); }
body.dp-focus .dp-focus-toggle { background: var(--cyan); color: #001016; border-color: var(--cyan); }

/* Confetti pour validation */
.pv2-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 10200;
  overflow: hidden;
}
.pv2-confetti-particle {
  position: absolute; width: 6px; height: 6px; opacity: 0;
  animation: pv2Confetti 1s ease-out forwards;
}
@keyframes pv2Confetti {
  0%   { transform: translateY(0) scale(0); opacity: 1; }
  50%  { opacity: 1; }
  100% { transform: translateY(-150px) scale(1); opacity: 0; }
}

::selection { background: var(--c-action-soft); color: var(--c-action); }

/* ─── DISPOSITION 12 cols pour les sections post-planning ─── */
@media (min-width: 1100px) {
  .dash-assist-2col {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    column-count: unset !important;
  }
  .dash-assist-2col > div {
    grid-column: span 6;
    margin-bottom: 0 !important;
    break-inside: auto !important;
  }
  /* Sections compactes en 4 cols (3 par ligne) */
  .dash-assist-2col > #dashCommanderDirectSection,
  .dash-assist-2col > #dashDeviserSection {
    grid-column: span 4;
  }
}

/* Titre section uniforme */
.dp-section,
[id^="dash"][id$="Section"] {
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS interventions V4 — moderne, dense, info essentielle visible
   ═══════════════════════════════════════════════════════════════════ */

.pv4-inter-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-todo);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pv4-inter-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: var(--card-hover);
}

/* Head : badge urgence + age + drag handle */
.pv4-inter-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 0;
}
.pv4-inter-prio {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}
.pv4-inter-age {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
}
.pv4-inter-head .drag-handle {
  margin-left: auto;
  cursor: grab;
  color: var(--text3);
  font-size: 16px;
  opacity: 0.4;
  padding: 0 4px;
  user-select: none;
  touch-action: none;
}
.pv4-inter-card:hover .pv4-inter-head .drag-handle { opacity: 0.9; }

/* Body : client + lieu + machine + motif */
.pv4-inter-body { padding: 6px 10px 8px; }
.pv4-inter-client {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 2px;
}
.pv4-inter-loc {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 4px;
  font-weight: 500;
}
.pv4-inter-machine {
  font-size: 11.5px;
  color: var(--text2);
  margin-bottom: 4px;
}
.pv4-inter-motif {
  font-size: 11px;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
  line-height: 1.35;
  font-style: italic;
}
.pv4-inter-tech {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 4px;
}

/* Footer actions */
.pv4-inter-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.1);
}
.pv4-inter-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, transform .1s;
}
.pv4-inter-btn:active { transform: scale(0.97); }
.pv4-inter-btn.primary {
  background: var(--c-action);
  color: #001016;
}
.pv4-inter-btn.primary:hover { background: #67e8f9; }
.pv4-inter-btn.ghost {
  flex: 0 0 auto;
  width: 36px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  font-size: 14px;
}
.pv4-inter-btn.ghost:hover {
  background: var(--card-hover);
  color: var(--c-done);
  border-color: var(--c-done);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT GLOBAL — densifier + 2 colonnes interventions / tâches
   ═══════════════════════════════════════════════════════════════════ */

/* Plus de gaps inutiles entre sections */
.grid-2 { gap: 12px !important; margin-bottom: 12px !important; }

/* Réduit padding excessif */
.dp-section,
[id^="dash"][id$="Section"] { padding: 12px !important; }
.dp-section-title,
[id^="dash"][id$="Section"] > div:first-child {
  margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PV4 — sections + rows modernisées (À chiffrer, À deviser, etc.)
   ═══════════════════════════════════════════════════════════════════ */

.pv4-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: border-color .15s;
}
.pv4-section:hover { border-color: rgba(255,255,255,0.10); }

.pv4-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pv4-section-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.pv4-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  flex: 1;
}
.pv4-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.pv4-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.pv4-row:last-child { border-bottom: 0; }
.pv4-row:hover { background: rgba(255,255,255,0.025); }

.pv4-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
}

.pv4-row-body { flex: 1; min-width: 0; }
.pv4-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.pv4-row-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  font-weight: 500;
}
.pv4-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.pv4-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}
.pv4-chip-motif {
  background: var(--c-action-soft);
  border-color: rgba(34,211,238,0.2);
  color: var(--c-action);
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

.pv4-row-cta {
  background: var(--c-action);
  color: #001016;
  border: 0;
  border-radius: 6px;
  padding: 7px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, transform .1s;
  letter-spacing: -0.005em;
}
.pv4-row-cta:hover { background: #67e8f9; }
.pv4-row-cta:active { transform: scale(0.97); }

.pv4-section-more { text-align: center; padding-top: 8px; }
.pv4-btn-link {
  background: transparent;
  border: 0;
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.pv4-btn-link:hover { background: var(--surface); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   PV4 — Widgets dashboard (.dw-card, .dw-item) modernisés
   Spécificité forte via #dashboardWidgetsZone pour battre les overrides natifs
   ═══════════════════════════════════════════════════════════════════ */

#dashboardWidgetsZone .dw-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  transition: border-color .15s !important;
}
#dashboardWidgetsZone .dw-card:hover { border-color: rgba(255,255,255,0.10) !important; }

#dashboardWidgetsZone .dw-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 10px !important;
  margin: 0 0 6px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#dashboardWidgetsZone .dw-item {
  padding: 9px 4px !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: background .12s !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 13px !important;
}
#dashboardWidgetsZone .dw-item:last-child { border-bottom: 0 !important; }
#dashboardWidgetsZone .dw-item:hover { background: rgba(255,255,255,0.04) !important; }
#dashboardWidgetsZone .dw-item + .dw-item {
  border-top: 0 !important;
  margin-top: 0 !important;
}

#dashboardWidgetsZone .dw-item-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dashboardWidgetsZone .dw-item-sub {
  font-size: 11px !important;
  color: var(--text2) !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
}
#dashboardWidgetsZone .dw-item-meta {
  font-size: 14px !important;
  flex-shrink: 0;
  margin-left: auto;
}

/* Dot coloré devant chaque item — la couleur dépend du widget */
#dashboardWidgetsZone .dw-item::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-todo);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--c-todo-soft);
}
/* Détecte le widget via le contenu du title (atelier = orange par défaut) */
#dashboardWidgetsZone .dw-card:has(.dw-card-title:where([style*="3b82f6"], [style*="#3b82f6"])) .dw-item::before {
  background: var(--c-info);
  box-shadow: 0 0 0 3px var(--c-info-soft);
}
#dashboardWidgetsZone .dw-card:has(.dw-card-title:where([style*="ef4444"], [style*="#ef4444"])) .dw-item::before {
  background: var(--c-critical);
  box-shadow: 0 0 0 3px var(--c-critical-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   PV4 — Cartes "Tâches à traiter" regroupées (.dp-dossier)
   ═══════════════════════════════════════════════════════════════════ */

#dashRappelsSection [style*="background:rgba(15,23,42,.02)"],
#dashRappelsSection [style*="background:rgba(15,23,42,0.02)"] {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: border-color .15s, background .15s;
}
#dashRappelsSection [style*="background:rgba(15,23,42,.02)"]:hover {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.035) !important;
}

/* Titre dossier client */
#dashRappelsSection [style*="font-size:15px"][style*="font-weight:800"] {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

/* Lignes d'action à l'intérieur des dossiers */
#dashRappelsSection [data-rappel-id] {
  border-radius: 6px !important;
  padding: 8px !important;
  transition: background .12s;
}
#dashRappelsSection [data-rappel-id]:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Boutons "Appeler" header dossier */
#dashRappelsSection a[href^="tel:"] {
  background: var(--c-done) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 0 !important;
  transition: background .12s, transform .1s;
}
#dashRappelsSection a[href^="tel:"]:hover {
  background: #34d399 !important;
}

/* Boutons workflow (Commander/Brouillon/etc.) plus modernes */
#dashRappelsSection button[onclick*="markPieceRecue"],
#dashRappelsSection button[onclick*="markRappelDone"],
#dashRappelsSection button[onclick*="openRappelDetail"] {
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: -0.005em;
  transition: background .12s, transform .1s;
}