/**
 * Collapsible Rows Plugin Styles
 *
 * Theme-agnostic styling using CSS custom properties.
 * Override these variables in your theme for customization.
 */

:root {
    /* Collapsible row background - inherits from parent by default */
    --collapsible-row-bg: inherit;
    --collapsible-row-bg-dark: inherit;

    /* Collapsible table background */
    --collapsible-table-bg: inherit;
    --collapsible-table-bg-dark: inherit;

    /* Collapsible table header background */
    --collapsible-table-header-bg: inherit;
    --collapsible-table-header-bg-dark: inherit;

    /* Collapsible table row backgrounds */
    --collapsible-table-row-bg: inherit;
    --collapsible-table-row-bg-dark: inherit;
    --collapsible-table-row-hover-bg: inherit;
    --collapsible-table-row-hover-bg-dark: inherit;

    /* Chevron column width for alignment */
    --collapsible-chevron-width: 40px;
}

/* Collapsible row content container */
.fi-ta-collapsible-content-inner {
    background-color: var(--collapsible-row-bg);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

[data-theme="dark"] .fi-ta-collapsible-content-inner {
    background-color: var(--collapsible-row-bg-dark);
}

/* Collapsible table - offset by chevron width */
.fi-ta-collapsible-content-inner .fi-ta-ctn {
    margin-left: var(--collapsible-chevron-width);
    background-color: var(--collapsible-table-bg);
}

[data-theme="dark"] .fi-ta-collapsible-content-inner .fi-ta-ctn {
    background-color: var(--collapsible-table-bg-dark);
}

/* Collapsible table header */
.fi-ta-collapsible-content-inner .fi-ta-ctn thead {
    background-color: var(--collapsible-table-header-bg);
}

[data-theme="dark"] .fi-ta-collapsible-content-inner .fi-ta-ctn thead {
    background-color: var(--collapsible-table-header-bg-dark);
}

/* Collapsible table rows */
.fi-ta-collapsible-content-inner tbody tr {
    background-color: var(--collapsible-table-row-bg);
}

[data-theme="dark"] .fi-ta-collapsible-content-inner tbody tr {
    background-color: var(--collapsible-table-row-bg-dark);
}

.fi-ta-collapsible-content-inner tbody tr:hover {
    background-color: var(--collapsible-table-row-hover-bg);
}

[data-theme="dark"] .fi-ta-collapsible-content-inner tbody tr:hover {
    background-color: var(--collapsible-table-row-hover-bg-dark);
}