*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow: hidden;
}

#loading {
    position:fixed;
    top:0;
    left:0;
    z-index:10000;
    width:100vw;
    height:100vh;
    background-color: rgba(255,255,255,0.9);
}



/* Viewer com altura flexível */
#viewer-container {
  width: 100%;
  height: 60vh; /* altura proporcional à tela */
  outline: none;
}



#measure {
    margin-bottom: 8rem;
}

.button-container {
    display: flex;
    flex-direction: column;
}

.button-container button {
    margin: 2px 0;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.2;
}

.button-container select{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    padding: 8px;
}

input {
    visibility: collapse;
}

.table-container{
    height: 300px;
    overflow-y: auto;
}

.ifcjs-dimension-preview {
    width: 1rem;
    height: 1rem;
    background-color: #FFA50F;
    border-radius: 1rem;
    opacity: 0.5;
}

.ifcjs-dimension-label {
    background-color: black;
    color: white;
    padding: 4px;
    border-radius: 4px;
}

.disabled{
    opacity: 50%;
    pointer-events: none;
}


#export-progress {
  display: block;
  margin-bottom: 10px;
  height: 20px;
  z-index: 10;
  position: relative;
}



#excel-legend.legend-horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

#excel-legend.legend-horizontal > div {
  cursor: pointer;
  user-select: none;
}

body {
    text-align: left; /* força alinhamento à esquerda */
}

.container {
    margin-left: 0 !important; /* remove centralização */
    margin-right: auto !important;
    max-width: 100%; /* mantém largura total */
}

/* Não force largura total no .container (NÃO USE max-width:100% aqui) */
/* Alinhar a .container à esquerda mantendo as larguras responsivas padrão do Bootstrap */
.container {
  margin-left: 0 !important;   /* antes era auto, centralizava */
  margin-right: auto !important;
  /* não defina width/max-width aqui – deixe o Bootstrap controlar */
}

/* Opcional: alinhar itens da navbar à esquerda (remover centralização) */
.navbar .navbar-nav {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Esconde completamente (sem ocupar espaço) */
#load-json,
#toggle-visibility,
#check {
  display: none !important; /* d-none do Bootstrap faria isso também */
}

#storeyForm {
  visibility: hidden;
}

/* Board wrapper que controla o scaling sem distorcer */
.dynamic-board-wrapper {
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  overflow: auto; /* permite scroll se desejar ver além */
  padding: 8px;
}

/* O canvas físico em polegadas: usa unidades CSS (1in = 96px) */
.dynamic-board-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  transform-origin: top left;

  /* Permite rolagem vertical e horizontal sem afetar largura da tabela */
  overflow-y: auto;
  overflow-x: auto;
  max-height: 300px;
  max-width: 100%;

}

/* Barra de controles */
.board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.board-controls input[type="number"] {
  width: 6rem;
}

.board-controls button {
  padding: 6px 10px;
}


/* Tabela editável */
.dynamic-table {
  border-collapse: collapse;
  /* Se preferir previsibilidade no resize, veja a seção 3 e mude para fixed */
  table-layout: fixed !important;         
  width: 100%;                /* <<< AJUSTE: ocupar toda a largura disponível */
  border-spacing: 0;
  background: #fff;
}

:root {
  --min-col-width: 120px; /* ajuste como preferir (ex.: 140px, 160px, etc.) */
}

.dynamic-table th,
.dynamic-table td {
  min-width: var(--min-col-width);
}


.dynamic-table th,
.dynamic-table td {
  border: 1px solid #ddd;
  padding: 6px;
  vertical-align: top;

  /* ✅ Permite quebrar texto */
  white-space: normal;           /* quebra em espaços */
  overflow-wrap: anywhere;       /* quebra também palavras longas/URLs */
  word-break: break-word;        /* fallback para engines antigas */
  hyphens: auto;                 /* hifenização quando possível */
}

.dynamic-table th {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  z-index: 2;
}

/* Alça de redimensionamento de coluna */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px; /* era 6px, agora mais fácil de clicar */
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5; /* garante que fique acima do conteúdo do th */
  background: transparent;
}

.col-resize-handle:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Estado de seleção opcional */
.cell-selected {
  outline: 2px solid #8ecae6;
}

/* Board ocupa toda a largura disponível da coluna direita */
#board-root.board-fullwidth {
  width: 100%;
}

/* Garante que o wrapper interno também use toda a largura */
#board-root.board-fullwidth .dynamic-board-wrapper {
  width: 100%;
  max-width: 100%;
}

/* Opcional: garantir que o viewer e o board tenham alturas harmonizadas */
.col-md-7.flex-shrink-0 #viewer-container,
.flex-grow-1 #board-root {
  min-height: 60vh; /* ajuste conforme seu layout */
}

#board-root.board-fullwidth {
  width: 100%;
}

.container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

/* 1. Botões menores */
.button-container button,
.button-container select {
  font-size: 12px;
  padding: 4px 6px;
  line-height: 1.2;
  margin: 2px 0;
}

