/***************************************************************************************************/
/*                                            presence                                             */
/***************************************************************************************************/

.select-poste-container {
    min-width: 0 !important;
    
    md-select-menu md-content {
        min-width: 80px !important;
    }
}

.select-time-container {
    min-width: 0 !important;
    
    md-select-menu md-content {
        min-width: 65px !important;
    }
}


/***************************************************************************************************/
/*                                            planning                                             */
/***************************************************************************************************/
@colorHeader: #daf2ff;

table.planning {


    th, td {
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        text-align: center;
        vertical-align: top;
    }
    thead tr:last-of-type th {
        border-bottom-width: 3px;
    }
    thead th {
        background-color: @colorHeader;
    }
    thead tr th:first-child {
        background-color: inherit;
    }
    
        
    @columnEmployeWidth: 135px;
    th.employe, td.employe {
        background-color: @colorHeader;
        border-right-width: 3px;
        font-weight: bold;
        width: @columnEmployeWidth;
        min-width: @columnEmployeWidth;
        max-width: @columnEmployeWidth;
    }
    td.employe {
        div.layout-row {
            height: 100%;
        }
        div.tools {
            @toolsWidth : 15px;
            @toolsHeight : 100%;
            width: @toolsWidth;
            min-width: @toolsWidth;
            height: inherit;
            
            .md-menu {
                width: 100% !important;
                min-width: 100% !important;
                height: inherit;
            }
            
            .md-button {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                min-width: 100% !important;
                height: inherit;
                line-height: inherit !important;
                border-radius: 0;
                
                md-icon {
                    position: relative;
                    right: 3px;
                }
                md-icon.tiny {
                    position: relative;
                    right: 0px !important;
                }
            }
        }
    }
    
    @columnCommentWidth: 350px;
    th.commentaire-employe, td.commentaire-employe {
        width: @columnCommentWidth;
        min-width: @columnCommentWidth;
        max-width: @columnCommentWidth;
    }
    td.commentaire-employe {
        padding: 0;
        textarea {
            border: 0;
            background: inherit;
            resize: none;
            width: 346px;
        }
    }
    
    
    td.total, th.total {
        padding: 1px;
        min-width: 50px;
        max-width: 50px;
        width: 50px;

        .duree-contrat {
            font-size: 10px;
            /*font-style: italic;*/
            color: #666;
        }
        .duree-total {
            font-weight: bold;
        }
        .duree-nuit {
            font-size: 10px;
            /*font-style: italic;*/
            color: #666;
        }
        .paniers {
            font-size: 10px;
            /*font-style: italic;*/
            color: #666;
        }

    }
    
    
    td.ferie {
        background-color: #b5b5b5 !important;
    }
    th.ferie {
        background-color: #96b7ca !important;
    }


    md-select.selectPoste {
        margin: 0;
        
        .md-select-value {
            width: 32px;
            min-width: 32px;
            padding: 0;
            border-bottom-width: 0;
        }
        
        .md-select-icon {
            display: none;
        }
    }
    
    md-select:not([disabled]).ng-invalid.ng-touched .md-select-value {
        padding-bottom: 0;
    }
    md-select:not([disabled]):focus .md-select-value {
        border-bottom-width: 0;
        padding-bottom: 0;
    }
    
    
    div.selectHeuresDebutFin {
        font-weight: normal;
        font-size: 10px;
        
        md-select {
            margin: 0;  
            position: relative;
            top: 1px;          
                    
            @selectTimeWidth: 40px;
            @selectTimeHeight: 17px;
            .md-select-value {
                width: @selectTimeWidth;
                min-width: @selectTimeWidth;
                height: @selectTimeHeight;
                min-height: @selectTimeHeight;
                padding: 0;
                border-bottom-width: 0;
            }
                    
            .md-select-icon {
                display: none;
            }
        }
                
        md-select:not([disabled]).ng-invalid.ng-touched .md-select-value {
            padding-bottom: 0;
        }
        md-select:not([disabled]):focus .md-select-value {
            border-bottom-width: 0;
            padding-bottom: 0;
        }
    }
    
    div.absence, div.repos {
        md-icon {
            cursor: default;
            &.btn-detail {
                cursor: pointer;
                &:hover{
                    transform: scale(1.2);
                }
            }
        }
    }
}



/***************************************************************************************************/
/*                                          planning-week                                          */
/***************************************************************************************************/

