// ------------------------------------------------------------------
// Odoo
// ------------------------------------------------------------------

// This file is necessary to make the community edition of the Odoo web
// client compatible with the enterprise edition.  

// The problem is that we have two web clients in parallel, and every
// addons should behave properly with both.

@brand-primary: @odoo-brand-primary;

.oe-view-manager {
    background-color: @odoo-webclient-background-color !important;
}

.o_kanban_view {
    background-color: @odoo-webclient-background-color;

    .o_kanban_config i, .o_kanban_quick_add i {
        color: @odoo-main-text-color !important;
        &:hover {
            background-color: darken(@odoo-webclient-background-color, 10%) !important;
        }
    }
    .o_column_title, .o_kanban_title, .o_kanban_add_column, .o_column_unfold {
        color: @odoo-main-text-color !important;
    }

    .o_column_folded {
        background-color: darken(@odoo-webclient-background-color, 5%) !important;
        border-color: darken(@odoo-webclient-background-color, 10%) !important;
    }

    .o_column_quick_create {
        background-color: darken(@odoo-webclient-background-color, 10%) !important;
    }

    &.o_kanban_grouped .o_kanban_group .o_kanban_header {
        margin-bottom: 2px; // For the buttons not to overlap first record's box shaddow on hover
    }
}

.oe_list {
    background-color: white !important;
}

// Buttons and links
@link-hover-decoration: none;
.btn, .btn-group > .btn {
    &:hover, &:active, &:focus, &:active:focus {
        outline: none;
    }
}
.btn-icon {
    .btn-default;
}
.oe_button {
    .btn-default;
    &.oe_highlight, &.btn-primary {
        .btn-primary;
    }
    &.oe_link, &.btn-link {
        .btn-link;
    }
}
.oe_highlight {
    .btn-primary;
}
.oe_link {
    .btn-link;
}

.openerp .oe_avatar {
    float: left;
}

.openerp .oe_button_box {
    float: right;
}


// Pager input (to edit pager values)
.o_pager_value > input {
    width: 60px;
    text-align: right;
    &:focus {
        outline: none;
    }
}

.oe_form_field_one2many, .oe_form_field_many2many {
    .oe-view-manager {
        background-color: white;

        .o_kanban_view {
            background-color: white;

            .o_kanban_record {
                box-shadow: none;
            }
        }
    }
}

// Buttons containing only an icon
.o_icon_button {
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none;
}

// Stars
.o_priority {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    > .o_priority_star {
        display: inline-block;
        font-size: 1.35em;
        &:hover, &:focus {
            text-decoration: none;
            outline: none;
        }

        + .o_priority_star {
            padding-left: 5px;
        }

        &.fa-star-o {
            color: @odoo-main-color-muted;
        }
        &.fa-star {
            color: gold;
        }
    }
}

.oe_title {
    .o_priority > .o_priority_star {
        font-size: inherit;
    }
}

.o_text_overflow {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // To update display context changed by overflow:hidden
}

.oe-x2m-control-panel {
    background-color: white;
}

div.o_checkbox {
    display: inline-block;
    vertical-align: sub;
    > input + span {
        display: none;
    }
}

