/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / TABLES

   Responsabilidades:
   - tabelas de dados;
   - tabelas financeiras e administrativas;
   - alinhamento e formatação de valores;
   - coluna principal com identificação;
   - ordenação;
   - seleção de linhas;
   - toolbar;
   - filtros e busca;
   - paginação;
   - cabeçalho fixo;
   - carregamento;
   - estado vazio;
   - rolagem horizontal no mobile.

   Este componente não cria uma segunda interface em cards
   para dispositivos móveis.

   Dependências:
   - tokens.css;
   - components/buttons.css;
   - components/forms.css;
   - components/empty-states.css;
   - components/loaders.css.
   ========================================================== */


/* ==========================================================
   CONTAINER

   As variáveis internas permitem personalizar a aparência
   sem repetir toda a estrutura da tabela.
   ========================================================== */

   .ayw-table-wrap {
    --ayw-table-min-width: 720px;

    --ayw-table-header-bg: var(--ayw-bg-soft);
    --ayw-table-footer-bg: var(--ayw-bg-soft);

    --ayw-table-row-bg: transparent;
    --ayw-table-row-hover-bg: var(--ayw-surface-hover);
    --ayw-table-row-selected-bg: var(--ayw-primary-soft);

    --ayw-table-border-color: var(--ayw-border);
    --ayw-table-border-width: 1px;
    --ayw-table-border-style: solid;

    --ayw-table-radius: var(--ayw-radius-lg);
    --ayw-table-shadow: var(--ayw-shadow-sm);

    --ayw-table-head-padding-y: 0.9rem;
    --ayw-table-head-padding-x: var(--ayw-space-4);

    --ayw-table-cell-padding-y: 0.95rem;
    --ayw-table-cell-padding-x: var(--ayw-space-4);

    position: relative;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    border:
        var(--ayw-table-border-width)
        var(--ayw-table-border-style)
        var(--ayw-table-border-color);

    border-radius: var(--ayw-table-radius);

    background: var(--ayw-surface);

    box-shadow: var(--ayw-table-shadow);

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}

.ayw-table-wrap.is-borderless,
.ayw-table-wrap.ayw-table-wrap-borderless {
    --ayw-table-border-width: 0;
    --ayw-table-radius: 0;
    --ayw-table-shadow: none;
}

.ayw-table-wrap.is-flat,
.ayw-table-wrap.ayw-table-wrap-flat {
    --ayw-table-shadow: none;
}

.ayw-table-wrap.is-elevated,
.ayw-table-wrap.ayw-table-wrap-elevated {
    --ayw-table-shadow: var(--ayw-shadow-md);
}


/* ==========================================================
   TABELA BASE
   ========================================================== */

.ayw-table {
    width: 100%;
    min-width: var(--ayw-table-min-width);

    border-spacing: 0;
    border-collapse: collapse;

    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
}

.ayw-table caption {
    padding:
        var(--ayw-space-4)
        var(--ayw-table-cell-padding-x);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);

    text-align: left;
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.ayw-table thead {
    background: var(--ayw-table-header-bg);
}

.ayw-table th {
    padding:
        var(--ayw-table-head-padding-y)
        var(--ayw-table-head-padding-x);

    border-bottom:
        1px
        solid
        var(--ayw-table-border-color);

    background: var(--ayw-table-header-bg);
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.04em;

    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}


/* ==========================================================
   CÉLULAS
   ========================================================== */

.ayw-table td {
    padding:
        var(--ayw-table-cell-padding-y)
        var(--ayw-table-cell-padding-x);

    border-bottom:
        1px
        solid
        var(--ayw-table-border-color);

    background: var(--ayw-table-row-bg);
    color: var(--ayw-text-soft);

    vertical-align: middle;
}

.ayw-table tbody tr:last-child > td {
    border-bottom: 0;
}


/* ==========================================================
   LINHAS
   ========================================================== */

.ayw-table tbody tr {
    transition:
        background-color
        var(--ayw-transition-fast);
}

.ayw-table tbody tr:hover > td {
    background: var(--ayw-table-row-hover-bg);
}

