/*  ==========================================================================
    LAYOUT
    ========================================================================== */

/*
    Site sections
    ==================================== */

.dropdown { position: relative; }



/*
    Header
*/
.Header 
{
    // @todo: optimizirati promjenu visine headera na više mjesta (header mora biti fixed, a elementi ne) 
    @include position(absolute, 0px 0px 0 0px);
    @include rem('height',60px);
    @include rem('line-height',60px);
    @include transform(translate3d(0,0,0)); // privremeni fix radi repaint buga u firefoxu
    background-color: $color-white;
    box-shadow: 0px 2px 2px 0px rgba($color-black,.1);
    padding-left: 70px;
}



/* Navigation */
.Navigation {
    @include position(absolute, 0px 0 0 0px);
}

    .Navigation-link
    {
        @include rem('font-size', 28px);
        @include rem('height', 60px);
        @include rem('line-height', 60px);
        @include rem('width', 70px);
        @include transition(all 0.25s ease-out);
        //background-color: $color-brand-alpha;
        //background-color: #e20a1d;
        //box-shadow: 1px 0px 0px 0px $color-brand-beta;
        color: $color-white;
        display: block;
        text-align: center;
        width: 70px;
        
        //.fa-times { display: none; }

        @include hover {
            //color: $color-white;
            //background-color: $color-brand-beta;
            //background-color: darken(#e20a1d,5%);
        }
    }

    .Navigation.open .Navigation-link { 
        color: $color-white; 
        //background-color: $color-brand-beta; 
        //background-color: darken(#e20a1d,5%);
        
        /*.fa-bars  { display: none; }
        .fa-times { display: inline-block; }*/
    }

    .Navigation-panel
    {
        @include position(fixed, 50px 0 0px -240px);
        @include transition(all 0.25s ease-out);
        background-color: $color-brand-beta;
        //background-color: darken(#e20a1d,5%);
        box-shadow: 2px 2px 2px 0px rgba($color-black,.1);
        overflow-y: auto;
        width: 240px;

        /* @todo: ubaciti extra element i prebaciti dio elemenata na taj element
        &:before {
            @include linear-gradient(to right, rgba($color-brand-beta,0), $color-brand-beta);
            @include position(absolute, 0px 0px 0 0px);
            content: "";
            height: 10px;
        }*/

        @media screen and (min-width:mq-em($bp-gamma)) {
            top: 60px;
        }

    }

    .NavMain {
        margin: 0;
        padding-bottom: 70px;
        padding-top: $spacing-size-m + px;
    }

    .js-dropdownSlide.open .Navigation-panel { left: 0; }

    .Bars {
        @include inline-block;
        height: 20px;
        position: relative;
        width: 24px;

        .Bars-item {
            @include position(absolute, 0 0px);
            @include transition(all 0.2s ease);
            background-color: #e31123;
            //box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
            border-radius: 1px;
            height: 4px;
            margin-top: -2px;
        }

        .Bars-item--top {
            top: 2px;
        }

        .Bars-item--middle {
            top: 50%;
        }

        .Bars-item--bottom {
            top: 18px;
        }

        .Navigation.open & {

            .Bars-item {
                top: 50%;
            }

            .Bars-item--top {
                @include transform(rotate(45deg));
            }

            .Bars-item--middle {
                @include opacity(0);
            }

            .Bars-item--bottom {
                @include transform(rotate(-45deg));
            }

        }

    }


.BrandingWrap {
    float: left;
    margin-left: -20px;
    padding: 0 $spacing-size-l + px;
}

.Branding {
    @include helper-ir;
    @include inline-block;
    margin-top: -2px;
    vertical-align: middle;
}

.Branding--large {
    margin: 0;
}

.AppInfo {
    box-shadow: -1px 0 0 0 #eee;
    float: left;
    padding: 0 20px;
    text-transform: uppercase;

    .AppInfo-branding {
        float: left; 
        
        color: $color-default; 
        @include rem('font-size', 15px); 
        @include rem('line-height', 60px); 
        //font-weight: $font-weight-600;

        @include hover {
            color: $color-brand-alpha;
        }
    }

    .AppInfo-title
    {
        float: left;
        white-space: nowrap;
        margin-left: $spacing-size-s + px;
        //color: $color-default; 
        font-weight: $font-weight-300; color: $color-meta; 
        @include rem('font-size', 15px); 
        @include rem('line-height', 60px);
        
    }
    

}


/* Language selector */

.Language {
    //@include rem('margin-left', 60px);
    float: left; 
}
 
