/* NEXUS / Visual QC — portfolio-grade styling of the ACTUAL simulation HMI.
   Overrides the legacy illustration palette; never changes unit/defect values. */
:root {
  --bg: #071829 !important;
  --card: #10263d !important;
  --border: #294767 !important;
  --text: #eff5ff !important;
  --blue: #4ea8ff !important;
  --purple: #8f9bff !important;
  --teal: #487fd8 !important;
}
body {
  background: radial-gradient(ellipse at 86% 2%, rgba(78,168,255,.12), transparent 40%),
              radial-gradient(ellipse at 13% 97%, rgba(143,155,255,.07), transparent 42%),
              #071829 !important;
}
.hmi-masthead {
  min-height: 86px;
  padding: 15px 24px;
  background: linear-gradient(108deg, #0b2440 0%, #133452 52%, #0c2039 100%) !important;
  border-bottom: 1px solid #31577b !important;
  box-shadow: 0 18px 34px rgba(0,7,21,.19);
}
.hmi-brand-mark {
  border: 1px solid #5b86b5 !important;
  background: #163b60 !important;
  border-radius: 12px;
}
.hmi-brand-mark span { border-color: #8f9bff !important; }
.nexus-vq-wordmark {
  color: #83c4ff;
  font-size: .66rem;
  font-weight: 780;
  letter-spacing: .21em;
  line-height: 1.4;
}
.hmi-brand-copy strong { font-size: clamp(1.13rem, 1.8vw, 1.52rem) !important; letter-spacing: -.035em; }
.hmi-brand-copy em { color: #a9b4ff !important; }
.hmi-brand-copy small { font-size: .73rem; color: #bfd5eb !important; }
.hmi-brand-meta { gap: 7px; }
.hmi-mode-pill {
  background: rgba(8,35,64,.78) !important;
  color: #c8e4ff !important;
  border: 1px solid #3a729f !important;
  border-radius: 7px !important;
}
.nexus-vq-meta { color: #8db7db; font-size: .64rem; letter-spacing: .1em; font-weight: 680; }
.nexus-vq-label {
  flex-shrink: 0;
  padding: 11px 23px 3px;
  background: #0b2037;
  color: #95c9ff;
  font-size: .65rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nexus-vq-controls-title { background: #0b2037; }
.nexus-vq-workspace-title { background: #071829; padding-top: 9px; }
.header {
  background: #0b2037 !important;
  gap: 10px !important;
  padding: 10px 20px 15px !important;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(140deg, #163654 0%, #0e2843 100%) !important;
  border: 1px solid #315575 !important;
  border-top: 2px solid #4ea8ff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 27px rgba(2,9,25,.24), inset 0 1px 0 rgba(170,209,248,.07);
  padding: 12px 15px !important;
}
.kpi-card:nth-child(2) { border-top-color: #8f9bff !important; }
.kpi-card:nth-child(5) { border-top-color: #43c99d !important; }
.kpi-card:nth-child(6) { border-top-color: #f37a88 !important; }
.kpi-card::after { background: none !important; }
.kpi-title { color: #b4cbe5 !important; font-size: .67rem !important; font-weight: 700 !important; letter-spacing: .045em; }
.kpi-val { color: #f3f8ff !important; font-size: clamp(1.12rem, 1.6vw, 1.68rem) !important; font-weight: 600; font-variant-numeric: tabular-nums; }
#status_val { color: #b5c2ff !important; }
#status_val[style*="--red"] { color: #f37a88 !important; }
#status_val[style*="--green"] { color: #43c99d !important; }
#status_val[style*="--yellow"] { color: #f6b95f !important; }
.control-bar {
  background: #0b2037 !important;
  border-bottom: 1px solid #294767 !important;
  gap: 9px !important;
  padding: 8px 20px 15px !important;
}
.control-bar .btn {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #375c7e !important;
  border-bottom-width: 1px !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px rgba(241,247,255,.09), 0 6px 12px rgba(0,10,25,.14) !important;
  font-size: .72rem !important;
  font-weight: 730;
  letter-spacing: .055em;
}
.btn-start { background: #13634f !important; }
.btn-pause { background: #745321 !important; }
.btn-reset, .btn-case-study { background: #24548a !important; }
.btn-estop { background: #8d3042 !important; }
.btn-sim-fail { background: #54449a !important; }
.btn-rag { background: #454786 !important; }
.btn-export { background: #265fa2 !important; }
.main-grid { gap: 13px !important; padding: 11px 20px 17px !important; }
.panel, .right-col {
  border: 1px solid #315575 !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 36px rgba(0,9,24,.21);
}
.right-col { background: #0b243d !important; gap: 10px !important; }
#line-twin { border-color: #416489 !important; background: #061426; }
.twin-chip { border-color: #3c729a !important; background: rgba(5,19,36,.88) !important; }
.section-header {
  color: #e3f0ff !important;
  background: #163756 !important;
  border-bottom: 1px solid #315575 !important;
  padding: 9px 12px !important;
  font-size: .7rem !important;
  letter-spacing: .085em !important;
}
.chart-container { padding: 9px 13px; min-height: 110px; }
.log-table th { background: #163655 !important; color: #c9dff7 !important; }
.log-table td { border-bottom-color: #294767 !important; }
.log-table tr:hover td { background: rgba(78,168,255,.095) !important; }
.log-box { scrollbar-color: #315e89 #10243b; }
.review-row { border-color: #294767 !important; }
.data-provenance { background: #0b2037; border-bottom: 1px solid #294767; }
.data-provenance strong { color: #f6b95f; }
.data-provenance a { color: #9cccff; }
.btn:focus-visible, a:focus-visible { outline: 2px solid #4ea8ff !important; outline-offset: 3px; }
@media (max-width: 1120px) {
  .hmi-masthead { padding: 12px 15px; }
  .header { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .main-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.9fr); }
}
@media (max-width: 780px) {
  /* Desktop HMI fixes the viewport height. Let stacked mobile panels scroll. */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body { display: block !important; }
  .nexus-vq-label { padding: 10px 12px 4px; }
  .hmi-masthead { padding: 12px; }
  .header { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 9px 11px 13px !important; }
  .control-bar { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 8px 11px 13px !important; }
  .main-grid { display: flex !important; flex-direction: column !important; padding: 10px 11px 20px !important; }
  #line-twin { height: min(60vh, 530px); min-height: 370px; }
  .right-col { padding: 9px !important; }
  .chart-container { min-height: 155px; }
  .log-sec { min-height: 200px; }
}
/* Short desktop windows scroll instead of compressing the 3D view and charts. */
@media (max-height: 840px) and (min-width: 781px) {
  html, body { height:auto!important; min-height:100%!important; overflow-y:auto!important; }
  body { display:block!important; }
  .main-grid { min-height:540px; }
  #line-twin { min-height:480px; }
}
@media (prefers-reduced-motion: reduce) {
  .control-bar .btn { transition: none !important; }
}

/* Semantic colors must survive KPI and inline-state overrides. */
.kpi-card:nth-child(5) .kpi-val { color:#7de7bb!important; }
.kpi-card:nth-child(6) .kpi-val { color:#ffa9b5!important; }
#status_val[data-state="INIT"] { color:#b5c2ff!important; }
#status_val[data-state="RUNNING"] { color:#7de7bb!important; }
#status_val[data-state="ESTOP"], #status_val[data-state="SERVER_ERR"] {
  color:#ffa9b5!important;
}
#status_val[data-state="PAUSED"], #status_val[data-state="IDLE"] {
  color:#f6cc87!important;
}
.review-row button:focus-visible, .review-row select:focus-visible {
  outline:2px solid #4ea8ff;
  outline-offset:2px;
}
@media (hover:hover) {
  .kpi-card { transition:border-color .18s,box-shadow .18s; }
  .kpi-card:hover { border-color:#5183b5!important;box-shadow:0 16px 35px rgba(0,9,25,.3); }
}
@media (prefers-reduced-motion: reduce) { .kpi-card { transition:none; } }

/* Empty panels are content states, not broken or missing graphs. */
.nexus-chart-empty {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:16px;
  background:linear-gradient(140deg,rgba(12,37,62,.91),rgba(7,23,41,.9));
  border:1px dashed rgba(119,169,224,.35);
  border-radius:10px; color:#b7d2eb; font-size:.74rem;
  font-weight:650; line-height:1.55; pointer-events:none;
}
.nexus-chart-empty[hidden] { display:none!important; }
.nexus-log-empty td {
  color:#a8c1db; text-align:center;
  font-family:Inter,sans-serif; font-size:.72rem;
  padding:19px 10px!important;
}
@media (max-width:780px) {
  .nexus-chart-empty { font-size:.69rem; }
}

/* Cold-load values are not zero until the simulation confirms them. */
.kpi-card .kpi-val[data-loading="true"] {
  color:#a9c2df!important; font-weight:500;
  font-size:clamp(1.4rem,1.7vw,1.8rem)!important;
  letter-spacing:.015em; opacity:.86;
}

/* Operator feedback is explicit, not an optimistic fake command confirmation. */
.nexus-command-status {
  display:flex;align-items:center;gap:9px;
  flex-shrink:0;min-height:30px;padding:6px 20px;
  background:#0b2037;border-bottom:1px solid #274867;
  color:#afcbe5;font-size:.63rem;font-weight:750;letter-spacing:.085em;
}
.nexus-command-dot { flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#a5bfd9; }
.nexus-command-status[data-state="pending"] { color:#b3d7ff; }
.nexus-command-status[data-state="pending"] .nexus-command-dot { background:#4ea8ff; }
.nexus-command-status[data-state="accepted"] { color:#95e8c6; }
.nexus-command-status[data-state="accepted"] .nexus-command-dot { background:#43c99d; }
.nexus-command-status[data-state="error"] { color:#ffbdc6; }
.nexus-command-status[data-state="error"] .nexus-command-dot { background:#f37a88; }
@media(max-width:780px) {
  .nexus-command-status { padding:9px 12px;min-height:37px;font-size:.6rem;line-height:1.45; }
}

/* A valid request can be an explicit no-op: no green acceptance claim. */
.nexus-command-status[data-state="ignored"] { color:#f9cf89; }
.nexus-command-status[data-state="ignored"] .nexus-command-dot { background:#f6b95f; }

/* Presentation acceptance: technical metadata must remain legible in
   genuine dashboard captures rather than requiring zoom. */
.nexus-vq-wordmark { font-size:.75rem; letter-spacing:.16em; }
.nexus-vq-meta { font-size:.72rem; line-height:1.55; }
.nexus-vq-label { font-size:.73rem; line-height:1.55; }
.kpi-title { font-size:.76rem!important; line-height:1.45; }
.nexus-command-status { font-size:.72rem; letter-spacing:.065em; line-height:1.5; }
.nexus-chart-empty { font-size:.78rem; }
.nexus-log-empty td { font-size:.76rem; }
@media(max-width:780px) {
  .nexus-vq-wordmark { font-size:.72rem; }
  .nexus-vq-meta,.nexus-vq-label { font-size:.7rem; }
  .nexus-command-status { font-size:.7rem; }
}

/* Real 375px HMI capture: avoid overlapping digital-twin HUD chips. */
@media (max-width: 480px) {
  #line-twin .twin-tl {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    max-width: calc(100% - 24px);
  }
  #line-twin .twin-tr {
    top: 57px !important;
    right: 12px !important;
    left: auto !important;
    min-width: 160px;
  }
}