/**
 * Form Tooltip Styles
 * Used for displaying help text in tooltips across all forms
 * Provides small, subtle info icons with light gray color
 */

/* Smaller, subtle info circle icon for cleaner look */
.form-tooltip-icon {
    cursor: pointer;
    font-size: 0.70rem !important;
    vertical-align: middle !important;
    color: #6b7280c9 !important;
    margin-left: 0.5rem !important;
    /* padding: 0.2rem 0.3rem !important; */
    /* background-color: rgba(107, 114, 128, 0.15) !important; */
    border-radius: 50% !important;
    opacity: 0.85 !important;
    transition: all 0.2s ease !important;
}

.form-tooltip-icon:hover {
    color: #4b5563 !important;
    opacity: 1 !important;
    background-color: rgba(107, 114, 128, 0.25) !important;
}

/* Override Bootstrap Icons ::before for consistent sizing */
.form-tooltip-icon.bi::before,
.form-tooltip-icon.bi-circle-fill::before,
.form-tooltip-icon.bi-info-circle-fill::before {
    font-size: 0.55rem !important;
    color: inherit !important;
}

/* Custom tooltip styles for long help text */
.form-tooltip {
    max-width: 350px;
    font-size: 0.8rem;
    line-height: 1.4;
    z-index: 9999 !important;
}

/* Ensure tooltips appear above Bootstrap modals */
.modal .tooltip,
.modal .form-tooltip {
    z-index: 10050 !important;
}

/* Ensure tooltip arrow is visible */
.tooltip.show {
    opacity: 1;
}

.form-tooltip .tooltip-inner {
    max-height: 250px;
    overflow-y: auto;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    padding: 0.5rem 0.75rem;
    background-color: #34495e;
    border-radius: 0.375rem;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.form-tooltip {
    pointer-events: auto;
}

.form-tooltip .tooltip-arrow::before {
    border-top-color: #34495e;
}

/* Premium label styles for forms */
.form-label-premium {
    font-weight: 600;
    color: #34495e;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
}