@import "/./src/assets/scss/variables.scss";
@import "/./src/assets/scss/mixins.scss";
@import "/./src/assets/scss/fonts.scss";
@import "/./src/assets/scss/breakpoints.scss";

.mat-table-wrapper {
    min-height: 200px;
    width: 100%;
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    cursor: default;

    // Personnalisation de la scrollbar pour tous les écrans
    &::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;

        &:hover {
            background: #a1a1a1;
        }
    }

    @include respond-to('md') {
        width: calc(100vw - 340px);
    }

    @include respond-to('lg') {
        width: calc(100vw - 357px);
    }
}

.mat-full-height {
    height: 500px;
}
    
.mat-table {
    min-width: 100%;
    width: 100%;
    background: $white;
    box-shadow: 4px 6px 6px #AAAAAA1A;
    position: relative;
    padding-top: 10px;
    
    // Mobile: largeur minimale pour permettre le scroll horizontal
    @include respond-below('md') {
        min-width: 800px;
    }

    &:before {
        content: '';
        position: absolute;
        top: -5px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: calc(100% - 40px);
        height: 1px;
        -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
    }
    
    .mat-sort-header-content {
        flex-direction: column;
        align-items: flex-start;
        @include font-style($nominee-regular,14px,18px,normal);
        color: $grey-5;
        // text-align: left;
        font-weight: bold;
        color: #25373C;
        @media only screen and (min-width: $medium) {
            font-size: 15px;
            line-height: 22px;
        }

        p {
            margin: 0;
        }
    }

    .mat-header-cell {
        border: none;
        padding: 10px 12px;
        min-width: 200px;
        
        @include respond-below('md') {
            min-width: 120px;
            padding: 8px 6px;
            font-size: 12px;
        }
        
        @include respond-below('sm') {
            min-width: 100px;
            padding: 6px 4px;
            font-size: 11px;
        }

        app-table-vue-details & {
            @include font-style($nominee-regular,14px,16px,normal);
            color: $grey-5;
            padding-right: 0;
            white-space: nowrap;

            @include respond-to('md') {
                font-size: 16px;
                line-height: 18px;
            }
            
            @include respond-below('md') {
                font-size: 12px;
                line-height: 14px;
            }
        }
    }

    .mat-sort-header {
        width: auto;
        margin: 0;
    }

    .mat-cell {
        @include font-style($nominee-regular,14px,18px,normal);
        color: $blue-1;
        border: none;
        padding: 10px 12px;
        word-wrap: break-word;
        
        @include respond-to('md') {
            font-size: 16px;
            line-height: 22px;
        }
        
        @include respond-below('md') {
            padding: 8px 6px;
            font-size: 12px;
            line-height: 16px;
        }
        
        @include respond-below('sm') {
            padding: 6px 4px;
            font-size: 11px;
            line-height: 14px;
        }
    }

    .mat-table-sticky {
        position: relative;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            z-index: 100;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
    }

    tbody {
        tr {
            position: relative;
            cursor: pointer;
            &:nth-of-type(odd) {
                background: $white-2;
            }

            &:hover, &:focus {
                box-shadow: 0 0 0 1px inset $green;
            }

            &.active-projet {
                box-shadow: 0 0 0 1px inset $green;
            }
        }
    }
}

.mat-tab-header-pagination-controls-enabled {
    .mat-tab-header-pagination {
        body & {
            display: none;
        }
    }
} 

mat-header-cell {
    line-height: 54px;
    border: none;
}

.mat-paginator-outer-container {
    margin-bottom: 50px;
    .mat-paginator-container {
        justify-content: flex-end;
        box-shadow: 4px 6px 6px #AAAAAA1A;
    }

    .mat-paginator-navigation-first, .mat-paginator-navigation-last {
        display: none;
    }

    .mat-paginator-page-size-label, .mat-select-min-line, .mat-paginator-range-label {
        @include font-style($nominee-regular,14px,14px,normal);
        color: $blue-1;
    }
}

.filter-header {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mat-custom-table-wrapper {
    margin-bottom: 20px;
    padding: 20px;
    background: $white;

    .mat-paginator-outer-container {
        margin-bottom: 0;
    }
    
    .mat-table {
        box-shadow: none;

        &:before {
            display: none;
        }
    }

    .mat-row{
        &:nth-of-type(odd) {
            background: $white-2;
        }
    }

    .mat-header-row {
        position: relative;
        border-top: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 3px 6px rgba(0,0,0,.04);
        z-index: 1;
    }
}

.mat-table-error {
    margin: 30px;
    color: $red;
}