/*
 * Role page — the grant matrix (docs/rbac-actions.md § 4).
 * One row per model, one pill per verb. Light by default; dark only when
 * Unfold itself is dark (html.dark) — never from the OS preference, the
 * admin's THEME decides.
 */
.rm { --rm-line: #e5e7eb; --rm-muted: #6b7280; --rm-text: #111827; --rm-bg: #ffffff;
      --rm-bg-soft: #f9fafb; --rm-pill: #f3f4f6; --rm-pill-text: #374151;
      --rm-on: #7c3aed; --rm-on-text: #ffffff; --rm-view: #2563eb; }
html.dark .rm { --rm-line: #374151; --rm-muted: #9ca3af; --rm-text: #f3f4f6; --rm-bg: #111827;
      --rm-bg-soft: #1f2937; --rm-pill: #1f2937; --rm-pill-text: #d1d5db;
      --rm-on: #8b5cf6; --rm-on-text: #ffffff; --rm-view: #60a5fa; }

.rm { color: var(--rm-text); }

/* toolbar */
.rm-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.rm-search { flex: 1 1 16rem; border: 1px solid var(--rm-line); border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; background: var(--rm-bg); color: var(--rm-text); }
.rm-search:focus { outline: 2px solid var(--rm-on); outline-offset: 1px; }
.rm-seg { display: inline-flex; border: 1px solid var(--rm-line); border-radius: .5rem; overflow: hidden; background: var(--rm-bg); }
.rm-seg button { padding: .45rem .8rem; font-size: .8rem; color: var(--rm-muted); background: transparent; border: 0; cursor: pointer; }
.rm-seg button + button { border-left: 1px solid var(--rm-line); }
.rm-seg button[aria-pressed="true"] { background: var(--rm-bg-soft); color: var(--rm-text); font-weight: 600; }
.rm-seg b { margin-left: .35rem; font-weight: 600; color: var(--rm-muted); }

/* groups and rows */
.rm-group { border: 1px solid var(--rm-line); border-radius: .75rem; background: var(--rm-bg); overflow: hidden; }
.rm-group + .rm-group { margin-top: 1rem; }
.rm-group__head { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--rm-muted); background: var(--rm-bg-soft); border-bottom: 1px solid var(--rm-line); }
.rm-group__count { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; }
.rm-row { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr auto; gap: 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--rm-line); }
.rm-row:last-child { border-bottom: 0; }
.rm-row:hover { background: var(--rm-bg-soft); }
.rm-row[hidden] { display: none; }
.rm-row--off .rm-name { color: var(--rm-muted); }
.rm-name { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.rm-verbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.rm-quick { display: flex; gap: .5rem; font-size: .75rem; white-space: nowrap; }
.rm-quick button { border: 0; background: transparent; color: var(--rm-muted); cursor: pointer; text-decoration: underline dotted; padding: 0; }
.rm-quick button:hover { color: var(--rm-text); }

/* pills */
.rm-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 9999px; border: 1px solid var(--rm-line); background: var(--rm-pill); color: var(--rm-pill-text); font-size: .78rem; line-height: 1; cursor: pointer; user-select: none; transition: background .12s, color .12s, border-color .12s; }
.rm-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.rm-pill .material-symbols-outlined { font-size: 15px !important; line-height: 1; }
.rm-pill:hover { border-color: var(--rm-on); }
.rm-pill:has(input:checked) { background: var(--rm-on); border-color: var(--rm-on); color: var(--rm-on-text); }
.rm-pill--view:has(input:checked) { background: var(--rm-view); border-color: var(--rm-view); }
.rm-pill:has(input:focus-visible) { outline: 2px solid var(--rm-on); outline-offset: 2px; }

/* footer */
.rm-footer { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; margin-top: 1rem; }
.rm-dirty { font-size: .8rem; color: var(--rm-muted); }
.rm-dirty[data-count]:not([data-count="0"]) { color: var(--rm-on); font-weight: 600; }
.rm-empty { padding: 1.25rem; font-size: .85rem; color: var(--rm-muted); }

@media (max-width: 900px) {
    .rm-row { grid-template-columns: 1fr; gap: .5rem; }
    .rm-quick { justify-content: flex-start; }
}