/*
*
* @copyright Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public License
* along with OX App Suite. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
*
* Any use of the work other than as authorized under this license or copyright law is prohibited.
*
*/

//definitions
@freetime-free:             rgba(58, 107, 23, 0.5);
@freetime-reserved:         #3774a8;
// use strange cyan so the lasso can be seen when exactly covering appointments
@freetime-lasso:            rgba(0, 185, 255, 0.5);
@freetime-non-working-hour: #efefef;
@today: #cf3239;
@weekend: #a00;

.scheduling-distribution-name-label {
    width: 100%;
}

.io-ox-calendar-scheduling-window {

    // prevent text cursor on lasso drag
    cursor: default;

    .window-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
    }

    .scheduling-app-header {
        display: flex;
        display: -webkit-flex;
        flex-grow: 0;
        padding: 8px 16px;
        min-height: 56px;
        .app-title {
            margin-top: 8px;
            margin-bottom: 8px;
        }
    }
    .scheduling-app-footer {
        border-top: #ccc solid 1px;
        padding: 8px 16px;
    }
    .freetime-participants-view-body {
        margin-left: 16px;
    }
    .scheduling-app-body {
        display: flex;
        display: -webkit-flex;
        height: 100%;
        overflow-y: auto;
    }
    .freetime-time-view-header {
        &.row1 {
            padding-top: 9px;
        }
    }
    .scheduling-app-close {
        padding: 0 0 2px 32px;
        color: #666;
    }
}

.freetime-popup {
    padding: 16px;
    overflow-x: hidden;
}
.freetime-popup, .io-ox-calendar-scheduling-window {
    .modal-content .modal-header {
        min-height: 56px;
    }
    .modal-content .modal-header, .scheduling-app-header {
        display: flex;
        display: -webkit-flex;
        .modal-title, .app-title{
            min-width: 255px;
            max-width: 255px;

            @media all and (max-width: 850px) {
                min-width: 185px;
                max-width: 185px;
            }
        }
    }
    .modal-content .modal-body {
        display: flex;
        display: -webkit-flex;
        padding: 0 0 0 16px;
    }
    .info {
        margin-left: 16px;
        line-height: 24px;
        font-size: 20px;
        color: #333;
        text-decoration: none;
        font-weight: bold;

        .cw {
            font-size: 14px;
            color: @hc-gray;
            margin-left: 8px;
        }
    }

    .zoomlevel-selector {
        width: ~"calc(3.375rem + 96px)";
        display: inline-block;
        margin-right: 32px;
        margin-top: -6px;

        input {
            text-align: center;
            background-color: #fff;
        }
    }

    .header-row2 {
        display: flex;
        display: -webkit-flex;
    }
    .freetime-participants-view-header {
        &.row2 {
            min-width: ~"calc(16.9375rem - 16px)";
            max-width: ~"calc(16.9375rem - 16px)";

            @media all and (max-width: 850px) {
                min-width: ~"calc(12.5625rem - 16px)";
                max-width: ~"calc(12.5625rem - 16px)";
            }
            .tt-dropdown-menu {
                width: 350px;
                // twitter plugin manually overrides this with 100 otherwise
                z-index: 10000 !important
            }
            border-bottom: 1px solid #ccc;
        }

        .add-participants-wrapper {
            padding-left: 16px;
            margin-top: 11px;

            .add-participant {
                height: 2rem;
            }

            // maximize content
            .tt-suggestion {
                padding: 3px;
                font-size: 13px;

                .participant-image {
                    margin-top: 8px;
                    width: 38px;
                    height: 38px;
                }
            }
        }
    }
    .freetime-time-view-header {
        flex: 1;
        -webkit-flex: 1;

        .controls-container a { padding: 9px; }
        .options svg {
            vertical-align: middle;
            margin-top: -2px;
        }
    }
    .dropdown-menu {
        // stay over dynamic appointment indexes
        z-index: 10000;
    }
}

