/* Admin → Rights. Was the adm-rights-styles tag in js/views/admin-rights.js.
   scripts/build.mjs ensures this after monitor-extra and before views-admin,
   the sheet that used to be moved after this tag. */
.adm-rights-intro { color: var(--text-2); font-size: 13px; margin: 2px 0 14px; max-width: 720px; }
/* Breathing room between a sub-section's summary bar and its first child is
   provided globally by .adm-sub-body's top padding (admin.js) — one fix for
   the header/first-row collision across Rights, NDA and DECT sub-panels. */
.adm-rights-grouplist { display: flex; flex-direction: column; gap: 6px; }
/* .adm-rights-rolerow intentionally unstyled: the roles list is now a flat
   DataTable (Devices-table pattern) and the class only remains on each <tr>
   as a stable selector hook. Grant rows keep the card look. */
.adm-rights-grantrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-card); }
.adm-rights-rolename { display: flex; align-items: center; gap: 10px; }
.adm-rights-rolecount { color: var(--text-muted); font-size: 12px; }
.adm-rights-rowactions { display: flex; gap: 6px; }
.adm-rights-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; background: var(--bg-raised); color: var(--text-1); border: 1px solid var(--border-subtle); }
.adm-rights-chip--builtin { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.adm-rights-chip--custom { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.adm-rights-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* Width comes from the standard .modal--wide (openRoleModal passes wide:true);
   the old min-width:620px inside the 520px default modal was what clipped
   labels and forced horizontal scrolling. Content must never h-scroll. */
.adm-rights-rolemodal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-rights-matrix { display: flex; flex-direction: column; gap: 12px; max-height: 56vh; overflow-y: auto; overflow-x: hidden; }
.adm-rights-capgroup-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
/* 300px min ⇒ exactly two roomy columns in the wide modal (no clipped
   labels), auto-collapsing to one column on narrow viewports. */
.adm-rights-capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; }
.adm-rights-cap { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 4px; border-radius: var(--r-sm); cursor: pointer; }
.adm-rights-cap:hover { background: var(--bg-raised); }
.adm-rights-cap input { accent-color: var(--accent); }
.adm-rights-cap--danger span { color: var(--danger); }
.adm-rights-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-muted); }
.adm-rights-legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--danger); flex: 0 0 auto; }
.adm-rights-effective { margin-top: 12px; }
.adm-rights-effhead { font-size: 13px; color: var(--text-1); margin-bottom: 8px; }
.adm-rights-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-rights-empty { color: var(--text-muted); font-size: 13px; padding: 6px 2px; }
.adm-rights-planstatus { margin: 2px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.adm-rights-planflag { align-self: flex-start; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--border-subtle); }
.adm-rights-planflag--on { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--text-1); }
.adm-rights-planflag--off { background: var(--bg-raised); color: var(--text-muted); }
.adm-rights-plannote { color: var(--text-2); font-size: 12px; max-width: 720px; }
.adm-rights-planlist { display: flex; flex-direction: column; gap: 8px; }
.adm-rights-plancard { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-card); }
.adm-rights-plansummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; cursor: pointer; list-style: none; }
.adm-rights-plansummary::-webkit-details-marker { display: none; }
.adm-rights-planname { display: flex; align-items: center; gap: 9px; }
.adm-rights-planeverything { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.adm-rights-plancount { color: var(--text-muted); font-size: 12px; }
.adm-rights-planeditor { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.adm-rights-plancol-h { font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.adm-rights-planwarn { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); border-radius: var(--r-sm); padding: 8px 10px; }
.adm-rights-planwarnack { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-1); cursor: pointer; }
.adm-rights-planwarnack input { accent-color: var(--danger); margin-top: 2px; }
/* ── Phone pass (≤760px): the capability grid's 300px column floor overflows
      narrow containers (~210px inline at 320, ~280px plan editors at 390) —
      floor at the container width instead. Wherever 300px already fit the
      layout is byte-identical; ≥761 untouched. ── */
@media (max-width: 760px) {
  .adm-rights-capgrid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .adm-rights-cap { min-width: 0; }
}