/* 移动端布局Grid修复 - 解决CSS冲突 */

/* 重置移动端布局优化中的打卡项目样式，避免与新的Grid布局冲突 */
@media (max-width: 768px) {
    /* 重置原有的Grid布局设置 */
    .checkin-item.item-card {
        display: grid !important;
        grid-template-columns: 56px 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas: 
            "icon title streak"
            "icon details streak"
            "button button button" !important;
        align-items: start !important;
        column-gap: 16px !important;
        row-gap: 8px !important;
    }
    
    /* 确保图标区域正确定位 */
    .checkin-item .item-icon,
    .checkin-item .checkin-icon {
        grid-area: icon !important;
        align-self: start !important;
        justify-self: start !important;
    }
    
    /* 确保标题区域正确定位 */
    .checkin-item .item-name,
    .checkin-item .checkin-name {
        grid-area: title !important;
        align-self: center !important;
        justify-self: start !important;
    }
    
    /* 确保详情区域正确定位 */
    .checkin-item .item-description,
    .checkin-item .checkin-details,
    .checkin-item .checkin-points {
        grid-area: details !important;
        align-self: start !important;
        justify-self: start !important;
    }
    
    /* 确保按钮区域正确定位 */
    .checkin-item .btn,
    .checkin-item .item-action,
    .checkin-item .checkin-action {
        grid-area: button !important;
        justify-self: stretch !important;
        align-self: end !important;
    }
    
    /* 确保连击徽章正确定位 */
    .checkin-item .streak-badge {
        grid-area: streak !important;
        justify-self: end !important;
        align-self: start !important;
    }
}

@media (max-width: 480px) {
    .checkin-item.item-card {
        grid-template-columns: 48px 1fr auto !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
    }
}

/* 修复可能的布局冲突 */
.checkin-item .item-header {
    display: contents !important;
}

.checkin-item .item-info {
    display: contents !important;
}

/* 确保文字内容不会溢出 */
.checkin-item .item-name,
.checkin-item .item-description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .checkin-item .item-name,
    .checkin-item .item-description {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* 确保按钮样式优先级 */
.checkin-item .btn {
    width: 100% !important;
    max-width: none !important;
    margin-top: 8px !important;
}

@media (max-width: 768px) {
    .checkin-item .btn {
        margin-top: 6px !important;
    }
}

@media (max-width: 480px) {
    .checkin-item .btn {
        margin-top: 4px !important;
    }
}

/* 修复图标样式冲突 */
.checkin-item .item-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 2rem !important;
    border-radius: 16px !important;
    background: rgba(255, 200, 150, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 768px) {
    .checkin-item .item-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.8rem !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 480px) {
    .checkin-item .item-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.6rem !important;
        border-radius: 12px !important;
    }
}