:root {
  --dh-col-a: 70px;
  --dh-col-b: 80px;
  --dh-col-c: 80px;
  --dh-col-d: 80px;
  --dh-col-e: 75px;
  --dh-col-f: 80px;
  --dh-col-g: 80px;
  --dh-col-h: 70px;
  --dh-col-i: 70px;
  --dh-col-j: 85px;
  --dh-col-k: 85px;
  --dh-col-l: 70px;
  --dh-col-m: 80px;
  --dh-col-n: 80px;
  --dh-col-o: 80px;
  --dh-col-p: 85px;
  --dh-col-q: 85px;
  --dh-col-r: 90px;
  --dh-col-s: 100px;
  --dh-col-t: 100px;
  --dh-col-u: 100px;
  --dh-col-v: 80px;
  --dh-col-w: 100px;
  --dh-col-x: 70px;
  --dh-col-y: 60px;
  --dh-col-z: 70px;
  --dh-col-aa: 70px;
  --dh-col-ab: 70px;
  --dh-col-ac: 60px;

  --dh-sep-width: 5px;
  --dh-sep-count: 6;

  --dh-table-width: calc(
    var(--dh-col-a) + var(--dh-col-b) + var(--dh-col-c) + var(--dh-col-d) +
    var(--dh-col-e) + var(--dh-col-f) + var(--dh-col-g) +
    var(--dh-col-h) + var(--dh-col-i) + var(--dh-col-j) + var(--dh-col-k) +
    var(--dh-col-l) + var(--dh-col-m) + var(--dh-col-n) + var(--dh-col-o) +
    var(--dh-col-p) + var(--dh-col-q) + var(--dh-col-r) + var(--dh-col-s) +
    var(--dh-col-t) + var(--dh-col-u) + var(--dh-col-v) + var(--dh-col-w) +
    var(--dh-col-x) + var(--dh-col-y) + var(--dh-col-z) + var(--dh-col-aa) +
    var(--dh-col-ab) + var(--dh-col-ac) +
    var(--dh-sep-count) * var(--dh-sep-width)
  );
}

/* ============================================================
   Container
   ============================================================ */

.dimensioning-page {
  width: 100%;
  padding: var(--sp-4);
  overflow-x: auto;
  overflow-y: visible;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-sizing: border-box;
  contain: layout style;
}

.dimensioning-page .table-wrapper {
  overflow-x: auto;
  max-height: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  contain: layout;
}

/* ============================================================
   Tabela
   ============================================================ */

.dimensioning-table {
  width: var(--dh-table-width);
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-surface);
}

.dimensioning-table th,
.dimensioning-table td {
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  background-color: var(--c-surface);
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--c-border-strong);
  font-weight: var(--fw-normal);
}

.dimensioning-table th {
  font-weight: var(--fw-semibold);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

.dimensioning-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dimensioning-table thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--c-text);
  background: var(--c-surface-alt);
  border-color: var(--c-border-strong);
}

.dimensioning-table thead th.col-group {
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  color: var(--c-text);
  background: var(--c-border);
}

/* ============================================================
   Larguras das colunas — lidas pelo PDF
   ============================================================ */

