/* ============================================================================
   MATCH HIGHLIGHTING STYLES
   ============================================================================
   
   Text reuse similarity highlighting and search result highlighting.
   
   Text Reuse Similarity Levels:
   - High: >0.9 similarity (deep red)
   - Medium: 0.8-0.9 similarity (red)
   - Low: 0.7-0.8 similarity (orange)
   - Minimal: <0.7 similarity (yellow)
   
   Search Highlighting:
   - Yellow highlights for search query matches
   - Can overlap with text reuse highlights
   
   ============================================================================ */

/* ============================================================================
   TEXT REUSE HIGHLIGHTING
   ============================================================================ */

/* Base highlight styles - clickable regions showing text reuse */
.highlight {
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 -2px;
    transition: all 0.2s ease;
    position: relative;
}

/* Density-coloured reuse spans emitted by highlight_processor.rs. These are
   clickable (the page delegates clicks from .page-text) but previously showed
   a plain text cursor, so the core "click coloured text to see who quotes it"
   interaction had no affordance at all. */
.highlight-match {
    cursor: pointer;
}

/* A faint underline on hover confirms the span is interactive without
   disturbing the Arabic baseline or competing with the density colour. */
.highlight-match:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .highlight { transition: none; }
}

/* Similarity levels */
.highlight-high {
    background-color: var(--color-highlight-high);
    /* Deep red for high similarity (>0.9) */
}

.highlight-medium {
    background-color: var(--color-highlight-medium);
    /* Red for medium similarity (0.8-0.9) */
}

.highlight-low {
    background-color: var(--color-highlight-low);
    /* Orange for low similarity (0.7-0.8) */
}

.highlight-minimal {
    background-color: var(--color-highlight-minimal);
    /* Yellow for minimal similarity (<0.7) */
}

/* Hover effect for all highlights */
.highlight:hover {
    filter: brightness(1.15);
    transform: scale(1.01);
    z-index: 10;
}


/* ============================================================================
   SEARCH QUERY HIGHLIGHTING
   ============================================================================ */

/* Search highlight only (when no text reuse matches exist) */
.search-highlight-only {
    background: var(--color-search-highlight);
    border-bottom: 3px solid var(--color-search-border);
    padding: 2px 4px;
    border-radius: 3px;
    position: relative;
}

/* Search indicator icon (visual marker for search matches) */
.search-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-search-border);
    border-radius: 50%;
    padding: 2px;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Standalone search highlight (when no text reuse matches) */
.search-highlight-standalone {
    background: var(--color-search-highlight) !important;
    border: 2px solid var(--color-search-border);
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: var(--shadow-search);
    animation: pulse-highlight 2s ease-in-out infinite;
}

/* Search highlight overlapping with text reuse match */
.highlight.search-highlight {
    background: linear-gradient(to bottom, var(--color-search-highlight) 0%, var(--color-search-highlight) 70%, transparent 100%) !important;
    border: 2px solid var(--color-search-border) !important;
    box-shadow: var(--shadow-search-strong) !important;
}


/* ============================================================================
   SEARCH TERM HIGHLIGHTING (Individual Terms)
   ============================================================================
   Light blue background for individual search term occurrences.
   These highlights appear when navigating from search results to show
   where the searched terms appear in the document text.
   ============================================================================ */

/* Individual search term highlight */
.highlight-search-term {
    background-color: rgba(173, 216, 230, 0.6);  /* Light blue */
    border-radius: 2px;
    padding: 0 1px;
}

/* Search term highlight when overlapping with text reuse match */
/* Match text color takes precedence, term background shows beneath */
.highlight-search-term.highlight-match {
    /* Use underline instead of background when text has match coloring */
    text-decoration: underline;
    text-decoration-color: rgba(173, 216, 230, 0.8);
    text-decoration-thickness: 2px;
}


/* ============================================================================
   KEYBOARD NAVIGATION FOCUS RING
   ============================================================================
   Visual indicator for Ctrl+Shift+Arrow match span jumping.
   ============================================================================ */

.highlight-match.match-focused {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 2px);
}


/* ============================================================================
   CHUNK BOUNDARY HIGHLIGHTING (Suggestions Panel)
   ============================================================================
   Dashed border overlay showing the selected chunk region when the
   Suggestions panel is active and a chunk has been resolved.
   ============================================================================ */

.highlight-chunk-boundary {
    border: 1.5px dashed rgba(var(--color-primary-rgb, 52, 152, 219), 0.5);
    background-color: rgba(var(--color-primary-rgb, 52, 152, 219), 0.06);
    border-radius: 2px;
    padding: 0 1px;
}