/* ============================================================
   PATCH-2026-05-05 — Sistema unificado de tabelas analíticas
   ============================================================
   Resolve:
   - th.numeric não alinhava à direita (regra .table-header th { text-align:left }
     ganhava em especificidade contra ausência de .table th.numeric)
   - Padding vertical assimétrico entre th e td
   - Inline styles repetidos (background:hsl(--accent), padding-left:2.5rem)
   - Classes orfãs (.clientes-table-mobile sem CSS)
   - Falta de tokens semânticos de coluna
   ============================================================ */

/* 1 — Reset unificado de padding e alinhamento vertical */
.table th,
.table td {
    padding: 0.625rem 0.875rem;
    vertical-align: middle;
    line-height: 1.4;
    border: 0;
}

/* 2 — Cabeçalho com numeric à direita (FIX PRINCIPAL DO BUG) */
.table-header th { padding: 0.625rem 0.875rem; text-align: left; }
.table-header th.numeric,
.table th.numeric {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}
.table-header th.center,
.table th.center { text-align: center !important; }

/* 3 — Células */
.table-cell { padding: 0.625rem 0.875rem; vertical-align: middle; }
.table-cell.numeric,
.table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table-cell.center,
.table td.center { text-align: center; }

/* 4 — Tabular-nums em TODAS as cells (datas, IDs, CPF) */
.table tbody td { font-variant-numeric: tabular-nums; }

/* 5 — Tipos semânticos de coluna (use em <col>) */
.col-label       { width: auto;        text-align: left; }
.col-label-wide  { width: 30%;         text-align: left; }
.col-numeric     { width: 9rem;        text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-numeric-sm  { width: 5rem;        text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-currency    { width: 10rem;       text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-percent     { width: 6rem;        text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-status      { width: 7rem;        text-align: center; }
.col-actions     { width: 3rem;        text-align: right; }
.col-icon        { width: 2.5rem;      text-align: center; }

/* 6 — Linha de total (substitui inline style="background:hsl(...)") */
.table-row.is-total,
.table-row-total {
    background: hsl(var(--accent));
    font-weight: 600;
    border-top: 1px solid hsl(var(--border));
}
.table-row.is-total td,
.table-row-total td { font-weight: 600; }

/* 7 — Linha agrupada (subtotais aninhados, ex: cc_parcel breakdown) */
.table-row.is-sub,
.table-row-sub {
    background: hsl(var(--muted) / 0.3);
    font-size: 0.85em;
    color: hsl(var(--muted-foreground));
}
.table-row.is-sub td:first-child,
.table-row-sub td:first-child { padding-left: 2.25rem; }

/* 8 — Tabelas analíticas (sales-table breakdown) — fix colgroup */
.table.sales-table.breakdown {
    table-layout: fixed;
    width: 100%;
}
.table.sales-table.breakdown thead th {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
}
.table.sales-table.breakdown tbody td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

/* 9 — Mobile: as-cards layout */
@media (max-width: 640px) {
    .table.as-cards thead { display: none; }
    .table.as-cards tbody,
    .table.as-cards tr,
    .table.as-cards td { display: block; width: 100%; }
    .table.as-cards tr {
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius-md);
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: hsl(var(--card));
    }
    .table.as-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.35rem 0;
        border: 0;
        text-align: right;
    }
    .table.as-cards td::before {
        content: attr(data-col);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: hsl(var(--muted-foreground));
        letter-spacing: 0.04em;
        margin-right: 1rem;
        text-align: left;
    }
}

/* 10 — Sticky first column do heatmap em mobile */
@media (max-width: 767px) {
    .heatmap-table th.heatmap-row-label {
        position: sticky;
        left: 0;
        background: hsl(var(--card));
        z-index: 1;
        box-shadow: 1px 0 0 hsl(var(--border));
    }
}

/* 11 — Compatibilidade com classe orfã clientes-table-mobile */
.table.clientes-table-mobile { /* placeholder — sem efeito direto, mas evita warnings */ }
@media (max-width: 640px) {
    .table.clientes-table-mobile thead { display: none; }
    .table.clientes-table-mobile tbody,
    .table.clientes-table-mobile tr,
    .table.clientes-table-mobile td { display: block; width: 100%; }
    .table.clientes-table-mobile tr {
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius-md);
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: hsl(var(--card));
    }
    .table.clientes-table-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.35rem 0;
        border: 0;
        text-align: right;
    }
    .table.clientes-table-mobile td::before {
        content: attr(data-col);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: hsl(var(--muted-foreground));
        letter-spacing: 0.04em;
        margin-right: 1rem;
        text-align: left;
    }
}


