/* ========================================
   ⭐⭐⭐ Custom Tooltip Styles - IMPROVED
   ======================================== */

/* Tooltip element */
.custom-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35),
                0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* Initial state - hidden */
    opacity: 0;
    visibility: hidden;
    
    /* Smooth transitions */
    transition: opacity 0.25s ease-out,
                visibility 0.25s ease-out,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Visible state */
.custom-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Arrow for tooltip */
.custom-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* ========================================
   Tooltip Positions with Proper Transform
   ======================================== */

/* TOP Position */
.custom-tooltip.top {
    transform: translateX(-50%) translateY(-8px);
}

.custom-tooltip.top.show {
    transform: translateX(-50%) translateY(0);
}

.custom-tooltip.top::before {
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-color: #667eea transparent transparent transparent;
}

/* BOTTOM Position */
.custom-tooltip.bottom {
    transform: translateX(-50%) translateY(8px);
}

.custom-tooltip.bottom.show {
    transform: translateX(-50%) translateY(0);
}

.custom-tooltip.bottom::before {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #667eea transparent;
}

/* LEFT Position */
.custom-tooltip.left {
    transform: translateY(-50%) translateX(-8px);
}

.custom-tooltip.left.show {
    transform: translateY(-50%) translateX(0);
}

.custom-tooltip.left::before {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #667eea;
}

/* RIGHT Position */
.custom-tooltip.right {
    transform: translateY(-50%) translateX(8px);
}

.custom-tooltip.right.show {
    transform: translateY(-50%) translateX(0);
}

.custom-tooltip.right::before {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 8px 8px 0;
    border-color: transparent #667eea transparent transparent;
}

/* ========================================
   Color Themes
   ======================================== */

/* Primary Theme (Blue) */
.custom-tooltip.theme-primary {
    background: linear-gradient(135deg, #4285f4 0%, #1976d2 100%);
    box-shadow: 0 8px 24px rgba(66, 133, 244, 0.35),
                0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-tooltip.theme-primary.top::before {
    border-top-color: #4285f4;
}
.custom-tooltip.theme-primary.bottom::before {
    border-bottom-color: #4285f4;
}
.custom-tooltip.theme-primary.left::before {
    border-left-color: #4285f4;
}
.custom-tooltip.theme-primary.right::before {
    border-right-color: #4285f4;
}

/* Success Theme (Green) */
.custom-tooltip.theme-success {
    background: linear-gradient(135deg, #34a853 0%, #2e7d32 100%);
    box-shadow: 0 8px 24px rgba(52, 168, 83, 0.35),
                0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-tooltip.theme-success.top::before {
    border-top-color: #34a853;
}
.custom-tooltip.theme-success.bottom::before {
    border-bottom-color: #34a853;
}
.custom-tooltip.theme-success.left::before {
    border-left-color: #34a853;
}
.custom-tooltip.theme-success.right::before {
    border-right-color: #34a853;
}

/* Danger Theme (Red) */
.custom-tooltip.theme-danger {
    background: linear-gradient(135deg, #ea4335 0%, #d32f2f 100%);
    box-shadow: 0 8px 24px rgba(234, 67, 53, 0.35),
                0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-tooltip.theme-danger.top::before {
    border-top-color: #ea4335;
}
.custom-tooltip.theme-danger.bottom::before {
    border-bottom-color: #ea4335;
}
.custom-tooltip.theme-danger.left::before {
    border-left-color: #ea4335;
}
.custom-tooltip.theme-danger.right::before {
    border-right-color: #ea4335;
}

/* Warning Theme (Orange) */
.custom-tooltip.theme-warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.35),
                0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-tooltip.theme-warning.top::before {
    border-top-color: #ff9800;
}
.custom-tooltip.theme-warning.bottom::before {
    border-bottom-color: #ff9800;
}
.custom-tooltip.theme-warning.left::before {
    border-left-color: #ff9800;
}
.custom-tooltip.theme-warning.right::before {
    border-right-color: #ff9800;
}

/* Dark Theme */
.custom-tooltip.theme-dark {
    background: linear-gradient(135deg, #424242 0%, #212121 100%);
    box-shadow: 0 8px 24px rgba(33, 33, 33, 0.45),
                0 4px 8px rgba(0, 0, 0, 0.25);
}

.custom-tooltip.theme-dark.top::before {
    border-top-color: #424242;
}
.custom-tooltip.theme-dark.bottom::before {
    border-bottom-color: #424242;
}
.custom-tooltip.theme-dark.left::before {
    border-left-color: #424242;
}
.custom-tooltip.theme-dark.right::before {
    border-right-color: #424242;
}

/* ========================================
   Special Effects
   ======================================== */

/* Subtle glow effect */
.custom-tooltip.show {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Multiline tooltips */
.custom-tooltip.multiline {
    white-space: normal;
    max-width: 280px;
    text-align: center;
    line-height: 1.6;
    padding: 12px 16px;
}

/* ========================================
   RTL Support
   ======================================== */

[dir="rtl"] .custom-tooltip {
    direction: rtl;
    text-align: right;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .custom-tooltip {
        font-size: 13px;
        padding: 8px 14px;
        max-width: 220px;
        border-radius: 8px;
    }
    
    .custom-tooltip.multiline {
        max-width: 200px;
        padding: 10px 14px;
    }
    
    .custom-tooltip::before {
        border-width: 6px;
    }
    
    .custom-tooltip.top::before {
        bottom: -5px;
        border-width: 6px 6px 0 6px;
    }
    
    .custom-tooltip.bottom::before {
        top: -5px;
        border-width: 0 6px 6px 6px;
    }
    
    .custom-tooltip.left::before {
        right: -5px;
        border-width: 6px 0 6px 6px;
    }
    
    .custom-tooltip.right::before {
        left: -5px;
        border-width: 6px 6px 6px 0;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .custom-tooltip {
        display: none !important;
    }
}