/**
 * 浠撳簱绠＄悊鍓嶇鏍峰紡
 */

/* 绂佺敤body鍜宧tml鐨勬粴鍔ㄦ潯锛岄槻姝㈠嚭鐜板弻閲嶆粴鍔ㄦ潯 */
html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* CSS Variables */
:root {
    --wm-primary: #6366f1;
    --wm-primary-hover: #4f46e5;
    --wm-primary-dark: #4f46e5;
    --wm-success: #10b981;
    --wm-success-hover: #059669;
    --wm-warning: #f59e0b;
    --wm-danger: #ef4444;
    --wm-dark: #1e293b;
    --wm-gray-50: #f8fafc;
    --wm-gray-100: #f1f5f9;
    --wm-gray-200: #e2e8f0;
    --wm-gray-300: #cbd5e1;
    --wm-gray-400: #94a3b8;
    --wm-gray-500: #64748b;
    --wm-gray-600: #475569;
    --wm-gray-700: #334155;
    --wm-gray-800: #1e293b;
    --wm-gray-900: #0f172a;
    --wm-sidebar-width: 280px;
    --wm-sidebar-collapsed-width: 50px;
    --wm-header-height: 80px;
    --wm-pagination-height: 40px;
    --wm-mobile-bottom-nav-height: 60px;
    --wm-radius: 12px;
    --wm-radius-sm: 8px;
    --wm-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --wm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reset */
.wm-app *,
.wm-app *::before,
.wm-app *::after {
    box-sizing: border-box;
}

/* 主题防御层：抵消 Flatsome 等主题对 button 的全局注入（margin:0 1em 1em 0 / min-height），
   防止主题塞入的下边距被计入 flex 行高造成按钮错位。仅清除错位元凶（margin/min-height），
   line-height 等观感属性维持主题现状；插件内按钮间距一律使用 flex gap，不依赖元素 margin */
.wm-app button,
.wm-app input[type="button"],
.wm-app input[type="submit"] {
    margin: 0 !important;
    min-height: 0 !important;
}

/* Main App Container */
.wm-app {
    display: flex;
    height: 100vh;
    width: 100vw;
    background: var(--wm-gray-50);
    font-family: var(--wm-font);
    font-size: 14px;
    color: var(--wm-gray-800);
    position: relative;
    overflow: hidden;
}

/* WordPress Admin Bar 閫傞厤 */
#wpadminbar {
    z-index: 999999 !important;
}

/* 褰揥ordPress绠＄悊鍛樻爮瀛樺湪鏃讹紝璋冩暣搴旂敤瀹瑰櫒 */
.admin-bar .wm-app {
    height: 100vh;
    margin-top: 0;
}

/* 绉诲姩绔鐞嗗憳鏍忔洿楂?*/
@media screen and (max-width: 782px) {
    .admin-bar .wm-app {
        height: 100vh;
        margin-top: 0;
    }
}

/* Login Required */
.wm-login-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px;
    text-align: center;
    background: white;
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow-lg);
}

/* 浜у搧璇︽儏鏁伴噺鍐呰仈闂磋窛 */
.wm-detail-quantity-inline {
    margin-left: 25px;
    margin-right: 25px;
    display: inline-block;
}

/* 绉诲姩绔細灏嗘暟閲忓拰浣嶇疆搴撳瓨鏄剧ず鍒扮浜岃 */
@media screen and (max-width: 600px) {
    .wm-detail-sku-line2 {
        display: block; /* 鎹㈣ */
        margin-top: 6px;
        width: 100%;
        text-align: left; /* 鏁翠綋闈犲乏 */
    }
    /* 灏嗘暟閲忓拰搴撳瓨瑙嗕綔涓€缁勶紝宸﹀榻愬苟淇濇寔闂磋窛 */
    .wm-detail-sku-line2 > .wm-detail-quantity-inline,
    .wm-detail-sku-line2 > .wm-detail-stock-progress {
        display: inline-block;
        vertical-align: middle;
        margin-left: 0; /* 绗竴涓厓绱犱笉闇€瑕佸乏闂磋窛 */
        margin-right: 20px; /* 涓よ€呬箣闂寸殑闂磋窛 */
    }
    .wm-detail-sku { word-break: break-word; }
}

/* 浣嶇疆搴撳瓨杩涘害鏉?*/
.wm-stock-progress-bar {
    display: inline-block;
    position: relative;
    width: 96px;
    height: 20px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}
.wm-stock-progress-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--stock-fill-percent);
    background: var(--stock-fill-color);
    transition: width 0.3s ease;
    z-index: 1;
}
.wm-stock-progress-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--wm-dark);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}


.wm-login-required i {
    font-size: 64px;
    color: var(--wm-gray-300);
    margin-bottom: 20px;
}

.wm-login-required p {
    font-size: 18px;
    color: var(--wm-gray-600);
    margin-bottom: 24px;
}

/* Sidebar */
.wm-sidebar {
    width: var(--wm-sidebar-width);
    background: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--wm-gray-200);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: width 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* WordPress Admin Bar 閫傞厤 - 渚ц竟鏍?*/
.admin-bar .wm-sidebar {
    top: 0;
    height: 100vh;
}

@media screen and (max-width: 782px) {
    .admin-bar .wm-sidebar {
        top: 0;
        height: 100vh;
    }
}

.wm-sidebar.collapsed {
    width: var(--wm-sidebar-collapsed-width);
}

.wm-sidebar.collapsed .wm-nav {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wm-sidebar.collapsed .wm-nav-item {
    padding: 0;
    margin: 0 auto 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--wm-radius-sm);
}

/* 鎶樺彔鍚庢樉绀哄垱寤烘寜閽殑鍥炬爣 */
.wm-sidebar.collapsed .wm-sidebar-header {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--wm-gray-100);
    gap: 12px;
}

.wm-sidebar.collapsed .wm-sidebar-header .wm-dropdown {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 鎶樺彔鐘舵€佷笅logo灞呬腑 */
.wm-sidebar.collapsed .wm-sidebar-logo {
    display: block !important;
    padding: 0;
    margin: 0;
    width: 100%;
}

.wm-sidebar.collapsed .wm-sidebar-logo img {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    object-fit: contain;
}

/* 鎶樺彔鍚庡彧鏄剧ず鍥炬爣锛岄殣钘忔墍鏈夋枃瀛?*/
.wm-sidebar.collapsed .wm-nav-item > span:not(.wm-toggle-text),
.wm-sidebar.collapsed .wm-nav-item > text {
    display: none !important;
}

/* 鎶樺彔鍚庨殣钘忓鑸」涓殑鏂囨湰鑺傜偣锛堢洿鎺ユ枃鏈級 */
.wm-sidebar.collapsed .wm-nav-item {
    font-size: 0;
}

.wm-sidebar.collapsed .wm-nav-item i {
    font-size: 20px !important;
    display: inline-block !important;
}

.wm-sidebar.collapsed .wm-create-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--wm-radius-sm);
    font-size: 0;
    min-width: 40px;
    margin: 0 auto;
}

.wm-sidebar.collapsed .wm-create-btn > span,
.wm-sidebar.collapsed .wm-create-btn > i:not(.ri-add-line) {
    display: none;
}

.wm-sidebar.collapsed .wm-create-btn > i.ri-add-line {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0;
    padding-left: 8px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    width: auto;
    height: auto;
}

.wm-sidebar.collapsed .wm-sidebar-content {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    width: 0;
    padding: 0;
}

.wm-sidebar-toggle {
    position: relative;
    width: auto;
    margin: 0;
    cursor: pointer;
    border: none;
    background: none;
}

.wm-sidebar-toggle .wm-toggle-text {
    display: inline-block;
}

.wm-sidebar.collapsed .wm-sidebar-toggle .wm-toggle-text {
    display: none;
}

.wm-sidebar-toggle i {
    transition: transform 0.3s;
    display: inline-block;
    font-size: 20px;
}

.wm-sidebar.collapsed .wm-sidebar-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 12px;
    border-radius: var(--wm-radius-sm);
    justify-content: center;
    display: flex;
    align-items: center;
}

.wm-sidebar.collapsed .wm-sidebar-toggle i {
    transform: rotate(180deg);
    margin: 0;
}

.wm-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--wm-gray-100);
}

/* 渚ц竟鏍廘ogo */
.wm-sidebar-logo {
    display: none;
    padding: 16px 0;
    text-align: center;
    margin-bottom: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.wm-sidebar-logo:hover {
    opacity: 0.8;
}

.wm-sidebar-logo img {
    display: block;
    margin: 0 auto;
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

/* PC绔樉绀轰晶杈规爮Logo */
@media screen and (min-width: 769px) {
    .wm-sidebar-logo {
        display: block;
    }
}

/* Dropdown */
.wm-dropdown {
    position: relative;
}

.wm-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    overflow: hidden;
    z-index: 100;
    margin-top: 4px;
}

.wm-dropdown-menu.active {
    display: block;
}

.wm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--wm-gray-700);
    text-decoration: none;
    transition: background 0.2s;
}

.wm-dropdown-item:hover {
    background: var(--wm-gray-50);
    color: var(--wm-primary);
}

.wm-dropdown-item i {
    font-size: 18px;
}

/* Navigation */
.wm-nav {
    padding: 12px;
    border-bottom: 1px solid var(--wm-gray-100);
}

.wm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--wm-gray-600);
    text-decoration: none;
    border-radius: var(--wm-radius-sm);
    transition: all 0.2s;
    margin-bottom: 4px;
}

.wm-nav-item:hover {
    background: var(--wm-gray-50);
    color: var(--wm-gray-800);
}

.wm-nav-item.active {
    background: linear-gradient(135deg, var(--wm-primary), #818cf8);
    color: white;
}

.wm-nav-item i {
    font-size: 20px;
}

/* Sidebar Content */
.wm-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Sidebar Footer */
.wm-sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--wm-gray-100);
    margin-top: auto;
}

.wm-sidebar.collapsed .wm-sidebar-footer {
    padding: 12px 0;
    border-top: none;
}

/* Location Tree */
.wm-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-tree-root {
    padding: 0;
}

.wm-tree-node {
    margin-bottom: 2px;
}

.wm-tree-node-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.wm-tree-node-content:hover {
    background: var(--wm-gray-100);
}

.wm-tree-node-content.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wm-gray-400);
    transition: transform 0.2s;
}

.wm-tree-toggle.expanded i {
    transform: rotate(90deg);
}

.wm-tree-toggle-placeholder {
    width: 20px;
}

.wm-tree-icon {
    color: var(--wm-warning);
    font-size: 18px;
}

.wm-tree-label {
    flex: 1;
    font-weight: 500;
}

.wm-tree-children {
    padding-left: 28px;
}

/* Filter Section */
.wm-filter-section {
    margin-bottom: 20px;
}

.wm-filter-section h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wm-gray-500);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.wm-filter-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.wm-filter-item:hover {
    background: var(--wm-gray-50);
}

.wm-filter-item input {
    accent-color: var(--wm-primary);
}

.wm-tag-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* 绛涢€夊尯鍩熶綅缃爲 */
.wm-filter-location-tree {
    max-height: 300px;
    overflow-y: auto;
}

.wm-filter-location-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wm-filter-location-item {
    margin: 0;
}

.wm-filter-location-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}

.wm-filter-location-label:hover {
    background: var(--wm-gray-50);
}

.wm-filter-location-label input[type="radio"] {
    accent-color: var(--wm-primary);
}

.wm-filter-location-label i {
    font-size: 16px;
    color: var(--wm-gray-400);
}

/* 浣嶇疆鏍戞柊鏍峰紡 - 鏃爎adio */
.wm-filter-location-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--wm-radius-sm);
    transition: background 0.2s;
    font-size: 14px;
}

.wm-filter-location-name {
    cursor: pointer;
    color: var(--wm-gray-700);
    transition: color 0.2s;
    flex: 1;
}

.wm-filter-location-name:hover {
    color: var(--wm-primary);
}

.wm-filter-location-name.active {
    color: var(--wm-primary);
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--wm-radius-sm);
}

.wm-filter-location-content i {
    font-size: 16px;
    color: var(--wm-gray-400);
}

.wm-filter-location-toggle,
.wm-filter-location-toggle-placeholder {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wm-filter-location-toggle i {
    font-size: 14px;
    transition: transform 0.2s;
}

/* 鎵嬫満绔細澧炲姞浣嶇疆鏍戝睍寮€鎸夐挳瑙︽懜鍖哄煙 */
@media (max-width: 768px) {
    .wm-filter-location-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .wm-filter-location-toggle i {
        font-size: 16px;
    }
}

.wm-filter-location-children {
    margin-left: 0;
    padding-left: 0;
}

/* 浣嶇疆鍖哄煙涓嬬殑绛涢€夊櫒 */
.wm-location-filters {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--wm-gray-100);
}

.wm-filter-select-group {
    margin-bottom: 16px;
}

.wm-filter-select-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wm-gray-500);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* 绛涢€夊櫒鎶樺彔/灞曞紑 */
.wm-filter-collapsible .wm-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    padding: 8px 12px;
    background: var(--wm-gray-50);
    border-radius: var(--wm-radius-sm);
    transition: background 0.2s;
}

.wm-filter-collapsible .wm-filter-toggle:hover {
    background: var(--wm-gray-100);
}

.wm-filter-collapsible .wm-filter-toggle-icon {
    font-size: 14px;
    transition: transform 0.2s;
}

.wm-filter-collapsible .wm-filter-content {
    display: none;
    margin-top: 8px;
    padding: 0 4px;
}

.wm-filter-collapsible.expanded .wm-filter-content {
    display: block;
}

/* 绛涢€夊櫒鎿嶄綔鎸夐挳 */
.wm-filter-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.wm-filter-btn {
    padding: 4px 10px;
    border: 1px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    background: white;
    color: var(--wm-gray-700);
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
    min-height: 24px;
}

.wm-filter-btn:hover {
    background: var(--wm-gray-50);
    border-color: var(--wm-gray-400);
    z-index: 2;
}

.wm-filter-btn:active {
    transform: none;
}

.wm-filter-btn-clear {
    color: var(--wm-gray-600);
}

.wm-filter-btn-clear:hover {
    background: var(--wm-gray-100);
    color: var(--wm-gray-800);
    border-color: var(--wm-gray-400);
}

.wm-filter-btn-confirm {
    background: var(--wm-primary) !important;
    background-color: var(--wm-primary) !important;
    color: white !important;
    border-color: var(--wm-primary);
}

.wm-filter-btn-confirm:hover {
    background: var(--wm-primary-dark) !important;
    background-color: var(--wm-primary-dark) !important;
    border-color: var(--wm-primary-dark);
    color: white !important;
}

/* 璐у彿鑼冨洿绛涢€?*/
.wm-sku-range-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-sku-range-filter .wm-filter-input {
    flex: 1;
    min-width: 0;
}

.wm-range-separator {
    font-size: 12px;
    color: var(--wm-gray-400);
    white-space: nowrap;
}

/* 鏃ユ湡鑼冨洿绛涢€?*/
.wm-date-range-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-date-range-filter .wm-filter-input {
    flex: 1;
    min-width: 0;
}

/* 绛涢€夊櫒杈撳叆妗?*/
.wm-filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 13px;
    transition: all 0.2s;
    background: white;
}

.wm-filter-input:focus {
    outline: none;
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.wm-filter-select {
    width: 100%;
    padding: 5px 14px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 14px;
    background: white;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.wm-filter-select:hover {
    border-color: var(--wm-gray-300);
}

.wm-filter-select:focus {
    border-color: var(--wm-primary);
}

/* 鍒嗙被绛涢€夐€夋嫨鍣?*/
.wm-category-filter-selector {
    position: relative;
}

.wm-category-filter-selected {
    padding: 5px 14px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s;
    background: white;
    font-size: 14px;
}

.wm-category-filter-selected:hover {
    border-color: var(--wm-gray-300);
}

.wm-category-filter-selected.active {
    border-color: var(--wm-primary);
}

.wm-category-filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}

.wm-category-filter-dropdown.active {
    display: block;
}

.wm-category-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-category-filter-item {
    position: relative;
}

.wm-category-filter-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}

