/* ==================== 基础样式 ==================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    padding-bottom: 56px;
}

/* ==================== 头部 ==================== */
.header {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    padding: 12px 14px;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header h1 { font-size: 18px; font-weight: 600; color: #fff; }
.header .user-info { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 2px; }
.header .user-info a { color: rgba(255,255,255,0.9); text-decoration: underline; }
.search-bar { margin-top: 8px; display: flex; gap: 6px; }
.search-bar input {
    flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
    font-size: 15px; background: rgba(255,255,255,0.95);
}
.search-bar button {
    padding: 8px 14px; background: rgba(255,255,255,0.2); color: #fff;
    border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; font-size: 15px;
}

.back-btn {
    margin-top: 6px; padding: 6px 14px; background: rgba(255,255,255,0.2);
    color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px;
    font-size: 14px; cursor: pointer;
}

/* ==================== 标签页 ==================== */
.tabs {
    display: flex; gap: 6px; padding: 8px 14px; background: #fff;
    overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #eee;
}
.tab {
    padding: 5px 12px; border-radius: 14px; background: #f0f0f0; color: #666;
    font-size: 13px; white-space: nowrap; cursor: pointer; border: none;
}
.tab.active { background: #1890ff; color: #fff; }

/* ==================== 订单卡片 ==================== */
.order-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.order-card {
    background: #fff; border-radius: 8px; padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;
}
.order-card:active { background: #fafafa; }
.order-first-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.order-no { font-size: 15px; font-weight: 600; color: #222; margin-right: 2px; }
.order-arrow { margin-left: auto; font-size: 18px; color: #ccc; }
.order-info {
    font-size: 12px; color: #888; margin: 3px 0; display: flex;
    flex-wrap: wrap; gap: 5px;
}
.order-info span { padding: 1px 5px; }

/* ==================== 工序进度（列表页简版） ==================== */
.process-steps { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 5px; }
.process-step { font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.process-step.completed { color: #52c41a; }
.process-step.active { color: #1890ff; font-weight: 500; }
.process-step.paused { color: #ff4d4f; }
.process-step.pending { color: #ccc; }
.step-icon { font-size: 12px; }
.step-name { font-size: 12px; }
.current-stage {
    font-size: 12px; color: #1890ff; margin-top: 5px;
    padding: 3px 8px; background: #e6f7ff; border-radius: 3px;
    display: inline-block;
}
.current-stage strong { color: #1890ff; }

/* ==================== 订单详情页 ==================== */
.order-detail { padding: 10px 14px; }
.detail-section {
    background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.detail-title {
    font-size: 15px; color: #1890ff; margin-bottom: 8px; font-weight: 500;
    padding-bottom: 6px; border-bottom: 1px solid #e6f7ff;
}
.detail-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #888; }
.detail-value { font-weight: 500; color: #333; }

.detail-step {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
.detail-step:last-child { border-bottom: none; }
.detail-step.editable { cursor: pointer; }
.detail-step.editable:active { background: #f8f8ff; border-radius: 4px; }
.detail-step-left { display: flex; align-items: center; gap: 5px; }
.detail-step-right { text-align: right; }
.detail-step-status { font-size: 13px; color: #666; margin-left: 3px; }
.detail-step.completed .detail-step-status { color: #52c41a; }
.detail-step.active .detail-step-status { color: #1890ff; font-weight: 500; }
.detail-step.paused .detail-step-status { color: #ff4d4f; }
.detail-step.pending .detail-step-status { color: #bbb; }
.detail-step.completed .step-icon { color: #52c41a; }
.detail-step.active .step-icon { color: #1890ff; }
.detail-step.paused .step-icon { color: #ff4d4f; }
.detail-step.pending .step-icon { color: #bbb; }
.step-time { display: block; font-size: 12px; color: #666; }
.step-by { display: block; font-size: 12px; color: #999; }

/* ==================== 弹窗 ==================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: flex; align-items: flex-end;
    justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal {
    background: #fff; width: 100%; max-width: 500px;
    border-radius: 16px 16px 0 0; padding: 16px;
    transform: translateY(100%); transition: transform 0.3s;
}
.modal-overlay.show .modal { transform: translateY(0); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close {
    width: 28px; height: 28px; border-radius: 50%; background: #f0f0f0;
    border: none; font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.modal-order-info { font-size: 13px; color: #888; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-item {
    padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px;
    cursor: pointer; font-size: 15px;
}
.option-item:hover { border-color: #1890ff; background: #f8f8ff; }
.option-item.selected { border-color: #1890ff; background: #e6f7ff; color: #1890ff; }
.permission-hint { font-size: 12px; color: #ff4d4f; margin-top: 10px; padding: 8px 10px; background: #fff2f0; border-radius: 4px; }

/* ==================== 登录页 ==================== */
.login-page {
    min-height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 20px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}
.login-box {
    background: #fff; padding: 28px; border-radius: 12px;
    width: 100%; max-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.login-box h2 { text-align: center; margin-bottom: 20px; font-size: 20px; color: #1890ff; }
.login-box input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; }
.login-box button { width: 100%; padding: 12px; background: #1890ff; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; }
.login-box button:hover { background: #096dd9; }
.login-box button:disabled { background: #bae7ff; }

/* ==================== 底部导航 ==================== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
    display: flex; border-top: 1px solid #eee; z-index: 100;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 6px 0; color: #888; text-decoration: none; font-size: 11px;
}
.nav-item.active { color: #1890ff; }
.nav-icon { font-size: 20px; margin-bottom: 2px; }
.nav-text { font-size: 11px; }

/* ==================== 物料列表 ==================== */
.material-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.material-card {
    background: #fff; border-radius: 8px; padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;
}
.material-card:active { background: #fafafa; }
.material-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.material-name { font-size: 15px; font-weight: 600; color: #222; }
.material-category { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: #f6ffed; color: #52c41a; }
.material-info { font-size: 12px; color: #888; display: flex; flex-wrap: wrap; gap: 5px; }
.material-info span { padding: 1px 5px; }
.material-info .low-stock { color: #ff4d4f; }

/* ==================== Toast ==================== */
.toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75); color: #fff; padding: 10px 20px;
    border-radius: 6px; font-size: 14px; z-index: 2000;
}

.loading { text-align: center; padding: 30px; color: #999; }
.empty { text-align: center; padding: 40px 20px; color: #999; }
.empty-icon { font-size: 36px; margin-bottom: 8px; }

/* ==================== 物料详情页 ==================== */
.material-detail { padding: 14px; }
.image-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #f0f0f0; }

/* ==================== 仓库页面 ==================== */
.warehouse-tabs { display: flex; gap: 8px; padding: 10px 14px; background: #fff; }
.warehouse-tab { flex: 1; padding: 8px; text-align: center; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 14px; }
.warehouse-tab.active { background: #1890ff; color: #fff; border-color: #1890ff; }
.form-group { margin-bottom: 10px; }
.form-group label { display: block; font-size: 12px; color: #888; margin-bottom: 3px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.form-group textarea { min-height: 60px; resize: vertical; }
.submit-btn { width: 100%; padding: 12px; background: #1890ff; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; margin-top: 10px; }
.submit-btn:hover { background: #096dd9; }

.order-header-right { display: flex; gap: 4px; align-items: center; }
.order-type-tag { background: #e6f7ff; color: #1890ff; font-size: 12px; padding: 1px 6px; border-radius: 3px; }
.order-date { color: #fa541c; font-weight: 500; }

.remember-login { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; margin-bottom: 10px; cursor: pointer; }
.remember-login input[type="checkbox"] { width: 16px; height: 16px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }
.tag-item { font-size: 11px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.tag-designer { background: #fff7e6; color: #fa8c16; }
.tag-tech { background: #f6ffed; color: #52c41a; }
.tag-type { background: #e6f7ff; color: #1890ff; }
.order-products { color: #722ed1; font-size: 12px; }

/* ==================== 更新进度条 ==================== */
.update-progress {
    padding: 16px 0;
    text-align: center;
}
.update-progress-text {
    font-size: 14px;
    color: #1890ff;
    margin-bottom: 12px;
    font-weight: 500;
}
.update-progress-bar {
    width: 100%;
    height: 6px;
    background: #e6f7ff;
    border-radius: 3px;
    overflow: hidden;
}
.update-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #1890ff, #40a9ff);
    border-radius: 3px;
    transition: width 1.5s ease-out;
}