/* IMECA3D — PDL-1 interactive dashboard (case study page only). Navy "control room" panel. */
.dash {
  --d-bg: #0B1B2E; --d-panel: #12263D; --d-panel-2: #172F4B; --d-line: #22395A;
  --d-text: #E6EDF5; --d-mute: #A9B6C6; --d-accent: #F07A2E;
  --d-ok: #34D399; --d-warn: #FBBF24; --d-alarm: #F87171; --d-off: #7C8BA0; --d-cmp: #7DB4FF;
  margin-top: 28px; background: var(--d-bg); color: var(--d-text); border-radius: var(--radius-lg, 14px);
  padding: 18px; border: 1px solid var(--d-line); box-shadow: 0 18px 50px rgba(11, 27, 46, .25);
  font-size: 14px; line-height: 1.45;
}
.dash:not(.is-ready) { min-height: 200px; }
.dash button { font: inherit; color: inherit; cursor: pointer; }
.dash h3, .dash h4 { color: var(--d-text); margin: 0; font-family: 'Space Grotesk', var(--font-head, sans-serif); }
.dash p { margin: 0; color: inherit; }
.dash [hidden] { display: none !important; }

/* top bar */
.dash__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.dash__eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-accent); font-weight: 600; }
.dash__title { font-size: 1.2rem; margin-top: 2px; }
.dash__bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash__demo { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--d-accent); color: var(--d-accent); }
.dash__live { display: inline-flex; align-items: center; gap: 7px; background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.dash__live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: dash-live 1.8s infinite; }
.dash__live.is-paused .dash__live-dot { background: var(--d-off); animation: none; }
@keyframes dash-live { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.dash__clock { font-variant-numeric: tabular-nums; color: var(--d-mute); font-size: 12px; min-width: 64px; }

/* KPIs */
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.dash__kpi { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 10px; padding: 12px 14px; border-top: 3px solid var(--d-mute); display: flex; flex-direction: column; gap: 2px; }
.dash__kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--d-mute); }
.dash__kpi strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash__kpi strong small { font-size: .9rem; color: var(--d-mute); font-weight: 500; }
.dash__kpi em { font-style: normal; font-size: 12px; color: var(--d-mute); }
.dash__kpi--ok { border-top-color: var(--d-ok); } .dash__kpi--warn { border-top-color: var(--d-warn); }
.dash__kpi--alarm { border-top-color: var(--d-alarm); } .dash__kpi--info { border-top-color: var(--d-accent); }

/* layout */
.dash__row { display: grid; gap: 12px; margin-bottom: 12px; }
.dash__row--map { grid-template-columns: 1.45fr 1fr; }
.dash__row--bottom { grid-template-columns: 1.3fr 1fr; margin-bottom: 0; }
.dash__panel { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 12px; padding: 14px; min-width: 0; }
.dash__ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash__ph h4 { font-size: .95rem; }
.dash__seg { display: inline-flex; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 8px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.dash__seg button { background: none; border: 0; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--d-mute); }
.dash__seg button:hover { color: var(--d-text); }
.dash__seg button.is-on { background: var(--d-panel-2); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line); }
.dash button:focus-visible, .dash [data-pin]:focus-visible, .dash input:focus-visible, .dash select:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }

/* map */
.dash__map { width: 100%; height: auto; display: block; }
.dash__room { fill: #0F2236; stroke: #2E4A6E; stroke-width: 1.2; transition: fill .3s; }
.dash__room--ok { fill: rgba(52, 211, 153, .14); } .dash__room--alarm { fill: rgba(248, 113, 113, .2); }
.dash__room--off { fill: rgba(124, 139, 160, .12); }
.dash__room-label { fill: #8095AD; font-size: 9px; font-weight: 600; letter-spacing: .08em; }
.dash__room-val { fill: var(--d-text); font-size: 11px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
.dash__door { stroke: #0B1B2E; stroke-width: 3; }
.dash__pin { cursor: pointer; outline: none; }
.dash__pin-hit { fill: transparent; }
.dash__pin-dot { stroke: #0B1B2E; stroke-width: 2; }
.dash__pin-sel { fill: none; stroke: transparent; stroke-width: 2; }
.dash__pin.is-sel .dash__pin-sel { stroke: var(--d-text); }
.dash__pin:focus-visible .dash__pin-sel { stroke: var(--d-accent); }
.dash__pin-ring { fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: dash-ring 2s ease-out infinite; }
.dash__pin-label { fill: var(--d-text); font-size: 9px; font-weight: 700; }
.dash__pin--ok .dash__pin-dot { fill: var(--d-ok); } .dash__pin--ok .dash__pin-ring { stroke: var(--d-ok); }
.dash__pin--warn .dash__pin-dot { fill: var(--d-warn); } .dash__pin--warn .dash__pin-ring { stroke: var(--d-warn); }
.dash__pin--alarm .dash__pin-dot { fill: var(--d-alarm); } .dash__pin--alarm .dash__pin-ring { stroke: var(--d-alarm); animation-duration: 1s; }
.dash__pin--off .dash__pin-dot { fill: var(--d-off); } .dash__pin--off .dash__pin-ring { display: none; }
@keyframes dash-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.dash__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--d-mute); }
.dash__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg--ok { background: var(--d-ok); } .lg--warn { background: var(--d-warn); } .lg--alarm { background: var(--d-alarm); } .lg--off { background: var(--d-off); }

/* device list */
.dash__devs { display: grid; gap: 8px; }
.dash__dev { text-align: left; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; transition: border-color .15s, background .15s; }
.dash__dev:hover { border-color: #35557E; }
.dash__dev.is-sel { border-color: var(--d-accent); background: #10233A; }
.dash__dev-top { display: flex; align-items: center; gap: 8px; }
.dash__dev-top strong { font-size: 13px; } .dash__dev-top em { font-style: normal; color: var(--d-mute); font-size: 12px; }
.dash__dev-vals { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.dash__dev-vals b { font-weight: 600; font-size: 14px; }
.dash__spark { flex: 1; height: 22px; min-width: 50px; }
.dash__spark path { fill: none; stroke: var(--d-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dash__dev-off { color: var(--d-alarm); font-size: 12px; font-weight: 600; }
.dash__dev-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--d-mute); font-variant-numeric: tabular-nums; }
.dash__batt { width: 46px; height: 7px; border-radius: 4px; background: #23384F; overflow: hidden; }
.dash__batt i { display: block; height: 100%; background: var(--d-ok); border-radius: 4px; }
.dash__batt i.is-low { background: var(--d-alarm); }
.dash__sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: auto; }
.dash__sig i { width: 3px; background: #2E4A6E; border-radius: 1px; }
.dash__sig i:nth-child(1) { height: 4px; } .dash__sig i:nth-child(2) { height: 7px; } .dash__sig i:nth-child(3) { height: 10px; } .dash__sig i:nth-child(4) { height: 12px; }
.dash__sig i.on { background: var(--d-text); }
.dash__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dash__dot--ok { background: var(--d-ok); } .dash__dot--warn { background: var(--d-warn); } .dash__dot--alarm { background: var(--d-alarm); }
.dash__dot--off { background: var(--d-off); } .dash__dot--cleared { background: transparent; box-shadow: inset 0 0 0 2px var(--d-off); }

/* detail */
.dash__detail { margin-bottom: 12px; }
.dash__ph--detail p { color: var(--d-mute); font-size: 12px; margin-top: 2px; }
.dash__badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.dash__badge--ok { background: rgba(52, 211, 153, .15); color: var(--d-ok); }
.dash__badge--warn { background: rgba(251, 191, 36, .15); color: var(--d-warn); }
.dash__badge--alarm { background: rgba(248, 113, 113, .16); color: var(--d-alarm); }
.dash__badge--off { background: rgba(124, 139, 160, .18); color: #C3CDD9; }
.dash__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.dash__card { background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 10px; padding: 12px; border-left: 3px solid var(--d-ok); }
.dash__card span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--d-mute); }
.dash__card strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.55rem; line-height: 1.15; margin: 4px 0; font-variant-numeric: tabular-nums; }
.dash__card strong small { font-size: .8rem; color: var(--d-mute); font-weight: 500; }
.dash__card strong.is-tick { animation: dash-tick .6s; }
@keyframes dash-tick { 0% { color: var(--d-accent); } 100% { color: var(--d-text); } }
.dash__state { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.dash__card p { font-size: 12px; color: var(--d-mute); margin-top: 4px; }
.dash__card--ok .dash__state { color: var(--d-ok); }
.dash__card--warn { border-left-color: var(--d-warn); } .dash__card--warn .dash__state { color: var(--d-warn); }
.dash__card--alarm { border-left-color: var(--d-alarm); } .dash__card--alarm .dash__state { color: var(--d-alarm); }
.dash__card--off { border-left-color: var(--d-off); } .dash__card--off .dash__state { color: #C3CDD9; }
.dash__chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dash__chart-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash__cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d-mute); }
.dash select, .dash input[type="number"] { background: var(--d-bg); color: var(--d-text); border: 1px solid var(--d-line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
.dash__chart { position: relative; width: 100%; touch-action: pan-y; }
.dash__chart svg { display: block; width: 100%; height: auto; }
.dash__band { fill: rgba(52, 211, 153, .07); }
.dash__lim { stroke: rgba(52, 211, 153, .55); stroke-dasharray: 4 4; stroke-width: 1; }
.dash__grid { stroke: #1F3550; stroke-width: 1; }
.dash__axis { fill: #8095AD; font-size: 11px; font-variant-numeric: tabular-nums; }
.dash__area { fill: rgba(240, 122, 46, .07); }
.dash__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash__line--a { stroke: var(--d-accent); } .dash__line--b { stroke: var(--d-cmp); stroke-dasharray: 5 3; }
.dash__gap { fill: rgba(124, 139, 160, .1); }
.dash__cross { stroke: #5B7699; stroke-width: 1; }
.dash__hover { stroke: var(--d-bg); stroke-width: 2; } .dash__hover.a { fill: var(--d-accent); } .dash__hover.b { fill: var(--d-cmp); }
.dash__tip { position: absolute; top: 8px; background: #081523; border: 1px solid var(--d-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; display: grid; gap: 3px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.dash__tip b { font-weight: 600; color: var(--d-mute); }
.dash__tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dash__tip i.a { background: var(--d-accent); } .dash__tip i.b { background: var(--d-cmp); }
.dash__stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: var(--d-mute); }
.dash__stats b { color: var(--d-text); font-family: 'Space Grotesk', sans-serif; font-size: 14px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dash__stats-u { margin-left: auto; }

/* alarms */
.dash__alarms { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; display: grid; gap: 6px; }
.dash__alarm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 8px; padding: 9px 10px; }
.dash__alarm p { font-size: 13px; color: var(--d-text); } .dash__alarm small { color: var(--d-mute); font-size: 11px; }
.dash__alarm--alarm { border-left: 3px solid var(--d-alarm); } .dash__alarm--warn { border-left: 3px solid var(--d-warn); }
.dash__alarm--cleared p { color: var(--d-mute); }
.dash__alarm-dev { background: none; border: 0; padding: 0; font-weight: 700; color: var(--d-text); text-decoration: underline; text-decoration-color: #35557E; text-underline-offset: 2px; }
.dash__ack { background: var(--d-accent); color: #0B1B2E !important; border: 0; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.dash__acked { font-size: 12px; color: var(--d-ok); font-weight: 600; white-space: nowrap; }
.dash__cleared { font-size: 12px; color: var(--d-mute); }
.dash__none { color: var(--d-mute); font-size: 13px; padding: 10px 0; }

/* limits */
.dash__limits { display: grid; gap: 10px; }
.dash__lim-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; font-size: 13px; }
.dash__lim-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--d-mute); font-size: 12px; }
.dash__lim-row input { width: 68px; }
.dash__lim-row em { font-style: normal; color: var(--d-mute); font-size: 12px; min-width: 36px; }
.dash__hint { font-size: 12px; color: var(--d-mute); }
.dash__link { background: none; border: 0; color: var(--d-accent) !important; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dash__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line); }
.dash__btn { background: #C2410C; color: #fff !important; border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 13px; }
.dash__btn:hover { background: #9A3412; }
.dash__btn--ghost { background: transparent; border: 1px solid var(--d-line); }
.dash__btn--ghost:hover { background: var(--d-panel-2); }
.dash-note { font-size: .85rem; color: var(--text-3); margin-top: 10px; }

/* report (only visible when printing) */
.dash-report { display: none; }
@media print {
  body.printing-dash * { visibility: hidden !important; }
  body.printing-dash .dash-report, body.printing-dash .dash-report * { visibility: visible !important; }
  body.printing-dash .dash-report { display: block !important; position: absolute; left: 0; top: 0; width: 100%; color: #000; font: 11pt/1.4 Inter, Arial, sans-serif; }
  .dash-report h1 { font-size: 16pt; margin: 0 0 4pt; } .dash-report h2 { font-size: 12pt; margin: 14pt 0 6pt; }
  .dash-report table { border-collapse: collapse; width: 100%; } .dash-report th, .dash-report td { border: 1px solid #bbb; padding: 4pt 6pt; text-align: left; }
  .dash-report svg { width: 100%; height: auto; background: #0B1B2E; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* small screens */
@media (max-width: 980px) {
  .dash__row--map, .dash__row--bottom { grid-template-columns: 1fr; }
  .dash__kpis, .dash__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .dash { padding: 12px; margin-left: -4px; margin-right: -4px; }
  .dash__kpi strong { font-size: 1.3rem; } .dash__card strong { font-size: 1.25rem; }
  .dash__lim-row { grid-template-columns: 1fr 1fr; } .dash__lim-row > span { grid-column: 1 / -1; } .dash__lim-row em { display: none; }
  .dash__stats-u { margin-left: 0; }
  .dash__alarm { grid-template-columns: auto 1fr; } .dash__alarm > :last-child { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .dash__live-dot, .dash__pin-ring { animation: none !important; }
}