.ayw-table tbody tr.is-selected > td,
.ayw-table tbody tr[aria-selected="true"] > td {
    background: var(--ayw-table-row-selected-bg);
}

.ayw-table tbody tr.is-clickable {
    cursor: pointer;
}

.ayw-table tbody tr.is-disabled,
.ayw-table tbody tr[aria-disabled="true"] {
    opacity: 0.5;

    pointer-events: none;
}


/* ==========================================================
   ESTADOS SEMÂNTICOS DE LINHA
   ========================================================== */

.ayw-table tbody tr.is-success > td {
    background:
        color-mix(
            in srgb,
            var(--ayw-success-soft) 70%,
            transparent
        );
}

.ayw-table tbody tr.is-warning > td {
    background:
        color-mix(
            in srgb,
            var(--ayw-warning-soft) 70%,
            transparent
        );
}

.ayw-table tbody tr.is-danger > td {
    background:
        color-mix(
            in srgb,
            var(--ayw-danger-soft) 70%,
            transparent
        );
}

.ayw-table tbody tr.is-info > td {
    background:
        color-mix(
            in srgb,
            var(--ayw-info-soft) 70%,
            transparent
        );
}

.ayw-table tbody tr.is-success:hover > td {
    background: var(--ayw-success-soft);
}

.ayw-table tbody tr.is-warning:hover > td {
    background: var(--ayw-warning-soft);
}

.ayw-table tbody tr.is-danger:hover > td {
    background: var(--ayw-danger-soft);
}

.ayw-table tbody tr.is-info:hover > td {
    background: var(--ayw-info-soft);
}


/* ==========================================================
   ALINHAMENTO
   ========================================================== */

.ayw-table .is-center,
.ayw-table .ayw-table-center {
    text-align: center;
}

.ayw-table .is-right,
.ayw-table .ayw-table-right {
    text-align: right;
}

.ayw-table .is-left,
.ayw-table .ayw-table-left {
    text-align: left;
}

.ayw-table .is-nowrap,
.ayw-table .ayw-table-nowrap {
    white-space: nowrap;
}

.ayw-table .is-wrap,
.ayw-table .ayw-table-wrap-text {
    white-space: normal;
}

