/**
 * 配送中心功能区布局 - 样式表
 * Distribution Center Zone Layout - Stylesheet
 * 
 * @author PMS Team
 * @version 1.0.0
 */

/* ========== 基础样式 ========== */
body {
    margin: 0;
    overflow: hidden;
    background: #0f172a;
    font-family: 'Segoe UI', sans-serif;
}

#canvas-container {
    width: 100vw;
    height: 100vh;
}

/* ========== 区域信息提示 ========== */
.zone-info {
    position: absolute;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 12px;
    color: #e2e8f0;
    font-size: 13px;
    pointer-events: none;
    display: none;
    z-index: 100;
    min-width: 180px;
}

.zone-info h4 {
    margin: 0 0 8px 0;
    color: #60a5fa;
    font-size: 14px;
}

.zone-info p {
    margin: 4px 0;
    color: #94a3b8;
}

.zone-info .value {
    color: #e2e8f0;
    font-weight: 500;
}

/* ========== 托盘信息面板 ========== */
.pallet-info-panel {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 0;
    color: #e2e8f0;
    min-width: 280px;
    z-index: 200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.pallet-info-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px 12px 0 0;
}

.pallet-info-panel .panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #60a5fa;
}

.pallet-info-panel .close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.pallet-info-panel .close-btn:hover {
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}

.pallet-info-panel .panel-content {
    padding: 16px 20px;
}

.pallet-info-panel .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    font-size: 13px;
}

.pallet-info-panel .info-label {
    color: #94a3b8;
    font-weight: 400;
}

.pallet-info-panel .info-value {
    color: #e2e8f0;
    font-weight: 500;
    text-align: right;
}



/* ========== 右侧面板堆叠布局 ========== */
.utilization-panel,
.business-panel,
.realtime-control-panel,
.construction-panel,
.model-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 460px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 12px;
    color: #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    z-index: 150;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* OMS参数面板内容样式 */
.oms-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.oms-section:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}

.oms-section h4 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.oms-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.oms-info-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.oms-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.oms-value {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
}

/* 功能区面积分布图表 */
.oms-area-chart {
    margin: 10px 0;
    padding: 10px;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
}

.oms-area-bar {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

.oms-area-bar:last-child {
    margin-bottom: 0;
}

.oms-area-label {
    width: 60px;
    color: #94a3b8;
    text-align: right;
    padding-right: 6px;
    font-size: 10px;
    flex-shrink: 0;
}

.oms-area-track {
    flex: 1;
    height: 16px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.oms-area-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.oms-area-value {
    font-size: 9px;
    color: white;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.oms-area-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.oms-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #94a3b8;
}

.oms-legend-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* 数据来源标识 */
.oms-source-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    margin-top: 8px;
}

.oms-source-icon {
    font-size: 12px;
}

.oms-source-text {
    font-size: 11px;
    color: #60a5fa;
    font-weight: 500;
}



/* 面板标签栏 - 放在右侧面板上方 */
.right-panels-tabs {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 460px;
    display: flex;
    gap: 4px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(12px);
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.panel-tab {
    flex: 1;
    padding: 8px 4px;
    background: rgba(30, 41, 59, 0.5);
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.panel-tab:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #e2e8f0;
}

.panel-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.8));
    color: white;
    font-weight: 500;
}

/* 面板激活状态 */
.utilization-panel.active,
.business-panel.active,
.realtime-control-panel.active,
.construction-panel.active,
.model-panel.active {
    z-index: 160;
    transform: translateY(50px);
}

.utilization-panel:not(.active),
.business-panel:not(.active),
.realtime-control-panel:not(.active),
.construction-panel:not(.active),
.model-panel:not(.active) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(50px) scale(0.95);
}

/* 利用率统计面板 */
.utilization-panel {
    /* 继承基础样式 */
}

.utilization-panel h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #60a5fa;
    text-align: center;
}

/* 总体利用率环形图 */
.utilization-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.utilization-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 0% 0%, rgba(59, 130, 246, 0.2) 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

.utilization-ring::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.5);
}

.utilization-percent {
    font-size: 18px;
    font-weight: bold;
    color: #60a5fa;
    position: relative;
    z-index: 1;
}

