/* ================= MÁY TRỘN (SCADA) VIEW ================= */
/* Toàn bộ style được scope dưới #view-mixer để tránh xung đột với overview.css */

#view-mixer .mx-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* PANELS */
#view-mixer .mx-panel {
  background: #131c2f;
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
}

#view-mixer .mx-panel-header h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
  border-left: 0.25rem solid #00e5ff;
  padding-left: 0.625rem;
}

#view-mixer .mx-panel-header.mx-accent-blue h3 { border-left-color: #3b82f6; }
#view-mixer .mx-panel-header.mx-accent-orange h3 { border-left-color: #f59e0b; }

#view-mixer .mx-cyan { color: #00e5ff !important; }

/* ================= LỰA CHỌN BATCH CHẠY LINH HOẠT ================= */
#view-mixer .mx-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.625rem;
  margin-bottom: 0.9375rem;
}

#view-mixer .mx-selection-header h3 { margin-bottom: 0; }

#view-mixer .mx-selection-product {
  font-size: 1rem;
  font-weight: 700;
  color: #00e5ff;
  text-transform: uppercase;
}

#view-mixer .mx-selection-product span { color: #fff; }
/* Nhãn "Sản phẩm:" tách span riêng để gắn data-i18n nên giữ nguyên màu nhấn của khối */
#view-mixer .mx-selection-product .mx-sel-lbl { color: inherit; }

#view-mixer .mx-active-badge {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-weight: 700;
  display: none;
}

#view-mixer .mx-active-badge.mx-ready {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 0.0625rem solid rgba(16, 185, 129, 0.3);
}

#view-mixer .mx-active-badge.mx-running {
  display: inline-block;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 0.0625rem solid rgba(239, 68, 68, 0.3);
}

#view-mixer .mx-selection-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

#view-mixer .mx-standby-stats {
  display: flex;
  gap: 1.25rem;
  flex: 1;
  min-width: 18.75rem;
}

#view-mixer .mx-standby-card {
  background: rgba(15, 23, 42, 0.4);
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  flex: 1;
}

#view-mixer .mx-standby-ico { font-size: 1.5rem; }

#view-mixer .mx-standby-lbl {
  font-size: 0.6875rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
}

#view-mixer .mx-standby-val {
  font-size: 1.375rem;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

#view-mixer .mx-selection-controls {
  display: flex;
  gap: 0.9375rem;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#view-mixer .mx-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#view-mixer .mx-control-group label {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}

#view-mixer .mx-select {
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  background: #0a0a0a;
  border: 0.0625rem solid #334155;
  border-radius: 0.375rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
}

#view-mixer .mx-select:disabled { opacity: 0.6; cursor: not-allowed; }
#view-mixer .mx-select-batch { width: 18.75rem; }
#view-mixer .mx-select-run { width: 21.875rem; }

#view-mixer .mx-btn-start {
  height: 2.25rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

#view-mixer .mx-btn-start:hover:not(:disabled) {
  box-shadow: 0 0 0.75rem rgba(16, 185, 129, 0.5);
}

#view-mixer .mx-btn-start:disabled { opacity: 0.6; cursor: not-allowed; }

/* ================= TIMELINE QUY TRÌNH ================= */
#view-mixer .mx-process-panel {
  container-type: inline-size;
  container-name: mx-process;
}

#view-mixer .mx-timeline-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.875rem;
}

#view-mixer .mx-steps {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#view-mixer .mx-steps::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 6.25%;
  right: 6.25%;
  height: 0.25rem;
  background: #1e293b;
  z-index: 1;
  border-radius: 0.125rem;
}

#view-mixer .mx-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

#view-mixer .mx-step-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1e293b;
  border: 0.1875rem solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 1rem;
  transition: all 0.3s ease;
}

#view-mixer .mx-step.completed .mx-step-icon {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #10b981;
}

#view-mixer .mx-step.active .mx-step-icon {
  background: rgba(14, 165, 233, 0.2);
  border-color: #00e5ff;
  box-shadow: 0 0 0.9375rem rgba(0, 229, 255, 0.4);
  color: #00e5ff;
}

#view-mixer .mx-step.active .mx-step-icon::after {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #00e5ff;
  animation: mx-pulse 1.5s infinite;
}

@keyframes mx-pulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.8; }
}

#view-mixer .mx-step-label {
  position: absolute;
  top: 0.75rem;
  font-size: 0.875rem;
  font-weight: bold;
  color: #94a3b8;
}

