/* ========================================================================== components.css: classes emitted by the mp-* tag helpers (CL-02) Loaded once by _Layout, straight after site.css. No view uses these classes until a tag helper or a converted screen adopts them, so linking this file changes nothing on existing pages. Rules for this file (checked by Ui/ComponentAssetsTests): - Colours come only from site.css custom properties that theme.js also overwrites at runtime (primary, secondary, bg-*, text-*, border-color, success/warning/danger/info and their -dark/-rgb variants, shadow-*), so runtime themes and data-dark="true" both apply. No bare colour literals. - Spacing, radius, type scale and transitions use the site.css scale tokens. - Dark mode uses the existing [data-dark="true"] attribute on . - Text is never case-transformed: CSV export reads innerText, and the glossary sets the casing in the markup (sentence case, Title Case titles). - Local custom properties are prefixed --mp- and defined in this file. Class contract (block, then __element and --modifier): .mp-page-header __titles __actions (CL-04) .mp-filter-bar __header __title __chevron __body (CL-05) .mp-action-row .mp-row-action (CL-05) .mp-data-table __header __title __actions __body __empty (CL-08) .mp-grid __ref __meta __date __nowrap __expand __actions __detail-row __detail __detail-label __detail-value (grid-design) .mp-results-card __header __title __heading __summary __count __actions __tools __length __search __body the list-page results card with its toolbar (grid-design, "List pages") .mp-filter-panel __field __actions the right-hand search offcanvas; .mp-icon-field, .mp-filter-toggle (grid-design) .mp-grid-card a results card holding an .mp-grid (title, count pill, flush body) (grid-design) .mp-kpi-card __icon __body __label __value __currency __unit __meta --success --warning --danger --info --neutral (CL-09) .mp-status-badge __icon --success --warning --danger --info --neutral (CL-09) .mp-empty-state __icon __message __action (CL-09) .mp-confirm __icon __title __message __actions (CL-10) .create-cashout-page .co-step (__head __badge __titles __hint) .co-methods .co-method (__icon __text __name __desc __check) .co-field-head .co-kyc-pill (--checking --verified) .co-amount-group (__currency) .co-summary (__title __list __row __value--success __value--warning __total __total-label __total-value __currency) block "Create Payout (redesign 2026-09-25)" .mp-auth __brand __brand-inner __lockup __lockup-name __lockup-title __lockup-sub __tagline __tile (--lg) __main __card __logo __wordmark __title __subtitle __form __field __password __reveal __row __link __submit __submit-label __spinner __alt __footer scoped under body.login-page; block "Login (redesign 2026-09-25)" ========================================================================== */ /* ---- Page header (CL-04) ------------------------------------------------ */ /* Wraps the existing .page-title / .page-subtitle markup from site.css. */ .mp-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); } /* The page title is shown once, in the top bar breadcrumb (owner, 2026-09-25). The page's H1 stays in the markup for screen readers and heading navigation, but is hidden on screen. A red heading (Access denied) is content, not a repeated title, and stays visible. */ .page-content h1.page-title:not(.text-danger) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* A page header left with nothing to show (no subtitle, no actions) takes no space; not display:none, which would hide the H1 from screen readers too. */ .mp-page-header:not(:has(.page-subtitle)):not(:has(.mp-page-header__actions)):not(:has(h1.text-danger)) { margin-bottom: 0; gap: 0; } /* With the title hidden, a header's actions sit on the right on their own. */ .mp-page-header:has(h1.page-title:not(.text-danger)) { justify-content: flex-end; } .mp-page-header:has(.page-subtitle) { justify-content: space-between; } .mp-page-header__titles { min-width: 0; flex: 1 1 auto; } .mp-page-header__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); flex: 0 0 auto; } /* ---- Filter bar (CL-05) ------------------------------------------------- */ /* Card with a collapsible "Search" header; sits inside the page's own

. */ .mp-filter-bar { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); margin-bottom: var(--space-5); overflow: hidden; } .mp-filter-bar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); background: rgba(var(--primary-rgb), 0.03); border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-primary); text-align: left; cursor: pointer; user-select: none; transition: background var(--transition-fast); } .mp-filter-bar__header:hover { background: rgba(var(--primary-rgb), 0.07); } .mp-filter-bar__header:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px rgba(var(--primary-rgb), 0.2); } .mp-filter-bar__header[aria-expanded="false"] { border-bottom-color: transparent; } .mp-filter-bar__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .mp-filter-bar__title .bi { color: var(--primary); } .mp-filter-bar__chevron { font-size: var(--font-size-xs); color: var(--text-muted); transition: transform var(--transition-fast); } .mp-filter-bar__header[aria-expanded="false"] .mp-filter-bar__chevron { transform: rotate(-90deg); } .mp-filter-bar__body { padding: var(--space-4); } /* ---- Action row and row actions (CL-05) --------------------------------- */ /* Buttons keep the ST-09 Bootstrap classes; this only lays them out. */ .mp-action-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } /* .btn-link (Reset, ST-09) is flat by design (site.css: no border, no padding) so it reads fine as a standalone text link, but that leaves it visually broken next to the bordered Search/Export buttons in this row - unaligned height and no border/radius. Restore the border and radius here, scoped to the action row so every other .btn-link on the site (password toggles, the notification bell, ...) keeps its flat look. Padding is left to whichever size class the button already carries (.btn, .btn-sm, .btn-lg, ...) rather than fixed here, so it stays the same height as its sibling Search/Export buttons instead of being pinned to the base .btn size. */ .mp-action-row .btn-link { border: 1px solid var(--border-color); border-radius: var(--radius); } .mp-action-row .btn-link.btn-lg { padding: 0.75rem 1.5rem; } .mp-action-row .btn-link.btn-sm { padding: 0.375rem 0.75rem; } .mp-action-row .btn-link:not(.btn-lg):not(.btn-sm) { padding: 0.5rem 1rem; } .mp-action-row .btn-link:hover { background: var(--bg-surface); border-color: var(--primary); } .mp-row-action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .mp-row-action:hover { background: var(--bg-surface); color: var(--text-primary); } .mp-row-action:focus-visible { outline: 0; box-shadow: var(--shadow-ring); } /* A destructive row action (Close/Cancel) stays neutral at rest and turns red only on hover or focus, so a row of actions reads as one set (grid-design, 2026-09-24). */ .mp-row-action.mp-row-action--danger:hover, .mp-row-action.mp-row-action--danger:focus-visible { background: rgba(var(--danger-rgb), 0.08); color: var(--danger); } .mp-row-action:disabled { background: transparent; color: var(--text-muted); } /* ---- Data table (CL-08) ------------------------------------------------- */ .mp-data-table { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; } .mp-data-table__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); } .mp-data-table__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .mp-data-table__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .mp-data-table__body { padding: var(--space-5); } .mp-data-table__body .table { color: var(--text-primary); } .mp-data-table__body .text-end { font-variant-numeric: tabular-nums; } .mp-data-table__empty { padding: var(--space-6) var(--space-5); } /* ---- Grid (grid-design skill) ------------------------------------------- */ /* The portal table look, one on every list page (owner, 2026-09-25): a light grey header row with 12px semibold dark headings, roomy rows with hairline borders, no stripes, a faint hover and pill status tags, in a rounded results card with a soft shadow and a plain title. Put .mp-grid on a .table (no table-striped, table-light or table-bordered). Cells are transparent so the card and the hover show through Bootstrap's per-cell background. Uppercase headers come from site.css .table thead th; this file never transforms text (06 guard 12). */ .table.mp-grid { margin-bottom: 0; } .table.mp-grid thead th { background: var(--bg-surface); border-bottom: 0; padding: 14px 16px; font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.03em; color: var(--text-primary); white-space: nowrap; } .table.mp-grid tbody td { padding: 13px 16px; font-size: 13px; color: var(--text-secondary); vertical-align: middle; border-bottom: 1px solid var(--border-color); background-color: transparent; transition: background var(--transition-fast); } .table.mp-grid tbody tr:last-child > td { border-bottom: none; } .table.mp-grid tbody tr:not(.mp-grid__detail-row):hover > td { background: rgba(var(--primary-rgb), 0.03); } /* Expandable rows: a closed last row has no border against the card edge. */ .table.mp-grid tbody tr.expandable-row:nth-last-child(2):not([aria-expanded="true"]) > td { border-bottom: none; } .table.mp-grid .mp-grid__nowrap { white-space: nowrap; } /* A row-actions column sits at the right edge; it is not an amount, so it is never centred. */ .table.mp-grid th.mp-grid__actions, .table.mp-grid td.mp-grid__actions { text-align: right; white-space: nowrap; } /* Amount column (the only text-end column in a grid): heading and values centred, digits aligned. The selectors also cover a DataTable, whose stylesheet right-aligns numeric columns (.dt-right, .dt-type-numeric) and whose td rules would otherwise outrank the plain .table rule. */ .table.mp-grid th.text-end, .table.mp-grid td.text-end, .table.mp-grid th.mp-grid__amount, .table.mp-grid td.mp-grid__amount, table.dataTable.mp-grid > thead > tr > th.text-end, table.dataTable.mp-grid > tbody > tr > td.text-end, table.dataTable.mp-grid > tbody > tr > td.dt-right, table.dataTable.mp-grid > tbody > tr > td.dt-type-numeric { text-align: center !important; } .table.mp-grid td.text-end, .table.mp-grid td.mp-grid__amount { color: var(--text-primary); white-space: nowrap; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } .mp-grid__ref { font-weight: var(--font-weight-medium); font-size: 13px; color: var(--text-primary); } /* Status tags inside a grid are pills (owner, 2026-09-25). */ .table.mp-grid .mp-status-badge { border-radius: var(--radius-full); padding: 3px 12px; font-size: 12px; } .mp-grid__meta { margin-top: 1px; font-size: 10.5px; color: var(--text-muted); } .table.mp-grid td.mp-grid__date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .table.mp-grid .mp-grid__expand { width: 40px; color: var(--text-muted); text-align: center; } .table.mp-grid tbody td.mp-grid__detail { padding: var(--space-4) var(--space-5); background: var(--bg-surface); } .mp-grid__detail-label { font-size: 10.5px; font-weight: var(--font-weight-semibold); color: var(--text-muted); margin-bottom: 2px; } .mp-grid__detail-value { font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; } /* A DataTable drawn as the grid: DataTables gives every table.dataTable a 6px top and bottom margin, which would open a gap under the card header. */ table.dataTable.mp-grid { margin-top: 0 !important; margin-bottom: 0 !important; } /* Results card holding an .mp-grid (a page script adds mp-grid-card to the _GenericDataTable card; the Razor partials get the same look from their own markup): "Search results" title styled as the card-header title, the "N of M records" pill, and the grid flush against the header with the DataTables footer keeping its own padding. */ .mp-grid-card .card-header .card-title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); } .mp-grid-card .card-header .card-title .bi { display: none; /* plain title, no icon (owner, 2026-09-25) */ } /* The results card: rounded, soft shadow, a white header without a rule (owner, 2026-09-25). */ .card.mp-grid-card { border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; } .card.mp-grid-card > .card-header { padding: var(--space-4) 20px; background: var(--bg-card); border-bottom: 0; } .card.mp-grid-card > .card-body { padding: 0; } .card.mp-grid-card > .card-body > .table-responsive { border: 0; border-radius: 0; } .mp-grid-card .results-count { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* DataTables chrome under every grid, styled once here (grid-design skill, Rule 1): the ".bottom" row holding the "Showing X to Y of Z entries" info and the pager, the processing spinner, and the table margin fix. Pages never carry their own copy. */ .card.mp-grid-card .dataTables_wrapper table.dataTable { margin: 0 !important; width: 100% !important; } .card.mp-grid-card .dataTables_wrapper .bottom, .card.mp-grid-card .mp-grid__footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-color); } .card.mp-grid-card .dataTables_wrapper .dataTables_info, .card.mp-grid-card .dataTables_wrapper .dataTables_paginate { float: none; margin: 0; white-space: normal; } .card.mp-grid-card .dataTables_wrapper .dataTables_info, .card.mp-grid-card .mp-grid__footer-info { padding: 0; font-size: var(--font-size-sm); color: var(--text-muted); } .card.mp-grid-card .dataTables_wrapper .dataTables_paginate { max-width: 100%; overflow-x: auto; padding: 0; } .card.mp-grid-card .dataTables_wrapper .dataTables_paginate .paginate_button, .card.mp-grid-card .mp-grid__page { border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary) !important; margin: 0 2px; min-width: 2.25rem; padding: 0.375rem 0.75rem; background: var(--bg-card); } .card.mp-grid-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .card.mp-grid-card a.mp-grid__page:hover { background: rgba(var(--primary-rgb), 0.05); border-color: var(--text-muted); color: var(--text-primary) !important; } .card.mp-grid-card .dataTables_wrapper .dataTables_paginate .paginate_button.current, .card.mp-grid-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .card.mp-grid-card .mp-grid__page.current { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; } .card.mp-grid-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .card.mp-grid-card .mp-grid__page.disabled { color: var(--text-muted) !important; background: var(--bg-card); } /* A server-rendered pager (Paylink/Index) uses the same buttons: laid out in a row, links not underlined, and the gap between page windows drawn as muted text. */ .card.mp-grid-card .mp-grid__pager { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); } .card.mp-grid-card .mp-grid__page { display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); text-decoration: none; } .card.mp-grid-card .mp-grid__page.disabled { cursor: default; opacity: 0.6; } .card.mp-grid-card .mp-grid__page-gap { padding: 0 var(--space-1); color: var(--text-muted); } .card.mp-grid-card .dataTables_wrapper .dataTables_processing { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); } /* ---- KPI card (CL-09) --------------------------------------------------- */ /* The same look as the dashboard metric cards (grid-design skill, "Dashboard KPI cards"): a white card with a 4px left accent bar, a softly tinted icon chip beside the label, then the value, then meta. The markup stays icon > body(label, value, meta); display: contents on the body lets the grid put the chip and label on one row and the value under both. Tone lives in the bar and the chip only. */ .mp-kpi-card { --mp-kpi-accent: var(--primary); --mp-kpi-accent-rgb: var(--primary-rgb); position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; height: 100%; padding: 18px var(--space-5) var(--space-4) var(--space-6); background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); color: var(--text-primary); overflow: hidden; } .mp-kpi-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--mp-kpi-accent); } .mp-kpi-card--success { --mp-kpi-accent: var(--success); --mp-kpi-accent-rgb: var(--success-rgb); } .mp-kpi-card--warning { --mp-kpi-accent: var(--warning); --mp-kpi-accent-rgb: var(--warning-rgb); } .mp-kpi-card--danger { --mp-kpi-accent: var(--danger); --mp-kpi-accent-rgb: var(--danger-rgb); } .mp-kpi-card--info { --mp-kpi-accent: var(--info); --mp-kpi-accent-rgb: var(--info-rgb); } .mp-kpi-card--neutral { --mp-kpi-accent: var(--secondary); --mp-kpi-accent-rgb: var(--secondary-rgb); } .mp-kpi-card__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(var(--mp-kpi-accent-rgb), 0.12); color: var(--mp-kpi-accent); font-size: 15px; } .mp-kpi-card__body { display: contents; } .mp-kpi-card__label { margin: 0; min-width: 0; font-size: 13px; font-weight: var(--font-weight-semibold); line-height: 1.3; color: var(--text-secondary); } .mp-kpi-card__value { grid-column: 1 / -1; margin: 14px 0 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* The currency caption before an amount (the code, then "27,423.00"): smaller and grey, so the number leads. */ .mp-kpi-card__currency { margin-right: var(--space-1); font-size: 0.68em; font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--text-muted); } /* A unit after the figure ("49 transactions"): small and muted, as the dashboard's .kpi-unit. */ .mp-kpi-card__unit { margin-left: 2px; font-size: 13px; font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--text-muted); } .mp-kpi-card__meta { grid-column: 1 / -1; justify-self: start; margin: var(--space-2) 0 0; padding: 2px 9px; border-radius: var(--radius-full); background: rgba(var(--mp-kpi-accent-rgb), 0.1); font-size: 11.5px; font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--mp-kpi-accent); } /* ---- Status badge (CL-09) ----------------------------------------------- */ /* Always icon + text + modifier, never colour alone. */ .mp-status-badge { --mp-badge-fg: var(--text-secondary); --mp-badge-rgb: var(--secondary-rgb); display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.1875rem 0.625rem; border: 1px solid rgba(var(--mp-badge-rgb), 0.25); border-radius: var(--radius-full); background: rgba(var(--mp-badge-rgb), 0.12); color: var(--mp-badge-fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); white-space: nowrap; vertical-align: middle; } .mp-status-badge__icon, .mp-status-badge > .bi { font-size: 0.875em; line-height: 1; } .mp-status-badge--success { --mp-badge-fg: var(--success-dark); --mp-badge-rgb: var(--success-rgb); } .mp-status-badge--warning { --mp-badge-fg: var(--warning-dark); --mp-badge-rgb: var(--warning-rgb); } .mp-status-badge--danger { --mp-badge-fg: var(--danger-dark); --mp-badge-rgb: var(--danger-rgb); } .mp-status-badge--info { --mp-badge-fg: var(--info-dark); --mp-badge-rgb: var(--info-rgb); } .mp-status-badge--neutral { --mp-badge-fg: var(--text-secondary); --mp-badge-rgb: var(--secondary-rgb); } /* In a table cell (every grid, grid-design skill): a compact tinted tag with coloured semibold text, no border and no icon. The tag helper still writes the icon (its contract); it is only hidden here. The status text carries the meaning, so the badge is never colour-only. Badges outside tables keep the icon. */ table .mp-status-badge { gap: 0; padding: 0.1875rem 0.5rem; border-color: transparent; border-radius: var(--radius-sm); background: rgba(var(--mp-badge-rgb), 0.12); font-size: 11.5px; font-weight: var(--font-weight-semibold); line-height: 1.4; } table .mp-status-badge > .mp-status-badge__icon { display: none; } /* ---- Empty state (CL-09) ------------------------------------------------ */ .mp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-muted); } .mp-empty-state__icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-2); border-radius: var(--radius-xl); background: var(--bg-surface); color: var(--text-muted); font-size: var(--font-size-2xl); } .mp-empty-state__message { max-width: 28rem; margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); } .mp-empty-state__action { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--primary); } .mp-empty-state__action:hover { color: var(--primary-dark); } /* ---- Confirm modal (CL-10) ---------------------------------------------- */ /* Applied to the Bootstrap .modal root rendered once by _Layout. */ .mp-confirm .modal-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text-primary); } .mp-confirm .modal-header, .mp-confirm .modal-footer { border-color: var(--border-color); } .mp-confirm__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: rgba(var(--warning-rgb), 0.12); color: var(--warning-dark); font-size: var(--font-size-lg); } .mp-confirm__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .mp-confirm__message { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); } .mp-confirm__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } /* ---- phase B additions ------------------------------------------------- */ /* mp-date-range (CL-06): the wrapper takes no box of its own, so its two col-md-3 cells sit directly in the surrounding .row.g-3 grid. The cell class is a hook; min-width: 0 only stops a long label forcing overflow. .mp-money and .mp-date (CL-11) are hook-only classes and need no rules. */ .mp-date-range { display: contents; } .mp-date-range__field { min-width: 0; } /* ---- Dark mode ([data-dark="true"] on , see site.css) ------------- */ /* site.css re-points the base colours under data-dark but not the -dark shades, so foreground text switches to the base colour for contrast. */ [data-dark="true"] .mp-status-badge--success { --mp-badge-fg: var(--success); } [data-dark="true"] .mp-status-badge--warning { --mp-badge-fg: var(--warning); } [data-dark="true"] .mp-status-badge--danger { --mp-badge-fg: var(--danger); } [data-dark="true"] .mp-status-badge--info { --mp-badge-fg: var(--info); } [data-dark="true"] .mp-confirm__icon { color: var(--warning); } [data-dark="true"] .mp-empty-state__action:hover { color: var(--text-primary); } /* ---- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mp-filter-bar__header, .mp-filter-bar__chevron, .mp-row-action { transition: none; } } /* SC-01 MerchantTransaction/Index */ /* Moved from the view's inline style block. The uppercase transform is dropped (06 guard 12); the hex fallbacks are dropped because site.css defines both tokens. */ .mp-page-merchanttransaction .filter-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; color: var(--text-muted); padding: .25rem 0; display: flex; align-items: center; gap: .5rem; } .mp-page-merchanttransaction .filter-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* end SC-01 */ /* SC-03 CashOutPoolStatement/Index */ /* The view had no inline style block. The client-side date messages (#START_DATE_error, #END_DATE_error, #toMsg) sit in one full-width cell under the date range: no top gutter, so the cell takes no space while they are hidden, and one message per line when shown. The required marker on the two date labels is visual only; no required attribute is added. */ .mp-page-cashoutpoolstatement .mp-page-cashoutpoolstatement__date-errors { display: flex; flex-direction: column; margin-top: 0; } .mp-page-cashoutpoolstatement .mp-date-range__field .form-label::after { content: " *"; color: var(--danger); } /* end SC-03 */ /* SC-04 MerchantTransHistory/Index */ /* Moved from the view's inline style block and scoped to the page root, so the two rules that were unscoped there (.validation-error, .is-invalid) still reach this page only. Tokens only, no hex, no case change. Not moved, because the markup they styled is no longer rendered: the .card/.card-header/.card-body, .filter-accordion header, chevron and .card-title rules (the panel is now , styled above), .input-group-text ( has no input group) and .page-breadcrumb (the one breadcrumb is in _Layout, outside the page root). */ .mp-page-merchanttranshistory { max-width: 100%; overflow-x: hidden; } .mp-page-merchanttranshistory .form-control, .mp-page-merchanttranshistory .form-select { border-color: var(--border-color); } .mp-page-merchanttranshistory, .mp-page-merchanttranshistory .row, .mp-page-merchanttranshistory .col-12 { min-width: 0; } .mp-page-merchanttranshistory .page-header { align-items: flex-start; flex-wrap: wrap; gap: .75rem; } .mp-page-merchanttranshistory .page-title { overflow-wrap: anywhere; } .mp-page-merchanttranshistory .validation-error { color: var(--danger); font-size: 0.875rem; margin-top: 0.25rem; } .mp-page-merchanttranshistory .is-invalid { border-color: var(--danger) !important; } @media (max-width: 575.98px) { .mp-page-merchanttranshistory .page-title { font-size: 1.35rem; } .mp-page-merchanttranshistory .search-actions { flex-direction: column; } .mp-page-merchanttranshistory .search-actions .btn { width: 100%; } } /* end SC-04 */ /* SC-05 CashoutRecon/Index, ThirdPartyTransactionStatement/Index */ /* Neither view had an inline style block or style="" attribute. The client-side date messages (#StartDate_error/#EndDate_error/#toMsg on CashoutRecon, #START_DATE_error/#END_DATE_error/#toMsg on the third-party statement) sit in one full-width cell under the date range: no top gutter, so the cell takes no space while they are hidden, and one message per line when shown. */ .mp-page-cashoutrecon .mp-page-cashoutrecon__date-errors, .mp-page-thirdpartytransactionstatement .mp-page-thirdpartytransactionstatement__date-errors { display: flex; flex-direction: column; margin-top: 0; } /* end SC-05 */ /* SC-07 Instructions/Index */ /* Merged from wwwroot/css/instructions.css (deleted; no other view linked it) and rescoped from .instructions-page to the page root .mp-page-instructions. The unscoped .instructions-card rules are scoped under the page root too; that class is used by this view only. Tokens only: the two var(--danger, #hex) fallbacks are dropped because site.css defines --danger. No case change. Not moved, because the markup they styled is no longer rendered: the .filter-accordion .card-header transition and hover rules (both filter panels are now mp-filter-bar). The .card, .card-header and .card-title rules still style the two _GenericDataTable result cards. */ .mp-page-instructions { max-width: 100%; min-width: 0; overflow-x: hidden; } .mp-page-instructions .card, .mp-page-instructions .row, .mp-page-instructions .col-12 { min-width: 0; } .mp-page-instructions .card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .mp-page-instructions .card-header { background: var(--bg-card); border-bottom-color: var(--border-color); color: var(--text-primary); } .mp-page-instructions .page-header { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; } .mp-page-instructions .page-title { overflow-wrap: anywhere; } .mp-page-instructions .form-control, .mp-page-instructions .input-group-text { border-color: var(--border-color); } .mp-page-instructions .instructions-card { max-width: 100%; min-width: 0; overflow: hidden; width: 100%; } .mp-page-instructions .transaction-table-wrap { max-width: 100%; overflow-x: auto; width: 100%; } .mp-page-instructions .dataTables_wrapper { max-width: 100%; overflow: visible; width: 100%; } .mp-page-instructions .dataTables_wrapper table.dataTable { margin: 0 !important; table-layout: auto; width: 100% !important; } .mp-page-instructions .dataTables_wrapper table.dataTable thead th.text-start, .mp-page-instructions .dataTables_wrapper table.dataTable tbody td.text-start { text-align: left !important; } .mp-page-instructions .validation-error { color: var(--danger); display: block; font-size: 0.8rem; margin-top: 0.25rem; } .mp-page-instructions .is-invalid { border-color: var(--danger) !important; } .mp-page-instructions .search-actions { flex-wrap: wrap; } .mp-page-instructions .instructions-tabs, .dd-mandate-page .instructions-tabs, .merchant-self-service-page .instructions-tabs { /* Pill tabs (owner, 2026-09-25, after the Sneat admin template): no track; each tab is an icon + label, the active one a solid primary pill with --text-on-primary text and a soft primary shadow, the others plain text that turns primary on hover. Theme tokens only. Scrolls sideways when it can't fit. Shared with the Recurring Payments tabs (dd-mandate-page) and Developer Settings (merchant-self-service-page) so every tabbed page reads as one tab style. */ background: transparent; border: 0; display: inline-flex; flex-wrap: nowrap; gap: 0.5rem; max-width: 100%; overflow-x: auto; padding: 2px 4px 6px 2px; scrollbar-width: none; } .mp-page-instructions .instructions-tabs::-webkit-scrollbar, .dd-mandate-page .instructions-tabs::-webkit-scrollbar, .merchant-self-service-page .instructions-tabs::-webkit-scrollbar { display: none; } .mp-page-instructions .instructions-tabs .nav-item, .dd-mandate-page .instructions-tabs .nav-item, .merchant-self-service-page .instructions-tabs .nav-item { flex: 0 0 auto; } .mp-page-instructions .instructions-tabs .nav-link, .dd-mandate-page .instructions-tabs .nav-link, .merchant-self-service-page .instructions-tabs .nav-link { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); display: inline-flex; font-weight: var(--font-weight-medium); gap: 0.5rem; padding: 0.55rem 1.25rem; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .mp-page-instructions .instructions-tabs .nav-link:hover:not(.active), .dd-mandate-page .instructions-tabs .nav-link:hover:not(.active), .merchant-self-service-page .instructions-tabs .nav-link:hover:not(.active) { background: transparent; color: var(--primary); } .mp-page-instructions .instructions-tabs .nav-link.active, .dd-mandate-page .instructions-tabs .nav-link.active, .merchant-self-service-page .instructions-tabs .nav-link.active { background: var(--primary); box-shadow: 0 2px 4px 0 rgba(var(--primary-rgb), 0.4); color: var(--text-on-primary); } .mp-page-instructions .instructions-tabs .nav-link:focus-visible, .dd-mandate-page .instructions-tabs .nav-link:focus-visible, .merchant-self-service-page .instructions-tabs .nav-link:focus-visible { box-shadow: var(--shadow-ring); outline: none; } @media (max-width: 575.98px) { .mp-page-instructions .search-actions { justify-content: stretch !important; } .mp-page-instructions .search-actions .btn { flex: 1 1 auto; } .mp-page-instructions .instructions-tabs, .dd-mandate-page .instructions-tabs, .merchant-self-service-page .instructions-tabs { display: flex; width: 100%; } .mp-page-instructions .instructions-tabs .nav-link, .dd-mandate-page .instructions-tabs .nav-link, .merchant-self-service-page .instructions-tabs .nav-link { font-size: 0.875rem; padding: 0.45rem 0.75rem; } } /* Settlement Configuration: coloured card accent (top edge) and stat box accent (left edge), shared by the Instructions/Index tab and the standalone Instructions/SettlementConfiguration page. --primary and --accent are both neutral (black / grey) in this palette, so these deliberately use the status tokens (info/success/warning/danger) instead, which are the only ones with real hue. */ .settlement-card-accent { border-top-width: 3px !important; } .settlement-card-accent-info { border-top-color: var(--info) !important; } .settlement-card-accent-danger { border-top-color: var(--danger) !important; } .settlement-stat { border-left-width: 4px !important; } .settlement-stat-info { border-left-color: var(--info) !important; } .settlement-stat-warning { border-left-color: var(--warning) !important; } .settlement-stat-success { border-left-color: var(--success) !important; } /* end SC-07 */ /* SC-06 Dashboard/CollectionsMetric, Dashboard/CashoutMetric (+ Payment/_PartialTable, CashOut/_PartialTable, Dashboard/_DashboardMetricSummaryBar) */ /* Merged from wwwroot/css/dashboard-metric-pages.css, collections-metric.css and cashout-metric.css (deleted; only these two views linked them) and the inline style block of CashoutMetric. Every rule is scoped to the page roots (.dashboard-metric-page, .collections-metric-page, .cashout-metric-page) or the Log details modal, so nothing reaches another page now that the rules load with the layout. The two page files were identical apart from the prefix, so each rule is written once for both pages. Tokens only: the hex fallbacks inside var() are dropped because site.css defines every token, and the is-updated ring uses --success-rgb in place of the literal green 34, 197, 94. Text is never case-transformed (06 guard 12): the uppercase result labels and the capitalised status pill are shown as written. Not moved, because the markup they styled is no longer rendered: the filter .card-header/.bg-primary, chevron and .card-title rules (the panel is mp-filter-bar), the old summary bar box, items, divider and ::before accents (the two figures are mp-kpi-card), the .status-badge pills (mp-status-badge), and the unused a.dashboard-metric-link, .dashboard-metric-filters-card and .dataTables_wrapper rules (no such markup, and no DataTables, on these pages). */ .dashboard-metric-page { max-width: 100%; } .dashboard-metric-page .mp-filter-bar__body > .row { align-items: flex-end; } .dashboard-metric-page .metric-summary-bar { margin-bottom: 1.25rem; } .dashboard-metric-page .metric-summary-bar .mp-kpi-card { transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } /* After a search the two figures are refreshed: a soft ring in the card's own tone marks them. */ .dashboard-metric-page .metric-summary-bar.is-updated .mp-kpi-card { border-color: rgba(var(--mp-kpi-accent-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--mp-kpi-accent-rgb), 0.15); } /* Page-header actions ("Back to dashboard" and the like): the same outlined button as the search Reset/Export and the Recent Transactions "View all", with the arrow nudging left on hover. Markup is unchanged (a render test pins it). */ .mp-page-header__actions :is(.btn-outline-secondary, .btn-outline-primary) { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-xs); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .mp-page-header__actions :is(.btn-outline-secondary, .btn-outline-primary) .bi { transition: transform var(--transition-fast); } .mp-page-header__actions :is(.btn-outline-secondary, .btn-outline-primary):hover, .mp-page-header__actions :is(.btn-outline-secondary, .btn-outline-primary):focus-visible { background: rgba(var(--primary-rgb), 0.05); border-color: var(--text-muted); color: var(--text-primary); } .mp-page-header__actions :is(.btn-outline-secondary, .btn-outline-primary):hover .bi { transform: translateX(-2px); } .dashboard-metric-page .dashboard-metric-table-card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .collections-metric-page .collections-date-field .input-group, .cashout-metric-page .cashout-date-field .input-group { flex-wrap: nowrap; } .collections-metric-page .collections-date-field .input-group > .flatpickr-wrapper, .cashout-metric-page .cashout-date-field .input-group > .flatpickr-wrapper { display: flex; flex: 1 1 auto; min-width: 0; } .collections-metric-page .collections-date-field .input-group > .flatpickr-wrapper .form-control, .cashout-metric-page .cashout-date-field .input-group > .flatpickr-wrapper .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; width: 100%; } /* Search criteria (every .mp-filter-bar; first built for the Collections and Payouts metric pages): one 4-column grid, quiet labels, inputs and date pickers of one shape, and the actions on their own row under a hairline. */ .mp-filter-bar__body { padding: var(--space-5); } .mp-filter-bar .form-label { margin-bottom: 6px; font-size: 12.5px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); } .mp-filter-bar .form-control, .mp-filter-bar .form-select { min-height: 2.5rem; } /* The flatpickr display input (altInput) follows the hidden m/d/Y input, so Bootstrap's input-group treats it as a middle child: give it back the left radius and drop the -1px overlap. */ .mp-filter-bar .input-group > input[type="hidden"] + .form-control { margin-left: 0; border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } .mp-filter-bar .input-group-text { padding: 0 0.75rem; background: var(--bg-card); border-color: var(--border-color); border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); color: var(--text-muted); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } .mp-filter-bar .input-group-text:hover { background: rgba(var(--primary-rgb), 0.05); color: var(--primary); } .mp-filter-bar .input-group:focus-within .form-control, .mp-filter-bar .input-group:focus-within .input-group-text { border-color: var(--primary); } .mp-filter-bar .iti { display: block; width: 100%; } .mp-filter-bar .mp-action-row { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-color); } .mp-filter-bar .mp-action-row .btn { min-width: 7rem; min-height: 2.5rem; } /* Reset keeps its btn-link class (ST-09) but is drawn as an outlined button like Export: same height, padding, border and radius, muted text, no underline, a light tint on hover. */ .mp-filter-bar .mp-action-row .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-secondary); font-weight: var(--font-weight-medium); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .mp-filter-bar .mp-action-row .btn-link:hover, .mp-filter-bar .mp-action-row .btn-link:focus-visible { background: rgba(var(--primary-rgb), 0.05); border-color: var(--text-muted); color: var(--text-primary); } .mp-filter-bar .mp-action-row .btn-link .bi { font-size: 0.95em; } .collections-metric-page #searchResults, .cashout-metric-page #searchResults { margin-bottom: 1.5rem; } .collections-metric-page .collections-search-results, .cashout-metric-page .cashout-search-results { overflow: hidden; } .collections-metric-page .transaction-table-wrap, .cashout-metric-page .transaction-table-wrap { max-width: 100%; overflow-x: auto; } .collections-metric-page .expandable-row, .cashout-metric-page .expandable-row { cursor: pointer; } .collections-metric-page .expandable-row:hover, .cashout-metric-page .expandable-row:hover { background-color: rgba(var(--primary-rgb), 0.04); } .collections-metric-page .expand-icon, .cashout-metric-page .expand-icon { display: inline-block; /* a transform has no effect on an inline , so the arrow never turned */ transition: transform 0.2s ease; } .collections-metric-page .expand-icon.expanded, .collections-metric-page tr.expandable-row[aria-expanded="true"] .expand-icon, .cashout-metric-page .expand-icon.expanded, .cashout-metric-page tr.expandable-row[aria-expanded="true"] .expand-icon { transform: rotate(90deg); } .collections-metric-page .collections-results-mobile, .cashout-metric-page .cashout-results-mobile { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; } .collections-metric-page .collections-result-card, .cashout-metric-page .cashout-result-card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); padding: 0.875rem; box-shadow: var(--card-shadow); } .collections-metric-page .collections-result-card-header, .cashout-metric-page .cashout-result-card-header { align-items: flex-start; display: flex; gap: 0.75rem; justify-content: space-between; margin-bottom: 0.75rem; } .collections-metric-page .collections-result-grid, .cashout-metric-page .cashout-result-grid { display: grid; gap: 0.65rem 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .collections-metric-page .collections-result-label, .cashout-metric-page .cashout-result-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.15rem; } .collections-metric-page .collections-result-value, .cashout-metric-page .cashout-result-value { color: var(--text-primary); font-size: 0.875rem; overflow-wrap: anywhere; } .collections-metric-page .collections-result-details, .cashout-metric-page .cashout-result-details { background: var(--bg-body); border-radius: var(--border-radius-sm); display: grid; font-size: 0.8125rem; gap: 0.45rem; padding: 0.75rem; } .collections-metric-page .collections-pagination-footer, .cashout-metric-page .cashout-pagination-footer { align-items: center; background: var(--bg-body); border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; padding: 0.75rem 1rem; } .collections-metric-page .collections-pagination-info, .cashout-metric-page .cashout-pagination-info { color: var(--text-muted); font-size: 0.875rem; } .collections-metric-page .collections-pagination, .cashout-metric-page .cashout-pagination { max-width: 100%; overflow-x: auto; } .collections-metric-page .collections-pagination .pagination, .cashout-metric-page .cashout-pagination .pagination { flex-wrap: nowrap; margin-bottom: 0; } .collections-metric-page .collections-pagination .page-link, .cashout-metric-page .cashout-pagination .page-link { border-color: var(--border-color); color: var(--text-primary); } .collections-metric-page .collections-pagination .page-link:hover, .cashout-metric-page .cashout-pagination .page-link:hover { background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary); color: var(--primary); } .collections-metric-page .collections-pagination .page-item.active .page-link, .cashout-metric-page .cashout-pagination .page-item.active .page-link { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; } .collections-metric-page .collections-pagination .page-item.disabled .page-link, .cashout-metric-page .cashout-pagination .page-item.disabled .page-link { background-color: var(--bg-body); color: var(--text-muted); } #LogDetailsModal .message-preformatted { white-space: pre-wrap !important; } @media (max-width: 767.98px) { .collections-metric-page .collections-result-grid, .cashout-metric-page .cashout-result-grid { grid-template-columns: 1fr; } .collections-metric-page .collections-pagination-footer, .cashout-metric-page .cashout-pagination-footer { align-items: stretch; flex-direction: column; } .collections-metric-page .collections-pagination .pagination, .cashout-metric-page .cashout-pagination .pagination { justify-content: center; width: 100%; } } /* end SC-06 */ /* SC-09 Dashboard/IndexGraph (+ Dashboard/_DashboardSummary, Dashboard/_DashboardMerchantTable) */ /* Moved whole from the view's inline style block, in the same order and with the same selectors (none of these class names or #pagination-demo is used by another view, and keeping the selectors unscoped keeps today's specificity against Bootstrap, for example .legacy-empty inside .table-sm). Tokens only: the hex fallbacks inside var() are dropped because site.css defines every token; the white text on the active period and pagination buttons is --text-on-primary (white in site.css); the undefined --text-color (which fell back to a literal slate) is --text-primary. The two uppercase case transforms on .dash-section-label and .dash-page-heading are dropped (06 guard 12), so those texts show as written. New: .legacy-summary padding, so the five mp-kpi-card figures line up with the chart pane. */ .dash-tab-strip { display: flex; list-style: none; margin: 0; padding: 0; background: var(--bg-card); border-bottom: 1px solid var(--border-color); } .dash-tab-strip li { flex: 1; } .dash-tab-btn { display: block; width: 100%; padding: .75rem 1rem; background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--text-muted); font-size: .875rem; font-weight: 600; cursor: pointer; text-align: center; transition: color .15s, border-color .15s; letter-spacing: .01em; } .dash-tab-btn:hover { color: var(--primary); background: rgba(var(--primary-rgb), .04); } .dash-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(var(--primary-rgb), .04); } .dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.25rem .75rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .dash-header-left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .dash-section-label { font-size: .75rem; font-weight: 700; letter-spacing: .07em; color: var(--text-muted); } .dash-period-group { display: inline-flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; } .dash-period-btn { display: inline-block; padding: .3rem .75rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; background: transparent; border-right: 1px solid var(--border-color); transition: background .12s, color .12s; white-space: nowrap; } .dash-period-btn:last-child { border-right: none; } .dash-period-btn:hover { background: var(--bg-body); color: var(--primary); text-decoration: none; } .dash-period-btn.is-active { background: var(--primary); color: var(--text-on-primary); } .dash-pagination-wrap { display: flex; align-items: center; gap: .5rem; } #pagination-demo { display: inline-flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } #pagination-demo button { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: .78rem; font-weight: 700; line-height: 1; min-width: 30px; padding: .4rem .55rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } #pagination-demo button:hover { background: var(--bg-body); border-color: var(--primary); color: var(--primary); } #pagination-demo button.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); } .legacy-tab-pane { display: none; } .legacy-tab-pane.active { display: block; } .legacy-chart-page { display: none; } .legacy-chart-page.active { display: block; } .dash-pane-body { padding: 1.25rem; } .dash-page-heading { font-size: .8rem; font-weight: 700; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 1rem; } .dash-chart-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.25rem; } .dash-chart-card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); } .dash-chart-card-header { padding: .6rem .85rem; border-bottom: 1px solid var(--border-color); font-size: .75rem; font-weight: 600; color: var(--text-muted); background: var(--bg-body); letter-spacing: .02em; } .dash-chart-box { height: 280px; position: relative; padding: .75rem; } .dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; color: var(--text-muted); font-size: .9rem; gap: .5rem; } .dash-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-body); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; } .dash-data-section { border-top: 1px solid var(--border-color); } .legacy-empty { color: var(--text-muted); padding: 2rem; text-align: center; font-size: .875rem; } @media (max-width: 767.98px) { .dash-chart-grid { grid-template-columns: 1fr; } .dash-tab-strip { overflow-x: auto; } .dash-tab-btn { white-space: nowrap; } .dash-header { flex-direction: column; align-items: flex-start; } } .dash-card-clip { overflow: hidden !important; } .dash-empty-icon-muted { color: var(--text-muted) !important; } .legacy-summary { padding: var(--space-5); } /* end SC-09 */ /* SC-08 Dashboard/MerchantDashboard */ /* Moved from the view's inline style block and scoped to the page root (.mp-page-merchantdashboard on the .md2 div), so the generic names (.chip-*, .icon-*) and the #MainEntityID width rule, which were page-only inline, still reach this page only now that they load with the layout. Every class the page script toggles (.md2-tab, .md2-tab-panel, .active) keeps its rule. Tokens only: the hex fallbacks inside var() are dropped because site.css defines every token used, except --bg-subtle, which no stylesheet or theme.js defines (so the fallback was always used) and is replaced by --bg-surface (the same colour in the light theme). The literal black shadows use the site.css shadow tokens. Text is never case-transformed (06 guard 12): the uppercase section labels, chips, value labels and chart titles are shown as written. Not moved, because the markup it styled is no longer rendered: .md2-selector (the merchant selector is now mp-filter-bar). No rule was identical to an existing components.css rule, so none was de-duplicated. */ .mp-page-merchantdashboard { max-width: 100%; } .mp-page-merchantdashboard .md2-selector-field { flex: 1 !important; min-width: 220px !important; max-width: 380px !important; } .mp-page-merchantdashboard .md2-selector-label { font-size: 12.5px !important; } .mp-page-merchantdashboard .md2-search-btn { align-self: flex-end !important; } .mp-page-merchantdashboard .md2-trend-section { margin-top: .5rem !important; } .mp-page-merchantdashboard .md2-trend-amount { font-size: var(--font-size-xl) !important; } /* Tab switcher */ .mp-page-merchantdashboard .md2-tabs { display: flex; gap: 3px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 3px; margin-bottom: 1.25rem; width: fit-content; } .mp-page-merchantdashboard .md2-tab { padding: 6px 20px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: none; border: none; display: flex; align-items: center; gap: 6px; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; } .mp-page-merchantdashboard .md2-tab.active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-sm); } .mp-page-merchantdashboard .md2-tab-panel { display: none; } .mp-page-merchantdashboard .md2-tab-panel.active { display: block; } /* Section divider: as the Home .dash-section (grid-design skill). */ .mp-page-merchantdashboard .md2-section-label { display: flex; align-items: center; gap: 10px; margin: var(--space-1) 0 var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .02em; color: var(--text-secondary); } .mp-page-merchantdashboard .md2-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* Float balance banner: an outlined tag, like the portal's secondary buttons. */ .mp-page-merchantdashboard .md2-float-banner { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: 1rem; padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); font-size: 13px; font-weight: var(--font-weight-semibold); } .mp-page-merchantdashboard .md2-float-banner .bi { color: var(--primary); } /* Metric and trend cards: the dashboard KPI card look (grid-design skill, "Dashboard KPI cards"). White, a 4px left accent bar, a tag-style status chip and a tinted icon chip in the header, quiet labels, semibold values with a small grey currency prefix, and the percentage lines as tinted pills. The tone is carried by --mp-md2-rgb / --mp-md2-fg, set per .success/.danger/.warning/.neutral. */ .mp-page-merchantdashboard .md2-card, .mp-page-merchantdashboard .md2-trend-card { --mp-md2-rgb: var(--secondary-rgb); --mp-md2-fg: var(--text-secondary); position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px var(--space-5) var(--space-4) var(--space-6); background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .mp-page-merchantdashboard .md2-card.success, .mp-page-merchantdashboard .md2-trend-card.success { --mp-md2-rgb: var(--success-rgb); --mp-md2-fg: var(--success-dark); } .mp-page-merchantdashboard .md2-card.danger, .mp-page-merchantdashboard .md2-trend-card.danger { --mp-md2-rgb: var(--danger-rgb); --mp-md2-fg: var(--danger-dark); } .mp-page-merchantdashboard .md2-card.warning, .mp-page-merchantdashboard .md2-trend-card.warning { --mp-md2-rgb: var(--warning-rgb); --mp-md2-fg: var(--warning-dark); } .mp-page-merchantdashboard .md2-card:hover, .mp-page-merchantdashboard .md2-trend-card:hover { box-shadow: var(--card-shadow); } .mp-page-merchantdashboard .md2-card::before, .mp-page-merchantdashboard .md2-trend-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: rgb(var(--mp-md2-rgb)); } .mp-page-merchantdashboard .md2-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } /* Status chip: the compact tag the grids use for a status (no dot, no letter-spacing). */ .mp-page-merchantdashboard .md2-chip { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: var(--radius-sm); background: rgba(var(--mp-md2-rgb), 0.12); color: var(--mp-md2-fg); font-size: 11.5px; font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } .mp-page-merchantdashboard .chip-success { background: rgba(var(--success-rgb), 0.12); color: var(--success-dark); } .mp-page-merchantdashboard .chip-danger { background: rgba(var(--danger-rgb), 0.12); color: var(--danger-dark); } .mp-page-merchantdashboard .chip-warning { background: rgba(var(--warning-rgb), 0.12); color: var(--warning-dark); } .mp-page-merchantdashboard .chip-neutral { background: rgba(var(--secondary-rgb), 0.12); color: var(--text-secondary); } /* Icon chip */ .mp-page-merchantdashboard .md2-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 15px; } .mp-page-merchantdashboard .icon-success { background: rgba(var(--success-rgb), 0.12); color: var(--success-dark); } .mp-page-merchantdashboard .icon-danger { background: rgba(var(--danger-rgb), 0.12); color: var(--danger-dark); } .mp-page-merchantdashboard .icon-warning { background: rgba(var(--warning-rgb), 0.12); color: var(--warning-dark); } .mp-page-merchantdashboard .icon-neutral { background: rgba(var(--secondary-rgb), 0.12); color: var(--text-secondary); } /* Metric values */ .mp-page-merchantdashboard .md2-label { margin-bottom: 2px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0; color: var(--text-secondary); } .mp-page-merchantdashboard .md2-value { margin-bottom: 6px; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -.01em; line-height: 1.2; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .mp-page-merchantdashboard .md2-currency { margin-right: var(--space-1); font-size: 0.68em; font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--text-muted); } .mp-page-merchantdashboard .md2-sub { display: inline-block; align-self: flex-start; margin-bottom: 10px; padding: 2px 9px; border-radius: var(--radius-sm); background: rgba(var(--mp-md2-rgb), 0.1); font-size: 11.5px; font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--mp-md2-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* The divider takes any spare height, so a tile stretched to its row keeps both groups tidy. */ .mp-page-merchantdashboard .md2-divider { flex-shrink: 0; height: 1px; margin: auto 0 var(--space-3); background: var(--border-color); } /* Chart card */ .mp-page-merchantdashboard .md2-chart-card { display: flex; flex-direction: column; height: 100%; padding: 18px var(--space-5) var(--space-4); background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .mp-page-merchantdashboard .md2-chart-card canvas { display: block; max-height: 180px; width: 100% !important; height: auto !important; flex: 1; } .mp-page-merchantdashboard .md2-chart-title { margin-bottom: var(--space-1); font-size: 13px; font-weight: var(--font-weight-semibold); letter-spacing: 0; color: var(--text-secondary); } .mp-page-merchantdashboard .md2-chart-total { margin-bottom: 10px; font-size: var(--font-size-xs); color: var(--text-muted); } .mp-page-merchantdashboard .md2-chart-total strong { font-size: 14px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary); } .mp-page-merchantdashboard #MainEntityID { width: 100% !important; } .mp-page-merchantdashboard .select2-container { max-width: 100%; } @media (max-width: 575.98px) { .mp-page-merchantdashboard .md2-value { font-size: var(--font-size-xl); } .mp-page-merchantdashboard .md2-tabs { width: 100%; } .mp-page-merchantdashboard .md2-tab { flex: 1; justify-content: center; } } /* end SC-08 */ /* SC-10 Home/Index */ /* Moved from the view's inline style block and scoped to the page root (.mp-page-home-index), because .kpi-label, .kpi-icon, .kpi-value, .kpi-sub, .kpi-trend, .kpi-primary and .dash-section are also used by PerformanceStatistical, RemittanceFunds, Pages/PerformanceReport and Dashboard/IndexGraph, and the rules were page-only while inline. Values are unchanged. Text is never case-transformed (06 guard 12): the three uppercase transforms (.kpi-label, .dash-section, the recent-transactions table headers) are dropped, so those texts show as written. The four literal colours of the subtitle block have no equal site.css token and components.css holds no literal colour, so they use the nearest tokens (icon --primary-subtle and --primary, title --text-primary, description --text-secondary); the literal black shadows use the site.css shadow tokens, and the page-local accent property is --mp-home-kpi-accent (was --kpi-accent, same values, used only here). These are visible differences listed in the evidence doc. De-duplicated: the shimmer keyframes (identical to site.css "Animations"); no rule was identical to an existing components.css rule. */ /* KPI cards */ .mp-page-home-index a.dashboard-metric-link { color: inherit; display: block; text-decoration: none; height: 100%; } /* Dashboard KPI cards (grid-design skill, "Dashboard KPI cards"): white cards where the tone shows in three places only: a 4px left accent bar, a softly tinted icon chip, and the count line as a small tinted pill. Totals use --info, then success, danger and warning. A corner arrow shows the card opens a page. --mp-home-kpi-rgb / --mp-home-kpi-fg are set per tone below. */ .mp-page-home-index .metric-kpi { --mp-home-kpi-rgb: var(--info-rgb); --mp-home-kpi-fg: var(--info-dark); position: relative; display: flex; flex-direction: column; height: 100%; min-height: 8.5rem; padding: 18px var(--space-5) var(--space-4) var(--space-6); background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); } .mp-page-home-index .kpi-primary { --mp-home-kpi-rgb: var(--info-rgb); --mp-home-kpi-fg: var(--info-dark); } .mp-page-home-index .kpi-success { --mp-home-kpi-rgb: var(--success-rgb); --mp-home-kpi-fg: var(--success-dark); } .mp-page-home-index .kpi-danger { --mp-home-kpi-rgb: var(--danger-rgb); --mp-home-kpi-fg: var(--danger-dark); } .mp-page-home-index .kpi-warning { --mp-home-kpi-rgb: var(--warning-rgb); --mp-home-kpi-fg: var(--warning-dark); } /* Left accent bar. */ .mp-page-home-index .metric-kpi::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: rgb(var(--mp-home-kpi-rgb)); } /* Corner arrow (bi-arrow-up-right): faint at rest, tone-coloured and nudged on hover. */ .mp-page-home-index .metric-kpi::after { content: "\F144"; position: absolute; right: 16px; bottom: 14px; font-family: "bootstrap-icons"; font-size: 13px; line-height: 1; color: var(--text-muted); opacity: 0.6; transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast); } .mp-page-home-index a.dashboard-metric-link:hover .metric-kpi { box-shadow: var(--card-shadow); } .mp-page-home-index a.dashboard-metric-link:hover .metric-kpi::after { color: var(--mp-home-kpi-fg); opacity: 1; transform: translate(2px, -2px); } .mp-page-home-index a.dashboard-metric-link:focus-visible { outline: 0; } .mp-page-home-index a.dashboard-metric-link:focus-visible .metric-kpi { border-color: rgba(var(--mp-home-kpi-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--mp-home-kpi-rgb), 0.25); } /* Header line: the markup is label then icon; row-reverse puts the chip first. */ .mp-page-home-index .kpi-row { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; } .mp-page-home-index .kpi-label { margin: 0; font-size: 13px; font-weight: var(--font-weight-semibold); line-height: 1.3; color: var(--text-secondary); } .mp-page-home-index .kpi-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(var(--mp-home-kpi-rgb), 0.12); color: var(--mp-home-kpi-fg); font-size: 15px; } .mp-page-home-index .kpi-value { margin-top: auto; font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-page-home-index .kpi-currency { margin-right: var(--space-1); font-size: 0.68em; font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--text-muted); } .mp-page-home-index .kpi-unit { margin-left: 2px; font-size: 13px; font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--text-muted); } /* Count line as a small tinted pill ("15 transactions", "All networks · Today"). */ .mp-page-home-index .kpi-sub { display: inline-flex; align-items: center; align-self: flex-start; margin-top: var(--space-2); padding: 2px 9px; border-radius: var(--radius-full); background: rgba(var(--mp-home-kpi-rgb), 0.1); font-size: 11.5px; font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--mp-home-kpi-fg); } /* Section labels */ .mp-page-home-index .dash-section { display: flex; align-items: center; gap: 10px; margin: var(--space-1) 0 var(--space-3); font-size: 12px; font-weight: var(--font-weight-bold); letter-spacing: .02em; color: var(--text-secondary); } .mp-page-home-index .dash-section::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* Recent transactions table (owner's reference, 2026-09-25): a plain card title, a light grey header row with small dark letter-spaced headings (no tint, no heavy rule), roomy rows with hairline borders, a coloured icon before each reference, regular-weight body text and pill-shaped status tags. Home only. */ .mp-page-home-index #recentTxnCard { border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; } .mp-page-home-index #recentTxnCard > .card-header { padding: var(--space-5) 20px; border-bottom: 0; background: var(--bg-card); } .mp-page-home-index #recentTxnCard .card-header-title { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); } .mp-page-home-index #recentTxnCard > .card-header { display: flex; padding-top: var(--space-3); padding-bottom: var(--space-3); } .mp-page-home-index .txn-table thead th { background: var(--bg-surface); border-bottom: 0; padding: 16px 20px; font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: .03em; color: var(--text-primary); white-space: nowrap; } .mp-page-home-index .txn-table tbody td { padding: 14px 20px; font-size: 13.5px; color: var(--text-secondary); vertical-align: middle; border-bottom: 1px solid var(--border-color); } .mp-page-home-index .txn-table tbody tr:last-child td { border-bottom: none; } .mp-page-home-index .txn-table tbody tr { transition: background var(--transition-fast); } .mp-page-home-index .txn-table tbody tr:hover { background: rgba(var(--primary-rgb), .025); } .mp-page-home-index .txn-ref-cell { display: flex; align-items: center; gap: var(--space-3); } .mp-page-home-index .txn-ref { font-weight: var(--font-weight-medium); font-size: 13.5px; color: var(--text-primary); } .mp-page-home-index .txn-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } /* Status: the shared compact tag drawn as a pill in this table, as in the reference. */ .mp-page-home-index #recentTxnTable .mp-status-badge { border-radius: var(--radius-full); padding: 3px 12px; font-size: 12px; } .mp-page-home-index .txn-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; text-align: center; } /* The Amount heading (6th column) is centred over its values. */ .mp-page-home-index #recentTxnTable thead th:nth-child(6) { text-align: center; } .mp-page-home-index .txn-nowrap { white-space: nowrap; } /* Favourite report cards */ .mp-page-home-index .fav-report-card { transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .mp-page-home-index .fav-report-card:hover { box-shadow: var(--card-shadow) !important; } /* Skeleton rows (the shimmer keyframes come from site.css) */ .mp-page-home-index .txn-skeleton td { padding: 16px 20px; } .mp-page-home-index .skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-surface) 25%, var(--border-color) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .mp-page-home-index .skel-sm { height: 9px; width: 60%; margin-top: 4px; } .mp-page-home-index .skel-w80 { width: 80% !important; } .mp-page-home-index .skel-w55 { width: 55% !important; } .mp-page-home-index .skel-w65 { width: 65% !important; } .mp-page-home-index .skel-w50 { width: 50% !important; } .mp-page-home-index .skel-w70 { width: 70% !important; } /* Recent transactions table wrapper and runtime-rendered rows (empty state, date) */ .mp-page-home-index .recent-txn-table-wrap { border: none !important; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; } /* "View all" in the Recent Transactions card header: the same outlined button as the search Reset and Export (grey border, --radius corners, muted medium text), with the arrow nudging right on hover. */ .mp-page-home-index .recent-txn-view-all { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.375rem 0.875rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .mp-page-home-index .recent-txn-view-all .bi { font-size: 0.9em; transition: transform var(--transition-fast); } .mp-page-home-index .recent-txn-view-all:hover, .mp-page-home-index .recent-txn-view-all:focus-visible { background: rgba(var(--primary-rgb), 0.05); border-color: var(--text-muted); color: var(--text-primary); } .mp-page-home-index .recent-txn-view-all:hover .bi { transform: translateX(2px); } .mp-page-home-index .recent-txn-empty-state { padding: 2rem 1rem !important; } .mp-page-home-index .recent-txn-date { font-size: 11.5px !important; white-space: nowrap; } /* Current day statistics subtitle */ .mp-page-home-index .dash-subtitle { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; } .mp-page-home-index .dash-subtitle-icon { width: 44px; height: 44px; border-radius: var(--radius); background: rgba(var(--primary-rgb), 0.06); border: 1px solid var(--border-color); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .mp-page-home-index .dash-subtitle-content { display: flex; flex-direction: column; gap: 3px; } .mp-page-home-index .dash-subtitle-title { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .mp-page-home-index .dash-subtitle-description { font-size: 14px; color: var(--text-secondary); line-height: 1.5; } /* Home dashboard redesign (owner, 2026-09-25). The small summary cards (.hd-card.hd-mini with .hd-mini-icon, .hd-mini-label, .hd-mini-value, .hd-muted and a .tone-*) are shared: any page wraps its row of them in .mp-summary-cards (Recurring Payments, owner 2026-09-25) and gets the Home look. white cards with a soft shadow, a hero card, an icon stat row, a 7-day bar chart, a payouts breakdown with share bars and four small status cards. Tokens only; the tone of an icon chip, bar or mini bar comes from .tone-* (info, success, danger, warning, primary). */ :is(.mp-page-home-index, .mp-summary-cards) .hd-card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } :is(.mp-page-home-index, .mp-summary-cards) .hd-card > .card-body { padding: 20px 22px; } .mp-page-home-index .hd-title { margin: 0 0 2px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); } :is(.mp-page-home-index, .mp-summary-cards) .hd-muted { font-size: var(--font-size-sm); color: var(--text-muted); } .mp-page-home-index .hd-currency { margin-right: 2px; font-size: 0.62em; font-weight: var(--font-weight-medium); color: var(--text-muted); } :is(.mp-page-home-index, .mp-summary-cards) .tone-info { --mp-hd-rgb: var(--info-rgb); --mp-hd-fg: var(--info); } :is(.mp-page-home-index, .mp-summary-cards) .tone-success { --mp-hd-rgb: var(--success-rgb); --mp-hd-fg: var(--success); } :is(.mp-page-home-index, .mp-summary-cards) .tone-danger { --mp-hd-rgb: var(--danger-rgb); --mp-hd-fg: var(--danger); } :is(.mp-page-home-index, .mp-summary-cards) .tone-warning { --mp-hd-rgb: var(--warning-rgb); --mp-hd-fg: var(--warning); } :is(.mp-page-home-index, .mp-summary-cards) .tone-primary { --mp-hd-rgb: var(--primary-rgb); --mp-hd-fg: var(--text-primary); } /* Stat row */ .mp-page-home-index .hd-stats { margin-top: var(--space-4); } .mp-page-home-index .hd-stat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius); color: inherit; text-decoration: none; transition: background var(--transition-fast); } .mp-page-home-index a.hd-stat:hover { background: rgba(var(--primary-rgb), 0.04); } .mp-page-home-index .hd-stat-icon, .mp-page-home-index .hd-list-icon, :is(.mp-page-home-index, .mp-summary-cards) .hd-mini-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); background: rgba(var(--mp-hd-rgb), 0.14); color: var(--mp-hd-fg); font-size: 1.15rem; } .mp-page-home-index .hd-stat-label { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); } .mp-page-home-index .hd-stat-value { display: block; font-size: 1.15rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 7-day chart */ .mp-page-home-index .hd-chart { position: relative; height: 200px; margin: var(--space-4) 0 var(--space-3); } .mp-page-home-index .hd-summary { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .mp-page-home-index .hd-summary-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; } /* Bar / line switch on the 7-day card: a small segmented control. */ .mp-page-home-index .hd-chart-toggle { display: inline-flex; flex-shrink: 0; padding: 2px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-surface); } .mp-page-home-index .hd-chart-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast); } .mp-page-home-index .hd-chart-toggle button:hover { color: var(--text-primary); } .mp-page-home-index .hd-chart-toggle button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); } .mp-page-home-index .hd-chart-toggle button:focus-visible { outline: 0; box-shadow: var(--shadow-ring); } /* Payouts breakdown */ .mp-page-home-index .hd-big { margin-top: var(--space-4); font-size: 1.6rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-page-home-index .hd-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; } .mp-page-home-index .hd-list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius); color: inherit; text-decoration: none; transition: background var(--transition-fast); } .mp-page-home-index .hd-list-row:hover { background: rgba(var(--primary-rgb), 0.04); } .mp-page-home-index .hd-list-icon { width: 38px; height: 38px; font-size: 1rem; } .mp-page-home-index .hd-list-name { flex: 1; min-width: 0; font-weight: var(--font-weight-medium); color: var(--text-primary); } .mp-page-home-index .hd-list-meta { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--text-muted); } .mp-page-home-index .hd-list-amount { flex-shrink: 0; width: 42%; text-align: right; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-page-home-index .hd-bar { display: block; height: 5px; margin-top: 6px; border-radius: var(--radius-full); background: var(--bg-surface); overflow: hidden; } .mp-page-home-index .hd-bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mp-hd-fg); transition: width var(--transition); } /* Small cards */ :is(.mp-page-home-index, .mp-summary-cards) .hd-mini-icon { width: 36px; height: 36px; font-size: 1rem; margin-bottom: var(--space-3); } :is(.mp-page-home-index, .mp-summary-cards) .hd-mini-label { font-size: var(--font-size-sm); color: var(--text-secondary); } :is(.mp-page-home-index, .mp-summary-cards) .hd-mini-value { margin: 2px 0; font-size: 1.3rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Compact summary cards (owner, 2026-09-25: they took too much room above the Recurring Payments list): the icon chip sits left of the text instead of on its own row (label, value and caption stack beside it), less padding. */ .mp-summary-cards--compact .hd-mini > .card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "icon caption"; column-gap: var(--space-3); align-items: center; padding: 12px 16px; } .mp-summary-cards--compact .hd-mini-icon { grid-area: icon; margin-bottom: 0; } .mp-summary-cards--compact .hd-mini-label { grid-area: label; font-size: var(--font-size-xs); line-height: 1.3; } .mp-summary-cards--compact .hd-mini-value { grid-area: value; margin: 0; font-size: 1.1rem; line-height: 1.3; } .mp-summary-cards--compact .hd-mini .hd-muted { grid-area: caption; font-size: var(--font-size-xs); line-height: 1.3; } .mp-page-home-index .hd-mini-link { color: inherit; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .mp-page-home-index .hd-mini-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .mp-page-home-index .hd-mini-bars { display: flex; align-items: flex-end; gap: var(--space-3); height: 44px; margin: var(--space-2) 0; } .mp-page-home-index .hd-mini-bar { display: flex; align-items: flex-end; width: 10px; height: 100%; border-radius: var(--radius-full); background: var(--bg-surface); overflow: hidden; } .mp-page-home-index .hd-mini-bar > span { display: block; width: 100%; height: 0; border-radius: inherit; background: var(--mp-hd-fg); transition: height var(--transition); } /* end SC-10 */ /* SC-11 PerformanceStatistical/Index */ /* Moved from the view's inline style block, unchanged except: the .ps-kpi-* rules are dropped (the three tiles are mp-kpi-card now, and .ps-kpi-label forced upper-case text, which 06 guard 12 forbids here; .ps-kpi-blue had no markup); .ps-filter-label is dropped (the Date label is form-label in mp-filter-bar); the one bare white on .ps-tab.active is the --text-on-primary token, with its white fallback removed, as are the other literal fallbacks inside var(): site.css defines every token used, so the fallbacks were never applied and the page renders the same. */ /* The From/To date fields use the shared .mp-filter-bar input-group and flatpickr altInput rules (2026-09-24 date range), so this page carries no date-input rule of its own. */ /* Chart card titles: the card-header-title look. */ .mp-page-performancestatistical .ps-chart-card .card-header .card-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .mp-page-performancestatistical .ps-period-date-label { font-size: 0.875rem; color: var(--text-muted); } .mp-page-performancestatistical .ps-period-date-label strong { color: var(--text-primary); } .mp-page-performancestatistical .ps-period-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .mp-page-performancestatistical .ps-tab { padding: 4px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1.7; } .mp-page-performancestatistical .ps-tab:hover { background: rgba(var(--primary-rgb), 0.07); border-color: var(--primary); color: var(--primary); } .mp-page-performancestatistical .ps-tab.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); } .mp-page-performancestatistical .ps-chart-card .card-header { background: transparent; border-bottom: 1px solid var(--border-color); } .mp-page-performancestatistical .ps-loading-spinner { width: 2.5rem !important; height: 2.5rem !important; } .mp-page-performancestatistical .ps-chart-box-280 { position: relative !important; height: 280px !important; } .mp-page-performancestatistical .ps-chart-box-260 { position: relative !important; height: 260px !important; } /* end SC-11 */ /* SC-12 PerformanceStatistical/PerformanceStatisticalDashboard, Pages/PerformanceReport (+ Pages/Shared/_PerformanceReportPartial) */ /* Dashboard: moved from the view's inline style block, scoped under the page root; 10px is the --radius token. */ .performance-analytics-dashboard .pa-period-pill-rounded { border-radius: var(--radius) !important; } /* Razor Page: moved from the page's inline style block, scoped under .performance-report-page (the page root, which also holds the partial the Filter handler returns), same rules and order, except: the .performance-kpi-* rules are dropped (the 4 KPIs are mp-kpi-card now; the label rule forced upper case, which 06 guard 12 forbids here), the section toggle no longer forces upper case for the same reason, and each literal colour is the nearest site.css token (the per-colour mapping is in docs/ui-review/evidence/pages-performancereport.md): borders --border-color and --border-strong, grey text --text-secondary and --text-muted, white --bg-card, the table header and skeleton greys --bg-surface, the active tab green --success. */ .performance-report-page { max-width: 100%; overflow-x: hidden; } .performance-report-page .performance-tabs { align-items: center; border-bottom: 1px solid var(--border-color); display: flex; gap: 1.5rem; overflow-x: auto; white-space: nowrap; } .performance-report-page .performance-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--text-secondary); font-weight: 600; padding: .85rem 0 .75rem; } .performance-report-page .performance-tab.active { border-bottom-color: var(--success); color: var(--success); } .performance-report-page .performance-section-card { height: 100%; } .performance-report-page .performance-section-header { background: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 0; } .performance-report-page .performance-section-toggle { align-items: center; background: transparent; border: 0; color: var(--text-secondary); display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; letter-spacing: .08em; padding: 1rem; width: 100%; } .performance-report-page .performance-table-scroll { max-height: 68vh; overflow: auto; } .performance-report-page .performance-report-table { font-size: 13px; min-width: 1320px; width: 100% !important; } .performance-report-page .performance-report-table thead th { background: var(--bg-surface); position: sticky; top: 0; vertical-align: middle; z-index: 2; } .performance-report-page .performance-total-row td { background: var(--bg-card); border-top: 2px solid var(--border-strong) !important; font-weight: 600; } .performance-report-page .performance-empty-state { align-items: center; color: var(--text-secondary); display: flex; flex-direction: column; gap: .5rem; justify-content: center; min-height: 180px; text-align: center; } .performance-report-page .performance-empty-state .bi { color: var(--text-muted); font-size: 2rem; } .performance-report-page .performance-skeleton { display: grid; gap: 1rem; } .performance-report-page .performance-skeleton-bar { animation: performanceSkeletonPulse 1.2s ease-in-out infinite; background: linear-gradient(90deg, var(--bg-surface) 25%, var(--border-color) 50%, var(--bg-surface) 75%); background-size: 200% 100%; border-radius: 8px; height: 54px; } @keyframes performanceSkeletonPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 991.98px) { .performance-report-page .performance-report-panels > [class*="col-"] { width: 100%; } } /* end SC-12 */ /* SC-14 MerchantSetup/Search, MerchantSetup/UpdateMerchant (+ MerchantSetup/_MerchantDetailPanel) */ /* Search: the view's inline style block, then wwwroot/css/merchant-setup-search.css (deleted), in that order, scoped under the page root .merchant-search-page, which also holds _MerchantDetailPanel. The hex fallbacks are dropped because site.css defines the tokens. --text-color is not a site.css token (the rule fell back to its literal), so the detail-bar label uses --text-primary. The detail-bar action group is also .mp-action-row now, so its margin is reset. */ .merchant-search-page .ms-detail-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .85rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 1rem; } .merchant-search-page .ms-detail-bar-context { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-muted); } .merchant-search-page .ms-detail-bar-context .ms-context-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .merchant-search-page .ms-detail-bar-context-label { font-weight: 700; color: var(--text-primary); font-size: .9rem; } .merchant-search-page .ms-detail-bar-context-sub { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 400; } .merchant-search-page .ms-detail-bar-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 0; } .merchant-search-page { max-width: 100%; overflow-x: hidden; } .merchant-search-page .page-header { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; } .merchant-search-page .merchant-detail-card .card-body { padding: 0.75rem; } .merchant-search-page .merchant-detail-card h6 { font-weight: 700; margin-top: 1rem; } .merchant-search-page .merchant-detail-sections { display: flex; flex-direction: column; gap: 0.75rem; } .merchant-search-page .merchant-detail-section { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; } .merchant-search-page .merchant-detail-section-toggle { align-items: center; background: rgba(var(--primary-rgb), 0.05); border: 0; color: var(--text-primary); cursor: pointer; display: flex; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); gap: 0.75rem; justify-content: space-between; padding: 0.85rem 1rem; text-align: left; width: 100%; } .merchant-search-page .merchant-detail-section-toggle:hover, .merchant-search-page .merchant-detail-section-toggle:focus { background: rgba(var(--primary-rgb), 0.09); color: var(--text-primary); outline: none; } .merchant-search-page .merchant-detail-section-title { align-items: center; display: inline-flex; gap: 0.5rem; } .merchant-search-page .merchant-detail-section-title .bi { color: var(--primary); } .merchant-search-page .merchant-detail-chevron { flex-shrink: 0; transition: transform 0.2s ease-in-out; } .merchant-search-page .merchant-detail-section-toggle:not(.collapsed) .merchant-detail-chevron { transform: rotate(180deg); } .merchant-search-page .merchant-detail-section-body { padding: 0.75rem; } .merchant-search-page .merchant-master-table td { vertical-align: middle; word-break: break-word; } .merchant-search-page .merchant-master-table .master-label { background: rgba(var(--primary-rgb), 0.04); color: var(--text-secondary); width: 18%; white-space: nowrap; } .merchant-search-page .merchant-master-table td:not(.master-label) { width: 32%; } @media (max-width: 767.98px) { .merchant-search-page .merchant-master-table .master-label { white-space: normal; width: 28%; } .merchant-search-page .merchant-master-table td:not(.master-label) { width: 22%; } } @media (max-width: 575.98px) { .merchant-search-page .merchant-master-table thead, .merchant-search-page .merchant-master-table tbody, .merchant-search-page .merchant-master-table tr, .merchant-search-page .merchant-master-table td { display: block; width: 100%; } .merchant-search-page .merchant-master-table tr { border-bottom: 1px solid var(--border-color); margin-bottom: 0.5rem; padding-bottom: 0.5rem; } .merchant-search-page .merchant-master-table tr:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .merchant-search-page .merchant-master-table .master-label, .merchant-search-page .merchant-master-table td:not(.master-label) { border: 0; display: block; padding: 0.25rem 0.5rem; width: 100%; } .merchant-search-page .merchant-master-table .master-label { padding-top: 0.5rem; } } .merchant-search-page .btn-action-group { display: flex; flex-wrap: wrap; gap: 0.35rem; } @media (max-width: 767.98px) { .merchant-search-page .dataTables_wrapper .bottom { flex-direction: column; align-items: flex-start; } } @media print { .merchant-search-page .merchant-detail-section-toggle { background: transparent !important; padding-bottom: 0.35rem; } .merchant-search-page .merchant-detail-chevron { display: none !important; } .merchant-search-page .merchant-detail-section .collapse:not(.show) { display: block !important; height: auto !important; visibility: visible !important; } .merchant-search-page .merchant-detail-section { break-inside: avoid; page-break-inside: avoid; } } /* UpdateMerchant: the view's inline style block, then wwwroot/css/merchant-setup-update.css (deleted), in that order, scoped under the page root .merchant-update-page, which also holds the nine tab partials and their modals. The tab-group label no longer forces upper case (06 guard 12), so it shows its text as written. The hex fallbacks are dropped because site.css defines both tokens. */ .merchant-update-page .tab-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); padding: 1rem 1rem .35rem; border-top: 1px solid var(--border-color); margin-top: .25rem; user-select: none; pointer-events: none; } .merchant-update-page .tab-group-label:first-child { border-top: none; margin-top: 0; padding-top: .6rem; } .merchant-update-page { max-width: 100%; } .merchant-update-page .merchant-update-shell { overflow: hidden; } .merchant-update-page .merchant-update-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); min-height: 640px; } .merchant-update-page .merchant-update-tabs { background: rgba(var(--primary-rgb), 0.04); border-right: 1px solid var(--border-color); padding: 1rem 0.75rem; gap: 0.35rem; } .merchant-update-page .merchant-update-tabs .nav-link { border-radius: var(--border-radius); color: var(--text-secondary); font-weight: 600; padding: 0.65rem 0.85rem; text-align: left; width: 100%; } .merchant-update-page .merchant-update-tabs .nav-link.active, .merchant-update-page .merchant-update-tabs .nav-link:hover { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); } .merchant-update-page .merchant-update-tab-content { padding: 1.25rem; } .merchant-update-page .merchant-update-section-title { color: var(--primary); font-weight: 700; margin-bottom: 1rem; } @media (max-width: 991.98px) { .merchant-update-page .merchant-update-layout { grid-template-columns: 1fr; } .merchant-update-page .merchant-update-tabs { border-right: 0; border-bottom: 1px solid var(--border-color); flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.75rem; } .merchant-update-page .merchant-update-tabs .nav-link { white-space: nowrap; width: auto; } } @media (max-width: 575.98px) { .merchant-update-page .merchant-update-tab-content { padding: 0.85rem; } } /* end SC-14 */ /* SC-17 Admin/Users, Roles, Modules, ExecutionLogs, UserEdit, RoleEdit, ModuleEdit, AuditLog/Index */ /* None of the eight views had an inline style block, a style attribute or a per-page CSS file. The only rule is the visual required marker on the labels of the fields whose empty value is rejected today (UserEdit Username, Email, Full Name, Password; RoleEdit Role Name, Description; ModuleEdit Module Name, Display Order). It is visual only: no required attribute is added, and the label text itself is unchanged. */ .mp-page-admin-edit .mp-page-admin-edit__required::after { content: " *"; color: var(--danger); } /* end SC-17 */ /* SC-20 RemittanceFunds/Index */ /* Moved from the view's inline style block and scoped to the page root (.mp-page-remittancefunds); the three unscoped rule groups (.funds-card, .table-responsive, .validation-error/.is-invalid) are scoped too, because they only ever applied to this page. Values are unchanged except: - Not moved (duplicates): the .dataTables_processing position rule (same four declarations as site.css ".dataTables_wrapper .dataTables_processing"), and the .filter-accordion header, hover, cursor and chevron rules (the filter panel is mp-filter-bar, which styles its own header). - Not moved (no markup left): .funds-table-wrap (no element uses it; _GenericDataTable renders .transaction-table-wrap), .page-breadcrumb (no in-page breadcrumb), and the .balance-kpi-* rules (the balance tile is mp-kpi-card, CL-09). - Text is never case-transformed (06 guard 12): the table-header "capitalize" (headers are already written in Title Case) and the KPI label "uppercase" are dropped. - Tokens only: the literal Bootstrap grey on the balance toggle icon has no equal site.css token and uses var(--text-secondary); the var(--text-secondary, #hex) and var(--primary, #hex) fallbacks are dropped because site.css defines both tokens. New: the KPI value row is a flex row, as the old "d-flex align-items-center" value div was. */ .mp-page-remittancefunds { max-width: 100%; overflow-x: hidden; } .mp-page-remittancefunds .card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .mp-page-remittancefunds .card-header { background: var(--bg-card); border-bottom-color: var(--border-color); color: var(--text-primary); } .mp-page-remittancefunds .funds-card { max-width: 100%; min-width: 0; overflow: hidden; width: 100%; } .mp-page-remittancefunds .table-responsive { max-width: 100%; overflow-x: auto; width: 100%; } .mp-page-remittancefunds .form-control, .mp-page-remittancefunds .form-select, .mp-page-remittancefunds .input-group-text { border-color: var(--border-color); } .mp-page-remittancefunds, .mp-page-remittancefunds .card, .mp-page-remittancefunds .row, .mp-page-remittancefunds .col-12 { min-width: 0; } .mp-page-remittancefunds .page-header { align-items: flex-start; flex-wrap: wrap; gap: .75rem; } .mp-page-remittancefunds .page-title { overflow-wrap: anywhere; } .mp-page-remittancefunds .dataTables_wrapper { max-width: 100%; overflow: hidden; width: 100%; } .mp-page-remittancefunds .form-select { max-width: 100%; width: 100%; } .mp-page-remittancefunds .dataTables_scroll, .mp-page-remittancefunds .dataTables_scrollHead, .mp-page-remittancefunds .dataTables_scrollBody { max-width: 100%; width: 100% !important; } .mp-page-remittancefunds .dataTables_scroll { overflow: hidden; } .mp-page-remittancefunds .dataTables_scrollBody { border-bottom: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } .mp-page-remittancefunds .dataTables_scrollBody table, .mp-page-remittancefunds .dataTables_scrollHead table { margin-bottom: 0; min-width: 0; } .mp-page-remittancefunds #tblRemittanceFunds th, .mp-page-remittancefunds #tblRemittanceFunds td { max-width: 220px; overflow-wrap: anywhere; text-overflow: ellipsis; vertical-align: middle; white-space: normal; } .mp-page-remittancefunds .validation-error { color: var(--danger); font-size: 0.875rem; margin-top: 0.25rem; } .mp-page-remittancefunds .is-invalid { border-color: var(--danger) !important; } @media (max-width: 575.98px) { .mp-page-remittancefunds .page-title { font-size: 1.35rem; } .mp-page-remittancefunds .search-actions { flex-direction: column; } .mp-page-remittancefunds .search-actions .btn { width: 100%; } } /* end SC-20 */ /* SC-24 Reports/ReportPortalRedirect */ /* Moved from the view's inline style block. The view sets Layout = null, so it links site.css (tokens) and this file itself; the rules are scoped to its body class. The two colour literals map to --bg-muted and --text-primary. */ .mp-page-reports-reportportalredirect { font-family: system-ui, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: var(--bg-muted); color: var(--text-primary); } .mp-page-reports-reportportalredirect .message { text-align: center; } /* end SC-24 */ /* SC-19 DDMandate/GetMandateCancellations, GetMandateRequests, DirectDebitPayments (+ wwwroot/css/dd-mandate.css, shared with GetMandates) */ /* Merged from wwwroot/css/dd-mandate.css and the inline style blocks of GetMandateRequests and DirectDebitPayments. The rules are scoped to .mp-page-ddmandate, a root class only the four DDMandate views carry: the old .dd-mandate-page root is also on DDSchedule/Index and DDSchedule/Detail, which never loaded dd-mandate.css, so a global .dd-mandate-page rule here would restyle them. Same specificity as before (one root class). Values are unchanged except: - Not moved (no markup left): the .filter-accordion header, hover, title, chevron rules (the filter panels are mp-filter-bar, which styles its own header) and the .dd-filter-row rules (the fields are direct children of the filter bar's row, as on SC-18 GetMandates). From DirectDebitPayments' inline block: .dd-filter-group-label and its ::after (no element uses the class; site.css still defines it). - Text is never case-transformed (06 guard 12): the child-row heading ("Mandate") upper-casing is dropped. The table-header rule that cancels the site.css upper-casing of .table thead th cannot live here, so it stays, alone, in dd-mandate.css, which the four views still link. - Tokens only: the literal Bootstrap pill colours use the mp-status-badge recipe (the -dark tone on a 0.12 tint with a 0.25 border; neutral is --text-secondary on --secondary-rgb), the row accents use --success, --info, --warning, --danger and --secondary-light, the current page button text uses --text-on-primary, and the loader veil (white at 0.75) uses --bg-header (white at 0.9, dark in the dark theme). The two arrow glyphs are written as CSS escapes. */ .mp-page-ddmandate { max-width: 100%; min-width: 0; overflow-x: hidden; } .mp-page-ddmandate .card, .mp-page-ddmandate .row, .mp-page-ddmandate [class*="col-"] { min-width: 0; } .mp-page-ddmandate .card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .mp-page-ddmandate .page-header { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .mp-page-ddmandate .page-title:not(.mp-results-card__heading) { /* the results card heading uses the shared size */ color: var(--text-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: 0.25rem; overflow-wrap: anywhere; } .mp-page-ddmandate .page-title .bi { color: var(--primary); } .mp-page-ddmandate .page-subtitle { color: var(--text-secondary); margin-bottom: 0; } .mp-page-ddmandate .form-label { align-items: center; color: var(--text-primary); display: flex; flex-wrap: wrap; font-weight: 600; gap: 0.35rem; margin-bottom: 0.35rem; } .mp-page-ddmandate .form-label .bi { flex-shrink: 0; line-height: 1; } .mp-page-ddmandate .dd-filter-field { display: flex; flex-direction: column; min-width: 0; width: 100%; } .mp-page-ddmandate .dd-filter-field .form-label { margin-bottom: 0.35rem; min-height: 1.35rem; } .mp-page-ddmandate .form-control, .mp-page-ddmandate .form-select { border-color: var(--border-color); box-sizing: border-box; height: calc(1.5em + 0.75rem + 2px); line-height: 1.5; max-width: 100%; padding-bottom: 0.375rem; padding-top: 0.375rem; width: 100%; } .mp-page-ddmandate input[type="date"].form-control { appearance: auto; } .mp-page-ddmandate .dd-filter-field .form-control, .mp-page-ddmandate .dd-filter-field .form-select, .mp-page-ddmandate .dd-filter-field .dd-mobile-field { flex: 0 0 auto; } .mp-page-ddmandate .field-hint { color: var(--text-muted); display: block; flex: 0 0 auto; font-size: 0.8125rem; line-height: 1.25; margin-top: 0.25rem; min-height: 1.25rem; } .mp-page-ddmandate .field-hint--error { color: var(--danger); } .mp-page-ddmandate .field-hint:empty::before { content: "\00a0"; } /* intl-tel-input: match the Bootstrap form-control width and height */ .mp-page-ddmandate .dd-mobile-field .iti, .mp-page-ddmandate .dd-mobile-field .intl-tel-input { display: block; height: calc(1.5em + 0.75rem + 2px); width: 100%; } .mp-page-ddmandate .dd-mobile-field .iti input, .mp-page-ddmandate .dd-mobile-field .intl-tel-input .form-control { box-sizing: border-box; height: calc(1.5em + 0.75rem + 2px) !important; min-height: calc(1.5em + 0.75rem + 2px); padding-bottom: 0.375rem; padding-top: 0.375rem; width: 100% !important; } .mp-page-ddmandate .search-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Results table card */ .mp-page-ddmandate .transaction-card { max-width: 100%; min-width: 0; overflow: hidden; width: 100%; } .mp-page-ddmandate .transaction-card .card-header { background: var(--bg-card); border-bottom-color: var(--border-color); } .mp-page-ddmandate .transaction-card .card-header .card-title { align-items: center; color: var(--primary); display: flex; font-weight: 700; gap: 0.45rem; } .mp-page-ddmandate .transaction-card .card-header .card-title .bi { color: var(--primary); } .mp-page-ddmandate .transaction-card .card-body { padding: 0.75rem; } .mp-page-ddmandate .transaction-table-wrap { border: 1px solid var(--border-color); border-radius: var(--border-radius); max-width: 100%; overflow: hidden; width: 100%; } .mp-page-ddmandate .table { margin-bottom: 0; table-layout: auto; width: 100% !important; } /* DataTables */ .mp-page-ddmandate .dataTables_wrapper { max-width: 100%; overflow: hidden; width: 100%; } .mp-page-ddmandate .dataTables_wrapper .row { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; } .mp-page-ddmandate .dataTables_length { margin-bottom: 15px !important; } .mp-page-ddmandate .dataTables_wrapper div.dataTables_length select { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 0.25rem 0.5rem; width: auto !important; } .mp-page-ddmandate .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--text-primary) !important; margin: 0 2px; } .mp-page-ddmandate .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary); color: var(--primary) !important; } .mp-page-ddmandate .dataTables_wrapper .dataTables_paginate .paginate_button.current, .mp-page-ddmandate .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; } /* Status pills and row accents (the page scripts write these classes) */ .mp-page-ddmandate .dd-pill { --mp-dd-pill-fg: var(--text-secondary); --mp-dd-pill-rgb: var(--secondary-rgb); background: rgba(var(--mp-dd-pill-rgb), 0.12); border: 1px solid rgba(var(--mp-dd-pill-rgb), 0.25); border-radius: 10rem; color: var(--mp-dd-pill-fg); display: inline-block; font-size: 0.8rem; font-weight: 600; line-height: 1.2; max-width: 100%; padding: 0.3rem 0.6rem; vertical-align: middle; word-break: break-word; } .mp-page-ddmandate .dd-pill--success { --mp-dd-pill-fg: var(--success-dark); --mp-dd-pill-rgb: var(--success-rgb); } .mp-page-ddmandate .dd-pill--info { --mp-dd-pill-fg: var(--info-dark); --mp-dd-pill-rgb: var(--info-rgb); } .mp-page-ddmandate .dd-pill--warning { --mp-dd-pill-fg: var(--warning-dark); --mp-dd-pill-rgb: var(--warning-rgb); } .mp-page-ddmandate .dd-pill--danger { --mp-dd-pill-fg: var(--danger-dark); --mp-dd-pill-rgb: var(--danger-rgb); } .mp-page-ddmandate .dd-pill--neutral { --mp-dd-pill-fg: var(--text-secondary); --mp-dd-pill-rgb: var(--secondary-rgb); } [data-dark="true"] .mp-page-ddmandate .dd-pill--success { --mp-dd-pill-fg: var(--success); } [data-dark="true"] .mp-page-ddmandate .dd-pill--info { --mp-dd-pill-fg: var(--info); } [data-dark="true"] .mp-page-ddmandate .dd-pill--warning { --mp-dd-pill-fg: var(--warning); } [data-dark="true"] .mp-page-ddmandate .dd-pill--danger { --mp-dd-pill-fg: var(--danger); } .mp-page-ddmandate .dd-mono { font-family: Consolas, "Segoe UI", monospace; font-size: 0.9em; font-variant-numeric: tabular-nums; } /* Expandable child rows (GetMandateRequests, DirectDebitPayments) and the payments loader */ .mp-page-ddmandate tr td.dt-control { cursor: pointer; text-align: center; } /* The expander is the same chevron as the other grids (owner, 2026-09-25): right when closed, turned down when open; the child row is the shared .mp-grid__detail-panels layout. The page class keeps these rules above the vendor "table.dataTable ... td.dt-control:before" rules, which load after this file. */ .mp-page-ddmandate table.dataTable tr td.dt-control:before { color: var(--text-muted); content: "\F285"; display: inline-block; font-family: "bootstrap-icons"; font-size: 0.85rem; transition: transform 0.2s ease; } .mp-page-ddmandate table.dataTable tr.shown td.dt-control:before, .mp-page-ddmandate table.dataTable tr.dt-hasChild td.dt-control:before { content: "\F285"; transform: rotate(90deg); } .mp-page-ddmandate .ddp-loader-overlay { align-items: center; background: var(--bg-header); bottom: 0; display: none; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 2000; } .mp-page-ddmandate .ddp-loader-overlay.show { display: flex; } .mp-page-ddmandate .ddp-loader-box { background: var(--bg-card); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: 1.25rem 1.5rem; } .mp-page-ddmandate .ddp-amt { font-weight: 600; text-align: right; } @media (max-width: 767.98px) { .mp-page-ddmandate .search-actions .btn { width: 100%; } } /* From the GetMandateRequests inline style block: the expand-control column width. */ .mp-page-ddmandate .mr-details-col { width: 2rem !important; } /* From the DirectDebitPayments inline style block: the loader spinner size and the expand-control column width. */ .mp-page-ddmandate .ddp-loader-spinner { width: 2.5rem !important; height: 2.5rem !important; } .mp-page-ddmandate .ddp-details-col { width: 2rem !important; } /* end SC-19 */ /* SC-21 RemittanceFileUpload/RemittanceFileUpload, RemittanceRequest/RemittanceRequest, RemittanceRequest/ViewFileRecords */ /* Payout file upload: the view's inline style block, then wwwroot/css/remittance-file-upload.css (deleted), in that order, as they loaded before (head, then body). The inline rules were unscoped and are scoped under the page root .remittance-file-upload-page, which holds every element they matched. Values are unchanged except: - Tokens only: the hex fallbacks inside var() are dropped because site.css defines the tokens. --text-color is not a site.css token (the rules fell back to a literal slate), so they use --text-primary. The literal green on the selected-file Excel icon is --success. The card shadow and header border literals (rgba of black) are --shadow-sm and --border-color; the Bootstrap --bs-light and --bs-danger (not site.css tokens) are --bg-light and --danger. - Not moved (no markup left): .upload-button (no element uses it). New: the action row is .mp-action-row now, so its component top margin is reset (the row keeps pt-3). */ .remittance-file-upload-page .upload-zone { position: relative; border: 2px dashed var(--border-color); border-radius: 10px; background: var(--bg-body); padding: 2rem 1.5rem; text-align: center; transition: border-color .15s, background .15s; cursor: pointer; } .remittance-file-upload-page .upload-zone:hover, .remittance-file-upload-page .upload-zone.drag-over { border-color: var(--primary); background: rgba(var(--primary-rgb), .04); } .remittance-file-upload-page .upload-zone-trigger { display: block; cursor: pointer; } .remittance-file-upload-page .upload-zone-icon-main { font-size: 2.25rem; color: var(--primary); display: block; margin-bottom: .75rem; opacity: .75; } .remittance-file-upload-page .upload-zone-headline { font-size: .95rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: .3rem; } .remittance-file-upload-page .upload-zone-sub { font-size: .8rem; color: var(--text-muted); display: block; } .remittance-file-upload-page .upload-zone-selected { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; font-size: .875rem; font-weight: 500; color: var(--text-primary); } .remittance-file-upload-page .upload-zone-selected .bi-file-earmark-excel { font-size: 1.15rem; color: var(--success); } .remittance-file-upload-page .sample-templates-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .remittance-file-upload-page .sample-templates-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .remittance-file-upload-page .sample-templates-row .btn-sm { font-size: .78rem; padding: .25rem .6rem; } .remittance-file-upload-page .remittance-file-upload-card { box-shadow: var(--card-shadow); } .remittance-file-upload-page .card-header { background: var(--bg-light); border-bottom: 1px solid var(--border-color); } .remittance-file-upload-page .file-name-display { max-width: 28rem; min-width: 14rem; } .remittance-file-upload-page .field-error { font-size: 0.875rem; color: var(--danger); margin-top: 0.25rem; } .remittance-file-upload-page .is-invalid { border-color: var(--danger); } .remittance-file-upload-page .form-actions .btn { min-width: 7.5rem; } .remittance-file-upload-page .form-actions.mp-action-row { margin-top: 0; } #remittanceFileUploadSuccessModal .modal-body { font-size: 1rem; line-height: 1.5; } @media (max-width: 575.98px) { .remittance-file-upload-page .form-actions .btn { width: 100%; } .remittance-file-upload-page .file-name-display { width: 100%; max-width: none; } } /* Payout requests and View batch records: the RemittanceRequest inline style block, then wwwroot/css/remittance-request.css (deleted; both views loaded it), in that order, as they loaded before. The inline rules were unscoped and are scoped under the shared page root .remittance-request-page. That raises their specificity by one class, which ties them with the remittance-request.css rules they lost to before (.dataTables_wrapper and .table-responsive against the overflow: hidden wrappers, and the #tblCashoutFailed th/td white-space); those rules come later in this block, so they still win and every cell resolves as before. Values are unchanged except: - Text is never case-transformed (06 guard 12): the uppercase on the section eyebrows, the failed-filter labels and the mobile batch-table cell captions is dropped, so those texts show as written. - Tokens only: the hex fallbacks inside var() are dropped because site.css defines the tokens; the Bootstrap --bs-danger (not a site.css token) is --danger. New: the admin merchant picker is mp-filter-bar, and its button cell is .mp-action-row; the cell keeps the old row's bottom alignment (align-items-end) and drops the component top margin. */ .remittance-request-page .rr-section-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); padding: 1.5rem 0 .5rem; display: flex; align-items: center; gap: .5rem; } .remittance-request-page .rr-section-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } .remittance-request-page .rr-section-eyebrow:first-child { padding-top: 0; } .remittance-request-page .table-responsive, .remittance-request-page .dataTables_wrapper { width: 100%; overflow-x: auto; } .remittance-request-page #tblCashoutFailed { width: max-content !important; min-width: 1700px; } .remittance-request-page #tblCashoutFailed th { white-space: nowrap; } .remittance-request-page #tblCashoutFailed td { white-space: nowrap; vertical-align: middle; } .remittance-request-page #tblCashoutFailed td:nth-child(4), .remittance-request-page #tblCashoutFailed td:nth-child(7) { min-width: 230px; } .remittance-request-page #tblCashoutFailed td:nth-child(11) { min-width: 260px; white-space: normal; } .remittance-request-page { max-width: 100%; min-width: 0; overflow-x: hidden; } .remittance-request-page .card, .remittance-request-page .row, .remittance-request-page [class*="col-"] { min-width: 0; } .remittance-request-page .card { background: var(--bg-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); margin-bottom: 1rem; } .remittance-request-page .card-header { background: var(--bg-card); border-bottom-color: var(--border-color); color: var(--text-primary); flex-wrap: wrap; gap: 0.75rem; } .remittance-request-page .card-header .card-title { align-items: center; color: var(--primary); display: flex; font-weight: 700; gap: 0.45rem; margin: 0; overflow-wrap: anywhere; } .remittance-request-page .card-header .card-title .bi { color: var(--primary); flex-shrink: 0; } .remittance-request-page .page-header { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; } .remittance-request-page .page-title { overflow-wrap: anywhere; } .remittance-request-page .page-breadcrumb, .remittance-request-page .breadcrumb-modern { flex-wrap: wrap; } .remittance-request-page .form-control, .remittance-request-page .form-select { max-width: 100%; width: 100%; } .remittance-request-page .merchant-filter-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .remittance-request-page .merchant-filter-actions .btn { min-width: 7.5rem; } .remittance-request-page .mp-filter-bar .merchant-filter-actions.mp-action-row { align-self: flex-end; margin-top: 0; } .remittance-request-page .batch-table-wrap { max-width: 100%; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } .remittance-request-page .batch-table-wrap table { margin-bottom: 0; width: 100%; } .remittance-request-page .batch-table-wrap th, .remittance-request-page .batch-table-wrap td { overflow-wrap: anywhere; vertical-align: middle; white-space: normal; } .remittance-request-page .batch-table-wrap .col-filename { min-width: 8rem; max-width: 28rem; } .remittance-request-page .batch-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; } .remittance-request-page .batch-actions .btn { white-space: nowrap; } .remittance-request-page .failed-filters-panel { background: var(--bg-body); border-bottom: 1px solid var(--border-color); padding: 0.75rem 1rem; } .remittance-request-page .failed-filters-panel .form-label { color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; margin-bottom: 0.2rem; letter-spacing: 0.03em; } .remittance-request-page .failed-table-wrap { max-width: 100%; overflow: hidden; width: 100%; } .remittance-request-page .failed-table-wrap table { margin-bottom: 0; width: 100% !important; } .remittance-request-page #tblCashoutFailed th, .remittance-request-page #tblCashoutFailed td { max-width: 14rem; overflow-wrap: anywhere; vertical-align: middle; white-space: normal; } .remittance-request-page .dataTables_wrapper { max-width: 100%; overflow: hidden; width: 100%; } .remittance-request-page .dataTables_wrapper .dataTables_length, .remittance-request-page .dataTables_wrapper .dataTables_filter { margin-bottom: 0.75rem; padding: 0 0.75rem; } .remittance-request-page .dataTables_wrapper .dataTables_length label, .remittance-request-page .dataTables_wrapper .dataTables_filter label { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; } .remittance-request-page .dataTables_processing { left: 50% !important; position: fixed !important; top: 50% !important; transform: translate(-50%, -50%); } .remittance-request-page .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--text-primary) !important; margin: 0 2px; } .remittance-request-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary); color: var(--primary) !important; } .remittance-request-page .dataTables_wrapper .dataTables_paginate .paginate_button.current, .remittance-request-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; } .remittance-request-page .dataTables_wrapper .bottom { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; padding: 0.75rem 1rem; } .remittance-request-page .dataTables_wrapper .dataTables_info, .remittance-request-page .dataTables_wrapper .dataTables_paginate { float: none; margin: 0; white-space: normal; } .remittance-request-page .dataTables_wrapper .dataTables_paginate { max-width: 100%; overflow-x: auto; padding-bottom: 0.25rem; } .remittance-request-page .dataTables_scroll, .remittance-request-page .dataTables_scrollHead, .remittance-request-page .dataTables_scrollBody { max-width: 100%; width: 100% !important; } .remittance-request-page .dataTables_scrollBody { border-bottom: 0 !important; overflow-x: auto !important; } .remittance-request-page .text-break { word-break: break-word; } .remittance-request-page .is-invalid { border-color: var(--danger); } .remittance-request-page .batch-preview-header { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; width: 100%; } .remittance-request-page .batch-preview-title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; } .remittance-request-page .batch-preview-table-wrap { max-width: 100%; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } .remittance-request-page .batch-preview-table { margin-bottom: 0; min-width: 72rem; width: 100%; } .remittance-request-page .batch-preview-table th, .remittance-request-page .batch-preview-table td { max-width: 12rem; overflow-wrap: anywhere; vertical-align: middle; white-space: normal; } .remittance-request-page .record-count-badge { font-size: 0.8rem; font-weight: 600; } #remittanceRequestResultModal .modal-body { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; } #remittanceRequestResultModal .modal-dialog { margin: 0 auto; max-width: 32rem; width: calc(100% - 1.5rem); } @media (max-width: 991.98px) { .remittance-request-page .batch-actions { justify-content: flex-start; } .remittance-request-page .batch-table-wrap .col-actions { min-width: 14rem; } } @media (max-width: 767.98px) { .remittance-request-page .page-title { font-size: 1.35rem; } .remittance-request-page .merchant-filter-actions { flex-direction: column; width: 100%; } .remittance-request-page .merchant-filter-actions .btn { width: 100%; } .remittance-request-page .batch-table-wrap table, .remittance-request-page .batch-table-wrap thead, .remittance-request-page .batch-table-wrap tbody, .remittance-request-page .batch-table-wrap th, .remittance-request-page .batch-table-wrap td, .remittance-request-page .batch-table-wrap tr { display: block; width: 100%; } .remittance-request-page .batch-table-wrap thead { display: none; } .remittance-request-page .batch-table-wrap tr { border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; } .remittance-request-page .batch-table-wrap td { border: 0; padding: 0.35rem 0; text-align: left !important; } .remittance-request-page .batch-table-wrap td::before { color: var(--text-secondary); content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.15rem; } .remittance-request-page .batch-table-wrap td.col-actions::before { margin-top: 0.35rem; } .remittance-request-page .batch-table-wrap tr.batch-empty-row { border: 0; display: block; margin-bottom: 0; padding: 0; } .remittance-request-page .batch-table-wrap tr.batch-empty-row td { display: block; padding: 1rem; text-align: center !important; } .remittance-request-page .batch-table-wrap tr.batch-empty-row td::before { content: none; display: none; } .remittance-request-page .batch-actions { flex-direction: column; width: 100%; } .remittance-request-page .batch-actions .btn { width: 100%; } .remittance-request-page .failed-filters-panel { padding: 0.65rem 0.75rem; } .remittance-request-page .dataTables_wrapper .bottom { flex-direction: column; align-items: stretch; } .remittance-request-page .dataTables_wrapper .dataTables_paginate { justify-content: center; text-align: center; } .remittance-request-page .batch-preview-header .btn { width: 100%; } } @media (max-width: 575.98px) { .remittance-request-page .card-body { padding: 0.75rem; } .remittance-request-page .card-body.p-0 { padding: 0 !important; } #remittanceRequestResultModal .modal-dialog { margin: 0 auto; max-width: none; width: calc(100% - 1rem); } } /* end SC-21 RemittanceFileUpload, RemittanceRequest, ViewFileRecords */ /* SC-21 Remittance/CreateCashout, Shared/_EmbeddedLayout, BankTransfer/BankTransfer */ /* Embedded layout: its inline style block (body background and padding), scoped to the body class the layout now sets (body.mp-embedded-layout), so no other page is touched. The hex fallback inside var() is dropped because site.css defines --bg-card. _EmbeddedLayout now links components.css straight after site.css, as _Layout does, so the embedded Create payout page still gets the rules below. */ body.mp-embedded-layout { background: var(--bg-card); padding: 1.25rem; } /* Create payout: wwwroot/css/create-cashout.css (deleted). Only the base field rules are left here; the page layout (form card, numbered steps, method tiles, summary card) is the "Create Payout (redesign 2026-09-25)" block further down. overflow-x is clip, not hidden, so the sticky summary card still sticks (hidden would make the page root a scroll container). .co-section-head is the step title. */ .create-cashout-page { max-width: 100%; min-width: 0; overflow-x: clip; } .create-cashout-page .row, .create-cashout-page [class*="col-"] { min-width: 0; } .create-cashout-page .form-label { color: var(--text-primary); font-weight: 600; margin-bottom: 0.35rem; } .create-cashout-page .form-control, .create-cashout-page .form-select { max-width: 100%; width: 100%; } /* intl-tel-input wrapper */ .create-cashout-page .intl-tel-input, .create-cashout-page .iti { display: block; width: 100%; } .create-cashout-page .intl-tel-input .form-control, .create-cashout-page .iti input { width: 100% !important; } .create-cashout-page .is-invalid { border-color: var(--danger); } .create-cashout-page .co-section-head { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.3; color: var(--text-primary); } /* Bank payout: the view's inline style block, then wwwroot/css/bank-transfer.css (deleted), in that order, as they loaded before (head, then body). The unscoped rules (.form-section-header, .form-inline-field, .form-label-inline-required, .mobile-validation-msg) are scoped under the page root .bank-transfer-page, which holds every element they matched; no other view uses those classes. That raises their specificity by one class; the only site.css rule on the same elements with a higher specificity (.row.g-3 .form-label, display: block) still wins, as it did before. #bankTransferSuccessModal sits outside the page root and keeps its id selector. Values are unchanged except: - Text is never case-transformed (06 guard 12): the uppercase on the two section headers ("Payer Details", "Transaction Details") is dropped, so they show as written. - Tokens only: the hex fallback inside var() is dropped because site.css defines --primary. The card shadow literal (rgba of black at 0.06) is --shadow-sm; the Bootstrap --bs-danger (not a site.css token) is --danger. - Not moved (no markup left): .bank-transfer-page .card-header (the card header is a Razor comment). New: the action row is .mp-action-row now, so its component top margin and centre alignment are reset (the row keeps pt-3 and its Bootstrap flex utilities). */ .bank-transfer-page .form-section-header { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--primary); padding-bottom: .6rem; border-bottom: 1px solid rgba(var(--primary-rgb), .15); margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem; } .bank-transfer-page .bank-transfer-card { box-shadow: var(--card-shadow); } .bank-transfer-page .form-actions .btn { min-width: 7.5rem; } .bank-transfer-page .iti { width: 100%; } /* intl-tel-input wrapper inside inline-field layout must flex-grow */ .bank-transfer-page .form-inline-field .iti { flex: 1; min-width: 0; } /* Validation messages underneath inline fields, indented to align with the input */ .bank-transfer-page .mobile-validation-msg { padding-left: 192px; /* 180px label + 12px gap */ font-size: .8rem; } .bank-transfer-page .is-invalid { border-color: var(--danger); } .bank-transfer-page .field-error { font-size: 0.875rem; color: var(--danger); margin-top: 0.25rem; } #bankTransferSuccessModal .modal-body { font-size: 1rem; line-height: 1.5; } .bank-transfer-page .form-label-inline-required { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .bank-transfer-page .form-inline-field { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; } .bank-transfer-page .form-inline-field label { width: 180px; margin-bottom: 0; white-space: nowrap; } .bank-transfer-page .form-inline-field .form-control, .bank-transfer-page .form-inline-field .form-select { flex: 1; min-width: 0; } .bank-transfer-page .form-actions.mp-action-row { margin-top: 0; align-items: normal; } @media (max-width: 575.98px) { .bank-transfer-page .form-actions .btn { width: 100%; } } /* end SC-21 CreateCashout, _EmbeddedLayout, BankTransfer */ /* SC-22 Share/MyShares */ /* Moved from the view's two inline style blocks (the body