/*------------------------------------*\

    WebFX Ninja Tables Customizations - Bedrock Environmental

    Visual language aligned to Figma flexible-content
    (file nJAiHkttvRUeTKo5e74CGu, node 10253:6592 / WYSIWYG 10253:15636).

    Applies to .footable_parent.ninja_table_wrapper and
    Extra CSS Class: bedrockenvironmental-nt

    Printed late via fx_ninja_tables_print_styles in inc/theme/assets.php.
    Tokens: custom-properties.css

\*------------------------------------*/

.footable_parent.ninja_table_wrapper,
.bedrockenvironmental-nt {
    --nt-border: #edf7ee;
    --nt-header-bg: var(--color-primary);
    --nt-header-color: var(--color-primary-text);
    --nt-body-color: var(--color-body);
    --nt-label-color: var(--color-heading);
    --nt-row-alt: var(--color-light-green-bg);
    --nt-cell-bg: var(--color-white);
    --nt-radius: 10px;
}

.footable_parent.ninja_table_wrapper,
.bedrockenvironmental-nt.footable_parent,
.bedrockenvironmental-nt .footable_parent {
    margin: var(--content-gap) 0;
    overflow: hidden;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-cell-bg);
    scrollbar-color: var(--color-primary) var(--color-offwhite);
    scrollbar-width: thin;
}

.footable_parent.ninja_table_wrapper::-webkit-scrollbar,
.bedrockenvironmental-nt.footable_parent::-webkit-scrollbar,
.bedrockenvironmental-nt::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.footable_parent.ninja_table_wrapper::-webkit-scrollbar-track,
.bedrockenvironmental-nt.footable_parent::-webkit-scrollbar-track,
.bedrockenvironmental-nt::-webkit-scrollbar-track {
    background: var(--color-offwhite);
    border-radius: 10px;
}

.footable_parent.ninja_table_wrapper::-webkit-scrollbar-thumb,
.bedrockenvironmental-nt.footable_parent::-webkit-scrollbar-thumb,
.bedrockenvironmental-nt::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}

.footable_parent .foo-table,
.footable_parent .ninja_table_pro,
.footable_parent.semantic_ui .ui.table,
.footable_parent .semantic_ui .ui.table,
.bedrockenvironmental-nt .foo-table,
.bedrockenvironmental-nt.foo-table {
    font-family: var(--font-body) !important;
    font-size: var(--font-size-body) !important;
    line-height: var(--line-height-body) !important;
    border: none !important;
    border-color: #edf7ee !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--nt-body-color) !important;
    box-shadow: none !important;
}

.footable_parent .foo-table thead th,
.footable_parent .ninja_table_pro thead th,
.footable_parent.semantic_ui .ui.table thead th,
.footable_parent .semantic_ui .ui.table thead th,
.bedrockenvironmental-nt .foo-table thead th,
.bedrockenvironmental-nt.foo-table thead th {
    background: var(--nt-header-bg) !important;
    color: var(--nt-header-color) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-small) !important;
    line-height: var(--line-height-heading) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-color: transparent !important;
    padding: 18px 24px !important;
    vertical-align: middle !important;
}

.footable_parent .foo-table thead tr:first-child > th:first-child,
.footable_parent .foo-table thead tr:first-child > th:last-child,
.footable_parent.semantic_ui .ui.table thead tr:first-child > th:first-child,
.footable_parent.semantic_ui .ui.table thead tr:first-child > th:last-child {
    border-radius: 0 !important;
}

.footable_parent .foo-table tbody tr td:first-child,
.footable_parent .ninja_table_pro tbody tr td:first-child,
.footable_parent.semantic_ui .ui.table tbody tr td:first-child,
.footable_parent.semantic_ui .ui.celled.table tr td:first-child,
.bedrockenvironmental-nt .foo-table tbody tr td:first-child {
    border-left: none !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

.footable_parent .foo-table tbody tr:nth-child(even) td,
.footable_parent .ninja_table_pro tbody tr:nth-child(even) td,
.footable_parent.semantic_ui .ui.table tbody tr:nth-child(even) td,
.footable_parent.semantic_ui .ui.striped.table tbody tr:nth-child(2n) td,
.bedrockenvironmental-nt .foo-table tbody tr:nth-child(even) td {
    background-color: var(--nt-row-alt) !important;
}

.footable_parent .foo-table tbody tr:nth-child(odd) td,
.footable_parent .ninja_table_pro tbody tr:nth-child(odd) td,
.footable_parent.semantic_ui .ui.table tbody tr:nth-child(odd) td,
.bedrockenvironmental-nt .foo-table tbody tr:nth-child(odd) td {
    background-color: var(--nt-cell-bg) !important;
}

.footable_parent .foo-table tbody tr:hover td,
.footable_parent .ninja_table_pro tbody tr:hover td,
.footable_parent.semantic_ui .ui.table tbody tr:hover td,
.footable_parent.semantic_ui .ui.table tr:hover td {
    background-color: inherit !important;
}

.footable_parent .foo-table tbody tr:nth-child(odd):hover td,
.footable_parent.semantic_ui .ui.table tbody tr:nth-child(odd):hover td,
.footable_parent.semantic_ui .ui.table tr:nth-child(odd):hover td {
    background-color: var(--nt-cell-bg) !important;
}

.footable_parent .foo-table tbody tr:nth-child(even):hover td,
.footable_parent.semantic_ui .ui.table tbody tr:nth-child(even):hover td,
.footable_parent.semantic_ui .ui.table tr:nth-child(even):hover td {
    background-color: var(--nt-row-alt) !important;
}

/*
 * Beat plugin + Semantic UI:
 *   .semantic_ui .ui.table tr td { border-top: 1px solid #C2C2C2 !important; }
 * Markup is usually .footable_parent.semantic_ui (same node), not a descendant.
 */
html body .footable_parent.semantic_ui .ui.table tr td,
html body .footable_parent.semantic_ui .ui.table tbody tr td,
html body .footable_parent .semantic_ui .ui.table tr td,
html body .footable_parent .foo-table tbody tr td,
html body .footable_parent .ninja_table_pro tbody tr td,
html body .bedrockenvironmental-nt.semantic_ui .ui.table tr td,
html body .bedrockenvironmental-nt .foo-table tbody tr td,
html body .semantic_ui .ui.table tr td {
    border-left: 0 none transparent !important;
    border-right: 0 none transparent !important;
    border-bottom: 0 none transparent !important;
    border-top: 1px solid #edf7ee !important;
    border-top-color: #edf7ee !important;
    border-color: #edf7ee !important;
    padding: 18px 24px !important;
    vertical-align: top !important;
    color: var(--nt-body-color) !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-body) !important;
    line-height: var(--line-height-body) !important;
}

html body .footable_parent.semantic_ui .ui.table tr td:first-child,
html body .footable_parent.semantic_ui .ui.celled.table tr td:first-child,
html body .semantic_ui .ui.celled.table tr td:first-child {
    border-left: 0 none transparent !important;
}

html body .footable_parent .foo-table tbody tr td:first-child,
html body .footable_parent.semantic_ui .ui.table tbody tr td:first-child {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

@media (max-width: 767px) {
    html body .footable_parent .foo-table thead th,
    html body .footable_parent.semantic_ui .ui.table thead th,
    html body .footable_parent .foo-table tbody tr td,
    html body .footable_parent.semantic_ui .ui.table tr td,
    html body .semantic_ui .ui.table tr td {
        padding: 14px 16px !important;
        font-size: var(--font-size-small) !important;
    }
}