/* ================================================
   ArgusOS — Floor View Styles
   2D stage, floor-grid card view, canvas wrapper
   ================================================ */

/* ===== 2D Stage (levende vloer) ===== */
.floor-stage-wrap { overflow: hidden; }
.floor-stage {
  position: relative; width: 100%; height: 460px; border-radius: 8px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(9,175,150,0.045) 0px, rgba(9,175,150,0.045) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(0deg, rgba(9,175,150,0.045) 0px, rgba(9,175,150,0.045) 1px, transparent 1px, transparent 48px),
    radial-gradient(600px 300px at 50% 100%, rgba(9,175,150,0.05), transparent),
    var(--bg-desk);
  border: 1px solid var(--border);
}

.zone {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-dim); font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em;
  pointer-events: none;
}
.zone .zone-icon {
  width: 34px; height: 34px; border-radius: 8px; border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center; background: rgba(9,175,150,0.04);
}
.zone .zone-icon svg { width: 16px; height: 16px; opacity: .55; }
.zone.desk-zone .zone-icon { width: 56px; height: 40px; border-radius: 6px; }

.sprite {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 70px; z-index: 3; cursor: pointer;
  transition-property: left, top; transition-timing-function: ease-in-out;
}
.sprite-avatar-wrap { position: relative; width: 44px; height: 44px; }
.sprite-avatar-wrap img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-elevated); display: block;
  animation: sprite-bob 2.4s ease-in-out infinite;
}
.sprite.walking .sprite-avatar-wrap img { animation: sprite-walk .5s ease-in-out infinite; }
.sprite.flip .sprite-avatar-wrap img { transform: scaleX(-1); }
.sprite-dot { position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-desk); z-index: 2; }
.sprite-dot.working { background: var(--teal); }
.sprite-dot.idle { background: var(--text-dim); }
.sprite-dot.blocked { background: var(--err); }
.sprite-shadow { width: 30px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.35); filter: blur(1px); margin-top: -2px; }
.sprite-label {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px;
  font-size: 9.5px; font-weight: 600; white-space: nowrap;
}
.sprite-bubble {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid rgba(239,91,91,0.4); color: var(--err);
  border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; animation: bubble-pulse 1.6s ease-in-out infinite;
}
.sprite.offline { opacity: .3; filter: grayscale(1); }

.floor-legend { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); font-family: var(--mono); }
.legend-swatch { width: 8px; height: 8px; border-radius: 50%; }

/* ===== Canvas 3D Isometric Room ===== */
.canvas-outer {
  overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 16px 0 16px; min-height: 480px;
}
.canvas-outer canvas {
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-desk);
  max-width: 100%;
  /* Canvas element sets its own width/height via JS for HiDPI; 
     CSS max-width ensures it doesn't overflow its container */
}
.canvas-note {
  margin-top: 14px; font-size: 10.5px; color: var(--text-dim); background: rgba(232,179,74,0.06);
  border: 1px solid rgba(232,179,74,0.25); border-radius: 8px; padding: 9px 12px; line-height: 1.6;
  max-width: 100%;
}
.canvas-note b { color: var(--warn); }