// desk.scss
// Styling for the superdesk desk module
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
@import '~labels.scss';


$main-desk-color:  #ffffff;
$main-desk-border: #cacaca;
$main-desk-padding-side : 60px;

$desk-width: 270px;

/* board colors */
@mixin status-config-color($color) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);
    background: rgba($r, $g, $b, 25%);
    color: rgb($r, $g, $b);
    &.active {
        background: rgb($r, $g, $b);
        color: $white;
    }

}

.todo-status {
    background: $todo-color;
}

.inprogress-status {
    background: $inprogress-color;
}

.done-status {
    background: $done-color;
}

.desk-tabs {
    .online-users {
        margin-top: -10px;
        margin-left: 20px;
        border-left: 1px solid #dfdfdf;
    }
}


.master-desk-view {
    overflow: hidden;
    padding-bottom: 0 !important;
    z-index: auto;
}

.main-desk-container {

    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    flex: 1 1;
    flex-flow: row wrap;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    padding: 20px;
    @include border-box();

    @include user-select(none);

    // horizontal scroll adjustment
    &::-webkit-scrollbar {
        width: 18px;
        height: 18px;
        border-top: 1px solid #d0d0d0;
    }
    &::-webkit-scrollbar:hover {
        background-color: $sd-background;
    }
    &::-webkit-scrollbar-thumb {
        border-top: 1px solid #d0d0d0;
        background: #bbb;
        @include box-shadow(inset 0px 1px 0px 3px $sd-background);
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #777;
    }



    .desk-container {
        flex: 0 0 20%;
        min-width: 250px;
        @include border-box();
        position: relative;
    }

    .desk {
        position: absolute;
        left: 0; right: 30px; top:0; bottom: 0;
        overflow:hidden;
        &__header {
            position: absolute;
            left: 0; right: 0; top:0;
            height: 25px;
            line-height: 25px;
            border-bottom: 5px solid #4d4d4d;
        }
        &__name {
            text-transform: uppercase;
            float: left;
            @include text-bold();
            &:hover {
                cursor: default;
            }
        }
        &__open {
            margin-left: 10px;
            i { margin-bottom: 3px; color: $grayLight; }
            &:hover {
                i { color: $grayDark; }
                cursor:pointer;
            }
        }
        &__action {
            float:right;
            .dropdown__toggle {
                @include opacity(60);
                border: 0;
                background: none;
                vertical-align: baseline;
            }
                        .dropdown__menu {
                            right: 5px;
                        }
        }
        &__content {
            position: absolute;
            left: 0; right: 0; top:30px; bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }
            &::-webkit-scrollbar:hover {
                background: $sd-background;
            }
            &::-webkit-scrollbar-thumb {
                background: #ddd;
                @include box-shadow(inset 3px 2px 0px 1px $sd-background);
            }
            &::-webkit-scrollbar-thumb:hover {
                background: #ccc;
            }
        }
    }
}

