/*
 * RSB Pro Table Widget Frontend CSS
 * Important: all styles are scoped under .rsb-pro-table-widget-scope.
 * This prevents the widget from affecting Elementor buttons, theme buttons,
 * WooCommerce buttons, or any other links/buttons on the same page.
 */

.rsb-pro-table-widget-scope {
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.rsb-pro-table-widget-scope *,
.rsb-pro-table-widget-scope *::before,
.rsb-pro-table-widget-scope *::after {
    box-sizing: border-box;
}

.rsb-pro-table-widget-scope .rsb-pro-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.rsb-pro-table-widget-scope .rsb-pro-table th,
.rsb-pro-table-widget-scope .rsb-pro-table td {
    border: 1px solid #e5e7eb;
    transition: background-color .2s ease, color .2s ease;
}

.rsb-pro-table-widget-scope .rsb-pro-table thead th {
    font-weight: 700;
}

.rsb-pro-table-widget-scope .rsb-pro-table-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rsb-pro-table-widget-scope .rsb-pro-table-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    line-height: 1.2;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    box-shadow: none;
}

.rsb-pro-table-widget-scope .rsb-pro-table-button:hover,
.rsb-pro-table-widget-scope .rsb-pro-table-button:focus {
    transform: translateY(-1px);
    text-decoration: none !important;
    outline: none;
}

.rsb-pro-table-widget-scope .rsb-pro-table-icon,
.rsb-pro-table-widget-scope .rsb-pro-table-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rsb-pro-table-widget-scope .rsb-pro-table-icon svg {
    width: 1em;
    height: 1em;
}

.rsb-pro-table-widget-scope .rsb-group-title-cell {
    font-weight: 700;
    text-align: left;
}

.rsb-pro-table-widget-scope .rsb-inline-editable-text[contenteditable="true"] {
    display: inline-block;
    min-width: 24px;
    outline: 1px dashed rgba(0, 71, 148, .45);
    outline-offset: 3px;
    cursor: text;
}

.rsb-pro-table-widget-scope .rsb-inline-editable-text[contenteditable="true"]:focus {
    outline: 2px solid rgba(0, 71, 148, .75);
    background: rgba(0, 71, 148, .06);
}

@media (max-width: 767px) {
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards,
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards thead,
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards tbody,
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards th,
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards td,
    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards tr {
        display: block;
        width: 100%;
    }

    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards thead {
        display: none;
    }

    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards tr {
        margin-bottom: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
    }

    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        text-align: right !important;
        border-width: 0 0 1px 0;
    }

    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards td:last-child {
        border-bottom: 0;
    }

    .rsb-pro-table-widget-scope .rsb-pro-table.rsb-responsive-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        opacity: .75;
    }
}