/* Product management mobile styles extracted from userCenter. */
@media (max-width: 768px) {
    .productTable_m {
        gap: 6px;
        min-height: calc(100vh - var(--nav-top-h) - var(--nav-top-h-page) - 70px);
    }

    .productTable_m .service-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-bottom: 20px;
        background: #fff;
    }

    .productTable_m .service-card:last-child {
        margin-bottom: 0;
    }

    .productTable_m .service-card .service-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 20px 20px 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #e1e6f0;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        min-width: 0;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m img {
        flex: 0 0 auto;
        margin-top: 4px;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .service-name {
        display: block;
        margin-bottom: 4px;
        overflow: hidden;
        color: var(--txtcolor);
        font-size: 16px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .service-domain {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #999;
        font-size: 14px;
        white-space: nowrap;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .productstate-m {
        font-size: 14px;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .productstate-m.t-suspended,
    .productTable_m .service-card .service-card-header .instanceInformation-m .productstate-m.t-fraud {
        color: var(--danger);
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .productstate-m.t-active {
        color: #34c38f;
    }

    .productTable_m .service-card .service-card-header .instanceInformation-m .productstate-m.t-pending {
        color: var(--warning);
    }

    .productTable_m .service-card .service-m-suspend-card[hidden] {
        display: none !important;
    }

    .productTable_m .service-card .service-m-suspend-card:not([hidden]) {
        display: flex !important;
        align-items: flex-start;
        gap: 8px;
        box-sizing: border-box;
        margin: 12px 20px 0;
        padding: 8px 12px;
        overflow-wrap: break-word;
        border: 1px solid #ffccc7;
        border-left: 3.5px solid #ff4d4f;
        border-radius: 6px;
        background: #fff2f0;
        color: #cf1322 !important;
        font-size: 12.5px;
        line-height: 1.5;
        white-space: normal !important;
        word-break: break-all !important;
    }

    .productTable_m .service-card .service-m-suspend-card .suspend-msg-content {
        flex: 1;
        min-width: 0;
        word-break: break-all;
    }

    .productTable_m .service-card .service-m-suspend-card .suspend-tag {
        margin-right: 2px;
        color: #a8071a;
        font-weight: 600;
    }

    .productTable_m .service-card .service-m-suspend-card .suspend-text {
        color: #cf1322;
    }

    .productTable_m .service-card .service-card-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px 14px;
    }

    .productTable_m .service-card .service-detail {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 20px;
        padding: 10px 0;
    }

    .productTable_m .service-card .service-detail .label {
        min-width: 70px;
        color: #999;
        font-weight: 400;
    }

    .productTable_m .service-card .service-detail > div {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .productTable_m .service-card .service-detail .expirationReminder,
    .productTable_m .service-card .service-detail .status-text {
        font-size: 14px;
    }

    .productTable_m .service-card .service-detail .service-billing .automatic-renewal {
        color: #d3d3d3;
    }
}

.service-resource-monitor {
    width: 190px;
    margin-top: 9px;
}

.service-resource-row {
    display: grid;
    grid-template-columns: 34px minmax(62px, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    color: #47645d;
    font-size: 11px;
    line-height: 1;
}

.service-resource-label {
    color: #315b51;
    font-weight: 700;
}

.service-resource-track {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeee7;
    box-shadow: inset 0 1px 2px rgba(23, 107, 91, 0.12);
}

.service-resource-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4e78e8, #7c9cff);
    transition: width 0.45s ease, background 0.25s ease;
}

.service-resource-memory .service-resource-track i {
    background: linear-gradient(90deg, #8458d6, #b084ed);
}

.service-resource-row.is-danger .service-resource-track i {
    background: linear-gradient(90deg, #e5484d, #ff7b72);
}

.service-resource-row.is-loading .service-resource-track i {
    width: 42% !important;
    background: linear-gradient(90deg, #c9d4ed, #8fa8e8, #c9d4ed);
    background-size: 200% 100%;
    animation: service-resource-loading 1.35s ease-in-out infinite;
}

.service-resource-value {
    min-width: 34px;
    color: #315b51;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@keyframes service-resource-loading {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.service-resource-monitor-mobile {
    width: min(100%, 360px);
    margin: 0;
}

.service-resource-monitor-mobile .service-resource-row {
    grid-template-columns: 38px minmax(80px, 1fr) auto;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .service-resource-detail {
        align-items: flex-start !important;
    }

    .service-resource-monitor-mobile {
        width: calc(100vw - 130px);
        min-width: 170px;
    }

    .service-resource-monitor-mobile .service-resource-value {
        max-width: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}