.ayw-table .is-truncate,
.ayw-table .ayw-table-truncate {
    max-width: 220px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   COLUNAS NUMÉRICAS

   tabular-nums mantém os algarismos com a mesma largura,
   melhorando a leitura de valores financeiros.
   ========================================================== */

.ayw-table-number,
.ayw-table-currency,
.ayw-table-percent,
.ayw-table-date,
.ayw-table-time {
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}

.ayw-table-number,
.ayw-table-currency,
.ayw-table-percent {
    text-align: right;
}

.ayw-table-date,
.ayw-table-time {
    text-align: left;
}


/* ==========================================================
   VALORES SEMÂNTICOS
   ========================================================== */

.ayw-table .is-positive,
.ayw-table .ayw-table-positive {
    color: var(--ayw-success);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table .is-negative,
.ayw-table .ayw-table-negative {
    color: var(--ayw-danger);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table .is-warning,
.ayw-table .ayw-table-warning {
    color: var(--ayw-warning);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table .is-info,
.ayw-table .ayw-table-info {
    color: var(--ayw-info);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table .is-muted,
.ayw-table .ayw-table-muted {
    color: var(--ayw-text-muted);
}


/* ==========================================================
   COLUNA PRINCIPAL
   ========================================================== */

.ayw-table-primary {
    color: var(--ayw-text);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table-secondary {
    display: block;

    margin-top: var(--ayw-space-1);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-regular);
    line-height: var(--ayw-line-height-normal);
}


/* ==========================================================
   ATIVO OU IDENTIFICAÇÃO
   ========================================================== */

.ayw-table-asset {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-table-asset-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    overflow: hidden;

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);

    background: var(--ayw-bg-muted);
    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
}

.ayw-table-asset-icon.is-round {
    border-radius: 50%;
}

.ayw-table-asset-icon img,
.ayw-table-asset-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.ayw-table-asset-icon img {
    object-fit: cover;
}

.ayw-table-asset-icon svg {
    padding: 0.55rem;
}

.ayw-table-asset-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-table-asset-name,
.ayw-table-asset-meta {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-table-asset-name {
    color: var(--ayw-text);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table-asset-meta {
    margin-top: var(--ayw-space-1);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}


/* ==========================================================
   AÇÕES
   ========================================================== */

.ayw-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 0;

    gap: var(--ayw-space-2);

    white-space: nowrap;
}

.ayw-table-actions.is-start {
    justify-content: flex-start;
}

.ayw-table-actions.is-center {
    justify-content: center;
}


/* ==========================================================
   ORDENAÇÃO
   ========================================================== */

.ayw-table-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 32px;

    gap: var(--ayw-space-2);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: var(--ayw-radius-sm);

    background: transparent;
    color: inherit;

    cursor: pointer;

    font: inherit;
    line-height: inherit;

    text-align: inherit;
    text-transform: inherit;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.ayw-table-sort:hover {
    color: var(--ayw-primary);
}

.ayw-table-sort:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}

.ayw-table-sort-icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1em;
    height: 1em;

    color: var(--ayw-text-disabled);

    font-size: 0.72rem;
    line-height: 1;
}

.ayw-table-sort-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.ayw-table-sort.is-active,
.ayw-table-sort[aria-sort="ascending"],
.ayw-table-sort[aria-sort="descending"] {
    color: var(--ayw-primary);
}

.ayw-table-sort.is-active .ayw-table-sort-icon,
.ayw-table-sort[aria-sort="ascending"] .ayw-table-sort-icon,
.ayw-table-sort[aria-sort="descending"] .ayw-table-sort-icon {
    color: var(--ayw-primary);
}


/* ==========================================================
   COLUNA DE SELEÇÃO
   ========================================================== */

.ayw-table-select {
    width: 44px;
    min-width: 44px;

    text-align: center;
}

.ayw-table-select input[type="checkbox"],
.ayw-table-select input[type="radio"] {
    margin: 0;
}


/* ==========================================================
   VARIAÇÕES
   ========================================================== */

.ayw-table-striped tbody tr:nth-child(even) > td {
    background: var(--ayw-bg-soft);
}

.ayw-table-striped tbody tr:nth-child(even):hover > td {
    background: var(--ayw-table-row-hover-bg);
}

.ayw-table-compact {
    --ayw-table-head-padding-y: 0.65rem;
    --ayw-table-head-padding-x: var(--ayw-space-3);

    --ayw-table-cell-padding-y: 0.65rem;
    --ayw-table-cell-padding-x: var(--ayw-space-3);
}

.ayw-table-comfortable {
    --ayw-table-head-padding-y: 1rem;
    --ayw-table-head-padding-x: var(--ayw-space-5);

    --ayw-table-cell-padding-y: 1.1rem;
    --ayw-table-cell-padding-x: var(--ayw-space-5);
}

.ayw-table-borderless th,
.ayw-table-borderless td {
    border-bottom: 0;
}

.ayw-table-hoverless tbody tr:hover > td {
    background: var(--ayw-table-row-bg);
}

.ayw-table-grid th,
.ayw-table-grid td {
    border-right:
        1px
        solid
        var(--ayw-table-border-color);
}

.ayw-table-grid th:last-child,
.ayw-table-grid td:last-child {
    border-right: 0;
}


/* ==========================================================
   LARGURA DA TABELA
   ========================================================== */

.ayw-table-auto {
    --ayw-table-min-width: 100%;
}

.ayw-table-sm {
    --ayw-table-min-width: 560px;
}

.ayw-table-md {
    --ayw-table-min-width: 720px;
}

.ayw-table-lg {
    --ayw-table-min-width: 960px;
}

.ayw-table-xl {
    --ayw-table-min-width: 1200px;
}


/* ==========================================================
   CABEÇALHO FIXO

   A classe deve ser aplicada ao container:
   <div class="ayw-table-wrap ayw-table-sticky">
   ========================================================== */

.ayw-table-sticky {
    max-height: 520px;

    overflow: auto;
}

.ayw-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    background: var(--ayw-table-header-bg);

    box-shadow:
        0
        1px
        0
        var(--ayw-table-border-color);
}


/* ==========================================================
   PRIMEIRA COLUNA FIXA
   ========================================================== */

.ayw-table-sticky-first th:first-child,
.ayw-table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;

    background: var(--ayw-surface);
}

.ayw-table-sticky-first thead th:first-child {
    z-index: 3;

    background: var(--ayw-table-header-bg);
}

.ayw-table-sticky-first tbody tr:hover > td:first-child {
    background: var(--ayw-table-row-hover-bg);
}

.ayw-table-sticky-first tbody tr.is-selected > td:first-child,
.ayw-table-sticky-first tbody tr[aria-selected="true"] > td:first-child {
    background: var(--ayw-table-row-selected-bg);
}


/* ==========================================================
   RODAPÉ
   ========================================================== */

.ayw-table tfoot td {
    border-top:
        1px
        solid
        var(--ayw-table-border-color);

    border-bottom: 0;

    background: var(--ayw-table-footer-bg);
    color: var(--ayw-text);

    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-table-total-label {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-semibold);
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.ayw-table-total-value {
    color: var(--ayw-text);

    font-weight: var(--ayw-font-weight-bold);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   ESTRUTURA COMPLETA DA TABELA

   Permite unir toolbar, tabela e paginação sem bordas
   duplicadas ou cantos inconsistentes.
   ========================================================== */

.ayw-table-shell {
    width: 100%;
    min-width: 0;
}

.ayw-table-shell > .ayw-table-toolbar {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.ayw-table-shell > .ayw-table-wrap {
    border-radius: 0;
}

.ayw-table-shell > .ayw-table-toolbar + .ayw-table-wrap {
    border-top: 0;
}

.ayw-table-shell > .ayw-table-pagination {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.ayw-table-shell > .ayw-table-wrap + .ayw-table-pagination {
    border-top: 0;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.ayw-table-toolbar {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-3);

    padding: var(--ayw-space-4);

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-surface);
}

.ayw-table-toolbar-main,
.ayw-table-toolbar-actions,
.ayw-table-search,
.ayw-table-filters,
.ayw-table-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-table-toolbar-main {
    flex: 1 1 auto;
}

.ayw-table-toolbar-actions {
    flex: 0 0 auto;

    gap: var(--ayw-space-2);
}

.ayw-table-search {
    flex: 1 1 280px;
}

.ayw-table-search > .ayw-field,
.ayw-table-search > .ayw-input,
.ayw-table-search > input {
    width: 100%;
}

.ayw-table-filters {
    flex: 1 1 auto;
}

.ayw-table-summary {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
}


/* ==========================================================
   PAGINAÇÃO
   ========================================================== */

.ayw-table-pagination {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-3);

    padding: var(--ayw-space-4);

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-surface);
}

.ayw-table-pagination-info,
.ayw-table-pagination-summary {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
}

.ayw-table-pagination-main,
.ayw-table-pagination-actions,
.ayw-table-pagination-pages,
.ayw-table-pagination-size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-2);
}

