/*
*
* @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.
*
*/

#io-ox-desktop {
    top: 32px;
    z-index: 1;
    overflow: hidden;
}

#io-ox-screens {
    top: 40px;
    overflow: hidden;
    z-index: 10;
    html.taskbar-visible & {
        bottom: 2.5rem;
    }
}

#io-ox-windowmanager {
    overflow: hidden;
    display: flex;
}

#io-ox-windowmanager-pane {
    flex: 1;
    position: relative;
}

.io-ox-windowmanager-sticky-panel {
    flex: 0 0 auto;
    position: relative;
}

#io-ox-taskbar-container {

    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    top: auto;
    height: 2.5rem;
    padding: 0.1875rem 0 2px 0;
    margin: 0;
    display: none;

    html.taskbar-visible & {
        display: block;
    }

    #io-ox-taskbar {
        padding: 0 8px;
        list-style-type: none;
        overflow: hidden;
        margin: 0;
        width: 100%;
        display: flex;

        li {
            width:240px;
            margin-left: 8px;
            overflow: hidden;
            display: flex;
            height: 2rem;
            line-height: 26px;

            i {
                margin-right: 8px;
            }

            .taskbar-button {
                border: 3px solid #464646;
                padding: 0 4px 0px 13px;
                border-radius: 0;
                color: white;
                text-align: left;
                width: 100%;
                overflow: hidden;
                background-color: #464646;
                display: flex;
                align-items: center;

                &:focus {
                    border-color: #00c7ff;
                    font-weight: bold;
                }

                &.io-ox-busy:before {
                    color: white;
                    margin-top: -15px;
                }

                .title {
                    .ellipsis();
                    margin-right: 8px;
                    // when there's no space, let the text win over the icon
                    min-width: 26px;
                    height: 100%;
                }
                .count {
                    padding: 4px 5px;
                    margin-right: 8px;
                }
                .spacing { flex-grow: 1; }
            }
        }
    }
}

.touch {
    #io-ox-screens { top: 40px; }
    #io-ox-windowmanager .window-container-center { width: 100% !important; }
}

.window-title {
    padding: 0 13px 0 13px;
    color: @window-title-color;
    font-family: @light-font-family;
    font-weight: 300;
    font-size: 22px;
    line-height: 30px;
    text-shadow: 0 0 2px #000;
    .ellipsis();
    /* override h1 */
    display: block;
    margin: 0;

    .badge {
        position: relative;
        display: inline-block;
        line-height: 1.4em;
        top: -3px;
        left: 10px;
    }
}

.smartphone .window-container.header-top {
    .window-body{
        top: 0;
        margin-bottom: 40px;
    }

    .window-header {
        position: fixed;
        left: 0;
        right: 0;
        //z-index: 666;
        z-index: 25;
        bottom: 0;
        width: 100%;
        height: 40px;
        background-color: #ddd;
        padding: 0;
        border-top: 1px solid @link-color;

        .container {
            padding-left:0;
            padding-right:0;
        }

        .inline-yell {
            display: none;
        }

        h1.title { display: none; }

        a.btn {
            padding: 0;
            line-height: 40px;
            border: 0;
            border-radius: 0;
            margin: 0;
            height: 40px;
            width: 50%;

        }

        button.btn {
            border: 0;
            border-radius: 0;
            margin: 0;
            height: 40px;
            width: 50%;
        }
    }
}

.window-container {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    left: 0;

    &.header-top {

        .window-body {
            top: 48px;
            bottom: 0;
        }

        .window-header {

            position: absolute;
            width: 100%;
            height: 48px;
            background-color: @window-header-color;
            border-bottom: 1px solid darken(@window-header-color, 15%);
            padding: 8px 0;
            z-index: 2;
            // yep, a shadow
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);

            h1.title {
                margin: 0.2em 0;
                font-size: 20px;
                float: left;
            }

            .btn {
                min-width: 80px;
                margin-right: 8px;
                height: 32px;
            }
        }

        // always reserve space for scroll bar
        .window-content {
            overflow-y: scroll !important;
            &.scrollable-disabled { overflow: hidden !important; }
        }
    }

    &.header-bottom {

        .window-body {
            bottom: ~"calc(2rem + 32px)";
            top: 0;
        }

        .window-header {
            display: none;
        }

        .window-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: ~"calc(2rem + 32px)";
            background-color: @window-header-color;
            border-top: 1px solid darken(@window-header-color, 15%);
            padding: 16px 0;
            z-index: 2;
            // yep, a shadow
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);

            h1.title {
                margin: 0.2em 0;
                font-size: 20px;
                float: left;
            }

            .btn {
                min-width: 80px;
                margin-right: 8px;
                height: 2.286em;
            }
        }

        // always reserve space for scroll bar
        .window-content {
            overflow-y: scroll !important;
            &.scrollable-disabled { overflow: hidden !important; }
        }
    }

    &.classic {
        color: white;

        .window-head {
            width: auto; right: 0; height: 30px; color: white;
            border-top: 1px solid #000;
            padding: 7px 0 11px 0;
            text-align: center;

            .toolbar-button { display: none; }
        }

        .window-body {
            top: 50px;
            left: 0;
        }
    }

    &.simple-window {
        position: relative;
        z-index: 11; // higher than io-ox-screens
    }
}

