/* === INLINE-EDIT.CSS ===
   assets/css/inline-edit.css
   НАЗНАЧЕНИЕ: Стили inline-editing для полей задачи
   СВЯЗИ: task-inline-edit.js
   РАЗМЕР: ~80 строк */

/* --- Editable field hover indicator --- */
.tf-ie {
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background 0.15s, outline 0.15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tf-ie:hover {
    background: hsla(220, 60%, 50%, 0.08);
    outline: 1px dashed var(--border-color);
}
/* Иконка карандаша при hover */
.tf-ie::after {
    content: '\270E';
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    color: var(--text-muted);
}
.tf-ie:hover::after { opacity: 0.6; }

/* --- Active editing state --- */
.tf-ie-editing {
    background: hsla(220, 60%, 50%, 0.06);
    outline: 1px solid var(--color-primary);
}
.tf-ie-editing:hover { outline: 1px solid var(--color-primary); }
.tf-ie-editing::after { display: none; }

/* --- Inline select --- */
.tf-ie-select {
    padding: 2px 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    outline: none;
    min-width: 120px;
    max-width: 220px;
}
.tf-ie-select:focus { border-color: var(--color-primary); }

/* --- Inline text/datetime input --- */
.tf-ie-input {
    padding: 2px 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    outline: none;
    min-width: 140px;
}
.tf-ie-input:focus { border-color: var(--color-primary); }

/* Title editing - wider */
.tf-ie-title .tf-ie-input {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    min-width: 250px;
    max-width: 100%;
}

/* --- Cascade dropdown pair (block -> function) --- */
.tf-ie-cascade {
    display: flex;
    gap: 4px;
    align-items: center;
}
.tf-ie-cascade .tf-ie-select { min-width: 100px; }

/* --- Saving indicator --- */
.tf-ie-saving {
    opacity: 0.5;
    pointer-events: none;
}
.tf-ie-saving::before {
    content: '';
    display: inline-block;
    width: 11px; height: 11px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tf-ie-spin 0.6s linear infinite;
    margin-right: 4px;
}
@keyframes tf-ie-spin { to { transform: rotate(360deg); } }

/* --- Non-editable (read-only) --- */
.tf-ie-readonly {
    cursor: default;
}
.tf-ie-readonly:hover {
    background: none;
    outline: none;
}
.tf-ie-readonly::after { display: none; }