.wm-category-filter-item-content:hover {
    background: var(--wm-gray-50);
}

.wm-category-filter-item-content.selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-category-filter-item > .wm-category-filter-list {
    padding-left: 20px;
    border-left: 2px solid var(--wm-gray-100);
    margin-left: 16px;
    display: none;
}

.wm-category-filter-toggle {
    font-size: 14px;
    color: var(--wm-gray-400);
    transition: transform 0.2s;
    cursor: pointer;
}

.wm-category-filter-toggle.expanded {
    transform: rotate(90deg);
}

.wm-category-filter-spacer {
    display: inline-block;
    width: 14px;
}

.wm-filter-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--wm-gray-400);
    font-size: 14px;
}

/* My Section */
.wm-view-content[data-view="my"] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wm-my-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    flex-shrink: 0;
}

.wm-my-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wm-gray-200);
    flex-shrink: 0;
}

.wm-my-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--wm-gray-900);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.wm-my-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    flex-shrink: 0;
}

.wm-my-tabs-secondary {
    margin-top: 8px;
}

.wm-my-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: var(--wm-gray-100);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.wm-my-tab.active {
    background: var(--wm-primary);
    color: white;
}

.wm-my-footer {
    padding: 16px;
    margin-top: auto;
    border-top: 1px solid var(--wm-gray-200);
}

.wm-my-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--wm-danger);
    border-radius: var(--wm-radius-sm);
    background: white;
    color: var(--wm-danger);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.wm-my-logout-btn i {
    font-size: 18px;
}

.wm-my-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--wm-danger);
}

.wm-my-logout-btn:active {
    background: rgba(239, 68, 68, 0.15);
}

/* Main Content */
.wm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--wm-gray-50);
    margin-left: var(--wm-sidebar-width);
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.wm-sidebar.collapsed ~ .wm-main {
    margin-left: 50px;
}

/* Header */
.wm-header {
    position: fixed;
    top: 0;
    left: var(--wm-sidebar-width);
    right: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    background: white;
    border-bottom: 1px solid var(--wm-gray-100);
    z-index: 90;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 80px;
    transition: left 0.3s ease;
}

.wm-sidebar.collapsed ~ .wm-main .wm-header {
    left: var(--wm-sidebar-collapsed-width);
}

/* WordPress Admin Bar 閫傞厤 - Header */
/* 绉婚櫎 admin bar 瀵?header 鐨勫奖鍝嶏紝header 濮嬬粓 top: 0 */
.admin-bar .wm-header {
    top: 0 !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .wm-header {
        top: 0 !important;
    }
}

/* Header鍙充晶鍖哄煙锛堟帓搴忛€夋嫨妗嗙瓑锛?*/
.wm-header-right {
    flex-shrink: 0;
    display: none;
    align-items: center;
}



@media screen and (min-width: 769px) {
    .wm-header-right {
        display: flex;
    }
}

/* 鎼滅储鍖哄煙瀹瑰櫒 */
.wm-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* PC绔細鎼滅储鏍忓眳涓紝鏈€澶у搴?88px */
@media screen and (min-width: 769px) {
    .wm-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }
    
    /* 鎼滅储鏍忓眳涓?*/
    .wm-search-wrapper {
        flex: 1;
        max-width: 888px;
        min-width: 0;
        margin: 0 auto;
        order: 2;
    }
    
    /* 鍙充晶閫夋嫨妗?*/
    .wm-header-right {
        flex-shrink: 0;
        margin-left: 16px;
        order: 3;
    }
}

/* 褰撳睆骞曞搴︿笉澶熸椂锛岃皟鏁村竷灞€閬垮厤閲嶅彔 */
@media screen and (min-width: 769px) and (max-width: 1600px) {
    .wm-header {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .wm-header-right {
        right: 12px;
    }
    
    .wm-search-wrapper {
        /* 鍔ㄦ€佽绠楋細100% 鍑忓幓宸﹀彸鍥哄畾鍏冪礌鐨勫搴﹀拰闂磋窛 */
        max-width: min(888px, calc(100% - 400px));
        padding-left: 0;
        padding-right: 0;
    }
}

/* 鏇寸獎鐨勫睆骞?*/
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .wm-search-wrapper {
        max-width: calc(100% - 300px);
        min-width: 250px;
    }
}

/* 闈炲父绐勭殑灞忓箷锛屼娇鐢ㄦ洿绱у噾鐨勫竷灞€ */
@media screen and (min-width: 769px) and (max-width: 1000px) {
    .wm-header {
        gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .wm-header-right {
        margin-left: 8px;
    }
    
    .wm-search-wrapper {
        max-width: none;
        min-width: 200px;
        margin: 0;
    }
    
    .wm-sort-box {
        gap: 6px;
    }
    
    .wm-sort-box select {
        font-size: 12px;
        padding: 4px 8px;
        padding-right: 22px;
    }
    
    #wm-per-page-select {
        width: 90px;
    }
    
    #wm-per-row-select {
        width: 95px;
    }
    
    #wm-sort-select {
        width: 120px;
    }
}

/* 鎼滅储妗嗘牱寮?- 绫讳技娣樺疂 */
.wm-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--wm-primary);
    border-radius: 20px;
    overflow: hidden;
    height: 40px;
    box-shadow: none !important;
}

/* 绉婚櫎focus楂樹寒 */
.wm-main .wm-header .wm-search-box {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: none !important;
}

.wm-search-box input {
    flex: 1;
    border: none !important;
    background: none;
    font-size: 14px;
    outline: none;
    padding: 0 16px;
    color: var(--wm-gray-800);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    margin: 0;
    margin-bottom: 0 !important;
}

.wm-search-box input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.wm-search-box input::placeholder {
    color: var(--wm-gray-400);
}

/* 涓氬姟鍛樿緭鍏ユ鑷姩瀹屾垚 */
.wm-salesperson-input-wrapper {
    position: relative;
}

.wm-salesperson-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.wm-salesperson-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--wm-gray-100);
    transition: background 0.2s;
}

.wm-salesperson-item:last-child {
    border-bottom: none;
}

.wm-salesperson-item:hover {
    background: var(--wm-gray-100);
}

.wm-salesperson-item:active {
    background: var(--wm-primary);
    color: white;
}

/* 纭繚鎼滅储妗嗘湰韬篃涓嶄細鏈塮ocus楂樹寒鍜岄槾褰?*/
.wm-search-box:focus-within {
    border-color: var(--wm-primary);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* 鎼滅储鎸夐挳 - 鍦ㄦ悳绱㈡鍐呭彸杈?*/
.wm-search-btn {
    height: 100%;
    padding: 0 20px;
    border: none;
    background: var(--wm-primary) !important;
    background-color: var(--wm-primary) !important;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin: 0;
    margin-bottom: 0 !important;
}

.wm-search-btn:hover {
    background: var(--wm-primary-dark) !important;
    background-color: var(--wm-primary-dark) !important;
    color: white !important;
}

.wm-search-btn:active {
    background: var(--wm-primary) !important;
    background-color: var(--wm-primary) !important;
    color: white !important;
}

/* 鎵爜鎸夐挳 - 鍦ㄦ悳绱㈡澶栧彸杈?*/
.wm-qr-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    height: 40px;
    border: 2px solid var(--wm-primary);
    background: white;
    color: var(--wm-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
    box-sizing: border-box;
}

.wm-qr-scan-btn i {
    font-size: 18px;
}

.wm-qr-scan-btn:hover {
    background: var(--wm-primary);
    color: white;
}

.wm-qr-scan-btn:active {
    background: var(--wm-primary-dark);
}
/* 瑙嗗浘鍒囨崲鎸夐挳 */
.wm-view-toggle-btn {
    padding: 5px 10px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 13px;
    background: white;
    cursor: pointer;
    outline: none;
    color: var(--wm-gray-900);
    transition: all 0.2s;
    height: 36px;
    margin-right: 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    box-sizing: border-box;
}

.wm-view-toggle-btn:hover {
    border-color: var(--wm-gray-300);
}

.wm-view-toggle-btn.active {
    background: var(--wm-primary);
    color: white;
    border-color: var(--wm-primary);
}

.wm-view-toggle-btn.active:hover {
    background: var(--wm-primary-dark);
    border-color: var(--wm-primary-dark);
}

.wm-sort-box {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wm-sort-box select {
    padding: 5px 10px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 13px;
    background: white;
    cursor: pointer;
    outline: none;
    color: var(--wm-gray-900);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 26px;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
}

/* 姣忛〉鍜屾瘡琛岄€夋嫨妗嗗搴?*/
#wm-per-page-select {
    width: 105px;
}

#wm-per-row-select {
    width: 110px;
}

/* 鎺掑簭閫夋嫨妗嗗搴?*/
#wm-sort-select {
    width: 140px;
}

.wm-sort-box select:focus {
    border-color: var(--wm-primary);
}

/* 姣忚鏁伴噺閫夋嫨鍣ㄥ湪鎵嬫満绔殣钘?*/
@media (max-width: 768px) {
    .wm-per-row-select {
        display: none !important;
    }
}

/* Content */
.wm-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: var(--wm-pagination-height);
    height: calc(100vh - var(--wm-header-height) - var(--wm-pagination-height));
    box-sizing: border-box;
}

/* PC绔細淇濇寔margin涓婁笅0锛宲adding涓?0涓?0 */
@media screen and (min-width: 769px) {
    .wm-content,
    #wm-router-view {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* PC绔細琛ㄦ牸瑙嗗浘涓嬶紝宸﹀彸padding涓?锛屽簳閮╬adding涓?0 */
@media screen and (min-width: 769px) {
    #wm-router-view:has(.wm-products-table-wrapper) {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 40px;
    }
}

/* Loading overlay for pagination */
.wm-loading-overlay {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.wm-loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.wm-pagination .wm-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wm-gray-500);
    font-size: 14px;
    margin-left: 12px;
}

/* Products Grid */
.wm-products-grid {
    display: grid;
    gap: 20px;
}

#wm-router-view .wm-products-grid {
    padding-bottom: 21px;
    padding-top: 0;
}

/* PC绔細浜у搧缃戞牸椤堕儴闂磋窛 */
@media screen and (min-width: 769px) {
    #wm-router-view .wm-products-grid {
        padding-top: 24px;
    }
}

/* 榛樿姣忚8涓紙閫氳繃绫绘帶鍒讹級 */
.wm-products-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.wm-products-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.wm-products-grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

.wm-products-grid-10 {
    grid-template-columns: repeat(10, 1fr);
}