#view-mixer .mx-step.completed .mx-step-label,
#view-mixer .mx-step.active .mx-step-label { display: none; }

#view-mixer .mx-step-name {
  font-size: clamp(0.6875rem, 1.15cqi, 0.8125rem);
  line-height: 1.3;
  color: #64748b;
  text-align: center;
  font-weight: 600;
}

#view-mixer .mx-step.completed .mx-step-name { color: #10b981; }
#view-mixer .mx-step.active .mx-step-name { color: #00e5ff; }

/* STEP STATS */
#view-mixer .mx-step-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #182137;
  padding: 0.9375rem 1.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(59, 130, 246, 0.15);
  gap: 1.25rem;
}

#view-mixer .mx-stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  flex: 1 1 auto;
  min-width: 5.625rem;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
  padding-right: 1.25rem;
}

#view-mixer .mx-stat-box:last-child { border-right: none; padding-right: 0; }

#view-mixer .mx-stat-title {
  font-size: 0.6875rem;
  color: #94a3b8;
  text-transform: uppercase;
  white-space: nowrap;
}

#view-mixer .mx-stat-val {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

#view-mixer .mx-stat-val small { font-size: 1rem; }

#view-mixer .mx-progress-bar-small {
  width: 100%;
  height: 0.375rem;
  background: #1e293b;
  border-radius: 0.1875rem;
  overflow: hidden;
  margin-top: 0.3125rem;
}

#view-mixer .mx-progress-fill {
  height: 100%;
  background: #00e5ff;
  border-radius: 0.1875rem;
  box-shadow: 0 0 0.5rem rgba(0, 229, 255, 0.5);
}

@container mx-process (max-width: 70rem) {
  #view-mixer .mx-timeline-container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  #view-mixer .mx-stat-box { border-right: none; padding-right: 0; }
}

@container mx-process (max-width: 44rem) {
  #view-mixer .mx-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 1.25rem;
  }
  #view-mixer .mx-steps::before { display: none; }
  #view-mixer .mx-step-stats { gap: 0.75rem 1rem; }
  #view-mixer .mx-stat-box { min-width: 6.5rem; }
}

@container mx-process (max-width: 19rem) {
  #view-mixer .mx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= MAIN GRID ================= */
#view-mixer .mx-main-content {
  display: grid;
  grid-template-columns: 1fr 21.875rem;
  gap: 1.25rem;
}

#view-mixer .mx-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ================= TANK DIAGRAM ================= */
#view-mixer .mx-center-panel {
  container-type: inline-size;
  container-name: mx-diagram;
}

#view-mixer .mx-tank-diagram-container {
  display: grid;
  grid-template-columns: minmax(8.5rem, 13rem) minmax(0, 1fr) minmax(8.5rem, 13rem);
  align-items: center;
  gap: clamp(0.5rem, 1.5cqw, 1.25rem);
  width: 100%;
  padding: 0.625rem 0;
}

#view-mixer .mx-tank-side-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  z-index: 5;
}

#view-mixer .mx-tank-center-wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 40.625rem;
  min-width: 0;
  margin: 0 auto;
  container-type: inline-size;
  --u: 1cqw;
}

#view-mixer .mx-tank-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: none;
  max-height: none;
  line-height: 0;
}

#view-mixer .mx-tank-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

#view-mixer .mx-flow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

#view-mixer .mx-flow-group { display: none; }
#view-mixer .mx-flow-group.mx-flow-active { display: block; }

#view-mixer .mx-flow-arrow {
  fill: #00e5ff;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.8));
}

@keyframes mx-vortex-flow-top { to { stroke-dashoffset: -300; } }
@keyframes mx-vortex-flow-mid { to { stroke-dashoffset: -255; } }
@keyframes mx-vortex-flow-bot { to { stroke-dashoffset: -210; } }

#view-mixer .mx-vortex-wave {
  fill: none;
  stroke: rgba(0, 229, 255, 0.85);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.8));
}

#view-mixer .mx-top-wave {
  stroke: rgba(0, 229, 255, 0.95);
  stroke-width: 12;
  stroke-dasharray: 85, 15;
  animation: mx-vortex-flow-top 2.6s linear infinite;
}

#view-mixer .mx-mid-wave {
  stroke: rgba(0, 229, 255, 0.9);
  stroke-width: 9.5;
  stroke-dasharray: 70, 15;
  animation: mx-vortex-flow-mid 2s linear infinite;
}

