/*
 * Kit v2 - listas: barra de filtros (busca, selects com rotulo, periodo),
 * tabela de dados (cabecalho discreto, linhas de 56px, celula de duas
 * linhas, numeros a direita, menu ⋯), rodape com paginacao.
 * Abaixo de 768px a tabela vira cartoes (rotulo de cada celula vem do <th>,
 * preenchido pelo kit.js em data-label); com .scroll ela rola dentro da caixa.
 */

/* ------------------------------------------------------------- filtros */

html.tki-layout .tki-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
html.tki-layout .tki-filters-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
html.tki-layout .tki-filters-count { font-size: 14px; color: var(--tki-muted); white-space: nowrap; }
html.tki-layout .tki-section > .tki-card-body > .tki-filters:last-child { margin-bottom: 0; }
html.tki-layout .tki-section > .tki-filters { margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--tki-border); }

html.tki-layout .tki-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 440px;
  height: 40px;
  /* em container em coluna a base de 280px viraria altura: o teto segura */
  max-height: 40px;
  margin: 0;
  padding: 0 12px;
  border-radius: var(--tki-radius-control);
  border: 1px solid var(--tki-input-border);
  background: var(--tki-input-bg);
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.tki-layout .tki-search > svg { width: 16px; height: 16px; color: var(--tki-muted); }
html.tki-layout .tki-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tki-fg);
  font: 400 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
html.tki-layout .tki-search:hover,
html.tki-layout .tki-field-inline:hover { border-color: var(--tki-input-border-hover); }
html.tki-layout .tki-search:focus-within,
html.tki-layout .tki-field-inline:focus-within { border-color: var(--tki-primary); box-shadow: var(--tki-ring); }

/* Select/data com rotulo embutido: "Status  Todos". */
html.tki-layout .tki-field-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 12px;
  border-radius: var(--tki-radius-control);
  border: 1px solid var(--tki-input-border);
  background: var(--tki-input-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.tki-layout .tki-field-inline > span { font-size: 13px; color: var(--tki-muted); white-space: nowrap; }
html.tki-layout .tki-field-inline :is(select, input) {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tki-fg);
  font: 500 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
html.tki-layout .tki-field-inline select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
}
html.tki-layout .tki-field-inline select option { background: var(--tki-card); color: var(--tki-fg); }
html.tki-layout .tki-field-inline input[type='date'] { padding-right: 10px; }
html.tki-layout[data-bs-theme='dark'] .tki-field-inline input::-webkit-calendar-picker-indicator { filter: invert(0.8); }

@media (max-width: 767.98px) {
  html.tki-layout .tki-filters { gap: 8px; }
  html.tki-layout .tki-filters > *,
  html.tki-layout .tki-filters-end { flex: 1 1 100%; max-width: none; margin-left: 0; }
  html.tki-layout .tki-filters .tki-field-inline { width: 100%; }
  html.tki-layout .tki-filters .tki-field-inline:has(input[type='date']) { flex: 1 1 calc(50% - 4px); }
  html.tki-layout .tki-filters-end > .tki-btn { flex: 1 1 auto; }
  html.tki-layout .tki-section > .tki-filters { padding: 14px 18px; }
}

/* -------------------------------------------------------------- tabela */

html.tki-layout .tki-table-wrap {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--tki-radius-card);
  border: 1px solid var(--tki-border);
  background: var(--tki-card);
  -webkit-overflow-scrolling: touch;
}
html.tki-layout .tki-section .tki-table-wrap { border-radius: 0; border: 0; background: transparent; }
html.tki-layout .tki-section > .tki-card-body:not(.flush) .tki-table-wrap { border: 1px solid var(--tki-border); border-radius: 12px; }

