/*
*
* @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-dialog-wrapper {
    height: 100%;
    width: 100%;

    .modal-title {
        font-size: 18px;
        line-height: 24px;
        margin: -3px 0 2px 0;
    }

    .modal-body {
        overflow-y: auto;
        max-height: 400px;
        padding: 15px;
    }

    .modal-footer .checkbox {
        float: left;
        margin-top: 6px;
        margin-bottom: 0;

        &.checkbox-block {
            float: none;
            text-align: left;
            margin-top: 5px;
            margin-bottom: 10px;
            margin: 0 0 8px 0;
        }
    }
}

.io-ox-dialog-underlay {
    background-color: black;
    opacity: 0;
    z-index: 65000;
    .transition(opacity 0.15s linear);

    &.in { opacity: 0.30; }

    &.topmost { z-index: 65002; }

}

.io-ox-dialog-popup {
    position: relative;
    max-width: 500px;
    margin: 0 auto 0 auto;
    overflow: visible;
    background-color: white;
    z-index: 65001;
    border: 0 none;
    box-shadow: 0 5px 25px -5px #000;
    border-radius: @border-radius-base;

    .modal-header {
        position: relative;

        h1, h2, h3, h4 {
            font-size: 18px;
            line-height: 24px;
            margin: 0;
            .ellipsis();
        }

        &.help {
            h1, h2, h3, h4 { margin-right: 35px; }
        }

        .io-ox-context-help {
            padding: 13px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 20px;
            line-height: 1.1;
        }
    }

    .modal-body {
        &.max-height-100 { max-height: 100px; }
        &.max-height-150 { max-height: 150px; }
        &.max-height-200 { max-height: 200px; }
        &.max-height-250 { max-height: 250px; }
        &.max-height-300 { max-height: 300px; }
        &.max-height-350 { max-height: 350px; }

        h1 {
            font-size: 18px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }

    &.zero-padding {
        .modal-body {
            padding: 0;

            iframe {
                display: block;
                border-radius: 5px 5px 0 0;
            }
        }

        .modal-footer { margin-top: 0; }
    }

    &.relogin { z-index: 65301; }

    .content {
        overflow: auto;

        .plain-text {
            font-size: 12pt;
            text-align: center;
            color: @text-color;
            padding: 10px;
        }

    }

    .modal-footer > .btn { min-width: 5em; }

    .modal-footer .help-block {
        text-align: left;
        &:empty { display: none; }
    }

    .io-ox-sidepopup {
        &.right { border-radius: 0 5px 5px 0; }
        &.left  { border-radius: 5px 0 0 5px; }
    }

    &:focus {
        outline: 0;
        box-shadow: 0 5px 25px -5px darken(@link-color, 20%);
    }

    &.topmost { z-index: 65003; }

    .modal-header, .modal-footer { padding: 12px 16px; }

}

.subscribe-imap-folder .modal-body { padding: 0; }

// filepicker should always be 100% in width, also in landscape mode
.ios.smartphone, .android.smartphone .picker-pc-container .modal-body {
    > div,
    > ul { width: 100%; }
}
// filepicker mobile
.picker-pc-container .io-ox-pagecontroller.page { padding-top: 40px; }

.add-infostore-file {

    .picker-pc-container {
        position: relative;
        height: 350px;

        .io-ox-fileselection {
             li.file {
                font-size: @font-size-touch;
                outline: 0;
                line-height: 40px;
                padding: 2px 7px;
                .user-select(none);

                label {
                    margin-top:   10px;
                    margin-left:  2px;
                    margin-right: 5px;
                    float: left;
                }

                .checkbox-inline { font-size: 16px; }

                .name { .ellipsis(); }

                &.selected, &.selected:hover {
                    background-color: @foldertree-selected-background;

                    * { color: @foldertree-selected-label-color; }
                }

                &:focus {
                    background-color: @foldertree-selected-focus-background;

                    * { color: @foldertree-focused-label-color; }
                }
            }

            &.singleselect li.file .name { padding-left: 0.5em; }
        }
    }

    .modal-body {
        padding: 0;
        overflow: hidden;

        > div,
        > ul {
            display: inline-block;
            overflow: auto;
            width: 33%;
            height: 100%;
            margin: 0;
            vertical-align: top;
          //transition: width;
          //transition-duration: .1s;
        }

        // - user story DOCS-589 :: User can see image preview in file picker
        // - https://jira.open-xchange.com/browse/DOCS-589
        // - according to some counseling from Olpe the required 3rd preview-pane is supposed to be hacked into this modal dialogue.
        //
        > :first-child:nth-last-child(3),   // - model agnostic rules do work without css class names but depend entirely on structure then.
        > :nth-child(2):nth-last-child(2),  //
        > :nth-child(3):last-child {        //

            width: 33%;
        }
        > .preview-pane {

            padding: 10px 3px 10px 10px;
            border-left: 1px solid #ddd;

            text-align: center;

            > .preview {
                position: relative;
                display: block;

                width: 100%;
                height: 140px;

                margin: 0 0 10px 0;

                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                background-attachment: scroll;

                .file-type-icon {
                    position: relative;
                    top: 45px;
                    width: 100px;
                    font-size: 70px;
                    font-weight: 100;
                }
            }
            > .fileinfo {

                //.sidebar-panel-body {
                //
                //}

                dl {
                    margin: 0;
                }
                dt {
                    margin: 2px 0 -2px 0;
                }
                dd {
                    &.file-name {
                        word-wrap: break-word;
                        word-break: break-all;
                    }
                    &.modified {
                        > span {
                            display: block;
                        }
                    }
                }
            }
        }

        .folder-tree { border-right: 1px solid #ddd; }

        .io-ox-fileselection {

            &.has-focus > li.file {
                &.selected {
                    background-color: @foldertree-selected-focus-background;
                    * { color: @foldertree-focused-label-color; }
                }

                &.marked:not(.selected) {
                    box-shadow: inset 0px 0px 0px 2px #86acd2;
                }

                &.selected:not(.marked):focus {
                    background-color: darken(@foldertree-selected-focus-background, 5%);

                    * { color: @foldertree-focused-label-color; }
                }

                &.selected.marked:focus {
                    background-color: darken(@foldertree-selected-focus-background, 5%);

                    * { color: @foldertree-focused-label-color; }
                    box-shadow: inset 0px 0px 0px 2px #86acd2;
                }
            }

            li.file {
                outline: 0;
                line-height: 30px;
                padding: 2px 7px;
                cursor: pointer;
                .user-select(none);

                label {
                    margin-top: 5px;
                    margin-left: 5px;
                    float: left;
                }

                .name {
                    .ellipsis();
                     padding-left: 0.5em;
                }

                &.selected {
                    background-color: @foldertree-selected-background;
                    * { color: @foldertree-selected-label-color; }
                }

                .checkbox-inline { display: none; }
            }

            .touch &.multiselect li.file {
                 .checkbox-inline {
                    display: block;
                    height: 20px;
                    background: transparent;
                    margin-top: 2px;

                    input[type=checkbox] {
                        height: 20px;
                        cursor: pointer;
                    }
                }
                .name { padding-left: 0; }
            }
        }
    }

    .modal-footer { margin-top: 0; }
}

.smartphone .add-infostore-file {
    .picker-pc-container {
        .folder-tree .folder-node .folder-arrow { position: static; }
    }

    .modal-body {
        > div,
        > ul { width: 100%; }
    }
}

/* ios momentum scrolling, breakes mobile chrome if applied to all devices */
.ios .io-ox-dialog-popup { -webkit-overflow-scrolling: touch; }