table.planning-week {
    @presenceWidth: 133px;
    @presenceHeight: 46px;
    @presenceOtherCinemaHeight: 61px;

    .duree {
        font-size: 10px;
        font-style: italic;
        color: #666;
    }
    
    @columnDayWidth: 134px;
    th.day, td.day {
        width: @columnDayWidth;
        min-width: @columnDayWidth;
        max-width: @columnDayWidth;
    }
    
    div.selectHeuresDebutFin {
        border-top: 1px solid #000;
    }

    th.day {
        
        div.infos {
            @infosWidth : 15px;
            width: @infosWidth;
            min-width: @infosWidth;
        }
        
        div.tools {
            @toolsWidth : 15px;
            width: @toolsWidth;
            min-width: @toolsWidth;
            height: @presenceHeight;
            min-height: @presenceHeight;
            
            .md-menu {
                width: 100% !important;
                min-width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
            }
            
            .md-button {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                min-width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
                line-height: inherit !important;
                border-radius: 0;
                
                md-icon {
                    position: relative;
                    right: 3px;
                }
                md-icon.tiny {
                    position: relative;
                    right: 0px !important;
                }
            }
                    
        }
    }
    

    td.day {

        width: @presenceWidth;
        min-width: @presenceWidth;
        padding: 0;
        
        .toolbar-day {
            @toolsHeight: 15px;
            @toolsWidth : 25px;

            background-color: #dedede;
            height: @toolsHeight;
            min-width: @presenceWidth;
            
            div.tools {
                width: @toolsWidth;
                min-width: @toolsWidth;
                height: @toolsHeight;
                line-height: 1; 
                
                .md-menu {
                    width: 100% !important;
                    min-width: 100% !important;
                    height: 100% !important;
                    min-height: 0 !important;
                }
                .md-button {
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 100% !important;
                    min-width: 100% !important;
                    height: 100% !important;
                    min-height: 0 !important;
                    line-height: inherit !important;
                    
                    md-icon {
                        position: relative;
                        bottom: 4px;
                    }
                }
            }
            
            div.infos {
                width: @toolsWidth;
                min-width: @toolsWidth;
                height: @toolsHeight;

                div {
                    @size-div: 12px;
                    width: @size-div;
                    min-width: @size-div;
                    height: @toolsHeight;
                    line-height: 1;

                    md-icon, i.fas {
                        @size-icon: 8px;
                        font-size: @size-icon;
                        height: @size-icon;
                        width: @size-icon;
                        min-height: @size-icon;
                        min-width: @size-icon;
                    }
                }

                .md-icon-button {
                    @size-btn: 12px;
                    height: @size-btn;
                    width: @size-btn;
                    min-height: @size-btn;
                    min-width: @size-btn;
                    line-height: 0.5;
                    padding: 0;
                    margin: 0;

                    md-icon, i.fas {
                        @size-icon: 8px;
                        font-size: @size-icon;
                        height: @size-icon;
                        width: @size-icon;
                        min-height: @size-icon;
                        min-width: @size-icon;
                    }
                }
            }
            div.duree {
                /*width: @toolsWidth;*/
                /*min-width: @toolsWidth;*/
            }

            div.paniers {
                font-size: 10px;
                color: #666;
            }
            div.duree-nuit {
                font-size: 10px;
                color: #666;
            }
        }
    }
    
    td.employe {
        div.infos {
            padding-top: 6px;
        }
    }
    
    td.commentaire-day {
        padding: 0;
        textarea {
            border: 0;
            background: inherit;
            resize: none;
            width: @presenceWidth;
        }
    }
    
    td.creneau table {
        white-space: nowrap;
        text-align: left;
    }
    
        
    div.absence, div.repos {
        min-width: @presenceWidth;
        min-height: @presenceHeight;
    }

    div.presences {
        min-width: @presenceWidth;
        min-height: @presenceHeight;
        
        div.presence.edit {
            background-color: #d2d9da;
            border: 2px dotted #000;
            
            .tools {
                height: 40px;
                min-height: 40px;
            }

            input.ng-invalid.ng-touched {
                border-bottom:  rgb(221,44,0) solid 1px;
            }
        }
        
        div.presence-other-cinema {
            background-color : #bfb6b6;
            height: @presenceOtherCinemaHeight !important;
            .tools {
                @toolsHeight : 10px;
                height: @toolsHeight !important;
                min-height: @toolsHeight !important;
            }
        }
        div.presence {
            border: 1px solid #ddd;
            min-width: @presenceWidth;
            height: @presenceHeight;
            min-height: 0;
            
            .tools {
                @toolsWidth : 15px;
                @toolsHeight : 44px;
                width: @toolsWidth;
                min-width: @toolsWidth;
                height: @toolsHeight;
                min-height: @toolsHeight;
                margin-left: 2px;
                
                .md-menu {
                    width: 100% !important;
                    min-width: 100% !important;
                    height: 100% !important;
                    min-height: 0 !important;
                }
                
                .md-button {
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 100% !important;
                    min-width: 100% !important;
                    height: 100% !important;
                    min-height: 0 !important;
                    line-height: inherit !important;
                    border-radius: 0;
                    
                    md-icon {
                        position: relative;
                        right: 3px;
                    }
                    md-icon.tiny {
                        position: relative;
                        right: 0px !important;
                    }
                }
                        
            }
            
            
            
            
            /*
            md-select.selectTime {
                margin: 0;
                font-size: small;
        
                .md-select-value {
                    width: 23px;
                    min-width: 23px;
                    padding: 0;
                    min-height: 0;
                    border-bottom-width: 0;
                }
                
                .md-select-icon {
                    display: none;
                }
            }
            */
            
            input {
                width: 15px !important;
                padding: 0 !important;
                height: 15px !important;
            }
            input::-webkit-input-placeholder {
                font-size: 10px;
                /*line-height: 3;*/
            }
            
            div.schedule {
                margin-left: 2px;
                font-family: sans-serif;
                font-weight: bold;
                width: 46px;
                
                input {
                    -webkit-box-ordinal-group: 3;
                    -webkit-order: 2;
                    order: 2;
                    display: block;
                    margin-top: 0;
                    background: none;
                    padding-top: 2px;
                    padding-bottom: 1px;
                    padding-left: 2px;
                    padding-right: 2px;
                    border-width: 0;
                    line-height: 26px;
                    height: 30px;
                    border-radius: 0;
                    border-style: solid;
                    box-sizing: border-box;
                }
                
                
                md-select {
                    margin: 0;  
                    position: relative;
                    top: 1px;          
                    
                    @selectTimeWidth: 17px;
                    @selectTimeHeight: 17px;
                    .md-select-value {
                        width: @selectTimeWidth;
                        min-width: @selectTimeWidth;
                        height: @selectTimeHeight;
                        min-height: @selectTimeHeight;
                        padding: 0;
                        border-bottom-width: 0;
                    }
                    
                    .md-select-icon {
                        display: none;
                    }
                }
                
                md-select:not([disabled]).ng-invalid.ng-touched .md-select-value {
                    padding-bottom: 0;
                }
                md-select:not([disabled]):focus .md-select-value {
                    border-bottom-width: 0;
                    padding-bottom: 0;
                }
                
                .time .hour {
                    position: relative;
                    left: 4px;
                }
                .time .minute {
                    position: relative;
                    right: 4px;
                }
                
            }
            
            
            
        }
    }
}


