/* assets/css/style.css */
:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#64748b;
  --accent:#06b6d4;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.app-header{
  background:var(--card);
  padding:14px 20px;
  border-bottom:1px solid #e6eef6;
}
.app-header h1{margin:0;font-size:18px}

.top-nav{
  display:flex;
  gap:12px;
  padding:10px 20px;
  background:rgba(255,255,255,0.9);
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:50;
}
.top-nav a{
  color:#0f172a;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
}
.top-nav a.active{background:#0f172a;color:#fff}

.container{
  max-width:1200px;
  margin:18px auto;
  padding:0 20px 60px;
}

.card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  margin-bottom:18px;
}

.card.chart-card {
  height: 260px;   /* ou 280px, selon ton design */
  position: relative;
}

.card.chart-card canvas {
  position: absolute;
  inset: 0;
}


.row{display:flex;gap:18px;align-items:flex-start}
.row .card{flex:1}

.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-top:120px;
}

.small-card{
  background:var(--card);
  padding:12px;
  border-radius:10px;
  text-align:center;
  box-shadow: 0 2px 6px rgba(16,24,40,0.03);
}

#scatterWrapper { max-width: 700px; margin: auto; }
canvas { display:block; width:100% !important; height:auto !important; }


/* OLD matrix grid */
/*.matrix {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
  margin:10px 0;
}
.matrix-row{display:contents}
.matrix-cell{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:0.9rem;
  color:#0f172a;
  cursor:pointer;
  padding:6px;
}
.matrix-cell.mirror{background:transparent; cursor:default; color:#9aa4b2}
.mini-histo{font-size:0.8rem; color:var(--muted)}
*/

/* legend card */
.legend ul{padding-left:18px}
.legend li{margin:6px 0}

/******************************************************
 * RELATIONSHIP GRID V1
 ******************************************************/
/*
.matrix-card {
  margin-top: 20px;
}

.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.matrix-cell {
  height: 95px;
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  text-align: center;

  opacity: 0;
  animation: fadeInScale 0.4s ease forwards;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.matrix-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  cursor: pointer;
}
*/

#gasesScatter {
  width: 100%;
  height: 400px;  /* hauteur fixe pour éviter l’extension verticale */
  max-height: 400px;
  display: block;
}
.hist-container {
  height: 150px;       /* hauteur fixe souhaitée */
  position: relative;  /* nécessaire pour Chart.js responsive */
}

.hist-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}




/******************************************************
 * RELATIONSHIP GRID V2
 ******************************************************/

/* ensure grid aligns to N columns automatically */
#matrix-container { width: 100%; }
/* cells look */
.matrix-cell { transition: transform .12s ease, box-shadow .12s ease; }
.matrix-cell.hovered, .matrix-cell:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
/* diagonal style */
.matrix-cell.diagonal { background:#0f172a; color:#fff; font-weight:700; }
/* hover highlight row/col (class applied by JS) */
.matrix-cell.hovered { outline: 2px solid rgba(245,158,11,0.9); }


/* Matrix grid */
.matrix {
  display: grid;
  gap: 2px;
}

/* Chaque cellule */
.matrix-cell {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: background 0.2s, outline 0.2s;
}

/* Diagonale (variable auto) 
.matrix-cell.diagonal {
  background-color: #f3f4f6; 
  font-weight: bold;
}*/

/* Hover ligne/colonne
.matrix-cell.hovered {
  outline: 2px solid #f59e0b;
  background-color: rgba(245, 158, 11, 0.2);
} */




@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.8);}
  to   { opacity: 1; transform: scale(1);}
}

.corr-dot {
  border-radius: 50%;
}

.corr-pos {
  background: linear-gradient(145deg, #4c7df0, #315cca);
}

.corr-neg {
  background: linear-gradient(145deg, #b34cff, #8830c7);
}

.corr-neutral {
  background: linear-gradient(145deg, #dcdcdc, #bfbfbf);
  color: #222;
}

.matrix-cell.diagonal {
  background: #222;
  color: #fff;
  font-size: 0.75rem;
}

/* MULTI SELECT */
.select-multi {
  width: 100%;
  height: 140px;
  padding: 8px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.btn {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #3B82F6;
  color: #fff;
  cursor: pointer;
  border: none;
}

.btn:hover {
  background: #2563eb;
}



/* responsive */
@media (max-width:900px){
  .row{flex-direction:column}
  .matrix{grid-template-columns: repeat(4, 1fr)}
}