/* 鍝嶅簲寮忚皟鏁达細澶у睆骞?*/
@media (min-width: 1600px) {
    .wm-products-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .wm-products-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .wm-products-grid-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    .wm-products-grid-10 {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 1599px) {
    .wm-products-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .wm-products-grid-6 {
        grid-template-columns: repeat(5, 1fr);
    }
    .wm-products-grid-8 {
        grid-template-columns: repeat(6, 1fr);
    }
    .wm-products-grid-10 {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* 閽堝鏇村皬鐨勫睆骞曪紝杩涗竴姝ヨ皟鏁?*/
@media (max-width: 1400px) {
    .wm-products-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .wm-products-grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }
    .wm-products-grid-8 {
        grid-template-columns: repeat(5, 1fr);
    }
    .wm-products-grid-10 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1100px) {
    .wm-products-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .wm-products-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .wm-products-grid-8 {
        grid-template-columns: repeat(4, 1fr);
    }
    .wm-products-grid-10 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .wm-products-grid-4,
    .wm-products-grid-6,
    .wm-products-grid-8,
    .wm-products-grid-10 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Products Table */
.wm-products-table-wrapper {
    background: white;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    margin-bottom: 0;
    margin-top: 0;
}

.wm-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wm-products-table thead {
    background: var(--wm-gray-50);
    border-bottom: 2px solid var(--wm-gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wm-products-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--wm-gray-700);
    white-space: nowrap;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--wm-gray-50);
}

.wm-table-header-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.wm-table-header-cell:hover {
    color: var(--wm-primary);
}

.wm-table-header-cell i {
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.wm-table-header-cell:hover i {
    opacity: 1;
}

.wm-products-table th:first-child {
    padding-left: 12px;
    padding-right: 12px;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}

.wm-products-table tbody tr {
    border-bottom: 1px solid var(--wm-gray-100);
    transition: background 0.2s;
}

.wm-products-table tbody tr:hover {
    background: var(--wm-gray-50);
}

.wm-products-table tbody tr.wm-product-table-row {
    cursor: pointer;
}

.wm-products-table td {
    padding: 12px 16px;
    color: var(--wm-gray-800);
    vertical-align: middle;
}

/* 搴忓彿鍒?*/
.wm-products-table th:first-child,
.wm-products-table td:first-child {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
}

.wm-table-thumb-cell {
    width: 60px;
    padding: 8px 16px;
}

.wm-table-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--wm-radius-sm);
    background: var(--wm-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.wm-table-thumb-cell i {
    font-size: 24px;
    color: var(--wm-gray-300);
}

.wm-table-name-cell {
    font-weight: 500;
    color: var(--wm-gray-900);
    max-width: 120px;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-table-sku-cell {
    font-family: 'Courier New', monospace;
    color: var(--wm-gray-900);
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-table-sku-cell .wm-sku-filter-item {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding: 4px 8px;
    background: transparent;
    color: var(--wm-gray-900);
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
}

.wm-table-sku-cell .wm-sku-filter-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-table-location-cell {
    max-width: 350px;
    min-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wm-gray-600);
}

.wm-table-location-cell .wm-location-filter-item {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding: 4px 8px;
    background: transparent;
    color: var(--wm-gray-700);
    border-radius: 4px;
    font-weight: normal;
    transition: all 0.2s;
}

.wm-table-location-cell .wm-location-filter-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-table-creator-cell .wm-created-by-filter-item {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding: 4px 8px;
    background: transparent;
    color: var(--wm-gray-700);
    border-radius: 4px;
    font-weight: normal;
    transition: all 0.2s;
}

.wm-table-creator-cell .wm-created-by-filter-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-table-actions-cell {
    white-space: nowrap;
}

.wm-table-actions-cell .wm-btn-stock-out {
    padding: 6px 12px;
    font-size: 12px;
}

/* Product Card */
.wm-product-card {
    background: white;
    border-radius: var(--wm-radius);
    overflow: hidden;
    box-shadow: var(--wm-shadow);
    transition: all 0.3s;
    cursor: pointer;
    height: auto;
}

/* Location Cards */
.wm-location-card {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: auto;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wm-location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--stock-fill-color, #22c55e);
    opacity: 0.4;
    clip-path: inset(0 calc(100% - var(--stock-fill-percent, 0%)) 0 0);
    transition: clip-path 0.3s ease, background 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.wm-location-card-header,
.wm-location-card-qty,
.wm-location-card-bottom {
    position: relative;
    z-index: 1;
}

.wm-location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wm-shadow-lg);
}

.wm-location-card:hover::before {
    opacity: 0.5;
}

.wm-location-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.wm-location-card-sku {
    font-size: 16px;
    font-weight: 600;
    color: var(--wm-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wm-location-card-stock-value {
    font-size: 12px;
    color: var(--wm-gray-600);
    white-space: nowrap;
    margin-bottom: 8px;
}

.wm-location-card-qty {
    font-size: 13px;
    color: var(--wm-gray-700);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wm-location-card-qty-left {
    text-align: left;
}

.wm-location-card-qty-right {
    text-align: right;
}

.wm-location-card-bottom {
    margin-top: auto;
    text-align: left;
}

.wm-location-card-bottom .wm-product-location.wm-location-breadcrumb {
    color: var(--wm-gray-900);
    margin-bottom: 6px;
}

.wm-location-card .wm-location-code {
    margin-left: 0;
    color: var(--wm-gray-900);
}

.wm-location-code {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--wm-gray-600);
    font-family: inherit;
    font-weight: 400;
}

/* 鎵嬫満绔綅缃崱鐗囨牱寮?*/
@media (max-width: 768px) {
    .wm-location-card {
        padding: 8px;
        aspect-ratio: auto;
        min-height: auto;
    }
    
    .wm-location-card-header {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 4px;
    }
    
    .wm-location-card-stock-value {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .wm-location-card-qty {
        margin-bottom: 6px;
        font-size: 12px;
    }
}

.wm-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wm-shadow-lg);
}

.wm-product-image {
    aspect-ratio: 1;
    background: var(--wm-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.wm-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.wm-product-image-zoom-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    max-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
    z-index: 100;
    font-size: 25px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
    box-shadow: none;
    outline: none;
    overflow: hidden;
}

.wm-product-image-zoom-btn i {
    font-size: 25px !important;
    line-height: 1 !important;
    display: block !important;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    color: var(--wm-primary) !important;
}

.wm-product-card:hover .wm-product-image-zoom-btn {
    opacity: 1;
}

.wm-product-image-zoom-btn:hover {
    background: transparent;
    transform: scale(1.1);
}

.wm-product-image-zoom-btn:active {
    transform: scale(0.95);
}

/* 鍥剧墖鎳掑姞杞芥牱寮?*/
.wm-lazy-image {
    opacity: 0.5;
    filter: blur(5px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.wm-lazy-image.wm-loaded {
    opacity: 1;
    filter: none;
}

.wm-product-image i {
    font-size: 48px;
    color: var(--wm-gray-300);
}

.wm-product-info {
    padding: 16px;
}

@media (max-width: 768px) {
    .wm-product-info {
        padding: 8px;
    }
    
    /* 鎵嬫満绔骇鍝佸崱姣忚宸﹀彸padding */
    .wm-product-row {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 4px;
    }
    
    /* 鎵嬫満绔骇鍝佸崱浣嶇疆淇℃伅宸﹀彸padding */
    .wm-product-location,
    .wm-location-breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* 鎵嬫満绔浘鐗囩敾寤婃敮鎸佽Е鎽告粦鍔?*/
    .wm-image-gallery {
        touch-action: pan-y; /* 鍏佽鍨傜洿婊氬姩锛屼絾澶勭悊姘村钩婊戝姩 */
        -webkit-overflow-scrolling: touch;
    }
    
    .wm-image-current {
        touch-action: pan-x; /* 鍏佽姘村钩婊戝姩 */
    }
}

.wm-product-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wm-product-row:has(.wm-product-location) {
    align-items: flex-start;
}

.wm-product-row:last-child {
    margin-bottom: 0;
}

.wm-product-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--wm-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* 浜у搧鍗＄墖涓揣鍙峰拰浜у搧鍚嶇殑缁勫悎瀹瑰櫒 */
.wm-product-sku-name-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0;
}

/* 浜у搧鍗＄墖涓殑浜у搧鍚嶏紝瀛椾綋澶у皬涓庤揣鍙风浉鍚?*/
.wm-product-card .wm-product-card-name {
    font-size: inherit;
    font-weight: 400;
    color: var(--wm-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wm-product-category {
    font-size: 13px;
    color: var(--wm-gray-500);
}

/* 浜у搧鍗＄墖涓殑搴撳瓨鏁伴噺缁?*/
.wm-product-quantity-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 8px;
}

/* 浜у搧鍗＄墖涓殑鏁伴噺鏍囩 - 榛樿闅愯棌 */
.wm-product-quantity-label {
    font-size: 11px;
    color: var(--wm-gray-500);
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 榧犳爣鎮仠鏃舵樉绀烘暟閲忔爣绛?*/
.wm-product-card:hover .wm-product-quantity-label {
    opacity: 1;
}

/* 浜у搧鍗＄墖涓殑鏁伴噺鍊?*/
.wm-product-card .wm-product-quantity-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--wm-primary);
    white-space: nowrap;
    line-height: 1.2;
}

/* 鎵嬫満绔簱瀛樻樉绀?- 淇濇寔PC绔牱寮忎竴鑷达細涓婁笅绔栫洿鎺掑垪锛屾暟閲忔爣绛炬偓鍋滄樉绀?*/
@media (max-width: 768px) {
    .wm-product-row:first-child .wm-product-quantity-group {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 8px;
    }
    
    .wm-product-row:first-child .wm-product-quantity-label {
        opacity: 0;
        font-size: 11px;
        transition: opacity 0.2s ease;
    }
    
    .wm-product-card:hover .wm-product-quantity-label {
        opacity: 1;
    }
    
    .wm-product-row:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.wm-product-location {
    font-size: 12px;
    color: var(--wm-gray-400);
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.wm-product-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wm-btn-stock-out {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--wm-danger);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    margin-right: 0;
}

.wm-btn-stock-out:hover {
    background: #dc2626;
}

/* Tags */
.wm-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    border-radius: 4px;
}

/* Loading & Empty */
.wm-loading,
.wm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--wm-gray-400);
}

.wm-loading i,
.wm-empty i {
    font-size: 48px;
    margin-bottom: 16px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ri-spin {
    animation: spin 1s linear infinite;
}

/* 楠ㄦ灦灞忔牱寮?*/
.wm-skeleton-card,
.wm-skeleton-row {
    pointer-events: none;
    user-select: none;
}

.wm-skeleton-box {
    background: var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    position: relative;
    overflow: hidden;
}

.wm-skeleton-text {
    background: var(--wm-gray-200);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.wm-skeleton-box::before,
.wm-skeleton-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 浜у搧鍗＄墖楠ㄦ灦灞?*/
.wm-skeleton-card .wm-product-image {
    width: 100%;
    aspect-ratio: 1;
    background: var(--wm-gray-200);
    border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
    margin-bottom: 0;
}

.wm-skeleton-card .wm-product-info {
    padding: 12px;
}

.wm-skeleton-card .wm-product-row {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wm-skeleton-card .wm-product-row:last-child {
    margin-bottom: 0;
}

/* 琛ㄦ牸楠ㄦ灦灞?*/
.wm-skeleton-row td {
    padding: 12px 8px;
    vertical-align: middle;
}

.wm-skeleton-row .wm-skeleton-box {
    display: block;
    margin: 0 auto;
}

.wm-skeleton-row .wm-skeleton-text {
    display: block;
    margin: 0;
}

/* Pagination */
.wm-pagination {
    position: fixed;
    bottom: 0;
    left: var(--wm-sidebar-width);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 24px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 90;
    border-top: 1px solid var(--wm-gray-200);
    height: var(--wm-pagination-height);
    box-sizing: border-box;
}

/* 褰撴湁绛涢€夊唴瀹规椂锛屼娇鐢?space-between 甯冨眬 */
.wm-pagination:has(.wm-pagination-filters) {
    justify-content: space-between;
}

.wm-pagination-filters {
    flex: 1;
    font-size: 12px;
    color: var(--wm-gray-600);
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    min-width: 0;
    line-height: 1.4;
}

.wm-pagination-filters .wm-pagination-clear-filters {
    margin-left: 8px;
    color: var(--wm-gray-900);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}

/* 褰撶瓫閫夊唴瀹逛负绌烘椂闅愯棌 */
.wm-pagination-filters:empty {
    display: none;
}

/* 鎵嬫満绔?pagination 甯冨眬璋冩暣 */
@media (max-width: 768px) {
    .wm-pagination {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 12px;
        background: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 90;
        border-top: 1px solid var(--wm-gray-200);
        height: auto;
        min-height: var(--wm-pagination-height);
        box-sizing: border-box;
    }
    
    .wm-pagination:has(.wm-pagination-filters) {
        justify-content: flex-start;
    }
    
    .wm-pagination-filters {
        flex: 1 1 100%;
        order: 1;
        font-size: 11px;
        max-width: 100%;
        margin-bottom: 8px;
    }
    
    .wm-pagination-buttons {
        flex: 1 1 100%;
        order: 2;
        justify-content: flex-start;
        gap: 4px;
    }
    
    .wm-pagination-info {
        flex: 1 1 100%;
        order: 3;
        font-size: 11px;
    }
}

.wm-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .wm-pagination-buttons {
        gap: 4px;
    }
}

.wm-sidebar.collapsed ~ .wm-main .wm-pagination {
    left: var(--wm-sidebar-collapsed-width);
}

/* Pagination */
#wm-router-view .wm-pagination {
    transform: translatex(0px) translatey(0px);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 70px;
    padding-left: 24px;
    align-items: center;
}

@media (max-width: 768px) {
    #wm-router-view .wm-pagination {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.wm-page-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wm-gray-200);
    background: white;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-page-btn {
        width: 24px;
        height: 24px;
        font-size: 11px;
        border-width: 1px;
    }
}

.wm-page-btn:hover {
    border-color: var(--wm-primary);
    color: var(--wm-primary);
}

.wm-page-btn.active {
    background: var(--wm-primary);
    border-color: var(--wm-primary);
    color: white;
}

.wm-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 鍒嗛〉鐪佺暐鍙?*/
.wm-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    color: var(--wm-gray-400);
    font-size: 12px;
    user-select: none;
    pointer-events: none;
    margin: 0;
}

/* Pagination Info */
.wm-pagination-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--wm-gray-600);
}

@media (max-width: 768px) {
    .wm-pagination-info {
        gap: 6px;
        font-size: 11px;
    }
}

.wm-pagination-total {
    white-space: nowrap;
}

.wm-pagination-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wm-pagination-jump label {
    color: var(--wm-gray-600);
    font-size: 12px;
}

.wm-page-jump-input {
    width: 70px !important;
    height: 28px;
    padding: 0 6px !important;
    border: 1px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    text-align: center;
    font-size: 12px;
    transition: border-color 0.2s;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-page-jump-input {
        width: 50px !important;
        height: 24px;
        font-size: 11px;
        padding: 0 4px !important;
    }
}

.wm-page-jump-input:focus {
    outline: none;
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 2px rgba(var(--wm-primary-rgb, 99, 102, 241), 0.1);
}

.wm-page-jump-btn {
    min-width: 45px;
    height: 28px;
    padding: 0 10px;
    background: var(--wm-primary);
    color: white;
    border: none;
    border-radius: var(--wm-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
}

.wm-page-jump-btn:hover {
    background: var(--wm-primary-dark, #4f46e5);
}

.wm-page-jump-btn:active {
    transform: translateY(1px);
}

/* 鍝嶅簲寮忥細绉诲姩绔殣钘忓垎椤典俊鎭?*/
@media (max-width: 768px) {
    .wm-pagination-info {
        display: none;
    }
}

/* Buttons */
.wm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    background: var(--wm-gray-100);
    color: var(--wm-gray-700);
}

.wm-btn:hover {
    background: var(--wm-gray-200);
}

.wm-btn-primary {
    background: linear-gradient(135deg, var(--wm-primary), #818cf8);
    color: white;
}

.wm-btn-primary:hover {
    background: linear-gradient(135deg, var(--wm-primary-hover), var(--wm-primary));
    transform: translateY(-1px);
}

.wm-btn-success {
    background: linear-gradient(135deg, var(--wm-success), #34d399);
    color: white;
}

.wm-btn-success:hover {
    background: linear-gradient(135deg, var(--wm-success-hover), var(--wm-success));
}

.wm-btn-danger {
    background: var(--wm-danger);
    color: white;
}

.wm-btn-danger:hover {
    background: #dc2626;
}

.wm-btn-secondary {
    background: var(--wm-gray-200);
    color: var(--wm-gray-700);
}

.wm-btn-secondary:hover {
    background: var(--wm-gray-300);
    color: var(--wm-gray-800);
}

.wm-btn-block {
    width: 100%;
}

.wm-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.wm-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

/* Modal */
.wm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.wm-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.wm-modal-container {
    position: relative;
    background: white;
    border-radius: var(--wm-radius);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--wm-shadow-lg);
    animation: modalIn 0.3s ease;
    z-index: 1;
}

.wm-modal-large {
    max-width: 700px;
}

@media (max-width: 768px) {
    .wm-modal-large {
        max-height: 85vh !important;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.wm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--wm-gray-100);
}

@media (max-width: 768px) {
    .wm-modal-container {
        max-height: 85vh !important;
    }
    
    .wm-modal-header {
        height: 60px;
        padding: 0 16px;
        min-height: 60px;
    }
    
    .wm-modal-header h2 {
        font-size: 16px;
    }
}

.wm-modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.wm-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-location-scan-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--wm-primary);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 0;
}

.wm-location-scan-btn:hover {
    background: var(--wm-primary-dark);
    transform: scale(1.05);
}

.wm-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--wm-gray-100);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    position: relative;
    z-index: 1001;
    pointer-events: auto;
    color: var(--wm-gray-500);
    transition: all 0.2s;
    margin-bottom: 0;
}

.wm-modal-close:hover {
    background: var(--wm-gray-200);
    color: var(--wm-gray-700);
}

.wm-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

.wm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--wm-gray-100);
    background: var(--wm-gray-50);
}

/* 鎵嬫満绔簳閮ㄦ寜閽洿绱у噾 */
@media screen and (max-width: 768px) {
    .wm-modal-footer {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .wm-modal-footer .wm-btn {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
    }
    
    #wm-save-continue {
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
    }
}

/* Form */
.wm-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.wm-form-group {
    flex: 1;
}

.wm-form-group-full {
    flex: 0 0 100%;
}

/* 鎵嬫満绔細浣嶇疆瀛楁鐙崰涓€琛岋紝璐у彿绉诲埌绗簩琛?*/
@media (max-width: 768px) {
    /* 浣嶇疆瀛楁缁勭嫭鍗犱竴琛?*/
    .wm-form-group-location {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    
    /* 濡傛灉浣嶇疆瀛楁鍜岃揣鍙峰湪鍚屼竴琛岋紝寮哄埗浣嶇疆瀛楁鐙崰涓€琛岋紝璐у彿鎹㈣ */
    .wm-form-row:has(.wm-form-group-location) {
        flex-wrap: wrap;
    }
    
    /* 纭繚浣嶇疆瀛楁鍚庣殑瀛楁锛堝璐у彿锛夋崲琛屾樉绀哄湪绗簩琛?*/
    .wm-form-row:has(.wm-form-group-location) .wm-form-group-location {
        flex: 0 0 100% !important;
        margin-bottom: 16px;
    }
    
    .wm-form-row:has(.wm-form-group-location) .wm-form-group:not(.wm-form-group-location) {
        flex: 1;
    }
}

.wm-form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--wm-gray-700);
}

.wm-form-group label input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    cursor: pointer;
}

.wm-form-group label span {
    cursor: pointer;
    user-select: none;
}

.wm-form-group label .required {
    color: var(--wm-danger);
}

.wm-form-group input,
.wm-form-group select,
.wm-form-group textarea {
    width: 100%;
    padding: 5px 16px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 14px;
    transition: border-color 0.2s;
    outline: none;
    margin-bottom: 5px;
}

.wm-form-group input:focus,
.wm-form-group select:focus,
.wm-form-group textarea:focus {
    border-color: var(--wm-primary);
}

.wm-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* 鏁伴噺杈撳叆妗嗗甫鍔犲噺鎸夐挳 */
.wm-quantity-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-quantity-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wm-gray-200);
    background: white;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--wm-gray-700);
    transition: all 0.2s;
}

.wm-quantity-minus {
    margin-right: 0 !important;
}

.wm-quantity-btn:hover {
    background: var(--wm-primary);
    border-color: var(--wm-primary);
    color: white;
}

.wm-quantity-btn:active {
    transform: scale(0.95);
}

.wm-quantity-input-wrapper input[type="number"] {
    width: 100px !important;
    text-align: center;
}

/* 鏁板渾鐝犵瑪鎸夐挳甯冨眬 */
.wm-quantity-count-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-quantity-count-wrapper input[type="number"] {
    flex: 1 1 50%;
    min-width: 0;
}

.wm-pen-count-btn {
    flex: 1 1 50%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--wm-primary);
    background: var(--wm-primary);
    color: #fff;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.wm-pen-count-btn:hover {
    background: var(--wm-primary-hover);
    border-color: var(--wm-primary-hover);
}

.wm-pen-count-btn:active {
    transform: scale(0.98);
}

