/* Redes de microdrenagem.
 *
 * Base compartilhada da família de hidrologia. Aqui ficam as peças próprias:
 * as ferramentas do traçado, o inspetor do elemento selecionado, as feições
 * editáveis sobre o mapa e o perfil longitudinal.
 */
@import url("../chuva-vazao/styles.css");
@import url("../shared/ep-como-usar.css");

/* Ferramentas do traçado, no cabeçalho do canvas. */
.tool-group { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
.tool-group button {
  padding: 6px 11px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
}
.tool-group button:hover { color: var(--ink); }
.tool-group button[aria-pressed="true"] { background: var(--navy); color: #fff; }

.tool-hint {
  margin: 0 0 8px; padding: 7px 11px;
  border-radius: 8px; background: var(--background);
  font-size: 11.5px; color: var(--muted);
}
.tool-hint strong { color: var(--ink); font-weight: 500; }

/* O cursor do mapa informa o modo ativo. */
#map.tool-pv { cursor: copy; }
#map.tool-trecho { cursor: crosshair; }
#map.tool-excluir { cursor: not-allowed; }
#map.tool-selecionar { cursor: grab; }

/* Feições da rede sobre a base cartográfica. */
.net-reach { stroke: #1d4f7c; stroke-width: 4.5; stroke-linecap: round; fill: none; }
.net-reach.is-selected { stroke: #087f5b; stroke-width: 6; }
.net-reach.is-review { stroke: #c0392b; }
.net-reach-hit { stroke: transparent; stroke-width: 16; fill: none; }
.net-arrow { fill: #1d4f7c; }
.net-node { fill: #fff; stroke: #24302c; stroke-width: 2.4; }
.net-node.is-outfall { fill: #087f5b; stroke: #fff; }
.net-node.is-selected { stroke: #087f5b; stroke-width: 3.4; }
.net-label {
  font-size: 10.5px; font-weight: 500; fill: #111816;
  paint-order: stroke; stroke: rgb(255 255 255 / 85%); stroke-width: 3px;
}
.net-basin { fill: rgb(22 164 118 / 14%); stroke: #087f5b; stroke-width: 1.4; stroke-dasharray: 5 4; }

/* Inspetor do elemento selecionado. */
.inspector-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.inspector-head strong { font-size: 13px; font-weight: 500; }
.inspector-head span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.inspector-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin: 10px 0 4px;
}
.inspector-metrics div {
  padding: 7px 9px; border-radius: 8px; background: var(--background);
}
.inspector-metrics dt { margin: 0; font-size: 10px; color: var(--muted); }
.inspector-metrics dd { margin: 2px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.inspector-suggest {
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11.5px; color: var(--muted);
}
.inspector-suggest strong { color: var(--ink); font-weight: 500; }

.profile-head { margin-top: 18px; }
.branch-picker { font-size: 11px; color: var(--muted); }
.branch-picker select {
  margin-left: 6px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: white; font: inherit; font-size: 12px; color: var(--ink);
}

/* Perfil longitudinal. */
.profile-terrain { fill: none; stroke: #9c7c55; stroke-width: 1.6; }
.profile-fill { fill: #efe4d0; }
.profile-pipe { fill: #f7faf9; stroke: var(--navy); stroke-width: 1.8; }
.profile-water { fill: rgb(46 134 193 / 26%); stroke: #2e86c1; stroke-width: 1.2; }
.profile-shaft { fill: #e4ebe8; stroke: var(--navy); stroke-width: 1.4; }
.profile-review .profile-pipe { stroke: #c0392b; }

/* Barras de duração por trecho. */
.gantt { display: grid; gap: 5px; margin-top: 6px; }
.gantt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px; align-items: center; gap: 10px; font-size: 11.5px; }
.gantt-bar { height: 15px; border-radius: 4px; background: var(--background); overflow: hidden; }
.gantt-bar b { display: block; height: 100%; background: #087f5b; border-radius: 4px; }
.gantt-bar b.is-secondary { background: #9aa8a3; }
.gantt-value { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Campo de preço dentro da tabela. */
input.preco {
  width: 100%; max-width: 110px; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
}
input.preco:focus { border-color: var(--chart-blue-dark); outline: none; }