/* =====================================
   TABLE COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Overview Table Base ============= */
    /* Overview Table Container */
    .overview-table, .tabulator{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--table-radius);

        overflow: hidden;
    }

    /* ============= Table Headers ============= */
    /* Table Header Cells */
    .overview-table th, .tabulator-header .tabulator-col{
        background-color: var(--surface-third);
        border: 1px solid var(--border);
        border-left: none;
        border-top: none;

        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        color: var(--foreground-second) !important;
    }

    .overview-table th{
        padding: 12px 10px 9px 10px !important;
    }

    .tabulator-header .tabulator-col{
        padding: 0px !important;
    }

    .tabulator-col-content{
        height: 100%;
        width: 100%;
        display: inline-flex !important;
        align-items: center !important;
    }

    .tabulator-col-title-holder{
        width: 100%;
    }

    table th .ui-icon{
        margin-left: 8px;
        color: var(--foreground-second) !important;
    }

    /* First Header Cell Corner */
    .overview-table th:first-child, .tabulator-header .tabulator-col:first-child{
        border-top-left-radius: var(--table-radius);
    }

    /* Last Header Cell Corner */
    .overview-table th:last-child, .tabulator-header .tabulator-col:last-child{
        border-right: none;
        border-top-right-radius: var(--table-radius);
    }

    .tableHeading{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-bottom: none;
        border-top-left-radius: var(--table-radius);
        border-top-right-radius: var(--table-radius);
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;
        padding: 8px 10px;
    }

    .newTableHeading{
        background-color: var(--surface-primary) !important;
        border: none;
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;

    }

    .newTableHeading .title{
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;
    }

    .tableHeading + table{
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .tableHeading + table th{
        border-radius: 0 !important;
    }

    .tableHeading + table th > .ui-icon {
        position: relative;
    }


    /* ============= Table Data Cells ============= */
    /* Table Data Cells */
    .overview-table td, .tabulator-tableHolder .tabulator-cell{
        border: 1px solid var(--border);
        border-left: none;
        border-top: none;

        background: var(--surface-primary);
        font-size: var(--font-size-sm);
        color: var(--foreground-primary);
    }

    /* First Data Cell */
    .overview-table td:first-child, .tabulator-tableHolder .tabulator-cell:first-child{
        border-left: none;
    }

    /* Last Data Cell */
    .overview-table td:last-child, .tabulator-tableHolder .tabulator-cell:last-child{
        border-right: none;
    }

    /* ============= Table Row States ============= */
    /* Table Row Hover State */
    .overview-table tbody tr:hover td, .tabulator-tableHolder .tabulator-row:hover .tabulator-cell{
        background-color: var(--surface-second);
    }

    /* Last Row Border */
    .overview-table tbody tr:last-child td{
        border-bottom: none;
    }

    /* Last Row Corner Radius */
    .overview-table tr:last-child td:first-child{
        border-bottom-left-radius: var(--table-radius);
    }

    .overview-table tr:last-child td:last-child{
        border-bottom-right-radius: var(--table-radius);
    }

    /* ============= Data Table Styles ============= */
    /* Data Table Border Radius Reset */
    .tableData:not(.ui-corner-all) td, .tableData:not(.ui-corner-all) th, .tableData:not(.ui-corner-all) table{
        border-radius: 0;
    }

    /* Data Table Border Reset */
    .tableData:not(.ui-corner-all) table{
        border-left: none;
        border-right: none;
    }

    /* Data Table Corner Radius */
    .tableData.ui-corner-all{
        border-radius: var(--table-radius);
    }

    /* ============= Table Footer ============= */
    /* Table Footer Cells */

    table tfoot td{
        /* padding: 0 !important; */
        border: none;
        border-top: 1px solid var(--border) !important;
    }

    table tfoot td:empty{
        padding: 0 !important;
    }

    .totals-row td{
        font-weight: 600 !important;
        background-color: var(--surface-primary) !important;
        padding: 8px 10px !important;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }

    /* ============= Pagination ============= */
    /* Paginator Container */
    .paginator{
        /* padding: 8px 0px; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Paginator Text Elements */
    .paginator span{
        font-size: var(--font-size-base);
        color: var(--foreground-primary);

        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Paginator Input Fields */
    .paginator input{
        max-width: 40px;
        min-height: 24px;
        height: 24px !important;
    }

    /* ============= Pagination Buttons ============= */
    /* Pagination Button Base */
    .paginator span.page, 
    .paginator span.first, 
    .paginator span.last, 
    .paginator span.previous, 
    .paginator span.next,
    .tabulator-paginator .tabulator-page{
        background: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--btn-radius) !important;
        color: var(--foreground-primary) !important;
        padding: 4px 8px !important;
        cursor: pointer !important;
        user-select: none;
        transition: background 0.2s, border-color 0.2s, color 0.2s;

        height: 24px !important;
        min-height: 24px !important;

        font-size: var(--font-size-base) !important;
        line-height: 100% !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    /* Page Number Button */
    .paginator span.page, .tabulator-pages .tabulator-page{
        background-color: var(--surface-second) !important;
        border-color: transparent !important;
    }

    /* ============= Pagination Button States ============= */
    /* Pagination Button Hover State */
    .paginator span.page:hover, 
    .paginator span.first:hover, 
    .paginator span.last:hover, 
    .paginator span.previous:hover, 
    .paginator span.next:hover,
    .tabulator-page:hover{
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Current Page Button */
    .paginator span.page.current, .tabulator-pages .tabulator-page.active{
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--color-white) !important;
        cursor: default !important;
    }



    /* ============= MISC ============= */
    .tabulator-page span{
        color: inherit !important;
    }

    .tabulator-page .ui-button-text{
        padding: 0 !important;
        line-height: 1 !important;
    }

    .tabulator{
        font-size: 1em;
    }

    .tabulator-placeholder span{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
    }

    .tabulator .tabulator-header{
        border-bottom: none;
    }

    .tabulator-col-content, .tabulator-cell{
        padding: 8px 10px !important;
    }

    .tabulator-tableHolder .tabulator-cell{
        display: inline-flex;
        align-items: center;
    }

    .tabulator-headers .tabulator-col-title{
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        color: var(--foreground-second) !important;
        text-align: left !important;
    }

    .tabulator .tabulator-footer{
        border-top: 1px solid var(--border);
        position: sticky;
        left: 0;
        bottom: 0;
    }

    .view-btn, .edit-btn{
        width: 24px !important;
        height: 24px !important;
        border-radius: var(--btn-radius) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .view-btn .fa, .edit-btn .fa{
        line-height: 0;
    }

    .view-btn{
        background-color: var(--primary) !important;
    }

    .edit-btn{
        background-color: var(--secondary) !important;
    }

    .tabulator-header .tabulator-col:nth-child(n+3), .tabulator-row .tabulator-cell:nth-child(n+3) {
        min-width: 90px !important;
    }

    .tabulator-tableHolder, .tabulator-headers, .tabulator-header{
        overflow: visible;
    }

    .tabulator{
        overflow-x: auto !important;
    }

    div[data-role="multi-placeholder"]{
        background-color: transparent !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color']{
        border-radius: var(--widget-radius) !important;
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color'] > .form-heading{
        background-color: var(--surface-primary) !important;
        padding: 4px 16px !important;
        border-bottom: 1px solid var(--border) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-top: 0 !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color'] > .mi-table-wrapper{
        padding: 16px !important;
    }

    .load-child-table .fa-folder{
        color: var(--secondary) !important;
    }

    table.overview-table.bordered{
        border-collapse: separate !important;
    }


    table.overview-table tbody.compare tr.diff td{
        background-color: var(--destructive-light) !important;
    }

    table.overview-table tbody.compare tr.same td{
        background-color: var(--success-light) !important;
    }



    /* =====================================
    LISTING TABLES
    ===================================== */
    #policies-overview-wrapper .tableData,
    #policies-overview-wrapper th,
    #policies-overview-wrapper td,
    div[data-role="claims-overview"] .tableData,
    div[data-role="claims-overview"] th,
    div[data-role="claims-overview"] td,
    div[data-role="settlements-overview"] .tableData,
    div[data-role="settlements-overview"] th,
    div[data-role="settlements-overview"] td,
    div[data-role="claims-recover-overview"] .tableData,
    div[data-role="claims-recover-overview"] th,
    div[data-role="claims-recover-overview"] td,
    #renewals-overview-wrapper .tableData,
    #renewals-overview-wrapper th,
    #renewals-overview-wrapper td,
    #claims-recover-container .tableData,
    #claims-recover-container th,
    #claims-recover-container td,
    #schedules-listing-table,
    #schedules-listing-table th,
    #schedules-listing-table td,
    #reconciliations-wrapper .tableData,
    #reconciliations-wrapper th,
    #reconciliations-wrapper td,
    div[data-role="accounts-accounts"] .tableData,
    div[data-role="accounts-accounts"] th,
    div[data-role="accounts-accounts"] td,
    div[data-role="accounts-companies"] .tableData,
    div[data-role="accounts-companies"] th,
    div[data-role="accounts-companies"] td,
    div[data-role="accounts-banks"] .tableData,
    div[data-role="accounts-banks"] th,
    div[data-role="accounts-banks"] td,
    div[data-role="accounts-acctypes"] .tableData,
    div[data-role="accounts-acctypes"] th,
    div[data-role="accounts-acctypes"] td,
    div[data-role="accounts-groups"] .tableData,
    div[data-role="accounts-groups"] th,
    div[data-role="accounts-groups"] td,
    div[data-role="accounts-types"] .tableData,
    div[data-role="accounts-types"] th,
    div[data-role="accounts-types"] td,
    div[data-role="accounts-currencies"] .tableData,
    div[data-role="accounts-currencies"] th,
    div[data-role="accounts-currencies"] td,
    div[data-role="accounts-workflow"] .tableData,
    div[data-role="accounts-workflow"] th,
    div[data-role="accounts-workflow"] td,
    div[data-role="deposits-preset-settings"] .tableData,
    div[data-role="deposits-preset-settings"] th,
    div[data-role="deposits-preset-settings"] td,
    #firms-overview-wrapper .tableData,
    #firms-overview-wrapper th,
    #firms-overview-wrapper td,
    #authorise_broker_overview .tableData,
    #authorise_broker_overview th,
    #authorise_broker_overview td,
    #consumerOverviewWrapper .tableData,
    #consumerOverviewWrapper th,
    #consumerOverviewWrapper td,
    #cases_broker_listing .overview-table,
    #cases_broker_listing th,
    #cases_broker_listing td,
    table[data-name="policy-logs"] th,
    table[data-name="policy-logs"] td,
    table[data-name="toba-report"] th,
    table[data-name="toba-report"] td,
    #logsOverviewWrapper .tableData,
    #logsOverviewWrapper th,
    #logsOverviewWrapper td,
    #productsListingWrapper .tableData,
    #productsListingWrapper th,
    #productsListingWrapper td,
    #taxesWrapper .tableData,
    #taxesWrapper th,
    #taxesWrapper td,
    div[data-role="insurers-insurers"] .tableData,
    div[data-role="insurers-insurers"] th,
    div[data-role="insurers-insurers"] td,
    div[data-role="contracts-overview"] .tableData,
    div[data-role="contracts-overview"] th,
    div[data-role="contracts-overview"] td,
    #eocListingWrapper .tableData,
    #eocListingWrapper th,
    #eocListingWrapper td,
    #eocGroupListingWrapper .tableData,
    #eocGroupListingWrapper th,
    #eocGroupListingWrapper td,
    #referralsListingWrapper .tableData,
    #referralsListingWrapper th,
    #referralsListingWrapper td,
    #equationOverviewWrapper .tableData,
    #equationOverviewWrapper th,
    #equationOverviewWrapper td,
    #matrix-listing-container .tableData,
    #matrix-listing-container th,
    #matrix-listing-container td,
    #datasetsOverviewWrapper .tableData,
    #datasetsOverviewWrapper th,
    #datasetsOverviewWrapper td,
    #fieldsOverviewWrapper .tableData,
    #fieldsOverviewWrapper th,
    #fieldsOverviewWrapper td,
    #eavObjectsOverviewWrapperDiv .tableData,
    #eavObjectsOverviewWrapperDiv th,
    #eavObjectsOverviewWrapperDiv td,
    #websitesOverviewWrapper .tableData,
    #websitesOverviewWrapper th,
    #websitesOverviewWrapper td,
    #documentsOverviewWrapper .tableData,
    #documentsOverviewWrapper th,
    #documentsOverviewWrapper td,
    #usersOverviewWrapper .tableData,
    #usersOverviewWrapper th,
    #usersOverviewWrapper td,
    #groupsOverviewWrapper .tableData,
    #groupsOverviewWrapper th,
    #groupsOverviewWrapper td,
    #temp-bans-overview .tableData,
    #temp-bans-overview th,
    #temp-bans-overview td,
    #permissionsWrapper th,
    #permissionsWrapper td,
    #idpsOverviewWrapper .tableData,
    #idpsOverviewWrapper th,
    #idpsOverviewWrapper td,
    #appConfigWrapper .tableData,
    #appConfigWrapper th,
    #appConfigWrapper td,
    #casesProductsOverviewWrapper .tableData,
    #casesProductsOverviewWrapper th,
    #casesProductsOverviewWrapper td
    {
        border-radius: 0 !important;
    }

    #policies-overview-wrapper .tableData > .overview-table,
    div[data-role="claims-overview"] .tableData > .overview-table,
    div[data-role="settlements-overview"] .tableData > .overview-table,
    div[data-role="claims-recover-overview"] > .search-table .overview-table,
    #renewals-overview-wrapper .tableData > .overview-table,
    #claims-recover-container .tableData > .overview-table,
    #schedules-listing-table,
    #reconciliations-wrapper .tableData > .overview-table,
    div[data-role="accounts-accounts"] .tableData > .overview-table,
    div[data-role="accounts-companies"] .tableData > .overview-table,
    div[data-role="accounts-banks"] .tableData > .overview-table,
    div[data-role="accounts-acctypes"] .tableData > .overview-table,
    div[data-role="accounts-groups"] .tableData > .overview-table,
    div[data-role="accounts-types"] .tableData > .overview-table,
    div[data-role="accounts-currencies"] .tableData > .overview-table,
    div[data-role="accounts-workflow"] .tableData > .overview-table,
    div[data-role="deposits-preset-settings"] .tableData > .overview-table,
    #firms-overview-wrapper .tableData > .overview-table,
    #authorise_broker_overview .tableData > .overview-table,
    #consumerOverviewWrapper .tableData > .overview-table,
    #cases_broker_listing .overview-table,
    table[data-name="policy-logs"],
    table[data-name="toba-report"],
    #logsOverviewWrapper .tableData > .overview-table,
    #productsListingWrapper .tableData > .overview-table,
    #taxesWrapper .tableData > .overview-table,
    div[data-role="insurers-insurers"] .tableData > .overview-table,
    div[data-role="contracts-overview"] .tableData > .overview-table,
    #eocListingWrapper .tableData > .overview-table,
    #eocGroupListingWrapper .tableData > .overview-table,
    #referralsListingWrapper .tableData > .overview-table,
    #equationOverviewWrapper .tableData > .overview-table,
    #matrix-listing-container .tableData > .overview-table,
    #datasetsOverviewWrapper .tableData > .overview-table,
    #fieldsOverviewWrapper .tableData > .overview-table,
    #eavObjectsOverviewWrapperDiv .tableData > .overview-table,
    #websitesOverviewWrapper .tableData > .overview-table,
    #documentsOverviewWrapper .tableData > .overview-table,
    #usersOverviewWrapper .tableData > .overview-table,
    #groupsOverviewWrapper .tableData > .overview-table,
    #temp-bans-overview .tableData > .overview-table,
    #permissionsWrapper .overview-table,
    #idpsOverviewWrapper .tableData > .overview-table,
    #appConfigWrapper .tableData > .overview-table,
    #casesProductsOverviewWrapper .tableData > .overview-table{
        border: none !important;
        border-radius: 0 !important;
    }

    .inner-search-table table td:first-child, .inner-search-table table th:first-child{
        padding-left: 16px !important;
    }

    .inner-search-table table td:last-child, .inner-search-table table th:last-child{
        padding-right: 16px !important;
    }
}