/* ========================================== */
/* 文件路径: /css/matrix.css                   */
/* ========================================== */

/* 1. 大盘沙盘基础容器 */
.matrix-modal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.7); z-index:99999; justify-content:center; align-items:center; }
.matrix-container { width: 95%; height: 90%; background: #f0f2f5; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.matrix-header { background: #001529; color: white; padding: 15px 25px; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.matrix-body { flex: 1; display: flex; overflow: hidden; }

/* 2. 左右分栏与表格高亮 */
.matrix-left { flex: 3; background: white; overflow-x: auto; overflow-y: auto; border-right: 2px solid #ddd; position:relative; }
.matrix-right { flex: 1; background: #fffbe6; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.m-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.m-table th { background: #e6f7ff; padding: 12px; border: 1px solid #91d5ff; color: #0050b3; font-size: 15px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.m-table td { padding: 12px; border: 1px solid #f0f0f0; text-align: center; vertical-align: middle; font-size: 13px; }
.m-table tr:hover { background: #fafafa; }
.active-sort { box-shadow: 0 0 8px rgba(250, 140, 22, 0.8) !important; transform: scale(1.02); }

/* 3. ✨ 车费与覆膜输入框完美对齐体系 */
.freight-film-box { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.freight-film-row { display: flex; align-items: center; justify-content: flex-end; width: 140px; }
.freight-film-label { font-size: 14px; font-weight: bold; color: #555; margin-right: 6px; }
.m-freight-input { width: 85px; padding: 6px; font-size: 15px; font-weight: bold; color: #cf1322; border: 2px solid #ffa39e; border-radius: 4px; text-align: center; outline: none; transition: 0.2s; box-sizing: border-box; }
.m-freight-input:focus { border-color: #ff4d4f; box-shadow: 0 0 5px rgba(255,77,79,0.3); }

/* 4. 右侧 AI 卡片 */
.m-card { background: white; border: 2px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.m-card.recommend { border-color: #52c41a; background: #f6ffed; }
.m-card.split { border-color: #fa8c16; background: #fff7e6; }

/* 5. 🚨 雷达抽屉动画补全（解决不弹出的根本原因） */
.drawer-radar { display:none; position:fixed; right:-750px; top:10%; height:80vh; width:700px; background:#fff; border-left:4px solid #f5222d; box-shadow:-5px 0 15px rgba(0,0,0,0.1); z-index:1000; border-radius:8px 0 0 8px; transition: right 0.3s ease; flex-direction:column; }
.drawer-radar.open { right: 0 !important; display: flex !important; }
.drawer-left { right: auto !important; left: -750px; border-left: none !important; border-right: 4px solid #722ed1 !important; border-radius: 0 8px 8px 0 !important; box-shadow: 5px 0 15px rgba(0,0,0,0.1); transition: left 0.3s ease; }
.drawer-left.open { left: 0 !important; display: flex !important; }
.drawer-header { background:#fff1f0; padding:12px 15px; border-bottom:1px solid #ffa39e; font-weight:bold; color:#cf1322; display:flex; justify-content:space-between; align-items:center; border-radius:8px 0 0 0;}
.drawer-content { padding: 15px; flex:1; overflow-y: auto; background:#fafafa; }