#view-mixer .mx-bot-wave {
  stroke: rgba(0, 229, 255, 0.85);
  stroke-width: 7.5;
  stroke-dasharray: 55, 15;
  animation: mx-vortex-flow-bot 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #view-mixer .mx-vortex-wave { animation: none; }
}

/* PARAM CARDS */
#view-mixer .mx-param-card {
  background: rgba(15, 23, 42, 0.6);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
}

#view-mixer .mx-param-card.mx-full { width: 100%; margin-bottom: 0.9375rem; }
#view-mixer .mx-env-content .mx-param-card.mx-full:last-child { margin-bottom: 0; }

#view-mixer .mx-param-icon {
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  flex-shrink: 0;
}

#view-mixer .mx-icon-blue { color: #3b82f6; }
#view-mixer .mx-icon-cyan { color: #00e5ff; }
#view-mixer .mx-icon-orange { color: #f59e0b; }
#view-mixer .mx-icon-purple { color: #a855f7; }
#view-mixer .mx-icon-red { color: #ef4444; }
#view-mixer .mx-icon-green { color: #22c55e; }

#view-mixer .mx-param-info { flex-grow: 1; min-width: 0; }

#view-mixer .mx-param-title {
  font-size: 0.6875rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

#view-mixer .mx-param-value {
  font-size: 1.375rem;
  color: #00e5ff;
  font-weight: 700;
  line-height: 1;
}

#view-mixer .mx-param-value small { font-size: 0.75rem; font-weight: normal; }

#view-mixer .mx-param-std {
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 0.375rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.05);
  padding-top: 0.25rem;
}

#view-mixer .mx-param-std span { color: #fff; }
/* Nhãn "Tiêu chuẩn:" được tách thành span riêng để gắn data-i18n nên phải giữ lại màu phụ */
#view-mixer .mx-param-std .mx-std-lbl { color: #94a3b8; }

@container mx-diagram (max-width: 62rem) {
  #view-mixer .mx-tank-side-col .mx-param-card { padding: 0.375rem 0.5rem; gap: 0.5rem; }
  #view-mixer .mx-tank-side-col .mx-param-icon { font-size: 1.375rem; width: 1.875rem; }
  #view-mixer .mx-tank-side-col .mx-param-title { font-size: 0.625rem; }
  #view-mixer .mx-tank-side-col .mx-param-value { font-size: 1.125rem; }
  #view-mixer .mx-tank-side-col .mx-param-std { font-size: 0.625rem; }
}

/* TANK LABELS & TEMP SENSORS */
#view-mixer .mx-eq-label {
  position: absolute;
  background: rgba(0, 229, 255, 0.15);
  border: 0.0625rem solid rgba(0, 229, 255, 0.4);
  color: #00e5ff;
  font-size: clamp(0.625rem, calc(var(--u) * 2), 0.8125rem);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  padding: clamp(0.1875rem, calc(var(--u) * 0.85), 0.3125rem) clamp(0.375rem, calc(var(--u) * 1.9), 0.75rem);
  border-radius: 0.25rem;
  z-index: 8;
  padding: 10px;
}

/* Vị trí nhãn thiết bị bám theo đúng vị trí thiết bị trên ảnh sơ đồ bồn trộn */
#view-mixer .mx-eq-pump { top: 90%; left: 6%; }
#view-mixer .mx-eq-mixer { top: 17.5%; left: 50%; transform: translateX(-50%); }
#view-mixer .mx-eq-valve { top: 87.5%; left: 78.5%; transform: translateX(-50%); }

#view-mixer .mx-tank-temp-stack {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#view-mixer .mx-tank-temp-card {
  position: absolute;
  background: rgba(15, 23, 42, 0.85);
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  padding: clamp(0.25rem, calc(var(--u) * 1.3), 0.5rem) clamp(0.3125rem, calc(var(--u) * 1.6), 0.625rem);
  display: flex;
  align-items: center;
  gap: clamp(0.1875rem, calc(var(--u) * 1), 0.375rem);
  width: clamp(7.5rem, calc(var(--u) * 28), 11.25rem);
  z-index: 10;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.25rem);
}

#view-mixer .mx-tank-temp-card .mx-param-icon {
  font-size: clamp(0.875rem, calc(var(--u) * 3.4), 1.375rem);
  width: clamp(1.125rem, calc(var(--u) * 4.4), 1.875rem);
}

