/* #region zone:monitor.style.ml-lab — แท็บ ML และ AI เทรดจำลอง: การ์ดยืดหยุ่น ปุ่ม 44px */
/* #region zone:monitor.style.ml-lab.report-card — ระยะและกราฟใบรายงานผล */
.ml-lab-report-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.ml-lab-report-card h4 {
  margin: 0;
}
.ml-report-chart {
  display: grid;
  gap: 2px;
  width: 100%;
}
.ml-report-chart span {
  display: block;
  height: 4px;
  border-radius: 2px;
}
.ml-report-predicted {
  background: var(--text-2);
}
.ml-report-observed {
  background: var(--accent);
}
/* #endregion */
.ml-lab {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}
.ml-lab .panel {
  min-width: 0;
}
.ml-lab .btn {
  min-height: 44px;
}
.ml-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.ml-lab-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}
.ml-lab-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
}
.ml-lab-title {
  flex: 1 1 220px;
  min-width: 0;
}
.ml-lab-title h3,
.ml-lab-suggestion h3 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.ml-lab-title .note,
.ml-lab-market p,
.ml-lab-suggestion p {
  margin: 0;
  overflow-wrap: anywhere;
}
.ml-lab-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  justify-content: end;
  gap: var(--s-2);
  max-width: 100%;
}
.ml-lab-action > .switch-status,
.ml-lab-action > [role='switch'] {
  justify-self: end;
}
.ml-lab-reason {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 260px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: end;
}
.ml-lab-markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--s-3);
}
.ml-lab-market {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  min-width: 0;
}
.ml-lab-market-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.ml-lab-metric {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-1);
}
.ml-lab-rule,
.ml-lab-meta {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.ml-lab-trend {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.ml-lab-spark {
  flex: 0 0 auto;
  width: 120px;
  height: 32px;
  overflow: visible;
}
.ml-lab-spark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ml-lab-spark circle {
  fill: var(--accent);
}
.ml-lab-run {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.ml-lab-run-warning {
  padding: var(--s-2) var(--s-3);
  color: var(--warning-fg);
  background: var(--warning-soft);
  border-radius: var(--r-sm);
}
.ml-lab-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.ml-lab-suggestion {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}
.ml-lab-suggestion-body {
  min-width: 0;
  width: 100%;
}
.ml-lab-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
}
.ml-lab-facts dt {
  color: var(--text-3);
}
.ml-lab-facts dd {
  margin: 0;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.ml-lab-saved,
.ml-lab .disclosure {
  overflow-wrap: anywhere;
}
.ml-lab-usage {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-lab-saved li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.ml-lab-usage li {
  overflow-wrap: anywhere;
  overflow-wrap: anywhere;
}
.ml-lab-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-bottom: var(--s-4);
}
.ml-lab-up {
  color: var(--success-fg);
}
.ml-lab-down {
  color: var(--danger-fg);
}
[data-formula-tabs] {
  margin-bottom: var(--s-4);
  max-width: 100%;
  overflow-x: auto;
}
[data-formula-tabs] .tab {
  min-height: 44px;
}
@media (max-width: 599px) {
  .ml-lab-action {
    align-items: center;
    width: 100%;
  }
  .ml-lab-reason {
    max-width: none;
    text-align: start;
  }
  .ml-lab-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }
  .ml-lab-facts dd {
    margin-bottom: var(--s-2);
  }
}
/* #endregion */

/* #region zone:monitor.page.paper-whatif-layout — ตารางกว้างเลื่อนในกรอบและตัวเลือกบนมือถือ */
.paper-whatif-content,
.paper-whatif-detail {
  min-width: 0;
  max-width: 100%;
}
.paper-whatif-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-4);
}
.paper-whatif-controls > .select {
  min-width: 0;
  max-width: 100%;
}
.paper-whatif-table {
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--s-3);
}
.paper-whatif-table td {
  white-space: nowrap;
}
.paper-whatif-table table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
.paper-whatif-table th {
  white-space: nowrap;
}
/* #endregion */

/* #region zone:monitor.page.ml-retrain-actions — ปุ่มตัดสินใจ */
.ml-retrain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
@media (max-width: 600px) {
  .ml-retrain-actions {
    padding-inline-end: var(--s-12);
  }
  .ml-retrain-actions > button {
    width: 100%;
  }
}
/* #endregion */

/* #region zone:monitor.page.ml-lab.stamp-layout — ตารางป้ายที่เรียนรู้ เลื่อนในกรอบ และสถานะกำลังสะสมผล */
.ml-stamp-card {
  min-width: 0;
}
.ml-stamp-table {
  max-width: 100%;
  overflow-x: auto;
}
.ml-stamp-table table {
  width: 100%;
  table-layout: auto;
}
.ml-stamp-table th {
  white-space: normal;
  vertical-align: bottom;
}
.ml-stamp-table td {
  white-space: nowrap;
}
@media (max-width: 599px) {
  .ml-stamp-table td {
    white-space: normal;
  }
  .ml-stamp-table td:first-child {
    white-space: nowrap;
  }
  .ml-stamp-table th,
  .ml-stamp-table td {
    padding-inline: var(--s-2);
  }
}
.ml-stamp-collecting {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.ml-stamp-collecting p {
  margin: 0;
}
.ml-stamp-challenger {
  background: var(--surface-1);
}
/* #endregion */