/* ============================================================================ E-RECEIPTS DESIGN SYSTEM ---------------------------------------------------------------------------- Dedicated stylesheet for the E-Receipts module. WHY THIS FILE EXISTS Until now the receipts pages borrowed the `ei-*` primitives from _content/EGKitsEInvoices/css/ei-dialogs.css. That coupled the receipts visual identity to the invoices module and made independent theming impossible. This file redefines every primitive the module consumes inside the `.er-module` scope, so E-Receipts: 1. renders correctly even if the invoices stylesheet is absent, and 2. carries its own identity (teal/cyan) rather than the invoices green. The `ei-*` class NAMES are intentionally preserved. Renaming ~70 classes across 8 pages would be pure churn with real regression risk, and scoping under `.er-module` already gives these rules higher specificity than the invoices sheet, so the receipts theme always wins where both are loaded. SCOPE `EReceiptsModuleNav` puts `.er-module` on while a receipts route is active and removes it on navigation away. Body-level scoping is what makes the theme reach MudBlazor dialogs, menus and popovers, which render into the provider portal at the end of — outside any page-level wrapper. Because the class lands on , every rule here must name the element it targets; bare descendant selectors would bleed into the app shell. The teal palette deliberately matches ReceiptPdfHtmlBuilder, so the on-screen receipt and the printed customer copy read as one document. CONVENTIONS - `--er-*` design tokens - `.er-*` components owned by this module - `.ei-*` inherited primitives, re-themed under `.er-module` ========================================================================== */ .er-module { /* ── Receipts identity: teal / cyan ── */ --er-primary: #0e7490; --er-primary-light: #0891b2; --er-primary-dark: #164e63; --er-primary-bg: rgba(8, 145, 178, 0.06); --er-primary-border: rgba(8, 145, 178, 0.22); /* ── Semantic accents ── */ --er-accent-teal: #0d9488; --er-accent-teal-light: rgba(13, 148, 136, 0.08); --er-accent-blue: #0284c7; --er-accent-blue-light: rgba(2, 132, 199, 0.08); --er-accent-amber: #d97706; --er-accent-amber-light: rgba(217, 119, 6, 0.08); --er-accent-red: #dc2626; --er-accent-red-light: rgba(220, 38, 38, 0.08); --er-accent-green: #16a34a; --er-accent-green-light: rgba(22, 163, 74, 0.08); --er-accent-violet: #7c3aed; --er-accent-violet-light: rgba(124, 58, 237, 0.08); /* ── Shape & elevation ── */ --er-radius: 14px; --er-radius-sm: 10px; --er-radius-pill: 999px; --er-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); --er-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.14); --er-muted: rgba(127, 127, 127, 0.24); /* ── Motion (zeroed out under prefers-reduced-motion, see bottom) ── */ --er-t-fast: 0.15s ease; --er-t: 0.18s ease; /* ── POS density: overridden by .er-pos-dense ── */ --er-density-pad: 18px 16px; --er-density-row: 6px 10px; --er-density-gap: 8px; --er-density-kpi-min: 100px; } /* ──────────────────────────────────────────────────────────────────────────── POS DENSITY MODE Touch-first tightening for 10"–13" POS terminals: same components, less chrome, so more receipt lines fit above the fold without horizontal scroll. ──────────────────────────────────────────────────────────────────────────── */ .er-module.er-pos-dense { --er-density-pad: 12px 12px; --er-density-row: 4px 8px; --er-density-gap: 6px; --er-density-kpi-min: 78px; } .er-module.er-pos-dense .mud-table-cell { padding-top: 6px; padding-bottom: 6px; } .er-module.er-pos-dense .ei-kpi-value { font-size: 1.35rem; } /* Touch targets stay >= 40px even in dense mode (WCAG 2.5.5 target size). */ .er-module.er-pos-dense .mud-button-root { min-height: 40px; } /* ============================================================================ SURFACES ========================================================================== */ .er-module .ei-surface { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--er-radius); } .er-module .ei-card { border-radius: var(--er-radius); } /* ============================================================================ KPI CARDS ========================================================================== */ .er-module .ei-kpi-grid { margin-top: 4px; } .er-module .ei-kpi { position: relative; overflow: hidden; min-height: var(--er-density-kpi-min); padding: var(--er-density-pad); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--er-radius); background: linear-gradient(180deg, var(--er-primary-bg), transparent), var(--mud-palette-surface); cursor: pointer; transition: transform var(--er-t), box-shadow var(--er-t), border-color var(--er-t); } /* Teal corner wash — the receipts counterpart of the invoices white glow. */ .er-module .ei-kpi::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 100px; height: 100px; background: radial-gradient(circle at top right, rgba(8, 145, 178, 0.10), transparent 70%); pointer-events: none; } .er-module .ei-kpi:hover { transform: translateY(-3px); box-shadow: var(--er-shadow-hover); border-color: var(--er-primary-border); } .er-module .ei-kpi:active { transform: translateY(-1px); } .er-module .ei-kpi:focus-visible { outline: 2px solid var(--er-primary-light); outline-offset: 2px; } .er-module .ei-kpi-label { opacity: 0.82; text-transform: uppercase; letter-spacing: 0.5px; } .er-module .ei-kpi-value { font-weight: 900; letter-spacing: -0.4px; line-height: 1.05; font-variant-numeric: tabular-nums; } .er-module .ei-kpi-foot { margin-top: 6px; opacity: 0.75; } .er-module .ei-kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .er-module .ei-kpi-icon-primary { background: linear-gradient(135deg, var(--er-primary-light) 0%, var(--er-primary-dark) 100%); box-shadow: 0 2px 8px rgba(8, 145, 178, 0.28); } .er-module .ei-kpi-icon-success { background: linear-gradient(135deg, #22c55e 0%, var(--er-accent-green) 100%); box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25); } .er-module .ei-kpi-icon-warning { background: linear-gradient(135deg, #f59e0b 0%, var(--er-accent-amber) 100%); box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25); } .er-module .ei-kpi-icon-error { background: linear-gradient(135deg, #ef4444 0%, var(--er-accent-red) 100%); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25); } .er-module .ei-kpi-icon-info { background: linear-gradient(135deg, #38bdf8 0%, var(--er-accent-blue) 100%); } .er-module .ei-kpi-icon-default { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); } /* ============================================================================ TABLE TOOLBAR ========================================================================== */ .er-module .ei-table-toolbar { position: sticky; top: 0; z-index: 4; padding: 10px 6px; gap: 12px; border-bottom: 1px solid var(--er-muted); border-start-start-radius: 12px; border-start-end-radius: 12px; background: linear-gradient(180deg, var(--er-primary-bg), transparent), var(--mud-palette-surface); backdrop-filter: blur(10px); } .er-module .ei-table-toolbar .mud-button-root, .er-module .ei-table-toolbar .mud-chip-root { height: 32px; } /* ============================================================================ TWO-COLUMN DIALOG LAYOUT These are bare layout hooks in the invoices sheet; receipts gives them real behaviour so the sidebar tracks the scrolling form on tall POS screens. ========================================================================== */ .er-module .ei-dialog { width: 100%; } .er-module .ei-dialog-main { min-width: 0; } .er-module .ei-dialog-card { overflow: hidden; } .er-module .ei-sticky-side, .er-module .ei-dialog-side .ei-sticky-side { position: sticky; top: 12px; } /* Below the lg breakpoint the sidebar stacks under the form, where sticky would trap it mid-scroll. */ @media (max-width: 1279px) { .er-module .ei-sticky-side, .er-module .ei-dialog-side .ei-sticky-side { position: static; } } /* ============================================================================ SIDEBAR CARDS ========================================================================== */ .er-module .ei-side-card { background: var(--mud-palette-surface); border: 1px solid var(--er-primary-border); border-radius: 12px; overflow: hidden; transition: box-shadow var(--er-t), border-color var(--er-t), transform var(--er-t); } .er-module .ei-side-card:hover { box-shadow: 0 6px 24px rgba(8, 145, 178, 0.12); transform: translateY(-1px); } /* Hero card — receipt identity */ .er-module .ei-side-card-hero { border-color: var(--er-primary-light); background: linear-gradient(180deg, var(--er-primary-bg), var(--mud-palette-surface)); } .er-module .ei-side-hero-header { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, var(--er-primary-light) 0%, var(--er-primary-dark) 100%); } .er-module .ei-side-hero-header::before { content: ''; position: absolute; inset-block-start: -50%; inset-inline-end: -20%; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.10); border-radius: 50%; } .er-module .ei-side-hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .er-module .ei-side-hero-label { color: rgba(255, 255, 255, 0.85); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } .er-module .ei-side-hero-title { color: #fff; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .er-module .ei-status-chip { position: relative; z-index: 1; flex-shrink: 0; height: 22px; font-weight: 700; font-size: 0.65rem; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.95) !important; color: var(--er-primary-dark) !important; } /* Info rows */ .er-module .ei-side-info-grid { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: var(--er-density-gap); } .er-module .ei-side-info-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; } .er-module .ei-side-info-icon { width: 26px; height: 26px; min-width: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--er-accent-blue-light); color: var(--er-accent-blue); } .er-module .ei-side-info-icon .mud-icon-root, .er-module .ei-side-info-icon svg { font-size: 0.875rem !important; width: 14px !important; height: 14px !important; } .er-module .ei-side-info-icon-primary { background: var(--er-primary-bg); color: var(--er-primary); } .er-module .ei-side-info-label { color: var(--mud-palette-text-secondary); font-size: 0.75rem; font-weight: 500; } .er-module .ei-side-info-value { font-weight: 700; font-size: 0.75rem; color: var(--mud-palette-text-primary); text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .er-module .ei-line-items-badge { font-weight: 800; font-size: 0.7rem; min-width: 50px; height: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25); } /* Card headers */ .er-module .ei-side-card-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .er-module .ei-side-card-header-avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.875rem !important; } .er-module .ei-side-card-header-avatar .mud-icon-root { font-size: 1rem !important; color: #fff !important; } .er-module .ei-side-card-header-avatar-teal { background: linear-gradient(135deg, var(--er-accent-teal) 0%, #0f766e 100%) !important; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25); } .er-module .ei-side-card-header-avatar-warning { background: linear-gradient(135deg, #f59e0b 0%, var(--er-accent-amber) 100%) !important; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25); } .er-module .ei-side-card-title { font-weight: 700; letter-spacing: -0.2px; color: var(--mud-palette-text-primary); font-size: 0.8125rem; } /* Totals / calculation card */ .er-module .ei-side-card-totals { background: linear-gradient(180deg, var(--er-accent-teal-light), var(--mud-palette-surface)); border-color: rgba(13, 148, 136, 0.22); } .er-module .ei-side-card-totals:hover { box-shadow: 0 6px 24px rgba(13, 148, 136, 0.12); } .er-module .ei-side-card-actions { background: linear-gradient(180deg, var(--er-accent-amber-light), var(--mud-palette-surface)); border-color: rgba(217, 119, 6, 0.18); } .er-module .ei-side-card-help { background: linear-gradient(180deg, var(--er-accent-blue-light), var(--mud-palette-surface)); border-color: rgba(2, 132, 199, 0.18); } .er-module .ei-side-card-help:hover { box-shadow: 0 6px 24px rgba(2, 132, 199, 0.10); } /* ============================================================================ TOTALS GRID ========================================================================== */ .er-module .ei-totals-grid { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; } .er-module .ei-totals-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: var(--er-density-row); border-radius: 8px; transition: background var(--er-t-fast); } .er-module .ei-totals-row:hover { background: rgba(0, 0, 0, 0.02); } .er-module .ei-totals-row-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--er-accent-teal-light); color: var(--er-accent-teal); } .er-module .ei-totals-row-icon .mud-icon-root, .er-module .ei-totals-row-icon svg { font-size: 0.8rem !important; width: 14px !important; height: 14px !important; } .er-module .ei-totals-row-icon-sales { background: var(--er-accent-blue-light); color: var(--er-accent-blue); } .er-module .ei-totals-row-icon-discount { background: var(--er-accent-red-light); color: var(--er-accent-red); } .er-module .ei-totals-row-icon-tax { background: var(--er-accent-violet-light); color: var(--er-accent-violet); } .er-module .ei-totals-row-icon-warning { background: var(--er-accent-amber-light); color: var(--er-accent-amber); } .er-module .ei-totals-row-icon-total { background: linear-gradient(135deg, var(--er-primary-light) 0%, var(--er-primary-dark) 100%); color: #fff; } .er-module .ei-totals-row-sales { background: rgba(2, 132, 199, 0.04); } .er-module .ei-totals-row-sales:hover { background: rgba(2, 132, 199, 0.08); } .er-module .ei-totals-row-discount, .er-module .ei-totals-row-extradiscount { background: rgba(220, 38, 38, 0.04); } .er-module .ei-totals-row-discount:hover, .er-module .ei-totals-row-extradiscount:hover { background: rgba(220, 38, 38, 0.08); } .er-module .ei-totals-row-tax { background: rgba(124, 58, 237, 0.04); } .er-module .ei-totals-row-tax:hover { background: rgba(124, 58, 237, 0.08); } .er-module .ei-totals-label { color: var(--mud-palette-text-secondary); font-size: 0.75rem; font-weight: 500; } .er-module .ei-totals-value { font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); text-align: end; } .er-module .ei-totals-sales { color: var(--er-accent-blue); } .er-module .ei-totals-discount { color: var(--er-accent-red); } .er-module .ei-totals-tax { color: var(--er-accent-violet); } .er-module .ei-totals-divider { height: 1px; margin: 4px 0; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--er-primary-light), transparent); } .er-module .ei-totals-row-total { margin-top: 2px; padding: 10px 12px; border: 1px solid rgba(8, 145, 178, 0.18); border-radius: 10px; background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(8, 145, 178, 0.04)); } .er-module .ei-totals-row-total:hover { background: linear-gradient(135deg, rgba(8, 145, 178, 0.16), rgba(8, 145, 178, 0.06)); } .er-module .ei-totals-total-label { font-weight: 800; font-size: 0.8125rem; letter-spacing: -0.2px; color: var(--mud-palette-text-primary); } .er-module .ei-totals-total-value { font-weight: 900; font-size: 1rem; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; color: var(--er-primary-dark); } /* ============================================================================ BUTTONS ========================================================================== */ .er-module .ei-btn { border-radius: var(--er-radius-sm); font-weight: 600; transition: transform var(--er-t-fast), box-shadow var(--er-t-fast); } .er-module .ei-btn:not(:disabled):hover { transform: translateY(-1px); } .er-module .ei-actions-stack { padding: 10px 14px 14px; } .er-module .ei-action-btn { border-radius: var(--er-radius-sm) !important; font-weight: 600; letter-spacing: -0.1px; transition: transform var(--er-t-fast), box-shadow var(--er-t-fast), opacity var(--er-t-fast); } .er-module .ei-action-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .er-module .ei-action-btn-primary { box-shadow: 0 2px 8px rgba(8, 145, 178, 0.28); } .er-module .ei-action-btn-primary:not(:disabled):hover { box-shadow: 0 4px 16px rgba(8, 145, 178, 0.38); } .er-module .ei-action-btn-validate { border-width: 2px; } .er-module .ei-action-btn-text { opacity: 0.85; } .er-module .ei-action-btn-text:hover { opacity: 1; background: rgba(0, 0, 0, 0.04); } /* ============================================================================ SECTION HEADERS ========================================================================== */ .er-module .ei-section-header { display: flex; align-items: center; gap: 12px; padding: 4px 0; flex-wrap: wrap; } .er-module .ei-section-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--er-primary-light) 0%, var(--er-primary-dark) 100%); box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25); } .er-module .ei-section-icon .mud-icon-root, .er-module .ei-section-icon svg { font-size: 1rem !important; color: #fff !important; fill: #fff !important; } .er-module .ei-section-icon-warning { background: linear-gradient(135deg, #f59e0b 0%, var(--er-accent-amber) 100%) !important; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25); } .er-module .ei-section-icon-teal { background: linear-gradient(135deg, var(--er-accent-teal) 0%, #0f766e 100%) !important; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25); } .er-module .ei-section-titles { display: flex; flex-direction: column; gap: 2px; } .er-module .ei-section-title { font-weight: 700; letter-spacing: -0.2px; color: var(--mud-palette-text-primary); } /* ============================================================================ RECEIPT LIFECYCLE BADGES (module-owned) One badge per ReceiptStatuses value. Colour encodes urgency, and the border keeps the state legible for colour-blind users and on monochrome POS screens. ========================================================================== */ .er-lifecycle { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--er-radius-pill); border: 1px solid transparent; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; } .er-lifecycle-draft { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.35); color: #475569; } .er-lifecycle-validated { background: rgba(2, 132, 199, 0.12); border-color: rgba(2, 132, 199, 0.35); color: #075985; } .er-lifecycle-queued { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.35); color: #92400e; } .er-lifecycle-submitted { background: rgba(8, 145, 178, 0.12); border-color: rgba(8, 145, 178, 0.35); color: var(--er-primary-dark); } .er-lifecycle-valid { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.35); color: #15803d; } .er-lifecycle-invalid, .er-lifecycle-rejected { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.35); color: #b91c1c; } .er-lifecycle-returned { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.35); color: #6d28d9; } /* Queued receipts are awaiting an automatic retry — a slow pulse marks them as in-flight rather than stalled. */ .er-lifecycle-queued::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: er-pulse 1.8s ease-in-out infinite; } @keyframes er-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ============================================================================ THERMAL RECEIPT PREVIEW (module-owned) Mirrors the 80 mm output of ReceiptPdfHtmlBuilder so what the cashier sees on screen matches what the roll printer produces. ========================================================================== */ .er-print-preview { width: 302px; /* 80mm at 96dpi, less the 2mm hairline margins */ margin-inline: auto; padding: 12px 10px; background: #fff; color: #000; border: 1px solid var(--er-muted); border-radius: 4px; box-shadow: var(--er-shadow); font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Naskh Arabic', Arial, sans-serif; font-size: 11px; line-height: 1.45; } .er-print-preview .er-pp-center { text-align: center; } .er-print-preview .er-pp-shop { font-size: 15px; font-weight: 700; } .er-print-preview .er-pp-rule { border: none; border-top: 1px dashed #000; margin: 6px 0; } .er-print-preview .er-pp-total { border-top: 1px solid #000; padding-top: 3px; font-size: 13px; font-weight: 700; } /* Serrated top/bottom edge, like torn roll paper. */ .er-print-preview::before, .er-print-preview::after { content: ''; display: block; height: 6px; background: repeating-linear-gradient(135deg, var(--er-muted) 0 4px, transparent 4px 8px); } /* ============================================================================ RESPONSIVE — tablet & POS terminals ========================================================================== */ @media (max-width: 960px) { .er-module .ei-kpi { min-height: 84px; padding: 12px 14px; } .er-module .ei-kpi-icon { width: 36px; height: 36px; } /* Toolbar buttons wrap instead of overflowing off-screen. */ .er-module .ei-table-toolbar { flex-wrap: wrap; } } @media (max-width: 600px) { .er-module .ei-side-hero-title { white-space: normal; } .er-module .ei-side-info-row { grid-template-columns: 22px 1fr auto; } .er-print-preview { width: 100%; } } /* ============================================================================ DASHBOARD The overview page is built to the same plan as the invoices dashboard and so reuses its primitives, but the invoices sheet themes several of them in its own blue under `.ei-dashboard-page`. Those selectors carry the same specificity as the `.er-module` ones here, and this file is linked after theirs, so declaring them again is all it takes to bring the page back into the receipts palette. Only the classes the invoices sheet leaves blue are repeated below; anything the surfaces and KPI sections above already claim needs no second mention. ========================================================================== */ .er-module .ei-pill { padding: 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--er-radius-sm); background: rgba(8, 145, 178, 0.04); cursor: pointer; transition: transform var(--er-t), box-shadow var(--er-t), background var(--er-t); } .er-module .ei-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); background: var(--er-primary-bg); } .er-module .ei-pill:focus-visible { outline: 2px solid var(--er-primary-light); outline-offset: 2px; } .er-module .ei-pill-success { background: var(--er-accent-green-light); border-color: rgba(22, 163, 74, 0.3); } .er-module .ei-pill-alert { background: var(--er-accent-red-light); border-color: rgba(220, 38, 38, 0.35); } /* Eight lifecycle states rather than the invoices module's seven: a receipt can also be Returned, and the strip is the one place that shows every state at once. */ .er-module .er-status-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--er-density-gap); } @media (max-width: 1600px) { .er-module .er-status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 600px) { .er-module .er-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .er-module .er-status-strip .ei-pill { min-width: 0; padding: 8px 10px; } /* Each pill's label is the only elastic part of its row, so it is the part that ellipsises when a translation runs long. */ .er-module .er-status-strip .ei-pill-head { min-width: 0; } .er-module .er-status-strip .ei-pill-head .mud-typography { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .er-module .ei-progress-bar { height: 10px !important; } /* A rejected tile keeps drawing the eye until the count clears. */ .er-module .ei-kpi-alert { border-color: var(--er-accent-red); animation: er-pulse-error 2s infinite; } @keyframes er-pulse-error { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } .er-module .ei-time-ago { opacity: 0.7; font-style: italic; } .er-module .ei-legend { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .er-module .ei-aging-row { padding: 8px 0; } .er-module .ei-aging-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .er-module .ei-aging-total { padding: 12px; margin-top: 8px; border-radius: var(--er-radius-sm); background: var(--er-primary-bg); } .er-module .ei-customer-row { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--er-radius-sm); background: rgba(127, 127, 127, 0.03); transition: background var(--er-t), transform var(--er-t); } .er-module .ei-customer-row:hover { background: var(--er-primary-bg); transform: translateX(4px); } .er-module .ei-timeline .mud-timeline-item-content { padding-bottom: 16px; } /* The stuck-receipts alert is a filled warning, so its action has to be drawn in the alert's own foreground colour rather than the theme's. */ .er-module .er-alert-action { color: #fff; border-color: rgba(255, 255, 255, 0.7); } /* ============================================================================ ACCESSIBILITY ========================================================================== */ /* Deliberately enumerated rather than `.er-module :focus-visible`: the scope class sits on , so a bare descendant selector would restyle the app shell too. */ .er-module .ei-side-card :focus-visible, .er-module .ei-table-toolbar :focus-visible, .er-module .ei-action-btn:focus-visible, .er-module .ei-btn:focus-visible { outline: 2px solid var(--er-primary-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .er-module { --er-t-fast: 0s; --er-t: 0s; } .er-module .ei-kpi:hover, .er-module .ei-pill:hover, .er-module .ei-customer-row:hover, .er-module .ei-side-card:hover, .er-module .ei-btn:not(:disabled):hover, .er-module .ei-action-btn:not(:disabled):hover { transform: none; } .er-module .ei-kpi-alert, .er-lifecycle-queued::before { animation: none; } } /* ============================================================================ RETURN RECEIPT WIZARD The wizard reuses the `ei-cn-*` primitives, which are loaded globally from the shared dialog stylesheet — the same borrowing every other `ei-*` class in this file is built on. Only the colours need re-theming: left alone, the selected mode card and the included rows would come out in the invoices module's blue and green inside a teal module, which is exactly the mismatch this file exists to prevent. Amber for the return accent rather than green: money going back to a customer is not a success state, and the module already reads amber as "needs a look". ========================================================================== */ .er-module .ei-cn-mode-card:hover { border-color: var(--er-accent-teal); background: var(--er-accent-teal-light); } .er-module .ei-cn-mode-card:focus-visible { outline-color: var(--er-accent-teal); } .er-module .ei-cn-mode-card-selected { border-color: var(--er-accent-amber) !important; background: var(--er-accent-amber-light) !important; box-shadow: 0 4px 18px rgba(217, 119, 6, 0.16); } .er-module .ei-cn-mode-avatar-on { background: linear-gradient(135deg, var(--er-accent-amber) 0%, #b45309 100%) !important; } .er-module .ei-cn-mode-amount { color: var(--er-accent-amber); } .er-module .ei-cn-row-on { background: var(--er-accent-amber-light) !important; } /* Quantity fields sit in a column of their own on a touchscreen till, where the wider hit area of the spinners matters more than the couple of pixels it costs. */ .er-module .ei-cn-qty { max-width: 140px; } /* The returned marker beside a receipt's lifecycle badge. Sized to sit level with the badge's own pill rather than growing the row, since the Status column is one line on most rows. */ .er-returned-chip { font-weight: 600; height: 22px; } /* ============================================================================ EXPANDED ROW — inline line items (same primitives as the invoice grid's child row, re-themed to the receipts teal) ========================================================================== */ .er-module .ei-child-row { background: transparent; } .er-module .ei-child-surface { position: relative; margin: 8px 12px 16px 12px; padding: 12px; background: var(--er-primary-bg); border: 2px solid var(--er-primary-border); border-radius: var(--er-radius); overflow: hidden; } .er-module .ei-child-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--er-primary-light), var(--er-primary-bg)); } /* Second fold inside the child row: a line item's taxes. Slightly deeper tint than the surrounding surface so the nesting reads at a glance, without another rail. */ .er-module .ei-taxes-row > td { border-bottom: none; } .er-module .ei-taxes-surface { background: color-mix(in srgb, var(--er-primary-bg) 55%, white); border: 1px dashed var(--er-primary-border); border-radius: calc(var(--er-radius) - 4px); } /* High-contrast mode: keep state legible when the OS drops our palette. */ @media (forced-colors: active) { .er-lifecycle { border-color: CanvasText; } .er-module .ei-kpi, .er-module .ei-side-card { border-color: CanvasText; } } /* ============================================================================ PRINT — browser Ctrl+P of a receipts page ========================================================================== */ @media print { .er-module .ei-table-toolbar, .er-module .ei-side-card-actions, .er-module .ei-side-card-help, .er-module .ei-kpi-grid { display: none !important; } .er-module .ei-side-card, .er-module .ei-surface { border-color: #000; box-shadow: none; } .er-print-preview { border: none; box-shadow: none; } }