/* =========================================================
   Eagle Table Lite
   Native table controls for Eagle Asset Manager.
   ========================================================= */
.tl-host,
.tl {
    position: relative;
    width: 100%;
    max-width: 100%;
    clear: both;
    font-size: .718rem;
}

.tl-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.tl-toolbar-left {
    justify-self: start;
}

.tl-toolbar-center {
    justify-self: center;
}

.tl-toolbar-right {
    justify-self: end;
}

.tl-length,
.tl-search {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.tl-label {
    font-size: .65rem;
    color: #404040;
    white-space: nowrap;
}

.tl-input,
.tl-select {
    height: 27px;
    padding: .25rem .4rem;
    border: 1px solid #ced4da;
    border-radius: 0;
    background: #fff;
    color: #404040;
    font-family: Arial, sans-serif;
    font-size: .718rem;
    outline: 0;
}

.tl-input {
    min-width: 175px;
}

.tl-select {
    min-width: 62px;
}

.tl-input:focus,
.tl-select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 .12rem rgba(52, 152, 219, .12);
}

.tl-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem;
}

/* =========================================================
   Scroll container
   ========================================================= */
.tl-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.tl-scroll table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.tl-scroll thead th {
    position: relative;
    padding-right: 18px;
    border-bottom: 1px solid #737373;
    white-space: nowrap;
    user-select: none;
}

.tl-scroll tbody td {
    vertical-align: middle;
}

.tl-sortable {
    cursor: pointer;
}

.tl-sortable::after {
    content: '\2195';
    position: absolute;
    right: 4px;
    opacity: .25;
}

.tl-sortable.tl-sort-asc::after {
    content: '\2191';
    opacity: .8;
    color: #3498db;
}

.tl-sortable.tl-sort-desc::after {
    content: '\2193';
    opacity: .8;
    color: #3498db;
}

/* =========================================================
   Footer / paging
   ========================================================= */
.tl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .5rem;
}

.tl-pager {
    display: inline-flex;
    align-items: center;
}

.tl-page-btn,
.tl-page {
    min-width: 28px;
    height: 27px;
    padding: .2rem .4rem;
    border: 1px solid #dee2e6;
    border-radius: 0;
    background: #fff;
    color: #3498db;
    font-family: Arial, sans-serif;
    font-size: .65rem;
    line-height: 1;
    text-align: center;
}

.tl-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    border-left: 0;
    border-right: 0;
    color: #404040;
}

.tl-page-btn {
    cursor: pointer;
}

.tl-page-btn:hover:not(:disabled) {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.tl-page-btn:disabled {
    color: #999;
    cursor: default;
    opacity: .6;
}

/* =========================================================
   Stable column geometry
   ========================================================= */
.tl-scroll table.tl-layout-locked {
    table-layout: fixed;
}

.tl-scroll table.tl-layout-locked th,
.tl-scroll table.tl-layout-locked td {
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* Action/button cells should stay usable without forcing
   neighbouring columns to resize. */
.tl-scroll table.tl-layout-locked td .btn-group,
.tl-scroll table.tl-layout-locked td .btn {
    max-width: 100%;
}

/* =========================================================
   Mobile responsiveness
   ========================================================= */
@media (max-width: 767.98px) {

    .tl-host,
    .tl {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    /* Stack the controls vertically on phones. */
    .tl-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        width: 100%;
    }

    .tl-toolbar-left,
    .tl-toolbar-center,
    .tl-toolbar-right {
        width: 100%;
        justify-self: stretch;
    }

    .tl-toolbar-left,
    .tl-toolbar-center,
    .tl-toolbar-right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .tl-length {
        width: 100%;
        justify-content: flex-start;
    }

    .tl-search {
        width: 100%;
        display: flex;
    }

    .tl-search .tl-label {
        flex: 0 0 auto;
    }

    .tl-input {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .tl-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .tl-buttons .btn,
    .tl-buttons button {
        margin-bottom: .15rem;
    }

    /*
     * Do not squeeze all table columns into the phone width.
     * Keep a sensible table width and allow finger scrolling.
     */
    .tl-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .tl-scroll table,
    .tl-scroll table.tl-layout-locked {
        width: max-content !important;
        min-width: 760px;
        table-layout: fixed;
    }

    .tl-scroll table th,
    .tl-scroll table td,
    .tl-scroll table.tl-layout-locked th,
    .tl-scroll table.tl-layout-locked td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Buttons / actions must remain visible in narrow cells. */
    .tl-scroll table td .btn,
    .tl-scroll table td .btn-group {
        white-space: nowrap;
    }

    /* Stack information and pager under the table. */
    .tl-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .tl-footer .tl-label {
        width: 100%;
        text-align: left;
    }

    .tl-pager {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr auto 1fr 1fr;
        align-items: center;
        gap: 0;
    }

    .tl-page-btn,
    .tl-page {
        width: 100%;
        min-width: 0;
    }

    .tl-page {
        border-left: 0;
        border-right: 0;
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

/* Very small phones */
@media (max-width: 420px) {

    .tl-scroll table,
    .tl-scroll table.tl-layout-locked {
        min-width: 680px;
    }

    .tl-toolbar-left,
    .tl-toolbar-center,
    .tl-toolbar-right {
        flex-wrap: wrap;
    }

    .tl-pager {
        grid-template-columns: 1fr 1fr;
        gap: .25rem;
    }

    .tl-page {
        grid-column: 1 / -1;
        grid-row: 1;
        border: 1px solid #dee2e6;
    }
}
tl-scroll table.tl-layout-locked th,
.tl-scroll table.tl-layout-locked td {
    box-sizing: border-box;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    overflow-wrap: normal;
    word-break: normal;

    max-width: 0;
}
/* Keep short action/header columns readable */
.tl-scroll table.tl-layout-locked th:first-child,
.tl-scroll table.tl-layout-locked td:first-child {
    min-width: 60px;
    max-width: 60px;
}

/* If your second column is the EagleGuard/icon column */
.tl-scroll table.tl-layout-locked th:nth-child(2),
.tl-scroll table.tl-layout-locked td:nth-child(2) {
    min-width: 55px;
    max-width: 55px;
}