/* Editor Highlighting Styles */
.sectionNumberBadge {
    position: relative;
    display: inline-block;
    background: #f59e0b;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: top;
    line-height: 1.2;
}

/* Question badge styling (leading "Q") */
.questionBadge {
    position: relative;
    display: inline-block;
    background: #ef4444; /* Red 500 */
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: top;
    line-height: 1.2;
}

.sectionHighlight {
    position: relative;
    padding: 2px 4px;
    border-radius: 3px;
    margin: 0 2px;
}

.questionHighlight {
    position: relative;
    padding: 2px 4px;
    border-radius: 3px;
    margin: 0 2px;
    background: rgba(248, 113, 113, 0.4); /* Light red for questions */
}

/* Table form badge styling */
.tableFormBadge {
    position: absolute;
    top: -8px;
    left: -8px;
    display: inline-block;
    background: #10b981; /* Green 500 */
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    z-index: 10;
}

/* Table form highlight styling */
.tableFormHighlight {
    position: relative;
    outline: 2px solid #10b981; /* Green 500 outline (no layout shift) */
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.1); /* Light green background */
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3); /* subtle inner line */
}