.mobile-dialog.io-ox-dialog-popup {

    overflow-y: scroll;
    max-height: 95%;
    width: 95%;
    margin-top: 0;
    top: 10px;
    border-radius: 0;

    .modal-footer {
        margin-top: 0;

        .row {
            [class*="col-"] { margin-left: 0; }

            .btn {
                width: 100%;
                margin: 2px 0;
            }
        }
    }

    h3 { font-size: 20px; }
}

/***************** Android stock browser tweaks **************/
.legacy-chrome .io-ox-dialog-popup .modal-footer .row {
    margin: 0;

    .col-md-3 { padding: 0; }
}


.export-dialog .modal-body label.checkbox { padding-left: 20px; }
.export-dialog select { width: 100%; }

//
// Backbone-based Modal Dialog
//
.modal.flex {

    display: block;
    overflow: hidden;

    // For modal dialogs without body
    &.compact {
        .modal-dialog {
            .modal-header { border-bottom: 0; }
            .modal-body {
                min-height: 0;
                padding: 0;
            }
        }
    }

    .modal-dialog {
        margin: 0 auto;
        width: 31.25rem;
        max-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .modal-content {
        border: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: ~"calc(100vh - 48px)";
        overflow: auto;
    }

    .modal-title {
        font-size: 18px;
        line-height: 24px;
        margin: -3px 0 2px 0;
    }

    .modal-subtitle {
        line-height: 16px;
        padding-top: 4px;
        margin-bottom: 4px;
    }

    &.zero-padding {
        .modal-body {
            padding: 0;
        }
    }

    .modal-header, .modal-body, .modal-footer {
        padding: 16px;
        flex-grow: 0;
    }

    .modal-body {
        min-height: 60px;
        overflow-y: auto;
        flex-grow: 1;

        h2 { font-size: 18px; }
    }

    .modal-footer {
        .btn.pull-left { margin-right: 8px; }
        .btn.pull-right { margin-left: 8px; }
        .checkbox.custom { margin-bottom: 0; margin-top: 3px; }
    }

    .modal-footer .help-block { text-align: left; }

    &.mobile-dialog {
        .modal-dialog {
            width: 96%;
        }
        .modal-footer {
            .row {
                [class*="col-"] { margin-left: 0; }

                .btn {
                    width: 100%;
                    margin: 2px 0;
                }
            }
        }
    }

    &.maximize {
        .modal-dialog {
            height: 100%;
        }
        .modal-content {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            height: 100%;
        }
        .modal-body {
            flex-grow: 1;
        }
    }

    .modal-header.help {
        .modal-title {
            margin-right: 40px;
        }
        .io-ox-context-help {
            margin: 16px 16px 0 16px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 18px;
            line-height: 24px;
        }
    }

    .modal-body.av-dialog {
        &>div { padding-left: 24px; }
        i {
            float: left;
            padding-top: 3px;
            color: #676767;
        }

        &.av-danger {
            &>div { padding-left: 40px; }
            i {
                padding-top: 5px;
                color: @red;
                font-size: 30px;
            }
        }
    }

}

.folder-picker-dialog .modal-body {

    .folder-tree {
        width: fit-content;
        min-width: 100%;
    }
}

.folder-picker-dialog.add-infostore-file .modal-body {
    .folder-tree {
        width: 33%;
        min-width: inherit;
    }
}