/*
  CoreDevPro™ – Styles pour le module Graphiques

  Ce fichier définit l’apparence des différentes zones de la page de
  graphiques : zone d’import, prévisualisation, galerie de types de
  graphiques, dashboard de composition et modale d’édition. Les
  couleurs s’appuient sur les variables CSS définies dans
  global.css afin de garantir une cohérence avec le reste du site.
*/

.charts-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.charts-header h1 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.charts-header p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Zone d’import */
.charts-import .drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 2px dashed var(--primary);
  border-radius: 12px;
  padding: 2rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-align: center;
  min-height: 200px;
}
.charts-import .drop-zone.dragover {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--primary-dark);
}
.charts-import .import-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  opacity: 0.8;
}
.charts-import p {
  /* Couleur claire pour assurer un contraste suffisant sur le fond foncé */
  color: var(--text-primary);
  margin-bottom: 1rem;
  max-width: 280px;
}
.charts-import button {
  margin-top: 0.5rem;
}

/* Section de prévisualisation */
.charts-preview {
  margin-top: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.5rem;
}
.charts-preview h2 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.charts-preview .preview-content p,
.charts-preview .preview-content li {
  /* Couleur claire pour assurer un contraste suffisant sur le fond foncé */
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Galerie de graphiques */
.charts-gallery {
  margin-top: 2rem;
}
.charts-gallery h2 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.chart-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.chart-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.chart-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.chart-card img {
  width: 36px;
  height: 36px;
  margin-bottom: 0.75rem;
  filter: invert(76%) sepia(21%) saturate(2222%) hue-rotate(170deg) brightness(95%) contrast(97%);
}
.chart-card h3 {
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0.5rem 0;
}
.chart-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-grow: 1;
}
.chart-card button {
  margin-top: 0.75rem;
}

/* Dashboard */
.charts-dashboard {
  margin-top: 3rem;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.dashboard-header h2 {
  font-size: 1.4rem;
  color: var(--primary);
  margin: 0;
}
.dashboard-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.chart-block {
  position: relative;
  width: 360px;
  height: 300px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  user-select: none;
}
.chart-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: move;
}
.chart-block-header h4 {
  font-size: 1rem;
  color: var(--primary);
  margin: 0;
}
.chart-block-controls img {
  width: 18px;
  height: 18px;
  margin-left: 0.5rem;
  cursor: pointer;
  filter: invert(76%) sepia(21%) saturate(2222%) hue-rotate(170deg) brightness(95%) contrast(97%);
  transition: filter 0.2s ease;
}
.chart-block-controls img:hover {
  filter: invert(95%) sepia(14%) saturate(1800%) hue-rotate(170deg) brightness(105%) contrast(101%);
}
.chart-content {
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
canvas.chart-canvas {
  width: 100%;
  height: 100%;
  background: #131921;
  border-radius: 6px;
}

/* Tooltip pour les graphiques interactifs */
.chart-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: #e9f8ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  white-space: nowrap;
  display: none;
  z-index: 1000;
}

/* Editeur inline pour modifier rapidement une portion de graphique */
.chart-inline-editor {
  font-size: 0.85rem;
  color: var(--text-default, #e9f8ff);
  background: var(--card-bg, #19233c);
  border-radius: 6px;
  border: 1px solid var(--primary, #00bfff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  padding: 0.5rem;
}
.chart-inline-editor input[type="text"] {
  background: var(--card-bg-alt, #0d1424);
  color: var(--text-default, #e9f8ff);
  border: 1px solid var(--primary, #00bfff);
  border-radius: 4px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
}
.chart-inline-editor input[type="color"] {
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  height: 2rem;
  cursor: pointer;
}

/* Resizer handle */
.resizer {
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 4px;
  right: 4px;
  cursor: se-resize;
  background: var(--primary);
  border-radius: 3px;
  opacity: 0.8;
}

/* Modale */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-content {
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  width: 100%;
  max-width: 500px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--primary);
}
.modal-header button {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--text-primary);
  cursor: pointer;
}
.modal-body {
  margin-bottom: 1rem;
}
.modal-body label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  /* Utilise une couleur claire pour améliorer la lisibilité dans la modale */
  color: var(--text-primary);
}
.modal-body select,
.modal-body input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--bg-end);
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chart-block {
    width: 100%;
  }
  .chart-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}