/* Table Component Styles
 * Purpose: DataTables and table styling with responsive design
 * Extracted from style.css (Lines 1300-1500)
 */

/* Base table container styles */
.table-div {
    overflow-wrap: normal;
    word-break: normal;
    margin-top: 100px;
}

/* Shared dashboard table card shell (LTV, TBV, Commission Verification) */
.dashboard-table-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.dashboard-table-header {
    margin-bottom: 16px;
}

.dashboard-table-wrapper {
    /* Keep the wrapper visible so DataTables never forces an unnecessary horizontal scrollbar. */
    overflow-x: visible;
}

.dashboard-table {
    width: 100%;
}

.dashboard-table-footer {
    margin-top: 18px;
}

.dashboard-table-footnote {
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
}

.dashboard-empty-hint {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: #475569;
}

.dashboard-empty-hint.d-none {
    display: none;
}

/* Table notes above tables */
.table-notes {
    font-weight: 400;
    text-align: center;
    margin-top: 10px
}

/* Form controls in tables */
.form-select {
    font-size: 1.2rem
}

.form-control:focus,
.form-select:focus {
    border-color: #a8ffce;
    box-shadow: 0 0 0 0.25rem var(--color-green-transparent);
}

/* DataTables search input focus styling - ensure consistent behavior */
.dataTables_filter input:focus {
    border-color: #a8ffce;
    box-shadow: 0 0 0 0.25rem var(--color-green-transparent);
    outline: none;
    position: relative;
    z-index: 5;
}

/* Table container for coding examples */
.table-container-coding {
    max-width: 750px;
    /* Adjust this value as needed */
    margin: 0 auto;
    /* Centers the table container */
    overflow-x: visible;
    /* Only shows scrollbar when needed */
}

/* Base DataTable styles */
.table.dataTable {
    --bs-table-striped-bg: #0cf28f12;
    border-radius: 15px !important;
    overflow: hidden;
    border: 1px solid #dee2e6 !important;
    table-layout: fixed;
}

/* Table header styles */
.table.dataTable>thead>tr>th {
    padding: .7rem .5rem;
    text-transform: uppercase;
    background-color: hsl(200, 33%, 96%);
    color: hsl(200, 16%, 16%);
    font-size: 1.3rem;
    vertical-align: middle;
    table-layout: fixed;
    font-weight: 600
}

#top-clients-table>thead>tr>th {
    font-size: 1.2rem;
}

/* Table body styles */
.table>tbody {
    font-size: 1.3rem;
    font-family: Lato;
    font-weight: 400;
    font-weight: 500
}

/* Sorting arrows */
table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_asc:after {
    bottom: 0.5em
}

/* Table border radius adjustments */
/* top-left border-radius */
.table>tbody>tr:last-child>td,
.table>tbody>tr:last-child {
    border-bottom: 0px;
}

/* bottom-left border-radius */
.table>tbody>tr:last-child td:first-child {
    border-bottom-width: 0;
}

/* bottom-right border-radius */
.table>tbody>tr:last-child td:last-child {
    border-bottom-width: 0;
}

/* DataTables wrapper styles */
.dataTables_wrapper {
    overflow: visible !important;
}

.dataTables_wrapper .bottom.row {
    margin-top: 10px;
}

/* DataTables top row overflow fixes for box-shadow visibility */
.dataTables_wrapper .top.row {
    overflow: visible !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.dataTables_wrapper .top.row .col-sm-6 {
    overflow: visible !important;
}

/* DataTables filter container overflow fix */
.dataTables_filter {
    overflow: visible !important;
    padding: 3px !important;
    position: relative !important;
}

/* Table responsive container overflow fix for box-shadow visibility */
.table-responsive {
    overflow-y: visible !important;
    /* Allow vertical overflow for shadows */
    position: relative;
    z-index: 1;
}

/* DataTables bottom row layout (pagination, info) */
/* Set the entire row to use Flexbox */
.bottom.row {
    display: flex;
    /* Set the row as a flex container */
    align-items: center;
    /* Vertically center all direct children */
}

/* Align the content of the first two columns to the left */
.bottom .col-sm-2,
.bottom .col-sm-4 {
    display: flex;
    /* Set each column to flex */
    align-items: center;
    /* Vertically center the content */
    justify-content: flex-start;
    /* Align content to the left */
}

/* Align the content of the last column to the right */
.bottom .col-sm-6 {
    display: flex;
    /* Set this column to flex */
    align-items: center;
    /* Vertically center the content */
    justify-content: flex-end;
    /* Align content to the right */
}

.col-sm-4>div.dataTables_info {
    padding-top: 0 !important
}

/* Excel icon spacing */
.fa-file-excel-o {
    margin-left: 3px;
}

/* Table column width utilities */
#top-clients-table>thead>tr>th {
    width: 20%;
}

