/* =============================================================================
   components/tooltips.css
   Hover tooltips for action buttons and info icons.
   Covers two usage patterns: .connect-btn-wrapper and .info-icon-tooltip.
   ============================================================================= */

/* z-index baseline for all stacking contexts that host tooltips */
.location-item,
.detail-card,
.detail-content,
.integration-details,
.manage-integration-view,
.ghlm-content,
.location-actions {
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   Button wrapper tooltip (e.g. disabled connect button)
   ----------------------------------------------------------------------------- */

.connect-btn-wrapper {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.connect-btn-wrapper .tooltip-text {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-tooltip);
    transition: var(--transition-slow);
}

.connect-btn-wrapper:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

.connect-btn-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

/* -----------------------------------------------------------------------------
   Info icon tooltip (i.fa-info-circle style)
   ----------------------------------------------------------------------------- */

.info-icon-tooltip {
    position: relative;
    display: inline-block;
    color: var(--primary);
    margin-left: 0.5rem;
    cursor: help;
    z-index: var(--z-tooltip);
}

.info-icon-tooltip .tooltip-text {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background-color: var(--text-dark);
    color: white;
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-tooltip);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: var(--transition-slow);
}

.info-icon-tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

.info-icon-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-dark);
}

/* Modifier: tooltip opens below instead of above */
.info-icon-tooltip .tooltip-text.tooltip-below {
    bottom: auto;
    top: calc(100% + 10px);
}

.info-icon-tooltip .tooltip-text.tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--text-dark) transparent;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .connect-btn-wrapper .tooltip-text {
        font-size: 11px;
        padding: 6px 10px;
        width: max-content;
        max-width: 200px;
    }

    .info-icon-tooltip .tooltip-text {
        width: 200px;
        padding: 0.625rem;
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .connect-btn-wrapper .tooltip-text {
        font-size: 10px;
        padding: 5px 8px;
        max-width: 180px;
    }

    .info-icon-tooltip {
        margin-left: 0.375rem;
    }

    .info-icon-tooltip .tooltip-text {
        width: 180px;
        padding: 0.5rem;
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 320px) {
    .info-icon-tooltip .tooltip-text {
        width: 160px;
        padding: 0.375rem;
        font-size: 0.75rem;
    }
}