/* caravel_table storefront styling. Keyed on data-content-type selectors only:
   Tailwind utilities inside master templates are purged from the theme build. */

[data-content-type="caravel_table"] table {
    border-collapse: collapse;
    width: 100%;
}

[data-content-type="caravel_table"] caption {
    caption-side: top;
    font-weight: 600;
    padding: 8px 0;
    text-align: left;
}

[data-content-type="caravel_table"] th,
[data-content-type="caravel_table"] td {
    border-bottom: 1px solid var(--caravel-table-border-color, var(--tera-table-border-color, #e0e0e0));
    font-size: var(--caravel-table-cell-font-size, var(--tera-table-cell-font-size, inherit));
    padding: var(--caravel-table-cell-padding, var(--tera-table-cell-padding, 8px));
    text-align: left;
    vertical-align: top;
}

[data-content-type="caravel_table"] thead th,
[data-content-type="caravel_table"] tbody th[scope="row"] {
    background: var(--caravel-table-header-background-color, var(--tera-table-header-background-color, #f5f5f5));
    color: var(--caravel-table-header-text-color, var(--tera-table-header-text-color, inherit));
    font-weight: var(--caravel-table-header-font-weight, var(--tera-table-header-font-weight, 600));
}

[data-content-type="caravel_table"][data-striped="true"] tbody tr:nth-child(even) {
    background: var(--caravel-table-stripe-color, var(--tera-table-stripe-color, #f5f5f5));
}

[data-content-type="caravel_table"][data-bordered="true"] th,
[data-content-type="caravel_table"][data-bordered="true"] td {
    border: 1px solid var(--caravel-table-border-color, var(--tera-table-border-color, #d1d1d1));
}

[data-content-type="caravel_table"][data-mobile-mode="scroll"] {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

@media (max-width: 767px) {
    [data-content-type="caravel_table"][data-mobile-mode="stack"] table,
    [data-content-type="caravel_table"][data-mobile-mode="stack"] tbody,
    [data-content-type="caravel_table"][data-mobile-mode="stack"] tr,
    [data-content-type="caravel_table"][data-mobile-mode="stack"] th[scope="row"],
    [data-content-type="caravel_table"][data-mobile-mode="stack"] td {
        display: block;
        width: 100%;
    }

    [data-content-type="caravel_table"][data-mobile-mode="stack"] table {
        table-layout: auto !important;
    }

    [data-content-type="caravel_table"][data-mobile-mode="stack"] thead,
    [data-content-type="caravel_table"][data-mobile-mode="stack"] colgroup {
        display: none;
    }

    [data-content-type="caravel_table"][data-mobile-mode="stack"] tr {
        border-bottom: 1px solid var(--caravel-table-border-color, var(--tera-table-border-color, #d1d1d1));
        padding: 4px 0;
    }

    [data-content-type="caravel_table"][data-mobile-mode="stack"] td::before {
        content: attr(data-label);
        display: block;
        font-weight: var(--caravel-table-header-font-weight, var(--tera-table-header-font-weight, 600));
    }

    [data-content-type="caravel_table"][data-mobile-mode="stack"] td[style] {
        text-align: left !important;
    }
}