.Language-link  
{ 
    @include rem('font-size', 15px); 
    @include rem('height', 60px); 
    @include rem('line-height', 60px); 


    @include transition(all 0.25s ease-out);
    color: $color-default; 
    text-transform: uppercase;
    box-shadow: -1px 0px 0px 0px $color-light, 1px 0px 0px 0px $color-light;
    color: $color-dark;
    display: block;
    padding: 0 42px 0 20px;
    position: relative;

    @include hover {
        color: $color-black;
    }

    .Language-icon 
    {
        @include position(absolute, 20px 20px 0 auto);
        @include rem('font-size', 17px);
    }

    @media screen and (max-width:mq-em($bp-gamma - 1)) {
        //height: 50px;
        //line-height: 50px;
        //width: 60px;

        // .Language-name,
        // .Language-icon
        // {
        //     display: none;
        // }

    }

}

.Language.open .Language-link
{
    box-shadow: -1px 0px 0px 0px $color-meta, 1px 0px 0px 0px $color-meta;
}



/* Search */
.Search {
    //@include rem('height', 60px);
    @include rem('width', 76px);
    @include rem('margin-top', 12px);
    float: right;
    padding: 0 10px;

    .FormElement--group {
        margin: 0;
    }
}

.Search-form {
    line-height: 1;
}

.Search-term {
    @include opacity(0);
    @include position(absolute, 0px 0px 0 0);
    @include transition(all 0.25s ease-out);
    padding-right: 170px !important;
}

.Search-advanced {
    @include position(absolute, 12px 50px 0 0);
    color: $color-brand-alpha;
    cursor: pointer;
    font-size: em(11);
    font-weight: 300;
    text-transform: uppercase;
}

@media screen and (min-width:mq-em($bp-delta)) {
    .Search {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 580px;
        width: 30%;
    }

    .Search-term {
        @include opacity(1);
        float: none;
        position: static;
    }
}

@media screen and (max-width:mq-em($bp-delta - 1)) {
    .Search-term {
        .is-expanded & {
            @include opacity(1);
            width: 300px;
        }
    }
}



/* Notification */
.Notification { 
    @include rem('height',60px);
    @include rem('width',60px);
    float: right;
    
    .Notification-link
    { 
        box-shadow: -1px 0px 0px 0px $color-light;
        display: block; 
        width: 100%; 
        height: 100%; 
        text-align: center;
        @include rem('line-height', 60px);
        @include rem('font-size', 26px);
        @include transition(all 0.25s ease-out);
        color: $color-info;
        position: relative;
        
        @include hover {
            .fa {
                color: $color-meta;
            }
        }

        &.u-isAlerting 
        {
            color: $color-error;
            
             @include hover {
                .fa {
                    color: $color-black;
                }
            }

            .Number { 
                display: block;
                
                @include rem('font-size', 13px); @include rem('line-height', 30px);
                color: $color-white; font-weight: $font-weight-500;

                width: 30px; height: 30px;
                
                position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px;
            }
        }

    }

    @media screen and (max-width:mq-em($bp-gamma - 1)) {
        
        .Notification-link {

            &.u-isAlerting 
            {
                .Number { 
                    margin-top: -12px;
                }
            }

        }
    }

}






/* User */
.User { float: right; }
 
.User-link  
{ 
    color: $color-default;
    @include rem('font-size', 15px);
    @include rem('height', 60px);
    @include rem('line-height', 60px);
    text-transform: uppercase;
    @include transition(all 0.25s ease-out);
    box-shadow: -1px 0px 0px 0px $color-light, 1px 0px 0px 0px $color-light;
    color: $color-dark;
    display: block;
    // margin-left: 60px;
    padding-left: 20px;
    padding-right: 42px;
    position: relative;

    @include hover {
        color: $color-black;
    }

    .User-image 
    { 
        position: absolute; top: 10px; left: 15px; 
        display: block;
        //float: left;
        img { @include border-radius($border-radius-round); }            
    }

    .User-icon 
    {
        @include position(absolute, 20px 20px 0 auto);
        @include rem('font-size', 17px);
        //float: left;
    }

    @media screen and (max-width:mq-em($bp-gamma - 1)) {
        //height: 50px;
        //line-height: 50px;
        padding-left: 50px;
        //padding: 0;
        //width: 60px;

        .User-name
        //.User-icon
        {
            display: none;
        }

    }

}

.User.open .User-link
{
    box-shadow: -1px 0px 0px 0px $color-meta;
}

    

















/* Content */
.Content {
    @include rem('padding-top', 60px);
    height: 100%;
}

/* Page header */
.PageHeader {
    background: $color-light;
    // margin-bottom: $spacing-size-xl + px;
    // padding: $spacing-size-m + px;
}

.PageHeader-title {
    @include rem('font-size', 28px);
    float: left;
    position: relative;
    
    .Return {
        //display: none;
        position: absolute;
        left: -60px;
        width: 60px;
        height: 60px;
        text-align: center;
    }
}