html.tki-layout .tki-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--tki-fg-2);
  font-variant-numeric: tabular-nums;
}
html.tki-layout .tki-table th {
  height: 44px;
  padding: 0 16px;
  background: var(--tki-surface-2);
  border-bottom: 1px solid var(--tki-border);
  color: var(--tki-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
html.tki-layout .tki-table th a { color: inherit; text-decoration: none; }
html.tki-layout .tki-table th a:hover { color: var(--tki-fg); }
html.tki-layout .tki-table td {
  height: 56px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tki-border);
  vertical-align: middle;
}
html.tki-layout .tki-table tbody tr:last-child > td { border-bottom: 0; }
html.tki-layout .tki-table tbody tr { transition: background-color 0.12s; }
html.tki-layout .tki-table tbody tr:not(.tki-table-empty):not(.tki-skel-row):hover > td { background: var(--tki-surface-2); }
html.tki-layout .tki-table tr[data-tki-href] { cursor: pointer; }
html.tki-layout .tki-table :is(th, td).num { text-align: right; white-space: nowrap; }
html.tki-layout .tki-table :is(th, td).center { text-align: center; }
html.tki-layout .tki-table :is(th, td).actions { width: 1%; padding-right: 12px; text-align: right; white-space: nowrap; }
/* Desktop: a coluna de acoes fica presa na borda direita do cartao quando a
   tabela e' mais larga que ele (rolagem lateral), para a acao nunca sumir. */
@media (min-width: 768px) {
  html.tki-layout .tki-table-wrap .tki-table > * > tr > :is(th, td).actions { position: sticky; right: 0; z-index: 1; }
  /* Menu de acoes aberto fica por cima das linhas de baixo. */
  html.tki-layout .tki-table-wrap .tki-table > tbody > tr > td.actions:has([aria-expanded='true']) { z-index: 6; }
  html.tki-layout .tki-table-wrap .tki-table > tbody > tr > td.actions { background: var(--tki-card); }
  html.tki-layout .tki-table-wrap .tki-table > thead > tr > th.actions { background: var(--tki-surface-2); }
  html.tki-layout .tki-table-wrap .tki-table > tbody > tr:not(.tki-table-empty):not(.tki-skel-row):hover > td.actions { background: var(--tki-surface-2); }
  html.tki-layout .tki-table-wrap.tki-rola .tki-table > * > tr > :is(th, td).actions { box-shadow: -8px 0 12px -10px rgba(15, 23, 42, 0.35); }
}
html.tki-layout .tki-table :is(th, td).sel { width: 1%; padding-right: 0; }
html.tki-layout .tki-table :is(th, td).nowrap { white-space: nowrap; }
html.tki-layout .tki-table td.strong { color: var(--tki-fg); font-weight: 600; }
html.tki-layout .tki-table td.muted { color: var(--tki-muted); }
html.tki-layout .tki-table tfoot td { height: 48px; background: var(--tki-surface-2); color: var(--tki-fg); font-weight: 600; border-top: 1px solid var(--tki-border); border-bottom: 0; }
html.tki-layout .tki-table .tki-table-empty td { height: auto; padding: 0; }
html.tki-layout .tki-table .tki-skel-row td { height: 56px; }
html.tki-layout .tki-table input[type='checkbox']:not(.tki-switch) { width: 18px; height: 18px; accent-color: var(--tki-primary); cursor: pointer; vertical-align: middle; }

/* Celula de duas linhas (titulo + subtitulo), com avatar opcional. */
html.tki-layout .tki-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.tki-layout .tki-cell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.tki-layout .tki-cell-title {
  color: var(--tki-fg);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}
html.tki-layout a.tki-cell-title:hover { color: var(--tki-fg); text-decoration: underline; text-underline-offset: 3px; }
html.tki-layout .tki-cell-sub {
  font-size: 13px;
  color: var(--tki-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

/* Rodape da tabela (contagem + paginacao). */
html.tki-layout .tki-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--tki-border);
}
html.tki-layout .tki-table-wrap + .tki-table-foot { border-top: 0; }

/* ---------------------------------------------------------- paginacao */

html.tki-layout .tki-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
html.tki-layout .tki-pagination-info { font-size: 13px; color: var(--tki-muted); font-variant-numeric: tabular-nums; }
html.tki-layout .tki-pagination-pages { display: flex; align-items: center; gap: 6px; margin-left: auto; }
html.tki-layout .tki-pg {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--tki-border);
  background: var(--tki-card);
  color: var(--tki-fg-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
html.tki-layout .tki-pg::after { content: ''; position: absolute; inset: -2px; }
html.tki-layout a.tki-pg:hover { background: var(--tki-hover); color: var(--tki-fg); }
html.tki-layout .tki-pg.current { background: var(--tki-fg); border-color: var(--tki-fg); color: var(--tki-card); font-weight: 600; }
html.tki-layout .tki-pg.disabled,
html.tki-layout .tki-pg:disabled { color: var(--tki-muted); opacity: 0.45; cursor: default; }
html.tki-layout button.tki-pg { font: inherit; }
html.tki-layout button.tki-pg:not(:disabled):not(.current):hover { background: var(--tki-hover); color: var(--tki-fg); }
/* Linha escondida (filtro/paginacao local) some tambem no modo cartao. */
html.tki-layout .tki-table tr[hidden] { display: none !important; }
html.tki-layout .tki-pg svg { width: 16px; height: 16px; }
html.tki-layout .tki-pg-gap { min-width: 16px; text-align: center; color: var(--tki-muted); }
@media (max-width: 575.98px) {
  html.tki-layout .tki-pagination { justify-content: center; }
  html.tki-layout .tki-pagination-info { width: 100%; text-align: center; }
  html.tki-layout .tki-pagination-pages { margin: 0 auto; }
  html.tki-layout .tki-pg { min-width: 40px; height: 40px; }
  /* No celular: anterior, atual e proxima (mais a primeira e a ultima). */
  html.tki-layout .tki-pagination-pages > a.tki-pg:not([rel]):not(:nth-child(2)):not(:nth-last-child(2)) { display: none; }
}

/* ------------------------------------- tabela vira cartoes no celular */

@media (max-width: 767.98px) {
  html.tki-layout .tki-table:not(.scroll),
  html.tki-layout .tki-table:not(.scroll) > tbody { display: block; width: 100%; }
  html.tki-layout .tki-table:not(.scroll) > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tki-border);
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:last-child { border-bottom: 0; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: right;
    background: transparent !important;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 48%;
    font-size: 13px;
    font-weight: 400;
    color: var(--tki-muted);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is([data-label=''], .full)::before { display: none; }
  /* Primeira celula (ou .main) e' o titulo do cartao. */
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is(:first-child:not(.sel), .sel + td, .main) {
    display: block;
    padding-right: 44px;
    text-align: left;
    color: var(--tki-fg);
    font-weight: 500;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is(:first-child:not(.sel), .sel + td, .main)::before { display: none; }
  html.tki-layout .tki-table:not(.scroll) .tki-cell-title,
  html.tki-layout .tki-table:not(.scroll) .tki-cell-sub { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.actions {
    position: absolute;
    top: 10px;
    right: 8px;
    width: auto;
    padding: 0;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.actions::before { display: none; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:has(> td.sel) { padding-left: 50px; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.sel { position: absolute; top: 14px; left: 16px; width: auto; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.sel::before { display: none; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td > * { min-width: 0; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr.tki-table-empty { padding: 0; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr.tki-table-empty > td,
  html.tki-layout .tki-table:not(.scroll) > tbody > tr.tki-table-empty > td:is(:first-child:not(.sel), .sel + td, .main) { display: block; padding: 0; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr.tki-skel-row > td { display: block; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr.tki-skel-row > td::before { display: none; }
  html.tki-layout .tki-table:not(.scroll) > tfoot { display: block; }
  /* Linha de total: um bloco com "rotulo ... valor" por coluna (o rotulo vem
     do <th>, como no corpo); a primeira celula ("Total") e' o titulo. */
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; background: var(--tki-surface-2); border-top: 1px solid var(--tki-border); }
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr > td { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; padding: 0; border: 0; background: transparent; text-align: right; }
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr > td::before { content: attr(data-label); font: 400 13px 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: var(--tki-muted); text-align: left; }
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr > td:first-child { text-align: left; }
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr > td:is(:first-child, [data-label=''])::before { display: none; }
  html.tki-layout .tki-table:not(.scroll) > tfoot > tr > td:empty { display: none; }
  html.tki-layout .tki-table-wrap:has(> .tki-table:not(.scroll)) { overflow-x: visible; }
  /* Tabela que rola: pelo menos a largura do conteudo. */
  html.tki-layout .tki-table.scroll th,
  html.tki-layout .tki-table.scroll td { white-space: nowrap; }
  html.tki-layout .tki-table-foot { padding: 12px 14px; }

  /* Cada linha e' um cartao separado (como a lista de Empresas): borda,
     canto arredondado e espaco entre eles; 2 colunas quando cabem. Linhas
     de grupo/detalhe (uma celula com colspan) ocupam a largura toda sem
     moldura; a linha de "vazio" tambem. */
  html.tki-layout .tki-table:not(.scroll) > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    padding: 14px 18px 18px;
  }
  html.tki-layout .tki-card-body:not(.flush) .tki-table:not(.scroll) > tbody,
  html.tki-layout .tki-table:not(.scroll) > tbody:has(> tr.tki-table-empty:only-child) { padding: 0; }
  html.tki-layout .tki-table-wrap:has(> .tki-table:not(.scroll)) { border: 0; border-radius: 0; background: transparent; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr,
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:last-child {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--tki-border);
    border-radius: 16px;
    background: var(--tki-card);
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr[data-tki-href]:active { background: var(--tki-surface-2); }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:is(.tki-table-empty, :has(> td[colspan])) {
    grid-column: 1 / -1;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:has(> td[colspan]):not(.tki-table-empty) { padding: 4px 2px 0; }
  /* Titulo do cartao com peso de nome (Empresas) e uma linha separando os dados. */
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:not(.tki-skel-row) > td:is(:first-child:not(.sel), .sel + td, .main):not([colspan]) {
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tki-border);
  }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is(:first-child:not(.sel), .sel + td, .main) .tki-cell-title { font-weight: 600; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is(:first-child:not(.sel), .sel + td, .main) :is(.tki-cell-sub, small) { font-weight: 400; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td:is(:first-child:not(.sel), .sel + td, .main):is(:last-child, :has(+ td.actions:last-child)) { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  /* Rotulo da celula sempre na fonte do texto (celula .tki-mono nao
     deixa o rotulo monoespacado). */
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td::before { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr:has(> td.sel) { padding-left: 50px; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.sel { top: 16px; }
  html.tki-layout .tki-table:not(.scroll) > tbody > tr > td.actions { top: 12px; right: 10px; }
}

/* Tabela encostada nas bordas do cartao: primeira e ultima coluna com o
   mesmo recuo do titulo do cartao (24px), como a lista de Empresas. */
@media (min-width: 768px) {
  html.tki-layout .tki-section > .tki-card-body.flush .tki-table-wrap > .tki-table > * > tr > :is(th, td):first-child,
  html.tki-layout .tki-section > .tki-table-wrap > .tki-table > * > tr > :is(th, td):first-child { padding-left: 24px; }
  html.tki-layout .tki-section > .tki-card-body.flush .tki-table-wrap > .tki-table > * > tr > :is(th, td):last-child,
  html.tki-layout .tki-section > .tki-table-wrap > .tki-table > * > tr > :is(th, td):last-child { padding-right: 24px; }
  html.tki-layout .tki-section > .tki-card-body.flush .tki-table-wrap > .tki-table > * > tr > :is(th, td).actions:last-child,
  html.tki-layout .tki-section > .tki-table-wrap > .tki-table > * > tr > :is(th, td).actions:last-child { padding-right: 16px; }
  html.tki-layout .tki-section > .tki-card-body.flush .tki-table-foot,
  html.tki-layout .tki-section > .tki-table-foot { padding-left: 24px; padding-right: 24px; }
}