/* ------------------------------------------ */
/*         DISTANCE VISUALIZATION             */
/*   Containers, Drawings, Labels and Colors  */
/* ------------------------------------------ */

/* ------------------------------------------ */
/*         HORIZONTAL HUMAN CONTAINER         */
/* ------------------------------------------ */
/* Horizontal container with auto spacing */
.human_container_horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    left: 0;
    right: 0;
    justify-content: flex-start;
    gap: 0.12vw; /* Increased from 0.0781vw for better spacing with larger dots */
    /* Container width */
    width: 90%;
    /* Remove scrolling behavior */
    overflow-x: visible;
    /* Visual enhancement */
    transition: all 0.2s ease;
    /* Increased padding to accommodate labels */
    padding-top: 12.8472vh; /* 185px / 1440 * 100 */
}

/* ------------------------------------------ */
/*         VERTICAL HUMAN CONTAINER           */
/* ------------------------------------------ */
/* Vertical container with auto spacing */
.human_container_vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed; /* Changed to fixed positioning */
    gap: 0.3125vw; /* 8px / 2560 * 100 */
    pointer-events: none;
    /* Container dimensions */
    height: 95vh;
    width: 75vw; /* 1920px / 2560 * 100 */
    left: 15%; /* Position the container on the left */
    top: 5%; /* Ensure it's positioned from the top */
    /* Visual enhancement */
    transition: all 0.2s ease;
    /* Add horizontal padding for labels */
    padding-left: 0.2344vw; /* 6px / 2560 * 100 */
    padding-right: 0;
}

/* ------------------------------------------ */
/*                  HUMAN                    */
/* ------------------------------------------ */
/* Human wrapper with improved spacing */
.human-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Add fixed margins to increase space between dots */
    margin: 0 0.0391vw; /* 1px / 2560 * 100 */
    /* Minimum width with spacing to prevent collapse */
    min-width: 0.3516vw; /* 9px / 2560 * 100 */
}

/* Base human styling */
.human {
    position: relative;
    width: 0.4vw; /* 10px / 2560 * 100 */
    height: 0.35vh; /* 5px / 1440 * 100 */
}

/* Horizontal specific styling */
.human_container_horizontal .human {
    /* Size of human figures (increased by 1.5x) */
    width: 0.3vw; /* Original 0.2vw * 1.5 */
    height: 1.4vh; /* Original 1vh * 1.5 (assuming typo in original was 1vh) */
    margin: 0 0.06vw; /* Increased from 0.04vw for better spacing */
}

/* Horizontal specific head styling (increased by 1.5x) */
.human_container_horizontal .human::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #d1cdcd;
    border: 0.0391vw solid black; /* 1px / 2560 * 100 */
    width: 0.7032vw; /* Original 0.4688vw * 1.5 */
    height: 1.25vh; /* Original 0.8333vh * 1.5 */
    border-radius: 50%;
    top: 0;
}

/* Horizontal wrapper min-width adjustment */
.human_container_horizontal .human-wrapper {
    min-width: 0.5274vw; /* Original 0.3516vw * 1.5 */
}

/* Silhouette parts */
/* Head */
.human::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #d1cdcd;
    border: 0.0391vw solid black; /* 1px / 2560 * 100 */
    width: 0.4688vw; /* 12px / 2560 * 100 */
    height: 0.8333vh; /* 12px / 1440 * 100 */
    border-radius: 50%;
    top: 0;
}

/* Label styling for human dots */
.human-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9722vh; /* 14px / 1440 * 100 */
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 0.1389vh; /* 2px / 1440 * 100 */
    padding: 0.1389vh 0.1563vw; /* 2px, 4px / 2560 * 100 */
    border-radius: 0.2344vw; /* 4px / 2560 * 100 */
    z-index: 12;
}

