/* ****************************************************************************
 * MODULES: DASHBOARD
 */

.wpmud div[class^="box-dashboard-"] {
    /* Images */
    .sui-box-title:before {
        color: #333333;
        float: left;
        font-size: 20px;
        margin-right: 10px;
        line-height: 30px;
    }
}

/* Meta boxes on the left */
.wpmud div[class^="box-dashboard-performance"] .sui-box-title,
.wpmud div[class^="box-dashboard-welcome-upsell"] .sui-box-title {
    @include icon(before, 'hummingbird');
}
.wpmud div[class^="box-dashboard-caching-page"] .sui-box-title {
    @include icon(before, 'page');
}
.wpmud div[class^="box-dashboard-browser"] .sui-box-title {
    @include icon(before, 'refresh2');
}
.wpmud div[class^="box-dashboard-cloudflare"] .sui-box-title {
    @include icon(before, 'cloudflare');
}
.wpmud div[class^="box-dashboard-caching-gravatar"] .sui-box-title {
    @include icon(before, 'profile-male');
}
.wpmud div[class^="box-dashboard-smush"] .sui-box-title {
    @include icon(before, 'smush');
}

/* Meta boxes on the right */
.wpmud div[class^="box-dashboard-gzip"] .sui-box-title {
    @include icon(before, 'zip');
}
.wpmud div[class^="box-dashboard-minification"] .sui-box-title {
    @include icon(before, 'arrows-in');
}
.wpmud div[class^="box-dashboard-advanced-tools"] .sui-box-title {
    @include icon(before, 'wand-magic');
}
.wpmud div[class^="box-dashboard-uptime"] .sui-box-title {
    @include icon(before, 'uptime');
}
.wpmud div[class^="box-dashboard-reports"] .sui-box-title {
    @include icon(before, 'graph-line');
}

.wpmud .wrap-wphb .box-dashboard-welcome.sui-summary:not(.sui-rebranded):not(.sui-unbranded):not(.sui-summary-sm) {
    @if variable-exists(summary-image) {
        @include background-2x( "#{$image--path}/summary-graphic-dash", 'png', 192px, 182px, 30px 100% );
    }

    @include media(max-width, md) {
        background-image: unset;
    }
}

/* Dashboard background images */
.wpmud .box-dashboard-welcome.sui-summary .sui-button-purple {
    border-radius: 20px;
    min-width: 50px;
    min-height: 18px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Dashboard Performance Test */
.wpmud .sui-color-accessible .box-dashboard-performance-module .sui-table td:first-child  {
    padding-left: 15px !important;
}

.wpmud .box-dashboard-performance-module {
    .wphb-performance-report-item {
        cursor: pointer;
    }

    .sui-table {
        border: 0;

        td:first-child { padding-left: 0 !important; }

        td:last-child {
            padding-right: 0 !important;
            text-align: right;
        }

        td:nth-child(2) {
            display: flex;
            align-items: center;
            justify-content: center;
            & > div {
                width: 62px;
            }
        }

        span[class^=sui-icon] {
            margin-left: 7px;
            margin-right: 0;
            vertical-align: sub;
        }
    }

    .sui-box-body {
        border-bottom: 1px solid #E6E6E6;
        .status-text { float: right; }
        .sui-table { margin-top: 10px; }
    }

    .sui-box-footer { border-top: 0 !important; }

    .wphb-metrics-widget {
        padding-bottom: 0 !important;
        .sui-notice { margin: 20px 0; }
    }
}

.wpmud .wphb-border-frame .wphb-caching-summary-item-type,
.wpmud .wphb-border-frame .wphb-gzip-summary-item-type {
    display: flex;
    align-items: center;
    align-content: center;
}

/* Status text on dashboard meta boxes */
.wpmud .sui-box .status-text {
    color: #888888;
    font-size: 13px;
    line-height: 22px;
    margin-top: 5px;
}

/* Dashboard Asset Optimization */
.wpmud .box-dashboard-minification-network-module {
    .sui-button-purple {
        border-radius: 20px !important;
        text-transform: none !important;
    }

    .sui-disabled {
        background-color: rgba(242,242,242,0.5);
        margin-left: -30px !important;
        margin-right: -30px !important;
        padding: 20px 30px !important;
        border-bottom: 0 !important;

        & + li {
            border-top: 1px solid #E6E6E6;
        }
    }
}

.wpmud .box-dashboard-minification-module .wphb-pills {
    font-weight: bold;
}

/* Reporting meta box */
.wpmud .box-dashboard-reports {
    p:first-of-type {
        margin-bottom: 10px !important;
    }

    table.sui-flushed {
        margin-left: -30px;
        margin-right: -30px;
        width: calc(100% + 60px);
        border-top: 0;
        border-left: 0;
        border-right: 0;

        td:nth-child(3) { text-align: right; }
    }
}

// Dashboard lists
@include body-class(true) {
    li.sui-list-header {
        justify-content: space-between;
        padding-bottom: 0;
        > span {
            color: #333333;
            font-size: 13px;
            font-weight: bold;
            line-height: 30px;
            padding-bottom: 0;
        }
    }
}

@include bp(phone) {
    .wpmud .box-dashboard-minification-module .wphb-pills {
        display: block;
    }

    .wpmud .sui-box .status-text {
        line-height: 15px;
        margin-top: 0;
        padding-left: 10px;
        word-wrap: break-word;
        max-width: 175px;
    }
}

/**
 * Upgrade modal.
 *
 * @since 2.6.0
 */
.wpmud #upgrade-summary-modal {
    .wphb-upgrade-item {
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 0;
        display: list-item;
        list-style-type: disc;
        list-style-position: inside;
    }

    .wphb-upgrade-item-desc {
        font-size: 13px;
        line-height: 22px;
        margin-top: 0;
        color: #888;
    }

    .wphb-upgrade-feature {
        .sui-list {
            display: flex;
            flex-flow: row wrap;
            margin: 15px 0 12px 5px;

            li {
                width: 50%;
                padding: 9px 0 9px 9px !important;
                font-size: 14px;
                line-height: 30px;

                .sui-icon-check:before {
                    color: #333333;
                }
            }

            li:last-child {
                border-bottom: 1px solid #E6E6E6;
            }
        }
    }
}

/**
 * Clear cache modal.
 *
 * @since 2.7.1
 */
.wpmud #clear-cache-modal {
    label.sui-checkbox { margin: 0 0 5px }
    span.sui-checkbox-description { margin-bottom: 10px }
}

/**
 * Tutorials
 *
 * @since 2.8.0
 */
.wpmud #wphb-dashboard-tutorials > .sui-notice,
.wpmud .sui-tutorials-slider-box {
    margin-bottom: 30px !important;
}

.dashboard-delay-highlight-sui-box {
    margin-left: -30px;
    padding-left: 30px;
    padding-right: 30px;
    width: calc(100% + 60px);
    margin-top: 40px;
    border-top: 1px solid #e6e6e6;
    .dashboard-delay-highlight {
        margin-top: 10px;
        padding-top: 10px;
        .sui-no-margin-bottom .sui-tag.sui-tag-beta {
            margin-left: 10px;
            vertical-align: middle;
            background-color: #1abc9c;
        }
        ul.sui-list {
            .sui-tag.sui-tag-blue {
                padding: 2px 5px;
            }
        }
    }
}

.sui-wrap.sui-color-accessible .dashboard-delay-highlight-sui-box .sui-tag.sui-tag-beta {
    background: #000000;
}