/*
Theme Name: Post-mortem
Description: Template d'un child theme de Uncode
Author: Proulx Communications
Author URI: https://www.proulxcommunications.com/
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


/*----- PAGE NOUVEAU POST-MORTEM -----*/
body.nouveau-post-mortem {

    #row-form-nouveau-pm {

        #pm-form-container {

            form > * {
                margin: 36px 0;

                &:not(input[type="submit"]) {
                    padding-bottom: 36px;
                    border-bottom: 2px solid black;
                }
            }

            h2 {
                margin-bottom: 18px;
            }

            p {
                margin-bottom: 9px;
            }

            input:invalid,
            input.is-invalid {
                border: 2px solid #f54a4f;
            }

            textarea {
                resize: vertical;
            }

            .pm-bold-label {
                font-weight: 600;
            }

            .column-form-content {
                display: flex;
                flex-direction: column;
            }

            .inline-form-content {
                display: flex;
                justify-content: flex-start;
                gap: 10%;
            }

            .pm-form-yesno-container {
                margin-top: 18px;
            }

            .pm-form-num-containter {
                align-items: center;
                gap: 2%;

                input[type="number"] {
                    appearance: textfield;
                }
            }

            .pm-general-info {

                p {
                    margin-top: 0;
                }

                .inline-form-content > * {
                    max-width: 33%;
                }

                .inline-form-content input[type="text"] {
                    width: 100%;
                }
            }

            .pm-info-projet {
                
                p {
                    margin-top: 0;
                }
            }

            .pm-blocages-majeurs .column-form-content {

                max-width: 50%;

                & > *:not(p) {
                    margin: 6px 0;

                    input[type="checkbox"] {
                        aspect-ratio: 1;
                    }

                    &:not(:has(textarea)) {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                    }
                }
            }

            input[type="submit"]:hover {
                color: #F0EAE5;
                background-color: #7003C9;
            }

            input[type="submit"]:disabled {
                color: #382F2F;
                background-color: #777;
            }

            #txt-info {
                padding: 0;
                margin: 0;
                margin-left: 20px;
                border: none;
                font-weight: 700;
            }

            #txt-info.txt-success {
                color: #38D68C;
            }

            #txt-info.txt-erreur {
                color: #f54a4f;
            }

            @media (max-width:959px) {

                .inline-form-content {
                    gap: 2%;
                }
                
                .pm-form-num-containter {
    
                    input[type="number"] {
                        max-width: 33%;
                    }
                }
            }

            @media (max-width:569px) {

                .inline-form-content:not(.pm-form-num-containter.inline-form-content) {
                    flex-direction: column;
                }
            }
        }
    }
}

