/* Controle de georeferencement : complements a style.css */

.button-link { /* defini dans style.css, repris ici pour la page seule */ }

#page {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  position: relative;
}

#dropzone { position: static; min-height: 60vh; border: 2px dashed var(--border); }
#dropzone.hidden { display: none; }
#content.hidden { display: none; }

.ref-picker { display: flex; align-items: center; gap: 6px; }
.ref-picker select { max-width: 260px; }

.block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  position: relative;
}
.block h2 {
  margin: 0 0 10px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.block-actions { position: absolute; top: 12px; right: 16px; font-size: 12px; }

/* ---------- cartes de synthese ---------- */
#summary-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card {
  flex: 1 1 200px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.card .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.card .v { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card .s { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.card.error { border-color: var(--danger); }
.card.warning { border-color: #d8a02a; }
.card.ok { border-color: #39d98a; }

/* ---------- anomalies ---------- */
.issue {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.issue:last-child { border-bottom: none; }
.issue .sev {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  height: fit-content;
  white-space: nowrap;
}
.issue.error .sev { background: rgba(229, 72, 77, 0.18); color: #ff8a8d; }
.issue.warning .sev { background: rgba(216, 160, 42, 0.18); color: #e8bd63; }
.issue.info .sev { background: rgba(77, 141, 255, 0.16); color: #8db6ff; }
.issue .body { flex: 1; min-width: 0; }
.issue .title { font-weight: 600; }
.issue .who { color: var(--text-dim); font-size: 11.5px; }
.issue .detail { color: var(--text); opacity: 0.9; margin-top: 2px; }
.issue .remedy { color: var(--text-dim); margin-top: 3px; font-size: 12px; }
.issue .remedy::before { content: '→ '; }

/* ---------- tableaux ---------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td {
  border: 1px solid var(--border);
  padding: 5px 9px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
th { background: var(--bg-alt); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.group th {
  background: #2b313a;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
td.k { color: var(--text-dim); width: 1%; }
td.bad { color: #ff8a8d; }
td.warn { color: #e8bd63; }
td.good { color: #7fe0af; }
td.ref { outline: 1px solid rgba(77, 141, 255, 0.5); outline-offset: -1px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }

/* ---------- vue en plan ---------- */
#plan-wrap { position: relative; height: 420px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #1e1e1e; }
#plan { width: 100%; height: 100%; display: block; cursor: crosshair; }
#plan-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; }
#plan-legend > span { display: flex; align-items: center; gap: 6px; }
#plan-legend .off { color: var(--text-dim); }
#plan.measuring { cursor: crosshair; }
#btn-measure.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.block-actions { display: flex; align-items: center; gap: 6px; }
.block-actions button { font-size: 11px; padding: 3px 8px; }
.block-actions .segmented { gap: 0; }
.block-actions .segmented button { border-radius: 0; }
.block-actions .segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.block-actions .segmented button:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }

#elev-wrap { position: relative; height: 360px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #1e1e1e; }
#elev { width: 100%; height: 100%; display: block; }

/* ---------- charte ---------- */
/* Deux colonnes de champs ; dans chacune, l'intitule, le champ et l'unite
   sont alignes sur une grille commune, sinon chaque ligne se cale sur la
   longueur de son propre intitule et le champ deborde de la boite. */
.charter-grid {
  display: grid;
  /* le nombre de colonnes suit la largeur : agrandir la boite donne
     directement plus de champs cote a cote */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 9px 22px;
  margin: 12px 0;
  font-size: 13px;
}
.charter-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 170px) 1.6em;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.charter-grid input,
.charter-grid select {
  min-width: 0;
  width: 100%;
  text-align: right;
}
.charter-grid select { text-align: left; }
.charter-grid input[type="checkbox"] {
  width: auto;
  justify-self: start;
  margin: 0;
}
/* Boite redimensionnable : poignee en bas a droite, taille memorisee */
#charter-dialog .modal-box {
  width: min(820px, 94vw);
  min-width: 340px;
  max-width: 98vw;
  min-height: 300px;
  max-height: 94vh;
  resize: both;
  overflow: auto;
}
#charter-dialog .charter-scroll { flex: 1; min-height: 0; overflow-y: auto; }
#charter-dialog .row { margin: 4px 0 8px; }
#charter-dialog .modal-actions { flex-wrap: wrap; }

#btn-charter-expand { margin-right: auto; }

/* Aide : un point d'interrogation discret, l'explication au survol */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  color: var(--text-dim);
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
}
.help:hover { border-color: var(--accent); color: var(--accent); }
.charter-grid label > span:first-child { display: inline-flex; align-items: center; min-width: 0; }
td.k > span { display: inline-flex; align-items: center; }

/* ---------- zoom des vues ---------- */
.zoom-badge {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}
#plan, #elev { touch-action: none; }
#plan { cursor: grab; }
#elev { cursor: grab; }
#plan.measuring { cursor: crosshair; }
#plan.panning, #elev.panning { cursor: grabbing; }

/* ---------- colonne de la charte ---------- */
th.charter { color: #8db6ff; }
td.charter { color: var(--text-dim); font-style: italic; }

/* ---------- lien vers une carte ---------- */
a.maplink { color: #8db6ff; text-decoration: none; }
a.maplink:hover { text-decoration: underline; }