.window-container-center {
    position: relative;
    margin: 0 auto 0 auto;
    width: 100% !important; /* 90% */
    max-width: 100%;
    height: 100%;
}

#io-ox-windowmanager.fullscreen .window-container-center {
    width: 100% !important;
}

.window-blocker {

    background-color: rgba(255, 255, 255, 0.8);
    z-index: 30;

    .progress {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 8px;
        margin-left: -200px;
    }

    @media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint) {
        .progress {
            width: 150px;
            margin-left: -75px;
        }
    }

    .header {
        top: auto;
        bottom: 50%;
        margin-bottom: 30px;
        text-align: center;
    }

    .footer {
        top: 50%;
        bottom: auto;
        margin-top: 8px;
        text-align: center;

        // consider height of floating-header
        .floating-window & { top: ~"calc(50% - 2.5rem)" }
        .block-message {
            margin: 0 32px 16px 32px;
            .message { margin-bottom: 32px; }
            .actions {
                .btn + .btn { margin-left: 5px; }
            }
        }
    }

    .first { margin-top: -20px; }

    .second {
        margin-top: -5px;
        height: 4px;
        .progress-bar {
            background-color: #555;
        }
    }

    .progress .progress-bar { border-radius: 2px; }
}

.window-sidepanel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: 2;
    overflow: hidden;
    display: none;
    background-color: #f5f5f5;

    &.visible {
        display: flex;
        flex-direction: column;
        overflow: visible;
        width: 250px;
        + .window-body { left: 250px; }
    }

    .folder-tree {
        position: static;
        flex: 1;
    }

    .resizebar {
        background: transparent;
        width: 5px;
        height: 100%;
        position: absolute;
        z-index: 1;
        float: right;
        cursor: e-resize;
        cursor: ew-resize;
        cursor: col-resize;
        top: 0;
        right: -3px;
        bottom: 0;
    }

    .generic-toolbar {
        flex: 0 0 auto;
        position: static;

        &.bottom {
            border-color: rgba(0, 0, 0, 0.10);
            background-color: @foldertree-sidepanel-background;
        }

        &.premium-toolbar {

            height: auto;
            line-height: 16px;
            background-color: @premium-toolbar-background;
            padding: 0 0 8px 0;

            .header {
                margin: 0 0 16px 0;
                padding: 0 16px;
                background-color: @premium-toolbar-header-background;
                color: @premium-toolbar-header-color;
                line-height: 40px;
            }

            p {
                padding: 0 16px;
                margin: 0 0 8px 0;
            }
            a:not(.btn-default) {
                color: @premium-toolbar-link-color;
            }

            .io-ox-upsell-link {
                // display list-item has some issues on firefox, so use block and padding to have the same look in all browsers
                display: block;
                padding: 4px 16px 0 16px;
            }
        }
    }
}

.window-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}


.window-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    white-space: normal;
    z-index: 1;
    .user-select(text);
}

.window-content {
    top: 0;
    z-index: 2;
    background-color: @background;
    overflow: hidden;
    outline: 0;

    textarea {
        .user-select(text);
        resize: none;
    }
}

.leftside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 320px;
    background-color: @background;
    overflow: hidden;
}

.rightside {
    outline: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 320px;
    background-color: @background;
    overflow: auto;
}

