/* ===== CONTAINER ===== */
.image-container-with-numbers {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

/* ===== BASIS ITEM-OVERLAY STYLES ===== */
.item-number-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: rgba(108, 117, 125, 0.9); /* Grau Standard */
    color: white;
    border-radius: 4px; /* 🔄 GEÄNDERT: Von 50% zu 4px für abgerundete Ecken */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: default;
    z-index: 10;
    pointer-events: auto;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-width 0.2s ease;
}

/* ===== GRÖßENVARIANTEN ===== */
/* Kleinere Nummern in Thumbnails */
.image-container-with-numbers .item-number-overlay {
    width: 20px;
    height: 20px;
    font-size: 11px;
    border-width: 1.5px;
    border-radius: 3px; /* 🔄 GEÄNDERT: Proportional kleiner */
}

/* Größere Nummern in Zoom-Ansicht */
#zoom-container .item-number-overlay {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-width: 2px;
    border-radius: 4px; /* 🔄 GEÄNDERT: Moderate Größe */
    cursor: move;
}

/* ===== FARBCODIERUNG FÜR OBJEKTTYPEN ===== */
.item-number-overlay.item-furniture {
    background-color: rgba(220, 53, 69, 0.9); /* Rot - Möbeltransport */
}

.item-number-overlay.item-assembly {
    background-color: rgba(13, 110, 253, 0.9); /* Blau - Montage/Demontage */
}

.item-number-overlay.item-box {
    background-color: rgba(25, 135, 84, 0.9); /* Grün - Karton */
}

.item-number-overlay.item-fragile {
    background-color: rgba(255, 193, 7, 0.9); /* Gelb - Zerbrechlich */
    color: #000;
    border-color: #fff;
}

.item-number-overlay.item-other {
    background-color: rgba(108, 117, 125, 0.9); /* Grau - Sonstiges */
}

/* ===== INTERAKTIONSZUSTÄNDE ===== */
/* Standard Hover-Effekt */
.item-number-overlay:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 20;
    box-shadow: 0 0 12px rgba(0,0,0,0.7);
    border-width: 3px;
    border-color: white; /* Weiß bleiben */
}

/* Hover-Effekt von Tabelle auf Thumbnails */
.item-number-overlay.table-hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 20;
    box-shadow: 0 0 12px rgba(0,0,0,0.7);
    border-width: 3px;
    border-color: white; /* Weiß bleiben */
}

/* Aktiver Zustand (angeklickt) */
.item-number-overlay.active {
    border-color: #0d6efd;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.7);
}

/* Beim Draggen */
.item-number-overlay.dragging {
    z-index: 1000;
    cursor: move;
}

/* ===== ACTION BUTTONS ===== */
/* Delete Button */
.delete-dot {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .delete-dot:hover {
        background-color: #c82333;
        transform: scale(1.1);
    }

/* Edit Button */
.edit-dot {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 18px;
    height: 18px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .edit-dot:hover {
        background-color: #0056b3;
        transform: scale(1.1);
    }

/* Zeige beide Buttons wenn aktiv */
.item-number-overlay.active .delete-dot,
.item-number-overlay.active .edit-dot {
    display: flex;
}

/* ===== LABELS ===== */
/* Label mit Objektname */
.dot-label {
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    display: none;
    line-height: 1.5;
}

/* Label nur in Zoom-Ansicht anzeigen - mit Anpassungen */
#zoom-container .dot-label {
    display: block;
    font-size: 12px; /* Kleiner im Zoom */
    padding: 2px 6px; /* Kompakter */
    left: 120%; /* Etwas mehr Abstand vom Quadrat */
}

.item-number-overlay.cross-thumbnail-hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 20;
    box-shadow: 0 0 12px rgba(0,0,0,0.7);
    border-width: 3px;
    border-color: white; /* Weiß bleiben */
}