/* =====================================================
 * 客户订单管理 · 前端样式 (高仿经典电商风格)
 * ===================================================== */

.co-frontend {
    width: 100%;
    max-width: 1000px; /* 为了保证排版效果，适度限制宽度，您可以修改或删除 */
    margin: 0 auto 40px;
    padding: 10px;
    box-sizing: border-box;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* 标题 */
.co-page-title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #007cba; /* 附图中有蓝色下划线 */
    display: inline-block;
    margin-bottom: 20px;
}

/* =====================================================
 * 表格样式 (高度还原附图)
 * ===================================================== */
.co-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e0e0e0 !important; /* 外边框 */
}

.co-table th, 
.co-table td {
    padding: 12px 15px !important;
    text-align: left;
    border: 1px solid #e0e0e0 !important; /* 网格边框 */
    vertical-align: middle !important;
    font-size: 14px;
}

.co-table th {
    background-color: #f5f5f5 !important; /* 灰底表头 */
    font-weight: bold;
    color: #333;
}

/* 表格行悬停 */
.co-table tbody tr:hover {
    background-color: #fafafa;
}

/* =====================================================
 * 按钮
 * ===================================================== */
.co-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
}

.co-btn-primary {
    background-color: #007cba; /* 附图按钮蓝 */
    color: #fff !important;
}
.co-btn-primary:hover {
    background-color: #006ba1;
}

.co-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    background-color: #007cba;
    color: #fff !important;
}
.co-btn-sm:hover {
    background-color: #006ba1;
}

/* =====================================================
 * 状态徽标与物流单号
 * ===================================================== */
.co-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 已发货-浅绿背景 */
.co-status-shipped { 
    background-color: #e6f4ea; 
    color: #1e8e3e; 
    border: 1px solid #ceead6;
}
/* 已提交-浅蓝背景 */
.co-status-submitted { 
    background-color: #e8f0fe; 
    color: #1a73e8; 
    border: 1px solid #d2e3fc;
}
/* 已录单-浅黄背景 */
.co-status-recorded { 
    background-color: #fef7e0; 
    color: #b06000; 
    border: 1px solid #feefc3;
}
/* 已完成-浅灰背景 */
.co-status-completed { 
    background-color: #f1f3f4; 
    color: #5f6368; 
    border: 1px solid #dadce0;
}

/* 物流单号高亮框（复刻图1的绿色框） */
.co-tracking-box {
    display: inline-block;
    background-color: #e6f4ea;
    color: #1e8e3e;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    border: 1px solid #ceead6;
}

/* =====================================================
 * 订单详情页特定布局
 * ===================================================== */
.co-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.co-back-link {
    color: #007cba;
    text-decoration: none;
    font-size: 14px;
}
.co-back-link:hover { text-decoration: underline; }

.co-detail-status {
    margin-bottom: 20px;
}
.co-detail-status p {
    margin: 8px 0;
    font-size: 15px;
}

.co-divider {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 20px 0;
}

.co-section-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 25px 0 15px;
}

.co-detail-info p {
    margin: 8px 0;
    font-size: 15px;
}

/* =====================================================
 * 表单 (修改申请)
 * ===================================================== */
.co-edit-request-box {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
}

.co-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.co-span-2 {
    grid-column: 1 / -1;
}

.co-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.co-field label {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 6px;
}

.co-field input[type="text"],
.co-field select,
.co-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
    border-color: #007cba;
    outline: none;
}

/* 空状态 */
.co-empty {
    padding: 30px;
    background: #f9f9f9;
    border: 1px solid #eee;
    text-align: center;
    color: #666;
}
.co-empty a {
    color: #007cba;
}

/* =====================================================
 * 响应式
 * ===================================================== */
@media (max-width: 768px) {
    .co-form-grid-2 {
        grid-template-columns: 1fr;
    }
    
    /* 手机端表格强制转为卡片 */
    .co-table thead { display: none !important; }
    .co-table, .co-table tbody, .co-table tr, .co-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .co-table tr {
        border: 1px solid #ddd !important;
        margin-bottom: 15px;
        border-radius: 6px;
        padding: 10px;
    }
    .co-table td {
        border-bottom: 1px dashed #eee !important;
        padding: 8px 5px !important;
        text-align: right;
    }
    .co-table td:last-child {
        border-bottom: none !important;
        text-align: center !important;
        margin-top: 10px;
    }
    .co-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: #555;
    }
    
    .co-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}