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

    Add custom Ninka tables styling to this file if it should be applied to all Ninja tables on the site
    Otherwise, put your styles in individual block stylesheets

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

/* Table Container */
.footable_parent {
    margin: 30px 0;
    overflow-x: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
}

/* Main Table Styling */
.foo-table {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    margin: 0 !important;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Table Header */
.foo-table thead th {
    background: var(--color-purple) !important;
    color: var(--color-white) !important;
    font-family: var(--font-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
    border: none !important;
    text-align: left;
    position: relative;
}

.foo-table thead th:first-child {
    border-top-left-radius: var(--border-radius) !important;
}

.foo-table thead th:last-child {
    border-top-right-radius: var(--border-radius) !important;
}

/* Header border accent */
.foo-table thead tr {
    border-bottom: 3px solid transparent !important;
    background: var(--gradient-gold) !important;
}

/* Table Body */
.foo-table tbody tr td {
    padding: 16px 24px !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-body) !important;
    font-size: 16px !important;
    line-height: var(--line-height-normal) !important;
    vertical-align: middle;
}

.foo-table tbody tr:last-child td {
    border-bottom: none !important;
}

.foo-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius) !important;
}

.foo-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius) !important;
}

/* Striped Rows */
.semantic_ui .ui.striped.table > tr:nth-child(2n),
.semantic_ui .ui.striped.table tbody tr:nth-child(2n),
.foo-table.striped tbody tr:nth-child(2n) {
    background-color: var(--color-bg-light-purple) !important;
}

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

/* Hover Effect */
.foo-table.selectable tbody tr:hover {
    background-color: var(--color-bg-cream) !important;
}

/* Remove left border on cells */
.semantic_ui .ui.celled.table tr td:first-child,
.semantic_ui .ui.celled.table tr th:first-child {
    border-left: none !important;
}

.semantic_ui .ui.table tr td {
    border-top: 1px solid var(--color-border) !important;
}

/* Search Input Styling */
.footable-filtering .form-inline {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.footable-filtering input[type="text"],
.footable-filtering .form-control {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-bg-light-purple) !important;
    color: var(--color-text-dark) !important;
    min-width: 250px;
    transition: var(--transition-default);
}

.footable-filtering input[type="text"]:focus,
.footable-filtering .form-control:focus {
    outline: none !important;
    border-color: var(--color-purple) !important;
    border-left: 3px solid var(--color-purple) !important;
}

.footable-filtering input[type="text"]::placeholder,
.footable-filtering .form-control::placeholder {
    color: var(--color-text-body);
    opacity: 0.6;
}

/* Pagination Styling */
.footable-paging .pagination {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

.footable-paging .pagination li a,
.footable-paging .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition-default);
}

.footable-paging .pagination li a:hover {
    background: var(--color-bg-cream);
    border-color: var(--color-gold);
}

.footable-paging .pagination li.active a,
.footable-paging .pagination li.active span {
    background: var(--gradient-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
}

.footable-paging .pagination li.disabled a,
.footable-paging .pagination li.disabled span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom Scrollbar */
.footable_parent::-webkit-scrollbar {
    height: 8px;
}

.footable_parent::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
    border-radius: var(--border-radius);
}

.footable_parent::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--border-radius);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .foo-table thead th {
        font-size: 20px !important;
        padding: 20px 26px !important;
    }

    .foo-table tbody tr td {
        font-size: 18px !important;
        padding: 18px 26px !important;
    }
}

/* Links within table cells */
.foo-table tbody tr td a {
    color: var(--color-purple);
    font-weight: 700;
    border-bottom: 2px solid;
    border-image: var(--gradient-gold) 1;
    background: linear-gradient(to bottom, rgba(246, 212, 120, 0.25) 0%, rgba(246, 212, 120, 0.25) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 0;
    transition: background-size 0.2s;
}

@media (min-width: 1200px) {
    .foo-table tbody tr td a:hover {
        background-size: 4px 10px;
    }
}