@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .shadow-soft {
        box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.1), 0 10px 20px -2px rgba(0, 0, 0, 0.05);
    }
    .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
}

/* 表格行悬停效果 */
tbody tr {
    transition: background-color 0.15s ease-in-out;
}

/* 按钮过渡优化 */
button, a {
    transition: all 0.2s ease-in-out;
}

/* 输入框焦点样式 */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 移动端表格优化 */
@media (max-width: 640px) {
    /* 表格横向滚动优化 */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* 表格最小宽度 */
    table {
        min-width: 600px;
    }

    /* 输入框优化 */
    input[type="text"],
    select,
    textarea {
        font-size: 16px; /* 防止iOS缩放 */
    }

    /* 按钮点击区域优化 */
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* 模态框动画优化 */
    #addMappingModal > div {
        transform: translateY(0);
        transition: transform 0.3s ease-out;
    }

    /* 下拉框文字截断优化 */
    select option {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* 触摸设备优化 */
@media (hover: none) {
    /* 触摸设备hover效果 */
    button:active,
    a:active {
        opacity: 0.7;
    }
}

/* 防止表单元素在移动端缩放 */
input, select, textarea {
    touch-action: manipulation;
}

/* 自动补全下拉框样式 */
#globalAutocompleteDropdown {
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 卡片悬停效果增强 */
.hover\:border-primary\/30:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

/* 进度条动画 */
#progressBar {
    transition: width 0.3s ease-out;
}

/* ==================== 发票备注相关样式 ==================== */

/* 备注图标按钮 */
.remark-btn {
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remark-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 备注预览文本 */
.remark-preview {
    font-size: 0.75rem;
    color: #6b7280;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 复选框列 */
.checkbox-column {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

/* 批量操作按钮区域 */
.batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

/* 备注模态框文本域 */
#remarkTextarea,
#batchRemarkTextarea {
    transition: border-color 0.2s ease;
}

#remarkTextarea:focus,
#batchRemarkTextarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 已选订单列表（批量备注模态框） */
#selectedOrdersList {
    max-height: 8rem;
    overflow-y: auto;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .batch-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .batch-actions button {
        width: 100%;
        justify-content: center;
    }
    
    .batch-actions .ml-auto {
        margin-left: 0 !important;
        text-align: center;
    }
}

/* 全选复选框半选状态（indeterminate） */
#selectAllCheckbox:indeterminate {
    background-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* 备注图标动画 */
.remark-btn i {
    transition: transform 0.2s ease;
}

.remark-btn:hover i {
    transform: scale(1.1);
}