.utilization-status {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

/* 详细利用率 */
.utilization-details {
    margin-bottom: 16px;
}

.util-item {
    margin-bottom: 16px;
}

.util-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.util-label {
    font-size: 13px;
    color: #e2e8f0;
}

.util-value {
    font-size: 14px;
    font-weight: bold;
    color: #60a5fa;
}

.util-bar {
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.util-progress {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.util-progress.high {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.util-progress.medium {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.util-progress.low {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.util-detail {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
}

/* 优化建议 */
.utilization-suggestions {
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.utilization-suggestions h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #fbbf24;
}

.utilization-suggestions ul {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: #94a3b8;
}

.utilization-suggestions li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* ========== 可折叠面板基础样式 ========== */
.collapsible-panel {
    transition: all 0.3s ease;
}

.collapsible-panel.collapsed {
    min-height: auto;
}

.collapsible-panel.collapsed .panel-content {
    display: none;
}

.collapsible-panel.collapsed .panel-toggle {
    transform: rotate(-90deg);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    margin-bottom: 8px;
}

.panel-header:hover {
    opacity: 0.8;
}

.panel-toggle {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

/* ========== 控制面板 ========== */
.control-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 0;
    color: #e2e8f0;
    min-width: 320px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.control-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    transition: background 0.3s;
}

.control-panel .panel-header:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.15));
}

.control-panel h2 {
    margin: 0;
    font-size: 16px;
    color: #60a5fa;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.control-panel .panel-content {
    padding: 16px 20px;
}

/* 面板标签导航 */
.panel-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.panel-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.panel-tab:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #e2e8f0;
}

.panel-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.15));
    color: #60a5fa;
    font-weight: 500;
}

/* 标签内容区域 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* 控制组分类 */
.control-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.control-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.control-group {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 500;
}

.control-group .value-display {
    color: #60a5fa;
    font-size: 12px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
}

/* 自定义滚动条样式 */
.control-panel::-webkit-scrollbar {
    width: 6px;
}

.control-panel::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #6366f1);
    border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #4f46e5);
}

/* Firefox 滚动条 */
.control-panel {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(15, 23, 42, 0.3);
}

/* 自定义滑块样式 */
.control-group input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* ========== 按钮样式 ========== */
.btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
    background: rgba(71, 85, 105, 0.6);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.btn-secondary:hover {
    background: rgba(71, 85, 105, 0.8);
    border-color: rgba(148, 163, 184, 0.3);
}

.btn-accent {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-accent:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* ========== 统计项样式（用于标签页内） ========== */
.stat-item {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 13px;
}

.stat-label {
    color: #94a3b8;
}

.stat-value {
    color: #e2e8f0;
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 6px 0;
    font-size: 12px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ========== 容器容积统计 ========== */
.volume-stats-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.volume-stats-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 0;
    transition: all 0.2s;
}

.volume-stats-section .section-header:hover {
    color: #60a5fa;
}

.volume-stats-section .section-header h4 {
    margin: 0;
    font-size: 14px;
    color: #e2e8f0;
}

.volume-stats-section .section-toggle {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.3s;
}

.volume-stats-section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.volume-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.volume-stats-section.collapsed .volume-content {
    max-height: 0;
}

/* 总览卡片 */
.volume-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.volume-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    transition: all 0.2s;
}

.volume-card:hover {
    background: rgba(51, 65, 85, 0.5);
    transform: translateY(-2px);
}

.volume-card-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.volume-card-value {
    font-size: 16px;
    font-weight: 600;
    color: #60a5fa;
    margin-bottom: 2px;
}

.volume-card-label {
    font-size: 10px;
    color: #94a3b8;
}

/* 区域容积列表 */
.volume-zones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.volume-zone-item {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.volume-zone-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.volume-zone-header:hover {
    background: rgba(51, 65, 85, 0.3);
}

.volume-zone-name {
    flex: 1;
    font-size: 12px;
    color: #e2e8f0;
}

.volume-zone-total {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
    margin-right: 8px;
}

.volume-zone-toggle {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.3s;
}

.volume-zone-item.collapsed .volume-zone-toggle {
    transform: rotate(-90deg);
}

.volume-zone-detail {
    padding: 0 12px 10px 12px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.volume-zone-item.collapsed .volume-zone-detail {
    max-height: 0;
    padding: 0 12px;
}

.volume-detail-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 11px;
}

.volume-detail-row:last-child {
    border-bottom: none;
}

.volume-detail-label {
    flex: 1;
    color: #94a3b8;
    padding-left: 16px;
}

.volume-detail-count {
    color: #e2e8f0;
    margin-right: 12px;
    min-width: 50px;
    text-align: right;
}

.volume-detail-volume {
    color: #60a5fa;
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}

/* ========== 经营分析面板 ========== */
.business-panel {
    /* 继承基础样式 width: 360px */
    max-height: 70vh;
    overflow-y: auto;
}

.business-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
}

.business-panel .panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #60a5fa;
}

/* 模式切换标签 */
.business-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: rgba(30, 41, 59, 0.5);
    padding: 4px;
    border-radius: 8px;
}

.business-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.business-tab:hover {
    color: #e2e8f0;
}

.business-tab.active {
    background: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.business-content.hidden {
    display: none;
}

/* 收益卡片 */
.revenue-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.revenue-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
}

.revenue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.revenue-card.income {
    border-color: rgba(34, 197, 94, 0.3);
}

