dots-menu, dots-menu * { user-select: none }

dots-menu {
    position: absolute;
    display: block;
    width: auto; height: auto;
    --transition-duration: 0.4s;
    pointer-events: all;
}

dots-menu dots-menu-group {
    position: absolute;
    right: 0; bottom: 0;
    width: auto; height: auto;
}

dots-menu my-tooltip {
    bottom: 4.5rem; transform: translate(50%,0);
}

/* TODO: Charles Gratiot Jr. - dots-menu-group-title appears UNUSED. The actual group title
   is displayed by #group-title in index.html/index.css instead. Consider removing this element
   and its CSS, or migrating #group-title functionality here. */
dots-menu dots-menu-group dots-menu-group-title {
    position: absolute;
    right: 0; bottom: calc(100% - 0.8rem);
    width: auto; height: auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0;
    background-color: rgba(255,255,255,0.0);
    color: #ffffff;
    white-space: nowrap;
    transition: opacity 0.4s;
    opacity: 1;
}

dots-menu dots-menu-group.hidden dots-menu-group-title,
dots-menu dots-menu-group.remove dots-menu-group-title {
    opacity: 0;
}

dots-menu dots-menu-group dots-menu-group-children {
    position: relative;
    right: 0; bottom: 0;
    width: auto; height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem; /* Charles Gratiot Jr. - Legacy spacing, converted to rem for clamp scaling */
}


/* ===========================================
   DOT ITEM - Container
   =========================================== */

dots-menu dots-menu-item {
    position: relative;
    display: flex;
    width: 2.6rem; height: 2.6rem; /* Charles Gratiot Jr. - Size in rem for clamp scaling (26px at 10px root) */
    cursor: pointer;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0,0) scale(1);
    opacity: 1;
}

dots-menu dots-menu-item.hidden {
    transform: translate(0,+4rem) scale(0); /* Charles Gratiot Jr. - Animate in from bottom */
    opacity: 0;
}

dots-menu dots-menu-item.remove {
    transition-timing-function: ease-in;
    transform: translate(0,+10rem);
}

dots-menu dots-menu-item svg {
    pointer-events: none;
}


/* ===========================================
   DOT RING - Outer ring (takes group color)
   =========================================== */

dots-menu dots-menu-item .dot_ring {
    fill: var(--group-color, #ffffffa2); /* Charles Gratiot Jr. - Uses group color from database, falls back to semi-transparent white */
    transition: fill 0.3s;
}


/* ===========================================
   DOT STROKE - Inner ring (always white)
   =========================================== */

dots-menu dots-menu-item .dot_stroke {
    fill: rgba(255, 255, 255, 0.635); /* Charles Gratiot Jr. - Semi-transparent white from legacy */
    transition: fill 0.3s;
}


/* ===========================================
   DOT HOVER - Fill circle (hidden by default)
   =========================================== */

dots-menu dots-menu-item .dot_hover {
    fill: #ffffff;
    fill-opacity: 0;
    transform-origin: center;
    transform: scale(0);
    transition: fill-opacity 0.3s, transform 0.2s;
}

/* Active state - show fill */
dots-menu dots-menu-item.active .dot_hover {
    fill-opacity: 1;
    transform: scale(1);
}

/* Hover state (mouse devices only) */
@media (pointer: fine) {
    dots-menu dots-menu-item:hover .dot_hover {
        fill-opacity: 1;
        transform: scale(1);
    }
}


/* ===========================================
   DOT CHECK - Checkmark (hidden by default)
   =========================================== */

dots-menu dots-menu-item .dot_check {
    fill: #ffffff;
    stroke: #333333;
    stroke-width: 1px; /* Charles Gratiot Jr. - Fixed: was 0, now matches legacy */
    transform-origin: center;
    opacity: 0; /* Charles Gratiot Jr. - Use opacity instead of transform to prevent flash during parent scale animation */
    transition: fill 0.3s, stroke 0.3s, opacity 0.2s;
}

/* Visited state - show checkmark */
dots-menu dots-menu-item.visited .dot_check {
    opacity: 1;
}

/* Active checkmark colors - inverted */
dots-menu dots-menu-item.active .dot_check {
    fill: #000000;
    stroke: #ffffff;
}

/* Hover checkmark colors - inverted (mouse devices only) */
@media (pointer: fine) {
    dots-menu dots-menu-item:hover .dot_check {
        fill: #000000;
        stroke: #ffffff;
    }
}


/* ===========================================
   MOBILE - Vertical layout
   =========================================== */

@media screen and (max-width: 500px) {

    dots-menu dots-menu-group dots-menu-group-children {
        flex-direction: column;
        gap: 1rem; /* Charles Gratiot Jr. - Consistent spacing, converted to rem for clamp scaling */
    }

    dots-menu dots-menu-item.hidden {
        transform: translate(4rem,0) scale(0);
        opacity: 0;
    }

    dots-menu dots-menu-item.remove {
        transform: translate(+10rem,0);
    }
}