/* Highlight effects */
@keyframes highlightPulse {
    0% { background-color: rgba(254, 240, 138, 0.7); }
    50% { background-color: rgba(254, 240, 138, 1); }
    100% { background-color: rgba(254, 240, 138, 0.7); }
}

.highlight-pulse {
    animation: highlightPulse 0.8s ease-in-out 3;
    border-left: 4px solid #3b82f6; /* Blue indicator on the left */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

@keyframes diagramHighlightPulse {
    0% { border-color: rgba(59, 130, 246, 0.7); border-width: 2px; }
    50% { border-color: rgba(239, 68, 68, 1); border-width: 4px; }
    100% { border-color: rgba(59, 130, 246, 0.7); border-width: 2px; }
}

.diagram-highlight-pulse {
    animation: diagramHighlightPulse 0.8s ease-in-out 3;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
    z-index: 10;
}

/* Reference element styling */
[data-reference-coords] {
    cursor: pointer;
}

[data-reference-coords]:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* Modal styling */
#referenceModalContent, #priceModalContent {
    transition: opacity 0.2s ease-in-out;
}

#backToReference {
    transition: color 0.2s ease-in-out;
}

#backToReference:hover svg {
    transform: translateX(-2px);
}

#backToReference svg {
    transition: transform 0.2s ease-in-out;
}

.modal-price-button {
    white-space: nowrap;
    min-width: 50px;
}

#referenceModalContent {
    max-width: 100%;
}

#referenceModalContent .overflow-x-auto {
    max-width: 100%;
}

#referenceModalContent .table-fixed {
    table-layout: fixed;
}

#referenceModalContent .break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Table styling */
.references table {
    table-layout: fixed !important;
}

.references td:nth-child(2) {
    max-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.references td:last-child {
    width: 56px !important;
    min-width: 56px !important;
    white-space: nowrap;
}

.references td:first-child {
    max-width: 96px;
    white-space: nowrap;
}

/* Prevent phone number styling for part numbers */
.text-part-number {
    text-decoration: none !important;
    pointer-events: none;
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: none;
    font-family: monospace !important;
    letter-spacing: 0.05em;
}

td.font-mono {
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    #referenceModal .relative {
        width: 95%;
        max-width: 95%;
    }
    
    .references td, .references th {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    .references .overflow-hidden {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .price-button {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

@media (pointer: coarse) {
    [id^="touch-targets-"] div {
        min-width: 44px;
        min-height: 44px;
    }
}