.openerp .oe_formview {
   .oe_button_box {
        .oe_stat_button {
            text-align: left;

            .o_button_icon {
                width: 30%;
                display: inline-block;
                vertical-align: middle;
            }

            .o_stat_info { // contains the value and text
                display: inline-block;
                vertical-align: middle;
                max-width: 70%;
                line-height: 1.2;

                .o_stat_value {
                    .o_text_overflow;
                    font-weight: 700;
                    color: @odoo-brand-primary;
                }
                .o_stat_text {
                    .o_text_overflow;
                    font-size: small;

                    .o_stat_value {
                        display: inline;
                    }
                }
            }

            // Some buttons only display text and directly use the WidgetButton template instead of StatInfo
            > span {
                .o_stat_info; // layout
                font-size: small;
                white-space: normal; // text on several lines if needed
            }
        }

        &, & + .oe_avatar {
            + .oe_title {
                width: 400px;
            }
        }
    }

    .oe_avatar {
        > img {
            max-width: 90px;
            max-height: 90px;
        }

        + .oe_title {
            padding-left: 95px;
        }
    }

    .o_row {
        > * {
            width: auto!important; // oe_inline
        }
        > div {
            display: inline-block;
            + div  {
                margin-left: 5px;
            }
        }
    }

    .oe_form label {
        font-size: 13px;
    }

    .oe_form_group .oe_form_group_cell:not(.oe_form_group_cell_label) label {
        font-weight: normal;
    }

    .o_form_field_many2manytags {
        .o-inline-flex-display();
        .o-flex-flow(row, wrap);
        .o-align-items(flex-start);

        .badge {
            cursor: pointer;
            .o-flex(0, 0, auto);
            margin: 0 3px 3px 0;
            color: #FFF;
            font-size: 12px;
            .o_delete {
                cursor: pointer;
            }
            > ul {
                @colored-tag-width: 45px;
                width: 5*@colored-tag-width + 3px;
                > li {
                    float: left;
                    color: black;
                    > span {
                        border-radius: 6px;
                        width: @colored-tag-width;
                        height: 30px;
                        display: inline-block;
                        border: 2px solid white;
                        cursor: pointer;
                        padding: 0;

                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }
                > li:last-child {
                    margin-top: 7px;
                    cursor: auto;
                }
            }
        }

        padding: 0;
        > .oe_form_field_many2one {
            padding: 0;
        }
    }

    &.oe_form_editable .o_form_field_many2manytags {
        border: 1px solid #CCC;
        border-radius: 3px;

        &.o_form_field_empty {
            display: none;
        }

        > .oe_form_field {
            .o-flex(1, 0, 100px);

            input {
                border: none;
            }
        }
    }

    .o_address_format {
        width: 100%;

        > .oe_form_field {
            width: auto;
            display: block;
        }

        > .o_address_street, > .o_address_country {
            clear: left;
            width: 100%;
        }
        > .o_address_city, > .o_address_state, > .o_address_zip {
            float: left;
            margin-right: 2%;
        }
        > .o_address_zip {
            margin-right: 0;
        }
        &.o_zip_city {
            > .o_address_zip {
                margin-right: 2%;
            }
            > .o_address_city {
                margin-right: 0;
            }
            > .o_address_state {
                clear: left;
                margin-right: 0;
            }
        }
        &.o_city_state {
            > .o_address_state {
                margin-right: 0;
            }
            > .o_address_zip {
                clear: left;
                margin-right: 0;
            }
        }
    }
    &.oe_form_editable .o_address_format {
        > .o_address_city {
            width: 38%;
        }
        > .o_address_state {
            width: 33%;
        }
        > .o_address_zip {
            width: 25%;
        }
        &.o_zip_city {
            > .o_address_zip {
                width: 38%;
            }
            > .o_address_city {
                width: 60%;
            }
            > .o_address_state {
                width: 100%;
            }
        }
        &.o_city_state {
            > .o_address_city {
                width: 50%;
            }
            > .o_address_state {
                width: 48%;
            }
            > .o_address_zip {
                width: 100%;
            }
        }
    }
}

// Many2many tags
.o_form_field_many2manytags {
    .o_tag_color_0 {
        background-color: #B6BBBF;
    }
    .o_tag_color_1 {
        background-color: #61BD4F;
    }
    .o_tag_color_2 {
        background-color: #F2D600;
    }
    .o_tag_color_3 {
        background-color: #FFAB4A;
    }
    .o_tag_color_4 {
        background-color: #EB5A46;
    }
    .o_tag_color_5 {
        background-color: #A24689;
    }
    .o_tag_color_6 {
        background-color: #0079BF;
    }
    .o_tag_color_7 {
        background-color: #00C2E0;
    }
    .o_tag_color_8 {
        background-color: #4CD98E;
    }
    .o_tag_color_9 {
        background-color: #FF80CE;
    }
    .o_tag_color_10 {
        background-color: #4D4D4D;
    }
}

// Search options dropdowns
.o-search-options-dropdown-custom-li() {
    margin: 3px 25px;
    width: auto;
    max-width: 250px;

}
// Open and closed carets in dropdowns
.o_closed_menu {
    position: relative;
    a:before {
        .o-caret-right;
        .o-position-absolute(@top: 50%, @left: 12px);
        margin-top: (-@caret-width-base);
    }
}
.o_open_menu {
    position: relative;
    a:before {
        .o-caret-down;
        .o-position-absolute(@top: 50%, @left: 9px);
        margin-top: (-@caret-width-base);
    }
}

// Favorites Menu -> Add to my dashboard
.o_favorites_menu {
    .o_add_to_dashboard_input {
        .form-control();
    }
    .o_add_to_dashboard_button {
        .btn();
        .btn-default();
    }
}

// Because the `web_planner` module has to work with Odoo community and enterprise without
// code duplication, fine-tune the display of it in the community webclient here
#PlannerDialog {
    top: 35px;
    -webkit-box-shadow: 0 3px 9px #666666;
    box-shadow: 0 3px 9px #666666;
    padding-bottom: 44px;
}