/* 鍦嗙彔绗旇鏁板脊绐?*/
.wm-pen-count-modal .wm-modal-container {
    max-width: 900px;
    width: 94vw;
}

.wm-pen-count-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px !important;
}

.wm-pen-count-header .wm-btn {
    margin: 0;
}

.wm-pen-count-header .wm-modal-close {
    margin-left: auto;
}

.wm-pen-count-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.wm-pen-count-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--wm-gray-500);
    line-height: 1.4;
}

.wm-pen-count-status-count {
    font-weight: 500;
    color: var(--wm-gray-700);
}

.wm-pen-count-toolbar-zoom {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.wm-pen-count-toolbar .wm-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.wm-pen-count-toolbar .wm-btn i {
    font-size: 12px !important;
}

.wm-btn-sm {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.wm-btn-sm i {
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .wm-btn-sm {
        padding: 7px 12px !important;
        font-size: 13px !important;
    }
    
    .wm-btn-sm i {
        font-size: 13px !important;
    }
    
    .wm-pen-count-header {
        padding: 10px 12px !important;
        gap: 6px;
    }
}

.wm-pen-count-toolbar .wm-btn-icon {
    padding: 6px !important;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wm-pen-count-toolbar .wm-btn-icon i {
    margin: 0 !important;
}

.wm-pen-count-zoom {
    cursor: default;
}

.wm-pen-count-zoom.can-drag {
    cursor: grab;
}

.wm-pen-count-stage {
    position: relative;
    background: #f8fafc;
    border: 2px dashed var(--wm-gray-200);
    border-radius: var(--wm-radius);
    min-height: 240px;
    max-height: 60vh;
    overflow: auto;
    margin: 0 -4px;
}

.wm-pen-count-zoom {
    position: relative;
    transform-origin: 0 0;
    display: inline-block;
}

.wm-pen-count-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.wm-pen-count-image.is-hidden {
    display: none;
}

.wm-pen-count-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
}

.wm-pen-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 10px !important;
    min-height: 10px !important;
    line-height: 0 !important;
    border-radius: 50%;
    background: radial-gradient(circle, #39ff14 0%, #39ff14 70%, #ffffff 70%, #ffffff 100%) !important;
    border: 0;
    box-shadow: 0 0 3px rgba(57, 255, 20, 0.8);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.wm-pen-count-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--wm-gray-500);
    padding: 16px;
    background: url('../images/pen-count-placeholder.jpg') center/contain no-repeat;
}

.wm-pen-count-placeholder-text {
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.wm-pen-count-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-top: 1px solid var(--wm-gray-100);
    gap: 16px;
}

@media (max-width: 768px) {
    .wm-pen-count-footer {
        padding-top: 8px;
        margin-top: 8px;
        gap: 12px;
    }
    
    .wm-pen-count-footer .wm-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

.wm-pen-count-footer > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.wm-pen-count-footer > div:first-child div {
    display: flex;
    gap: 6px;
}

.wm-pen-count-status {
    font-size: 13px;
    color: var(--wm-gray-500);
}

/* Location Selector */
.wm-location-selector {
    position: relative;
}

.wm-location-selected {
    padding: 12px 16px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s;
}

.wm-location-selected:hover {
    border-color: var(--wm-gray-300);
}

.wm-location-selected.active {
    border-color: var(--wm-primary);
}

.wm-placeholder {
    color: var(--wm-gray-400);
}

.wm-location-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

/* 鎵嬫満绔細璋冩暣浣嶇疆閫夋嫨鍣ㄤ笅鎷夋瀹藉害鍜屽畾浣?*/
@media (max-width: 768px) {
    .wm-location-dropdown {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        transform: none;
        border-radius: var(--wm-radius);
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 纭繚鍦ㄦā鎬佹鍐呮椂姝ｇ‘鏄剧ず */
    .wm-modal-container .wm-location-dropdown {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }
}

.wm-location-dropdown.active {
    display: block;
}

.wm-location-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-location-item {
    position: relative;
}

.wm-location-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    transition: background 0.2s;
}

.wm-location-item-content:hover {
    background: var(--wm-gray-50);
}

.wm-location-item-content.selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-location-item-content .wm-location-name {
    cursor: pointer;
    flex: 1;
}

.wm-location-item-content i {
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.wm-location-item-content i.rotated {
    transform: rotate(90deg);
}

.wm-location-item > .wm-location-list {
    padding-left: 20px;
    border-left: 2px solid var(--wm-gray-100);
    margin-left: 16px;
    display: none;
}

.wm-location-toggle {
    font-size: 16px;
    color: var(--wm-gray-400);
    transition: transform 0.2s;
    margin-right: 4px;
}

.wm-location-toggle.expanded {
    transform: rotate(90deg);
}

.wm-location-spacer {
    display: inline-block;
    width: 16px;
    margin-right: 4px;
}

/* Category Selector */
.wm-category-selector {
    position: relative;
}

.wm-category-selected {
    padding: 5px 16px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s;
}

.wm-category-selected:hover {
    border-color: var(--wm-gray-300);
}

.wm-category-selected.active {
    border-color: var(--wm-primary);
}

.wm-category-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}

.wm-category-dropdown.active {
    display: block;
}

.wm-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-category-item {
    position: relative;
}

.wm-category-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.wm-category-item-content:hover {
    background: var(--wm-gray-50);
}

.wm-category-item-content.selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-category-item > .wm-category-list {
    padding-left: 20px;
    border-left: 2px solid var(--wm-gray-100);
    margin-left: 16px;
    display: none;
}

.wm-category-toggle {
    font-size: 16px;
    color: var(--wm-gray-400);
    transition: transform 0.2s;
    margin-right: 4px;
}

.wm-category-toggle.expanded {
    transform: rotate(90deg);
}

/* Tags Selector */
.wm-tags-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wm-tag-checkbox {
    cursor: pointer;
}

.wm-tag-checkbox input {
    display: none;
}

.wm-tag-checkbox .wm-tag-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.wm-tag-checkbox input:checked + .wm-tag-label {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--wm-primary);
    transform: scale(1.05);
}

.wm-tag-checkbox .wm-tag-label:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.wm-tag-checkbox input:checked + .wm-tag {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--wm-primary);
}

/* Image Upload */
.wm-image-upload {
    position: relative;
}

.wm-image-preview {
    width: 150px;
    height: 150px;
    border: 2px dashed var(--wm-gray-300);
    border-radius: var(--wm-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    background: var(--wm-gray-50);
}

.wm-image-preview:hover {
    border-color: var(--wm-primary);
    background: rgba(99, 102, 241, 0.05);
}

.wm-image-preview i {
    font-size: 36px;
    color: var(--wm-gray-400);
    margin-bottom: 8px;
}

.wm-image-preview span {
    font-size: 13px;
    color: var(--wm-gray-500);
}

.wm-image-preview small {
    font-size: 11px;
    color: var(--wm-gray-400);
}

.wm-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-image-preview.has-image i,
.wm-image-preview.has-image > span {
    display: none;
}

/* 涓婁紶涓姸鎬?*/
.wm-image-preview.uploading {
    position: relative;
}

.wm-image-preview.uploading img {
    opacity: 0.5;
}

.wm-upload-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.wm-upload-progress::after {
    content: '...';
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* 澶氬浘鐗囦笂浼?*/
.wm-images-upload {
    width: 100%;
}

.wm-images-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wm-image-add-btn {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--wm-gray-50);
}

.wm-image-add-btn:hover {
    border-color: var(--wm-primary);
    background: rgba(99, 102, 241, 0.05);
}

.wm-image-add-btn i {
    font-size: 32px;
    color: var(--wm-gray-400);
    margin-bottom: 4px;
}

.wm-image-add-btn span {
    font-size: 12px;
    color: var(--wm-gray-500);
    text-align: center;
    padding: 0 8px;
}

.wm-image-add-btn small {
    font-size: 10px;
    color: var(--wm-gray-400);
    text-align: center;
    margin-top: 4px;
}

.wm-image-preview-item {
    position: relative;
    width: 120px;
    height: 120px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
    background: var(--wm-gray-100);
}

.wm-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-image-preview-item .wm-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    margin: 0;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
    opacity: 0;
    z-index: 100;
    pointer-events: auto;
}

.wm-image-preview-item:hover .wm-image-remove {
    opacity: 1;
}

.wm-image-preview-item .wm-image-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.wm-image-preview-item .wm-image-rotate {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    margin: 0;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
    opacity: 0;
    z-index: 100;
    pointer-events: auto;
}

.wm-image-preview-item:hover .wm-image-rotate {
    opacity: 1;
}

.wm-image-preview-item .wm-image-rotate:hover {
    background: rgba(79, 70, 229, 0.95);
    transform: scale(1.1);
}

.wm-image-preview-item .wm-image-rotate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.wm-image-preview-item.rotating {
    opacity: 0.7;
    pointer-events: none;
}

.wm-image-preview-item.rotating::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-top-color: var(--wm-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    z-index: 20;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.wm-image-preview-item.uploading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-image-preview-item.uploading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 1;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 鍥剧墖鎷栨嫿鎺掑簭鏍峰紡 */
.wm-images-preview-container.ui-sortable,
#wm-edit-images-preview.ui-sortable {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wm-image-preview-item {
    cursor: move;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wm-image-preview-item:active {
    cursor: grabbing;
}

.wm-image-preview-item.ui-sortable-helper {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0.9;
}

/* 绉诲姩绔Е鎽告嫋鎷芥牱寮?*/
.wm-image-preview-item.wm-touch-dragging {
    opacity: 0.7;
    transform: scale(0.95);
    transition: none;
}

/* 绉诲姩绔紭鍖栵細澧炲姞瑙︽懜鍖哄煙 */
@media (max-width: 768px) {
    .wm-image-preview-item {
        touch-action: none; /* 绂佺敤榛樿瑙︽懜琛屼负锛屽厑璁歌嚜瀹氫箟鎷栨嫿 */
        -webkit-user-select: none;
        user-select: none;
    }
    
    .wm-image-preview-item img {
        pointer-events: none; /* 闃叉鍥剧墖骞叉壈鎷栨嫿 */
    }
    
    /* 绉诲姩绔細鍒犻櫎鍜屾棆杞寜閽缁堟樉绀?*/
    .wm-image-preview-item .wm-image-remove,
    .wm-image-preview-item .wm-image-rotate {
        opacity: 1 !important;
        pointer-events: auto !important; /* 纭繚鎸夐挳鍙互鐐瑰嚮 */
        z-index: 200 !important; /* 鎻愰珮灞傜骇锛岀‘淇濆湪鍥剧墖涔嬩笂 */
    }
    
    /* 绉诲姩绔細璋冩暣鎸夐挳澶у皬锛屼究浜庣偣鍑?*/
    .wm-image-preview-item .wm-image-remove,
    .wm-image-preview-item .wm-image-rotate {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    /* 绉诲姩绔細璋冩暣鎸夐挳浣嶇疆锛岀‘淇濆湪鍥剧墖鍐呴潬鍙?*/
    .wm-image-preview-item .wm-image-remove {
        top: 6px;
        right: 6px;
    }
    
    .wm-image-preview-item .wm-image-rotate {
        bottom: 6px;
        right: 6px;
    }
}

.wm-image-sortable-placeholder {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--wm-primary);
    border-radius: var(--wm-radius-sm);
    background: rgba(59, 130, 246, 0.1);
    visibility: visible !important;
}

/* Product Detail */
.wm-product-detail {
    padding: 0;
}

.wm-detail-header {
    background: white;
    padding: 24px;
    border-radius: var(--wm-radius);
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
}

.wm-detail-image {
    width: 200px;
    height: 200px;
    border-radius: var(--wm-radius);
    overflow: hidden;
    background: var(--wm-gray-100);
    flex-shrink: 0;
}

.wm-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-detail-image i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 64px;
    color: var(--wm-gray-300);
}

/* 鍥剧墖杞挱 */
.wm-image-gallery {
    position: relative;
    width: 100%;
    height: 100%;
}

.wm-image-current {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.wm-image-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.wm-image-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.wm-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wm-image-current img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

.wm-image-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.wm-image-nav button {
    pointer-events: auto;
}

.wm-image-current:hover .wm-image-nav {
    opacity: 1;
}

.wm-image-prev,
.wm-image-next {
    width: auto;
    height: auto;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    padding: 4px;
    z-index: 10;
}

.wm-image-prev {
    margin-left: 3px;
}

.wm-image-next {
    margin-right: 3px;
}

.wm-image-prev:hover,
.wm-image-next:hover {
    color: white;
    transform: scale(1.1);
}

.wm-image-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 鍥剧墖缂╃暐鍥惧垪琛?*/
.wm-image-thumbnails {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    overflow-x: auto;
    margin-top: 12px;
}

.wm-image-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.wm-image-thumbnail:hover {
    border-color: var(--wm-primary);
    transform: scale(1.05);
}

.wm-image-thumbnail.active {
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 2px rgba(var(--wm-primary-rgb), 0.2);
}

.wm-image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-image-thumbnail-labels {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wm-image-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.wm-image-label-current {
    background: #10b981;
    color: white;
}

.wm-image-label-history {
    background: #6b7280;
    color: white;
}

.wm-image-time {
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    white-space: nowrap;
}

/* 鍥剧墖棰勮寮圭獥 */
.wm-image-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y; /* 鍏佽鍨傜洿婊氬姩锛屼絾澶勭悊姘村钩婊戝姩 */
}

.wm-image-viewer-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.wm-image-viewer-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.wm-image-viewer-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-image-viewer-slide {
    position: relative;
    overflow: hidden;
}

.wm-image-viewer-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

.wm-image-viewer-slide img,
.wm-image-viewer-zoomable {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    user-select: none;
    cursor: default;
}

.wm-image-viewer-zoomable {
    transition: transform 0.1s ease-out;
}

.wm-image-viewer-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: opacity 0.3s ease;
}

.wm-image-viewer-info {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10002;
    max-width: 90%;
    flex-wrap: wrap;
    justify-content: center;
}

.wm-image-viewer-info .wm-image-label {
    font-size: 13px;
    padding: 4px 10px;
}

.wm-image-viewer-info .wm-image-time {
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.wm-image-viewer-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.2s;
    z-index: 10002;
}

.wm-image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.wm-image-viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 32px;
    transition: all 0.2s;
    z-index: 10002;
    padding: 16px;
}

.wm-image-viewer-nav:hover {
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.wm-image-viewer-prev {
    left: 0;
}

.wm-image-viewer-next {
    right: 0;
}

.wm-image-viewer-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10002;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 褰撳悓鏃舵湁鏍囩鍜屾椂闂翠俊鎭椂锛岃皟鏁存寚绀哄櫒浣嶇疆 */
.wm-image-viewer-modal:has(.wm-image-viewer-info) .wm-image-viewer-indicator {
    top: 20px;
}

/* 鍥剧墖鏌ョ湅鍣ㄥ伐鍏锋爮 */
.wm-image-viewer-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 10002;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wm-image-viewer-tool-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    font-size: 16px;
    margin: 0;
}

.wm-image-viewer-tool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.1);
}

.wm-image-viewer-tool-btn:active {
    transform: scale(0.95);
}

.wm-detail-info {
    flex: 1;
}

.wm-detail-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wm-gray-500);
    margin-bottom: 8px;
}

.wm-detail-category {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wm-gray-500);
    margin-bottom: 8px;
}

/* 闈㈠寘灞戝鑸?*/
.wm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.wm-breadcrumb-item {
    cursor: pointer;
    transition: all 0.2s;
    padding: 2px 6px 2px 0;
    border-radius: 4px;
}

/* 璐у彿绛涢€夐」鍘绘帀宸︿晶padding */
.wm-sku-filter-item {
    padding-left: 0 !important;
}

.wm-breadcrumb-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-breadcrumb-item:active {
    background: rgba(99, 102, 241, 0.2);
}

.wm-breadcrumb .ri-arrow-right-s-line {
    font-size: 14px;
    color: var(--wm-gray-400);
    margin: 0 -2px;
}

.wm-detail-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.wm-detail-sku {
    color: var(--wm-gray-500);
    margin-bottom: 16px;
}