/* Vertical human label styling */
.human_container_vertical .human-label{
    position: absolute;
    left: -2vw; /* -50px / label posiitoning */
    /* Override the default bottom positioning */
    bottom: auto;
    /* Center vertically relative to the dot */
    top: 150%;
    transform: translateY(-50%); /* Perfect vertical centering */
    font-size: 0.9722vh; /* 14px / 1440 * 100 */
    font-weight: bold;
    /* Remove bottom margin from horizontal layout */
    margin-bottom: 0;
    padding: 0.0000vh 0.1563vw; /* 0, 2px / 2560 * 100 */
    border-radius: 0.2344vw; /* 4px / 2560 * 100 */
    z-index: 12;
}


/* Horizontal specific styling */
.human_container_vertical .human {
    /* Size of human figures */
    width: calc(0.0781vw*1.1); /* 2px / 2560 * 100 */
    height: calc(0.2875vh*1.1); /* 4.14px / 1440 * 100 */
    margin: 0 0.0391vw; /* 1px / 2560 * 100 */
}

/* Silhouette parts */
.human_container_vertical .human::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #d1cdcd;
}

/* Legend container styling - adjusted positioning */
.legend-container {
    position: absolute;
    top: 5.903vh; /* 85px / 1440 * 100 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 1.5625vw; /* 40px / 2560 * 100 */
    width: auto;
    min-width: 15.625vw; /* 400px / 2560 * 100 */
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2); /* Slight background for visibility */
    padding: 0.5556vh 0.6250vw; /* 8px, 16px / 2560 * 100 */
    border-radius: 0.2344vw; /* 6px / 2560 * 100 */
    /* Initially hidden */
    display: none;
}

/* Individual legend item */
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3906vw; /* 10px / 2560 * 100 */
    font-size: 1.2500vh; /* 18px / 1440 * 100 */
    font-weight: bold;
    color: white;
}

/* Adjust human figures in the legend to be more visible */
.legend-item .human {
    width: 0.1953vw; /* 5px / 2560 * 100 */
    height: 1.0417vh; /* 15px / 1440 * 100 */
    margin: 0;
    position: relative;
    /* Apply the same styling as in the human container */
}

/* Make sure the legend figures have the same head style */
.legend-item .human::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0.3906vw; /* 10px / 2560 * 100 */
    height: 0.6944vh; /* 10px / 1440 * 100 */
    border-radius: 50%;
    top: 0;
}

/* Ensure the color classes work the same way in the legend */
.legend-item .human.color_purple::before {
    background: #9370DB !important;
    box-shadow: 0 0 0.3906vw #9370DB; /* 10px / 2560 * 100 */
}

.legend-item .human.color_yellow::before {
    background: #FFFF00 !important;
    box-shadow: 0 0 0.3906vw #FFFF00; /* 10px / 2560 * 100 */
}

/* --------------------------------------- */
/*                  COLORS                 */
/* --------------------------------------- */
/* For the leftmost silhouette (you) */
.color_purple::before,
.color_purple::after {
    background: #9370DB !important;
    box-shadow: 0 0 0.5859vw #9059fc; /* 15px / 2560 * 100 */
}

/* Current trial silhouette (person at distance X) */
.color_yellow::before,
.color_yellow::after {
    background: #FFFF00 !important;
    box-shadow: 0 0 0.3906vw #FFFF00; /* 10px / 2560 * 100 */
}

/* Purple label text */
.purple-label {
    color: #9370DB !important;
    text-shadow: 
        0 0 0.0781vw #000, /* 2px / 2560 * 100 */
        0 0 0.1172vw #000, /* 3px / 2560 * 100 */
        0 0 0.1563vw #000; /* 4px / 2560 * 100 */
}

/* Yellow label text */
.yellow-label {
    color: #FFFF00 !important;
    text-shadow: 
        0 0 0.0781vw #000, /* 2px / 2560 * 100 */
        0 0 0.1172vw #000, /* 3px / 2560 * 100 */
        0 0 0.1563vw #000; /* 4px / 2560 * 100 */
}