/*
*
* @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-settings-main {
    .window-controls label {
        display: inline-block;
        margin-bottom: 0;
    }

    .window-content .leftside {

        .toolbar {
            position: absolute;
            right: 0;
            left: 0;
            font-size: 14px;
            line-height: 44px;
            width: 100%;
            height: 45px;
            padding: 0;
            border: 0 solid #e4e4e4;
            border-top: 1px solid #ddd;
            border-top-width: 1px;
            display: block;
            bottom: 0;
            background-color: #fff;
            z-index: 2;
         }

        .advanced-mode {
            margin: 10px;
            line-height: 20px;
        }
    }

    .window-content .leftside .folder-tree {
        .selected > .folder-node > .folder-label {
            max-width: none;
        }
    }

    .window-content .rightside > .scrollable-pane {

        // A11y: TODO This will be removed after the default for links include text-decoration underline
        a:not(.action):not([role="tab"]):not(.dropdown-toggle):not([data-toggle="dropdown"]), a[target="_blank"] { text-decoration: underline; }
        li > a, .dropdown a { text-decoration: none; }
        .dropdown > a:focus,.dropdown > a:hover { text-decoration: underline; }

        max-width: 100%;
        width: 50rem;

        .settings-list-view {
            .settings-list-item {
                flex-wrap: wrap;

                .account-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 6px;
                    margin-top: 1px;
                    background-size: 1.625rem;
                    background-repeat: no-repeat;
                    background-position: center;
                    width: 2.5rem;
                }

                .remove-placeholder {
                    width: ~"calc(1rem + 8px)";
                    margin: 13px 14px;
                }

                @media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint) {
                    .remove-placeholder {
                        width: 14px;
                    }
                }
            }
        }

        .fontnameSelectbox {
            display: inline-block;
            padding-right: 24px;
            vertical-align: text-bottom;
        }
        .fontsizeSelectbox {
            display: inline-block;
            padding-right: 24px;
            vertical-align: text-bottom;
        }
        .fontcolorButton {
            display: inline-block;
            vertical-align: text-bottom;

            .colorpicker-button {
                width: 100%;
            }
        }

        .example-text {
            margin: 8px 0;
            border: 1px solid #ccc;
            background-color: white;
            border-radius: 4px;
            padding: 16px;
        }

        .io-ox-accounts-settings {

            .widget-settings-view .widget-title {
                font-weight: normal;
            }

            .dropdown-menu {
                right: 15px;
                left: auto;
            }
        }

        .widget-list {
            margin: 0;
            list-style-type: none;
        }

        .widget-settings-view {
            background-color: #f5f5f5;
            padding: 13px;
            margin: 0 0 7px 0;
            text-align: right;
            position: relative;

            &.draggable {
                padding-left: 60px;
                padding-right: 40px;
            }

            .drag-handle {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 45px;
                cursor: pointer;

                i {
                    height: 9px;
                    overflow: hidden;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -5px 0 0 -6px;
                    color: #aaa;
                }
                &:hover {
                    text-decoration: none;
                    background-color: rgba(0, 0, 0, 0.05);
                    i { color: #888; }
                }
                &:focus {
                    background-color: @link-color;
                    outline: 0;
                    i { color: #FFF; }
                }
            }

            .widget-controls {
                display: inline-block;
                a[data-action="remove"], a[data-action="delete"] {
                    &:hover {
                        i.fa-trash-o {
                            color: @trash-icon-hover-color;
                            text-decoration: none;
                        }
                    }
                    i.fa-trash-o {
                        color: #aaa;
                    }
                }
            }

            .widget-icon {
                line-height: 20px;
                margin-right: 13px;
                float: left;
            }

            .widget-title {
                font-weight: bold;
                margin-top: 1px;
                margin-right: 2em;
                white-space: nowrap;
                text-align: left;
                max-width: 100%;
                .ellipsis;
            }

            .action {
                padding: 0;
                margin-top: 1px;
                margin-right: 2em;
            }

            a[data-action="toggle"] {
                margin-right: 1.4em;
                min-width: 100px;
                display: inline-block;
                text-align: center;
            }

            a[data-action="remove"], a[data-action="delete"] {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 45px;
                cursor: pointer;

                &:hover {
                    background-color: @trash-icon-hover-background;
                }

                i {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -7px 0 0 -6px;
                    color: #aaa;
                }
            }

            @media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint) {
                a[data-action="toggle"] {
                    color: #000000;
                    text-shadow: 0 1px 0 #ffffff;
                    opacity: 0.2;
                    margin-right: 2em;
                    &:hover {
                        opacity: 0.4;
                        text-decoration: none;
                    }
                }

                a[data-toggle="dropdown"]:hover {
                    text-decoration: none;
                }
            }

            &.disabled {
                background-color: #eee;
                .widget-title { font-style: italic; font-weight: normal; color: #888; }
            }
        }

        .io-ox-accounts-settings li.widget-settings-view {
            padding-right: 40px;
        }

        .io-ox-signature-settings li.widget-settings-view {
            padding-right: 40px;
        }
    }

    .no-padding { padding: 0 }
}
.vgrid-cell.settings {
    height: 3.5em;
    padding: 0.75em 13px 0.75em 13px;
}

.vgrid-cell.vgrid-label.settings-label {
    font-size: 9pt;
    font-weight: normal;
    line-height: 1.2em;
    height: 1.2em;
    color: #555;
}

.borderradius .vgrid-cell.settings .shown_as {
    top: 5px;
    bottom: 5px;
    left: 3px;
    border-right: 0 none;
    border-radius: @border-radius-base;
}

.sectiondelimiter {
    clear: both;
    text-align: right;
    padding: 0;
    padding-bottom: 7px;
    margin: 0;
    margin-top: 8px;
    border-top: 1px solid @inline-link-border-color;
    height: 8px;
}

.settings-detail-pane {

    @vertical-margin: 40px;
    @horizontal-margin: 32px;

    &.default-content-padding {
        padding: @horizontal-margin;
    }

    fieldset {
        padding: 0;
        margin: 0 0 @vertical-margin 0;
        min-width: 0;
        position: relative;
        padding: 32px 0 0 32px;
        &.compact {
            margin: 16px 0 0 0;
            padding: 16px 0 0 0;
            legend.sectiontitle h2 {
                color: #767676;
                font-weight: 500;
            }
        }
    }

    fieldset[role="presentation"] {
        padding: 0;
        margin: 0 0 32px 0;
    }

    fieldset .form-group:last-child {
        margin-bottom: 0;
    }

    legend {
        position: absolute;
        top: 0;
        left: 0;
    }

    label {
        color: #767676;
        font-weight: 500;
    }

    .radio label, .checkbox label {
        font-weight: normal;
    }

    .section {
        max-width: 100%;
        width: 50rem;
    }

    h1, h1.pane-headline {

        font-weight: bold;
        font-size: 24px;
        line-height: 32px;
        margin: @vertical-margin 0;

        &:first-child {
            margin-top: 0;
            line-height: 32px;
        }

        &.no-margin { margin: 0; }
    }

    h2, h2.pane-headline {

        font-size: 20px;
        line-height: 22px;
        margin: @vertical-margin 0 (@vertical-margin / 2) 0;

        &.no-margin { margin: 0; }
    }

    legend.sectiontitle {
        display: block;
        width: 100%;
        font-size: 13px;
        line-height: 24px;
        font-weight: 700;
        color: #333;
        margin: 0;
        border: 0;
        padding: 0;
        h2 {
            font-size: 13px;
            line-height: 24px;
            font-weight: 700;
            color: #333;
            margin: 0;
        }
    }

    .fa-toggle-on {
        color: @switch-background;
        margin-right: 8px;
        font-size: 18px;
        line-height: 18px;
        vertical-align: middle;
    }

    .io-ox-accounts-settings {

        .controls {
            padding: 13px;
            height: 30px;
            margin-bottom: 13px;
        }

        .list-item-controls > a.action {
            min-width: 80px;
            text-align: center;
        }

        .hint {
            .btn {
                margin-top: 8px;
            }
        }
    }

    .io-ox-certificate-settings {

        .settings-list-view > li .list-item-controls .remove {
            padding: 27px 16px;
        }
    }

    // singular, no joke, happy debugging it was
    .io-ox-account-settings {

        .folderselect.enabled {
            input[disabled] {
                background-color: inherit;
                cursor: pointer;
            }
        }
    }

    .settings-list {
        margin: 0;
        list-style-type: none;

        li {
            background-color: #f5f5f5;
            padding: 13px;
            margin: 0 0 7px 0;
            text-align: left;

            &.default .list-title { font-weight: bold; }

            .list-title { margin-right: 2em; }

            a {
                cursor: pointer;
                &.action { margin-right: 2em; }
            }
        }
    }

    .error-log {

        section { margin-bottom: 26px; }

        .error-id { color: #555; }

        .url { .ellipsis(); }

        .stack-trace, .url { clear: both; }

        .datetime {
            float: right;
            color: #767676;
        }

        .toggle-request-body {
            display: inline-block;
            margin-right: 1em;
        }

        .request-body, .stack-trace {
            color: #555;
            white-space: pre;
            word-break: break-all;
            overflow: hidden;
            padding: 0.5em 0;
        }

        .chart-description, .empty, .url {
            font-style: italic;
            color: #767676;
        }

        .empty { padding: 0 13px; }

        .tab-content { min-height: 150px; }
    }

    .buttons {
        margin-bottom: 32px;
        .btn {
            margin-bottom: 0.5rem;
        }
        .btn-link {
            padding: 0;
            margin-right: 16px;
        }
        .btn-default {
            margin-right: 8px;
        }
        .btn .fa:first-child {
            margin-right: 8px;
        }
    }
}

.io-ox-dialog-popup {

    input.input-large { width: 360px; }

    .busynotice { text-align: center; }

    .add-mail-account-address,
    .add-mail-account-password {
        display: block;
        max-width: 355px;
    }
}

@media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint)  {

    @font-size: 16px;
    @line-height: 20px;

    .io-ox-settings-window .vgrid-cell {
        font-size: 15px;
        border-top: 1px solid #eee;
    }

    .settings-detail-pane {

        &.default-content-padding {
            padding: 16px;
        }

        h1:first-child,
        h1.pane-headline:first-child {
            margin: 0 0 32px 0;
        }

        fieldset {
            padding: 0;
            margin-bottom: 32px;
            legend.sectiontitle {
                position: relative;
                h2 {
                    font-size: @font-size;
                    line-height: @line-height;
                }
            }
        }

        label {
            font-size: 14px;
            line-height: @line-height;
        }

        .form-control {
            font-size: @font-size;
        }

        .buttons {
            .btn {
                margin-bottom: 16px;
            }
            margin-bottom: 32px;
        }

        .checkbox.custom, .radio.custom {
            label {
                font-size: @font-size;
                line-height: @line-height;
            }
            margin-bottom: 16px;
        }
    }
}

.modal.flex[data-point="io.ox/settings/accounts/mail/settings/detail/dialog"] {
    .modal-dialog {
        max-width: 1000px;
    }
}