@import '../../style/theme.less';

page {
    min-height: 100%;
    background: @bg-header;
}

.category-manage-page {
    min-height: 100vh;
    padding: 24rpx;
    background: @bg-header;
    box-sizing: border-box;
}

.category-manage-page__summary {
    display: flex;
}

.category-manage-page__summary-card {
    flex: 1;
    padding: 28rpx 20rpx;
    background: @bg-white;
    border-radius: @radius-xl;
    text-align: center;
    box-shadow: @shadow;
}

.category-manage-page__summary-card+.category-manage-page__summary-card {
    margin-left: 20rpx;
}

.category-manage-page__summary-num {
    display: block;
    font-size: 40rpx;
    font-weight: 800;
    color: @text-title;
}

.category-manage-page__summary-label {
    display: block;
    margin-top: 10rpx;
    font-size: 22rpx;
    color: @text-secondary;
}

.category-manage-page__hint,
.category-manage-page__loading {
    margin-top: 24rpx;
    padding: 24rpx 28rpx;
    background: @bg-white;
    border-radius: @radius;
    font-size: 24rpx;
    line-height: 1.6;
    color: @text-secondary;
    box-shadow: @shadow;
}

.category-manage-page__list,
.category-manage-page__cloud-only {
    margin-top: 24rpx;
}

.category-manage-page__section-title {
    display: block;
    margin: 0 4rpx 16rpx;
    font-size: 26rpx;
    font-weight: 700;
    color: @text-secondary;
}

.category-card {
    padding: 28rpx;
    margin-bottom: 20rpx;
    background: @bg-white;
    border-radius: @radius-xl;
    box-shadow: @shadow;
    border: 2rpx solid transparent;
}

.category-card--synced {
    border-color: fade(#93d333, 30%);
}

.category-card--missing {
    border-color: fade(#ffb703, 40%);
}

.category-card--outdated {
    border-color: fade(#ff8f1f, 35%);
}

.category-card--cloud-only {
    border-color: fade(#8ecae6, 35%);
}

.category-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.category-card__meta {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.category-card__icon {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background: fade(@brand, 18%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    line-height: 72rpx;
    text-align: center;
    flex-shrink: 0;
}

.category-card__title-box {
    min-width: 0;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.category-card__title-box-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .category-card__id {
        margin-left: 20rpx;
        font-size: 26rpx;
        color: @text-secondary;
    }
}

.category-card__title {
    display: block;
    font-size: 30rpx;
    font-weight: 700;
    color: @text-title;
}

.category-card__subtitle {
    display: block;
    margin-top: 6rpx;
    font-size: 22rpx;
    color: @text-secondary;
}

.category-card__badge {
    margin-left: 16rpx;
    padding: 8rpx 16rpx;
    border-radius: 999rpx;
    font-size: 22rpx;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
}

.category-card__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: 16rpx;
    gap: 16rpx;
}

.category-card__diff {
    display: block;
    margin-top: 20rpx;
    font-size: 24rpx;
    line-height: 1.6;
    color: @text-secondary;
}

.category-card__detail {
    margin-top: 16rpx;
    padding: 20rpx 22rpx;
    background: fade(@brand, 12%);
    border-radius: @radius;
}

.category-card__detail-label {
    display: block;
    font-size: 22rpx;
    font-weight: 700;
    color: @text-secondary;
}

.category-card__detail-text {
    display: block;
    margin-top: 8rpx;
    font-size: 24rpx;
    line-height: 1.6;
    color: @text-title;
}

.category-card__action {
    margin-left: 16rpx;
    padding: 0 22rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 999rpx;
    border: none;
    background: @brand;
    color: @text-selected-btn;
    font-size: 24rpx;
    font-weight: 700;
}

.category-card__action[disabled] {
    opacity: 0.6;
}

.category-card__action--missing {
    background: #f7ee47;
    color: #1f2937;
}

.category-card__action--outdated {
    background: #93d333;
    color: #1f2937;
}