/* app/static/css/ui/tooltips.css */
/* Стили для всплывающих подсказок */

/* ==========================================================================
   1. БАЗОВЫЕ СТИЛИ TOOLTIP
   ========================================================================== */

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

.app-tooltip {
    position: absolute;
    z-index: var(--app-z-tooltip);
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    background-color: var(--app-color-text-primary);
    color: var(--app-color-bg-body);
    font-size: var(--app-font-size-xs);
    line-height: var(--app-line-height-tight);
    border-radius: var(--app-radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--app-transition-fast) ease;
    box-shadow: var(--app-shadow-md);
    max-width: 200px;
    text-align: center;
    font-weight: 500;
}

/* Стрелка tooltip */
.app-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* ==========================================================================
   2. ПОЗИЦИОНИРОВАНИЕ TOOLTIP
   ========================================================================== */

/* Top */
.app-tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    margin-bottom: 8px;
}

.app-tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--app-color-text-primary);
}

/* Bottom */
.app-tooltip-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    margin-top: 8px;
}

.app-tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--app-color-text-primary);
}

/* Left */
.app-tooltip-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
    margin-right: 8px;
}

.app-tooltip-left::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--app-color-text-primary);
}

/* Right */
.app-tooltip-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    margin-left: 8px;
}

.app-tooltip-right::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--app-color-text-primary);
}

/* ==========================================================================
   3. ПОКАЗ/СКРЫТИЕ TOOLTIP
   ========================================================================== */

[data-tooltip]:hover .app-tooltip,
[data-tooltip]:focus .app-tooltip {
    opacity: 1;
}

/* Анимация появления */
.app-tooltip-animated {
    animation: app-tooltip-fade-in var(--app-transition-fast) ease-out;
}

