{
  "id": "evidence-office-permissions",
  "name": "Permission Matrix",
  "theme": "evidence-office",
  "category": "Settings & Forms",
  "description": "Roles across the top, capabilities down the side, and a checkbox at every intersection — the only honest way to show what a role can do.",
  "layout": "A true matrix table with a sticky header row and sticky capability column; inherited permissions are shown disabled-but-checked so the source of an entitlement is visible.",
  "modules": [
    {
      "key": "intro",
      "name": "Matrix header",
      "html": "\n<header class=\"ph\"><h1>Roles and permissions</h1><p>Changes take effect at next sign-in. Greyed boxes are inherited from a parent role and cannot be cleared here.</p></header>"
    },
    {
      "key": "matrix",
      "name": "Permission matrix",
      "html": "\n<div class=\"mx-scroll\">\n  <table class=\"mx\">\n    <thead><tr><th scope=\"col\" class=\"cap\">Capability</th><th scope=\"col\">Read only</th><th scope=\"col\">Case officer</th><th scope=\"col\">Senior</th><th scope=\"col\">Committee</th><th scope=\"col\">Administrator</th></tr></thead>\n    <tbody>\n      <tr><th scope=\"row\" class=\"cap\">View case</th><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Edit case detail</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Move to decision</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Grant extension</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Export register</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Manage roles</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">View audit trail</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n    </tbody>\n  </table>\n</div>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sb\"><span class=\"sb-note\">3 unsaved changes · Senior, Administrator</span><div><button type=\"button\">Discard</button><button type=\"button\" class=\"pri\">Save and notify</button></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "evidence-office-permissions",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-permissions.json",
  "structure": "A true matrix table with a sticky header row and sticky capability column; inherited permissions are shown disabled-but-checked so the source of an entitlement is visible.",
  "html": "<div class=\"dz dz-evidence-office-permissions\" data-design=\"evidence-office-permissions\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"intro\" aria-label=\"Matrix header\">\n<header class=\"ph\"><h1>Roles and permissions</h1><p>Changes take effect at next sign-in. Greyed boxes are inherited from a parent role and cannot be cleared here.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"matrix\" aria-label=\"Permission matrix\">\n<div class=\"mx-scroll\">\n  <table class=\"mx\">\n    <thead><tr><th scope=\"col\" class=\"cap\">Capability</th><th scope=\"col\">Read only</th><th scope=\"col\">Case officer</th><th scope=\"col\">Senior</th><th scope=\"col\">Committee</th><th scope=\"col\">Administrator</th></tr></thead>\n    <tbody>\n      <tr><th scope=\"row\" class=\"cap\">View case</th><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Edit case detail</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Move to decision</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Grant extension</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Export register</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked disabled></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">Manage roles</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td></tr>\n      <tr><th scope=\"row\" class=\"cap\">View audit trail</th><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked></td><td><input type=\"checkbox\" checked disabled></td></tr>\n    </tbody>\n  </table>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sb\"><span class=\"sb-note\">3 unsaved changes · Senior, Administrator</span><div><button type=\"button\">Discard</button><button type=\"button\" class=\"pri\">Save and notify</button></div></footer></section>\n</div>",
  "css": "\n.dz-evidence-office-permissions { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 0 0; display: flex; flex-direction: column; min-height: 480px; }\n.dz-evidence-office-permissions .ph { padding: 0 26px 14px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-permissions .ph h1 { font-family: var(--pv-display); font-size: 21px; letter-spacing: -.02em; margin: 0 0 5px; }\n.dz-evidence-office-permissions .ph p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); max-width: 66ch; }\n.dz-evidence-office-permissions .mx-scroll { overflow-x: auto; padding: 0 26px; flex: 1; }\n.dz-evidence-office-permissions .mx { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 13px; }\n.dz-evidence-office-permissions .mx th, .dz-evidence-office-permissions .mx td { border-bottom: var(--pv-bw) solid var(--border); padding: 10px 12px; text-align: center; }\n.dz-evidence-office-permissions .mx thead th { position: sticky; top: 0; background: var(--background); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-permissions .cap { position: sticky; left: 0; background: var(--background); text-align: left; font-weight: 500; border-right: var(--pv-bw) solid var(--border); min-width: 170px; }\n.dz-evidence-office-permissions .mx thead .cap { z-index: 2; }\n.dz-evidence-office-permissions .mx tbody tr { transition: background var(--dur) var(--ease); }\n.dz-evidence-office-permissions .mx tbody tr:hover td, .dz-evidence-office-permissions .mx tbody tr:hover .cap { background: var(--secondary); }\n.dz-evidence-office-permissions .mx input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }\n.dz-evidence-office-permissions .mx input:disabled { opacity: .38; cursor: not-allowed; }\n.dz-evidence-office-permissions .sb { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 26px; border-top: var(--pv-bw) solid var(--foreground); background: var(--muted); }\n.dz-evidence-office-permissions .sb-note { font-size: 12.5px; color: var(--primary); }\n.dz-evidence-office-permissions .sb div { display: flex; gap: 8px; }\n.dz-evidence-office-permissions .sb button { font: inherit; font-size: 12.5px; padding: 8px 16px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); cursor: pointer; }\n.dz-evidence-office-permissions .sb .pri { border-color: var(--primary); color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-permissions *, .dz-evidence-office-permissions *::before, .dz-evidence-office-permissions *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}