.freetime-view-header {

    .header-row2 {
        position: relative;
        height: 3.5rem;
    }

    // use min height or flex grow produces overlap when participant list is large
    min-height: 3.5rem;

    .freetime-participants-view-header {

        &.row2 {
            min-width: 16.9375rem;
            max-width: 16.9375rem;

            @media all and (max-width: 850px) {
                min-width: 12.5625rem;
                max-width: 12.5625rem;
            }
        }
    }

    &.showFineGrid.zoomlevel-1000 .freetime-time-view-header .freetime-timeline .daylabel-container,
    &.showFineGrid.zoomlevel-1000 .freetime-time-view-header .freetime-timeline .freetime-hour {
        border-left-color: #333;
    }

    .freetime-time-view-header {
        flex: 1;
        -webkit-flex: 1;

        &.row2 {
            border-left: 1px solid #ddd;
            overflow: hidden;
        }

        .freetime-timeline {
            display: flex;
            display: -webkit-flex;
            font-size: 13px;

            .timeline-day {
                border-bottom: 1px solid #ccc;
                // needed to make safari happy
                flex-shrink: 0;

                &.today {
                    .daylabel-container {
                        border-left-color: @today;
                        border-bottom: 1px solid @today;

                        .day-label {
                            color:  @today;
                        }
                        .day-label-wrapper:first-child {
                            .day-label {
                                background: @today;
                                color: #fff;
                                .number {
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

                .daylabel-container {
                    display: flex;
                    display: -webkit-flex;
                    height: 1.75rem;
                    border-left: 1px solid #888;
                    .day-label-wrapper {
                        font-weight: bold;
                        display: inline;
                        min-width: 25%;

                        .day-label {
                            display: inline-block;
                            padding: 0 8px;
                            color: #767676;
                            font-size: 14px;

                            .number {
                                font-size: 20px;
                                font-weight: bold;
                                color: black;
                                margin-left: 2px;
                            }
                            &.weekend {
                                color: @weekend;
                                .number {
                                    color: @weekend;
                                }
                            }
                        }
                    }

                    &.first {
                        border-left: none;
                    }
                }

                .day-hours {
                    display: flex;
                    display: -webkit-flex;
                    height: 1.718rem;
                }
            }

            .freetime-hour {
                flex: 1;
                -webkit-flex: 1;
                line-height: 21px;
                margin-top: 9px;
                padding-left: 8px;
                cursor: pointer;
                border-left: #ccc solid 1px;
                &.hover {
                    text-decoration: underline;
                }
                &.day-start{
                    border-left: #888 solid 1px;
                    margin-top: 0;
                    padding-top: 9px;
                }
                &.first {
                    border-left: none;
                }
            }

        }
    }

    &.zoomlevel-10 {
        // use visibility here not display none (elements should still take up space)
        .freetime-time-view-header .freetime-timeline {
            .freetime-hour {
                visibility: hidden;
                padding-left: 0px;
            }
             // push the hours under the table
            .daylabel-container {
                margin-top: 24px;
                height: 32px;
                border-bottom: 1px solid #ccc;
            }
        }

    }

    // only show every 4th hour
    &.zoomlevel-25 {
        .freetime-hour {
            // use visibility here not display none (elements should still take up space)
            visibility: hidden;
            &:nth-child(4n+1) {
                visibility: visible;
            }
        }
    }

    // only show every 2nd hour
    &.zoomlevel-50 {
        .freetime-hour {
            // use visibility here not display none (elements should still take up space)
            &:nth-child(even) {
                visibility: hidden;
            }
        }
    }

    &.zoomlevel-10, &.zoomlevel-25, &.zoomlevel-50 , &.zoomlevel-100  {
        .freetime-timeline .timeline-day .daylabel-container .level-2{
            display: none;
        }

        .freetime-timeline .timeline-day .daylabel-container .day-label-wrapper {
            min-width: 50%;
        }

        &.onlyWorkingHours .freetime-timeline .timeline-day .daylabel-container .level-1{
            display: none;
        }
    }

    &.zoomlevel-200 {
        &.onlyWorkingHours .freetime-timeline .timeline-day .daylabel-container .day-label-wrapper {
            min-width: 50%;
            &.level-2{
                display: none;
            }
        }
    }
}

// special fix for IE
.internet-explorer .freetime-view-body .freetime-time-view-body {
    flex: auto;
    -webkit-flex: auto;
}

.freetime-view-body {
    display: flex;
    display: -webkit-flex;
    overflow-x: hidden;

    .freetime-participants-view-body {
        width:~"calc(16.9375rem - 16px)";
        min-width: ~"calc(16.9375rem - 16px)";
        font-size: 13px;
        overflow-y: hidden;
        min-height: auto;

        @media all and (max-width: 850px) {
            width: ~"calc(12.5625rem - 16px)";;
            min-width: ~"calc(12.5625rem - 16px)";;
        }

        .participantsrow {
            padding-left: 0;
            // needed so scrolling doesn't missalign
            margin-bottom: 50;
            padding-right: 1px;

            .participant-image {
                margin-top: 0.125rem;
                width: 2rem;
                height: 2rem;
            }
            .participant-name {
                padding-top: 0.75rem;
                font-weight: normal;
                .family-name {
                    font-weight: bold;
                }
            }

            .participant-wrapper {
                padding-left: 0;
                min-height: 38px;
                margin: 0;
                height: 2.5rem
            }
            .remove:not(:hover):not(:focus) {
                background-color: #fff;
            }
        }
    }
    &.compact {
        .participantsrow {
            .participant-wrapper {
                min-height: 22px;
                height: 24px;
            }
            .participant-image {
                margin-top: 2px;
                width: 16px;
                height: 16px;
            }
            .participant-name {
                padding-top: 3px;
            }
        }
    }

    &.showFineGrid .freetime-table-cell {
        background-image: linear-gradient(90deg, #aaa 0px, transparent 1px);
        //needed to draw the borders correctly for the day-start and today cells
        background-origin: border-box;
    }

    // zoomlevel is too low to show a fine grid
     &.zoomlevel-10.showFineGrid .freetime-table-cell, &.zoomlevel-25.showFineGrid .freetime-table-cell, &.zoomlevel-50.showFineGrid .freetime-table-cell {
        background-image: none;
    }

    &.zoomlevel-100.showFineGrid .freetime-table-cell {
        background-size: 15px 1px;
    }
    &.zoomlevel-200.showFineGrid .freetime-table-cell {
        background-size: 30px 1px;
    }
    &.zoomlevel-400.showFineGrid .freetime-table-cell {
        background-size: 60px 1px;
    }

    &.zoomlevel-1000.showFineGrid .freetime-table-cell {
        // little hacky gradient, to keep the lines at 1px
        background-image: linear-gradient(90deg, #333333 0px, transparent 1px, transparent 50px, #888 51px, transparent 51px, transparent 99px, #888 100px, transparent 100px, transparent 149px);
        background-size: 150px 1px;
    }

    &.showFineGrid.zoomlevel-1000 .freetime-time-view-body .freetime-table .freetime-time-table .freetime-table-cell:not(.today) {
        border-left: none;
    }

    &.zoomlevel-100 .appointment.under-one-hour{
        .title,.location{
            display: none;
        }
    }

    &.zoomlevel-10 .appointment, &.zoomlevel-25 .appointment, &.zoomlevel-50 .appointment{
        .title,.location{
            display: none;
        }
    }

    .freetime-time-view-body {
        flex: 1;
        -webkit-flex: 1;
        position: relative;
        overflow-y: auto;
        border-left: 1px solid #ddd;

        // to show busy animation correctly
        &.io-ox-busy {
            position: initial;
        }

        // copied from bootstrap; but without own background-color; mixins do not work here; therefore copy/paste
        .striped {
            background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,0.15) 25px, rgba(255,255,255,0.15) 50px);
            background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,0.15) 25px, rgba(255,255,255,0.15) 50px);
            background-image: -o-repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,0.15) 25px, rgba(255,255,255,0.15) 50px);
            background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,0.15) 25px, rgba(255,255,255,0.15) 50px);
            background-repeat: repeat;
            background-size: 141px 141px;
        }

        .freetime-table {
            position: relative;
            // small hack to force correct scrollbar rendering so height cacluclation can be done
            min-height: 1px;

            .freetime-time-table {
                display: flex;
                display: -webkit-flex;
                height: 100%;
                width: 100%;
                position: absolute;
                z-index: 1;

                .freetime-table-cell {
                    height: 100%;
                    border-left: #ccc solid 1px;
                    &.non-working-hour {
                        background-color: @freetime-non-working-hour;
                    }

                    &.day-start {
                        border-left: #888 solid 1px;
                    }

                    &.first {
                        border-left: none;
                    }
                }
            }
            .freetime-lasso {
                // important or the lasso prevents clicks on the appointments
                pointer-events:none;
                background-color: @freetime-lasso;
                bottom: 0px;
                top: 0px;
                position: absolute;
                border: 1px solid #63b7ff;
                border-width: 0 1px 0 1px;
                // high z index to leave room for dynamic appointment z index
                z-index: 9001;
            }
            .current-time {
                // important or the lasso prevents clicks on the appointments
                pointer-events:none;
                background-color: @today;
                width: 2px;
                bottom: 0;
                top: 0;
                position: absolute;
                // high z index to leave room for dynamic appointment z index
                z-index: 9000;
            }
        }
        .appointments {
            position: relative;
            font-size: 12px;

            .appointment-table {
                z-index: 1;
                height: 2.5rem;
                position: relative;
                &:not(:last-child) {
                    border-bottom: #ddd solid 1px;
                }

                .appointment {
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    border-left: 1px solid rgba(0, 0, 0, 0.2);
                    padding: 8px;
                    display: none;
                    .title {
                        line-height: 24px;
                        font-weight: normal;
                        overflow: hidden;
                        color: #fff;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .appointment-time {
                        opacity: 0.6;
                        margin-left: 4px;
                    }
                    &.has-detailview:hover {
                        cursor: pointer;
                    }
                    &.has-location {
                        padding: 4px 8px;
                        .title {
                            line-height: 16px;
                        }
                        .location {
                            opacity: 0.6;
                            line-height: 16px;
                            font-weight: normal;
                            overflow: hidden;
                            color: #fff;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    &.free {
                        background-color: @freetime-free;
                    }
                    &.reserved {
                        background-color: @freetime-reserved;
                    }
                }
            }
        }

        &.showFree .appointments .free { display: block; }
        &.showTemporary .appointments .temporary { display: block; }
        &.showReserved .appointments .reserved { display: block; }
        &.showAbsent .appointments .absent { display: block; }
    }
    &.compact {
        .appointments {
            .appointment-table {
                height: 24px;
                .appointment {
                    padding: 4px 8px;
                    .title {
                        line-height: 16px;
                    }
                    .location {
                        display: none;
                    }
                }
            }
        }
    }
}