#view-mixer .mx-tank-temp-card .mx-param-title { font-size: clamp(0.5625rem, calc(var(--u) * 1.8), 0.6875rem); }
#view-mixer .mx-tank-temp-card .mx-param-value { font-size: clamp(0.8125rem, calc(var(--u) * 2.8), 1.125rem); }
#view-mixer .mx-tank-temp-card .mx-param-value small { font-size: clamp(0.5625rem, calc(var(--u) * 1.6), 0.75rem); }
#view-mixer .mx-tank-temp-card .mx-param-std { font-size: clamp(0.5rem, calc(var(--u) * 1.7), 0.6875rem); margin-top: 0.25rem; }

#view-mixer .mx-top-temp { top: 26.5%; right: 2%; }
#view-mixer .mx-mid-temp { top: 45.5%; right: 2%; }
#view-mixer .mx-bot-temp { top: 64%; right: 2%; }

@container mx-diagram (max-width: 62rem) {
  #view-mixer .mx-tank-diagram-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  #view-mixer .mx-tank-center-wrapper { order: -1; }
  #view-mixer .mx-tank-side-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 0.75rem;
  }
}

@container mx-diagram (max-width: 34rem) {
  #view-mixer .mx-tank-temp-stack {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.75rem;
    margin-top: 0.9375rem;
    pointer-events: auto;
  }
  #view-mixer .mx-tank-temp-card {
    position: static;
    width: auto;
    padding: 0.5rem 0.625rem;
    gap: 0.5rem;
  }
  #view-mixer .mx-tank-temp-card .mx-param-icon { font-size: 1.375rem; width: 1.875rem; }
  #view-mixer .mx-tank-temp-card .mx-param-title { font-size: 0.625rem; }
  #view-mixer .mx-tank-temp-card .mx-param-value { font-size: 1.125rem; }
  #view-mixer .mx-tank-temp-card .mx-param-value small { font-size: 0.6875rem; }
  #view-mixer .mx-tank-temp-card .mx-param-std { font-size: 0.625rem; }
  #view-mixer .mx-eq-label { padding: 0.125rem 0.3125rem; }
}

/* ================= ENV + BATCH OVERVIEW ================= */
#view-mixer .mx-batch-info { display: flex; flex-direction: column; }

#view-mixer .mx-info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
}

#view-mixer .mx-info-row:last-child { border-bottom: none; }
#view-mixer .mx-info-label { color: #a9b7cb; font-size: 0.8125rem; }
#view-mixer .mx-info-value { color: #fff; font-size: 0.875rem; font-weight: 600; text-align: right; }

/* ================= BOTTOM GRID ================= */
#view-mixer .mx-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 21.875rem;
  gap: 1.25rem;
}

/* GAUGES & LINE CHART (Highcharts) */
#view-mixer .mx-gauge-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#view-mixer .mx-gauge-item {
  width: 33%;
  height: 15.625rem;
  background: transparent;
  box-shadow: none !important;
  border: none !important;
}

#view-mixer .mx-gauge-item .highcharts-background { fill: transparent; }
#view-mixer .mx-gauge-item .highcharts-pane-series-0 { fill: #1a1a1a; }

#view-mixer .mx-main-line-chart { width: 100%; }
#view-mixer #mx-container-line { width: 100%; height: 21.875rem; }

/* ALARM PANEL */
#view-mixer .mx-alarm-panel { display: flex; flex-direction: column; }
#view-mixer .mx-view-all { color: #3b82f6; font-size: 0.8125rem; text-decoration: none; }

#view-mixer .mx-alarm-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  overflow-y: auto;
}

#view-mixer .mx-alarm-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
}

#view-mixer .mx-alarm-ico { font-size: 1.125rem; padding-top: 0.25rem; flex-shrink: 0; }
#view-mixer .mx-alarm-ico.mx-warn { color: #f59e0b; }
#view-mixer .mx-alarm-ico.mx-alarm { color: #ef4444; animation: mx-blink 1s infinite; }

@keyframes mx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

#view-mixer .mx-alarm-body { flex: 1; min-width: 0; }

#view-mixer .mx-alarm-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

#view-mixer .mx-alarm-time { color: #94a3b8; font-size: 0.75rem; flex-shrink: 0; }
#view-mixer .mx-alarm-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-mixer .mx-alarm-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

#view-mixer .mx-alarm-badge.mx-warn { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 0.0625rem solid rgba(245, 158, 11, 0.3); }
#view-mixer .mx-alarm-badge.mx-alarm { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 0.0625rem solid rgba(239, 68, 68, 0.3); }
#view-mixer .mx-alarm-msg { color: #94a3b8; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= BATCH TABLE ================= */
#view-mixer .mx-table-responsive { overflow-x: auto; }

