domma-cms 0.75.0 → 0.76.0

package/admin/js/templates/notifications.html

@@ -1,14 +1,74 @@
-<div class="view-container">
-    <div class="view-header">
-        <h1><span data-icon="bell"></span> Notifications</h1>
-    </div>
-
-    <div id="notif-list"></div>
+<!-- Notifications. Bound with M.applyBindings - see admin/views/notifications.js, which also inserts the row
+     template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the
+     Tool banner above is the heading, and Dismiss all / Refresh are banner actions. -->
+<div class="ntx">
+    <p class="ntx-note">Messages for this site's administrators - maintenance, updates and warnings, mostly from the
+        manager that hosts it.
+        <span data-help-title="Notifications" data-help="Opening this screen marks everything in it as read - the ones that were unread stay marked New until you leave. Click a notification to read all of it; right-click it (or ⋮, or Shift+F10) to open its link, copy it, mark it unread again, dismiss it or delete it. Dismissing hides it for you only; deleting removes it for everyone and needs the delete permission. A notification with an end date disappears by itself once it passes."></span></p>
 
-    <div id="notif-empty" hidden class="card">
-        <div class="card-body" style="text-align:center;padding:3rem;color:var(--dm-text-muted)">
-            <span data-icon="check-circle" style="font-size:2rem;display:block;margin-bottom:.5rem"></span>
-            <p>No notifications - you're all caught up.</p>
+    <div class="ntx-card">
+        <div class="ntx-bar">
+            <div class="ntx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showNew" data-bind-class="filter.value === 'new' && 'is-on'" data-bind-hidden="!counts.value.new">New <b data-bind-text="counts.value.new"></b></button>
+                <button type="button" data-on-click="showCritical" data-bind-class="filter.value === 'critical' && 'is-on'" data-bind-hidden="!counts.value.critical">Critical <b data-bind-text="counts.value.critical"></b></button>
+                <button type="button" data-on-click="showWarning" data-bind-class="filter.value === 'warning' && 'is-on'" data-bind-hidden="!counts.value.warning">Warnings <b data-bind-text="counts.value.warning"></b></button>
+                <button type="button" data-on-click="showInfo" data-bind-class="filter.value === 'info' && 'is-on'" data-bind-hidden="!counts.value.info">Info <b data-bind-text="counts.value.info"></b></button>
+                <button type="button" data-on-click="showSuccess" data-bind-class="filter.value === 'success' && 'is-on'" data-bind-hidden="!counts.value.success">Success <b data-bind-text="counts.value.success"></b></button>
+            </div>
+            <input type="search" class="form-input ntx-search" placeholder="Search notifications…" aria-label="Search notifications" data-model="query.value">
         </div>