.inline-content-items {
    min-height: 18px;
    margin-bottom: 6px;
    @include box-shadow(0 1px 4px 0 rgba(0,0,0,.2));
    .item {
        cursor: default;
        background: $white;
        height: 32px;
        line-height: 32px;
        @include border-box();
        border-left: 3px solid #d1d1d1;
        border-right: 2px solid $white;
        border-bottom: 1px solid #eee;
        position: relative;
        &:last-child {
            border-bottom: none;
        }
        &.active {
            background: $sd-hover;
            border-right-color: $sd-blue;
        }
        &.locked {
            border-left-color: #b70101;
        }
        .type {
            float: left;
            height: 32px;
            i {
                margin: 0 8px;
                text-align: center;
                vertical-align: middle;
                color: $grayLight;
            }
        }
        .urgency {
            height: 32px;
            float: left;
            line-height: 30px;
            margin-right: 10px;
        }
        .urgency-label, .priority-label {
            vertical-align: middle;
        }
        time {
            color:#999;
            font-size: 11px;
        }
        .text {
            height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            padding-right: 10px;
            .keywords {
                  color: $sd-keyword;
                  font-weight: 500;
                  text-transform: uppercase;
                  margin-right: 5px;
            }
        }
                &:not(:-moz-handler-blocked) {
                    .text {
                        white-space: normal;
                    }
                }
        .action {
            position: absolute;
            right: 0; top: 0;
            display: none;
                        background-color: inherit;

            button {
                background: transparent;
                height: 32px;
                border: 0;
                border-left: 1px solid #e0e0e0;
                display: block;
                float: left;
                &:hover {
                    cursor: pointer;
                    background: #f0f0f0;
                }
            }
        }
        &.active {
            .action button:hover {
                background: darken($sd-hover, 10%);
            }
        }
        &.shifted:hover {
            .text {
                padding-right: 57px;
            }
            .action {
                display: block;
            }
        }
    }
    &.content-tasks {
        .item {
            border-left: none;
        }
    }
}
.slugline-content {
    .loading {
        width: 18px;
        height: 18px;
        background: url(~images/loading-large.gif) center center no-repeat $sd-background;
        background-size: 18px;
        text-align: center;
    }
    .no-items {
        color: #bababa;
        @include text-semibold();
        cursor: default;
    }
    .inline_slugline_item {
        .place {
            text-transform: uppercase;
            color: #777;
            @include text-semibold();
        }
        .slugline {
            padding-left: 20px;
            color: $sd-keyword;
            text-transform: uppercase;
            font-weight: 500;
        }
        .oldslugline {
            padding-left: 20px;
            color: $sd-blue-text;
            text-transform: uppercase;
        }
        .headline {
            padding-left: 40px;
            text-transform: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

@media (max-width: 1560px) {
    .main-desk-container .desk-container {
        flex: 0 0 25%;
    }
}

@media (max-width: 1180px) {
    .main-desk-container .desk-container {
        flex: 0 0 33%;
    }
}


// Desk config
// ---------------------------------------------

/* Desk create/edit popup */

.sd-wizard {
    .modal__body {
        .modal__body-content {
            display: flex;
            flex-direction: column;
            padding: 0;
            background: 0 0;
            > div, > div > div, > form, > form > fieldset {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
            }
            .content {
                flex: 1 1 auto;
                width: 100%;
                overflow-y: auto;
                padding: 2rem;
                background: $sd-background;
            }
            form.content, .field {
                display: block;
            }
            .modal__footer {
                display: block;
                flex: 0 0 auto;
            }
        }
    }
    .stages {
        .col {
            position: absolute;
            @include border-box();
            top: 60px; bottom: 10px;
            left: 0; right: 50%;
            padding: 10px 20px;
            overflow-x: hidden;
            overflow-y: auto;
            &:last-child {
                left: 50%; right: 0;
                border-left: 1px solid #e0e0e0;
            }
        }
        .row {
            padding-top: 20px;
            clear: both;
            label {
                display: inline-block;
            }
            .prevent-off {
                pointer-events: none;
            }
        }
        .heading {
            padding: 2px 0;
            color: #666;
            margin-right: 10px;
            text-transform: uppercase;
        }
        [sd-content-expiry] {
            position: relative;
            float: none;
            .right {
                position: absolute;
                top: -18px; right: 0;
            }
            label {
                font-size: 13px;
                color: $sd-text;
            }
        }
        .stage-type { margin-bottom: 10px; }
        select { margin-bottom: 10px; }
        .pills-list {
            li {
                cursor: pointer;
                label { line-height: 12px; }
                .global-label {
                    font-size: 12px;
                    color: #aaa;
                    margin-top: 5px;
                    margin-right: 5px;
                    text-transform: none;
                    span:nth-child(2) { 
                        margin-left: 0; 
                    }
                }
                &.active {
                    .global-label { 
                        color: $white; 
                        opacity: 0.8; 
                    }
                }
                &.editable {
                    padding-top: 0;
                    .char-count {
                        &.error {
                            @include text-semibold();
                            color: #D33C30;
                        }
                    }
                }
            }
            &.edit-mode {
                li.editable {
                    @include box-shadow(none);
                    outline: 1px solid $sd-blue;
                    background-color: rgba(94,169,200,0.1);
                    margin-bottom: 10px;
                }
                li:not(.editable) {
                    display: none;
                }
            }
        }
        .status-list {
            .status {
                display: block;
                @include border-radius(3px);
                @include border-box();
                margin-bottom: 5px;
                height: 28px;
                padding: 5px 10px;
                text-transform: uppercase;
                &:hover {
                    cursor: pointer;
                }
                &.todo {
                    @include status-config-color($todo-color);
                }
                &.in_progress {
                    @include status-config-color($inprogress-color);
                }
                &.done {
                    @include status-config-color($done-color);
                }
            }
        }
    }
    .people-stage {
        .header {
            .search-result {
                overflow: auto;
                border: 1px solid #ddd;
                background: #fff;
                padding: 10px;
                z-index: 1;
            }
        }
    }
    textarea {
        height: 44px;
    }
    .col-heading {
        padding: 2px 0;
        color: #666;
        margin-right: 10px;
        text-transform: uppercase;
    }
}

.user-email {
    color: #3599b6;
    font-weight: 300;
    display: inline-block;
    padding: 0 2rem;
}

.content-expiry-label {
    color: #333;
}

.modal--tabs {
    .button-toolbar {
        position: absolute;
        top: 0;
        left: 0;
        background: rgb(233, 240, 243);
        padding: 10px;
        text-align: right;
        width: 100%;
        animation: dropOut2 .3s cubic-bezier(.695,.105,.285,1.275) 1;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,.2), 0 1px 0 0 rgba(0,0,0,.1);
    }
}

.members-list {
    padding-top: 1rem;
} 

/*----------------------------------------
  #Item groups (stages, task statuses etc.)
----------------------------------------*/

.item-group {
    margin-top:5px;
    margin-bottom: 10px;
    &__content {
        padding: 2px;
        overflow: auto;
        max-height: 330px;
        overflow-x: hidden;
        &--full-height {
            max-height: none;
        }
        // vertical scroll adjustment
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            border:none;
        }
        &::-webkit-scrollbar:hover {
            background-color: $sd-background;
        }
        &::-webkit-scrollbar-thumb {
            border: none;
            background: rgba(0,0,0,0.1);
        }
        &::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.25);
        }
    }

    &__loading {
        width: 18px;
        height: 18px;
        background: url(~images/loading-large.gif) center center no-repeat $sd-background;
        background-size: 18px;
        text-align: center;
    }
    &__no-items {
        color: #bababa;
        @include text-semibold();
        cursor: default;
    }
    &__header {
        padding: 0;
        height: 26px;
        line-height: 16px;
    }
    &__name {
        font-size: 12px;
        text-transform: uppercase;
        color: #777;
        @include text-semibold();
        cursor: default;
        float: left;
        &--todo {
            color: $todo-color;
        }
        &--in_progress {
            color: $inprogress-color;
        }
        &--done {
            color: $done-color;
        }
    }

}

