/* Cartographie ECU – feuille de style consolidée */

/* Utilise les variables du thème global */
:root{
  /* Hauteur des canvases (stable) */
  --canvas-h: 460px; /* tu peux passer à 56vh si tu préfères */
  
  /* Alias pour compatibilité */
  --bg-elev: var(--bg-elevated);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --brand-600: var(--brand-hover);
  --stroke: var(--border);
}

/* Reset local */
.carto-shell, .carto-shell * { box-sizing: border-box; }

/* Layout de page */
.carto-shell { padding: 16px; border-radius: var(--radius); }
.carto-grid{
  display:grid; grid-template-columns:300px 1fr 340px; gap:16px; align-items:start;
}
.carto-side{ display:flex; flex-direction:column; gap:12px; }
.carto-center{ display:flex; flex-direction:column; gap:12px; min-width:0; }

/* Panneaux */
.carto-panel{
  background:var(--bg-elev);
  border:1px solid var(--stroke);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px;
}
.carto-panel.compact{ padding:10px; }

/* Barre d'actions */
.carto-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--stroke); border-radius:12px;
  background:var(--bg-card); box-shadow:var(--shadow);
  margin-bottom:14px;
}
.carto-title h2{ margin:0; font-size:18px; }
.carto-title p{ margin:4px 0 0; color:var(--muted); font-size:14px; }
.carto-toolbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.carto-toolbar-actions input[type=file]{ display:none; }

/* Petites grilles / rangées utilitaires */
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.carto-row{ display:flex; align-items:center; gap:8px; }
.carto-row.between{ justify-content:space-between; }
.carto-row.wrap{ flex-wrap:wrap; }
.mt8{ margin-top:8px; }

/* Boutons */
.btn,
label.btn{
  appearance:none;
  border:1px solid var(--stroke);
  background:var(--bg-card);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  cursor:pointer;
}
.btn:hover, label.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(79,140,255,.45);
  box-shadow: 0 8px 18px rgba(79,140,255,.08);
}
.btn-primary{
  background: linear-gradient(135deg,var(--brand),var(--brand-600));
  color:#fff; border-color: transparent;
}
.btn-ghost{ background:transparent; color:var(--text); }
.btn-sm{ padding:7px 10px; font-size:12px; border-radius:10px; }
.btn-xs{ padding:5px 8px; font-size:11px; border-radius:9px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; filter:grayscale(.2); }
label.btn input[type="file"]{ display:none; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  background:var(--bg-card); border:1px solid var(--stroke);
  color:var(--muted); font-size:12px;
}

/* Inputs */
input[type="text"],
input[type="number"],
textarea,
select{
  width:100%;
  background:var(--bg-card);
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:8px;
  padding:8px 10px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus{
  border-color: rgba(79,140,255,.6);
  box-shadow: 0 0 0 3px rgba(79,140,255,.12);
}
:where(.btn, input, select, textarea):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Switch-like & helpers */
.switch{ display:inline-flex; align-items:center; gap:8px; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }

/* Liste des maps */
.list{ margin-top:8px; max-height:260px; overflow:auto; display:grid; gap:8px; }
.list button{
  width:100%; text-align:left;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#171a20,#121419);
  color:var(--text);
  border-radius:12px; padding:10px 12px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.list button:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,.35);
  border-color:rgba(79,140,255,.4);
}

/* Zone defs JSON */
.defs{ margin-top:10px; background:#10131a; border:1px solid var(--stroke); border-radius:10px; padding:10px; }
.defs > summary{ list-style:none; cursor:pointer; font-weight:700; color:var(--text); }
.defs > summary::-webkit-details-marker{ display:none; }
.defs[open]{ background:#0f1218; }
#defsText{ width:100%; min-height:260px; max-height:48vh; padding:10px; resize:vertical; }

/* Tabs */
.carto-tabs{ display:flex; gap:6px; padding:6px; border-bottom:1px solid var(--stroke); }
.btn-tab{
  border:1px solid var(--stroke); background:#14161b; color:var(--text);
  border-radius:10px; padding:8px 10px; font-weight:600;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-tab[aria-selected="true"]{ border-color: rgba(79,140,255,.6); }
.btn-tab:hover{ transform: translateY(-1px); border-color: rgba(79,140,255,.35); }

.tab{ display:none; padding:8px; position:relative; }
.tab.is-active{ display:block; }

/* Table d'édition */
#tableWrap{
  overflow:auto; max-height:60vh;
  background:var(--bg-elevated);
  border:1px solid var(--stroke);
  border-radius:12px;
  overscroll-behavior: contain;
}
#tableWrap table{ width:100%; border-collapse:collapse; font-size:12px; }
#tableWrap td{
  border-right:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  background:var(--bg);
  padding:2px; position:relative;
}
#tableWrap td input[type="number"]{
  width:92px; height:26px;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--stroke); border-radius:8px;
  padding:2px 6px; font-size:12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#tableWrap td input[type="number"]:focus{
  border-color: rgba(79,140,255,.6);
  box-shadow: 0 0 0 3px rgba(79,140,255,.15);
}
#tableWrap td.selected{ outline:2px solid rgba(79,140,255,.6); outline-offset:-2px; }
#tableWrap td.modified{ background: rgba(245,158,11,.15); }