.dimensioning-table col.col-a  { width: var(--dh-col-a); }
.dimensioning-table col.col-b  { width: var(--dh-col-b); }
.dimensioning-table col.col-c  { width: var(--dh-col-c); }
.dimensioning-table col.col-d  { width: var(--dh-col-d); }
.dimensioning-table col.col-e  { width: var(--dh-col-e); }
.dimensioning-table col.col-f  { width: var(--dh-col-f); }
.dimensioning-table col.col-g  { width: var(--dh-col-g); }
.dimensioning-table col.col-h  { width: var(--dh-col-h); }
.dimensioning-table col.col-i  { width: var(--dh-col-i); }
.dimensioning-table col.col-j  { width: var(--dh-col-j); }
.dimensioning-table col.col-k  { width: var(--dh-col-k); }
.dimensioning-table col.col-l  { width: var(--dh-col-l); }
.dimensioning-table col.col-m  { width: var(--dh-col-m); }
.dimensioning-table col.col-n  { width: var(--dh-col-n); }
.dimensioning-table col.col-o  { width: var(--dh-col-o); }
.dimensioning-table col.col-p  { width: var(--dh-col-p); }
.dimensioning-table col.col-q  { width: var(--dh-col-q); }
.dimensioning-table col.col-r  { width: var(--dh-col-r); }
.dimensioning-table col.col-s  { width: var(--dh-col-s); }
.dimensioning-table col.col-t  { width: var(--dh-col-t); }
.dimensioning-table col.col-u  { width: var(--dh-col-u); }
.dimensioning-table col.col-v  { width: var(--dh-col-v); }
.dimensioning-table col.col-w  { width: var(--dh-col-w); }
.dimensioning-table col.col-x  { width: var(--dh-col-x); }
.dimensioning-table col.col-y  { width: var(--dh-col-y); }
.dimensioning-table col.col-z  { width: var(--dh-col-z); }
.dimensioning-table col.col-aa { width: var(--dh-col-aa); }
.dimensioning-table col.col-ab { width: var(--dh-col-ab); }
.dimensioning-table col.col-ac { width: var(--dh-col-ac); }

.dimensioning-table col.col-sep,
.dimensioning-table col.col-sep2,
.dimensioning-table col.col-sep3 {
  width: var(--dh-sep-width);
}

/* ============================================================
   Células específicas
   ============================================================ */

.dimensioning-table td.cell-num {
  font-variant-numeric: tabular-nums;
}

.dimensioning-table td.cell-struct {
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.dimensioning-table td.cell-anterior {
  padding-left: var(--sp-2);
  font-size: var(--fs-sm);
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.dimensioning-table td.cell-existing {
  color: var(--c-text-muted);
  background-color: var(--c-border) !important;
}

/* ============================================================
   Zebra e hover
   ============================================================ */

.dimensioning-table tbody tr.row-top.row-zebra td,
.dimensioning-table tbody tr.row-bottom.row-zebra td {
  background-color: var(--c-surface-alt);
}

.dimensioning-table tbody tr.row-top.row-zebra:hover td,
.dimensioning-table tbody tr.row-bottom.row-zebra:hover td,
.dimensioning-table tbody tr.row-top:hover td,
.dimensioning-table tbody tr.row-bottom:hover td,
.dimensioning-table tbody tr.row-hover td {
  background-color: var(--c-accent-soft);
}

.dimensioning-table tbody tr.row-hover td:not(.col-separator):not(.cell-existing) {
  background-color: var(--c-accent-soft);
}

/* ============================================================
   Padding vertical das linhas
   ============================================================ */

.dimensioning-table tr.row-top td    { padding-top: 7px; }
.dimensioning-table tr.row-bottom td { padding-bottom: 7px; }

/* ============================================================
   Colunas separadoras
   ============================================================ */

.dimensioning-table th.col-separator,
.dimensioning-table td.col-separator {
  padding: 0;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid var(--c-border-strong);
  border-right: 1px solid var(--c-border-strong);
  background: var(--c-surface-alt);
}

.dimensioning-table thead tr:first-child th.col-separator {
  border-top: none;
  background: transparent;
}

/* ============================================================
   Performance
   ============================================================ */

.dimensioning-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 22px;
}

/* ============================================================
   Footer/header do dimensionamento — ocultos na tela
   ============================================================ */

.dimensioning-page .dh-footer-sep,
.dimensioning-page .dh-footer,
.dimensioning-page #pageHeaderContainer {
  display: none;
}

/* ============================================================
   Acessibilidade
   ============================================================ */

.dimensioning-table :focus-visible,
.dimensioning-table:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .dimensioning-table td { transition: none; }
}

@media (forced-colors: active) {
  .dimensioning-table th,
  .dimensioning-table td {
    background-color: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }

  .dimensioning-table th { font-weight: var(--fw-bold); }

  .dimensioning-table td.cell-existing {
    background-color: Canvas;
    border-left: 4px solid CanvasText;
  }

  .dimensioning-table tr.row-hover td {
    background-color: Highlight;
    color: HighlightText;
  }
}