/* PATCH-2026-05-06 — card de evento com imagem 1:1 (quadrada) */
.play-card .cover,
.event-card .cover {
    aspect-ratio: 1 / 1 !important;
}

/* PATCH-2026-05-06b — overlay "Mapa" com icone pequeno
   admin-v3.min.css linha 466 forca [data-lucide] dentro de .cover pra 64px
   (e o placeholder de ticket quando nao tem imagem). Aqui escopamos a regra
   pra NAO afetar icones dentro de badges/flags do overlay. */
.play-card .cover .map-flag [data-lucide],
.play-card .cover .badge [data-lucide],
.event-card .cover .map-flag [data-lucide],
.event-card .cover .badge [data-lucide] {
    width: 12px !important;
    height: 12px !important;
    opacity: 1 !important;
    stroke-width: 2 !important;
}
.play-card .cover .map-flag,
.event-card .cover .map-flag {
    font-size: 0.6875rem;
    padding: 0.2rem 0.45rem;
    line-height: 1;
}


/* ============================================================
   PATCH negociacao-table v2 (2026-05-07)
   Resolve: usuario reportou "embrolo" — falta divisao,
   campos confundindo, sem hierarquia visual.
   Estrategia: agrupar linhas por categoria via :nth-child,
   colorir colunas, zebra rows, sticky header, dash-cell distinta.
   ============================================================ */
.negociacao-table-wrap {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    overflow-x: auto;
    margin-top: 0.5rem;
}
.negociacao-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    background: hsl(var(--card));
}
/* Header fixo */
.negociacao-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: hsl(var(--muted) / 0.6);
    color: hsl(var(--foreground));
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.65rem 0.85rem;
    text-align: center;
    border-bottom: 2px solid hsl(var(--border));
    white-space: nowrap;
}
.negociacao-table thead th:first-child {
    text-align: left;
    background: hsl(var(--muted));
}
/* Indicadores de coluna no header */
.negociacao-table thead th:nth-child(2) { color: hsl(217 91% 38%); }
.negociacao-table thead th:nth-child(3) { color: hsl(142 71% 30%); }
.negociacao-table thead th:nth-child(4) { color: hsl(38 92% 35%); }

/* Linhas — zebra + hover */
.negociacao-table tbody tr {
    transition: background-color 120ms ease;
}
.negociacao-table tbody tr:nth-child(odd) {
    background: hsl(var(--muted) / 0.18);
}
.negociacao-table tbody tr:hover {
    background: hsl(var(--primary) / 0.06);
}

/* Coluna TIPO (label esquerda) */
.negociacao-table .neg-col-tipo {
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    color: hsl(var(--foreground));
    padding-left: 1rem;
    width: 28%;
    min-width: 14rem;
}
.negociacao-table tbody th.neg-col-tipo {
    background: transparent;
    position: relative;
    padding-left: 1.1rem;
}

/* Cor de borda esquerda por GRUPO (categoria de taxa).
   Ordem fixa do PHP:
   1. CARTAO (%)  2. DINHEIRO (%)  3. INGRESSO (R$)            -> azul (metodos de pagto)
   4. TAXA DE LOCACAO (R$)  5. TAXA DE PDV (R$)                -> ambar (operacional)
   6. % TAXA SERVICO CLIENTE  7. % TAXA SERVICO PRODUTOR
   8. TAXA FIXA SERVICO CLIENTE  9. TAXA FIXA SERVICO PRODUTOR -> rosa (servico)
   10. POS/PDV (DESCONTO)                                      -> verde (config) */
.negociacao-table tbody tr:nth-child(-n+3) th.neg-col-tipo {
    box-shadow: inset 4px 0 0 0 hsl(217 91% 60%);
}
.negociacao-table tbody tr:nth-child(n+4):nth-child(-n+5) th.neg-col-tipo {
    box-shadow: inset 4px 0 0 0 hsl(38 92% 50%);
}
.negociacao-table tbody tr:nth-child(n+6):nth-child(-n+9) th.neg-col-tipo {
    box-shadow: inset 4px 0 0 0 hsl(330 81% 60%);
}
.negociacao-table tbody tr:nth-child(10) th.neg-col-tipo {
    box-shadow: inset 4px 0 0 0 hsl(142 71% 45%);
}

/* Separador entre grupos — espessura visivel no border-top da primeira linha do grupo */
.negociacao-table tbody tr:nth-child(4) > *,
.negociacao-table tbody tr:nth-child(6) > *,
.negociacao-table tbody tr:nth-child(10) > * {
    border-top: 2px solid hsl(var(--border));
}

