/*==============================================================================
  TABELAS E LISTAGENS

  Toda listagem do sistema passa por aqui. O objetivo e duplo:

  1. Modernizar a tabela sem reescrever cada view. As listagens antigas usam
     marcacao Bootstrap (`.table` dentro de `.card`); estilizar por aqui alcanca
     todas de uma vez e mantem as novas iguais as velhas.

  2. Empilhar de verdade no celular. Rolar a tabela na horizontal e o padrao
     mais comum e o pior: a pessoa perde a coluna de referencia assim que
     arrasta. Abaixo do ponto de quebra cada linha vira um cartao com pares
     rotulo/valor, e o rotulo vem do proprio cabecalho da tabela — carimbado
     em `data-label` pelo script do design system, sem tocar em nenhuma view.

  Nada aqui usa `!important` fora dos casos em que o Bootstrap ja usa.
==============================================================================*/

:root {
    /* Abaixo disto, tabela vira cartao. 60rem cobre celular e tablet retrato. */
    --w-tabela-quebra: 60rem;
}

/*------------------------------------------------------------------------------
  Moldura
------------------------------------------------------------------------------*/

/* Sem contorno: a listagem nao e uma caixa dentro da pagina, e a propria
   pagina. Bordas laterais so acrescentam uma linha que o olho tem de ignorar —
   o que separa as linhas entre si ja e o filete horizontal de cada uma. */
.w-tabela-box {
    background: var(--w-surface);
    border: 0;
    border-radius: var(--w-radius-lg, 14px);
    overflow: hidden;
}

/* O scroll horizontal continua existindo para telas medias, onde a tabela
   ainda faz sentido como tabela. */
.w-tabela-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*------------------------------------------------------------------------------
  Tabela
------------------------------------------------------------------------------*/

.w-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
}

.w-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--w-surface);
    padding: .75rem 1rem;
    text-align: left;
    font-size: var(--w-text-2xs, .75rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    white-space: nowrap;
    border-bottom: 1px solid var(--w-border);
}

.w-tabela tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
    vertical-align: middle;
}

.w-tabela tbody tr:last-child td {
    border-bottom: 0;
}

.w-tabela tbody tr {
    transition: background var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

.w-tabela tbody tr:hover {
    background: var(--w-surface-hover);
}

/* Coluna de ações: encostada à direita e sem quebrar os botões. */
.w-tabela .w-col-acoes,
.w-tabela td:last-child.w-acoes {
    text-align: right;
    white-space: nowrap;
}

.w-tabela__vazio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--w-text-secondary);
}

/*------------------------------------------------------------------------------
  Empilhamento no celular

  Cada `tr` vira um cartao; cada `td` vira uma linha rotulo/valor. O rotulo sai
  do `data-label`, carimbado pelo script a partir do `th` correspondente.
------------------------------------------------------------------------------*/

