/* lucyna.dev — edet-customfields.css (Batch-2 P2)
   Inline custom-field controls reuse the inspector's .dr-insp-* styling; this
   file adds the section header + the "Manage fields…" modal. Tokens only. */

.dr-cf-head {
    margin: 0.8rem 0 0.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
    color: var(--fg-dim);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dr-cf-checkrow { flex-direction: row; align-items: center; gap: 0.45rem; }
.dr-cf-checkrow .dr-insp-label { text-transform: none; letter-spacing: 0; }

/* ---- Manage-fields modal ---- */
.dr-cf-backdrop {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    /* Frosted glass, matching the overlay system + board modal (the shared
       --edet-glass/--edet-blur on body.edet) so every secondary screen reads
       the same — not a flat dim. */
    background: var(--edet-glass, color-mix(in srgb, var(--bg) 60%, transparent));
    backdrop-filter: var(--edet-blur, blur(9px)) saturate(115%);
    -webkit-backdrop-filter: var(--edet-blur, blur(9px)) saturate(115%);
    padding: 1rem;
}
/* shared frosted prompt/confirm (M.uiPrompt / M.uiConfirm) — reuse .dr-cf-modal */
.dr-ui-input { width: 100%; margin: 0.1rem 0 0; }
.dr-ui-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.dr-btn-danger { color: var(--status-err, #e06c6c); border-color: color-mix(in srgb, var(--status-err, #e06c6c) 50%, transparent); }
.dr-btn-danger:hover { border-color: var(--status-err, #e06c6c); background: color-mix(in srgb, var(--status-err, #e06c6c) 14%, transparent); }
.dr-cf-modal {
    width: min(440px, 100%);
    max-height: 86vh; overflow: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,.4));
    padding: 0.9rem 1rem 1.1rem;
}
.dr-cf-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.dr-cf-modal-head h3 { margin: 0; font-size: var(--text-base); color: var(--fg); }

.dr-cf-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.dr-cf-empty { margin: 0; color: var(--fg-dim); font-size: var(--text-sm); }
.dr-cf-row {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-raised, var(--bg)); border: 1px solid var(--rule); border-radius: 6px;
}
.dr-cf-name { flex: 0 0 auto; color: var(--fg); font-weight: 600; font-size: var(--text-sm); }
.dr-cf-meta { flex: 1 1 auto; color: var(--fg-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-cf-del {
    flex: 0 0 auto; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 4px; background: transparent; color: var(--fg-muted);
    cursor: pointer; font-size: var(--text-xs);
}
.dr-cf-del:hover { color: var(--status-err); background: var(--row-hover); }

.dr-cf-form { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); }
.dr-cf-applies { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dr-cf-apply { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--fg); font-size: var(--text-sm); cursor: pointer; }
.dr-cf-add { align-self: flex-start; margin-top: 0.2rem; }