+        <p class="ntx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="ntx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <div class="ntx-empty" data-bind-hidden="loading.value || loadError.value || rows.value.length">
+            <span data-icon="check-circle" data-icon-size="28"></span>
+            <span data-bind-text="emptyText.value"></span>
+        </div>
+        <div class="ntx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.ntx { display: flex; flex-direction: column; gap: .75rem; }
+.ntx [hidden] { display: none !important; }
+.ntx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.ntx-note.is-bad { color: var(--dm-danger); }
+.ntx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.ntx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.ntx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.ntx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.ntx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.ntx-seg button + button { border-left: 1px solid var(--dm-border); }
+.ntx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.ntx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.ntx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.ntx-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; color: var(--dm-text-muted); }
+.ntx-empty [data-icon], .ntx-empty svg { color: var(--dm-success); }
+.ntx-list { display: flex; flex-direction: column; }
+.ntx-row { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.ntx-row:last-child { border-bottom: 0; }
+.ntx-row:hover, .ntx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.ntx-dot { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: var(--dm-info, var(--dm-primary)); }
+.ntx-row.is-critical .ntx-dot { background: var(--dm-danger); }
+.ntx-row.is-warning .ntx-dot { background: var(--dm-warning); }
+.ntx-row.is-success .ntx-dot { background: var(--dm-success); }
+.ntx-row:not(.is-unread) .ntx-main strong { font-weight: 500; }
+.ntx-row.is-critical { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.ntx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
+.ntx-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
+.ntx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.ntx-preview { color: var(--dm-text-muted); font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ntx-body { white-space: pre-wrap; font-size: var(--dm-text-sm); color: var(--dm-text); margin-top: .25rem; overflow-wrap: anywhere; }
+.ntx-actions { display: flex; gap: .4rem; margin-top: .4rem; }
+.ntx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.ntx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.ntx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.ntx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.ntx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.ntx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.ntx-chip.is-new { background: var(--dm-primary); color: var(--dm-primary-text); }
+.ntx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.ntx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .ntx-preview { white-space: normal; } }
+</style>

package/admin/js/templates/plugins.html

@@ -1,35 +1,107 @@
-<div class="view-header d-flex justify-content-between align-items-center">
-    <div>
-        <h1><span data-icon="store"></span> Marketplace</h1>
-        <p class="text-muted" style="margin:0;font-size:.875rem">Install plugins to add features. Once enabled, a plugin appears under Tools. Changes take effect after a server restart.</p>
-    </div>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <button id="install-file-btn" class="btn btn-secondary" title="Install a .dcmsplugin file">
-            <span data-icon="upload"></span> Install from File
-        </button>
-        <button id="new-plugin-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> New Plugin
-        </button>
-    </div>
-    <input type="file" id="install-file-input" accept=".dcmsplugin" hidden>
-</div>
+<!-- The Marketplace (System › Plugins). Bound with M.applyBindings - see admin/js/views/plugins.js, which
+     also inserts the row templates (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner is the heading; New plugin and Install from file are banner actions. -->
+<div class="plx">
+    <p class="plx-note">Install plugins to add features. Once switched on, a plugin is a Tool and appears in the sidebar.
+        <span data-help-title="The Marketplace" data-help="Installed lists what is on this site; Browse lists what this site can get from its manager (a site that is not managed installs from a .dcmsplugin file instead - Install from file in the banner). Switching a plugin on or off restarts the server, because a plugin's routes and screens are only read at start-up. Licensed plugins carry their licence with them: one that is switched on but not licensed does not run, and says so here."></span></p>
+    <input type="file" class="plx-file" accept=".dcmsplugin" hidden>
 
-<div id="plugin-tabs" class="tabs">
-    <div class="tab-list">
-        <button class="tab-item active" data-tab="installed">Installed</button>
-        <button class="tab-item" data-tab="marketplace">Browse</button>
-    </div>
+    <p class="plx-alert" data-bind-hidden="!restarting.value">
+        <span class="plx-spinner" aria-hidden="true"></span>
+        <span data-bind-text="restarting.value"></span>
+    </p>
 
-    <div class="tab-panel active" data-panel="installed">
-        <div id="plugins-empty" class="card" style="display:none">
-            <div class="card-body text-muted">
-                No plugins found. Drop a plugin folder into the <code>plugins/</code> directory to get started.
+    <div class="tabs plx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Installed <span class="plx-count" data-bind-text="plugins.value.length"></span></button>
+            <button type="button" class="tab-item">Browse <span class="plx-count" data-bind-hidden="!updateCount.value" data-bind-text="updateCountText.value"></span></button>
+        </div>
+
+        <!-- Installed -->
+        <div class="tab-panel active">
+            <div class="plx-card">
+                <div class="plx-bar">
+                    <div class="plx-seg" role="group" aria-label="Show">
+                        <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                        <button type="button" data-on-click="showOn" data-bind-class="filter.value === 'on' && 'is-on'">On <b data-bind-text="counts.value.on"></b></button>
+                        <button type="button" data-on-click="showOff" data-bind-class="filter.value === 'off' && 'is-on'">Off <b data-bind-text="counts.value.off"></b></button>
+                        <button type="button" data-on-click="showAttention" data-bind-class="filter.value === 'attention' && 'is-on'" data-bind-hidden="!counts.value.attention">Needs attention <b data-bind-text="counts.value.attention"></b></button>
+                    </div>
+                    <input type="search" class="form-input plx-search" placeholder="Search plugins…" aria-label="Search plugins" data-model="query.value">
+                    <span data-help-title="Installed plugins" data-help="Click a plugin for its details and settings. Right-click it (or ⋮, or Shift+F10) to switch it on or off, configure it, update it, view its source, export it as a .dcmsplugin file or uninstall it. Built-in plugins are part of the CMS and always on. Licensed plugins cannot be viewed or exported here."></span>
+                </div>
+                <p class="plx-note" data-bind-hidden="!loading.value">Loading…</p>
+                <p class="plx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="plx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="plx-list plx-installed" data-each="rows.value key=name"></div>
             </div>
         </div>
-        <div id="plugins-grid" class="plugins-grid"></div>
-    </div>
 
-    <div class="tab-panel" data-panel="marketplace">
-        <div id="marketplace-mount"></div>
+        <!-- Browse -->
+        <div class="tab-panel">
+            <div class="plx-browse"></div>
+        </div>
     </div>
 </div>
+
+<style>
+.plx { display: flex; flex-direction: column; gap: .75rem; }
+.plx [hidden], .plx-form [hidden] { display: none !important; }
+.plx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.plx-note.is-bad { color: var(--dm-danger); }
+.plx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-text); }
+.plx-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dm-primary) 30%, transparent);
+    border-top-color: var(--dm-primary); animation: plx-spin .8s linear infinite; flex-shrink: 0; }
+@keyframes plx-spin { to { transform: rotate(360deg); } }
+.plx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.plx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
+.plx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.plx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.plx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.plx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.plx-seg button + button { border-left: 1px solid var(--dm-border); }
+.plx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.plx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.plx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.plx-list { display: flex; flex-direction: column; }
+.plx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.plx-row:last-child { border-bottom: 0; }
+.plx-row:hover, .plx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.plx-row.is-attention { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.plx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--plugin-accent, var(--dm-primary));
+    background: color-mix(in srgb, var(--plugin-accent, var(--dm-primary)) 14%, transparent); }
+.plx-row.is-off .plx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.plx-row.is-off .plx-main strong { color: var(--dm-text-muted); }
+.plx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.plx-main strong, .plx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.plx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.plx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.plx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.plx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.plx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 16%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.plx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.plx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.plx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.plx-kebab:hover { color: var(--dm-primary); }
+.plx-act { flex-shrink: 0; }
+/* Slideovers */
+.plx-form { display: flex; flex-direction: column; gap: .85rem; }
+.plx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.plx-facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; font-size: var(--dm-text-sm); }
+.plx-facts dt { color: var(--dm-text-muted); }
+.plx-facts dd { margin: 0; }
+.plx-desc { margin: 0; }
+.plx-sub { margin: .25rem 0 0; font-size: var(--dm-text-sm); font-weight: 600; }
+.plx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.plx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.plx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.plx-setting .form-label { margin: 0; }
+.plx-json { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.plx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); flex-wrap: wrap; }
+.plx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.plx-spacer { flex: 1; }
+@media (max-width: 640px) { .plx-main small { white-space: normal; } .plx-chips { display: none; } }
+</style>