@media (max-width: 60rem) {
    .w-tabela--empilha {
        display: block;
        font-size: var(--w-text-sm, .875rem);
    }

    .w-tabela--empilha thead {
        /* Fora da tela, mas ainda no documento: o leitor de tela continua
           encontrando o cabecalho. `display: none` o apagaria. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .w-tabela--empilha tbody,
    .w-tabela--empilha tr,
    .w-tabela--empilha td {
        display: block;
        width: auto;
    }

    .w-tabela--empilha tr {
        margin: 0 0 .75rem;
        border: 1px solid var(--w-border);
        border-radius: var(--w-radius-md, 12px);
        background: var(--w-surface);
        overflow: hidden;
    }

    .w-tabela--empilha tr:last-child {
        margin-bottom: 0;
    }

    .w-tabela--empilha td {
        display: flex;
        gap: 1rem;
        align-items: baseline;
        justify-content: space-between;
        padding: .6rem .9rem;
        border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
        text-align: right;
    }

    .w-tabela--empilha td:last-child {
        border-bottom: 0;
    }

    .w-tabela--empilha td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: var(--w-text-2xs, .75rem);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--w-text-tertiary);
        text-align: left;
    }

    /* Célula sem rótulo (ações, seleção) ocupa a linha inteira. */
    .w-tabela--empilha td[data-label=""]::before,
    .w-tabela--empilha td:not([data-label])::before {
        content: none;
    }

    /* A primeira célula é o título do cartão: destaque e sem rótulo repetido. */
    .w-tabela--empilha td.w-td-titulo {
        display: block;
        text-align: left;
        background: var(--w-surface-sunken);
        font-weight: 700;
        font-size: var(--w-text-md, 1rem);
        color: var(--w-text-primary);
    }

    .w-tabela--empilha td.w-td-titulo::before {
        display: block;
        margin-bottom: .15rem;
        max-width: none;
    }

    /* Ações viram uma faixa de botões, cada um com área de toque real. */
    .w-tabela--empilha td.w-acoes {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: flex-start;
        background: var(--w-surface-sunken);
    }

    .w-tabela--empilha td.w-acoes > * {
        flex: 1 1 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Sem moldura dupla: o cartão já tem a sua. */
    .w-tabela-box--empilhada {
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .w-tabela-box--empilhada .w-tabela-scroll {
        overflow: visible;
    }
}

/*------------------------------------------------------------------------------
  Barra de topo, filtros e estado vazio das listagens
------------------------------------------------------------------------------*/

.w-listagem-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.w-listagem-topo h1 {
    margin: 0;
    font-size: var(--w-text-xl, 1.375rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--w-text-primary);
}

.w-listagem-topo p {
    margin: .2rem 0 0;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-secondary);
}

.w-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    align-items: end;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
}

@media (max-width: 40rem) {
    .w-filtros {
        grid-template-columns: 1fr;
    }

    .w-filtros button,
    .w-filtros .btn {
        width: 100%;
    }
}

/*==============================================================================
  MOLDURA DAS LISTAGENS ANTIGAS

  Dezenove telas repetem a mesma marcacao: um `nav` de titulo dentro de
  `.box-header`, uma barra `#topoBusca` com os botoes de acao e um painel
  `.buscaAvancada` que abre e fecha. Modernizar isso view a view seria a mesma
  edicao repetida dezenove vezes — e a vigesima nasceria fora do padrao.

  Por isso o desenho vive aqui. As views continuam como estao; o que muda e a
  aparencia, de uma vez, para todas.
==============================================================================*/

/* O cartao branco com sombra pesada some: a listagem e a informacao, nao a
   moldura em volta dela. */
.w-main .card.box {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.w-main .box-header nav {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: .35rem;
    border-radius: 0 !important;
}

.w-main .box-header nav h5 {
    font-size: var(--w-text-xl, 1.375rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--w-text-primary) !important;
}

/* Barra de acoes: vira uma faixa propria, colada no topo da tabela. */
.w-main #topoBusca.card-header,
.w-main #topoBusca {
    margin-top: .75rem !important;
    padding: 0;
    background: transparent;
    border: 0;
}

.w-main .topoBusca-botoes {
    gap: .5rem;
}

/* O separador vertical desenhado a mao entre os botoes nao sobrevive ao tema
   escuro (era um `border-right` preto fixo). */
.w-main #topoBusca span[style*="border-right"] {
    display: none !important;
}

.w-main #topoBusca .btn,
.w-main .buscaAvancada .btn {
    border-radius: var(--w-radius-md, 10px);
    font-weight: 600;
    padding: .55rem 1.1rem;
    box-shadow: none;
}

/* Painel de busca avancada. */
.w-main .buscaAvancada {
    margin: .85rem 0 0 !important;
    max-width: 100% !important;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    box-shadow: none;
}