/*----- PAGE LISTE POST-MORTEM -----*/
body.liste-post-mortem {

    p {
        margin: 0;
    }

    ul {
        margin: 0;
    }

    #pm-search-containter{

        .inline-container {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .column-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .field-title {
            font-weight: 600;
        }

        margin-bottom: 50px;
        border: 2px solid #382F2F;

        h2 {
            margin: 0;
        }

        .pm-search-title-container {

            padding: 10px 15px;
            border: 1px solid #382F2F;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:not(:has(input:hover)):hover {
                cursor: pointer;
                background-color: rgba(100, 0, 100, 0.1);
            }

            input[type="button"] {
                margin: 0;
                width: fit-content;
                z-index: 2;

                &:hover {
                    color: #F0EAE5;
                    background-color: #7003C9;
                }
            }
        }

        .pm-search-filter-container {

            padding: 15px 30px;
            gap:0;

            &>div {

                padding: 20px 0;

                &:not(:nth-last-child(2)) {
                    border-bottom: 1px solid #382F2F;
                }    
            }

            h4 {
                margin: 0;
            }

            label {
                margin: 0;
            }

            input {
                text-decoration: none;
            }

            input[type="number"] {
                appearance: textfield;
            }

            input[type="submit"] {

                width: fit-content;

                &:hover {
                    color: #F0EAE5;
                    background-color: #7003C9;
                }
            }

            input[type="checkbox"] {
                width: 16px;
                min-width: 16px;
                height: 16px;
                min-height: 16px;
            }

            label {
                    
                display: flex;
                align-items: center;
                gap: 8px;

                input {
                    margin: 0;
                }
            }

            .column-container:has(>label input[type="checkbox"]) {
                gap: 10px;

                label {
                    line-height: 1.2em;
                }
            }

            .note-search-container {
                label {
                    gap: 3px;
                }
            }

            .date-search-container {
                align-items: flex-start;

                .column-container {
                    gap: 5px;
                }
            }

            .taxo-search-containers {

                align-items: flex-start;
                gap: 20px;

                .inline-container {
                    align-items: flex-start;
                }

                .column-container {
                    
                    label {
                        justify-content: space-between;
                        padding-right: 10px;
                    }
                }
            }

            .gestiontemps-search-container {
                align-items: flex-start;

                .column-container {
                    
                    label {
                        justify-content: space-between;
                        padding-right: 10px;
                    }
                }
            }

            #invalid-pm-search-txt {
                color: #f54a4f;
                display: none;
                margin-top: 12px;
            }
        }

        &.collapsed .pm-search-filter-container {
            display: none;
        }
    }

    #pm-list-container {

        .pm-single-container {

            border: 2px solid #382F2F;
            margin: 20px 0;

            .inline-pm-data {
                display: flex;
                align-items: center;
                gap: 25px;
            }

            .column-pm-data {
                display: flex;
                flex-direction: column;
                gap: 25px;
            }

            .pm-title-container {
                justify-content: space-between;
                padding: 10px 15px;
                border: 1px solid #382F2F;

                h2, h3 {
                    margin: 0;
                }

                span {
                    margin: 0 15px;
                }

                &:hover {
                    cursor: pointer;
                    filter: brightness(80%);
                }
            }

            .pm-content-container {

                padding: 15px 30px;

                h4 {
                    margin: 0;
                }

                p {
                    font-weight: 600;

                    span {
                        font-weight: 400;
                    }
                }

                &>div {
                    padding: 20px 0;

                    &:not(:last-child) {
                        
                        border-bottom: 1px solid #382F2F;
                    }
                }

                .flag {
                    width: 20px;
                    height: 20px;
                    min-width: 20px;
                    border-radius: 100%;
                }

                .is-redflag {
                    background-color: #f54a4f;
                }

                .pm-infogeneral-data {
                    align-items: flex-start;

                    &>div:not(:first-child) {
                        margin-left: 50px;
                        gap: 15px;
                    }
                }

                .pm-ouinon-data {
    
                    p {
                        span {
                            margin-left: 20px;
                        }
                    }
                }

                .pm-temps-data.inline-pm-data {

                    gap: 0;
                    padding-left: 20px;

                    .flag {

                        margin-right: 5px;

                        &:not(:first-child) {
                            margin-left: 25px;
                        }
                    }
                }

                .pm-blocages-data {

                    .inline-pm-data {

                        &>div:last-child {
                            margin-left: 50px;
                        }
                    }
                }
            }

            &.collapsed .pm-content-container {
                display: none;
            }
        }
    }
}