.wm-detail-location-code {
    color: var(--wm-gray-500);
    margin-left: 24px;
}

.wm-detail-meta {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: var(--wm-gray-500);
}

.wm-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.wm-detail-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.wm-detail-action-buttons .wm-btn {
    min-height: 36px;
    font-weight: 500;
}

.wm-detail-action-buttons .wm-btn i {
    font-size: 16px;
}

/* 绉诲姩绔寜閽洿灏?*/
@media (max-width: 768px) {
    .wm-detail-action-buttons {
        gap: 5px;
    }
    
    .wm-detail-action-buttons .wm-btn-sm {
        padding: 7px 6px !important;
        margin-right: 3px;
    }
}

.wm-detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Detail Tabs */
.wm-detail-tabs {
    display: flex;
    gap: 4px;
    background: white;
    padding: 8px;
    border-radius: var(--wm-radius);
    margin-bottom: 16px;
}

.wm-detail-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.wm-detail-tab.active {
    background: var(--wm-primary);
    color: white;
}

.wm-detail-content {
    background: white;
    padding: 24px;
    border-radius: var(--wm-radius);
}

/* Detail Barcodes */
.wm-detail-barcodes {
    background: white;
    padding: 24px;
    border-radius: var(--wm-radius);
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.wm-barcode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.wm-barcode-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-gray-700);
    text-align: center;
}

.wm-barcode-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.wm-barcode-container:hover {
    border-color: var(--wm-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* 鏉＄爜鍊兼樉绀猴紙鍦ㄦ潯鐮佷笅鏂癸級 */
.wm-barcode-value-display {
    font-size: 16px;
    font-weight: 600;
    color: var(--wm-gray-800);
    font-family: 'Courier New', monospace;
    text-align: center;
    margin-top: 5px;
    letter-spacing: 0.5px;
}

.wm-location-barcode-container .wm-barcode-value-display,
.wm-location-code-value-display {
    font-size: 25px;
    color: #000;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0;
}

/* 鏉＄爜璇︾粏淇℃伅锛堜笌鎵撳嵃鏍囩涓€鑷达級 */
.wm-barcode-with-details {
    max-width: 228px;
    width: 100%;
}

.wm-barcode-details {
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wm-gray-200);
    text-align: left;
}

.wm-barcode-detail-line {
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-gray-800);
    margin-bottom: 8px;
    line-height: 1.5;
}

.wm-barcode-detail-line:last-child {
    margin-bottom: 0;
}

.wm-barcode-detail-label {
    font-weight: 700;
    color: var(--wm-gray-700);
}

.wm-barcode-detail-spacing {
    margin-left: 20px;
    font-weight: 700;
    color: var(--wm-gray-700);
}

.wm-barcode-detail-date {
    font-size: 13px;
    font-weight: 500;
}

/* Detail Room Map */
.wm-detail-room-map {
    background: white;
    padding: 24px;
    border-radius: var(--wm-radius);
    margin-top: 16px;
}

.wm-detail-room-map-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--wm-gray-800);
    margin-bottom: 16px;
}

.wm-detail-room-map-location {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.wm-location-barcode-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wm-location-barcode-item {
    gap: 8px;
}

.wm-location-path-row {
    font-size: 15px;
    color: var(--wm-gray-700);
    padding: 8px 0;
    border-radius: var(--wm-radius-sm);
    line-height: 1.6;
    text-align: center;
}

.wm-location-path {
    display: inline;
    font-size: 14px;
    font-weight: 600;
}

.wm-location-code-row {
    text-align: center;
    font-size: 14px;
    color: var(--wm-gray-600);
    padding: 4px 0;
}

.wm-map-location-item {
    color: var(--wm-gray-700);
    transition: color 0.2s;
}

.wm-map-location-item.wm-map-location-highlight {
    color: var(--wm-primary);
    font-weight: 600;
}

.wm-map-location-separator {
    color: var(--wm-gray-400);
    margin: 0;
}

.wm-location-code {
    color: var(--wm-gray-600);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    margin-left: 8px;
}

.wm-detail-room-map-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wm-detail-room-map-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wm-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wm-detail-room-map-canvas {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wm-detail-room-map-canvas-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.wm-detail-room-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wm-detail-room-map-overlay .wm-map-shelf-btn {
    position: absolute;
    background: rgba(34, 113, 177, 0.92);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--wm-map-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    min-width: 16px;
    min-height: 16px;
    vertical-align: middle;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.wm-detail-room-map-overlay .wm-map-shelf-btn.active {
    background: rgba(239, 68, 68, 0.95);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
    animation: wm-map-bounce 1.1s ease-in-out infinite;
}

@keyframes wm-map-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(var(--wm-map-scale, 1)); }
    40% { transform: translate(-50%, -50%) scale(calc(var(--wm-map-scale, 1) * 1.08)); }
    60% { transform: translate(-50%, -50%) scale(calc(var(--wm-map-scale, 1) * 0.98)); }
}

.wm-room-map-image .wm-room-map-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

.wm-room-map-image .wm-room-map-canvas img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-room-map-image .wm-room-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wm-room-map-image .wm-room-map-overlay .wm-map-shelf-btn {
    position: absolute;
    background: rgba(34, 113, 177, 0.9);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--wm-map-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    min-width: 16px;
    min-height: 16px;
    vertical-align: middle;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.wm-map-style-2 .wm-map-shelf-btn {
    background: transparent;
    color: #2563eb;
    box-shadow: none;
}

.wm-map-style-2 .wm-map-shelf-btn.active {
    color: #ef4444;
    background: transparent;
    box-shadow: none;
    animation: wm-map-bounce 1.1s ease-in-out infinite;
}

.wm-map-style-3 .wm-map-shelf-btn {
    background: #fff;
    color: #111;
    border: 1px solid #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.wm-map-style-3 .wm-map-shelf-btn.active {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
    animation: wm-map-bounce 1.1s ease-in-out infinite;
}

.wm-map-style-4 .wm-map-shelf-btn {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.wm-map-style-4 .wm-map-shelf-btn.active {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
    animation: wm-map-bounce 1.1s ease-in-out infinite;
}

.wm-barcode-container canvas {
    max-width: 100%;
    height: auto;
}

/* 鏉＄爜寮圭獥 */
.wm-barcode-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-barcode-viewer-container {
    background: white;
    border-radius: var(--wm-radius);
    padding: 40px;
    max-width: 90%;
    max-height: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.wm-barcode-viewer-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--wm-gray-800);
    text-align: center;
}

.wm-barcode-viewer-barcode {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: white;
}

.wm-barcode-viewer-barcode canvas {
    max-width: 100%;
    height: auto;
}

.wm-barcode-viewer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--wm-gray-100);
    color: var(--wm-gray-600);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
}

.wm-barcode-viewer-close:hover {
    background: var(--wm-gray-200);
    padding: 8px 0;
}

/* Detail Info List */
.wm-info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wm-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-info-label {
    font-size: 12px;
    color: var(--wm-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wm-info-value {
    font-size: 16px;
    font-weight: 500;
}

.wm-info-item.full {
    grid-column: span 2;
}

.wm-info-actions {
    display: flex;
    gap: 12px;
}

/* QR Code */
.wm-qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--wm-gray-50);
    border-radius: var(--wm-radius-sm);
}

.wm-qrcode {
    padding: 10px;
    background: white;
    border-radius: var(--wm-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wm-qrcode img,
.wm-qrcode canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.wm-qrcode-hint {
    font-size: 13px;
    color: var(--wm-gray-500);
}

/* 浜у搧璇︽儏椤靛浘鐗囩綉鏍?*/
.wm-detail-images-grid {
    width: 100%;
}

.wm-detail-images-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.wm-detail-image-item {
    flex: 0 0 auto;
}

.wm-detail-image-wrapper {
    position: relative;
    background: var(--wm-gray-50);
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wm-detail-image-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.wm-detail-image-img {
    display: block;
    object-fit: contain;
    background: var(--wm-gray-50);
    /* 闄愬埗鐭竟鏈€澶т负400px锛氬悓鏃惰缃甿ax-width鍜宮ax-height锛屽浘鐗囦細鎸夋瘮渚嬬缉鏀?*/
    /* 瀵逛簬妯浘锛堝>楂橈級锛宮ax-height浼氶檺鍒剁煭杈癸紱瀵逛簬绔栧浘锛堥珮>瀹斤級锛宮ax-width浼氶檺鍒剁煭杈?*/
    max-width: 400px;
    max-height: 400px;
    width: auto;
    height: auto;
}

.wm-detail-image-overlay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    width: 100%;
    gap: 8px;
}

.wm-detail-image-overlay .wm-image-label {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.wm-detail-image-overlay .wm-image-label-current {
    background: var(--wm-success);
    color: white;
}

.wm-detail-image-overlay .wm-image-label-history {
    background: var(--wm-gray-600);
    color: white;
}

.wm-detail-image-overlay .wm-image-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wm-detail-image-overlay .wm-image-time {
    color: var(--wm-gray-700);
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
}

.wm-detail-image-overlay .wm-image-user {
    color: var(--wm-gray-700);
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
}

.wm-empty-images {
    text-align: center;
    padding: 40px 20px;
    color: var(--wm-gray-400);
    font-size: 14px;
}

/* 绉诲姩绔€傞厤 */
@media (max-width: 768px) {
    .wm-detail-images-grid-container {
        gap: 12px;
    }
    
    .wm-detail-image-overlay {
        padding: 6px 10px;
    }
    
    .wm-detail-image-overlay .wm-image-label {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    .wm-detail-image-overlay .wm-image-time {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .wm-detail-image-img {
        max-width: calc((100vw - 100px) / 2);
        max-height: calc((100vw - 100px) / 2);
    }
}

/* 鍙樼劍鎸夐挳鏍峰紡 */
.wm-zoom-btn {
    transition: all 0.2s;
}

.wm-zoom-btn:hover {
    background: var(--wm-gray-100) !important;
    border-color: var(--wm-primary) !important;
}

.wm-zoom-btn.active {
    background: var(--wm-primary) !important;
    border-color: var(--wm-primary) !important;
    color: white !important;
}

.wm-zoom-btn:active {
    transform: scale(0.95);
}

/* QR Scanner Modal */
.wm-qr-scanner-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.wm-qr-scanner-container {
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: var(--wm-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-qr-scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wm-gray-200);
}

.wm-qr-scanner-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--wm-gray-800);
}

.wm-qr-scanner-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--wm-gray-500);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

.wm-qr-scanner-close:hover {
    background: var(--wm-gray-100);
    color: var(--wm-gray-800);
}

#wm-qr-reader {
    width: 100%;
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
}

.wm-qr-scanner-hint {
    text-align: center;
    font-size: 14px;
    color: var(--wm-gray-600);
}

/* PC绔殣钘忔壂鐮佹寜閽?*/
@media screen and (min-width: 769px) {
    /* 闅愯棌PC绔悳绱㈡鏃佽竟鐨勬壂鐮佹寜閽?*/
    #wm-qr-scan-btn {
        display: none !important;
    }
    
    /* 闅愯棌浜у搧鍒涘缓琛ㄥ崟涓殑浣嶇疆鎵爜鎸夐挳 */
    #wm-location-scan-btn {
        display: none !important;
    }
}

/* Records List */
.wm-records-container {
    padding: 20px;
    background: #fff;
}

.wm-records-filters {
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow);
}

.wm-records-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.wm-records-search-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 14px;
}

.wm-records-action-select,
.wm-records-date-input {
    padding: 8px 12px;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    font-size: 14px;
}

.wm-records-date-input {
    min-width: 150px;
}

.wm-records-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wm-record-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow);
    transition: box-shadow 0.2s;
}

.wm-record-item:hover {
    box-shadow: var(--wm-shadow-lg);
}

.wm-record-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
    background: var(--wm-gray-100);
}

.wm-record-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-record-image-placeholder {
    opacity: 0.5;
    background: var(--wm-gray-100);
}

.wm-record-content {
    flex: 1;
    min-width: 0;
}

.wm-record-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.wm-record-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-record-time {
    font-size: 13px;
    color: var(--wm-gray-500);
    min-width: 150px;
    white-space: nowrap;
}

.wm-record-product {
    font-size: 14px;
    color: var(--wm-gray-700);
    margin-bottom: 4px;
}

.wm-record-product-link {
    color: var(--wm-primary);
    text-decoration: none;
    font-weight: 500;
}

.wm-record-product-link:hover {
    text-decoration: underline;
}

.wm-record-product-sku {
    color: var(--wm-gray-500);
    font-size: 12px;
    margin-left: 8px;
    font-weight: normal;
}

.wm-record-quantity-update {
    font-weight: 600;
    color: var(--wm-primary);
    font-size: 14px;
}

.wm-record-product-deleted {
    color: var(--wm-gray-400);
    font-style: italic;
}

.wm-record-changes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--wm-gray-50);
    border-radius: var(--wm-radius-sm);
    border-left: 3px solid var(--wm-primary);
}

.wm-record-change-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.wm-record-change-label {
    font-weight: 600;
    color: var(--wm-gray-700);
    min-width: 60px;
}

.wm-record-change-value {
    color: var(--wm-gray-600);
    flex: 1;
}

.wm-record-extra {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--wm-gray-500);
    margin-top: 4px;
}

.wm-record-note,
.wm-record-destination,
.wm-record-source {
    display: block;
}

/* 申请单信息样式 */
.wm-record-request-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    background: rgba(99, 102, 241, 0.05);
    border-left: 3px solid var(--wm-primary);
    border-radius: 4px;
}

.wm-record-request-id {
    font-weight: 600;
    color: var(--wm-primary);
    font-size: 13px;
}

.wm-record-requested-qty,
.wm-record-applicant,
.wm-record-request-note {
    font-size: 12px;
    color: var(--wm-gray-600);
}

