/* productTables.css
 * Styling for the rebuilt eligible / non-eligible product tables
 * (bootstrap-table), made to resemble the native Caspio result table:
 * orange header, white column-sort icons, responsive with a card layout on
 * mobile. Applied via the "cb-native-table" class set in productTables.js.
 */

.cb-native-table {
    margin-bottom: 0;
}

/* --- Loading progress bar (shown while the list is page-walked) ---------- */
.pt-loading {
    max-width: 480px;
    margin: 0 auto;
}

.pt-loading-progress {
    height: 10px;
    border-radius: 4px;
    max-width: 420px;
}

/* Brand-orange fill to match the table header. The width transition makes each
   step — the DP-loading trickle, each walked page, and the final render band —
   glide rather than jump. */
.pt-loading-progress .progress-bar {
    background-color: #fdb827;
    transition: width 0.3s ease;
}

/* --- Empty state (shown when no search has been run) -------------------- */
.pt-empty {
    color: #b7b9cc;
}

.pt-empty i {
    opacity: 0.6;
}

/* Orange header with white bold labels. */
.cb-native-table thead th {
    background: #fdb827 !important;
    color: #fff !important;
    font-weight: 700;
    border: none !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* Clean rows: white background, black text, bottom border only per row. */
.cb-native-table tbody td {
    background: #fff;
    color: #000;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #e3e6f0;
}

/* Centered record count ("Records 1-25 of 134") — page-size dropdown stays on
   the left, page navigation on the right, count centered between them. */
#eligible-table-container .fixed-table-pagination,
#non-eligible-table-container .fixed-table-pagination {
    position: relative;
    margin-top: 15px;
}

#eligible-table-container .fixed-table-pagination .pagination-info,
#non-eligible-table-container .fixed-table-pagination .pagination-info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #000;
}

/* --- Orange pagination controls ----------------------------------------- */
/* Page-number buttons: orange text, orange fill on the active/hovered page. */
#eligible-table-container .fixed-table-pagination .pagination .page-link,
#non-eligible-table-container .fixed-table-pagination .pagination .page-link {
    color: #b3801a;
}

#eligible-table-container .fixed-table-pagination .pagination .page-item.active .page-link,
#non-eligible-table-container .fixed-table-pagination .pagination .page-item.active .page-link {
    background-color: #fdb827;
    border-color: #fdb827;
    color: #fff;
}

#eligible-table-container .fixed-table-pagination .pagination .page-link:hover,
#non-eligible-table-container .fixed-table-pagination .pagination .page-link:hover {
    background-color: #fff3d6;
    color: #b3801a;
}

#eligible-table-container .fixed-table-pagination .pagination .page-link:focus,
#non-eligible-table-container .fixed-table-pagination .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(253, 184, 39, 0.35);
}

/* Page-size dropdown ("25 / 50 / 100 …") button + its selected menu item. */
#eligible-table-container .fixed-table-pagination .page-list .btn,
#non-eligible-table-container .fixed-table-pagination .page-list .btn {
    background-color: #fdb827;
    border-color: #fdb827;
    color: #fff;
}

#eligible-table-container .fixed-table-pagination .page-list .btn:focus,
#non-eligible-table-container .fixed-table-pagination .page-list .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(253, 184, 39, 0.35);
}

#eligible-table-container .fixed-table-pagination .page-list .dropdown-menu .dropdown-item.active,
#non-eligible-table-container .fixed-table-pagination .page-list .dropdown-menu .dropdown-item.active {
    background-color: #fdb827;
    color: #fff;
}

/* --- White column-sort icons -------------------------------------------- */
/* The default bootstrap-table carets are dark and disappear on the orange
   header, so override the three sort states with white SVG carets. */
.cb-native-table thead th .sortable {
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
    padding-right: 1.75rem !important;
}

.cb-native-table thead th .both {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6.5l4-4 4 4z'/%3E%3Cpath fill='%23ffffff' d='M4 9.5l4 4 4-4z'/%3E%3C/svg%3E") !important;
}

.cb-native-table thead th .asc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 10l4-5 4 5z'/%3E%3C/svg%3E") !important;
}

.cb-native-table thead th .desc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6l4 5 4-5z'/%3E%3C/svg%3E") !important;
}

/* --- Responsive / mobile card layout ------------------------------------ */
/* On desktop the wide table scrolls horizontally within its container. */
#eligible-table-container .fixed-table-body,
#non-eligible-table-container .fixed-table-body {
    overflow-x: auto;
}

/* bootstrap-table-mobile switches to card view below minWidth (768px). Polish
   the card cells so each field reads as "Label: value". */
@media (max-width: 767.98px) {
    .cb-native-table .card-view {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.35rem 0.5rem;
        border-bottom: 1px solid #f2f2f2;
    }

    .cb-native-table .card-view .title {
        font-weight: 700;
        color: #000;
        white-space: nowrap;
    }

    .cb-native-table .card-view .value {
        text-align: right;
        word-break: break-word;
    }

    /* Let the record count flow normally (centered) when controls stack. */
    #eligible-table-container .fixed-table-pagination .pagination-info,
    #non-eligible-table-container .fixed-table-pagination .pagination-info {
        position: static;
        transform: none;
        display: block;
        text-align: center;
        width: 100%;
    }
}