/* --- Table Container (scroll on small screens) --- */
.table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--data-table-border, #333);
    background: var(--data-table-panel-bg, #1e1e1e);
}

    .table-wrapper.scrollable {
        max-height: 400px; /* or whatever height you want */
        overflow-y: auto;
    }
/* --- Base Table --- */
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--data-table-text, #e0e0e0);
}

    table.data-table.contentfit {
        width: auto;
    }
        table.data-table.contentfit thead th {
            padding: 0.25rem .5rem;
        }


    table.data-table thead th {
        background: var(--data-table-header-bg, #2a2a2a);
        color: var(--data-table-header-text, #fff);
        text-align: left;
        padding: 0.25rem .5rem;
        font-weight: 600;
        border-bottom: 1px solid var(--data-table-border, #333);
        white-space: nowrap;
        position: relative;
    }

        table.data-table thead th.sort:hover {
            background: var(--data-table-hover-bg, #333);
            cursor: pointer;
        }
        table.data-table thead th.sticky {
            position: sticky;
            top: 0;
            z-index: 5;
            backdrop-filter: blur(4px);
        }


        table.data-table thead th.large {
            padding: 0.75rem 1rem;
        }


        table.data-table thead th::after {
            content: "";
            position: absolute;
            right: .2rem;
            opacity: 0.4;
            color: var(--sort-indicator);
        }

        table.data-table thead th.sort-asc::after {
            content: "▲";
            font-size: 0.75rem;
            opacity: 1;
            color: var(--sort-indicator-active);
        }

        table.data-table thead th.sort-desc::after {
            content: "▼";
            font-size: 0.75rem;
            opacity: 1;
            color: var(--sort-indicator-active);
        }

    table.data-table tbody td {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--data-table-border, #333);
    }
    table.data-table tbody tr.track:hover {
        background: var(--data-table-hover-bg, #333);
    }
    table.data-table.striped tbody tr:nth-child(odd) {
        background: var(--data-table-row-alt, #252525);
    }
    table.data-table.compact tbody td,
    table.data-table.compact thead th {
        padding: 0.45rem 0.75rem;
    }

.data-table tbody td.fit,
.data-table thead th.fit {
    white-space: nowrap;
    width: 1% !important;
    padding: 0px 1px 0px 1px !important;
}
.data-table tbody td.fitflex,
.data-table thead th.fitflex {
    white-space: nowrap;
    width: 1%;
    padding: 0px 1px 0px 1px !important;
    display: flex;
    gap: 2px;
    align-items: center;
}
.data-table .select-row {
    cursor: pointer;
}
/* --- Rounded Corners --- */
.table-wrapper table.data-table {
    border-radius: 8px;
    overflow: hidden;
}


table.data-table tbody tr.clickable {
    cursor: pointer;
}

    table.data-table tbody tr.clickable:hover {
        background: var(--data-table-hover-bg);
    }

/* --- Pagination Container --- */
.pagination {
    display: flex;
    gap: 0.4rem;
    padding: 1rem 0;
    justify-content: center;
    align-items: center;
}

    /* --- Pagination Buttons --- */
    .pagination button {
        background: var(--pagination-bg);
        color: var(--pagination-text);
        border: 1px solid var(--pagination-border);
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background 0.2s, color 0.2s;
    }

        .pagination button:hover {
            background: var(--pagination-active-bg);
            color: var(--pagination-active-text);
        }

        /* --- Active Page --- */
        .pagination button.active {
            background: var(--pagination-active-bg);
            color: var(--pagination-active-text);
            border-color: var(--pagination-active-bg);
        }



table.simple-table {
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--data-table-text, #e0e0e0);
}

    table.simple-table thead th {
        background: var(--data-table-header-bg, #2a2a2a);
        color: var(--data-table-header-text, #fff);
        text-align: left;
        padding: 0.25rem .5rem;
        font-weight: 600;
        border-bottom: 1px solid var(--data-table-border, #333);
        white-space: nowrap;
        cursor: pointer;
        position: relative;
    }

    table.simple-table tbody td {
        padding: 0.25rem .5rem;
        border-bottom: 1px solid var(--data-table-border, #333);
    }
    table.simple-table.noborder tbody td {
        border-bottom: 0px;
    }

    /* --- Striped Rows (optional) --- */
    table.simple-table.striped tbody tr:nth-child(odd) {
        background: var(--data-table-row-alt, #252525);
    }

    /* --- Compact Mode (optional) --- */
    table.simple-table.compact td,
    table.simple-table.compact th {
        padding: 0.15rem 0.25rem;
    }

    table.simple-table.hidelastrow tbody tr:last-child td {
        border-bottom: none;
    }
/* Viewer container */
.text-viewer {
    background: var(--viewer-bg);
    border: 1px solid var(--viewer-border);
    border-radius: .5rem;
    padding: .5rem;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
}

/* Table layout */
.text-table {
    width: 100%;
    border-collapse: collapse;
}

.line {
    color: var(--viewer-text);
}
    .line.highlight {
        background: var(--banner-bg);
        color: var(--banner-title);
    }

        .line.highlight .line-num,
        .line.highlight .line-text {
            background: var(--banner-bg);
            color: var(--banner-title);
        }

.line-num {
    user-select: none;
    text-align: right;
    padding: 0 .75rem;
    color: var(--viewer-border);
    width: 3rem;
    border-right: 1px solid var(--viewer-border);
}

.line-text {
    padding: 0 .5rem;
    white-space: pre;
}

/* Highlight types */
.highlight-info .line-text {
    background: var(--highlight-info-bg);
    color: var(--highlight-info-text);
}

.highlight-warn .line-text {
    background: var(--highlight-warn-bg);
    color: var(--highlight-warn-text);
}

.highlight-error .line-text {
    background: var(--highlight-error-bg);
    color: var(--highlight-error-text);
}