.wm-record-action {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.wm-record-action.create {
    background: rgba(16, 185, 129, 0.1);
    color: var(--wm-success);
}

.wm-record-action.update {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-record-action.stock_in {
    background: rgba(16, 185, 129, 0.1);
    color: var(--wm-success);
}

.wm-record-action.stock_out {
    background: rgba(239, 68, 68, 0.1);
    color: var(--wm-danger);
}

.wm-record-detail {
    flex: 1;
}

.wm-record-user {
    font-size: 13px;
    color: var(--wm-gray-600);
}

.wm-record-quantity {
    font-weight: 600;
}

.wm-record-quantity.positive {
    color: var(--wm-success);
}

.wm-record-quantity.negative {
    color: var(--wm-danger);
}

.wm-records-pagination {
    margin-top: 20px;
    padding: 16px;
    background: white;
    border-radius: var(--wm-radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* 鍑哄簱璁板綍琛ㄦ牸妯悜婊氬姩锛堢Щ鍔ㄧ鍙傝€冨叆搴撴爣绛捐〃鏍硷級 */
.wm-stock-requests-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wm-stock-requests-table th {
    background: #f5f5f5;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
    font-size: 13px;
}

.wm-stock-requests-table th:first-child {
    padding-left: 12px;
}

.wm-stock-requests-table tbody tr:hover {
    background: #fafafa;
}

/* 鎺掑簭鍒楁牱寮?*/
.wm-stock-requests-table .wm-sortable-column {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.wm-stock-requests-table th.wm-sortable-column .wm-sort-arrow {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.wm-stock-requests-table .wm-sortable-column:hover {
    color: var(--wm-primary);
}

.wm-sort-arrow {
    display: inline-flex;
    flex-direction: column;
    gap: 0px;
    font-size: 12px;
    color: #ccc;
    line-height: 1;
    transition: color 0.2s;
}

.wm-stock-requests-table .wm-sortable-column:hover .wm-sort-arrow {
    color: #999;
}

.wm-stock-requests-table .wm-sortable-column .wm-sort-arrow i {
    display: block;
    height: 12px;
    line-height: 10px;
}

/* 鎺掑簭鐘舵€侊細鍗囧簭 */
.wm-stock-requests-table .wm-sortable-column.sort-asc .wm-sort-arrow {
    color: var(--wm-primary);
}

.wm-stock-requests-table .wm-sortable-column.sort-asc .wm-sort-arrow i:first-child {
    color: var(--wm-primary);
}

.wm-stock-requests-table .wm-sortable-column.sort-asc .wm-sort-arrow i:last-child {
    color: #ccc;
}

/* 鎺掑簭鐘舵€侊細闄嶅簭 */
.wm-stock-requests-table .wm-sortable-column.sort-desc .wm-sort-arrow {
    color: var(--wm-primary);
}

.wm-stock-requests-table .wm-sortable-column.sort-desc .wm-sort-arrow i:first-child {
    color: #ccc;
}

.wm-stock-requests-table .wm-sortable-column.sort-desc .wm-sort-arrow i:last-child {
    color: var(--wm-primary);
}

@media (max-width: 768px) {
    .wm-stock-requests-table {
        min-width: 1200px;
    }

    .wm-stock-requests-table th,
    .wm-stock-requests-table td {
        white-space: nowrap;
    }
}

.wm-pagination-info {
    font-size: 14px;
    color: var(--wm-gray-600);
}

.wm-pagination-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wm-page-btn {
    padding: 6px 12px;
    border: 2px solid var(--wm-gray-200);
    background: white;
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.wm-page-btn:hover {
    border-color: var(--wm-primary);
    color: var(--wm-primary);
}

.wm-page-btn.active {
    background: var(--wm-primary);
    border-color: var(--wm-primary);
    color: white;
}

.wm-page-ellipsis {
    padding: 0 8px;
    color: var(--wm-gray-400);
}

.wm-skeleton-record {
    pointer-events: none;
}

/* 绉诲姩绔紭鍖?*/
@media (max-width: 768px) {
    .wm-records-container {
        padding: 12px;
    }
    
    .wm-records-filters {
        padding: 12px;
    }
    
    .wm-records-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wm-records-search-input,
    .wm-records-action-select,
    .wm-records-date-input {
        width: 100%;
        min-width: auto;
    }
    
    .wm-record-item {
        flex-direction: column;
    }
    
    .wm-record-image {
        align-self: center;
    }
    
    .wm-record-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .wm-records-pagination {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wm-pagination-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Detail Top Bar (Back Button + Actions) */
.wm-detail-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
}

.wm-detail-top-actions {
    display: flex;
    align-items: center;
}

/* Back Button */
.wm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-radius: var(--wm-radius-sm);
    color: var(--wm-gray-600);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.wm-back-btn:hover {
    background: var(--wm-gray-100);
    color: var(--wm-gray-800);
}

/* Detail Top Left (Back Button + Prev/Next Product Nav) */
.wm-detail-top-left {
    display: flex;
    /* 返回按钮与导航组互相拉伸到同一行高，任何字体/行高环境下都严格等高 */
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

/* Product Prev/Next Nav（样式对齐返回按钮，高度由 .wm-detail-top-left 统一拉伸） */
.wm-detail-nav {
    display: inline-flex;
    align-items: stretch;
    background: white;
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
}

/* 抵消 Flatsome 等主题对 button 的全局注入（margin: 0 1em 1em 0 / 行高 / min-height），
   否则返回按钮的 1em 下边距会被 flex 行高计入，把导航组拉伸得比返回按钮高出一截 */
.wm-detail-top-bar button,
.wm-detail-nav .wm-detail-nav-pos {
    margin: 0 !important;
    min-height: 0 !important;
    line-height: normal !important;
}

.wm-nav-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    /* 清除浏览器默认按钮内边距，否则图标会偏离中心并产生多余留白 */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: var(--wm-gray-600);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.wm-nav-arrow-btn > i {
    display: block;
    line-height: 1;
}

.wm-nav-arrow-btn:hover:not([disabled]) {
    background: var(--wm-gray-100);
    color: var(--wm-gray-800);
}

.wm-nav-arrow-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.wm-detail-nav-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--wm-gray-500);
    white-space: nowrap;
    user-select: none;
}

@media (max-width: 768px) {
    /* 手机端顶栏单行：全部压缩排一行（含返回文字与位置序号） */
    .wm-detail-top-bar {
        gap: 8px;
    }

    .wm-back-btn {
        padding: 8px 9px;
        font-size: 14px;
        gap: 6px;
    }

    /* 手机端返回按钮只留文字 */
    .wm-back-btn i {
        display: none;
    }

    .wm-detail-top-left {
        gap: 6px;
    }

    .wm-nav-arrow-btn {
        width: 34px;
        font-size: 18px;
    }

    .wm-detail-nav-pos {
        min-width: 36px;
        padding: 0 3px;
        font-size: 10px;
    }

    /* 操作按钮去图标、缩小尺寸，保证三个按钮单行放下（仅作用顶栏，不影响其他页面） */
    .wm-detail-top-actions .wm-detail-action-buttons {
        gap: 6px;
    }

    .wm-detail-top-actions .wm-detail-action-buttons .wm-btn-sm {
        padding: 7px 8px !important;
        margin: 0 !important;
        font-size: 12px;
    }

    .wm-detail-top-actions .wm-detail-action-buttons .wm-btn-sm i {
        display: none;
    }
}

/* Toast */
.wm-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    background: var(--wm-gray-800);
    color: white;
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    z-index: 2000;
    animation: toastIn 0.3s ease;
}

.wm-toast.success {
    background: var(--wm-success);
}

.wm-toast.error {
    background: var(--wm-danger);
}

/* 绉诲姩绔彁绀轰綅缃敼涓哄乏涓婅 */
@media (max-width: 768px) {
    .wm-toast {
        top: 24px;
        left: 24px;
        bottom: auto;
        right: auto;
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 绉诲姩绔牱寮?========== */

/* 妗岄潰绔殣钘忕Щ鍔ㄧ鍏冪礌 */
.wm-mobile-menu-btn,
.wm-mobile-sidebar,
.wm-mobile-sidebar-overlay,
.wm-mobile-bottom-nav {
    display: none;
}

/* 绉诲姩绔搷搴斿紡 - 768px浠ヤ笅 */
@media screen and (max-width: 768px) {
    /* 鏄剧ず绉诲姩绔厓绱?*/
    .wm-mobile-menu-btn,
    .wm-mobile-bottom-nav {
        display: flex;
    }
    
    /* 闅愯棌妗岄潰绔厓绱?*/
    .wm-desktop-only,
    .wm-sidebar {
        display: none !important;
    }
    
    /* 涓诲簲鐢ㄥ鍣?*/
    .wm-app {
        flex-direction: column;
    }
    
    /* 涓诲唴瀹瑰尯 */
    .wm-main {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* 椤堕儴鎼滅储鏍?*/
    .wm-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        z-index: 1000;
        background: white;
        border-bottom: 1px solid var(--wm-gray-200);
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .admin-bar .wm-header {
        top: 0 !important;
    }
    
    /* 绉诲姩绔彍鍗曟寜閽?*/
    .wm-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: var(--wm-gray-100);
        border-radius: 8px;
        color: var(--wm-gray-700);
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: auto !important;
        z-index: 1001 !important;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        margin: 0;
    }
    
    .wm-mobile-menu-btn:focus {
        outline: none;
    }
    
    .wm-mobile-menu-btn:active {
        background: var(--wm-gray-200);
    }
    
    .wm-mobile-menu-btn:focus {
        outline: none;
    }
    
    /* 鎼滅储妗嗛€傞厤 */
    .wm-search-wrapper {
        flex: 1;
        min-width: 0;
    }
    
    .wm-search-box {
        height: 44px;
    }
    
    .wm-search-box input {
        font-size: 14px;
        padding: 0 12px;
    }
    
    .wm-search-btn {
        padding: 0 16px;
        font-size: 13px;
    }
    
    /* 鍐呭鍖?*/
    .wm-content {
        padding-top: 80px;
        padding-bottom: 100px;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-bar .wm-content {
        padding-top: 80px;
    }
    
    /* 绉诲姩绔瓫閫夊脊绐?*/
    #wm-mobile-filter-modal {
        z-index: 2000;
    }
    
    .wm-mobile-filter-modal-container {
        width: 90%;
        max-width: 400px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        border-radius: var(--wm-radius);
        box-shadow: var(--wm-shadow-lg);
    }
    
    .wm-mobile-filter-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        flex: 1;
        max-height: calc(85vh - 60px);
    }
    
    /* 淇濈暀鐢ㄦ埛淇℃伅渚ф粦鑿滃崟鏍峰紡 */
    .wm-mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    .wm-mobile-sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* 鐢ㄦ埛淇℃伅渚ф粦鑿滃崟 */
    .wm-mobile-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        background: white;
        z-index: 1999;
        transform: translateX(-100%);
        transition: transform 0.3s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
    
    .wm-mobile-sidebar.active {
        transform: translateX(0);
    }
    
    .admin-bar .wm-mobile-sidebar {
        top: 46px;
    }
    
    /* 渚ф粦鑿滃崟澶撮儴 */
    .wm-mobile-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--wm-gray-200);
        background: var(--wm-gray-50);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .wm-mobile-sidebar-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--wm-gray-800);
    }
    
    .wm-mobile-sidebar-close {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--wm-gray-600);
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        pointer-events: auto;
        z-index: 1001;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    
    .wm-mobile-sidebar-close:active {
        background: var(--wm-gray-200);
    }
    
    /* 渚ф粦鑿滃崟鍐呭 */
    .wm-mobile-sidebar-content {
        padding: 16px;
    }
    
    /* 鐢ㄦ埛淇℃伅鏍峰紡 */
    .wm-mobile-user-info {
        padding: 20px 0;
        border-bottom: 1px solid var(--wm-gray-200);
        margin-bottom: 16px;
    }
    
    .wm-mobile-user-greeting {
        font-size: 18px;
        font-weight: 600;
        color: var(--wm-gray-800);
    }
    
    .wm-mobile-user-name {
        color: var(--wm-primary);
    }
    
    /* 鐢ㄦ埛鍔熻兘鎸夐挳 */
    .wm-mobile-user-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    
    .wm-mobile-user-action-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border: 1px solid var(--wm-gray-200);
        border-radius: var(--wm-radius-sm);
        background: white;
        color: var(--wm-gray-700);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
        width: 100%;
    }
    
    .wm-mobile-user-action-btn i {
        font-size: 18px;
        color: var(--wm-primary);
    }
    
    .wm-mobile-user-action-btn:active {
        background: var(--wm-gray-50);
        border-color: var(--wm-primary);
    }
    
    .wm-mobile-user-action-btn-logout {
        border-color: var(--wm-danger);
        color: var(--wm-danger);
        grid-column: 1 / -1;
    }
    
    .wm-mobile-user-action-btn-logout i {
        color: var(--wm-danger);
    }
    
    .wm-mobile-user-action-btn-logout:active {
        background: rgba(239, 68, 68, 0.1);
        border-color: var(--wm-danger);
    }
    
    .wm-mobile-sort-section {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--wm-gray-200);
    }
    
    .wm-mobile-sort-section h4 {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--wm-gray-700);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* 绉诲姩绔簳閮ㄥ鑸?*/
    .wm-mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--wm-mobile-bottom-nav-height);
        background: white;
        border-top: 1px solid var(--wm-gray-200);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1000;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .wm-mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 100%;
        border: none;
        background: none;
        color: var(--wm-gray-500);
        font-size: 11px;
        cursor: pointer;
        transition: color 0.2s;
        pointer-events: auto !important;
        position: relative;
        z-index: 1001 !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .wm-mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .wm-mobile-nav-btn i {
        pointer-events: none;
        font-size: 22px;
        line-height: 1;
        display: block;
        margin: 0;
    }
    
    .wm-mobile-nav-btn span {
        pointer-events: none;
        font-size: 11px;
        line-height: 1.2;
        display: block;
        margin: 0;
        margin-top: 4px;
    }
    
    /* 纭繚鍒涘缓鎸夐挳鐨勫浘鏍囧拰鏂囧瓧甯冨眬涓庡叾浠栨寜閽竴鑷?*/
    #wm-mobile-nav-create i,
    #wm-mobile-nav-create span {
        display: block;
    }
    
    .wm-mobile-nav-btn:focus {
        outline: none;
    }
    
    .wm-mobile-nav-btn.active {
        color: var(--wm-primary);
    }
    
    .wm-mobile-nav-btn:active {
        background: none;
        background-color: transparent;
    }
    
    /* 鍒嗛〉浼樺寲 - 鍘婚櫎鐧借壊妗嗗拰闃村奖 */
    .wm-pagination {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 16px 8px !important; /* 浠?16px 12px 缂╁皬鍒?16px 8px */
        margin-top: 16px;
        /* 澧炲姞搴曢儴杈硅窛锛岀‘淇濅笉琚簳閮ㄥ鑸爮閬尅锛堝簳閮ㄥ鑸爮楂樺害60px + 棰濆绌洪棿锛?*/
        margin-bottom: calc(var(--wm-mobile-bottom-nav-height) + 20px) !important;
    }
    
    /* 绉诲姩绔垎椤垫寜閽紭鍖?- 缂╁皬灏哄鍜岄棿璺?*/
    .wm-pagination-buttons {
        gap: 3px !important; /* 浠庨粯璁?8px 缂╁皬鍒?3px */
    }
    
    .wm-page-btn {
        width: 25px !important;
        height: 25px !important;
        font-size: 12px !important;
        border-width: 1px !important; /* 浠?2px 缂╁皬鍒?1px */
        min-width: 25px !important;
    }
    
    .wm-page-ellipsis {
        min-width: 12px !important; /* 浠?28px 缂╁皬鍒?12px */
        width: 12px !important;
        height: 25px !important; /* 涓庢寜閽珮搴︿竴鑷?*/
        padding: 0 !important;
        font-size: 9px !important; /* 浠?12px 缂╁皬鍒?9px */
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* 浜у搧缃戞牸閫傞厤 */
    .wm-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px !important;
        /* 澧炲姞搴曢儴鍐呰竟璺濓紝纭繚鍐呭涓嶈搴曢儴瀵艰埅鏍忛伄鎸?*/
        padding-bottom: calc(var(--wm-mobile-bottom-nav-height) + 20px) !important;
    }
    
    /* 涓嬫媺鍒锋柊瀹瑰櫒 - 浠呭湪绉诲姩绔樉绀?*/
    .wm-pull-refresh-indicator {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        display: none !important;
        align-items: center;
        gap: 8px;
        color: var(--wm-gray-500);
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
        z-index: 1;
    }
    
    .wm-pull-refresh-indicator.active {
        opacity: 1;
    }
    
    .wm-pull-refresh-indicator i {
        font-size: 18px;
        animation: wm-spin 1s linear infinite;
    }
    
    /* 绉诲姩绔樉绀轰笅鎷夊埛鏂版寚绀哄櫒 */
    @media (max-width: 768px) {
        .wm-pull-refresh-indicator {
            display: none !important;
        }
    }
    
    /* PC绔殣钘忎笅鎷夊埛鏂版寚绀哄櫒 */
    @media screen and (min-width: 769px) {
        .wm-pull-refresh-indicator {
            display: none !important;
        }
    }
    
    @keyframes wm-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* 璇︽儏椤甸€傞厤 */
    .wm-detail-header {
        flex-direction: column;
    }
    
    .wm-detail-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    
    .wm-info-list {
        grid-template-columns: 1fr;
    }
    
    /* 寮圭獥閫傞厤 */
    .wm-modal-container {
        width: 95%;
        max-height: 95vh;
    }
    
    .wm-qr-scanner-container {
        max-width: 100%;
        width: 100%;
    }
    
    .wm-qrcode-container {
        padding: 15px;
    }
    
    .wm-qrcode {
        padding: 8px;
    }
}

/* ========== 璐ф灦搴撳瓨鍙鍖栨牱寮?========== */
.wm-shelf-inventory-view {
    padding: 20px;
    background: white;
    min-height: calc(100vh - var(--wm-header-height));
}

.wm-shelf-content {
    margin-bottom: 20px;
    padding-bottom: var(--wm-pagination-height);
}

.wm-shelf-layer {
    display: flex;
    margin-bottom: 24px;
    align-items: flex-end; /* 灞傛澘瀵归綈鍒板簳閮?*/
}

