/* =====================================================
   Custom Tooltip for DevExpress Blazor Components
   - Hiển thị bên dưới
   - Gradient background
   - Nổi trên tất cả control
   ===================================================== */
.tooltip-container {
    position: relative;
    overflow: visible;
}

.tooltip-wrapper {
    position: relative;
}

    .tooltip-wrapper::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 125%;
        left: 50%;
        transform: translateX(-50%) scale(0.95);
        opacity: 0;
        background: linear-gradient(135deg, #20c2d3, #28a745);
        color: #fff;
        padding: 6px 12px;
        border-radius: 8px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        pointer-events: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 999999;
        visibility: visible;
    }

    .tooltip-wrapper:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

[data-tooltip] {
    position: relative !important;
    cursor: pointer;
    overflow: visible !important;
    z-index: 1;
}

    /* Tooltip box */
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 125%; /* hiển thị phía dưới */
        left: 50%;
        transform: translateX(-50%) scale(0.95);
        opacity: 0;
        background: linear-gradient(135deg, #20c2d3, #28a745); /* 2 màu tím + xanh lá */
        color: #fff;
        padding: 6px 12px;
        border-radius: 8px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        pointer-events: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 999999; /* nổi trên mọi thứ, kể cả popup DevExpress */
        visibility: hidden;
    }

    /* Tooltip arrow */
    [data-tooltip]::before {
        content: "";
        position: absolute;
        top: 115%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #6f42c1 transparent; /* màu mũi tên (màu đầu gradient) */
        opacity: 0;
        transition: opacity 0.25s ease;
        visibility: hidden;
        z-index: 999999;
    }

    /* Hover hiển thị */
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1);
    }

/* === Các biến thể màu nếu muốn tùy chỉnh === */

/* Xanh lá gradient */
.tooltip-success[data-tooltip]::after {
    background: linear-gradient(135deg, #28a745, #8bc34a);
}

.tooltip-success[data-tooltip]::before {
    border-color: transparent transparent #28a745 transparent;
}

/* Đỏ gradient */
.tooltip-danger[data-tooltip]::after {
    background: linear-gradient(135deg, #dc3545, #ff6b81);
}

.tooltip-danger[data-tooltip]::before {
    border-color: transparent transparent #dc3545 transparent;
}

/* Xanh dương gradient */
.tooltip-info[data-tooltip]::after {
    background: linear-gradient(135deg, #17a2b8, #5bc0de);
}

.tooltip-info[data-tooltip]::before {
    border-color: transparent transparent #17a2b8 transparent;
}