.revenue-card.cost {
    border-color: rgba(239, 68, 68, 0.3);
}

.revenue-card.profit {
    border-color: rgba(59, 130, 246, 0.3);
}

.revenue-card.margin {
    border-color: rgba(245, 158, 11, 0.3);
}

.revenue-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.revenue-value {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.revenue-card.income .revenue-value {
    color: #22c55e;
}

.revenue-card.cost .revenue-value {
    color: #ef4444;
}

.revenue-card.profit .revenue-value {
    color: #3b82f6;
}

.revenue-card.margin .revenue-value {
    color: #f59e0b;
}

.revenue-label {
    font-size: 10px;
    color: #94a3b8;
}

/* 业务区块 */
.business-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.business-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.business-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
}

/* 图表样式 */
.business-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.chart-label {
    width: 60px;
    color: #94a3b8;
}

.chart-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.chart-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.chart-bar.cost-bar {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.chart-value {
    width: 40px;
    text-align: right;
    color: #e2e8f0;
    font-weight: 500;
}

/* 效率指标 */
.efficiency-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.efficiency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 8px;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 6px;
}

.efficiency-name {
    flex: 1;
    color: #94a3b8;
}

.efficiency-ours {
    color: #60a5fa;
    font-weight: 500;
    min-width: 70px;
    text-align: right;
}

.efficiency-industry {
    color: #64748b;
    font-size: 10px;
    min-width: 80px;
}

