/* --- About Us Page - Matter.js Styles --- */
body {
    background-color: #0a0a1a; /* Dark background, same as footer */
}

#matter-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Give it a fixed height */
    overflow: hidden;
    background-color: #1e1e30; /* Slightly lighter dark color for physics area */
    background-image: radial-gradient(#444 1px, transparent 1px); /* Lighter dots for contrast */
    background-size: 20px 20px; /* Size of each grid cell */
    z-index: 0; /* Ensure canvas is behind overlays */
}

#employee-names-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow mouse events to pass through to Matter.js canvas */
    z-index: 1; /* Ensure names are above canvas */
}

.employee-name-overlay {
    position: absolute;
    color: white;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translate(-50%, -50%); /* Center the text div on its absolute position */
    pointer-events: none; /* Do not block mouse events for Matter.js */
}

#employee-popup {
    position: absolute; /* Changed to absolute to be relative to matter-container */
    display: none;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    pointer-events: none; /* Allows mouse events to pass through */
    z-index: 2000;
    /* Default desktop positioning: slightly to the right of cursor point */
    transform: translate(15px, 0); 
    transform-origin: top left; /* Ensure transforms are relative to top-left */
    white-space: nowrap; /* Prevent text wrapping inside popup */
}

/* Mobile specific positioning for popup */
#employee-popup.popup-mobile-above {
    /* Center horizontally (-50% of its own width), move up by 100% of its own height */
    transform: translate(-50%, -100%); 
}