/* ============================================================================ UNIQ design tokens — ported from Uni.CRM.Monolith (wwwroot/css/uniq.css). Marine palette. Dark is the :root default; light overrides via .uniq-light on , which the head script in App.razor sets before first paint. The MudBlazor palette mirroring these values lives in Theme/UniqTheme.cs. ============================================================================ */ :root, .uniq-dark { --uniq-bg: #060a14; --uniq-surface: #0a1220; --uniq-surface2: #0f1a2c; --uniq-surface3: #162238; --uniq-line: rgba(170, 195, 230, 0.08); --uniq-line-strong: rgba(170, 195, 230, 0.16); --uniq-text: #e6ecf5; --uniq-text-dim: #8a97ad; --uniq-text-mute: #5d6a80; --uniq-accent: #2f7ccb; --uniq-accent-soft: rgba(47, 124, 203, 0.16); --uniq-accent-line: rgba(47, 124, 203, 0.38); --uniq-brand: #e8413d; --uniq-brand-soft: rgba(232, 65, 61, 0.14); --uniq-brand-line: rgba(232, 65, 61, 0.38); --uniq-ok: #5fa98c; --uniq-warn: #d8a860; --uniq-bad: #e8413d; --uniq-info: #6b9bc4; } .uniq-light { --uniq-bg: #f2f5fa; --uniq-surface: #ffffff; --uniq-surface2: #f6f9fd; --uniq-surface3: #ebf0f7; --uniq-line: rgba(0, 71, 155, 0.10); --uniq-line-strong: rgba(0, 71, 155, 0.22); --uniq-text: #0b1a30; --uniq-text-dim: #4d6075; --uniq-text-mute: #8293a8; --uniq-accent: #00479b; --uniq-accent-soft: rgba(0, 71, 155, 0.08); --uniq-accent-line: rgba(0, 71, 155, 0.28); --uniq-brand: #db0d08; --uniq-brand-soft: rgba(219, 13, 8, 0.08); --uniq-brand-line: rgba(219, 13, 8, 0.30); --uniq-ok: #1f7a48; --uniq-warn: #8a5a10; --uniq-bad: #db0d08; --uniq-info: #2e6494; } html, body { margin: 0; background: var(--uniq-bg); color: var(--uniq-text); font-family: 'Inter', 'Geist', system-ui, sans-serif; } code { color: #c02d76; } /* Typography utilities */ .uniq-sans { font-family: 'Inter', 'Geist', system-ui, sans-serif; } .uniq-mono { font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .uniq-caps { letter-spacing: .06em; text-transform: uppercase; } /* Numeric cell helper */ .uniq-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Account pages are a narrow single column by default. A page that needs the width says so by putting .account-wide on its own root — the layout cannot be told from the page it renders. */ .account-shell { width: 100%; max-width: 26rem; margin-inline: auto; } .account-shell:has(.account-wide) { max-width: 60rem; } /* Account pages render statically. MudBlazor lifts the label and opens the outlined border's notch from C#, which needs a re-render there is no circuit for — so on these pages the typed text drives both. Values mirror MudBlazor's own .mud-shrink rules for the outlined variant. */ .mud-input.mud-input-outlined:has(input:not(:placeholder-shown)) ~ label.mud-input-label.mud-input-label-inputcontrol { transform: translate(14px, -6px) scale(0.75); max-width: calc((100% - 14px) / 0.75); } .mud-input.mud-input-outlined:has(input:not(:placeholder-shown)) > .mud-input-outlined-border legend { width: auto; padding: 0 5px; } .qty-center input { text-align: center; } /* Write-off editor dialog. Grid instead of flex: Mud input roots have their own flex rules, and combining them with a wrapping flex row scattered the fields. */ .writeoff-head { display: grid; grid-template-columns: 190px 280px; gap: 12px; } /* Mud input roots carry flex:1 1 auto, so in any wide cell the field grows and pushes the + button away from the number. Pin the field so [-][value][+] stays compact. */ .qty-stepper { display: flex; align-items: center; justify-content: center; gap: 4px; } .qty-stepper .mud-input-control { flex: 0 0 auto; width: 90px; } /* MudSelect puts Class/Style on its inner input control, so the bare .mud-select root keeps flex-grow:1 and opens a gap between the visible 110px box and the next field. */ .additional-line > .mud-select { flex: 0 0 auto; width: 110px; } .writeoff-line { display: grid; grid-template-columns: minmax(280px, 2fr) 170px minmax(180px, 1fr) auto; gap: 12px; align-items: center; } @media (max-width: 900px) { .writeoff-head, .writeoff-line { grid-template-columns: 1fr 1fr; } } /* Phone app bar: the email plus labelled Profile/Sign out buttons overflow a 360-430px viewport, so below 600px the email hides and the buttons collapse to their icons. */ @media (max-width: 599px) { .mud-appbar .user-email { display: none; } .mud-appbar .mud-button .mud-button-label { display: none; } .mud-appbar .mud-button .mud-button-icon-start { margin: 0; } .mud-appbar .mud-button { min-width: 0; padding: 6px 8px; } .mud-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; } } /* MudBlazor draws its checkbox as an SVG it swaps from C#, so a static page keeps the native one. */ .account-checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.875rem; } .validation-message { color: #b00020; font-size: 0.8rem; } /* ============================================================================ UNIQ × MudBlazor — generic overrides ported from uniq-mud.css: tables, filter bars and control sizing follow the design tokens. Opt in per component with Class="uniq-mud-table" / Class="uniq-filter-bar". ============================================================================ */ /* ---------- Filter bar — normalize MudTextField/MudSelect compactness ---------- */ .uniq-filter-bar { border-bottom: 1px solid var(--uniq-line); } .uniq-filter-bar .mud-input-label, .uniq-filter-bar .mud-input-label-animated { font-size: 11px !important; } .uniq-filter-bar .mud-input-outlined-border { border-color: var(--uniq-line-strong) !important; } /* Text buttons (clear etc.) and boolean inputs center against the input height instead of hugging the bottom edge. The nudge compensates the floating label that overhangs the outlined border. */ .uniq-filter-bar .mud-button-text, .uniq-filter-bar .mud-input-control-boolean-input { align-self: center; margin-top: 4px; } /* ---------- MudTable — compact, token-driven ---------- */ .uniq-mud-table.mud-table { background: transparent; font-size: 12.5px; } .uniq-mud-table .mud-table-container { background: transparent; } .uniq-mud-table .mud-table-root { border-collapse: collapse; } .uniq-mud-table .mud-table-head .mud-table-cell { font-size: 10.5px; color: var(--uniq-text-mute); letter-spacing: .3px; text-transform: uppercase; font-weight: 500; padding: 8px 12px; background: var(--uniq-surface2); border-bottom: 1px solid var(--uniq-line); } .uniq-mud-table .mud-table-body .mud-table-cell { padding: 10px 12px; border-bottom: 1px solid var(--uniq-line); vertical-align: middle; color: var(--uniq-text); } /* Loading / no-records row. Mud paints it with --mud-palette-surface, which is white until the theme provider learns the theme — that only happens after the first render, one JS hop later, while the html class the head script set has already darkened everything around it. */ .mud-table-empty-row { background: transparent; } /* Hover — subtle surface, not Material blue */ .uniq-mud-table .mud-table-body .mud-table-row:hover, .uniq-mud-table .mud-table-body .mud-table-row.mud-table-row-hover:hover { background: var(--uniq-surface2) !important; } /* Selected — accent stripe */ .uniq-mud-table .mud-table-body .mud-selected-item { background: var(--uniq-accent-soft) !important; box-shadow: inset 2px 0 0 var(--uniq-accent); } /* Remove Material elevation from panel-wrapped tables */ .uniq-mud-table.mud-table.mud-elevation-0 { box-shadow: none; } /* Pagination / footer buttons — lighter */ .uniq-mud-table + .mud-stack .mud-button-text { color: var(--uniq-text-dim); } /* ---------- Control sizing — Mud defaults are too large for the dense look ---------- */ .mud-button-root.mud-button-size-small { font-size: 11.5px !important; letter-spacing: .2px; min-height: 26px; padding: 2px 10px; } .mud-button-root.mud-button-size-small .mud-icon-root.mud-svg-icon { font-size: 14px !important; height: 14px; width: 14px; } .mud-toggle-group .mud-toggle-item { font-size: 11.5px !important; letter-spacing: .2px; min-height: 26px; padding: 2px 10px; } .mud-toggle-group.mud-toggle-group-size-small .mud-toggle-item { font-size: 11.5px !important; min-height: 24px; padding: 0 10px; } .mud-input-label, .mud-input-label-animated { font-size: 11.5px; } .mud-input-root input, .mud-input-root .mud-select-input { font-size: 12.5px; } .mud-typography-caption { font-size: 11px; } /* ---------- List popovers — kill the double scrollbar ---------- */ /* The popover scrolls (inline style or .overflow-y-auto) AND .mud-list scrolls (max-height:inherit); the popover's 2px of borders make the list overflow the content box by exactly that much → two scrollbars. Scroll the list only; flex fits it under the max-height. */ .mud-popover:has(> .mud-list) { overflow-y: hidden !important; display: flex; flex-direction: column; } .mud-popover:has(> .mud-list) > .mud-list { flex: 1 1 auto; min-height: 0; }