.PageHeader-wrapButton {
    float: right;

    .Button-text {
        display: none;
    }

}

@media screen and (min-width:mq-em($bp-gamma)) {

    .PageHeader {
        padding: 25px 60px;
    }

    .PageHeader-title {
        @include rem('font-size', 50px);
    }

    .PageHeader-wrapButton {

        .Button-icon {
            display: none;
        }

        .Button-text {
            display: block;
        }

    }

}

.PageHeader--login {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;

    .PageHeader-title {
        float: none;
        text-align: center;
    }

}


/* Page Content */
.PageContentWrap { height: 100%; overflow-y: auto; }

.PageContent    { padding-top: 30px; padding-bottom: 30px; }
.PageContent--edit {
    padding-top: 50px; padding-bottom: 90px;

    // temp fix radi ostalih projekata
    > * {
        position: static;
    }

}









/* Form groups */
.Group {
    background-color: #fff;
    border: 2px solid #ebebeb;
    margin: 0 10px;
    // padding: 30px;
    padding-bottom: 10px; // @todo: rewrite

    .cf-form-group-label {
        border-bottom: 1px solid #e5e5e5;
        //font-weight: $font-weight-700;
        text-transform: uppercase;
        font-size: em(16);
        margin-bottom: 10px; // @todo: rewrite
        padding: 20px;
    }

}

.WidgetGroup {
    @extend .Group;
    margin: 10px 0 0;
}

/* Actions */
html body .Preview 
{ 
    position: fixed;
    bottom: 10px; right: 50px;
    z-index: 1000;
    
    .Button-text {
        display: none;
    }

    @media screen and (min-width:mq-em($bp-gamma)) {

        .Button-icon {
            display: none;
        }

        .Button-text {
            display: block;
        }

    }

}

.Actions 
{ 
    @include position(fixed, 0 0px 0px 0px);
    //@include position(absolute, 0 0px 0px 0px); // radi skakanja u chromeu, privremeni fix napravljen sa position absolute i u-positionStatic
    background: $color-white;
    box-shadow: 0px -2px 2px 0px rgba($color-black,.1);
    padding: 10px;

    .Button {
        margin-left: $spacing-size-s + px;

        &:first-child {
            margin-left: 0;
        }

    }

    .Button-text {
        display: none;
    }
    .cf-form-field { padding-top: 0; padding-bottom: 0; }

    @media screen and (min-width:mq-em($bp-gamma)) {
        padding-left: 55px;
        padding-right: 55px;

        .Button {
            margin-left: $spacing-size-m + px;
        }

        .Button-icon {
            display: none;
        }

        .Button-text {
            display: block;
        }

    }

}

.Actions-buttonGroup {
    float: left;
}

.Actions-revisionInfo {
    float: left;
    margin: $spacing-size-m + px 0 0 $spacing-size-m + px;

    @media screen and (max-width:mq-em($bp-gamma - 1)) {
        display: none;
    }
 
}

.Actions-mainAction {
    float: right;

    /*@media screen and (min-width:mq-em($bp-beta)) {
        float: right;
    }*/

}


// @todo: rewriteati; upitno ostaje li ovaj layout
@media screen and (max-width:mq-em($bp-gamma - 1)) {

    .Actions {
        padding: 0;

        .Button {
            border: none;
            border-radius: 0;
            float: left;
            margin: 0;
            padding: 20px 30px !important;
            width: percentage(1/2);
        }

    }

    .Actions-buttonGroup {
        width: percentage(2/3);
    }

    .Actions-mainAction {
        float: left;
        width: percentage(1/3);

        .Button {
            width: 100%;
        }

    }

}

/* Panel */
.Panel {
    @include position(fixed, 50px 0px 0px 0);
    background-color: $color-white;
    border-left: 1px solid #ddd;
    //padding: 20px;
    width: 500px;
}

.Panel-search {
    padding: 10px 0;

    .form-group {
        margin-right: 10px;
    }

}


/*
    Z-index
    ====================================
*/

.Header { z-index: 1000; }
.Navigation { z-index: 1000; }
.Navigation-panel { z-index: 1000; }

.Title     { z-index: 990; }
.NavInpage { z-index: 980; }


.Actions { z-index: 1000; }



/* TEMP NAV AND CONTENT SLIDING */


.js-showNavigation .tmp {  }


.Content 
{ 
    /*@include transition(all 0.25s ease-out);
    position: relative;
    left: 0;*/
}

.NavInpage
{  
    @include transition(all 0.25s ease-out);    
}

.js-showNavigation .Content, .js-showNavigation .NavInpage
{ 
    left: 240px;
    
}