.ayw-table-pagination-main {
    flex: 1 1 auto;
}

.ayw-table-pagination-actions {
    flex: 0 0 auto;
}

.ayw-table-pagination-pages {
    justify-content: center;
}

.ayw-table-pagination-size {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
}

.ayw-table-pagination-size select {
    width: auto;
    min-width: 72px;
}


/* ==========================================================
   ESTADO VAZIO

   Para estados completos, use o componente empty-states.css
   dentro da célula.

   Exemplo:
   <tr class="ayw-table-empty">
     <td colspan="6">
       <div class="ayw-empty-state ayw-empty-state-inline">
         ...
       </div>
     </td>
   </tr>
   ========================================================== */

.ayw-table-empty > td,
.ayw-table-empty td {
    padding: 0;

    border-bottom: 0;

    background: transparent;

    color: var(--ayw-text-muted);

    text-align: center;
}

.ayw-table-empty:hover > td {
    background: transparent;
}

.ayw-table-empty .ayw-empty-state {
    border-radius: 0;
}


/* ==========================================================
   CARREGAMENTO

   O conteúdo visual pertence a loaders.css.

   Exemplo:
   <tr class="ayw-table-loading">
     <td colspan="6">
       <div class="ayw-loader-center ayw-loader-center-sm">
         ...
       </div>
     </td>
   </tr>
   ========================================================== */

