/**
 * Aggregate Preview Tooltip Styles
 *
 * @author Amit Haridas, ConcreteInfo
 */

.aggregate-tooltip {
    position: absolute;
    z-index: 10000;
    width: 320px;
    background-color: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

.aggregate-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.dark .aggregate-tooltip {
    background-color: var(--bg-secondary, #1f2937);
    border-color: var(--color-gray-700, #374151);
}

.aggregate-tooltip__image {
    height: 120px;
    overflow: hidden;
    border-radius: var(--radius-lg, 0.5rem) var(--radius-lg, 0.5rem) 0 0;
    background-color: var(--bg-tertiary, #f3f4f6);
}

.aggregate-tooltip__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aggregate-tooltip__content {
    padding: var(--spacing-4, 1rem);
}

.aggregate-tooltip__title {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #1f2937);
    margin-bottom: var(--spacing-1, 0.25rem);
}

.dark .aggregate-tooltip__title {
    color: var(--text-primary, #f9fafb);
}

.aggregate-tooltip__desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6b7280);
    margin-bottom: var(--spacing-3, 0.75rem);
    line-height: 1.4;
}

.aggregate-tooltip__props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    font-size: var(--font-size-xs, 0.75rem);
}

.aggregate-tooltip__props dt {
    color: var(--text-tertiary, #9ca3af);
    font-weight: var(--font-weight-medium, 500);
}

.aggregate-tooltip__props dd {
    color: var(--text-primary, #1f2937);
    font-weight: var(--font-weight-semibold, 600);
    text-align: right;
}

.dark .aggregate-tooltip__props dd {
    color: var(--text-primary, #f9fafb);
}

/* Trigger element styles */
[data-aggregate-type] {
    cursor: help;
    border-bottom: 1px dashed var(--color-brand);
    position: relative;
}

[data-aggregate-type]:hover,
[data-aggregate-type]:focus {
    color: var(--color-brand);
    outline: none;
}

/* Mobile: tap to show */
@media (max-width: 767.98px) {
    .aggregate-tooltip {
        position: fixed;
        left: 10px !important;
        right: 10px !important;
        width: auto;
        bottom: 20px;
        top: auto !important;
    }
}