package/admin/js/templates/roles.html

@@ -1,10 +1,81 @@
-<div class="view-header">
-    <h1><span data-icon="shield"></span> Roles &amp; Permissions</h1>
-    <button id="btn-add-role" class="btn btn-primary"><span data-icon="plus"></span> Add Role</button>
-</div>
+<!-- Roles. Bound with M.applyBindings - see admin/js/views/roles.js, which also inserts the row template
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the Tool
+     banner is the heading, and New role is a banner action. -->
+<div class="rlx">
+    <p class="rlx-note">Who can do what. A user holds one role (plus any extra ones); a role's level decides who
+        outranks whom, and its permissions what its holders may use.
+        <span data-help-title="Roles" data-help="Level 0 is the root role: it holds every permission, plugins included, and cannot be deleted. A lower number outranks a higher one - an admin can only manage users below their own level. Plugins bring roles of their own; those go when the plugin is uninstalled. A role with an admin scope confines its holders to the admin screens it names."></span></p>
+
+    <p class="rlx-scope" data-bind-hidden="!projectSlug">Showing only roles in the <strong data-bind-text="projectSlug"></strong> project.
+        <a href="#/roles">Show all roles</a></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="roles-table"></div>
+    <p class="rlx-alert" data-bind-hidden="!orphanText.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span data-bind-text="orphanText.value"></span>
+    </p>
+
+    <div class="rlx-card">
+        <div class="rlx-bar">
+            <div class="rlx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showBuiltIn" data-bind-class="filter.value === 'built-in' && 'is-on'">Built in <b data-bind-text="counts.value['built-in']"></b></button>
+                <button type="button" data-on-click="showCustom" data-bind-class="filter.value === 'custom' && 'is-on'">Yours <b data-bind-text="counts.value.custom"></b></button>
+                <button type="button" data-on-click="showPlugins" data-bind-class="filter.value === 'plugins' && 'is-on'" data-bind-hidden="!counts.value.plugins">Plugins <b data-bind-text="counts.value.plugins"></b></button>
+            </div>
+            <input type="search" class="form-input rlx-search" placeholder="Search roles…" aria-label="Search roles" data-model="query.value">
+            <span data-help-title="The list" data-help="Most senior first. Click a role to set its permissions. Right-click it (or ⋮, or Shift+F10) to duplicate it, copy its name or delete it. Built-in roles and plugin roles cannot be deleted here; a role nobody holds says so."></span>
+        </div>
+        <p class="rlx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="rlx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="rlx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="rlx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.rlx { display: flex; flex-direction: column; gap: .75rem; }
+.rlx [hidden], .rlx-form [hidden] { display: none !important; }
+.rlx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.rlx-note.is-bad { color: var(--dm-danger); }
+.rlx-scope { margin: 0; padding: .5rem .75rem; border-radius: var(--dm-radius-md); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-primary) 10%, transparent); color: var(--dm-text); }
+.rlx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-text); }
+.rlx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.rlx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.rlx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.rlx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.rlx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.rlx-seg button + button { border-left: 1px solid var(--dm-border); }
+.rlx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.rlx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.rlx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.rlx-list { display: flex; flex-direction: column; }
+.rlx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.rlx-row:last-child { border-bottom: 0; }
+.rlx-row:hover, .rlx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.rlx-badge { flex-shrink: 0; min-width: 6.5rem; }
+.rlx-badge .badge { white-space: nowrap; }
+.rlx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.rlx-main strong, .rlx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rlx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.rlx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.rlx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.rlx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 15%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.rlx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.rlx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.rlx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.rlx-kebab:hover { color: var(--dm-primary); }
+/* New role slideover */
+.rlx-form { display: flex; flex-direction: column; gap: .85rem; }
+.rlx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.rlx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rlx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rlx-preview { display: flex; align-items: center; gap: .5rem; }
+.rlx-preview .badge { white-space: nowrap; flex-shrink: 0; }
+.rlx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.rlx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.rlx-spacer { flex: 1; }
+@media (max-width: 640px) { .rlx-chips { display: none; } .rlx-badge { min-width: 0; } }
+</style>