/* Annotation Styles for PressPective Viewer */

.annotation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
    overflow: hidden;
}

.annotation {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: pointer;
    z-index: 501;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    will-change: transform, left, top;
}

.annotation-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform; /* Performance hint */
}

/* Severity-based colors */
.annotation.info .annotation-marker { 
    background: #4a9eff;  /* Blue for informational */ 
}
.annotation.minor .annotation-marker { 
    background: #4acd4a;  /* Green for minor issues */
}
.annotation.major .annotation-marker { 
    background: #ffc107;  /* Yellow for major issues */
}
.annotation.critical .annotation-marker { 
    background: #ff4a4a;  /* Red for critical issues */
    animation: pulse 2s infinite;
}

/* Category icons */
.annotation-marker::after {
    content: '';
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0);  /* Make icons black for contrast */
}

.annotation.registration .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z'/%3E%3C/svg%3E");
}

.annotation.screening .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

.annotation.inkjet .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z'/%3E%3C/svg%3E");
}

.annotation.color .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

.annotation.banding .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3Cpath d='M7 7h10v2H7zM7 11h10v2H7zM7 15h10v2H7z'/%3E%3C/svg%3E");
}

.annotation.moiré .annotation-marker::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z'/%3E%3C/svg%3E");
}

/* Update hover state for better visibility */
.annotation-marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Smart positioning for labels */
.annotation-label {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 26, 26, 0.95);
    padding: 8px 12px;
    border-radius: 4px;
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 502;
    color: white;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.annotation:hover .annotation-label {
    opacity: 1;
    visibility: visible;
}

.annotation-title {
    color: #4a9eff;
    font-weight: 500;
    margin-bottom: 4px;
}

.annotation-description {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.annotation-controls {
    background: rgba(26, 26, 26, 0.95);
    padding: 16px;
    border-radius: 6px;
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1500;
    width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
    backdrop-filter: blur(4px);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group h4 {
    color: #4a9eff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.9;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

/* Severity-based colors for labels */
.filter-group label[data-severity="critical"] { color: #ff4a4a; }
.filter-group label[data-severity="major"] { color: #ffc107; }
.filter-group label[data-severity="minor"] { color: #4acd4a; }
.filter-group label[data-severity="info"] { color: #4a9eff; }

/* Category icons in labels */
.filter-group label[data-category]::after {
    content: '';
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.filter-group label:hover {
    background: rgba(255, 255, 255, 0.1);
}