/* HUD overlay for the 3D line twin on the HMI dashboard. */
#line-twin { position: relative; background: #070d18; }
.twin-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.twin-canvas:active { cursor: grabbing; }
.twin-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; font-size: 0.85rem; letter-spacing: 0.04em; }
.twin-hud { position: absolute; inset: 0; pointer-events: none; font-family: 'Inter', sans-serif; overflow: hidden; }
.twin-hud [hidden] { display: none !important; }

.twin-chip { position: absolute; top: 12px; background: rgba(7, 13, 24, 0.78); border: 1px solid #1e3a5f; border-radius: 8px; padding: 8px 12px; backdrop-filter: blur(6px); }
.twin-tl { left: 12px; display: flex; flex-direction: column; gap: 2px; }
.twin-tl strong { font-size: 0.72rem; letter-spacing: 0.08em; color: #e2e8f0; }
.twin-tl span { font-size: 0.68rem; color: #64748b; }
.twin-tr { right: 12px; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; min-width: 170px; }
.twin-unit { font-family: 'Roboto Mono', monospace; font-size: 0.95rem; color: #f8fafc; }
.twin-stage { font-size: 0.7rem; color: #38bdf8; text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.twin-progress { grid-column: 1 / -1; height: 4px; background: #13243a; border-radius: 99px; overflow: hidden; }
.twin-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0ea5e9, #22d3ee); }

.twin-tag, .twin-label { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.twin-tag { padding: 6px 10px; border-radius: 8px; font-size: 0.78rem; color: #f8fafc; background: rgba(7, 13, 24, 0.85); border: 1px solid; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.twin-tag strong { font-family: 'Roboto Mono', monospace; margin-right: 6px; }
.twin-tag span { margin-left: 8px; font-family: 'Roboto Mono', monospace; font-size: 0.7rem; color: #94a3b8; }
.twin-tag.is-ok { border-color: #22c55e; }
.twin-tag.is-ok strong { color: #4ade80; }
.twin-tag.is-fail { border-color: #ef4444; }
.twin-tag.is-fail strong { color: #f87171; }
.twin-label { font-family: 'Roboto Mono', monospace; font-size: 0.66rem; letter-spacing: 0.06em; color: #cbd5e1; background: rgba(7, 13, 24, 0.7); border: 1px solid #1e3a5f; border-radius: 6px; padding: 3px 7px; }
.twin-label-ok { border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
.twin-label-nok { border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }

.twin-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 16px 28px; background: rgba(7, 13, 24, 0.82); border: 1px solid #f59e0b; border-radius: 12px; backdrop-filter: blur(6px); }
.twin-banner strong { display: block; font-size: 1.3rem; letter-spacing: 0.12em; color: #fbbf24; }
.twin-banner span { font-size: 0.8rem; color: #94a3b8; }
.twin-banner.is-estop { border-color: #ef4444; }
.twin-banner.is-estop strong { color: #f87171; }

@media (max-width: 900px) {
    .twin-tl span, .twin-label { display: none; }
}

/* ── HMI polish (dashboard shell) ────────────────────────────────────────── */
body { background: radial-gradient(60% 50% at 20% 0%, rgba(59, 130, 246, 0.12), transparent 70%), radial-gradient(50% 40% at 90% 10%, rgba(16, 185, 129, 0.10), transparent 70%), #0b1220 !important; }
.header { background: rgba(3, 7, 18, 0.72) !important; backdrop-filter: blur(10px); }
.kpi-card { border-radius: 10px !important; background: linear-gradient(160deg, #16233a, #111a2c) !important; border-color: #22324d !important; position: relative; overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #3b82f6, #10b981); opacity: .7; }
.kpi-val { font-size: 1.55rem !important; letter-spacing: -0.02em; }
.control-bar { background: transparent !important; gap: 8px !important; }
.btn { border-radius: 10px !important; border-bottom-width: 0 !important; letter-spacing: 0.04em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.8); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important; }
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 12px 24px -12px currentColor; }
.btn:active { transform: translateY(1px) !important; }
.btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.panel, .right-col { border-radius: 12px !important; border-color: #22324d !important; }
.right-col { background: rgba(15, 23, 42, 0.7) !important; }
.section-header { background: linear-gradient(90deg, #1e2d45, #172338) !important; letter-spacing: 0.08em; }
.log-table tr:hover td { background: rgba(59, 130, 246, 0.06); }


/* VQ dashboard refresh — visually aligns the functioning HMI with the
   steel inspection portfolio illustration. Genuine simulation values only. */
:root {
  --bg: #08151f;
  --card: #102b35;
  --border: #24434d;
  --text: #effaf8;
  --green: #43c99d;
  --yellow: #f5bd72;
  --red: #f37a88;
  --blue: #56b9d2;
  --purple: #aa99ef;
  --teal: #39cdb8;
}
body {
  background: radial-gradient(ellipse 70% 45% at 70% -8%, rgba(41, 187, 174, .11), transparent 82%), #08151f !important;
  color: #e6f4f2;
}
.hmi-masthead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  min-height: 70px; padding: 11px 22px; border-bottom: 1px solid rgba(87, 166, 158, .24);
  background: linear-gradient(110deg, #102631, #12363d 60%, #132b3b);
}
.hmi-brand-mark {
  flex-shrink: 0; width: 42px; height: 42px; border: 2px solid rgba(136, 236, 210, .45);
  background: #153b43; border-radius: 13px; display: grid; grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px); place-content: center; gap: 4px;
}
.hmi-brand-mark span { border: 2px solid #9ef1d4; border-radius: 2px; }
.hmi-brand-copy { min-width: 0; display: grid; gap: 2px; }
.hmi-brand-copy strong { color: #f1fffc; font-size: 1.16rem; letter-spacing: -.02em; }
.hmi-brand-copy em { color: #9af1d4; font-style: normal; font-weight: 600; }
.hmi-brand-copy small { color: #afc8c8; font-size: .76rem; line-height: 1.35; }
.hmi-brand-meta { margin-left: auto; display: grid; justify-items: end; gap: 4px; text-align: right; }
.hmi-mode-pill { border: 1px solid #48786e; border-radius: 999px; padding: 5px 11px; color: #abf2dc; background: #17433f; font-size: .67rem; font-weight: 800; letter-spacing: .08em; }
.hmi-keyboard-hint { color: #92b4b8; font-size: .7rem; }
.header {
  gap: 10px !important; padding: 12px 18px !important;
  background: #0a202a !important; border-bottom-color: #284d51 !important;
}
.kpi-card {
  border-radius: 14px !important;
  background: linear-gradient(155deg,#17323e,#112a35) !important;
  border-color: #2d535c !important; padding: 13px 15px !important;
  min-width: 0; box-shadow: 0 10px 24px rgba(3,19,27,.18);
}
.kpi-card::after { height: 3px; background: linear-gradient(90deg,#39cdb8,#60bfcb); }
.kpi-title { color: #a9c6c7 !important; font-size: .69rem !important; letter-spacing: .06em; }
.kpi-val { color: #efffff; font-size: clamp(1.14rem,1.55vw,1.65rem) !important; font-variant-numeric: tabular-nums; }
.control-bar {
  gap: 9px !important; padding: 13px 18px !important;
  background: #0a202a !important; border-bottom-color: #234752 !important;
}
.btn {
  border-radius: 12px !important; font-size: .73rem !important; min-height: 41px;
  letter-spacing: .045em !important; box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.btn-start { background: #13785f; } .btn-pause { background: #845621; }
.btn-reset { background: #245a82; } .btn-estop { background: #9f3445; }
.btn-sim-fail { background: #70469b; } .btn-case-study { background: #176b8b; }
.btn-rag { background: #4945a4; } .btn-export { background: #12887c; }
.main-grid { grid-template-columns: minmax(0, 1.65fr) minmax(370px, 1fr); gap: 14px !important; padding: 14px 18px !important; }
#line-twin { border-color: #2e6265 !important; }
.panel, .right-col { border-radius: 15px !important; border-color: #2b4c59 !important; }
.right-col { padding: 10px !important; gap: 10px !important; background: #102633 !important; }
.section-header {
  background: #173542 !important; color: #d5f5ee !important; font-size: .71rem !important;
  letter-spacing: .075em; font-weight: 800 !important; padding: 10px 13px !important;
}
.profit-sec, .oee-sec, .log-sec, .review-sec { border-top-width: 0 !important; }
.chart-container { min-height: 112px; height: 132px; padding: 8px 12px; }
.log-table th { background: #163443 !important; color: #acccd1 !important; }
.log-table td { border-bottom-color: #2a4654 !important; }
.review-empty { padding: 12px; }
.twin-chip { border-color: #357976 !important; background: rgba(7,28,38,.88); }
.twin-banner { border-radius: 17px; background: rgba(7,25,35,.86); }
.btn:focus-visible { outline: 3px solid #a6f6dd !important; outline-offset: 2px; }
@media (max-width: 1120px) {
 .hmi-masthead { padding: 10px 15px; }
 .header { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
 .main-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); }
}
@media (max-width: 780px) {
 html,body { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; }
 body { display: block !important; }
 .hmi-brand-meta { display: none; }
 .header { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 10px !important; }
 .control-bar { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; padding: 10px !important; }
 .main-grid { display: flex !important; flex-direction: column !important; padding: 10px !important; }
 #line-twin { min-height: 430px; height: 58vh; }
 .right-col { min-height: 0 !important; }
 .chart-container { min-height: 160px; }
 .log-sec { min-height: 185px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none !important; } }

/* NEXUS dashboard tokens, October 2026.
   Changes the actual HTML/CSS of the simulation HMI, not portfolio artwork.
   Meaningful statuses retain their own green/amber/red semantics. */
: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(70% 55% at 8% -4%, rgba(78,168,255,.14), transparent 77%),
    radial-gradient(55% 42% at 92% 2%, rgba(143,155,255,.12), transparent 75%),
    #071829 !important;
  color: #eff5ff !important;
}
.hmi-masthead {
  background: linear-gradient(110deg,#071829,#102942 62%,#142c4b) !important;
  border-bottom-color: #294767 !important;
}
.hmi-brand-mark { background: #15365a !important; border-color: #507da8 !important; }
.hmi-brand-mark span { border-color: #8f9bff !important; }
.hmi-brand-copy strong { color: #f5f9ff !important; }
.hmi-brand-copy em { color: #8f9bff !important; }
.hmi-brand-copy small,.hmi-keyboard-hint { color: #bfd0e7 !important; }
.hmi-mode-pill { background: #163a5f !important; border-color: #4e86bc !important; color: #e4f0ff !important; }
.header,.control-bar { background: #0b2037 !important; border-bottom-color: #294767 !important; }
.kpi-card { background: linear-gradient(155deg,#142d4b,#0e233b) !important; border-color: #365779 !important; }
.kpi-card::after { background: linear-gradient(90deg,#4ea8ff,#8f9bff) !important; }
.kpi-title { color: #bdd0e9 !important; }
.kpi-val { color: #f4f8ff !important; }
.btn-reset,.btn-case-study { background: #265c9b !important; }
.btn-rag { background: #5856ab !important; }
.btn-export { background: #3567af !important; }
.panel,.right-col { border-color: #365779 !important; }
.right-col { background: #0d253e !important; }
.section-header { background: #19395c !important; color: #e5effe !important; }
.log-table th { background: #163858 !important; color: #d1e3fb !important; }
.log-table td { border-bottom-color: #294767 !important; }
#line-twin { border-color: #365779 !important; }
.btn:focus-visible { outline: 3px solid #8f9bff !important; outline-offset: 3px; }
.data-provenance {
  flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 13px;
  padding: 9px 20px; background: #0b2037; border-bottom: 1px solid #294767;
  font-size: .72rem; line-height: 1.5; color: #c2d3ec;
}
.data-provenance strong { color: #f6b95f; letter-spacing: .09em; white-space: nowrap; }
.data-provenance a { color: #8bc5ff; font-weight: 700; }
.data-provenance a:focus-visible { outline: 2px solid #8f9bff; outline-offset: 2px; }
@media (max-width: 780px) {
  .data-provenance { padding: 10px 12px; gap: 4px; align-items: flex-start; flex-direction: column; }
  .hmi-masthead { padding: 10px 12px; }
}
@media print {
  .control-bar { display: none !important; }
  body { overflow: visible !important; height: auto !important; }
  .data-provenance { border: 1px solid #365779; }
}

/* Client-observed API freshness: this is *not* a sensor event timestamp. */
.data-provenance #telemetry-status {
  margin-left: auto;
  color: #a9cff5;
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .data-provenance #telemetry-status {
    margin-left: 0;
    white-space: normal;
  }
}