/* ============================================================
   ECHO for Logistics — Interactive Digital Twin (/digital-twin)
   Uses the site's CSS variables from site.css (--ink, --echo-red, …).
   ============================================================ */

.twin-app {
  margin-top: 8px;
}

/* ---------- Toolbar ---------- */
.twin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.twin-layers { display: flex; flex-wrap: wrap; gap: 8px; }
.twin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.twin-toggle:hover { color: var(--muted); border-color: var(--echo-red); }
.twin-toggle.active { color: #fff; background: var(--ink-3); border-color: var(--echo-red); }
.twin-toggle .sw {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--dim); opacity: .55; transition: opacity .15s;
}
.twin-toggle.active .sw { opacity: 1; }
.sw-people { background: #d6e4ff; border-radius: 50%; }
.sw-forklift { background: var(--echo-red); }
.sw-temp { background: #7cd0ff; }
.sw-traffic { background: #ff9b3d; }
.sw-zones { background: #b98bff; }

.twin-counts {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--dim);
  font-family: var(--mono);
}
.twin-count strong { color: #fff; font-weight: 700; }
.twin-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.twin-count-alert.alerting strong { color: var(--echo-red-2); }
.twin-live {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 4px; padding: 3px 10px; border-radius: 999px;
  background: rgba(204,10,47,.12); border: 1px solid rgba(204,10,47,.3);
  color: #ffd7df; font-size: 11px; letter-spacing: .12em; font-weight: 700;
}
.twin-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--echo-red-2);
  box-shadow: 0 0 8px var(--echo-red-glow); animation: twinBlink 1.6s ease-in-out infinite;
}
@keyframes twinBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Stage ---------- */
.twin-stage {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 1536 / 1024;
}
.twin-underlay {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: brightness(.82) saturate(.92);
  pointer-events: none;
}
/* subtle dark scrim so bright markers/labels read on the photo */
.twin-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(8,8,10,.45));
}
#twin-svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }

/* faint grid backdrop on the svg via the building fill pattern is handled in markup;
   here we style the static floor elements */
.bldg { fill: rgba(255,255,255,.018); stroke: var(--border-strong); stroke-width: 1.5; }
.yard { fill: rgba(255,255,255,.01); stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 5; }
.racks rect { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.10); stroke-width: 1; }
.coldroom { fill: rgba(124,208,255,.07); stroke: rgba(124,208,255,.35); stroke-width: 1; }
.coldroom.freezer { fill: rgba(124,208,255,.12); }
.walkway { fill: rgba(124,252,155,.06); stroke: rgba(124,252,155,.28); stroke-width: 1; stroke-dasharray: 6 6; }
.docks rect { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.18); stroke-width: 1; }
.gate { fill: rgba(204,10,47,.12); stroke: rgba(204,10,47,.4); stroke-width: 1; }
.trailers rect { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.14); stroke-width: 1; }