@keyframes app-tooltip-fade-in {
    from { opacity: 0; transform: translateY(-5px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

/* ==========================================================================
   4. ТИПЫ TOOLTIP
   ========================================================================== */

/* Primary */
.app-tooltip-primary {
    background-color: var(--app-color-primary);
    color: white;
}
.app-tooltip-primary::before { border-top-color: var(--app-color-primary); }
.app-tooltip-primary.app-tooltip-bottom::before { border-bottom-color: var(--app-color-primary); }
.app-tooltip-primary.app-tooltip-left::before { border-left-color: var(--app-color-primary); }
.app-tooltip-primary.app-tooltip-right::before { border-right-color: var(--app-color-primary); }

/* Success */
.app-tooltip-success {
    background-color: var(--app-color-success);
    color: white;
}
.app-tooltip-success::before { border-top-color: var(--app-color-success); }
.app-tooltip-success.app-tooltip-bottom::before { border-bottom-color: var(--app-color-success); }
.app-tooltip-success.app-tooltip-left::before { border-left-color: var(--app-color-success); }
.app-tooltip-success.app-tooltip-right::before { border-right-color: var(--app-color-success); }

/* Danger */
.app-tooltip-danger {
    background-color: var(--app-color-danger);
    color: white;
}
.app-tooltip-danger::before { border-top-color: var(--app-color-danger); }
.app-tooltip-danger.app-tooltip-bottom::before { border-bottom-color: var(--app-color-danger); }
.app-tooltip-danger.app-tooltip-left::before { border-left-color: var(--app-color-danger); }
.app-tooltip-danger.app-tooltip-right::before { border-right-color: var(--app-color-danger); }

/* Warning */
.app-tooltip-warning {
    background-color: var(--app-color-warning);
    color: var(--app-color-text-primary);
}
.app-tooltip-warning::before { border-top-color: var(--app-color-warning); }
.app-tooltip-warning.app-tooltip-bottom::before { border-bottom-color: var(--app-color-warning); }
.app-tooltip-warning.app-tooltip-left::before { border-left-color: var(--app-color-warning); }
.app-tooltip-warning.app-tooltip-right::before { border-right-color: var(--app-color-warning); }

/* Info */
.app-tooltip-info {
    background-color: var(--app-color-info);
    color: white;
}
.app-tooltip-info::before { border-top-color: var(--app-color-info); }
.app-tooltip-info.app-tooltip-bottom::before { border-bottom-color: var(--app-color-info); }
.app-tooltip-info.app-tooltip-left::before { border-left-color: var(--app-color-info); }
.app-tooltip-info.app-tooltip-right::before { border-right-color: var(--app-color-info); }

/* ==========================================================================
   5. РАЗМЕРЫ TOOLTIP
   ========================================================================== */

/* Малый */
.app-tooltip-sm {
    padding: 2px 6px;
    font-size: 0.65rem;
}
.app-tooltip-sm::before { border-width: 4px; }

/* Большой */
.app-tooltip-lg {
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    font-size: var(--app-font-size-sm);
    white-space: normal;
    max-width: 250px;
}
.app-tooltip-lg::before { border-width: 6px; }

/* ==========================================================================
   6. СПЕЦИАЛЬНЫЕ ВАРИАНТЫ
   ========================================================================== */

/* Tooltip с многострочным текстом */
.app-tooltip-multiline {
    white-space: normal;
    text-align: left;
    max-width: 300px;
    word-wrap: break-word;
}

/* Tooltip с иконкой */
.app-tooltip-with-icon {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-xs);
}
.app-tooltip-with-icon .app-tooltip-icon {
    font-size: var(--app-font-size-xs);
    flex-shrink: 0;
}

/* Tooltip без стрелки */
.app-tooltip-no-arrow::before {
    display: none;
}

/* Tooltip с обводкой */
.app-tooltip-outline {
    background-color: var(--app-color-bg-body);
    color: var(--app-color-text-primary);
    border: 1px solid var(--app-color-border);
    box-shadow: var(--app-shadow-sm);
}
.app-tooltip-outline::before { border-top-color: var(--app-color-border); }
.app-tooltip-outline.app-tooltip-bottom::before { border-bottom-color: var(--app-color-border); }
.app-tooltip-outline.app-tooltip-left::before { border-left-color: var(--app-color-border); }
.app-tooltip-outline.app-tooltip-right::before { border-right-color: var(--app-color-border); }

/* ==========================================================================
   7. ТЕМНАЯ ТЕМА
   ========================================================================== */

[data-theme="dark"] .app-tooltip {
    background-color: var(--app-color-bg-tertiary);
    color: var(--app-color-text-primary);
    border: 1px solid var(--app-color-border);
}
[data-theme="dark"] .app-tooltip::before { border-top-color: var(--app-color-border); }
[data-theme="dark"] .app-tooltip-bottom::before { border-bottom-color: var(--app-color-border); }
[data-theme="dark"] .app-tooltip-left::before { border-left-color: var(--app-color-border); }
[data-theme="dark"] .app-tooltip-right::before { border-right-color: var(--app-color-border); }

[data-theme="dark"] .app-tooltip-primary {
    background-color: var(--app-color-primary);
    color: white;
    border: none;
}
[data-theme="dark"] .app-tooltip-primary::before { border-top-color: var(--app-color-primary); }

[data-theme="dark"] .app-tooltip-outline {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border);
}

/* ==========================================================================
   8. АДАПТИВНОСТЬ
   ========================================================================== */

@media (max-width: 768px) {
    .app-tooltip-lg {
        max-width: 200px;
        font-size: var(--app-font-size-xs);
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
    }

    .app-tooltip-multiline {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .app-tooltip {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .app-tooltip-lg {
        max-width: 180px;
    }

    .app-tooltip-multiline {
        max-width: 200px;
    }
}

/* ==========================================================================
   9. УТИЛИТЫ ДЛЯ JS-КОНТРОЛЯ
   ========================================================================== */

/* Программное отображение */
.app-tooltip-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Задержка появления */
.app-tooltip-delayed {
    transition-delay: 300ms;
}

/* Постоянно видимый (для отладки) */
.app-tooltip-always-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}