/*----- PAGE DONNÉES DES POST-MORTEM ------*/
body.donnees-post-mortem {

    p {
        margin: 0;
    }

    .inline-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .column-container {
        display: flex;
        flex-direction: column;
    }

    .pm-data-search-container {

        justify-content: flex-start;
        gap: 25px;
        border: 2px solid #382F2F;
        padding: 10px 15px;
        margin-bottom: 50px;

        label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;

        }
        
        input {
            margin: 0;
        }

        input[type="submit"] {

            width: fit-content;
            margin-left: auto;

            &:hover {
                color: #F0EAE5;
                background-color: #7003C9;
            }
        }


        input[type="button"] {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            color: #F0EAE5;
            background-color: #7003C9;

            &:hover {
                color: #000000;
                background-color: #f7f7f7;
            }
        }

        #filter-error-msg {
            display: none;
            margin: auto;
            color: #f54a4f;

            span {
                font-weight: 600;
            }
        }
    }

    .pm-datas-container {

        h3 {
            margin-bottom: 15px;
        }

        &>* {
            padding: 20px 0;
            padding-bottom: 35px;
            border-bottom: 2px solid #382F2F;
        }

        .is-bold {
            font-weight: 700;
        }

        .pm-typeprojet-datas {
            gap: 5%;
            margin-top: 15px;
        }

        .pm-gestiontemps-datas {

            margin-top: 15px;

            p {
                padding: 0 10px;
                text-align: center;
            }
        }

        .circle-graphic-container {
    
            align-items: center;
            margin: 10px 0;
            padding: 10px 15px;
            border-radius: 20px;

            &:hover {
                cursor: pointer;
                background-color: rgba(100, 0, 100, 0.1);
            }
    
            p {
                margin: 10px 0;
                max-width: 250px;
                line-height: 1.5em;
            }

            p:first-child {
                text-transform: uppercase;
                margin-top: 0;
                font-weight: 600;
                letter-spacing: 0.03em;
            }

            p:last-child {
                margin-bottom: 0;
                font-size: 14px;
            }
    
            .circle-graphic {
    
                rotate: -90deg;
    
                circle {
                    fill: none;
                }
    
                .bg-circle {
                    stroke: rgba(181, 38, 181, 0.3);
                    stroke-width: 30px;
                }
    
                .progress-circle {
                    stroke: #B526B5;
                    stroke-width: 30px;
                    stroke-dasharray: 377; /* Value = circonference du cercle */
                    stroke-linecap: round;
                    stroke-dashoffset: 377;
                    transition: stroke-dashoffset 0.5s ease-in-out;
                }
    
                .circle-text {
                    rotate: 90deg;
                    font-size: 26px;
                    font-weight: 900;
                }
            }
        }

        ul {
            margin: 0;
        }

        .pm-ouinon-data {

            margin-top: 15px;
            padding: 10px 15px;
            border-radius: 20px;
            justify-content: flex-start;
            gap: 2%;

            &:hover {
                cursor: pointer;
                background-color: rgba(100, 0, 100, 0.1);
            }

            .circle-graphic {
    
                rotate: -90deg;
    
                circle {
                    fill: none;
                }
    
                .bg-circle {
                    stroke: rgba(181, 38, 181, 0.3);
                    stroke-width: 8px;
                }
    
                .progress-circle {
                    stroke: #B526B5;
                    stroke-width: 8px;
                    stroke-dasharray: 251; /* Value = circonference du cercle */
                    stroke-linecap: round;
                    stroke-dashoffset: 251;
                    transition: stroke-dashoffset 0.5s ease-in-out;
                }
    
                .circle-text {
                    rotate: 90deg;
                    font-size: 26px;
                    font-weight: 900;
                }
            }
        }

        .pm-blocages-data {
            align-items: flex-start;
            justify-content: flex-start;
            gap: 5%;
            margin: 15px 0;

            p {
                margin-bottom: 10px;
            }

            table {

                border: none;

                tbody {

                    tr:hover {
                        cursor: pointer;
                        & td:first-child {
                            border-radius: 20px 0 0 20px;
                            background-color: rgba(100, 0, 100, 0.1);
                        }

                        & td:last-child {
                            border-radius: 0 20px 20px 0;
                            background-color: rgba(100, 0, 100, 0.1);
                        }
                    }

                    tr:last-child td {
                        border-bottom: none;
                    }
                    
                    tr td:first-child {
                        font-weight: 400;
                        border-right: 2px solid #B526B5;
                    }
                }
            }
        }

        .headings-container {

            border: none;

            h4 {
                margin: 0;
                font-weight: 500;
                line-height: 1em;
                width: fit-content;
                margin: auto;
                padding: 20px 30px;
                border: 2px solid #B526B5;
                border-radius: 125px;
            }

            p {
                font-size: 18px;
            }
            
            .is-bold {
                text-decoration: underline;
            }
        }
    }

}

/*----- FORMAT POUR LE PRINT DES PAGES -----*/
@media print {

    @page {
        size: portrait !important;
    }

    #masthead,
    #pm-search-containter,
    .pm-data-search-container {
        display: none !important;
    }

    .collapsed .pm-content-container {
        display: revert !important;
    }
    
    .is-redflag {
        background-color: red;
    }
}