/* 2. Viewer menor (coluna central) */
.col-md-7 {
  flex: 0 0 55% !important;   /* ocupa 55% */
  max-width: 55% !important;
}
#viewer-container {
  height: 55vh; /* um pouco menor que antes */
}

.col-md-3 {
  flex: none !important;       /* não força % */
  max-width: none !important;
}

/* 3) Board-root à direita, colado embaixo (BLOCO 1) — AJUSTE DE MARGEM PROPORCIONAL */
#board-root {
  position: fixed;             
  right: clamp(12px, 2vw, 20px);     /* <<< margem proporcional na lateral */
  bottom: clamp(12px, 2vh, 24px);    /* <<< margem proporcional no rodapé */
  width: 36vw;                 
  max-width: 640px;
  min-width: 460px;
  max-height: calc(42vh - 2vh);      /* <<< reduz levemente em telas menores */
  overflow: auto;
  border: 1px solid #ccc;
  background: #fff;
}

.table-container {
  width: 55%;                  /* mesma largura do viewer */
  max-width: 55%;
  margin-left: 16.666%;        /* alinha com a coluna do viewer */
}
#navigation {
  max-width: 100%;
  margin-bottom: 4px;
}
#info-table {
  width: 100%;
  table-layout: fixed;
}

/* 1) Botões menores e não esticados */
.col-md-2 {
  flex: 0 0 120px !important;   /* coluna fixa de 120px */
  max-width: 120px !important;
}
.button-container button,
.button-container select {
  font-size: 12px !important;
  padding: 4px 6px !important;
  line-height: 1.2 !important;
  margin: 2px 0 !important;
  width: 100%;                  /* ocupa só a coluna de 120px */
}

/* 2) Viewer menor em altura, largura controlada pela coluna */
.col-md-7 {
  flex: 0 0 42% !important;   /* viewer mais largo de novo */
  max-width: 42% !important;
}
#viewer-container {
  height: 52vh !important;      /* altura menor */
  border: 1px solid #ddd;
  background: #fff;
}

/* 3) Coluna direita (board) — mantida sem porcentagem rígida */
.col-md-3 {
  flex: none !important;
  max-width: none !important;
}

/* 4) Board-root à direita, mais largo (BLOCO 2) — AJUSTE DE MARGEM PROPORCIONAL */
#board-root {
  position: fixed !important;
  right: clamp(12px, 2vw, 20px);     /* <<< margem proporcional na lateral */
  bottom: clamp(12px, 2vh, 24px);    /* <<< margem proporcional no rodapé */
  width: 55vw;
  max-width: 960px;
  min-width: 520px;
  margin-left: 12px;                 /* pequeno espaço entre as tabelas */
  max-height: calc(45vh - 2vh);      /* <<< reduz levemente em telas menores */
  overflow: auto;
  border: 1px solid #ccc;
  background: #fff;
}

/* 4) Info-table com largura do viewer (não tela inteira) */
.table-container {
  width: 42% !important;        /* acompanha o viewer */
  max-width: 42% !important;
  margin-left: 120px !important;
  margin-top: 4px !important;
}
#navigation {
  width: 100% !important;
  margin-bottom: 6px !important;
}
#info-table {
  width: 100% !important;       /* 100% da table-container, não da página */
  table-layout: fixed !important;
}

/* Fonte da tabela igual à dos botões */
#info-table,
#info-table th,
#info-table td,
.dynamic-table,
.dynamic-table th,
.dynamic-table td {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Botões dentro das tabelas (info-table e dynamic-table) menores */
#info-table button,
.dynamic-table button {
  font-size: 12px !important;
  padding: 4px 6px !important;
  line-height: 1.2 !important;
}

/* Botões da barra de controles do dynamic-board */
.board-controls button {
  font-size: 12px !important;
  padding: 4px 6px !important;
  line-height: 1.2 !important;
}

/* Inputs e selects da barra de controles também menores */
.board-controls input,
.board-controls select {
  font-size: 12px !important;
  padding: 2px 4px !important;
  line-height: 1.2 !important;
  height: auto !important;
}

.dynamic-table thead {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  z-index: 2;
}

.board-controls {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
  padding: 8px;
}
.dynamic-table thead th {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  z-index: 2;
}

.dynamic-board-canvas {
  overflow-x: auto !important;
  max-width: 100% !important;
  width: 100% !important;
}
.dynamic-table {
  width: 100% !important;       /* <<< AJUSTE FINAL: ocupar toda a largura do container */
  table-layout: fixed !important; 
}

/* Garante que inputs e selects da barra de controles apareçam */
.board-controls input,
.board-controls select,
.board-controls label {
  visibility: visible !important;
}

/* >>> Correção de visibilidade dos inputs nos menus flutuantes <<< */
.db-filter-menu input,
.db-filter-menu select,
.db-filter-menu label,
.db-filter-menu button,
.db-context-menu button {
  visibility: visible !important;
}

/* Opcional: garantir que o menu fique sobre tudo */
.db-filter-menu,
.db-context-menu {
  z-index: 100000 !important;
}

/* Aparência consistente dos inputs do menu de filtro */
.db-filter-menu input[type="text"],
.db-filter-menu select,
.db-filter-menu button {
  font-size: 12px !important;
}

/* ===== Margem/altura proporcionais extras em telas menores ===== */
@media (max-width: 1200px) {
  #board-root {
    bottom: clamp(14px, 2.5vh, 28px);
    max-height: calc(40vh - 2.5vh);
  }
}
@media (max-width: 992px) {
  #board-root {
    bottom: clamp(16px, 3vh, 32px);
    max-height: calc(38vh - 3vh);
  }
}
@media (max-width: 768px) {
  #board-root {
    bottom: clamp(18px, 3.5vh, 36px);
    max-height: calc(35vh - 3.5vh);
  }
}

