/* 基础重置 & 全局样式 */
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    font-family:'Microsoft YaHei',sans-serif; 
    background:#f5f7fa; 
    color:#333; 
    width:100%; 
    min-height:100vh; 
    overflow-x:hidden;
    padding-bottom:20px;
    
    /* iOS安全区域适配 */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* 容器 & 标题 */
.container { 
    width:100%; 
    padding:10px; 
    margin:0 auto; 
    max-width:1920px;
}
.title { 
    text-align:center; 
    padding:14px 10px; 
    background:#2c3e50; 
    color:#fff; 
    border-radius:8px; 
    font-size:22px;
    font-weight:bold; 
    margin-bottom:10px; 
    white-space:nowrap;
}
.version-badge {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 16px;
    margin-left: 12px;
    font-weight: normal;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

/* 标签页 */
.tabs { 
    display:flex; 
    gap:8px; 
    margin-bottom:10px; 
    flex-wrap:wrap;
}
.tab { 
    flex:1; 
    min-width:80px;
    height:48px; 
    border:none; 
    border-radius:6px; 
    background:#3498db; 
    color:white; 
    font-size:16px;
    font-weight:bold; 
    cursor:pointer; 
    touch-action: manipulation;
    transition: background 0.2s ease;
}
.tab.active { background:#1abc9c; }
.tab:hover { opacity:0.9; }

/* 页面容器 */
.page { 
    display:none; 
    background:white; 
    border-radius:8px; 
    padding:15px 10px; 
    box-shadow:0 1px 5px rgba(0,0,0,0.1); 
    margin-bottom:10px;
}
.page.active { display:block; animation: fadeIn 0.3s ease; }

/* 提示框 */
.tip { 
    background:#e8f4fd; 
    border-left:4px solid #3498db; 
    padding:10px 8px; 
    margin-bottom:14px; 
    font-size:13px;
    line-height:1.6; 
    white-space:normal;
}

/* 表格容器（滚动优化） */
.table-wrap {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom:10px;
    border-radius:6px;
}

/* 工具栏 & 搜索栏 */
.toolbar, .search-bar { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    margin-bottom:15px; 
    width:100%; 
    flex-wrap:wrap;
    justify-content:space-between;
}

/* 统计标签 */
.stat { 
    padding:8px 10px; 
    border-radius:6px; 
    color:white; 
    font-weight:bold; 
    font-size:13px; 
    height:38px; 
    min-width:100px;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    white-space:nowrap;
}
.stat-orange { background:#e67e22; }
.stat-green { background:#27ae60; }
.stat-blue { background:#3498db; }
.stat-gray { background:#7f8c8d; }

/* 输入框通用样式 */
.scan, .search { 
    padding:10px 12px;
    border:1px solid #3498db; 
    border-radius:6px; 
    font-size:14px; 
    height:42px;
    flex:1; 
    min-width:200px;
    outline:none;
    transition: border 0.2s ease;
}
.scan:focus, .search:focus {
    border-color:#1abc9c;
    box-shadow:0 0 0 2px rgba(26, 188, 156, 0.2);
}

/* 按钮通用样式 */
.btn { 
    padding:10px 12px;
    border:none; 
    border-radius:6px; 
    color:white; 
    font-weight:bold; 
    cursor:pointer; 
    font-size:14px; 
    height:42px;
    min-width:100px;
    touch-action: manipulation; 
    white-space:nowrap;
    transition: all 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}
.btn:hover {
    opacity:0.9;
    transform:translateY(-1px);
}
.btn:active {
    transform:translateY(0);
}
.btn:disabled {
    opacity:0.6;
    cursor:not-allowed;
    transform:none;
}

/* 按钮主题色 */
.btn-import { background:#2ecc71; }
.btn-history { background:#9c27b0; }
.btn-undo { background:#f39c12; }
.btn-delete { background:#e74c3c; }

/* 区域选择网格 */
.area-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
    gap:8px; 
    margin-bottom:12px; 
}
.area { 
    padding:10px 5px;
    border-radius:6px; 
    color:white; 
    font-weight:bold; 
    text-align:center; 
    cursor:pointer; 
    font-size:12px;
    touch-action: manipulation;
    transition: all 0.2s ease;
}
.area.active { 
    border:2px solid #fff; 
    box-shadow:0 0 6px rgba(0,0,0,0.2); 
    transform:scale(1.02);
}
.area:hover { opacity:0.9; }

/* 区域颜色 */
.area-1 { background:#3498db; }
.area-2 { background:#e74c3c; }
.area-3 { background:#2ecc71; }
.area-4 { background:#f39c12; }
.area-5 { background:#9b59b6; }
.area-6 { background:#1abc9c; }
.area-7 { background:#e67e22; }
.area-8 { background:#2980b9; }
.area-9 { background:#c0392b; }
.area-10 { background:#27ae60; }
.area-11 { background:#d35400; }
.area-12 { background:#8e44ad; }
.area-13 { background:#f1c40f; }
.area-14 { background:#16a085; }

.area-row { 
    grid-column:1/-1; 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap;
}
.area-row .area { flex:1; min-width:100px; }



/* 表格样式 */
table { 
    width:100%; 
    min-width:768px;
    border-collapse: collapse; 
}
th, td { 
    border:1px solid #ddd; 
    padding:8px 5px;
    text-align: center; 
    font-size:13px; 
    white-space: nowrap;
}
th { 
    background:#3498db; 
    color:white; 
    font-size:12px;
    position:sticky;
    top:0;
    z-index:10;
}
tr:nth-child(even) { background:#fafafa; }

/* 操作按钮 */
.action { 
    padding:7px 8px;
    border: none; 
    border-radius:4px; 
    color: white; 
    cursor: pointer; 
    font-size:12px; 
    margin:2px;
    touch-action: manipulation;
    min-width:60px;
    transition: all 0.2s ease;
}
.action:hover { opacity:0.9; }
.action-detail { background:#9c27b0; }
.action-edit { background:#3498db; }
.action-del { background:#e74c3c; }
.action:disabled { background:#ccc; cursor:not-allowed; }

/* 分页样式 */
.page-bar { 
    display:flex; 
    justify-content:center; 
    gap:6px; 
    margin-top:10px; 
    align-items:center; 
    flex-wrap:wrap;
}
.page-btn { 
    padding:8px 12px;
    border:1px solid #ddd; 
    background:white; 
    border-radius:4px; 
    cursor:pointer; 
    font-size:13px; 
    touch-action: manipulation;
    transition: all 0.2s ease;
}
.page-btn:hover:not(.ellipsis):not(:disabled) {
    border-color:#3498db;
    color:#3498db;
}
.page-btn.active { 
    background:#3498db; 
    color:white; 
    border-color:#3498db;
}
.page-btn.ellipsis { 
    background:#f5f5f5; 
    cursor:default; 
    border-color:#ccc;
}
.page-btn:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* 弹窗样式 */
.toast { 
    position:fixed; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background:rgba(46,204,113,0.95); 
    color:white; 
    padding:25px; 
    border-radius:10px; 
    box-shadow:0 0 20px rgba(0,0,0,0.3); 
    z-index:9999; 
    display:none; 
    font-size:16px; 
    width:420px !important;
    text-align:center;
    animation: toastFade 0.3s ease;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.modal { 
    position:fixed; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background:white; 
    padding:25px; 
    border-radius:10px; 
    box-shadow:0 0 20px rgba(0,0,0,0.3); 
    z-index:9998; 
    display:none; 
    width:420px;
    max-height:80vh; 
    overflow:auto; 
    -webkit-overflow-scrolling: touch;
    animation: modalFade 0.3s ease;
}
.modal h3 {
    text-align:center;
    margin-bottom:15px;
    font-size:18px;
}
.modal-content {
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-bottom:20px;
}
.modal-content select, .modal-content input {
    padding:10px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    transition: border 0.2s ease;
}
.modal-content select:focus, .modal-content input:focus {
    border-color:#3498db;
    outline:none;
    box-shadow:0 0 0 2px rgba(52, 152, 219, 0.2);
}
.modal-btn-group {
    display:flex;
    gap:10px;
    justify-content:center;
}

/* 导入成功弹窗 */
.import-success-modal {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    z-index:10000;
    text-align:center;
    width:420px;
}
.import-success-modal h3 {
    color:#2ecc71;
    margin-bottom:15px;
    font-size:20px;
}
.import-success-modal .result {
    font-size:16px;
    line-height:2;
    margin-bottom:20px;
    text-align:left;
}

/* 扫码模态框 */
.import-modal {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 0 30px rgba(0,0,0,0.4);
    z-index:10001;
    display:none;
    width:95%;
    max-width:500px;
    max-height:90vh;
    overflow:auto;
}
.import-modal h2 {
    text-align:center;
    margin-bottom:15px;
    color:#333;
    font-size:20px;
}
.import-close {
    display:block;
    width:100%;
    padding:12px;
    background:#e74c3c;
    color:white;
    border:none;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
    transition:background 0.2s;
}
.import-close:hover {
    background:#c0392b;
}
/* html5-qrcode 样式优化 */
#qr-reader {
    border-radius:8px;
    overflow:hidden;
    background:#000;
}
#qr-reader video {
    border-radius:8px;
    width:100% !important;
    height:auto !important;
}
#qr-reader__dashboard {
    padding:10px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
/* 扫描区域优化 */
#qr-reader__scan_region {
    width:100% !important;
}
#qr-reader__scan_region video {
    width:100% !important;
    height:auto !important;
}
/* 扫码框样式优化 - 让扫描区域更明显 */
#qr-reader__scan_region img {
    display: none !important;
}
#qr-reader__scan_region .qr-shaded-region {
    border: 3px solid #e74c3c !important;
    border-radius: 8px !important;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.5) !important;
}
/* 隐藏不需要的元素 */
#qr-reader__dashboard {
    display: none !important;
}

/* 辅助样式 */
.file { display:none; }
.chk { 
    width:22px; 
    height:22px;
    cursor:pointer; 
    touch-action: manipulation;
}
input[type="number"], select {
    padding:8px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    width:100%;
    min-width:80px;
    height:38px;
    outline:none;
    transition: border 0.2s ease;
}
input[type="number"]:focus, select:focus {
    border-color:#3498db;
    box-shadow:0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 扫码视频层 */
#scanVideo {
    position: fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:9999; display:none;
}
#closeScan {
    position: fixed; bottom:50px; left:50%; transform:translateX(-50%); z-index:10000;
    background:#e74c3c; color:white; border:none; padding:12px 30px; border-radius:50px; font-size:16px; display:none;
    transition: all 0.2s ease;
}
#closeScan:hover {
    opacity:0.9;
    transform:translateX(-50%) scale(1.05);
}

/* 遮罩层 */
.mask {
    position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9997; display:none;
    backdrop-filter:blur(2px);
    animation: maskFade 0.3s ease;
}

/* 动画定义 */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes toastFade {
    from { opacity:0; transform:translate(-50%, -40%); }
    to { opacity:1; transform:translate(-50%, -50%); }
}
@keyframes modalFade {
    from { opacity:0; transform:translate(-50%, -45%); }
    to { opacity:1; transform:translate(-50%, -50%); }
}
@keyframes maskFade {
    from { opacity:0; }
    to { opacity:1; }
}

/* 入库格子样式 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 8px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    position: relative;
}
.grid-item {
    aspect-ratio: 1;
    background: #e0e0e0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    padding: 4px;
}
.grid-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.grid-item.success {
    background: #27ae60;
    color: white;
    border-color: #1e8449;
}
.grid-item.success:hover {
    background: #2ecc71;
}
.grid-item.must-return {
    background: #e74c3c;
    color: white;
    border-color: #c0392b;
}
.grid-item.must-return:hover {
    background: #ec7063;
}
.grid-item .seq-num {
    font-size: 16px;
    font-weight: bold;
}
.grid-item .receiver-name {
    font-size: 10px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 2px;
    color: #888;
}
.grid-item.success .receiver-name {
    color: rgba(255, 255, 255, 0.8);
}
.grid-item.must-return .receiver-name {
    color: rgba(255, 255, 255, 0.8);
}
.grid-item .item-name {
    font-size: 10px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 2px;
}
.grid-item .dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    margin-top: 4px;
    max-width: 100%;
}
.grid-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
}
.grid-item.success .dot {
    background: #e74c3c;
}
.grid-item .dot.scanned {
    background: #e74c3c;
}



/* 自定义悬浮提示 */
.tooltip {
    position: fixed;
    background: rgba(44, 62, 80, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-width: 250px;
}
.tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* 桌面端tooltip优化 */
@media (min-width: 769px) {
    .tooltip {
        position: fixed !important;
        width: auto !important;
        max-width: 320px !important;
        z-index: 9999 !important;
        pointer-events: none !important;
        white-space: nowrap;
    }
}
.tooltip-title {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 15px;
    color: #3498db;
}
.tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 20px;
}
.tooltip-label {
    color: #bdc3c7;
}
.tooltip-value {
    color: #fff;
    font-weight: 500;
}

/* 入库工具栏 */
.quickin-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.quickin-toolbar .quickin-scan-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid #3498db;
    border-radius: 6px;
    font-size: 14px;
    height: 42px;
    outline: none;
    transition: all 0.2s ease;
}
.quickin-toolbar .quickin-scan-input:focus {
    border-color: #1abc9c;
    box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.2);
}
.quickin-toolbar .btn {
    flex-shrink: 0;
}
.quickin-toolbar .stat {
    flex-shrink: 0;
}
.quickin-stats {
    display: flex;
    gap: 8px;
}

/* 响应式优化 - 手机端专用 */
@media (max-width: 768px) {
    /* 标题优化 */
    .title { 
        font-size:16px; 
        padding:12px 10px;
        line-height: 1.3;
    }
    .version-badge {
        font-size: 12px;
        padding: 3px 8px;
        margin-left: 8px;
        display: inline-block;
    }
    
    /* 手机端弹窗自适应宽度 */
    .toast, .modal, .import-success-modal {
        width: 90% !important;
        max-width: none !important;
    }
    
    /* 手机端只显示入库标签 */
    .tabs .tab:not(:first-child) {
        display: none;
    }
    .tabs .tab:first-child {
        flex: 1;
        min-width: 100%;
        height: 50px;
        font-size: 18px;
    }
    
    /* 隐藏除了入库页面外的其他页面 */
    .page:not(#quickin) {
        display: none !important;
    }
    
    /* 入库页面容器 */
    #quickin {
        padding: 10px;
    }
    
    /* 手机端入库工具栏 */
    .quickin-toolbar {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }
    
    /* 输入框隐藏但仍可接收输入（支持PDA扫码） */
    .quickin-toolbar .quickin-scan-input {
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: 0 !important;
    }
    
    /* 手机端统计信息容器 - 第一行三等分 */
    .quickin-stats {
        display: flex !important;
        gap: 8px;
        width: 100%;
        order: 1;
    }
    .quickin-stats .stat {
        flex: 1;
        font-size: 13px;
        font-weight: bold;
        padding: 12px 6px;
        text-align: center;
        border-radius: 6px;
        min-width: auto;
        height: auto;
    }
    
    /* 隐藏日期标签 */
    #quickinShipDate, #quickinReceiveDate {
        display: none !important;
    }
    
    /* 移动端隐藏导入和打印按钮 */
    .btn-hide-mobile {
        display: none !important;
    }
    
    /* 手机端悬浮提示 - 默认隐藏，只在有内容时显示 */
    .tooltip {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90% !important;
        width: auto !important;
        border-radius: 8px !important;
        padding: 20px !important;
        box-sizing: border-box;
        z-index: 9999 !important;
        pointer-events: none !important;
        display: none !important;
    }
    .tooltip.show {
        display: block !important;
    }
    
    /* 手机端格子容器 */
    .grid-container {
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
        padding: 8px 4px;
    }
    .grid-item {
        font-size: 11px;
        padding: 4px 2px;
        min-height: 45px;
    }
    .grid-item .seq-num {
        font-size: 13px;
        font-weight: bold;
    }
    .grid-item .receiver-name {
        font-size: 8px;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        padding: 0 1px;
    }
    .grid-item .item-name {
        font-size: 8px;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        padding: 0 1px;
    }
    .grid-item .dots {
        margin-top: 3px;
        gap: 2px;
    }
    .grid-item .dot {
        width: 6px;
        height: 6px;
    }
    
    /* 手机端toast提示 - 跟确认弹窗一样大 */
    .toast {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: none !important;
        height: auto !important;
        font-size: 16px !important;
        font-weight: bold !important;
        padding: 25px !important;
        border-radius: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.4 !important;
        background: rgba(46, 204, 113, 0.98) !important;
        z-index: 10000 !important;
        cursor: default !important;
        animation: toastFadeIn 0.3s ease !important;
        pointer-events: auto !important;
    }
    
    /* 手机端tooltip悬浮窗 - 显示在顶部 */
    .tooltip {
        position: fixed !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: none !important;
        border-radius: 10px !important;
        padding: 20px !important;
        box-sizing: border-box;
        z-index: 10000 !important;
        pointer-events: auto !important;
        display: none !important;
        background: rgba(44, 62, 80, 0.7) !important;
    }
    .tooltip.show {
        display: block !important;
    }
    
    /* 手机端提示 */
    .tip { 
        font-size: 13px; 
        padding: 10px;
        line-height: 1.5;
    }
    
    /* 手机端按钮整体优化 */
    .btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}