.dragging-resize {
    cursor: col-resize !important;
}


/***************************************************************************************************/
/*                                          planning-day                                           */
/***************************************************************************************************/

table.planning-day {
    @presenceHeight: 50px;
    
    div.absence, div.repos {
        width: 100%;
        min-height: @presenceHeight;
        height: @presenceHeight;
    }
    
    div.presences {
        position: relative;
        width: 100%;
        min-height: @presenceHeight;
        height: @presenceHeight;
        
        div.presence-other-cinema {
            .body {
                background-color : #bfb6b6 !important;
            }
        }
        
        div.presence {
            position: absolute;
            min-height: @presenceHeight;
            height: @presenceHeight;
            border: 1px solid #ddd;
            
            .body {
                min-height:100%;
                min-width:100%;
                padding: 0px 5px;
                
                
                .time {
                    /*writing-mode: vertical-rl;*/
                    .separator {
                        line-height: 1px;
                        position: relative;
                        top: -3px;
                    }
                }
                
            }
            
            .body.small {
                .time {
                    display: none;
                }
            }
            
            
            
            .handle {
                position: absolute;
                top: 0;
                bottom: 0;
                background: #000;
                opacity: 0.1;
                width: 5px;
            }
            .handle:not(.disabled) {
                cursor: col-resize !important;
            }
            
            .handle.right {
                right: 0;
            }
            
            .handle.left {
                left: 0;
            }
            
            
            @menuBtnHeight: 10px;
            @menuBtnWidth: 32px;
            md-menu {
                height: @menuBtnHeight;
                .md-button {
                    margin: 0 1px !important;
                    padding: 0 !important;
                    
                    width: @menuBtnWidth !important;
                    min-width: @menuBtnWidth !important;
                    
                    
                    height: @menuBtnHeight !important;
                    min-height: @menuBtnHeight !important;
                    
                    md-icon {
                        position: relative;
                        top: -14px;
                        /*
                        font-size: 20px;
                        height: 20px;
                        width: 20px;
                        min-height: 20px;
                        min-width: 20px;
                        */
                    }
                }
            }
            
        }
    }
    
    
    th.hour {
        min-width: 100px;
        width: 100px;
    }
    
    th.time {
        min-width: 25px;
        width: 25px;
    }
    
    
    md-select {
        margin: 0;
        padding: 0;
    }
    
    
    td.employe {
        div.tools {
            md-menu {
                .md-button {
                    height: @presenceHeight;
                    min-height: @presenceHeight;
                }
            }
        }
    }
    
}