/* Canvases (stables, DPR-safe côté JS) */
#heatmap, #graph, #surface3d, #isoCanvas{
  display:block; width:100%; height:var(--canvas-h);
  background:var(--bg); border-radius:12px; border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* Hex viewer */
#hexView{
  background:var(--bg); border:1px solid var(--stroke); border-radius:12px;
  color:#e6e8ec; line-height:1.5; padding:12px; box-shadow:var(--shadow);
  max-height:460px; overflow:auto; overscroll-behavior: contain;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Graphe – overlay tooltip/legend */
.graph-legend{
  position:absolute; top:8px; right:8px;
  display:flex; gap:12px; font-size:12px; color:var(--muted);
  background:rgba(0,0,0,.35); padding:6px 8px; border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
}
.graph-legend .legend-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;
}
.graph-tip{
  position:absolute; pointer-events:none;
  background:var(--bg-card); border:1px solid var(--stroke); color:#e6e8ec;
  font-size:12px; padding:6px 8px; border-radius:8px; transform: translate(-50%, -120%);
  white-space:nowrap;
}

/* Scanner résultats */
.scan-results{ margin-top:8px; display:grid; gap:6px; max-height:220px; overflow:auto; overscroll-behavior: contain; }
.scan-results .hit{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  border:1px solid var(--stroke); border-radius:10px; padding:8px 10px;
  background: linear-gradient(180deg, #171a20, #121419); font-size:12px;
}

/* Scrollbars (WebKit) */
#mapsList::-webkit-scrollbar,
#tableWrap::-webkit-scrollbar,
#hexView::-webkit-scrollbar,
.scan-results::-webkit-scrollbar{ width:10px; height:10px; }
#mapsList::-webkit-scrollbar-track,
#tableWrap::-webkit-scrollbar-track,
#hexView::-webkit-scrollbar-track,
.scan-results::-webkit-scrollbar-track{ background:var(--bg); border-radius:8px; }
#mapsList::-webkit-scrollbar-thumb,
#tableWrap::-webkit-scrollbar-thumb,
#hexView::-webkit-scrollbar-thumb,
.scan-results::-webkit-scrollbar-thumb{ background:var(--border); border:2px solid var(--bg); border-radius:10px; }
#mapsList::-webkit-scrollbar-thumb:hover,
#tableWrap::-webkit-scrollbar-thumb:hover,
#hexView::-webkit-scrollbar-thumb:hover,
.scan-results::-webkit-scrollbar-thumb:hover{ background:var(--border-light); }

/* Scrollbars (Firefox) */
#mapsList, #tableWrap, #hexView, .scan-results{
  scrollbar-color:var(--border) var(--bg); /* thumb track */
}

/* Nombre – retirer flèches */
#tableWrap input[type=number]::-webkit-outer-spin-button,
#tableWrap input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#tableWrap input[type=number]{ -moz-appearance:textfield; }

/* Range (sliders) */
input[type="range"]{ accent-color: var(--brand); }
.range-row{ display:flex; align-items:center; gap:8px; }
#heightGain{ width:100%; }
#isoLevels{ width:100%; }

/* Diff overlay (facultatif) */
.diff-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:100; }
.diff-overlay.is-open{ display:flex; }
.diff-card{ width:min(980px,92vw); background:var(--bg-elev); border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); }
.diff-head{ display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--stroke); }
.diff-table-wrap{ max-height:70vh; overflow:auto; }

/* Responsive */
@media (max-width:1280px){
  .carto-grid{ grid-template-columns: 280px 1fr 320px; }
}
@media (max-width:1080px){
  .carto-grid{ grid-template-columns: 1fr; }
  .carto-side{ order:1; }
  .carto-center{ order:2; }
  #tableWrap{ max-height:56vh; }
  :root { --canvas-h: 56vh; } /* canvases plus hauts en mobile */
}

#colorbar{
  display:block;
  width:100%;
  height:14px;            /* or 16px if you want it a hair taller */
  border-radius:8px;
  border:1px solid var(--stroke);
  background:var(--bg);
}