@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/iam/user-permission-matrix.component.html.ejs

@@ -0,0 +1,231 @@
+<div class="flex flex-col flex-1 min-h-0 min-w-0 w-full overflow-hidden bg-slate-50 dark:bg-[#0D1E3A]">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 shrink-0 sm:items-center sm:justify-between p-6 sm:py-6 border-b bg-card dark:bg-[#0D1E3A] z-10">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex items-center gap-x-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <a *ngIf="SCREEN | accessCtrl: 'admin-user-management'" id="qa-user-permission-matrix__admin-user-management" data-qa-id="qa-user-permission-matrix__admin-user-management" data-component-id="admin-user-management" data-screen-id="user-permission-matrix" routerLink="/admin/user-management" class="hover:underline text-primary-600 dark:text-primary-400">Users</a>
+                <span class="text-slate-400">/</span>
+                <span>User Permission Matrix</span>
+            </div>
+            <!-- Title -->
+            <div class="mt-2 text-3xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-white flex items-center gap-x-3">
+                <span>User Permission Matrix</span>
+                @if (isAnyToggleProcessing()) {
+                    <span class="inline-flex items-center gap-x-1.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 px-2.5 py-1 text-xs font-semibold text-amber-800 dark:text-amber-400 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-500/20 animate-pulse">
+                        <mat-icon svgIcon="refresh-cw" class="size-3.5 animate-spin text-amber-600 dark:text-amber-400"></mat-icon>
+                        Syncing Permissions...
+                    </span>
+                }
+            </div>
+        </div>
+        <!-- Actions & Search -->
+        <div class="flex flex-col sm:flex-row items-center gap-3 mt-6 sm:mt-0">
+            <!-- Search Group -->
+            <div class="flex items-center w-full sm:w-[460px] rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#0D1E3A] shadow-sm transition-all focus-within:ring-1 focus-within:ring-primary-500 focus-within:border-primary-500 overflow-hidden h-10">
+                <!-- Dropdown -->
+                <div class="relative flex items-center border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 h-full">
+                    <select [value]="searchScope()" (change)="onSearchScopeChange($event)" 
+                            class="h-full py-0 pl-3 pr-7 bg-transparent border-0 text-sm font-medium text-slate-600 dark:text-slate-300 focus:ring-0 cursor-pointer appearance-none outline-none">
+                        <option value="ALL">All Levels</option>
+                        <option value="SCREEN">Screens Only</option>
+                    </select>
+                    <mat-icon class="absolute right-1.5 size-4 text-slate-400 pointer-events-none" svgIcon="chevron-down"></mat-icon>
+                </div>
+                <!-- Input -->
+                <div class="relative flex-1 flex items-center h-full">
+                    <mat-icon class="absolute left-3 size-4.5 text-slate-400 pointer-events-none" svgIcon="search"></mat-icon>
+                    <input [value]="searchTerm()" (input)="onSearchTermChange($event)" type="text"
+                           class="w-full h-full pl-9 pr-10 bg-transparent border-0 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:ring-0 outline-none"
+                           [placeholder]="searchScope() === 'ALL' ? 'Search screens, components, descriptions…' : 'Search screens only…'">
+                    @if (searchTerm()) {
+                        <button id="qa-user-permission-matrix__clear-search" data-qa-id="qa-user-permission-matrix__clear-search" data-component-id="clear-search" data-screen-id="user-permission-matrix" *ngIf="SCREEN | accessCtrl: 'clear-search'" (click)="clearSearch()" class="absolute right-2 p-1 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-200 dark:hover:text-slate-200 dark:hover:bg-slate-700 transition-colors focus:outline-none flex items-center justify-center">
+                            <mat-icon class="size-4" svgIcon="x"></mat-icon>
+                        </button>
+                    }
+                </div>
+            </div>
+
+            <button *ngIf="SCREEN | accessCtrl: 'load-data'" id="qa-user-permission-matrix__load-data" data-qa-id="qa-user-permission-matrix__load-data" data-component-id="load-data" data-screen-id="user-permission-matrix" (click)="loadData()" [disabled]="isUiLocked()"
+                    class="inline-flex items-center justify-center px-4 h-10 bg-white dark:bg-[#0D1E3A] border border-slate-300 dark:border-slate-800 rounded-xl text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-800 transition disabled:opacity-50 disabled:cursor-not-allowed">
+                <mat-icon class="mr-2 text-slate-500 dark:text-slate-400 size-5" [class.animate-spin]="isUiLocked()" svgIcon="refresh-cw"></mat-icon>
+                <span>Refresh Grid</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden">
+        <!-- Matrix Table -->
+        <div class="bg-card dark:bg-[#0D1E3A]/50 flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden border-t">
+            <!-- Scrollable Grid -->
+            <div class="matrix-scroll overflow-auto flex-1 min-h-0 min-w-0 w-full bg-white dark:bg-[#0D1E3A]">
+                <table class="matrix-table border-separate border-spacing-0">
+                    <thead>
+                        <tr class="border-b bg-slate-50 dark:bg-slate-800/20">
+                            <!-- Sticky Top-Left Corner Header -->
+                            <th class="sticky left-0 top-0 z-30 px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 bg-slate-50 dark:bg-slate-800/60 border-r border-b border-slate-200 dark:border-slate-800 min-w-[380px]">
+                                System Screens & Components
+                            </th>
+                            <!-- Sticky User Header -->
+                            @if (isLoading()) {
+                                <th class="sticky top-0 z-20 px-6 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300 min-w-[170px] bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-800">
+                                    <div class="flex flex-col items-center">
+                                        <div class="h-6 w-24 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                                    </div>
+                                </th>
+                            } @else {
+                                <th class="sticky top-0 z-20 px-6 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300 min-w-[170px] bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-800">
+                                    <div class="flex flex-col items-center">
+                                        <span class="text-blue-700 dark:text-blue-400 font-bold bg-blue-50/80 dark:bg-blue-950/20 px-2.5 py-1 rounded-lg border border-blue-100 dark:border-blue-900/40">
+                                            {{ user()?.username || 'User' }}
+                                        </span>
+                                    </div>
+                                </th>
+                            }
+                        </tr>
+                    </thead>
+                    @if (isLoading()) {
+                        <tbody app-role-permission-skeleton [rolesCount]="1"></tbody>
+                    } @else {
+                        <tbody>
+                            @for (group of paginatedScreensData(); track (group.cleanScreenId || group.screen.screenId || $index)) {
+                                <!-- Screen Header Row (Collapsible) -->
+                                <tr class="bg-slate-100/80 dark:bg-slate-800/80 font-bold transition-colors select-none">
+                                    <!-- Sticky Screen Metadata Column -->
+                                    <td *ngIf="SCREEN | accessCtrl: 'toggle-screen-collapse'" id="qa-user-permission-matrix__toggle-screen-collapse" data-qa-id="qa-user-permission-matrix__toggle-screen-collapse" data-component-id="toggle-screen-collapse" data-screen-id="user-permission-matrix" (click)="toggleScreenCollapse(group.cleanScreenId)" 
+                                        class="sticky left-0 z-10 px-6 py-3 border-r border-b border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-800 cursor-pointer hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                                        <div class="flex items-start gap-x-2 min-w-0">
+                                            <mat-icon svgIcon="chevron-right" class="text-slate-500 size-4 mt-0.5 shrink-0 transition-transform duration-300 ease-in-out" [class.rotate-90]="!isScreenCollapsed(group.cleanScreenId)"></mat-icon>
+                                            <mat-icon svgIcon="monitor" class="text-indigo-600 dark:text-indigo-400 size-4 mt-0.5 shrink-0"></mat-icon>
+                                            <div class="min-w-0 flex flex-col gap-1">
+                                                <div class="flex flex-wrap items-center gap-2">
+                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-400 border border-indigo-200/50 dark:border-indigo-900/40" [innerHTML]="highlightText(group.cleanScreenId)"></span>
+                                                    <span class="text-sm font-semibold text-slate-800 dark:text-slate-100" [innerHTML]="highlightText(getCleanScreenName(group.screen.screenName))"></span>
+                                                </div>
+                                                @if (group.screen.description) {
+                                                    <p class="text-xs font-normal text-slate-500 dark:text-slate-400 leading-relaxed" [innerHTML]="highlightText(group.screen.description)"></p>
+                                                }
+                                                <p class="text-[10px] font-normal text-slate-400 dark:text-slate-500">
+                                                    {{ group.components.length }} component{{ group.components.length === 1 ? '' : 's' }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <!-- Screen Toggles for User -->
+                                    <td (click)="$event.stopPropagation()" class="px-6 py-3 border-b border-slate-200 dark:border-slate-800 text-center bg-slate-100/40 dark:bg-slate-800/40">
+                                        <div class="flex items-center justify-center gap-2">
+                                            @if (isToggleProcessing(getScreenToggleKey(group))) {
+                                                <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-primary-600"></div>
+                                            }
+                                            <div id="qa-user-permission-matrix__toggle-screen-permission" data-qa-id="qa-user-permission-matrix__toggle-screen-permission" data-component-id="toggle-screen-permission" data-screen-id="user-permission-matrix" *ngIf="SCREEN | accessCtrl: 'toggle-screen-permission'" class="role-access-toggle-trigger"
+                                                 [class.role-access-toggle-trigger--disabled]="isScreenToggleDisabled(group)"
+                                                 role="button" [attr.tabindex]="isScreenToggleDisabled(group) ? -1 : 0"
+                                                 [attr.aria-label]="'Toggle screen access for ' + getCleanScreenId(group.screen.screenId, group.screen.screenName)"
+                                                 (click)="toggleScreenPermission(group)"
+                                                 (keydown.enter)="toggleScreenPermission(group)"
+                                                 (keydown.space)="$event.preventDefault(); toggleScreenPermission(group)">
+                                                <div class="permission-toggle-visual" [class.permission-toggle-visual--checked]="isClusterPermissionMapped(group)"></div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                
+                                <!-- Components Rows -->
+                                @if (!isScreenCollapsed(group.cleanScreenId)) {
+                                    @for (comp of group.components; track (comp.componentId || $index)) {
+                                        <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-800/10 transition-colors">
+                                            <!-- Sticky Left Component Details -->
+                                            <td class="sticky left-0 z-10 px-8 py-3.5 border-r border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-[#0D1E3A]">
+                                                <div class="flex items-center gap-x-2">
+                                                    <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full"
+                                                          [ngClass]="{
+                                                              'bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400 border border-blue-100 dark:border-blue-900/30': comp.componentType === 'BUTTON',
+                                                              'bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 border border-amber-100 dark:border-amber-900/30': comp.componentType === 'INPUT' || comp.componentType === 'SELECT' || comp.componentType === 'TOGGLE',
+                                                              'bg-purple-50 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400 border border-purple-100 dark:border-purple-900/30': comp.componentType === 'TAB',
+                                                              'bg-slate-50 text-slate-700 dark:bg-slate-800 dark:text-slate-300 border border-slate-100 dark:border-slate-800': comp.componentType !== 'BUTTON' && comp.componentType !== 'TAB' && comp.componentType !== 'INPUT' && comp.componentType !== 'SELECT' && comp.componentType !== 'TOGGLE'
+                                                          }">
+                                                        {{ comp.componentType }}
+                                                    </span>
+                                                    <div class="font-semibold text-slate-850 dark:text-slate-200 text-sm" [innerHTML]="highlightText(comp.componentName)"></div>
+                                                </div>
+                                                @if (comp.description) {
+                                                    <div class="text-xs text-slate-500 dark:text-slate-400 mt-1 pl-2 leading-relaxed" [innerHTML]="highlightText(comp.description)"></div>
+                                                }
+                                                <div class="text-xs text-slate-400 dark:text-slate-500 mt-1 pl-2 font-mono" [innerHTML]="highlightText(comp.componentId)"></div>
+                                            </td>
+                                            <!-- Mapping toggles -->
+                                            <td class="px-6 py-3.5 text-center border-b border-slate-200 dark:border-slate-800">
+                                                <div class="flex items-center justify-center gap-2">
+                                                    @if (isToggleProcessing(getComponentToggleKey(comp.componentId || ''))) {
+                                                        <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-primary-600"></div>
+                                                    }
+                                                    <div id="qa-user-permission-matrix__toggle-permission" data-qa-id="qa-user-permission-matrix__toggle-permission" data-component-id="toggle-permission" data-screen-id="user-permission-matrix" *ngIf="SCREEN | accessCtrl: 'toggle-permission'" class="role-access-toggle-trigger"
+                                                         [class.role-access-toggle-trigger--disabled]="isComponentToggleDisabled(group, comp.componentId || '')"
+                                                         role="button" [attr.tabindex]="isComponentToggleDisabled(group, comp.componentId || '') ? -1 : 0"
+                                                         [attr.aria-label]="'Toggle component access for ' + (comp.componentName || comp.componentId || '')"
+                                                         (click)="togglePermission(comp.componentId || '', group.screen.screenId || '')"
+                                                         (keydown.enter)="togglePermission(comp.componentId || '', group.screen.screenId || '')"
+                                                         (keydown.space)="$event.preventDefault(); togglePermission(comp.componentId || '', group.screen.screenId || '')">
+                                                        <div class="permission-toggle-visual" [class.permission-toggle-visual--checked]="isClusterComponentPermissionMapped(group, comp.componentId || '')"></div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    }
+                                    @if (group.components.length === 0) {
+                                        <tr class="bg-slate-50/50 dark:bg-slate-800/30">
+                                            <td [attr.colspan]="2" class="px-8 py-6 border-b border-slate-200 dark:border-slate-800 text-sm text-slate-500 dark:text-slate-400 italic text-center">
+                                                No sub-components found for this screen.
+                                            </td>
+                                        </tr>
+                                    }
+                                }
+                            }
+                        </tbody>
+                    }
+                </table>
+            </div>
+        </div>
+
+        <!-- Paginator & Footer Info Hint — pinned at bottom of viewport -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between border-t bg-card dark:bg-[#0D1E3A] shrink-0 px-6 z-20">
+            <mat-paginator
+                class="bg-transparent [&_.mat-mdc-paginator-container]:justify-start"
+                [length]="isLoading() ? 0 : filteredScreensData().length"
+                [pageSize]="pageSize()"
+                [pageIndex]="currentPage()"
+                [pageSizeOptions]="[10, 25, 50, 100]"
+                [disabled]="isUiLocked()"
+                (page)="onPageChange($event)">
+            </mat-paginator>
+
+            <div class="py-3 text-xs text-slate-400 flex items-center gap-x-2">
+                <mat-icon svgIcon="info" class="size-4 shrink-0"></mat-icon>
+                <span>Any change will apply immediately. The UI will use these attributes.</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Floating: show only enabled screens for this user -->
+    <button *ngIf="SCREEN | accessCtrl: 'show-enabled-only'"
+        type="button"
+        id="qa-user-permission-matrix__show-enabled-only"
+        data-qa-id="qa-user-permission-matrix__show-enabled-only"
+        data-component-id="show-enabled-only"
+        data-screen-id="user-permission-matrix"
+        class="matrix-enabled-fab"
+        [class.matrix-enabled-fab--active]="showEnabledOnly()"
+        [disabled]="isLoading()"
+        (click)="toggleShowEnabledOnly()"
+        [attr.aria-pressed]="showEnabledOnly()"
+        title="Show only screens already enabled for this user">
+        <div class="matrix-enabled-fab__text">
+            <span class="matrix-enabled-fab__label">{{ showEnabledOnly() ? 'Enabled only' : 'Show enabled' }}</span>
+            <span class="matrix-enabled-fab__count">{{ enabledScreenCount() }} enabled</span>
+        </div>
+        <div class="permission-toggle-visual"
+             [class.permission-toggle-visual--checked]="showEnabledOnly()"
+             aria-hidden="true"></div>
+    </button>
+</div>

package/src/templates/angular/iam/user-permission-matrix.component.scss.ejs

@@ -0,0 +1,216 @@
+/* SCSS styles for User Permission Mapping Component */
+:host {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0%;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Let the grid grow past the viewport so overflow-auto can scroll horizontally. */
+.matrix-scroll {
+    -webkit-overflow-scrolling: touch;
+}
+
+.matrix-table {
+    width: max-content;
+    min-width: 100%;
+    table-layout: auto;
+    border-collapse: separate;
+}
+
+.matrix-table th,
+.matrix-table td {
+    box-sizing: border-box;
+}
+
+.mat-mdc-checkbox {
+    --mdc-checkbox-selected-icon-color: var(--theme-color-primary-600);
+    --mdc-checkbox-selected-focus-icon-color: var(--theme-color-primary-600);
+    --mdc-checkbox-selected-hover-icon-color: var(--theme-color-primary-600);
+    --mdc-checkbox-selected-pressed-icon-color: var(--theme-color-primary-600);
+    --mdc-checkbox-unselected-icon-color: #94a3b8; /* Slate 400 */
+}
+
+.role-access-toggle-trigger {
+    display: inline-flex;
+    cursor: pointer;
+    border-radius: 9999px;
+    outline: none;
+}
+
+.role-access-toggle-trigger:focus-visible {
+    box-shadow: 0 0 0 2px var(--theme-color-primary-500);
+}
+
+.role-access-toggle-trigger--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.permission-toggle-visual {
+    position: relative;
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    background-color: #cbd5e1;
+    transition: background-color 150ms ease-in-out;
+}
+
+.permission-toggle-visual::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    background-color: #fff;
+    color: var(--theme-color-primary-600);
+    font-size: 10px;
+    font-weight: 700;
+    transition: transform 150ms ease-in-out;
+}
+
+.permission-toggle-visual--checked {
+    background-color: var(--theme-color-primary-500);
+}
+
+.permission-toggle-visual--checked::after {
+    content: '✓';
+    transform: translateX(1rem);
+}
+
+/* Ensure background is solid behind sticky columns to prevent cell content overlay */
+.sticky.left-0 {
+    position: sticky;
+    left: 0;
+    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08); /* Subtle right boundary shadow */
+}
+
+/* Fix sticky header alignment */
+.sticky.top-0 {
+    position: sticky;
+    top: 0;
+}
+
+/* Fix sticky footer alignment */
+.sticky.bottom-0 {
+    position: sticky;
+    bottom: 0;
+    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
+}
+
+/* Set higher z-index for top-left intersection node */
+th.sticky.left-0.top-0 {
+    z-index: 30 !important;
+}
+
+/* Dark mode sticky chrome — navy #0D1E3A */
+:host-context(.dark) {
+    .sticky.left-0 {
+        background-color: #0D1E3A !important;
+    }
+    
+    .sticky.top-0 {
+        background-color: #132847 !important;
+        &.left-0 {
+            background-color: #132847 !important;
+        }
+    }
+    
+    td.sticky.left-0 {
+        background-color: #0D1E3A !important;
+    }
+
+    .sticky.bottom-0 {
+        background-color: #0D1E3A !important;
+    }
+}
+
+mat-paginator {
+    width: 100%;
+    @media (min-width: 640px) {
+        width: auto !important;
+    }
+}
+
+.matrix-enabled-fab {
+    position: absolute;
+    right: 1.25rem;
+    bottom: 5.5rem;
+    z-index: 40;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.625rem 0.875rem;
+    border-radius: 9999px;
+    border: 1px solid rgb(226 232 240);
+    background: #fff;
+    box-shadow: 0 10px 25px -8px rgba(15, 23, 42, 0.35);
+    cursor: pointer;
+    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.matrix-enabled-fab:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--theme-color-primary-500) 45%, transparent);
+    box-shadow: 0 12px 28px -8px rgba(16, 185, 129, 0.35);
+}
+
+.matrix-enabled-fab:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.matrix-enabled-fab--active {
+    border-color: color-mix(in srgb, var(--theme-color-primary-500) 55%, transparent);
+    background: var(--theme-color-primary-50);
+}
+
+.matrix-enabled-fab__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1.15;
+    text-align: left;
+}
+
+.matrix-enabled-fab__label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: rgb(15 23 42);
+}
+
+.matrix-enabled-fab__count {
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: rgb(100 116 139);
+}
+
+:host-context(.dark) {
+    .matrix-enabled-fab {
+        background: #0D1E3A;
+        border-color: rgb(51 65 85);
+    }
+
+    .matrix-enabled-fab--active {
+        background: color-mix(in srgb, var(--theme-color-primary-900) 35%, transparent);
+        border-color: color-mix(in srgb, var(--theme-color-primary-500) 45%, transparent);
+    }
+
+    .matrix-enabled-fab__label {
+        color: #f8fafc;
+    }
+
+    .matrix-enabled-fab__count {
+        color: rgb(148 163 184);
+    }
+}
+