/* ============================================================
   Módulo: Drenagem Pluvial
   ------------------------------------------------------------
   Só o que é ÚNICO deste módulo.
   Tudo o mais vive em:
     - css/base.css
     - css/components.css
   ============================================================ */

/* ------------------------------------------------------------
   Sub-bacias — toolbar
   ------------------------------------------------------------ */
.subbasins-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-2);
  flex-wrap: wrap;
}
.subbasins-totals {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ------------------------------------------------------------
   Planilha de Dimensionamento
   ------------------------------------------------------------ */
.planilha-wrapper {
  overflow: auto;
  max-height: calc(100vh - 260px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}

.planilha-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  white-space: nowrap;
}

.planilha-table th,
.planilha-table td {
  padding: 4px 6px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-align: right;
}

/* Colunas de texto alinhadas à esquerda */
.planilha-table td:nth-child(1),
.planilha-table td:nth-child(2),
.planilha-table td:nth-child(3),
.planilha-table td:nth-child(4),
.planilha-table td:nth-child(8),
.planilha-table td:nth-child(9) {
  text-align: left;
}

/* Coluna "Tipo" (BL/BLD/PV/CLP) */
.planilha-table td.col-tipo {
  font-weight: 600;
  color: var(--c-accent);
  text-align: center;
}

/* Cabeçalho — linha 1 (grupos) */
.planilha-group-row th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-text);
  border-bottom: 2px solid var(--c-border-strong);
}
.g-id  { background: #eff6ff; }
.g-tre { background: #f0fdf4; }
.g-are { background: #fefce8; }
.g-tmp { background: #fef3c7; }
.g-hid { background: #e0f2fe; }
.g-fis { background: #f3e8ff; }
.g-imp { background: #fce7f3; }
.g-sar { background: #fef9c3; }
.g-est { background: #fee2e2; }
.g-bl  { background: #fde68a; }
.g-gal { background: #dbeafe; }
.g-pvm { background: #dcfce7; }
.g-pvj { background: #d1fae5; }

/* Cabeçalho — linha 2 (colunas) */
.planilha-col-row th {
  position: sticky;
  top: 32px;
  z-index: 2;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  vertical-align: bottom;
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border-strong);
  line-height: 1.2;
  color: var(--c-text-muted);
}

/* Linhas */
.planilha-table tbody tr:hover td { background: var(--c-surface-alt); }
.planilha-table tbody tr.row-alert td { background: #fef2f2; }
.planilha-table tbody tr.row-alert:hover td { background: #fee2e2; }

.planilha-table tbody tr.row-bl td { background: #fffbeb; }
.planilha-table tbody tr.row-bl:hover td { background: #fef3c7; }
.planilha-table tbody tr.row-bl.row-alert td { background: #fef2f2; }
.planilha-table tbody tr.row-bl.row-alert:hover td { background: #fee2e2; }

/* Estado vazio interno da planilha */
.planilha-empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
}

/* Scrollbar mais discreta na planilha */
.planilha-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.planilha-wrapper::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 999px;
}

/* ------------------------------------------------------------
   Bocas de Lobo — auditoria
   ------------------------------------------------------------ */
.bocas-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-2);
}
.bocas-info {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}