/* manage-access.js — guided "who can do what here" dialog. */ .ma-overlay { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); } .ma-box { background: var(--bg-elevated, var(--bg, #fff)); color: var(--text, #222); border: 1px solid var(--border, #ccc); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32); padding: 1.1rem 1.25rem; width: min(34rem, 94vw); max-height: 90vh; overflow: auto; } .ma-title { margin: 0 0 0.2rem; font-size: 1.15rem; } .ma-sub { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--text-muted, #777); word-break: break-all; } .ma-list { display: flex; flex-direction: column; gap: 0.4rem; } .ma-row { display: flex; gap: 0.5rem; align-items: center; } .ma-who { flex: 1 1 auto; min-width: 0; padding: 0.35rem 0.5rem; font: inherit; border: 1px solid var(--border, #ccc); border-radius: 4px; background: var(--bg, #fff); color: var(--text, #222); } .ma-level { flex: 0 0 auto; padding: 0.35rem 0.4rem; font: inherit; border: 1px solid var(--border, #ccc); border-radius: 4px; background: var(--bg, #fff); color: var(--text, #222); } .ma-del { flex: 0 0 auto; border: none; background: transparent; color: var(--text-muted, #999); cursor: pointer; font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: 4px; } .ma-del:hover { background: var(--bg-secondary, rgba(0, 0, 0, 0.06)); color: var(--danger, #c14242); } .ma-add { margin: 0.6rem 0 0; border: 1px dashed var(--border, #bbb); background: transparent; color: var(--primary, #2868c8); cursor: pointer; padding: 0.35rem 0.6rem; border-radius: 4px; font: inherit; } .ma-add:hover { background: var(--bg-secondary, rgba(0, 0, 0, 0.04)); } .ma-inherit { display: flex; align-items: center; gap: 0.3rem; margin: 0.9rem 0 0; font-size: 0.88rem; } .ma-err { color: var(--danger, #c14242); font-size: 0.82rem; margin: 0.5rem 0 0; min-height: 0; } .ma-err:empty { display: none; } .ma-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }