/* ═══════════════════════════════════════════════════════════════════
   REGEXHELPER - TOOLTIPS.CSS
   Tooltips для distance селекторов с примерами
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TOOLTIP БАЗОВЫЕ СТИЛИ
   ───────────────────────────────────────────────────────────────── */

.tooltip {
    position: absolute;
    background: var(--color-bg-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-medium);
    padding: var(--spacing-m);
    font-size: 12px;
    color: var(--color-text-primary);
    max-width: 400px;
    z-index: calc(var(--z-dropdown) + 10);
    box-shadow: var(--shadow-large);
    pointer-events: none;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Tooltip стрелка */
.tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-primary);
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 25px;
    border: 5px solid transparent;
    border-bottom-color: var(--color-bg-card);
}

/* ─────────────────────────────────────────────────────────────────
   TOOLTIP ДЛЯ DISTANCE OPTIONS
   ───────────────────────────────────────────────────────────────── */

/* Distance dropdown с data-tooltip */
.distance-dropdown option[data-tooltip] {
    position: relative;
}

/* Tooltip появление */
@keyframes tooltipAppear {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tooltip {
    animation: tooltipAppear 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────
   TOOLTIP ПРИМЕРЫ (для distance)
   ───────────────────────────────────────────────────────────────── */

.tooltip-example {
    font-family: 'Fira Code', monospace;
    background: var(--color-bg-page);
    padding: 8px 12px;
    border-radius: var(--radius-small);
    margin: 8px 0;
    color: var(--color-success);
    border-left: 3px solid var(--color-primary);
}

.tooltip-title {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
    display: block;
}

.tooltip-description {
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   HOVER TOOLTIP (для кнопок, badge)
   ───────────────────────────────────────────────────────────────── */

[title]:hover::after {
    /* Браузерный tooltip стилизуется через title атрибут */
}

/* Custom tooltip wrapper */
.has-tooltip {
    position: relative;
}

.has-tooltip:hover .tooltip {
    display: block;
}