/* Profile Style */

.profile-toolbar {
    > .app-container {
        gap: 20px;
        width: 100%;

        .page-title {
            gap: 8px;

            .page-heading {
                color: var(--Black-black, #000);
                font-family: Inter;
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                line-height: 100%;
                letter-spacing: -1.28px;
            }
        }

        .page-breadcrumb {
            .breadcrumb {
                gap: 8px;

                .breadcrumb-item {
                    padding-right: 0;
                    gap: 8px;
                    color: var(--Black-grey, #8B898C);
                    text-align: center;
                    font-family: Inter;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 128%;
                    letter-spacing: -0.24px;

                    a {
                        color: var(--Black-grey, #8B898C);
                    }
                }
            }
        }

        .page-hr {
            height: 1px;
            background: var(--Black-light-grey, #EEECF1);
            margin-inline: -20px;
        }
    }
}

.profile-content {
    > div {
        padding-inline: 0;

        .profile-sidebar {
            flex: 0 0 25%;
            border-right: 1px solid var(--Black-light-grey, #EEECF1);
            padding-block: 28px;
            gap: 20px;

            span {
                color: var(--Black-black, #000);
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 128%; /* 20.48px */
                letter-spacing: -0.64px;
                margin-bottom: 20px;
                display: block;
            }

            .profile-sidebar-content {
                padding-left: 4px;
                gap: 8px;
                border: unset;
                &:has(div) {
                    gap: 24px;
                    div {
                        gap: 8px;
                    }
                    span {
                        margin-bottom: 12px;
                    }
                }
                a {
                    padding: 8px 12px;
                    border-radius: 100px;
                    color: var(--Black-black, #000);
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 128%;
                    letter-spacing: -0.56px;
                    width: fit-content;

                    &.active {
                        background: var(--Blue-turquoise-blue-100, #E6F0F2);
                    }
                }
            }
        }
        .card {
            padding-inline: 20px 0;
            padding-block: 20px;
            gap: 24px;
            box-shadow: unset;
            .card-header {
                padding: 0;
                min-height: unset;
                gap: 20px;
                .card-title {
                    margin-block: 6.5px;
                    > h2 {
                        color: var(--Black-black, #000);
                        font-kerning: none;
                        font-feature-settings: 'liga' off;
                        font-family: Inter;
                        font-size: 24px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 128%; /* 30.72px */
                        letter-spacing: -0.96px;
                    }
                }
                .fields-group {
                    gap: 24px;
                    display: flex;
                    width: 100%;
                    .field-block {
                        > .field-label {
                            color: var(--Black-black, #000);
                            font-family: Inter;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 128%; /* 17.92px */
                            letter-spacing: -0.56px;
                        }
                        > .field-value {
                            padding: 4px 12px 4px 8px;
                            border-radius: 16px;
                            background: var(--Blue-turquoise-blue-100, #E6F0F2);
                            color: var(--Black-black, #000);
                            font-family: Inter;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 128%; /* 20.48px */
                            letter-spacing: -0.32px;
                        }
                        &.field-info {
                            .info-label {
                                color: var(--Black-grey, #8B898C);
                                font-family: Inter;
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 128%; /* 17.92px */
                                letter-spacing: -0.56px;
                            }
                            .info-value {
                                color: var(--Black-black, #000);
                                font-family: Inter;
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 128%; /* 17.92px */
                                letter-spacing: -0.56px;
                            }
                        }
                    }
                    &.single-row {
                        display: flex;
                        gap: 24px;
                        .field-block {
                            display: flex;
                            gap: 10px;
                            align-items: center;
                        }
                    }
                }
                > .fields-separator {
                    height: 1px;
                    background: var(--Black-light-grey, #EEECF1);
                    width: 100%;
                }
            }
            .card-body {
                padding: 0;
                > div.tab-pane {
                    flex: 1 0 auto;
                    max-width: 100%;
                    > .tab-pane-content-wrapper {
                        gap: 20px;
                        > .fields-group {
                            gap: 24px;
                            display: flex;
                            flex-direction: column;
                            .field-block {
                                > .field-label {
                                    color: var(--Black-grey, #8B898C);
                                    font-family: Inter;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 128%; /* 17.92px */
                                    letter-spacing: -0.56px;
                                    margin-bottom: 12px;
                                }
                                > .field-value {
                                    color: var(--Black-black, #000);
                                    font-family: Inter;
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 128%; /* 20.48px */
                                    letter-spacing: -0.64px;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 8px;
                                    a {
                                        color: var(--Blue-turquoise-blue, #00888F);
                                    }
                                    > .field-value-line {
                                        display: flex;
                                        gap: 16px;
                                        align-items: center;
                                        &:not(.no-span-color) > span:not(:first-child) {
                                            color: var(--Blue-turquoise-blue, #00888F);
                                            font-family: Inter;
                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 128%; /* 20.48px */
                                            letter-spacing: -0.32px;
                                        }
                                    }
                                }
                            }
                            &.fields-group-img {
                                gap: 8px;
                                flex-direction: row;
                                justify-content: space-between;
                                > .fields {
                                    gap: 24px;
                                    display: flex;
                                    flex-direction: column;
                                    width: calc(100% - 240px);
                                    .field-value, span {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                }
                                > .img-field {
                                    width: 240px;
                                    > figure {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 12px;
                                        > img {
                                            width: 100%;
                                            height: auto;
                                            border-radius: 12px;
                                            background: var(--Blue-turquoise-blue-100, #E6F0F2);
                                        }
                                        > figcaption {
                                            color: var(--Black-grey, #8B898C);
                                            font-family: Inter;
                                            font-size: 14px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 128%; /* 17.92px */
                                            letter-spacing: -0.56px;
                                        }
                                    }
                                }
                            }
                            &.two-cols-group {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                &.group-with-title > .group-title {
                                    grid-column: 1 / -1;
                                }
                            }
                            &.group-with-title {
                                > .group-title > h2{
                                    color: var(--Black-black, #000);
                                    font-kerning: none;
                                    font-feature-settings: 'liga' off;
                                    font-family: Inter;
                                    font-size: 24px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 128%;
                                    letter-spacing: -0.96px;
                                }
                            }
                            &.single-row {
                                display: flex;
                                gap: 24px;
                                .field-block {
                                    display: flex;
                                    gap: 10px;
                                    align-items: center;
                                }
                            }
                        }
                        > .fields-separator {
                            height: 1px;
                            background: var(--Black-light-grey, #EEECF1);
                        }
                    }
                    &.profile-products {
                        .table-details {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            .column-content {
                                grid-column: 2;
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                row-gap: 16px;
                                .column-label, .column-value {
                                    padding-left: 20px;
                                    overflow: hidden;
                                    color: var(--Black-black, #000);
                                    text-overflow: ellipsis;
                                    font-family: Inter;
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 128%; /* 20.48px */
                                    letter-spacing: -0.64px;
                                }
                            }
                        }
                    }
                    &.tab-pane-media-files figure {
                        width: 240px;
                        height: 240px;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        div {
                            width: 100%;
                            height: 100%;
                            img {
                                object-fit: cover;
                                width: 100%;
                                height: 100% !important;
                            }
                        }
                        > figcaption {
                            color: var(--Black-grey, #8B898C);
                            font-family: Inter;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 128%; /* 17.92px */
                            letter-spacing: -0.56px;
                        }
                    }
                }
            }
        }
    }
}

#orders, #products, #time-worked , #leave-absence {
    .card {
        padding-inline: 0;
        padding-block: 0;
        .card-header {
            .card-title.list-title {
                color: var(--Black-black, #000);
                font-kerning: none;
                font-feature-settings: 'liga' off;
                font-family: Inter;
                font-size: 24px;
                font-style: normal;
                font-weight: 600;
                line-height: 128%; /* 30.72px */
                letter-spacing: -0.96px;
                span.total_records {
                    display: none;
                }
            }
        }
        .card-body {
            .filters_container {
                margin-top: 0;
                &:not(:empty) {
                    margin-bottom: 24px;
                }
            }
            table {
                :where(td,th):first-child {
                    display: none;
                }
                :where(th,td):nth-child(2) {
                    left: 0 !important;
                }
            }
            .dataTables_wrapper > .row {
                margin: 0;
            }
        }
    }
}