@import "./EliTabelaAcoes.css"; @import "./EliTabelaSelecao.css"; .eli-tabela { width: 100%; } .eli-tabela__table-wrapper { width: 100%; overflow-x: auto; } .eli-tabela__td--estados { padding: 0; } .eli-tabela__estados-inline { border: none; border-radius: 0; } .eli-tabela__table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; overflow: visible; } /* Corrige o vazamento (pontas quadradas) do fundo dos th/td nas bordas arredondadas da tabela */ .eli-tabela__table thead tr:first-child th:first-child { border-top-left-radius: 11px; } .eli-tabela__table thead tr:first-child th:last-child { border-top-right-radius: 11px; } .eli-tabela__table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; } .eli-tabela__table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; } .eli-tabela__tbody { overflow: visible; } .eli-tabela__tbody .eli-tabela__tr .eli-tabela__td { background: var(--cor-eli-superficie, #ffffff); } .eli-tabela__tbody .eli-tabela__tr--zebra .eli-tabela__td { background: var(--cor-eli-primaria-zebra, #F6F9E8); } .eli-tabela__th, .eli-tabela__td { padding: 10px 12px; border-bottom: 1px solid var(--cor-eli-borda); vertical-align: top; } .eli-tabela__th { text-align: left; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cor-eli-neutro-escuro, #3E4436); background: var(--cor-eli-primaria-suave, #BFC99C); border-bottom: 2px solid var(--cor-eli-primaria-bg, #EEF3D0); } .eli-tabela__th--ordenavel { padding: 0; } .eli-tabela__th--ordenavel .eli-tabela__th-botao { padding: 10px 12px; } .eli-tabela__th-botao { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; text-align: left; transition: color 0.2s ease; } .eli-tabela__th-botao:hover, .eli-tabela__th-botao:focus-visible { color: var(--cor-eli-primaria-texto, #2E3F00); } .eli-tabela__th-botao:focus-visible { outline: 2px solid var(--cor-eli-primaria, #688C00); outline-offset: 2px; } .eli-tabela__th-botao--ativo { color: var(--cor-eli-primaria-texto, #2E3F00); } .eli-tabela__th-texto { flex: 1; min-width: 0; white-space: nowrap; } .eli-tabela__th-icone { flex-shrink: 0; } .eli-tabela__th-icone--oculto { opacity: 0; } .eli-tabela__tr:last-child .eli-tabela__td { border-bottom: none; } .eli-tabela__td--clicavel { cursor: pointer; } .eli-tabela__td--clicavel:hover { background: rgba(0, 0, 0, 0.03); } .eli-tabela--erro { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(220, 53, 69, 0.35); border-radius: 12px; padding: 12px; } .eli-tabela--carregando { display: flex; align-items: center; gap: 10px; border: 1px dashed rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 12px; opacity: 0.8; } .eli-tabela__erro-titulo { font-weight: 700; margin-bottom: 4px; } .eli-tabela__erro-mensagem { opacity: 0.9; } .eli-tabela--vazio { display: flex; align-items: center; gap: 10px; border: 1px dashed rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 12px; opacity: 0.8; } .eli-tabela__estado-icone { flex-shrink: 0; color: rgba(15, 23, 42, 0.45); } .eli-tabela__estado-icone--erro { color: var(--cor-eli-erro); } .eli-tabela__estado-icone--spin { animation: eli-tabela-spin 1s linear infinite; } @keyframes eli-tabela-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .eli-tabela__th--acoes { text-align: right; white-space: nowrap; } .eli-tabela__td--acoes { white-space: nowrap; overflow: visible; } .eli-tabela__acoes-container { display: flex; justify-content: flex-end; position: relative; z-index: 1; } .eli-tabela__acoes-container--aberto { z-index: 200; } .eli-tabela__rodape { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .eli-tabela__paginacao { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 0; flex-wrap: wrap; } .eli-tabela__acoes-inferiores { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } .eli-tabela__cabecalho { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; --eli-tabela-cabecalho-controle-altura: 34px; --eli-tabela-cabecalho-controle-radius: 8px; }