/* =========================================================
   AutoSimonetti Tabelas — CSS
   Tema: Dark (combina com o site Auto Simonetti)
   Paleta: fundo #1a1a1a / #222, texto #e0e0e0, destaque #e02b20
   ========================================================= */

/* Variáveis de cor para fácil customização (fallbacks — sobrescritas pelo inline style do PHP) */
.ast-tabela-wrapper {
    --ast-bg:          #1e1e1e;
    --ast-bg-alt:      #252525;
    --ast-bg-header:   #e02b20;
    --ast-bg-titulo:   #e02b20;
    --ast-bg-hover:    #2e2e2e;
    --ast-text:        #e0e0e0;
    --ast-text-header: #ffffff;
    --ast-border:      #333333;
    --ast-accent:      #e02b20;
    --ast-accent-dark: #b52219;
    --ast-muted:       #888888;
    --ast-input-bg:    #2a2a2a;

    margin: 24px 0;
    color: var(--ast-text);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Largura ampla / total (Gutenberg alignwide / alignfull) ─ */

/* Quando o bloco Shortcode tiver alinhamento "Largura ampla" */
.wp-block-shortcode.alignwide .ast-tabela-wrapper,
.alignwide .ast-tabela-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Quando o bloco Shortcode tiver alinhamento "Largura total" */
.wp-block-shortcode.alignfull .ast-tabela-wrapper,
.alignfull .ast-tabela-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Garante que a tabela sempre ocupa todo o espaço disponível do container */
.ast-tabela-wrapper,
.ast-tabela-wrapper .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Título da seção ─────────────────────────────────────── */
.ast-tabela-titulo {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ast-text-header);
    background: var(--ast-bg-titulo);
    padding: 10px 16px;
    margin: 0 0 0 0;
    border-radius: 4px 4px 0 0;
}

/* ── Scroll container ────────────────────────────────────── */
.ast-tabela-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--ast-border);
}

/* ── Tabela base ─────────────────────────────────────────── */
.ast-tabela {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 13px;
    background: var(--ast-bg);
}

.ast-tabela th,
.ast-tabela td {
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ast-border);
}

/* Cabeçalho vermelho */
.ast-tabela thead th {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ast-text-header);
    background: var(--ast-bg-header);
    border-bottom: 2px solid var(--ast-accent-dark);
    position: sticky;
    top: 0;
    z-index: 1;
    /* Ícone de ordenação */
    cursor: pointer;
    user-select: none;
}

/* Linhas do corpo */
.ast-tabela tbody tr {
    background: var(--ast-bg);
    transition: background 0.15s;
}

.ast-tabela tbody tr:nth-child(even) {
    background: var(--ast-bg-alt);
}

.ast-tabela tbody tr:hover {
    background: var(--ast-bg-hover) !important;
}

.ast-tabela tbody td {
    color: var(--ast-text);
}

/* ── DataTables — wrapper geral ──────────────────────────── */
.ast-tabela-wrapper .dataTables_wrapper {
    font-size: 13px;
    color: var(--ast-text);
    background: transparent;
}

/* Barra superior: "Exibir X" + campo de busca */
.ast-tabela-wrapper .ast-dt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 10px 0;
}

.ast-tabela-wrapper .dataTables_length label,
.ast-tabela-wrapper .dataTables_filter label {
    color: var(--ast-muted);
    font-size: 13px;
}

/* Select "Exibir" */
.ast-tabela-wrapper .dataTables_length select {
    background: var(--ast-input-bg);
    color: var(--ast-text);
    border: 1px solid var(--ast-border);
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    margin: 0 4px;
    cursor: pointer;
}

/* Campo de busca */
.ast-tabela-wrapper .dataTables_filter input {
    background: var(--ast-input-bg);
    color: var(--ast-text);
    border: 1px solid var(--ast-border);
    border-radius: 4px;
    padding: 6px 12px;
    margin-left: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 200px;
}

.ast-tabela-wrapper .dataTables_filter input:focus {
    border-color: var(--ast-accent);
    box-shadow: 0 0 0 2px rgba(224, 43, 32, 0.25);
}

.ast-tabela-wrapper .dataTables_filter input::placeholder {
    color: var(--ast-muted);
}

/* Rodapé: info + paginação */
.ast-tabela-wrapper .ast-dt-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 4px 0;
}

.ast-tabela-wrapper .dataTables_info {
    font-size: 12px;
    color: var(--ast-muted);
}

/* Botões de paginação */
.ast-tabela-wrapper .dataTables_paginate {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ast-tabela-wrapper .dataTables_paginate .paginate_button {
    padding: 5px 11px;
    border: 1px solid var(--ast-border);
    border-radius: 4px;
    cursor: pointer;
    background: var(--ast-input-bg);
    color: var(--ast-text) !important;
    font-size: 12px;
    display: inline-block;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none !important;
}

.ast-tabela-wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ast-bg-hover);
    border-color: var(--ast-accent);
    color: #fff !important;
}

.ast-tabela-wrapper .dataTables_paginate .paginate_button.current,
.ast-tabela-wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ast-accent);
    border-color: var(--ast-accent-dark);
    color: #fff !important;
    font-weight: bold;
}

.ast-tabela-wrapper .dataTables_paginate .paginate_button.disabled,
.ast-tabela-wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--ast-muted) !important;
    cursor: default;
    background: var(--ast-bg);
    border-color: var(--ast-border);
}

/* Setas de ordenação DataTables */
.ast-tabela thead .sorting::after,
.ast-tabela thead .sorting_asc::after,
.ast-tabela thead .sorting_desc::after {
    opacity: 0.8;
    filter: brightness(10);
}

/* ── Classes modificadoras ───────────────────────────────── */

/* Sem zebra */
.ast-no-zebra .ast-tabela tbody tr:nth-child(even) {
    background: var(--ast-bg) !important;
}

/* Sem bordas */
.ast-no-border .ast-tabela,
.ast-no-border .ast-tabela th,
.ast-no-border .ast-tabela td {
    border: none !important;
}
.ast-no-border .ast-tabela td,
.ast-no-border .ast-tabela th {
    border-bottom: 1px solid var(--ast-border) !important;
}
.ast-no-border .ast-tabela-scroll {
    border: none;
}

/* Fonte reduzida */
.ast-text-small .ast-tabela,
.ast-text-small .ast-tabela-wrapper .dataTables_wrapper {
    font-size: 11px;
}

/* Padding compacto */
.ast-padding-compacto .ast-tabela th,
.ast-padding-compacto .ast-tabela td {
    padding: 4px 8px !important;
}

/* Padding espaçoso */
.ast-padding-espacoso .ast-tabela th,
.ast-padding-espacoso .ast-tabela td {
    padding: 14px 20px !important;
}

/* ── Largura ampla / total (Gutenberg) ───────────────────── */
.wp-block-shortcode.alignwide  .ast-tabela-wrapper,
.alignwide  .ast-tabela-wrapper,
.wp-block-shortcode.alignfull  .ast-tabela-wrapper,
.alignfull  .ast-tabela-wrapper {
    width: 100%;
    max-width: 100%;
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ast-tabela,
    .ast-tabela-wrapper .dataTables_wrapper {
        font-size: 12px;
    }

    .ast-tabela th,
    .ast-tabela td {
        padding: 7px 10px;
    }

    .ast-tabela-wrapper .dataTables_filter input {
        min-width: 140px;
    }

    .ast-tabela-wrapper .ast-dt-top,
    .ast-tabela-wrapper .ast-dt-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}