#view-mixer .mx-batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: #e2e8f0;
}

#view-mixer .mx-batch-table thead {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 0.125rem solid rgba(59, 130, 246, 0.2);
}

#view-mixer .mx-batch-table th {
  color: #a9b7cb;
  font-weight: 600;
  padding: 0.75rem 0.625rem;
  text-align: center;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

#view-mixer .mx-batch-table th:last-child { border-right: none; }
#view-mixer .mx-batch-table th.mx-th-left { text-align: left; }

#view-mixer .mx-batch-table tbody tr {
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

#view-mixer .mx-batch-table tbody tr:hover { background: rgba(59, 130, 246, 0.1); }

#view-mixer .mx-batch-table td {
  padding: 0.75rem 0.625rem;
  text-align: center;
  font-weight: 500;
}

#view-mixer .mx-batch-table td.mx-td-left { text-align: left; color: #fff; font-weight: 600; }

#view-mixer .mx-batch-table tr.mx-row-active {
  background: rgba(59, 130, 246, 0.15);
  border-left: 0.1875rem solid #00e5ff;
}

#view-mixer .mx-status {
  display: inline-block;
  width: 7rem;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

#view-mixer .mx-status.in-progress { background: rgba(14, 165, 233, 0.2); color: #00e5ff; border: 0.0625rem solid #00e5ff; }
#view-mixer .mx-status.completed { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 0.0625rem solid #10b981; }
#view-mixer .mx-status.pending { background: rgba(105, 104, 104, 0.2); color: #a8a7a7; border: 0.0625rem solid #a8a7a7; }

/* ================= BATCH TRONG NGÀY & BOM ================= */
#view-mixer .mx-bottom-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

#view-mixer .mx-bom-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#view-mixer .mx-daily-batches-table tbody tr.mx-row-active { background: rgba(0, 229, 255, 0.05); }
#view-mixer .mx-daily-batches-table td.mx-td-left { padding-left: 1.25rem; }
#view-mixer .mx-daily-batches-table .mx-muted { color: #94a3b8; }
#view-mixer .mx-daily-batches-table .mx-empty { color: #94a3b8; padding: 1.25rem; text-align: center; }

#view-mixer .mx-bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: #e2e8f0;
}

#view-mixer .mx-bom-table thead {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 0.125rem solid rgba(59, 130, 246, 0.2);
}

#view-mixer .mx-bom-table th {
  color: #a9b7cb;
  font-weight: 600;
  padding: 0.75rem 0.625rem;
  text-align: center;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

#view-mixer .mx-bom-table td {
  padding: 0.75rem 0.625rem;
  text-align: center;
  font-weight: 500;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
}

#view-mixer .mx-bom-table th:last-child,
#view-mixer .mx-bom-table td:last-child { border-right: none; }

#view-mixer .mx-bom-table tbody tr { border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05); transition: background 0.2s ease; }
#view-mixer .mx-bom-table tbody tr:last-child { border-bottom: none; }
#view-mixer .mx-bom-table tbody tr:hover { background: rgba(59, 130, 246, 0.1); }

#view-mixer .mx-bom-table .mx-th-code,
#view-mixer .mx-bom-table .mx-td-code { text-align: left; color: #fff; font-weight: 600; }

#view-mixer .mx-panel-header.mx-accent-green h3 { border-left-color: #10b981; }

#view-mixer .mx-bom-empty {
  color: #94a3b8;
  padding: 1.25rem;
  text-align: center;
  background: rgba(15, 23, 42, 0.45);
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 87.5rem) {
  #view-mixer .mx-main-content,
  #view-mixer .mx-bottom-grid,
  #view-mixer .mx-bottom-tables-grid { grid-template-columns: 1fr; }
}

@media (max-width: 75rem) {
  #view-mixer .mx-gauge-container { flex-wrap: wrap; justify-content: center; }
  #view-mixer .mx-gauge-item { width: 100%; }
  #view-mixer .mx-selection-controls { justify-content: flex-start; }
  #view-mixer .mx-select-batch,
  #view-mixer .mx-select-run { width: 100%; min-width: 15rem; }
}

@media (max-width: 48rem) {
  #view-mixer .mx-dashboard { padding: 1rem 0.75rem; gap: 1rem; }
  #view-mixer .mx-panel { padding: 0.875rem; }
  #view-mixer .mx-env-content .mx-param-card.mx-full { margin-bottom: 0.75rem; }
}