.floor-label, .room-label, .aisle-label {
  fill: var(--dim); font-family: var(--mono); font-weight: 600;
  letter-spacing: .12em; pointer-events: none; text-transform: uppercase;
}
.floor-label { font-size: 12px; opacity: .6; }
.room-label { font-size: 11px; text-anchor: middle; fill: #aee0ff; opacity: .8; }
.aisle-label { font-size: 11px; text-anchor: middle; opacity: .5; }

/* ---------- Layers ---------- */
.twin-layer[hidden] { display: none; }

/* Zones */
.zone-rect { fill: rgba(185,139,255,.08); stroke: rgba(185,139,255,.5); stroke-width: 1.5; stroke-dasharray: 5 4; cursor: pointer; transition: fill .15s; }
.zone-rect:hover { fill: rgba(185,139,255,.16); }
.zone-label { fill: #e6dbff; font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: .08em; pointer-events: none; }

/* Traffic heatmap blobs */
.traffic-blob { pointer-events: none; }

/* Temperature pins */
.temp-pin { cursor: pointer; }
.temp-pin .temp-chip { fill: var(--ink-3); stroke: #7cd0ff; stroke-width: 1.5; }
.temp-pin .temp-text { fill: #cdeeff; font-family: var(--mono); font-size: 14px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.temp-pin.warn .temp-chip { stroke: #ff9b3d; }
.temp-pin.warn .temp-text { fill: #ffd9b0; }

/* Dock doors (static context layer) */
.dock-pin { cursor: pointer; }
.dock-pin .dock-chip { fill: var(--ink-3); stroke: #7cfc9b; stroke-width: 1.2; opacity: .9; }
.dock-pin .dock-text { fill: #bdfccf; font-family: var(--mono); font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.dock-pin:hover .dock-chip { stroke-width: 2.2; opacity: 1; }

/* Markers (people + forklifts) */
.marker { cursor: pointer; }
.marker .ring { fill: none; opacity: 0; }
.marker.people .dot { fill: #d6e4ff; stroke: #0a0a0a; stroke-width: 1; }
.marker.people .ring { stroke: #d6e4ff; }
.marker.forklift .body { fill: var(--echo-red); stroke: #0a0a0a; stroke-width: 1; }
.marker.forklift .ring { stroke: var(--echo-red-2); }
.marker.selected .dot, .marker.selected .body { stroke: #fff; stroke-width: 2; }
.marker .ring { animation: twinPulse 2.6s ease-out infinite; }
@keyframes twinPulse {
  0%   { r: 7; opacity: .55; stroke-width: 2; }
  100% { r: 26; opacity: 0; stroke-width: 0.5; }
}
/* alert state for a forklift involved in a proximity event */
.marker.alert .ring { stroke: var(--echo-red-2); animation-duration: .9s; }
.marker.alert .body { fill: var(--echo-red-2); }

/* ---------- Info panel ---------- */
.twin-info {
  position: absolute; top: 14px; right: 14px; bottom: 14px;
  width: min(320px, 78%);
  background: rgba(17,18,20,.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--echo-red);
  border-radius: 14px;
  padding: 22px;
  transform: translateX(calc(100% + 24px));
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.twin-info.open { transform: translateX(0); }
.twin-info-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--dim);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.twin-info-close:hover { color: #fff; }
.ti-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--echo-red-2); font-weight: 700; }
.ti-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 4px; color: #fff; }
.ti-sub { color: var(--dim); font-size: 13px; margin: 0 0 16px; }
.ti-rows { display: flex; flex-direction: column; gap: 0; }
.ti-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ti-row:last-child { border-bottom: 0; }
.ti-row .k { color: var(--dim); }
.ti-row .v { color: var(--muted); font-weight: 600; text-align: right; }
.ti-row .v.ok { color: #7cfc9b; }
.ti-row .v.warn { color: #ff9b3d; }
.ti-row .v.alert { color: var(--echo-red-2); }
.ti-badge { display:inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ti-badge.ok { background: rgba(124,252,155,.12); color: #7cfc9b; border:1px solid rgba(124,252,155,.3); }
.ti-badge.warn { background: rgba(255,155,61,.12); color: #ffb877; border:1px solid rgba(255,155,61,.3); }

/* ---------- Hint ---------- */
.twin-hint {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim); background: rgba(10,10,10,.6); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; pointer-events: none;
  transition: opacity .3s;
}
.twin-hint.hide { opacity: 0; }

/* ---------- Ticker ---------- */
.twin-ticker {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink-2);
  padding: 14px 18px;
}
.twin-ticker-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); font-weight: 700;
  margin-bottom: 10px;
}
.twin-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.twin-feed li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--muted);
  animation: twinFeedIn .35s ease;
}
.twin-feed li:last-child { border-bottom: 0; }
.twin-feed time { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.twin-feed .ev-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; align-self: center; background: var(--dim); }
.twin-feed .ev-info .ev-dot { background: #7cd0ff; }
.twin-feed .ev-move .ev-dot { background: #d6e4ff; }
.twin-feed .ev-ok   .ev-dot { background: #7cfc9b; }
.twin-feed .ev-alert .ev-dot { background: var(--echo-red-2); box-shadow: 0 0 8px var(--echo-red-glow); }
.twin-feed .ev-alert { color: #ffd7df; }
@keyframes twinFeedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .twin-counts { width: 100%; justify-content: flex-start; }
  .twin-info { width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .marker .ring { animation: none; opacity: 0; }
  .twin-live-dot { animation: none; }
}