/**
 * WMS工作台 - 自定义下拉选择框组件样式
 */

/* ========================================
   基础样式
   ======================================== */

.wms-custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.wms-custom-select-trigger {
    display: flex;
    align-items: center;
    height: 2.8571rem;
    padding: 0 2.8571rem 0 0.8571rem;
    font-size: 0.9286rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.wms-custom-select-trigger:hover {
    border-color: #1890ff;
}

.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #1890ff;
    box-shadow: 0 0 0 0.1429rem rgba(24, 144, 255, 0.2);
}

.wms-custom-select.disabled .wms-custom-select-trigger,
.wms-custom-select-trigger.disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    color: #999;
    border-color: #d9d9d9;
    box-shadow: none;
}

.wms-custom-select-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-custom-select-arrow {
    position: absolute;
    right: 0.8571rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: transform 0.2s;
    pointer-events: none;
}

.wms-custom-select.open .wms-custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ========================================
   下拉列表样式
   ======================================== */

.wms-custom-select-dropdown {
    position: fixed;
    margin-top: 0.2857rem;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    box-shadow: 0 0.2857rem 0.8571rem rgba(0, 0, 0, 0.15);
    z-index: 99999;
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 拖拽中的样式 */
.wms-custom-select-dropdown:active {
    cursor: grabbing;
}

/* 拖拽时禁止选中文本 */
.wms-custom-select-dropdown.dragging {
    cursor: grabbing;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* 选项在拖拽时不响应hover效果 */
.wms-custom-select-dropdown.dragging .wms-custom-select-option:hover {
    background: transparent;
}

.wms-custom-select.open .wms-custom-select-dropdown {
    display: block;
}

.wms-custom-select-option {
    padding: 0.8571rem 1rem;
    font-size: 0.9286rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5714rem;
    min-height: 3.4286rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-custom-select-option:last-child {
    border-bottom: none;
}

.wms-custom-select-option:hover {
    background: #e6f7ff;
}

.wms-custom-select-option.selected {
    background: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
}

.wms-custom-select-option.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: #f5f5f5;
    color: #999;
}

.wms-custom-select-empty {
    padding: 1.4286rem;
    text-align: center;
    color: #999;
    font-size: 0.9286rem;
}

/* ========================================
   滚动条样式
   ======================================== */

.wms-custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.wms-custom-select-dropdown::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 0.2143rem;
}

.wms-custom-select-dropdown::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

/* ========================================
   主题样式
   ======================================== */

/* 默认主题 (蓝色) */
.wms-custom-select-theme-default .wms-custom-select-trigger:hover,
.wms-custom-select-theme-default.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #1890ff;
    box-shadow: 0 0 0 0.1429rem rgba(24, 144, 255, 0.2);
}

.wms-custom-select-theme-default .wms-custom-select-option:hover {
    background: #e6f7ff;
}

.wms-custom-select-theme-default .wms-custom-select-option.selected {
    background: #e6f7ff;
    color: #1890ff;
}

/* 摄像头主题 (蓝色) */
.wms-custom-select-theme-camera .wms-custom-select-trigger:hover,
.wms-custom-select-theme-camera.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #1890ff;
    box-shadow: 0 0 0 0.1429rem rgba(24, 144, 255, 0.2);
}

.wms-custom-select-theme-camera .wms-custom-select-option:hover {
    background: #e6f7ff;
}

.wms-custom-select-theme-camera .wms-custom-select-option.selected {
    background: #e6f7ff;
    color: #1890ff;
}

/* 存储配置主题 (蓝色) */
.wms-custom-select-theme-storage .wms-custom-select-trigger:hover,
.wms-custom-select-theme-storage.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #1890ff;
    box-shadow: 0 0 0 0.1429rem rgba(24, 144, 255, 0.2);
}

.wms-custom-select-theme-storage .wms-custom-select-option:hover {
    background: #e6f7ff;
}

.wms-custom-select-theme-storage .wms-custom-select-option.selected {
    background: #e6f7ff;
    color: #1890ff;
}

/* 电子秤主题 (橙色) */
.wms-custom-select-theme-scale .wms-custom-select-trigger:hover,
.wms-custom-select-theme-scale.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #ff8c00;
    box-shadow: 0 0 0 0.1429rem rgba(255, 140, 0, 0.2);
}

.wms-custom-select-theme-scale .wms-custom-select-option:hover {
    background: #fff7e6;
}

.wms-custom-select-theme-scale .wms-custom-select-option.selected {
    background: #fff7e6;
    color: #ff8c00;
}

/* 打印机主题 (橙色/蓝色混合) */
.wms-custom-select-theme-printer .wms-custom-select-trigger:hover,
.wms-custom-select-theme-printer.wms-custom-select.open .wms-custom-select-trigger {
    border-color: #0052d9;
    box-shadow: 0 0 0 0.1429rem rgba(0, 82, 217, 0.2);
}

.wms-custom-select-theme-printer .wms-custom-select-option:hover {
    background: #e6f0ff;
}

.wms-custom-select-theme-printer .wms-custom-select-option.selected {
    background: #e6f0ff;
    color: #0052d9;
}

/* ========================================
   错误状态
   ======================================== */

.wms-custom-select.has-error .wms-custom-select-trigger {
    border-color: #ff4d4f !important;
    box-shadow: 0 0 0 0.1429rem rgba(255, 77, 79, 0.2) !important;
    animation: wms-custom-select-shake 0.5s ease;
}

@keyframes wms-custom-select-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.3571rem); }
    75% { transform: translateX(0.3571rem); }
}

/* ========================================
   尺寸变体
   ======================================== */

/* 小尺寸 */
.wms-custom-select.wms-custom-select-sm .wms-custom-select-trigger {
    height: 2.2857rem;
    font-size: 0.8571rem;
    padding: 0 2.2857rem 0 0.7143rem;
}

.wms-custom-select.wms-custom-select-sm .wms-custom-select-arrow {
    width: 0.7143rem;
    height: 0.7143rem;
    right: 0.7143rem;
}

.wms-custom-select.wms-custom-select-sm .wms-custom-select-option {
    padding: 0.5714rem 0.8571rem;
    font-size: 0.8571rem;
    min-height: 2.5714rem;
}

/* 大尺寸 (触屏友好) */
.wms-custom-select.wms-custom-select-lg .wms-custom-select-trigger {
    height: 3.4286rem;
    font-size: 1rem;
    padding: 0 3.4286rem 0 1.1429rem;
}

.wms-custom-select.wms-custom-select-lg .wms-custom-select-arrow {
    width: 1rem;
    height: 1rem;
    right: 1.1429rem;
}

.wms-custom-select.wms-custom-select-lg .wms-custom-select-option {
    padding: 1.1429rem 1.2857rem;
    font-size: 1rem;
    min-height: 4rem;
}