/* Contextual help icons used on admin form fields.
 * Pattern:
 *   <label>Field name
 *     <span class="help-icon" data-help="explanation here">
 *       <i data-lucide="info"></i>
 *     </span>
 *   </label>
 *
 * Lucide icons are rendered by `lucide.createIcons()` (loaded from
 * https://unpkg.com/lucide@latest at the top of the page). The site/js/help-icon.js
 * script auto-bootstraps them and wires the tooltip/click behavior.
 */

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    color: #6b7280;
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    position: relative;
}

.help-icon:hover,
.help-icon:focus {
    color: #2563eb;
    background: #eff6ff;
    outline: none;
}

.help-icon i,
.help-icon svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Tooltip - rendered by help-icon.js as a child .help-tooltip span */
.help-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    width: max-content;
    max-width: 280px;
    white-space: normal;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.help-tooltip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1f2937;
}

.help-icon[data-help-open="true"] .help-tooltip,
.help-icon:hover .help-tooltip,
.help-icon:focus .help-tooltip {
    opacity: 1;
}

/* Keep the tooltip from being clipped by overflow on small panels */
@media (max-width: 640px) {
    .help-tooltip {
        max-width: 220px;
        font-size: 12px;
    }
}