/* =========================================================================
   PAGEDINX TOOLTIP SYSTEM
   Ported directly from appdinx-web-admin
   ========================================================================= */

/* Gemeinsame Basis-Stile für Bubble und Pfeil */
[custom-tooltip]::after,
[custom-tooltip]::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1090;

    /* Weiche Einblend-Animation (Slide Up) */
    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- DIE SPRECHBLASE (Bubble) --- */
[custom-tooltip]::after {
    content: attr(custom-tooltip);

    /* Modernes Design & Farben */
    background-color: #1f2937;
    background-color: var(--text-main);
    color: var(--bg-content);

    /* Typografie & Box Model */
    padding: 6px 12px;
    font-size: 0.75rem;
    font-family: var(--font-family, inherit);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;

    /* Rundungen & Schatten */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);

    /* Positionierung */
    bottom: 100%;
    margin-bottom: 8px;
}

/* --- DER PFEIL --- */
[custom-tooltip]::before {
    content: '';
    bottom: 100%;
    margin-bottom: -2px;

    /* Dreieck formen */
    border: 5px solid transparent;
    border-top-color: #1f2937;
    border-top-color: var(--text-main);
}

/* --- HOVER STATUS (Einblenden) --- */
[custom-tooltip]:hover::after,
[custom-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* =============================================
   DARK MODE ANPASSUNG
   ============================================= */
[data-theme="dark"] [custom-tooltip]::after {
    background-color: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

[data-theme="dark"] [custom-tooltip]::before {
    border-top-color: #f3f4f6;
    z-index: 1091;
}

/* =============================================
   RAND-AUSRICHTUNG (POSITION VARIANTE)
   ============================================= */

/* RECHTSBÜNDIGE ANPASSUNG (für erste Tabellenspalte oder linken Rand) */
[custom-tooltip][custom-tooltip-pos="right"]::after,
table td:first-child [custom-tooltip]::after,
table th:first-child [custom-tooltip]::after,
.table td:first-child [custom-tooltip]::after,
.table th:first-child [custom-tooltip]::after {
    left: 0 !important;
    transform: translateX(0) !important;
}

[custom-tooltip][custom-tooltip-pos="right"]::before,
table td:first-child [custom-tooltip]::before,
table th:first-child [custom-tooltip]::before,
.table td:first-child [custom-tooltip]::before,
.table th:first-child [custom-tooltip]::before {
    left: 12px !important;
    transform: translateX(0) !important;
}

[custom-tooltip][custom-tooltip-pos="right"]:hover::after,
[custom-tooltip][custom-tooltip-pos="right"]:hover::before,
table td:first-child [custom-tooltip]:hover::after,
table td:first-child [custom-tooltip]:hover::before,
table th:first-child [custom-tooltip]:hover::after,
table th:first-child [custom-tooltip]:hover::before,
.table td:first-child [custom-tooltip]:hover::after,
.table td:first-child [custom-tooltip]:hover::before,
.table th:first-child [custom-tooltip]:hover::after,
.table th:first-child [custom-tooltip]:hover::before {
    transform: translateX(0) translateY(-4px) !important;
}

/* LINKSBÜNDIGE ANPASSUNG (für letzte Tabellenspalte oder rechten Rand) */
[custom-tooltip][custom-tooltip-pos="left"]::after,
table td:last-child [custom-tooltip]::after,
table th:last-child [custom-tooltip]::after,
.table td:last-child [custom-tooltip]::after,
.table th:last-child [custom-tooltip]::after {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

[custom-tooltip][custom-tooltip-pos="left"]::before,
table td:last-child [custom-tooltip]::before,
table th:last-child [custom-tooltip]::before,
.table td:last-child [custom-tooltip]::before,
.table th:last-child [custom-tooltip]::before {
    left: auto !important;
    right: 12px !important;
    transform: translateX(0) !important;
}

[custom-tooltip][custom-tooltip-pos="left"]:hover::after,
[custom-tooltip][custom-tooltip-pos="left"]:hover::before,
table td:last-child [custom-tooltip]:hover::after,
table td:last-child [custom-tooltip]:hover::before,
table th:last-child [custom-tooltip]:hover::after,
table th:last-child [custom-tooltip]:hover::before,
.table td:last-child [custom-tooltip]:hover::after,
.table td:last-child [custom-tooltip]:hover::before,
.table th:last-child [custom-tooltip]:hover::after,
.table th:last-child [custom-tooltip]:hover::before {
    transform: translateX(0) translateY(-4px) !important;
}

/* =============================================
   UNTEN-AUSRICHTUNG (POSITION VARIANTE: bottom / bottom-left)
   ============================================= */
[custom-tooltip][custom-tooltip-pos="bottom"]::after,
[custom-tooltip][custom-tooltip-pos="bottom-left"]::after,
.modal-header .closeBtn[custom-tooltip]::after,
.modal-header button.close[custom-tooltip]::after {
    bottom: auto !important;
    top: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

[custom-tooltip][custom-tooltip-pos="bottom"]::before,
[custom-tooltip][custom-tooltip-pos="bottom-left"]::before,
.modal-header .closeBtn[custom-tooltip]::before,
.modal-header button.close[custom-tooltip]::before {
    bottom: auto !important;
    top: 100% !important;
    margin-bottom: 0 !important;
    margin-top: -2px !important;
    left: auto !important;
    right: 12px !important;
    transform: translateX(0) !important;
    border: 5px solid transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: var(--text-main) !important;
}

[data-theme="dark"] [custom-tooltip][custom-tooltip-pos="bottom"]::before,
[data-theme="dark"] [custom-tooltip][custom-tooltip-pos="bottom-left"]::before,
[data-theme="dark"] .modal-header .closeBtn[custom-tooltip]::before,
[data-theme="dark"] .modal-header button.close[custom-tooltip]::before {
    border-bottom-color: #f3f4f6 !important;
}

[custom-tooltip][custom-tooltip-pos="bottom"]:hover::after,
[custom-tooltip][custom-tooltip-pos="bottom"]:hover::before,
[custom-tooltip][custom-tooltip-pos="bottom-left"]:hover::after,
[custom-tooltip][custom-tooltip-pos="bottom-left"]:hover::before,
.modal-header .closeBtn[custom-tooltip]:hover::after,
.modal-header .closeBtn[custom-tooltip]:hover::before,
.modal-header button.close[custom-tooltip]:hover::after,
.modal-header button.close[custom-tooltip]:hover::before {
    transform: translateX(0) translateY(4px) !important;
}

/* =============================================
   STACKING CONTEXT FIX FÜR TABELLEN
   ============================================= */
table tr:hover,
.table tr:hover {
    position: relative;
    z-index: 25;
}

table td:has([custom-tooltip]:hover),
table th:has([custom-tooltip]:hover),
.table td:has([custom-tooltip]:hover),
.table th:has([custom-tooltip]:hover),
table td:hover:has([custom-tooltip]),
.table td:hover:has([custom-tooltip]) {
    position: relative;
    z-index: 100 !important;
}