.table-three-col {
    width: 100%;
}

.table-three-col>thead>tr>th {
    width: 33%;
}

/* Pagination styles */
.page-link,
.page-link:hover,
.page-link:focus {
    color: var(--color-green-primary);
}

.page-link:focus {
    box-shadow: 0 0 0 0.25rem var(--color-green-transparent);
}

.page-item.active .page-link {
    background-color: var(--color-green-primary);
    border-color: var(--color-green-primary);
}

/* Responsive table styles */
@media (max-width: 767px) {

    /* Increase margins between pagination and search around tables on tablets and mobile*/
    /* Make table length label + search take half the row */
    div.dataTables_wrapper>div.row:first-child>div.col-sm-12 {
        width: 50%;
        margin: 15px 0
    }

    /* Around pagination */
    div.dataTables_wrapper div.dataTables_paginate>ul.pagination {
        margin-top: 15px
    }
}

@media (max-width: 576px) {

    /* Make table length label + search take the full row */
    div.dataTables_wrapper>div.row:first-child>div.col-sm-12 {
        width: 100%;
        margin: 10px 0
    }

    /* Make tables with MORE THAN three columns responsive on mobile */
    .table.dataTable:not(.table-three-col) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    /* Hide pagination buttons on mobile, and make previous and next button align */
    li.paginate_button {
        display: none;
    }

    li.paginate_button.previous {
        display: inline;
    }

    li.paginate_button.next {
        display: inline;
    }
}

@media (max-width: 425px) {

    /* Make tables with LESS THAN three columns responsive on mobile */
    .table-three-col.table.dataTable {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

@media (min-width: 1150px) and (max-width: 1400px) {
    .dataTables_wrapper .bottom.row {
        font-size: 0.9em
    }

    .bottom .col-sm-4 {
        justify-content: center;
    }
}

@media (min-width: 1200px) and (max-width: 1250px) {
    .dataTables_wrapper .bottom.row {
        font-size: 0.8em
    }
}

/* Table Footer Mobile Overflow Fix - Stack footer into two rows for tablets/mobile */
@media (max-width: 1149px) {

    /* Stack footer into two rows using flexbox */
    .dataTables_wrapper .bottom.row {
        flex-wrap: wrap;
        margin-top: 15px;
        gap: 20px;
        /* Controlled spacing between elements */
        justify-content: center;
        /* Center the row content */
    }

    /* First row: Export button + info text with auto sizing and center alignment */
    .bottom .col-sm-2 {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
        justify-content: center;
        padding: 0 10px;
    }

    .bottom .col-sm-4 {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
        margin-bottom: 5px;
        justify-content: center;
        padding: 0 10px;
        text-align: center;
    }

    /* Second row: Pagination takes full width */
    .bottom .col-sm-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
    }

    /* Larger export button for better touch targets */
    .bottom .dt-button {
        padding: 12px 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* Larger pagination links for better mobile interaction */
    .dataTables_paginate .page-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 15px;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Add spacing between pagination items */
    .dataTables_paginate .page-item {
        margin: 0 3px;
    }

    /* Hide "First" and "Last" buttons on mobile to save space */
    .dataTables_paginate .first,
    .dataTables_paginate .last {
        display: none;
    }

    /* Make pagination list horizontal and centered */
    .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Ensure export button icon has proper spacing */
    .dt-button .fa {
        margin-left: 5px;
    }
}

/* Duplicate entry indicator styling for large balance table */
.duplicate-entry-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    color: #9ca3af;
    cursor: help;
}

.duplicate-entry-icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* Fine-tune for very small screens */
@media (max-width: 576px) {

    .dataTables_wrapper .bottom.row {
        gap: 10px
    }

    /* Stack export button and info text vertically on very small screens */
    .bottom .col-sm-2,
    .bottom .col-sm-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0;
        margin-bottom: 0
    }

    /* Center export button on mobile */
    .bottom .dt-buttons {
        display: flex;
        justify-content: center;
    }

    /* Further reduce pagination for very small screens */
    .dataTables_paginate .page-link {
        min-width: 40px;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Reduce margin between pagination items on small screens */
    .dataTables_paginate .page-item {
        margin: 0 2px;
    }

    /* Hide ellipsis on very small screens */
    .dataTables_paginate .disabled {
        display: none;
    }
}