/*------------------------------------*\
    
    WebFX Ninja Tables Customizations - Global Styling for Responsive Tables

    Markup reference:
    <div class="footable_parent ninja_table_wrapper … semantic_ui">
      <table class="foo-table ninja_footable … ui table … striped …">

    Add block-specific overrides in individual block stylesheets if needed.

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

/* ----- Wrapper + horizontal scroll ----- */

.footable_parent.ninja_table_wrapper {
    margin-top: var(--space-paragraph);
    margin-bottom: var(--space-paragraph);
    scrollbar-color: var(--color-neutral-dusty-blue) var(--color-neutral-off-white);
    scrollbar-width: thin;
}

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

.footable_parent.ninja_table_wrapper::-webkit-scrollbar-track {
    background: var(--color-neutral-off-white);
    border-radius: 10px;
}

.footable_parent.ninja_table_wrapper::-webkit-scrollbar-thumb {
    background: var(--color-neutral-dusty-blue);
    border-radius: 10px;
}

/* ----- Table shell (radius + card shadow like design system) ----- */

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table {
    font-family: var(--font-body) !important;
    font-size: var(--font-size-paragraph) !important;
    line-height: var(--line-height-paragraph) !important;
    font-weight: 400 !important;
    color: var(--color-paragraph) !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--border-color-subtle) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-card) !important;
    background: #f2f2f2 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}

/* Plugin forces 0 radius on corner cells; rounding comes from table overflow */
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead tr:first-child > th:first-child,
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead tr:first-child > th:last-child {
    border-radius: 0 !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table tbody td,
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead th {
    vertical-align: middle !important;
}

/* ----- Header row ----- */

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead tr.footable-header th,
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead th {
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-h6) !important;
    font-weight: 700 !important;
    line-height: var(--line-height-h6) !important;
    text-align: left !important;
    background: #f2f2f2 !important;
    color: var(--color-heading) !important;
    border-top: none !important;
    border-left: 1px solid var(--border-color-subtle) !important;
    border-bottom: 1px solid var(--border-color-subtle) !important;
    border-right: none !important;
    padding: 1rem 1.25rem !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead tr.footable-header th:first-child,
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead th:first-child {
    border-left: none !important;
}

/* ----- Body cells ----- */

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table tbody td {
    border-top: 1px solid var(--border-color-subtle) !important;
    border-left: 1px solid var(--border-color-subtle) !important;
    border-right: none !important;
    border-bottom: none !important;
    color: var(--color-paragraph) !important;
    padding: 0.875rem 1.25rem !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table tbody td:first-child {
    border-left: none !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table tbody tr:first-child td {
    border-top: none !important;
}

/* ----- Striped rows (odd = white, even = off-white) ----- */

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped tbody tr:nth-child(odd),
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped > tbody > tr:nth-child(odd) {
    background-color: var(--color-white) !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped tbody tr:nth-child(even),
.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped > tbody > tr:nth-child(even) {
    background-color: var(--color-neutral-off-white) !important;
}

/* Semantic / plugin alternate selectors */
.footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table tbody tr:nth-child(odd) {
    background-color: var(--color-white) !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table tbody tr:nth-child(even) {
    background-color: var(--color-neutral-off-white) !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table > tr:nth-child(odd) {
    background-color: var(--color-white) !important;
}

.footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table > tr:nth-child(even) {
    background-color: var(--color-neutral-off-white) !important;
}

/* ----- Links (light context) ----- */

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table a:hover {
    color: var(--color-primary-hover);
}

/* ----- Footable pagination bar (when present) ----- */

.footable_parent.ninja_table_wrapper.semantic_ui .footable-pagination-wrapper,
.footable_parent.ninja_table_wrapper.semantic_ui ul.pagination {
    font-family: var(--font-body) !important;
    font-size: var(--font-size-paragraph) !important;
    margin-top: 1rem !important;
}

/* =============================================================================
   Dark sections: ancestor `.bg-dark` (e.g. WYSIWYG background)
   ============================================================================= */

.bg-dark .footable_parent.ninja_table_wrapper {
    scrollbar-color: color-mix(in srgb, var(--color-white) 35%, transparent) color-mix(in srgb, var(--color-white) 8%, transparent);
}

.bg-dark .footable_parent.ninja_table_wrapper::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
}

.bg-dark .footable_parent.ninja_table_wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-white) 35%, transparent);
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table {
    border-color: color-mix(in srgb, var(--color-white) 22%, transparent) !important;
    box-shadow: none !important;
    background-color: color-mix(in srgb, var(--color-neutral-darkest) 25%, transparent) !important;
    color: var(--color-text-inverse) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead tr.footable-header th,
.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table thead th {
    background: color-mix(in srgb, var(--color-white) 10%, transparent) !important;
    color: var(--color-text-inverse) !important;
    border-left-color: color-mix(in srgb, var(--color-white) 18%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--color-white) 22%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table tbody td {
    color: var(--color-text-inverse) !important;
    border-top-color: color-mix(in srgb, var(--color-white) 15%, transparent) !important;
    border-left-color: color-mix(in srgb, var(--color-white) 12%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped tbody tr:nth-child(odd),
.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped > tbody > tr:nth-child(odd) {
    background-color: color-mix(in srgb, var(--color-white) 4%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped tbody tr:nth-child(even),
.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table.striped > tbody > tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--color-white) 10%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table tbody tr:nth-child(odd) {
    background-color: color-mix(in srgb, var(--color-white) 4%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui .ui.striped.table tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--color-white) 10%, transparent) !important;
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table a {
    color: var(--color-neutral-gold);
}

.bg-dark .footable_parent.ninja_table_wrapper.semantic_ui table.foo-table.ui.table a:hover {
    color: var(--color-white);
}