/*
 * MWFewoManager — Frontend
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 *
 * Spiegel von contao-mwfm-backoffice-bundle/public/backend/ui-tooltip.css —
 * gleicher visueller Token-Set, leicht angepasst auf die Frontend-Token
 * (--color-text statt --ui-text). Verhalten und API sind identisch
 * (data-tooltip + optional data-tooltip-content). Bewusst dupliziert statt
 * cross-bundle-shared, damit Frontend keinen Backoffice-Asset-Pfad braucht.
 */

[data-tooltip] {
    pointer-events: visible;
}

.ui-tooltip {
    position: fixed;
    z-index: 60;
    max-width: min(360px, calc(100vw - 24px));
    pointer-events: none;

    opacity: 0;
    transform: translateY(6px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
    visibility: hidden;
}

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

.ui-tooltip__inner {
    padding: 10px 12px;
    border-radius: 12px;

    /* crystal backdrop — matches the backoffice tooltip */
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);

    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);

    color: var(--color-text, #111827);
    font-size: 12px;
    line-height: 1.35;

    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.ui-tooltip__inner a {
    color: inherit;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .ui-tooltip__inner {
        background: rgba(25, 25, 25, 0.72);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
        color: #f3f4f6;
    }
}

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