.floating-window {
    @headerHeight: 2.5rem;
    @headerColor: #f5f5f5;
    @headerGradient: linear-gradient(0deg, #f5f5f5, #fff);
    @headerColorInactive: #f5f5f5;
    @headerTextColor: #333;
    @headerIconColor: #707070;

    // needed or you move the UI when the window overlaps at the right side or bottom
    position: fixed;
    // higher than taskbar
    z-index: 12;
    background: transparent;
    outline: 0;
    max-height: 100%;
    border-radius: 6px;
    .floating-window-content, .floating-window-content {
        border-radius: 6px;
    }
    .window-container-center, .window-footer, .floating-body {
        border-radius: 0 0 6px 6px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .floating-window-content {
        .elevation-2();
    }
    &.active {
        z-index: 14;
        .floating-window-content { .elevation-3(); }
        .floating-header {
            background-color: @headerColor;
            background-image: @headerGradient;
            h1 {
                color: @headerTextColor;
            }
            .controls {
                button {
                    color: @headerIconColor;
                }
            }
        }
    }

    .window-body, .container {
        width: 100%;
    }

    width: 920px;
    height: 750px;

    &.height-md {
        height: 650px;
    }

    right: auto;
    bottom: auto;
    // start window in the middle
    top: ~"calc(50% - 375px)";

    /* width */
    &.width-xs {
        // 640
        width: 40rem;
        &:not(.maximized) { max-width: 780px; }
        // start window in the middle
        left: ~"calc(50% - 320px)";
    }
    &.width-sm {
        // 720px
        width: 45rem;
        &:not(.maximized) { max-width: 900px; }
        // start window in the middle
        left: ~"calc(50% - 360px)";
    }
    &.width-md {
        // 800px
        width: 50rem;
        &:not(.maximized) { max-width: 1020px; }
        // start window in the middle
        left: ~"calc(50% - 400px)";
    }
    &.width-lg {
        // 920px
        width: 57.5rem;
        &:not(.maximized) { max-width: 1140px; }
        // start window in the middle
        left: ~"calc(50% - 460px)";
    }

    @media (min-width: 1280px) {
        &.width-lg {
            width: 1040px;
            left: ~"calc(50% - 520px)";
        }
    }

    .floating-header .controls button[data-action="normal"] {
        display: none;
    }

    .container {
        width: 100% !important;
        position: relative;
        min-width: auto;
    }

    &.width-xs:not(.maximized) [data-hidden="xs"] { display: none; }

    &.maximized {
        width: 1060px;
        height: ~"calc(100% - 72px)";
        max-width: 100%;
        max-height: 1200px;
        top: 0px;
        left: ~"calc(50% - 530px)";

        @media (max-height: 750px) {
            height: 100%;
            top: 0px !important
        }

        .floating-header .controls button[data-action="maximized"] {
            display: none;
        }
    }

    &.dragging iframe {
        pointer-events: none;
    }


    .ios & {
        &.header-top .window-header  { position: relative; }
    }

    .floating-header {
        height: @headerHeight;
        bottom: auto;
        background: @headerColorInactive;
        padding: 0 12px 0 20px;
        display: flex;
        border-radius: 6px 6px 0px 0px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-width: 0 1px 1px 1px;

        cursor: move;

        h1 {
            margin: 0;
            padding: 0;
            font-size: 13px;
            font-weight: bold;
            line-height: @headerHeight;
            color: #636363;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .count {
            padding: 3px 7px;
            position: relative;
            top: -1px;
            margin-left: 8px;
        }
        .controls {
            margin-left:auto;
            flex-shrink: 0;

            button {
                color: @headerIconColor;
                line-height: @headerHeight - 0.125;
                padding: 0 8px;
                margin-top: -1px;
                display: inline-block;


                svg { vertical-align: middle };

                &[data-action="close"] {
                    padding: 0 6px;
                    svg {
                        height: 18px;
                    }
                }
                &[data-action="maximize"] {
                    padding: 0 7px;
                }

                &:focus {
                    box-shadow: none;
                    outline: 2px solid #A0A0A0;
                    outline-offset: -4px;
                }
            }
        }
    }

    .floating-body {
        top: @headerHeight;
        background-color: white;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-width: 0 1px 1px 1px;
    }
}

// used to prevent iframe issues when dragging
#floating-window-backdrop {
    z-index: 13;
    height: 100%;
    width: 100%;
    top: 0;
    // almost transparent
    background-color: rgba(255, 255, 255, 0.01);
    position: absolute;
}

.rightside-navbar { display: none; }

@media (max-width: 900px) {
    .leftside { width: 250px; }
    .rightside { left: 250px; }

    #io-ox-taskbar-container #io-ox-taskbar {
        padding: 0 4px;

        li {
            margin-left: 4px;
        }
    }
}

@media (min-width: 1300px) {
    .leftside  { width: 400px; }
    .rightside { left:  400px; }
}

@media (min-width: 1500px) {
    .leftside {  width: 450px; }
    .rightside { left:  450px; }
}

@media (min-width: 1700px) {
    .leftside { width: 500px; }
    .rightside { left: 500px; }
}

// TINY SCREENS
@media (max-width: 540px) {

    .window-body {
        bottom: 40px;
        left: 0;
    }

    .chromeless-window .window-body { bottom: 0; }

    .vsplit {
        left: 0; width: 200%; right: auto;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 350ms;
        animation-timing-function: ease-out;
        animation-duration: 350ms;
    }

    .vsplit-slide {
        -webkit-transform: translateX(-50%);
        -webkit-animation-name: slideright;
        transform: translateX(-50%);
        animation-name: slideright;
    }

    .vsplit-reverse {
        -webkit-transform: translateX(0);
        -webkit-animation-name: slideleft;
        transform: translateX(0);
        animation-name: slideleft;
    }

    .touch .vsplit { -webkit-backface-visibility: hidden; }

    .vsplit .leftside {
        width: 50%;
        right: auto;
        z-index: 1;
    }

    .vsplit .rightside {
        left: 50%;
        width: 50%;
        top: 41px;
        right: auto;
        z-index: 2;
    }

    .vsplit .rightside-navbar {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 41px;
        background-color: @white;
        border-bottom: 1px solid #ccc;
        padding: 5px 13px 5px 13px;
        z-index: 2;
        line-height: 2em;
        display: block;
    }

    .vsplit-reverse {
        .rightside-navbar,
        .rightside { display:none; }
    }
}

// small screens (mobile)
// note that we have to target max-width and max-device-width
// to target all devices which don't support the max-device-width
// property
@media(max-width: @smartphone-breakpoint) and (orientation: portrait), (max-height: @smartphone-breakpoint) and (orientation: landscape) {
    .window-sidepanel {
        display: block;
        -webkit-backface-visibility: hidden;
    }
}