.ayw-table-loading > td,
.ayw-table-loading td {
    padding: 0;

    border-bottom: 0;

    background: transparent;

    text-align: center;
}

.ayw-table-loading:hover > td {
    background: transparent;
}

.ayw-table-loading .ayw-loader-center {
    min-height: 180px;
}


/* ==========================================================
   SKELETON DE LINHA

   A animação e a aparência pertencem a loaders.css.
   Este bloco define somente o layout dentro da tabela.
   ========================================================== */

.ayw-table-skeleton-row {
    pointer-events: none;
}

.ayw-table-skeleton-row:hover > td {
    background: var(--ayw-table-row-bg);
}

.ayw-table-skeleton {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-table-skeleton-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-2);
}


/* ==========================================================
   OVERLAY DE CARREGAMENTO

   O container já é position: relative.
   Use .ayw-loading-overlay de loaders.css diretamente dentro
   de .ayw-table-wrap ou .ayw-table-shell.
   ========================================================== */

.ayw-table-wrap > .ayw-loading-overlay,
.ayw-table-shell > .ayw-loading-overlay {
    z-index: 4;
}


/* ==========================================================
   ESTADO DE ATUALIZAÇÃO

   Mantém a tabela visível durante uma atualização silenciosa.
   ========================================================== */

.ayw-table-wrap.is-loading .ayw-table,
.ayw-table-shell.is-loading .ayw-table-wrap {
    pointer-events: none;
}

.ayw-table-wrap.is-loading .ayw-table {
    opacity: 0.65;
}

.ayw-table-wrap[tabindex="0"]:focus-visible,
.table-responsive[tabindex="0"]:focus-visible {
    border-radius: var(--ayw-radius-md);
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-table-toolbar-actions,
    .ayw-table-pagination-actions {
        width: 100%;
    }

    .ayw-table-toolbar-actions > .ayw-btn,
    .ayw-table-pagination-actions > .ayw-btn {
        flex: 1 1 auto;
    }

    .ayw-table-pagination-pages {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: var(--ayw-space-1);

        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .ayw-table-pagination-pages::-webkit-scrollbar {
        display: none;
    }

    .ayw-table-pagination-pages > * {
        flex: 0 0 auto;
    }
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-table-wrap {
        --ayw-table-min-width: 640px;

        --ayw-table-head-padding-x: var(--ayw-space-3);
        --ayw-table-cell-padding-x: var(--ayw-space-3);
    }

    .ayw-table-toolbar,
    .ayw-table-pagination {
        padding: var(--ayw-space-3);
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-table-toolbar,
    .ayw-table-pagination {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .ayw-table-toolbar-main,
    .ayw-table-pagination-main {
        flex: 1 1 auto;
    }

    .ayw-table-toolbar-actions,
    .ayw-table-pagination-actions {
        flex: 0 0 auto;
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-table tbody tr {
        transition: none;
    }
}


/* ==========================================================
   FALLBACK PARA COLOR-MIX
   ========================================================== */

@supports not (
    color:
        color-mix(
            in srgb,
            black,
            white
        )
) {
    .ayw-table tbody tr.is-success > td {
        background: var(--ayw-success-soft);
    }

    .ayw-table tbody tr.is-warning > td {
        background: var(--ayw-warning-soft);
    }

    .ayw-table tbody tr.is-danger > td {
        background: var(--ayw-danger-soft);
    }

    .ayw-table tbody tr.is-info > td {
        background: var(--ayw-info-soft);
    }
}