/* ========================================
   Inline Edit Component Styles
   ======================================== */

.inline-editable {
    cursor: text;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s;
    min-width: 50px;
    display: inline-block;
}

.inline-editable:hover {
    background: var(--interactive-hover);
}

.inline-editable.editing {
    background: transparent;
    outline: none;
    cursor: text;
    color: var(--text-primary);  /* Ensure text is visible in all themes */
}

.inline-editable.editing:hover {
    background: transparent;
}

.inline-editable[contenteditable="true"] {
    outline: none;
}

.inline-editable.error {
    outline-color: var(--red-primary);
}

/* Placeholder state - uses theme-aware tertiary text color */
.inline-editable.placeholder {
    color: var(--text-tertiary);
}