.wm-shelf-layer-label {
    min-width: 60px;
    padding: 6px 10px;
    background: var(--wm-gray-100);
    border: 2px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    color: var(--wm-gray-700);
    text-align: left;
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-shelf-layer-label:hover {
    background: var(--wm-gray-200);
    border-color: var(--wm-primary);
}

.wm-shelf-layer-label:active {
    transform: scale(0.98);
}

.wm-shelf-layer-path {
    font-size: 10px;
    color: var(--wm-gray-500);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.wm-shelf-layer-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
}

.wm-shelf-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
    align-items: flex-end; /* 鐩掑瓙涔熷榻愬埌搴曢儴 */
}

.wm-shelf-box {
    position: relative;
    min-width: 140px;
    min-height: 100px;
    padding: 8px;
    background: white;
    border: 2px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    display: flex;
    flex-direction: row; /* 宸﹀彸甯冨眬 */
    transition: all 0.2s;
    cursor: pointer;
}

.wm-shelf-box:hover {
    border-color: var(--wm-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.wm-shelf-box:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}

/* 搴撳瓨杩涘害鏉″～鍏呮晥鏋?- 浠庡乏寰€鍙?*/
.wm-shelf-box.has-expected {
    position: relative;
    overflow: hidden;
}

.wm-shelf-box.has-expected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--stock-fill-color, #22c55e);
    opacity: 0.35;
    clip-path: inset(0 calc(100% - var(--stock-fill-percent, 0%)) 0 0);
    transition: clip-path 0.3s ease, background 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.wm-shelf-box.has-expected .wm-shelf-box-main,
.wm-shelf-box.has-expected .wm-shelf-skus {
    position: relative;
    z-index: 1;
}

.wm-shelf-box.has-drawers {
    padding: 6px;
    flex-direction: column; /* 鏈夋娊灞夋椂鍨傜洿甯冨眬 */
}

/* 鐩掑瓙涓讳綋鍖哄煙锛堝乏渚э級 */
.wm-shelf-box-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* 鐩掑瓙鍚嶇О锛堝乏涓婅锛?*/
.wm-shelf-box-name {
    font-weight: 600;
    font-size: 12px;
    color: var(--wm-gray-700);
    text-align: left;
    margin-bottom: auto;
}

/* 鐩掑瓙缁熻淇℃伅锛堝乏涓嬭锛?*/
.wm-shelf-box-stats {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: auto;
}

/* 鍏辫鏍囩锛堥粯璁ら殣钘忥紝hover鏄剧ず锛?*/
.wm-shelf-total-label {
    font-size: 10px;
    color: var(--wm-gray-500);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wm-shelf-box:hover .wm-shelf-total-label {
    opacity: 1;
}

/* SKU鍒楄〃鍖哄煙锛堝彸渚э級 */
.wm-shelf-skus {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 8px;
    max-width: 70px;
    max-height: 42px; /* 绾?琛岄珮搴?*/
    overflow: hidden;
    position: relative;
}

/* SKU婊氬姩瀹瑰櫒 */
.wm-shelf-skus-scroll {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 闇€瑕佹粴鍔ㄦ椂鐨勫姩鐢?*/
.wm-shelf-skus.scrolling .wm-shelf-skus-scroll {
    animation: skuScrollUp var(--scroll-duration, 6s) linear infinite;
}

/* 榧犳爣鎮仠鏆傚仠婊氬姩 */
.wm-shelf-skus.scrolling:hover .wm-shelf-skus-scroll {
    animation-play-state: paused;
}

@keyframes skuScrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.wm-shelf-sku {
    font-size: 10px;
    color: var(--wm-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* 鎶藉眽瀹瑰櫒 */
.wm-shelf-drawers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    flex: 1;
}

/* 鎶藉眽鏍峰紡 */
.wm-shelf-drawer {
    flex: 1;
    min-height: 28px;
    padding: 4px 6px;
    background: var(--wm-gray-50);
    border: 1px solid var(--wm-gray-200);
    border-radius: 3px;
    display: flex;
    flex-direction: row; /* 宸﹀彸甯冨眬 */
    cursor: pointer;
    transition: all 0.15s;
}

.wm-shelf-drawer:hover {
    background: var(--wm-gray-100);
    border-color: var(--wm-primary);
}

.wm-shelf-drawer:active {
    background: var(--wm-gray-150, #e5e7eb);
}

/* 鎶藉眽搴撳瓨杩涘害鏉″～鍏呮晥鏋?- 浠庡乏寰€鍙?*/
.wm-shelf-drawer.has-expected {
    position: relative;
    overflow: hidden;
    background: transparent;
}

.wm-shelf-drawer.has-expected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--stock-fill-color, #22c55e);
    opacity: 0.4;
    clip-path: inset(0 calc(100% - var(--stock-fill-percent, 0%)) 0 0);
    transition: clip-path 0.3s ease, background 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.wm-shelf-drawer.has-expected .wm-shelf-drawer-main,
.wm-shelf-drawer.has-expected .wm-shelf-skus {
    position: relative;
    z-index: 1;
}

.wm-shelf-drawer.has-expected:hover::before {
    opacity: 0.5;
}

/* 鎶藉眽涓讳綋鍖哄煙锛堝乏渚э級 */
.wm-shelf-drawer-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
}

/* 鎶藉眽鍚嶇О锛堝乏涓婅锛?*/
.wm-shelf-drawer-name {
    font-size: 10px;
    color: var(--wm-gray-600);
    font-weight: 500;
    text-align: left;
}

/* 鎶藉眽缁熻淇℃伅锛堝乏涓嬭锛?*/
.wm-shelf-drawer-stats {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* 鎶藉眽鍐呯殑SKU鍒楄〃 */
.wm-shelf-drawer .wm-shelf-skus {
    margin-left: 4px;
    max-width: 50px;
    max-height: 30px; /* 绾?琛岄珮搴︼紙鎶藉眽瀛椾綋鏇村皬锛?*/
}

.wm-shelf-drawer .wm-shelf-sku {
    font-size: 9px;
}

/* 閫氱敤鏁伴噺鍜屼欢鏁版牱寮?*/
.wm-shelf-quantity {
    font-weight: 700;
    font-size: 14px;
    color: var(--wm-primary);
}

.wm-shelf-count {
    color: var(--wm-gray-500);
    font-size: 10px;
}

.wm-shelf-drawer .wm-shelf-quantity {
    font-size: 11px;
}

.wm-shelf-drawer .wm-shelf-count {
    font-size: 9px;
}

/* 渚ц竟鏍忚揣鏋舵爲鏍峰紡锛堜娇鐢?wm-tree 缁撴瀯锛?*/
.wm-shelf-tree .wm-shelf-tree-room {
    cursor: pointer;
}

.wm-shelf-tree .wm-shelf-tree-room .wm-tree-icon {
    color: var(--wm-info);
}

.wm-shelf-tree .wm-shelf-tree-shelf {
    cursor: pointer;
}

.wm-shelf-tree .wm-shelf-tree-shelf .wm-tree-icon {
    color: var(--wm-warning);
}

.wm-shelf-tree .wm-shelf-tree-shelf.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-shelf-tree .wm-shelf-tree-shelf.active .wm-tree-icon {
    color: var(--wm-primary);
}

/* 鎴块棿閫変腑鐘舵€?*/
.wm-shelf-tree .wm-shelf-tree-room.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-shelf-tree .wm-shelf-tree-room.active .wm-tree-icon {
    color: var(--wm-primary);
}

/* ========== 鎴块棿鍦板浘瑙嗗浘鏍峰紡锛堝簱瀛橀粯璁ょ晫闈級 ========== */
.wm-room-map-view {
    padding: 20px;
    background: white;
    min-height: calc(100vh - var(--wm-header-height) - var(--wm-pagination-height));
}

.wm-room-map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: 20px;
}

.wm-room-map-card {
    background: white;
    border: 1px solid var(--wm-gray-200);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wm-room-map-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--wm-primary);
}

.wm-room-map-card:active {
    transform: translateY(-2px);
}

.wm-room-map-image {
    width: 100%;
    aspect-ratio: auto;
    background: var(--wm-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wm-room-map-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wm-room-map-card:hover .wm-room-map-image img {
    transform: scale(1.05);
}

.wm-room-map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--wm-gray-400);
    font-size: 48px;
}

.wm-room-map-name {
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--wm-gray-800);
    background: white;
    border-top: 1px solid var(--wm-gray-100);
}

.wm-room-map-card:hover .wm-room-map-name {
    color: var(--wm-primary);
}

@media (max-width: 768px) {
    .wm-room-map-view {
        padding: 12px;
    }
    
    .wm-room-map-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .wm-room-map-card {
        border-radius: 8px;
    }
    
    .wm-room-map-image {
        aspect-ratio: auto;
    }
    
    .wm-room-map-placeholder {
        font-size: 32px;
    }
    
    .wm-room-map-name {
        padding: 10px 8px;
        font-size: 14px;
    }
}

/* ========== 鎴块棿搴撳瓨姒傝鏍峰紡 ========== */
.wm-room-inventory-view {
    padding: 20px;
    background: white;
    min-height: calc(100vh - var(--wm-header-height));
}

.wm-room-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding-bottom: var(--wm-pagination-height);
    align-items: end;
}

/* 璐ф灦鍖呰鍣?*/
.wm-room-shelf-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* 璐ф灦鏂规 */
.wm-room-shelf {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: var(--wm-gray-200);
    border: 2px solid var(--wm-gray-400);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0;
    width: 100%;
}

.wm-room-shelf:hover {
    border-color: var(--wm-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 璐ф灦鍚嶇О - 鍦ㄨ揣鏋跺唴閮ㄥ簳閮紝鍙偣鍑?*/
.wm-room-shelf-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wm-gray-800);
    text-align: center;
    padding: 6px 8px;
    margin-top: 6px;
    background: transparent;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-room-shelf-name:hover {
    background: var(--wm-primary);
    color: white;
}

/* 灞傛澘鏂规 - 甯冨眬鐢?JavaScript 鍔ㄦ€佽缃?*/
.wm-room-layer {
    display: grid;
    gap: 2px;
    padding: 3px 6px;
    background: var(--wm-gray-100);
    border: 1px solid var(--wm-gray-300);
    border-radius: 3px;
    cursor: pointer;
    min-height: 16px;
    min-width: 0;
}

.wm-room-layer:hover {
    border-color: var(--wm-primary);
}

/* 鐩掑瓙鏂规 - 鏃犳娊灞夋椂鍛堥暱鏉＄姸锛屾湁鎶藉眽鏃朵负瀹瑰櫒 */
.wm-room-box {
    min-height: 14px;
    height: 14px;
    width: 100%;
    min-width: 14px;
    background: white;
    border: 1px solid var(--wm-gray-300);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.1s ease;
}

.wm-room-box:hover {
    border-color: var(--wm-primary);
    transform: scale(1.02);
    z-index: 10;
}

.wm-room-box.has-drawers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 8px;
    height: auto;
    min-height: 14px;
    width: 100%;
    min-width: 14px;
}

.wm-room-box.has-expected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--stock-fill-color, #22c55e);
    opacity: 0.5;
    clip-path: inset(0 calc(100% - var(--stock-fill-percent, 0%)) 0 0);
    z-index: 0;
    pointer-events: none;
}

/* 鎶藉眽鏂规 - 瀹藉害鍏呮弧鐩掑瓙锛岄珮搴﹂€備腑 */
.wm-room-drawer {
    width: 100%;
    min-height: 10px;
    height: 10px;
    flex-shrink: 0;
    background: white;
    border: 1px solid var(--wm-gray-300);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.wm-room-drawer:hover {
    border-color: var(--wm-primary);
}

.wm-room-drawer.has-expected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--stock-fill-color, #22c55e);
    opacity: 0.6;
    clip-path: inset(0 calc(100% - var(--stock-fill-percent, 0%)) 0 0);
    z-index: 0;
    pointer-events: none;
}

/* 绉诲姩绔埧闂村簱瀛樻牱寮?*/
@media screen and (max-width: 768px) {
    .wm-room-inventory-view {
        padding: 12px;
    }
    
    .wm-room-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .wm-room-shelf {
        padding: 4px;
        gap: 2px;
    }
    
    .wm-room-shelf-name {
        font-size: 11px;
        padding: 4px 6px;
    }
}

/* 绉诲姩绔揣鏋跺彲瑙嗗寲鏍峰紡 */
@media screen and (max-width: 768px) {
    .wm-shelf-inventory-view {
        padding: 12px;
    }
    
    .wm-shelf-layer {
        flex-direction: column;
        margin-bottom: 16px;
        align-items: stretch;
    }
    
    .wm-shelf-layer-label {
        min-width: auto;
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
        padding: 6px 10px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    
    .wm-shelf-boxes {
        width: 100%;
        align-items: stretch;
    }
    
    .wm-shelf-box {
        flex: 1;
        min-width: calc(50% - 5px);
        max-width: calc(50% - 5px);
        min-height: 80px;
    }
    
    .wm-shelf-skus {
        max-width: 55px;
        margin-left: 6px;
        padding-left: 6px;
    }
    
    .wm-shelf-drawer .wm-shelf-skus {
        max-width: 40px;
    }
    
    .wm-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .wm-mobile-inventory-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--wm-primary);
        color: white;
        border: none;
        border-radius: var(--wm-radius-sm);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .wm-mobile-inventory-btn:hover {
        background: var(--wm-primary-hover);
    }
    
    .wm-mobile-inventory-btn i {
        font-size: 16px;
    }
}

/* 鍝嶅簲寮忓竷灞€锛氫綅缃拰鏁伴噺 */
/* 褰撳浣嶇疆瀹瑰櫒鏄剧ず鏃讹紝寮哄埗闅愯棌鍗曚綅缃殑浣嶇疆鍜屾暟閲忚 */
.wm-responsive-location-row.wm-hide-for-multi,
.wm-mobile-quantity-row.wm-hide-for-multi {
    display: none !important;
}

/* PC绔紙澶у睆骞曪級锛氫綅缃拰鏁伴噺鍚岃锛岄殣钘忔壂鐮佹寜閽?*/
@media screen and (min-width: 768px) {
    .wm-responsive-location-row {
        display: flex !important;
        gap: 0 !important;
    }
    
    .wm-responsive-location-row .wm-form-group-location {
        flex: 1;
        margin-right: 0;
    }
    
    .wm-responsive-location-row .wm-form-group-quantity {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        margin-left: 16px;
    }
    
    .wm-responsive-location-row .wm-edit-location-scan-btn {
        display: none !important;
    }
    
    .wm-mobile-quantity-row {
        display: none !important;
    }
}

/* 鎵嬫満绔紙灏忓睆骞曪級锛氫綅缃崟鐙崰涓€琛岋紝鏁伴噺鍗曠嫭鍗犱竴琛岋紝鏄剧ず鎵爜鎸夐挳 */
@media screen and (max-width: 767px) {
    .wm-responsive-location-row {
        display: block !important;
    }
    
    .wm-responsive-location-row .wm-form-group-location {
        display: block;
        margin-bottom: 0;
    }
    
    .wm-responsive-location-row .wm-form-group-quantity {
        display: none !important;
    }
    
    .wm-responsive-location-row .wm-edit-location-scan-btn {
        display: inline-flex !important;
    }
    
    .wm-mobile-quantity-row {
        display: block !important;
    }
}
/* 鎵撳嵃绠＄悊鍣ㄦ牱寮?*/
.wm-print-manager-wrapper {
    padding: 20px;
    padding-bottom: calc(20px + var(--wm-pagination-height) + 40px);
    background: #fff;
    border-radius: 4px;
}

.wm-print-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wm-print-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.wm-print-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.wm-print-tab {
    padding: 10px 15px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;
}

.wm-print-tab:hover {
    color: #4CAF50;
}

.wm-print-tab.active {
    color: #4CAF50;
    border-bottom-color: #4CAF50;
}

.wm-print-content {
    min-height: 400px;
}

.wm-print-panel {
    display: none;
}

