/* ****************************************************************************
 * 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;
    }

    .sui-upsell-items .sui-box-settings-row:after {
        background-color: #fff !important; // Overwrite SUI.
    }
}

/* 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-bar');
}

.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}/hb-graphic-dash-top", 'png', 192px, 182px, 30px 100% );
    }

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

/* Dashboard background images */
.wpmud .box-dashboard-welcome.sui-summary .sui-button-green {
    border-radius: 20px;
}

/* 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;
        }

        i[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,
    .wphb-historic-widget {
        padding-bottom: 0 !important;
        .sui-notice { margin: 20px 0; }
    }
    .wphb-audits-widget { padding-bottom: 20px !important; }
}

.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;
}

/* Gzip compression */
.wpmud .box-dashboard-gzip-module .sui-list-label,
.wpmud .box-dashboard-browser-caching-module .sui-list-label {
    display: flex;
    align-items: center;
}

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

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

        tbody tr td {
            &:first-of-type {
                display: flex;
                align-items: center;
            }

            [class*="sui-icon-"] {
                font-size: 20px;
            }

            &:last-of-type {
                text-align: right;

                i {
                    font-size: 16px;
                }
            }
        }
    }
}

// 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;
        }
    }
}

/* Upsell meta box */
.wpmud .box-dashboard-welcome-upsell {
    ul > li {
        font-weight: 500;
        color: #333333;
    }

    .sui-icon-check {
        vertical-align: sub;

        &:before {
            color: #8D00B1;
            margin-right: 10px;
        }
    }
}

@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;
    }
}

/**
 * Tracking modal.
 * @since 2.5.0
 */
.wpmud #tracking-modal,
.wpmud #run-performance-onboard-modal {
    .sui-box-banner {
        background-color: #F2F2F2;

        img {
            max-width: 252px;
            margin-top: 30px;
        }
    }
}

.wpmud #tracking-modal {
    .sui-box-body {
        background-color: #F8F8F8;

        .sui-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sui-toggle-label {
            font-size: 13px;
            margin-left: 10px;
        }

        .sui-tooltip {
            margin-left: 10px;
            & > i:before { color: #AAAAAA; }
        }
    }
}

/**
 * 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;
    }
}