//*****************************************************************************
//*****************************************************************************
// Job View Version 2 Styles
//*****************************************************************************
//*****************************************************************************

@use 'themes/default/includes/colors/statuses';
@use 'quasar/src/css/variables' as qv;

.job-view2 {

    //=========================================================================
    // Large Job View
    //=========================================================================
    .job-large {

        .tabs-container {
	        .q-tab {
		        border-radius: 5px;
		        // margin-right: 5px;
		        // margin-left: 5px;
		        // color: #999 !important;
		        // &:first-child {
                //     margin-left: 0;
		        // }
		        // &:last-child {
                //     margin-right: 0;
		        // }
		        // &.q-tab--active {
                //     background: #fff;
		        // }
                // &.q-tab__label {
                //     font-weight: bold !important;
                // }
	        }
        }

        .tab-header {
            border: 1px solid #e0e0e0;
            border-radius: 5px;

            &__top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 10px 10px;
            }

            &__group-btns {
                .q-btn {
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            &__detail-container {
                //display: flex;
                justify-content: space-between;
                border-top: 1px solid #e0e0e0;
            }

            &__container {
                display: flex;
                width: 100%;
                &:last-child {
                    border-top: 1px solid #e0e0e0;
                }
            }

            &__detail {
                padding: 10px;
                border-right: 1px solid #e0e0e0;
                width: 25%;

                &:last-child {
                    border-right: none;
                }
            }
        }

        //---------------------------------------------------------------------
        // Status Group
        //---------------------------------------------------------------------
        .status-group {
            // margin: 10px 25px;
            padding: 0;
            list-style-type: none;
            clear: both;
            text-align: center;
            display: flex;
            justify-content: center;
            width: 100%;

            .status-label {
                float: left;
                padding: 10px 30px 10px 40px;
                //background: qv.$green-3;
                //color: #fff;
                font-weight: 600;
                position: relative;
                //width: 100%;
                width: 100px;
                margin: 0 3px;
                display: flex;
                justify-content: center;
            }

            .status {
                // float: left;
                padding: 10px 20px 10px 40px;
                background: qv.$green-3;
                color: #fff;
                position: relative;
                width: 100%;
                border: 1px solid #fff;
                // margin: 0 3px;
                // display: flex;
                justify-content: center;

                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                i {
                    justify-content: flex-start;
                    margin-right: 5px;
                }

                &:before {
                    content: '';
                    border-left: 16px solid #fbfbfb;
                    border-top: 20px solid transparent;
                    border-bottom: 20px solid transparent;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                &:after {
                    content: '';
                    border-left: 16px solid qv.$green-3;
                    border-top: 20px solid transparent;
                    border-bottom: 20px solid transparent;
                    position: absolute;
                    top: 0;
                    left: 100%;
                    z-index: 20;
                }

                &:last-child {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;

                    &:after {
                        display: none;
                    }
                }

                &.current {
                    background: qv.$green-5;

                    &:after {
                        border-left-color: qv.$green-5;
                    }
                }

                &.pending {
                    background: #e0e0e0;

                    &:after {
                        border-left-color: #e0e0e0;
                    }
                }

                //-------------------------------------------------------------
                // Job Status Styles
                //-------------------------------------------------------------
                &.needs_review {
                    background: statuses.$job_status_needs_review;
                    &:after {
                        border-left-color: statuses.$job_status_needs_review;
                    }
                }

                &.mbc {
                    background: statuses.$job_status_mbc;
                    &:after {
                        border-left-color: statuses.$job_status_mbc;
                    }
                }

                &.dbc {
                    background: statuses.$job_status_dbc;
                    &:after {
                        border-left-color: statuses.$job_status_dbc;
                    }
                }

                &.canceled {
                    background: statuses.$job_status_canceled;
                    &:after {
                        border-left-color: statuses.$job_status_canceled;
                    }
                }

                //-------------------------------------------------------------
                // Vendor Job Status Styles
                //-------------------------------------------------------------
                &.modified {
                    background: statuses.$vjr_status_modified;
                    &:after {
                        border-left-color: statuses.$vjr_status_modified;
                    }
                }

                &.declined {
                    background: statuses.$vjr_status_declined;
                    &:after {
                        border-left-color: statuses.$vjr_status_declined;
                    }
                }

                &.canceled {
                    background: statuses.$vjr_status_canceled;
                    &:after {
                        border-left-color: statuses.$vjr_status_canceled;
                    }
                }

            }
        }

        //---------------------------------------------------------------------
        // Job Sub-module
        //---------------------------------------------------------------------
        .job-sub-module {
            .scq-page {
                background: transparent;
            }
        }
    }

    //=========================================================================
    // Mobile Job View
    //=========================================================================

}