/*---*\
Ninja Tables and WYSIWYG tables
Shared chrome for plugin tables and native editor tables.

KEY FEATURES:
- Navy search and header rows
- Theme search icon in the filter field (no button chrome)
- Alternating green-tint body rows
- Mobile horizontal scroll with a navy pill scrollbar
- Left and right green strokes stay visible while scrolling

IMPLEMENTATION NOTES:
- Plugin defaults live in plugins/ninja-tables.css and use !important
- Footable search button keeps markup but uses viaflex-icons icon-search
- .table-scroll is wrapped around native WYSIWYG tables in wysiwyg.js
\*---*/

.footable_parent,
.table-scroll {
    margin: 0 0 60px 0;
    border-left: 1px solid var(--color-secondary-8);
    border-right: 1px solid var(--color-secondary-8);
    scrollbar-color: var(--color-primary) var(--color-off-white);
    scrollbar-width: thin;
}

.footable_parent::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.footable_parent::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
    background: var(--color-off-white);
    border-radius: 0;
}

.footable_parent::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    border: 3.5px solid var(--color-off-white);
}

.foo-table,
.table-scroll table,
.wysiwyg table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    color: var(--color-paragraph);
    background-color: var(--color-white);
}

.foo-table thead tr.footable-filtering th,
.footable_parent .footable-filtering th {
    padding: 13px 11px !important;
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: 0 !important;
    text-align: right;
}

.foo-table thead tr.footable-filtering .form-group,
.footable_parent .footable-filtering .form-group {
    display: inline-flex;
    justify-content: flex-end;
    width: auto;
    max-width: 229px;
    margin: 0 0 0 auto;
}

.foo-table thead tr.footable-filtering .input-group,
.footable_parent .footable-filtering .input-group {
    display: flex;
    align-items: stretch;
    width: 229px;
    overflow: hidden;
    border-radius: 0;
    background-color: var(--color-white);
}

.foo-table thead tr.footable-filtering .input-group-btn,
.footable_parent .footable-filtering .input-group-btn {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    width: auto;
    font-size: 0;
}

.foo-table thead tr.footable-filtering input,
.footable_parent .footable-filtering input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 9px 13px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    color: var(--color-paragraph);
    background-color: var(--color-white);
}

.foo-table thead tr.footable-filtering input::placeholder,
.footable_parent .footable-filtering input::placeholder {
    color: var(--color-paragraph);
}

.foo-table thead tr.footable-filtering input:focus-visible,
.footable_parent .footable-filtering input:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.foo-table thead tr.footable-filtering .input-group-btn .btn,
.footable_parent .footable-filtering .input-group-btn .btn,
.foo-table thead tr.footable-filtering .input-group-btn .btn + .btn,
.footable_parent .footable-filtering .input-group-btn .btn + .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    min-width: 40px;
    height: auto;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--color-white) !important;
    color: var(--color-secondary-hover) !important;
    font-size: 0 !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;

    &::after {
        display: none;
    }
}

.footable_parent ul li, 
.footable_parent ul ol {
    color: var(--color-heading)!important;

    &::before {
        color: var(--color-secondary);
    }
}

.footable_parent tr td a {
    color: var(--color-link);
    font-weight: var(--font-weight-semibold);
    word-break: break-word;

    &:hover {
        color: var(--color-link-hover);
    }
}

.foo-table thead tr.footable-filtering .input-group-btn .btn:hover,
.foo-table thead tr.footable-filtering .input-group-btn .btn:focus,
.foo-table thead tr.footable-filtering .input-group-btn .btn:active,
.foo-table thead tr.footable-filtering .input-group-btn .btn-primary:hover,
.footable_parent .footable-filtering .input-group-btn .btn:hover,
.footable_parent .footable-filtering .input-group-btn .btn:focus,
.footable_parent .footable-filtering .input-group-btn .btn:active,
.footable_parent .footable-filtering .input-group-btn .btn-primary:hover {
    background-color: var(--color-white) !important;
    color: var(--color-secondary-hover) !important;
    box-shadow: none !important;
}

.bg-dark .foo-table thead tr.footable-filtering th, .footable_parent .footable-filtering th {
    background-color: var(--color-secondary)!important;
}

.foo-table thead tr.footable-filtering .input-group-btn .btn:focus-visible,
.footable_parent .footable-filtering .input-group-btn .btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

.foo-table thead tr.footable-filtering .input-group-btn .btn .fooicon,
.footable_parent .footable-filtering .input-group-btn .btn .fooicon {
    position: static;
    top: 0;
    display: block;
    font-family: "viaflex-icons" !important;
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: var(--color-secondary-hover);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.foo-table thead tr.footable-filtering .input-group-btn .btn .fooicon-search:before,
.footable_parent .footable-filtering .input-group-btn .btn .fooicon-search:before {
    content: "\f10d";
}

.foo-table thead tr.footable-filtering .input-group-btn .btn .fooicon-remove:before,
.footable_parent .footable-filtering .input-group-btn .btn .fooicon-remove:before {
    content: "\f12c";
}

.foo-table thead tr.footable-filtering .input-group-btn .dropdown-toggle,
.footable_parent .footable-filtering .input-group-btn .dropdown-toggle {
    width: auto;
    min-width: 0;
    padding: 9px 13px !important;
    color: var(--color-paragraph) !important;
}

.foo-table thead tr.footable-filtering .input-group-btn .dropdown-toggle .caret,
.footable_parent .footable-filtering .input-group-btn .dropdown-toggle .caret {
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    border-top: 4px solid var(--color-paragraph);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.foo-table thead tr.footable-header th,
.foo-table thead th,
.table-scroll thead th,
.wysiwyg table thead th {
    padding: 12px 11px !important;
    background-color: var(--color-primary-hover) !important;
    color: var(--color-text-inverse) !important;
    border: 0 !important;
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    text-align: left;
}

.foo-table tbody tr td,
.semantic_ui .ui.table tr td,
.table-scroll tbody td,
.wysiwyg table tbody td {
    padding: 10px 11px !important;
    border: 0 !important;
    background-color: transparent;
}

.foo-table tbody tr:nth-child(odd),
.table-scroll tbody tr:nth-child(odd),
.wysiwyg table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.foo-table tbody tr:nth-child(even),
.semantic_ui .ui.striped.table tbody tr:nth-child(2n),
.table-scroll tbody tr:nth-child(even),
.wysiwyg table tbody tr:nth-child(even) {
    background-color: var(--color-secondary-8) !important;
}

.foo-table tbody tr:last-child td,
.table-scroll tbody tr:last-child td,
.wysiwyg table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 767px) {
    .footable_parent,
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-color: var(--color-link-inverse);
        margin-top: 30px;
    }

    .foo-table,
    .table-scroll table,
    .wysiwyg table {
        min-width: 704px;
        width: max-content;
    }
}

@media (min-width: 768px) {
    .footable_parent,
    .table-scroll {
        overflow-x: visible;
        border-color: var(--color-secondary-8);
    }

    .foo-table tbody tr:nth-child(odd),
    .table-scroll tbody tr:nth-child(odd),
    .wysiwyg table tbody tr:nth-child(odd) {
        box-shadow: inset 1px 0 0 var(--color-secondary-8), inset -1px 0 0 var(--color-secondary-8);
    }
}