body { } /* Override FluentUI reboot.css scroll-behavior: smooth on . FluentUI's reboot.css sets html { scroll-behavior: smooth } which causes mouse-wheel scrolling to feel sluggish/unresponsive on Windows. Restoring instant scroll gives natural, responsive scroll on all pages. */ html { scroll-behavior: auto; } :root .lpx-brand-logo { --lpx-logo: url('/images/logo/leptonx/logo-light.png'); --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png'); } /* ========================================================================== FLUENT DIALOG — STICKY FOOTER (scrollable body, pinned action bar) FluentDialogBody/Footer render as
. fluent-dialog::part(control) defaults to display:grid with no max-height, so the dialog can grow taller than the viewport. Fix: make part(control) a flex column with max-height, then set the body to flex:1 overflow-y:auto and the footer to flex-shrink:0. NOTE: overflow is intentionally NOT set to hidden here — doing so creates a stacking/clipping context that traps absolutely-positioned calendar popups (FluentDatePicker). The flex layout + body overflow-y:auto already contain scrollable content correctly without needing overflow:hidden on the control. ========================================================================== */ fluent-dialog::part(control) { display: flex !important; flex-direction: column !important; max-height: calc(100vh - 80px) !important; padding: 0 !important; /* neutralise web component's built-in 24px padding */ } /* Wide layout for the long-form RBI IT Governance Compliance Guide dialog */ fluent-dialog[aria-label="RBI IT Governance Compliance Guide"]::part(control) { width: min(840px, 92vw) !important; } /* Body: takes all remaining height and scrolls. Padding is set here because FluentDialogBody renders as
whose ancestor chain never includes the modal component's Blazor scope — so ::deep rules from scoped .razor.css files cannot reach it. ALL body/footer chrome lives here. */ fluent-dialog .fluent-dialog-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; /* critical: prevents flex item from overflowing */ padding: 4px 28px 12px; } /* Footer: pinned at bottom, full sticky-bar chrome. Same scope-mismatch reasoning as body — global CSS is the only reliable target. */ fluent-dialog .fluent-dialog-footer { flex-shrink: 0; border-top: 1px solid var(--neutral-stroke-divider-rest); background: var(--neutral-layer-2); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); padding: 14px 28px !important; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } @media (max-width: 640px) { fluent-dialog .fluent-dialog-body { padding: 4px 16px 8px; } fluent-dialog .fluent-dialog-footer { padding: 12px 16px !important; } } /* ========================================================================== GLOBAL CONTRAST & ACCESSIBILITY FIXES These overrides ensure WCAG AA compliance regardless of design-system token computation quirks. ========================================================================== */ /* --- Accent buttons: force white foreground --- Root cause A: AccentBaseColor="#6366F1" (Indigo-500, luminance ≈ 0.20) → FluentUI algorithm chooses BLACK foreground-on-accent (4.9:1 vs white 4.3:1) → dark-on-dark. Fix A: AccentBaseColor changed to "#4F46E5" (Indigo-600, luminance ≈ 0.12) → forces WHITE (6.2:1 ratio) via token algorithm. Root cause B: Shadow DOM internal rule `:host([appearance='accent']) .control` has specificity [0,2,0] which WINS over external `::part(control)` at [0,1,1]. Fix B: Use `!important` in the ::part() rule — author !important ALWAYS beats shadow DOM normal styles, regardless of specificity. Use `:defined` pseudo-class to push specificity to [0,2,1] as belt-and-suspenders. Root cause C: `fluent-design-system-provider` JS writes `--foreground-on-accent-rest` as an INLINE style with the computed value — inline styles beat CSS rules for custom properties. We override via a direct CSS token value on the provider element AFTER its initial inline style is set (handled by the JS in MainLayout.razor.cs). */ /* Primary fix: !important on ::part() overrides shadow DOM's own author styles */ fluent-button[appearance="accent"]:defined::part(control) { color: #ffffff !important; forced-color-adjust: none; } /* All interactive states */ fluent-button[appearance="accent"]:defined:hover::part(control), fluent-button[appearance="accent"]:defined:focus::part(control), fluent-button[appearance="accent"]:defined:active::part(control), fluent-button[appearance="accent"]:defined:focus-visible::part(control) { color: #ffffff !important; } /* Token-level override: set --foreground-on-accent-* on the design system provider. FluentUI's JS writes these as inline styles: element.style.setProperty('--foreground-on-accent-rest', computed). Inline styles (without !important) are BEATEN by author stylesheet !important rules. Therefore, declaring these as !important in our author stylesheet wins. */ fluent-design-system-provider { --foreground-on-accent-rest: #ffffff !important; --foreground-on-accent-hover: #ffffff !important; --foreground-on-accent-active: #ffffff !important; --foreground-on-accent-focus: #ffffff !important; } /* --- Icon fill inside FluentButton (all appearances) --- FluentIcon renders a raw in the light DOM — there is NO web component in the rendered HTML. The fill is set as an INLINE STYLE on the SVG element by FluentIcon.razor.cs via GetIconColor() which defaults to Color.Accent = var(--accent-fill-rest). When using IconStart/IconEnd parameters, FluentButton calls InverseColor(true) on icons inside accent buttons → sets fill to var(--neutral-layer-1) (white). When using child content, InverseColor is NEVER called, so icons keep the accent fill (indigo-on-indigo → terrible contrast). Fix: CSS author !important rules BEAT inline styles per CSS Cascade spec. Target the element directly inside each button appearance. */ /* Accent → white icons (InverseColor equivalent for slotted children) */ fluent-button[appearance="accent"] svg { fill: #ffffff !important; } /* Neutral / no appearance → neutral foreground */ fluent-button[appearance="neutral"] svg, fluent-button:not([appearance]) svg { fill: var(--neutral-foreground-rest) !important; } /* Outline → neutral foreground */ fluent-button[appearance="outline"] svg { fill: var(--neutral-foreground-rest) !important; } /* Stealth → neutral foreground (icon-only toolbar buttons etc.) */ fluent-button[appearance="stealth"] svg { fill: var(--neutral-foreground-rest) !important; } /* --- FluentAutocomplete dropdown z-index fix ───────────────────────────────── Root cause (confirmed March 2026): fluent-card shadow adoptedStyleSheet sets TWO containment rules: 1. :host { contain: content } — contain:paint clips absolutely-positioned descendants 2. :host { content-visibility: auto } — Chrome applies contain:paint even for on-screen elements when content-visibility:auto is set, which also clips the dropdown. Fix: override BOTH properties from the light DOM (external selector wins on specificity). */ fluent-card.list-toolbar { position: relative; z-index: 10; contain: none; /* overrides shadow :host { contain: content } */ content-visibility: visible; /* overrides shadow :host { content-visibility: auto } which implies contain:paint in Chrome, clipping dropdowns */ } /* Lightweight (hyperlink-style) → accent foreground */ fluent-button[appearance="lightweight"] svg { fill: var(--accent-foreground-rest) !important; } /* Disabled → muted (system opacity handles the visual dim; only fix the fill) */ fluent-button[disabled] svg, fluent-button[aria-disabled="true"] svg { fill: var(--neutral-foreground-hint) !important; } /* --- Neutral & Outline buttons: dark-mode safe --- At BaseLayerLuminance 0.14 (dark), neutral-fill-rest is a dark neutral and neutral-foreground-rest is light — the system handles this automatically. The override below corrects any residual issues with hardcoded colors in third-party components. */ .app-shell.theme-dark fluent-button:not([appearance="accent"]):not([appearance="stealth"]) ::part(control) { color: var(--neutral-foreground-rest); } /* --- FluentDataGrid: comfortable row height + actions-cell overflow fix ------- Root cause (confirmed March 2026 by inspection of FluentDataGridCell.razor.css in the NuGet package): td[b-w6qdxfylwy] { height: ; overflow: hidden; } FluentDataGrid JS sets height: 32px inline on every . The built-in FluentDataGridCell scoped CSS adds overflow:hidden + text-overflow:ellipsis for text truncation. This clips any content taller than (32px - 10px padding). Fix A — comfortable row height: height: auto !important overrides the inline height:32px (inline styles lose to !important class rules). min-height:48px sets the comfortable floor. The row's implicit CSS-Grid track DOES correctly auto-size to the tallest cell in the row — but that alone does not make the OTHER cells fill that track (see Fix C below for the missing piece). Fix B — actions column cell overflow: td:has(.row-actions) targets only the cell containing the action buttons. overflow:visible lets 32px buttons render without clipping even if padding makes the content area slightly smaller. white-space:normal reverts the built-in whitespace:nowrap so flex layout of buttons works correctly. Fix C — broken/misaligned row borders when one column wraps onto more lines (confirmed 2026-08-07 via live DOM measurement on /identity/users): table.fluent-data-grid computes align-items: center (FluentUI's own default, not something this stylesheet sets). Because
is display:contents, every in a row is an independent CSS-Grid item sharing the row's implicit track — with align-items:center, each cell sizes to its OWN natural content height (floored by min-height:48px) and is vertically CENTERED within the row's track, rather than stretching to fill it. When one cell in the row is taller than the rest (e.g. a persona column that wraps to 3 lines), the short cells end up floating in the middle of that taller row, with visible gaps above and below — so whatever draws the row-divider line at each cell's own bottom edge no longer lines up across columns; the border reads as broken/staggered instead of one continuous line. align-items:stretch makes every cell fill the full row-track height, so all cells' bottom edges (and the divider line) line up again. This generalizes a fix previously applied only to .restructuring-history-grid (see below) to every FluentDataGrid app-wide. Content still centers correctly inside the now-taller cells via the existing align-content:center rules (framework default for ordinary cells; page-specific overrides for MultiLine cells). */ table.fluent-data-grid td { height: auto !important; /* override FluentDataGrid inline height:32px */ min-height: 48px; /* comfortable row height for data grids */ } table.fluent-data-grid { align-items: stretch !important; /* Fix C — see comment above: keeps every cell in a row at the same height so borders/dividers stay aligned */ } table.fluent-data-grid td:has(.row-actions) { overflow: visible; /* don't clip action-button borders or shadows */ white-space: normal; /* allow flex layout inside the cell */ } table.fluent-data-grid td:has(.grid-avatar) { overflow: visible; /* reveal the avatar circle — package td overflow:hidden clips it */ text-align: center; /* center the standalone avatar circle in its column */ padding-left: 4px; padding-right: 4px; } /* --- FluentDataGrid column header: prevent premature text clipping ----------- Root cause (re-confirmed 2026-08-02 via live DOM inspection, corrects the March 2026 diagnosis below): FluentDataGrid sets `style="width: calc(100% - 20px)"` directly as an INLINE style attribute on both .col-sort-button (sortable columns) and .col-title (non-sortable columns) — not merely via the scoped package stylesheet `[b-w6qdxfylwy] .col-sort-button { ... }`. That -20px gap is reserved for .col-options-button (column filter popover). We never enable column options, so the 20px is wasted and causes visible header text to be clipped by ellipsis even when the column is wide enough. Fix: restore full width on BOTH header wrapper elements. A selector-specificity war (the original approach here) can never beat an inline style with no !important — only !important on the stylesheet side can. The sort icon lives INSIDE the button (end slot) and shares space via flex layout, so it is unaffected by this override. */ table.fluent-data-grid .col-sort-button, table.fluent-data-grid .col-title { width: 100% !important; /* reclaim the 20px reserved for disabled col-options */ } /* --- FluentDataGrid sticky header: opaque background on ALL grids ------------ Package default (Microsoft.FluentUI.AspNetCore.Components 4.11.1, bundle.scp.css): `[b-hash] tr[row-type='sticky-header'] > th { background-color: var(--neutral-fill-stealth-rest); position: sticky; top: 0; }`. The "stealth" fill token is designed to blend with its surroundings, not to be opaque — so on any grid using GenerateHeaderOption.Sticky, data rows scrolling underneath the pinned header show through and overlap the header text (first found on /identity/users, confirmed via live DOM inspection 2026-08-07). Fix: this selector (0,2,3 specificity) beats the package's own scoped rule (0,2,2) on specificity alone regardless of stylesheet load order, so no !important is used — a page can still layer a more specific ::deep override (e.g. Users.razor.css) for its own header styling without a fight. Applies globally so the other ~65 pages using Sticky headers don't each need their own copy of this fix. */ table.fluent-data-grid tr[row-type='sticky-header'] > th { background-color: var(--neutral-layer-1); } /* --- Row action icon buttons (hover-reveal table actions) --- hover-reveal: .row-actions starts at opacity:0 in scoped CSS. ⚠️ CRITICAL: The opacity:1 reveal rule MUST live here in global-styles.css — NOT in the scoped .razor.css file. Reason: Blazor CSS isolation appends [b-xxxx] to all selectors in scoped CSS. Any ancestor selector that includes a non-scoped element (e.g. tr.hover) causes the scoping transform to silently drop the rule. Global CSS has no scope transform, so this rule always fires. ⚠️ CRITICAL (FluentDataGrid v4.11+):
has display:contents — no layout box, so the CSS :hover pseudo-class is NEVER fired on
. FluentDataGrid's JS adds class="hover" to
on pointer-enter. Use the class selector. Confirmed by DOM: getComputedStyle(tr).display = "contents". */ tr.hover .row-actions, tr:focus-within .row-actions { opacity: 1; } .row-action-btn { color: var(--neutral-foreground-hint); border: 1px solid transparent !important; /* !important needed: every scoped .razor.css file compiles a .row-action-btn[b-xxxx] { border: none } rule whose attribute-selector specificity beats a plain class selector. The !important ensures the global ghost-border wins across ALL pages. */ transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .row-action-btn:hover, .row-action-btn:focus-visible { color: var(--neutral-foreground-rest); background: var(--neutral-fill-stealth-hover); border-color: var(--neutral-stroke-rest) !important; /* !important to match base border !important above */ border-radius: 4px; } .row-action-btn:focus-visible { outline: 2px solid var(--focus-stroke-outer); outline-offset: 1px; } .row-action-danger:hover { color: #EF4444; background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35) !important; } .row-action-success:hover { color: #059669; background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.35) !important; } /* --- Stealth / icon-only header buttons --- Ensure sufficient icon contrast in both themes. */ .header-icon-btn fluent-icon, .menu-button fluent-icon, .theme-toggle-btn fluent-icon { color: var(--neutral-foreground-rest); } /* --- Status badge text contrast (dark-mode safe) --- Uses RGBA backgrounds so both light & dark modes keep readable text. Colours are checked: #10B981 on rgba(16,185,129,0.12) ≈ 4.6:1 on white ✓ #F59E0B on rgba(245,158,11,0.12) ≈ 4.5:1 on white ✓ (AA) #EF4444 on rgba(239,68,68,0.12) ≈ 4.8:1 on white ✓ Actual CSS classes defined below for use across all list pages. */ /* ── Status badge — used on list grids across all pages ──────────────────── */ .status-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .status-active { background: rgba(16, 185, 129, 0.12); color: #059669; } .status-inactive { background: rgba(156, 163, 175, 0.15); color: var(--neutral-foreground-hint); } .status-pending { background: rgba(245, 158, 11, 0.12); color: #D97706; } .status-overdue { background: rgba(239, 68, 68, 0.12); color: #DC2626; } .status-rejected, .status-error { background: rgba(239, 68, 68, 0.12); color: #DC2626; } .status-draft { background: rgba(107, 114, 128, 0.10); color: var(--neutral-foreground-hint); border: 1px solid rgba(107, 114, 128, 0.25); } .status-success { background: rgba(16, 185, 129, 0.12); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); } .status-default { background: rgba(156, 163, 175, 0.12); color: var(--neutral-foreground-hint); } .status-info { background: rgba(99, 102, 241, 0.10); color: #4F46E5; border: 1px solid rgba(99, 102, 241, 0.25); } .status-warning { background: rgba(245, 158, 11, 0.10); color: #D97706; border: 1px solid rgba(245, 158, 11, 0.25); } .status-matured { background: rgba(16, 185, 129, 0.10); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); } /* --- FluentValidationSummary & error messages --- Ensure error messages are dark-mode compatible. */ .app-shell.theme-dark fluent-validation-summary, .app-shell.theme-dark .validation-message { color: #F87171; /* Lighter red for dark-bg legibility */ } /* --- Input field placeholder contrast --- Default placeholder is often too faint (< 3:1). Boost to acceptable level. */ fluent-text-field::part(root) input::placeholder, fluent-search::part(root) input::placeholder { opacity: 0.6; } .app-shell.theme-dark fluent-text-field::part(root) input::placeholder, .app-shell.theme-dark fluent-search::part(root) input::placeholder { opacity: 0.55; color: #9ca3af; } /* --- Disabled button contrast --- Browsers reduce disabled opacity to ~0.38 by default which fails contrast. FluentUI handles this internally — document that we rely on the system. */ /* fluent-button[disabled] opacity managed by design system — do NOT override */ /* ========================================================================== GLOBAL FORM COMPONENTS — World-class outlined inputs (app-wide) Uses ::part() to pierce the Shadow DOM of FluentUI web components. Applies to ALL fluent-text-field and fluent-select instances in the app. Reference: AI-Agent-UI-Generation-Guide.md §7.4.1 ========================================================================== */ /* ── fluent-text-field & fluent-search: flex-column so label is ABOVE input ─── */ /* CRITICAL: must use flex+column, NOT block. The shadow DOM children (label, div.root) are in the HOST's layout context. display:block loses the column stacking — label sits beside the input. display:flex + flex-direction:column stacks them vertically (label on top). */ fluent-text-field, fluent-text-area, fluent-number-field, fluent-search { display: flex; flex-direction: column; width: 100%; min-width: 0; /* prevent grid-item overflow */ } /* Label — 13px / weight-500 / above the control */ fluent-text-field::part(label), fluent-text-area::part(label), fluent-number-field::part(label) { font-size: 13px; font-weight: 500; color: var(--neutral-foreground-rest); line-height: 1.4; margin-bottom: 5px; letter-spacing: 0; } /* Root (bordered box) — replaces the default underline appearance */ /* Note: fluent-text-area has no part="root" in its template; its border lives on part="control" below */ fluent-text-field::part(root), fluent-number-field::part(root) { border: 1.5px solid var(--neutral-stroke-rest); border-radius: 6px; background: var(--neutral-layer-1); min-height: 36px; align-items: center; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* Focus: accent border + subtle glow ring */ fluent-text-field:focus-within::part(root), fluent-number-field:focus-within::part(root) { border-color: var(--accent-fill-rest); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10); } /* Disabled state */ fluent-text-field[disabled]::part(root), fluent-number-field[disabled]::part(root) { background: var(--neutral-fill-stealth-rest); border-color: var(--neutral-stroke-rest); opacity: 0.6; } /* Control (the
/
/ that do NOT receive Blazor's [b-xxxx] scope attribute. Any selector in a scoped CSS file that targets these elements (e.g. table[b-xxxx]) will silently never match. Global CSS with a page-specific class qualifier is the only option. IMPLEMENTATION PER GRID: 1. Add Class="{page}-grid" to — FluentDataGrid propagates Class to the root element. 2. Override grid-template-columns with !important (beats the inline style set by the GridTemplateColumns="..." parameter). 3. Hide middle columns N+3..N-1 with display:none. 4. Reposition last (actions) column to grid track 3 with !important (beats the inline grid-column:N set by FluentDataGrid JS). 5. Set .row-actions { opacity: 1 } — always visible, no hover on touch. ========================================================================== */ @media (max-width: 767px) { /* ── GL Accounts list (Accounting > Accounts) ───────────────────────── Desktop columns: Code(1) | Name(2) | Type(3) | Currency(4) | Balance(5) | Status(6) | Actions(7) Mobile columns: Code(1) | Name(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.accounts-grid { grid-template-columns: 100px 1fr 72px !important; } /* Hide Type, Currency, Balance, Status (columns 3→6) */ table.fluent-data-grid.accounts-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.accounts-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.accounts-grid th:nth-child(7), table.fluent-data-grid.accounts-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch — no pointer hover on mobile */ table.fluent-data-grid.accounts-grid .row-actions { opacity: 1; } /* ── Customers list ──────────────────────────────────────────────────── Desktop columns: Code(1) | Name(2) | Mobile(3) | KYC(4) | Credit(5) | Employment(6) | Actions(7) Mobile columns: Code(1) | Name(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.customers-grid { grid-template-columns: 100px 1fr 72px !important; } /* Hide Mobile, KYC, Credit, Employment (columns 3→6) */ table.fluent-data-grid.customers-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.customers-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.customers-grid th:nth-child(7), table.fluent-data-grid.customers-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.customers-grid .row-actions { opacity: 1; } /* ── Products list ───────────────────────────────────────────────────── Desktop: Code(1) | Name(2) | Type(3) | Status(4) | MinAmt(5) | MaxAmt(6) | Actions(7) Mobile: Code(1) | Name(2) | Status(4→track 3) | Actions(7→track 4) */ table.fluent-data-grid.products-grid { /* minmax(0,1fr) prevents min-content expansion, keeps name column from overflowing */ grid-template-columns: 70px minmax(0, 1fr) 72px 56px !important; } /* Hide Type(3), MinAmount(5), MaxAmount(6) */ table.fluent-data-grid.products-grid th:nth-child(3), table.fluent-data-grid.products-grid td:nth-child(3), table.fluent-data-grid.products-grid th:nth-child(5), table.fluent-data-grid.products-grid td:nth-child(5), table.fluent-data-grid.products-grid th:nth-child(6), table.fluent-data-grid.products-grid td:nth-child(6) { display: none; } /* Reposition Status(4) → track 3 */ table.fluent-data-grid.products-grid th:nth-child(4), table.fluent-data-grid.products-grid td:nth-child(4) { grid-column: 3 !important; } /* Reposition Actions(7) → track 4 */ table.fluent-data-grid.products-grid th:nth-child(7), table.fluent-data-grid.products-grid td:nth-child(7) { grid-column: 4 !important; } /* Always visible on touch */ table.fluent-data-grid.products-grid .row-actions { opacity: 1; } /* ── Tenants list ────────────────────────────────────────────────────── Desktop columns: Code(1) | Name(2) | Plan(3) | Status(4) | CreatedOn(5) | Actions(6) Mobile columns: Code(1) | Name(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.tenants-grid { grid-template-columns: 100px 1fr 72px !important; } /* Hide Plan, Status, CreatedOn (columns 3→5) */ table.fluent-data-grid.tenants-grid th:nth-child(n+3):nth-child(-n+5), table.fluent-data-grid.tenants-grid td:nth-child(n+3):nth-child(-n+5) { display: none; } /* Reposition Actions (column 6) to track 3 */ table.fluent-data-grid.tenants-grid th:nth-child(6), table.fluent-data-grid.tenants-grid td:nth-child(6) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.tenants-grid .row-actions { opacity: 1; } /* loan-app-grid mobile: hide Customer(3), Amount(4), Tenure(5), Assigned(7); Status→track 3, Actions→track 4 */ table.fluent-data-grid.loan-app-grid { grid-template-columns: 56px 1fr 90px 60px !important; } table.fluent-data-grid.loan-app-grid th:nth-child(3), table.fluent-data-grid.loan-app-grid td:nth-child(3), table.fluent-data-grid.loan-app-grid th:nth-child(4), table.fluent-data-grid.loan-app-grid td:nth-child(4), table.fluent-data-grid.loan-app-grid th:nth-child(5), table.fluent-data-grid.loan-app-grid td:nth-child(5), table.fluent-data-grid.loan-app-grid th:nth-child(7), table.fluent-data-grid.loan-app-grid td:nth-child(7) { display: none !important; } table.fluent-data-grid.loan-app-grid th:nth-child(6), table.fluent-data-grid.loan-app-grid td:nth-child(6) { grid-column: 3 !important; } table.fluent-data-grid.loan-app-grid th:nth-child(8), table.fluent-data-grid.loan-app-grid td:nth-child(8) { grid-column: 4 !important; } table.fluent-data-grid.loan-app-grid .row-actions { opacity: 1; } /* kfs-grid mobile: show AppNo(1)+Status(3), hide Amount(2)+GeneratedAt(4)+AcknowledgedAt(5), Actions→track 3 */ table.fluent-data-grid.kfs-grid { grid-template-columns: 1fr 90px 72px !important; } table.fluent-data-grid.kfs-grid th:nth-child(2), table.fluent-data-grid.kfs-grid td:nth-child(2), table.fluent-data-grid.kfs-grid th:nth-child(4), table.fluent-data-grid.kfs-grid td:nth-child(4), table.fluent-data-grid.kfs-grid th:nth-child(5), table.fluent-data-grid.kfs-grid td:nth-child(5) { display: none !important; } /* Status(3)→track 2, Actions(6)→track 3 */ table.fluent-data-grid.kfs-grid th:nth-child(3), table.fluent-data-grid.kfs-grid td:nth-child(3) { grid-column: 2 !important; } table.fluent-data-grid.kfs-grid th:nth-child(6), table.fluent-data-grid.kfs-grid td:nth-child(6) { grid-column: 3 !important; } table.fluent-data-grid.kfs-grid .row-actions { opacity: 1; } /* underwriting-grid mobile: hide risk/dti/assigned columns (3,4,6), actions→track 3 */ table.fluent-data-grid.underwriting-grid { grid-template-columns: 1fr 1fr 96px !important; } table.fluent-data-grid.underwriting-grid th:nth-child(3), table.fluent-data-grid.underwriting-grid td:nth-child(3), table.fluent-data-grid.underwriting-grid th:nth-child(4), table.fluent-data-grid.underwriting-grid td:nth-child(4), table.fluent-data-grid.underwriting-grid th:nth-child(5), table.fluent-data-grid.underwriting-grid td:nth-child(5), table.fluent-data-grid.underwriting-grid th:nth-child(6), table.fluent-data-grid.underwriting-grid td:nth-child(6) { display: none !important; } table.fluent-data-grid.underwriting-grid th:nth-child(7), table.fluent-data-grid.underwriting-grid td:nth-child(7) { grid-column: 3 !important; } table.fluent-data-grid.underwriting-grid .row-actions { opacity: 1; } /* roles-grid mobile: hide default/public columns (2,3), actions→track 2 */ table.fluent-data-grid.roles-grid { grid-template-columns: 1fr 96px !important; } table.fluent-data-grid.roles-grid th:nth-child(2), table.fluent-data-grid.roles-grid td:nth-child(2), table.fluent-data-grid.roles-grid th:nth-child(3), table.fluent-data-grid.roles-grid td:nth-child(3) { display: none !important; } table.fluent-data-grid.roles-grid th:nth-child(4), table.fluent-data-grid.roles-grid td:nth-child(4) { grid-column: 2 !important; } table.fluent-data-grid.roles-grid .row-actions { opacity: 1; } /* ── Branches list ───────────────────────────────────────────────────── Desktop columns: Name(1) | Code(2) | City(3) | Contact(4) | Status(5) | Actions(6) Mobile columns: Name(1) | Actions → repositioned to track 2 */ table.fluent-data-grid.branches-grid { grid-template-columns: 1fr 72px !important; } /* Hide Code, City, Contact, Status (columns 2→5) */ table.fluent-data-grid.branches-grid th:nth-child(n+2):nth-child(-n+5), table.fluent-data-grid.branches-grid td:nth-child(n+2):nth-child(-n+5) { display: none; } /* Reposition Actions (column 6) to track 2 */ table.fluent-data-grid.branches-grid th:nth-child(6), table.fluent-data-grid.branches-grid td:nth-child(6) { grid-column: 2 !important; } /* Always visible on touch */ table.fluent-data-grid.branches-grid .row-actions { opacity: 1; } /* ── Departments list ────────────────────────────────────────────────── Desktop columns: Name(1) | Code(2) | Description(3) | Status(4) | Actions(5) Mobile columns: Name(1) | Status → repositioned to track 2 | Actions → track 3 */ table.fluent-data-grid.departments-grid { grid-template-columns: 1fr 90px 72px !important; } /* Hide Code(2) and Description(3) */ table.fluent-data-grid.departments-grid th:nth-child(2), table.fluent-data-grid.departments-grid td:nth-child(2), table.fluent-data-grid.departments-grid th:nth-child(3), table.fluent-data-grid.departments-grid td:nth-child(3) { display: none; } /* Reposition Status(4) → track 2 */ table.fluent-data-grid.departments-grid th:nth-child(4), table.fluent-data-grid.departments-grid td:nth-child(4) { grid-column: 2 !important; } /* Reposition Actions(5) → track 3 */ table.fluent-data-grid.departments-grid th:nth-child(5), table.fluent-data-grid.departments-grid td:nth-child(5) { grid-column: 3 !important; } /* Always visible on touch — no hover on mobile */ table.fluent-data-grid.departments-grid .row-actions { opacity: 1; } /* ── Communication logs grid ─────────────────────────────────────────── Desktop columns: Channel(1) | Recipient(2) | Status(3) | Template(4) | SentAt(5) | CreatedAt(6) Mobile columns: Channel(1) | Recipient(2) | Status(3→track 3) */ table.fluent-data-grid.communication-grid { grid-template-columns: 80px 1fr 80px !important; } /* Hide Template, SentAt, CreatedAt (columns 4→6) */ table.fluent-data-grid.communication-grid th:nth-child(n+4):nth-child(-n+6), table.fluent-data-grid.communication-grid td:nth-child(n+4):nth-child(-n+6) { display: none; } /* Reposition Status (column 3) to track 3 */ table.fluent-data-grid.communication-grid th:nth-child(3), table.fluent-data-grid.communication-grid td:nth-child(3) { grid-column: 3 !important; } /* ── Communication logs grid (logs-grid) ─────────────────────────────── Desktop cols: Avatar(1) | Recipient(2) | Channel(3) | Subject(4) | Status(5) | CreatedAt(6) | Template/Error(7) Mobile: Avatar(1) | Recipient(2) | Status(5→track 3) Hide: Channel(3), Subject(4), CreatedAt(6), Template/Error(7) */ table.fluent-data-grid.logs-grid { grid-template-columns: 56px 1fr 100px !important; } /* Hide Channel(3), Subject(4), CreatedAt(6), Template/Error(7) */ table.fluent-data-grid.logs-grid th:nth-child(3), table.fluent-data-grid.logs-grid td:nth-child(3), table.fluent-data-grid.logs-grid th:nth-child(4), table.fluent-data-grid.logs-grid td:nth-child(4), table.fluent-data-grid.logs-grid th:nth-child(6), table.fluent-data-grid.logs-grid td:nth-child(6), table.fluent-data-grid.logs-grid th:nth-child(7), table.fluent-data-grid.logs-grid td:nth-child(7) { display: none; } /* Reposition Status(5) → track 3 */ table.fluent-data-grid.logs-grid th:nth-child(5), table.fluent-data-grid.logs-grid td:nth-child(5) { grid-column: 3 !important; } /* ── Recovery Tracker grids ───────────────────────────────────────────── Bucket grid (4 cols): Bucket(1) | Cases(2) | TotalOverdue(3) | AvgDpd(4) Mobile: Bucket(1) | Cases(2) — hide cols 3-4 */ table.fluent-data-grid.bucket-grid { grid-template-columns: 1fr 80px !important; } table.fluent-data-grid.bucket-grid th:nth-child(n+3), table.fluent-data-grid.bucket-grid td:nth-child(n+3) { display: none; } /* Agent grid (5 cols): Avatar(1) | Agent(2) | ActiveCases(3) | TotalOverdue(4) | Resolved(5) Mobile: Avatar(1) | Agent(2) | ActiveCases(3) — hide cols 4-5 */ table.fluent-data-grid.agent-grid { grid-template-columns: 40px 1fr 70px !important; } table.fluent-data-grid.agent-grid th:nth-child(n+4), table.fluent-data-grid.agent-grid td:nth-child(n+4) { display: none; } /* Status grid (3 cols): Status(1) | Cases(2) | TotalOverdue(3) Mobile: Status(1) | Cases(2) — hide col 3 */ table.fluent-data-grid.status-grid { grid-template-columns: 1fr 80px !important; } table.fluent-data-grid.status-grid th:nth-child(n+3), table.fluent-data-grid.status-grid td:nth-child(n+3) { display: none; } /* ── Templates grid ──────────────────────────────────────────────────── Desktop cols: Avatar(1) | Name(2) | Channel(3) | Subject(4) | Body(5) | Status(6) | Modified(7) | Actions(8) Mobile: Avatar(1) | Name(2→track 2) | Actions(8→track 3) — hide cols 3-7 */ table.fluent-data-grid.templates-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide Channel, Subject, Body, Status, Modified (columns 3→7) */ table.fluent-data-grid.templates-grid th:nth-child(n+3):nth-child(-n+7), table.fluent-data-grid.templates-grid td:nth-child(n+3):nth-child(-n+7) { display: none; } /* Reposition Actions (column 8) to track 3 */ table.fluent-data-grid.templates-grid th:nth-child(8), table.fluent-data-grid.templates-grid td:nth-child(8) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.templates-grid .row-actions { opacity: 1; } /* ── Journal Entries list (Accounting > Journal Entries) ────────────────── Desktop: Avatar(1) | Date(2) | Reference(3) | Description(4) | Debit(5) | Credit(6) | Status(7) | Actions(8) Mobile: Avatar(1) | Reference(3→track 2) | Status(7→track 3) | Actions(8→track 4) */ table.fluent-data-grid.journal-entries-grid { grid-template-columns: 56px 1fr 80px 60px !important; } /* Hide Date(2), Description(4), Debit(5), Credit(6) */ table.fluent-data-grid.journal-entries-grid th:nth-child(2), table.fluent-data-grid.journal-entries-grid td:nth-child(2), table.fluent-data-grid.journal-entries-grid th:nth-child(4), table.fluent-data-grid.journal-entries-grid td:nth-child(4), table.fluent-data-grid.journal-entries-grid th:nth-child(5), table.fluent-data-grid.journal-entries-grid td:nth-child(5), table.fluent-data-grid.journal-entries-grid th:nth-child(6), table.fluent-data-grid.journal-entries-grid td:nth-child(6) { display: none; } /* Reposition Reference(3) → track 2 */ table.fluent-data-grid.journal-entries-grid th:nth-child(3), table.fluent-data-grid.journal-entries-grid td:nth-child(3) { grid-column: 2 !important; } /* Reposition Status(7) → track 3 */ table.fluent-data-grid.journal-entries-grid th:nth-child(7), table.fluent-data-grid.journal-entries-grid td:nth-child(7) { grid-column: 3 !important; } /* Reposition Actions(8) → track 4 */ table.fluent-data-grid.journal-entries-grid th:nth-child(8), table.fluent-data-grid.journal-entries-grid td:nth-child(8) { grid-column: 4 !important; } /* Always visible on touch — no pointer hover on mobile */ table.fluent-data-grid.journal-entries-grid .row-actions { opacity: 1; } /* ── Documents list ──────────────────────────────────────────────────── Desktop columns: Avatar(1) | FileName(2) | Type(3) | Size(4) | Status(5) | Date(6) | Actions(7) Mobile columns: Avatar(1) | FileName(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.documents-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide Type, Size, Status, Date (columns 3→6) */ table.fluent-data-grid.documents-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.documents-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.documents-grid th:nth-child(7), table.fluent-data-grid.documents-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch — no pointer hover on mobile */ table.fluent-data-grid.documents-grid .row-actions { opacity: 1; } /* ── Provider configurations grid ───────────────────────────────────── Desktop: Avatar(1) | Type(2) | Primary(3) | Fallbacks(4) | Priority(5) | Status(6) | Actions(7) Mobile: Avatar(1) | Type(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.provider-configs-grid { grid-template-columns: 56px 1fr 80px !important; } /* Hide Fallbacks, Priority, Status (columns 4→6) */ table.fluent-data-grid.provider-configs-grid th:nth-child(n+4):nth-child(-n+6), table.fluent-data-grid.provider-configs-grid td:nth-child(n+4):nth-child(-n+6) { display: none; } /* Collapse Primary Provider (col 3) into Type column space */ table.fluent-data-grid.provider-configs-grid th:nth-child(3), table.fluent-data-grid.provider-configs-grid td:nth-child(3) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.provider-configs-grid th:nth-child(7), table.fluent-data-grid.provider-configs-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.provider-configs-grid .row-actions { opacity: 1; } /* ── Licensing dashboard grid ────────────────────────────────────────── Desktop: Avatar(1) | Tenant(2) | Plan(3) | Status(4) | ValidTo(5) | DaysLeft(6) | Actions(7) Mobile: Avatar(1) | Tenant(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.licenses-grid { grid-template-columns: 40px 1fr 52px !important; } /* Hide Plan, Status, ValidTo, DaysLeft (columns 3–6) */ table.fluent-data-grid.licenses-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.licenses-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.licenses-grid th:nth-child(7), table.fluent-data-grid.licenses-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.licenses-grid .row-actions { opacity: 1; } /* ── Statutory reports grid ──────────────────────────────────────────── Desktop: Avatar(1) | Type(2) | Period(3) | Generated(4) | Status(5) | Submitted(6) | Actions(7) Mobile: Avatar(1) | Type(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.statutory-grid { grid-template-columns: 48px 1fr 72px !important; } /* Hide Period, Generated, Status, Submitted (columns 3–6) */ table.fluent-data-grid.statutory-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.statutory-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.statutory-grid th:nth-child(7), table.fluent-data-grid.statutory-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.statutory-grid .row-actions { opacity: 1; } /* ── TDS submissions grid ───────────────────────────────────────────── Desktop: Avatar(1) | Period(2) | ReturnType(3) | Status(4) | Deductees(5) | TotalTds(6) | FiledAt(7) | Actions(8) Mobile: Avatar(1) | Period(2) | Actions(8->3) */ table.fluent-data-grid.tds-grid { grid-template-columns: 48px 1fr 72px !important; } /* Hide columns 3-7 */ table.fluent-data-grid.tds-grid th:nth-child(n+3):nth-child(-n+7), table.fluent-data-grid.tds-grid td:nth-child(n+3):nth-child(-n+7) { display: none; } /* Reposition Actions (column 8) to track 3 */ table.fluent-data-grid.tds-grid th:nth-child(8), table.fluent-data-grid.tds-grid td:nth-child(8) { grid-column: 3 !important; } table.fluent-data-grid.tds-grid .row-actions { opacity: 1; } /* ── TDS challans grid (Compliance > TDS Challans) ──────────────────── Desktop: Avatar(1) | Challan/AY/Quarter(2) | Bsr/DepositDate(3) | TotalTds(4) | DeducteeCount(5) | Status(6) | FilingDeadline(7) | Actions(8) Mobile: Avatar(1) | Challan(2) | Status(6->3) | Actions(8->4) */ table.fluent-data-grid.tds-challans-grid { grid-template-columns: 40px 1fr 90px 72px !important; } table.fluent-data-grid.tds-challans-grid th:nth-child(n+3):nth-child(-n+5), table.fluent-data-grid.tds-challans-grid td:nth-child(n+3):nth-child(-n+5) { display: none; } table.fluent-data-grid.tds-challans-grid th:nth-child(6), table.fluent-data-grid.tds-challans-grid td:nth-child(6) { grid-column: 3 !important; } table.fluent-data-grid.tds-challans-grid th:nth-child(7), table.fluent-data-grid.tds-challans-grid td:nth-child(7) { display: none; } table.fluent-data-grid.tds-challans-grid th:nth-child(8), table.fluent-data-grid.tds-challans-grid td:nth-child(8) { grid-column: 4 !important; } table.fluent-data-grid.tds-challans-grid .row-actions { opacity: 1; } /* ── Cost centers grid (Accounting > Cost Centers) ──────────────────── Desktop: Avatar(1) | Code(2) | Name(3) | Type(4) | Path(5) | Status(6) | Actions(7) Mobile: Avatar(1) | Code(2) | Status(6->3) | Actions(7->4) */ table.fluent-data-grid.cost-centers-grid { grid-template-columns: 40px 1fr 90px 72px !important; } table.fluent-data-grid.cost-centers-grid th:nth-child(n+3):nth-child(-n+5), table.fluent-data-grid.cost-centers-grid td:nth-child(n+3):nth-child(-n+5) { display: none; } table.fluent-data-grid.cost-centers-grid th:nth-child(6), table.fluent-data-grid.cost-centers-grid td:nth-child(6) { grid-column: 3 !important; } table.fluent-data-grid.cost-centers-grid th:nth-child(7), table.fluent-data-grid.cost-centers-grid td:nth-child(7) { grid-column: 4 !important; } table.fluent-data-grid.cost-centers-grid .row-actions { opacity: 1; } /* Reduce page padding on mobile */ .page-container { padding: 16px; gap: 16px; } /* ── MIS Reports grid ────────────────────────────────────────────────── Desktop columns: Avatar(1) | Name(2) | DataSource(3) | Order(4) | Status(5) | Actions(6) Mobile columns: Avatar(1) | Name(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.mis-reports-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide DataSource, Order, Status (columns 3→5) */ table.fluent-data-grid.mis-reports-grid th:nth-child(n+3):nth-child(-n+5), table.fluent-data-grid.mis-reports-grid td:nth-child(n+3):nth-child(-n+5) { display: none; } /* Reposition Actions (column 6) to track 3 */ table.fluent-data-grid.mis-reports-grid th:nth-child(6), table.fluent-data-grid.mis-reports-grid td:nth-child(6) { grid-column: 3 !important; } /* Always visible on touch — no hover on mobile */ table.fluent-data-grid.mis-reports-grid .row-actions { opacity: 1; } /* ── NBS submissions grid (Compliance > NBS Submissions) ────────────── Desktop: Avatar(1) | Period(2) | ReturnType(3) | Status(4) | UploadedAt(5) | AckNumber(6) | Actions(7) Mobile: Avatar(1) | Period(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.nbs-grid { grid-template-columns: 44px 1fr 72px !important; } /* Hide ReturnType(3), Status(4), UploadedAt(5), AckNumber(6) */ table.fluent-data-grid.nbs-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.nbs-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.nbs-grid th:nth-child(7), table.fluent-data-grid.nbs-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.nbs-grid .row-actions { opacity: 1; } /* ── CKYC log grid (Compliance > CKYC Status) ───────────────────────── Desktop: Avatar(1) | Customer(2) | Operation(3) | Status(4) | CkycRef(5) | AttemptedAt(6) | Actions(7) Mobile: Avatar(1) | Customer(2) | Actions → repositioned to track 3 */ table.fluent-data-grid.ckyc-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide Operation(3), Status(4), CkycRef(5), AttemptedAt(6) */ table.fluent-data-grid.ckyc-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.ckyc-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.ckyc-grid th:nth-child(7), table.fluent-data-grid.ckyc-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.ckyc-grid .row-actions { opacity: 1; } /* ── Liquid assets grid (Compliance > Liquid Assets) ─────────────────── Desktop: Avatar(1) | Type(2) | Desc(3) | Value(4) | AssetDate(5) | ValidTill(6) | RBI(7) | Actions(8) Mobile: Avatar(1) | Type(2) | Value(4→track 3) | Actions(8→track 4) */ table.fluent-data-grid.liquid-assets-grid { grid-template-columns: 40px 1fr 100px 72px !important; } /* Hide Desc(3), AssetDate(5), ValidTill(6), RBI(7) */ table.fluent-data-grid.liquid-assets-grid th:nth-child(3), table.fluent-data-grid.liquid-assets-grid td:nth-child(3), table.fluent-data-grid.liquid-assets-grid th:nth-child(5), table.fluent-data-grid.liquid-assets-grid td:nth-child(5), table.fluent-data-grid.liquid-assets-grid th:nth-child(6), table.fluent-data-grid.liquid-assets-grid td:nth-child(6), table.fluent-data-grid.liquid-assets-grid th:nth-child(7), table.fluent-data-grid.liquid-assets-grid td:nth-child(7) { display: none; } /* Reposition Value(4) to track 3, Actions(8) to track 4 */ table.fluent-data-grid.liquid-assets-grid th:nth-child(4), table.fluent-data-grid.liquid-assets-grid td:nth-child(4) { grid-column: 3 !important; } table.fluent-data-grid.liquid-assets-grid th:nth-child(8), table.fluent-data-grid.liquid-assets-grid td:nth-child(8) { grid-column: 4 !important; } /* Always visible on touch */ table.fluent-data-grid.liquid-assets-grid .row-actions { opacity: 1; } /* ── Versions grid (Products > Version History) ──────────────────────── Desktop: Version(1) | ChangeSummary(2) | Status(3) | EffectiveDate(4) | CreationTime(5) | Actions(6) Mobile: Version(1) | Status(3→track 2) | Actions(6→track 3) */ table.fluent-data-grid.versions-grid { grid-template-columns: 90px 80px 96px !important; } /* Hide ChangeSummary(2), EffectiveDate(4), CreationTime(5) */ table.fluent-data-grid.versions-grid th:nth-child(2), table.fluent-data-grid.versions-grid td:nth-child(2), table.fluent-data-grid.versions-grid th:nth-child(4), table.fluent-data-grid.versions-grid td:nth-child(4), table.fluent-data-grid.versions-grid th:nth-child(5), table.fluent-data-grid.versions-grid td:nth-child(5) { display: none; } /* Reposition Status(3) → track 2 */ table.fluent-data-grid.versions-grid th:nth-child(3), table.fluent-data-grid.versions-grid td:nth-child(3) { grid-column: 2 !important; } /* Reposition Actions(6) → track 3 */ table.fluent-data-grid.versions-grid th:nth-child(6), table.fluent-data-grid.versions-grid td:nth-child(6) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.versions-grid .row-actions { opacity: 1; } /* ── Privacy Notice Acceptances grid ──────────────────────────────────── Desktop: Avatar(1) | Customer(2) | Version(3) | Channel(4) | IpAddress(5) | AcceptedAt(6) | Actions(7) Mobile: Avatar(1) | Customer(2) | Actions(7→track 3) */ table.fluent-data-grid.privacy-notice-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide Version(3), Channel(4), IpAddress(5), AcceptedAt(6) */ table.fluent-data-grid.privacy-notice-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.privacy-notice-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.privacy-notice-grid th:nth-child(7), table.fluent-data-grid.privacy-notice-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.privacy-notice-grid .row-actions { opacity: 1; } /* ── Consent Management grid ───────────────────────────────────────────── Desktop: Avatar(1) | Customer(2) | Purpose(3) | Channel(4) | Status(5) | ConsentedAt(6) | Actions(7) Mobile: Avatar(1) | Customer(2) | Actions(7→track 3) */ table.fluent-data-grid.consent-grid { grid-template-columns: 56px 1fr 72px !important; } /* Hide Purpose(3), Channel(4), Status(5), ConsentedAt(6) */ table.fluent-data-grid.consent-grid th:nth-child(n+3):nth-child(-n+6), table.fluent-data-grid.consent-grid td:nth-child(n+3):nth-child(-n+6) { display: none; } /* Reposition Actions (column 7) to track 3 */ table.fluent-data-grid.consent-grid th:nth-child(7), table.fluent-data-grid.consent-grid td:nth-child(7) { grid-column: 3 !important; } /* Always visible on touch */ table.fluent-data-grid.consent-grid .row-actions { opacity: 1; } } /* ── breach-grid mobile (Data Protection > Breach Incidents) ────────────── Desktop cols: Title(1) | Severity/Status(2) | DetectedAt(3) | AffectedSubjects(4) | RegulatoryDeadlines(5) | Actions(6) Mobile: Title(1) | Severity/Status(2) | Actions(6→track 3) */ @media (max-width: 767px) { table.fluent-data-grid.breach-grid { grid-template-columns: 1fr 120px 72px !important; } /* Hide DetectedAt(3), AffectedSubjects(4), RegulatoryDeadlines(5) */ table.fluent-data-grid.breach-grid th:nth-child(3), table.fluent-data-grid.breach-grid td:nth-child(3), table.fluent-data-grid.breach-grid th:nth-child(4), table.fluent-data-grid.breach-grid td:nth-child(4), table.fluent-data-grid.breach-grid th:nth-child(5), table.fluent-data-grid.breach-grid td:nth-child(5) { display: none !important; } /* Actions(6) → track 3 */ table.fluent-data-grid.breach-grid th:nth-child(6), table.fluent-data-grid.breach-grid td:nth-child(6) { grid-column: 3 !important; } } /* ========================================================================== GRID AVATAR — Standard first-column avatar circle for ALL data grids Place a standalone as the FIRST column, containing only XX. Use .grid-avatar-label in the name column for consistent label typography. Use .grid-avatar-sub for secondary text on a second line. ========================================================================== */ .grid-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent); color: var(--accent-foreground-rest); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; user-select: none; text-transform: uppercase; } .grid-avatar-label { font-size: 14px; font-weight: 500; color: var(--neutral-foreground-rest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-avatar-sub { font-size: 12px; color: var(--neutral-foreground-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ───────────────────────────────────────────────────────────────────────────── DISBURSEMENTS GRID – Mobile column overrides Column order: avatar(1) | number(2) | customer(3) | loan#(4) | net(5) | mode(6) | status(7) | date(8) | actions(9) Mobile: avatar(1) | customer(3→track 2) | status(7→track 3) | actions(9→track 4) ─────────────────────────────────────────────────────────────────────────────*/ @media (max-width: 767px) { table.fluent-data-grid.disbursements-grid { grid-template-columns: 56px 1fr 130px 110px !important; } /* Hide: number(2), loan#(4), net amount(5), mode(6), date(8) */ table.fluent-data-grid.disbursements-grid th:nth-child(2), table.fluent-data-grid.disbursements-grid td:nth-child(2), table.fluent-data-grid.disbursements-grid th:nth-child(4), table.fluent-data-grid.disbursements-grid td:nth-child(4), table.fluent-data-grid.disbursements-grid th:nth-child(5), table.fluent-data-grid.disbursements-grid td:nth-child(5), table.fluent-data-grid.disbursements-grid th:nth-child(6), table.fluent-data-grid.disbursements-grid td:nth-child(6), table.fluent-data-grid.disbursements-grid th:nth-child(8), table.fluent-data-grid.disbursements-grid td:nth-child(8) { display: none !important; } /* status(7) → track 3 */ table.fluent-data-grid.disbursements-grid th:nth-child(7), table.fluent-data-grid.disbursements-grid td:nth-child(7) { grid-column: 3 !important; } /* actions(9) → track 4 */ table.fluent-data-grid.disbursements-grid th:nth-child(9), table.fluent-data-grid.disbursements-grid td:nth-child(9) { grid-column: 4 !important; } /* Always reveal row actions on mobile (no hover on touch) */ table.fluent-data-grid.disbursements-grid .row-actions { opacity: 1 !important; } } /* ── issues-grid mobile (Debentures > NCD Issues list) ──────────────────── Desktop cols: avatar(1) | IssueName(2) | Type(3) | Status(4) | Tenor(5) | TargetSize(6) | Investors(7) | Actions(8) Mobile: avatar(1) | IssueName(2) | Status(4→track 3) | Actions(8→track 4) */ @media (max-width: 767px) { table.fluent-data-grid.issues-grid { grid-template-columns: 56px 1fr 100px 72px !important; } /* Hide Type(3), Tenor(5), TargetSize(6), Investors(7) */ table.fluent-data-grid.issues-grid th:nth-child(3), table.fluent-data-grid.issues-grid td:nth-child(3), table.fluent-data-grid.issues-grid th:nth-child(5), table.fluent-data-grid.issues-grid td:nth-child(5), table.fluent-data-grid.issues-grid th:nth-child(6), table.fluent-data-grid.issues-grid td:nth-child(6), table.fluent-data-grid.issues-grid th:nth-child(7), table.fluent-data-grid.issues-grid td:nth-child(7) { display: none !important; } /* Status(4) → track 3 */ table.fluent-data-grid.issues-grid th:nth-child(4), table.fluent-data-grid.issues-grid td:nth-child(4) { grid-column: 3 !important; } /* Actions(8) → track 4 */ table.fluent-data-grid.issues-grid th:nth-child(8), table.fluent-data-grid.issues-grid td:nth-child(8) { grid-column: 4 !important; } /* Always reveal row actions on mobile */ table.fluent-data-grid.issues-grid .row-actions { opacity: 1 !important; } } /* ── holdings-grid mobile (Debentures > Issue Detail > Allotment Registry) ─ Desktop cols: avatar(1) | AllotmentDate(2) | CustomerName(3) | Units(4) | Principal(5) | CouponPaid(6) | Status(7) Mobile: avatar(1) | CustomerName(3→track 2) | Status(7→track 3) */ @media (max-width: 767px) { table.fluent-data-grid.holdings-grid { grid-template-columns: 48px 1fr 100px !important; } /* Hide AllotmentDate(2), Units(4), Principal(5), CouponPaid(6) */ table.fluent-data-grid.holdings-grid th:nth-child(2), table.fluent-data-grid.holdings-grid td:nth-child(2), table.fluent-data-grid.holdings-grid th:nth-child(4), table.fluent-data-grid.holdings-grid td:nth-child(4), table.fluent-data-grid.holdings-grid th:nth-child(5), table.fluent-data-grid.holdings-grid td:nth-child(5), table.fluent-data-grid.holdings-grid th:nth-child(6), table.fluent-data-grid.holdings-grid td:nth-child(6) { display: none !important; } /* CustomerName(3) → track 2 */ table.fluent-data-grid.holdings-grid th:nth-child(3), table.fluent-data-grid.holdings-grid td:nth-child(3) { grid-column: 2 !important; } /* Status(7) → track 3 */ table.fluent-data-grid.holdings-grid th:nth-child(7), table.fluent-data-grid.holdings-grid td:nth-child(7) { grid-column: 3 !important; } } /* ── allotments-grid mobile (Debentures > Allotment Registry page) ────────── Desktop cols: avatar(1) | AllotmentDate(2) | IssueName(3) | Customer(4) | Units(5) | Principal(6) | CouponPaid(7) | Status(8) | Actions(9) Mobile: avatar(1) | Customer(4→track 2) | Status(8→track 3) | Actions(9→track 4) Hide: AllotmentDate(2), IssueName(3), Units(5), Principal(6), CouponPaid(7) */ @media (max-width: 767px) { table.fluent-data-grid.allotments-grid { grid-template-columns: 48px 1fr 110px 64px !important; } /* Hide AllotmentDate(2), IssueName(3), Units(5), Principal(6), CouponPaid(7) */ table.fluent-data-grid.allotments-grid th:nth-child(2), table.fluent-data-grid.allotments-grid td:nth-child(2), table.fluent-data-grid.allotments-grid th:nth-child(3), table.fluent-data-grid.allotments-grid td:nth-child(3), table.fluent-data-grid.allotments-grid th:nth-child(5), table.fluent-data-grid.allotments-grid td:nth-child(5), table.fluent-data-grid.allotments-grid th:nth-child(6), table.fluent-data-grid.allotments-grid td:nth-child(6), table.fluent-data-grid.allotments-grid th:nth-child(7), table.fluent-data-grid.allotments-grid td:nth-child(7) { display: none !important; } /* Customer(4) → track 2 */ table.fluent-data-grid.allotments-grid th:nth-child(4), table.fluent-data-grid.allotments-grid td:nth-child(4) { grid-column: 2 !important; } /* Status(8) → track 3 */ table.fluent-data-grid.allotments-grid th:nth-child(8), table.fluent-data-grid.allotments-grid td:nth-child(8) { grid-column: 3 !important; } /* Actions(9) → track 4 */ table.fluent-data-grid.allotments-grid th:nth-child(9), table.fluent-data-grid.allotments-grid td:nth-child(9) { grid-column: 4 !important; } /* Always reveal row actions on touch — no hover on mobile */ table.fluent-data-grid.allotments-grid .row-actions { opacity: 1 !important; } } /* ── loan-svc-grid mobile (9 cols → avatar | customer | status | actions) ──── */ /* Keep: col1 avatar, col3 customer, col8 status, col9 actions */ /* Hide: col2 loanAccount, col4 emi, col5 dueDate, col6 dpd, col7 outstanding */ @media (max-width: 767px) { table.fluent-data-grid.loan-svc-grid { grid-template-columns: 40px 1fr 110px 64px !important; } table.fluent-data-grid.loan-svc-grid th:nth-child(2), table.fluent-data-grid.loan-svc-grid td:nth-child(2), table.fluent-data-grid.loan-svc-grid th:nth-child(4), table.fluent-data-grid.loan-svc-grid td:nth-child(4), table.fluent-data-grid.loan-svc-grid th:nth-child(5), table.fluent-data-grid.loan-svc-grid td:nth-child(5), table.fluent-data-grid.loan-svc-grid th:nth-child(6), table.fluent-data-grid.loan-svc-grid td:nth-child(6), table.fluent-data-grid.loan-svc-grid th:nth-child(7), table.fluent-data-grid.loan-svc-grid td:nth-child(7) { display: none !important; } /* customer(3) → track 2 */ table.fluent-data-grid.loan-svc-grid th:nth-child(3), table.fluent-data-grid.loan-svc-grid td:nth-child(3) { grid-column: 2 !important; } /* status(8) → track 3 */ table.fluent-data-grid.loan-svc-grid th:nth-child(8), table.fluent-data-grid.loan-svc-grid td:nth-child(8) { grid-column: 3 !important; } /* actions(9) → track 4 */ table.fluent-data-grid.loan-svc-grid th:nth-child(9), table.fluent-data-grid.loan-svc-grid td:nth-child(9) { grid-column: 4 !important; } /* Always reveal row actions on mobile */ table.fluent-data-grid.loan-svc-grid .row-actions { opacity: 1 !important; } } /* ── schedule-grid mobile (6 cols → installment | dueDate | emi | status) ─── */ /* Keep: col1 installment, col2 dueDate, col5 emi, col6 status */ /* Hide: col3 principal, col4 interest */ @media (max-width: 767px) { table.fluent-data-grid.schedule-grid { grid-template-columns: 60px 1fr 90px 90px !important; } table.fluent-data-grid.schedule-grid th:nth-child(3), table.fluent-data-grid.schedule-grid td:nth-child(3), table.fluent-data-grid.schedule-grid th:nth-child(4), table.fluent-data-grid.schedule-grid td:nth-child(4) { display: none !important; } /* emi(5) → track 3 */ table.fluent-data-grid.schedule-grid th:nth-child(5), table.fluent-data-grid.schedule-grid td:nth-child(5) { grid-column: 3 !important; } /* status(6) → track 4 */ table.fluent-data-grid.schedule-grid th:nth-child(6), table.fluent-data-grid.schedule-grid td:nth-child(6) { grid-column: 4 !important; } } /* ── restructuring-history-grid: 4 cols — Date | Details (2-line) | Status | Actions ── max-width caps the grid so Status/Actions don't float far from content on wide screens. align-items:stretch makes all cells in a row reach the same bottom edge, so the border-bottom separator (from FluentDataGrid td styles) is a single consistent line. */ table.fluent-data-grid.restructuring-history-grid { grid-template-columns: 130px 1fr 130px 48px !important; max-width: 720px !important; align-items: stretch !important; } /* Re-center content of short cells (Date, Status, Actions) once they stretch to row height */ table.fluent-data-grid.restructuring-history-grid td:nth-child(1), table.fluent-data-grid.restructuring-history-grid td:nth-child(3), table.fluent-data-grid.restructuring-history-grid td:nth-child(4) { display: flex !important; align-items: center; } /* Print action: always visible — single action, hover-reveal not needed */ table.fluent-data-grid.restructuring-history-grid .row-actions { opacity: 1 !important; } @media (max-width: 767px) { /* 2 columns: detail (full info) | actions (icon) */ table.fluent-data-grid.restructuring-history-grid { grid-template-columns: 1fr 44px !important; max-width: 100% !important; /* let it fill the mobile viewport */ } /* Hide Date(1) and Status(3) column headers and cells — their content moves into the detail cell */ table.fluent-data-grid.restructuring-history-grid th:nth-child(1), table.fluent-data-grid.restructuring-history-grid td:nth-child(1), table.fluent-data-grid.restructuring-history-grid th:nth-child(3), table.fluent-data-grid.restructuring-history-grid td:nth-child(3) { display: none !important; } /* Detail(2) → track 1 */ table.fluent-data-grid.restructuring-history-grid th:nth-child(2), table.fluent-data-grid.restructuring-history-grid td:nth-child(2) { grid-column: 1 !important; } /* Actions(4) → track 2 */ table.fluent-data-grid.restructuring-history-grid th:nth-child(4), table.fluent-data-grid.restructuring-history-grid td:nth-child(4) { grid-column: 2 !important; } } /* ── Pin Actions column so it's reachable without scrolling wide grids right. Applies to EVERY grid whose actions TemplateColumn carries Class="row-actions-col" (originally added per-grid just for tds-challans-grid; generalized so any grid opting into the marker class gets sticky-actions for free — no per-grid CSS needed). is display:contents (see CLAUDE.md), so th/td are direct children of the table's CSS Grid — sticky on the cell itself works as expected. Unscoped (not in a page's .razor.css) because th/td are rendered by FluentDataGrid's own component and carry ITS Razor CSS-isolation scope hash, not the calling page's — a scoped rule there can never match these elements. background: var(--neutral-layer-1) alone resolves to nothing on a plain td (the token is never exposed as an inherited custom property on light-DOM elements outside fluent-* ::part() contexts — confirmed via computed-style inspection: --neutral-layer-1 is empty at every ancestor up to ). Without an opaque background the sticky cell is fully transparent and content scrolled underneath shows through it. Literal hex fallbacks mirror the identical fix already applied to .app-shell .app-header in MainLayout.razor.css (same token, same gap). */ table.fluent-data-grid .row-actions-col { position: sticky; right: 0; z-index: 2; background: #ffffff; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); } .app-shell.theme-dark table.fluent-data-grid .row-actions-col { background: #131720; } /* Same sticky-actions treatment for pages that render a native
instead of (e.g. Accounting/Accounts.razor's grouped GL table). Kept as a separate rule (not folded into the .razor.css scoped file) so both table flavors share one marker-class contract. !important on background is required here specifically: unlike FluentDataGrid cells, native
s carry the page's own CSS-isolation scope hash, so a page-local ":hover td" rule (e.g. .account-data-row:hover td in Accounts.razor.css) has higher specificity than this unscoped rule and would otherwise repaint the sticky cell semi-transparent on row hover. */ table.accounts-grouped-table .row-actions-col { position: sticky; right: 0; z-index: 2; background: #ffffff !important; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); } table.accounts-grouped-table th.row-actions-col { z-index: 3; } .app-shell.theme-dark table.accounts-grouped-table .row-actions-col { background: #131720 !important; } /* ========================================================================== DEPOSIT PRODUCTS GRID — Mobile column overrides Column order: avatar(1) | code(2) | name(3) | type(4) | minTenure(5) | maxTenure(6) | status(7) | actions(8) Mobile: avatar(1) | name(3→track 2) | status(7→track 3) | actions(8→track 4) ========================================================================== */ @media (max-width: 767px) { table.fluent-data-grid.products-grid { grid-template-columns: 46px 1fr 110px 88px !important; } /* Hide: code(2), type(4), minTenure(5), maxTenure(6) */ table.fluent-data-grid.products-grid th:nth-child(2), table.fluent-data-grid.products-grid td:nth-child(2), table.fluent-data-grid.products-grid th:nth-child(4), table.fluent-data-grid.products-grid td:nth-child(4), table.fluent-data-grid.products-grid th:nth-child(5), table.fluent-data-grid.products-grid td:nth-child(5), table.fluent-data-grid.products-grid th:nth-child(6), table.fluent-data-grid.products-grid td:nth-child(6) { display: none !important; } /* name(3) → track 2 */ table.fluent-data-grid.products-grid th:nth-child(3), table.fluent-data-grid.products-grid td:nth-child(3) { grid-column: 2 !important; } /* status(7) → track 3 */ table.fluent-data-grid.products-grid th:nth-child(7), table.fluent-data-grid.products-grid td:nth-child(7) { grid-column: 3 !important; } /* actions(8) → track 4 */ table.fluent-data-grid.products-grid th:nth-child(8), table.fluent-data-grid.products-grid td:nth-child(8) { grid-column: 4 !important; } /* Always reveal row actions on mobile (no hover on touch) */ table.fluent-data-grid.products-grid .row-actions { opacity: 1 !important; } } /* ========================================================================== SETTINGS ARCHETYPE — Cards, form grid, setting rows, skeleton, responsive Used by: /settings/deposit-configuration, /settings/loan-policy, /settings/company, /settings/print-templates ========================================================================== */ /* ── Settings group card ─────────────────────────────────────────────────── */ .settings-card, .settings-group { background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; padding: 24px; margin-bottom: 20px; } /* ── Section heading (h2 inside settings card) ───────────────────────────── */ .settings-card .section-heading, .settings-group .section-heading, .settings-card .section-title, .settings-group .section-title { font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); } /* ── Form grid — responsive 2-col stacked layout ─────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 24px; align-items: start; } /* ── Individual form field (vertical stacked: label → input → hint) ──────── */ .form-field { display: flex; flex-direction: column; gap: 4px; } /* ── Field hint text below input ─────────────────────────────────────────── */ .field-hint { font-size: 11px; color: var(--neutral-foreground-hint); line-height: 1.4; margin-top: 2px; } /* ── Horizontal settings row (toggle / select / button on right) ─────────── */ .setting-item { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--neutral-stroke-divider-rest); } .setting-item:last-child { border-bottom: none; } .setting-info { flex: 1; min-width: 0; } .setting-label { display: block; font-size: 14px; font-weight: 500; color: var(--neutral-foreground-rest); margin-bottom: 3px; } .setting-help { font-size: 12px; color: var(--neutral-foreground-hint); margin: 0; line-height: 1.5; } /* Error variant — reuses the app's validation-message red (dark-mode handled below). */ .setting-help.is-invalid { color: var(--error, #DC2626); } .app-shell.theme-dark .setting-help.is-invalid { color: #F87171; } /* ── Form actions (save button row) ──────────────────────────────────────── */ .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--neutral-stroke-divider-rest); } /* ── Skeleton loading rows ───────────────────────────────────────────────── */ .skeleton-list { display: flex; flex-direction: column; gap: 16px; } .skeleton-row { display: flex; flex-direction: column; gap: 8px; } /* Shimmer animation for skeleton elements */ .skeleton-row fluent-skeleton, .skeleton-list fluent-skeleton { border-radius: 4px; } /* ── Responsive — collapse form-grid to 1 col on mobile ──────────────────── */ @media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; gap: 16px; } .settings-card, .settings-group { padding: 16px; border-radius: 6px; } .setting-item { flex-direction: column; align-items: flex-start; gap: 10px; } .form-actions { flex-direction: column; } .form-actions fluent-button { width: 100%; } } /* ========================================================================== PAGE SHELL — Shared structural classes used by List, Create, Detail pages These classes must be global (not scoped) because many pages reuse them. Scoped .razor.css files can add page-specific overrides on top. ========================================================================== */ @keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Page container ───────────────────────────────────────────────────────── */ .page-container { display: flex; flex-direction: column; gap: 24px; padding: 32px 32px 48px; max-width: 1440px; margin: 0 auto; animation: card-enter 280ms ease; } /* ── Page header (title + actions row) ───────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-header-text { flex: 1; } .page-title { margin: 0 0 4px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--neutral-foreground-rest); } .page-subtitle { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); } .page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } /* ── List container (main data card) ─────────────────────────────────────── */ .list-container { display: flex; flex-direction: column; background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; overflow: visible; box-shadow: 0 2px 4px rgba(0,0,0,0.04); } /* ── List toolbar ─────────────────────────────────────────────────────────── */ .list-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); flex-wrap: wrap; background: var(--neutral-layer-1); border-radius: 10px 10px 0 0; position: relative; z-index: 10; contain: none; content-visibility: visible; } .list-search { flex: 1; min-width: 200px; } .toolbar-divider { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; } .toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Empty / error state box ─────────────────────────────────────────────── */ .state-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 32px; text-align: center; gap: 12px; } .state-icon { opacity: 0.35; color: var(--neutral-foreground-rest); } .state-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); } .state-hint { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); } /* ── Scrollable grid wrapper ──────────────────────────────────────────────── */ .grid-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── List footer (count + pagination) ────────────────────────────────────── */ .list-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--neutral-stroke-divider-rest); background: var(--neutral-layer-1); border-radius: 0 0 10px 10px; flex-wrap: wrap; gap: 8px; } .results-count { font-size: 13px; color: var(--neutral-foreground-hint); } /* FluentPaginator renders its own "N items" summary alongside .results-count — suppress the built-in one so the count isn't shown twice. */ .list-footer .paginator .summary { display: none; } /* ── Responsive mobile adjustments ───────────────────────────────────────── */ @media (max-width: 768px) { .list-toolbar { gap: 8px; padding: 10px 12px; } .toolbar-divider { display: none; } .list-search { min-width: 100%; order: -1; } .toolbar-filters { width: 100%; } } /* ========================================================================== PRINT MEDIA — hide navigation chrome, prepare body for print ========================================================================== */ @media print { /* Hide all interactive chrome */ .no-print, fluent-nav-menu, fluent-nav-item, .sidebar, .top-bar, .page-toolbar, fluent-breadcrumb, fluent-toolbar, .page-breadcrumb, .header-actions, .page-actions, .page-header-actions, .list-toolbar, .list-footer, .row-actions, fluent-button { display: none !important; } /* Reveal print-only elements */ .print-only { display: block !important; } /* Clean body */ body { background: white !important; color: #111 !important; font-size: 12pt; } /* Expand content to full width */ .page-container, .list-container, .settings-card, .section-card { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } /* Force page breaks where needed */ .page-break-before { page-break-before: always; } .page-break-after { page-break-after: always; } } /* ========================================================================== METRIC CARDS ROW — used on List pages for summary KPI counts Pattern: .metrics-row > .metric-card > .metric-icon-wrap + .metric-body ========================================================================== */ .metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .metric-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04); transition: box-shadow 170ms ease, transform 170ms ease; cursor: default; } .metric-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); transform: translateY(-2px); } .metric-icon-wrap { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .metric-icon-wrap svg { width: 24px; height: 24px; fill: currentColor !important; } .metric-icon-blue { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); } .metric-icon-green { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; } .metric-icon-purple { background: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent); color: var(--accent-foreground-rest); } .metric-icon-red { background: color-mix(in srgb, #c62828 12%, transparent); color: #c62828; } .metric-icon-amber { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; } .metric-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .metric-value { font-size: 14px; font-weight: 700; line-height: 1; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } .metric-title { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); margin-top: 6px; white-space: nowrap; } .metric-desc { font-size: 11px; color: var(--neutral-foreground-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Responsive metric rows */ @media (max-width: 900px) { .metrics-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .metrics-row { grid-template-columns: 1fr; } } /* ========================================================================== VIDEO KYC — Status badge variants ========================================================================== */ .status-scheduled { background: rgba(245,158,11,0.12); color: #F59E0B; } .status-ready { background: rgba(99,102,241,0.12); color: #6366F1; } .status-inprogress { background: rgba(59,130,246,0.12); color: #3B82F6; } .status-completed { background: rgba(16,185,129,0.12); color: #10B981; } .status-noshow { background: rgba(107,114,128,0.12); color: var(--neutral-foreground-hint); } .status-cancelled { background: rgba(239,68,68,0.12); color: #EF4444; } .status-failed { background: rgba(185,28,28,0.12); color: #B91C1C; } /* ========================================================================== NATIVE SELECT — styled replacement for FluentSelect inside dialogs (FluentSelect traps DOM events in dialogs — see AGENTS.md pitfall #4) ========================================================================== */ .native-select { display: block; width: 100%; padding: 6px 10px; font-size: 14px; line-height: 1.5; color: var(--neutral-foreground-rest); background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-stroke-rest); border-radius: 6px; min-height: 36px; appearance: auto; cursor: pointer; transition: border-color 150ms cubic-bezier(0.4,0,0.2,1), box-shadow 150ms cubic-bezier(0.4,0,0.2,1); } .native-select:focus { outline: none; border-color: var(--accent-fill-rest); box-shadow: 0 0 0 3px rgba(79,70,229,0.10); } .native-select:disabled { background: var(--neutral-fill-stealth-rest); opacity: 0.6; cursor: not-allowed; } /* ========================================================================== VIDEO KYC BOOKINGS GRID — Mobile column overrides Desktop: Avatar(1) | Reference(2) | Customer(3) | ScheduledAt(4) | Status(5) | JoinUrl(6) | Actions(7) Mobile: Avatar(1) | Customer(3→track 2) | Status(5→track 3) | Actions(7→track 4) Hide: Reference(2), ScheduledAt(4), JoinUrl(6) ========================================================================== */ @media (max-width: 767px) { table.fluent-data-grid.video-kyc-grid { grid-template-columns: 56px 1fr 110px 96px !important; } /* Hide Reference(2), ScheduledAt(4), JoinUrl(6) */ table.fluent-data-grid.video-kyc-grid th:nth-child(2), table.fluent-data-grid.video-kyc-grid td:nth-child(2), table.fluent-data-grid.video-kyc-grid th:nth-child(4), table.fluent-data-grid.video-kyc-grid td:nth-child(4), table.fluent-data-grid.video-kyc-grid th:nth-child(6), table.fluent-data-grid.video-kyc-grid td:nth-child(6) { display: none !important; } /* Customer(3) → track 2 */ table.fluent-data-grid.video-kyc-grid th:nth-child(3), table.fluent-data-grid.video-kyc-grid td:nth-child(3) { grid-column: 2 !important; } /* Status(5) → track 3 */ table.fluent-data-grid.video-kyc-grid th:nth-child(5), table.fluent-data-grid.video-kyc-grid td:nth-child(5) { grid-column: 3 !important; } /* Actions(7) → track 4 */ table.fluent-data-grid.video-kyc-grid th:nth-child(7), table.fluent-data-grid.video-kyc-grid td:nth-child(7) { grid-column: 4 !important; } /* Always reveal actions on touch — no hover on mobile */ table.fluent-data-grid.video-kyc-grid .row-actions { opacity: 1 !important; } } /* ========================================================================== AUDIT LOG GRID — Mobile column overrides Desktop cols: Timestamp(1) | User(2) | Branch(3) | Module(4) | Action(5) | Status(6) | Duration(7) | Actions(8) Mobile: Timestamp(1) | User(2→track 2) | Status(6→track 3) | Actions(8→track 4) ========================================================================== */ @media (max-width: 767px) { table.fluent-data-grid.audit-log-grid { grid-template-columns: 110px 1fr 80px 44px !important; } /* Hide Branch(3), Module(4), Action(5), Duration(7) */ table.fluent-data-grid.audit-log-grid th:nth-child(3), table.fluent-data-grid.audit-log-grid td:nth-child(3), table.fluent-data-grid.audit-log-grid th:nth-child(4), table.fluent-data-grid.audit-log-grid td:nth-child(4), table.fluent-data-grid.audit-log-grid th:nth-child(5), table.fluent-data-grid.audit-log-grid td:nth-child(5), table.fluent-data-grid.audit-log-grid th:nth-child(7), table.fluent-data-grid.audit-log-grid td:nth-child(7) { display: none !important; } /* User(2) → track 2 */ table.fluent-data-grid.audit-log-grid th:nth-child(2), table.fluent-data-grid.audit-log-grid td:nth-child(2) { grid-column: 2 !important; } /* Status(6) → track 3 */ table.fluent-data-grid.audit-log-grid th:nth-child(6), table.fluent-data-grid.audit-log-grid td:nth-child(6) { grid-column: 3 !important; } /* Actions(8) → track 4 */ table.fluent-data-grid.audit-log-grid th:nth-child(8), table.fluent-data-grid.audit-log-grid td:nth-child(8) { grid-column: 4 !important; } /* Always reveal row actions on touch */ table.fluent-data-grid.audit-log-grid .row-actions { opacity: 1 !important; } } /* ========================================================================== FIELD CHANGES GRID — Mobile column overrides Desktop cols: Timestamp(1) | ChangedBy(2) | EntityType(3) | FieldName(4) | OldValue(5) | NewValue(6) | ActionType(7) | Actions(8) Mobile: Timestamp(1) | ChangedBy(2→track2) | ActionType(7→track3) | Actions(8→track4) ========================================================================== */ @media (max-width: 767px) { table.fluent-data-grid.field-changes-grid { grid-template-columns: 100px 1fr 80px 44px !important; } /* Hide EntityType(3), FieldName(4), OldValue(5), NewValue(6) */ table.fluent-data-grid.field-changes-grid th:nth-child(3), table.fluent-data-grid.field-changes-grid td:nth-child(3), table.fluent-data-grid.field-changes-grid th:nth-child(4), table.fluent-data-grid.field-changes-grid td:nth-child(4), table.fluent-data-grid.field-changes-grid th:nth-child(5), table.fluent-data-grid.field-changes-grid td:nth-child(5), table.fluent-data-grid.field-changes-grid th:nth-child(6), table.fluent-data-grid.field-changes-grid td:nth-child(6) { display: none !important; } /* ChangedBy(2) → track 2 */ table.fluent-data-grid.field-changes-grid th:nth-child(2), table.fluent-data-grid.field-changes-grid td:nth-child(2) { grid-column: 2 !important; } /* ActionType(7) → track 3 */ table.fluent-data-grid.field-changes-grid th:nth-child(7), table.fluent-data-grid.field-changes-grid td:nth-child(7) { grid-column: 3 !important; } /* Actions(8) → track 4 */ table.fluent-data-grid.field-changes-grid th:nth-child(8), table.fluent-data-grid.field-changes-grid td:nth-child(8) { grid-column: 4 !important; } /* Always reveal row actions on touch */ table.fluent-data-grid.field-changes-grid .row-actions { opacity: 1 !important; } } /* ========================================================================== COMPLIANCE ALERTS GRID — Always reveal row actions on touch ========================================================================== */ @media (max-width: 767px) { table.fluent-data-grid.alerts-grid .row-actions { opacity: 1 !important; } } /* ========================================================================== SYSTEM ALERT BELL — Phase 12.1.4 ========================================================================== */ .nbfc-alert-bell { position: relative; cursor: pointer; padding: 4px 8px; display: flex; align-items: center; } .nbfc-badge { position: absolute; top: -4px; right: -4px; background: var(--error); color: white; border-radius: 10px; font-size: 10px; padding: 1px 5px; min-width: 16px; text-align: center; line-height: 16px; } .nbfc-alert-panel { position: absolute; top: 48px; right: 12px; width: 360px; background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 9999; max-height: 480px; overflow-y: auto; } .nbfc-alert-header { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--neutral-stroke-rest); font-weight: 600; } .nbfc-alert-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--neutral-stroke-rest); } .nbfc-alert-item.unread { background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent); } .nbfc-alert-item:hover { background: var(--neutral-fill-hover); } .nbfc-alert-module { font-size: 10px; text-transform: uppercase; color: var(--accent-foreground-rest); font-weight: 600; } .nbfc-alert-title { font-weight: 600; margin-top: 2px; } .nbfc-alert-body { font-size: 12px; color: var(--neutral-foreground-hint); margin-top: 2px; } .nbfc-alert-time { font-size: 11px; color: var(--neutral-foreground-hint); margin-top: 4px; } .nbfc-alert-footer { display: block; padding: 10px 14px; font-size: 12px; text-align: center; } .nbfc-alert-empty { padding: 20px 14px; text-align: center; color: var(--neutral-foreground-hint); }