/* Annotations-specific CSS for Historical Document Viewer */

/* Annotation styles - Fixed scope to only apply within content areas */
.transcription-container .annotation,
.document-container .annotation {
    display: inline;
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 1px;
    cursor: help;
}

/* Named Entity Recognition (NER) */
.transcription-container .annotation.ner-person,
.document-container .annotation.ner-person {
    background-color: rgba(255, 170, 170, 0.3);
    border-bottom: 1px solid rgba(255, 0, 0, 0.5);
}

.transcription-container .annotation.ner-location,
.document-container .annotation.ner-location {
    background-color: rgba(170, 255, 170, 0.3);
    border-bottom: 1px solid rgba(0, 128, 0, 0.5);
}

.transcription-container .annotation.ner-organization,
.document-container .annotation.ner-organization {
    background-color: rgba(170, 170, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 255, 0.5);
}

.transcription-container .annotation.ner-date,
.document-container .annotation.ner-date {
    background-color: rgba(255, 255, 170, 0.3);
    border-bottom: 1px solid rgba(128, 128, 0, 0.5);
}

.transcription-container .annotation.ner-misc,
.document-container .annotation.ner-misc {
    background-color: rgba(170, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 128, 128, 0.5);
}

/* Part-of-speech (POS) tagging */
.transcription-container .annotation.pos-noun,
.document-container .annotation.pos-noun {
    background-color: rgba(230, 190, 255, 0.3);
    border-bottom: 1px dashed rgba(128, 0, 128, 0.5);
}

.transcription-container .annotation.pos-verb,
.document-container .annotation.pos-verb {
    background-color: rgba(255, 200, 170, 0.3);
    border-bottom: 1px dashed rgba(255, 128, 0, 0.5);
}

.transcription-container .annotation.pos-adj,
.document-container .annotation.pos-adj {
    background-color: rgba(190, 230, 255, 0.3);
    border-bottom: 1px dashed rgba(0, 128, 255, 0.5);
}

.transcription-container .annotation.pos-adv,
.document-container .annotation.pos-adv {
    background-color: rgba(220, 255, 220, 0.3);
    border-bottom: 1px dashed rgba(0, 180, 0, 0.5);
}

.transcription-container .annotation.pos-other,
.document-container .annotation.pos-other {
    background-color: rgba(220, 220, 220, 0.3);
    border-bottom: 1px dashed rgba(100, 100, 100, 0.5);
}

/* Morphological analysis */
.transcription-container .annotation.morph,
.document-container .annotation.morph {
    position: relative;
    text-decoration: underline dotted rgba(0, 0, 0, 0.3);
}

/* Annotation tooltip */
.annotation-tooltip {
    position: absolute;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    z-index: 100;
    font-size: 0.875rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.annotation-tooltip-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
    color: var(--accent-color);
}

.annotation-tooltip-content {
    color: var(--primary-text);
}

.annotation-tooltip-category {
    font-size: 0.75rem;
    color: var(--secondary-text);
    margin-bottom: 0.5rem;
    font-style: italic;
}

.annotation-tooltip-definition {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* Search result highlighting */
.search-highlight {
    background-color: rgba(255, 215, 0, 0.4);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 180, 0, 0.5);
    padding: 0 1px;
}

.search-highlight.active {
    background-color: rgba(255, 165, 0, 0.6);
    box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.8);
    font-weight: bold;
}

/* Annotation legend */
.annotation-legend {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.8rem;
    max-width: 250px;
    z-index: 30;
    display: none;
    animation: fade-in 0.3s ease;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.annotation-legend.visible {
    display: block;
}

.legend-title {
    font-weight: bold;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    color: var(--accent-color);
}

.legend-subtitle {
    font-weight: bold;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.85rem;
}

.legend-section {
    margin-bottom: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.legend-color {
    width: 14px;
    height: 14px;
    margin-right: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

/* Color for legend samples */
.legend-color.ner-person { background-color: rgba(255, 170, 170, 0.4); }
.legend-color.ner-location { background-color: rgba(170, 255, 170, 0.4); }
.legend-color.ner-organization { background-color: rgba(170, 170, 255, 0.4); }
.legend-color.ner-date { background-color: rgba(255, 255, 170, 0.4); }
.legend-color.ner-misc { background-color: rgba(170, 255, 255, 0.4); }
.legend-color.pos-noun { background-color: rgba(230, 190, 255, 0.4); }
.legend-color.pos-verb { background-color: rgba(255, 200, 170, 0.4); }
.legend-color.pos-adj { background-color: rgba(190, 230, 255, 0.4); }
.legend-color.pos-adv { background-color: rgba(220, 255, 220, 0.4); }
.legend-color.pos-other { background-color: rgba(220, 220, 220, 0.4); }
.legend-color.morph { background-color: rgba(240, 240, 240, 0.4); }

.legend-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--secondary-text);
    padding: 0.25rem;
    line-height: 1;
}

.legend-close:hover {
    color: var(--primary-text);
}

/* Annotation toggle classes */
.annotations-hidden .annotation {
    background-color: transparent !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* For highlighting line in transcription */
.transcription-line:has(.search-highlight) {
    background-color: rgba(255, 248, 225, 0.5);
}

/* Prevent annotation styles from affecting sidebar elements */
.tool-panel *,
nav *,
.nav-left *,
.nav-right *,
#annotation-toggle,
.annotation-types,
.sidebar *,
[class*="sidebar"] *,
.tool-panel [class*="annotation"],
.tool-panel [class*="ner-"],
.tool-panel [class*="pos-"],
.tool-panel [class*="morph"] {
    background-color: transparent !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* More specific override for the sidebar text */
body > *:not(.transcription-container):not(.document-container) .annotation,
body > *:not(.transcription-container):not(.document-container) [class*="ner-"],
body > *:not(.transcription-container):not(.document-container) [class*="pos-"],
body > *:not(.transcription-container):not(.document-container) [class*="morph"] {
    background-color: transparent !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Fix for annotation dialog */
.annotation-types *,
.annotation-filters *,
.filter-item *,
.legend-section * {
    background-color: transparent !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    .annotation-tooltip {
        max-width: 90%;
        font-size: 0.8rem;
    }
    
    .annotation-legend {
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
    }
}