/* Celulas */
.negociacao-table td {
    padding: 0.5rem 0.65rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
}
.negociacao-table tbody tr:last-child > * {
    border-bottom: 0;
}
.negociacao-table th.neg-col-tipo {
    border-bottom: 1px solid hsl(var(--border) / 0.55);
}
.negociacao-table tbody tr:last-child th.neg-col-tipo {
    border-bottom: 0;
}

/* Inputs — borda esquerda colorida por COLUNA pra reforcar contexto */
.negociacao-table .neg-input {
    width: 100%;
    max-width: 9rem;
    margin: 0 auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.4rem;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease,
        transform 140ms ease;
    will-change: transform, box-shadow;
}
/* Hover: lift + glow + bg destacado */
.negociacao-table .neg-input:hover {
    border-color: hsl(var(--primary) / 0.7);
    background: hsl(var(--card));
    box-shadow:
        0 0 0 3px hsl(var(--primary) / 0.15),
        0 4px 12px -2px hsl(var(--primary) / 0.25);
    transform: translateY(-1px);
}
/* Focus: ring maior + bg branco + border solida + leve scale */
.negociacao-table .neg-input:focus {
    outline: 0;
    border-color: hsl(var(--primary));
    background: hsl(var(--card));
    box-shadow:
        0 0 0 4px hsl(var(--primary) / 0.28),
        0 8px 20px -4px hsl(var(--primary) / 0.35);
    transform: translateY(-1px) scale(1.03);
    z-index: 3;
    position: relative;
}
/* Quando focado, NAO deixa o hover da row "apagar" o destaque do input */
.negociacao-table tbody tr:hover .neg-input:not(:hover):not(:focus) {
    background: hsl(var(--card));
}
/* Borda esquerda mais grossa por coluna + reforco no hover/focus */
.negociacao-table td[data-col="ONLINE"] .neg-input { border-left: 4px solid hsl(217 91% 60%); }
.negociacao-table td[data-col="PDV"] .neg-input    { border-left: 4px solid hsl(142 71% 45%); }
.negociacao-table td[data-col="TEATRO"] .neg-input { border-left: 4px solid hsl(38 92% 50%); }
.negociacao-table td[data-col="ONLINE"] .neg-input:hover,
.negociacao-table td[data-col="ONLINE"] .neg-input:focus {
    box-shadow:
        0 0 0 4px hsl(217 91% 60% / 0.28),
        0 8px 20px -4px hsl(217 91% 60% / 0.35);
    border-color: hsl(217 91% 50%);
}
.negociacao-table td[data-col="PDV"] .neg-input:hover,
.negociacao-table td[data-col="PDV"] .neg-input:focus {
    box-shadow:
        0 0 0 4px hsl(142 71% 45% / 0.28),
        0 8px 20px -4px hsl(142 71% 45% / 0.35);
    border-color: hsl(142 71% 35%);
}
.negociacao-table td[data-col="TEATRO"] .neg-input:hover,
.negociacao-table td[data-col="TEATRO"] .neg-input:focus {
    box-shadow:
        0 0 0 4px hsl(38 92% 50% / 0.30),
        0 8px 20px -4px hsl(38 92% 50% / 0.40);
    border-color: hsl(38 92% 40%);
}
.negociacao-table select.neg-input { text-align: left; padding-right: 1.5rem; }

/* Celula vazia (em-dash) — listras diagonais sutis pra indicar "nao se aplica" */
.negociacao-table .neg-dash {
    display: inline-block;
    width: 100%;
    max-width: 9rem;
    height: 2.1rem;
    line-height: 2.1rem;
    text-align: center;
    color: hsl(var(--muted-foreground) / 0.7);
    background-image: repeating-linear-gradient(
        45deg,
        hsl(var(--muted) / 0.35),
        hsl(var(--muted) / 0.35) 4px,
        transparent 4px,
        transparent 9px
    );
    border: 1px dashed hsl(var(--border));
    border-radius: 0.4rem;
    font-size: 1rem;
    user-select: none;
}

/* Mobile: reduzir paddings */
@media (max-width: 768px) {
    .negociacao-table thead th,
    .negociacao-table td,
    .negociacao-table th.neg-col-tipo {
        padding: 0.4rem 0.45rem;
        font-size: 0.78rem;
    }
    .negociacao-table .neg-col-tipo {
        min-width: 11rem;
        font-size: 0.72rem;
    }
    .negociacao-table .neg-input {
        max-width: 100%;
        padding: 0.35rem 0.4rem;
        font-size: 0.8rem;
    }
}