/* Fill Mode Click-to-Edit Styling */
/* These styles make editable fields look like regular text until clicked */
/* Fonts remain identical to view mode - only subtle hover hints */

.fill-mode-field {
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px; /* Negative margin to maintain position */
}

.fill-mode-field:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
    outline: 1px dashed rgba(var(--mud-palette-primary-rgb), 0.15);
}

/* Ensure dark mode compatibility */
.mud-theme-dark .fill-mode-field:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* Rich text widget in fill mode - show edit hint on hover */
.knowledge-widget-richtext.fill-mode-field {
    position: relative;
}

.knowledge-widget-richtext.fill-mode-field:hover::after {
    content: "✎ Click to edit";
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    padding: 2px 6px;
    background-color: var(--mud-palette-background);
    border-radius: 3px;
    pointer-events: none;
}

/* Remove the hint when actually editing */
.knowledge-widget-richtext.fill-mode-field.editing::after {
    display: none;
}