.efficiency-trend {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.efficiency-trend.up {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.efficiency-trend.down {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* 智能建议 */
.business-suggestions {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.business-suggestions h4 {
    margin: 0 0 8px 0;
    color: #f59e0b;
    font-size: 12px;
}

.business-suggestions ul {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    color: #e2e8f0;
}

.business-suggestions li {
    margin-bottom: 4px;
}

/* 客户展示模式 */
.capability-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.capability-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    transition: all 0.2s;
}

.capability-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.capability-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.capability-title {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.capability-value {
    font-size: 16px;
    font-weight: 600;
    color: #60a5fa;
}

.capability-unit {
    font-size: 10px;
    color: #64748b;
}

.capability-sub {
    font-size: 9px;
    color: #475569;
    margin-top: 2px;
}

/* 对比列表 */
.comparison-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comparison-name {
    font-size: 11px;
    color: #94a3b8;
}

.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comparison-bar {
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: white;
    font-weight: 500;
}

.comparison-bar.ours {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.comparison-bar.industry {
    background: rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.comparison-bar.low {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.comparison-lead {
    font-size: 10px;
    color: #22c55e;
    font-weight: 500;
}

/* 实时数据 */
.realtime-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.realtime-item {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.realtime-label {
    font-size: 10px;
    color: #94a3b8;
    display: block;
    margin-bottom: 4px;
}

.realtime-value {
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
}

/* 客户案例 */
.case-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
    transition: all 0.2s;
}

.case-item:hover {
    background: rgba(51, 65, 85, 0.3);
}

.case-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.case-content {
    flex: 1;
}

.case-title {
    font-size: 12px;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 2px;
}

.case-desc {
    font-size: 10px;
    color: #94a3b8;
}

/* ========== 实时经营控制面板 ========== */
.realtime-control-panel {
    /* 继承基础样式 width: 360px */
    max-height: 70vh;
    overflow-y: auto;
}

.realtime-control-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
}

.realtime-control-panel.collapsed .panel-header {
    margin-bottom: 0;
}

.realtime-control-panel .panel-header h3 {
    margin: 0;
    font-size: 14px;
    color: #60a5fa;
}

.time-control-section {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.time-display {
    text-align: center;
    margin-bottom: 12px;
}

.time-main {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #e2e8f0;
}

.time-status {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.time-status.running {
    color: #10b981;
}

.control-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.control-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.3);
    color: #e2e8f0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover {
    background: rgba(59, 130, 246, 0.5);
}

.speed-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.speed-selector label {
    font-size: 11px;
    color: #94a3b8;
}

.speed-options {
    display: flex;
    gap: 4px;
}

.speed-btn {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.speed-btn:hover {
    border-color: rgba(59, 130, 246, 0.5);
    color: #e2e8f0;
}

.speed-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* 实时数据看板 */
.realtime-stats {
    margin-bottom: 12px;
}

.stats-title {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.stat-group {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 11px;
}

.stat-row:not(:last-child) {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.stat-label {
    color: #94a3b8;
}

.stat-value {
    color: #e2e8f0;
    font-weight: 500;
}

.stat-value.income {
    color: #10b981;
}

.stat-value.cost {
    color: #f87171;
}

.stat-value.profit {
    color: #60a5fa;
    font-size: 13px;
    font-weight: 600;
}

.profit-row {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
    margin: 4px -4px;
    padding: 6px 4px;
}

/* 最近订单 */
.recent-orders {
    margin-top: 12px;
}

.orders-list {
    max-height: 150px;
    overflow-y: auto;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 11px;
}

.order-item.empty {
    color: #64748b;
    text-align: center;
    justify-content: center;
}

.order-id {
    color: #60a5fa;
    font-family: monospace;
}

.order-type {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
}

.order-type.inbound {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.order-type.outbound {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.order-type.transfer {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.order-status {
    font-size: 10px;
}

.order-status.created {
    color: #94a3b8;
}

.order-status.processing {
    color: #f59e0b;
}

.order-status.completed {
    color: #10b981;
}

.order-status.cancelled {
    color: #f87171;
}

/* ========== 区域显示控制 ========== */
.zone-visibility-control {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.visibility-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.select-all-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
    cursor: pointer;
}

.select-all-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.zone-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zone-toggles.compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
}

.zone-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 0;
}

.zone-toggle-item:hover {
    color: #e2e8f0;
}

/* 统计概览卡片 */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.stat-card {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #60a5fa;
    margin-bottom: 2px;
}

.stat-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.zone-stats-list {
    margin-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 8px;
}

.zone-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 11px;
}

.zone-stat-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.zone-stat-name {
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
}

.zone-stat-area {
    color: #94a3b8;
    text-align: right;
}

.zone-stat-percent {
    color: #60a5fa;
    min-width: 32px;
    text-align: right;
}

.zone-toggle-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.zone-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ========== 建设费用面板 ========== */
.construction-panel {
    /* 继承基础样式 width: 360px */
    max-height: 70vh;
    overflow-y: auto;
}

.construction-summary {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.cost-total-card .cost-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.cost-total-card .cost-value {
    font-size: 24px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 4px;
}

.cost-total-card .cost-per-sqm {
    font-size: 11px;
    color: #64748b;
}

.construction-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-category {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 6px;
    overflow: hidden;
}

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

.category-header:hover {
    background: rgba(59, 130, 246, 0.1);
}

.category-name {
    font-size: 12px;
    font-weight: 500;
}

.category-amount {
    font-size: 12px;
    color: #f59e0b;
    font-weight: 600;
}

.category-details {
    display: none;
    padding: 0 12px 10px;
}

.category-details.expanded {
    display: block;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

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

.detail-name {
    color: #94a3b8;
}

.detail-info {
    display: flex;
    gap: 8px;
    align-items: center;
}

.detail-full-info {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 10px;
}

.detail-price {
    color: #64748b;
    font-size: 9px;
    white-space: nowrap;
}

.detail-count {
    color: #94a3b8;
    font-size: 10px;
    white-space: nowrap;
}

.detail-cost {
    color: #f59e0b;
    font-weight: 500;
    min-width: 50px;
    text-align: right;
    font-size: 10px;
}

.construction-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 10px;
    color: #64748b;
    text-align: center;
}

/* ========== 模型控制面板 ========== */
.model-panel {
    /* 继承基础样式，无需额外定义 */
}

/* 连接状态 */
.model-connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    margin-bottom: 16px;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-indicator.offline {
    background: #ef4444;
}

.status-indicator.online {
    background: #10b981;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    flex: 1;
    font-size: 13px;
    color: #e2e8f0;
}

.btn-connect {
    padding: 6px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-connect:hover {
    background: #2563eb;
}

/* 演示模式 */
.model-demo-section {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.model-demo-section h4,
.model-control-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #60a5fa;
    font-weight: 500;
}

.demo-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.btn-demo {
    flex: 1;
    padding: 8px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-demo:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.3);
}

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

.demo-status {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    padding: 4px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 4px;
}

/* 控制区域 */
.model-control-section {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

/* AGV控制 */
.agv-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12px;
}

.agv-position {
    color: #f59e0b;
    font-weight: 500;
}

.agv-battery {
    color: #10b981;
}

.agv-commands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.btn-agv {
    padding: 8px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-agv:hover {
    background: rgba(245, 158, 11, 0.3);
}

/* 货架控制 */
.rack-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rack-item,
.door-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 4px;
    font-size: 12px;
}

.rack-status,
.door-status {
    font-size: 11px;
    color: #94a3b8;
}

.btn-rack,
.btn-door {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-rack:hover,
.btn-door:hover {
    background: rgba(16, 185, 129, 0.3);
}

/* 卷帘门控制 */
.door-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 日志区域 */
.model-log-section {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
    padding: 12px;
}

.model-log-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #60a5fa;
    font-weight: 500;
}

.log-container {
    max-height: 150px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
    padding: 8px;
    font-size: 11px;
}

.log-item {
    padding: 4px 0;
    color: #94a3b8;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

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

.log-time {
    color: #64748b;
    margin-right: 4px;
}