/**
 * 内容列悬停提示样式
 * 当鼠标悬停在内容列时显示完整内容
 */

/* 内容列基础样式 - 确保有悬停效果 */
.data-table td:nth-child(8),
.data-table td.content-column {
    position: relative !important;
    cursor: help !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 悬停时改变背景色提示用户 */
.data-table td:nth-child(8):hover,
.data-table td.content-column:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
}

/* 确保悬停区域足够大 */
.data-table td:nth-child(8),
.data-table td.content-column {
    min-width: 230px !important;
}

/* Tooltip容器样式 */
.content-tooltip {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 300px !important;
    max-width: 500px !important;
    padding: 8px 12px !important;
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    opacity: 0 !important;
    transform: translateY(-5px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    pointer-events: none !important;
    display: none !important;
}

/* 显示状态 */
.content-tooltip.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
    display: block !important;
}

/* Tooltip箭头 */
.content-tooltip::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 15px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid #2c3e50 !important;
}

/* 向上显示的tooltip */
.content-tooltip.top {
    transform: translateY(5px) !important;
}

.content-tooltip.top.show {
    transform: translateY(0) !important;
}

.content-tooltip.top::before {
    top: auto !important;
    bottom: -6px !important;
    border-bottom: none !important;
    border-top: 6px solid #2c3e50 !important;
}

/* 右对齐的tooltip */
.content-tooltip.right-align {
    right: 0 !important;
    left: auto !important;
}

.content-tooltip.right-align::before {
    left: auto !important;
    right: 15px !important;
}

/* 确保提示框在表格边界内显示 - 但允许tooltip溢出 */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* 当提示框可能超出右边界时，调整位置 */
.data-table td:nth-child(8):last-child:hover::after,
.data-table td.content-column:last-child:hover::after {
    left: auto !important;
    right: 0 !important;
}

.data-table td:nth-child(8):last-child:hover::before,
.data-table td.content-column:last-child:hover::before {
    left: auto !important;
    right: 15px !important;
}

/* 针对表格底部行的提示框，向上显示 */
.data-table tbody tr:nth-last-child(-n+3) td:nth-child(8):hover::after,
.data-table tbody tr:nth-last-child(-n+3) td.content-column:hover::after {
    top: auto !important;
    bottom: 100% !important;
    transform: translateY(5px) !important;
}

.data-table tbody tr:nth-last-child(-n+3) td:nth-child(8):hover::after,
.data-table tbody tr:nth-last-child(-n+3) td.content-column:hover::after {
    transform: translateY(0) !important;
}

.data-table tbody tr:nth-last-child(-n+3) td:nth-child(8):hover::before,
.data-table tbody tr:nth-last-child(-n+3) td.content-column:hover::before {
    top: auto !important;
    bottom: 100% !important;
    border-bottom: none !important;
    border-top: 6px solid #2c3e50 !important;
} 