@import '../variables.less';

//mdreport
@treeWidth: 300px;

.ui-mdreport {

    color: @mdreport-text-color;

    background: @mdreport-bg-color;

    font-size: 12px;

    border: 1px solid @common-border-color;

    position: relative;

    // report's node style
    .mdreportTreeNodeStyle() {
        >span {
            width: 16px;
            height: 34px;
            vertical-align: middle;
            display: inline-block;
            float: left;
            background: url(../../img/tree_icon.png?1) repeat-y;
        }

        .tree-node-blank-t {
            background-position: 0 center;
        }

        .tree-node-blank-l {
            background-position: -16px center;
        }

        .tree-node-blank-i {
            background-position: -63px center;
        }

        .tree-node-blank-t-p {
            background-position: -95px center;
        }

        .tree-node-blank-l-p {
            background-position: -47px center;
        }

        .tree-node-blank-t-m {
            background-position: -79px center;
        }

        .tree-node-blank-l-m {
            background-position: -31px center;
        }

        .tree-node-blank-none {
            background: none;
        }
    }

    .comment {
        padding: 5px 10px 5px 10px;
        color: @strong-text-color;
        line-height: 1.6;
        // background: url(../../img/ktip.png) 5px 0px no-repeat;
        text-align: left;

        &:before {
            content: '!';
            line-height: 15px;
            text-align: center;
            display: inline-block;
            width: 15px;
            height: 15px;
            background: #fc6;
            border-radius: 3px;
            color: #fff;
            margin-right: 5px;
        }
    }

    .credit {
        position: absolute;
        bottom: 6px;
        right: 7px;
    }

    .ui-mdreport-header {
        border-bottom: 1px solid @common-border-color;
        position: relative;
        height: 45px;
        line-height: 45px;
        text-align: left;
        background: @mdreport-header-bg-color;

        h2 {
            margin: 0 10px;
            font-size: 14px;
            line-height: 45px;
        }

        time {
            font-size: 80%;
            color: @strong-text-color;
        }

        .ui-mdreport-timerange {
            color: @strong-text-color;
        }

        .tools {
            position: absolute;
            right: 5px;
            top: 0;
            height: 45px;
            line-height: 38px;

            a {
                color: @strong-text-color;
                font-size: 12px;
                text-decoration: none;
                margin: 0 5px;
                vertical-align: middle;

                &:active {
                    color: @mdreport-active-color;
                }
            }
        }
    }

    .ui-mdreport-body {
        overflow-x: auto;
    }


    .loading-panel {
        position: absolute;
        left: 0;
        top: 31px;
        bottom: 0;
        width: 100%;
        display: none;

        .loading-box {
            height: 100%;
            background: @common-bg-color;
            background: @mdreport-loading-bg-color;
            overflow: hidden;
            text-align: center;
            line-height: 100px;
        }
    }

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .table-wrap {
        margin-left: @treeWidth;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 300px;
    }

    .table {
        min-width: 100%;
        border-collapse: collapse;
        margin: -1px -1px 0 0;

        .tr {
            &:hover {
                background: @mdreport-hover-color;
            }
        }

        td,
        th {
            border: 1px solid @mdreport-border-color;
            line-height: 32px;
            word-wrap: normal;
            white-space: nowrap;
            padding: 1px 6px;
            text-align: center;

            &:first-child {
                border-left-width: 0;
            }

            &:last-child {
                border-right-width: 0;
            }
        }

        th {
            border-bottom-width: 1px;
            background: @mdreport-highlight-bg-color;
            vertical-align: middle;
            color: @strong-text-color;
            font-weight: @mdreport-thead-font-weight;
        }

        .tree-node {
            text-align: left;
            line-height: 34px;

            .tree-node-wrap {
                height: 34px;
                cursor: pointer;
            }

            .loading {
                background-size: 16px 16px;
            }

            .tree-node-span {
                display: inline-block;
                margin: 0;
                float: none;
                height: 34px;
                .mdreportTreeNodeStyle();
            }

            .tree-node-label {
                display: inline-block;
                padding-right: 10px;
                vertical-align: top;

                input[type="checkbox"] {
                    margin: 0 2px 2px;
                }
            }

            .tree-node-wrap.active {
                background: @mdreport-hover-color;

                .tree-node-span,
                .tree-node-label {
                    background: @mdreport-hover-color;
                }
            }

        }

        .sort {
            cursor: pointer;
            padding-right: 10px;

            span {
                padding: 0 14px;
            }
        }

        .sort-desc {
            background: url(../../img/sort-desc.png) right center no-repeat @mdreport-highlight-bg-color;
        }

        .sort-asc {
            background: url(../../img/sort-asc.png) right center no-repeat @mdreport-highlight-bg-color;
        }
    }

    .report-error-holder {
        height: 220px;
        line-height: 210px;
        font-size: 15px;
        text-align: center;
        color: #9a9a9a;
    }

    .nodata {
        border-bottom: 1px solid @mdreport-border-color;
        line-height: 30px;
    }
}
