/* GGS Invoice Workflow - small additions on top of MudBlazor. Colours come from the MudTheme in Services/GgsTheme.cs; fonts from the prototype. */ :root { --ggs-font-display: 'Montserrat', system-ui, sans-serif; --ggs-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --ggs-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --mud-typography-default-family: var(--ggs-font-body) !important; --mud-typography-body1-family: var(--ggs-font-body) !important; --mud-typography-body2-family: var(--ggs-font-body) !important; --mud-typography-subtitle1-family: var(--ggs-font-body) !important; --mud-typography-subtitle2-family: var(--ggs-font-body) !important; --mud-typography-button-family: var(--ggs-font-body) !important; --mud-typography-caption-family: var(--ggs-font-body) !important; --mud-typography-overline-family: var(--ggs-font-body) !important; --mud-typography-h1-family: var(--ggs-font-display) !important; --mud-typography-h2-family: var(--ggs-font-display) !important; --mud-typography-h3-family: var(--ggs-font-display) !important; --mud-typography-h4-family: var(--ggs-font-display) !important; --mud-typography-h5-family: var(--ggs-font-display) !important; --mud-typography-h6-family: var(--ggs-font-display) !important; } html, body { font-family: var(--ggs-font-body); } .mono, .mono input { font-family: var(--ggs-font-mono) !important; } .mud-button-root { text-transform: none !important; font-weight: 600 !important; } /* ---------- boot / errors ---------- */ .boot-loading { padding: 48px; text-align: center; color: #8497ad; font-family: var(--ggs-font-body); } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: 12px 20px; background: #fbe7e4; color: #c13b30; box-shadow: 0 -1px 4px rgba(0,0,0,.2); } #blazor-error-ui .reload { margin-left: 12px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; } /* ---------- global loader: a flipping invoice page ---------- Shown by LoaderService only when an API call runs longer than its delay. */ .ggs-loader-overlay { background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent) !important; } .ggs-page-flip { width: 44px; height: 56px; position: relative; border-radius: 3px; background: var(--mud-palette-surface); border: 2px solid var(--mud-palette-primary); box-shadow: 0 4px 10px rgba(0,0,0,.12); animation: ggs-flip-page 1.5s infinite ease-in-out; } /* The invoice rulings; the orange one is the total. */ .ggs-page-flip::after { content: ''; position: absolute; top: 8px; left: 6px; right: 6px; height: 2px; background: var(--mud-palette-primary); opacity: .4; box-shadow: 0 8px 0 var(--mud-palette-primary), 0 16px 0 var(--mud-palette-secondary), 0 24px 0 var(--mud-palette-primary); } @keyframes ggs-flip-page { 0% { transform: perspective(140px) rotateX(0deg) rotateY(0deg); } 25% { transform: perspective(140px) rotateX(-180.1deg) rotateY(0deg); } 50% { transform: perspective(140px) rotateX(-180deg) rotateY(-179.9deg); } 75% { transform: perspective(140px) rotateX(0deg) rotateY(-180.1deg); } 100% { transform: perspective(140px) rotateX(0deg) rotateY(0deg); } } /* A 1.5s infinite 3D flip is exactly what this setting exists to stop. */ @media (prefers-reduced-motion: reduce) { .ggs-page-flip { animation: ggs-flip-fade 1.2s infinite ease-in-out; } @keyframes ggs-flip-fade { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } } /* ---------- shell: white app bar over a navy drawer ---------- */ /* The bar is the same white as the page surface, so it needs a hairline to separate it. */ .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); } /* Drawer sits on navy: soften the idle nav items, let the active one carry the accent. */ .mud-drawer .mud-nav-link { color: var(--mud-palette-drawer-text); opacity: .85; } .mud-drawer .mud-nav-link:hover { opacity: 1; background: rgba(255,255,255,.07); } .mud-drawer .mud-nav-link.active { opacity: 1; background: rgba(255,255,255,.10); font-weight: 700; } .nav-footnote { color: var(--mud-palette-drawer-text); opacity: .6; } /* ---------- brand ---------- */ /* logowtext.png is 1024x371 (~2.76:1) with an alpha channel; navy + orange on the white bar. */ .brand-logo { height: 34px; width: auto; flex: none; display: block; } .brandmark { width: 30px; height: 30px; flex: none; } .brand-co { font-family: var(--ggs-font-display); font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: .01em; } .brand-prod { font-size: 11.5px; opacity: .75; line-height: 1.1; } /* ---------- global search ---------- */ .gs-wrap { position: relative; width: min(420px, 42vw); } .gs-wrap .mud-input-control { margin-top: 0 !important; } .gs-results { width: min(460px, 92vw); max-height: 60vh; overflow-y: auto; } .gs-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--mud-palette-lines-default); } .gs-item:last-child { border-bottom: none; } .gs-item:hover, .gs-item.active { background: var(--mud-palette-action-default-hover); } .gs-item .gs-main { flex: 1; min-width: 0; } /* ---------- queue board ---------- */ .board-col + .board-col { margin-top: 28px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .card-list { display: flex; flex-direction: column; gap: 8px; } .inv-card { cursor: pointer; height: 100%; display: flex; flex-direction: column; transition: border-color .15s; } .inv-card:hover { border-color: var(--mud-palette-primary) !important; } .inv-meta { display: flex; flex-wrap: wrap; gap: 6px; } .inv-meta span { font-size: 11.5px; background: var(--mud-palette-background-gray); border-radius: 6px; padding: 2px 7px; color: var(--mud-palette-text-secondary); } .inv-row { cursor: pointer; } .group-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; border-bottom: 1px dashed var(--mud-palette-lines-default); margin-top: 6px; } /* ---------- approval trail ---------- */ .trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; } .trail .step { color: var(--mud-palette-text-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; } .trail .step.done { color: var(--mud-palette-success); } .trail .step.next { color: var(--mud-palette-warning); font-weight: 700; } .trail .sep { color: var(--mud-palette-lines-inputs); } /* ---------- dashboard distribution bar ---------- */ .distbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--mud-palette-background-gray); } .distbar i { height: 100%; } .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } /* ---------- intake drop zone ---------- */ .dropzone { position: relative; border: 2px dashed var(--mud-palette-lines-inputs); border-radius: 12px; padding: 28px 20px; display: flex; align-items: center; gap: 16px; transition: border-color .15s, background .15s; } .dropzone.dragover, .dropzone:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); } .dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .dropzone.busy input[type=file] { cursor: progress; } /* ---------- focus flash when arriving from "View in Queue" ---------- */ @keyframes flashbg { 0% { box-shadow: 0 0 0 3px var(--mud-palette-info); } 100% { box-shadow: 0 0 0 0 transparent; } } .flash { animation: flashbg 1.6s ease; } .detail-drawer .mud-drawer-content { padding: 0; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; } .kv dt { color: var(--mud-palette-text-secondary); font-size: 13px; } .kv dd { margin: 0; font-weight: 600; font-size: 13.5px; } /* ---------- sign-in hero ---------- Fixed navy palette on purpose: this screen is the same in light and dark mode. The photo is decorative - if it fails to load, the gradient below it still reads. */ .ggs-login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #122c4a; overflow: auto; } .ggs-login::before { content: ""; position: absolute; inset: 0; background-image: url("https://images.unsplash.com/photo-1577700449511-fb8b71d9d96d?q=80&w=2070&auto=format&fit=crop"); background-size: cover; background-position: center; filter: grayscale(1); opacity: .5; mix-blend-mode: luminosity; } /* Gradient overlay, plus a soft glow behind the card so the flat navy has some depth. */ .ggs-login::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 72% 45%, rgba(232,123,34,.16), transparent 70%), radial-gradient(55% 50% at 20% 60%, rgba(122,167,217,.12), transparent 70%), linear-gradient(to right, rgba(18,44,74,.95), rgba(18,44,74,.70), rgba(18,44,74,.90)); } .ggs-login-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 32px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #c7d5e5; opacity: .55; } .ggs-login-foot .sep { opacity: .5; } @media (min-width: 1200px) { .ggs-login-foot { padding: 22px 48px; } } /* Capped just past hero (576) + card (500) + gap, so the pair stays grouped rather than drifting to opposite edges of a wide monitor. */ .ggs-login-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 32px; } .ggs-hero { display: none; color: #fff; max-width: 576px; } .ggs-hero .bar { width: 64px; height: 6px; background: #e87b22; border-radius: 999px; margin-bottom: 32px; } /* Scales gently with the viewport so the hero does not read as undersized on a large monitor, with hard bounds so it never dominates or shrinks away. */ .ggs-hero h1 { font-family: var(--ggs-font-display); font-size: clamp(42px, 3.2vw, 58px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 24px; outline: none; } .ggs-hero p { font-size: 18px; font-weight: 500; line-height: 1.65; color: #c7d5e5; max-width: 448px; margin: 0; } @media (min-width: 1200px) { /* Stays centred with a fixed gap. space-between would push the two panels to the container edges, so the space between them would grow with the screen. */ .ggs-login-inner { gap: 96px; padding: 48px; } .ggs-hero { display: block; } } .ggs-login-card { position: relative; overflow: hidden; flex: none; width: 100%; max-width: 500px; background: #fff; border-radius: 16px; padding: 48px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); } .ggs-login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: #e87b22; } /* The logo is square with a lot of vertical whitespace; the fixed-height window crops it. */ .ggs-login-logo { height: 132px; margin-bottom: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ggs-login-logo img { width: 300px; height: 300px; object-fit: contain; } .ggs-field { margin-bottom: 26px; } .ggs-field > label { display: block; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; } .ggs-field .mud-input-control { margin-top: 0 !important; } .ggs-field .mud-input > input { font-size: 18px; font-weight: 700; color: #122c4a; padding-top: 10px; padding-bottom: 10px; } .ggs-field .mud-input > input::placeholder { font-weight: 500; color: #9ca3af; } .ggs-field .mud-input.mud-input-underline:before { border-bottom: 2px solid #e5e7eb !important; } .ggs-field .mud-input.mud-input-underline:after { border-bottom: 2px solid #122c4a !important; } .ggs-pass .mud-input > input { letter-spacing: .3em; } .ggs-signin-btn { width: 100%; margin-top: 8px; background: #122c4a !important; color: #fff !important; border-radius: 12px !important; padding: 15px 0 !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; box-shadow: 0 20px 25px -5px rgba(18,44,74,.3) !important; } .ggs-signin-btn:hover { background: #1a3c63 !important; } @media (max-width: 599px) { .ggs-login-inner { padding: 16px; } .ggs-login-card { padding: 32px 24px; } } /* ---------- invoice routing matrix ---------- */ /* Wide grids scroll inside their own box; the invoice-type column stays pinned so a row stays identifiable once the user columns scroll out of view. */ .routing-scroll { overflow-x: auto; } .routing-table { border-collapse: separate; border-spacing: 0; width: 100%; } .routing-table th, .routing-table td { padding: 10px 12px; text-align: center; white-space: nowrap; } .routing-table thead th { border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); } .routing-table tbody tr:not(:last-child) th, .routing-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--mud-palette-lines-default); } .routing-table tbody tr:hover td { background: var(--mud-palette-action-default-hover); } .routing-rowhead { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); text-align: left !important; font-weight: 700; color: var(--mud-palette-text-primary); min-width: 220px; } .routing-user { font-weight: 700; color: var(--mud-palette-text-primary); text-transform: none; letter-spacing: 0; } .routing-role { font-size: 11px; color: var(--mud-palette-text-secondary); text-transform: none; letter-spacing: 0; } .routing-actions { width: 48px; } .routing-cell { width: 40px; height: 34px; border-radius: 8px; cursor: pointer; font-family: var(--ggs-font-mono); font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: transform .08s ease, box-shadow .12s ease; } .routing-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(18,44,74,.18); } .routing-cell:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } .routing-cell.is-empty { background: transparent; color: var(--mud-palette-text-disabled); border-color: var(--mud-palette-lines-default); } .routing-cell.is-step { background: rgba(33,102,168,.12); color: #2166a8; border-color: rgba(33,102,168,.28); } .routing-cell.is-final { background: #122c4a; color: #fff; border-color: #122c4a; } /* ---------- send for approval cards ---------- */ .sfa-bulkbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--mud-palette-primary-hover); } .sfa-bulk-text { font-weight: 700; color: var(--mud-palette-primary); flex: 1; font-size: 13px; } .sfa-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .sfa-card { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; } .sfa-card:hover { box-shadow: 0 4px 14px rgba(18,44,74,.10); } .sfa-card.is-selected { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); } .sfa-card-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); } .sfa-ref { flex: 1; font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); } .sfa-card-body { padding: 10px 14px 12px; flex: 1; } .sfa-vendor { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--mud-palette-text-primary); } .sfa-amount { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--mud-palette-text-primary); } .sfa-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .sfa-tag { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); } .sfa-chain-title { margin-top: 12px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); } .sfa-chain-sub { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; } .sfa-approver { display: flex; align-items: center; gap: 7px; padding: 3px 0; } .sfa-step { width: 14px; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); } .sfa-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--mud-palette-primary); color: #fff; flex: none; } .sfa-approver-name { font-weight: 600; font-size: 13px; color: var(--mud-palette-text-primary); } .sfa-approver-role { font-size: 11px; color: var(--mud-palette-text-secondary); } .sfa-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); } /* The full chain already reads down the card; the footer echo is a one-line reminder. */ .sfa-chain-summary { font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* An approver ticked off for this one invoice; the routing rule still lists them. */ .sfa-approver.is-skipped .sfa-approver-name, .sfa-approver.is-skipped .sfa-approver-role { text-decoration: line-through; opacity: .5; } .sfa-approver.is-skipped .sfa-avatar { background: var(--mud-palette-text-disabled); } /* ---------- my approvals: dense grid with a dark action bar ---------- */ .ma-approvals { overflow: hidden; } .ma-actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: #122c4a; color: #fff; } .ma-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,.14); font-weight: 700; } .ma-count-label { font-weight: 700; font-size: 15px; } .ma-divider { width: 1px; height: 22px; background: rgba(255,255,255,.25); margin: 0 6px; } .ma-sum-label { opacity: .75; font-size: 13px; } .ma-sum { font-size: 20px; font-weight: 700; color: #e87b22; letter-spacing: -.01em; } .ma-sum-cur { font-size: 12px; opacity: .75; } .ma-actions { margin-left: auto; display: flex; gap: 10px; } /* Outlined-on-navy: MudBlazor's own outline colour would disappear against the bar. */ .ma-reject { color: #fff !important; border-color: rgba(255,255,255,.55) !important; } .ma-reject:hover { background: rgba(255,255,255,.10) !important; } .ma-scroll { overflow-x: auto; } .ma-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ma-table th, .ma-table td { padding: 10px 14px; text-align: left; white-space: nowrap; } .ma-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); border-bottom: 1px solid var(--mud-palette-lines-default); } .ma-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--mud-palette-lines-default); } .ma-table tbody tr:hover td { background: var(--mud-palette-action-default-hover); } .ma-table tbody tr.is-selected td { background: var(--mud-palette-primary-hover); } .ma-check { width: 44px; } .ma-num { text-align: right !important; font-weight: 700; font-size: 15px; } .ma-doc { width: 96px; text-align: center !important; } .ma-inv { font-weight: 700; font-size: 13px; color: var(--mud-palette-text-primary); } .ma-vendor { font-size: 12px; color: var(--mud-palette-text-secondary); } .ma-sub { font-size: 11px; color: var(--mud-palette-text-secondary); } /* ---------- status pill ---------- */ .status-pill { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1px solid transparent; white-space: nowrap; } .status-pill.is-active { color: #0f7b52; background: #edfaf3; border-color: #bfe8d4; } .status-pill.is-inactive { color: #6b7280; background: #f3f4f6; border-color: #e0e2e6; } /* ---------- required-field asterisk ---------- MudBlazor draws it as ::after on the label; inheriting the label colour makes it read as part of the field name rather than as a requirement. */ .mud-input-required > .mud-input-control-input-container > .mud-input-label::after { color: var(--mud-palette-error); font-weight: 700; margin-left: 2px; } /* ---------- dashboard ---------- */ .dash-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* display is set explicitly: a bare