/*---------------------------------------------------------------
  #Content item (list item for content, tasks, users and slulines
----------------------------------------------------------------*/

.content-item {
    cursor: default;
    background: $white;
    height: 32px;
    line-height: 32px;
    @include border-box();
    border-left: 3px solid rgba(255,255,255,0);
    border-right: 2px solid $white;
    border-bottom: 1px solid #eee;
    position: relative;
    display:flex;
    padding-right: 8px;
    &--slugline-view {
        min-height: 32px;
        border-left:none;
        height:auto;
        line-height: 160%;
        padding: 10px;
    }
    &:last-child {
        border-bottom: none;
    }
    &--active {
        background: $sd-hover;
        border-right-color: $sd-blue;
    }
    &--locked {
        border-left-color: #b70101;
    }
    &.gone {
        opacity: 0.5;
    }
    &--no-border {
        border-left:none;
    }
    &__type {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        i {
            margin: 0 8px 0 6px;
            text-align: center;
            color: $grayLight;
            flex-shrink: 0;
        }
    }
    &__urgency-field {
        height: 100%;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .urgency-label, .priority-label {
        vertical-align: middle;
        flex-shrink: 0;
    }
    time {
        color:#999;
        font-size: 11px;
    }
    &__text {
        height: 32px;
        @include text-overflow();
        font-size: 12px;
        padding-right: 10px;
        flex-grow: 1;
        .keywords {
            color: $sd-keyword;
            font-weight: 500;
            text-transform: uppercase;
            margin-right: 5px;
        }
    }
    &__date time {
        white-space: nowrap;
    }
    &:not(:-moz-handler-blocked) {
        .content-item__text {
            white-space: normal;
        }
    }
    &__action {
        display: none;
        background-color: inherit;
        margin-right: -8px;
    }
    &.active {
        .action button:hover {
            background: darken($sd-hover, 10%);
        }
        &.custom-monitoring {
            background-color: #eff7fa !important;
        }
    }
    &.shifted:hover {
        .content-item__text {
            padding-right: 0;
        }
        .content-item__action {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        time {
            display:none;
        }
    }
    &.custom-monitoring:hover  {
        background-color: #f4f4f4;
        cursor: pointer;
    }
}

.slugline-item {
    @extend .content-item;
    border-left:none;
    height:auto;
    line-height: 160%;
    padding: 0 8px;
    margin:0;
    display:block;
    border-bottom: 1px #eee solid;
    &:last-child {
        border-bottom: none;
    }
    &__row {
        height: 24px;
        clear: both;
        @include text-overflow();
        &--main {
            padding-top: 10px;
        }
    }
    .place {
        font-size: 12px;
        text-transform: uppercase;
        color: #777;
        font-weight: 500;
    }
    .slugline {
        color: $sd-keyword;
        font-weight: 500;
        text-transform: uppercase;
    }
    .oldslugline {
        color: lighten($sd-keyword, 25%);
        font-weight: 400;
        text-transform: uppercase;
    }
    .headline {
        font-weight: 400;
        //color: $grayDark;
        color: #555;
    }
    time {
        color:#999;
        font-size: 11px;
    }
}