.w-main .buscaAvancada .panel,
.w-main .buscaAvancada .panel-default,
.w-main .buscaAvancada .panel-body {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.w-main .buscaAvancada .panel-title {
    margin: 1rem 1.25rem .25rem !important;
    font-size: var(--w-text-sm, .875rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
}

.w-main .buscaAvancada label {
    font-size: var(--w-text-xs, .8125rem);
    font-weight: 600;
    color: var(--w-text-secondary);
    margin-bottom: .3rem !important;
}

.w-main .buscaAvancada .form-control,
.w-main .buscaAvancada .form-select {
    border-radius: var(--w-radius-md, 10px);
    border-color: var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
}

/* Breadcrumb vazio ocupava espaco em quase todas as telas. */
.w-main .breadcrumb:empty {
    display: none;
}

/*------------------------------------------------------------------------------
  Celular: a barra de acoes empilha e cada botao vira alvo de toque inteiro.
------------------------------------------------------------------------------*/

@media (max-width: 40rem) {
    .w-main .box-header nav {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .5rem;
    }

    .w-main .topoBusca-botoes {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .w-main .topoBusca-botoes .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .w-main .buscaAvancada .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Paginacao centralizada e com alvos maiores. */
    .w-main .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .w-main .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/*==============================================================================
  EXTRATOS E DEMAIS TELAS FINANCEIRAS

  Estas telas somam tabelas a blocos de saldo e comissao, e a marcacao delas nao
  e uma listagem simples — reescreve-las para o componente arriscaria a parte
  que calcula dinheiro. O que falta ali e so a moldura, entao ela vem por aqui:
  o container antigo (`card box-body table-responsive`) passa a ter a mesma
  aparencia da caixa das listagens novas.
==============================================================================*/

.w-main .card.box-body.table-responsive {
    background: var(--w-surface);
    border: 0;
    border-radius: var(--w-radius-lg, 14px);
    box-shadow: none;
    /* As margens `m-5` das views antigas empurravam a tabela para o meio da
       tela; aqui ela volta a ocupar a largura do conteudo. */
    margin: 0 0 1rem !important;
    padding: 0;
}

.w-main .card.box-body.table-responsive > table {
    margin-bottom: 0;
}

/* Titulos de secao dessas telas (`<h5 class="m-5">`) seguiam a mesma margem
   exagerada. */
.w-main .tab-content h5.m-5,
.w-main .tab-pane h5.m-5 {
    margin: 1.25rem 0 .75rem !important;
    font-size: var(--w-text-md, 1rem);
    font-weight: 700;
}

/* Abas do extrato com o mesmo desenho das abas das listagens. */
.w-main .nav-tabs {
    border: 0;
    gap: .25rem;
    padding: .25rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface-sunken);
    display: inline-flex;
    flex-wrap: wrap;
}

.w-main .nav-tabs .nav-link {
    border: 0;
    border-radius: var(--w-radius-full, 999px);
    padding: .5rem 1.05rem;
    font-size: var(--w-text-sm, .875rem);
    font-weight: 600;
    color: var(--w-text-secondary);
}

.w-main .nav-tabs .nav-link.active {
    background: var(--w-surface);
    color: var(--w-accent);
    box-shadow: var(--w-shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));
}

/*==============================================================================
  DENSIDADE — referencia de UX do Pipedrive

  O que se aproveita da referencia e o ritmo de leitura, nao a identidade:

  • linhas mais baixas, para caber mais informacao sem rolar;
  • cabecalho discreto, em caixa alta pequena — ele orienta, nao compete;
  • primeira coluna com peso maior: e o nome do registro, o que o olho procura;
  • separadores finos e claros, em vez de bordas fortes;
  • numero e valor alinhados a direita, para comparar de cima a baixo.

  As cores continuam sendo as do AgendaZ.
==============================================================================*/

.w-tabela thead th {
    padding: .6rem 1rem;
    font-size: 11px;
    letter-spacing: .07em;
}

.w-tabela tbody td {
    padding: .7rem 1rem;
    line-height: 1.4;
}

/* Nome do registro: o ponto de entrada da linha. */
.w-tabela tbody td:first-child {
    font-weight: 600;
    color: var(--w-text-primary);
}

/* Linha inteira responde ao ponteiro — a area clicavel e a linha, nao so o
   icone no fim dela. */
.w-tabela tbody tr {
    cursor: default;
}

.w-tabela tbody tr:hover td:first-child {
    color: var(--w-text-link, var(--w-accent));
}

/* Numeros e valores alinhados a direita: compara-los exige colunas alinhadas. */
.w-tabela td.w-num,
.w-tabela th.w-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Acoes so aparecem por completo na linha sob o ponteiro. No toque elas ficam
   sempre visiveis, porque nao existe "passar o mouse" no celular. */
@media (hover: hover) and (min-width: 60rem) {
    .w-tabela tbody td.w-acoes .lz-acao {
        opacity: .55;
        transition: opacity var(--w-duration-fast, .12s) ease;
    }

    .w-tabela tbody tr:hover td.w-acoes .lz-acao,
    .w-tabela tbody td.w-acoes .lz-acao:focus-visible {
        opacity: 1;
    }
}