.wm-print-panel.active {
    display: block;
}


.wm-sku-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.wm-sku-table-wrapper {
    border: 1px solid var(--wm-gray-200);
    border-radius: 0;
    height: calc(100vh - 320px);
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 245px;
    min-width: 245px;
    width: 245px;
    padding-right: 12px;
    box-sizing: content-box;
    scrollbar-gutter: stable;
}

.wm-sku-input-table {
    width: calc(245px - 12px);
    border-collapse: collapse;
    table-layout: fixed;
}

.wm-sku-input-table thead th {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 1;
    border-bottom: 1px solid var(--wm-gray-200);
    padding: 8px;
    font-size: 13px;
    box-sizing: border-box;
}

.wm-sku-input-table td {
    border: 1px solid var(--wm-gray-200);
    padding: 6px 8px;
    background: #fff;
    font-size: 13px;
    vertical-align: middle;
    box-sizing: border-box;
}

.wm-sku-row-index {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
    color: var(--wm-gray-500);
    text-align: center;
}

.wm-sku-input-table th:nth-child(1),
.wm-sku-input-table td:nth-child(1) {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}

.wm-sku-input-table th:nth-child(2),
.wm-sku-input-table td:nth-child(2) {
    max-width: 120px;
    width: 120px;
    text-align: left;
}

.wm-sku-input-table th:nth-child(3),
.wm-sku-input-table td:nth-child(3) {
    max-width: 60px;
    width: 60px;
    text-align: left;
}

.wm-sku-cell {
    outline: none;
    cursor: default;
    position: relative;
    padding-right: 16px;
    overflow: hidden;
    caret-color: auto;
    color: var(--wm-gray-800);
    line-height: 20px;
    min-height: 20px;
    direction: ltr;
    unicode-bidi: plaintext;
}

.wm-sku-cell:focus {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.35);
    background: #f8fafc;
    caret-color: auto;
}

.wm-sku-cell.wm-sku-editing {
    caret-color: auto;
}

.wm-sku-cell.wm-sku-cell-range {
    background: #e9f2ff;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.wm-sku-input-table.wm-sku-dragging .wm-sku-cell {
    cursor: crosshair;
}

.wm-sku-drag-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 0;
    cursor: crosshair;
    display: none;
}

.wm-sku-cell-active .wm-sku-drag-handle {
    display: block;
}

.wm-sku-input-table tbody tr:nth-child(odd) td {
    background: #ffffff;
}

.wm-sku-input-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.wm-sku-input-table tbody td.wm-sku-cell-range {
    background: #e9f2ff;
}

@media (max-width: 768px) {
    .wm-sku-table-wrapper {
        max-width: 70%;
        min-width: 0;
        width: 70%;
        height: calc(100vh - 280px);
    }

    .wm-sku-input-table {
        width: 100%;
    }

    .wm-sku-toolbar .wm-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
}

.wm-print-panel.wm-sku-input {
    display: none;
    flex-direction: column;
    height: calc(100vh - 260px);
}

.wm-print-panel.wm-sku-input.active {
    display: flex;
}

.wm-sku-draft-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--wm-gray-200);
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}

.wm-sku-drafts-header,
.wm-sku-printed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wm-sku-draft-actions {
    display: flex;
    gap: 8px;
}

/* 鎴戠殑浜у搧鏍囩椤?*/
.wm-print-my-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.wm-print-select-all-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
}

.wm-print-select-all-label input[type="checkbox"] {
    cursor: pointer;
}

.wm-print-pagination {
    display: flex;
    gap: 5px;
    align-items: center;
}

.wm-print-pagination button {
    padding: 5px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.wm-print-pagination button:hover {
    background: #e0e0e0;
}

.wm-print-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wm-print-page-info {
    font-size: 12px;
    color: #666;
}

/* 琛ㄦ牸鍖呰瀹瑰櫒 */
.wm-print-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    background: #fff;
}

/* 琛ㄦ牸鏍峰紡 */
.wm-print-products-table,
.wm-print-queue-table,
.wm-print-records-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background: #fff;
    border: none;
}

.wm-print-products-table th,
.wm-print-queue-table th,
.wm-print-records-table th {
    background: #f5f5f5;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
    font-size: 13px;
}

.wm-print-products-table th:first-child,
.wm-print-queue-table th:first-child,
.wm-print-records-table th:first-child {
    padding-left: 12px;
}

.wm-print-products-table td,
.wm-print-queue-table td,
.wm-print-records-table td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
}

.wm-print-products-table td:first-child,
.wm-print-queue-table td:first-child,
.wm-print-records-table td:first-child {
    padding-left: 12px;
}

.wm-print-products-table tbody tr:hover,
.wm-print-queue-table tbody tr:hover,
.wm-print-records-table tbody tr:hover {
    background: #fafafa;
}

/* 鎸夐挳鏍峰紡 - 浠呭湪鎵撳嵃绠＄悊鍣ㄥ唴鐢熸晥 */
.wm-print-manager-wrapper .wm-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.wm-print-manager-wrapper .wm-btn-primary {
    background: #4CAF50;
    color: white;
}

.wm-print-manager-wrapper .wm-btn-primary:hover {
    background: #45a049;
}

.wm-print-manager-wrapper .wm-btn-small {
    padding: 5px 10px;
    font-size: 12px;
}

.wm-print-manager-wrapper .wm-btn-disabled {
    background: #cccccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.wm-print-manager-wrapper .wm-btn-disabled:hover {
    background: #cccccc !important;
}

.wm-print-manager-wrapper .wm-btn-disabled:disabled {
    background: #cccccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.wm-print-manager-wrapper .wm-btn-danger {
    background: #f44336;
    color: white;
}

.wm-print-manager-wrapper .wm-btn-danger:hover {
    background: #da190b;
}

/* 娣诲姞鎿嶄綔鍖哄煙 */
.wm-print-add-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

/* 闃熷垪鎿嶄綔鍖哄煙 */
.wm-print-queue-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* 鎵撳嵃鍘嗗彶鎿嶄綔鍖哄煙 */
.wm-print-history-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* 鐘舵€佹爣绛?*/
.wm-status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.wm-status-badge {
    background: #e8f5e9;
    color: #2e7d32;
}

/* 澶嶉€夋鏍峰紡 */
.wm-print-product-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* 鍝嶅簲寮忚璁?*/
@media (max-width: 768px) {
    .wm-print-manager-wrapper {
        padding: 10px;
        padding-bottom: calc(10px + var(--wm-pagination-height) + 80px);
    }
    
    .wm-print-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .wm-print-tab {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* 浼樺寲琛ㄦ牸澶撮儴 */
    .wm-print-my-products-header,
    .wm-print-queue-header,
    .wm-print-history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        flex-wrap: wrap;
    }
    
    .wm-print-my-products-header > div:first-child,
    .wm-print-queue-header > div:first-child,
    .wm-print-history-header > div:first-child {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
        flex: 1;
    }
    
    .wm-print-my-products-header .wm-print-pagination,
    .wm-print-queue-header .wm-print-pagination,
    .wm-print-history-header .wm-print-pagination {
        display: flex;
        gap: 3px;
        align-items: center;
    }
    
    /* 鎸夐挳浼樺寲 */
    .wm-print-manager-wrapper .wm-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .wm-print-manager-wrapper .wm-btn-small {
        padding: 5px 8px;
        font-size: 11px;
    }
    
    /* 鍏ㄩ€夋爣绛句紭鍖?*/
    .wm-print-select-all-label {
        font-size: 12px;
    }
    
    /* 琛ㄦ牸浼樺寲 */
    .wm-print-table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }
    
    .wm-print-products-table,
    .wm-print-queue-table,
    .wm-print-records-table {
        font-size: 11px;
        min-width: 500px;
        border: none;
        margin-bottom: 0;
    }
    
    .wm-print-products-table thead,
    .wm-print-queue-table thead,
    .wm-print-records-table thead {
        display: table-header-group;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f5f5f5;
    }
    
    .wm-print-products-table tbody,
    .wm-print-queue-table tbody,
    .wm-print-records-table tbody {
        display: table-row-group;
    }
    
    .wm-print-products-table th,
    .wm-print-queue-table th,
    .wm-print-records-table th {
        padding: 6px;
        font-size: 11px;
        white-space: nowrap;
    }
    
    .wm-print-products-table td,
    .wm-print-queue-table td,
    .wm-print-records-table td {
        padding: 6px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 琛ㄦ牸琛屼紭鍖?*/
    .wm-print-products-table tr,
    .wm-print-queue-table tr,
    .wm-print-records-table tr {
        display: table-row;
    }
    
    /* 鍒嗛〉浼樺寲 */
    .wm-print-pagination {
        gap: 3px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .wm-print-pagination button {
        padding: 5px 8px;
        font-size: 10px;
        min-width: auto;
    }
    
    .wm-print-page-info {
        font-size: 10px;
    }
    
    /* 鐘舵€佹爣绛句紭鍖?*/
    .wm-status-badge {
        padding: 3px 6px;
        font-size: 10px;
    }
}
/* 澶氫綅缃鐞嗘牱寮?*/
#wm-multi-locations-container {
    background: #fafafa;
    border-radius: var(--wm-radius);
    padding: 16px;
}

.wm-edit-locations-list {
    margin: 16px 0;
}

.wm-edit-locations-list .wm-form-row {
    gap: 12px;
    margin-bottom: 12px;
}

.wm-edit-locations-list .wm-form-group {
    margin-bottom: 0;
}

.wm-edit-locations-list .wm-location-quantity-input {
    width: 100%;
}

.wm-edit-remove-location-row {
    min-width: 40px;
    padding: 6px !important;
}

/* 鏂扮殑澶氫綅缃甯冨眬 - PC绔拰鎵嬫満绔搷搴斿紡 */
.wm-multi-location-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-end;
}

/* PC绔細涓€琛屾樉绀轰綅缃?鏁伴噺+鍒犻櫎鎸夐挳 */
@media (min-width: 768px) {
    .wm-multi-location-row {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .wm-multi-location-location {
        flex: 2;
        min-width: 0;
    }
    
    .wm-multi-location-quantity {
        flex: 1;
        min-width: 120px;
    }
    
    .wm-multi-location-delete,
    .wm-multi-location-delete-placeholder {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    
    .wm-multi-location-delete-placeholder {
        width: 80px; /* 涓庡垹闄ゆ寜閽搴︾浉鍚岋紝淇濇寔瀵归綈 */
    }
}

/* 鎵嬫満绔細浣嶇疆鐙崰涓€琛岋紝鏁伴噺鍜屽垹闄ゆ寜閽湪鍚屼竴琛?*/
@media (max-width: 767px) {
    .wm-multi-location-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
    }
    
    /* 浣嶇疆瀛楁鐙崰涓€琛?*/
    .wm-multi-location-location {
        flex: 0 0 100%;
        width: 100%;
    }
    
    /* 澶氫綅缃殑鎵爜鎸夐挳鍙宠竟璺濅负0 */
    .wm-multi-location-location .wm-edit-location-scan-btn {
        margin-right: 0;
    }
    
    /* 鏁伴噺鍜屽垹闄ゆ寜閽湪鍚屼竴琛?*/
    .wm-multi-location-quantity {
        flex: 1;
        min-width: 0;
    }
    
    .wm-multi-location-delete {
        flex: 0 0 auto;
        margin-right: 0;
    }
    
    .wm-multi-location-delete button {
        white-space: nowrap;
        margin-right: 0;
    }
    
    .wm-multi-location-delete-placeholder {
        display: none; /* 鎵嬫満绔笉鏄剧ず鍗犱綅绗?*/
    }
}

.wm-edit-location-multi-selector .wm-location-selected {
    background: white;
    padding: 8px 12px;
    border: 1px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.wm-edit-location-multi-selector .wm-location-selected:hover {
    border-color: var(--wm-primary);
}

#wm-add-location-btn {
    border-color: var(--wm-orange);
    color: var(--wm-orange);
}

#wm-add-location-btn:hover {
    background: rgba(255, 107, 53, 0.1);
}

/* 澶氫綅缃€夋嫨鍣╠ropdown鏍峰紡 */
.wm-edit-location-multi-selector .wm-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

/* 澶氫綅缃€夋嫨鍣ㄦ爲褰㈢粨鏋勬牱寮?- 涓嶈鐩?wm-location-item-content */
.wm-edit-location-multi-selector .wm-location-item {
    position: relative;
}

.wm-edit-location-multi-selector .wm-location-item-content {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    transition: background 0.2s;
    cursor: pointer;
}

.wm-edit-location-multi-selector .wm-location-item-content:hover {
    background: var(--wm-gray-50);
}

.wm-edit-location-multi-selector .wm-location-item-content.selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--wm-primary);
}

.wm-edit-location-multi-selector .wm-location-item-content i {
    cursor: pointer;
    padding: 4px;
    margin-right: 8px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.wm-edit-location-multi-selector .wm-location-item-content i.expanded {
    transform: rotate(90deg);
}

.wm-edit-location-multi-selector .wm-location-spacer {
    display: inline-block;
    width: 20px;
    margin-right: 4px;
    flex-shrink: 0;
}

/* 澶氫綅缃€夋嫨鍣ㄥ祵濂椾綅缃垪琛ㄦ牱寮?*/
.wm-edit-location-multi-selector .wm-location-item > .wm-location-list {
    padding-left: 20px;
    border-left: 2px solid var(--wm-gray-100);
    margin-left: 16px;
}

/* 搴撳瓨妯℃€佹浣嶇疆閫夋嫨鍣ㄦ牱寮?*/
.wm-stock-location-selector {
    position: relative;
}

.wm-stock-location-selector .wm-location-selected {
    background: white;
    padding: 8px 12px;
    border: 1px solid var(--wm-gray-300);
    border-radius: var(--wm-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.wm-stock-location-selector .wm-location-selected:hover {
    border-color: var(--wm-primary);
}

.wm-stock-location-selector .wm-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--wm-gray-200);
    border-radius: var(--wm-radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px;
}

.wm-stock-location-selector .wm-location-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--wm-gray-50);
    font-size: 14px;
}

.wm-stock-location-selector .wm-location-item:last-child {
    border-bottom: none;
}

.wm-stock-location-selector .wm-location-item:hover {
    background: var(--wm-gray-50);
}

/* 浜у搧璇︽儏澶氫綅缃樉绀烘牱寮?*/
.wm-detail-multi-locations {
    border-top: 1px solid var(--wm-gray-100);
    padding-top: 12px;
    margin-top: 8px;
}

.wm-locations-list {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wm-location-detail {
    display: contents; /* 浣垮瓙鍏冪礌鍙備笌grid */
}

.wm-location-detail-name {
    color: var(--wm-text);
    padding: 8px 0;
    border-bottom: 1px solid var(--wm-gray-100);
    font-size: 14px;
}

.wm-location-detail-name:last-of-type {
    border-bottom: none;
}

.wm-location-detail-qty {
    color: var(--wm-primary);
    font-weight: 500;
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--wm-gray-100);
    font-size: 14px;
}

.wm-location-detail-qty:last-of-type {
    border-bottom: none;
}

/* 鎵嬫満绔細鎭㈠鍘熸潵鐨勭旱鍚戝竷灞€ */
@media (max-width: 767px) {
    .wm-locations-list {
        display: block;
    }
    
    .wm-location-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--wm-gray-100);
        font-size: 14px;
    }
    
    .wm-location-detail:last-child {
        border-bottom: none;
    }
    
    .wm-location-detail-name {
        color: var(--wm-text);
        flex: 1;
        border-bottom: none;
        padding: 0;
    }
    
    .wm-location-detail-qty {
        color: var(--wm-primary);
        font-weight: 500;
        min-width: 50px;
        text-align: right;
        border-bottom: none;
        padding: 0;
    }
}

/* 澶氫綅缃崱鐗囨爣璇?*/
.wm-multi-location-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff4757;
    color: white;
    padding: 4px 8px;
    border-radius: var(--wm-radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
}

/* Hide page jump input on mobile */
@media (max-width: 768px) {
    .wm-my-stock-page-jump {
        display: none;
    }
}