/* === PIVOT/MATRIZ – Overrides mínimos para integrar ao seu tema === */

/* 1) Garantir visibilidade dos inputs dentro da matriz */
.pivot-matrix-host input,
.pivot-matrix-host select,
.pivot-matrix-host label,
.pivot-matrix-host button {
  visibility: visible !important;
}

/* 2) Harmonizar tipografia/espaços com seu board (12px, igual ao board) */
.pivot-matrix-host,
.pivot-matrix-host .pivot-panel,
.pivot-matrix-host .pivot-grid {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* 3) Aparência dos botões da matriz, alinhados ao seu board */
.pivot-matrix-host .pivot-actions button {
  font-size: 12px !important;
  padding: 4px 6px !important;
  line-height: 1.2 !important;
}

/* 4) Limitar a altura da grade da matriz para conviver com a tabela */
.pivot-matrix-host .pivot-grid-wrap {
  max-height: 28vh;          /* ajuste fino conforme seu gosto (24–32vh) */
  overflow: auto;
  border: 1px solid #e5e7eb; /* segue seu tema de bordas */
  border-radius: 8px;
}

/* 5) Tornar o painel de configuração “grudado” sob a barra do board (opcional) */
/*   - ative adicionando a classe .pivot-sticky no host, se quiser.
     Ex.: <div class="pivot-matrix-host pivot-sticky"> ...  */
.pivot-matrix-host.pivot-sticky .pivot-panel {
  position: sticky;
  top: 42px;                 /* altura típica da .board-controls; ajuste se necessário */
  z-index: 2;
  background: #fff;
}

/* 6) Acessibilidade: foco visível nos controles da matriz */
.pivot-matrix-host button:focus-visible,
.pivot-matrix-host input:focus-visible,
.pivot-matrix-host select:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}

/* 7) Realce discreto nas células clicáveis da matriz */
.pivot-matrix-host .pivot-cell-clickable:hover {
  background: #f0f7ff;
}


/* (Opcional) Altura/scroll do quadro da matriz, para não “apertar” o layout */
#pivot-root .pivot-grid-wrap {
  max-height: 28vh;
  overflow: auto;
}


/* ===== Modal de níveis ===== */
.pivot-modal-overlay{
  position: fixed; inset: 0; background: rgba(15,23,42,.36);
  z-index: 100010;
}
.pivot-levels-modal{
  position: fixed; z-index: 100011;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(360px, 80vw, 820px);
  max-height: 86vh; background: #fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22); display:flex; flex-direction:column;
}
.pivot-levels-modal .pm-header{
  position: sticky; top:0; background:#fff; border-bottom:1px solid #eef2f7;
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-top-left-radius:14px; border-top-right-radius:14px;
  
}
.pivot-levels-modal .pm-title{ margin:0; font:600 16px/1.2 system-ui; color:#0f172a; }
.pivot-levels-modal .pm-icon{ border:0; background:transparent; cursor:pointer; width:32px; height:32px; border-radius:8px; color:#64748b; }
.pivot-levels-modal .pm-icon:hover{ background:#f1f5f9; color:#0f172a; }
.pivot-levels-modal .pm-content{ padding:12px 14px; overflow:auto; flex:1 1 auto; }
.pivot-levels-modal .pm-footer{
  position: sticky; bottom:0; background:#fff; border-top:1px solid #eef2f7;
  padding:10px 14px; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}

/* Reaproveita as classes existentes */
.levels-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:760px){ .levels-grid{ grid-template-columns: 1fr; } }
.box{ border:1px solid #e5e7eb; border-radius:8px; padding:8px; background:#fafafa; }
.box h5{ margin:0 0 6px; font:600 12px/1.2 system-ui; }
.fields-list{ display:flex; flex-wrap:wrap; gap:6px; max-height:200px; overflow:auto; }
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid #ddd; border-radius:16px; padding:4px 8px; background:#fff; font-size:12px; }
.levels-list{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.levels-list li{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:6px; display:flex; align-items:center; gap:8px; }
.levels-list .drag{ cursor:grab; user-select:none; }
.levels-list .name{ flex:1 1 auto; min-width:0; }
.levels-list .btn{ border:1px solid #d1d5db; background:#f5f5f5; padding:2px 6px; border-radius:4px; cursor:pointer; font-size:12px; }
.btn{ border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:7px 10px; cursor:pointer; font-size:12px; }